@payloadcms/ui 3.0.0-canary.a78fca3 → 3.0.0-canary.aceaf5d

package/dist/elements/Upload/index.js

@@ -1,15 +1,17 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { isImage } from 'payload/shared';
-import React, { useCallback, useEffect, useState } from 'react';
+import { isImage, reduceFieldsToValues } from 'payload/shared';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { toast } from 'sonner';
 import { FieldError } from '../../fields/FieldError/index.js';
 import { fieldBaseClass } from '../../fields/shared/index.js';
-import { useForm } from '../../forms/Form/context.js';
+import { useForm } from '../../forms/Form/index.js';
 import { useField } from '../../forms/useField/index.js';
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
-import { useFormQueryParams } from '../../providers/FormQueryParams/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
-import { reduceFieldsToValues } from '../../utilities/reduceFieldsToValues.js';
+import { useUploadEdits } from '../../providers/UploadEdits/index.js';
 import { Button } from '../Button/index.js';
 import { Drawer, DrawerToggler } from '../Drawer/index.js';
 import { Dropzone } from '../Dropzone/index.js';
@@ -21,221 +23,466 @@ import './index.scss';
 const baseClass = 'file-field';
 export const editDrawerSlug = 'edit-upload';
 export const sizePreviewSlug = 'preview-sizes';
-const validate = (value)=>{
-    if (!value && value !== undefined) {
-        return 'A file is required.';
+const validate = value => {
+  if (!value && value !== undefined) {
+    return 'A file is required.';
+  }
+  return true;
+};
+export const UploadActions = t0 => {
+  const $ = _c(9);
+  const {
+    customActions,
+    enableAdjustments,
+    enablePreviewSizes,
+    mimeType
+  } = t0;
+  const {
+    t
+  } = useTranslation();
+  let t1;
+  let t2;
+  if ($[0] !== mimeType || $[1] !== customActions || $[2] !== enablePreviewSizes || $[3] !== t || $[4] !== enableAdjustments) {
+    t2 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const fileTypeIsAdjustable = isImage(mimeType) && mimeType !== "image/svg+xml";
+      if (!fileTypeIsAdjustable && (!customActions || customActions.length === 0)) {
+        t2 = null;
+        break bb0;
+      }
+      let t3;
+      if ($[7] !== customActions) {
+        t3 = customActions && customActions.map(_temp);
+        $[7] = customActions;
+        $[8] = t3;
+      } else {
+        t3 = $[8];
+      }
+      t1 = _jsxs("div", {
+        className: `${baseClass}__upload-actions`,
+        children: [fileTypeIsAdjustable && _jsxs(React.Fragment, {
+          children: [enablePreviewSizes && _jsx(DrawerToggler, {
+            className: `${baseClass}__previewSizes`,
+            slug: sizePreviewSlug,
+            children: t("upload:previewSizes")
+          }), enableAdjustments && _jsx(DrawerToggler, {
+            className: `${baseClass}__edit`,
+            slug: editDrawerSlug,
+            children: t("upload:editImage")
+          })]
+        }), t3]
+      });
     }
-    return true;
+    $[0] = mimeType;
+    $[1] = customActions;
+    $[2] = enablePreviewSizes;
+    $[3] = t;
+    $[4] = enableAdjustments;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t1 = $[5];
+    t2 = $[6];
+  }
+  if (t2 !== Symbol.for("react.early_return_sentinel")) {
+    return t2;
+  }
+  return t1;
 };
-export const UploadActions = ({ canEdit, showSizePreviews })=>{
-    const { t } = useTranslation();
-    return /*#__PURE__*/ _jsxs("div", {
-        className: `${baseClass}__file-mutation`,
-        children: [
-            showSizePreviews && /*#__PURE__*/ _jsx(DrawerToggler, {
-                className: `${baseClass}__previewSizes`,
-                slug: sizePreviewSlug,
-                children: t('upload:previewSizes')
-            }),
-            canEdit && /*#__PURE__*/ _jsx(DrawerToggler, {
-                className: `${baseClass}__edit`,
-                slug: editDrawerSlug,
-                children: t('upload:editImage')
-            })
-        ]
+export const Upload = props => {
+  const $ = _c(52);
+  const {
+    collectionSlug,
+    customActions,
+    initialState,
+    onChange,
+    uploadConfig
+  } = props;
+  const [replacingFile, setReplacingFile] = useState(false);
+  const [fileSrc, setFileSrc] = useState(null);
+  const {
+    t
+  } = useTranslation();
+  const {
+    setModified
+  } = useForm();
+  const {
+    resetUploadEdits,
+    updateUploadEdits,
+    uploadEdits
+  } = useUploadEdits();
+  let t0;
+  if ($[0] !== initialState) {
+    t0 = initialState || {};
+    $[0] = initialState;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  let t1;
+  if ($[2] !== t0) {
+    t1 = reduceFieldsToValues(t0, true);
+    $[2] = t0;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const [doc, setDoc] = useState(t1);
+  const {
+    docPermissions
+  } = useDocumentInfo();
+  let t2;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = {
+      path: "file",
+      validate
+    };
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const {
+    errorMessage,
+    setValue,
+    showError,
+    value
+  } = useField(t2);
+  const [showUrlInput, setShowUrlInput] = useState(false);
+  const [fileUrl, setFileUrl] = useState("");
+  const cursorPositionRef = useRef(null);
+  const urlInputRef = useRef(null);
+  let t3;
+  if ($[5] !== setValue || $[6] !== onChange) {
+    t3 = newFile => {
+      if (newFile instanceof File) {
+        setFileSrc(URL.createObjectURL(newFile));
+      }
+      setValue(newFile);
+      setShowUrlInput(false);
+      if (typeof onChange === "function") {
+        onChange(newFile);
+      }
+    };
+    $[5] = setValue;
+    $[6] = onChange;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  const handleFileChange = t3;
+  const handleFileNameChange = e => {
+    const updatedFileName = e.target.value;
+    const cursorPosition = e.target.selectionStart;
+    cursorPositionRef.current = cursorPosition;
+    if (value) {
+      const fileValue = value;
+      const newFile_0 = new File([fileValue], updatedFileName, {
+        type: fileValue.type
+      });
+      handleFileChange(newFile_0);
+    }
+  };
+  let t4;
+  if ($[8] !== value) {
+    t4 = [value];
+    $[8] = value;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  useEffect(() => {
+    const inputElement = document.querySelector(`.${baseClass}__filename`);
+    if (inputElement && cursorPositionRef.current !== null) {
+      inputElement.setSelectionRange(cursorPositionRef.current, cursorPositionRef.current);
+    }
+  }, t4);
+  let t5;
+  if ($[10] !== handleFileChange) {
+    t5 = files => {
+      const fileToUpload = files?.[0];
+      handleFileChange(fileToUpload);
+    };
+    $[10] = handleFileChange;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  const handleFileSelection = t5;
+  let t6;
+  if ($[12] !== handleFileChange || $[13] !== resetUploadEdits) {
+    t6 = () => {
+      setReplacingFile(true);
+      handleFileChange(null);
+      setFileSrc("");
+      setFileUrl("");
+      setDoc({});
+      resetUploadEdits();
+      setShowUrlInput(false);
+    };
+    $[12] = handleFileChange;
+    $[13] = resetUploadEdits;
+    $[14] = t6;
+  } else {
+    t6 = $[14];
+  }
+  const handleFileRemoval = t6;
+  let t7;
+  if ($[15] !== setModified || $[16] !== updateUploadEdits) {
+    t7 = args => {
+      setModified(true);
+      updateUploadEdits(args);
+    };
+    $[15] = setModified;
+    $[16] = updateUploadEdits;
+    $[17] = t7;
+  } else {
+    t7 = $[17];
+  }
+  const onEditsSave = t7;
+  let t8;
+  if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+    t8 = () => {
+      setShowUrlInput(prev => !prev);
+    };
+    $[18] = t8;
+  } else {
+    t8 = $[18];
+  }
+  const handlePasteUrlClick = t8;
+  let t9;
+  if ($[19] !== fileUrl || $[20] !== handleFileChange) {
+    t9 = async () => {
+      if (fileUrl) {
+        ;
+        try {
+          const response = await fetch(fileUrl);
+          const data = await response.blob();
+          const fileName = fileUrl.split("/").pop();
+          const file = new File([data], fileName, {
+            type: data.type
+          });
+          handleFileChange(file);
+        } catch (t10) {
+          const e_0 = t10;
+          toast.error(e_0.message);
+        }
+      }
+    };
+    $[19] = fileUrl;
+    $[20] = handleFileChange;
+    $[21] = t9;
+  } else {
+    t9 = $[21];
+  }
+  const handleUrlSubmit = t9;
+  let t10;
+  let t11;
+  if ($[22] !== initialState) {
+    t10 = () => {
+      setDoc(reduceFieldsToValues(initialState || {}, true));
+      if (initialState?.file?.value instanceof File) {
+        setFileSrc(URL.createObjectURL(initialState.file.value));
+      }
+      setReplacingFile(false);
+    };
+    t11 = [initialState];
+    $[22] = initialState;
+    $[23] = t10;
+    $[24] = t11;
+  } else {
+    t10 = $[23];
+    t11 = $[24];
+  }
+  useEffect(t10, t11);
+  let t12;
+  if ($[25] !== showUrlInput) {
+    t12 = [showUrlInput];
+    $[25] = showUrlInput;
+    $[26] = t12;
+  } else {
+    t12 = $[26];
+  }
+  useEffect(() => {
+    if (showUrlInput && urlInputRef.current) {
+      urlInputRef.current.focus();
+    }
+  }, t12);
+  const canRemoveUpload = docPermissions?.update?.permission && "delete" in docPermissions && docPermissions?.delete?.permission;
+  const hasImageSizes = uploadConfig?.imageSizes?.length > 0;
+  const hasResizeOptions = Boolean(uploadConfig?.resizeOptions);
+  const focalPointEnabled = uploadConfig?.focalPoint === true;
+  const {
+    crop: t13,
+    focalPoint: t14
+  } = uploadConfig;
+  const showCrop = t13 === undefined ? true : t13;
+  const focalPoint = t14 === undefined ? true : t14;
+  const showFocalPoint = focalPoint && (hasImageSizes || hasResizeOptions || focalPointEnabled);
+  let t15;
+  if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+    t15 = [fieldBaseClass, baseClass].filter(Boolean);
+    $[27] = t15;
+  } else {
+    t15 = $[27];
+  }
+  let t16;
+  if ($[28] !== doc || $[29] !== replacingFile || $[30] !== showCrop || $[31] !== showFocalPoint || $[32] !== canRemoveUpload || $[33] !== handleFileRemoval || $[34] !== collectionSlug || $[35] !== customActions || $[36] !== hasImageSizes || $[37] !== uploadConfig) {
+    t16 = doc.filename && !replacingFile && _jsx(FileDetails, {
+      collectionSlug,
+      customUploadActions: customActions,
+      doc,
+      enableAdjustments: showCrop || showFocalPoint,
+      handleRemove: canRemoveUpload ? handleFileRemoval : undefined,
+      hasImageSizes,
+      imageCacheTag: doc.updatedAt,
+      uploadConfig
     });
-};
-export const Upload = (props)=>{
-    const { collectionSlug, initialState, onChange, updatedAt, uploadConfig } = props;
-    const [replacingFile, setReplacingFile] = useState(false);
-    const [fileSrc, setFileSrc] = useState(null);
-    const { t } = useTranslation();
-    const { setModified } = useForm();
-    const { dispatchFormQueryParams, formQueryParams } = useFormQueryParams();
-    const [doc, setDoc] = useState(reduceFieldsToValues(initialState || {}, true));
-    const { docPermissions } = useDocumentInfo();
-    const { errorMessage, setValue, showError, value } = useField({
-        path: 'file',
-        validate
+    $[28] = doc;
+    $[29] = replacingFile;
+    $[30] = showCrop;
+    $[31] = showFocalPoint;
+    $[32] = canRemoveUpload;
+    $[33] = handleFileRemoval;
+    $[34] = collectionSlug;
+    $[35] = customActions;
+    $[36] = hasImageSizes;
+    $[37] = uploadConfig;
+    $[38] = t16;
+  } else {
+    t16 = $[38];
+  }
+  let t17;
+  if ($[39] !== value || $[40] !== doc || $[41] !== fileSrc || $[42] !== uploadEdits || $[43] !== onEditsSave || $[44] !== showCrop || $[45] !== showFocalPoint) {
+    t17 = (value || doc.filename) && _jsx(Drawer, {
+      Header: null,
+      slug: editDrawerSlug,
+      children: _jsx(EditUpload, {
+        fileName: value?.name || doc?.filename,
+        fileSrc: doc?.url || fileSrc,
+        imageCacheTag: doc.updatedAt,
+        initialCrop: uploadEdits?.crop ?? undefined,
+        initialFocalPoint: {
+          x: uploadEdits?.focalPoint?.x || doc.focalX || 50,
+          y: uploadEdits?.focalPoint?.y || doc.focalY || 50
+        },
+        onSave: onEditsSave,
+        showCrop,
+        showFocalPoint
+      })
     });
-    const [_crop, setCrop] = useState({
-        x: 0,
-        y: 0
+    $[39] = value;
+    $[40] = doc;
+    $[41] = fileSrc;
+    $[42] = uploadEdits;
+    $[43] = onEditsSave;
+    $[44] = showCrop;
+    $[45] = showFocalPoint;
+    $[46] = t17;
+  } else {
+    t17 = $[46];
+  }
+  let t18;
+  if ($[47] !== doc || $[48] !== hasImageSizes || $[49] !== t || $[50] !== uploadConfig) {
+    t18 = doc && hasImageSizes && _jsx(Drawer, {
+      className: `${baseClass}__previewDrawer`,
+      hoverTitle: true,
+      slug: sizePreviewSlug,
+      title: t("upload:sizesFor", {
+        label: doc?.filename
+      }),
+      children: _jsx(PreviewSizes, {
+        doc,
+        imageCacheTag: doc.updatedAt,
+        uploadConfig
+      })
     });
-    const handleFileNameChange = (e)=>{
-        const updatedFileName = e.target.value;
-        if (value) {
-            const fileValue = value;
-            // Creating a new File object with updated properties
-            const newFile = new File([
-                fileValue
-            ], updatedFileName, {
-                type: fileValue.type
-            });
-            setValue(newFile) // Updating the state with the new File object
-            ;
-        }
-    };
-    const handleFileSelection = React.useCallback((files)=>{
-        const fileToUpload = files?.[0];
-        setValue(fileToUpload);
-    }, [
-        setValue
-    ]);
-    const handleFileRemoval = useCallback(()=>{
-        setReplacingFile(true);
-        setValue(null);
-        setFileSrc('');
-    }, [
-        setValue
-    ]);
-    const onEditsSave = React.useCallback(({ crop, focalPosition })=>{
-        setCrop({
-            x: crop.x || 0,
-            y: crop.y || 0
-        });
-        setModified(true);
-        dispatchFormQueryParams({
-            type: 'SET',
-            params: {
-                uploadEdits: crop || focalPosition ? {
-                    crop: crop || null,
-                    focalPoint: focalPosition ? focalPosition : null
-                } : null
-            }
-        });
-    }, [
-        dispatchFormQueryParams,
-        setModified
-    ]);
-    useEffect(()=>{
-        setDoc(reduceFieldsToValues(initialState || {}, true));
-        setReplacingFile(false);
-    }, [
-        initialState
-    ]);
-    useEffect(()=>{
-        if (value instanceof File) {
-            const fileReader = new FileReader();
-            fileReader.onload = (e)=>{
-                const imgSrc = e.target?.result;
-                if (typeof imgSrc === 'string') {
-                    setFileSrc(imgSrc);
-                }
-            };
-            fileReader.readAsDataURL(value);
-        }
-        if (typeof onChange === 'function') {
-            onChange(value);
-        }
-    }, [
-        value,
-        onChange,
-        updatedAt
-    ]);
-    const canRemoveUpload = docPermissions?.update?.permission && 'delete' in docPermissions && docPermissions?.delete?.permission;
-    const hasImageSizes = uploadConfig?.imageSizes?.length > 0;
-    const hasResizeOptions = Boolean(uploadConfig?.resizeOptions);
-    // Explicity check if set to true, default is undefined
-    const focalPointEnabled = uploadConfig?.focalPoint === true;
-    const { crop: showCrop = true, focalPoint = true } = uploadConfig;
-    const showFocalPoint = focalPoint && (hasImageSizes || hasResizeOptions || focalPointEnabled);
-    return /*#__PURE__*/ _jsxs("div", {
-        className: [
-            fieldBaseClass,
-            baseClass
-        ].filter(Boolean).join(' '),
-        children: [
-            /*#__PURE__*/ _jsx(FieldError, {
-                message: errorMessage,
-                showError: showError
-            }),
-            doc.filename && !replacingFile && /*#__PURE__*/ _jsx(FileDetails, {
-                canEdit: showCrop || showFocalPoint,
-                collectionSlug: collectionSlug,
-                doc: doc,
-                handleRemove: canRemoveUpload ? handleFileRemoval : undefined,
-                hasImageSizes: hasImageSizes,
-                imageCacheTag: doc.updatedAt,
-                uploadConfig: uploadConfig
-            }),
-            (!doc.filename || replacingFile) && /*#__PURE__*/ _jsxs("div", {
-                className: `${baseClass}__upload`,
-                children: [
-                    !value && /*#__PURE__*/ _jsx(Dropzone, {
-                        className: `${baseClass}__dropzone`,
-                        mimeTypes: uploadConfig?.mimeTypes,
-                        onChange: handleFileSelection
-                    }),
-                    value && /*#__PURE__*/ _jsxs(React.Fragment, {
-                        children: [
-                            /*#__PURE__*/ _jsx("div", {
-                                className: `${baseClass}__thumbnail-wrap`,
-                                children: /*#__PURE__*/ _jsx(Thumbnail, {
-                                    collectionSlug: collectionSlug,
-                                    fileSrc: isImage(value.type) ? fileSrc : null
-                                })
-                            }),
-                            /*#__PURE__*/ _jsxs("div", {
-                                className: `${baseClass}__file-adjustments`,
-                                children: [
-                                    /*#__PURE__*/ _jsx("input", {
-                                        className: `${baseClass}__filename`,
-                                        onChange: handleFileNameChange,
-                                        type: "text",
-                                        value: value.name
-                                    }),
-                                    isImage(value.type) && value.type !== 'image/svg+xml' && /*#__PURE__*/ _jsx(UploadActions, {
-                                        canEdit: showCrop || showFocalPoint,
-                                        showSizePreviews: hasImageSizes && doc.filename && !replacingFile
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsx(Button, {
-                                buttonStyle: "icon-label",
-                                className: `${baseClass}__remove`,
-                                icon: "x",
-                                iconStyle: "with-border",
-                                onClick: handleFileRemoval,
-                                round: true,
-                                tooltip: t('general:cancel')
-                            })
-                        ]
-                    })
-                ]
-            }),
-            (value || doc.filename) && /*#__PURE__*/ _jsx(Drawer, {
-                Header: null,
-                slug: editDrawerSlug,
-                children: /*#__PURE__*/ _jsx(EditUpload, {
-                    fileName: value?.name || doc?.filename,
-                    fileSrc: fileSrc || doc?.url,
-                    imageCacheTag: doc.updatedAt,
-                    initialCrop: formQueryParams?.uploadEdits?.crop ?? {},
-                    initialFocalPoint: {
-                        x: formQueryParams?.uploadEdits?.focalPoint.x || doc.focalX || 50,
-                        y: formQueryParams?.uploadEdits?.focalPoint.y || doc.focalY || 50
-                    },
-                    onSave: onEditsSave,
-                    showCrop: showCrop,
-                    showFocalPoint: showFocalPoint
-                })
-            }),
-            doc && hasImageSizes && /*#__PURE__*/ _jsx(Drawer, {
-                className: `${baseClass}__previewDrawer`,
-                hoverTitle: true,
-                slug: sizePreviewSlug,
-                title: t('upload:sizesFor', {
-                    label: doc?.filename
-                }),
-                children: /*#__PURE__*/ _jsx(PreviewSizes, {
-                    doc: doc,
-                    imageCacheTag: doc.updatedAt,
-                    uploadConfig: uploadConfig
-                })
+    $[47] = doc;
+    $[48] = hasImageSizes;
+    $[49] = t;
+    $[50] = uploadConfig;
+    $[51] = t18;
+  } else {
+    t18 = $[51];
+  }
+  return _jsxs("div", {
+    className: t15.join(" "),
+    children: [_jsx(FieldError, {
+      message: errorMessage,
+      showError
+    }), t16, (!doc.filename || replacingFile) && _jsxs("div", {
+      className: `${baseClass}__upload`,
+      children: [!value && !showUrlInput && _jsx(Dropzone, {
+        className: `${baseClass}__dropzone`,
+        mimeTypes: uploadConfig?.mimeTypes,
+        onChange: handleFileSelection,
+        onPasteUrlClick: handlePasteUrlClick
+      }), showUrlInput && _jsxs(React.Fragment, {
+        children: [_jsxs("div", {
+          className: `${baseClass}__remote-file-wrap`,
+          children: [_jsx("input", {
+            className: `${baseClass}__remote-file`,
+            onChange: e_1 => {
+              setFileUrl(e_1.target.value);
+            },
+            ref: urlInputRef,
+            type: "text",
+            value: fileUrl
+          }), _jsx("div", {
+            className: `${baseClass}__add-file-wrap`,
+            children: _jsx("button", {
+              className: `${baseClass}__add-file`,
+              onClick: () => {
+                handleUrlSubmit();
+              },
+              type: "button",
+              children: t("upload:addFile")
             })
-        ]
-    });
+          })]
+        }), _jsx(Button, {
+          buttonStyle: "icon-label",
+          className: `${baseClass}__remove`,
+          icon: "x",
+          iconStyle: "with-border",
+          onClick: handleFileRemoval,
+          round: true,
+          tooltip: t("general:cancel")
+        })]
+      }), value && fileSrc && _jsxs(React.Fragment, {
+        children: [_jsx("div", {
+          className: `${baseClass}__thumbnail-wrap`,
+          children: _jsx(Thumbnail, {
+            collectionSlug,
+            fileSrc: isImage(value.type) ? fileSrc : null
+          })
+        }), _jsxs("div", {
+          className: `${baseClass}__file-adjustments`,
+          children: [_jsx("input", {
+            className: `${baseClass}__filename`,
+            onChange: handleFileNameChange,
+            type: "text",
+            value: value.name
+          }), _jsx(UploadActions, {
+            customActions,
+            enableAdjustments: showCrop || showFocalPoint,
+            enablePreviewSizes: hasImageSizes && doc.filename && !replacingFile,
+            mimeType: value.type
+          })]
+        }), _jsx(Button, {
+          buttonStyle: "icon-label",
+          className: `${baseClass}__remove`,
+          icon: "x",
+          iconStyle: "with-border",
+          onClick: handleFileRemoval,
+          round: true,
+          tooltip: t("general:cancel")
+        })]
+      })]
+    }), t17, t18]
+  });
 };
-
+function _temp(CustomAction, i) {
+  return _jsx(React.Fragment, {
+    children: CustomAction
+  }, i);
+}
 //# sourceMappingURL=index.js.map