@majoo-ui/react 1.61.12-rc.15 → 1.61.12-rc.16

package/index.esm.js

@@ -28915,9 +28915,7 @@ function imgPreview(image, crop, scale = 1, rotate = 0, ratio, type) {
 
 const _excluded = ["customPreviewIcon"];
 var _jsxFileName$9 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/upload/Upload.js";
-const Input$2 = styled('input', {
-  display: 'none !important'
-});
+const Input$2 = styled('input', {});
 const Children = styled('div', {
   display: 'flex',
   justifyContent: 'center',
@@ -29007,17 +29005,17 @@ const IconStateFull = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 119,
+      lineNumber: 117,
       columnNumber: 5
     }
   })) : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 126,
+      lineNumber: 124,
       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,
@@ -29036,7 +29034,7 @@ const IconStateFull = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 145,
+      lineNumber: 143,
       columnNumber: 9
     }
   })));
@@ -29100,6 +29098,7 @@ const Upload = ({
   const [aspect, setAspect] = useState(isDefaultCustomRatio ? 0 : 1);
   const [isLoading, setIsLoading] = useState(false);
   const [cropperImgRatio, setCropperImgRatio] = useState(null);
+  const [fileValue, setFileValue] = useState('');
   const isMobile = useMediaQuery('(max-width: 767px)');
   useEffect(() => {
     if (loading) {
@@ -29891,12 +29890,14 @@ const Upload = ({
       type: "file",
       accept: accept,
       ref: hiddenFileInput,
-      onChange: handleChange,
       multiple: multiple,
       onClick: e => {
         // Force reset on click to handle edge cases
         e.target.value = '';
+        setFileValue('');
       },
+      value: fileValue,
+      onChange: handleChange,
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
@@ -29907,14 +29908,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 851,
+        lineNumber: 853,
         columnNumber: 11
       }
     }, children != null ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 853,
+        lineNumber: 855,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(IconCard, {
@@ -29923,7 +29924,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 854,
+        lineNumber: 856,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(UploadOutline, {
@@ -29931,7 +29932,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 855,
+        lineNumber: 857,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__default.createElement(Text, {
@@ -29941,7 +29942,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 857,
+        lineNumber: 859,
         columnNumber: 17
       }
     }, placeholder != null ? placeholder : t('uploadPlaceholder', 'Pilih atau letakkan berkas di sini'))))), error && /*#__PURE__*/React__default.createElement(ErrorMessage, {
@@ -29951,7 +29952,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 864,
+        lineNumber: 866,
         columnNumber: 19
       }
     }, error));
@@ -29963,7 +29964,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 871,
+        lineNumber: 873,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -29971,7 +29972,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 872,
+        lineNumber: 874,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -29979,7 +29980,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 873,
+        lineNumber: 875,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
@@ -29992,7 +29993,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 875,
+        lineNumber: 877,
         columnNumber: 9
       }
     }, cropperTitle || t('cropperTitle', 'Potong Gambar')), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -30005,7 +30006,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 878,
+        lineNumber: 880,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ReactCrop, {
@@ -30016,7 +30017,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 886,
+        lineNumber: 888,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Image, {
@@ -30030,14 +30031,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 887,
+        lineNumber: 889,
         columnNumber: 13
       }
     }))), /*#__PURE__*/React__default.createElement(ModalDialogFooter, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 898,
+        lineNumber: 900,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -30049,14 +30050,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 899,
+        lineNumber: 901,
         columnNumber: 11
       }
     }, hiddenToggleAspect ? /*#__PURE__*/React__default.createElement(Box, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 901,
+        lineNumber: 903,
         columnNumber: 15
       }
     }) : /*#__PURE__*/React__default.createElement(Tooltip$1, {
@@ -30064,7 +30065,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 903,
+        lineNumber: 905,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(ImageOutline, {
@@ -30076,7 +30077,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 904,
+        lineNumber: 906,
         columnNumber: 17
       }
     })), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -30084,7 +30085,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 911,
+        lineNumber: 913,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Button$4, {
@@ -30093,7 +30094,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 912,
+        lineNumber: 914,
         columnNumber: 15
       }
     }, t('label.cancel', 'Batal', {
@@ -30103,7 +30104,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 915,
+        lineNumber: 917,
         columnNumber: 15
       }
     }, t('save', 'Simpan', {
@@ -30120,7 +30121,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 924,
+      lineNumber: 926,
       columnNumber: 5
     }
   }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default.createElement(UploadProgress, {
@@ -30129,7 +30130,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 927,
+      lineNumber: 929,
       columnNumber: 32
     }
   }) : renderUpload(), showCropper && renderCropper());

package/index.umd.js

@@ -29428,9 +29428,7 @@
 
   const _excluded = ["customPreviewIcon"];
   var _jsxFileName$9 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/upload/Upload.js";
-  const Input$2 = styled('input', {
-    display: 'none !important'
-  });
+  const Input$2 = styled('input', {});
   const Children = styled('div', {
     display: 'flex',
     justifyContent: 'center',
@@ -29520,17 +29518,17 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 119,
+        lineNumber: 117,
         columnNumber: 5
       }
     })) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 126,
+        lineNumber: 124,
         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,
@@ -29549,7 +29547,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 145,
+        lineNumber: 143,
         columnNumber: 9
       }
     })));
@@ -29613,6 +29611,7 @@
     const [aspect, setAspect] = React.useState(isDefaultCustomRatio ? 0 : 1);
     const [isLoading, setIsLoading] = React.useState(false);
     const [cropperImgRatio, setCropperImgRatio] = React.useState(null);
+    const [fileValue, setFileValue] = React.useState('');
     const isMobile = useMediaQuery('(max-width: 767px)');
     React.useEffect(() => {
       if (loading) {
@@ -30404,12 +30403,14 @@
         type: "file",
         accept: accept,
         ref: hiddenFileInput,
-        onChange: handleChange,
         multiple: multiple,
         onClick: e => {
           // Force reset on click to handle edge cases
           e.target.value = '';
+          setFileValue('');
         },
+        value: fileValue,
+        onChange: handleChange,
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
@@ -30420,14 +30421,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 851,
+          lineNumber: 853,
           columnNumber: 11
         }
       }, children != null ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 853,
+          lineNumber: 855,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconCard, {
@@ -30436,7 +30437,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 854,
+          lineNumber: 856,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.UploadOutline, {
@@ -30444,7 +30445,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 855,
+          lineNumber: 857,
           columnNumber: 19
         }
       })), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -30454,7 +30455,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 857,
+          lineNumber: 859,
           columnNumber: 17
         }
       }, placeholder != null ? placeholder : t('uploadPlaceholder', 'Pilih atau letakkan berkas di sini'))))), error && /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
@@ -30464,7 +30465,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 864,
+          lineNumber: 866,
           columnNumber: 19
         }
       }, error));
@@ -30476,7 +30477,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 871,
+          lineNumber: 873,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -30484,7 +30485,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 872,
+          lineNumber: 874,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -30492,7 +30493,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 873,
+          lineNumber: 875,
           columnNumber: 11
         }
       })), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
@@ -30505,7 +30506,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 875,
+          lineNumber: 877,
           columnNumber: 9
         }
       }, cropperTitle || t('cropperTitle', 'Potong Gambar')), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -30518,7 +30519,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 878,
+          lineNumber: 880,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ReactCrop__default["default"], {
@@ -30529,7 +30530,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 886,
+          lineNumber: 888,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -30543,14 +30544,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 887,
+          lineNumber: 889,
           columnNumber: 13
         }
       }))), /*#__PURE__*/React__default["default"].createElement(ModalDialogFooter, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 898,
+          lineNumber: 900,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -30562,14 +30563,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 899,
+          lineNumber: 901,
           columnNumber: 11
         }
       }, hiddenToggleAspect ? /*#__PURE__*/React__default["default"].createElement(Box, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 901,
+          lineNumber: 903,
           columnNumber: 15
         }
       }) : /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
@@ -30577,7 +30578,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 903,
+          lineNumber: 905,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ImageOutline, {
@@ -30589,7 +30590,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 904,
+          lineNumber: 906,
           columnNumber: 17
         }
       })), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -30597,7 +30598,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 911,
+          lineNumber: 913,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Button$4, {
@@ -30606,7 +30607,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 912,
+          lineNumber: 914,
           columnNumber: 15
         }
       }, t('label.cancel', 'Batal', {
@@ -30616,7 +30617,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 915,
+          lineNumber: 917,
           columnNumber: 15
         }
       }, t('save', 'Simpan', {
@@ -30633,7 +30634,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 924,
+        lineNumber: 926,
         columnNumber: 5
       }
     }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
@@ -30642,7 +30643,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 927,
+        lineNumber: 929,
         columnNumber: 32
       }
     }) : renderUpload(), showCropper && renderCropper());

package/package.json

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