@invoicebox/ui 0.1.0-alpha.184 → 0.1.0-alpha.186

package/dist/components/form/Select/index.d.ts

@@ -9,6 +9,7 @@ export type TOption<TValue> = {
 export type TGroup = {
     label: string;
     id: string;
+    entity?: unknown;
 };
 export type TProps<TValue> = Pick<TInputProps, 'label' | 'hasError' | 'placeholder' | 'name' | 'size'> & {
     value: TValue | null;
@@ -17,8 +18,9 @@ export type TProps<TValue> = Pick<TInputProps, 'label' | 'hasError' | 'placehold
     groups?: TGroup[];
     isResetButtonEnabled?: boolean;
     renderOption?: (entity?: any) => ReactNode;
+    renderGroup?: (entity?: any) => ReactNode;
     dropdownHeader?: ReactNode;
     isDrawerOptions?: boolean;
     scrollbarMaxHeight?: number;
 };
-export declare const Select: <TValue extends string | number>({ label, hasError, placeholder, name, value, onChange, options, groups, isResetButtonEnabled, size, renderOption, dropdownHeader, isDrawerOptions, scrollbarMaxHeight, }: TProps<TValue>) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: <TValue extends string | number>({ label, hasError, placeholder, name, value, onChange, options, groups, isResetButtonEnabled, size, renderOption, dropdownHeader, isDrawerOptions, renderGroup, scrollbarMaxHeight, }: TProps<TValue>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/form/Select/index.js

@@ -42,6 +42,7 @@ var Select = exports.Select = function Select(_ref) {
     dropdownHeader = _ref.dropdownHeader,
     _ref$isDrawerOptions = _ref.isDrawerOptions,
     isDrawerOptions = _ref$isDrawerOptions === void 0 ? false : _ref$isDrawerOptions,
+    renderGroup = _ref.renderGroup,
     _ref$scrollbarMaxHeig = _ref.scrollbarMaxHeight,
     scrollbarMaxHeight = _ref$scrollbarMaxHeig === void 0 ? MAX_LIST_HEIGHT : _ref$scrollbarMaxHeig;
   var palette = (0, _palette.useComponentPalette)('select');
@@ -112,14 +113,39 @@ var Select = exports.Select = function Select(_ref) {
     (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.blur();
     handleShow();
   };
+  var handleOptionRender = function handleOptionRender(option) {
+    if (renderOption) {
+      if (!option.entity) {
+        // eslint-disable-next-line no-console
+        console.error('option.entity not found');
+        return;
+      }
+      return renderOption(option.entity);
+    }
+    return /*#__PURE__*/_react["default"].createElement(S.DefaultOptionWrapper, null, " ", option.label);
+  };
+  var handleGroupRender = function handleGroupRender(group) {
+    if (group) {
+      if (renderGroup) {
+        if (!group.entity) {
+          // eslint-disable-next-line no-console
+          console.error('group.entity not found');
+          return;
+        }
+        return renderGroup(group.entity);
+      }
+      return /*#__PURE__*/_react["default"].createElement(S.Group, {
+        variant: "headerText"
+      }, group.label);
+    }
+    return null;
+  };
   var dropdownContent = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, dropdownHeader, optionGroups.map(function (_ref2) {
     var group = _ref2.group,
       groupOptions = _ref2.options;
     return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
       key: (group === null || group === void 0 ? void 0 : group.id) || null
-    }, !group ? null : /*#__PURE__*/_react["default"].createElement(S.Group, {
-      variant: "headerText"
-    }, group.label), groupOptions.map(function (option) {
+    }, handleGroupRender(group), groupOptions.map(function (option) {
       return /*#__PURE__*/_react["default"].createElement(S.Option, {
         key: option.value,
         $palette: palette,
@@ -127,8 +153,8 @@ var Select = exports.Select = function Select(_ref) {
         onClick: handleSelect,
         "data-value": JSON.stringify(option.value),
         "data-option-identifier": OPTION_IDENTIFIER,
-        $isGrouped: !!group
-      }, renderOption ? renderOption(option.entity) : /*#__PURE__*/_react["default"].createElement(S.DefaultOptionWrapper, null, " ", option.label));
+        $isGrouped: !!group && !renderGroup
+      }, handleOptionRender(option));
     }));
   }));
   return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {

package/dist/components/form/Select/index.stories.d.ts

@@ -7,3 +7,4 @@ export declare const WithDropdownHeader: StoryObj<TProps<string>>;
 export declare const RenderOption: StoryObj<TProps<string>>;
 export declare const WithGroups: StoryObj<TProps<string>>;
 export declare const RenderOptionWithGroups: StoryObj<TProps<string>>;
+export declare const WithCustomGroups: StoryObj<TProps<string>>;

package/dist/components/form/Select/index.stories.js

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithGroups = exports.WithDropdownHeader = exports.RenderOptionWithGroups = exports.RenderOption = exports.Default = void 0;
+exports["default"] = exports.WithGroups = exports.WithDropdownHeader = exports.WithCustomGroups = exports.RenderOptionWithGroups = exports.RenderOption = exports.Default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _addonActions = require("@storybook/addon-actions");
 var _ = require(".");
@@ -130,6 +130,9 @@ var COMMON_ARGS = {
 var renderOption = function renderOption(entity) {
   return /*#__PURE__*/_react["default"].createElement("div", null, "Hello ", entity.name, " ");
 };
+var renderGroup = function renderGroup(group) {
+  return /*#__PURE__*/_react["default"].createElement("div", null, "Group name is: ", group.name, " ");
+};
 var Default = exports.Default = {
   args: _objectSpread({}, COMMON_ARGS),
   render: Component
@@ -170,4 +173,23 @@ var RenderOptionWithGroups = exports.RenderOptionWithGroups = {
     renderOption: renderOption
   }),
   render: Component
+};
+var WithCustomGroups = exports.WithCustomGroups = {
+  args: _objectSpread(_objectSpread({}, COMMON_ARGS), {}, {
+    groups: [{
+      label: 'Group 1',
+      id: '1',
+      entity: {
+        name: 'name group 1'
+      }
+    }, {
+      label: 'Group 2',
+      id: '2',
+      entity: {
+        name: 'name group 2'
+      }
+    }],
+    renderGroup: renderGroup
+  }),
+  render: Component
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@invoicebox/ui",
-    "version": "0.1.0-alpha.184",
+    "version": "0.1.0-alpha.186",
     "description": "Invoicebox UI",
     "license": "Apache License 2.0",
     "scripts": {