@majoo-ui/react 1.50.2 → 1.51.0

package/index.esm.js

@@ -7351,7 +7351,7 @@ Tag.defaultProps = {
   readOnly: false
 };
 
-const _excluded$f = ["size", "isInvalid", "placeholder", "onChange", "onEnter", "onInputChange", "value", "disabled", "readOnly", "max", "maxChar", "pattern", "helperText"];
+const _excluded$f = ["size", "isInvalid", "placeholder", "onChange", "onEnter", "onInputChange", "value", "disabled", "readOnly", "max", "maxChar", "pattern", "helperText", "unremovableTags", "onRemoveItem"];
 var _jsxFileName$A = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputTags\\InputTags.js";
 const Wrapper$2 = styled('div', {
   margin: 0,
@@ -7470,7 +7470,9 @@ function TagsInput(_ref) {
     max,
     maxChar,
     pattern,
-    helperText
+    helperText,
+    unremovableTags,
+    onRemoveItem
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
 
@@ -7520,6 +7522,7 @@ function TagsInput(_ref) {
     if (disabled || readOnly) {
       return tags;
     } else if (key === 'removeTag' || key === 'Backspace') {
+      onRemoveItem === null || onRemoveItem === void 0 ? void 0 : onRemoveItem(tags[index]);
       setTags([...tags.filter(tag => tags.indexOf(tag) !== index)]);
     }
   }; // const handleErrorMessage = () => {
@@ -7536,7 +7539,7 @@ function TagsInput(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$A,
-      lineNumber: 168,
+      lineNumber: 171,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(InputTagsComponent, _extends({
@@ -7549,7 +7552,7 @@ function TagsInput(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$A,
-      lineNumber: 169,
+      lineNumber: 172,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Input$8, {
@@ -7564,7 +7567,7 @@ function TagsInput(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$A,
-      lineNumber: 177,
+      lineNumber: 180,
       columnNumber: 9
     }
   })), regexError && pattern && (pattern !== null && pattern !== void 0 && pattern.errorMessage ? /*#__PURE__*/React__default.createElement(FormHelper, {
@@ -7572,7 +7575,7 @@ function TagsInput(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$A,
-      lineNumber: 191,
+      lineNumber: 194,
       columnNumber: 11
     }
   }, pattern.errorMessage) : /*#__PURE__*/React__default.createElement(FormHelper, {
@@ -7580,7 +7583,7 @@ function TagsInput(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$A,
-      lineNumber: 193,
+      lineNumber: 196,
       columnNumber: 11
     }
   }, "Invalid Input")), helperText && /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -7594,14 +7597,14 @@ function TagsInput(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$A,
-      lineNumber: 197,
+      lineNumber: 200,
       columnNumber: 9
     }
   }, helperText), /*#__PURE__*/React__default.createElement(TagWrapper$2, {
     __self: this,
     __source: {
       fileName: _jsxFileName$A,
-      lineNumber: 201,
+      lineNumber: 204,
       columnNumber: 7
     }
   }, tags.map((tag, index) => /*#__PURE__*/React__default.createElement(Tag, {
@@ -7609,12 +7612,12 @@ function TagsInput(_ref) {
     disabled: disabled,
     readOnly: readOnly,
     size: size === 'lg' ? 'sm' : 'lg',
-    isRemovable: disabled || readOnly ? false : true,
+    isRemovable: disabled || readOnly || unremovableTags.includes(tag) ? false : true,
     onRemove: () => removeTags(index, 'removeTag'),
     __self: this,
     __source: {
       fileName: _jsxFileName$A,
-      lineNumber: 203,
+      lineNumber: 206,
       columnNumber: 11
     }
   }, tag))));
@@ -7624,12 +7627,14 @@ TagsInput.propTypes = {
   size: PropTypes.string,
   value: PropTypes.arrayOf(PropTypes.string),
   onChange: PropTypes.arrayOf(PropTypes.string),
+  onRemoveItem: PropTypes.func,
   onEnter: PropTypes.func,
   onInputChange: PropTypes.func,
   max: PropTypes.number,
   maxChar: PropTypes.number,
   isInvalid: PropTypes.bool,
   disabled: PropTypes.bool,
+  unremovableTags: PropTypes.arrayOf(PropTypes.string),
   readOnly: PropTypes.bool,
   helperText: PropTypes.string,
   pattern: PropTypes.shape({
@@ -7642,6 +7647,7 @@ TagsInput.defaultProps = {
   size: 'lg',
   isInvalid: false,
   disabled: false,
+  unremovableTags: [],
   readOnly: false
 };
 
@@ -8569,7 +8575,7 @@ function InputSelect(_a) {
             type: "button"
           }, {
             children: selectedItem ? selectedItem.render ? selectedItem.render(selectedItem) : jsx(Text$1, Object.assign({
-              color: "primary",
+              color: disabled ? 'disable' : 'primary',
               css: StyledText$1
             }, {
               children: selectedItem.name
@@ -9040,7 +9046,7 @@ const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   }
 }));
 
-const _excluded$c = ["placeholder", "option", "value", "size", "disabled", "onChange", "search", "readOnly", "placement", "disabledOptions", "textEmptyItem", "onRemoveItem", "isInvalid", "sortBy", "showSelectedTag", "helperText", "css"];
+const _excluded$c = ["placeholder", "option", "value", "size", "disabled", "onChange", "search", "readOnly", "placement", "disabledOptions", "textEmptyItem", "onRemoveItem", "isInvalid", "sortBy", "showSelectAll", "selectAllLabel", "showSelectedTag", "unremovableTags", "helperText", "css"];
 var _jsxFileName$u = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectCheck\\InputSelectCheck.js";
 const Wrapper$1 = styled('div', {
   margin: 0,
@@ -9273,27 +9279,30 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     onRemoveItem,
     isInvalid,
     sortBy,
+    showSelectAll,
+    selectAllLabel,
     showSelectedTag,
+    unremovableTags,
     helperText,
     css
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
 
-  const [initItem, setInitItem] = React__default.useState(option); //init filter selectedItems on useMultipleSelection
+  const [initItem, setInitItems] = React__default.useState(option); //init filter selectedItems on useMultipleSelection
 
-  const [item, setItem] = React__default.useState([]);
+  const [items, setItems] = React__default.useState([]);
   const [selectedValue, setSelectedValue] = React__default.useState([]);
   const [inputValue, setInputValue] = React__default.useState('');
-  useEffect(() => {
-    setItem(option);
-  }, [option]);
-  const sortItem = React__default.useCallback(() => {
+  const sortItems = React__default.useCallback(() => {
     if (sortBy === 'id') {
       option.sort(function (a, b) {
         const idA = a.id.toUpperCase(); // ignore upper and lowercase
 
         const idB = b.id.toUpperCase(); // ignore upper and lowercase
 
+        if (a.id === '!all') return -1;
+        if (b.id === '!all') return 1;
+
         if (idA < idB) {
           return -1;
         }
@@ -9310,6 +9319,9 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
 
         const nameB = b.name.toUpperCase(); // ignore upper and lowercase
 
+        if (a.id === '!all') return -1;
+        if (b.id === '!all') return 1;
+
         if (nameA < nameB) {
           return -1;
         }
@@ -9321,7 +9333,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         return 0;
       });
     }
-  }, [sortBy]);
+  }, [sortBy, option]);
   const sortValue = selectedValue.length > 0 && disabledOptions.length === 0 ? value.reduce((res, id, i, {
     [i + 1]: next
   }) => {
@@ -9344,24 +9356,6 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       return [...res, ...filterOption]; // add the missing elements
     }
   }, []) : option;
-  React__default.useEffect(() => {
-    if (selectedValue.length > 0 && disabledOptions.length === 0) {
-      setInitItem(sortValue);
-      setItem(sortValue);
-    }
-  }, []);
-  React__default.useEffect(() => {
-    sortItem();
-  }, [sortBy]);
-  React__default.useEffect(() => {
-    if (disabledOptions.length > 0) {
-      setInitItem(generateOptions(sortDisabled));
-      setItem(generateOptions(sortDisabled)); // setItem(generateOptions(option));
-    }
-  }, [disabledOptions]);
-  React__default.useEffect(() => {
-    setSelectedValue(value);
-  }, [value]);
   const {
     getSelectedItemProps,
     getDropdownProps,
@@ -9395,13 +9389,13 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
   const handleInputValue = input => {
     if (input === '') {
       if (disabledOptions.length > 0) {
-        setItem(generateOptions(sortDisabled));
+        setItems(generateOptions(sortDisabled));
       } else {
-        return setItem(sortValue);
+        return setItems(sortValue);
       }
     } else {
       let filterItems = option.filter(item => item.name.toLowerCase().startsWith(input.toLocaleLowerCase()));
-      setItem(filterItems);
+      setItems(filterItems);
     }
   };
 
@@ -9409,10 +9403,13 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     if (disabled || readOnly) {
       return selectedValue;
     } else {
-      let filterItems = selectedValue.filter(item => item !== selected.id);
+      const filterItems = selectedValue.filter(val => val !== selected.id && val !== '!all');
       removeSelectedItem(selected);
       setSelectedValue(filterItems);
-      onChange === null || onChange === void 0 ? void 0 : onChange(filterItems);
+
+      if (selected.id !== '!all') {
+        onChange === null || onChange === void 0 ? void 0 : onChange(filterItems);
+      }
     }
   };
 
@@ -9428,7 +9425,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     isOpen
   } = useCombobox({
     inputValue,
-    items: item,
+    items: items,
     selectedItem: selectedValue,
     itemToString: item => item ? item.name : '',
     onStateChange: ({
@@ -9446,17 +9443,38 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         case useCombobox.stateChangeTypes.ItemClick:
         case useCombobox.stateChangeTypes.InputBlur:
           if (selectedItem) {
+            openMenu();
+
             if (selectedItems.length !== 0 && selectedValue.includes(selectedItem.id)) {
               if (disabled === false && readOnly === false) {
-                removeSelectedItem(selectedItem);
-                removeItem(selectedItem);
+                if (selectedItem.id === '!all') {
+                  items.forEach(item => {
+                    removeSelectedItem(item);
+                  });
+                  setSelectedValue([]);
+                  onChange === null || onChange === void 0 ? void 0 : onChange([]);
+                } else {
+                  removeItem(selectedItem);
+                }
+
                 selectItem(null);
               }
             } else {
-              openMenu();
-              addSelectedItem(selectedItem);
-              setSelectedValue([...selectedValue, selectedItem.id]);
-              onChange === null || onChange === void 0 ? void 0 : onChange([...selectedValue, selectedItem.id]);
+              if (selectedItem.id === '!all') {
+                const itemIds = [];
+                items.forEach(item => {
+                  addSelectedItem(item);
+                  itemIds.push(item.id);
+                });
+                setSelectedValue(itemIds);
+                onChange === null || onChange === void 0 ? void 0 : onChange(itemIds.slice(1));
+              } else {
+                addSelectedItem(selectedItem);
+                setSelectedValue([...selectedValue, selectedItem.id]);
+                const filteredSelectedValues = selectedValue.filter(val => val !== '!all');
+                onChange === null || onChange === void 0 ? void 0 : onChange([...filteredSelectedValues, selectedItem.id]);
+              }
+
               selectItem(null);
             }
           }
@@ -9467,13 +9485,49 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       }
     }
   });
+  useEffect(() => {
+    sortItems();
+    setItems(showSelectAll ? [{
+      id: '!all',
+      name: selectAllLabel
+    }, ...option] : option);
+    setInitItems(showSelectAll ? [{
+      id: '!all',
+      name: selectAllLabel
+    }, ...option] : option);
+  }, [option, showSelectAll]);
+  useEffect(() => {
+    if (selectedValue.length > 0 && disabledOptions.length === 0) {
+      setInitItems(sortValue);
+      setItems(sortValue);
+    }
+  }, []);
+  useEffect(() => {
+    sortItems();
+  }, [sortBy]);
+  useEffect(() => {
+    if (disabledOptions.length > 0) {
+      const options = generateOptions(sortDisabled);
+      setItems(showSelectAll ? [{
+        id: '!all',
+        name: selectAllLabel
+      }, ...options] : options);
+      setInitItems(showSelectAll ? [{
+        id: '!all',
+        name: selectAllLabel
+      }, ...options] : options);
+    }
+  }, [disabledOptions, showSelectAll]);
+  useEffect(() => {
+    setSelectedValue(items.length > 0 && value.length === items.length - 1 ? ['!all', ...value] : value);
+  }, [value]);
   return /*#__PURE__*/React__default.createElement(Wrapper$1, _extends({
     css: css
   }, props, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 421,
+      lineNumber: 490,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Select, {
@@ -9483,7 +9537,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 422,
+      lineNumber: 491,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -9498,7 +9552,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 423,
+      lineNumber: 492,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Input$6, _extends({}, getInputProps({
@@ -9514,7 +9568,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 433,
+      lineNumber: 502,
       columnNumber: 13
     }
   })), /*#__PURE__*/React__default.createElement(Button$1, _extends({}, getToggleButtonProps({
@@ -9527,7 +9581,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 439,
+      lineNumber: 508,
       columnNumber: 13
     }
   }), placeholder)), /*#__PURE__*/React__default.createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -9538,7 +9592,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 449,
+      lineNumber: 518,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(IconCaretDown, {
@@ -9546,7 +9600,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 454,
+      lineNumber: 523,
       columnNumber: 13
     }
   }))), helperText && /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -9559,7 +9613,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 458,
+      lineNumber: 527,
       columnNumber: 11
     }
   }, helperText), showSelectedTag && selectedItems.length !== 0 && /*#__PURE__*/React__default.createElement(TagWrapper$1, {
@@ -9567,11 +9621,11 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 463,
+      lineNumber: 532,
       columnNumber: 11
     }
   }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React__default.createElement(Tag, _extends({
-    isRemovable: readOnly || disabled ? false : true,
+    isRemovable: readOnly || disabled || unremovableTags.includes(selectedItem.id) ? false : true,
     disabled: disabled,
     size: "lg",
     readOnly: readOnly,
@@ -9591,7 +9645,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 465,
+      lineNumber: 534,
       columnNumber: 15
     }
   }), selectedItem.name))), /*#__PURE__*/React__default.createElement(OptionWrapper$1, {
@@ -9603,19 +9657,19 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 486,
+      lineNumber: 555,
       columnNumber: 9
     }
-  }, item.length !== 0 ? /*#__PURE__*/React__default.createElement(Option, _extends({}, getMenuProps({}, {
+  }, items.length !== 0 ? /*#__PURE__*/React__default.createElement(Option, _extends({}, getMenuProps({}, {
     suppressRefError: true
   }), {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 491,
+      lineNumber: 560,
       columnNumber: 13
     }
-  }), isOpen && item.map((item, index) => /*#__PURE__*/React__default.createElement(ItemWrapper$1, _extends({
+  }), isOpen && items.map((item, index) => /*#__PURE__*/React__default.createElement(ItemWrapper$1, _extends({
     key: item.id
   }, getItemProps({
     item,
@@ -9630,7 +9684,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 494,
+      lineNumber: 563,
       columnNumber: 19
     }
   }), /*#__PURE__*/React__default.createElement(IconWrapper, {
@@ -9643,7 +9697,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 507,
+      lineNumber: 576,
       columnNumber: 21
     }
   }, item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -9651,7 +9705,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 516,
+      lineNumber: 585,
       columnNumber: 25
     }
   }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -9659,7 +9713,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 520,
+      lineNumber: 589,
       columnNumber: 27
     }
   })), /*#__PURE__*/React__default.createElement(Item$2, {
@@ -9669,7 +9723,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 524,
+      lineNumber: 593,
       columnNumber: 21
     }
   }, item.name)))) : /*#__PURE__*/React__default.createElement(Option, _extends({
@@ -9682,14 +9736,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 529,
+      lineNumber: 598,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(StyledDiv$1, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 530,
+      lineNumber: 599,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -9699,7 +9753,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 531,
+      lineNumber: 600,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(CircleInfoOutline, {
@@ -9711,7 +9765,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 532,
+      lineNumber: 601,
       columnNumber: 19
     }
   })), textEmptyItem))));
@@ -9730,7 +9784,11 @@ InputSelectCheck.propTypes = {
   search: PropTypes.bool,
   placement: PropTypes.oneOf(['top', 'bottom']),
   disabledOptions: PropTypes.arrayOf(PropTypes.string),
+  unremovableTags: PropTypes.arrayOf(PropTypes.string),
   textEmptyItem: PropTypes.string,
+  showSelectAll: PropTypes.bool,
+  selectAllLabel: PropTypes.string,
+  showSelectedTag: PropTypes.bool,
   css: PropTypes.object,
   helperText: PropTypes.string
 };
@@ -9744,8 +9802,11 @@ InputSelectCheck.defaultProps = {
   placement: 'bottom',
   value: [],
   disabledOptions: [],
+  unremovableTags: [],
   textEmptyItem: 'Item tidak ditemukan',
-  sortBy: 'name'
+  sortBy: 'name',
+  showSelectAll: false,
+  selectAllLabel: 'Pilih Semua'
 };
 
 var _jsxFileName$t = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectTag\\InputSelectTag.js";
@@ -9775,6 +9836,7 @@ InputSelectTag.propTypes = {
   onRemoveItem: PropTypes.func,
   search: PropTypes.bool,
   placement: PropTypes.oneOf(['top', 'bottom']),
+  unremovableTags: PropTypes.arrayOf(PropTypes.string),
   disabledOptions: PropTypes.arrayOf(PropTypes.string),
   textEmptyItem: PropTypes.string,
   helperText: PropTypes.string
@@ -9789,6 +9851,7 @@ InputSelectTag.defaultProps = {
   placement: 'bottom',
   value: [],
   disabledOptions: [],
+  unremovableTags: [],
   textEmptyItem: 'Item tidak ditemukan',
   sortBy: 'name'
 };
@@ -10493,7 +10556,9 @@ const InputCounter = /*#__PURE__*/forwardRef((props, ref) => {
     allowNegative,
     min,
     max,
-    disabled
+    disabled,
+    prefix,
+    suffix
   } = props;
   const [inputValue, setInputValue] = useState((_a = min !== null && min !== void 0 ? min : value) !== null && _a !== void 0 ? _a : 0);
   useEffect(() => {
@@ -10549,7 +10614,9 @@ const InputCounter = /*#__PURE__*/forwardRef((props, ref) => {
       disabled: disabled,
       value: inputValue,
       allowNegative: allowNegative,
-      onChange: handleChange
+      onChange: handleChange,
+      prefix: prefix,
+      suffix: suffix
     }, void 0), jsx(Button, Object.assign({
       disabled: disabled,
       buttonType: "secondary",
@@ -16438,7 +16505,7 @@ Pagination.propTypes = {
 };
 Pagination.displayName = 'Pagination';
 
-const TableContainer$3 = styled(Flex$1, {
+const TableContainer$4 = styled(Flex$1, {
   position: 'relative',
   flexDirection: 'column',
   width: '100%',
@@ -16447,7 +16514,7 @@ const TableContainer$3 = styled(Flex$1, {
   overflowX: 'hidden',
   padding: '0 $spacing-05'
 });
-const TableHeadRow$3 = styled('tr', {
+const TableHeadRow$4 = styled('tr', {
   borderBottom: '1pt solid $bgBorder',
   '& th': {
     paddingLeft: '$spacing-05'
@@ -16456,10 +16523,10 @@ const TableHeadRow$3 = styled('tr', {
     padding: 0
   }
 });
-const TableHeadCell$3 = styled('th', {
+const TableHeadCell$4 = styled('th', {
   height: '40px'
 });
-const TableRow$3 = styled('tr', {
+const TableRow$4 = styled('tr', {
   borderBottom: '1pt solid $bgBorder',
   '& td': {
     paddingLeft: '$spacing-05'
@@ -16468,7 +16535,7 @@ const TableRow$3 = styled('tr', {
     padding: 0
   }
 });
-const TableCell$3 = styled('td', {
+const TableCell$4 = styled('td', {
   height: '40px',
   fontSize: '$short-content-regular',
   lineHeight: '$short-content-regular',
@@ -16502,16 +16569,16 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
       sortBy
     }
   } = instance;
-  return jsx(TableContainer$3, Object.assign({
+  return jsx(TableContainer$4, Object.assign({
     css: css,
     ref: ref
   }, {
-    children: infiniteScrollWrapper(jsxs(TableContent$2, Object.assign({}, getTableProps(), {
-      children: [jsx(TableHead$2, {
-        children: headerGroups.map(headerGroup => jsx(TableHeadRow$3, Object.assign({}, headerGroup.getHeaderGroupProps(), {
+    children: infiniteScrollWrapper(jsxs(TableContent$3, Object.assign({}, getTableProps(), {
+      children: [jsx(TableHead$3, {
+        children: headerGroups.map(headerGroup => jsx(TableHeadRow$4, Object.assign({}, headerGroup.getHeaderGroupProps(), {
           children: headerGroup.headers.filter(column => column.isMobileHeader || column.id === 'selection').map(column => {
             const headerRender = column.render('Header');
-            return jsx(TableHeadCell$3, Object.assign({}, column.getHeaderProps(!column.unsortable ? column.getSortByToggleProps({
+            return jsx(TableHeadCell$4, Object.assign({}, column.getHeaderProps(!column.unsortable ? column.getSortByToggleProps({
               title: 'Urutkan'
             }) : {}), {
               children: typeof headerRender === 'string' ? jsx(TableHeaderCellContainer, Object.assign({
@@ -16530,7 +16597,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
             }), void 0);
           })
         }), void 0))
-      }, void 0), jsx(TableBody$2, Object.assign({}, getTableBodyProps(), {
+      }, void 0), jsx(TableBody$3, Object.assign({}, getTableBodyProps(), {
         children: page.map(row => {
           prepareRow(row);
           const actionCells = row.allCells.filter(cell => cell.column.id === 'menu' || cell.column.isAction);
@@ -16551,11 +16618,11 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
               variant: "contentButton"
             }, {
               children: row.cells[0].render('Cell')
-            }), void 0)), jsx(TableRow$3, Object.assign({
+            }), void 0)), jsx(TableRow$4, Object.assign({
               css: customStyle
             }, row.getRowProps(), {
               children: row.cells.filter(cell => cell.column.isMobileHeader || cell.column.id === 'selection').map(cell => {
-                return jsx(TableCell$3, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
+                return jsx(TableCell$4, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
                   children: cell.column.accessor ? jsxs(Flex$1, Object.assign({
                     justify: "between",
                     align: "center",
@@ -16574,8 +16641,8 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                   }), void 0) : cell.render('Cell')
                 }), void 0);
               })
-            }), void 0), ((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.showGroupingWhenSorted) || sortBy.length <= 0) && row.original['isBottomChild'] && !!(rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.footerRender) && (rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.footerRender(row)), row.isExpanded ? jsx(TableRow$3, {
-              children: jsxs(TableCell$3, Object.assign({
+            }), void 0), ((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.showGroupingWhenSorted) || sortBy.length <= 0) && row.original['isBottomChild'] && !!(rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.footerRender) && (rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.footerRender(row)), row.isExpanded ? jsx(TableRow$4, {
+              children: jsxs(TableCell$4, Object.assign({
                 colSpan: visibleColumns.length
               }, {
                 children: [jsx(Flex$1, Object.assign({
@@ -16642,7 +16709,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
   }), void 0);
 });
 
-const TableContainer$2 = styled('div', {
+const TableContainer$3 = styled('div', {
   display: 'block',
   flexDirection: 'column',
   maxWidth: '100%',
@@ -16650,7 +16717,7 @@ const TableContainer$2 = styled('div', {
   height: '100%',
   overflow: 'auto'
 });
-const TableContent$2 = styled('table', {
+const TableContent$3 = styled('table', {
   width: '100%',
   borderSpacing: 0,
   borderCollapse: 'collapse',
@@ -16658,7 +16725,7 @@ const TableContent$2 = styled('table', {
     backgroundColor: '$bgWhite'
   }
 });
-const TableHead$2 = styled('thead', {
+const TableHead$3 = styled('thead', {
   position: 'sticky',
   top: 0,
   backgroundColor: '$bgWhite',
@@ -16666,8 +16733,8 @@ const TableHead$2 = styled('thead', {
   borderBottom: '1pt solid $bgBorder',
   color: '$textPrimary'
 });
-const TableHeadRow$2 = styled('tr');
-const TableHeadCell$2 = styled('th', {
+const TableHeadRow$3 = styled('tr');
+const TableHeadCell$3 = styled('th', {
   height: '64px'
 });
 const TableHeaderCellContainer = styled(Flex$1, {
@@ -16768,8 +16835,8 @@ const TableHeadCellContent = styled(Heading, {
     }
   }
 });
-const TableBody$2 = styled('tbody', {});
-const TableRow$2 = styled('tr', {
+const TableBody$3 = styled('tbody', {});
+const TableRow$3 = styled('tr', {
   borderBottom: '1pt solid $bgBorder',
   '&:hover': {
     backgroundColor: '$bgGray',
@@ -16789,7 +16856,7 @@ const TableRow$2 = styled('tr', {
     }
   }
 });
-const TableCell$2 = styled('td', {
+const TableCell$3 = styled('td', {
   height: '68px',
   fontSize: '$short-content-regular',
   lineHeight: '$short-content-regular',
@@ -17068,20 +17135,20 @@ function Table({
         children: "Loading .... "
       }), void 0)
     }), void 0), !isMobile ? jsxs(Fragment, {
-      children: [jsx(TableContainer$2, Object.assign({
+      children: [jsx(TableContainer$3, Object.assign({
         css: css,
         ref: scrollerRef
       }, {
-        children: renderInfiniteScrollWrapper(jsxs(TableContent$2, Object.assign({}, getTableProps(), {
-          children: [jsx(TableHead$2, Object.assign({
+        children: renderInfiniteScrollWrapper(jsxs(TableContent$3, Object.assign({}, getTableProps(), {
+          children: [jsx(TableHead$3, Object.assign({
             css: headerCss
           }, {
             children: headerGroups.map(headerGroup => {
               const visibleHeaders = headerGroup.headers.filter(column => !column.isSubRow);
-              return jsx(TableHeadRow$2, Object.assign({}, headerGroup.getHeaderGroupProps(), {
+              return jsx(TableHeadRow$3, Object.assign({}, headerGroup.getHeaderGroupProps(), {
                 children: visibleHeaders.map((column, index) => {
                   const headerRender = column.render('Header');
-                  return jsx(TableHeadCell$2, Object.assign({}, column.getHeaderProps(props => [props, // column.getSortByToggleProps && !column.unsortable
+                  return jsx(TableHeadCell$3, Object.assign({}, column.getHeaderProps(props => [props, // column.getSortByToggleProps && !column.unsortable
                   !column.unsortable ? column.getSortByToggleProps({
                     title: 'Urutkan'
                   }) : {}, {
@@ -17123,7 +17190,7 @@ function Table({
                 })
               }), void 0);
             })
-          }), void 0), jsx(TableBody$2, Object.assign({}, getTableBodyProps(), {
+          }), void 0), jsx(TableBody$3, Object.assign({}, getTableBodyProps(), {
             children: page.map((row, i) => {
               var _a;
 
@@ -17146,11 +17213,11 @@ function Table({
                   variant: "contentButton"
                 }, {
                   children: row.cells[0].render('Cell')
-                }), void 0)), jsx(TableRow$2, Object.assign({
+                }), void 0)), jsx(TableRow$3, Object.assign({
                   css: customStyle
                 }, row.getRowProps(), {
                   children: row.cells.filter(cell => !cell.column.isSubRow).map(cell => {
-                    return jsx(TableCell$2, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
+                    return jsx(TableCell$3, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
                       css: Object.assign({
                         padding: cell.column.accessor ? '20px 8px' : '20px 20px',
                         verticalAlign: cell.column.accessor ? cellAlign : 'center'
@@ -17159,11 +17226,11 @@ function Table({
                       children: cell.render('Cell')
                     }), void 0);
                   })
-                }), void 0), ((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.showGroupingWhenSorted) || sortBy.length <= 0) && row.original['isBottomChild'] && !!(rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.footerRender) && (rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.footerRender(row)), row.isExpanded ? subRowCells.map((cell, index) => jsxs(TableRow$2, Object.assign({
+                }), void 0), ((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.showGroupingWhenSorted) || sortBy.length <= 0) && row.original['isBottomChild'] && !!(rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.footerRender) && (rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.footerRender(row)), row.isExpanded ? subRowCells.map((cell, index) => jsxs(TableRow$3, Object.assign({
                   subRow: true
                 }, {
                   children: [leftAddOnCells.map((_, index) => jsx("td", {}, index)), jsxs(React.Fragment, {
-                    children: [jsx(TableCell$2, Object.assign({
+                    children: [jsx(TableCell$3, Object.assign({
                       subCell: true,
                       colSpan: notNullHeaderColumns.length > 5 ? 2 : 1,
                       headerSubCell: true,
@@ -17177,7 +17244,7 @@ function Table({
                       }, {
                         children: cell.column.Header
                       }), void 0)
-                    }), void 0), jsx(TableCell$2, Object.assign({
+                    }), void 0), jsx(TableCell$3, Object.assign({
                       subCell: true,
                       colSpan: visibleColumns.length - subRowCells.length,
                       css: {
@@ -26365,29 +26432,29 @@ Collapalse.defaultProps = {
   isOpen: false
 };
 
-const TableContainer$1 = styled('div', {
+const TableContainer$2 = styled('div', {
   display: 'block',
   flexDirection: 'column',
   maxWidth: '100%',
   position: 'relative',
   height: '100%'
 });
-const TableContent$1 = styled('table', {
+const TableContent$2 = styled('table', {
   width: '100%',
   borderSpacing: 0,
   borderCollapse: 'collapse'
 });
-const TableHead$1 = styled('thead', {
+const TableHead$2 = styled('thead', {
   position: 'sticky',
   top: 0,
   backgroundColor: '$gray50',
   boxShadow: '0 4px 4px rgba(0, 0, 0, 0.025)',
   zIndex: 10
 });
-const TableHeadRow$1 = styled('tr', {
+const TableHeadRow$2 = styled('tr', {
   borderBottom: '1pt solid $bgBorder'
 });
-const TableHeadCell$1 = styled('th', {
+const TableHeadCell$2 = styled('th', {
   height: '41px',
   fontSize: '$header-table',
   fontWeight: 600,
@@ -26395,8 +26462,8 @@ const TableHeadCell$1 = styled('th', {
   textAlign: 'left',
   paddingLeft: 8
 });
-const TableBody$1 = styled('tbody', {});
-const TableRow$1 = styled('tr', {
+const TableBody$2 = styled('tbody', {});
+const TableRow$2 = styled('tr', {
   '&:hover': {
     backgroundColor: '$bgGray'
   }
@@ -26407,7 +26474,7 @@ const TableRowCollapse = styled('tr', {
     backgroundColor: '$bgGray'
   }
 });
-const TableCell$1 = styled('td', {
+const TableCell$2 = styled('td', {
   fontSize: '$short-content-regular',
   lineHeight: '$short-content-regular',
   letterSpacing: '$short-content-regular',
@@ -26437,7 +26504,7 @@ const TableCellCollapse = styled('td', {
     paddingRight: 16
   }
 });
-const Required$1 = styled('span', {
+const Required$2 = styled('span', {
   marginLeft: 4,
   color: '$textRed !important'
 });
@@ -26455,14 +26522,14 @@ function EditableTableMobile(props) {
     state,
     toggleAllRowsExpanded
   } = instance;
-  return jsx(TableContainer$1, Object.assign({
+  return jsx(TableContainer$2, Object.assign({
     css: props === null || props === void 0 ? void 0 : props.css
   }, {
-    children: jsxs(TableContent$1, Object.assign({}, getTableProps(), {
-      children: [jsx(TableHead$1, {
-        children: headerGroups.map((headerGroup, index) => /*#__PURE__*/createElement$2(TableHeadRow$1, Object.assign({}, headerGroup.getHeaderGroupProps(), {
+    children: jsxs(TableContent$2, Object.assign({}, getTableProps(), {
+      children: [jsx(TableHead$2, {
+        children: headerGroups.map((headerGroup, index) => /*#__PURE__*/createElement$2(TableHeadRow$2, Object.assign({}, headerGroup.getHeaderGroupProps(), {
           key: index
-        }), headerGroup.headers.map((column, index) => (column === null || column === void 0 ? void 0 : column.isMobileHeader) && /*#__PURE__*/createElement$2(TableHeadCell$1, Object.assign({}, column.getHeaderProps({
+        }), headerGroup.headers.map((column, index) => (column === null || column === void 0 ? void 0 : column.isMobileHeader) && /*#__PURE__*/createElement$2(TableHeadCell$2, Object.assign({}, column.getHeaderProps({
           style: {
             minWidth: column.minWidth,
             width: column.width,
@@ -26470,17 +26537,17 @@ function EditableTableMobile(props) {
           }
         }), {
           key: index
-        }), column.render('Header'), (column === null || column === void 0 ? void 0 : column.isRequired) ? jsx(Required$1, {
+        }), column.render('Header'), (column === null || column === void 0 ? void 0 : column.isRequired) ? jsx(Required$2, {
           children: "*"
         }, void 0) : ''))))
-      }, void 0), jsx(TableBody$1, Object.assign({}, getTableBodyProps(), {
+      }, void 0), jsx(TableBody$2, Object.assign({}, getTableBodyProps(), {
         children: rows.map((row, index) => {
           prepareRow(row);
           return jsxs(React__default.Fragment, {
-            children: [/*#__PURE__*/createElement$2(TableRow$1, Object.assign({}, row.getRowProps(), {
+            children: [/*#__PURE__*/createElement$2(TableRow$2, Object.assign({}, row.getRowProps(), {
               key: `row_mobile_${index}`
             }), row.cells.map((cell, index) => {
-              return cell.column.isMobileHeader && /*#__PURE__*/createElement$2(TableCell$1, Object.assign({}, cell.getCellProps({
+              return cell.column.isMobileHeader && /*#__PURE__*/createElement$2(TableCell$2, Object.assign({}, cell.getCellProps({
                 style: {
                   minWidth: cell.column.minWidth,
                   width: cell.column.width,
@@ -26494,20 +26561,20 @@ function EditableTableMobile(props) {
                 css: {
                   cursor: 'pointer',
                   minHeight: 40
-                },
-                onClick: () => {
-                  if (!Object.keys(state.expanded).includes(row.id)) {
-                    toggleAllRowsExpanded(false);
-                  }
-
-                  row.toggleRowExpanded(!row.isExpanded);
                 }
               }, {
                 children: [jsx(Box, {
                   children: cell.render('Cell')
                 }, void 0), jsx(Flex$1, Object.assign({
                   justify: "center",
-                  align: "center"
+                  align: "center",
+                  onClick: () => {
+                    if (!Object.keys(state.expanded).includes(row.id)) {
+                      toggleAllRowsExpanded(false);
+                    }
+
+                    row.toggleRowExpanded(!row.isExpanded);
+                  }
                 }, {
                   children: row.isExpanded ? jsx(ChevronUpOutline, {}, void 0) : jsx(ChevronDownOutline, {}, void 0)
                 }), void 0)]
@@ -26557,7 +26624,7 @@ function EditableTableMobile(props) {
                             color: "secondary"
                           }, {
                             children: typeof headerRender === 'string' ? jsxs(Fragment, {
-                              children: [headerRender === null || headerRender === void 0 ? void 0 : headerRender.toUpperCase(), ((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.isRequired) ? jsx(Required$1, {
+                              children: [headerRender === null || headerRender === void 0 ? void 0 : headerRender.toUpperCase(), ((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.isRequired) ? jsx(Required$2, {
                                 children: "*"
                               }, void 0) : '']
                             }, void 0) : headerRender
@@ -26605,7 +26672,7 @@ function EditableTableMobile(props) {
   }), void 0);
 }
 
-const TableContainer = styled('div', {
+const TableContainer$1 = styled('div', {
   display: 'block',
   flexDirection: 'column',
   maxWidth: '100%',
@@ -26613,22 +26680,22 @@ const TableContainer = styled('div', {
   height: '100%',
   overflow: 'auto'
 });
-const TableContent = styled('table', {
+const TableContent$1 = styled('table', {
   width: '100%',
   borderSpacing: 0,
   borderCollapse: 'collapse'
 });
-const TableHead = styled('thead', {
+const TableHead$1 = styled('thead', {
   position: 'sticky',
   top: 0,
   backgroundColor: '$gray50',
   boxShadow: '0 4px 4px rgba(0, 0, 0, 0.025)',
   zIndex: 10
 });
-const TableHeadRow = styled('tr', {
+const TableHeadRow$1 = styled('tr', {
   borderBottom: '1pt solid $bgBorder'
 });
-const TableHeadCell = styled('th', {
+const TableHeadCell$1 = styled('th', {
   height: '48px',
   fontSize: '$header-table',
   fontWeight: 600,
@@ -26636,8 +26703,8 @@ const TableHeadCell = styled('th', {
   textAlign: 'left',
   paddingLeft: 8
 });
-const TableBody = styled('tbody', {});
-const TableRow = styled('tr', {
+const TableBody$1 = styled('tbody', {});
+const TableRow$1 = styled('tr', {
   borderTop: '1pt solid $bgBorder',
   '&:last-child': {
     borderBottom: '1pt solid $bgBorder'
@@ -26654,7 +26721,7 @@ const TableRow = styled('tr', {
     }
   }
 });
-const TableCell = styled('td', {
+const TableCell$1 = styled('td', {
   fontSize: '$short-content-regular',
   lineHeight: '$short-content-regular',
   letterSpacing: '$short-content-regular',
@@ -26683,7 +26750,7 @@ const TableCell = styled('td', {
     }
   }
 });
-const TableCellContent = styled('div', {
+const TableCellContent$1 = styled('div', {
   height: '100%',
   paddingTop: 10,
   paddingBottom: 10,
@@ -26774,7 +26841,7 @@ const RemoveIcon = styled(RemoveOutline, {
 const Input$1 = styled(InputText, {
   height: '32px !important'
 });
-const Required = styled('span', {
+const Required$1 = styled('span', {
   marginLeft: 4,
   color: '$textRed !important'
 });
@@ -26896,7 +26963,8 @@ function EditableTable(props) {
     data,
     emptyDataMessage,
     rowHeight,
-    align
+    align,
+    customRows
   } = props;
   const instance = useTable({
     columns,
@@ -26912,38 +26980,61 @@ function EditableTable(props) {
     visibleColumns
   } = instance;
   const isDesktop = useMediaQuery('(min-width: 767px)');
-  return isDesktop ? jsx(TableContainer, Object.assign({
+  return isDesktop ? jsx(TableContainer$1, Object.assign({
     css: props === null || props === void 0 ? void 0 : props.css
   }, {
-    children: jsxs(TableContent, Object.assign({}, getTableProps(), {
-      children: [jsx(TableHead, {
+    children: jsxs(TableContent$1, Object.assign({}, getTableProps(), {
+      children: [jsx(TableHead$1, {
         children: headerGroups.map(headerGroup => {
           const visibleHeaders = headerGroup.headers.filter(column => !column.isSubRow);
-          return jsx(TableHeadRow, Object.assign({}, headerGroup.getHeaderGroupProps(), {
-            children: visibleHeaders.map(column => !(column === null || column === void 0 ? void 0 : column.isMobileOnly) && jsxs(TableHeadCell, Object.assign({}, column.getHeaderProps({
+          return jsx(TableHeadRow$1, Object.assign({}, headerGroup.getHeaderGroupProps(), {
+            children: visibleHeaders.map(column => !(column === null || column === void 0 ? void 0 : column.isMobileOnly) && jsxs(TableHeadCell$1, Object.assign({}, column.getHeaderProps({
               style: {
                 minWidth: column.minWidth,
                 width: column.width,
                 maxWidth: column.maxWidth
               }
             }), {
-              children: [column.render('Header'), (column === null || column === void 0 ? void 0 : column.isRequired) ? jsx(Required, {
+              children: [column.render('Header'), (column === null || column === void 0 ? void 0 : column.isRequired) ? jsx(Required$1, {
                 children: "*"
               }, void 0) : '']
             }), void 0))
           }), void 0);
         })
-      }, void 0), jsx(TableBody, Object.assign({}, getTableBodyProps(), {
+      }, void 0), jsx(TableBody$1, Object.assign({}, getTableBodyProps(), {
         children: rows.map((row, index) => {
+          var _a;
+
           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);
+          let customStyle = {};
+          let CustomRow;
+
+          if (customRows && customRows(row).length) {
+            for (let i = 0; i < customRows(row).length; i++) {
+              if (customRows(row)[i].predicate) {
+                customStyle = (_a = customRows(row)[i]) === null || _a === void 0 ? void 0 : _a.css;
+
+                CustomRow = () => {
+                  var _a;
+
+                  return (_a = customRows(row)[i]) === null || _a === void 0 ? void 0 : _a.Row(row.values);
+                };
+              }
+            }
+          }
+
           return jsxs(React__default.Fragment, {
-            children: [jsx(TableRow, Object.assign({}, row.getRowProps(), {
+            children: [CustomRow ? jsx(CustomRow, {
+              style: customStyle
+            }, void 0) : jsx(TableRow$1, Object.assign({
+              css: customStyle
+            }, row.getRowProps(), {
               children: row.cells.filter(cell => !cell.column.isSubRow).map(cell => {
                 var _a;
 
-                return !((_a = cell.column) === null || _a === void 0 ? void 0 : _a.isMobileOnly) && jsx(TableCell, Object.assign({}, cell.getCellProps({
+                return !((_a = cell.column) === null || _a === void 0 ? void 0 : _a.isMobileOnly) && jsx(TableCell$1, Object.assign({}, cell.getCellProps({
                   style: {
                     minWidth: cell.column.minWidth,
                     width: cell.column.width,
@@ -26956,7 +27047,7 @@ function EditableTable(props) {
                     }
                   }
                 }, {
-                  children: jsx(TableCellContent, Object.assign({
+                  children: jsx(TableCellContent$1, Object.assign({
                     align: align
                   }, {
                     children: cell.render('Cell')
@@ -26966,11 +27057,11 @@ function EditableTable(props) {
             }), void 0), subRowCells.map(cell => {
               var _a;
 
-              return jsx(TableRow, Object.assign({
+              return jsx(TableRow$1, Object.assign({
                 subRow: true
               }, {
                 children: jsxs(React__default.Fragment, {
-                  children: [jsx(TableCell, Object.assign({
+                  children: [jsx(TableCell$1, Object.assign({
                     subCell: true,
                     colSpan: notNullHeaderColumns.length > 5 ? 2 : 1,
                     headerSubCell: true,
@@ -26988,7 +27079,7 @@ function EditableTable(props) {
                     }, {
                       children: cell.column.Header
                     }), void 0)
-                  }), void 0), jsx(TableCell, Object.assign({
+                  }), void 0), jsx(TableCell$1, Object.assign({
                     subCell: true,
                     colSpan: visibleColumns.length - subRowCells.length,
                     css: {
@@ -27041,6 +27132,8 @@ EditableTable.Product = Product;
 EditableTable.Input = Input$1;
 EditableTable.Switch = Switch;
 EditableTable.Remove = Remove;
+EditableTable.TableRow = TableRow$1;
+EditableTable.TableCell = TableCell$1;
 
 const Container$3 = styled$1('div', {});
 const ProgressText = styled$1('p', {
@@ -28870,6 +28963,292 @@ LineChart.defaultProps = {
   period: undefined
 };
 
+const TableContainer = styled('div', {
+  display: 'block',
+  flexDirection: 'column',
+  maxWidth: '100%',
+  position: 'relative',
+  height: '100%',
+  overflow: 'auto'
+});
+const TableContent = styled('table', {
+  width: '100%',
+  borderSpacing: 0,
+  borderCollapse: 'collapse'
+});
+const TableHead = styled('thead', {
+  position: 'sticky',
+  top: 0,
+  backgroundColor: '$white',
+  zIndex: 10
+});
+const TableHeadRow = styled('tr', {
+  borderBottom: '1px solid $bgBorder'
+});
+const TableHeadCell = styled('th', {
+  height: 44,
+  fontSize: '$header-table',
+  fontWeight: 600,
+  color: '$textPrimary',
+  textAlign: 'left',
+  paddingLeft: 8
+});
+const TableBody = styled('tbody', {});
+const TableRow = styled('tr', {
+  borderTop: '1pt solid $bgBorder',
+  '&:last-child': {
+    borderBottom: '1pt solid $bgBorder'
+  },
+  '&:hover': {
+    backgroundColor: '$bgGray'
+  },
+  variants: {
+    subRow: {
+      true: {
+        borderTop: 'none',
+        borderBottom: '1pt solid $bgBorder'
+      }
+    }
+  }
+});
+const TableCell = styled('td', {
+  fontSize: '$short-content-regular',
+  lineHeight: '$short-content-regular',
+  letterSpacing: '$short-content-regular',
+  fontWeight: 400,
+  color: '$textPrimary',
+  position: 'relative',
+  paddingLeft: 8,
+  height: 44,
+  '&:last-child': {
+    paddingRight: 8
+  },
+  variants: {
+    verticalAlign: {
+      top: {
+        verticalAlign: 'top'
+      },
+      middle: {
+        verticalAlign: 'middle'
+      },
+      bottom: {
+        verticalAlign: 'bottom'
+      }
+    }
+  }
+});
+const TableCellContent = styled('div', {
+  height: '100%',
+  paddingTop: 10,
+  paddingBottom: 10,
+  display: 'flex',
+  userSelect: 'none',
+  variants: {
+    align: {
+      top: {
+        alignItems: 'start'
+      },
+      center: {
+        alignItems: 'center'
+      },
+      bottom: {
+        alignItems: 'end'
+      }
+    }
+  }
+});
+const Required = styled('span', {
+  marginLeft: 4,
+  color: '$textRed !important'
+});
+function CheckboxTable(props) {
+  const {
+    columns,
+    data,
+    emptyDataMessage,
+    rowHeight,
+    align,
+    onChange
+  } = props;
+  const [datasets, setDatasets] = useState([...data]);
+  const instance = useTable({
+    columns,
+    data: datasets,
+    autoResetExpanded: false
+  }, useExpanded);
+  const {
+    getTableProps,
+    getTableBodyProps,
+    rows,
+    headerGroups,
+    prepareRow,
+    toggleAllRowsExpanded,
+    state
+  } = instance;
+  return jsxs(TableContainer, Object.assign({
+    css: props === null || props === void 0 ? void 0 : props.css
+  }, {
+    children: [jsxs(TableContent, Object.assign({}, getTableProps(), {
+      children: [jsx(TableHead, {
+        children: headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map(headerGroup => {
+          const visibleHeaders = headerGroup.headers.filter(column => !column.isSubRow);
+          return jsx(TableHeadRow, Object.assign({}, headerGroup.getHeaderGroupProps(), {
+            children: visibleHeaders === null || visibleHeaders === void 0 ? void 0 : visibleHeaders.map(column => jsxs(TableHeadCell, Object.assign({}, column.getHeaderProps({
+              style: {
+                minWidth: column.minWidth,
+                width: column.width,
+                maxWidth: column.maxWidth
+              }
+            }), {
+              children: [column.render('Header'), (column === null || column === void 0 ? void 0 : column.isRequired) ? jsx(Required, {
+                children: "*"
+              }, void 0) : '']
+            }), void 0))
+          }), void 0);
+        })
+      }, void 0), jsx(TableBody, Object.assign({}, getTableBodyProps(), {
+        children: rows === null || rows === void 0 ? void 0 : rows.map((row, index) => {
+          var _a, _b, _c;
+
+          prepareRow(row);
+          const originalRow = row.original;
+          return jsxs(React__default.Fragment, {
+            children: [/*#__PURE__*/createElement$2(TableRow, Object.assign({}, row.getRowProps(), {
+              key: index
+            }), (_b = (_a = row === null || row === void 0 ? void 0 : row.cells) === null || _a === void 0 ? void 0 : _a.filter(cell => !cell.column.isSubRow)) === null || _b === void 0 ? void 0 : _b.map((cell, indexCell) => {
+              var _a;
+
+              const column = cell.column;
+              const originalCell = cell.row.original;
+              return /*#__PURE__*/createElement$2(TableCell, Object.assign({}, cell.getCellProps({
+                style: {
+                  minWidth: column.minWidth,
+                  width: column.width,
+                  maxWidth: column.maxWidth
+                }
+              }), {
+                key: index + indexCell + 'tb-cell',
+                css: {
+                  '@md': {
+                    height: rowHeight
+                  }
+                }
+              }), jsxs(TableCellContent, Object.assign({
+                align: align
+              }, {
+                children: [indexCell === 0 && jsx(Flex$1, Object.assign({
+                  justify: "center",
+                  align: "center",
+                  css: {
+                    marginRight: 12,
+                    cursor: 'pointer',
+                    display: ((_a = originalCell === null || originalCell === void 0 ? void 0 : originalCell.detail) === null || _a === void 0 ? void 0 : _a.length) ? 'flex' : 'none'
+                  },
+                  onClick: () => {
+                    if (!Object.keys(state.expanded).includes(row.id)) {
+                      toggleAllRowsExpanded(false);
+                    }
+
+                    row.toggleRowExpanded(!row.isExpanded);
+                  }
+                }, {
+                  children: row.isExpanded ? jsx(ChevronUpOutline, {}, void 0) : jsx(ChevronDownOutline, {}, void 0)
+                }), void 0), cell.render('Cell')]
+              }), void 0));
+            })), (_c = originalRow === null || originalRow === void 0 ? void 0 : originalRow.detail) === null || _c === void 0 ? void 0 : _c.map((cell, index) => {
+              const id_row = originalRow === null || originalRow === void 0 ? void 0 : originalRow.id;
+              const {
+                id: id_subrow,
+                name,
+                detail_method
+              } = cell;
+              const headerRender = name;
+              return /*#__PURE__*/createElement$2(TableRow, Object.assign({}, row.getRowProps(), {
+                key: `row_collapse_${index}`,
+                css: {
+                  display: row.isExpanded ? 'table-row' : 'none'
+                }
+              }), jsx(TableCell, Object.assign({
+                css: {
+                  '@md': {
+                    height: rowHeight
+                  }
+                }
+              }, {
+                children: jsx(Box, Object.assign({
+                  css: {
+                    paddingLeft: 36
+                  }
+                }, {
+                  children: headerRender
+                }), void 0)
+              }), index + 'tb-cell-collapse'), detail_method === null || detail_method === void 0 ? void 0 : detail_method.map((subRow, indexSubRow) => {
+                const {
+                  id: id_col,
+                  is_grant,
+                  is_show
+                } = subRow;
+                return jsx(TableCell, Object.assign({
+                  css: {
+                    '@md': {
+                      height: rowHeight
+                    }
+                  }
+                }, {
+                  children: jsx(Box, {
+                    children: Number(is_show) === 1 ? jsx(InputCheckbox, {
+                      checked: Number(is_grant) === 1,
+                      indeterminate: false,
+                      onCheckedChange: e => {
+                        const newDatasets = [...datasets];
+
+                        for (const [indexDataRow, dataRow] of newDatasets.entries()) {
+                          const rowData = dataRow;
+
+                          if ((rowData === null || rowData === void 0 ? void 0 : rowData.id) === id_row) {
+                            for (const [indexDataSubRow, dataSubRow] of rowData.detail.entries()) {
+                              if ((dataSubRow === null || dataSubRow === void 0 ? void 0 : dataSubRow.id) === id_subrow) {
+                                for (const [indexDataCol, dataCol] of dataSubRow.detail_method.entries()) {
+                                  if ((dataCol === null || dataCol === void 0 ? void 0 : dataCol.id) === id_col) {
+                                    newDatasets[indexDataRow].detail[indexDataSubRow].detail_method[indexDataCol].is_grant = e ? 1 : 0;
+                                  }
+                                }
+                              }
+                            }
+                          }
+                        }
+
+                        setDatasets(newDatasets);
+                        onChange === null || onChange === void 0 ? void 0 : onChange(newDatasets);
+                      }
+                    }, void 0) : jsx(MinusOutline, {
+                      size: 16,
+                      color: colors$4.iconDisable
+                    }, void 0)
+                  }, void 0)
+                }), index + indexSubRow + 'tb-cell-collapse');
+              }));
+            })]
+          }, void 0);
+        })
+      }), void 0)]
+    }), void 0), rows.length < 1 && jsx(Flex$1, Object.assign({
+      css: {
+        padding: '$spacing-07'
+      },
+      align: "center",
+      justify: "center"
+    }, {
+      children: jsx(Paragraph, Object.assign({
+        paragraph: "shortContentRegular",
+        color: "secondary"
+      }, {
+        children: emptyDataMessage || 'Tidak ada data'
+      }), void 0)
+    }), void 0)]
+  }), void 0);
+}
+
 var _jsxFileName = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\colors\\Colors.js";
 const StyledPaper = styled(Paper, {
   borderRadius: '10px 10px 0 0',
@@ -30371,4 +30750,4 @@ const useToggle = initialValue => {
   return useReducer(toggleReducer, initialValue);
 };
 
-export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$3 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, ColorPicker$1 as ColorPicker, Colors, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MajooProvider, MapPicker, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_PICKER, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$2 as TableBody, TableCell$2 as TableCell, TableColumn, TableContent$2 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$2 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$2 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptions, defaultFetchDataParams, pickerReducer, useListOption, useToggle };
+export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$3 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, CheckboxTable, ColorPicker$1 as ColorPicker, Colors, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MajooProvider, MapPicker, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_PICKER, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptions, defaultFetchDataParams, pickerReducer, useListOption, useToggle };