@majoo-ui/react 1.61.12-rc.23 → 1.61.12-rc.24

package/index.umd.js

@@ -15048,7 +15048,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 780,
+          lineNumber: 781,
           columnNumber: 9
         }
       }), /*#__PURE__*/React__default["default"].createElement(IconWrapper, {
@@ -15062,7 +15062,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 799,
+          lineNumber: 800,
           columnNumber: 11
         }
       }, !(item != null && item.hideCheck) && (item.isDisabled ? /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -15070,7 +15070,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 811,
+          lineNumber: 812,
           columnNumber: 17
         }
       }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -15078,21 +15078,21 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 815,
+          lineNumber: 816,
           columnNumber: 19
         }
       })), isShowSelectAll && (item == null ? void 0 : item.id) === '!all' && selectedValue != null && selectedValue.length && (selectedValue == null ? void 0 : selectedValue.length) < itemsLength ? /*#__PURE__*/React__default["default"].createElement(IndeterminateFilled$1, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 819,
+          lineNumber: 820,
           columnNumber: 15
         }
       }, "-") : /*#__PURE__*/React__default["default"].createElement("div", {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 821,
+          lineNumber: 822,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default["default"].createElement(Item$2, {
@@ -15103,7 +15103,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 824,
+          lineNumber: 825,
           columnNumber: 11
         }
       }, item.render ? item.render == null ? void 0 : item.render(item.name) : item.name));
@@ -15131,7 +15131,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$x,
-            lineNumber: 840,
+            lineNumber: 841,
             columnNumber: 13
           }
         }), /*#__PURE__*/React__default["default"].createElement(IconWrapper, {
@@ -15144,7 +15144,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$x,
-            lineNumber: 853,
+            lineNumber: 854,
             columnNumber: 15
           }
         }, !(item != null && item.hideCheck) && item.isDisabled ? /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -15152,7 +15152,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$x,
-            lineNumber: 863,
+            lineNumber: 864,
             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["default"].createElement(CheckOutline, {
@@ -15160,14 +15160,14 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$x,
-            lineNumber: 865,
+            lineNumber: 866,
             columnNumber: 19
           }
         }) : (filterSelectedChild == null ? void 0 : filterSelectedChild.length) > 0 ? /*#__PURE__*/React__default["default"].createElement(IndeterminateFilled$1, {
           __self: undefined,
           __source: {
             fileName: _jsxFileName$x,
-            lineNumber: 867,
+            lineNumber: 868,
             columnNumber: 19
           }
         }, "-") : null), /*#__PURE__*/React__default["default"].createElement(Item$2, {
@@ -15178,14 +15178,14 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$x,
-            lineNumber: 870,
+            lineNumber: 871,
             columnNumber: 15
           }
         }, item.render ? item.render == null ? void 0 : item.render(item.name) : item.name)),
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 838,
+          lineNumber: 839,
           columnNumber: 9
         }
       }, item == null || (_item$children8 = item.children) == null ? void 0 : _item$children8.map((optItem, optIndex) => renderOptionItem(optItem, groupIndex + optIndex + 1, true)));
@@ -15198,7 +15198,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 882,
+        lineNumber: 883,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Select, {
@@ -15208,7 +15208,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 883,
+        lineNumber: 884,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -15223,7 +15223,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 884,
+        lineNumber: 885,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Input$6, _extends({}, getInputProps({
@@ -15241,7 +15241,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 894,
+        lineNumber: 895,
         columnNumber: 13
       }
     })), /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({}, getToggleButtonProps({
@@ -15255,7 +15255,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 901,
+        lineNumber: 902,
         columnNumber: 13
       }
     }), (_ref2 = label != null ? label : placeholder) != null ? _ref2 : t('placeholder', 'Pilih Item'))), /*#__PURE__*/React__default["default"].createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -15266,7 +15266,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 912,
+        lineNumber: 913,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconCaretDown, {
@@ -15274,7 +15274,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 917,
+        lineNumber: 918,
         columnNumber: 13
       }
     }))), helperText && /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -15287,7 +15287,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 921,
+        lineNumber: 922,
         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, {
@@ -15295,7 +15295,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 927,
+        lineNumber: 928,
         columnNumber: 13
       }
     }, isShowTagSelectAll ? /*#__PURE__*/React__default["default"].createElement(Tag, _extends({
@@ -15316,7 +15316,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 929,
+        lineNumber: 930,
         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) => {
@@ -15347,7 +15347,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 958,
+        lineNumber: 959,
         columnNumber: 21
       }
     }), selectedItem.name))), collapsible && !isShowTagSelectAll && (selectedItems == null ? void 0 : selectedItems.length) > collapsibleLimit && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -15356,7 +15356,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 981,
+        lineNumber: 982,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -15366,14 +15366,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 982,
+        lineNumber: 983,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 983,
+        lineNumber: 984,
         columnNumber: 19
       }
     }), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -15387,7 +15387,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 984,
+        lineNumber: 985,
         columnNumber: 19
       }
     }, showAllTags ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronUpOutline, {
@@ -15395,7 +15395,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 990,
+        lineNumber: 991,
         columnNumber: 23
       }
     }) : /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
@@ -15403,7 +15403,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 992,
+        lineNumber: 993,
         columnNumber: 23
       }
     }), /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -15415,14 +15415,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 994,
+        lineNumber: 995,
         columnNumber: 21
       }
     }, showAllTags ? t('showSomeText', 'Tampilkan Sebagian') : t('showAllText', 'Tampilkan Semua'))), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 998,
+        lineNumber: 999,
         columnNumber: 19
       }
     })), showCollapsibleCounter && /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -15433,7 +15433,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 1001,
+        lineNumber: 1002,
         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["default"].createElement(Paragraph, {
@@ -15445,7 +15445,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 1011,
+        lineNumber: 1012,
         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["default"].createElement(OptionWrapper$1, {
@@ -15458,7 +15458,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 1017,
+        lineNumber: 1018,
         columnNumber: 9
       }
     }, isLoading && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -15480,7 +15480,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 1027,
+        lineNumber: 1028,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
@@ -15488,7 +15488,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 1044,
+        lineNumber: 1045,
         columnNumber: 15
       }
     }, "Loading....")), items.length > 0 || isLoading ? /*#__PURE__*/React__default["default"].createElement(Option, _extends({}, getMenuProps({
@@ -15500,7 +15500,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 1049,
+        lineNumber: 1050,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
@@ -15523,14 +15523,14 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 1053,
+          lineNumber: 1054,
           columnNumber: 19
         }
       }, child),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 1050,
+        lineNumber: 1051,
         columnNumber: 15
       }
     }, isOpen && items.map((item, index) => item != null && item.children ? renderOptionGroupItem(item) : renderOptionItem(item, index)))) : /*#__PURE__*/React__default["default"].createElement(Option, _extends({
@@ -15543,14 +15543,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 1078,
+        lineNumber: 1079,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 1079,
+        lineNumber: 1080,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -15560,7 +15560,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 1080,
+        lineNumber: 1081,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CircleInfoOutline, {
@@ -15572,7 +15572,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 1081,
+        lineNumber: 1082,
         columnNumber: 19
       }
     })), textEmptyItem != null ? textEmptyItem : t('emptyItemText', 'Item tidak ditemukan')))));
@@ -29515,7 +29515,7 @@
   const Input$2 = styled('input', {
     display: 'none !important'
   });
-  const Children = styled('div', {
+  const ChildContainer = styled('div', {
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
@@ -29614,7 +29614,7 @@
         lineNumber: 126,
         columnNumber: 5
       }
-    }, !!customPreviewIcon ? (/*#__PURE__*/React__default["default"].cloneElement(customPreviewIcon, Object.assign({}, customPreviewIcon.props, props, {
+    }, customPreviewIcon ? (/*#__PURE__*/React__default["default"].cloneElement(customPreviewIcon, Object.assign({}, customPreviewIcon.props, props, {
       color: isHover ? '#04C99E' : customPreviewIcon.props.color,
       onMouseEnter: handleEnter,
       onMouseLeave: handleLeave,
@@ -29992,6 +29992,9 @@
           };
         }
       }
+      if (e.target.value) {
+        e.target.value = null;
+      }
     }
     function handleCrop() {
       if (completedCrop != null && completedCrop.width && completedCrop != null && completedCrop.height && imgRef.current) {
@@ -30127,7 +30130,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 666,
+          lineNumber: 669,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ButtonText, {
@@ -30137,7 +30140,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 667,
+          lineNumber: 670,
           columnNumber: 9
         }
       }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : t('replaceLabel', 'Ubah Berkas')));
@@ -30152,7 +30155,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 677,
+              lineNumber: 680,
               columnNumber: 16
             }
           });
@@ -30163,7 +30166,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 680,
+            lineNumber: 683,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -30173,7 +30176,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 681,
+            lineNumber: 684,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -30182,7 +30185,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 682,
+            lineNumber: 685,
             columnNumber: 27
           }
         }), !hiddenPreview && /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -30195,7 +30198,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 684,
+            lineNumber: 687,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -30211,7 +30214,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 692,
+            lineNumber: 695,
             columnNumber: 17
           }
         })), /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -30221,7 +30224,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 705,
+            lineNumber: 708,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -30238,7 +30241,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 716,
+              lineNumber: 719,
               columnNumber: 16
             }
           });
@@ -30248,7 +30251,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 719,
+            lineNumber: 722,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -30258,7 +30261,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 720,
+            lineNumber: 723,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -30267,7 +30270,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 721,
+            lineNumber: 724,
             columnNumber: 27
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -30280,7 +30283,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 722,
+            lineNumber: 725,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -30290,14 +30293,14 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 730,
+            lineNumber: 733,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(FileExtension, {
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 731,
+            lineNumber: 734,
             columnNumber: 17
           }
         }, ".", item == null || (_item$name = item.name) == null ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
@@ -30305,7 +30308,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 732,
+            lineNumber: 735,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -30320,7 +30323,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 733,
+            lineNumber: 736,
             columnNumber: 19
           }
         }, item.name)))), !hiddenPreview && /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -30333,7 +30336,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 749,
+            lineNumber: 752,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -30349,7 +30352,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 757,
+            lineNumber: 760,
             columnNumber: 17
           }
         })), /*#__PURE__*/React__default["default"].createElement(Blank, {
@@ -30357,7 +30360,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 770,
+            lineNumber: 773,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -30372,7 +30375,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 781,
+          lineNumber: 784,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -30386,7 +30389,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 782,
+          lineNumber: 785,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(LoadingBar, {
@@ -30412,7 +30415,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 783,
+          lineNumber: 786,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -30420,110 +30423,18 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 796,
+          lineNumber: 799,
           columnNumber: 11
         }
       }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default["default"].createElement(Text, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 797,
+          lineNumber: 800,
           columnNumber: 11
         }
       }, t('uploadingLabel', 'Berkas sedang diunggah'))));
     }
-    function renderUpload() {
-      return /*#__PURE__*/React__default["default"].createElement(FocusArea, {
-        focus: dragActive,
-        css: css,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$9,
-          lineNumber: 805,
-          columnNumber: 7
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(ContainerUpload, {
-        hidden: max ? fileList.length >= max ? true : false : false,
-        disabled: disabled,
-        showError: error !== null,
-        onClick: handleClick,
-        onDragEnter: handleDragEnter,
-        onDragLeave: handleDragLeave,
-        onDragOver: handleDragOver,
-        onDrop: handleDrop,
-        focus: dragActive,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$9,
-          lineNumber: 806,
-          columnNumber: 9
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(Input$2, {
-        key: inputKey,
-        type: "file",
-        accept: accept,
-        ref: hiddenFileInput,
-        onChange: handleChange,
-        multiple: multiple,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$9,
-          lineNumber: 817,
-          columnNumber: 11
-        }
-      }), /*#__PURE__*/React__default["default"].createElement(Children, {
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$9,
-          lineNumber: 818,
-          columnNumber: 11
-        }
-      }, children != null ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$9,
-          lineNumber: 820,
-          columnNumber: 15
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(IconCard, {
-        justify: "center",
-        align: "center",
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$9,
-          lineNumber: 821,
-          columnNumber: 17
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(icons.UploadOutline, {
-        color: disabled ? '#C0C4C4' : '#404545',
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$9,
-          lineNumber: 822,
-          columnNumber: 19
-        }
-      })), /*#__PURE__*/React__default["default"].createElement(Text, {
-        css: {
-          margin: '$spacing-04 $spacing-05 0 $spacing-05'
-        },
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$9,
-          lineNumber: 824,
-          columnNumber: 17
-        }
-      }, placeholder != null ? placeholder : t('uploadPlaceholder', 'Pilih atau letakkan berkas di sini'))))), error && /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
-        css: {
-          width: width - 5
-        },
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$9,
-          lineNumber: 831,
-          columnNumber: 19
-        }
-      }, error));
-    }
     function renderCropper() {
       return /*#__PURE__*/React__default["default"].createElement(ModalDialog, {
         onOpenChange: () => setCrop(null),
@@ -30531,7 +30442,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 838,
+          lineNumber: 808,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -30539,7 +30450,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 839,
+          lineNumber: 809,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -30547,7 +30458,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 840,
+          lineNumber: 810,
           columnNumber: 11
         }
       })), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
@@ -30560,7 +30471,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 842,
+          lineNumber: 812,
           columnNumber: 9
         }
       }, cropperTitle || t('cropperTitle', 'Potong Gambar')), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -30573,7 +30484,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 845,
+          lineNumber: 815,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ReactCrop__default["default"], {
@@ -30584,7 +30495,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 853,
+          lineNumber: 823,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -30598,14 +30509,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 854,
+          lineNumber: 824,
           columnNumber: 13
         }
       }))), /*#__PURE__*/React__default["default"].createElement(ModalDialogFooter, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 865,
+          lineNumber: 835,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -30617,14 +30528,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 866,
+          lineNumber: 836,
           columnNumber: 11
         }
       }, hiddenToggleAspect ? /*#__PURE__*/React__default["default"].createElement(Box, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 868,
+          lineNumber: 838,
           columnNumber: 15
         }
       }) : /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
@@ -30632,7 +30543,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 870,
+          lineNumber: 840,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ImageOutline, {
@@ -30644,7 +30555,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 871,
+          lineNumber: 841,
           columnNumber: 17
         }
       })), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -30652,7 +30563,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 878,
+          lineNumber: 848,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Button$4, {
@@ -30661,7 +30572,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 879,
+          lineNumber: 849,
           columnNumber: 15
         }
       }, t('label.cancel', 'Batal', {
@@ -30671,7 +30582,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 882,
+          lineNumber: 852,
           columnNumber: 15
         }
       }, t('save', 'Simpan', {
@@ -30688,7 +30599,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 891,
+        lineNumber: 861,
         columnNumber: 5
       }
     }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
@@ -30697,10 +30608,99 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 894,
-        columnNumber: 32
+        lineNumber: 865,
+        columnNumber: 9
+      }
+    }) : /*#__PURE__*/React__default["default"].createElement(FocusArea, {
+      focus: dragActive,
+      css: css,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$9,
+        lineNumber: 867,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(ContainerUpload, {
+      hidden: max ? fileList.length >= max ? true : false : false,
+      disabled: disabled,
+      showError: error !== null,
+      onClick: handleClick,
+      onDragEnter: handleDragEnter,
+      onDragLeave: handleDragLeave,
+      onDragOver: handleDragOver,
+      onDrop: handleDrop,
+      focus: dragActive,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$9,
+        lineNumber: 868,
+        columnNumber: 11
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(ChildContainer, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$9,
+        lineNumber: 879,
+        columnNumber: 13
+      }
+    }, children || /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$9,
+        lineNumber: 881,
+        columnNumber: 17
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(IconCard, {
+      justify: "center",
+      align: "center",
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$9,
+        lineNumber: 882,
+        columnNumber: 19
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(icons.UploadOutline, {
+      color: disabled ? '#C0C4C4' : '#404545',
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$9,
+        lineNumber: 883,
+        columnNumber: 21
       }
-    }) : renderUpload(), showCropper && renderCropper());
+    })), /*#__PURE__*/React__default["default"].createElement(Text, {
+      css: {
+        margin: '$spacing-04 $spacing-05 0 $spacing-05'
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$9,
+        lineNumber: 885,
+        columnNumber: 19
+      }
+    }, placeholder != null ? placeholder : t('uploadPlaceholder', 'Pilih atau letakkan berkas di sini'))))), error && /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
+      css: {
+        width: width - 5
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$9,
+        lineNumber: 892,
+        columnNumber: 21
+      }
+    }, error)), showCropper && renderCropper(), /*#__PURE__*/React__default["default"].createElement(Input$2, {
+      key: inputKey,
+      type: "file",
+      accept: accept,
+      ref: hiddenFileInput,
+      onChange: handleChange,
+      multiple: multiple,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$9,
+        lineNumber: 896,
+        columnNumber: 7
+      }
+    }));
   };
   Upload.defaultProps = {
     listType: 'file',