@majoo-ui/react 1.57.10 → 1.57.12

package/components/form/components/InputSelect/InputSelect.d.ts

@@ -587,7 +587,7 @@ export declare const SelectItem: import("@stitches/react/types/styled-component"
         backgroundColor: string;
     };
 }>>;
-export declare const SelectInputSearch: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<HTMLInputElement | HTMLButtonElement>>;
+export declare const SelectInputSearch: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
 export declare type Option = {
     value: string;
     name: string;
@@ -713,5 +713,5 @@ interface InputSelectProps extends Omit<DownshiftProps<Option>, 'initialSelected
      */
     renderFooter?: () => React.ReactNode;
 }
-declare const InputSelect: React.ForwardRefExoticComponent<InputSelectProps & React.RefAttributes<HTMLInputElement | HTMLButtonElement>>;
+export declare function InputSelect({ option, onChange, value, placeholder, searchPlaceholder, embedSearch, size, disabled, search, iconColor, hideArrowicon, showLeadingIcon, placement, disabledOptions, textSelector, valueSelector, readOnly, isInvalid, noOptionIcon, fetchData, onSearch, isLoading, showTooltip, css, renderFooter, optionCss, ...props }: InputSelectProps): JSX.Element;
 export default InputSelect;

package/index.esm.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useState, useEffect, createContext, useContext, useRef, useCallback, cloneElement, forwardRef, createElement as createElement$2, useLayoutEffect, useReducer, useMemo, memo } from 'react';
+import React__default, { useState, useEffect, createContext, useContext, useRef, useCallback, cloneElement, createElement as createElement$2, forwardRef, useLayoutEffect, useReducer, useMemo, memo } from 'react';
 import PropTypes from 'prop-types';
 import { createStitches, styled as styled$1 } from '@stitches/react';
 import { foundations } from '@majoo-ui/core';
@@ -7187,7 +7187,6 @@ const InputNumber = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   return /*#__PURE__*/React__default.createElement(StyledInput, _extends({
     ref: ref,
-    getInputRef: ref,
     placeholder: placeholder,
     value: value,
     size: size,
@@ -9101,7 +9100,7 @@ const SelectInputSearch = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
     }, void 0)]
   }), void 0);
 });
-const InputSelect = /*#__PURE__*/forwardRef((_a, ref) => {
+function InputSelect(_a) {
   var {
       option,
       onChange,
@@ -9183,7 +9182,7 @@ const InputSelect = /*#__PURE__*/forwardRef((_a, ref) => {
     setItem(generatedOption);
     setOptions(generatedOption);
   }, [option, disabledOptions, valueSelector, textSelector]);
-  const debouncedSearch = React.useRef(debounce(query => __awaiter(void 0, void 0, void 0, function* () {
+  const debouncedSearch = React.useRef(debounce(query => __awaiter(this, void 0, void 0, function* () {
     setQuery(query);
     if (onSearch) onSearch(query);
   }), 1000)).current;
@@ -9269,7 +9268,6 @@ const InputSelect = /*#__PURE__*/forwardRef((_a, ref) => {
                   }
                 }, {
                   children: jsx(SelectInputSearch, {
-                    ref: ref,
                     showLeadingIcon: showLeadingIcon,
                     showClearIcon: hideArrowicon,
                     disabled: disabled,
@@ -9294,7 +9292,6 @@ const InputSelect = /*#__PURE__*/forwardRef((_a, ref) => {
                 }), void 0) : jsx(Button$3, Object.assign({}, getToggleButtonProps({
                   disabled: disabled || readOnly
                 }), {
-                  ref: ref,
                   disabled: disabled,
                   size: size,
                   readOnly: readOnly,
@@ -9453,7 +9450,7 @@ const InputSelect = /*#__PURE__*/forwardRef((_a, ref) => {
       }), void 0);
     }
   }), void 0);
-});
+}
 
 var tryToString$3 = tryToString$5;
 
@@ -11332,13 +11329,19 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
             highlightedIndex: state.highlightedIndex
           });
         case useCombobox.stateChangeTypes.InputBlur:
+          if (changes.inputValue) {
+            return Object.assign({}, changes, {
+              isOpen: true // keep menu open after selection.
+            });
+          }
+
           return changes;
         default:
           return changes;
       }
     }
   });
-  const getOption = useCallback(() => option === null || option === void 0 ? void 0 : option.map(item => {
+  const getOption = maxSelectedItem ? useCallback(() => option === null || option === void 0 ? void 0 : option.map(item => {
     const isMaxSelectedItem = maxSelectedItem && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length) >= maxSelectedItem;
     if (isMaxSelectedItem && !(selectedValue !== null && selectedValue !== void 0 && selectedValue.includes(item.id))) {
       item.hideCheck = true;
@@ -11348,7 +11351,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       item.isDisabled = false;
     }
     return item;
-  }), [maxSelectedItem, option, selectedValue]);
+  }), [maxSelectedItem, option, selectedValue]) : () => option;
   useEffect(() => {
     sortItems();
     setItems(isShowSelectAll ? [{
@@ -11359,7 +11362,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       id: '!all',
       name: selectAllLabel != null ? selectAllLabel : t('selectAllLabelText', 'Pilih Semua')
     }, ...getOption()] : getOption());
-  }, [getOption, isShowSelectAll]);
+  }, [option, isShowSelectAll]);
   useEffect(() => {
     if (selectedValue.length > 0 && disabledOptions.length === 0) {
       setInitItems(sortValue);
@@ -11401,7 +11404,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 614,
+      lineNumber: 620,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Select, {
@@ -11411,7 +11414,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 615,
+      lineNumber: 621,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -11426,7 +11429,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 616,
+      lineNumber: 622,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Input$6, _extends({}, getInputProps({
@@ -11444,7 +11447,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 626,
+      lineNumber: 632,
       columnNumber: 13
     }
   })), /*#__PURE__*/React__default.createElement(Button$2, _extends({}, getToggleButtonProps({
@@ -11457,7 +11460,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 633,
+      lineNumber: 639,
       columnNumber: 13
     }
   }), placeholder != null ? placeholder : t('placeholder', 'Pilih Item'))), /*#__PURE__*/React__default.createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -11468,7 +11471,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 643,
+      lineNumber: 649,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(IconCaretDown, {
@@ -11476,7 +11479,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 648,
+      lineNumber: 654,
       columnNumber: 13
     }
   }))), helperText && /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -11489,7 +11492,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 652,
+      lineNumber: 658,
       columnNumber: 11
     }
   }, helperText), showSelectedTag && !showCounter && selectedItems.length !== 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TagWrapper$2, {
@@ -11497,7 +11500,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 658,
+      lineNumber: 664,
       columnNumber: 13
     }
   }, isShowTagSelectAll ? /*#__PURE__*/React__default.createElement(Tag, _extends({
@@ -11517,7 +11520,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 660,
+      lineNumber: 666,
       columnNumber: 17
     }
   }), selectAllLabel != null ? selectAllLabel : t('selectAllLabelText', 'Pilih Semua')) : selectedItems === null || selectedItems === void 0 ? void 0 : (_selectedItems$filter = selectedItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== '!all')) === null || _selectedItems$filter === void 0 ? void 0 : (_selectedItems$filter2 = _selectedItems$filter.filter((_, idx) => {
@@ -11547,7 +11550,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 688,
+      lineNumber: 694,
       columnNumber: 21
     }
   }), selectedItem.name))), collapsible && !isShowTagSelectAll && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 5 && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -11556,7 +11559,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 710,
+      lineNumber: 716,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -11566,14 +11569,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 711,
+      lineNumber: 717,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Separator$2, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 712,
+      lineNumber: 718,
       columnNumber: 19
     }
   }), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -11587,7 +11590,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 713,
+      lineNumber: 719,
       columnNumber: 19
     }
   }, showAllTags ? /*#__PURE__*/React__default.createElement(ChevronUpOutline, {
@@ -11595,7 +11598,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 719,
+      lineNumber: 725,
       columnNumber: 23
     }
   }) : /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
@@ -11603,7 +11606,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 721,
+      lineNumber: 727,
       columnNumber: 23
     }
   }), /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -11615,14 +11618,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 723,
+      lineNumber: 729,
       columnNumber: 21
     }
   }, showAllTags ? t('showSomeText', 'Tampilkan Sebagian') : t('showAllText', 'Tampilkan Semua'))), /*#__PURE__*/React__default.createElement(Separator$2, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 727,
+      lineNumber: 733,
       columnNumber: 19
     }
   })), /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -11633,7 +11636,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 729,
+      lineNumber: 735,
       columnNumber: 17
     }
   }, `${selectedItems === null || selectedItems === void 0 ? void 0 : (_selectedItems$filter3 = selectedItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== '!all')) === null || _selectedItems$filter3 === void 0 ? void 0 : _selectedItems$filter3.length} ${labelCounter || t('labelCounterText', 'Item terpilih')}`))), showCounter && !isShowTagSelectAll && Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) && /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -11645,7 +11648,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 739,
+      lineNumber: 745,
       columnNumber: 11
     }
   }, `${selectedItems === null || selectedItems === void 0 ? void 0 : (_selectedItems$filter4 = selectedItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== '!all')) === null || _selectedItems$filter4 === void 0 ? void 0 : _selectedItems$filter4.length} ${labelCounter || t('labelCounterText', 'Item terpilih')}`), /*#__PURE__*/React__default.createElement(OptionWrapper$1, {
@@ -11657,7 +11660,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 746,
+      lineNumber: 752,
       columnNumber: 9
     }
   }, isLoading && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -11678,7 +11681,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 752,
+      lineNumber: 758,
       columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(Text$1, {
@@ -11686,7 +11689,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 768,
+      lineNumber: 774,
       columnNumber: 15
     }
   }, "Loading....")), items.length > 0 || isLoading ? /*#__PURE__*/React__default.createElement(Option, _extends({}, getMenuProps({
@@ -11697,7 +11700,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 774,
+      lineNumber: 780,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
@@ -11712,14 +11715,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 778,
+        lineNumber: 784,
         columnNumber: 19
       }
     }, child),
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 775,
+      lineNumber: 781,
       columnNumber: 15
     }
   }, isOpen && items.map((item, index) => {
@@ -11739,7 +11742,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 790,
+        lineNumber: 796,
         columnNumber: 21
       }
     }), /*#__PURE__*/React__default.createElement(IconWrapper, {
@@ -11752,7 +11755,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 803,
+        lineNumber: 809,
         columnNumber: 23
       }
     }, !(item !== null && item !== void 0 && item.hideCheck) && (item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -11760,7 +11763,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 813,
+        lineNumber: 819,
         columnNumber: 29
       }
     }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -11768,21 +11771,21 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 817,
+        lineNumber: 823,
         columnNumber: 31
       }
     })), isShowSelectAll && (item === null || item === void 0 ? void 0 : item.id) === '!all' && selectedValue !== null && selectedValue !== void 0 && selectedValue.length && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length) < (items === null || items === void 0 ? void 0 : items.length) ? /*#__PURE__*/React__default.createElement(IndeterminateFilled, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 824,
+        lineNumber: 830,
         columnNumber: 27
       }
     }, "-") : /*#__PURE__*/React__default.createElement("div", {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 826,
+        lineNumber: 832,
         columnNumber: 27
       }
     })), /*#__PURE__*/React__default.createElement(Item$3, {
@@ -11793,7 +11796,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 829,
+        lineNumber: 835,
         columnNumber: 23
       }
     }, item.render ? (_item$render = item.render) === null || _item$render === void 0 ? void 0 : _item$render.call(item, item.name) : item.name));
@@ -11807,14 +11810,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 837,
+      lineNumber: 843,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(StyledDiv, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 838,
+      lineNumber: 844,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -11824,7 +11827,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 839,
+      lineNumber: 845,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(CircleInfoOutline, {
@@ -11836,7 +11839,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 840,
+      lineNumber: 846,
       columnNumber: 19
     }
   })), textEmptyItem != null ? textEmptyItem : t('emptyItemText', 'Item tidak ditemukan')))));
@@ -17851,7 +17854,10 @@ function InputDatePicker({
       isMultiDatePicker: type !== SINGLE_PICKER || showRangeControl,
       onChange: handleDatePickerChange,
       onDateSelected: e => onDateSelected === null || onDateSelected === void 0 ? void 0 : onDateSelected(e),
-      onClose: () => setOpenPicker(false),
+      onClose: () => {
+        setOpenPicker(false);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+      },
       showTimePicker: showTimePicker,
       timePickerProps: timePickerProps,
       minDate: minDate,
@@ -19505,7 +19511,8 @@ function Table({
     totalPage: totalPage,
     onLimitChange: selectedItem => {
       if (selectedItem) {
-        doFetchData(pageIndex, selectedItem);
+        const isResetPageIndex = selectedItem > pageSize;
+        doFetchData(isResetPageIndex ? 0 : pageIndex, selectedItem);
         setPageSize(selectedItem);
         setLimit(selectedItem);
       }

package/index.umd.js

@@ -7271,7 +7271,6 @@
       props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
     return /*#__PURE__*/React__default["default"].createElement(StyledInput, _extends({
       ref: ref,
-      getInputRef: ref,
       placeholder: placeholder,
       value: value,
       size: size,
@@ -9183,7 +9182,8 @@
       }, void 0)]
     }), void 0);
   });
-  var InputSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  function InputSelect(_a) {
+    var _this = this;
     var option = _a.option,
       onChange = _a.onChange,
       value = _a.value,
@@ -9297,7 +9297,7 @@
       setOptions(generatedOption);
     }, [option, disabledOptions, valueSelector, textSelector]);
     var debouncedSearch = React__namespace.useRef(debounce__default["default"](function (query) {
-      return __awaiter(void 0, void 0, void 0, function () {
+      return __awaiter(_this, void 0, void 0, function () {
         return __generator(this, function (_a) {
           setQuery(query);
           if (onSearch) onSearch(query);
@@ -9392,7 +9392,6 @@
                     }
                   }, {
                     children: jsxRuntime.jsx(SelectInputSearch, {
-                      ref: ref,
                       showLeadingIcon: showLeadingIcon,
                       showClearIcon: hideArrowicon,
                       disabled: disabled,
@@ -9417,7 +9416,6 @@
                   }), void 0) : jsxRuntime.jsx(Button$3, __assign({}, getToggleButtonProps({
                     disabled: disabled || readOnly
                   }), {
-                    ref: ref,
                     disabled: disabled,
                     size: size,
                     readOnly: readOnly,
@@ -9580,7 +9578,7 @@
         }), void 0);
       }
     }), void 0);
-  });
+  }
 
   var tryToString$3 = tryToString$5;
 
@@ -11481,13 +11479,19 @@
               highlightedIndex: state.highlightedIndex
             });
           case Downshift.useCombobox.stateChangeTypes.InputBlur:
+            if (changes.inputValue) {
+              return Object.assign({}, changes, {
+                isOpen: true // keep menu open after selection.
+              });
+            }
+
             return changes;
           default:
             return changes;
         }
       }
     });
-    const getOption = React.useCallback(() => option === null || option === void 0 ? void 0 : option.map(item => {
+    const getOption = maxSelectedItem ? React.useCallback(() => option === null || option === void 0 ? void 0 : option.map(item => {
       const isMaxSelectedItem = maxSelectedItem && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length) >= maxSelectedItem;
       if (isMaxSelectedItem && !(selectedValue !== null && selectedValue !== void 0 && selectedValue.includes(item.id))) {
         item.hideCheck = true;
@@ -11497,7 +11501,7 @@
         item.isDisabled = false;
       }
       return item;
-    }), [maxSelectedItem, option, selectedValue]);
+    }), [maxSelectedItem, option, selectedValue]) : () => option;
     React.useEffect(() => {
       sortItems();
       setItems(isShowSelectAll ? [{
@@ -11508,7 +11512,7 @@
         id: '!all',
         name: selectAllLabel != null ? selectAllLabel : t('selectAllLabelText', 'Pilih Semua')
       }, ...getOption()] : getOption());
-    }, [getOption, isShowSelectAll]);
+    }, [option, isShowSelectAll]);
     React.useEffect(() => {
       if (selectedValue.length > 0 && disabledOptions.length === 0) {
         setInitItems(sortValue);
@@ -11550,7 +11554,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 614,
+        lineNumber: 620,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Select, {
@@ -11560,7 +11564,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 615,
+        lineNumber: 621,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -11575,7 +11579,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 616,
+        lineNumber: 622,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Input$6, _extends({}, getInputProps({
@@ -11593,7 +11597,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 626,
+        lineNumber: 632,
         columnNumber: 13
       }
     })), /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({}, getToggleButtonProps({
@@ -11606,7 +11610,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 633,
+        lineNumber: 639,
         columnNumber: 13
       }
     }), placeholder != null ? placeholder : t('placeholder', 'Pilih Item'))), /*#__PURE__*/React__default["default"].createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -11617,7 +11621,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 643,
+        lineNumber: 649,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconCaretDown, {
@@ -11625,7 +11629,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 648,
+        lineNumber: 654,
         columnNumber: 13
       }
     }))), helperText && /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -11638,7 +11642,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 652,
+        lineNumber: 658,
         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, {
@@ -11646,7 +11650,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 658,
+        lineNumber: 664,
         columnNumber: 13
       }
     }, isShowTagSelectAll ? /*#__PURE__*/React__default["default"].createElement(Tag, _extends({
@@ -11666,7 +11670,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 660,
+        lineNumber: 666,
         columnNumber: 17
       }
     }), selectAllLabel != null ? selectAllLabel : t('selectAllLabelText', 'Pilih Semua')) : selectedItems === null || selectedItems === void 0 ? void 0 : (_selectedItems$filter = selectedItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== '!all')) === null || _selectedItems$filter === void 0 ? void 0 : (_selectedItems$filter2 = _selectedItems$filter.filter((_, idx) => {
@@ -11696,7 +11700,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 688,
+        lineNumber: 694,
         columnNumber: 21
       }
     }), selectedItem.name))), collapsible && !isShowTagSelectAll && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 5 && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -11705,7 +11709,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 710,
+        lineNumber: 716,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -11715,14 +11719,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 711,
+        lineNumber: 717,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 712,
+        lineNumber: 718,
         columnNumber: 19
       }
     }), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -11736,7 +11740,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 713,
+        lineNumber: 719,
         columnNumber: 19
       }
     }, showAllTags ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronUpOutline, {
@@ -11744,7 +11748,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 719,
+        lineNumber: 725,
         columnNumber: 23
       }
     }) : /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
@@ -11752,7 +11756,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 721,
+        lineNumber: 727,
         columnNumber: 23
       }
     }), /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -11764,14 +11768,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 723,
+        lineNumber: 729,
         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: 727,
+        lineNumber: 733,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -11782,7 +11786,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 729,
+        lineNumber: 735,
         columnNumber: 17
       }
     }, `${selectedItems === null || selectedItems === void 0 ? void 0 : (_selectedItems$filter3 = selectedItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== '!all')) === null || _selectedItems$filter3 === void 0 ? void 0 : _selectedItems$filter3.length} ${labelCounter || t('labelCounterText', 'Item terpilih')}`))), showCounter && !isShowTagSelectAll && Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) && /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -11794,7 +11798,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 739,
+        lineNumber: 745,
         columnNumber: 11
       }
     }, `${selectedItems === null || selectedItems === void 0 ? void 0 : (_selectedItems$filter4 = selectedItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== '!all')) === null || _selectedItems$filter4 === void 0 ? void 0 : _selectedItems$filter4.length} ${labelCounter || t('labelCounterText', 'Item terpilih')}`), /*#__PURE__*/React__default["default"].createElement(OptionWrapper$1, {
@@ -11806,7 +11810,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 746,
+        lineNumber: 752,
         columnNumber: 9
       }
     }, isLoading && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -11827,7 +11831,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 752,
+        lineNumber: 758,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
@@ -11835,7 +11839,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 768,
+        lineNumber: 774,
         columnNumber: 15
       }
     }, "Loading....")), items.length > 0 || isLoading ? /*#__PURE__*/React__default["default"].createElement(Option, _extends({}, getMenuProps({
@@ -11846,7 +11850,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 774,
+        lineNumber: 780,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
@@ -11861,14 +11865,14 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$w,
-          lineNumber: 778,
+          lineNumber: 784,
           columnNumber: 19
         }
       }, child),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 775,
+        lineNumber: 781,
         columnNumber: 15
       }
     }, isOpen && items.map((item, index) => {
@@ -11888,7 +11892,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$w,
-          lineNumber: 790,
+          lineNumber: 796,
           columnNumber: 21
         }
       }), /*#__PURE__*/React__default["default"].createElement(IconWrapper, {
@@ -11901,7 +11905,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$w,
-          lineNumber: 803,
+          lineNumber: 809,
           columnNumber: 23
         }
       }, !(item !== null && item !== void 0 && item.hideCheck) && (item.isDisabled ? /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -11909,7 +11913,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$w,
-          lineNumber: 813,
+          lineNumber: 819,
           columnNumber: 29
         }
       }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -11917,21 +11921,21 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$w,
-          lineNumber: 817,
+          lineNumber: 823,
           columnNumber: 31
         }
       })), isShowSelectAll && (item === null || item === void 0 ? void 0 : item.id) === '!all' && selectedValue !== null && selectedValue !== void 0 && selectedValue.length && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length) < (items === null || items === void 0 ? void 0 : items.length) ? /*#__PURE__*/React__default["default"].createElement(IndeterminateFilled, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$w,
-          lineNumber: 824,
+          lineNumber: 830,
           columnNumber: 27
         }
       }, "-") : /*#__PURE__*/React__default["default"].createElement("div", {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$w,
-          lineNumber: 826,
+          lineNumber: 832,
           columnNumber: 27
         }
       })), /*#__PURE__*/React__default["default"].createElement(Item$3, {
@@ -11942,7 +11946,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$w,
-          lineNumber: 829,
+          lineNumber: 835,
           columnNumber: 23
         }
       }, item.render ? (_item$render = item.render) === null || _item$render === void 0 ? void 0 : _item$render.call(item, item.name) : item.name));
@@ -11956,14 +11960,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 837,
+        lineNumber: 843,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 838,
+        lineNumber: 844,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -11973,7 +11977,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 839,
+        lineNumber: 845,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CircleInfoOutline, {
@@ -11985,7 +11989,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 840,
+        lineNumber: 846,
         columnNumber: 19
       }
     })), textEmptyItem != null ? textEmptyItem : t('emptyItemText', 'Item tidak ditemukan')))));
@@ -18126,7 +18130,8 @@
           return onDateSelected === null || onDateSelected === void 0 ? void 0 : onDateSelected(e);
         },
         onClose: function () {
-          return setOpenPicker(false);
+          setOpenPicker(false);
+          onClose === null || onClose === void 0 ? void 0 : onClose();
         },
         showTimePicker: showTimePicker,
         timePickerProps: timePickerProps,
@@ -19841,7 +19846,8 @@
         totalPage: totalPage,
         onLimitChange: function (selectedItem) {
           if (selectedItem) {
-            doFetchData(pageIndex, selectedItem);
+            var isResetPageIndex = selectedItem > pageSize;
+            doFetchData(isResetPageIndex ? 0 : pageIndex, selectedItem);
             setPageSize(selectedItem);
             setLimit(selectedItem);
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.57.10",
+  "version": "1.57.12",
   "dependencies": {
     "@majoo-ui/core": "^1.31.3",
     "@majoo-ui/helpers": "^1.30.5",