@majoo-ui/react 1.46.8-rc.1 → 1.46.8-rc.2

package/index.esm.js

@@ -3,7 +3,7 @@ import React__default, { useState, createContext, useContext, useEffect, useRef,
 import PropTypes from 'prop-types';
 import { createStitches, styled as styled$1 } from '@stitches/react';
 import { foundations } from '@majoo-ui/core';
-import { CloseOutline, UserFilled, CircleQuestionOutline, SearchOutline, CloseFilled, CircleInfoOutline, CaretDownOutline, CirclePlusOutline, ChevronDownOutline, ChevronLeftOutline, ChevronRightOutline, ChevronUpOutline, TimeOutline, CalendarOutline, ArrowLeftOutline, ArrowRightOutline, EllipsisHorizontalOutline, EyeOutline, CheckFilled, UploadOutline, ImageOutline, ChevronLgLeftOutline, ChevronUpDownOutline, RemoveOutline } from '@majoo-ui/icons';
+import { CloseOutline, UserFilled, CircleQuestionOutline, SearchOutline, CloseFilled, CircleInfoOutline, CaretDownOutline, CirclePlusOutline, ChevronDownOutline, ChevronLeftOutline, ChevronRightOutline, ChevronUpOutline, TimeOutline, CalendarOutline, ArrowLeftOutline, ArrowRightOutline, EllipsisHorizontalOutline, EyeOutline, UploadOutline, ImageOutline, ChevronLgLeftOutline, ChevronUpDownOutline, CheckFilled, RemoveOutline } from '@majoo-ui/icons';
 import { Transition } from 'react-transition-group';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Portal } from '@majoo-ui/helpers';
@@ -20498,8 +20498,8 @@ const Text = styled('p', {
 });
 const FileExtension = styled('p', {
   color: '#C1C1C1',
-  fontSize: 64,
-  fontWeight: 600,
+  fontSize: 40,
+  fontWeight: 700,
   fontStyle: 'normal'
 });
 const ErrorMessage = styled('p', {
@@ -20508,7 +20508,7 @@ const ErrorMessage = styled('p', {
   fontWeight: 400,
   fontStyle: 'normal',
   textAlign: 'center',
-  width: 190,
+  width: 135,
   marginTop: '$spacing-02'
 });
 const IconCard = styled('div', {
@@ -20543,16 +20543,9 @@ const EyeIcon = styled(EyeOutline, {
   cursor: 'pointer',
   background: 'rgba(39, 42, 42, 0.6)',
   borderRadius: 50,
-  width: 40,
-  height: 40,
-  padding: '$spacing-03'
-});
-styled(CheckFilled, {
-  background: '$white',
-  borderRadius: 50,
-  width: 40,
-  height: 40,
-  padding: '$spacing-03'
+  width: 32,
+  height: 32,
+  padding: '$spacing-02'
 });
 
 const IconStateFull = props => {
@@ -20573,7 +20566,7 @@ const IconStateFull = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 126,
+      lineNumber: 118,
       columnNumber: 5
     }
   })) : /*#__PURE__*/React__default.createElement(EyeIcon, _extends({}, props, {
@@ -20583,7 +20576,7 @@ const IconStateFull = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 133,
+      lineNumber: 125,
       columnNumber: 5
     }
   }));
@@ -20615,7 +20608,9 @@ const Upload = ({
   tokenKey,
   reqKey,
   resKey,
-  ratio
+  ratio,
+  disabled,
+  errorMessage
 }) => {
   const isFile = listType === 'file';
   const imgRef = useRef(null);
@@ -20625,7 +20620,7 @@ const Upload = ({
   const [dragActive, setDragActive] = useState(false);
   const [previewImage, setPreviewImage] = useState('');
   const [fileState, setFileState] = useState({});
-  const [errorMessage, setErrorMessage] = useState(null);
+  const [error, setError] = useState(null);
   const [crop, setCrop] = useState(null);
   const [completedCrop, setCompletedCrop] = useState(null);
   const [aspect, setAspect] = useState(ratio);
@@ -20639,6 +20634,15 @@ const Upload = ({
       setIsLoading(false);
     }
   }, [loading, progress]);
+  useEffect(() => {
+    if (errorMessage && typeof errorMessage === 'string') {
+      setError(errorMessage);
+    }
+
+    return () => {
+      setError(null);
+    };
+  }, [errorMessage]);
   const ContainerUpload = styled('div', {
     border: '2px dashed $gray300',
     borderRadius: 8,
@@ -20674,6 +20678,17 @@ const Upload = ({
           height: height + 16,
           width: width + 16
         }
+      },
+      disabled: {
+        true: {
+          border: 'none',
+          background: '$formDisable',
+          cursor: 'not-allowed',
+          '&:hover': {
+            border: 'none',
+            background: '$formDisable'
+          }
+        }
       }
     }
   });
@@ -20721,7 +20736,9 @@ const Upload = ({
   });
 
   function handleClick() {
-    hiddenFileInput.current.click();
+    if (!disabled) {
+      hiddenFileInput.current.click();
+    }
   }
 
   function toggleModal() {
@@ -20771,7 +20788,7 @@ const Upload = ({
               file: fileProgress,
               indexReplace: indexReplace.current,
               isReplace: indexReplace.current !== null
-            })) === null || _onChange === void 0 ? void 0 : (_onChange$then = _onChange.then(() => setErrorMessage(null))) === null || _onChange$then === void 0 ? void 0 : _onChange$then.catch(error => setErrorMessage(error.message));
+            })) === null || _onChange === void 0 ? void 0 : (_onChange$then = _onChange.then(() => setError(null))) === null || _onChange$then === void 0 ? void 0 : _onChange$then.catch(error => setError(error.message));
           }
         }).then(result => {
           var _onChange2, _onChange2$then;
@@ -20793,14 +20810,14 @@ const Upload = ({
             file: fileSuccess,
             indexReplace: indexReplace.current,
             isReplace: indexReplace.current !== null
-          })) === null || _onChange2 === void 0 ? void 0 : (_onChange2$then = _onChange2.then(() => setErrorMessage(null))) === null || _onChange2$then === void 0 ? void 0 : _onChange2$then.catch(error => setErrorMessage(error.message));
+          })) === null || _onChange2 === void 0 ? void 0 : (_onChange2$then = _onChange2.then(() => setError(null))) === null || _onChange2$then === void 0 ? void 0 : _onChange2$then.catch(error => setError(error.message));
         }).catch(error => {
           var _onChange3, _onChange3$then;
 
           let fileError = Object.assign({}, newFile);
           let uid = fileError.uid;
           fileError.status = 'error';
-          fileError.errorMessage = error;
+          fileError.error = error;
           let arrError = [...arrFile];
 
           for (let i = 0; i < arrError.length; i++) {
@@ -20814,7 +20831,7 @@ const Upload = ({
             file: fileError,
             indexReplace: indexReplace.current,
             isReplace: indexReplace.current !== null
-          })) === null || _onChange3 === void 0 ? void 0 : (_onChange3$then = _onChange3.then(() => setErrorMessage(null))) === null || _onChange3$then === void 0 ? void 0 : _onChange3$then.catch(error => setErrorMessage(error.message));
+          })) === null || _onChange3 === void 0 ? void 0 : (_onChange3$then = _onChange3.then(() => setError(null))) === null || _onChange3$then === void 0 ? void 0 : _onChange3$then.catch(error => setError(error.message));
         });
       } else {
         var _onChange4, _onChange4$then;
@@ -20824,7 +20841,7 @@ const Upload = ({
           file: newFile,
           indexReplace: indexReplace.current,
           isReplace: indexReplace.current !== null
-        })) === null || _onChange4 === void 0 ? void 0 : (_onChange4$then = _onChange4.then(() => setErrorMessage(null))) === null || _onChange4$then === void 0 ? void 0 : _onChange4$then.catch(error => setErrorMessage(error.message));
+        })) === null || _onChange4 === void 0 ? void 0 : (_onChange4$then = _onChange4.then(() => setError(null))) === null || _onChange4$then === void 0 ? void 0 : _onChange4$then.catch(error => setError(error.message));
       }
 
       if (indexReplace.current !== null) {
@@ -20989,7 +21006,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 520,
+        lineNumber: 537,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -20999,7 +21016,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 521,
+        lineNumber: 538,
         columnNumber: 9
       }
     }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah ${isFile ? 'Berkas' : 'Gambar'}`));
@@ -21015,7 +21032,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 531,
+            lineNumber: 548,
             columnNumber: 16
           }
         });
@@ -21027,7 +21044,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 534,
+          lineNumber: 551,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -21037,7 +21054,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 535,
+          lineNumber: 552,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -21046,7 +21063,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 536,
+          lineNumber: 553,
           columnNumber: 13
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -21059,7 +21076,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 537,
+          lineNumber: 554,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -21068,7 +21085,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 545,
+          lineNumber: 562,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default.createElement(Image, {
@@ -21076,7 +21093,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 547,
+          lineNumber: 564,
           columnNumber: 13
         }
       })), renderButtonReplace(index));
@@ -21095,7 +21112,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 558,
+            lineNumber: 575,
             columnNumber: 16
           }
         });
@@ -21106,7 +21123,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 561,
+          lineNumber: 578,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -21116,7 +21133,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 562,
+          lineNumber: 579,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -21125,7 +21142,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 563,
+          lineNumber: 580,
           columnNumber: 13
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -21138,7 +21155,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 564,
+          lineNumber: 581,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21148,14 +21165,14 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 572,
+          lineNumber: 589,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(FileExtension, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 573,
+          lineNumber: 590,
           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(Text, {
@@ -21170,7 +21187,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 574,
+          lineNumber: 591,
           columnNumber: 17
         }
       }, item.name))), /*#__PURE__*/React__default.createElement(Box, {
@@ -21183,7 +21200,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 588,
+          lineNumber: 605,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -21192,14 +21209,14 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 596,
+          lineNumber: 613,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default.createElement(Blank, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 598,
+          lineNumber: 615,
           columnNumber: 13
         }
       })), renderButtonReplace(index));
@@ -21215,7 +21232,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 609,
+        lineNumber: 626,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21229,7 +21246,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 610,
+        lineNumber: 627,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(LoadingBar, {
@@ -21255,7 +21272,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 611,
+        lineNumber: 628,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Text, {
@@ -21263,14 +21280,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 624,
+        lineNumber: 641,
         columnNumber: 11
       }
     }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default.createElement(Text, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 625,
+        lineNumber: 642,
         columnNumber: 11
       }
     }, `${isFile ? 'Berkas' : 'Gambar'} sedang diunggah`)));
@@ -21283,12 +21300,13 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 633,
+        lineNumber: 650,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ContainerUpload, {
       hidden: max ? fileList.length >= max ? true : false : false,
-      showError: errorMessage !== null,
+      disabled: disabled,
+      showError: error !== null,
       onClick: handleClick,
       onDragEnter: handleDragEnter,
       onDragLeave: handleDragLeave,
@@ -21298,7 +21316,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 634,
+        lineNumber: 651,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Input$1, {
@@ -21310,55 +21328,56 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 644,
+        lineNumber: 662,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Children, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 645,
+        lineNumber: 663,
         columnNumber: 11
       }
     }, children != null ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 647,
+        lineNumber: 665,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(IconCard, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 648,
+        lineNumber: 666,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(UploadOutline, {
+      color: disabled ? '#C0C4C4' : '#404545',
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 649,
+        lineNumber: 667,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__default.createElement(Text, {
       css: {
-        margin: '$spacing-07 $spacing-07 0 $spacing-07'
+        margin: '$spacing-04 $spacing-05 0 $spacing-05'
       },
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 651,
+        lineNumber: 669,
         columnNumber: 17
       }
-    }, `Pilih atau letakkan ${isFile ? 'berkas' : 'gambar'} anda disini`)))), errorMessage && /*#__PURE__*/React__default.createElement(ErrorMessage, {
+    }, `Pilih atau letakkan ${isFile ? 'berkas' : 'gambar'} di sini`)))), error && /*#__PURE__*/React__default.createElement(ErrorMessage, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 658,
-        columnNumber: 26
+        lineNumber: 676,
+        columnNumber: 19
       }
-    }, errorMessage));
+    }, error));
   }
 
   function renderCropper() {
@@ -21366,7 +21385,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 665,
+        lineNumber: 683,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -21374,7 +21393,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 666,
+        lineNumber: 684,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -21382,7 +21401,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 667,
+        lineNumber: 685,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
@@ -21395,7 +21414,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 669,
+        lineNumber: 687,
         columnNumber: 9
       }
     }, cropperTitle), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -21406,7 +21425,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 672,
+        lineNumber: 690,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ReactCrop, {
@@ -21417,7 +21436,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 673,
+        lineNumber: 691,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Image, {
@@ -21430,14 +21449,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 674,
+        lineNumber: 692,
         columnNumber: 13
       }
     }))), /*#__PURE__*/React__default.createElement(ModalDialogFooter, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 677,
+        lineNumber: 695,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21449,7 +21468,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 678,
+        lineNumber: 696,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Tooltip, {
@@ -21457,7 +21476,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 679,
+        lineNumber: 697,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(ImageOutline, {
@@ -21469,7 +21488,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 680,
+        lineNumber: 698,
         columnNumber: 15
       }
     })), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21477,7 +21496,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 686,
+        lineNumber: 704,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Button$2, {
@@ -21486,7 +21505,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 687,
+        lineNumber: 705,
         columnNumber: 15
       }
     }, "Batal"), /*#__PURE__*/React__default.createElement(Button$2, {
@@ -21494,7 +21513,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 690,
+        lineNumber: 708,
         columnNumber: 15
       }
     }, `${completedCrop !== null && completedCrop !== void 0 && completedCrop.width && completedCrop !== null && completedCrop !== void 0 && completedCrop.height ? 'Potong & Simpan' : 'Simpan'}`)))));
@@ -21510,7 +21529,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 701,
+      lineNumber: 719,
       columnNumber: 5
     }
   }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default.createElement(UploadProgress, {
@@ -21519,7 +21538,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 704,
+      lineNumber: 722,
       columnNumber: 32
     }
   }) : renderUpload(), showCropper && renderCropper());
@@ -21528,25 +21547,21 @@ const Upload = ({
 Upload.defaultProps = {
   listType: 'file',
   fileList: [],
-  height: 200,
-  width: 200,
+  height: 140,
+  width: 140,
   cropperTitle: 'Potong Gambar',
   showCropper: true,
   tokenKey: 'Token',
   reqKey: 'file',
   resKey: 'url',
-  ratio: 16 / 9
+  ratio: 16 / 9,
+  disabled: false
 };
 Upload.propTypes = {
   /**
-   Progress of upload process
+   Disabled state of upload.
   */
-  progress: PropTypes.number,
-
-  /**
-   Auto increment progress of upload process
-  */
-  loading: PropTypes.bool,
+  disabled: PropTypes.bool,
 
   /**
    Built-in stylesheets, support for two types.
@@ -21646,6 +21661,21 @@ Upload.propTypes = {
    */
   ratio: PropTypes.number,
 
+  /**
+   Can set error message to the upload.
+   */
+  errorMessage: PropTypes.string,
+
+  /**
+   Progress of upload process.
+  */
+  progress: PropTypes.number,
+
+  /**
+    Auto increment progress of upload process.
+   */
+  loading: PropTypes.bool,
+
   /**
    API upload url, allows components to automatically upload directly to API service.
    */

package/index.umd.js

@@ -20871,8 +20871,8 @@
   });
   const FileExtension = styled('p', {
     color: '#C1C1C1',
-    fontSize: 64,
-    fontWeight: 600,
+    fontSize: 40,
+    fontWeight: 700,
     fontStyle: 'normal'
   });
   const ErrorMessage = styled('p', {
@@ -20881,7 +20881,7 @@
     fontWeight: 400,
     fontStyle: 'normal',
     textAlign: 'center',
-    width: 190,
+    width: 135,
     marginTop: '$spacing-02'
   });
   const IconCard = styled('div', {
@@ -20916,16 +20916,9 @@
     cursor: 'pointer',
     background: 'rgba(39, 42, 42, 0.6)',
     borderRadius: 50,
-    width: 40,
-    height: 40,
-    padding: '$spacing-03'
-  });
-  styled(icons.CheckFilled, {
-    background: '$white',
-    borderRadius: 50,
-    width: 40,
-    height: 40,
-    padding: '$spacing-03'
+    width: 32,
+    height: 32,
+    padding: '$spacing-02'
   });
 
   const IconStateFull = props => {
@@ -20946,7 +20939,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 126,
+        lineNumber: 118,
         columnNumber: 5
       }
     })) : /*#__PURE__*/React__default["default"].createElement(EyeIcon, _extends({}, props, {
@@ -20956,7 +20949,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 133,
+        lineNumber: 125,
         columnNumber: 5
       }
     }));
@@ -20988,7 +20981,9 @@
     tokenKey,
     reqKey,
     resKey,
-    ratio
+    ratio,
+    disabled,
+    errorMessage
   }) => {
     const isFile = listType === 'file';
     const imgRef = React.useRef(null);
@@ -20998,7 +20993,7 @@
     const [dragActive, setDragActive] = React.useState(false);
     const [previewImage, setPreviewImage] = React.useState('');
     const [fileState, setFileState] = React.useState({});
-    const [errorMessage, setErrorMessage] = React.useState(null);
+    const [error, setError] = React.useState(null);
     const [crop, setCrop] = React.useState(null);
     const [completedCrop, setCompletedCrop] = React.useState(null);
     const [aspect, setAspect] = React.useState(ratio);
@@ -21012,6 +21007,15 @@
         setIsLoading(false);
       }
     }, [loading, progress]);
+    React.useEffect(() => {
+      if (errorMessage && typeof errorMessage === 'string') {
+        setError(errorMessage);
+      }
+
+      return () => {
+        setError(null);
+      };
+    }, [errorMessage]);
     const ContainerUpload = styled('div', {
       border: '2px dashed $gray300',
       borderRadius: 8,
@@ -21047,6 +21051,17 @@
             height: height + 16,
             width: width + 16
           }
+        },
+        disabled: {
+          true: {
+            border: 'none',
+            background: '$formDisable',
+            cursor: 'not-allowed',
+            '&:hover': {
+              border: 'none',
+              background: '$formDisable'
+            }
+          }
         }
       }
     });
@@ -21094,7 +21109,9 @@
     });
 
     function handleClick() {
-      hiddenFileInput.current.click();
+      if (!disabled) {
+        hiddenFileInput.current.click();
+      }
     }
 
     function toggleModal() {
@@ -21144,7 +21161,7 @@
                 file: fileProgress,
                 indexReplace: indexReplace.current,
                 isReplace: indexReplace.current !== null
-              })) === null || _onChange === void 0 ? void 0 : (_onChange$then = _onChange.then(() => setErrorMessage(null))) === null || _onChange$then === void 0 ? void 0 : _onChange$then.catch(error => setErrorMessage(error.message));
+              })) === null || _onChange === void 0 ? void 0 : (_onChange$then = _onChange.then(() => setError(null))) === null || _onChange$then === void 0 ? void 0 : _onChange$then.catch(error => setError(error.message));
             }
           }).then(result => {
             var _onChange2, _onChange2$then;
@@ -21166,14 +21183,14 @@
               file: fileSuccess,
               indexReplace: indexReplace.current,
               isReplace: indexReplace.current !== null
-            })) === null || _onChange2 === void 0 ? void 0 : (_onChange2$then = _onChange2.then(() => setErrorMessage(null))) === null || _onChange2$then === void 0 ? void 0 : _onChange2$then.catch(error => setErrorMessage(error.message));
+            })) === null || _onChange2 === void 0 ? void 0 : (_onChange2$then = _onChange2.then(() => setError(null))) === null || _onChange2$then === void 0 ? void 0 : _onChange2$then.catch(error => setError(error.message));
           }).catch(error => {
             var _onChange3, _onChange3$then;
 
             let fileError = Object.assign({}, newFile);
             let uid = fileError.uid;
             fileError.status = 'error';
-            fileError.errorMessage = error;
+            fileError.error = error;
             let arrError = [...arrFile];
 
             for (let i = 0; i < arrError.length; i++) {
@@ -21187,7 +21204,7 @@
               file: fileError,
               indexReplace: indexReplace.current,
               isReplace: indexReplace.current !== null
-            })) === null || _onChange3 === void 0 ? void 0 : (_onChange3$then = _onChange3.then(() => setErrorMessage(null))) === null || _onChange3$then === void 0 ? void 0 : _onChange3$then.catch(error => setErrorMessage(error.message));
+            })) === null || _onChange3 === void 0 ? void 0 : (_onChange3$then = _onChange3.then(() => setError(null))) === null || _onChange3$then === void 0 ? void 0 : _onChange3$then.catch(error => setError(error.message));
           });
         } else {
           var _onChange4, _onChange4$then;
@@ -21197,7 +21214,7 @@
             file: newFile,
             indexReplace: indexReplace.current,
             isReplace: indexReplace.current !== null
-          })) === null || _onChange4 === void 0 ? void 0 : (_onChange4$then = _onChange4.then(() => setErrorMessage(null))) === null || _onChange4$then === void 0 ? void 0 : _onChange4$then.catch(error => setErrorMessage(error.message));
+          })) === null || _onChange4 === void 0 ? void 0 : (_onChange4$then = _onChange4.then(() => setError(null))) === null || _onChange4$then === void 0 ? void 0 : _onChange4$then.catch(error => setError(error.message));
         }
 
         if (indexReplace.current !== null) {
@@ -21362,7 +21379,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 520,
+          lineNumber: 537,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ButtonText, {
@@ -21372,7 +21389,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 521,
+          lineNumber: 538,
           columnNumber: 9
         }
       }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah ${isFile ? 'Berkas' : 'Gambar'}`));
@@ -21388,7 +21405,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 531,
+              lineNumber: 548,
               columnNumber: 16
             }
           });
@@ -21400,7 +21417,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 534,
+            lineNumber: 551,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -21410,7 +21427,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 535,
+            lineNumber: 552,
             columnNumber: 11
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -21419,7 +21436,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 536,
+            lineNumber: 553,
             columnNumber: 13
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -21432,7 +21449,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 537,
+            lineNumber: 554,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -21441,7 +21458,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 545,
+            lineNumber: 562,
             columnNumber: 15
           }
         })), /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -21449,7 +21466,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 547,
+            lineNumber: 564,
             columnNumber: 13
           }
         })), renderButtonReplace(index));
@@ -21468,7 +21485,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 558,
+              lineNumber: 575,
               columnNumber: 16
             }
           });
@@ -21479,7 +21496,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 561,
+            lineNumber: 578,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -21489,7 +21506,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 562,
+            lineNumber: 579,
             columnNumber: 11
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -21498,7 +21515,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 563,
+            lineNumber: 580,
             columnNumber: 13
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -21511,7 +21528,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 564,
+            lineNumber: 581,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -21521,14 +21538,14 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 572,
+            lineNumber: 589,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(FileExtension, {
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 573,
+            lineNumber: 590,
             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(Text, {
@@ -21543,7 +21560,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 574,
+            lineNumber: 591,
             columnNumber: 17
           }
         }, item.name))), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -21556,7 +21573,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 588,
+            lineNumber: 605,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -21565,14 +21582,14 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 596,
+            lineNumber: 613,
             columnNumber: 15
           }
         })), /*#__PURE__*/React__default["default"].createElement(Blank, {
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 598,
+            lineNumber: 615,
             columnNumber: 13
           }
         })), renderButtonReplace(index));
@@ -21588,7 +21605,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 609,
+          lineNumber: 626,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -21602,7 +21619,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 610,
+          lineNumber: 627,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(LoadingBar, {
@@ -21628,7 +21645,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 611,
+          lineNumber: 628,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -21636,14 +21653,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 624,
+          lineNumber: 641,
           columnNumber: 11
         }
       }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default["default"].createElement(Text, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 625,
+          lineNumber: 642,
           columnNumber: 11
         }
       }, `${isFile ? 'Berkas' : 'Gambar'} sedang diunggah`)));
@@ -21656,12 +21673,13 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 633,
+          lineNumber: 650,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ContainerUpload, {
         hidden: max ? fileList.length >= max ? true : false : false,
-        showError: errorMessage !== null,
+        disabled: disabled,
+        showError: error !== null,
         onClick: handleClick,
         onDragEnter: handleDragEnter,
         onDragLeave: handleDragLeave,
@@ -21671,7 +21689,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 634,
+          lineNumber: 651,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Input$1, {
@@ -21683,55 +21701,56 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 644,
+          lineNumber: 662,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Children, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 645,
+          lineNumber: 663,
           columnNumber: 11
         }
       }, children != null ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 647,
+          lineNumber: 665,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconCard, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 648,
+          lineNumber: 666,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.UploadOutline, {
+        color: disabled ? '#C0C4C4' : '#404545',
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 649,
+          lineNumber: 667,
           columnNumber: 19
         }
       })), /*#__PURE__*/React__default["default"].createElement(Text, {
         css: {
-          margin: '$spacing-07 $spacing-07 0 $spacing-07'
+          margin: '$spacing-04 $spacing-05 0 $spacing-05'
         },
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 651,
+          lineNumber: 669,
           columnNumber: 17
         }
-      }, `Pilih atau letakkan ${isFile ? 'berkas' : 'gambar'} anda disini`)))), errorMessage && /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
+      }, `Pilih atau letakkan ${isFile ? 'berkas' : 'gambar'} di sini`)))), error && /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 658,
-          columnNumber: 26
+          lineNumber: 676,
+          columnNumber: 19
         }
-      }, errorMessage));
+      }, error));
     }
 
     function renderCropper() {
@@ -21739,7 +21758,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 665,
+          lineNumber: 683,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -21747,7 +21766,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 666,
+          lineNumber: 684,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -21755,7 +21774,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 667,
+          lineNumber: 685,
           columnNumber: 11
         }
       })), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
@@ -21768,7 +21787,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 669,
+          lineNumber: 687,
           columnNumber: 9
         }
       }, cropperTitle), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -21779,7 +21798,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 672,
+          lineNumber: 690,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ReactCrop__default["default"], {
@@ -21790,7 +21809,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 673,
+          lineNumber: 691,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -21803,14 +21822,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 674,
+          lineNumber: 692,
           columnNumber: 13
         }
       }))), /*#__PURE__*/React__default["default"].createElement(ModalDialogFooter, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 677,
+          lineNumber: 695,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -21822,7 +21841,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 678,
+          lineNumber: 696,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Tooltip, {
@@ -21830,7 +21849,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 679,
+          lineNumber: 697,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ImageOutline, {
@@ -21842,7 +21861,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 680,
+          lineNumber: 698,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -21850,7 +21869,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 686,
+          lineNumber: 704,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Button$2, {
@@ -21859,7 +21878,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 687,
+          lineNumber: 705,
           columnNumber: 15
         }
       }, "Batal"), /*#__PURE__*/React__default["default"].createElement(Button$2, {
@@ -21867,7 +21886,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 690,
+          lineNumber: 708,
           columnNumber: 15
         }
       }, `${completedCrop !== null && completedCrop !== void 0 && completedCrop.width && completedCrop !== null && completedCrop !== void 0 && completedCrop.height ? 'Potong & Simpan' : 'Simpan'}`)))));
@@ -21883,7 +21902,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 701,
+        lineNumber: 719,
         columnNumber: 5
       }
     }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
@@ -21892,7 +21911,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 704,
+        lineNumber: 722,
         columnNumber: 32
       }
     }) : renderUpload(), showCropper && renderCropper());
@@ -21901,25 +21920,21 @@
   Upload.defaultProps = {
     listType: 'file',
     fileList: [],
-    height: 200,
-    width: 200,
+    height: 140,
+    width: 140,
     cropperTitle: 'Potong Gambar',
     showCropper: true,
     tokenKey: 'Token',
     reqKey: 'file',
     resKey: 'url',
-    ratio: 16 / 9
+    ratio: 16 / 9,
+    disabled: false
   };
   Upload.propTypes = {
     /**
-     Progress of upload process
+     Disabled state of upload.
     */
-    progress: PropTypes__default["default"].number,
-
-    /**
-     Auto increment progress of upload process
-    */
-    loading: PropTypes__default["default"].bool,
+    disabled: PropTypes__default["default"].bool,
 
     /**
      Built-in stylesheets, support for two types.
@@ -22019,6 +22034,21 @@
      */
     ratio: PropTypes__default["default"].number,
 
+    /**
+     Can set error message to the upload.
+     */
+    errorMessage: PropTypes__default["default"].string,
+
+    /**
+     Progress of upload process.
+    */
+    progress: PropTypes__default["default"].number,
+
+    /**
+      Auto increment progress of upload process.
+     */
+    loading: PropTypes__default["default"].bool,
+
     /**
      API upload url, allows components to automatically upload directly to API service.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.46.8-rc.1",
+  "version": "1.46.8-rc.2",
   "dependencies": {
     "@majoo-ui/core": "^1.31.1",
     "@majoo-ui/helpers": "^1.30.4",