@majoo-ui/react 1.57.1 → 1.57.3

package/index.umd.js

@@ -12397,9 +12397,20 @@
         }, {
           children: [jsxRuntime.jsx(InputCheckbox, {
             label: jsxRuntime.jsxs(Flex$1, __assign({
-              gap: 3
+              gap: 3,
+              align: "center"
             }, {
               children: [jsxRuntime.jsx(Paragraph, __assign({
+                css: {
+                  overflowX: 'hidden',
+                  textOverflow: 'ellipsis',
+                  '@sm': {
+                    maxWidth: resource.variants ? 150 : 200
+                  },
+                  '@md': {
+                    maxWidth: 'unset'
+                  }
+                },
                 paragraph: "longContentRegular"
               }, {
                 children: resource.label
@@ -18262,6 +18273,7 @@
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
     return /*#__PURE__*/React__default["default"].createElement(Button$4, _extends({
+      type: "button",
       onClick: onClick,
       buttonType: !isActive ? 'ghost' : 'primary',
       css: {
@@ -18346,7 +18358,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 108,
+        lineNumber: 109,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -18355,7 +18367,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 114,
+        lineNumber: 115,
         columnNumber: 7
       }
     }, (currentPage > 1 || totalPages === 1) && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !isLg && /*#__PURE__*/React__default["default"].createElement(IconButton, {
@@ -18366,7 +18378,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 118,
+        lineNumber: 119,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowLeftOutline, {
@@ -18374,7 +18386,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 124,
+        lineNumber: 125,
         columnNumber: 17
       }
     })), /*#__PURE__*/React__default["default"].createElement(PrevNextButton, {
@@ -18385,7 +18397,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 127,
+        lineNumber: 128,
         columnNumber: 13
       }
     }, t('previousButton', 'Sebelumnya'))), generatePages().map((page, index) => {
@@ -18396,7 +18408,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$k,
-          lineNumber: 139,
+          lineNumber: 140,
           columnNumber: 13
         }
       }, page);
@@ -18408,7 +18420,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 150,
+        lineNumber: 151,
         columnNumber: 13
       }
     }, t('nextButton', 'Selanjutnya')), !isLg && /*#__PURE__*/React__default["default"].createElement(IconButton, {
@@ -18419,7 +18431,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 159,
+        lineNumber: 160,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowRightOutline, {
@@ -18427,7 +18439,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 165,
+        lineNumber: 166,
         columnNumber: 17
       }
     })))), !hideInputPageSection && totalPages > 1 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -18440,7 +18452,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 174,
+        lineNumber: 175,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -18453,7 +18465,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 182,
+        lineNumber: 183,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
@@ -18466,7 +18478,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 183,
+        lineNumber: 184,
         columnNumber: 13
       }
     }, t('gotoPageText', 'Ke Halaman')), /*#__PURE__*/React__default["default"].createElement(InputNumber, {
@@ -18493,7 +18505,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 186,
+        lineNumber: 187,
         columnNumber: 13
       }
     }))));
@@ -19101,7 +19113,20 @@
                               }
                             }
                           }, {
-                            children: renderCell()
+                            children: jsxRuntime.jsx(Paragraph, __assign({
+                              css: {
+                                overflowX: 'hidden',
+                                textOverflow: 'ellipsis',
+                                '@sm': {
+                                  maxWidth: 250
+                                },
+                                '@md': {
+                                  maxWidth: 'unset'
+                                }
+                              }
+                            }, {
+                              children: renderCell()
+                            }), void 0)
                           }), void 0), jsxRuntime.jsx(Box, __assign({
                             onClick: function () {
                               if (!Object.keys(state.expanded).includes(row.id)) {
@@ -19145,7 +19170,19 @@
                               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), jsxRuntime.jsx(Paragraph, __assign({
+                              css: {
+                                overflowWrap: 'break-word',
+                                '@sm': {
+                                  maxWidth: 200
+                                },
+                                '@md': {
+                                  maxWidth: 'unset'
+                                }
+                              }
+                            }, {
+                              children: cell.render('Cell')
+                            }), void 0)]
                           }), "".concat(cell.column.id, "-").concat(row.id));
                         })
                       }), void 0), actionCells && actionCells.length > 0 && jsxRuntime.jsx(Flex$1, __assign({
@@ -21471,13 +21508,13 @@
         lineNumber: 154,
         columnNumber: 11
       }
-    }, props.title), /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
+    }, props.title), !props.hideCloseButton && /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
       asChild: true,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 155,
-        columnNumber: 11
+        lineNumber: 156,
+        columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box, {
       onClick: buttonClose,
@@ -21487,30 +21524,30 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 156,
-        columnNumber: 13
+        lineNumber: 157,
+        columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
       size: 22,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 157,
-        columnNumber: 15
+        lineNumber: 158,
+        columnNumber: 17
       }
     })))), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
       orientation: "horizontal",
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 161,
+        lineNumber: 163,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDescription$1, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 162,
+        lineNumber: 164,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -21521,7 +21558,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 163,
+        lineNumber: 165,
         columnNumber: 11
       }
     }, props.description)), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -21531,7 +21568,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 167,
+        lineNumber: 169,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -21539,7 +21576,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 168,
+        lineNumber: 170,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Flex, {
@@ -21553,7 +21590,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 169,
+        lineNumber: 171,
         columnNumber: 11
       }
     }, props.singleButton ? /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -21561,7 +21598,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 171,
+        lineNumber: 173,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$4, _extends({
@@ -21573,7 +21610,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 172,
+        lineNumber: 174,
         columnNumber: 17
       }
     }), props.labelConfirm ? props.labelConfirm : t('label.continue', 'Ya, Lanjutkan'))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
@@ -21581,7 +21618,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 184,
+        lineNumber: 186,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$4, _extends({
@@ -21597,7 +21634,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 185,
+        lineNumber: 187,
         columnNumber: 19
       }
     }), props.labelCancel ? props.labelCancel : t('label.cancel', 'Batal'))), /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -21605,7 +21642,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 199,
+        lineNumber: 201,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$4, _extends({
@@ -21620,7 +21657,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 200,
+        lineNumber: 202,
         columnNumber: 19
       }
     }), props.labelConfirm ? props.labelConfirm : t('label.continue', 'Ya, Lanjutkan'))))))));
@@ -21657,7 +21694,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 244,
+        lineNumber: 246,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Content$1, _extends({
@@ -21672,14 +21709,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 245,
+        lineNumber: 247,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledTitle, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 254,
+        lineNumber: 256,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Heading, {
@@ -21687,16 +21724,16 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 255,
+        lineNumber: 257,
         columnNumber: 11
       }
-    }, props.title), /*#__PURE__*/React__default["default"].createElement(AlertDialogCancel, {
+    }, props.title), !props.hideCloseButton && /*#__PURE__*/React__default["default"].createElement(AlertDialogCancel, {
       asChild: true,
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 256,
-        columnNumber: 11
+        lineNumber: 259,
+        columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box, {
       onClick: props.onClose || props.onCancel,
@@ -21706,30 +21743,30 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 257,
-        columnNumber: 13
+        lineNumber: 260,
+        columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
       size: 22,
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 258,
-        columnNumber: 15
+        lineNumber: 261,
+        columnNumber: 17
       }
     })))), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
       orientation: "horizontal",
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 262,
+        lineNumber: 266,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDescription$1, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 263,
+        lineNumber: 267,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -21740,7 +21777,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 264,
+        lineNumber: 268,
         columnNumber: 11
       }
     }, props.description)), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -21750,7 +21787,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 268,
+        lineNumber: 272,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -21758,7 +21795,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 269,
+        lineNumber: 273,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Flex, {
@@ -21772,7 +21809,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 270,
+        lineNumber: 274,
         columnNumber: 11
       }
     }, props.singleButton ? /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -21780,7 +21817,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 272,
+        lineNumber: 276,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$4, _extends({
@@ -21795,7 +21832,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 273,
+        lineNumber: 277,
         columnNumber: 17
       }
     }), props.labelConfirm ? props.labelConfirm : t('label.continue', 'Ya, Lanjutkan'))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
@@ -21803,7 +21840,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 286,
+        lineNumber: 290,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$4, _extends({
@@ -21819,7 +21856,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 287,
+        lineNumber: 291,
         columnNumber: 19
       }
     }), props.labelCancel ? props.labelCancel : t('label.cancel', 'Batal'))), /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -21827,7 +21864,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 301,
+        lineNumber: 305,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$4, _extends({
@@ -21842,7 +21879,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 302,
+        lineNumber: 306,
         columnNumber: 19
       }
     }), props.labelConfirm ? props.labelConfirm : t('label.continue', 'Ya, Lanjutkan'))))))));
@@ -21856,14 +21893,16 @@
     onConfirm: PropTypes__default["default"].func,
     disabledButton: PropTypes__default["default"].bool,
     actionButtonProps: PropTypes__default["default"].object,
-    cancelButtonProps: PropTypes__default["default"].object
+    cancelButtonProps: PropTypes__default["default"].object,
+    hideCloseButton: PropTypes__default["default"].bool
   };
   TemplateAlertFunction.defaultProps = {
     dialogType: 'primary',
     btnSize: 'md',
     onCancel: () => {},
     onConfirm: () => {},
-    disabledButton: false
+    disabledButton: false,
+    hideCloseButton: false
   };
   AlertDialog.propTypes = {
     title: PropTypes__default["default"].string.isRequired,
@@ -21874,14 +21913,16 @@
     onConfirm: PropTypes__default["default"].func,
     disabledButton: PropTypes__default["default"].bool,
     actionButtonProps: PropTypes__default["default"].object,
-    cancelButtonProps: PropTypes__default["default"].object
+    cancelButtonProps: PropTypes__default["default"].object,
+    hideCloseButton: PropTypes__default["default"].bool
   };
   AlertDialog.defaultProps = {
     dialogType: 'primary',
     btnSize: 'md',
     onCancel: () => {},
     onConfirm: () => {},
-    disabledButton: false
+    disabledButton: false,
+    hideCloseButton: false
   };
   const AlertDialogRoot = ADialog__namespace.Root;
   const AlertDialogTrigger = ADialog__namespace.Trigger;
@@ -24195,7 +24236,8 @@
     maxSizeMB,
     imageCompression,
     hiddenToggleAspect,
-    hiddenPreview
+    hiddenPreview,
+    fullAspectCrop
   }) => {
     const {
       t
@@ -24211,8 +24253,9 @@
     const [error, setError] = React.useState(null);
     const [crop, setCrop] = React.useState(null);
     const [completedCrop, setCompletedCrop] = React.useState(null);
-    const [aspect, setAspect] = React.useState(ratio);
+    const [aspect, setAspect] = React.useState(1);
     const [isLoading, setIsLoading] = React.useState(false);
+    const [cropperImgRatio, setCropperImgRatio] = React.useState(null);
     React.useEffect(() => {
       if (loading) {
         setIsLoading(true);
@@ -24341,15 +24384,6 @@
     }
     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];
@@ -24449,31 +24483,52 @@
         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));
+          };
         }
       }
     }
@@ -24515,7 +24570,8 @@
     function centerAspectCrop(mediaWidth, mediaHeight, aspect) {
       return ReactCrop.centerCrop(ReactCrop.makeAspectCrop({
         unit: '%',
-        width: 90
+        width: fullAspectCrop ? 100 : 90,
+        height: fullAspectCrop ? 100 : 90
       }, aspect, mediaWidth, mediaHeight), mediaWidth, mediaHeight);
     }
     function toggleAspect() {
@@ -24526,8 +24582,8 @@
           width,
           height
         } = imgRef.current;
-        setAspect(ratio);
-        setCrop(centerAspectCrop(width, height, ratio));
+        setAspect(ratio || cropperImgRatio);
+        setCrop(centerAspectCrop(width, height, ratio || cropperImgRatio));
       }
     }
     function handleClose(file) {
@@ -24610,7 +24666,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 599,
+          lineNumber: 611,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ButtonText, {
@@ -24620,7 +24676,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 600,
+          lineNumber: 612,
           columnNumber: 9
         }
       }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : t('replaceLabel', 'Ubah Berkas')));
@@ -24635,7 +24691,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 610,
+              lineNumber: 622,
               columnNumber: 16
             }
           });
@@ -24646,7 +24702,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 613,
+            lineNumber: 625,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -24656,7 +24712,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 614,
+            lineNumber: 626,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -24665,7 +24721,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 615,
+            lineNumber: 627,
             columnNumber: 27
           }
         }), !hiddenPreview && /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -24678,7 +24734,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 617,
+            lineNumber: 629,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -24687,7 +24743,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 625,
+            lineNumber: 637,
             columnNumber: 17
           }
         })), /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -24697,7 +24753,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 628,
+            lineNumber: 640,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -24714,7 +24770,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 639,
+              lineNumber: 651,
               columnNumber: 16
             }
           });
@@ -24724,7 +24780,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 642,
+            lineNumber: 654,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -24734,7 +24790,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 643,
+            lineNumber: 655,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -24743,7 +24799,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 644,
+            lineNumber: 656,
             columnNumber: 27
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -24756,7 +24812,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 645,
+            lineNumber: 657,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -24766,14 +24822,14 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 653,
+            lineNumber: 665,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["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["default"].createElement(Tooltip$1, {
@@ -24781,7 +24837,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 655,
+            lineNumber: 667,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -24796,7 +24852,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 656,
+            lineNumber: 668,
             columnNumber: 19
           }
         }, item.name)))), !hiddenPreview && /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -24809,7 +24865,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 672,
+            lineNumber: 684,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -24818,7 +24874,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 680,
+            lineNumber: 692,
             columnNumber: 17
           }
         })), /*#__PURE__*/React__default["default"].createElement(Blank, {
@@ -24826,7 +24882,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 683,
+            lineNumber: 695,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -24841,7 +24897,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 694,
+          lineNumber: 706,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -24855,7 +24911,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 695,
+          lineNumber: 707,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(LoadingBar, {
@@ -24881,7 +24937,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 696,
+          lineNumber: 708,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -24889,14 +24945,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 709,
+          lineNumber: 721,
           columnNumber: 11
         }
       }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default["default"].createElement(Text, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 710,
+          lineNumber: 722,
           columnNumber: 11
         }
       }, t('uploadingLabel', 'Berkas sedang diunggah'))));
@@ -24908,7 +24964,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 718,
+          lineNumber: 730,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ContainerUpload, {
@@ -24924,7 +24980,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 719,
+          lineNumber: 731,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Input$2, {
@@ -24936,21 +24992,21 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 730,
+          lineNumber: 742,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Children, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 731,
+          lineNumber: 743,
           columnNumber: 11
         }
       }, children != null ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 733,
+          lineNumber: 745,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconCard, {
@@ -24959,7 +25015,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 734,
+          lineNumber: 746,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.UploadOutline, {
@@ -24967,7 +25023,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 735,
+          lineNumber: 747,
           columnNumber: 19
         }
       })), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -24977,7 +25033,7 @@
         __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["default"].createElement(ErrorMessage, {
@@ -24987,17 +25043,18 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 744,
+          lineNumber: 756,
           columnNumber: 19
         }
       }, error));
     }
     function renderCropper() {
       return /*#__PURE__*/React__default["default"].createElement(ModalDialog, {
+        onOpenChange: () => setCrop(null),
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 751,
+          lineNumber: 763,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -25005,7 +25062,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 752,
+          lineNumber: 764,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -25013,7 +25070,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 753,
+          lineNumber: 765,
           columnNumber: 11
         }
       })), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
@@ -25026,7 +25083,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 755,
+          lineNumber: 767,
           columnNumber: 9
         }
       }, cropperTitle || t('cropperTitle', 'Potong Gambar')), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -25038,7 +25095,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 758,
+          lineNumber: 770,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ReactCrop__default["default"], {
@@ -25049,7 +25106,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 759,
+          lineNumber: 771,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -25063,14 +25120,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 760,
+          lineNumber: 772,
           columnNumber: 13
         }
       }))), /*#__PURE__*/React__default["default"].createElement(ModalDialogFooter, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 763,
+          lineNumber: 775,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -25082,14 +25139,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 764,
+          lineNumber: 776,
           columnNumber: 11
         }
       }, hiddenToggleAspect ? /*#__PURE__*/React__default["default"].createElement(Box, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 766,
+          lineNumber: 778,
           columnNumber: 15
         }
       }) : /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
@@ -25097,7 +25154,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 768,
+          lineNumber: 780,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ImageOutline, {
@@ -25109,7 +25166,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 769,
+          lineNumber: 781,
           columnNumber: 17
         }
       })), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -25117,7 +25174,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 776,
+          lineNumber: 788,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Button$4, {
@@ -25126,7 +25183,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 777,
+          lineNumber: 789,
           columnNumber: 15
         }
       }, t('label.cancel', 'Batal', {
@@ -25136,7 +25193,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 780,
+          lineNumber: 792,
           columnNumber: 15
         }
       }, t('save', 'Simpan', {
@@ -25153,7 +25210,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 789,
+        lineNumber: 801,
         columnNumber: 5
       }
     }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
@@ -25162,7 +25219,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 792,
+        lineNumber: 804,
         columnNumber: 32
       }
     }) : renderUpload(), showCropper && renderCropper());
@@ -25176,7 +25233,6 @@
     tokenKey: 'Token',
     reqKey: 'file',
     resKey: 'url',
-    ratio: 16 / 9,
     disabled: false,
     maxSizeMB: 1,
     imageCompression: true
@@ -25324,7 +25380,11 @@
     /**
      Hidden preview icon in upload.
      */
-    hiddenPreview: PropTypes__default["default"].bool
+    hiddenPreview: PropTypes__default["default"].bool,
+    /**
+     Auto full aspect ratio cropper.
+     */
+    fullAspectCrop: PropTypes__default["default"].bool
   };
   Upload.displayName = 'Upload';