@payloadcms/ui 3.0.0-canary.b8dd0db → 3.0.0-canary.bb00d64

package/dist/elements/Upload/index.js

@@ -10,6 +10,7 @@ import { fieldBaseClass } from '../../fields/shared/index.js';
 import { useForm } from '../../forms/Form/index.js';
 import { useField } from '../../forms/useField/index.js';
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
+import { EditDepthProvider } from '../../providers/EditDepth/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { useUploadEdits } from '../../providers/UploadEdits/index.js';
 import { Button } from '../Button/index.js';
@@ -90,7 +91,6 @@ export const UploadActions = t0 => {
   return t1;
 };
 export const Upload = props => {
-  const $ = _c(52);
   const {
     collectionSlug,
     customActions,
@@ -98,8 +98,6 @@ export const Upload = props => {
     onChange,
     uploadConfig
   } = props;
-  const [replacingFile, setReplacingFile] = useState(false);
-  const [fileSrc, setFileSrc] = useState(null);
   const {
     t
   } = useTranslation();
@@ -111,374 +109,261 @@ export const Upload = props => {
     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);
+  } = useField({
+    path: 'file',
+    validate
+  });
+  const [doc, setDoc] = useState(reduceFieldsToValues(initialState || {}, true));
+  const [fileSrc, setFileSrc] = useState(null);
+  const [replacingFile, setReplacingFile] = useState(false);
+  const [filename, setFilename] = useState(value?.name || '');
   const [showUrlInput, setShowUrlInput] = useState(false);
-  const [fileUrl, setFileUrl] = useState("");
-  const cursorPositionRef = useRef(null);
+  const [fileUrl, setFileUrl] = useState('');
   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 inputRef = useRef(null);
+  const handleFileChange = useCallback(newFile => {
+    if (newFile instanceof File) {
+      setFileSrc(URL.createObjectURL(newFile));
+    }
+    setValue(newFile);
+    setShowUrlInput(false);
+    if (typeof onChange === 'function') {
+      onChange(newFile);
+    }
+  }, [onChange, setValue]);
+  const renameFile = (fileToChange, newName) => {
+    // Creating a new File object with updated properties
+    const newFile_0 = new File([fileToChange], newName, {
+      type: fileToChange.type,
+      lastModified: fileToChange.lastModified
+    });
+    return newFile_0;
+  };
+  const handleFileNameChange = React.useCallback(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);
+      handleFileChange(renameFile(value, updatedFileName));
+      setFilename(updatedFileName);
+    }
+  }, [handleFileChange, value]);
+  const handleFileSelection = useCallback(files => {
+    const fileToUpload = files?.[0];
+    handleFileChange(fileToUpload);
+  }, [handleFileChange]);
+  const handleFileRemoval = useCallback(() => {
+    setReplacingFile(true);
+    handleFileChange(null);
+    setFileSrc('');
+    setFileUrl('');
+    setDoc({});
+    resetUploadEdits();
+    setShowUrlInput(false);
+  }, [handleFileChange, resetUploadEdits]);
+  const onEditsSave = useCallback(args => {
+    setModified(true);
+    updateUploadEdits(args);
+  }, [setModified, updateUploadEdits]);
+  const handleUrlSubmit = async () => {
+    if (fileUrl) {
+      try {
+        const response = await fetch(fileUrl);
+        const data = await response.blob();
+        // Extract the file name from the URL
+        const fileName = fileUrl.split('/').pop();
+        // Create a new File object from the Blob data
+        const file = new File([data], fileName, {
+          type: data.type
+        });
+        handleFileChange(file);
+      } catch (e_0) {
+        toast.error(e_0.message);
+      }
     }
   };
-  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);
+    setDoc(reduceFieldsToValues(initialState || {}, true));
+    if (initialState?.file?.value instanceof File) {
+      setFileSrc(URL.createObjectURL(initialState.file.value));
     }
-  }, 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];
-  }
+    setReplacingFile(false);
+  }, [initialState]);
   useEffect(() => {
     if (showUrlInput && urlInputRef.current) {
-      urlInputRef.current.focus();
+      // urlInputRef.current.focus() // Focus on the remote-url input field when showUrlInput is true
     }
-  }, t12);
-  const canRemoveUpload = docPermissions?.update?.permission && "delete" in docPermissions && docPermissions?.delete?.permission;
+  }, [showUrlInput]);
+  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: t13,
-    focalPoint: t14
+    crop: showCrop = true,
+    focalPoint = true
   } = 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,
+  const acceptMimeTypes = uploadConfig.mimeTypes?.join(', ');
+  return /*#__PURE__*/_jsxs("div", {
+    className: [fieldBaseClass, baseClass].filter(Boolean).join(' '),
+    children: [/*#__PURE__*/_jsx(FieldError, {
+      message: errorMessage,
+      showError: showError
+    }), doc.filename && !replacingFile && /*#__PURE__*/_jsx(FileDetails, {
+      collectionSlug: collectionSlug,
       customUploadActions: customActions,
-      doc,
+      doc: doc,
       enableAdjustments: showCrop || showFocalPoint,
       handleRemove: canRemoveUpload ? handleFileRemoval : undefined,
-      hasImageSizes,
+      hasImageSizes: hasImageSizes,
       imageCacheTag: doc.updatedAt,
-      uploadConfig
-    });
-    $[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
-      })
-    });
-    $[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
-      })
-    });
-    $[47] = doc;
-    $[48] = hasImageSizes;
-    $[49] = t;
-    $[50] = uploadConfig;
-    $[51] = t18;
-  } else {
-    t18 = $[51];
-  }
-  return _jsxs("div", {
-    className: t15.join(" "),
-    children: [_jsx(FieldError, {
-      field: null,
-      message: errorMessage,
-      showError
-    }), t16, (!doc.filename || replacingFile) && _jsxs("div", {
+      uploadConfig: uploadConfig
+    }), (!doc.filename || replacingFile) && /*#__PURE__*/_jsxs("div", {
       className: `${baseClass}__upload`,
-      children: [!value && !showUrlInput && _jsx(Dropzone, {
-        className: `${baseClass}__dropzone`,
-        mimeTypes: uploadConfig?.mimeTypes,
+      children: [!value && !showUrlInput && /*#__PURE__*/_jsx(Dropzone, {
         onChange: handleFileSelection,
-        onPasteUrlClick: handlePasteUrlClick
-      }), showUrlInput && _jsxs(React.Fragment, {
-        children: [_jsxs("div", {
+        children: /*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__dropzoneContent`,
+          children: [/*#__PURE__*/_jsxs("div", {
+            className: `${baseClass}__dropzoneButtons`,
+            children: [/*#__PURE__*/_jsx(Button, {
+              buttonStyle: "pill",
+              onClick: () => {
+                if (inputRef.current) {
+                  inputRef.current.click();
+                }
+              },
+              size: "small",
+              children: t('upload:selectFile')
+            }), /*#__PURE__*/_jsx("input", {
+              accept: acceptMimeTypes,
+              "aria-hidden": "true",
+              className: `${baseClass}__hidden-input`,
+              hidden: true,
+              onChange: e_1 => {
+                if (e_1.target.files && e_1.target.files.length > 0) {
+                  handleFileSelection(e_1.target.files);
+                }
+              },
+              ref: inputRef,
+              type: "file"
+            }), /*#__PURE__*/_jsx("span", {
+              className: `${baseClass}__orText`,
+              children: t('general:or')
+            }), /*#__PURE__*/_jsx(Button, {
+              buttonStyle: "pill",
+              onClick: () => {
+                setShowUrlInput(true);
+              },
+              size: "small",
+              children: t('upload:pasteURL')
+            })]
+          }), /*#__PURE__*/_jsxs("p", {
+            className: `${baseClass}__dragAndDropText`,
+            children: [t('general:or'), " ", t('upload:dragAndDrop')]
+          })]
+        })
+      }), showUrlInput && /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsxs("div", {
           className: `${baseClass}__remote-file-wrap`,
-          children: [_jsx("input", {
+          children: [/*#__PURE__*/_jsx("input", {
             className: `${baseClass}__remote-file`,
-            onChange: e_1 => {
-              setFileUrl(e_1.target.value);
+            onChange: e_2 => {
+              setFileUrl(e_2.target.value);
             },
             ref: urlInputRef,
             type: "text",
             value: fileUrl
-          }), _jsx("div", {
+          }), /*#__PURE__*/_jsx("div", {
             className: `${baseClass}__add-file-wrap`,
-            children: _jsx("button", {
+            children: /*#__PURE__*/_jsx("button", {
               className: `${baseClass}__add-file`,
               onClick: () => {
-                handleUrlSubmit();
+                void handleUrlSubmit();
               },
               type: "button",
-              children: t("upload:addFile")
+              children: t('upload:addFile')
             })
           })]
-        }), _jsx(Button, {
+        }), /*#__PURE__*/_jsx(Button, {
           buttonStyle: "icon-label",
           className: `${baseClass}__remove`,
           icon: "x",
           iconStyle: "with-border",
-          onClick: handleFileRemoval,
+          onClick: () => {
+            setShowUrlInput(false);
+          },
           round: true,
-          tooltip: t("general:cancel")
+          tooltip: t('general:cancel')
         })]
-      }), value && fileSrc && _jsxs(React.Fragment, {
-        children: [_jsx("div", {
+      }), value && fileSrc && /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx("div", {
           className: `${baseClass}__thumbnail-wrap`,
-          children: _jsx(Thumbnail, {
-            collectionSlug,
+          children: /*#__PURE__*/_jsx(Thumbnail, {
+            collectionSlug: collectionSlug,
             fileSrc: isImage(value.type) ? fileSrc : null
           })
-        }), _jsxs("div", {
+        }), /*#__PURE__*/_jsxs("div", {
           className: `${baseClass}__file-adjustments`,
-          children: [_jsx("input", {
+          children: [/*#__PURE__*/_jsx("input", {
             className: `${baseClass}__filename`,
             onChange: handleFileNameChange,
             type: "text",
-            value: value.name
-          }), _jsx(UploadActions, {
-            customActions,
+            value: filename || value.name
+          }), /*#__PURE__*/_jsx(UploadActions, {
+            customActions: customActions,
             enableAdjustments: showCrop || showFocalPoint,
             enablePreviewSizes: hasImageSizes && doc.filename && !replacingFile,
             mimeType: value.type
           })]
-        }), _jsx(Button, {
+        }), /*#__PURE__*/_jsx(Button, {
           buttonStyle: "icon-label",
           className: `${baseClass}__remove`,
           icon: "x",
           iconStyle: "with-border",
           onClick: handleFileRemoval,
           round: true,
-          tooltip: t("general:cancel")
+          tooltip: t('general:cancel')
         })]
       })]
-    }), t17, t18]
+    }), (value || doc.filename) && /*#__PURE__*/_jsx(EditDepthProvider, {
+      children: /*#__PURE__*/_jsx(Drawer, {
+        Header: null,
+        slug: editDrawerSlug,
+        children: /*#__PURE__*/_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: 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
+      })
+    })]
   });
 };
 function _temp(CustomAction, i) {