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

package/index.esm.js

@@ -14474,7 +14474,6 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     t,
     ready
   } = useTranslation(['MajooUI/inputSelectCheck', 'translation']);
-  // const t = (key, defaultValue) => defaultValue;
   const [initItem, setInitItems] = React__default.useState(option); //init filter selectedItems on useMultipleSelection
   const [items, setItems] = React__default.useState([]);
   const [selectedValue, setSelectedValue] = React__default.useState([]);
@@ -29001,7 +29000,7 @@ var _jsxFileName$9 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/compo
 const Input$2 = styled('input', {
   display: 'none !important'
 });
-const Children = styled('div', {
+const ChildContainer = styled('div', {
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
@@ -29100,7 +29099,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,
@@ -29164,7 +29163,8 @@ const Upload = ({
   isDefaultCustomRatio,
   customPreviewIcon,
   onPreviewIconClick,
-  maxWidthOrHeight
+  maxWidthOrHeight,
+  inputKey
 }) => {
   const {
     t
@@ -29477,6 +29477,9 @@ const Upload = ({
         };
       }
     }
+    if (e.target.value) {
+      e.target.value = null;
+    }
   }
   function handleCrop() {
     if (completedCrop != null && completedCrop.width && completedCrop != null && completedCrop.height && imgRef.current) {
@@ -29612,7 +29615,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 665,
+        lineNumber: 669,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -29622,7 +29625,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 666,
+        lineNumber: 670,
         columnNumber: 9
       }
     }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : t('replaceLabel', 'Ubah Berkas')));
@@ -29637,7 +29640,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 676,
+            lineNumber: 680,
             columnNumber: 16
           }
         });
@@ -29648,7 +29651,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 679,
+          lineNumber: 683,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -29658,7 +29661,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 680,
+          lineNumber: 684,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -29667,7 +29670,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 681,
+          lineNumber: 685,
           columnNumber: 27
         }
       }), !hiddenPreview && /*#__PURE__*/React__default.createElement(Box, {
@@ -29680,7 +29683,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 683,
+          lineNumber: 687,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -29696,7 +29699,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 691,
+          lineNumber: 695,
           columnNumber: 17
         }
       })), /*#__PURE__*/React__default.createElement(Image, {
@@ -29706,7 +29709,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 704,
+          lineNumber: 708,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -29723,7 +29726,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 715,
+            lineNumber: 719,
             columnNumber: 16
           }
         });
@@ -29733,7 +29736,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 718,
+          lineNumber: 722,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -29743,7 +29746,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 719,
+          lineNumber: 723,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -29752,7 +29755,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 720,
+          lineNumber: 724,
           columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -29765,7 +29768,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 721,
+          lineNumber: 725,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -29775,14 +29778,14 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 729,
+          lineNumber: 733,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(FileExtension, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 730,
+          lineNumber: 734,
           columnNumber: 17
         }
       }, ".", item == null || (_item$name = item.name) == null ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default.createElement(Tooltip$1, {
@@ -29790,7 +29793,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 731,
+          lineNumber: 735,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Text, {
@@ -29805,7 +29808,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 732,
+          lineNumber: 736,
           columnNumber: 19
         }
       }, item.name)))), !hiddenPreview && /*#__PURE__*/React__default.createElement(Box, {
@@ -29818,7 +29821,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 748,
+          lineNumber: 752,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -29834,7 +29837,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 756,
+          lineNumber: 760,
           columnNumber: 17
         }
       })), /*#__PURE__*/React__default.createElement(Blank, {
@@ -29842,7 +29845,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 769,
+          lineNumber: 773,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -29857,7 +29860,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 780,
+        lineNumber: 784,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -29871,7 +29874,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 781,
+        lineNumber: 785,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(LoadingBar, {
@@ -29897,7 +29900,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 782,
+        lineNumber: 786,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Text, {
@@ -29905,109 +29908,18 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 795,
+        lineNumber: 799,
         columnNumber: 11
       }
     }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default.createElement(Text, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 796,
+        lineNumber: 800,
         columnNumber: 11
       }
     }, t('uploadingLabel', 'Berkas sedang diunggah'))));
   }
-  function renderUpload() {
-    return /*#__PURE__*/React__default.createElement(FocusArea, {
-      focus: dragActive,
-      css: css,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$9,
-        lineNumber: 804,
-        columnNumber: 7
-      }
-    }, /*#__PURE__*/React__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: 805,
-        columnNumber: 9
-      }
-    }, /*#__PURE__*/React__default.createElement(Input$2, {
-      type: "file",
-      accept: accept,
-      ref: hiddenFileInput,
-      onChange: handleChange,
-      multiple: multiple,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$9,
-        lineNumber: 816,
-        columnNumber: 11
-      }
-    }), /*#__PURE__*/React__default.createElement(Children, {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$9,
-        lineNumber: 817,
-        columnNumber: 11
-      }
-    }, children != null ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$9,
-        lineNumber: 819,
-        columnNumber: 15
-      }
-    }, /*#__PURE__*/React__default.createElement(IconCard, {
-      justify: "center",
-      align: "center",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$9,
-        lineNumber: 820,
-        columnNumber: 17
-      }
-    }, /*#__PURE__*/React__default.createElement(UploadOutline, {
-      color: disabled ? '#C0C4C4' : '#404545',
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$9,
-        lineNumber: 821,
-        columnNumber: 19
-      }
-    })), /*#__PURE__*/React__default.createElement(Text, {
-      css: {
-        margin: '$spacing-04 $spacing-05 0 $spacing-05'
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$9,
-        lineNumber: 823,
-        columnNumber: 17
-      }
-    }, placeholder != null ? placeholder : t('uploadPlaceholder', 'Pilih atau letakkan berkas di sini'))))), error && /*#__PURE__*/React__default.createElement(ErrorMessage, {
-      css: {
-        width: width - 5
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$9,
-        lineNumber: 830,
-        columnNumber: 19
-      }
-    }, error));
-  }
   function renderCropper() {
     return /*#__PURE__*/React__default.createElement(ModalDialog, {
       onOpenChange: () => setCrop(null),
@@ -30015,7 +29927,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 837,
+        lineNumber: 808,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -30023,7 +29935,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 838,
+        lineNumber: 809,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -30031,7 +29943,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 839,
+        lineNumber: 810,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
@@ -30044,7 +29956,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 841,
+        lineNumber: 812,
         columnNumber: 9
       }
     }, cropperTitle || t('cropperTitle', 'Potong Gambar')), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -30057,7 +29969,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 844,
+        lineNumber: 815,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ReactCrop, {
@@ -30068,7 +29980,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 852,
+        lineNumber: 823,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Image, {
@@ -30082,14 +29994,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 853,
+        lineNumber: 824,
         columnNumber: 13
       }
     }))), /*#__PURE__*/React__default.createElement(ModalDialogFooter, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 864,
+        lineNumber: 835,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -30101,14 +30013,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 865,
+        lineNumber: 836,
         columnNumber: 11
       }
     }, hiddenToggleAspect ? /*#__PURE__*/React__default.createElement(Box, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 867,
+        lineNumber: 838,
         columnNumber: 15
       }
     }) : /*#__PURE__*/React__default.createElement(Tooltip$1, {
@@ -30116,7 +30028,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 869,
+        lineNumber: 840,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(ImageOutline, {
@@ -30128,7 +30040,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 870,
+        lineNumber: 841,
         columnNumber: 17
       }
     })), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -30136,7 +30048,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 877,
+        lineNumber: 848,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Button$4, {
@@ -30145,7 +30057,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 878,
+        lineNumber: 849,
         columnNumber: 15
       }
     }, t('label.cancel', 'Batal', {
@@ -30155,7 +30067,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 881,
+        lineNumber: 852,
         columnNumber: 15
       }
     }, t('save', 'Simpan', {
@@ -30172,7 +30084,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 890,
+      lineNumber: 861,
       columnNumber: 5
     }
   }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default.createElement(UploadProgress, {
@@ -30181,10 +30093,99 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 893,
-      columnNumber: 32
+      lineNumber: 865,
+      columnNumber: 9
+    }
+  }) : /*#__PURE__*/React__default.createElement(FocusArea, {
+    focus: dragActive,
+    css: css,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$9,
+      lineNumber: 867,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React__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.createElement(ChildContainer, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$9,
+      lineNumber: 879,
+      columnNumber: 13
+    }
+  }, children || /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$9,
+      lineNumber: 881,
+      columnNumber: 17
+    }
+  }, /*#__PURE__*/React__default.createElement(IconCard, {
+    justify: "center",
+    align: "center",
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$9,
+      lineNumber: 882,
+      columnNumber: 19
     }
-  }) : renderUpload(), showCropper && renderCropper());
+  }, /*#__PURE__*/React__default.createElement(UploadOutline, {
+    color: disabled ? '#C0C4C4' : '#404545',
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$9,
+      lineNumber: 883,
+      columnNumber: 21
+    }
+  })), /*#__PURE__*/React__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.createElement(ErrorMessage, {
+    css: {
+      width: width - 5
+    },
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$9,
+      lineNumber: 892,
+      columnNumber: 21
+    }
+  }, error)), showCropper && renderCropper(), /*#__PURE__*/React__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',

package/index.umd.js

@@ -14626,7 +14626,6 @@
       t,
       ready
     } = reactI18next.useTranslation(['MajooUI/inputSelectCheck', 'translation']);
-    // const t = (key, defaultValue) => defaultValue;
     const [initItem, setInitItems] = React__default["default"].useState(option); //init filter selectedItems on useMultipleSelection
     const [items, setItems] = React__default["default"].useState([]);
     const [selectedValue, setSelectedValue] = React__default["default"].useState([]);
@@ -29516,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',
@@ -29615,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,
@@ -29679,7 +29678,8 @@
     isDefaultCustomRatio,
     customPreviewIcon,
     onPreviewIconClick,
-    maxWidthOrHeight
+    maxWidthOrHeight,
+    inputKey
   }) => {
     const {
       t
@@ -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: 665,
+          lineNumber: 669,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ButtonText, {
@@ -30137,7 +30140,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 666,
+          lineNumber: 670,
           columnNumber: 9
         }
       }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : t('replaceLabel', 'Ubah Berkas')));
@@ -30152,7 +30155,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 676,
+              lineNumber: 680,
               columnNumber: 16
             }
           });
@@ -30163,7 +30166,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 679,
+            lineNumber: 683,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -30173,7 +30176,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 680,
+            lineNumber: 684,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -30182,7 +30185,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 681,
+            lineNumber: 685,
             columnNumber: 27
           }
         }), !hiddenPreview && /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -30195,7 +30198,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 683,
+            lineNumber: 687,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -30211,7 +30214,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 691,
+            lineNumber: 695,
             columnNumber: 17
           }
         })), /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -30221,7 +30224,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 704,
+            lineNumber: 708,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -30238,7 +30241,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 715,
+              lineNumber: 719,
               columnNumber: 16
             }
           });
@@ -30248,7 +30251,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 718,
+            lineNumber: 722,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -30258,7 +30261,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 719,
+            lineNumber: 723,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -30267,7 +30270,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 720,
+            lineNumber: 724,
             columnNumber: 27
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -30280,7 +30283,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 721,
+            lineNumber: 725,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -30290,14 +30293,14 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 729,
+            lineNumber: 733,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(FileExtension, {
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 730,
+            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: 731,
+            lineNumber: 735,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -30320,7 +30323,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 732,
+            lineNumber: 736,
             columnNumber: 19
           }
         }, item.name)))), !hiddenPreview && /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -30333,7 +30336,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 748,
+            lineNumber: 752,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -30349,7 +30352,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 756,
+            lineNumber: 760,
             columnNumber: 17
           }
         })), /*#__PURE__*/React__default["default"].createElement(Blank, {
@@ -30357,7 +30360,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 769,
+            lineNumber: 773,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -30372,7 +30375,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 780,
+          lineNumber: 784,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -30386,7 +30389,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 781,
+          lineNumber: 785,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(LoadingBar, {
@@ -30412,7 +30415,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 782,
+          lineNumber: 786,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -30420,109 +30423,18 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 795,
+          lineNumber: 799,
           columnNumber: 11
         }
       }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default["default"].createElement(Text, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 796,
+          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: 804,
-          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: 805,
-          columnNumber: 9
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(Input$2, {
-        type: "file",
-        accept: accept,
-        ref: hiddenFileInput,
-        onChange: handleChange,
-        multiple: multiple,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$9,
-          lineNumber: 816,
-          columnNumber: 11
-        }
-      }), /*#__PURE__*/React__default["default"].createElement(Children, {
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$9,
-          lineNumber: 817,
-          columnNumber: 11
-        }
-      }, children != null ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$9,
-          lineNumber: 819,
-          columnNumber: 15
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(IconCard, {
-        justify: "center",
-        align: "center",
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$9,
-          lineNumber: 820,
-          columnNumber: 17
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(icons.UploadOutline, {
-        color: disabled ? '#C0C4C4' : '#404545',
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$9,
-          lineNumber: 821,
-          columnNumber: 19
-        }
-      })), /*#__PURE__*/React__default["default"].createElement(Text, {
-        css: {
-          margin: '$spacing-04 $spacing-05 0 $spacing-05'
-        },
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$9,
-          lineNumber: 823,
-          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: 830,
-          columnNumber: 19
-        }
-      }, error));
-    }
     function renderCropper() {
       return /*#__PURE__*/React__default["default"].createElement(ModalDialog, {
         onOpenChange: () => setCrop(null),
@@ -30530,7 +30442,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 837,
+          lineNumber: 808,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -30538,7 +30450,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 838,
+          lineNumber: 809,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -30546,7 +30458,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 839,
+          lineNumber: 810,
           columnNumber: 11
         }
       })), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
@@ -30559,7 +30471,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 841,
+          lineNumber: 812,
           columnNumber: 9
         }
       }, cropperTitle || t('cropperTitle', 'Potong Gambar')), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -30572,7 +30484,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 844,
+          lineNumber: 815,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ReactCrop__default["default"], {
@@ -30583,7 +30495,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 852,
+          lineNumber: 823,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -30597,14 +30509,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 853,
+          lineNumber: 824,
           columnNumber: 13
         }
       }))), /*#__PURE__*/React__default["default"].createElement(ModalDialogFooter, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 864,
+          lineNumber: 835,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -30616,14 +30528,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 865,
+          lineNumber: 836,
           columnNumber: 11
         }
       }, hiddenToggleAspect ? /*#__PURE__*/React__default["default"].createElement(Box, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 867,
+          lineNumber: 838,
           columnNumber: 15
         }
       }) : /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
@@ -30631,7 +30543,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 869,
+          lineNumber: 840,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ImageOutline, {
@@ -30643,7 +30555,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 870,
+          lineNumber: 841,
           columnNumber: 17
         }
       })), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -30651,7 +30563,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 877,
+          lineNumber: 848,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Button$4, {
@@ -30660,7 +30572,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 878,
+          lineNumber: 849,
           columnNumber: 15
         }
       }, t('label.cancel', 'Batal', {
@@ -30670,7 +30582,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 881,
+          lineNumber: 852,
           columnNumber: 15
         }
       }, t('save', 'Simpan', {
@@ -30687,7 +30599,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 890,
+        lineNumber: 861,
         columnNumber: 5
       }
     }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
@@ -30696,10 +30608,99 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 893,
-        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
       }
-    }) : renderUpload(), showCropper && renderCropper());
+    }, /*#__PURE__*/React__default["default"].createElement(icons.UploadOutline, {
+      color: disabled ? '#C0C4C4' : '#404545',
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$9,
+        lineNumber: 883,
+        columnNumber: 21
+      }
+    })), /*#__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',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.61.12-rc.22",
+  "version": "1.61.12-rc.24",
   "peerDependencies": {
     "react": "17.0.2",
     "react-dom": "17.0.2",