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

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';
@@ -8128,6 +8128,7 @@ const SelectOption = styled('div', {
   borderRadius: '$lg',
   padding: '12px 16px',
   overflowY: 'auto',
+  minHeight: '40px',
   height: '100%'
 });
 const SelectItem = styled('div', {
@@ -8379,7 +8380,7 @@ function InputSelect(_a) {
                 },
                 disabled
               }),
-              onClick: getToggleButtonProps().onClick
+              onClick: !isOpen ? getToggleButtonProps().onClick : undefined
             }, void 0)
           }), void 0) : jsx(Button$1, Object.assign({}, getToggleButtonProps({
             disabled: disabled || readOnly
@@ -8400,14 +8401,36 @@ function InputSelect(_a) {
               children: placeholder
             }), void 0)
           }), void 0), handleDownOption()]
-        }), void 0), jsxs(OptionWrapper$2, Object.assign({}, getMenuProps({}, {
+        }), void 0), isOpen && isLoading && jsx(Flex$1, Object.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: jsx(Text$1, Object.assign({
+            variant: "caption"
+          }, {
+            children: "Loading...."
+          }), void 0)
+        }), void 0), jsxs(OptionWrapper$2, Object.assign({}, getMenuProps({
+          ref: scrollerRef
+        }, {
           suppressRefError: true
         }), {
           css: {
             display: isOpen ? 'block' : 'none'
           },
-          placement: placement,
-          ref: scrollerRef
+          placement: placement
         }, {
           children: [!search && embedSearch && isOpen && jsx(SelectContainer, Object.assign({
             css: {
@@ -8423,25 +8446,7 @@ function InputSelect(_a) {
               onChange: handleInputValue,
               placeholder: searchPlaceholder
             }, void 0)
-          }), void 0), isLoading && jsx(Flex$1, Object.assign({
-            justify: "center",
-            align: "center",
-            css: {
-              position: 'absolute',
-              inset: 0,
-              zIndex: '$sticky',
-              width: '100%',
-              height: '100%',
-              backgroundColor: '$bgWhite',
-              opacity: 0.8
-            }
-          }, {
-            children: jsx(Text$1, Object.assign({
-              variant: "caption"
-            }, {
-              children: "Loading .... "
-            }), void 0)
-          }), void 0), item.length > 0 ? jsx(ConditionalWrapper, Object.assign({
+          }), void 0), item.length > 0 || isLoading ? jsx(ConditionalWrapper, Object.assign({
             condition: !!fetchData && item.length > 0,
             wrapper: children => jsx(InfiniteScroll, Object.assign({
               loadMore: _ => {
@@ -16476,7 +16481,6 @@ function Table({
                   }), void 0)
                 }), void 0)), jsx(TableRow$2, Object.assign({}, row.getRowProps(), {
                   children: row.cells.filter(cell => !cell.column.isSubRow).map(cell => {
-                    console.log(cell);
                     return jsx(TableCell$2, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
                       css: Object.assign({
                         padding: cell.column.accessor ? '20px 8px' : '20px 20px',
@@ -20498,8 +20502,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 +20512,7 @@ const ErrorMessage = styled('p', {
   fontWeight: 400,
   fontStyle: 'normal',
   textAlign: 'center',
-  width: 190,
+  width: 135,
   marginTop: '$spacing-02'
 });
 const IconCard = styled('div', {
@@ -20543,16 +20547,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 +20570,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 +20580,7 @@ const IconStateFull = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 133,
+      lineNumber: 125,
       columnNumber: 5
     }
   }));
@@ -20615,7 +20612,9 @@ const Upload = ({
   tokenKey,
   reqKey,
   resKey,
-  ratio
+  ratio,
+  disabled,
+  errorMessage
 }) => {
   const isFile = listType === 'file';
   const imgRef = useRef(null);
@@ -20625,7 +20624,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 +20638,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 +20682,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 +20740,9 @@ const Upload = ({
   });
 
   function handleClick() {
-    hiddenFileInput.current.click();
+    if (!disabled) {
+      hiddenFileInput.current.click();
+    }
   }
 
   function toggleModal() {
@@ -20771,7 +20792,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 +20814,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 +20835,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 +20845,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 +21010,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 520,
+        lineNumber: 537,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -20999,7 +21020,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 +21036,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 531,
+            lineNumber: 548,
             columnNumber: 16
           }
         });
@@ -21027,7 +21048,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 534,
+          lineNumber: 551,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -21037,7 +21058,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 535,
+          lineNumber: 552,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -21046,7 +21067,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 536,
+          lineNumber: 553,
           columnNumber: 13
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -21059,7 +21080,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 537,
+          lineNumber: 554,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -21068,7 +21089,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 545,
+          lineNumber: 562,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default.createElement(Image, {
@@ -21076,7 +21097,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 547,
+          lineNumber: 564,
           columnNumber: 13
         }
       })), renderButtonReplace(index));
@@ -21095,7 +21116,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 558,
+            lineNumber: 575,
             columnNumber: 16
           }
         });
@@ -21106,7 +21127,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 561,
+          lineNumber: 578,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -21116,7 +21137,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 562,
+          lineNumber: 579,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -21125,7 +21146,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 563,
+          lineNumber: 580,
           columnNumber: 13
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -21138,7 +21159,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 564,
+          lineNumber: 581,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21148,14 +21169,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 +21191,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 574,
+          lineNumber: 591,
           columnNumber: 17
         }
       }, item.name))), /*#__PURE__*/React__default.createElement(Box, {
@@ -21183,7 +21204,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 588,
+          lineNumber: 605,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -21192,14 +21213,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 +21236,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 609,
+        lineNumber: 626,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21229,7 +21250,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 610,
+        lineNumber: 627,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(LoadingBar, {
@@ -21255,7 +21276,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 611,
+        lineNumber: 628,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Text, {
@@ -21263,14 +21284,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 +21304,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 +21320,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 634,
+        lineNumber: 651,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Input$1, {
@@ -21310,55 +21332,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 +21389,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 665,
+        lineNumber: 683,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -21374,7 +21397,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 666,
+        lineNumber: 684,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -21382,7 +21405,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 667,
+        lineNumber: 685,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
@@ -21395,7 +21418,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 669,
+        lineNumber: 687,
         columnNumber: 9
       }
     }, cropperTitle), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -21406,7 +21429,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 672,
+        lineNumber: 690,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ReactCrop, {
@@ -21417,7 +21440,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 673,
+        lineNumber: 691,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Image, {
@@ -21430,14 +21453,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 +21472,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 678,
+        lineNumber: 696,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Tooltip, {
@@ -21457,7 +21480,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 679,
+        lineNumber: 697,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(ImageOutline, {
@@ -21469,7 +21492,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 680,
+        lineNumber: 698,
         columnNumber: 15
       }
     })), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21477,7 +21500,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 686,
+        lineNumber: 704,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Button$2, {
@@ -21486,7 +21509,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 687,
+        lineNumber: 705,
         columnNumber: 15
       }
     }, "Batal"), /*#__PURE__*/React__default.createElement(Button$2, {
@@ -21494,7 +21517,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 +21533,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 +21542,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 704,
+      lineNumber: 722,
       columnNumber: 32
     }
   }) : renderUpload(), showCropper && renderCropper());
@@ -21528,25 +21551,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
-  */
-  progress: PropTypes.number,
-
-  /**
-   Auto increment progress of upload process
+   Disabled state of upload.
   */
-  loading: PropTypes.bool,
+  disabled: PropTypes.bool,
 
   /**
    Built-in stylesheets, support for two types.
@@ -21646,6 +21665,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.
    */