@invoicebox/ui 0.1.0-alpha.183 → 0.1.0-alpha.185

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,16 +113,39 @@ var Select = exports.Select = function Select(_ref) {
     (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.blur();
     handleShow();
   };
-  var dropdownContent = /*#__PURE__*/_react["default"].createElement(_Scrollbar.Scrollbar, {
-    maxHeight: scrollbarMaxHeight
-  }, dropdownHeader, optionGroups.map(function (_ref2) {
+  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,
@@ -130,7 +154,7 @@ var Select = exports.Select = function Select(_ref) {
         "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));
+      }, handleOptionRender(option));
     }));
   }));
   return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
@@ -153,9 +177,13 @@ var Select = exports.Select = function Select(_ref) {
     onClose: handleHide,
     isOpen: isOpen,
     isPadding: false
-  }, /*#__PURE__*/_react["default"].createElement(S.DrawerInner, null, dropdownContent)) : /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, {
+  }, /*#__PURE__*/_react["default"].createElement(S.DrawerContent, null, /*#__PURE__*/_react["default"].createElement(_Scrollbar.Scrollbar, {
+    maxHeight: scrollbarMaxHeight
+  }, dropdownContent, /*#__PURE__*/_react["default"].createElement(S.DrawerBottom, null)))) : /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, {
     isOpen: isOpen,
     isAutoPosition: true,
     width: "100%"
-  }, dropdownContent));
+  }, /*#__PURE__*/_react["default"].createElement(_Scrollbar.Scrollbar, {
+    maxHeight: scrollbarMaxHeight
+  }, dropdownContent)));
 };

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/dist/components/form/Select/styles.d.ts

@@ -8,4 +8,5 @@ export declare const Option: import("styled-components/dist/types").IStyledCompo
 }>> & string & Omit<import("react").FC<import("../../common/Typography").TTypographyProps>, keyof import("react").Component<any, {}, any>>;
 export declare const Group: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../../common/Typography").TTypographyProps & import("styled-components/dist/types").BaseObject, import("styled-components/dist/types").BaseObject>> & string & Omit<import("react").FC<import("../../common/Typography").TTypographyProps>, keyof import("react").Component<any, {}, any>>;
 export declare const DefaultOptionWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const DrawerInner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const DrawerContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const DrawerBottom: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Wrapper = exports.Option = exports.InputWrapper = exports.Group = exports.DrawerInner = exports.DefaultOptionWrapper = void 0;
+exports.Wrapper = exports.Option = exports.InputWrapper = exports.Group = exports.DrawerContent = exports.DrawerBottom = exports.DefaultOptionWrapper = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _Typography = require("../../common/Typography");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -35,7 +35,11 @@ var DefaultOptionWrapper = exports.DefaultOptionWrapper = _styledComponents["def
   displayName: "styles__DefaultOptionWrapper",
   componentId: "sc-1x9n0z5-4"
 })(["padding:12px 20px;"]);
-var DrawerInner = exports.DrawerInner = _styledComponents["default"].div.withConfig({
-  displayName: "styles__DrawerInner",
+var DrawerContent = exports.DrawerContent = _styledComponents["default"].div.withConfig({
+  displayName: "styles__DrawerContent",
   componentId: "sc-1x9n0z5-5"
-})(["padding:36px 0;"]);
+})(["padding-top:36px;"]);
+var DrawerBottom = exports.DrawerBottom = _styledComponents["default"].div.withConfig({
+  displayName: "styles__DrawerBottom",
+  componentId: "sc-1x9n0z5-6"
+})(["height:36px;"]);

package/package.json

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