@majoo-ui/react 1.58.7 → 1.58.9

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/icons'), require('react-transition-group'), require('react/jsx-runtime'), require('@majoo-ui/helpers'), require('react-i18next'), require('moment'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-hook-form'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('@floating-ui/react'), require('otp-input-react'), require('@radix-ui/react-dialog'), require('@radix-ui/react-toggle-group'), require('dayzed'), require('@radix-ui/react-separator'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-accordion'), require('react-table'), require('react-dom'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('@react-google-maps/api'), require('superagent'), require('recharts'), require('draft-js'), require('react-draft-wysiwyg'), require('react-contextmenu'), require('react-loading-skeleton'), require('react-loading-skeleton/dist/skeleton.css'), require('react-ui-scrollspy'), require('react-image-crop'), require('browser-image-compression'), require('react-table-sticky')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/icons', 'react-transition-group', 'react/jsx-runtime', '@majoo-ui/helpers', 'react-i18next', 'moment', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-hook-form', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', '@floating-ui/react', 'otp-input-react', '@radix-ui/react-dialog', '@radix-ui/react-toggle-group', 'dayzed', '@radix-ui/react-separator', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-accordion', 'react-table', 'react-dom', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', '@react-google-maps/api', 'superagent', 'recharts', 'draft-js', 'react-draft-wysiwyg', 'react-contextmenu', 'react-loading-skeleton', 'react-loading-skeleton/dist/skeleton.css', 'react-ui-scrollspy', 'react-image-crop', 'browser-image-compression', 'react-table-sticky'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.jsxRuntime, global.helpers, global.reactI18next, global.moment, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.reactHookForm, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.react$1, global.OTPInput, global.DialogPrimitive, global.ToggleGroupPrimitive, global.dayzed, global.SeparatorPrimitive, global.SliderPrimitive, global.TabsPrimitive, global.AccordionPrimitive, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.api, global.request, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.reactContextmenu, global.ReactSkeleton, null, global.ScrollSpy, global.ReactCrop, global.imageCompressionComponent, global.reactTableSticky));
-})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, jsxRuntime, helpers, reactI18next, moment, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, reactHookForm, SwitchPrimitive, Downshift, InfiniteScroll, debounce, react$1, OTPInput, DialogPrimitive, ToggleGroupPrimitive, dayzed, SeparatorPrimitive, SliderPrimitive, TabsPrimitive, AccordionPrimitive, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, api, request, recharts, draftJs, reactDraftWysiwyg, reactContextmenu, ReactSkeleton, skeleton_css, ScrollSpy, ReactCrop, imageCompressionComponent, reactTableSticky) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/icons'), require('react-transition-group'), require('react/jsx-runtime'), require('@majoo-ui/helpers'), require('react-i18next'), require('moment'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-hook-form'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('@floating-ui/react'), require('otp-input-react'), require('@radix-ui/react-dialog'), require('@radix-ui/react-toggle-group'), require('dayzed'), require('@radix-ui/react-separator'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-accordion'), require('react-table'), require('react-dom'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('@react-google-maps/api'), require('superagent'), require('recharts'), require('draft-js'), require('react-draft-wysiwyg'), require('react-contextmenu'), require('react-loading-skeleton'), require('react-loading-skeleton/dist/skeleton.css'), require('react-virtual'), require('react-ui-scrollspy'), require('react-image-crop'), require('browser-image-compression'), require('react-table-sticky')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/icons', 'react-transition-group', 'react/jsx-runtime', '@majoo-ui/helpers', 'react-i18next', 'moment', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-hook-form', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', '@floating-ui/react', 'otp-input-react', '@radix-ui/react-dialog', '@radix-ui/react-toggle-group', 'dayzed', '@radix-ui/react-separator', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-accordion', 'react-table', 'react-dom', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', '@react-google-maps/api', 'superagent', 'recharts', 'draft-js', 'react-draft-wysiwyg', 'react-contextmenu', 'react-loading-skeleton', 'react-loading-skeleton/dist/skeleton.css', 'react-virtual', 'react-ui-scrollspy', 'react-image-crop', 'browser-image-compression', 'react-table-sticky'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.jsxRuntime, global.helpers, global.reactI18next, global.moment, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.reactHookForm, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.react$1, global.OTPInput, global.DialogPrimitive, global.ToggleGroupPrimitive, global.dayzed, global.SeparatorPrimitive, global.SliderPrimitive, global.TabsPrimitive, global.AccordionPrimitive, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.api, global.request, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.reactContextmenu, global.ReactSkeleton, null, global.reactVirtual, global.ScrollSpy, global.ReactCrop, global.imageCompressionComponent, global.reactTableSticky));
+})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, jsxRuntime, helpers, reactI18next, moment, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, reactHookForm, SwitchPrimitive, Downshift, InfiniteScroll, debounce, react$1, OTPInput, DialogPrimitive, ToggleGroupPrimitive, dayzed, SeparatorPrimitive, SliderPrimitive, TabsPrimitive, AccordionPrimitive, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, api, request, recharts, draftJs, reactDraftWysiwyg, reactContextmenu, ReactSkeleton, skeleton_css, reactVirtual, ScrollSpy, ReactCrop, imageCompressionComponent, reactTableSticky) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -12996,6 +12996,142 @@
     }
   }));
 
+  var StyledAccordion = styled(AccordionPrimitive__namespace.Root, {});
+  var Accordion = /*#__PURE__*/React__namespace.forwardRef(function (_a, forwardedRef) {
+    var children = _a.children,
+      props = __rest(_a, ["children"]);
+    return jsxRuntime.jsx(StyledAccordion, __assign({
+      ref: forwardedRef
+    }, props, props.type === 'single' ? {
+      collapsible: true
+    } : {}, {
+      children: children
+    }), void 0);
+  });
+  var StyledItem$1 = styled(AccordionPrimitive__namespace.Item, {
+    borderTop: '1px solid $colors$slate6',
+    '&:last-of-type': {
+      borderBottom: '1px solid $colors$slate6'
+    }
+  });
+  var StyledHeader = styled(AccordionPrimitive__namespace.Header, {
+    all: 'unset'
+  });
+  var StyledTrigger$1 = styled(AccordionPrimitive__namespace.Trigger, {
+    all: 'unset',
+    boxSizing: 'border-box',
+    userSelect: 'none',
+    '&::before': {
+      boxSizing: 'border-box'
+    },
+    '&::after': {
+      boxSizing: 'border-box'
+    },
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    color: '$hiContrast',
+    width: '100%',
+    '@hover': {
+      '&:hover': {
+        backgroundColor: '$slate2'
+      }
+    },
+    '&:focus': {
+      outline: 'none',
+      boxShadow: 'inset 0 0 0 1px $colors$slate8, 0 0 0 1px $colors$slate8'
+    },
+    '& svg.icon-cdf': {
+      color: '$white',
+      size: '24px',
+      transition: 'transform 175ms cubic-bezier(0.65, 0, 0.35, 1)'
+    },
+    '& svg.right': {
+      marginRight: '$spacing-05'
+    },
+    '&[data-state="open"]': {
+      '& svg.icon-cdf': {
+        transform: 'rotate(180deg)'
+      }
+    },
+    variants: {
+      arrowPosition: {
+        right: {
+          justifyContent: 'space-between'
+        },
+        left: {
+          justifyContent: 'start'
+        }
+      }
+    }
+  });
+  var AccordionTrigger = /*#__PURE__*/React__namespace.forwardRef(function (_a, forwardedRef) {
+    var children = _a.children,
+      _b = _a.arrowPosition,
+      arrowPosition = _b === void 0 ? 'right' : _b,
+      _c = _a.hasContent,
+      hasContent = _c === void 0 ? true : _c,
+      _d = _a.arrowColor,
+      arrowColor = _d === void 0 ? 'white' : _d,
+      props = __rest(_a, ["children", "arrowPosition", "hasContent", "arrowColor"]);
+    return jsxRuntime.jsx(StyledHeader, {
+      children: jsxRuntime.jsx(StyledTrigger$1, __assign({}, props, {
+        arrowPosition: arrowPosition,
+        ref: forwardedRef
+      }, {
+        children: arrowPosition === 'right' ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [children, hasContent && jsxRuntime.jsx(icons.ChevronDownOutline, {
+            className: "icon-cdf right",
+            color: arrowColor
+          }, void 0)]
+        }, void 0) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [hasContent && jsxRuntime.jsx(icons.ChevronDownOutline, {
+            className: "icon-cdf left",
+            color: arrowColor
+          }, void 0), children]
+        }, void 0)
+      }), void 0)
+    }, void 0);
+  });
+  var AccordionItem = StyledItem$1;
+  var AccordionContent = AccordionPrimitive__namespace.Content;
+
+  var OptionGroup = styled(Flex$1, {
+    position: 'relative'
+  });
+  var OptionItem = styled(Flex$1, {
+    fontWeight: 600
+  });
+  var OptionChildren = styled(Box, {});
+  var IconWrapper$1 = styled(Box, {
+    position: 'absolute',
+    top: 10,
+    right: 0,
+    cursor: 'pointer'
+  });
+  function OptionGroupItem(_a) {
+    var item = _a.item,
+      children = _a.children;
+    var _b = React.useState(false),
+      isShow = _b[0],
+      setIsShow = _b[1];
+    return jsxRuntime.jsxs(OptionGroup, __assign({
+      direction: "column"
+    }, {
+      children: [jsxRuntime.jsxs(OptionItem, {
+        children: [item, jsxRuntime.jsx(IconWrapper$1, __assign({
+          onClick: function () {
+            return setIsShow(!isShow);
+          }
+        }, {
+          children: isShow ? jsxRuntime.jsx(icons.ChevronUpOutline, {}, void 0) : jsxRuntime.jsx(icons.ChevronDownOutline, {}, void 0)
+        }), void 0)]
+      }, void 0), isShow && jsxRuntime.jsx(OptionChildren, {
+        children: children
+      }, void 0)]
+    }), void 0);
+  }
+
   const _excluded$c = ["placeholder", "option", "value", "defaultValue", "size", "disabled", "onChange", "search", "readOnly", "placement", "disabledOptions", "textEmptyItem", "onRemoveItem", "isInvalid", "sortBy", "showSelectAll", "showTagSelectAll", "selectAllLabel", "showSelectedTag", "unremovableTags", "helperText", "css", "showCounter", "labelCounter", "collapsible", "toggleInput", "fetchData", "onSearch", "isLoading", "maxSelectedItem"];
   var _jsxFileName$w = "/Users/ryanakbar20/Documents/project/majoo/majoo-ui/packages/react/src/components/form/components/InputSelectCheck/InputSelectCheck.js";
   function _await(value, then, direct) {
@@ -13249,7 +13385,7 @@
     alignItems: 'center'
   });
   const InputSelectCheck = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-    var _selectedItems$filter, _selectedItems$filter2, _selectedItems$filter3, _selectedItems$filter4;
+    var _initItem$reduce, _selectedItems$filter, _selectedItems$filter2, _selectedItems$filter3, _selectedItems$filter4;
     let {
         placeholder,
         option,
@@ -13368,7 +13504,7 @@
       removeSelectedItem,
       selectedItems
     } = Downshift.useMultipleSelection({
-      selectedItems: selectedValue.length > 0 ? initItem.filter(item => selectedValue.includes(item.id)) : []
+      selectedItems: selectedValue.length > 0 ? initItem === null || initItem === void 0 ? void 0 : (_initItem$reduce = initItem.reduce((acc, item) => [...acc, item, ...(item.children ? item.children : [])], [])) === null || _initItem$reduce === void 0 ? void 0 : _initItem$reduce.filter(item => selectedValue.includes(item.id)) : []
     });
     const generateOptions = data => {
       return data.map(option => {
@@ -13447,7 +13583,7 @@
       isOpen
     } = Downshift.useCombobox({
       inputValue,
-      items: items,
+      items: items.reduce((acc, item) => [...acc, item, ...(item.children ? item.children : [])], []),
       selectedItem: selectedValue,
       itemToString: item => item ? item.name : '',
       onStateChange: ({
@@ -13489,6 +13625,52 @@
                   setInputSelectValue(itemIds);
                   onChange === null || onChange === void 0 ? void 0 : onChange(itemIds.slice(1));
                 } else {
+                  var _selectedItem$childre;
+                  //start check if item have children (option group)
+                  if (selectedItem !== null && selectedItem !== void 0 && (_selectedItem$childre = selectedItem.children) !== null && _selectedItem$childre !== void 0 && _selectedItem$childre.length) {
+                    var _selectedItem$childre2;
+                    const itemIdsSelect = [];
+                    const itemIdsUnSelect = [];
+                    selectedItem === null || selectedItem === void 0 ? void 0 : (_selectedItem$childre2 = selectedItem.children) === null || _selectedItem$childre2 === void 0 ? void 0 : _selectedItem$childre2.forEach(item => {
+                      if (selectedValue !== null && selectedValue !== void 0 && selectedValue.includes(item.id)) {
+                        removeSelectedItem(item);
+                        itemIdsUnSelect.push(item.id);
+                      } else {
+                        addSelectedItem(item);
+                        itemIdsSelect.push(item.id);
+                      }
+                    });
+
+                    //select all child in one of the option groups
+                    if (itemIdsSelect.length) {
+                      setSelectedValue([...selectedValue, ...itemIdsSelect]);
+                      setInputSelectValue([...selectedValue, ...itemIdsSelect]);
+                      const _filteredSelectedValues = selectedValue.filter(val => val !== '!all');
+                      onChange === null || onChange === void 0 ? void 0 : onChange([..._filteredSelectedValues, ...itemIdsSelect]);
+                    }
+
+                    //unselect all child in one of the option groups
+                    if (itemIdsUnSelect.length) {
+                      const newSelectedValue = selectedValue.filter(selId => {
+                        var _itemIdsUnSelect$filt;
+                        return ((_itemIdsUnSelect$filt = itemIdsUnSelect.filter(unselId => unselId === selId && unselId)) === null || _itemIdsUnSelect$filt === void 0 ? void 0 : _itemIdsUnSelect$filt[0]) !== selId && selId;
+                      });
+                      setSelectedValue(newSelectedValue);
+                      setInputSelectValue(newSelectedValue);
+                      const _filteredSelectedValues2 = newSelectedValue.filter(val => val !== '!all');
+                      onChange === null || onChange === void 0 ? void 0 : onChange(_filteredSelectedValues2);
+                    }
+                    return;
+                  }
+                  //end check if item have children (option group)
+
+                  //start check the child from one of the option groups
+                  if (selectedValue.includes(selectedItem.id)) {
+                    removeItem(selectedItem);
+                    return;
+                  }
+                  //end check the child from one of the option groups
+
                   addSelectedItem(selectedItem);
                   setSelectedValue([...selectedValue, selectedItem.id]);
                   setInputSelectValue([...selectedValue, selectedItem.id]);
@@ -13585,13 +13767,173 @@
       }
     };
     const isShowTagSelectAll = showTagSelectAll && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > (option === null || option === void 0 ? void 0 : option.length);
+    const renderOptionItem = (item, index, asChild) => {
+      var _item$render;
+      return /*#__PURE__*/React__default["default"].createElement(ItemWrapper$1, _extends({
+        key: item.id
+      }, getItemProps({
+        item,
+        index: index,
+        disabled: item.isDisabled
+      }), {
+        css: {
+          backgroundColor: highlightedIndex === index ? '$bgGray' : 'white',
+          cursor: item.isDisabled ? 'not-allowed' : 'pointer',
+          color: item.isDisabled ? '$textDisable' : 'textPrimary',
+          padding: asChild ? '0px $spacing-05' : 0
+        },
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$w,
+          lineNumber: 678,
+          columnNumber: 9
+        }
+      }), /*#__PURE__*/React__default["default"].createElement(IconWrapper, {
+        css: {
+          width: '16px',
+          height: '16px',
+          border: '1px solid $bgBorder',
+          cursor: item.isDisabled ? 'not-allowed' : 'pointer'
+        },
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$w,
+          lineNumber: 692,
+          columnNumber: 11
+        }
+      }, !(item !== null && item !== void 0 && item.hideCheck) && (item.isDisabled ? /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
+        color: colors$8.iconDisable,
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$w,
+          lineNumber: 702,
+          columnNumber: 17
+        }
+      }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
+        color: colors$8.iconGreen,
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$w,
+          lineNumber: 706,
+          columnNumber: 19
+        }
+      })), isShowSelectAll && (item === null || item === void 0 ? void 0 : item.id) === '!all' && selectedValue !== null && selectedValue !== void 0 && selectedValue.length && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length) < (items === null || items === void 0 ? void 0 : items.length) ? /*#__PURE__*/React__default["default"].createElement(IndeterminateFilled$1, {
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$w,
+          lineNumber: 713,
+          columnNumber: 15
+        }
+      }, "-") : /*#__PURE__*/React__default["default"].createElement("div", {
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$w,
+          lineNumber: 715,
+          columnNumber: 15
+        }
+      })), /*#__PURE__*/React__default["default"].createElement(Item$3, {
+        css: {
+          backgroundColor: 'unset',
+          width: '100%'
+        },
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$w,
+          lineNumber: 718,
+          columnNumber: 11
+        }
+      }, item.render ? (_item$render = item.render) === null || _item$render === void 0 ? void 0 : _item$render.call(item, item.name) : item.name));
+    };
+    let optionGroupIndex = showSelectAll ? 1 : 0;
+    const renderOptionGroupItem = (item, index) => {
+      var _item$children2, _item$children3, _item$children3$filte, _item$render2, _item$children4;
+      if (index > showSelectAll ? 1 : 0) {
+        var _item$children;
+        optionGroupIndex += (item === null || item === void 0 ? void 0 : (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) + 1;
+      }
+      const filterSelectedChild = item === null || item === void 0 ? void 0 : (_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.filter(e => selectedValue.includes(e.id) && !e.isDisabled);
+      return /*#__PURE__*/React__default["default"].createElement(OptionGroupItem, {
+        item: /*#__PURE__*/React__default["default"].createElement(ItemWrapper$1, _extends({
+          key: item.id
+        }, getItemProps({
+          item,
+          index: optionGroupIndex,
+          disabled: item.isDisabled
+        }), {
+          css: {
+            backgroundColor: highlightedIndex === optionGroupIndex ? '$bgGray' : 'white',
+            cursor: item.isDisabled ? 'not-allowed' : 'pointer',
+            color: item.isDisabled ? '$textDisable' : 'textPrimary'
+          },
+          __self: undefined,
+          __source: {
+            fileName: _jsxFileName$w,
+            lineNumber: 735,
+            columnNumber: 13
+          }
+        }), /*#__PURE__*/React__default["default"].createElement(IconWrapper, {
+          css: {
+            width: '16px',
+            height: '16px',
+            border: '1px solid $bgBorder',
+            cursor: item.isDisabled ? 'not-allowed' : 'pointer'
+          },
+          __self: undefined,
+          __source: {
+            fileName: _jsxFileName$w,
+            lineNumber: 748,
+            columnNumber: 15
+          }
+        }, !(item !== null && item !== void 0 && item.hideCheck) && item.isDisabled ? /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
+          color: colors$8.iconDisable,
+          __self: undefined,
+          __source: {
+            fileName: _jsxFileName$w,
+            lineNumber: 757,
+            columnNumber: 19
+          }
+        }) : (filterSelectedChild === null || filterSelectedChild === void 0 ? void 0 : filterSelectedChild.length) === (item === null || item === void 0 ? void 0 : (_item$children3 = item.children) === null || _item$children3 === void 0 ? void 0 : (_item$children3$filte = _item$children3.filter(e => !e.isDisabled)) === null || _item$children3$filte === void 0 ? void 0 : _item$children3$filte.length) ? /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
+          color: colors$8.iconGreen,
+          __self: undefined,
+          __source: {
+            fileName: _jsxFileName$w,
+            lineNumber: 759,
+            columnNumber: 19
+          }
+        }) : (filterSelectedChild === null || filterSelectedChild === void 0 ? void 0 : filterSelectedChild.length) > 0 ? /*#__PURE__*/React__default["default"].createElement(IndeterminateFilled$1, {
+          __self: undefined,
+          __source: {
+            fileName: _jsxFileName$w,
+            lineNumber: 761,
+            columnNumber: 19
+          }
+        }, "-") : null), /*#__PURE__*/React__default["default"].createElement(Item$3, {
+          css: {
+            backgroundColor: 'unset',
+            width: '100%'
+          },
+          __self: undefined,
+          __source: {
+            fileName: _jsxFileName$w,
+            lineNumber: 764,
+            columnNumber: 15
+          }
+        }, item.render ? (_item$render2 = item.render) === null || _item$render2 === void 0 ? void 0 : _item$render2.call(item, item.name) : item.name)),
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$w,
+          lineNumber: 733,
+          columnNumber: 9
+        }
+      }, item === null || item === void 0 ? void 0 : (_item$children4 = item.children) === null || _item$children4 === void 0 ? void 0 : _item$children4.map((optItem, optIndex) => renderOptionItem(optItem, optionGroupIndex + optIndex + 1, true)));
+    };
     return /*#__PURE__*/React__default["default"].createElement(Wrapper$1, _extends({
       css: css
     }, props, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 626,
+        lineNumber: 776,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Select, {
@@ -13601,7 +13943,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 627,
+        lineNumber: 777,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -13616,7 +13958,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 628,
+        lineNumber: 778,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Input$6, _extends({}, getInputProps({
@@ -13634,7 +13976,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 638,
+        lineNumber: 788,
         columnNumber: 13
       }
     })), /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({}, getToggleButtonProps({
@@ -13647,7 +13989,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 645,
+        lineNumber: 795,
         columnNumber: 13
       }
     }), placeholder != null ? placeholder : t('placeholder', 'Pilih Item'))), /*#__PURE__*/React__default["default"].createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -13658,7 +14000,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 655,
+        lineNumber: 805,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconCaretDown, {
@@ -13666,7 +14008,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 660,
+        lineNumber: 810,
         columnNumber: 13
       }
     }))), helperText && /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -13679,7 +14021,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 664,
+        lineNumber: 814,
         columnNumber: 11
       }
     }, helperText), showSelectedTag && !showCounter && selectedItems.length !== 0 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TagWrapper$2, {
@@ -13687,7 +14029,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 670,
+        lineNumber: 820,
         columnNumber: 13
       }
     }, isShowTagSelectAll ? /*#__PURE__*/React__default["default"].createElement(Tag, _extends({
@@ -13707,7 +14049,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 672,
+        lineNumber: 822,
         columnNumber: 17
       }
     }), selectAllLabel != null ? selectAllLabel : t('selectAllLabelText', 'Pilih Semua')) : selectedItems === null || selectedItems === void 0 ? void 0 : (_selectedItems$filter = selectedItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== '!all')) === null || _selectedItems$filter === void 0 ? void 0 : (_selectedItems$filter2 = _selectedItems$filter.filter((_, idx) => {
@@ -13737,7 +14079,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 700,
+        lineNumber: 850,
         columnNumber: 21
       }
     }), selectedItem.name))), collapsible && !isShowTagSelectAll && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 5 && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -13746,7 +14088,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 722,
+        lineNumber: 872,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -13756,14 +14098,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 723,
+        lineNumber: 873,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 724,
+        lineNumber: 874,
         columnNumber: 19
       }
     }), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -13777,7 +14119,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 725,
+        lineNumber: 875,
         columnNumber: 19
       }
     }, showAllTags ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronUpOutline, {
@@ -13785,7 +14127,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 731,
+        lineNumber: 881,
         columnNumber: 23
       }
     }) : /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
@@ -13793,7 +14135,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 733,
+        lineNumber: 883,
         columnNumber: 23
       }
     }), /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -13805,14 +14147,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 735,
+        lineNumber: 885,
         columnNumber: 21
       }
     }, showAllTags ? t('showSomeText', 'Tampilkan Sebagian') : t('showAllText', 'Tampilkan Semua'))), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 739,
+        lineNumber: 889,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -13823,7 +14165,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 741,
+        lineNumber: 891,
         columnNumber: 17
       }
     }, `${selectedItems === null || selectedItems === void 0 ? void 0 : (_selectedItems$filter3 = selectedItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== '!all')) === null || _selectedItems$filter3 === void 0 ? void 0 : _selectedItems$filter3.length} ${labelCounter || t('labelCounterText', 'Item terpilih')}`))), showCounter && !isShowTagSelectAll && Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) && /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -13835,7 +14177,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 751,
+        lineNumber: 901,
         columnNumber: 11
       }
     }, `${selectedItems === null || selectedItems === void 0 ? void 0 : (_selectedItems$filter4 = selectedItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== '!all')) === null || _selectedItems$filter4 === void 0 ? void 0 : _selectedItems$filter4.length} ${labelCounter || t('labelCounterText', 'Item terpilih')}`), /*#__PURE__*/React__default["default"].createElement(OptionWrapper$1, {
@@ -13848,7 +14190,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 758,
+        lineNumber: 908,
         columnNumber: 9
       }
     }, isLoading && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -13870,7 +14212,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 768,
+        lineNumber: 918,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
@@ -13878,7 +14220,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 785,
+        lineNumber: 935,
         columnNumber: 15
       }
     }, "Loading....")), items.length > 0 || isLoading ? /*#__PURE__*/React__default["default"].createElement(Option, _extends({}, getMenuProps({
@@ -13889,7 +14231,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 791,
+        lineNumber: 941,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
@@ -13904,92 +14246,17 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$w,
-          lineNumber: 795,
+          lineNumber: 945,
           columnNumber: 19
         }
       }, child),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 792,
+        lineNumber: 942,
         columnNumber: 15
       }
-    }, isOpen && items.map((item, index) => {
-      var _item$render;
-      return /*#__PURE__*/React__default["default"].createElement(ItemWrapper$1, _extends({
-        key: item.id
-      }, getItemProps({
-        item,
-        index: index,
-        disabled: item.isDisabled
-      }), {
-        css: {
-          backgroundColor: highlightedIndex === index ? '$bgGray' : 'white',
-          cursor: item.isDisabled ? 'not-allowed' : 'pointer',
-          color: item.isDisabled ? '$textDisable' : 'textPrimary'
-        },
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$w,
-          lineNumber: 807,
-          columnNumber: 21
-        }
-      }), /*#__PURE__*/React__default["default"].createElement(IconWrapper, {
-        css: {
-          width: '16px',
-          height: '16px',
-          border: '1px solid $bgBorder',
-          cursor: item.isDisabled ? 'not-allowed' : 'pointer'
-        },
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$w,
-          lineNumber: 820,
-          columnNumber: 23
-        }
-      }, !(item !== null && item !== void 0 && item.hideCheck) && (item.isDisabled ? /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
-        color: colors$8.iconDisable,
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$w,
-          lineNumber: 830,
-          columnNumber: 29
-        }
-      }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
-        color: colors$8.iconGreen,
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$w,
-          lineNumber: 834,
-          columnNumber: 31
-        }
-      })), isShowSelectAll && (item === null || item === void 0 ? void 0 : item.id) === '!all' && selectedValue !== null && selectedValue !== void 0 && selectedValue.length && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length) < (items === null || items === void 0 ? void 0 : items.length) ? /*#__PURE__*/React__default["default"].createElement(IndeterminateFilled$1, {
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$w,
-          lineNumber: 841,
-          columnNumber: 27
-        }
-      }, "-") : /*#__PURE__*/React__default["default"].createElement("div", {
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$w,
-          lineNumber: 843,
-          columnNumber: 27
-        }
-      })), /*#__PURE__*/React__default["default"].createElement(Item$3, {
-        css: {
-          backgroundColor: 'unset',
-          width: '100%'
-        },
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$w,
-          lineNumber: 846,
-          columnNumber: 23
-        }
-      }, item.render ? (_item$render = item.render) === null || _item$render === void 0 ? void 0 : _item$render.call(item, item.name) : item.name));
-    }))) : /*#__PURE__*/React__default["default"].createElement(Option, _extends({
+    }, isOpen && items.map((item, index) => item !== null && item !== void 0 && item.children ? renderOptionGroupItem(item, index) : renderOptionItem(item, index)))) : /*#__PURE__*/React__default["default"].createElement(Option, _extends({
       css: {
         height: 'auto'
       }
@@ -13999,14 +14266,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 854,
+        lineNumber: 962,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 855,
+        lineNumber: 963,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -14016,7 +14283,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 856,
+        lineNumber: 964,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CircleInfoOutline, {
@@ -14028,7 +14295,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 857,
+        lineNumber: 965,
         columnNumber: 19
       }
     })), textEmptyItem != null ? textEmptyItem : t('emptyItemText', 'Item tidak ditemukan')))));
@@ -19619,7 +19886,7 @@
       display: 'none'
     }
   });
-  const StyledTrigger$1 = styled(TabsPrimitive__namespace.Trigger, {
+  const StyledTrigger = styled(TabsPrimitive__namespace.Trigger, {
     all: 'unset',
     fontFamily: 'inherit',
     backgroundColor: 'white',
@@ -19850,7 +20117,7 @@
       } = _ref3,
       props = _objectWithoutPropertiesLoose(_ref3, _excluded3$1);
     const [isIconHovered, setIsIconHovered] = React.useState(false);
-    return /*#__PURE__*/React__default["default"].createElement(StyledTrigger$1, _extends({
+    return /*#__PURE__*/React__default["default"].createElement(StyledTrigger, _extends({
       value: value
     }, props, {
       __self: undefined,
@@ -20505,106 +20772,6 @@
     layer: '$modal'
   };
 
-  var StyledAccordion = styled(AccordionPrimitive__namespace.Root, {});
-  var Accordion = /*#__PURE__*/React__namespace.forwardRef(function (_a, forwardedRef) {
-    var children = _a.children,
-      props = __rest(_a, ["children"]);
-    return jsxRuntime.jsx(StyledAccordion, __assign({
-      ref: forwardedRef
-    }, props, props.type === 'single' ? {
-      collapsible: true
-    } : {}, {
-      children: children
-    }), void 0);
-  });
-  var StyledItem$1 = styled(AccordionPrimitive__namespace.Item, {
-    borderTop: '1px solid $colors$slate6',
-    '&:last-of-type': {
-      borderBottom: '1px solid $colors$slate6'
-    }
-  });
-  var StyledHeader = styled(AccordionPrimitive__namespace.Header, {
-    all: 'unset'
-  });
-  var StyledTrigger = styled(AccordionPrimitive__namespace.Trigger, {
-    all: 'unset',
-    boxSizing: 'border-box',
-    userSelect: 'none',
-    '&::before': {
-      boxSizing: 'border-box'
-    },
-    '&::after': {
-      boxSizing: 'border-box'
-    },
-    cursor: 'pointer',
-    display: 'flex',
-    alignItems: 'center',
-    color: '$hiContrast',
-    width: '100%',
-    '@hover': {
-      '&:hover': {
-        backgroundColor: '$slate2'
-      }
-    },
-    '&:focus': {
-      outline: 'none',
-      boxShadow: 'inset 0 0 0 1px $colors$slate8, 0 0 0 1px $colors$slate8'
-    },
-    '& svg.icon-cdf': {
-      color: '$white',
-      size: '24px',
-      transition: 'transform 175ms cubic-bezier(0.65, 0, 0.35, 1)'
-    },
-    '& svg.right': {
-      marginRight: '$spacing-05'
-    },
-    '&[data-state="open"]': {
-      '& svg.icon-cdf': {
-        transform: 'rotate(180deg)'
-      }
-    },
-    variants: {
-      arrowPosition: {
-        right: {
-          justifyContent: 'space-between'
-        },
-        left: {
-          justifyContent: 'start'
-        }
-      }
-    }
-  });
-  var AccordionTrigger = /*#__PURE__*/React__namespace.forwardRef(function (_a, forwardedRef) {
-    var children = _a.children,
-      _b = _a.arrowPosition,
-      arrowPosition = _b === void 0 ? 'right' : _b,
-      _c = _a.hasContent,
-      hasContent = _c === void 0 ? true : _c,
-      _d = _a.arrowColor,
-      arrowColor = _d === void 0 ? 'white' : _d,
-      props = __rest(_a, ["children", "arrowPosition", "hasContent", "arrowColor"]);
-    return jsxRuntime.jsx(StyledHeader, {
-      children: jsxRuntime.jsx(StyledTrigger, __assign({}, props, {
-        arrowPosition: arrowPosition,
-        ref: forwardedRef
-      }, {
-        children: arrowPosition === 'right' ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [children, hasContent && jsxRuntime.jsx(icons.ChevronDownOutline, {
-            className: "icon-cdf right",
-            color: arrowColor
-          }, void 0)]
-        }, void 0) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [hasContent && jsxRuntime.jsx(icons.ChevronDownOutline, {
-            className: "icon-cdf left",
-            color: arrowColor
-          }, void 0), children]
-        }, void 0)
-      }), void 0)
-    }, void 0);
-  });
-  var AccordionItem = StyledItem$1;
-  var AccordionContent = AccordionPrimitive__namespace.Content;
-
   const removeUndefinedFields = obj => {
     let newObj = {};
     Object.keys(obj).forEach(key => {
@@ -22669,7 +22836,7 @@
     }, [selectedRowIds]);
     reactTable.useMountedLayoutEffect(function () {
       stateSelectedRowIds.length && (onSelectedChange === null || onSelectedChange === void 0 ? void 0 : onSelectedChange(stateSelectedRowIds));
-    }, [onSelectedChange, stateSelectedRowIds]);
+    }, [stateSelectedRowIds]);
     React.useEffect(function () {
       var _a;
       if (isInfiniteScroll && rawData.length <= rowLimit) {
@@ -32464,12 +32631,16 @@
     color: '$textRed !important'
   });
   function EditableTableMobile(props) {
-    var instance = props.instance,
+    var _a, _b;
+    var rowVirtualizer = props.rowVirtualizer,
+      tableContainerRef = props.tableContainerRef,
+      instance = props.instance,
       showCheckbox = props.showCheckbox,
       customRows = props.customRows,
       onExpand = props.onExpand,
       hiddenColumns = props.hiddenColumns,
-      customEmptyDataProps = props.customEmptyDataProps;
+      customEmptyDataProps = props.customEmptyDataProps,
+      virtualized = props.virtualized;
     var getTableProps = instance.getTableProps,
       getTableBodyProps = instance.getTableBodyProps,
       headerGroups = instance.headerGroups,
@@ -32511,121 +32682,129 @@
         showInMobile: showInMobile
       };
     };
-    var renderTableRow = function renderTableRow(row, index, customStyle) {
+    var renderTableRow = function renderTableRow(row, customStyle) {
+      var _a;
       return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/React.createElement(TableRow$2, __assign({
+        children: [jsxRuntime.jsx(TableRow$2, __assign({
           css: customStyle
         }, row.getRowProps(), {
-          key: "row_mobile_".concat(index)
-        }), row.cells.map(function (cell, index) {
-          var _a, _b;
-          var isMobileHeader = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.isMobileHeader;
-          var isSelector = ((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.id) === 'selection';
-          return (isMobileHeader || isSelector) && /*#__PURE__*/React.createElement(TableCell$2, __assign({}, cell.getCellProps({
-            style: {
-              minWidth: cell.column.minWidth,
-              width: isSelector ? 10 : cell.column.width,
-              maxWidth: isSelector ? 10 : cell.column.maxWidth
-            }
-          }), {
-            key: index
-          }), jsxRuntime.jsxs(Flex$1, __assign({
-            align: "center",
-            justify: "between",
-            css: {
-              cursor: 'pointer',
-              minHeight: 40
-            }
-          }, {
-            children: [jsxRuntime.jsx(Box, {
-              children: cell.render('Cell')
-            }, void 0), !isSelector && jsxRuntime.jsx(Flex$1, __assign({
-              justify: "center",
+          children: row.cells.map(function (cell, index) {
+            var _a, _b;
+            var isMobileHeader = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.isMobileHeader;
+            var isSelector = ((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.id) === 'selection';
+            return (isMobileHeader || isSelector) && /*#__PURE__*/React.createElement(TableCell$2, __assign({}, cell.getCellProps({
+              style: {
+                minWidth: cell.column.minWidth,
+                width: isSelector ? 10 : cell.column.width,
+                maxWidth: isSelector ? 10 : cell.column.maxWidth
+              }
+            }), {
+              key: "cell-body-".concat(index)
+            }), jsxRuntime.jsxs(Flex$1, __assign({
               align: "center",
-              onClick: function () {
-                var _a;
-                if (!((_a = Object.keys(state.expanded)) === null || _a === void 0 ? void 0 : _a.includes(row.id))) {
-                  toggleAllRowsExpanded(false);
-                }
-                row.toggleRowExpanded(!row.isExpanded);
-                onExpand === null || onExpand === void 0 ? void 0 : onExpand(!row.isExpanded);
+              justify: "between",
+              css: {
+                cursor: 'pointer',
+                minHeight: 40
               }
             }, {
-              children: row.isExpanded ? jsxRuntime.jsx(icons.ChevronUpOutline, {}, void 0) : jsxRuntime.jsx(icons.ChevronDownOutline, {}, void 0)
-            }), void 0)]
-          }), void 0));
-        })), /*#__PURE__*/React.createElement(TableRowCollapse, __assign({}, row.getRowProps(), {
-          key: "row_mobile_collapse_".concat(index),
+              children: [jsxRuntime.jsx(Box, {
+                children: cell.render('Cell')
+              }, void 0), !isSelector && jsxRuntime.jsx(Flex$1, __assign({
+                justify: "center",
+                align: "center",
+                onClick: function () {
+                  var _a;
+                  if (!((_a = Object.keys(state.expanded)) === null || _a === void 0 ? void 0 : _a.includes(row.id))) {
+                    toggleAllRowsExpanded(false);
+                  }
+                  row.toggleRowExpanded(!row.isExpanded);
+                  onExpand === null || onExpand === void 0 ? void 0 : onExpand(!row.isExpanded);
+                }
+              }, {
+                children: row.isExpanded ? jsxRuntime.jsx(icons.ChevronUpOutline, {}, void 0) : jsxRuntime.jsx(icons.ChevronDownOutline, {}, void 0)
+              }), void 0)]
+            }), void 0));
+          })
+        }), void 0), jsxRuntime.jsxs(TableRowCollapse, __assign({
           css: {
             backgroundColor: '$gray50'
           }
-        }), showCheckbox && jsxRuntime.jsx(TableCell$2, {}, void 0), jsxRuntime.jsx(TableCellCollapse, {
-          children: jsxRuntime.jsx(Collapalse, __assign({
-            isOpen: row.isExpanded
-          }, {
-            children: jsxRuntime.jsx(Flex$1, __assign({
-              direction: "column",
-              css: {
-                borderTop: '1pt solid $bgBorder'
-              }
+        }, {
+          children: [showCheckbox && jsxRuntime.jsx(TableCell$2, {}, void 0), jsxRuntime.jsx(TableCellCollapse, {
+            children: jsxRuntime.jsx(Collapalse, __assign({
+              isOpen: row.isExpanded
             }, {
-              children: row.cells.filter(function (cell) {
-                var _a, _b, _c, _d;
-                return typeof ((_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.hidden) === 'boolean' ? !((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.hidden) : !((_d = (_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.hidden) === null || _d === void 0 ? void 0 : _d.call(_c, cell));
-              }).map(function (cell, index) {
-                var _a, _b, _c, _d;
-                var headerRender = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.Header;
-                var isMobileHeader = (_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.isMobileHeader;
-                var isSelector = ((_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.id) === 'selection';
-                return !isMobileHeader && !isSelector && jsxRuntime.jsx(Flex$1, __assign({
-                  direction: "column",
-                  justify: "center",
-                  css: {
-                    borderBottom: '1pt solid $bgBorder',
-                    padding: '10px 12px',
-                    minHeight: 52
-                  }
-                }, {
-                  children: jsxRuntime.jsxs(Grid, __assign({
-                    columns: 6,
-                    flow: "row",
+              children: jsxRuntime.jsx(Flex$1, __assign({
+                direction: "column",
+                css: {
+                  borderTop: '1pt solid $bgBorder'
+                }
+              }, {
+                children: row.cells.filter(function (cell) {
+                  var _a, _b, _c, _d;
+                  return typeof ((_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.hidden) === 'boolean' ? !((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.hidden) : !((_d = (_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.hidden) === null || _d === void 0 ? void 0 : _d.call(_c, cell));
+                }).map(function (cell, index) {
+                  var _a, _b, _c, _d;
+                  var headerRender = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.Header;
+                  var isMobileHeader = (_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.isMobileHeader;
+                  var isSelector = ((_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.id) === 'selection';
+                  return !isMobileHeader && !isSelector && jsxRuntime.jsx(Flex$1, __assign({
+                    direction: "column",
+                    justify: "center",
                     css: {
-                      gridRowGap: '$spacing-04',
-                      gridColumnGap: '$spacing-04',
-                      alignItems: 'center'
+                      borderBottom: '1pt solid $bgBorder',
+                      padding: '10px 12px',
+                      minHeight: 52
                     }
                   }, {
-                    children: [jsxRuntime.jsx(GridItem, __assign({
-                      colSpan: 3
+                    children: jsxRuntime.jsxs(Grid, __assign({
+                      columns: 6,
+                      flow: "row",
+                      css: {
+                        gridRowGap: '$spacing-04',
+                        gridColumnGap: '$spacing-04',
+                        alignItems: 'center'
+                      }
                     }, {
-                      children: jsxRuntime.jsx(Heading, __assign({
-                        heading: "headerTable",
-                        color: "secondary"
+                      children: [jsxRuntime.jsx(GridItem, __assign({
+                        colSpan: 3
                       }, {
-                        children: typeof headerRender === 'string' ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                          children: [headerRender === null || headerRender === void 0 ? void 0 : headerRender.toUpperCase(), ((_d = cell === null || cell === void 0 ? void 0 : cell.column) === null || _d === void 0 ? void 0 : _d.isRequired) ? jsxRuntime.jsx(Required$2, {
-                            children: "*"
-                          }, void 0) : '']
-                        }, void 0) : headerRender
-                      }), void 0)
-                    }), void 0), jsxRuntime.jsx(GridItem, __assign({
-                      colSpan: 3
-                    }, {
-                      children: jsxRuntime.jsx(Flex$1, __assign({
-                        justify: "end"
+                        children: jsxRuntime.jsx(Heading, __assign({
+                          heading: "headerTable",
+                          color: "secondary"
+                        }, {
+                          children: typeof headerRender === 'string' ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                            children: [headerRender === null || headerRender === void 0 ? void 0 : headerRender.toUpperCase(), ((_d = cell === null || cell === void 0 ? void 0 : cell.column) === null || _d === void 0 ? void 0 : _d.isRequired) ? jsxRuntime.jsx(Required$2, {
+                              children: "*"
+                            }, void 0) : '']
+                          }, void 0) : headerRender
+                        }), void 0)
+                      }), void 0), jsxRuntime.jsx(GridItem, __assign({
+                        colSpan: 3
                       }, {
-                        children: cell.render('Cell')
-                      }), void 0)
-                    }), void 0)]
-                  }), void 0)
-                }), index);
-              })
+                        children: jsxRuntime.jsx(Flex$1, __assign({
+                          justify: "end"
+                        }, {
+                          children: cell.render('Cell')
+                        }), void 0)
+                      }), void 0)]
+                    }), void 0)
+                  }), "cell-collapse-".concat(index));
+                })
+              }), void 0)
             }), void 0)
-          }), void 0)
-        }, void 0))]
+          }, void 0)]
+        }), 'row-collapse-' + ((_a = row.getRowProps()) === null || _a === void 0 ? void 0 : _a.key))]
       }, void 0);
     };
+    var virtualRows = rowVirtualizer.virtualItems,
+      totalSize = rowVirtualizer.totalSize;
+    var paddingTop = virtualRows.length > 0 ? ((_a = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[0]) === null || _a === void 0 ? void 0 : _a.start) || 0 : 0;
+    var paddingBottom = virtualRows.length > 0 ? totalSize - (((_b = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[virtualRows.length - 1]) === null || _b === void 0 ? void 0 : _b.end) || 0) : 0;
+    var tableRowData = virtualized ? virtualRows : rows;
     return jsxRuntime.jsx(TableContainer$2, __assign({
+      ref: tableContainerRef,
       css: props === null || props === void 0 ? void 0 : props.css
     }, {
       children: jsxRuntime.jsxs(TableContent$2, __assign({}, getTableProps(), {
@@ -32636,7 +32815,7 @@
               return typeof (column === null || column === void 0 ? void 0 : column.hidden) === 'boolean' ? !(column === null || column === void 0 ? void 0 : column.hidden) : !((_a = column === null || column === void 0 ? void 0 : column.hidden) === null || _a === void 0 ? void 0 : _a.call(column, column));
             });
             return /*#__PURE__*/React.createElement(TableHeadRow$2, __assign({}, headerGroup.getHeaderGroupProps(), {
-              key: index
+              key: "head-row-".concat(index)
             }), visibleHeaders.map(function (column, index) {
               var isMobileHeader = column === null || column === void 0 ? void 0 : column.isMobileHeader;
               var isSelector = (column === null || column === void 0 ? void 0 : column.id) === 'selection';
@@ -32647,27 +32826,40 @@
                   maxWidth: isSelector ? 10 : column.maxWidth
                 }
               }), {
-                key: index
+                key: "head-cell-".concat(index)
               }), column.render('Header'), (column === null || column === void 0 ? void 0 : column.isRequired) ? jsxRuntime.jsx(Required$2, {
                 children: "*"
               }, void 0) : '');
             }));
           })
-        }, void 0), jsxRuntime.jsx(TableBody$2, __assign({}, getTableBodyProps(), {
-          children: rows.map(function (row, index) {
+        }, void 0), jsxRuntime.jsxs(TableBody$2, __assign({}, getTableBodyProps(), {
+          children: [virtualized && paddingTop > 0 && jsxRuntime.jsx("tr", {
+            children: jsxRuntime.jsx("td", {
+              style: {
+                height: "".concat(paddingTop, "px")
+              }
+            }, void 0)
+          }, void 0), tableRowData === null || tableRowData === void 0 ? void 0 : tableRowData.map(function (dataRow, index) {
+            var row = virtualized ? rows === null || rows === void 0 ? void 0 : rows[dataRow === null || dataRow === void 0 ? void 0 : dataRow.index] : dataRow;
             prepareRow(row);
             var customStyle = getCustomRows(row).customStyle;
             var _a = getCustomRows(row, function () {
-                return renderTableRow(row, index, customStyle);
+                return renderTableRow(row, customStyle);
               }),
               CustomRow = _a.CustomRow,
               showInMobile = _a.showInMobile;
             return jsxRuntime.jsx(React__default["default"].Fragment, {
               children: CustomRow && showInMobile ? jsxRuntime.jsx(CustomRow, {
                 style: customStyle
-              }, void 0) : renderTableRow(row, index, customStyle)
+              }, void 0) : renderTableRow(row, customStyle)
             }, index);
-          })
+          }), virtualized && paddingBottom > 0 && jsxRuntime.jsx("tr", {
+            children: jsxRuntime.jsx("td", {
+              style: {
+                height: "".concat(paddingBottom, "px")
+              }
+            }, void 0)
+          }, void 0)]
         }), void 0), rows.length < 1 && jsxRuntime.jsx(TableFoot$1, {
           children: jsxRuntime.jsx(TableFootRow$1, {
             children: jsxRuntime.jsx(TableFootCell$1, __assign({
@@ -50169,6 +50361,7 @@
     }, void 0);
   }
   function EditableTable(props) {
+    var _a, _b;
     var columns = props.columns,
       data = props.data,
       rowHeight = props.rowHeight,
@@ -50177,17 +50370,20 @@
       showCheckbox = props.showCheckbox,
       onSelectedChange = props.onSelectedChange,
       getCheckboxProps = props.getCheckboxProps,
-      _a = props.keyId,
-      keyId = _a === void 0 ? 'id' : _a,
+      _c = props.keyId,
+      keyId = _c === void 0 ? 'id' : _c,
       selectedIds = props.selectedIds,
       onExpand = props.onExpand,
       isMobileLayout = props.isMobileLayout,
       hiddenColumns = props.hiddenColumns,
-      emptyDataProps = props.customEmptyDataProps;
+      emptyDataProps = props.customEmptyDataProps,
+      _d = props.virtualized,
+      virtualized = _d === void 0 ? false : _d;
     var t = reactI18next.useTranslation('MajooUI/table').t;
-    var _b = React.useState(null),
-      selectedIndex = _b[0],
-      setSelectedIndex = _b[1];
+    var _e = React.useState(null),
+      selectedIndex = _e[0],
+      setSelectedIndex = _e[1];
+    var isMobile = useMediaQuery(isMobileLayout === undefined ? '(max-width: 767px)' : isMobileLayout ? '(max-width: 8000px)' : '(max-width: 0px)');
     var IndeterminateCheckbox = function IndeterminateCheckbox(props) {
       function handleCheckedChange(checked) {
         props === null || props === void 0 ? void 0 : props.onChange({
@@ -50246,6 +50442,19 @@
       visibleColumns = instance.visibleColumns,
       setHiddenColumns = instance.setHiddenColumns,
       selectedRowIds = instance.state.selectedRowIds;
+    var tableContainerRef = React.useRef(null);
+    var rowVirtualizer = reactVirtual.useVirtual({
+      parentRef: tableContainerRef,
+      size: data === null || data === void 0 ? void 0 : data.length,
+      overscan: isMobile ? 20 : 10,
+      estimateSize: React.useCallback(function () {
+        return isMobile ? 40 : rowHeight || 80;
+      }, [isMobile, rowHeight])
+    });
+    var virtualRows = rowVirtualizer.virtualItems,
+      totalSize = rowVirtualizer.totalSize;
+    var paddingTop = virtualRows.length > 0 ? ((_a = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[0]) === null || _a === void 0 ? void 0 : _a.start) || 0 : 0;
+    var paddingBottom = virtualRows.length > 0 ? totalSize - (((_b = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[virtualRows.length - 1]) === null || _b === void 0 ? void 0 : _b.end) || 0) : 0;
     React.useEffect(function () {
       if (hiddenColumns) setHiddenColumns(hiddenColumns);
     }, [hiddenColumns, setHiddenColumns]);
@@ -50259,7 +50468,6 @@
         });
       }
     }, [selectedRowIds, data, onSelectedChange, selectedIndex]);
-    var isMobile = useMediaQuery(isMobileLayout === undefined ? '(max-width: 767px)' : isMobileLayout ? '(max-width: 8000px)' : '(max-width: 0px)');
     var customEmptyDataProps = emptyDataProps || defaultEmptyDataProps(t, isMobile);
     var getCustomRows = function getCustomRows(row, renderRow) {
       var _a;
@@ -50315,7 +50523,9 @@
         })
       }), void 0);
     };
+    var tableRowData = virtualized ? virtualRows : rows;
     return !isMobile ? jsxRuntime.jsx(TableContainer$1, __assign({
+      ref: tableContainerRef,
       css: props === null || props === void 0 ? void 0 : props.css
     }, {
       children: jsxRuntime.jsxs(TableContent$1, __assign({}, getTableProps(), {
@@ -50341,8 +50551,15 @@
               })
             }), void 0);
           })
-        }, void 0), jsxRuntime.jsx(TableBody$1, __assign({}, getTableBodyProps(), {
-          children: rows.map(function (row, index) {
+        }, void 0), jsxRuntime.jsxs(TableBody$1, __assign({}, getTableBodyProps(), {
+          children: [virtualized && paddingTop > 0 && jsxRuntime.jsx("tr", {
+            children: jsxRuntime.jsx("td", {
+              style: {
+                height: "".concat(paddingTop, "px")
+              }
+            }, void 0)
+          }, void 0), tableRowData.map(function (dataRow, index) {
+            var row = virtualized ? rows === null || rows === void 0 ? void 0 : rows[dataRow === null || dataRow === void 0 ? void 0 : dataRow.index] : dataRow;
             prepareRow(row);
             var subRowCells = row.cells.filter(function (cell) {
               return cell.column.isSubRow;
@@ -50399,7 +50616,13 @@
                 }), cell.column.id);
               })]
             }, index);
-          })
+          }), virtualized && paddingBottom > 0 && jsxRuntime.jsx("tr", {
+            children: jsxRuntime.jsx("td", {
+              style: {
+                height: "".concat(paddingBottom, "px")
+              }
+            }, void 0)
+          }, void 0)]
         }), void 0), rows.length < 1 && jsxRuntime.jsx(TableFoot, {
           children: jsxRuntime.jsx(TableFootRow, {
             children: jsxRuntime.jsx(TableFootCell, __assign({
@@ -50427,7 +50650,10 @@
       customRows: customRows,
       onExpand: onExpand,
       hiddenColumns: hiddenColumns,
-      customEmptyDataProps: customEmptyDataProps
+      customEmptyDataProps: customEmptyDataProps,
+      virtualized: virtualized,
+      rowVirtualizer: rowVirtualizer,
+      tableContainerRef: tableContainerRef
     }, void 0);
   }
   EditableTable.Product = Product;