@payloadcms/ui 4.0.0-canary.37 → 4.0.0-canary.38

package/dist/elements/FileManager/index.js

@@ -3,8 +3,9 @@
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useModal } from '@faceless-ui/modal';
-import { formatFilesize, isImage } from 'payload/shared';
+import { formatFilesize, isImage, validateMimeType } from 'payload/shared';
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
+import { toast } from 'sonner';
 import { FieldError } from '../../fields/FieldError/index.js';
 import { fieldBaseClass } from '../../fields/shared/index.js';
 import { TextInput } from '../../fields/Text/Input.js';
@@ -33,17 +34,8 @@ import { VideoPreview } from './FilePreview/VideoPreview/index.js';
 import { FileToolbar } from './FileToolbar/index.js';
 import './index.css';
 const baseClass = 'file-manager';
-const validate = value => {
-  if (!value && value !== undefined) {
-    return 'A file is required.';
-  }
-  if (value && (!value.name || value.name === '')) {
-    return 'A file name is required.';
-  }
-  return true;
-};
 export const FileManager = t0 => {
-  const $ = _c(56);
+  const $ = _c(62);
   const {
     collectionSlug,
     initialState,
@@ -67,21 +59,43 @@ export const FileManager = t0 => {
     data
   } = useDocumentInfo();
   let t1;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = {
+  if ($[0] !== t || $[1] !== uploadConfig.mimeTypes) {
+    t1 = file => {
+      if (!file && file !== undefined) {
+        return "A file is required.";
+      }
+      if (file && (!file.name || file.name === "")) {
+        return "A file name is required.";
+      }
+      if (file instanceof File && uploadConfig.mimeTypes?.length && !validateMimeType(file.type, uploadConfig.mimeTypes)) {
+        return t("error:invalidFileType");
+      }
+      return true;
+    };
+    $[0] = t;
+    $[1] = uploadConfig.mimeTypes;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const validate = t1;
+  let t2;
+  if ($[3] !== validate) {
+    t2 = {
       path: "file",
       validate
     };
-    $[0] = t1;
+    $[3] = validate;
+    $[4] = t2;
   } else {
-    t1 = $[0];
+    t2 = $[4];
   }
   const {
     errorMessage,
     setValue,
     showError,
     value
-  } = useField(t1);
+  } = useField(t2);
   const {
     setUploadControlFile,
     setUploadControlFileName,
@@ -99,49 +113,55 @@ export const FileManager = t0 => {
   const [selectedSize, setSelectedSize] = useState(null);
   const acceptMimeTypes = uploadConfig.mimeTypes?.join(", ");
   const imageCacheTag = uploadConfig?.cacheTags && data?.updatedAt;
-  const hasImageSizes = uploadConfig?.imageSizes?.length > 0;
-  const hasResizeOptions = Boolean(uploadConfig?.resizeOptions);
+  const hasVariants = uploadConfig?.variants?.length > 0;
+  const hasImageAdjustments = Boolean(uploadConfig?.hasImageAdjustments);
   const focalPointEnabled = uploadConfig?.focalPoint === true;
   const {
-    crop: t2,
-    focalPoint: t3
+    crop: t3,
+    focalPoint: t4
   } = uploadConfig;
-  const showCrop = t2 === undefined ? true : t2;
-  const focalPoint = t3 === undefined ? true : t3;
-  const showFocalPoint = focalPoint && (hasImageSizes || hasResizeOptions || focalPointEnabled);
-  const selectedSizeData = selectedSize ? data?.sizes?.[selectedSize] : null;
+  const showCrop = t3 === undefined ? true : t3;
+  const focalPoint = t4 === undefined ? true : t4;
+  const showFocalPoint = focalPoint && (hasVariants || hasImageAdjustments || focalPointEnabled);
+  const selectedSizeData = selectedSize ? data?.variants?.[selectedSize] : null;
   const sidePanelFileSrc = selectedSizeData?.url ?? data?.thumbnailURL ?? data?.url ?? null;
   const sidePanelMimeType = data?.mimeType;
   const fileTypeIsAdjustable = !!sidePanelMimeType && isImage(sidePanelMimeType) && sidePanelMimeType !== "image/svg+xml" && sidePanelMimeType !== "image/jxl";
   const renameFile = _temp;
-  let t4;
-  if ($[1] !== setUploadControlFile || $[2] !== setUploadControlFileName || $[3] !== setUploadControlFileUrl || $[4] !== setValue) {
-    t4 = t5 => {
+  let t5;
+  if ($[5] !== setUploadControlFile || $[6] !== setUploadControlFileName || $[7] !== setUploadControlFileUrl || $[8] !== setValue || $[9] !== t || $[10] !== uploadConfig.mimeTypes) {
+    t5 = t6 => {
       const {
-        file,
-        isNewFile: t6
-      } = t5;
-      const isNewFile = t6 === undefined ? true : t6;
-      if (isNewFile && file instanceof File) {
-        setFileSrc(URL.createObjectURL(file));
+        file: file_0,
+        isNewFile: t7
+      } = t6;
+      const isNewFile = t7 === undefined ? true : t7;
+      if (file_0 instanceof File && uploadConfig.mimeTypes?.length && !validateMimeType(file_0.type, uploadConfig.mimeTypes)) {
+        toast.error(t("error:invalidFileType"));
+        return;
       }
-      setValue(file);
+      if (isNewFile && file_0 instanceof File) {
+        setFileSrc(URL.createObjectURL(file_0));
+      }
+      setValue(file_0);
       setUploadControlFileUrl("");
       setUploadControlFileName(null);
       setUploadControlFile(null);
     };
-    $[1] = setUploadControlFile;
-    $[2] = setUploadControlFileName;
-    $[3] = setUploadControlFileUrl;
-    $[4] = setValue;
-    $[5] = t4;
+    $[5] = setUploadControlFile;
+    $[6] = setUploadControlFileName;
+    $[7] = setUploadControlFileUrl;
+    $[8] = setValue;
+    $[9] = t;
+    $[10] = uploadConfig.mimeTypes;
+    $[11] = t5;
   } else {
-    t4 = $[5];
+    t5 = $[11];
   }
-  const handleFileChange = t4;
-  let t5;
-  if ($[6] !== handleFileChange || $[7] !== value) {
-    t5 = e => {
+  const handleFileChange = t5;
+  let t6;
+  if ($[12] !== handleFileChange || $[13] !== value) {
+    t6 = e => {
       const updatedFileName = e.target.value;
       if (value) {
         handleFileChange({
@@ -151,75 +171,75 @@ export const FileManager = t0 => {
         setFilename(updatedFileName);
       }
     };
-    $[6] = handleFileChange;
-    $[7] = value;
-    $[8] = t5;
+    $[12] = handleFileChange;
+    $[13] = value;
+    $[14] = t6;
   } else {
-    t5 = $[8];
+    t6 = $[14];
   }
-  const handleFileNameChange = t5;
-  let t6;
-  if ($[9] !== handleFileChange) {
-    t6 = files => handleFileChange({
+  const handleFileNameChange = t6;
+  let t7;
+  if ($[15] !== handleFileChange) {
+    t7 = files => handleFileChange({
       file: files?.[0]
     });
-    $[9] = handleFileChange;
-    $[10] = t6;
+    $[15] = handleFileChange;
+    $[16] = t7;
   } else {
-    t6 = $[10];
+    t7 = $[16];
   }
-  const handleFileSelection = t6;
-  let t7;
-  if ($[11] !== handleFileChange) {
-    t7 = file_0 => handleFileChange({
-      file: file_0
+  const handleFileSelection = t7;
+  let t8;
+  if ($[17] !== handleFileChange) {
+    t8 = file_1 => handleFileChange({
+      file: file_1
     });
-    $[11] = handleFileChange;
-    $[12] = t7;
+    $[17] = handleFileChange;
+    $[18] = t8;
   } else {
-    t7 = $[12];
+    t8 = $[18];
   }
-  const handleFileFetchedFromUrl = t7;
-  let t8;
-  if ($[13] !== collectionSlug || $[14] !== handleFileFetchedFromUrl || $[15] !== uploadConfig) {
-    t8 = {
+  const handleFileFetchedFromUrl = t8;
+  let t9;
+  if ($[19] !== collectionSlug || $[20] !== handleFileFetchedFromUrl || $[21] !== uploadConfig) {
+    t9 = {
       collectionSlug,
       onFileFetched: handleFileFetchedFromUrl,
       uploadConfig
     };
-    $[13] = collectionSlug;
-    $[14] = handleFileFetchedFromUrl;
-    $[15] = uploadConfig;
-    $[16] = t8;
+    $[19] = collectionSlug;
+    $[20] = handleFileFetchedFromUrl;
+    $[21] = uploadConfig;
+    $[22] = t9;
   } else {
-    t8 = $[16];
+    t9 = $[22];
   }
   const {
     fileUrl,
     handleUrlSubmit,
     isValidUrl,
     setFileUrl
-  } = useUploadFromUrl(t8);
-  let t9;
-  if ($[17] !== handleFileSelection || $[18] !== handleUrlSubmit || $[19] !== setFileUrl || $[20] !== uploadConfig) {
-    t9 = {
+  } = useUploadFromUrl(t9);
+  let t10;
+  if ($[23] !== handleFileSelection || $[24] !== handleUrlSubmit || $[25] !== setFileUrl || $[26] !== uploadConfig) {
+    t10 = {
       handleFileSelection,
       handleUrlSubmit,
       setFileUrl,
       uploadConfig
     };
-    $[17] = handleFileSelection;
-    $[18] = handleUrlSubmit;
-    $[19] = setFileUrl;
-    $[20] = uploadConfig;
-    $[21] = t9;
+    $[23] = handleFileSelection;
+    $[24] = handleUrlSubmit;
+    $[25] = setFileUrl;
+    $[26] = uploadConfig;
+    $[27] = t10;
   } else {
-    t9 = $[21];
+    t10 = $[27];
   }
-  const handlePasteFromClipboard = usePasteFromClipboard(t9);
-  let t10;
-  if ($[22] !== handleFileChange || $[23] !== resetUploadEdits || $[24] !== setFileUrl || $[25] !== setUploadControlFile || $[26] !== setUploadControlFileName || $[27] !== setUploadControlFileUrl) {
-    t10 = () => {
+  const handlePasteFromClipboard = usePasteFromClipboard(t10);
+  let t11;
+  if ($[28] !== handleFileChange || $[29] !== resetUploadEdits || $[30] !== setFileUrl || $[31] !== setUploadControlFile || $[32] !== setUploadControlFileName || $[33] !== setUploadControlFileUrl) {
+    t11 = () => {
       setRemovedFile(true);
       handleFileChange({
         file: null
@@ -232,92 +252,92 @@ export const FileManager = t0 => {
       setUploadControlFileName(null);
       setUploadControlFile(null);
     };
-    $[22] = handleFileChange;
-    $[23] = resetUploadEdits;
-    $[24] = setFileUrl;
-    $[25] = setUploadControlFile;
-    $[26] = setUploadControlFileName;
-    $[27] = setUploadControlFileUrl;
-    $[28] = t10;
+    $[28] = handleFileChange;
+    $[29] = resetUploadEdits;
+    $[30] = setFileUrl;
+    $[31] = setUploadControlFile;
+    $[32] = setUploadControlFileName;
+    $[33] = setUploadControlFileUrl;
+    $[34] = t11;
   } else {
-    t10 = $[28];
+    t11 = $[34];
   }
-  const handleFileRemoval = t10;
-  let t11;
-  if ($[29] !== setModified || $[30] !== updateUploadEdits) {
-    t11 = args => {
+  const handleFileRemoval = t11;
+  let t12;
+  if ($[35] !== setModified || $[36] !== updateUploadEdits) {
+    t12 = args => {
       setModified(true);
       updateUploadEdits(args);
     };
-    $[29] = setModified;
-    $[30] = updateUploadEdits;
-    $[31] = t11;
+    $[35] = setModified;
+    $[36] = updateUploadEdits;
+    $[37] = t12;
   } else {
-    t11 = $[31];
+    t12 = $[37];
   }
-  const onEditsSave = t11;
-  let t12;
-  if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
-    t12 = () => {
+  const onEditsSave = t12;
+  let t13;
+  if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
+    t13 = () => {
       setSelectedSize(null);
       setRemovedFile(false);
       setFileSrc("");
     };
-    $[32] = t12;
+    $[38] = t13;
   } else {
-    t12 = $[32];
+    t13 = $[38];
   }
-  const t13 = data?.url;
-  const t14 = data?.filename;
-  let t15;
-  if ($[33] !== t13 || $[34] !== t14) {
-    t15 = [t13, t14];
-    $[33] = t13;
-    $[34] = t14;
-    $[35] = t15;
+  const t14 = data?.url;
+  const t15 = data?.filename;
+  let t16;
+  if ($[39] !== t14 || $[40] !== t15) {
+    t16 = [t14, t15];
+    $[39] = t14;
+    $[40] = t15;
+    $[41] = t16;
   } else {
-    t15 = $[35];
+    t16 = $[41];
   }
-  useEffect(t12, t15);
-  let t16;
+  useEffect(t13, t16);
   let t17;
-  if ($[36] !== initialState) {
-    t16 = () => {
+  let t18;
+  if ($[42] !== initialState) {
+    t17 = () => {
       if (initialState?.file?.value instanceof File) {
         setFileSrc(URL.createObjectURL(initialState.file.value));
         setRemovedFile(false);
       }
     };
-    t17 = [initialState];
-    $[36] = initialState;
-    $[37] = t16;
-    $[38] = t17;
+    t18 = [initialState];
+    $[42] = initialState;
+    $[43] = t17;
+    $[44] = t18;
   } else {
-    t16 = $[37];
-    t17 = $[38];
+    t17 = $[43];
+    t18 = $[44];
   }
-  useEffect(t16, t17);
-  let t18;
+  useEffect(t17, t18);
   let t19;
-  if ($[39] !== fileSrc) {
-    t18 = () => () => {
+  let t20;
+  if ($[45] !== fileSrc) {
+    t19 = () => () => {
       if (fileSrc?.startsWith("blob:")) {
         URL.revokeObjectURL(fileSrc);
       }
     };
-    t19 = [fileSrc];
-    $[39] = fileSrc;
-    $[40] = t18;
-    $[41] = t19;
+    t20 = [fileSrc];
+    $[45] = fileSrc;
+    $[46] = t19;
+    $[47] = t20;
   } else {
-    t18 = $[40];
-    t19 = $[41];
+    t19 = $[46];
+    t20 = $[47];
   }
-  useEffect(t18, t19);
-  let t20;
+  useEffect(t19, t20);
   let t21;
-  if ($[42] !== handleUrlSubmit || $[43] !== setFileUrl || $[44] !== uploadControlFileUrl) {
-    t20 = () => {
+  let t22;
+  if ($[48] !== handleUrlSubmit || $[49] !== setFileUrl || $[50] !== uploadControlFileUrl) {
+    t21 = () => {
       const handleControlFileUrl = async () => {
         if (uploadControlFileUrl) {
           setFileUrl(uploadControlFileUrl);
@@ -326,40 +346,40 @@ export const FileManager = t0 => {
       };
       handleControlFileUrl();
     };
-    t21 = [uploadControlFileUrl, handleUrlSubmit, setFileUrl];
-    $[42] = handleUrlSubmit;
-    $[43] = setFileUrl;
-    $[44] = uploadControlFileUrl;
-    $[45] = t20;
-    $[46] = t21;
+    t22 = [uploadControlFileUrl, handleUrlSubmit, setFileUrl];
+    $[48] = handleUrlSubmit;
+    $[49] = setFileUrl;
+    $[50] = uploadControlFileUrl;
+    $[51] = t21;
+    $[52] = t22;
   } else {
-    t20 = $[45];
-    t21 = $[46];
+    t21 = $[51];
+    t22 = $[52];
   }
-  useEffect(t20, t21);
-  let t22;
+  useEffect(t21, t22);
   let t23;
-  if ($[47] !== handleFileChange || $[48] !== uploadControlFile) {
-    t22 = () => {
+  let t24;
+  if ($[53] !== handleFileChange || $[54] !== uploadControlFile) {
+    t23 = () => {
       if (uploadControlFile) {
         handleFileChange({
           file: uploadControlFile
         });
       }
     };
-    t23 = [uploadControlFile, handleFileChange];
-    $[47] = handleFileChange;
-    $[48] = uploadControlFile;
-    $[49] = t22;
-    $[50] = t23;
+    t24 = [uploadControlFile, handleFileChange];
+    $[53] = handleFileChange;
+    $[54] = uploadControlFile;
+    $[55] = t23;
+    $[56] = t24;
   } else {
-    t22 = $[49];
-    t23 = $[50];
+    t23 = $[55];
+    t24 = $[56];
   }
-  useEffect(t22, t23);
-  let t24;
-  if ($[51] !== collectionSlug || $[52] !== value?.name || $[53] !== value?.type) {
-    t24 = src => {
+  useEffect(t23, t24);
+  let t25;
+  if ($[57] !== collectionSlug || $[58] !== value?.name || $[59] !== value?.type) {
+    t25 = src => {
       const fileType = value?.type ?? "";
       if (fileType.startsWith("video/")) {
         return _jsx("div", {
@@ -395,14 +415,14 @@ export const FileManager = t0 => {
         })
       });
     };
-    $[51] = collectionSlug;
-    $[52] = value?.name;
-    $[53] = value?.type;
-    $[54] = t24;
+    $[57] = collectionSlug;
+    $[58] = value?.name;
+    $[59] = value?.type;
+    $[60] = t25;
   } else {
-    t24 = $[54];
+    t25 = $[60];
   }
-  const renderSelectedFilePreview = t24;
+  const renderSelectedFilePreview = t25;
   const drawers = _jsxs(Fragment, {
     children: [(value || data?.filename) && _jsx(EditDepthProvider, {
       children: _jsx(EditUpload, {
@@ -418,7 +438,7 @@ export const FileManager = t0 => {
         showCrop,
         showFocalPoint
       })
-    }), data && hasImageSizes && _jsx(Drawer, {
+    }), data && hasVariants && _jsx(Drawer, {
       className: `${baseClass}__preview-drawer`,
       hoverTitle: true,
       slug: sizePreviewSlug,
@@ -438,15 +458,15 @@ export const FileManager = t0 => {
     })]
   });
   const showUploadInput = Boolean(value) || removedFile || !uploadConfig?.hideFileInputOnCreate;
-  let t25;
-  if ($[55] === Symbol.for("react.memo_cache_sentinel")) {
-    t25 = [fieldBaseClass, baseClass].filter(Boolean);
-    $[55] = t25;
+  let t26;
+  if ($[61] === Symbol.for("react.memo_cache_sentinel")) {
+    t26 = [fieldBaseClass, baseClass].filter(Boolean);
+    $[61] = t26;
   } else {
-    t25 = $[55];
+    t26 = $[61];
   }
   return _jsxs("div", {
-    className: t25.join(" "),
+    className: t26.join(" "),
     children: [_jsx(FieldError, {
       message: errorMessage,
       path: "filename",
@@ -475,6 +495,7 @@ export const FileManager = t0 => {
         }) : showUploadInput ? _jsxs("div", {
           className: `${baseClass}__upload`,
           children: [!value && removedFile && data?.filename && _jsx(Button, {
+            "aria-label": t("general:cancel"),
             buttonStyle: "secondary",
             className: `${baseClass}__remove`,
             icon: "x",
@@ -493,6 +514,7 @@ export const FileManager = t0 => {
             })
           }), value && fileSrc && _jsxs(Fragment, {
             children: [_jsx(Button, {
+              "aria-label": t("general:cancel"),
               buttonStyle: "secondary",
               className: `${baseClass}__remove`,
               icon: "x",