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

package/index.umd.js

@@ -8212,6 +8212,7 @@
     borderRadius: '$lg',
     padding: '12px 16px',
     overflowY: 'auto',
+    minHeight: '40px',
     height: '100%'
   });
   var SelectItem = styled('div', {
@@ -8515,7 +8516,7 @@
                   },
                   disabled: disabled
                 }),
-                onClick: getToggleButtonProps().onClick
+                onClick: !isOpen ? getToggleButtonProps().onClick : undefined
               }, void 0)
             }), void 0) : jsxRuntime.jsx(Button$1, __assign({}, getToggleButtonProps({
               disabled: disabled || readOnly
@@ -8536,14 +8537,36 @@
                 children: placeholder
               }), void 0)
             }), void 0), handleDownOption()]
-          }), void 0), jsxRuntime.jsxs(OptionWrapper$2, __assign({}, getMenuProps({}, {
+          }), void 0), isOpen && isLoading && jsxRuntime.jsx(Flex$1, __assign({
+            justify: "center",
+            align: "center",
+            css: {
+              position: 'absolute',
+              inset: 0,
+              zIndex: '$sticky',
+              top: placement === 'top' ? '-20px' : item.length > 0 ? size === 'lg' ? '40px' : '32px' : size === 'lg' ? '64px' : '56px',
+              // bottom: '80px',
+              width: '100%',
+              height: scrollerRef.current ? scrollerRef.current.clientHeight : '40px',
+              backgroundColor: '$bgWhite',
+              opacity: 0.8,
+              transform: placement === 'top' ? 'translate(0, -100%)' : 'none'
+            }
+          }, {
+            children: jsxRuntime.jsx(Text$1, __assign({
+              variant: "caption"
+            }, {
+              children: "Loading...."
+            }), void 0)
+          }), void 0), jsxRuntime.jsxs(OptionWrapper$2, __assign({}, getMenuProps({
+            ref: scrollerRef
+          }, {
             suppressRefError: true
           }), {
             css: {
               display: isOpen ? 'block' : 'none'
             },
-            placement: placement,
-            ref: scrollerRef
+            placement: placement
           }, {
             children: [!search && embedSearch && isOpen && jsxRuntime.jsx(SelectContainer, __assign({
               css: {
@@ -8559,25 +8582,7 @@
                 onChange: handleInputValue,
                 placeholder: searchPlaceholder
               }, void 0)
-            }), void 0), isLoading && jsxRuntime.jsx(Flex$1, __assign({
-              justify: "center",
-              align: "center",
-              css: {
-                position: 'absolute',
-                inset: 0,
-                zIndex: '$sticky',
-                width: '100%',
-                height: '100%',
-                backgroundColor: '$bgWhite',
-                opacity: 0.8
-              }
-            }, {
-              children: jsxRuntime.jsx(Text$1, __assign({
-                variant: "caption"
-              }, {
-                children: "Loading .... "
-              }), void 0)
-            }), void 0), item.length > 0 ? jsxRuntime.jsx(ConditionalWrapper, __assign({
+            }), void 0), item.length > 0 || isLoading ? jsxRuntime.jsx(ConditionalWrapper, __assign({
               condition: !!fetchData && item.length > 0,
               wrapper: function (children) {
                 return jsxRuntime.jsx(InfiniteScroll__default["default"], __assign({
@@ -16806,7 +16811,6 @@
                     children: row.cells.filter(function (cell) {
                       return !cell.column.isSubRow;
                     }).map(function (cell) {
-                      console.log(cell);
                       return jsxRuntime.jsx(TableCell$2, __assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
                         css: __assign({
                           padding: cell.column.accessor ? '20px 8px' : '20px 20px',
@@ -20871,8 +20875,8 @@
   });
   const FileExtension = styled('p', {
     color: '#C1C1C1',
-    fontSize: 64,
-    fontWeight: 600,
+    fontSize: 40,
+    fontWeight: 700,
     fontStyle: 'normal'
   });
   const ErrorMessage = styled('p', {
@@ -20881,7 +20885,7 @@
     fontWeight: 400,
     fontStyle: 'normal',
     textAlign: 'center',
-    width: 190,
+    width: 135,
     marginTop: '$spacing-02'
   });
   const IconCard = styled('div', {
@@ -20916,16 +20920,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 +20943,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 126,
+        lineNumber: 118,
         columnNumber: 5
       }
     })) : /*#__PURE__*/React__default["default"].createElement(EyeIcon, _extends({}, props, {
@@ -20956,7 +20953,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 133,
+        lineNumber: 125,
         columnNumber: 5
       }
     }));
@@ -20988,7 +20985,9 @@
     tokenKey,
     reqKey,
     resKey,
-    ratio
+    ratio,
+    disabled,
+    errorMessage
   }) => {
     const isFile = listType === 'file';
     const imgRef = React.useRef(null);
@@ -20998,7 +20997,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 +21011,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 +21055,17 @@
             height: height + 16,
             width: width + 16
           }
+        },
+        disabled: {
+          true: {
+            border: 'none',
+            background: '$formDisable',
+            cursor: 'not-allowed',
+            '&:hover': {
+              border: 'none',
+              background: '$formDisable'
+            }
+          }
         }
       }
     });
@@ -21094,7 +21113,9 @@
     });
 
     function handleClick() {
-      hiddenFileInput.current.click();
+      if (!disabled) {
+        hiddenFileInput.current.click();
+      }
     }
 
     function toggleModal() {
@@ -21144,7 +21165,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 +21187,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 +21208,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 +21218,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 +21383,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 520,
+          lineNumber: 537,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ButtonText, {
@@ -21372,7 +21393,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 521,
+          lineNumber: 538,
           columnNumber: 9
         }
       }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah ${isFile ? 'Berkas' : 'Gambar'}`));
@@ -21388,7 +21409,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 531,
+              lineNumber: 548,
               columnNumber: 16
             }
           });
@@ -21400,7 +21421,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 534,
+            lineNumber: 551,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -21410,7 +21431,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 535,
+            lineNumber: 552,
             columnNumber: 11
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -21419,7 +21440,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 536,
+            lineNumber: 553,
             columnNumber: 13
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -21432,7 +21453,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 537,
+            lineNumber: 554,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -21441,7 +21462,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 545,
+            lineNumber: 562,
             columnNumber: 15
           }
         })), /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -21449,7 +21470,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 547,
+            lineNumber: 564,
             columnNumber: 13
           }
         })), renderButtonReplace(index));
@@ -21468,7 +21489,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 558,
+              lineNumber: 575,
               columnNumber: 16
             }
           });
@@ -21479,7 +21500,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 561,
+            lineNumber: 578,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -21489,7 +21510,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 562,
+            lineNumber: 579,
             columnNumber: 11
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -21498,7 +21519,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 563,
+            lineNumber: 580,
             columnNumber: 13
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -21511,7 +21532,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 564,
+            lineNumber: 581,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -21521,14 +21542,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 +21564,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 574,
+            lineNumber: 591,
             columnNumber: 17
           }
         }, item.name))), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -21556,7 +21577,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 588,
+            lineNumber: 605,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -21565,14 +21586,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 +21609,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 609,
+          lineNumber: 626,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -21602,7 +21623,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 610,
+          lineNumber: 627,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(LoadingBar, {
@@ -21628,7 +21649,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 611,
+          lineNumber: 628,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -21636,14 +21657,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 +21677,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 +21693,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 634,
+          lineNumber: 651,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Input$1, {
@@ -21683,55 +21705,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 +21762,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 665,
+          lineNumber: 683,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -21747,7 +21770,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 666,
+          lineNumber: 684,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -21755,7 +21778,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 667,
+          lineNumber: 685,
           columnNumber: 11
         }
       })), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
@@ -21768,7 +21791,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 669,
+          lineNumber: 687,
           columnNumber: 9
         }
       }, cropperTitle), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -21779,7 +21802,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 672,
+          lineNumber: 690,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ReactCrop__default["default"], {
@@ -21790,7 +21813,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 673,
+          lineNumber: 691,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -21803,14 +21826,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 +21845,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 678,
+          lineNumber: 696,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Tooltip, {
@@ -21830,7 +21853,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 679,
+          lineNumber: 697,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ImageOutline, {
@@ -21842,7 +21865,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 680,
+          lineNumber: 698,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -21850,7 +21873,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 686,
+          lineNumber: 704,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Button$2, {
@@ -21859,7 +21882,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 687,
+          lineNumber: 705,
           columnNumber: 15
         }
       }, "Batal"), /*#__PURE__*/React__default["default"].createElement(Button$2, {
@@ -21867,7 +21890,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 +21906,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 +21915,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 704,
+        lineNumber: 722,
         columnNumber: 32
       }
     }) : renderUpload(), showCropper && renderCropper());
@@ -21901,25 +21924,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
-    */
-    progress: PropTypes__default["default"].number,
-
-    /**
-     Auto increment progress of upload process
+     Disabled state of upload.
     */
-    loading: PropTypes__default["default"].bool,
+    disabled: PropTypes__default["default"].bool,
 
     /**
      Built-in stylesheets, support for two types.
@@ -22019,6 +22038,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.
      */