@majoo-ui/react 1.57.2 → 1.57.3

package/index.esm.js

@@ -17990,6 +17990,7 @@ const PageButton = _ref => {
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   return /*#__PURE__*/React__default.createElement(Button$4, _extends({
+    type: "button",
     onClick: onClick,
     buttonType: !isActive ? 'ghost' : 'primary',
     css: {
@@ -18074,7 +18075,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 108,
+      lineNumber: 109,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -18083,7 +18084,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 114,
+      lineNumber: 115,
       columnNumber: 7
     }
   }, (currentPage > 1 || totalPages === 1) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !isLg && /*#__PURE__*/React__default.createElement(IconButton, {
@@ -18094,7 +18095,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 118,
+      lineNumber: 119,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(ArrowLeftOutline, {
@@ -18102,7 +18103,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 124,
+      lineNumber: 125,
       columnNumber: 17
     }
   })), /*#__PURE__*/React__default.createElement(PrevNextButton, {
@@ -18113,7 +18114,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 127,
+      lineNumber: 128,
       columnNumber: 13
     }
   }, t('previousButton', 'Sebelumnya'))), generatePages().map((page, index) => {
@@ -18124,7 +18125,7 @@ const PaginationButton = ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 139,
+        lineNumber: 140,
         columnNumber: 13
       }
     }, page);
@@ -18136,7 +18137,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 150,
+      lineNumber: 151,
       columnNumber: 13
     }
   }, t('nextButton', 'Selanjutnya')), !isLg && /*#__PURE__*/React__default.createElement(IconButton, {
@@ -18147,7 +18148,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 159,
+      lineNumber: 160,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(ArrowRightOutline, {
@@ -18155,7 +18156,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 165,
+      lineNumber: 166,
       columnNumber: 17
     }
   })))), !hideInputPageSection && totalPages > 1 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -18168,7 +18169,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 174,
+      lineNumber: 175,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Box, {
@@ -18181,7 +18182,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 182,
+      lineNumber: 183,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(Text$1, {
@@ -18194,7 +18195,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 183,
+      lineNumber: 184,
       columnNumber: 13
     }
   }, t('gotoPageText', 'Ke Halaman')), /*#__PURE__*/React__default.createElement(InputNumber, {
@@ -18221,7 +18222,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 186,
+      lineNumber: 187,
       columnNumber: 13
     }
   }))));
@@ -21125,13 +21126,13 @@ const TemplateAlertFunction = props => {
       lineNumber: 154,
       columnNumber: 11
     }
-  }, props.title), /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
+  }, props.title), !props.hideCloseButton && /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
     asChild: true,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 155,
-      columnNumber: 11
+      lineNumber: 156,
+      columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
     onClick: buttonClose,
@@ -21141,30 +21142,30 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 156,
-      columnNumber: 13
+      lineNumber: 157,
+      columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(CloseOutline, {
     size: 22,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 157,
-      columnNumber: 15
+      lineNumber: 158,
+      columnNumber: 17
     }
   })))), /*#__PURE__*/React__default.createElement(Separator$2, {
     orientation: "horizontal",
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 161,
+      lineNumber: 163,
       columnNumber: 9
     }
   }), /*#__PURE__*/React__default.createElement(StyledDescription$1, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 162,
+      lineNumber: 164,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -21175,7 +21176,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 163,
+      lineNumber: 165,
       columnNumber: 11
     }
   }, props.description)), /*#__PURE__*/React__default.createElement(Box, {
@@ -21185,7 +21186,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 167,
+      lineNumber: 169,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -21193,7 +21194,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 168,
+      lineNumber: 170,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Flex, {
@@ -21207,7 +21208,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 169,
+      lineNumber: 171,
       columnNumber: 11
     }
   }, props.singleButton ? /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -21215,7 +21216,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 171,
+      lineNumber: 173,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(Button$4, _extends({
@@ -21227,7 +21228,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 172,
+      lineNumber: 174,
       columnNumber: 17
     }
   }), props.labelConfirm ? props.labelConfirm : t('label.continue', 'Ya, Lanjutkan'))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
@@ -21235,7 +21236,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 184,
+      lineNumber: 186,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$4, _extends({
@@ -21251,7 +21252,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 185,
+      lineNumber: 187,
       columnNumber: 19
     }
   }), props.labelCancel ? props.labelCancel : t('label.cancel', 'Batal'))), /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -21259,7 +21260,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 199,
+      lineNumber: 201,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$4, _extends({
@@ -21274,7 +21275,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 200,
+      lineNumber: 202,
       columnNumber: 19
     }
   }), props.labelConfirm ? props.labelConfirm : t('label.continue', 'Ya, Lanjutkan'))))))));
@@ -21311,7 +21312,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 244,
+      lineNumber: 246,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Content$1, _extends({
@@ -21326,14 +21327,14 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 245,
+      lineNumber: 247,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(StyledTitle, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 254,
+      lineNumber: 256,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Heading, {
@@ -21341,16 +21342,16 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 255,
+      lineNumber: 257,
       columnNumber: 11
     }
-  }, props.title), /*#__PURE__*/React__default.createElement(AlertDialogCancel, {
+  }, props.title), !props.hideCloseButton && /*#__PURE__*/React__default.createElement(AlertDialogCancel, {
     asChild: true,
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 256,
-      columnNumber: 11
+      lineNumber: 259,
+      columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
     onClick: props.onClose || props.onCancel,
@@ -21360,30 +21361,30 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 257,
-      columnNumber: 13
+      lineNumber: 260,
+      columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(CloseOutline, {
     size: 22,
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 258,
-      columnNumber: 15
+      lineNumber: 261,
+      columnNumber: 17
     }
   })))), /*#__PURE__*/React__default.createElement(Separator$2, {
     orientation: "horizontal",
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 262,
+      lineNumber: 266,
       columnNumber: 9
     }
   }), /*#__PURE__*/React__default.createElement(StyledDescription$1, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 263,
+      lineNumber: 267,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -21394,7 +21395,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 264,
+      lineNumber: 268,
       columnNumber: 11
     }
   }, props.description)), /*#__PURE__*/React__default.createElement(Box, {
@@ -21404,7 +21405,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 268,
+      lineNumber: 272,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -21412,7 +21413,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 269,
+      lineNumber: 273,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Flex, {
@@ -21426,7 +21427,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 270,
+      lineNumber: 274,
       columnNumber: 11
     }
   }, props.singleButton ? /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -21434,7 +21435,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 272,
+      lineNumber: 276,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(Button$4, _extends({
@@ -21449,7 +21450,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 273,
+      lineNumber: 277,
       columnNumber: 17
     }
   }), props.labelConfirm ? props.labelConfirm : t('label.continue', 'Ya, Lanjutkan'))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
@@ -21457,7 +21458,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 286,
+      lineNumber: 290,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$4, _extends({
@@ -21473,7 +21474,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 287,
+      lineNumber: 291,
       columnNumber: 19
     }
   }), props.labelCancel ? props.labelCancel : t('label.cancel', 'Batal'))), /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -21481,7 +21482,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 301,
+      lineNumber: 305,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$4, _extends({
@@ -21496,7 +21497,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 302,
+      lineNumber: 306,
       columnNumber: 19
     }
   }), props.labelConfirm ? props.labelConfirm : t('label.continue', 'Ya, Lanjutkan'))))))));
@@ -21510,14 +21511,16 @@ TemplateAlertFunction.propTypes = {
   onConfirm: PropTypes.func,
   disabledButton: PropTypes.bool,
   actionButtonProps: PropTypes.object,
-  cancelButtonProps: PropTypes.object
+  cancelButtonProps: PropTypes.object,
+  hideCloseButton: PropTypes.bool
 };
 TemplateAlertFunction.defaultProps = {
   dialogType: 'primary',
   btnSize: 'md',
   onCancel: () => {},
   onConfirm: () => {},
-  disabledButton: false
+  disabledButton: false,
+  hideCloseButton: false
 };
 AlertDialog.propTypes = {
   title: PropTypes.string.isRequired,
@@ -21528,14 +21531,16 @@ AlertDialog.propTypes = {
   onConfirm: PropTypes.func,
   disabledButton: PropTypes.bool,
   actionButtonProps: PropTypes.object,
-  cancelButtonProps: PropTypes.object
+  cancelButtonProps: PropTypes.object,
+  hideCloseButton: PropTypes.bool
 };
 AlertDialog.defaultProps = {
   dialogType: 'primary',
   btnSize: 'md',
   onCancel: () => {},
   onConfirm: () => {},
-  disabledButton: false
+  disabledButton: false,
+  hideCloseButton: false
 };
 const AlertDialogRoot = ADialog.Root;
 const AlertDialogTrigger = ADialog.Trigger;
@@ -23826,7 +23831,8 @@ const Upload = ({
   maxSizeMB,
   imageCompression,
   hiddenToggleAspect,
-  hiddenPreview
+  hiddenPreview,
+  fullAspectCrop
 }) => {
   const {
     t
@@ -23842,8 +23848,9 @@ const Upload = ({
   const [error, setError] = useState(null);
   const [crop, setCrop] = useState(null);
   const [completedCrop, setCompletedCrop] = useState(null);
-  const [aspect, setAspect] = useState(ratio);
+  const [aspect, setAspect] = useState(1);
   const [isLoading, setIsLoading] = useState(false);
+  const [cropperImgRatio, setCropperImgRatio] = useState(null);
   useEffect(() => {
     if (loading) {
       setIsLoading(true);
@@ -23972,15 +23979,6 @@ const Upload = ({
   }
   function toggleModal() {
     modalTrigger.current.click();
-    setTimeout(() => {
-      if (imgRef.current) {
-        const {
-          width,
-          height
-        } = imgRef.current;
-        setCrop(centerAspectCrop(width, height, ratio));
-      }
-    }, 300);
   }
   function handleUpload(files) {
     const arrFile = [...fileList];
@@ -24080,31 +24078,52 @@ const Upload = ({
       if (isFile || !showCropper) {
         handleUpload(files);
       } else {
-        if (onBeforeCrop) {
-          var _files$, _files$2;
-          // program to get the dimensions of an image
-          const img = document.createElement('img');
-          img.src = URL.createObjectURL(files[0]);
-          img.size = files === null || files === void 0 ? void 0 : (_files$ = files[0]) === null || _files$ === void 0 ? void 0 : _files$.size;
-          img.type = files === null || files === void 0 ? void 0 : (_files$2 = files[0]) === null || _files$2 === void 0 ? void 0 : _files$2.type;
-          img.onload = () => {
+        var _files$, _files$2;
+        // program to get the dimensions of an image
+        const img = document.createElement('img');
+        img.src = URL.createObjectURL(files[0]);
+        img.size = files === null || files === void 0 ? void 0 : (_files$ = files[0]) === null || _files$ === void 0 ? void 0 : _files$.size;
+        img.type = files === null || files === void 0 ? void 0 : (_files$2 = files[0]) === null || _files$2 === void 0 ? void 0 : _files$2.type;
+        img.onload = () => {
+          const imgRatio = img.width / img.height;
+          setAspect(ratio || imgRatio);
+          setCropperImgRatio(imgRatio);
+          if (onBeforeCrop) {
             var _onBeforeCrop, _onBeforeCrop$then;
             onBeforeCrop === null || onBeforeCrop === void 0 ? void 0 : (_onBeforeCrop = onBeforeCrop(img)) === null || _onBeforeCrop === void 0 ? void 0 : (_onBeforeCrop$then = _onBeforeCrop.then(() => {
               setError(null);
               toggleModal();
+              setTimeout(() => {
+                if (imgRef.current) {
+                  const {
+                    width,
+                    height
+                  } = imgRef.current;
+                  setCrop(centerAspectCrop(width, height, ratio || imgRatio));
+                }
+              }, 300);
               setFileState(files[0]);
               setPreviewImage(URL.createObjectURL(files[0]));
             })) === null || _onBeforeCrop$then === void 0 ? void 0 : _onBeforeCrop$then.catch(error => setError(error === null || error === void 0 ? void 0 : error.message));
-          };
-          img.onerror = error => {
-            var _onBeforeCrop2, _onBeforeCrop2$then;
-            onBeforeCrop === null || onBeforeCrop === void 0 ? void 0 : (_onBeforeCrop2 = onBeforeCrop(img, error)) === null || _onBeforeCrop2 === void 0 ? void 0 : (_onBeforeCrop2$then = _onBeforeCrop2.then(() => setError(null))) === null || _onBeforeCrop2$then === void 0 ? void 0 : _onBeforeCrop2$then.catch(error => setError(error === null || error === void 0 ? void 0 : error.message));
-          };
-        } else {
-          toggleModal();
-          setFileState(files[0]);
-          setPreviewImage(URL.createObjectURL(files[0]));
-        }
+          } else {
+            toggleModal();
+            setTimeout(() => {
+              if (imgRef.current) {
+                const {
+                  width,
+                  height
+                } = imgRef.current;
+                setCrop(centerAspectCrop(width, height, ratio || imgRatio));
+              }
+            }, 300);
+            setFileState(files[0]);
+            setPreviewImage(URL.createObjectURL(files[0]));
+          }
+        };
+        img.onerror = error => {
+          var _onBeforeCrop2, _onBeforeCrop2$then;
+          onBeforeCrop === null || onBeforeCrop === void 0 ? void 0 : (_onBeforeCrop2 = onBeforeCrop(img, error)) === null || _onBeforeCrop2 === void 0 ? void 0 : (_onBeforeCrop2$then = _onBeforeCrop2.then(() => setError(null))) === null || _onBeforeCrop2$then === void 0 ? void 0 : _onBeforeCrop2$then.catch(error => setError(error === null || error === void 0 ? void 0 : error.message));
+        };
       }
     }
   }
@@ -24146,7 +24165,8 @@ const Upload = ({
   function centerAspectCrop(mediaWidth, mediaHeight, aspect) {
     return centerCrop(makeAspectCrop({
       unit: '%',
-      width: 90
+      width: fullAspectCrop ? 100 : 90,
+      height: fullAspectCrop ? 100 : 90
     }, aspect, mediaWidth, mediaHeight), mediaWidth, mediaHeight);
   }
   function toggleAspect() {
@@ -24157,8 +24177,8 @@ const Upload = ({
         width,
         height
       } = imgRef.current;
-      setAspect(ratio);
-      setCrop(centerAspectCrop(width, height, ratio));
+      setAspect(ratio || cropperImgRatio);
+      setCrop(centerAspectCrop(width, height, ratio || cropperImgRatio));
     }
   }
   function handleClose(file) {
@@ -24241,7 +24261,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 599,
+        lineNumber: 611,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -24251,7 +24271,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 600,
+        lineNumber: 612,
         columnNumber: 9
       }
     }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : t('replaceLabel', 'Ubah Berkas')));
@@ -24266,7 +24286,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 610,
+            lineNumber: 622,
             columnNumber: 16
           }
         });
@@ -24277,7 +24297,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 613,
+          lineNumber: 625,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -24287,7 +24307,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 614,
+          lineNumber: 626,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -24296,7 +24316,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 615,
+          lineNumber: 627,
           columnNumber: 27
         }
       }), !hiddenPreview && /*#__PURE__*/React__default.createElement(Box, {
@@ -24309,7 +24329,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 617,
+          lineNumber: 629,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -24318,7 +24338,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 625,
+          lineNumber: 637,
           columnNumber: 17
         }
       })), /*#__PURE__*/React__default.createElement(Image, {
@@ -24328,7 +24348,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 628,
+          lineNumber: 640,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -24345,7 +24365,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 639,
+            lineNumber: 651,
             columnNumber: 16
           }
         });
@@ -24355,7 +24375,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 642,
+          lineNumber: 654,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -24365,7 +24385,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 643,
+          lineNumber: 655,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -24374,7 +24394,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 644,
+          lineNumber: 656,
           columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -24387,7 +24407,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 645,
+          lineNumber: 657,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -24397,14 +24417,14 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 653,
+          lineNumber: 665,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(FileExtension, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 654,
+          lineNumber: 666,
           columnNumber: 17
         }
       }, ".", item === null || item === void 0 ? void 0 : (_item$name = item.name) === null || _item$name === void 0 ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default.createElement(Tooltip$1, {
@@ -24412,7 +24432,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 655,
+          lineNumber: 667,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Text, {
@@ -24427,7 +24447,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 656,
+          lineNumber: 668,
           columnNumber: 19
         }
       }, item.name)))), !hiddenPreview && /*#__PURE__*/React__default.createElement(Box, {
@@ -24440,7 +24460,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 672,
+          lineNumber: 684,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -24449,7 +24469,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 680,
+          lineNumber: 692,
           columnNumber: 17
         }
       })), /*#__PURE__*/React__default.createElement(Blank, {
@@ -24457,7 +24477,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 683,
+          lineNumber: 695,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -24472,7 +24492,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 694,
+        lineNumber: 706,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -24486,7 +24506,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 695,
+        lineNumber: 707,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(LoadingBar, {
@@ -24512,7 +24532,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 696,
+        lineNumber: 708,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Text, {
@@ -24520,14 +24540,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 709,
+        lineNumber: 721,
         columnNumber: 11
       }
     }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default.createElement(Text, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 710,
+        lineNumber: 722,
         columnNumber: 11
       }
     }, t('uploadingLabel', 'Berkas sedang diunggah'))));
@@ -24539,7 +24559,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 718,
+        lineNumber: 730,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ContainerUpload, {
@@ -24555,7 +24575,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 719,
+        lineNumber: 731,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Input$2, {
@@ -24567,21 +24587,21 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 730,
+        lineNumber: 742,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Children, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 731,
+        lineNumber: 743,
         columnNumber: 11
       }
     }, children != null ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 733,
+        lineNumber: 745,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(IconCard, {
@@ -24590,7 +24610,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 734,
+        lineNumber: 746,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(UploadOutline, {
@@ -24598,7 +24618,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 735,
+        lineNumber: 747,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__default.createElement(Text, {
@@ -24608,7 +24628,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 737,
+        lineNumber: 749,
         columnNumber: 17
       }
     }, placeholder != null ? placeholder : t('uploadPlaceholder', 'Pilih atau letakkan berkas di sini'))))), error && /*#__PURE__*/React__default.createElement(ErrorMessage, {
@@ -24618,17 +24638,18 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 744,
+        lineNumber: 756,
         columnNumber: 19
       }
     }, error));
   }
   function renderCropper() {
     return /*#__PURE__*/React__default.createElement(ModalDialog, {
+      onOpenChange: () => setCrop(null),
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 751,
+        lineNumber: 763,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -24636,7 +24657,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 752,
+        lineNumber: 764,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -24644,7 +24665,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 753,
+        lineNumber: 765,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
@@ -24657,7 +24678,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 755,
+        lineNumber: 767,
         columnNumber: 9
       }
     }, cropperTitle || t('cropperTitle', 'Potong Gambar')), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -24669,7 +24690,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 758,
+        lineNumber: 770,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ReactCrop, {
@@ -24680,7 +24701,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 759,
+        lineNumber: 771,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Image, {
@@ -24694,14 +24715,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 760,
+        lineNumber: 772,
         columnNumber: 13
       }
     }))), /*#__PURE__*/React__default.createElement(ModalDialogFooter, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 763,
+        lineNumber: 775,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -24713,14 +24734,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 764,
+        lineNumber: 776,
         columnNumber: 11
       }
     }, hiddenToggleAspect ? /*#__PURE__*/React__default.createElement(Box, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 766,
+        lineNumber: 778,
         columnNumber: 15
       }
     }) : /*#__PURE__*/React__default.createElement(Tooltip$1, {
@@ -24728,7 +24749,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 768,
+        lineNumber: 780,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(ImageOutline, {
@@ -24740,7 +24761,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 769,
+        lineNumber: 781,
         columnNumber: 17
       }
     })), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -24748,7 +24769,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 776,
+        lineNumber: 788,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Button$4, {
@@ -24757,7 +24778,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 777,
+        lineNumber: 789,
         columnNumber: 15
       }
     }, t('label.cancel', 'Batal', {
@@ -24767,7 +24788,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 780,
+        lineNumber: 792,
         columnNumber: 15
       }
     }, t('save', 'Simpan', {
@@ -24784,7 +24805,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 789,
+      lineNumber: 801,
       columnNumber: 5
     }
   }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default.createElement(UploadProgress, {
@@ -24793,7 +24814,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 792,
+      lineNumber: 804,
       columnNumber: 32
     }
   }) : renderUpload(), showCropper && renderCropper());
@@ -24807,7 +24828,6 @@ Upload.defaultProps = {
   tokenKey: 'Token',
   reqKey: 'file',
   resKey: 'url',
-  ratio: 16 / 9,
   disabled: false,
   maxSizeMB: 1,
   imageCompression: true
@@ -24955,7 +24975,11 @@ Upload.propTypes = {
   /**
    Hidden preview icon in upload.
    */
-  hiddenPreview: PropTypes.bool
+  hiddenPreview: PropTypes.bool,
+  /**
+   Auto full aspect ratio cropper.
+   */
+  fullAspectCrop: PropTypes.bool
 };
 Upload.displayName = 'Upload';