@majoo-ui/react 1.61.19 → 1.61.20-rc.1

package/components/modalDialog/ModalDialog.d.ts

@@ -94,7 +94,9 @@ export declare const ModalDialogFooter: import("@stitches/react/types/styled-com
         };
     };
     subtleColor: (value: string) => {
-        color: string;
+        color: string; /**
+         * If true, the close icon button is hidden
+         */
         backgroundColor: string;
     };
 }>>;
@@ -191,7 +193,9 @@ export declare const ModalDialogTitle: import("@stitches/react/types/styled-comp
         };
     };
     subtleColor: (value: string) => {
-        color: string;
+        color: string; /**
+         * If true, the close icon button is hidden
+         */
         backgroundColor: string;
     };
 }>>;
@@ -288,7 +292,9 @@ export declare const ModalDialogContent: import("@stitches/react/types/styled-co
         };
     };
     subtleColor: (value: string) => {
-        color: string;
+        color: string; /**
+         * If true, the close icon button is hidden
+         */
         backgroundColor: string;
     };
 }>>;
@@ -385,7 +391,9 @@ export declare const ModalDialogTrigger: import("@stitches/react/types/styled-co
         };
     };
     subtleColor: (value: string) => {
-        color: string;
+        color: string; /**
+         * If true, the close icon button is hidden
+         */
         backgroundColor: string;
     };
 }>>;
@@ -415,6 +423,10 @@ interface ModalDialogProps extends Omit<IDialog, 'children'>, DialogContentProps
      * On dialog close click function
      */
     onCloseClick?: () => void;
+    /**
+     * Theme configuration for the component
+     */
+    theme?: string;
 }
 /**
  * ModalDialog are used to focus and display content that contains one specific task that requires interaction from the user and is separate from the main page.
@@ -529,7 +541,9 @@ declare const ModalDialog: {
             };
         };
         subtleColor: (value: string) => {
-            color: string;
+            color: string; /**
+             * If true, the close icon button is hidden
+             */
             backgroundColor: string;
         };
     }>>;
@@ -626,7 +640,9 @@ declare const ModalDialog: {
             };
         };
         subtleColor: (value: string) => {
-            color: string;
+            color: string; /**
+             * If true, the close icon button is hidden
+             */
             backgroundColor: string;
         };
     }>>;
@@ -723,7 +739,9 @@ declare const ModalDialog: {
             };
         };
         subtleColor: (value: string) => {
-            color: string;
+            color: string; /**
+             * If true, the close icon button is hidden
+             */
             backgroundColor: string;
         };
     }>>;
@@ -820,7 +838,9 @@ declare const ModalDialog: {
             };
         };
         subtleColor: (value: string) => {
-            color: string;
+            color: string; /**
+             * If true, the close icon button is hidden
+             */
             backgroundColor: string;
         };
     }>>;

package/index.esm.js

@@ -12891,14 +12891,16 @@ const ModalDialog = props => {
       onOpenAutoFocus,
       disabledCloseButton,
       onPointerDownOutside,
-      onCloseClick
+      onCloseClick,
+      theme
     } = props,
-    rest = __rest(props, ["children", "size", "css", "layer", "isMobile", "width", "onOpenAutoFocus", "disabledCloseButton", "onPointerDownOutside", "onCloseClick"]);
+    rest = __rest(props, ["children", "size", "css", "layer", "isMobile", "width", "onOpenAutoFocus", "disabledCloseButton", "onPointerDownOutside", "onCloseClick", "theme"]);
   const childArray = React__default.Children.toArray(children);
   const modalDialogFooter = findNodeChild$1(childArray, 'ModalDialogFooter');
   const modalDialogTitle = findNodeChild$1(childArray, 'ModalDialogTitle');
   const modalDialogContent = findNodeChild$1(childArray, 'ModalDialogContent');
   const modalDialogTrigger = findNodeChild$1(childArray, 'ModalDialogTrigger');
+  const themeProvider = useThemeProvider(theme);
   const ref = useCallback(node => {
     const appElement = document.getElementById('app');
     if (appElement) {
@@ -12916,6 +12918,7 @@ const ModalDialog = props => {
           zIndex: layer
         }
       }, void 0), jsx(StyledContent$4, Object.assign({
+        className: (themeProvider === null || themeProvider === void 0 ? void 0 : themeProvider.theme) || '',
         size: size,
         css: Object.assign(Object.assign({}, css), {
           zIndex: layer,
@@ -12935,7 +12938,7 @@ const ModalDialog = props => {
       }, {
         children: jsxs(Box, Object.assign({
           css: {
-            backgroundColor: '$white',
+            backgroundColor: '$bgWhite',
             display: 'flex',
             flexDirection: 'column',
             borderRadius: '$lg'
@@ -14487,7 +14490,9 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   const {
     t,
-    ready
+    i18n: {
+      language
+    }
   } = useTranslation(['MajooUI/inputSelectCheck', 'translation']);
   const [initItem, setInitItems] = React__default.useState(option); //init filter selectedItems on useMultipleSelection
   const [items, setItems] = React__default.useState([]);
@@ -14513,37 +14518,6 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       setInputSelectValue(value);
     }
   }, [value, defaultValue]);
-  const sortItems = React__default.useCallback(() => {
-    if (sortBy === 'id') {
-      option.sort(function (a, b) {
-        const idA = typeof a.id === 'string' ? a.id.toUpperCase() : a.id; // ignore upper and lowercase
-        const idB = typeof b.id === 'string' ? b.id.toUpperCase() : b.id; // ignore upper and lowercase
-        if (a.id === '!all') return -1;
-        if (b.id === '!all') return 1;
-        if (idA < idB) {
-          return -1;
-        }
-        if (idA > idB) {
-          return 1;
-        }
-        return 0;
-      });
-    } else if (sortBy === 'name') {
-      option.sort(function (a, b) {
-        const nameA = typeof a.name === 'string' ? a.name.toUpperCase() : a.name; // ignore upper and lowercase
-        const nameB = typeof b.name === 'string' ? b.name.toUpperCase() : b.name; // ignore upper and lowercase
-        if (a.id === '!all') return -1;
-        if (b.id === '!all') return 1;
-        if (nameA < nameB) {
-          return -1;
-        }
-        if (nameA > nameB) {
-          return 1;
-        }
-        return 0;
-      });
-    }
-  }, [sortBy, option]);
   const sortValue = selectedValue.length > 0 && disabledOptions.length === 0 ? inputSelectValue.reduce((res, id, i, {
     [i + 1]: next
   }) => {
@@ -14811,45 +14785,63 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       }
     }
   });
-  const memoOptions = useMemo(() => maxSelectedItem ? option == null ? void 0 : option.map(item => {
-    const isMaxSelectedItem = maxSelectedItem && (selectedValue == null ? void 0 : selectedValue.length) >= maxSelectedItem;
-    if (isMaxSelectedItem && !(selectedValue != null && selectedValue.includes(item.id))) {
-      item.hideCheck = true;
-      item.isDisabled = true;
-    } else {
-      item.hideCheck = false;
-      item.isDisabled = false;
+  const memoOptions = useMemo(() => {
+    const optionsCopy = option ? [...option] : [];
+    if (sortBy === 'id') {
+      optionsCopy.sort((a, b) => {
+        const idA = typeof a.id === 'string' ? a.id.toUpperCase() : a.id;
+        const idB = typeof b.id === 'string' ? b.id.toUpperCase() : b.id;
+        if (a.id === '!all') return -1;
+        if (b.id === '!all') return 1;
+        if (idA < idB) return -1;
+        if (idA > idB) return 1;
+        return 0;
+      });
+    } else if (sortBy === 'name') {
+      optionsCopy.sort((a, b) => {
+        const nameA = typeof a.name === 'string' ? a.name.toUpperCase() : a.name;
+        const nameB = typeof b.name === 'string' ? b.name.toUpperCase() : b.name;
+        if (a.id === '!all') return -1;
+        if (b.id === '!all') return 1;
+        if (nameA < nameB) return -1;
+        if (nameA > nameB) return 1;
+        return 0;
+      });
     }
-    return item;
-  }) : option, [maxSelectedItem, option, selectedValue]);
+    return maxSelectedItem ? optionsCopy.map(item => {
+      const isMaxSelectedItem = maxSelectedItem && (selectedValue == null ? void 0 : selectedValue.length) >= maxSelectedItem;
+      if (isMaxSelectedItem && !(selectedValue != null && selectedValue.includes(item.id))) {
+        item.hideCheck = true;
+        item.isDisabled = true;
+      } else {
+        item.hideCheck = false;
+        item.isDisabled = false;
+      }
+      return item;
+    }) : optionsCopy;
+  }, [maxSelectedItem, option, selectedValue, sortBy]);
   const memoOptionsString = useMemo(() => JSON.stringify(memoOptions), [memoOptions]);
   const itemsLength = items == null ? void 0 : items.reduce((acc, item) => {
     return [...acc, ...(item.children ? item.children : [item])];
   }, []).length;
   useEffect(() => {
-    if ((!inputValue || fetchData) && ready) {
-      sortItems();
+    if (!inputValue || fetchData) {
       setItems(isShowSelectAll ? [{
         id: '!all',
-        name: selectAllLabel != null ? selectAllLabel : t('selectAllLabelText', 'Pilih Semua')
+        name: selectAllLabel != null ? selectAllLabel : language === 'en' ? 'Select All' : 'Pilih Semua'
       }, ...memoOptions] : memoOptions);
       setInitItems(isShowSelectAll ? [{
         id: '!all',
-        name: selectAllLabel != null ? selectAllLabel : t('selectAllLabelText', 'Pilih Semua')
+        name: selectAllLabel != null ? selectAllLabel : language === 'en' ? 'Select All' : 'Pilih Semua'
       }, ...memoOptions] : memoOptions);
     }
-  }, [isShowSelectAll, selectAllLabel, ready, memoOptionsString, inputValue]);
+  }, [isShowSelectAll, selectAllLabel, language, memoOptionsString, inputValue, sortBy]);
   useEffect(() => {
     if (selectedValue.length > 0 && disabledOptions.length === 0) {
       setInitItems(sortValue);
       setItems(sortValue);
     }
   }, []);
-  useEffect(() => {
-    if (sortBy) {
-      sortItems();
-    }
-  }, [sortBy]);
   useEffect(() => {
     if (disabledOptions.length > 0) {
       const options = generateOptions(sortDisabled);
@@ -14901,7 +14893,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         });
       },
       css: {
-        backgroundColor: highlightedIndex === index ? '$bgGray' : 'white',
+        backgroundColor: highlightedIndex === index ? '$bgGray' : '$bgWhite',
         cursor: item.isDisabled ? 'not-allowed' : 'pointer',
         color: item.isDisabled ? '$textDisable' : 'textPrimary',
         padding: asChild ? '0px $spacing-05' : 0
@@ -14909,7 +14901,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 779,
+        lineNumber: 774,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default.createElement(IconWrapper, {
@@ -14923,7 +14915,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 798,
+        lineNumber: 793,
         columnNumber: 11
       }
     }, !(item != null && item.hideCheck) && (item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -14931,7 +14923,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 810,
+        lineNumber: 805,
         columnNumber: 17
       }
     }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -14939,21 +14931,21 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 814,
+        lineNumber: 809,
         columnNumber: 19
       }
     })), isShowSelectAll && (item == null ? void 0 : item.id) === '!all' && selectedValue != null && selectedValue.length && (selectedValue == null ? void 0 : selectedValue.length) < itemsLength ? /*#__PURE__*/React__default.createElement(IndeterminateFilled$1, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 818,
+        lineNumber: 813,
         columnNumber: 15
       }
     }, "-") : /*#__PURE__*/React__default.createElement("div", {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 820,
+        lineNumber: 815,
         columnNumber: 15
       }
     })), /*#__PURE__*/React__default.createElement(Item$2, {
@@ -14964,7 +14956,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 823,
+        lineNumber: 818,
         columnNumber: 11
       }
     }, item.render ? item.render == null ? void 0 : item.render(item.name) : item.name));
@@ -14985,14 +14977,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         disabled: item.isDisabled
       }), {
         css: {
-          backgroundColor: highlightedIndex === groupIndex ? '$bgGray' : 'white',
+          backgroundColor: highlightedIndex === groupIndex ? '$bgGray' : '$bgWhite',
           cursor: item.isDisabled ? 'not-allowed' : 'pointer',
           color: item.isDisabled ? '$textDisable' : 'textPrimary'
         },
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 839,
+          lineNumber: 834,
           columnNumber: 13
         }
       }), /*#__PURE__*/React__default.createElement(IconWrapper, {
@@ -15005,7 +14997,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 852,
+          lineNumber: 847,
           columnNumber: 15
         }
       }, !(item != null && item.hideCheck) && item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -15013,7 +15005,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 862,
+          lineNumber: 857,
           columnNumber: 19
         }
       }) : (filterSelectedChild == null ? void 0 : filterSelectedChild.length) === (item == null || (_item$children7 = item.children) == null || (_item$children7 = _item$children7.filter(e => !e.isDisabled)) == null ? void 0 : _item$children7.length) ? /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -15021,14 +15013,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 864,
+          lineNumber: 859,
           columnNumber: 19
         }
       }) : (filterSelectedChild == null ? void 0 : filterSelectedChild.length) > 0 ? /*#__PURE__*/React__default.createElement(IndeterminateFilled$1, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 866,
+          lineNumber: 861,
           columnNumber: 19
         }
       }, "-") : null), /*#__PURE__*/React__default.createElement(Item$2, {
@@ -15039,14 +15031,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 869,
+          lineNumber: 864,
           columnNumber: 15
         }
       }, item.render ? item.render == null ? void 0 : item.render(item.name) : item.name)),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 837,
+        lineNumber: 832,
         columnNumber: 9
       }
     }, item == null || (_item$children8 = item.children) == null ? void 0 : _item$children8.map((optItem, optIndex) => renderOptionItem(optItem, groupIndex + optIndex + 1, true)));
@@ -15059,7 +15051,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 881,
+      lineNumber: 876,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Select, {
@@ -15069,7 +15061,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 882,
+      lineNumber: 877,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -15084,7 +15076,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 883,
+      lineNumber: 878,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Input$6, _extends({}, getInputProps({
@@ -15102,7 +15094,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 893,
+      lineNumber: 888,
       columnNumber: 13
     }
   })), /*#__PURE__*/React__default.createElement(Button$2, _extends({}, getToggleButtonProps({
@@ -15116,7 +15108,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 900,
+      lineNumber: 895,
       columnNumber: 13
     }
   }), (_ref2 = label != null ? label : placeholder) != null ? _ref2 : t('placeholder', 'Pilih Item'))), /*#__PURE__*/React__default.createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -15127,7 +15119,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 911,
+      lineNumber: 906,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(IconCaretDown, {
@@ -15135,7 +15127,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 916,
+      lineNumber: 911,
       columnNumber: 13
     }
   }))), helperText && /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -15148,7 +15140,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 920,
+      lineNumber: 915,
       columnNumber: 11
     }
   }, helperText), showSelectedTag && !showCounter && selectedItems.length !== 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TagWrapper$2, {
@@ -15156,7 +15148,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 926,
+      lineNumber: 921,
       columnNumber: 13
     }
   }, isShowTagSelectAll ? /*#__PURE__*/React__default.createElement(Tag, _extends({
@@ -15177,7 +15169,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 928,
+      lineNumber: 923,
       columnNumber: 17
     }
   }), selectAllLabel != null ? selectAllLabel : t('selectAllLabelText', 'Pilih Semua')) : selectedItems == null || (_selectedItems$filter = selectedItems.filter(item => (item == null ? void 0 : item.id) !== '!all')) == null || (_selectedItems$filter = _selectedItems$filter.filter((_, idx) => {
@@ -15208,7 +15200,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 957,
+      lineNumber: 952,
       columnNumber: 21
     }
   }), selectedItem.name))), collapsible && !isShowTagSelectAll && (selectedItems == null ? void 0 : selectedItems.length) > collapsibleLimit && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -15217,7 +15209,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 980,
+      lineNumber: 975,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -15227,14 +15219,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 981,
+      lineNumber: 976,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Separator$2, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 982,
+      lineNumber: 977,
       columnNumber: 19
     }
   }), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -15248,7 +15240,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 983,
+      lineNumber: 978,
       columnNumber: 19
     }
   }, showAllTags ? /*#__PURE__*/React__default.createElement(ChevronUpOutline, {
@@ -15256,7 +15248,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 989,
+      lineNumber: 984,
       columnNumber: 23
     }
   }) : /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
@@ -15264,7 +15256,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 991,
+      lineNumber: 986,
       columnNumber: 23
     }
   }), /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -15276,14 +15268,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 993,
+      lineNumber: 988,
       columnNumber: 21
     }
   }, showAllTags ? t('showSomeText', 'Tampilkan Sebagian') : t('showAllText', 'Tampilkan Semua'))), /*#__PURE__*/React__default.createElement(Separator$2, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 997,
+      lineNumber: 992,
       columnNumber: 19
     }
   })), showCollapsibleCounter && /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -15294,7 +15286,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1000,
+      lineNumber: 995,
       columnNumber: 19
     }
   }, `${totalOptions ? totalOptions : selectedItems == null || (_selectedItems$filter2 = selectedItems.filter(item => (item == null ? void 0 : item.id) !== '!all')) == null ? void 0 : _selectedItems$filter2.length} ${labelCounter || t('labelCounterText', 'Item terpilih')}`))), showCounter && !isShowTagSelectAll && Boolean(selectedItems == null ? void 0 : selectedItems.length) && /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -15306,7 +15298,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1010,
+      lineNumber: 1006,
       columnNumber: 11
     }
   }, `${totalOptions ? totalOptions : selectedItems == null || (_selectedItems$filter3 = selectedItems.filter(item => (item == null ? void 0 : item.id) !== '!all')) == null ? void 0 : _selectedItems$filter3.length} ${labelCounter || t('labelCounterText', 'Item terpilih')}`), /*#__PURE__*/React__default.createElement(OptionWrapper$1, {
@@ -15319,7 +15311,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1016,
+      lineNumber: 1013,
       columnNumber: 9
     }
   }, isLoading && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -15341,7 +15333,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1026,
+      lineNumber: 1023,
       columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(Text$1, {
@@ -15349,7 +15341,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1043,
+      lineNumber: 1040,
       columnNumber: 15
     }
   }, "Loading....")), items.length > 0 || isLoading ? /*#__PURE__*/React__default.createElement(Option, _extends({}, getMenuProps({
@@ -15361,7 +15353,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1048,
+      lineNumber: 1045,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
@@ -15384,14 +15376,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 1052,
+        lineNumber: 1049,
         columnNumber: 19
       }
     }, child),
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1049,
+      lineNumber: 1046,
       columnNumber: 15
     }
   }, isOpen && items.map((item, index) => item != null && item.children ? renderOptionGroupItem(item) : renderOptionItem(item, index)))) : /*#__PURE__*/React__default.createElement(Option, _extends({
@@ -15404,14 +15396,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1077,
+      lineNumber: 1074,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(StyledDiv, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1078,
+      lineNumber: 1075,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -15421,7 +15413,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1079,
+      lineNumber: 1076,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(CircleInfoOutline, {
@@ -15433,7 +15425,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1080,
+      lineNumber: 1077,
       columnNumber: 19
     }
   })), textEmptyItem != null ? textEmptyItem : t('emptyItemText', 'Item tidak ditemukan')))));
@@ -29085,7 +29077,7 @@ const IconStateFull = _ref => {
       lineNumber: 126,
       columnNumber: 5
     }
-  }, !!customPreviewIcon ? (/*#__PURE__*/React__default.cloneElement(customPreviewIcon, Object.assign({}, customPreviewIcon.props, props, {
+  }, customPreviewIcon ? (/*#__PURE__*/React__default.cloneElement(customPreviewIcon, Object.assign({}, customPreviewIcon.props, props, {
     color: isHover ? '#04C99E' : customPreviewIcon.props.color,
     onMouseEnter: handleEnter,
     onMouseLeave: handleLeave,
@@ -29149,7 +29141,8 @@ const Upload = ({
   isDefaultCustomRatio,
   customPreviewIcon,
   onPreviewIconClick,
-  maxWidthOrHeight
+  maxWidthOrHeight,
+  theme
 }) => {
   const {
     t
@@ -29597,7 +29590,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 665,
+        lineNumber: 666,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -29607,7 +29600,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 666,
+        lineNumber: 667,
         columnNumber: 9
       }
     }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : t('replaceLabel', 'Ubah Berkas')));
@@ -29622,7 +29615,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 676,
+            lineNumber: 677,
             columnNumber: 16
           }
         });
@@ -29633,7 +29626,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 679,
+          lineNumber: 680,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -29643,7 +29636,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 680,
+          lineNumber: 681,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -29652,7 +29645,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 681,
+          lineNumber: 682,
           columnNumber: 27
         }
       }), !hiddenPreview && /*#__PURE__*/React__default.createElement(Box, {
@@ -29665,7 +29658,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 683,
+          lineNumber: 684,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -29681,7 +29674,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 691,
+          lineNumber: 692,
           columnNumber: 17
         }
       })), /*#__PURE__*/React__default.createElement(Image, {
@@ -29691,7 +29684,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 704,
+          lineNumber: 705,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -29708,7 +29701,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 715,
+            lineNumber: 716,
             columnNumber: 16
           }
         });
@@ -29718,7 +29711,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 718,
+          lineNumber: 719,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -29728,7 +29721,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 719,
+          lineNumber: 720,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -29737,7 +29730,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 720,
+          lineNumber: 721,
           columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -29750,7 +29743,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 721,
+          lineNumber: 722,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -29760,14 +29753,14 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 729,
+          lineNumber: 730,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(FileExtension, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 730,
+          lineNumber: 731,
           columnNumber: 17
         }
       }, ".", item == null || (_item$name = item.name) == null ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default.createElement(Tooltip$1, {
@@ -29775,7 +29768,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 731,
+          lineNumber: 732,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Text, {
@@ -29790,7 +29783,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 732,
+          lineNumber: 733,
           columnNumber: 19
         }
       }, item.name)))), !hiddenPreview && /*#__PURE__*/React__default.createElement(Box, {
@@ -29803,7 +29796,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 748,
+          lineNumber: 749,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -29819,7 +29812,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 756,
+          lineNumber: 757,
           columnNumber: 17
         }
       })), /*#__PURE__*/React__default.createElement(Blank, {
@@ -29827,7 +29820,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 769,
+          lineNumber: 770,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -29842,7 +29835,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 780,
+        lineNumber: 781,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -29856,7 +29849,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 781,
+        lineNumber: 782,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(LoadingBar, {
@@ -29882,7 +29875,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 782,
+        lineNumber: 783,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Text, {
@@ -29890,14 +29883,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 795,
+        lineNumber: 796,
         columnNumber: 11
       }
     }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default.createElement(Text, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 796,
+        lineNumber: 797,
         columnNumber: 11
       }
     }, t('uploadingLabel', 'Berkas sedang diunggah'))));
@@ -29909,7 +29902,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 804,
+        lineNumber: 805,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ContainerUpload, {
@@ -29925,21 +29918,21 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 805,
+        lineNumber: 806,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Children, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 816,
+        lineNumber: 817,
         columnNumber: 11
       }
     }, children != null ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 818,
+        lineNumber: 819,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(IconCard, {
@@ -29948,7 +29941,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 819,
+        lineNumber: 820,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(UploadOutline, {
@@ -29956,7 +29949,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 820,
+        lineNumber: 821,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__default.createElement(Text, {
@@ -29966,7 +29959,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 822,
+        lineNumber: 823,
         columnNumber: 17
       }
     }, placeholder != null ? placeholder : t('uploadPlaceholder', 'Pilih atau letakkan berkas di sini'))))), error && /*#__PURE__*/React__default.createElement(ErrorMessage, {
@@ -29976,7 +29969,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 829,
+        lineNumber: 830,
         columnNumber: 19
       }
     }, error));
@@ -29987,10 +29980,11 @@ const Upload = ({
         if (!open) setCrop(null);
       },
       isMobile: isMobile,
+      theme: theme,
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 836,
+        lineNumber: 837,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -29998,7 +29992,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 842,
+        lineNumber: 844,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -30006,7 +30000,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 843,
+        lineNumber: 845,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
@@ -30019,7 +30013,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 845,
+        lineNumber: 847,
         columnNumber: 9
       }
     }, cropperTitle || t('cropperTitle', 'Potong Gambar')), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -30032,7 +30026,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 848,
+        lineNumber: 850,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ReactCrop, {
@@ -30043,7 +30037,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 856,
+        lineNumber: 858,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Image, {
@@ -30057,14 +30051,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 857,
+        lineNumber: 859,
         columnNumber: 13
       }
     }))), /*#__PURE__*/React__default.createElement(ModalDialogFooter, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 868,
+        lineNumber: 870,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -30076,14 +30070,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 869,
+        lineNumber: 871,
         columnNumber: 11
       }
     }, hiddenToggleAspect ? /*#__PURE__*/React__default.createElement(Box, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 871,
+        lineNumber: 873,
         columnNumber: 15
       }
     }) : /*#__PURE__*/React__default.createElement(Tooltip$1, {
@@ -30091,7 +30085,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 873,
+        lineNumber: 875,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(ImageOutline, {
@@ -30103,7 +30097,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 874,
+        lineNumber: 876,
         columnNumber: 17
       }
     })), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -30111,7 +30105,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 881,
+        lineNumber: 883,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Button$4, {
@@ -30120,7 +30114,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 882,
+        lineNumber: 884,
         columnNumber: 15
       }
     }, t('label.cancel', 'Batal', {
@@ -30130,7 +30124,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 885,
+        lineNumber: 887,
         columnNumber: 15
       }
     }, t('save', 'Simpan', {
@@ -30147,7 +30141,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 894,
+      lineNumber: 896,
       columnNumber: 5
     }
   }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default.createElement(UploadProgress, {
@@ -30156,7 +30150,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 897,
+      lineNumber: 899,
       columnNumber: 32
     }
   }) : renderUpload(), showCropper && renderCropper(), /*#__PURE__*/React__default.createElement(Input$2, {
@@ -30168,7 +30162,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 899,
+      lineNumber: 901,
       columnNumber: 7
     }
   }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.61.19",
+  "version": "1.61.20-rc.1",
   "main": "./index.esm.js",
   "exports": {
     ".": {