@majoo-ui/react 1.49.0 → 1.49.1

package/components/upload/utils/imgPreview.d.ts

@@ -1,2 +1,2 @@
 import { PixelCrop } from 'react-image-crop';
-export declare function imgPreview(image: HTMLImageElement, crop: PixelCrop, scale?: number, rotate?: number): Promise<unknown>;
+export declare function imgPreview(image: HTMLImageElement, crop: PixelCrop, scale: number | undefined, rotate: number | undefined, ratio: any): Promise<unknown>;

package/index.esm.js

@@ -8452,7 +8452,7 @@ function InputSelect(_a) {
           readOnly: readOnly
         }, {
           children: jsx(CaretDownOutline, {
-            color: iconColor
+            color: readOnly ? colors$4.gray300 : iconColor
           }, void 0)
         }), void 0);
       };
@@ -14694,7 +14694,9 @@ const NativeTimePicker = ({
   onChange,
   defaultValue,
   value,
-  disabled
+  disabled,
+  minDate,
+  maxDate
 }) => {
   const [date, setDate] = useState(value ? value : defaultValue ? defaultValue : moment());
   const format = 'HH:mm';
@@ -14710,13 +14712,29 @@ const NativeTimePicker = ({
 
   function handleUp(type) {
     if (!disabled) {
-      type === 'hour' ? setNewDate(moment(date).add(1, 'hours')) : setNewDate(moment(date).add(1, 'minutes'));
+      if (type === 'hour') {
+        if (!maxDate || moment(date).add(1, 'hours') <= moment(maxDate)) {
+          setNewDate(moment(date).add(1, 'hours'));
+        }
+      } else {
+        if (!maxDate || moment(date).add(1, 'minutes') <= moment(maxDate)) {
+          setNewDate(moment(date).add(1, 'minutes'));
+        }
+      }
     }
   }
 
   function handleDown(type) {
     if (!disabled) {
-      type === 'hour' ? setNewDate(moment(date).subtract(1, 'hours')) : setNewDate(moment(date).subtract(1, 'minutes'));
+      if (type === 'hour') {
+        if (!minDate || moment(date).subtract(1, 'hours') >= moment(minDate)) {
+          setNewDate(moment(date).subtract(1, 'hours'));
+        }
+      } else {
+        if (!minDate || moment(date).subtract(1, 'minutes') >= moment(minDate)) {
+          setNewDate(moment(date).subtract(1, 'minutes'));
+        }
+      }
     }
   }
 
@@ -14731,7 +14749,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 142,
+      lineNumber: 158,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -14740,7 +14758,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 143,
+      lineNumber: 159,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(IconStateFull$1, {
@@ -14750,7 +14768,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 144,
+      lineNumber: 160,
       columnNumber: 9
     }
   }), /*#__PURE__*/React__default.createElement(IconStateFull$1, {
@@ -14760,7 +14778,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 145,
+      lineNumber: 161,
       columnNumber: 9
     }
   })), /*#__PURE__*/React__default.createElement(Input$3, {
@@ -14771,7 +14789,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 147,
+      lineNumber: 163,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Time, {
@@ -14779,7 +14797,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 148,
+      lineNumber: 164,
       columnNumber: 7
     }
   }, moment(date).format(format)), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -14788,7 +14806,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 149,
+      lineNumber: 165,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(IconStateFull$1, {
@@ -14798,7 +14816,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 150,
+      lineNumber: 166,
       columnNumber: 9
     }
   }), /*#__PURE__*/React__default.createElement(IconStateFull$1, {
@@ -14808,7 +14826,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 151,
+      lineNumber: 167,
       columnNumber: 9
     }
   })));
@@ -14832,7 +14850,17 @@ NativeTimePicker.propTypes = {
   /**
    Time picker value, support moment format.
   */
-  value: PropTypes.instanceOf(Date)
+  value: PropTypes.instanceOf(Date),
+
+  /**
+    Specify the minimum date.
+   */
+  minDate: PropTypes.instanceOf(Date),
+
+  /**
+       Specify the maximum date.
+      */
+  maxDate: PropTypes.instanceOf(Date)
 };
 const TimePicker = ({
   size,
@@ -14840,7 +14868,9 @@ const TimePicker = ({
   defaultValue,
   value,
   disabled,
-  css
+  css,
+  minDate,
+  maxDate
 }) => {
   return /*#__PURE__*/React__default.createElement(Container$6, {
     size: size,
@@ -14853,7 +14883,7 @@ const TimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 178,
+      lineNumber: 202,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(NativeTimePicker, {
@@ -14862,10 +14892,12 @@ const TimePicker = ({
     onChange: onChange,
     defaultValue: defaultValue,
     value: value,
+    minDate: minDate,
+    maxDate: maxDate,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 179,
+      lineNumber: 203,
       columnNumber: 7
     }
   }));
@@ -14900,7 +14932,17 @@ TimePicker.propTypes = {
   /**
    Disabled state.
   */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+
+  /**
+    Specify the minimum date.
+   */
+  minDate: PropTypes.instanceOf(Date),
+
+  /**
+     Specify the maximum date.
+    */
+  maxDate: PropTypes.instanceOf(Date)
 };
 NativeTimePicker.displayName = 'NativeTimePicker';
 
@@ -14919,7 +14961,9 @@ function InputTimePicker({
   placeholder,
   placement,
   css,
-  disabled
+  disabled,
+  minDate,
+  maxDate
 }) {
   const [openPicker, setOpenPicker] = useState(false);
   const isMobile = useMediaQuery(`(max-width: 480px)`);
@@ -14937,7 +14981,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 29,
+      lineNumber: 40,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(InputLeftElement, {
@@ -14945,14 +14989,14 @@ function InputTimePicker({
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 30,
+        lineNumber: 41,
         columnNumber: 35
       }
     }),
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 30,
+      lineNumber: 41,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(InputText, {
@@ -14964,7 +15008,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 31,
+      lineNumber: 42,
       columnNumber: 7
     }
   }));
@@ -14975,10 +15019,12 @@ function InputTimePicker({
     defaultValue: defaultValue,
     value: value,
     onChange: onChange,
+    minDate: minDate,
+    maxDate: maxDate,
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 42,
+      lineNumber: 53,
       columnNumber: 5
     }
   });
@@ -14990,7 +15036,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 46,
+      lineNumber: 65,
       columnNumber: 5
     }
   }, disabled ? /*#__PURE__*/React__default.createElement(Box, {
@@ -14998,14 +15044,14 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 48,
+      lineNumber: 67,
       columnNumber: 9
     }
   }, renderInputGroup()) : /*#__PURE__*/React__default.createElement(PopoverTrigger, {
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 50,
+      lineNumber: 69,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -15013,14 +15059,14 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 51,
+      lineNumber: 70,
       columnNumber: 11
     }
   }, renderInputGroup())), /*#__PURE__*/React__default.createElement(PopoverContent, {
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 54,
+      lineNumber: 73,
       columnNumber: 7
     }
   }, renderTimePicker())) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
@@ -15028,7 +15074,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 58,
+      lineNumber: 77,
       columnNumber: 7
     }
   }, renderInputGroup()), /*#__PURE__*/React__default.createElement(Drawer, {
@@ -15038,7 +15084,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 59,
+      lineNumber: 78,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(DrawerContent, {
@@ -15049,7 +15095,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 60,
+      lineNumber: 79,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -15061,7 +15107,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 66,
+      lineNumber: 85,
       columnNumber: 11
     }
   }, renderTimePicker()))));
@@ -15109,7 +15155,17 @@ InputTimePicker.propTypes = {
   /**
    Placement popover input time picker.
   */
-  placement: PropTypes.string
+  placement: PropTypes.string,
+
+  /**
+    Specify the minimum date.
+   */
+  minDate: PropTypes.instanceOf(Date),
+
+  /**
+       Specify the maximum date.
+      */
+  maxDate: PropTypes.instanceOf(Date)
 };
 InputTimePicker.displayName = 'InputTimePicker';
 
@@ -15174,6 +15230,8 @@ const CalendarPicker = _a => {
       children: jsx(NativeTimePicker, {
         size: "lg",
         value: dateValue ? moment(dateValue) : moment(),
+        minDate: minDate,
+        maxDate: maxDate,
         onChange: date => {
           setDateValue(new Date(date));
         }
@@ -18495,7 +18553,7 @@ const TemplateAlertFunction = props => {
     size: "sm",
     onClick: buttonCancel,
     css: {
-      color: props.dialogType === 'negative' && '$gray900 !important',
+      color: props.dialogType === 'negative' && !(props != null && props.disabledButton) && '$gray900 !important',
       flex: props.isMobile && 1
     },
     buttonType: "ghost",
@@ -18512,7 +18570,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 182,
+      lineNumber: 185,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$2, _extends({
@@ -18527,7 +18585,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 183,
+      lineNumber: 186,
       columnNumber: 19
     }
   }), props.labelConfirm ? props.labelConfirm : 'Confirm')))))));
@@ -18552,7 +18610,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 214,
+      lineNumber: 217,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Content$1, _extends({}, props, {
@@ -18565,14 +18623,14 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 215,
+      lineNumber: 218,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(StyledTitle, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 223,
+      lineNumber: 226,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Heading, {
@@ -18580,7 +18638,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 224,
+      lineNumber: 227,
       columnNumber: 11
     }
   }, props.title), /*#__PURE__*/React__default.createElement(AlertDialogCancel, {
@@ -18588,7 +18646,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 225,
+      lineNumber: 228,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -18599,7 +18657,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 226,
+      lineNumber: 229,
       columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(CloseOutline, {
@@ -18607,7 +18665,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 227,
+      lineNumber: 230,
       columnNumber: 15
     }
   })))), /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -18615,14 +18673,14 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 231,
+      lineNumber: 234,
       columnNumber: 9
     }
   }), /*#__PURE__*/React__default.createElement(StyledDescription$1, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 232,
+      lineNumber: 235,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -18632,7 +18690,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 233,
+      lineNumber: 236,
       columnNumber: 11
     }
   }, props.description)), /*#__PURE__*/React__default.createElement(Box, {
@@ -18642,7 +18700,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 235,
+      lineNumber: 238,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -18650,7 +18708,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 236,
+      lineNumber: 239,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Flex, {
@@ -18664,7 +18722,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 237,
+      lineNumber: 240,
       columnNumber: 11
     }
   }, props.singleButton ? /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -18672,7 +18730,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 239,
+      lineNumber: 242,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(Button$2, _extends({
@@ -18687,7 +18745,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 240,
+      lineNumber: 243,
       columnNumber: 17
     }
   }), props.labelConfirm ? props.labelConfirm : 'Confirm')) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
@@ -18695,14 +18753,14 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 253,
+      lineNumber: 256,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$2, _extends({
     size: "sm",
     onClick: props.onCancel,
     css: {
-      color: props.dialogType === 'negative' && '$gray900 !important',
+      color: props.dialogType === 'negative' && !(props != null && props.disabledButton) && '$gray900 !important',
       flex: props.isMobile && 1
     },
     buttonType: "ghost",
@@ -18711,7 +18769,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 254,
+      lineNumber: 257,
       columnNumber: 19
     }
   }), props.labelCancel ? props.labelCancel : 'Cancel')), /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -18719,7 +18777,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 265,
+      lineNumber: 271,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$2, _extends({
@@ -18734,7 +18792,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 266,
+      lineNumber: 272,
       columnNumber: 19
     }
   }), props.labelConfirm ? props.labelConfirm : 'Confirm')))))));
@@ -20822,10 +20880,12 @@ function toBlob(canvas) {
   });
 }
 
-function imgPreview(image, crop, scale = 1, rotate = 0) {
+function imgPreview(image, crop, scale = 1, rotate = 0, ratio) {
   return __awaiter(this, void 0, void 0, function* () {
-    crop.height = Math.ceil(crop.height);
-    crop.width = Math.ceil(crop.width);
+    if (ratio === 1) {
+      crop.width = crop.height;
+    }
+
     const canvas = document.createElement('canvas');
     canvasPreview(image, canvas, crop, scale, rotate);
     const blob = yield toBlob(canvas);
@@ -21288,7 +21348,7 @@ const Upload = ({
 
   function handleCrop() {
     if (completedCrop != null && completedCrop.width && completedCrop != null && completedCrop.height && imgRef.current) {
-      imgPreview(imgRef.current, completedCrop).then(blob => {
+      imgPreview(imgRef.current, completedCrop, 1, 0, ratio).then(blob => {
         const file = new File([blob], fileState == null ? void 0 : fileState.name, {
           type: blob.type
         });

package/index.umd.js

@@ -8586,7 +8586,7 @@
             readOnly: readOnly
           }, {
             children: jsxRuntime.jsx(icons.CaretDownOutline, {
-              color: iconColor
+              color: readOnly ? colors$4.gray300 : iconColor
             }, void 0)
           }), void 0);
         };
@@ -14939,7 +14939,9 @@
     onChange,
     defaultValue,
     value,
-    disabled
+    disabled,
+    minDate,
+    maxDate
   }) => {
     const [date, setDate] = React.useState(value ? value : defaultValue ? defaultValue : moment__default["default"]());
     const format = 'HH:mm';
@@ -14955,13 +14957,29 @@
 
     function handleUp(type) {
       if (!disabled) {
-        type === 'hour' ? setNewDate(moment__default["default"](date).add(1, 'hours')) : setNewDate(moment__default["default"](date).add(1, 'minutes'));
+        if (type === 'hour') {
+          if (!maxDate || moment__default["default"](date).add(1, 'hours') <= moment__default["default"](maxDate)) {
+            setNewDate(moment__default["default"](date).add(1, 'hours'));
+          }
+        } else {
+          if (!maxDate || moment__default["default"](date).add(1, 'minutes') <= moment__default["default"](maxDate)) {
+            setNewDate(moment__default["default"](date).add(1, 'minutes'));
+          }
+        }
       }
     }
 
     function handleDown(type) {
       if (!disabled) {
-        type === 'hour' ? setNewDate(moment__default["default"](date).subtract(1, 'hours')) : setNewDate(moment__default["default"](date).subtract(1, 'minutes'));
+        if (type === 'hour') {
+          if (!minDate || moment__default["default"](date).subtract(1, 'hours') >= moment__default["default"](minDate)) {
+            setNewDate(moment__default["default"](date).subtract(1, 'hours'));
+          }
+        } else {
+          if (!minDate || moment__default["default"](date).subtract(1, 'minutes') >= moment__default["default"](minDate)) {
+            setNewDate(moment__default["default"](date).subtract(1, 'minutes'));
+          }
+        }
       }
     }
 
@@ -14976,7 +14994,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 142,
+        lineNumber: 158,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -14985,7 +15003,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 143,
+        lineNumber: 159,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(IconStateFull$1, {
@@ -14995,7 +15013,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 144,
+        lineNumber: 160,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconStateFull$1, {
@@ -15005,7 +15023,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 145,
+        lineNumber: 161,
         columnNumber: 9
       }
     })), /*#__PURE__*/React__default["default"].createElement(Input$3, {
@@ -15016,7 +15034,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 147,
+        lineNumber: 163,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Time, {
@@ -15024,7 +15042,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 148,
+        lineNumber: 164,
         columnNumber: 7
       }
     }, moment__default["default"](date).format(format)), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -15033,7 +15051,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 149,
+        lineNumber: 165,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(IconStateFull$1, {
@@ -15043,7 +15061,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 150,
+        lineNumber: 166,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconStateFull$1, {
@@ -15053,7 +15071,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 151,
+        lineNumber: 167,
         columnNumber: 9
       }
     })));
@@ -15077,7 +15095,17 @@
     /**
      Time picker value, support moment format.
     */
-    value: PropTypes__default["default"].instanceOf(Date)
+    value: PropTypes__default["default"].instanceOf(Date),
+
+    /**
+      Specify the minimum date.
+     */
+    minDate: PropTypes__default["default"].instanceOf(Date),
+
+    /**
+         Specify the maximum date.
+        */
+    maxDate: PropTypes__default["default"].instanceOf(Date)
   };
   const TimePicker = ({
     size,
@@ -15085,7 +15113,9 @@
     defaultValue,
     value,
     disabled,
-    css
+    css,
+    minDate,
+    maxDate
   }) => {
     return /*#__PURE__*/React__default["default"].createElement(Container$6, {
       size: size,
@@ -15098,7 +15128,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 178,
+        lineNumber: 202,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(NativeTimePicker, {
@@ -15107,10 +15137,12 @@
       onChange: onChange,
       defaultValue: defaultValue,
       value: value,
+      minDate: minDate,
+      maxDate: maxDate,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 179,
+        lineNumber: 203,
         columnNumber: 7
       }
     }));
@@ -15145,7 +15177,17 @@
     /**
      Disabled state.
     */
-    disabled: PropTypes__default["default"].bool
+    disabled: PropTypes__default["default"].bool,
+
+    /**
+      Specify the minimum date.
+     */
+    minDate: PropTypes__default["default"].instanceOf(Date),
+
+    /**
+       Specify the maximum date.
+      */
+    maxDate: PropTypes__default["default"].instanceOf(Date)
   };
   NativeTimePicker.displayName = 'NativeTimePicker';
 
@@ -15164,7 +15206,9 @@
     placeholder,
     placement,
     css,
-    disabled
+    disabled,
+    minDate,
+    maxDate
   }) {
     const [openPicker, setOpenPicker] = React.useState(false);
     const isMobile = useMediaQuery(`(max-width: 480px)`);
@@ -15182,7 +15226,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 29,
+        lineNumber: 40,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputLeftElement, {
@@ -15190,14 +15234,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$j,
-          lineNumber: 30,
+          lineNumber: 41,
           columnNumber: 35
         }
       }),
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 30,
+        lineNumber: 41,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(InputText, {
@@ -15209,7 +15253,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 31,
+        lineNumber: 42,
         columnNumber: 7
       }
     }));
@@ -15220,10 +15264,12 @@
       defaultValue: defaultValue,
       value: value,
       onChange: onChange,
+      minDate: minDate,
+      maxDate: maxDate,
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 42,
+        lineNumber: 53,
         columnNumber: 5
       }
     });
@@ -15235,7 +15281,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 46,
+        lineNumber: 65,
         columnNumber: 5
       }
     }, disabled ? /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -15243,14 +15289,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 48,
+        lineNumber: 67,
         columnNumber: 9
       }
     }, renderInputGroup()) : /*#__PURE__*/React__default["default"].createElement(PopoverTrigger, {
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 50,
+        lineNumber: 69,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -15258,14 +15304,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 51,
+        lineNumber: 70,
         columnNumber: 11
       }
     }, renderInputGroup())), /*#__PURE__*/React__default["default"].createElement(PopoverContent, {
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 54,
+        lineNumber: 73,
         columnNumber: 7
       }
     }, renderTimePicker())) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -15273,7 +15319,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 58,
+        lineNumber: 77,
         columnNumber: 7
       }
     }, renderInputGroup()), /*#__PURE__*/React__default["default"].createElement(Drawer, {
@@ -15283,7 +15329,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 59,
+        lineNumber: 78,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(DrawerContent, {
@@ -15294,7 +15340,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 60,
+        lineNumber: 79,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -15306,7 +15352,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 66,
+        lineNumber: 85,
         columnNumber: 11
       }
     }, renderTimePicker()))));
@@ -15354,7 +15400,17 @@
     /**
      Placement popover input time picker.
     */
-    placement: PropTypes__default["default"].string
+    placement: PropTypes__default["default"].string,
+
+    /**
+      Specify the minimum date.
+     */
+    minDate: PropTypes__default["default"].instanceOf(Date),
+
+    /**
+         Specify the maximum date.
+        */
+    maxDate: PropTypes__default["default"].instanceOf(Date)
   };
   InputTimePicker.displayName = 'InputTimePicker';
 
@@ -15422,6 +15478,8 @@
         children: jsxRuntime.jsx(NativeTimePicker, {
           size: "lg",
           value: dateValue ? moment__default["default"](dateValue) : moment__default["default"](),
+          minDate: minDate,
+          maxDate: maxDate,
           onChange: function (date) {
             setDateValue(new Date(date));
           }
@@ -18826,7 +18884,7 @@
       size: "sm",
       onClick: buttonCancel,
       css: {
-        color: props.dialogType === 'negative' && '$gray900 !important',
+        color: props.dialogType === 'negative' && !(props != null && props.disabledButton) && '$gray900 !important',
         flex: props.isMobile && 1
       },
       buttonType: "ghost",
@@ -18843,7 +18901,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 182,
+        lineNumber: 185,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({
@@ -18858,7 +18916,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 183,
+        lineNumber: 186,
         columnNumber: 19
       }
     }), props.labelConfirm ? props.labelConfirm : 'Confirm')))))));
@@ -18883,7 +18941,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 214,
+        lineNumber: 217,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Content$1, _extends({}, props, {
@@ -18896,14 +18954,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 215,
+        lineNumber: 218,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledTitle, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 223,
+        lineNumber: 226,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Heading, {
@@ -18911,7 +18969,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 224,
+        lineNumber: 227,
         columnNumber: 11
       }
     }, props.title), /*#__PURE__*/React__default["default"].createElement(AlertDialogCancel, {
@@ -18919,7 +18977,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 225,
+        lineNumber: 228,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -18930,7 +18988,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 226,
+        lineNumber: 229,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
@@ -18938,7 +18996,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 227,
+        lineNumber: 230,
         columnNumber: 15
       }
     })))), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -18946,14 +19004,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 231,
+        lineNumber: 234,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDescription$1, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 232,
+        lineNumber: 235,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -18963,7 +19021,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 233,
+        lineNumber: 236,
         columnNumber: 11
       }
     }, props.description)), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -18973,7 +19031,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 235,
+        lineNumber: 238,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -18981,7 +19039,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 236,
+        lineNumber: 239,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Flex, {
@@ -18995,7 +19053,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 237,
+        lineNumber: 240,
         columnNumber: 11
       }
     }, props.singleButton ? /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -19003,7 +19061,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 239,
+        lineNumber: 242,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({
@@ -19018,7 +19076,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 240,
+        lineNumber: 243,
         columnNumber: 17
       }
     }), props.labelConfirm ? props.labelConfirm : 'Confirm')) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
@@ -19026,14 +19084,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 253,
+        lineNumber: 256,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({
       size: "sm",
       onClick: props.onCancel,
       css: {
-        color: props.dialogType === 'negative' && '$gray900 !important',
+        color: props.dialogType === 'negative' && !(props != null && props.disabledButton) && '$gray900 !important',
         flex: props.isMobile && 1
       },
       buttonType: "ghost",
@@ -19042,7 +19100,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 254,
+        lineNumber: 257,
         columnNumber: 19
       }
     }), props.labelCancel ? props.labelCancel : 'Cancel')), /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -19050,7 +19108,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 265,
+        lineNumber: 271,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({
@@ -19065,7 +19123,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 266,
+        lineNumber: 272,
         columnNumber: 19
       }
     }), props.labelConfirm ? props.labelConfirm : 'Confirm')))))));
@@ -21167,7 +21225,7 @@
     });
   }
 
-  function imgPreview(image, crop, scale, rotate) {
+  function imgPreview(image, crop, scale, rotate, ratio) {
     if (scale === void 0) {
       scale = 1;
     }
@@ -21181,8 +21239,10 @@
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
-            crop.height = Math.ceil(crop.height);
-            crop.width = Math.ceil(crop.width);
+            if (ratio === 1) {
+              crop.width = crop.height;
+            }
+
             canvas = document.createElement('canvas');
             canvasPreview(image, canvas, crop, scale, rotate);
             return [4
@@ -21653,7 +21713,7 @@
 
     function handleCrop() {
       if (completedCrop != null && completedCrop.width && completedCrop != null && completedCrop.height && imgRef.current) {
-        imgPreview(imgRef.current, completedCrop).then(blob => {
+        imgPreview(imgRef.current, completedCrop, 1, 0, ratio).then(blob => {
           const file = new File([blob], fileState == null ? void 0 : fileState.name, {
             type: blob.type
           });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.49.0",
+  "version": "1.49.1",
   "dependencies": {
     "@majoo-ui/core": "^1.31.1",
     "@majoo-ui/helpers": "^1.30.4",