@majoo-ui/react 1.58.9-beta → 1.58.9-beta.2

package/components/table/Table.d.ts

@@ -1308,6 +1308,10 @@ export interface TableColumnProps {
      * If true, the column will be rendered on the expanded row.
      */
     isSubRow?: boolean;
+    /**
+     * If true, the subrow column will be custom rendered.
+     */
+    isCustomSubRow?: boolean;
     /**
      * If false, the column  will be sortable.
      */

package/index.esm.js

@@ -9826,7 +9826,7 @@ var NumberFormat = /*@__PURE__*/function (superclass) {
 }(React__default.Component);
 NumberFormat.defaultProps = defaultProps;
 
-const _excluded$i = ["placeholder", "value", "size", "isInvalid", "readOnly", "disabled", "control", "name"];
+const _excluded$i = ["placeholder", "value", "size", "isInvalid", "readOnly", "disabled", "control", "name", "maxValueLength", "maxLength", "thousandSeparator"];
 var _jsxFileName$F = "/home/alfiantryp/Projects/majoo-ui/packages/react/src/components/form/components/InputNumber/InputNumber.js";
 const StyledInput = styled(NumberFormat, {
   // Reset
@@ -10000,6 +10000,14 @@ const StyledInput = styled(NumberFormat, {
     size: 'lg'
   }
 });
+function countThousandSeparatorsByLength(numberLength) {
+  const separatorCount = Math.floor((numberLength - 1) / 3);
+  return separatorCount;
+}
+function getMaxValueLength(maxValue, prefix = '', suffix = '', thousandSeparator) {
+  const tsLength = thousandSeparator ? countThousandSeparatorsByLength(maxValue) : 0;
+  return maxValue + (prefix == null ? void 0 : prefix.length) + (suffix == null ? void 0 : suffix.length) + tsLength;
+}
 const InputNumber = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
       placeholder,
@@ -10009,7 +10017,10 @@ const InputNumber = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       readOnly,
       disabled,
       control,
-      name
+      name,
+      maxValueLength,
+      maxLength,
+      thousandSeparator
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   return /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
@@ -10030,14 +10041,14 @@ const InputNumber = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$F,
-        lineNumber: 199,
+        lineNumber: 225,
         columnNumber: 9
       }
     }),
     __self: undefined,
     __source: {
       fileName: _jsxFileName$F,
-      lineNumber: 196,
+      lineNumber: 222,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StyledInput, _extends({
@@ -10048,12 +10059,14 @@ const InputNumber = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     isInvalid: isInvalid,
     readOnly: readOnly,
     isReadOnly: readOnly && !(props != null && props.inputGroup) && !(props != null && props.asChild),
-    disabled: disabled
+    disabled: disabled,
+    maxLength: maxValueLength ? getMaxValueLength(maxValueLength, props == null ? void 0 : props.prefix, props == null ? void 0 : props.suffix, thousandSeparator) : maxLength,
+    thousandSeparator: thousandSeparator
   }, props, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$F,
-      lineNumber: 208,
+      lineNumber: 234,
       columnNumber: 7
     }
   })));
@@ -12871,7 +12884,7 @@ const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   }
 }));
 
-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"];
+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", "label"];
 var _jsxFileName$w = "/home/alfiantryp/Projects/majoo-ui/packages/react/src/components/form/components/InputSelectCheck/InputSelectCheck.js";
 const Wrapper$1 = styled('div', {
   margin: 0,
@@ -12976,7 +12989,7 @@ const Input$6 = styled('input', {
     cursor: 'not-allowed'
   },
   variants: {
-    hiddden: {
+    hidden: {
       true: {
         display: 'none'
       }
@@ -12995,10 +13008,15 @@ const Button$2 = styled('button', {
     cursor: 'not-allowed'
   },
   variants: {
-    hiddden: {
+    hidden: {
       true: {
         display: 'none'
       }
+    },
+    withLabel: {
+      true: {
+        color: '$textPrimary'
+      }
     }
   }
 });
@@ -13103,7 +13121,7 @@ const IndeterminateFilled$1 = styled('div', {
   alignItems: 'center'
 });
 const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var _selectedItems$filter, _selectedItems$filter2, _selectedItems$filter3, _selectedItems$filter4;
+  var _ref2, _selectedItems$filter, _selectedItems$filter2, _selectedItems$filter3, _selectedItems$filter4;
   let {
       placeholder,
       option,
@@ -13134,7 +13152,8 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       fetchData,
       onSearch,
       isLoading,
-      maxSelectedItem
+      maxSelectedItem,
+      label
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   const {
@@ -13370,11 +13389,8 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
           });
         case useCombobox.stateChangeTypes.InputBlur:
           if (changes.inputValue) {
-            return Object.assign({}, changes, {
-              isOpen: true // keep menu open after selection.
-            });
+            return Object.assign({}, changes);
           }
-
           return changes;
         default:
           return changes;
@@ -13428,6 +13444,11 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
   useEffect(() => {
     setSelectedValue(items.length > 0 && inputSelectValue.length === items.length - 1 ? ['!all', ...inputSelectValue] : inputSelectValue);
   }, [inputSelectValue, items]);
+  useEffect(() => {
+    if (!!label && label !== '') {
+      setInputValue(label);
+    }
+  }, [label, isOpen]);
   const toggleCollapsible = () => setShowAllTags(!showAllTags);
   const handleRemoveAllItem = () => {
     onChange == null ? void 0 : onChange([]);
@@ -13444,7 +13465,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 626,
+      lineNumber: 638,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Select, {
@@ -13454,7 +13475,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 627,
+      lineNumber: 639,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -13469,7 +13490,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 628,
+      lineNumber: 640,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Input$6, _extends({}, getInputProps({
@@ -13483,11 +13504,11 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
   }), {
     placeholder: placeholder != null ? placeholder : t('placeholder', 'Pilih Item'),
     disabled: disabled || readOnly,
-    hiddden: !search,
+    hidden: !search,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 638,
+      lineNumber: 650,
       columnNumber: 13
     }
   })), /*#__PURE__*/React__default.createElement(Button$2, _extends({}, getToggleButtonProps({
@@ -13496,14 +13517,15 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     disabled: disabled || readOnly,
     size: size,
     type: "button",
-    hiddden: search,
+    hidden: search,
+    withLabel: !!label,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 645,
+      lineNumber: 657,
       columnNumber: 13
     }
-  }), placeholder != null ? placeholder : t('placeholder', 'Pilih Item'))), /*#__PURE__*/React__default.createElement(IconWrapper, _extends({}, getToggleButtonProps({
+  }), (_ref2 = label != null ? label : placeholder) != null ? _ref2 : t('placeholder', 'Pilih Item'))), /*#__PURE__*/React__default.createElement(IconWrapper, _extends({}, getToggleButtonProps({
     disabled: disabled || readOnly
   }), {
     disabled: disabled,
@@ -13511,7 +13533,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 655,
+      lineNumber: 668,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(IconCaretDown, {
@@ -13519,7 +13541,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 660,
+      lineNumber: 673,
       columnNumber: 13
     }
   }))), helperText && /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -13532,7 +13554,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 664,
+      lineNumber: 677,
       columnNumber: 11
     }
   }, helperText), showSelectedTag && !showCounter && selectedItems.length !== 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TagWrapper$2, {
@@ -13540,7 +13562,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 670,
+      lineNumber: 683,
       columnNumber: 13
     }
   }, isShowTagSelectAll ? /*#__PURE__*/React__default.createElement(Tag, _extends({
@@ -13560,7 +13582,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 672,
+      lineNumber: 685,
       columnNumber: 17
     }
   }), selectAllLabel != null ? selectAllLabel : t('selectAllLabelText', 'Pilih Semua')) : selectedItems == null ? void 0 : (_selectedItems$filter = selectedItems.filter(item => (item == null ? void 0 : item.id) !== '!all')) == null ? void 0 : (_selectedItems$filter2 = _selectedItems$filter.filter((_, idx) => {
@@ -13590,7 +13612,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 700,
+      lineNumber: 713,
       columnNumber: 21
     }
   }), selectedItem.name))), collapsible && !isShowTagSelectAll && (selectedItems == null ? void 0 : selectedItems.length) > 5 && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -13599,7 +13621,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 722,
+      lineNumber: 735,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -13609,14 +13631,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 723,
+      lineNumber: 736,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Separator$2, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 724,
+      lineNumber: 737,
       columnNumber: 19
     }
   }), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -13630,7 +13652,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 725,
+      lineNumber: 738,
       columnNumber: 19
     }
   }, showAllTags ? /*#__PURE__*/React__default.createElement(ChevronUpOutline, {
@@ -13638,7 +13660,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 731,
+      lineNumber: 744,
       columnNumber: 23
     }
   }) : /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
@@ -13646,7 +13668,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 733,
+      lineNumber: 746,
       columnNumber: 23
     }
   }), /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -13658,14 +13680,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 735,
+      lineNumber: 748,
       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: 752,
       columnNumber: 19
     }
   })), /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -13676,7 +13698,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 741,
+      lineNumber: 754,
       columnNumber: 17
     }
   }, `${selectedItems == null ? void 0 : (_selectedItems$filter3 = selectedItems.filter(item => (item == null ? void 0 : item.id) !== '!all')) == null ? void 0 : _selectedItems$filter3.length} ${labelCounter || t('labelCounterText', 'Item terpilih')}`))), showCounter && !isShowTagSelectAll && Boolean(selectedItems == null ? void 0 : selectedItems.length) && /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -13688,7 +13710,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 751,
+      lineNumber: 763,
       columnNumber: 11
     }
   }, `${selectedItems == null ? void 0 : (_selectedItems$filter4 = selectedItems.filter(item => (item == null ? void 0 : item.id) !== '!all')) == null ? void 0 : _selectedItems$filter4.length} ${labelCounter || t('labelCounterText', 'Item terpilih')}`), /*#__PURE__*/React__default.createElement(OptionWrapper$1, {
@@ -13701,7 +13723,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 758,
+      lineNumber: 769,
       columnNumber: 9
     }
   }, isLoading && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -13723,7 +13745,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 768,
+      lineNumber: 779,
       columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(Text$1, {
@@ -13731,7 +13753,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 785,
+      lineNumber: 796,
       columnNumber: 15
     }
   }, "Loading....")), items.length > 0 || isLoading ? /*#__PURE__*/React__default.createElement(Option, _extends({}, getMenuProps({
@@ -13742,7 +13764,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 791,
+      lineNumber: 802,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
@@ -13757,14 +13779,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 795,
+        lineNumber: 806,
         columnNumber: 19
       }
     }, child),
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 792,
+      lineNumber: 803,
       columnNumber: 15
     }
   }, isOpen && items.map((item, index) => /*#__PURE__*/React__default.createElement(ItemWrapper$1, _extends({
@@ -13782,7 +13804,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 807,
+      lineNumber: 818,
       columnNumber: 21
     }
   }), /*#__PURE__*/React__default.createElement(IconWrapper, {
@@ -13795,7 +13817,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 820,
+      lineNumber: 831,
       columnNumber: 23
     }
   }, !(item != null && item.hideCheck) && (item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -13803,7 +13825,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 830,
+      lineNumber: 841,
       columnNumber: 29
     }
   }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -13811,21 +13833,21 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 834,
+      lineNumber: 845,
       columnNumber: 31
     }
   })), isShowSelectAll && (item == null ? void 0 : item.id) === '!all' && selectedValue != null && selectedValue.length && (selectedValue == null ? void 0 : selectedValue.length) < (items == null ? void 0 : items.length) ? /*#__PURE__*/React__default.createElement(IndeterminateFilled$1, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 841,
+      lineNumber: 852,
       columnNumber: 27
     }
   }, "-") : /*#__PURE__*/React__default.createElement("div", {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 843,
+      lineNumber: 854,
       columnNumber: 27
     }
   })), /*#__PURE__*/React__default.createElement(Item$3, {
@@ -13836,7 +13858,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 846,
+      lineNumber: 857,
       columnNumber: 23
     }
   }, item.render ? item.render == null ? void 0 : item.render(item.name) : item.name))))) : /*#__PURE__*/React__default.createElement(Option, _extends({
@@ -13849,14 +13871,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 854,
+      lineNumber: 865,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(StyledDiv, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 855,
+      lineNumber: 866,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -13866,7 +13888,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 856,
+      lineNumber: 867,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(CircleInfoOutline, {
@@ -13878,7 +13900,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 857,
+      lineNumber: 868,
       columnNumber: 19
     }
   })), textEmptyItem != null ? textEmptyItem : t('emptyItemText', 'Item tidak ditemukan')))));
@@ -13913,7 +13935,8 @@ InputSelectCheck.propTypes = {
   onSearch: PropTypes.func,
   isLoading: PropTypes.bool,
   showTagSelectAll: PropTypes.bool,
-  maxSelectedItem: PropTypes.number
+  maxSelectedItem: PropTypes.number,
+  label: PropTypes.string
 };
 InputSelectCheck.defaultProps = {
   size: 'lg',
@@ -13930,7 +13953,8 @@ InputSelectCheck.defaultProps = {
   showCounter: false,
   collapsible: true,
   toggleInput: true,
-  defaultValue: []
+  defaultValue: [],
+  label: undefined
 };
 
 var _jsxFileName$v = "/home/alfiantryp/Projects/majoo-ui/packages/react/src/components/form/components/InputSelectTag/InputSelectTag.js";
@@ -22530,7 +22554,7 @@ function Table({
                           }), void 0)
                         }), void 0);
                       })
-                    }), void 0), row.isExpanded ? subRowCells.map((cell, index) => jsxs(TableRow$3, Object.assign({
+                    }), void 0), row.isExpanded ? subRowCells.map((cell, index) => !cell.column.isCustomSubRow ? jsxs(TableRow$3, Object.assign({
                       subRow: true
                     }, {
                       children: [leftAddOnCells.map((_, index) => jsx("td", {
@@ -22568,7 +22592,7 @@ function Table({
                           }), void 0)
                         }), void 0)]
                       }, cell.column.id)]
-                    }), cell.column.id)) : null, ((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, {
+                    }), cell.column.id) : cell.render('Cell')) : null, ((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, {
                       getCellProps: cellProps => ({
                         css: Object.assign(Object.assign(Object.assign({}, stickyPositionStyling({
                           sticky: cellProps === null || cellProps === void 0 ? void 0 : cellProps.sticky,
@@ -22626,7 +22650,7 @@ function Table({
 }
 //Dummy component for mdx docs purpose only
 const TableColumn = _a => {
-  __rest(_a, ["id", "Header", "Cell", "isMobileHeader", "isSubRow", "unsortable", "isAction"]);
+  __rest(_a, ["id", "Header", "Cell", "isMobileHeader", "isSubRow", "isCustomSubRow", "unsortable", "isAction"]);
   return jsx("div", {}, void 0);
 };
 

package/index.umd.js

@@ -9907,7 +9907,7 @@
   }(React__default["default"].Component);
   NumberFormat.defaultProps = defaultProps;
 
-  const _excluded$i = ["placeholder", "value", "size", "isInvalid", "readOnly", "disabled", "control", "name"];
+  const _excluded$i = ["placeholder", "value", "size", "isInvalid", "readOnly", "disabled", "control", "name", "maxValueLength", "maxLength", "thousandSeparator"];
   var _jsxFileName$F = "/home/alfiantryp/Projects/majoo-ui/packages/react/src/components/form/components/InputNumber/InputNumber.js";
   const StyledInput = styled(NumberFormat, {
     // Reset
@@ -10081,6 +10081,14 @@
       size: 'lg'
     }
   });
+  function countThousandSeparatorsByLength(numberLength) {
+    const separatorCount = Math.floor((numberLength - 1) / 3);
+    return separatorCount;
+  }
+  function getMaxValueLength(maxValue, prefix = '', suffix = '', thousandSeparator) {
+    const tsLength = thousandSeparator ? countThousandSeparatorsByLength(maxValue) : 0;
+    return maxValue + (prefix == null ? void 0 : prefix.length) + (suffix == null ? void 0 : suffix.length) + tsLength;
+  }
   const InputNumber = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
     let {
         placeholder,
@@ -10090,7 +10098,10 @@
         readOnly,
         disabled,
         control,
-        name
+        name,
+        maxValueLength,
+        maxLength,
+        thousandSeparator
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
     return /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
@@ -10111,14 +10122,14 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$F,
-          lineNumber: 199,
+          lineNumber: 225,
           columnNumber: 9
         }
       }),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$F,
-        lineNumber: 196,
+        lineNumber: 222,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledInput, _extends({
@@ -10129,12 +10140,14 @@
       isInvalid: isInvalid,
       readOnly: readOnly,
       isReadOnly: readOnly && !(props != null && props.inputGroup) && !(props != null && props.asChild),
-      disabled: disabled
+      disabled: disabled,
+      maxLength: maxValueLength ? getMaxValueLength(maxValueLength, props == null ? void 0 : props.prefix, props == null ? void 0 : props.suffix, thousandSeparator) : maxLength,
+      thousandSeparator: thousandSeparator
     }, props, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$F,
-        lineNumber: 208,
+        lineNumber: 234,
         columnNumber: 7
       }
     })));
@@ -12995,7 +13008,7 @@
     }
   }));
 
-  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"];
+  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", "label"];
   var _jsxFileName$w = "/home/alfiantryp/Projects/majoo-ui/packages/react/src/components/form/components/InputSelectCheck/InputSelectCheck.js";
   function _await(value, then, direct) {
     if (direct) {
@@ -13121,7 +13134,7 @@
       cursor: 'not-allowed'
     },
     variants: {
-      hiddden: {
+      hidden: {
         true: {
           display: 'none'
         }
@@ -13140,10 +13153,15 @@
       cursor: 'not-allowed'
     },
     variants: {
-      hiddden: {
+      hidden: {
         true: {
           display: 'none'
         }
+      },
+      withLabel: {
+        true: {
+          color: '$textPrimary'
+        }
       }
     }
   });
@@ -13248,7 +13266,7 @@
     alignItems: 'center'
   });
   const InputSelectCheck = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-    var _selectedItems$filter, _selectedItems$filter2, _selectedItems$filter3, _selectedItems$filter4;
+    var _ref2, _selectedItems$filter, _selectedItems$filter2, _selectedItems$filter3, _selectedItems$filter4;
     let {
         placeholder,
         option,
@@ -13279,7 +13297,8 @@
         fetchData,
         onSearch,
         isLoading,
-        maxSelectedItem
+        maxSelectedItem,
+        label
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
     const {
@@ -13516,11 +13535,8 @@
             });
           case Downshift.useCombobox.stateChangeTypes.InputBlur:
             if (changes.inputValue) {
-              return Object.assign({}, changes, {
-                isOpen: true // keep menu open after selection.
-              });
+              return Object.assign({}, changes);
             }
-
             return changes;
           default:
             return changes;
@@ -13574,6 +13590,11 @@
     React.useEffect(() => {
       setSelectedValue(items.length > 0 && inputSelectValue.length === items.length - 1 ? ['!all', ...inputSelectValue] : inputSelectValue);
     }, [inputSelectValue, items]);
+    React.useEffect(() => {
+      if (!!label && label !== '') {
+        setInputValue(label);
+      }
+    }, [label, isOpen]);
     const toggleCollapsible = () => setShowAllTags(!showAllTags);
     const handleRemoveAllItem = () => {
       onChange == null ? void 0 : onChange([]);
@@ -13590,7 +13611,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 626,
+        lineNumber: 638,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Select, {
@@ -13600,7 +13621,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 627,
+        lineNumber: 639,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -13615,7 +13636,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 628,
+        lineNumber: 640,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Input$6, _extends({}, getInputProps({
@@ -13629,11 +13650,11 @@
     }), {
       placeholder: placeholder != null ? placeholder : t('placeholder', 'Pilih Item'),
       disabled: disabled || readOnly,
-      hiddden: !search,
+      hidden: !search,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 638,
+        lineNumber: 650,
         columnNumber: 13
       }
     })), /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({}, getToggleButtonProps({
@@ -13642,14 +13663,15 @@
       disabled: disabled || readOnly,
       size: size,
       type: "button",
-      hiddden: search,
+      hidden: search,
+      withLabel: !!label,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 645,
+        lineNumber: 657,
         columnNumber: 13
       }
-    }), placeholder != null ? placeholder : t('placeholder', 'Pilih Item'))), /*#__PURE__*/React__default["default"].createElement(IconWrapper, _extends({}, getToggleButtonProps({
+    }), (_ref2 = label != null ? label : placeholder) != null ? _ref2 : t('placeholder', 'Pilih Item'))), /*#__PURE__*/React__default["default"].createElement(IconWrapper, _extends({}, getToggleButtonProps({
       disabled: disabled || readOnly
     }), {
       disabled: disabled,
@@ -13657,7 +13679,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 655,
+        lineNumber: 668,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconCaretDown, {
@@ -13665,7 +13687,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 660,
+        lineNumber: 673,
         columnNumber: 13
       }
     }))), helperText && /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -13678,7 +13700,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 664,
+        lineNumber: 677,
         columnNumber: 11
       }
     }, helperText), showSelectedTag && !showCounter && selectedItems.length !== 0 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TagWrapper$2, {
@@ -13686,7 +13708,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 670,
+        lineNumber: 683,
         columnNumber: 13
       }
     }, isShowTagSelectAll ? /*#__PURE__*/React__default["default"].createElement(Tag, _extends({
@@ -13706,7 +13728,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 672,
+        lineNumber: 685,
         columnNumber: 17
       }
     }), selectAllLabel != null ? selectAllLabel : t('selectAllLabelText', 'Pilih Semua')) : selectedItems == null ? void 0 : (_selectedItems$filter = selectedItems.filter(item => (item == null ? void 0 : item.id) !== '!all')) == null ? void 0 : (_selectedItems$filter2 = _selectedItems$filter.filter((_, idx) => {
@@ -13736,7 +13758,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 700,
+        lineNumber: 713,
         columnNumber: 21
       }
     }), selectedItem.name))), collapsible && !isShowTagSelectAll && (selectedItems == null ? void 0 : selectedItems.length) > 5 && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -13745,7 +13767,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 722,
+        lineNumber: 735,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -13755,14 +13777,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 723,
+        lineNumber: 736,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 724,
+        lineNumber: 737,
         columnNumber: 19
       }
     }), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -13776,7 +13798,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 725,
+        lineNumber: 738,
         columnNumber: 19
       }
     }, showAllTags ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronUpOutline, {
@@ -13784,7 +13806,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 731,
+        lineNumber: 744,
         columnNumber: 23
       }
     }) : /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
@@ -13792,7 +13814,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 733,
+        lineNumber: 746,
         columnNumber: 23
       }
     }), /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -13804,14 +13826,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 735,
+        lineNumber: 748,
         columnNumber: 21
       }
     }, showAllTags ? t('showSomeText', 'Tampilkan Sebagian') : t('showAllText', 'Tampilkan Semua'))), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 739,
+        lineNumber: 752,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -13822,7 +13844,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 741,
+        lineNumber: 754,
         columnNumber: 17
       }
     }, `${selectedItems == null ? void 0 : (_selectedItems$filter3 = selectedItems.filter(item => (item == null ? void 0 : item.id) !== '!all')) == null ? void 0 : _selectedItems$filter3.length} ${labelCounter || t('labelCounterText', 'Item terpilih')}`))), showCounter && !isShowTagSelectAll && Boolean(selectedItems == null ? void 0 : selectedItems.length) && /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -13834,7 +13856,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 751,
+        lineNumber: 763,
         columnNumber: 11
       }
     }, `${selectedItems == null ? void 0 : (_selectedItems$filter4 = selectedItems.filter(item => (item == null ? void 0 : item.id) !== '!all')) == null ? void 0 : _selectedItems$filter4.length} ${labelCounter || t('labelCounterText', 'Item terpilih')}`), /*#__PURE__*/React__default["default"].createElement(OptionWrapper$1, {
@@ -13847,7 +13869,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 758,
+        lineNumber: 769,
         columnNumber: 9
       }
     }, isLoading && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -13869,7 +13891,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 768,
+        lineNumber: 779,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
@@ -13877,7 +13899,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 785,
+        lineNumber: 796,
         columnNumber: 15
       }
     }, "Loading....")), items.length > 0 || isLoading ? /*#__PURE__*/React__default["default"].createElement(Option, _extends({}, getMenuProps({
@@ -13888,7 +13910,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 791,
+        lineNumber: 802,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
@@ -13903,14 +13925,14 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$w,
-          lineNumber: 795,
+          lineNumber: 806,
           columnNumber: 19
         }
       }, child),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 792,
+        lineNumber: 803,
         columnNumber: 15
       }
     }, isOpen && items.map((item, index) => /*#__PURE__*/React__default["default"].createElement(ItemWrapper$1, _extends({
@@ -13928,7 +13950,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 807,
+        lineNumber: 818,
         columnNumber: 21
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconWrapper, {
@@ -13941,7 +13963,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 820,
+        lineNumber: 831,
         columnNumber: 23
       }
     }, !(item != null && item.hideCheck) && (item.isDisabled ? /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -13949,7 +13971,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 830,
+        lineNumber: 841,
         columnNumber: 29
       }
     }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -13957,21 +13979,21 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 834,
+        lineNumber: 845,
         columnNumber: 31
       }
     })), isShowSelectAll && (item == null ? void 0 : item.id) === '!all' && selectedValue != null && selectedValue.length && (selectedValue == null ? void 0 : selectedValue.length) < (items == null ? void 0 : items.length) ? /*#__PURE__*/React__default["default"].createElement(IndeterminateFilled$1, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 841,
+        lineNumber: 852,
         columnNumber: 27
       }
     }, "-") : /*#__PURE__*/React__default["default"].createElement("div", {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 843,
+        lineNumber: 854,
         columnNumber: 27
       }
     })), /*#__PURE__*/React__default["default"].createElement(Item$3, {
@@ -13982,7 +14004,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 846,
+        lineNumber: 857,
         columnNumber: 23
       }
     }, item.render ? item.render == null ? void 0 : item.render(item.name) : item.name))))) : /*#__PURE__*/React__default["default"].createElement(Option, _extends({
@@ -13995,14 +14017,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 854,
+        lineNumber: 865,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 855,
+        lineNumber: 866,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -14012,7 +14034,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 856,
+        lineNumber: 867,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CircleInfoOutline, {
@@ -14024,7 +14046,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 857,
+        lineNumber: 868,
         columnNumber: 19
       }
     })), textEmptyItem != null ? textEmptyItem : t('emptyItemText', 'Item tidak ditemukan')))));
@@ -14059,7 +14081,8 @@
     onSearch: PropTypes__default["default"].func,
     isLoading: PropTypes__default["default"].bool,
     showTagSelectAll: PropTypes__default["default"].bool,
-    maxSelectedItem: PropTypes__default["default"].number
+    maxSelectedItem: PropTypes__default["default"].number,
+    label: PropTypes__default["default"].string
   };
   InputSelectCheck.defaultProps = {
     size: 'lg',
@@ -14076,7 +14099,8 @@
     showCounter: false,
     collapsible: true,
     toggleInput: true,
-    defaultValue: []
+    defaultValue: [],
+    label: undefined
   };
 
   var _jsxFileName$v = "/home/alfiantryp/Projects/majoo-ui/packages/react/src/components/form/components/InputSelectTag/InputSelectTag.js";
@@ -22923,7 +22947,7 @@
                           }), void 0);
                         })
                       }), void 0), row.isExpanded ? subRowCells.map(function (cell, index) {
-                        return jsxRuntime.jsxs(TableRow$3, __assign({
+                        return !cell.column.isCustomSubRow ? jsxRuntime.jsxs(TableRow$3, __assign({
                           subRow: true
                         }, {
                           children: [leftAddOnCells.map(function (_, index) {
@@ -22963,7 +22987,7 @@
                               }), void 0)
                             }), void 0)]
                           }, cell.column.id)]
-                        }), cell.column.id);
+                        }), cell.column.id) : cell.render('Cell');
                       }) : null, ((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, {
                         getCellProps: function (cellProps) {
                           return {
@@ -23029,9 +23053,10 @@
       _a.Cell;
       _a.isMobileHeader;
       _a.isSubRow;
+      _a.isCustomSubRow;
       _a.unsortable;
       _a.isAction;
-      __rest(_a, ["id", "Header", "Cell", "isMobileHeader", "isSubRow", "unsortable", "isAction"]);
+      __rest(_a, ["id", "Header", "Cell", "isMobileHeader", "isSubRow", "isCustomSubRow", "unsortable", "isAction"]);
     return jsxRuntime.jsx("div", {}, void 0);
   };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.58.9-beta",
+  "version": "1.58.9-beta.2",
   "dependencies": {
     "@majoo-ui/core": "^1.31.3",
     "@majoo-ui/helpers": "^1.30.5",