@majoo-ui/react 2.0.1 → 2.1.0-rc.0

package/components/upload/Upload.esm.js

@@ -0,0 +1,1103 @@
+import 'core-js/modules/es.array.push.js';
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.map.js';
+import 'core-js/modules/web.url-search-params.delete.js';
+import 'core-js/modules/web.url-search-params.has.js';
+import 'core-js/modules/web.url-search-params.size.js';
+import { UploadOutline, ImageOutline, CloseFilled, EyeOutline } from '@majoo-ui/icons';
+import React__default, { useRef, useState, useEffect } from 'react';
+import { styled, colors } from '../../config/stitches.config.esm.js';
+import PropTypes from 'prop-types';
+import Box from '../../layout/box/Box.esm.js';
+import Flex from '../../layout/flex/Flex.esm.js';
+import { Button } from '../button/Button.esm.js';
+import LoadingBar from '../loadingBar/LoadingBar.esm.js';
+import ModalDialog, { ModalDialogTrigger, ModalDialogTitle, ModalDialogContent, ModalDialogFooter } from '../modalDialog/ModalDialog.esm.js';
+import ReactCrop, { centerCrop, makeAspectCrop } from 'react-image-crop';
+import { imgPreview } from './utils/imgPreview.esm.js';
+import { upload } from '../../utils/request.esm.js';
+import imageCompressionComponent from 'browser-image-compression';
+import useMediaQuery from '../../utils/useMediaQuery.esm.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Tooltip from '../tooltip/Tooltip.esm.js';
+
+const Input = styled('input', {
+  display: 'none !important'
+});
+const Children = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexDirection: 'column'
+});
+const Text = styled('p', {
+  color: '$textDisable',
+  fontSize: 12,
+  fontWeight: 400,
+  fontStyle: 'normal',
+  textAlign: 'center',
+  variants: {
+    hidden: {
+      true: {
+        display: 'none'
+      }
+    }
+  }
+});
+const FileExtension = styled('p', {
+  color: '#C1C1C1',
+  fontSize: 40,
+  fontWeight: 700,
+  fontStyle: 'normal'
+});
+const ErrorMessage = styled('p', {
+  color: '$red400',
+  fontSize: 12,
+  fontWeight: 400,
+  fontStyle: 'normal',
+  textAlign: 'center',
+  marginTop: '$spacing-02'
+});
+const IconCard = styled(Flex, {
+  borderRadius: 50,
+  background: '$bgWhite',
+  textAlign: 'center',
+  width: 32,
+  height: 32
+});
+const ButtonText = styled('button', {
+  outline: 'none',
+  border: 'none',
+  background: 'transparent',
+  fontStyle: 'normal',
+  fontWeight: 600,
+  fontSize: 14,
+  color: '$primary500',
+  cursor: 'pointer',
+  padding: '$spacing-02 $spacing-04 $spacing-02 $spacing-04',
+  borderRadius: 4,
+  '&:hover': {
+    background: '$bgSelectedLight'
+  }
+});
+const CloseIcon = styled(CloseFilled, {
+  cursor: 'pointer',
+  position: 'absolute',
+  top: 5,
+  right: 5
+});
+const EyeIcon = styled(EyeOutline, {
+  cursor: 'pointer',
+  background: 'rgba(39, 42, 42, 0.6)',
+  borderRadius: 50,
+  width: 32,
+  height: 32,
+  padding: '$spacing-02'
+});
+const IconStateFull = ({
+  customPreviewIcon,
+  ...props
+}) => {
+  const [isHover, setIsHover] = useState(false);
+  function handleEnter() {
+    setIsHover(true);
+  }
+  function handleLeave() {
+    setIsHover(false);
+  }
+  return props.type === 'close' ? /*#__PURE__*/jsx(CloseIcon, {
+    ...props,
+    color: isHover ? colors.red400 : colors.red500,
+    onMouseEnter: handleEnter,
+    onMouseLeave: handleLeave
+  }) : /*#__PURE__*/jsx(React__default.Fragment, {
+    children: customPreviewIcon ? (/*#__PURE__*/React__default.cloneElement(customPreviewIcon, {
+      ...customPreviewIcon.props,
+      ...props,
+      color: isHover ? colors.iconBrand : customPreviewIcon.props.color,
+      onMouseEnter: handleEnter,
+      onMouseLeave: handleLeave,
+      style: {
+        cursor: 'pointer',
+        background: 'rgba(39, 42, 42, 0.6)',
+        borderRadius: 50,
+        padding: '4px',
+        width: 32,
+        height: 32,
+        ...customPreviewIcon.props.style
+      }
+    })) : /*#__PURE__*/jsx(EyeIcon, {
+      ...props,
+      color: isHover ? colors.iconBrand : colors.gray400,
+      onMouseEnter: handleEnter,
+      onMouseLeave: handleLeave
+    })
+  });
+};
+const Upload = ({
+  listType,
+  multiple,
+  fileList,
+  onChange,
+  onBeforeCrop,
+  onError,
+  onSuccess,
+  onProgress,
+  onPreview,
+  onRemove,
+  children,
+  max,
+  replaceLabel,
+  width,
+  height,
+  css,
+  cropperTitle,
+  showCropper,
+  accept,
+  progress,
+  loading,
+  action,
+  customBodyRequest,
+  token,
+  tokenKey,
+  reqKey,
+  resKey,
+  ratio,
+  disabled,
+  errorMessage,
+  maxSizeMB,
+  imageCompression,
+  hiddenToggleAspect,
+  hiddenPreview,
+  fullAspectCrop,
+  isDefaultCustomRatio,
+  customPreviewIcon,
+  onPreviewIconClick,
+  maxWidthOrHeight,
+  theme,
+  uploadingLabel,
+  placeholder,
+  cancelLabel,
+  saveLabel
+}) => {
+  const isFile = listType === 'file';
+  const imgRef = useRef(null);
+  const indexReplace = useRef(null);
+  const modalTrigger = useRef(null);
+  const hiddenFileInput = useRef(null);
+  const [dragActive, setDragActive] = useState(false);
+  const [previewImage, setPreviewImage] = useState('');
+  const [fileState, setFileState] = useState({});
+  const [error, setError] = useState(null);
+  const [crop, setCrop] = useState(null);
+  const [completedCrop, setCompletedCrop] = useState(null);
+  const [aspect, setAspect] = useState(isDefaultCustomRatio ? 0 : 1);
+  const [isLoading, setIsLoading] = useState(false);
+  const [cropperImgRatio, setCropperImgRatio] = useState(null);
+  const isMobile = useMediaQuery('(max-width: 767px)');
+  useEffect(() => {
+    if (loading) {
+      setIsLoading(true);
+    }
+    if (progress && progress < 1 && progress > 100) {
+      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,
+    height: height,
+    width: width,
+    cursor: 'pointer',
+    transition: '0.2s',
+    transitionDuration: '0.5s',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    '&:hover': {
+      border: '2px dashed $primary400',
+      background: '$bgSelectedLight'
+    },
+    variants: {
+      showError: {
+        true: {
+          border: '2px dashed $red400',
+          '&:hover': {
+            border: '2px dashed  $red300',
+            background: '$bgFailed'
+          }
+        }
+      },
+      hidden: {
+        true: {
+          display: 'none !important'
+        }
+      },
+      focus: {
+        true: {
+          height: height + 16,
+          width: width + 16
+        }
+      },
+      disabled: {
+        true: {
+          border: 'none',
+          background: '$formDisable',
+          cursor: 'not-allowed',
+          '&:hover': {
+            border: 'none',
+            background: '$formDisable'
+          }
+        }
+      }
+    }
+  });
+  const FocusArea = styled('div', {
+    transition: '0.2s',
+    transitionDuration: '0.5s',
+    variants: {
+      focus: {
+        true: {
+          border: '2px solid $borderFocus',
+          padding: '$spacing-03',
+          borderRadius: 8
+        }
+      }
+    }
+  });
+  const Container = styled('div', {
+    height: height,
+    width: width,
+    background: '$white',
+    borderRadius: 8,
+    variants: {
+      error: {
+        true: {
+          border: '2px solid $red400',
+          '&:hover': {
+            border: '2px solid  $red300',
+            background: '$bgFailed'
+          }
+        }
+      }
+    }
+  });
+  const Image = styled('img', {
+    borderRadius: 8,
+    width: width,
+    height: height - 36,
+    objectFit: 'cover',
+    variants: {
+      disabled: {
+        true: {
+          height
+        }
+      }
+    }
+  });
+  const Blank = styled('div', {
+    borderRadius: 8,
+    width: width,
+    height: height - 36,
+    background: '$gray50',
+    variants: {
+      disabled: {
+        true: {
+          height
+        }
+      }
+    }
+  });
+  function handleClick() {
+    if (!disabled) {
+      hiddenFileInput.current.click();
+    }
+  }
+  function toggleModal() {
+    modalTrigger.current.click();
+  }
+  function handleUpload(files) {
+    const arrFile = [...fileList];
+    for (let i = 0; i < files.length; i++) {
+      if (max && arrFile.length >= max && indexReplace.current === null) {
+        break;
+      }
+      let newFile = files[i];
+      newFile.uid = new Date().getTime();
+      newFile.url = URL.createObjectURL(newFile);
+      if (action && (newFile.size / 1024 / 1024).toFixed(1) <= maxSizeMB) {
+        upload({
+          url: action,
+          file: newFile,
+          customBody: customBodyRequest?.(newFile),
+          token,
+          tokenKey,
+          reqKey,
+          resKey,
+          onError,
+          onSuccess,
+          onProgress,
+          progress: percent => {
+            let fileProgress = {
+              ...newFile
+            };
+            let uid = fileProgress.uid;
+            fileProgress.status = 'uploading';
+            fileProgress.percent = percent;
+            fileProgress.name = newFile.name;
+            fileProgress.type = newFile.type;
+            fileProgress.size = newFile.size;
+            let arrProgress = [...arrFile];
+            for (let i = 0; i < arrProgress.length; i++) {
+              if (arrProgress[i].uid === uid) {
+                arrProgress[i] = fileProgress;
+                arrProgress[i].name = newFile.name;
+                arrProgress[i].type = newFile.type;
+                arrProgress[i].size = newFile.size;
+              }
+            }
+            onChange?.({
+              fileList: arrProgress,
+              file: fileProgress,
+              indexReplace: indexReplace.current,
+              isReplace: indexReplace.current !== null
+            })?.then(() => setError(null))?.catch(error => setError(error.message));
+          }
+        }).then(result => {
+          let fileSuccess = {
+            ...newFile
+          };
+          let uid = fileSuccess.uid;
+          fileSuccess.url = result;
+          fileSuccess.status = 'done';
+          fileSuccess.name = newFile.name;
+          fileSuccess.type = newFile.type;
+          fileSuccess.size = newFile.size;
+          for (let j = 0; j < arrFile.length; j++) {
+            if (arrFile[j].uid === uid) {
+              arrFile[j] = fileSuccess;
+              arrFile[j].name = newFile.name;
+              arrFile[j].type = newFile.type;
+              arrFile[j].size = newFile.size;
+            }
+          }
+          onChange?.({
+            fileList: arrFile,
+            file: fileSuccess,
+            indexReplace: indexReplace.current,
+            isReplace: indexReplace.current !== null
+          })?.then(() => setError(null))?.catch(error => setError(error.message));
+        }).catch(error => {
+          let fileError = {
+            ...newFile
+          };
+          let uid = fileError.uid;
+          fileError.status = 'error';
+          fileError.error = error;
+          fileError.name = newFile.name;
+          fileError.type = newFile.type;
+          fileError.size = newFile.size;
+          for (let i = 0; i < arrFile.length; i++) {
+            if (arrFile[i].uid === uid) {
+              arrFile[i] = fileError;
+              arrFile[i].name = newFile.name;
+              arrFile[i].type = newFile.type;
+              arrFile[i].size = newFile.size;
+            }
+          }
+          onChange?.({
+            fileList: arrFile,
+            file: fileError,
+            indexReplace: indexReplace.current,
+            isReplace: indexReplace.current !== null
+          })?.then(() => setError(null))?.catch(error => setError(error.message));
+        });
+      } else {
+        onChange?.({
+          fileList: arrFile,
+          file: newFile,
+          indexReplace: indexReplace.current,
+          isReplace: indexReplace.current !== null
+        })?.then(() => setError(null))?.catch(error => setError(error.message));
+      }
+      if (indexReplace.current !== null) {
+        arrFile[indexReplace.current] = newFile;
+        indexReplace.current = null;
+      } else {
+        arrFile.push(newFile);
+      }
+    }
+  }
+  function handleChange(e) {
+    if (e.target.files && e.target.files[0]) {
+      const files = e.target.files;
+      if (isFile || !showCropper) {
+        handleUpload(files);
+      } else {
+        // program to get the dimensions of an image
+        const img = document.createElement('img');
+        img.src = URL.createObjectURL(files[0]);
+        img.size = files?.[0]?.size;
+        img.type = files?.[0]?.type;
+        img.onload = () => {
+          const imgRatio = img.width / img.height;
+          // setAspect(imgRatio);
+          setCropperImgRatio(imgRatio);
+          if (onBeforeCrop) {
+            onBeforeCrop?.(img)?.then(() => {
+              setError(null);
+              toggleModal();
+              setTimeout(() => {
+                if (imgRef.current) {
+                  const {
+                    width,
+                    height
+                  } = imgRef.current;
+                  setCrop(centerAspectCrop(width, height, ratio || imgRatio));
+                }
+              }, 300);
+              setFileState(files[0]);
+              setPreviewImage(URL.createObjectURL(files[0]));
+            })?.catch(error => setError(error?.message));
+          } else {
+            toggleModal();
+            setTimeout(() => {
+              if (imgRef.current) {
+                const {
+                  width,
+                  height
+                } = imgRef.current;
+                setCrop(centerAspectCrop(width, height, ratio || imgRatio));
+              }
+            }, 300);
+            setFileState(files[0]);
+            setPreviewImage(URL.createObjectURL(files[0]));
+          }
+        };
+        img.onerror = error => {
+          onBeforeCrop?.(img, error)?.then(() => setError(null))?.catch(error => setError(error?.message));
+        };
+      }
+    }
+  }
+  function handleCrop() {
+    if (completedCrop?.width && completedCrop?.height && imgRef.current) {
+      imgPreview(imgRef.current, completedCrop, 1, 0, ratio, fileState?.type).then(blob => {
+        const sizeMB = blob?.size / 1024 / 1024;
+        if (sizeMB < maxSizeMB || sizeMB < 1 || !imageCompression) {
+          const file = new File([blob], fileState?.name, {
+            type: blob?.type
+          });
+          handleUpload([file]);
+          setCrop(null);
+          setCompletedCrop(null);
+        } else {
+          imageCompressionComponent(blob, {
+            maxSizeMB,
+            maxWidthOrHeight,
+            maxIteration: 10,
+            useWebWorker: true,
+            alwaysKeepResolution: true
+          }).then(compressedFile => {
+            const file = new File([compressedFile], fileState?.name?.replace(/\.[^/.]+$/, '') + '.png', {
+              type: compressedFile?.type
+            });
+            handleUpload([file]);
+            setCrop(null);
+            setCompletedCrop(null);
+          }).catch(error => console.error(error?.message));
+        }
+        toggleModal();
+      }).catch(error => console.error(error?.message));
+    } else {
+      handleUpload([fileState]);
+      toggleModal();
+    }
+  }
+  function centerAspectCrop(mediaWidth, mediaHeight, aspect) {
+    return centerCrop(makeAspectCrop({
+      unit: '%',
+      width: fullAspectCrop ? 100 : 90,
+      height: fullAspectCrop ? 100 : 90
+    }, aspect, mediaWidth, mediaHeight), mediaWidth, mediaHeight);
+  }
+  function toggleAspect() {
+    if (aspect) {
+      setAspect(undefined);
+    } else if (imgRef.current) {
+      const {
+        width,
+        height
+      } = imgRef.current;
+      setAspect(ratio || cropperImgRatio);
+      setCrop(centerAspectCrop(width, height, ratio || cropperImgRatio));
+    }
+  }
+  function handleClose(file) {
+    const index = fileList.indexOf(file);
+    const newFileList = fileList.slice();
+    newFileList.splice(index, 1);
+    onChange?.({
+      fileList: newFileList,
+      file
+    });
+  }
+  function handleRemove(file) {
+    if (onRemove) {
+      onRemove(file);
+    } else {
+      handleClose(file);
+    }
+    if (hiddenFileInput) hiddenFileInput.current.value = null;
+  }
+  function handleReplace(index) {
+    indexReplace.current = index;
+    handleClick();
+  }
+  function handlePreview(file) {
+    if (onPreview) {
+      onPreview(file);
+    }
+  }
+  function handleOpenFile(file) {
+    let extension = String(file?.name?.split('.').pop())?.toLowerCase();
+    if (extension === 'pdf') {
+      window.open(file?.url);
+    } else {
+      if (file?.url) {
+        const link = document.createElement('a');
+        link.href = file.url;
+        link.setAttribute('download', file?.name);
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+      }
+    }
+  }
+  function handleDragEnter(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(true);
+  }
+  function handleDragLeave(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+  }
+  function handleDragOver(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+  function handleDrop(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+    const {
+      files
+    } = e.dataTransfer;
+    if (files && files.length) {
+      handleChange({
+        target: {
+          files
+        }
+      });
+    }
+  }
+  function renderButtonReplace(index) {
+    return /*#__PURE__*/jsx(Flex, {
+      justify: "center",
+      align: "center",
+      css: {
+        marginTop: '$spacing-03'
+      },
+      children: /*#__PURE__*/jsx(ButtonText, {
+        type: "button",
+        onClick: () => handleReplace(index),
+        buttonType: "ghost",
+        children: replaceLabel || 'Ubah Berkas'
+      })
+    });
+  }
+  const renderPicture = () => {
+    return fileList?.map((item, index) => {
+      if (item?.status === 'uploading') {
+        return /*#__PURE__*/jsx(UploadProgress, {
+          progress: item?.percent,
+          loading: item?.loading
+        }, index);
+      }
+      return /*#__PURE__*/jsxs(Container, {
+        error: item.status === 'error',
+        children: [/*#__PURE__*/jsxs(Box, {
+          css: {
+            position: 'relative'
+          },
+          children: [!disabled && /*#__PURE__*/jsx(IconStateFull, {
+            type: "close",
+            onClick: () => handleRemove(item)
+          }), !hiddenPreview && /*#__PURE__*/jsx(Box, {
+            css: {
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              transform: 'translate(-50%, -50%)'
+            },
+            children: /*#__PURE__*/jsx(IconStateFull, {
+              type: "eye",
+              onClick: () => {
+                if (onPreviewIconClick) {
+                  onPreviewIconClick(item);
+                } else {
+                  handlePreview(item);
+                }
+              },
+              customPreviewIcon: customPreviewIcon
+            })
+          }), /*#__PURE__*/jsx(Image, {
+            src: item.url,
+            alt: "upload-content",
+            disabled: disabled
+          })]
+        }), !disabled && renderButtonReplace(index)]
+      }, index);
+    });
+  };
+  const renderFile = () => {
+    return fileList?.map((item, index) => {
+      if (item?.status === 'uploading') {
+        return /*#__PURE__*/jsx(UploadProgress, {
+          progress: item?.percent,
+          loading: item?.loading
+        }, index);
+      }
+      return /*#__PURE__*/jsxs(Container, {
+        children: [/*#__PURE__*/jsxs(Box, {
+          css: {
+            position: 'relative'
+          },
+          children: [!disabled && /*#__PURE__*/jsx(IconStateFull, {
+            type: "close",
+            onClick: () => handleRemove(item)
+          }), /*#__PURE__*/jsx(Box, {
+            css: {
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              transform: 'translate(-50%, -50%)'
+            },
+            children: /*#__PURE__*/jsxs(Flex, {
+              justify: "center",
+              align: "center",
+              direction: "column",
+              children: [/*#__PURE__*/jsxs(FileExtension, {
+                children: [".", item?.name?.split('.').pop()]
+              }), /*#__PURE__*/jsx(Tooltip, {
+                label: item.name,
+                children: /*#__PURE__*/jsx(Text, {
+                  css: {
+                    color: '$textPrimary',
+                    textOverflow: 'ellipsis',
+                    overflow: 'hidden',
+                    width: 120,
+                    whiteSpace: 'nowrap',
+                    margin: '0 $spacing-07 0 $spacing-07'
+                  },
+                  children: item.name
+                })
+              })]
+            })
+          }), !hiddenPreview && /*#__PURE__*/jsx(Box, {
+            css: {
+              position: 'absolute',
+              top: '45%',
+              left: '50%',
+              transform: 'translate(-50%, -50%)'
+            },
+            children: /*#__PURE__*/jsx(IconStateFull, {
+              type: "eye",
+              onClick: () => {
+                if (onPreviewIconClick) {
+                  onPreviewIconClick(item);
+                } else {
+                  handleOpenFile(item);
+                }
+              },
+              customPreviewIcon: customPreviewIcon
+            })
+          }), /*#__PURE__*/jsx(Blank, {
+            disabled: disabled
+          })]
+        }), !disabled && renderButtonReplace(index)]
+      }, index);
+    });
+  };
+  function UploadProgress(props) {
+    const {
+      progress,
+      loading
+    } = props;
+    return /*#__PURE__*/jsx(ContainerUpload, {
+      children: /*#__PURE__*/jsxs(Flex, {
+        css: {
+          flex: 1,
+          padding: '$spacing-05',
+          marginTop: '$spacing-05'
+        },
+        gap: 2,
+        direction: "column",
+        children: [/*#__PURE__*/jsx(LoadingBar, {
+          css: {
+            '& > div': {
+              backgroundColor: '$chartLightYellow !important'
+            },
+            '& > div > div': {
+              background: '$chartYellow !important'
+            },
+            '& > p': {
+              color: '$textDisable',
+              fontSize: 12,
+              fontWeight: 400
+            }
+          },
+          description: "",
+          showProgressOnly: progress,
+          progress: progress,
+          isAuto: !progress,
+          show: loading,
+          onCompleted: () => setTimeout(() => setIsLoading(false), 1000)
+        }), /*#__PURE__*/jsx(Text, {
+          hidden: !progress,
+          children: `${progress <= 100 ? progress : 100}%`
+        }), /*#__PURE__*/jsx(Text, {
+          children: uploadingLabel || 'Berkas sedang diunggah'
+        })]
+      })
+    });
+  }
+  function renderUpload() {
+    return /*#__PURE__*/jsxs(FocusArea, {
+      focus: dragActive,
+      css: css,
+      children: [/*#__PURE__*/jsx(ContainerUpload, {
+        hidden: max ? fileList.length >= max ? true : false : false,
+        disabled: disabled,
+        showError: error !== null,
+        onClick: handleClick,
+        onDragEnter: handleDragEnter,
+        onDragLeave: handleDragLeave,
+        onDragOver: handleDragOver,
+        onDrop: handleDrop,
+        focus: dragActive,
+        children: /*#__PURE__*/jsx(Children, {
+          children: children ?? /*#__PURE__*/jsxs(React__default.Fragment, {
+            children: [/*#__PURE__*/jsx(IconCard, {
+              justify: "center",
+              align: "center",
+              children: /*#__PURE__*/jsx(UploadOutline, {
+                color: disabled ? colors.gray300 : colors.gray800
+              })
+            }), /*#__PURE__*/jsx(Text, {
+              css: {
+                margin: '$spacing-04 $spacing-05 0 $spacing-05'
+              },
+              children: placeholder || 'Pilih atau letakkan berkas di sini'
+            })]
+          })
+        })
+      }), error && /*#__PURE__*/jsx(ErrorMessage, {
+        css: {
+          width: width - 5
+        },
+        children: error
+      })]
+    });
+  }
+  function renderCropper() {
+    return /*#__PURE__*/jsxs(ModalDialog, {
+      onOpenChange: open => {
+        if (!open) {
+          setCrop(null);
+          if (hiddenFileInput) hiddenFileInput.current.value = null;
+        }
+      },
+      isMobile: isMobile,
+      theme: theme,
+      children: [/*#__PURE__*/jsx(ModalDialogTrigger, {
+        asChild: true,
+        children: /*#__PURE__*/jsx("div", {
+          ref: modalTrigger
+        })
+      }), /*#__PURE__*/jsx(ModalDialogTitle, {
+        css: {
+          textOverflow: 'ellipsis',
+          overflow: 'hidden',
+          width: 300,
+          whiteSpace: 'nowrap'
+        },
+        children: cropperTitle || 'Potong Gambar'
+      }), /*#__PURE__*/jsx(ModalDialogContent, {
+        css: {
+          padding: '$spacing-03 $spacing-07',
+          overflowY: 'auto',
+          textAlign: 'center',
+          maxHeight: 'calc(100vh - 200px)'
+        },
+        children: /*#__PURE__*/jsx(ReactCrop, {
+          crop: crop,
+          aspect: aspect,
+          onChange: c => setCrop(c),
+          onComplete: c => setCompletedCrop(c),
+          children: /*#__PURE__*/jsx(Image, {
+            ref: imgRef,
+            css: {
+              width: '100%',
+              height: '100%'
+            },
+            src: previewImage,
+            alt: "cropper-content"
+          })
+        })
+      }), /*#__PURE__*/jsx(ModalDialogFooter, {
+        children: /*#__PURE__*/jsxs(Flex, {
+          justify: "between",
+          align: "center",
+          css: {
+            flex: 1
+          },
+          children: [hiddenToggleAspect ? /*#__PURE__*/jsx(Box, {}) : /*#__PURE__*/jsx(Tooltip, {
+            label: "Default Crop Ratio",
+            children: /*#__PURE__*/jsx(ImageOutline, {
+              style: {
+                cursor: 'pointer'
+              },
+              color: aspect ? colors.iconBrand : colors.iconPrimary,
+              onClick: toggleAspect
+            })
+          }), /*#__PURE__*/jsxs(Flex, {
+            gap: 4,
+            children: [/*#__PURE__*/jsx(Button, {
+              buttonType: "secondary",
+              onClick: toggleModal,
+              children: cancelLabel || 'Batal'
+            }), /*#__PURE__*/jsx(Button, {
+              onClick: handleCrop,
+              children: saveLabel || 'Simpan'
+            })]
+          })]
+        })
+      })]
+    });
+  }
+  return /*#__PURE__*/jsxs(Flex, {
+    direction: "row",
+    gap: fileList?.length <= 1 && max === 1 ? 0 : 3,
+    wrap: "wrap",
+    css: {
+      userSelect: 'none'
+    },
+    children: [!isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/jsx(UploadProgress, {
+      progress: progress,
+      loading: loading
+    }) : renderUpload(), showCropper && renderCropper(), /*#__PURE__*/jsx(Input, {
+      type: "file",
+      accept: accept,
+      ref: hiddenFileInput,
+      onChange: handleChange,
+      multiple: multiple
+    })]
+  });
+};
+Upload.defaultProps = {
+  listType: 'file',
+  fileList: [],
+  height: 140,
+  width: 140,
+  showCropper: true,
+  tokenKey: 'Token',
+  reqKey: 'file',
+  resKey: 'url',
+  disabled: false,
+  maxSizeMB: 1,
+  imageCompression: true,
+  maxWidthOrHeight: 1024
+};
+Upload.propTypes = {
+  /**
+   Disabled state of upload.
+  */
+  disabled: PropTypes.bool,
+  /**
+   Built-in stylesheets, support for two types.
+  */
+  listType: PropTypes.oneOf(['file', 'picture']),
+  /**
+   Whether to support selected multiple file.
+   */
+  multiple: PropTypes.bool,
+  /**
+   List of files to be uploaded.
+   */
+  fileList: PropTypes.array,
+  /**
+   A callback function, can be executed when uploading state is changing.
+   */
+  onChange: PropTypes.func,
+  /**
+   A callback function, can be executed when uploading in progress.
+   `(progress) => void`
+   */
+  onProgress: PropTypes.func,
+  /**
+   A callback function, can be executed when uploading is success.
+   `(response) => void`
+   */
+  onSuccess: PropTypes.func,
+  /**
+   A callback function, can be executed when uploading is error.
+   `(error, response) => void`
+   */
+  onError: PropTypes.func,
+  /**
+   A callback function, can be executed when preview icon in picture type is clicked.
+   */
+  onPreview: PropTypes.func,
+  /**
+   A callback function, can be executed when remove icon is clicked.
+   */
+  onRemove: PropTypes.func,
+  /**
+   A custom element inside upload container.
+   */
+  children: PropTypes.element,
+  /**
+   Limit the number of uploaded files.
+   */
+  max: PropTypes.number,
+  /**
+   Limit the maximum image size in MB.
+   */
+  maxSizeMB: PropTypes.number,
+  /**
+   Limit file type of upload.
+   */
+  accept: PropTypes.string,
+  /**
+   Custom label for replace button.
+   */
+  replaceLabel: PropTypes.string,
+  /**
+   Custom width of upload container.
+   */
+  width: PropTypes.number,
+  /**
+   Custom height of upload container.
+   */
+  height: PropTypes.number,
+  /**
+   Additional css.
+   */
+  css: PropTypes.object,
+  /**
+   Custom title header of cropper modal.
+   */
+  cropperTitle: PropTypes.string,
+  /**
+   Add image cropper on upload.
+   */
+  showCropper: PropTypes.bool,
+  /**
+   Hidden toggle aspect ratio image cropper.
+   */
+  hiddenToggleAspect: PropTypes.bool,
+  /**
+   The aspect ratio of the crop, e.g. `1` for a square or `16 / 9` for landscape. Omit/pass undefined for a free-form crop.
+   */
+  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.
+   */
+  action: PropTypes.string,
+  /**
+   Custom body request to upload action.
+   */
+  customBodyRequest: PropTypes.func,
+  /**
+   Contains an authentication token for upload API.
+   */
+  token: PropTypes.string,
+  /**
+   Referencing the headers key to attach the token.
+   */
+  tokenKey: PropTypes.string,
+  /**
+   Referencing the key to attach the file to be sent.
+   */
+  reqKey: PropTypes.string,
+  /**
+   Referencing the key to get the file from the API response.
+   */
+  resKey: PropTypes.string,
+  /**
+   To compression image if file size > 1MB.
+   */
+  imageCompression: PropTypes.bool,
+  /**
+   Callback to handle before crop image.
+   */
+  onBeforeCrop: PropTypes.func,
+  /**
+   Hidden preview icon in upload.
+   */
+  hiddenPreview: PropTypes.bool,
+  /**
+   Auto full aspect ratio cropper.
+   */
+  fullAspectCrop: PropTypes.bool,
+  /**
+   Set custom ratio as Default view
+   */
+  isDefaultCustomRatio: PropTypes.bool,
+  /**
+   Set max width or height of image
+   */
+  maxWidthOrHeight: PropTypes.number,
+  /**
+   Label for the uploading state text.
+   */
+  uploadingLabel: PropTypes.string,
+  /**
+   Label for the upload area placeholder.
+   */
+  placeholder: PropTypes.string,
+  /**
+   Label for the cancel button in the cropper dialog.
+   */
+  cancelLabel: PropTypes.string,
+  /**
+   Label for the save button in the cropper dialog.
+   */
+  saveLabel: PropTypes.string
+};
+Upload.displayName = 'Upload';
+
+export { Upload as default };