@majoo-ui/react 1.58.8 → 1.58.9

package/index.esm.js

@@ -3,7 +3,7 @@ import React__default, { useState, useEffect, createContext, useContext, useRef,
 import PropTypes from 'prop-types';
 import { createStitches, styled as styled$1 } from '@stitches/react';
 import { foundations } from '@majoo-ui/core';
-import { CloseOutline, UserFilled, CircleQuestionOutline, CircleInfoOutline, SearchOutline, CloseFilled, CaretDownOutline, ChevronUpOutline, ChevronDownOutline, CirclePlusOutline, SortingOutline, MinusOutline, PlusOutline, ChevronLeftOutline, ChevronRightOutline, TimeOutline, CalendarOutline, ChevronLgLeftOutline, ChevronLgRightOutline, ArrowLeftOutline, ArrowRightOutline, EllipsisHorizontalOutline, EyeOutline, UploadOutline, ImageOutline, ChevronUpDownOutline, CheckFilled, RemoveOutline, LocationOutline } from '@majoo-ui/icons';
+import { CloseOutline, UserFilled, CircleQuestionOutline, CircleInfoOutline, SearchOutline, CloseFilled, CaretDownOutline, ChevronDownOutline, ChevronUpOutline, CirclePlusOutline, SortingOutline, MinusOutline, PlusOutline, ChevronLeftOutline, ChevronRightOutline, TimeOutline, CalendarOutline, ChevronLgLeftOutline, ChevronLgRightOutline, ArrowLeftOutline, ArrowRightOutline, EllipsisHorizontalOutline, EyeOutline, UploadOutline, ImageOutline, ChevronUpDownOutline, CheckFilled, RemoveOutline, LocationOutline } from '@majoo-ui/icons';
 import { Transition } from 'react-transition-group';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Portal } from '@majoo-ui/helpers';
@@ -45,6 +45,7 @@ import { Editor } from 'react-draft-wysiwyg';
 import { ContextMenuTrigger as ContextMenuTrigger$1, ContextMenu as ContextMenu$1, MenuItem } from 'react-contextmenu';
 import ReactSkeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import 'react-loading-skeleton/dist/skeleton.css';
+import { useVirtual } from 'react-virtual';
 import ScrollSpy from 'react-ui-scrollspy';
 import ReactCrop, { centerCrop, makeAspectCrop } from 'react-image-crop';
 import imageCompressionComponent from 'browser-image-compression';
@@ -12872,6 +12873,140 @@ const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   }
 }));
 
+const StyledAccordion = styled(AccordionPrimitive.Root, {});
+const Accordion = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
+  var {
+      children
+    } = _a,
+    props = __rest(_a, ["children"]);
+  return jsx(StyledAccordion, Object.assign({
+    ref: forwardedRef
+  }, props, props.type === 'single' ? {
+    collapsible: true
+  } : {}, {
+    children: children
+  }), void 0);
+});
+const StyledItem$1 = styled(AccordionPrimitive.Item, {
+  borderTop: '1px solid $colors$slate6',
+  '&:last-of-type': {
+    borderBottom: '1px solid $colors$slate6'
+  }
+});
+const StyledHeader = styled(AccordionPrimitive.Header, {
+  all: 'unset'
+});
+const StyledTrigger$1 = styled(AccordionPrimitive.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'
+      }
+    }
+  }
+});
+const AccordionTrigger = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
+  var {
+      children,
+      arrowPosition = 'right',
+      hasContent = true,
+      arrowColor = 'white'
+    } = _a,
+    props = __rest(_a, ["children", "arrowPosition", "hasContent", "arrowColor"]);
+  return jsx(StyledHeader, {
+    children: jsx(StyledTrigger$1, Object.assign({}, props, {
+      arrowPosition: arrowPosition,
+      ref: forwardedRef
+    }, {
+      children: arrowPosition === 'right' ? jsxs(Fragment, {
+        children: [children, hasContent && jsx(ChevronDownOutline, {
+          className: "icon-cdf right",
+          color: arrowColor
+        }, void 0)]
+      }, void 0) : jsxs(Fragment, {
+        children: [hasContent && jsx(ChevronDownOutline, {
+          className: "icon-cdf left",
+          color: arrowColor
+        }, void 0), children]
+      }, void 0)
+    }), void 0)
+  }, void 0);
+});
+const AccordionItem = StyledItem$1;
+const AccordionContent = AccordionPrimitive.Content;
+
+const OptionGroup = styled(Flex$1, {
+  position: 'relative'
+});
+const OptionItem = styled(Flex$1, {
+  fontWeight: 600
+});
+const OptionChildren = styled(Box, {});
+const IconWrapper$1 = styled(Box, {
+  position: 'absolute',
+  top: 10,
+  right: 0,
+  cursor: 'pointer'
+});
+function OptionGroupItem({
+  item,
+  children
+}) {
+  const [isShow, setIsShow] = useState(false);
+  return jsxs(OptionGroup, Object.assign({
+    direction: "column"
+  }, {
+    children: [jsxs(OptionItem, {
+      children: [item, jsx(IconWrapper$1, Object.assign({
+        onClick: () => setIsShow(!isShow)
+      }, {
+        children: isShow ? jsx(ChevronUpOutline, {}, void 0) : jsx(ChevronDownOutline, {}, void 0)
+      }), void 0)]
+    }, void 0), isShow && 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";
 const Wrapper$1 = styled('div', {
@@ -13104,7 +13239,7 @@ const IndeterminateFilled$1 = styled('div', {
   alignItems: 'center'
 });
 const InputSelectCheck = /*#__PURE__*/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,
@@ -13223,7 +13358,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     removeSelectedItem,
     selectedItems
   } = 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 => {
@@ -13301,7 +13436,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     isOpen
   } = useCombobox({
     inputValue,
-    items: items,
+    items: items.reduce((acc, item) => [...acc, item, ...(item.children ? item.children : [])], []),
     selectedItem: selectedValue,
     itemToString: item => item ? item.name : '',
     onStateChange: ({
@@ -13343,6 +13478,52 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
                 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]);
@@ -13439,13 +13620,173 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     }
   };
   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.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.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.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.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.createElement(IndeterminateFilled$1, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$w,
+        lineNumber: 713,
+        columnNumber: 15
+      }
+    }, "-") : /*#__PURE__*/React__default.createElement("div", {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$w,
+        lineNumber: 715,
+        columnNumber: 15
+      }
+    })), /*#__PURE__*/React__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.createElement(OptionGroupItem, {
+      item: /*#__PURE__*/React__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.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.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.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.createElement(IndeterminateFilled$1, {
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$w,
+          lineNumber: 761,
+          columnNumber: 19
+        }
+      }, "-") : null), /*#__PURE__*/React__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.createElement(Wrapper$1, _extends({
     css: css
   }, props, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 626,
+      lineNumber: 776,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Select, {
@@ -13455,7 +13796,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 627,
+      lineNumber: 777,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -13470,7 +13811,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 628,
+      lineNumber: 778,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Input$6, _extends({}, getInputProps({
@@ -13488,7 +13829,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 638,
+      lineNumber: 788,
       columnNumber: 13
     }
   })), /*#__PURE__*/React__default.createElement(Button$2, _extends({}, getToggleButtonProps({
@@ -13501,7 +13842,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 645,
+      lineNumber: 795,
       columnNumber: 13
     }
   }), placeholder != null ? placeholder : t('placeholder', 'Pilih Item'))), /*#__PURE__*/React__default.createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -13512,7 +13853,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 655,
+      lineNumber: 805,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(IconCaretDown, {
@@ -13520,7 +13861,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 660,
+      lineNumber: 810,
       columnNumber: 13
     }
   }))), helperText && /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -13533,7 +13874,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 664,
+      lineNumber: 814,
       columnNumber: 11
     }
   }, helperText), showSelectedTag && !showCounter && selectedItems.length !== 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TagWrapper$2, {
@@ -13541,7 +13882,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 670,
+      lineNumber: 820,
       columnNumber: 13
     }
   }, isShowTagSelectAll ? /*#__PURE__*/React__default.createElement(Tag, _extends({
@@ -13561,7 +13902,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __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) => {
@@ -13591,7 +13932,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __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.createElement(Flex$1, {
@@ -13600,7 +13941,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 722,
+      lineNumber: 872,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -13610,14 +13951,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 723,
+      lineNumber: 873,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Separator$2, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 724,
+      lineNumber: 874,
       columnNumber: 19
     }
   }), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -13631,7 +13972,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 725,
+      lineNumber: 875,
       columnNumber: 19
     }
   }, showAllTags ? /*#__PURE__*/React__default.createElement(ChevronUpOutline, {
@@ -13639,7 +13980,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 731,
+      lineNumber: 881,
       columnNumber: 23
     }
   }) : /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
@@ -13647,7 +13988,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 733,
+      lineNumber: 883,
       columnNumber: 23
     }
   }), /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -13659,14 +14000,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 735,
+      lineNumber: 885,
       columnNumber: 21
     }
   }, showAllTags ? t('showSomeText', 'Tampilkan Sebagian') : t('showAllText', 'Tampilkan Semua'))), /*#__PURE__*/React__default.createElement(Separator$2, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 739,
+      lineNumber: 889,
       columnNumber: 19
     }
   })), /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -13677,7 +14018,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __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.createElement(Paragraph, {
@@ -13689,7 +14030,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __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.createElement(OptionWrapper$1, {
@@ -13702,7 +14043,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 758,
+      lineNumber: 908,
       columnNumber: 9
     }
   }, isLoading && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -13724,7 +14065,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 768,
+      lineNumber: 918,
       columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(Text$1, {
@@ -13732,7 +14073,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 785,
+      lineNumber: 935,
       columnNumber: 15
     }
   }, "Loading....")), items.length > 0 || isLoading ? /*#__PURE__*/React__default.createElement(Option, _extends({}, getMenuProps({
@@ -13743,7 +14084,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 791,
+      lineNumber: 941,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
@@ -13758,92 +14099,17 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __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.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.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.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.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.createElement(IndeterminateFilled$1, {
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$w,
-        lineNumber: 841,
-        columnNumber: 27
-      }
-    }, "-") : /*#__PURE__*/React__default.createElement("div", {
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$w,
-        lineNumber: 843,
-        columnNumber: 27
-      }
-    })), /*#__PURE__*/React__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.createElement(Option, _extends({
+  }, isOpen && items.map((item, index) => item !== null && item !== void 0 && item.children ? renderOptionGroupItem(item, index) : renderOptionItem(item, index)))) : /*#__PURE__*/React__default.createElement(Option, _extends({
     css: {
       height: 'auto'
     }
@@ -13853,14 +14119,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 854,
+      lineNumber: 962,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(StyledDiv, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 855,
+      lineNumber: 963,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -13870,7 +14136,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 856,
+      lineNumber: 964,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(CircleInfoOutline, {
@@ -13882,7 +14148,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 857,
+      lineNumber: 965,
       columnNumber: 19
     }
   })), textEmptyItem != null ? textEmptyItem : t('emptyItemText', 'Item tidak ditemukan')))));
@@ -19319,7 +19585,7 @@ const StyledList = styled(TabsPrimitive.List, {
     display: 'none'
   }
 });
-const StyledTrigger$1 = styled(TabsPrimitive.Trigger, {
+const StyledTrigger = styled(TabsPrimitive.Trigger, {
   all: 'unset',
   fontFamily: 'inherit',
   backgroundColor: 'white',
@@ -19550,7 +19816,7 @@ const TabsTrigger$1 = _ref3 => {
     } = _ref3,
     props = _objectWithoutPropertiesLoose(_ref3, _excluded3$1);
   const [isIconHovered, setIsIconHovered] = useState(false);
-  return /*#__PURE__*/React__default.createElement(StyledTrigger$1, _extends({
+  return /*#__PURE__*/React__default.createElement(StyledTrigger, _extends({
     value: value
   }, props, {
     __self: undefined,
@@ -20205,107 +20471,6 @@ ModalDialog.defaultProps = {
   layer: '$modal'
 };
 
-const StyledAccordion = styled(AccordionPrimitive.Root, {});
-const Accordion = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
-  var {
-      children
-    } = _a,
-    props = __rest(_a, ["children"]);
-  return jsx(StyledAccordion, Object.assign({
-    ref: forwardedRef
-  }, props, props.type === 'single' ? {
-    collapsible: true
-  } : {}, {
-    children: children
-  }), void 0);
-});
-const StyledItem$1 = styled(AccordionPrimitive.Item, {
-  borderTop: '1px solid $colors$slate6',
-  '&:last-of-type': {
-    borderBottom: '1px solid $colors$slate6'
-  }
-});
-const StyledHeader = styled(AccordionPrimitive.Header, {
-  all: 'unset'
-});
-const StyledTrigger = styled(AccordionPrimitive.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'
-      }
-    }
-  }
-});
-const AccordionTrigger = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
-  var {
-      children,
-      arrowPosition = 'right',
-      hasContent = true,
-      arrowColor = 'white'
-    } = _a,
-    props = __rest(_a, ["children", "arrowPosition", "hasContent", "arrowColor"]);
-  return jsx(StyledHeader, {
-    children: jsx(StyledTrigger, Object.assign({}, props, {
-      arrowPosition: arrowPosition,
-      ref: forwardedRef
-    }, {
-      children: arrowPosition === 'right' ? jsxs(Fragment, {
-        children: [children, hasContent && jsx(ChevronDownOutline, {
-          className: "icon-cdf right",
-          color: arrowColor
-        }, void 0)]
-      }, void 0) : jsxs(Fragment, {
-        children: [hasContent && jsx(ChevronDownOutline, {
-          className: "icon-cdf left",
-          color: arrowColor
-        }, void 0), children]
-      }, void 0)
-    }), void 0)
-  }, void 0);
-});
-const AccordionItem = StyledItem$1;
-const AccordionContent = AccordionPrimitive.Content;
-
 const removeUndefinedFields = obj => {
   let newObj = {};
   Object.keys(obj).forEach(key => {
@@ -32020,13 +32185,17 @@ const Required$2 = styled('span', {
   color: '$textRed !important'
 });
 function EditableTableMobile(props) {
+  var _a, _b;
   const {
+    rowVirtualizer,
+    tableContainerRef,
     instance,
     showCheckbox,
     customRows,
     onExpand,
     hiddenColumns,
-    customEmptyDataProps
+    customEmptyDataProps,
+    virtualized
   } = props;
   const {
     getTableProps,
@@ -32068,121 +32237,131 @@ function EditableTableMobile(props) {
       showInMobile
     };
   };
-  const renderTableRow = (row, index, customStyle) => {
+  const renderTableRow = (row, customStyle) => {
+    var _a;
     return jsxs(Fragment, {
-      children: [/*#__PURE__*/createElement$2(TableRow$2, Object.assign({
+      children: [jsx(TableRow$2, Object.assign({
         css: customStyle
       }, row.getRowProps(), {
-        key: `row_mobile_${index}`
-      }), row.cells.map((cell, index) => {
-        var _a, _b;
-        const isMobileHeader = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.isMobileHeader;
-        const isSelector = ((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.id) === 'selection';
-        return (isMobileHeader || isSelector) && /*#__PURE__*/createElement$2(TableCell$2, Object.assign({}, cell.getCellProps({
-          style: {
-            minWidth: cell.column.minWidth,
-            width: isSelector ? 10 : cell.column.width,
-            maxWidth: isSelector ? 10 : cell.column.maxWidth
-          }
-        }), {
-          key: index
-        }), jsxs(Flex$1, Object.assign({
-          align: "center",
-          justify: "between",
-          css: {
-            cursor: 'pointer',
-            minHeight: 40
-          }
-        }, {
-          children: [jsx(Box, {
-            children: cell.render('Cell')
-          }, void 0), !isSelector && jsx(Flex$1, Object.assign({
-            justify: "center",
+        children: row.cells.map((cell, index) => {
+          var _a, _b;
+          const isMobileHeader = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.isMobileHeader;
+          const isSelector = ((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.id) === 'selection';
+          return (isMobileHeader || isSelector) && /*#__PURE__*/createElement$2(TableCell$2, Object.assign({}, cell.getCellProps({
+            style: {
+              minWidth: cell.column.minWidth,
+              width: isSelector ? 10 : cell.column.width,
+              maxWidth: isSelector ? 10 : cell.column.maxWidth
+            }
+          }), {
+            key: `cell-body-${index}`
+          }), jsxs(Flex$1, Object.assign({
             align: "center",
-            onClick: () => {
-              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 ? jsx(ChevronUpOutline, {}, void 0) : jsx(ChevronDownOutline, {}, void 0)
-          }), void 0)]
-        }), void 0));
-      })), /*#__PURE__*/createElement$2(TableRowCollapse, Object.assign({}, row.getRowProps(), {
-        key: `row_mobile_collapse_${index}`,
+            children: [jsx(Box, {
+              children: cell.render('Cell')
+            }, void 0), !isSelector && jsx(Flex$1, Object.assign({
+              justify: "center",
+              align: "center",
+              onClick: () => {
+                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 ? jsx(ChevronUpOutline, {}, void 0) : jsx(ChevronDownOutline, {}, void 0)
+            }), void 0)]
+          }), void 0));
+        })
+      }), void 0), jsxs(TableRowCollapse, Object.assign({
         css: {
           backgroundColor: '$gray50'
         }
-      }), showCheckbox && jsx(TableCell$2, {}, void 0), jsx(TableCellCollapse, {
-        children: jsx(Collapalse, Object.assign({
-          isOpen: row.isExpanded
-        }, {
-          children: jsx(Flex$1, Object.assign({
-            direction: "column",
-            css: {
-              borderTop: '1pt solid $bgBorder'
-            }
+      }, {
+        children: [showCheckbox && jsx(TableCell$2, {}, void 0), jsx(TableCellCollapse, {
+          children: jsx(Collapalse, Object.assign({
+            isOpen: row.isExpanded
           }, {
-            children: row.cells.filter(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((cell, index) => {
-              var _a, _b, _c, _d;
-              const headerRender = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.Header;
-              const isMobileHeader = (_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.isMobileHeader;
-              const isSelector = ((_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.id) === 'selection';
-              return !isMobileHeader && !isSelector && jsx(Flex$1, Object.assign({
-                direction: "column",
-                justify: "center",
-                css: {
-                  borderBottom: '1pt solid $bgBorder',
-                  padding: '10px 12px',
-                  minHeight: 52
-                }
-              }, {
-                children: jsxs(Grid, Object.assign({
-                  columns: 6,
-                  flow: "row",
+            children: jsx(Flex$1, Object.assign({
+              direction: "column",
+              css: {
+                borderTop: '1pt solid $bgBorder'
+              }
+            }, {
+              children: row.cells.filter(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((cell, index) => {
+                var _a, _b, _c, _d;
+                const headerRender = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.Header;
+                const isMobileHeader = (_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.isMobileHeader;
+                const isSelector = ((_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.id) === 'selection';
+                return !isMobileHeader && !isSelector && jsx(Flex$1, Object.assign({
+                  direction: "column",
+                  justify: "center",
                   css: {
-                    gridRowGap: '$spacing-04',
-                    gridColumnGap: '$spacing-04',
-                    alignItems: 'center'
+                    borderBottom: '1pt solid $bgBorder',
+                    padding: '10px 12px',
+                    minHeight: 52
                   }
                 }, {
-                  children: [jsx(GridItem, Object.assign({
-                    colSpan: 3
+                  children: jsxs(Grid, Object.assign({
+                    columns: 6,
+                    flow: "row",
+                    css: {
+                      gridRowGap: '$spacing-04',
+                      gridColumnGap: '$spacing-04',
+                      alignItems: 'center'
+                    }
                   }, {
-                    children: jsx(Heading, Object.assign({
-                      heading: "headerTable",
-                      color: "secondary"
+                    children: [jsx(GridItem, Object.assign({
+                      colSpan: 3
                     }, {
-                      children: typeof headerRender === 'string' ? jsxs(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) ? jsx(Required$2, {
-                          children: "*"
-                        }, void 0) : '']
-                      }, void 0) : headerRender
-                    }), void 0)
-                  }), void 0), jsx(GridItem, Object.assign({
-                    colSpan: 3
-                  }, {
-                    children: jsx(Flex$1, Object.assign({
-                      justify: "end"
+                      children: jsx(Heading, Object.assign({
+                        heading: "headerTable",
+                        color: "secondary"
+                      }, {
+                        children: typeof headerRender === 'string' ? jsxs(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) ? jsx(Required$2, {
+                            children: "*"
+                          }, void 0) : '']
+                        }, void 0) : headerRender
+                      }), void 0)
+                    }), void 0), jsx(GridItem, Object.assign({
+                      colSpan: 3
                     }, {
-                      children: cell.render('Cell')
-                    }), void 0)
-                  }), void 0)]
-                }), void 0)
-              }), index);
-            })
+                      children: jsx(Flex$1, Object.assign({
+                        justify: "end"
+                      }, {
+                        children: cell.render('Cell')
+                      }), void 0)
+                    }), void 0)]
+                  }), void 0)
+                }), `cell-collapse-${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);
   };
+  const {
+    virtualItems: virtualRows,
+    totalSize
+  } = rowVirtualizer;
+  const paddingTop = virtualRows.length > 0 ? ((_a = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[0]) === null || _a === void 0 ? void 0 : _a.start) || 0 : 0;
+  const 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;
+  const tableRowData = virtualized ? virtualRows : rows;
   return jsx(TableContainer$2, Object.assign({
+    ref: tableContainerRef,
     css: props === null || props === void 0 ? void 0 : props.css
   }, {
     children: jsxs(TableContent$2, Object.assign({}, getTableProps(), {
@@ -32193,7 +32372,7 @@ function EditableTableMobile(props) {
             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__*/createElement$2(TableHeadRow$2, Object.assign({}, headerGroup.getHeaderGroupProps(), {
-            key: index
+            key: `head-row-${index}`
           }), visibleHeaders.map((column, index) => {
             const isMobileHeader = column === null || column === void 0 ? void 0 : column.isMobileHeader;
             const isSelector = (column === null || column === void 0 ? void 0 : column.id) === 'selection';
@@ -32204,14 +32383,21 @@ function EditableTableMobile(props) {
                 maxWidth: isSelector ? 10 : column.maxWidth
               }
             }), {
-              key: index
+              key: `head-cell-${index}`
             }), column.render('Header'), (column === null || column === void 0 ? void 0 : column.isRequired) ? jsx(Required$2, {
               children: "*"
             }, void 0) : '');
           }));
         })
-      }, void 0), jsx(TableBody$2, Object.assign({}, getTableBodyProps(), {
-        children: rows.map((row, index) => {
+      }, void 0), jsxs(TableBody$2, Object.assign({}, getTableBodyProps(), {
+        children: [virtualized && paddingTop > 0 && jsx("tr", {
+          children: jsx("td", {
+            style: {
+              height: `${paddingTop}px`
+            }
+          }, void 0)
+        }, void 0), tableRowData === null || tableRowData === void 0 ? void 0 : tableRowData.map((dataRow, index) => {
+          const row = virtualized ? rows === null || rows === void 0 ? void 0 : rows[dataRow === null || dataRow === void 0 ? void 0 : dataRow.index] : dataRow;
           prepareRow(row);
           const {
             customStyle
@@ -32219,13 +32405,19 @@ function EditableTableMobile(props) {
           const {
             CustomRow,
             showInMobile
-          } = getCustomRows(row, () => renderTableRow(row, index, customStyle));
+          } = getCustomRows(row, () => renderTableRow(row, customStyle));
           return jsx(React__default.Fragment, {
             children: CustomRow && showInMobile ? jsx(CustomRow, {
               style: customStyle
-            }, void 0) : renderTableRow(row, index, customStyle)
+            }, void 0) : renderTableRow(row, customStyle)
           }, index);
-        })
+        }), virtualized && paddingBottom > 0 && jsx("tr", {
+          children: jsx("td", {
+            style: {
+              height: `${paddingBottom}px`
+            }
+          }, void 0)
+        }, void 0)]
       }), void 0), rows.length < 1 && jsx(TableFoot$1, {
         children: jsx(TableFootRow$1, {
           children: jsx(TableFootCell$1, Object.assign({
@@ -49726,6 +49918,7 @@ function Remove(props) {
   }, void 0);
 }
 function EditableTable(props) {
+  var _a, _b;
   const {
     columns,
     data,
@@ -49740,12 +49933,14 @@ function EditableTable(props) {
     onExpand,
     isMobileLayout,
     hiddenColumns,
-    customEmptyDataProps: emptyDataProps
+    customEmptyDataProps: emptyDataProps,
+    virtualized = false
   } = props;
   const {
     t
   } = useTranslation('MajooUI/table');
   const [selectedIndex, setSelectedIndex] = useState(null);
+  const isMobile = useMediaQuery(isMobileLayout === undefined ? '(max-width: 767px)' : isMobileLayout ? '(max-width: 8000px)' : '(max-width: 0px)');
   const IndeterminateCheckbox = props => {
     function handleCheckedChange(checked) {
       props === null || props === void 0 ? void 0 : props.onChange({
@@ -49804,6 +49999,19 @@ function EditableTable(props) {
       selectedRowIds
     }
   } = instance;
+  const tableContainerRef = useRef(null);
+  const rowVirtualizer = useVirtual({
+    parentRef: tableContainerRef,
+    size: data === null || data === void 0 ? void 0 : data.length,
+    overscan: isMobile ? 20 : 10,
+    estimateSize: useCallback(() => isMobile ? 40 : rowHeight || 80, [isMobile, rowHeight])
+  });
+  const {
+    virtualItems: virtualRows,
+    totalSize
+  } = rowVirtualizer;
+  const paddingTop = virtualRows.length > 0 ? ((_a = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[0]) === null || _a === void 0 ? void 0 : _a.start) || 0 : 0;
+  const 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;
   useEffect(() => {
     if (hiddenColumns) setHiddenColumns(hiddenColumns);
   }, [hiddenColumns, setHiddenColumns]);
@@ -49817,7 +50025,6 @@ function EditableTable(props) {
       });
     }
   }, [selectedRowIds, data, onSelectedChange, selectedIndex]);
-  const isMobile = useMediaQuery(isMobileLayout === undefined ? '(max-width: 767px)' : isMobileLayout ? '(max-width: 8000px)' : '(max-width: 0px)');
   const customEmptyDataProps = emptyDataProps || defaultEmptyDataProps(t, isMobile);
   const getCustomRows = (row, renderRow) => {
     var _a;
@@ -49870,7 +50077,9 @@ function EditableTable(props) {
       })
     }), void 0);
   };
+  const tableRowData = virtualized ? virtualRows : rows;
   return !isMobile ? jsx(TableContainer$1, Object.assign({
+    ref: tableContainerRef,
     css: props === null || props === void 0 ? void 0 : props.css
   }, {
     children: jsxs(TableContent$1, Object.assign({}, getTableProps(), {
@@ -49894,8 +50103,15 @@ function EditableTable(props) {
             }), void 0))
           }), void 0);
         })
-      }, void 0), jsx(TableBody$1, Object.assign({}, getTableBodyProps(), {
-        children: rows.map((row, index) => {
+      }, void 0), jsxs(TableBody$1, Object.assign({}, getTableBodyProps(), {
+        children: [virtualized && paddingTop > 0 && jsx("tr", {
+          children: jsx("td", {
+            style: {
+              height: `${paddingTop}px`
+            }
+          }, void 0)
+        }, void 0), tableRowData.map((dataRow, index) => {
+          const row = virtualized ? rows === null || rows === void 0 ? void 0 : rows[dataRow === null || dataRow === void 0 ? void 0 : dataRow.index] : dataRow;
           prepareRow(row);
           const subRowCells = row.cells.filter(cell => cell.column.isSubRow);
           const notNullHeaderColumns = visibleColumns.filter(column => typeof column.Header !== 'function' && column.Header !== null && !column.isSubRow);
@@ -49950,7 +50166,13 @@ function EditableTable(props) {
               }), cell.column.id);
             })]
           }, index);
-        })
+        }), virtualized && paddingBottom > 0 && jsx("tr", {
+          children: jsx("td", {
+            style: {
+              height: `${paddingBottom}px`
+            }
+          }, void 0)
+        }, void 0)]
       }), void 0), rows.length < 1 && jsx(TableFoot, {
         children: jsx(TableFootRow, {
           children: jsx(TableFootCell, Object.assign({
@@ -49978,7 +50200,10 @@ function EditableTable(props) {
     customRows: customRows,
     onExpand: onExpand,
     hiddenColumns: hiddenColumns,
-    customEmptyDataProps: customEmptyDataProps
+    customEmptyDataProps: customEmptyDataProps,
+    virtualized: virtualized,
+    rowVirtualizer: rowVirtualizer,
+    tableContainerRef: tableContainerRef
   }, void 0);
 }
 EditableTable.Product = Product;