@majoo-ui/react 1.57.1 → 1.57.3

package/index.esm.js

@@ -12244,9 +12244,20 @@ function InputResourceList({
       }, {
         children: [jsx(InputCheckbox, {
           label: jsxs(Flex$1, Object.assign({
-            gap: 3
+            gap: 3,
+            align: "center"
           }, {
             children: [jsx(Paragraph, Object.assign({
+              css: {
+                overflowX: 'hidden',
+                textOverflow: 'ellipsis',
+                '@sm': {
+                  maxWidth: resource.variants ? 150 : 200
+                },
+                '@md': {
+                  maxWidth: 'unset'
+                }
+              },
               paragraph: "longContentRegular"
             }, {
               children: resource.label
@@ -17979,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: {
@@ -18063,7 +18075,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 108,
+      lineNumber: 109,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -18072,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, {
@@ -18083,7 +18095,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 118,
+      lineNumber: 119,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(ArrowLeftOutline, {
@@ -18091,7 +18103,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 124,
+      lineNumber: 125,
       columnNumber: 17
     }
   })), /*#__PURE__*/React__default.createElement(PrevNextButton, {
@@ -18102,7 +18114,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 127,
+      lineNumber: 128,
       columnNumber: 13
     }
   }, t('previousButton', 'Sebelumnya'))), generatePages().map((page, index) => {
@@ -18113,7 +18125,7 @@ const PaginationButton = ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 139,
+        lineNumber: 140,
         columnNumber: 13
       }
     }, page);
@@ -18125,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, {
@@ -18136,7 +18148,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 159,
+      lineNumber: 160,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(ArrowRightOutline, {
@@ -18144,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, {
@@ -18157,7 +18169,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 174,
+      lineNumber: 175,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Box, {
@@ -18170,7 +18182,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 182,
+      lineNumber: 183,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(Text$1, {
@@ -18183,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, {
@@ -18210,7 +18222,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 186,
+      lineNumber: 187,
       columnNumber: 13
     }
   }))));
@@ -18807,7 +18819,20 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                             }
                           }
                         }, {
-                          children: renderCell()
+                          children: jsx(Paragraph, Object.assign({
+                            css: {
+                              overflowX: 'hidden',
+                              textOverflow: 'ellipsis',
+                              '@sm': {
+                                maxWidth: 250
+                              },
+                              '@md': {
+                                maxWidth: 'unset'
+                              }
+                            }
+                          }, {
+                            children: renderCell()
+                          }), void 0)
                         }), void 0), jsx(Box, Object.assign({
                           onClick: () => {
                             if (!Object.keys(state.expanded).includes(row.id)) {
@@ -18849,7 +18874,19 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                             color: "secondary"
                           }, {
                             children: typeof cell.column.Header === 'string' ? (_a = cell.column.Header) === null || _a === void 0 ? void 0 : _a.toUpperCase() : cell.render('Header')
-                          }), void 0), cell.render('Cell')]
+                          }), void 0), jsx(Paragraph, Object.assign({
+                            css: {
+                              overflowWrap: 'break-word',
+                              '@sm': {
+                                maxWidth: 200
+                              },
+                              '@md': {
+                                maxWidth: 'unset'
+                              }
+                            }
+                          }, {
+                            children: cell.render('Cell')
+                          }), void 0)]
                         }), `${cell.column.id}-${row.id}`);
                       })
                     }), void 0), actionCells && actionCells.length > 0 && jsx(Flex$1, Object.assign({
@@ -21089,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,
@@ -21105,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, {
@@ -21139,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, {
@@ -21149,7 +21186,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 167,
+      lineNumber: 169,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -21157,7 +21194,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 168,
+      lineNumber: 170,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Flex, {
@@ -21171,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, {
@@ -21179,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({
@@ -21191,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, {
@@ -21199,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({
@@ -21215,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, {
@@ -21223,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({
@@ -21238,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'))))))));
@@ -21275,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({
@@ -21290,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, {
@@ -21305,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,
@@ -21324,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, {
@@ -21358,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, {
@@ -21368,7 +21405,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 268,
+      lineNumber: 272,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -21376,7 +21413,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 269,
+      lineNumber: 273,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Flex, {
@@ -21390,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, {
@@ -21398,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({
@@ -21413,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, {
@@ -21421,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({
@@ -21437,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, {
@@ -21445,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({
@@ -21460,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'))))))));
@@ -21474,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,
@@ -21492,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;
@@ -23790,7 +23831,8 @@ const Upload = ({
   maxSizeMB,
   imageCompression,
   hiddenToggleAspect,
-  hiddenPreview
+  hiddenPreview,
+  fullAspectCrop
 }) => {
   const {
     t
@@ -23806,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);
@@ -23936,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];
@@ -24044,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));
+        };
       }
     }
   }
@@ -24110,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() {
@@ -24121,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) {
@@ -24205,7 +24261,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 599,
+        lineNumber: 611,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -24215,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')));
@@ -24230,7 +24286,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 610,
+            lineNumber: 622,
             columnNumber: 16
           }
         });
@@ -24241,7 +24297,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 613,
+          lineNumber: 625,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -24251,7 +24307,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 614,
+          lineNumber: 626,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -24260,7 +24316,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 615,
+          lineNumber: 627,
           columnNumber: 27
         }
       }), !hiddenPreview && /*#__PURE__*/React__default.createElement(Box, {
@@ -24273,7 +24329,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 617,
+          lineNumber: 629,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -24282,7 +24338,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 625,
+          lineNumber: 637,
           columnNumber: 17
         }
       })), /*#__PURE__*/React__default.createElement(Image, {
@@ -24292,7 +24348,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 628,
+          lineNumber: 640,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -24309,7 +24365,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 639,
+            lineNumber: 651,
             columnNumber: 16
           }
         });
@@ -24319,7 +24375,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 642,
+          lineNumber: 654,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -24329,7 +24385,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 643,
+          lineNumber: 655,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -24338,7 +24394,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 644,
+          lineNumber: 656,
           columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -24351,7 +24407,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 645,
+          lineNumber: 657,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -24361,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, {
@@ -24376,7 +24432,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 655,
+          lineNumber: 667,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Text, {
@@ -24391,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, {
@@ -24404,7 +24460,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 672,
+          lineNumber: 684,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -24413,7 +24469,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 680,
+          lineNumber: 692,
           columnNumber: 17
         }
       })), /*#__PURE__*/React__default.createElement(Blank, {
@@ -24421,7 +24477,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 683,
+          lineNumber: 695,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -24436,7 +24492,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 694,
+        lineNumber: 706,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -24450,7 +24506,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 695,
+        lineNumber: 707,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(LoadingBar, {
@@ -24476,7 +24532,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 696,
+        lineNumber: 708,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Text, {
@@ -24484,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'))));
@@ -24503,7 +24559,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 718,
+        lineNumber: 730,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ContainerUpload, {
@@ -24519,7 +24575,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 719,
+        lineNumber: 731,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Input$2, {
@@ -24531,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, {
@@ -24554,7 +24610,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 734,
+        lineNumber: 746,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(UploadOutline, {
@@ -24562,7 +24618,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 735,
+        lineNumber: 747,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__default.createElement(Text, {
@@ -24572,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, {
@@ -24582,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, {
@@ -24600,7 +24657,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 752,
+        lineNumber: 764,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -24608,7 +24665,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 753,
+        lineNumber: 765,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
@@ -24621,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, {
@@ -24633,7 +24690,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 758,
+        lineNumber: 770,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ReactCrop, {
@@ -24644,7 +24701,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 759,
+        lineNumber: 771,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Image, {
@@ -24658,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, {
@@ -24677,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, {
@@ -24692,7 +24749,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 768,
+        lineNumber: 780,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(ImageOutline, {
@@ -24704,7 +24761,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 769,
+        lineNumber: 781,
         columnNumber: 17
       }
     })), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -24712,7 +24769,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 776,
+        lineNumber: 788,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Button$4, {
@@ -24721,7 +24778,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 777,
+        lineNumber: 789,
         columnNumber: 15
       }
     }, t('label.cancel', 'Batal', {
@@ -24731,7 +24788,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 780,
+        lineNumber: 792,
         columnNumber: 15
       }
     }, t('save', 'Simpan', {
@@ -24748,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, {
@@ -24757,7 +24814,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 792,
+      lineNumber: 804,
       columnNumber: 32
     }
   }) : renderUpload(), showCropper && renderCropper());
@@ -24771,7 +24828,6 @@ Upload.defaultProps = {
   tokenKey: 'Token',
   reqKey: 'file',
   resKey: 'url',
-  ratio: 16 / 9,
   disabled: false,
   maxSizeMB: 1,
   imageCompression: true
@@ -24919,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';