@payloadcms/ui 3.0.0-canary.92e4997 → 3.0.0-canary.95fcd13

package/dist/elements/Upload/index.js

@@ -1,14 +1,14 @@
 'use client';
-import { FieldError } from '@payloadcms/ui/forms/FieldError';
-import { useFormQueryParams } from '@payloadcms/ui/providers/FormQueryParams';
-import { isImage } from 'payload/utilities';
-import React, { useCallback, useEffect, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useForm, useUploadEdits } from '@payloadcms/ui';
+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, useFormSubmitted } from '../../forms/Form/context.js';
 import { useField } from '../../forms/useField/index.js';
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
-import { reduceFieldsToValues } from '../../utilities/reduceFieldsToValues.js';
 import { Button } from '../Button/index.js';
 import { Drawer, DrawerToggler } from '../Drawer/index.js';
 import { Dropzone } from '../Dropzone/index.js';
@@ -16,6 +16,7 @@ import { EditUpload } from '../EditUpload/index.js';
 import { FileDetails } from '../FileDetails/index.js';
 import { PreviewSizes } from '../PreviewSizes/index.js';
 import { Thumbnail } from '../Thumbnail/index.js';
+import './index.scss';
 const baseClass = 'file-field';
 export const editDrawerSlug = 'edit-upload';
 export const sizePreviewSlug = 'preview-sizes';
@@ -25,38 +26,76 @@ const validate = (value)=>{
     }
     return true;
 };
-export const UploadActions = ({ canEdit, showSizePreviews })=>{
+export const UploadActions = ({ customActions, enableAdjustments, enablePreviewSizes, mimeType })=>{
     const { t } = useTranslation();
-    return /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__file-mutation`
-    }, showSizePreviews && /*#__PURE__*/ React.createElement(DrawerToggler, {
-        className: `${baseClass}__previewSizes`,
-        slug: sizePreviewSlug
-    }, t('upload:previewSizes')), canEdit && /*#__PURE__*/ React.createElement(DrawerToggler, {
-        className: `${baseClass}__edit`,
-        slug: editDrawerSlug
-    }, t('upload:editImage')));
+    const fileTypeIsAdjustable = isImage(mimeType) && mimeType !== 'image/svg+xml';
+    if (!fileTypeIsAdjustable && (!customActions || customActions.length === 0)) return null;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: `${baseClass}__upload-actions`,
+        children: [
+            fileTypeIsAdjustable && /*#__PURE__*/ _jsxs(React.Fragment, {
+                children: [
+                    enablePreviewSizes && /*#__PURE__*/ _jsx(DrawerToggler, {
+                        className: `${baseClass}__previewSizes`,
+                        slug: sizePreviewSlug,
+                        children: t('upload:previewSizes')
+                    }),
+                    enableAdjustments && /*#__PURE__*/ _jsx(DrawerToggler, {
+                        className: `${baseClass}__edit`,
+                        slug: editDrawerSlug,
+                        children: t('upload:editImage')
+                    })
+                ]
+            }),
+            customActions && customActions.map((CustomAction, i)=>{
+                return /*#__PURE__*/ _jsx(React.Fragment, {
+                    children: CustomAction
+                }, i);
+            })
+        ]
+    });
 };
 export const Upload = (props)=>{
-    const { collectionSlug, initialState, onChange, updatedAt, uploadConfig } = props;
-    const submitted = useFormSubmitted();
+    const { collectionSlug, customActions, initialState, onChange, uploadConfig } = props;
     const [replacingFile, setReplacingFile] = useState(false);
     const [fileSrc, setFileSrc] = useState(null);
     const { t } = useTranslation();
     const { setModified } = useForm();
-    const { dispatchFormQueryParams, formQueryParams } = useFormQueryParams();
+    const { resetUploadEdits, updateUploadEdits, uploadEdits } = useUploadEdits();
     const [doc, setDoc] = useState(reduceFieldsToValues(initialState || {}, true));
     const { docPermissions } = useDocumentInfo();
     const { errorMessage, setValue, showError, value } = useField({
         path: 'file',
         validate
     });
-    const [crop, setCrop] = useState({
-        x: 0,
-        y: 0
-    });
+    const [showUrlInput, setShowUrlInput] = useState(false);
+    const [fileUrl, setFileUrl] = useState('');
+    const cursorPositionRef = useRef(null);
+    const urlInputRef = useRef(null);
+    const handleFileChange = useCallback((newFile)=>{
+        if (newFile instanceof File) {
+            const fileReader = new FileReader();
+            fileReader.onload = (e)=>{
+                const imgSrc = e.target?.result;
+                if (typeof imgSrc === 'string') {
+                    setFileSrc(imgSrc);
+                }
+            };
+            fileReader.readAsDataURL(newFile);
+        }
+        setValue(newFile);
+        setShowUrlInput(false);
+        if (typeof onChange === 'function') {
+            onChange(newFile);
+        }
+    }, [
+        onChange,
+        setValue
+    ]);
     const handleFileNameChange = (e)=>{
         const updatedFileName = e.target.value;
+        const cursorPosition = e.target.selectionStart;
+        cursorPositionRef.current = cursorPosition;
         if (value) {
             const fileValue = value;
             // Creating a new File object with updated properties
@@ -65,46 +104,65 @@ export const Upload = (props)=>{
             ], updatedFileName, {
                 type: fileValue.type
             });
-            setValue(newFile) // Updating the state with the new File object
-            ;
+            handleFileChange(newFile);
         }
     };
-    const handleFileSelection = React.useCallback((files)=>{
+    useEffect(()=>{
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+        const inputElement = document.querySelector(`.${baseClass}__filename`);
+        if (inputElement && cursorPositionRef.current !== null) {
+            inputElement.setSelectionRange(cursorPositionRef.current, cursorPositionRef.current);
+        }
+    }, [
+        value
+    ]);
+    const handleFileSelection = useCallback((files)=>{
         const fileToUpload = files?.[0];
-        setValue(fileToUpload);
+        handleFileChange(fileToUpload);
     }, [
-        setValue
+        handleFileChange
     ]);
     const handleFileRemoval = useCallback(()=>{
         setReplacingFile(true);
-        setValue(null);
+        handleFileChange(null);
         setFileSrc('');
+        setFileUrl('');
+        setDoc({});
+        resetUploadEdits();
+        setShowUrlInput(false);
     }, [
-        setValue
+        handleFileChange,
+        resetUploadEdits
     ]);
-    const onEditsSave = React.useCallback(({ crop, pointPosition })=>{
-        setCrop({
-            x: crop.x || 0,
-            y: crop.y || 0
-        });
-        const zoomScale = 100 / Math.min(crop.width, crop.height);
-        document.documentElement.style.setProperty('--file-details-thumbnail--zoom', `${zoomScale}`);
-        document.documentElement.style.setProperty('--file-details-thumbnail--top-offset', `${zoomScale * (50 - crop.height / 2 - crop.y)}%`);
-        document.documentElement.style.setProperty('--file-details-thumbnail--left-offset', `${zoomScale * (50 - crop.width / 2 - crop.x)}%`);
+    const onEditsSave = useCallback((args)=>{
         setModified(true);
-        dispatchFormQueryParams({
-            type: 'SET',
-            params: {
-                uploadEdits: crop || pointPosition ? {
-                    crop: crop || null,
-                    focalPoint: pointPosition ? pointPosition : null
-                } : null
-            }
-        });
+        updateUploadEdits(args);
     }, [
-        dispatchFormQueryParams,
-        setModified
+        setModified,
+        updateUploadEdits
     ]);
+    const handlePasteUrlClick = ()=>{
+        setShowUrlInput((prev)=>!prev);
+    };
+    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) {
+                toast.error(e.message);
+            }
+        }
+    };
     useEffect(()=>{
         setDoc(reduceFieldsToValues(initialState || {}, true));
         setReplacingFile(false);
@@ -112,102 +170,156 @@ export const Upload = (props)=>{
         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);
+        if (showUrlInput && urlInputRef.current) {
+            urlInputRef.current.focus() // Focus on the remote-url input field when showUrlInput is true
+            ;
         }
     }, [
-        value,
-        onChange,
-        updatedAt
+        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: showCrop = true, focalPoint = true } = uploadConfig;
-    const showFocalPoint = focalPoint && (hasImageSizes || hasResizeOptions);
-    const lastSubmittedTime = submitted ? new Date().toISOString() : null;
-    return /*#__PURE__*/ React.createElement("div", {
+    const showFocalPoint = focalPoint && (hasImageSizes || hasResizeOptions || focalPointEnabled);
+    return /*#__PURE__*/ _jsxs("div", {
         className: [
             fieldBaseClass,
             baseClass
-        ].filter(Boolean).join(' ')
-    }, /*#__PURE__*/ React.createElement(FieldError, {
-        message: errorMessage,
-        showError: showError
-    }), doc.filename && !replacingFile && /*#__PURE__*/ React.createElement(FileDetails, {
-        canEdit: showCrop || showFocalPoint,
-        collectionSlug: collectionSlug,
-        doc: doc,
-        handleRemove: canRemoveUpload ? handleFileRemoval : undefined,
-        hasImageSizes: hasImageSizes,
-        imageCacheTag: lastSubmittedTime,
-        uploadConfig: uploadConfig
-    }), (!doc.filename || replacingFile) && /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__upload`
-    }, !value && /*#__PURE__*/ React.createElement(Dropzone, {
-        className: `${baseClass}__dropzone`,
-        mimeTypes: uploadConfig?.mimeTypes,
-        onChange: handleFileSelection
-    }), value && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__thumbnail-wrap`
-    }, /*#__PURE__*/ React.createElement(Thumbnail, {
-        collectionSlug: collectionSlug,
-        fileSrc: isImage(value.type) ? fileSrc : null
-    })), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__file-adjustments`
-    }, /*#__PURE__*/ React.createElement("input", {
-        className: `${baseClass}__filename`,
-        onChange: handleFileNameChange,
-        type: "text",
-        value: value.name
-    }), isImage(value.type) && value.type !== 'image/svg+xml' && /*#__PURE__*/ React.createElement(UploadActions, {
-        canEdit: showCrop || showFocalPoint,
-        showSizePreviews: hasImageSizes && doc.filename && !replacingFile
-    })), /*#__PURE__*/ React.createElement(Button, {
-        buttonStyle: "icon-label",
-        className: `${baseClass}__remove`,
-        icon: "x",
-        iconStyle: "with-border",
-        onClick: handleFileRemoval,
-        round: true,
-        tooltip: t('general:cancel')
-    }))), (value || doc.filename) && /*#__PURE__*/ React.createElement(Drawer, {
-        Header: null,
-        slug: editDrawerSlug
-    }, /*#__PURE__*/ React.createElement(EditUpload, {
-        doc: doc || undefined,
-        fileName: value?.name || doc?.filename,
-        fileSrc: fileSrc || doc?.url,
-        imageCacheTag: lastSubmittedTime,
-        initialCrop: formQueryParams?.uploadEdits?.crop ?? {},
-        initialFocalPoint: {
-            x: formQueryParams?.uploadEdits?.focalPoint.x || 0,
-            y: formQueryParams?.uploadEdits?.focalPoint.y || 0
-        },
-        onSave: onEditsSave,
-        showCrop: showCrop,
-        showFocalPoint: showFocalPoint
-    })), doc && hasImageSizes && /*#__PURE__*/ React.createElement(Drawer, {
-        className: `${baseClass}__previewDrawer`,
-        hoverTitle: true,
-        slug: sizePreviewSlug,
-        title: t('upload:sizesFor', {
-            label: doc?.filename
-        })
-    }, /*#__PURE__*/ React.createElement(PreviewSizes, {
-        doc: doc,
-        uploadConfig: uploadConfig
-    })));
+        ].filter(Boolean).join(' '),
+        children: [
+            /*#__PURE__*/ _jsx(FieldError, {
+                message: errorMessage,
+                showError: showError
+            }),
+            doc.filename && !replacingFile && /*#__PURE__*/ _jsx(FileDetails, {
+                collectionSlug: collectionSlug,
+                customUploadActions: customActions,
+                doc: doc,
+                enableAdjustments: showCrop || showFocalPoint,
+                handleRemove: canRemoveUpload ? handleFileRemoval : undefined,
+                hasImageSizes: hasImageSizes,
+                imageCacheTag: doc.updatedAt,
+                uploadConfig: uploadConfig
+            }),
+            (!doc.filename || replacingFile) && /*#__PURE__*/ _jsxs("div", {
+                className: `${baseClass}__upload`,
+                children: [
+                    !value && !showUrlInput && /*#__PURE__*/ _jsx(Dropzone, {
+                        className: `${baseClass}__dropzone`,
+                        mimeTypes: uploadConfig?.mimeTypes,
+                        onChange: handleFileSelection,
+                        onPasteUrlClick: handlePasteUrlClick
+                    }),
+                    showUrlInput && /*#__PURE__*/ _jsxs(React.Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: `${baseClass}__remote-file-wrap`,
+                                children: [
+                                    /*#__PURE__*/ _jsx("input", {
+                                        className: `${baseClass}__remote-file`,
+                                        onChange: (e)=>{
+                                            setFileUrl(e.target.value);
+                                        },
+                                        ref: urlInputRef,
+                                        type: "text",
+                                        value: fileUrl
+                                    }),
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: `${baseClass}__add-file-wrap`,
+                                        children: /*#__PURE__*/ _jsx("button", {
+                                            className: `${baseClass}__add-file`,
+                                            onClick: handleUrlSubmit,
+                                            type: "button",
+                                            children: t('upload:addFile')
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                buttonStyle: "icon-label",
+                                className: `${baseClass}__remove`,
+                                icon: "x",
+                                iconStyle: "with-border",
+                                onClick: handleFileRemoval,
+                                round: true,
+                                tooltip: t('general:cancel')
+                            })
+                        ]
+                    }),
+                    value && fileSrc && /*#__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
+                                    }),
+                                    /*#__PURE__*/ _jsx(UploadActions, {
+                                        customActions: customActions,
+                                        enableAdjustments: showCrop || showFocalPoint,
+                                        enablePreviewSizes: hasImageSizes && doc.filename && !replacingFile,
+                                        mimeType: value.type
+                                    })
+                                ]
+                            }),
+                            /*#__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: 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
+                })
+            })
+        ]
+    });
 };
 
 //# sourceMappingURL=index.js.map

package/dist/elements/Upload/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Upload/index.tsx"],"sourcesContent":["'use client'\nimport type { FormState, SanitizedCollectionConfig } from 'payload/types'\n\nimport { FieldError } from '@payloadcms/ui/forms/FieldError'\nimport { useFormQueryParams } from '@payloadcms/ui/providers/FormQueryParams'\nimport { isImage } from 'payload/utilities'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport { fieldBaseClass } from '../../fields/shared/index.js'\nimport { useForm, useFormSubmitted } from '../../forms/Form/context.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { reduceFieldsToValues } from '../../utilities/reduceFieldsToValues.js'\nimport { Button } from '../Button/index.js'\nimport { Drawer, DrawerToggler } from '../Drawer/index.js'\nimport { Dropzone } from '../Dropzone/index.js'\nimport { EditUpload } from '../EditUpload/index.js'\nimport { FileDetails } from '../FileDetails/index.js'\nimport { PreviewSizes } from '../PreviewSizes/index.js'\nimport { Thumbnail } from '../Thumbnail/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-field'\nexport const editDrawerSlug = 'edit-upload'\nexport const sizePreviewSlug = 'preview-sizes'\n\nconst validate = (value) => {\n  if (!value && value !== undefined) {\n    return 'A file is required.'\n  }\n\n  return true\n}\n\nexport const UploadActions = ({ canEdit, showSizePreviews }) => {\n  const { t } = useTranslation()\n  return (\n    <div className={`${baseClass}__file-mutation`}>\n      {showSizePreviews && (\n        <DrawerToggler className={`${baseClass}__previewSizes`} slug={sizePreviewSlug}>\n          {t('upload:previewSizes')}\n        </DrawerToggler>\n      )}\n      {canEdit && (\n        <DrawerToggler className={`${baseClass}__edit`} slug={editDrawerSlug}>\n          {t('upload:editImage')}\n        </DrawerToggler>\n      )}\n    </div>\n  )\n}\n\nexport type UploadProps = {\n  collectionSlug: string\n  initialState?: FormState\n  onChange?: (file?: File) => void\n  updatedAt?: string\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const Upload: React.FC<UploadProps> = (props) => {\n  const { collectionSlug, initialState, onChange, updatedAt, uploadConfig } = props\n\n  const submitted = useFormSubmitted()\n  const [replacingFile, setReplacingFile] = useState(false)\n  const [fileSrc, setFileSrc] = useState<null | string>(null)\n  const { t } = useTranslation()\n  const { setModified } = useForm()\n  const { dispatchFormQueryParams, formQueryParams } = useFormQueryParams()\n  const [doc, setDoc] = useState(reduceFieldsToValues(initialState || {}, true))\n  const { docPermissions } = useDocumentInfo()\n  const { errorMessage, setValue, showError, value } = useField<File>({\n    path: 'file',\n    validate,\n  })\n  const [crop, setCrop] = useState({ x: 0, y: 0 })\n\n  const handleFileNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const updatedFileName = e.target.value\n    if (value) {\n      const fileValue = value\n      // Creating a new File object with updated properties\n      const newFile = new File([fileValue], updatedFileName, { type: fileValue.type })\n      setValue(newFile) // Updating the state with the new File object\n    }\n  }\n\n  const handleFileSelection = React.useCallback(\n    (files: FileList) => {\n      const fileToUpload = files?.[0]\n      setValue(fileToUpload)\n    },\n    [setValue],\n  )\n\n  const handleFileRemoval = useCallback(() => {\n    setReplacingFile(true)\n    setValue(null)\n    setFileSrc('')\n  }, [setValue])\n\n  const onEditsSave = React.useCallback(\n    ({ crop, pointPosition }) => {\n      setCrop({\n        x: crop.x || 0,\n        y: crop.y || 0,\n      })\n      const zoomScale = 100 / Math.min(crop.width, crop.height)\n\n      document.documentElement.style.setProperty('--file-details-thumbnail--zoom', `${zoomScale}`)\n      document.documentElement.style.setProperty(\n        '--file-details-thumbnail--top-offset',\n        `${zoomScale * (50 - crop.height / 2 - crop.y)}%`,\n      )\n      document.documentElement.style.setProperty(\n        '--file-details-thumbnail--left-offset',\n        `${zoomScale * (50 - crop.width / 2 - crop.x)}%`,\n      )\n      setModified(true)\n      dispatchFormQueryParams({\n        type: 'SET',\n        params: {\n          uploadEdits:\n            crop || pointPosition\n              ? {\n                  crop: crop || null,\n                  focalPoint: pointPosition ? pointPosition : null,\n                }\n              : null,\n        },\n      })\n    },\n    [dispatchFormQueryParams, setModified],\n  )\n\n  useEffect(() => {\n    setDoc(reduceFieldsToValues(initialState || {}, true))\n    setReplacingFile(false)\n  }, [initialState])\n\n  useEffect(() => {\n    if (value instanceof File) {\n      const fileReader = new FileReader()\n      fileReader.onload = (e) => {\n        const imgSrc = e.target?.result\n\n        if (typeof imgSrc === 'string') {\n          setFileSrc(imgSrc)\n        }\n      }\n      fileReader.readAsDataURL(value)\n    }\n\n    if (typeof onChange === 'function') {\n      onChange(value)\n    }\n  }, [value, onChange, updatedAt])\n\n  const canRemoveUpload =\n    docPermissions?.update?.permission &&\n    'delete' in docPermissions &&\n    docPermissions?.delete?.permission\n\n  const hasImageSizes = uploadConfig?.imageSizes?.length > 0\n  const hasResizeOptions = Boolean(uploadConfig?.resizeOptions)\n\n  const { crop: showCrop = true, focalPoint = true } = uploadConfig\n\n  const showFocalPoint = focalPoint && (hasImageSizes || hasResizeOptions)\n\n  const lastSubmittedTime = submitted ? new Date().toISOString() : null\n\n  return (\n    <div className={[fieldBaseClass, baseClass].filter(Boolean).join(' ')}>\n      <FieldError message={errorMessage} showError={showError} />\n      {doc.filename && !replacingFile && (\n        <FileDetails\n          canEdit={showCrop || showFocalPoint}\n          collectionSlug={collectionSlug}\n          doc={doc}\n          handleRemove={canRemoveUpload ? handleFileRemoval : undefined}\n          hasImageSizes={hasImageSizes}\n          imageCacheTag={lastSubmittedTime}\n          uploadConfig={uploadConfig}\n        />\n      )}\n      {(!doc.filename || replacingFile) && (\n        <div className={`${baseClass}__upload`}>\n          {!value && (\n            <Dropzone\n              className={`${baseClass}__dropzone`}\n              mimeTypes={uploadConfig?.mimeTypes}\n              onChange={handleFileSelection}\n            />\n          )}\n\n          {value && (\n            <React.Fragment>\n              <div className={`${baseClass}__thumbnail-wrap`}>\n                <Thumbnail\n                  collectionSlug={collectionSlug}\n                  fileSrc={isImage(value.type) ? fileSrc : null}\n                />\n              </div>\n              <div className={`${baseClass}__file-adjustments`}>\n                <input\n                  className={`${baseClass}__filename`}\n                  onChange={handleFileNameChange}\n                  type=\"text\"\n                  value={value.name}\n                />\n\n                {isImage(value.type) && value.type !== 'image/svg+xml' && (\n                  <UploadActions\n                    canEdit={showCrop || showFocalPoint}\n                    showSizePreviews={hasImageSizes && doc.filename && !replacingFile}\n                  />\n                )}\n              </div>\n              <Button\n                buttonStyle=\"icon-label\"\n                className={`${baseClass}__remove`}\n                icon=\"x\"\n                iconStyle=\"with-border\"\n                onClick={handleFileRemoval}\n                round\n                tooltip={t('general:cancel')}\n              />\n            </React.Fragment>\n          )}\n        </div>\n      )}\n      {(value || doc.filename) && (\n        <Drawer Header={null} slug={editDrawerSlug}>\n          <EditUpload\n            doc={doc || undefined}\n            fileName={value?.name || doc?.filename}\n            fileSrc={fileSrc || doc?.url}\n            imageCacheTag={lastSubmittedTime}\n            initialCrop={formQueryParams?.uploadEdits?.crop ?? {}}\n            initialFocalPoint={{\n              x: formQueryParams?.uploadEdits?.focalPoint.x || 0,\n              y: formQueryParams?.uploadEdits?.focalPoint.y || 0,\n            }}\n            onSave={onEditsSave}\n            showCrop={showCrop}\n            showFocalPoint={showFocalPoint}\n          />\n        </Drawer>\n      )}\n      {doc && hasImageSizes && (\n        <Drawer\n          className={`${baseClass}__previewDrawer`}\n          hoverTitle\n          slug={sizePreviewSlug}\n          title={t('upload:sizesFor', { label: doc?.filename })}\n        >\n          <PreviewSizes doc={doc} uploadConfig={uploadConfig} />\n        </Drawer>\n      )}\n    </div>\n  )\n}\n"],"names":["FieldError","useFormQueryParams","isImage","React","useCallback","useEffect","useState","fieldBaseClass","useForm","useFormSubmitted","useField","useDocumentInfo","useTranslation","reduceFieldsToValues","Button","Drawer","DrawerToggler","Dropzone","EditUpload","FileDetails","PreviewSizes","Thumbnail","baseClass","editDrawerSlug","sizePreviewSlug","validate","value","undefined","UploadActions","canEdit","showSizePreviews","t","div","className","slug","Upload","props","collectionSlug","initialState","onChange","updatedAt","uploadConfig","submitted","replacingFile","setReplacingFile","fileSrc","setFileSrc","setModified","dispatchFormQueryParams","formQueryParams","doc","setDoc","docPermissions","errorMessage","setValue","showError","path","crop","setCrop","x","y","handleFileNameChange","e","updatedFileName","target","fileValue","newFile","File","type","handleFileSelection","files","fileToUpload","handleFileRemoval","onEditsSave","pointPosition","zoomScale","Math","min","width","height","document","documentElement","style","setProperty","params","uploadEdits","focalPoint","fileReader","FileReader","onload","imgSrc","result","readAsDataURL","canRemoveUpload","update","permission","delete","hasImageSizes","imageSizes","length","hasResizeOptions","Boolean","resizeOptions","showCrop","showFocalPoint","lastSubmittedTime","Date","toISOString","filter","join","message","filename","handleRemove","imageCacheTag","mimeTypes","Fragment","input","name","buttonStyle","icon","iconStyle","onClick","round","tooltip","Header","fileName","url","initialCrop","initialFocalPoint","onSave","hoverTitle","title","label"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../src/elements/Upload/index.tsx"],"sourcesContent":["'use client'\nimport type { FormState, SanitizedCollectionConfig, UploadEdits } from 'payload'\n\nimport { useForm, useUploadEdits } from '@payloadcms/ui'\nimport { isImage, reduceFieldsToValues } from 'payload/shared'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport { FieldError } from '../../fields/FieldError/index.js'\nimport { fieldBaseClass } from '../../fields/shared/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { Drawer, DrawerToggler } from '../Drawer/index.js'\nimport { Dropzone } from '../Dropzone/index.js'\nimport { EditUpload } from '../EditUpload/index.js'\nimport { FileDetails } from '../FileDetails/index.js'\nimport { PreviewSizes } from '../PreviewSizes/index.js'\nimport { Thumbnail } from '../Thumbnail/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-field'\nexport const editDrawerSlug = 'edit-upload'\nexport const sizePreviewSlug = 'preview-sizes'\n\nconst validate = (value) => {\n  if (!value && value !== undefined) {\n    return 'A file is required.'\n  }\n\n  return true\n}\n\ntype UploadActionsArgs = {\n  customActions?: React.ReactNode[]\n  enableAdjustments: boolean\n  enablePreviewSizes: boolean\n  mimeType: string\n}\n\nexport const UploadActions = ({\n  customActions,\n  enableAdjustments,\n  enablePreviewSizes,\n  mimeType,\n}: UploadActionsArgs) => {\n  const { t } = useTranslation()\n\n  const fileTypeIsAdjustable = isImage(mimeType) && mimeType !== 'image/svg+xml'\n\n  if (!fileTypeIsAdjustable && (!customActions || customActions.length === 0)) return null\n\n  return (\n    <div className={`${baseClass}__upload-actions`}>\n      {fileTypeIsAdjustable && (\n        <React.Fragment>\n          {enablePreviewSizes && (\n            <DrawerToggler className={`${baseClass}__previewSizes`} slug={sizePreviewSlug}>\n              {t('upload:previewSizes')}\n            </DrawerToggler>\n          )}\n          {enableAdjustments && (\n            <DrawerToggler className={`${baseClass}__edit`} slug={editDrawerSlug}>\n              {t('upload:editImage')}\n            </DrawerToggler>\n          )}\n        </React.Fragment>\n      )}\n\n      {customActions &&\n        customActions.map((CustomAction, i) => {\n          return <React.Fragment key={i}>{CustomAction}</React.Fragment>\n        })}\n    </div>\n  )\n}\n\nexport type UploadProps = {\n  collectionSlug: string\n  customActions?: React.ReactNode[]\n  initialState?: FormState\n  onChange?: (file?: File) => void\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const Upload: React.FC<UploadProps> = (props) => {\n  const { collectionSlug, customActions, initialState, onChange, uploadConfig } = props\n\n  const [replacingFile, setReplacingFile] = useState(false)\n  const [fileSrc, setFileSrc] = useState<null | string>(null)\n  const { t } = useTranslation()\n  const { setModified } = useForm()\n  const { resetUploadEdits, updateUploadEdits, uploadEdits } = useUploadEdits()\n  const [doc, setDoc] = useState(reduceFieldsToValues(initialState || {}, true))\n  const { docPermissions } = useDocumentInfo()\n  const { errorMessage, setValue, showError, value } = useField<File>({\n    path: 'file',\n    validate,\n  })\n\n  const [showUrlInput, setShowUrlInput] = useState(false)\n  const [fileUrl, setFileUrl] = useState<string>('')\n\n  const cursorPositionRef = useRef(null)\n  const urlInputRef = useRef<HTMLInputElement>(null)\n\n  const handleFileChange = useCallback(\n    (newFile: File) => {\n      if (newFile instanceof File) {\n        const fileReader = new FileReader()\n        fileReader.onload = (e) => {\n          const imgSrc = e.target?.result\n\n          if (typeof imgSrc === 'string') {\n            setFileSrc(imgSrc)\n          }\n        }\n        fileReader.readAsDataURL(newFile)\n      }\n\n      setValue(newFile)\n      setShowUrlInput(false)\n\n      if (typeof onChange === 'function') {\n        onChange(newFile)\n      }\n    },\n    [onChange, setValue],\n  )\n\n  const handleFileNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const updatedFileName = e.target.value\n    const cursorPosition = e.target.selectionStart\n\n    cursorPositionRef.current = cursorPosition\n\n    if (value) {\n      const fileValue = value\n      // Creating a new File object with updated properties\n      const newFile = new File([fileValue], updatedFileName, { type: fileValue.type })\n      handleFileChange(newFile)\n    }\n  }\n\n  useEffect(() => {\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n    const inputElement = document.querySelector(`.${baseClass}__filename`) as HTMLInputElement\n    if (inputElement && cursorPositionRef.current !== null) {\n      inputElement.setSelectionRange(cursorPositionRef.current, cursorPositionRef.current)\n    }\n  }, [value])\n\n  const handleFileSelection = useCallback(\n    (files: FileList) => {\n      const fileToUpload = files?.[0]\n      handleFileChange(fileToUpload)\n    },\n    [handleFileChange],\n  )\n\n  const handleFileRemoval = useCallback(() => {\n    setReplacingFile(true)\n    handleFileChange(null)\n    setFileSrc('')\n    setFileUrl('')\n    setDoc({})\n    resetUploadEdits()\n    setShowUrlInput(false)\n  }, [handleFileChange, resetUploadEdits])\n\n  const onEditsSave = useCallback(\n    (args: UploadEdits) => {\n      setModified(true)\n      updateUploadEdits(args)\n    },\n    [setModified, updateUploadEdits],\n  )\n\n  const handlePasteUrlClick = () => {\n    setShowUrlInput((prev) => !prev)\n  }\n\n  const handleUrlSubmit = async () => {\n    if (fileUrl) {\n      try {\n        const response = await fetch(fileUrl)\n        const data = await response.blob()\n\n        // Extract the file name from the URL\n        const fileName = fileUrl.split('/').pop()\n\n        // Create a new File object from the Blob data\n        const file = new File([data], fileName, { type: data.type })\n        handleFileChange(file)\n      } catch (e) {\n        toast.error(e.message)\n      }\n    }\n  }\n\n  useEffect(() => {\n    setDoc(reduceFieldsToValues(initialState || {}, true))\n    setReplacingFile(false)\n  }, [initialState])\n\n  useEffect(() => {\n    if (showUrlInput && urlInputRef.current) {\n      urlInputRef.current.focus() // Focus on the remote-url input field when showUrlInput is true\n    }\n  }, [showUrlInput])\n\n  const canRemoveUpload =\n    docPermissions?.update?.permission &&\n    'delete' in docPermissions &&\n    docPermissions?.delete?.permission\n\n  const hasImageSizes = uploadConfig?.imageSizes?.length > 0\n  const hasResizeOptions = Boolean(uploadConfig?.resizeOptions)\n  // Explicity check if set to true, default is undefined\n  const focalPointEnabled = uploadConfig?.focalPoint === true\n\n  const { crop: showCrop = true, focalPoint = true } = uploadConfig\n\n  const showFocalPoint = focalPoint && (hasImageSizes || hasResizeOptions || focalPointEnabled)\n\n  return (\n    <div className={[fieldBaseClass, baseClass].filter(Boolean).join(' ')}>\n      <FieldError message={errorMessage} showError={showError} />\n      {doc.filename && !replacingFile && (\n        <FileDetails\n          collectionSlug={collectionSlug}\n          customUploadActions={customActions}\n          doc={doc}\n          enableAdjustments={showCrop || showFocalPoint}\n          handleRemove={canRemoveUpload ? handleFileRemoval : undefined}\n          hasImageSizes={hasImageSizes}\n          imageCacheTag={doc.updatedAt}\n          uploadConfig={uploadConfig}\n        />\n      )}\n      {(!doc.filename || replacingFile) && (\n        <div className={`${baseClass}__upload`}>\n          {!value && !showUrlInput && (\n            <Dropzone\n              className={`${baseClass}__dropzone`}\n              mimeTypes={uploadConfig?.mimeTypes}\n              onChange={handleFileSelection}\n              onPasteUrlClick={handlePasteUrlClick}\n            />\n          )}\n          {showUrlInput && (\n            <React.Fragment>\n              <div className={`${baseClass}__remote-file-wrap`}>\n                {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}\n                <input\n                  className={`${baseClass}__remote-file`}\n                  onChange={(e) => {\n                    setFileUrl(e.target.value)\n                  }}\n                  ref={urlInputRef}\n                  type=\"text\"\n                  value={fileUrl}\n                />\n                <div className={`${baseClass}__add-file-wrap`}>\n                  <button\n                    className={`${baseClass}__add-file`}\n                    onClick={handleUrlSubmit}\n                    type=\"button\"\n                  >\n                    {t('upload:addFile')}\n                  </button>\n                </div>\n              </div>\n              <Button\n                buttonStyle=\"icon-label\"\n                className={`${baseClass}__remove`}\n                icon=\"x\"\n                iconStyle=\"with-border\"\n                onClick={handleFileRemoval}\n                round\n                tooltip={t('general:cancel')}\n              />\n            </React.Fragment>\n          )}\n          {value && fileSrc && (\n            <React.Fragment>\n              <div className={`${baseClass}__thumbnail-wrap`}>\n                <Thumbnail\n                  collectionSlug={collectionSlug}\n                  fileSrc={isImage(value.type) ? fileSrc : null}\n                />\n              </div>\n              <div className={`${baseClass}__file-adjustments`}>\n                {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}\n                <input\n                  className={`${baseClass}__filename`}\n                  onChange={handleFileNameChange}\n                  type=\"text\"\n                  value={value.name}\n                />\n                <UploadActions\n                  customActions={customActions}\n                  enableAdjustments={showCrop || showFocalPoint}\n                  enablePreviewSizes={hasImageSizes && doc.filename && !replacingFile}\n                  mimeType={value.type}\n                />\n              </div>\n              <Button\n                buttonStyle=\"icon-label\"\n                className={`${baseClass}__remove`}\n                icon=\"x\"\n                iconStyle=\"with-border\"\n                onClick={handleFileRemoval}\n                round\n                tooltip={t('general:cancel')}\n              />\n            </React.Fragment>\n          )}\n        </div>\n      )}\n      {(value || doc.filename) && (\n        <Drawer Header={null} slug={editDrawerSlug}>\n          <EditUpload\n            fileName={value?.name || doc?.filename}\n            fileSrc={doc?.url || fileSrc}\n            imageCacheTag={doc.updatedAt}\n            initialCrop={uploadEdits?.crop ?? undefined}\n            initialFocalPoint={{\n              x: uploadEdits?.focalPoint?.x || doc.focalX || 50,\n              y: uploadEdits?.focalPoint?.y || doc.focalY || 50,\n            }}\n            onSave={onEditsSave}\n            showCrop={showCrop}\n            showFocalPoint={showFocalPoint}\n          />\n        </Drawer>\n      )}\n      {doc && hasImageSizes && (\n        <Drawer\n          className={`${baseClass}__previewDrawer`}\n          hoverTitle\n          slug={sizePreviewSlug}\n          title={t('upload:sizesFor', { label: doc?.filename })}\n        >\n          <PreviewSizes doc={doc} imageCacheTag={doc.updatedAt} uploadConfig={uploadConfig} />\n        </Drawer>\n      )}\n    </div>\n  )\n}\n"],"names":["useForm","useUploadEdits","isImage","reduceFieldsToValues","React","useCallback","useEffect","useRef","useState","toast","FieldError","fieldBaseClass","useField","useDocumentInfo","useTranslation","Button","Drawer","DrawerToggler","Dropzone","EditUpload","FileDetails","PreviewSizes","Thumbnail","baseClass","editDrawerSlug","sizePreviewSlug","validate","value","undefined","UploadActions","customActions","enableAdjustments","enablePreviewSizes","mimeType","t","fileTypeIsAdjustable","length","div","className","Fragment","slug","map","CustomAction","i","Upload","props","collectionSlug","initialState","onChange","uploadConfig","replacingFile","setReplacingFile","fileSrc","setFileSrc","setModified","resetUploadEdits","updateUploadEdits","uploadEdits","doc","setDoc","docPermissions","errorMessage","setValue","showError","path","showUrlInput","setShowUrlInput","fileUrl","setFileUrl","cursorPositionRef","urlInputRef","handleFileChange","newFile","File","fileReader","FileReader","onload","e","imgSrc","target","result","readAsDataURL","handleFileNameChange","updatedFileName","cursorPosition","selectionStart","current","fileValue","type","inputElement","document","querySelector","setSelectionRange","handleFileSelection","files","fileToUpload","handleFileRemoval","onEditsSave","args","handlePasteUrlClick","prev","handleUrlSubmit","response","fetch","data","blob","fileName","split","pop","file","error","message","focus","canRemoveUpload","update","permission","delete","hasImageSizes","imageSizes","hasResizeOptions","Boolean","resizeOptions","focalPointEnabled","focalPoint","crop","showCrop","showFocalPoint","filter","join","filename","customUploadActions","handleRemove","imageCacheTag","updatedAt","mimeTypes","onPasteUrlClick","input","ref","button","onClick","buttonStyle","icon","iconStyle","round","tooltip","name","Header","url","initialCrop","initialFocalPoint","x","focalX","y","focalY","onSave","hoverTitle","title","label"],"mappings":"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"}

package/dist/elements/Upload/index.scss

@@ -4,6 +4,7 @@
   position: relative;
   margin-bottom: var(--base);
   background: var(--theme-elevation-50);
+  border-radius: var(--style-radius-s);
 
   &__upload {
     display: flex;
@@ -30,23 +31,13 @@
     }
   }
 
-  .file-details {
-    img {
-      position: relative;
-      min-width: 100%;
-      height: 100%;
-      transform: scale(var(--file-details-thumbnail--zoom));
-      top: var(--file-details-thumbnail--top-offset);
-      left: var(--file-details-thumbnail--left-offset);
-    }
-  }
-
   &__remove {
     margin: calc($baseline * 1.5) $baseline $baseline 0;
     place-self: flex-start;
   }
 
-  &__file-adjustments {
+  &__file-adjustments,
+  &__remote-file-wrap {
     padding: $baseline;
     width: 100%;
     display: flex;
@@ -54,12 +45,14 @@
     gap: calc(var(--base) / 2);
   }
 
-  &__filename {
+  &__filename,
+  &__remote-file {
     @include formInput;
     background-color: var(--theme-bg);
   }
 
-  &__file-mutation {
+  &__upload-actions,
+  &__add-file-wrap {
     display: flex;
     gap: calc(var(--base) / 2);
     flex-wrap: wrap;
@@ -68,7 +61,7 @@
       cursor: pointer;
       background-color: var(--theme-elevation-150);
       border: none;
-      border-radius: $style-radius-s;
+      border-radius: $style-radius-m;
       padding: base(0.25) base(0.5);
       text-wrap: nowrap;
       overflow: hidden;

package/dist/elements/ViewDescription/index.js

@@ -1,7 +1,9 @@
 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import React from 'react';
 import { useTranslation } from '../../providers/Translation/index.js';
+import './index.scss';
 export function isComponent(description) {
     return /*#__PURE__*/ React.isValidElement(description);
 }
@@ -10,12 +12,13 @@ export const ViewDescription = (props)=>{
     const { description } = props;
     if (isComponent(description)) {
         const Description = description;
-        return /*#__PURE__*/ React.createElement(Description, null);
+        return /*#__PURE__*/ _jsx(Description, {});
     }
     if (description) {
-        return /*#__PURE__*/ React.createElement("div", {
-            className: "view-description"
-        }, typeof description === 'function' ? description() : getTranslation(description, i18n));
+        return /*#__PURE__*/ _jsx("div", {
+            className: "view-description",
+            children: typeof description === 'function' ? description() : getTranslation(description, i18n)
+        });
     }
     return null;
 };