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

package/index.esm.js

@@ -29000,7 +29000,7 @@ var _jsxFileName$9 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/compo
 const Input$2 = styled('input', {
   display: 'none !important'
 });
-const ChildContainer = styled('div', {
+const Children = styled('div', {
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
@@ -29099,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,
@@ -29163,8 +29163,7 @@ const Upload = ({
   isDefaultCustomRatio,
   customPreviewIcon,
   onPreviewIconClick,
-  maxWidthOrHeight,
-  inputKey
+  maxWidthOrHeight
 }) => {
   const {
     t
@@ -29477,9 +29476,6 @@ const Upload = ({
         };
       }
     }
-    if (e.target.value) {
-      e.target.value = null;
-    }
   }
   function handleCrop() {
     if (completedCrop != null && completedCrop.width && completedCrop != null && completedCrop.height && imgRef.current) {
@@ -29615,7 +29611,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 669,
+        lineNumber: 665,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -29625,7 +29621,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 670,
+        lineNumber: 666,
         columnNumber: 9
       }
     }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : t('replaceLabel', 'Ubah Berkas')));
@@ -29640,7 +29636,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 680,
+            lineNumber: 676,
             columnNumber: 16
           }
         });
@@ -29651,7 +29647,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 683,
+          lineNumber: 679,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -29661,7 +29657,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 684,
+          lineNumber: 680,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -29670,7 +29666,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 685,
+          lineNumber: 681,
           columnNumber: 27
         }
       }), !hiddenPreview && /*#__PURE__*/React__default.createElement(Box, {
@@ -29683,7 +29679,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 687,
+          lineNumber: 683,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -29699,7 +29695,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 695,
+          lineNumber: 691,
           columnNumber: 17
         }
       })), /*#__PURE__*/React__default.createElement(Image, {
@@ -29709,7 +29705,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 708,
+          lineNumber: 704,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -29726,7 +29722,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 719,
+            lineNumber: 715,
             columnNumber: 16
           }
         });
@@ -29736,7 +29732,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 722,
+          lineNumber: 718,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -29746,7 +29742,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 723,
+          lineNumber: 719,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -29755,7 +29751,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 724,
+          lineNumber: 720,
           columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -29768,7 +29764,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 725,
+          lineNumber: 721,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -29778,14 +29774,14 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 733,
+          lineNumber: 729,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(FileExtension, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 734,
+          lineNumber: 730,
           columnNumber: 17
         }
       }, ".", item == null || (_item$name = item.name) == null ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default.createElement(Tooltip$1, {
@@ -29793,7 +29789,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 735,
+          lineNumber: 731,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Text, {
@@ -29808,7 +29804,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 736,
+          lineNumber: 732,
           columnNumber: 19
         }
       }, item.name)))), !hiddenPreview && /*#__PURE__*/React__default.createElement(Box, {
@@ -29821,7 +29817,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 752,
+          lineNumber: 748,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -29837,7 +29833,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 760,
+          lineNumber: 756,
           columnNumber: 17
         }
       })), /*#__PURE__*/React__default.createElement(Blank, {
@@ -29845,7 +29841,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 773,
+          lineNumber: 769,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -29860,7 +29856,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 784,
+        lineNumber: 780,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -29874,7 +29870,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 785,
+        lineNumber: 781,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(LoadingBar, {
@@ -29900,7 +29896,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 786,
+        lineNumber: 782,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Text, {
@@ -29908,26 +29904,107 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 799,
+        lineNumber: 795,
         columnNumber: 11
       }
     }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default.createElement(Text, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 800,
+        lineNumber: 796,
         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(Children, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$9,
+        lineNumber: 816,
+        columnNumber: 11
+      }
+    }, children != null ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$9,
+        lineNumber: 818,
+        columnNumber: 15
+      }
+    }, /*#__PURE__*/React__default.createElement(IconCard, {
+      justify: "center",
+      align: "center",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$9,
+        lineNumber: 819,
+        columnNumber: 17
+      }
+    }, /*#__PURE__*/React__default.createElement(UploadOutline, {
+      color: disabled ? '#C0C4C4' : '#404545',
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$9,
+        lineNumber: 820,
+        columnNumber: 19
+      }
+    })), /*#__PURE__*/React__default.createElement(Text, {
+      css: {
+        margin: '$spacing-04 $spacing-05 0 $spacing-05'
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$9,
+        lineNumber: 822,
+        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: 829,
+        columnNumber: 19
+      }
+    }, error));
+  }
   function renderCropper() {
     return /*#__PURE__*/React__default.createElement(ModalDialog, {
-      onOpenChange: () => setCrop(null),
+      onOpenChange: open => {
+        if (!open) setCrop(null);
+      },
       isMobile: isMobile,
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 808,
+        lineNumber: 836,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -29935,7 +30012,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 809,
+        lineNumber: 842,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -29943,7 +30020,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 810,
+        lineNumber: 843,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
@@ -29956,7 +30033,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 812,
+        lineNumber: 845,
         columnNumber: 9
       }
     }, cropperTitle || t('cropperTitle', 'Potong Gambar')), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -29969,7 +30046,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 815,
+        lineNumber: 848,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ReactCrop, {
@@ -29980,7 +30057,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 823,
+        lineNumber: 856,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Image, {
@@ -29994,14 +30071,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 824,
+        lineNumber: 857,
         columnNumber: 13
       }
     }))), /*#__PURE__*/React__default.createElement(ModalDialogFooter, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 835,
+        lineNumber: 868,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -30013,14 +30090,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 836,
+        lineNumber: 869,
         columnNumber: 11
       }
     }, hiddenToggleAspect ? /*#__PURE__*/React__default.createElement(Box, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 838,
+        lineNumber: 871,
         columnNumber: 15
       }
     }) : /*#__PURE__*/React__default.createElement(Tooltip$1, {
@@ -30028,7 +30105,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 840,
+        lineNumber: 873,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(ImageOutline, {
@@ -30040,7 +30117,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 841,
+        lineNumber: 874,
         columnNumber: 17
       }
     })), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -30048,7 +30125,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 848,
+        lineNumber: 881,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Button$4, {
@@ -30057,7 +30134,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 849,
+        lineNumber: 882,
         columnNumber: 15
       }
     }, t('label.cancel', 'Batal', {
@@ -30067,7 +30144,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 852,
+        lineNumber: 885,
         columnNumber: 15
       }
     }, t('save', 'Simpan', {
@@ -30084,7 +30161,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 861,
+      lineNumber: 894,
       columnNumber: 5
     }
   }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default.createElement(UploadProgress, {
@@ -30093,87 +30170,10 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      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
-    }
-  }, /*#__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
+      lineNumber: 897,
+      columnNumber: 32
     }
-  }, error)), showCropper && renderCropper(), /*#__PURE__*/React__default.createElement(Input$2, {
-    key: inputKey,
+  }) : renderUpload(), showCropper && renderCropper(), /*#__PURE__*/React__default.createElement(Input$2, {
     type: "file",
     accept: accept,
     ref: hiddenFileInput,
@@ -30182,7 +30182,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 896,
+      lineNumber: 899,
       columnNumber: 7
     }
   }));

package/index.umd.js

@@ -29515,7 +29515,7 @@
   const Input$2 = styled('input', {
     display: 'none !important'
   });
-  const ChildContainer = styled('div', {
+  const Children = 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,
@@ -29678,8 +29678,7 @@
     isDefaultCustomRatio,
     customPreviewIcon,
     onPreviewIconClick,
-    maxWidthOrHeight,
-    inputKey
+    maxWidthOrHeight
   }) => {
     const {
       t
@@ -29992,9 +29991,6 @@
           };
         }
       }
-      if (e.target.value) {
-        e.target.value = null;
-      }
     }
     function handleCrop() {
       if (completedCrop != null && completedCrop.width && completedCrop != null && completedCrop.height && imgRef.current) {
@@ -30130,7 +30126,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 669,
+          lineNumber: 665,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ButtonText, {
@@ -30140,7 +30136,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 670,
+          lineNumber: 666,
           columnNumber: 9
         }
       }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : t('replaceLabel', 'Ubah Berkas')));
@@ -30155,7 +30151,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 680,
+              lineNumber: 676,
               columnNumber: 16
             }
           });
@@ -30166,7 +30162,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 683,
+            lineNumber: 679,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -30176,7 +30172,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 684,
+            lineNumber: 680,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -30185,7 +30181,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 685,
+            lineNumber: 681,
             columnNumber: 27
           }
         }), !hiddenPreview && /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -30198,7 +30194,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 687,
+            lineNumber: 683,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -30214,7 +30210,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 695,
+            lineNumber: 691,
             columnNumber: 17
           }
         })), /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -30224,7 +30220,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 708,
+            lineNumber: 704,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -30241,7 +30237,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 719,
+              lineNumber: 715,
               columnNumber: 16
             }
           });
@@ -30251,7 +30247,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 722,
+            lineNumber: 718,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -30261,7 +30257,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 723,
+            lineNumber: 719,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -30270,7 +30266,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 724,
+            lineNumber: 720,
             columnNumber: 27
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -30283,7 +30279,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 725,
+            lineNumber: 721,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -30293,14 +30289,14 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 733,
+            lineNumber: 729,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(FileExtension, {
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 734,
+            lineNumber: 730,
             columnNumber: 17
           }
         }, ".", item == null || (_item$name = item.name) == null ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
@@ -30308,7 +30304,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 735,
+            lineNumber: 731,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -30323,7 +30319,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 736,
+            lineNumber: 732,
             columnNumber: 19
           }
         }, item.name)))), !hiddenPreview && /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -30336,7 +30332,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 752,
+            lineNumber: 748,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -30352,7 +30348,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 760,
+            lineNumber: 756,
             columnNumber: 17
           }
         })), /*#__PURE__*/React__default["default"].createElement(Blank, {
@@ -30360,7 +30356,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 773,
+            lineNumber: 769,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -30375,7 +30371,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 784,
+          lineNumber: 780,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -30389,7 +30385,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 785,
+          lineNumber: 781,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(LoadingBar, {
@@ -30415,7 +30411,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 786,
+          lineNumber: 782,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -30423,26 +30419,107 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 799,
+          lineNumber: 795,
           columnNumber: 11
         }
       }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default["default"].createElement(Text, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 800,
+          lineNumber: 796,
           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(Children, {
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$9,
+          lineNumber: 816,
+          columnNumber: 11
+        }
+      }, children != null ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$9,
+          lineNumber: 818,
+          columnNumber: 15
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(IconCard, {
+        justify: "center",
+        align: "center",
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$9,
+          lineNumber: 819,
+          columnNumber: 17
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(icons.UploadOutline, {
+        color: disabled ? '#C0C4C4' : '#404545',
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$9,
+          lineNumber: 820,
+          columnNumber: 19
+        }
+      })), /*#__PURE__*/React__default["default"].createElement(Text, {
+        css: {
+          margin: '$spacing-04 $spacing-05 0 $spacing-05'
+        },
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$9,
+          lineNumber: 822,
+          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: 829,
+          columnNumber: 19
+        }
+      }, error));
+    }
     function renderCropper() {
       return /*#__PURE__*/React__default["default"].createElement(ModalDialog, {
-        onOpenChange: () => setCrop(null),
+        onOpenChange: open => {
+          if (!open) setCrop(null);
+        },
         isMobile: isMobile,
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 808,
+          lineNumber: 836,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -30450,7 +30527,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 809,
+          lineNumber: 842,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -30458,7 +30535,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 810,
+          lineNumber: 843,
           columnNumber: 11
         }
       })), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
@@ -30471,7 +30548,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 812,
+          lineNumber: 845,
           columnNumber: 9
         }
       }, cropperTitle || t('cropperTitle', 'Potong Gambar')), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -30484,7 +30561,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 815,
+          lineNumber: 848,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ReactCrop__default["default"], {
@@ -30495,7 +30572,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 823,
+          lineNumber: 856,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -30509,14 +30586,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 824,
+          lineNumber: 857,
           columnNumber: 13
         }
       }))), /*#__PURE__*/React__default["default"].createElement(ModalDialogFooter, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 835,
+          lineNumber: 868,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -30528,14 +30605,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 836,
+          lineNumber: 869,
           columnNumber: 11
         }
       }, hiddenToggleAspect ? /*#__PURE__*/React__default["default"].createElement(Box, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 838,
+          lineNumber: 871,
           columnNumber: 15
         }
       }) : /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
@@ -30543,7 +30620,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 840,
+          lineNumber: 873,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ImageOutline, {
@@ -30555,7 +30632,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 841,
+          lineNumber: 874,
           columnNumber: 17
         }
       })), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -30563,7 +30640,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 848,
+          lineNumber: 881,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Button$4, {
@@ -30572,7 +30649,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 849,
+          lineNumber: 882,
           columnNumber: 15
         }
       }, t('label.cancel', 'Batal', {
@@ -30582,7 +30659,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 852,
+          lineNumber: 885,
           columnNumber: 15
         }
       }, t('save', 'Simpan', {
@@ -30599,7 +30676,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 861,
+        lineNumber: 894,
         columnNumber: 5
       }
     }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
@@ -30608,87 +30685,10 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        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
-      }
-    })), /*#__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
+        lineNumber: 897,
+        columnNumber: 32
       }
-    }, error)), showCropper && renderCropper(), /*#__PURE__*/React__default["default"].createElement(Input$2, {
-      key: inputKey,
+    }) : renderUpload(), showCropper && renderCropper(), /*#__PURE__*/React__default["default"].createElement(Input$2, {
       type: "file",
       accept: accept,
       ref: hiddenFileInput,
@@ -30697,7 +30697,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 896,
+        lineNumber: 899,
         columnNumber: 7
       }
     }));

package/package.json

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