@payloadcms/ui 3.0.0-beta.24 → 3.0.0-beta.26

package/dist/elements/Autosave/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Autosave/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAE/E,OAAO,KAAsC,MAAM,OAAO,CAAA;AAU1D,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,CAAC,EAAE,sBAAsB,CAAA;IACnC,MAAM,CAAC,EAAE,kBAAkB,CAAA;IAC3B,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACpB,qBAAqB,EAAE,MAAM,CAAA;CAC9B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAkHpC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Autosave/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAG/E,OAAO,KAAsC,MAAM,OAAO,CAAA;AAU1D,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,CAAC,EAAE,sBAAsB,CAAA;IACnC,MAAM,CAAC,EAAE,kBAAkB,CAAA;IAC3B,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACpB,qBAAqB,EAAE,MAAM,CAAA;CAC9B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuIpC,CAAA"}

package/dist/elements/Autosave/index.js

@@ -1,4 +1,5 @@
 'use client';
+import { useDocumentEvents } from '@payloadcms/ui/providers/DocumentEvents';
 import React, { useEffect, useRef, useState } from 'react';
 import { useAllFormFields, useFormModified } from '../../forms/Form/context.js';
 import { useDebounce } from '../../hooks/useDebounce.js';
@@ -12,6 +13,7 @@ const baseClass = 'autosave';
 export const Autosave = ({ id, collection, global: globalDoc, publishedDocUpdatedAt })=>{
     const { routes: { api }, serverURL } = useConfig();
     const { docConfig, getVersions, versions } = useDocumentInfo();
+    const { reportUpdate } = useDocumentEvents();
     const versionsConfig = docConfig?.versions;
     const [fields] = useAllFormFields();
     const modified = useFormModified();
@@ -43,12 +45,15 @@ export const Autosave = ({ id, collection, global: globalDoc, publishedDocUpdate
                 setSaving(true);
                 let url;
                 let method;
+                let entitySlug;
                 if (collection && id) {
-                    url = `${serverURL}${api}/${collection.slug}/${id}?draft=true&autosave=true&locale=${localeRef.current}`;
+                    entitySlug = collection.slug;
+                    url = `${serverURL}${api}/${entitySlug}/${id}?draft=true&autosave=true&locale=${localeRef.current}`;
                     method = 'PATCH';
                 }
                 if (globalDoc) {
-                    url = `${serverURL}${api}/globals/${globalDoc.slug}?draft=true&autosave=true&locale=${localeRef.current}`;
+                    entitySlug = globalDoc.slug;
+                    url = `${serverURL}${api}/globals/${entitySlug}?draft=true&autosave=true&locale=${localeRef.current}`;
                     method = 'POST';
                 }
                 if (url) {
@@ -68,7 +73,13 @@ export const Autosave = ({ id, collection, global: globalDoc, publishedDocUpdate
                                 method
                             });
                             if (res.status === 200) {
-                                setLastSaved(new Date().getTime());
+                                const newDate = new Date();
+                                setLastSaved(newDate.getTime());
+                                reportUpdate({
+                                    id,
+                                    entitySlug,
+                                    updatedAt: newDate.toISOString()
+                                });
                                 void getVersions();
                             }
                         }
@@ -86,6 +97,7 @@ export const Autosave = ({ id, collection, global: globalDoc, publishedDocUpdate
         api,
         collection,
         globalDoc,
+        reportUpdate,
         id,
         getVersions
     ]);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Autosave/index.tsx"],"sourcesContent":["'use client'\n// TODO: abstract the `next/navigation` dependency out from this component\nimport type { ClientCollectionConfig, ClientGlobalConfig } from 'payload/types'\n\nimport React, { useEffect, useRef, useState } from 'react'\n\nimport { useAllFormFields, useFormModified } from '../../forms/Form/context.js'\nimport { useDebounce } from '../../hooks/useDebounce.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { formatTimeToNow } from '../../utilities/formatDate.js'\nimport { reduceFieldsToValues } from '../../utilities/reduceFieldsToValues.js'\nimport './index.scss'\n\nconst baseClass = 'autosave'\n\nexport type Props = {\n  collection?: ClientCollectionConfig\n  global?: ClientGlobalConfig\n  id?: number | string\n  publishedDocUpdatedAt: string\n}\n\nexport const Autosave: React.FC<Props> = ({\n  id,\n  collection,\n  global: globalDoc,\n  publishedDocUpdatedAt,\n}) => {\n  const {\n    routes: { api },\n    serverURL,\n  } = useConfig()\n  const { docConfig, getVersions, versions } = useDocumentInfo()\n  const versionsConfig = docConfig?.versions\n\n  const [fields] = useAllFormFields()\n  const modified = useFormModified()\n  const { code: locale } = useLocale()\n  const { i18n, t } = useTranslation()\n\n  let interval = 800\n  if (versionsConfig.drafts && versionsConfig?.drafts?.autosave)\n    interval = versionsConfig.drafts.autosave.interval\n\n  const [saving, setSaving] = useState(false)\n  const [lastSaved, setLastSaved] = useState<number>()\n  const debouncedFields = useDebounce(fields, interval)\n  const fieldRef = useRef(fields)\n  const modifiedRef = useRef(modified)\n  const localeRef = useRef(locale)\n\n  // Store fields in ref so the autosave func\n  // can always retrieve the most to date copies\n  // after the timeout has executed\n  fieldRef.current = fields\n\n  // Store modified in ref so the autosave func\n  // can bail out if modified becomes false while\n  // timing out during autosave\n  modifiedRef.current = modified\n\n  // Store locale in ref so the autosave func\n  // can always retrieve the most to date locale\n  localeRef.current = locale\n\n  // When debounced fields change, autosave\n  useEffect(() => {\n    const autosave = () => {\n      if (modified) {\n        setSaving(true)\n\n        let url: string\n        let method: string\n\n        if (collection && id) {\n          url = `${serverURL}${api}/${collection.slug}/${id}?draft=true&autosave=true&locale=${localeRef.current}`\n          method = 'PATCH'\n        }\n\n        if (globalDoc) {\n          url = `${serverURL}${api}/globals/${globalDoc.slug}?draft=true&autosave=true&locale=${localeRef.current}`\n          method = 'POST'\n        }\n\n        if (url) {\n          setTimeout(async () => {\n            if (modifiedRef.current) {\n              const body = {\n                ...reduceFieldsToValues(fieldRef.current, true),\n                _status: 'draft',\n              }\n              const res = await fetch(url, {\n                body: JSON.stringify(body),\n                credentials: 'include',\n                headers: {\n                  'Accept-Language': i18n.language,\n                  'Content-Type': 'application/json',\n                },\n                method,\n              })\n\n              if (res.status === 200) {\n                setLastSaved(new Date().getTime())\n                void getVersions()\n              }\n            }\n\n            setSaving(false)\n          }, 1000)\n        }\n      }\n    }\n\n    void autosave()\n  }, [i18n, debouncedFields, modified, serverURL, api, collection, globalDoc, id, getVersions])\n\n  useEffect(() => {\n    if (versions?.docs?.[0]) {\n      setLastSaved(new Date(versions.docs[0].updatedAt).getTime())\n    } else if (publishedDocUpdatedAt) {\n      setLastSaved(new Date(publishedDocUpdatedAt).getTime())\n    }\n  }, [publishedDocUpdatedAt, versions])\n\n  return (\n    <div className={baseClass}>\n      {saving && t('general:saving')}\n      {!saving && lastSaved && (\n        <React.Fragment>\n          {t('version:lastSavedAgo', {\n            distance: formatTimeToNow({ date: lastSaved, i18n }),\n          })}\n        </React.Fragment>\n      )}\n    </div>\n  )\n}\n"],"names":["React","useEffect","useRef","useState","useAllFormFields","useFormModified","useDebounce","useConfig","useDocumentInfo","useLocale","useTranslation","formatTimeToNow","reduceFieldsToValues","baseClass","Autosave","id","collection","global","globalDoc","publishedDocUpdatedAt","routes","api","serverURL","docConfig","getVersions","versions","versionsConfig","fields","modified","code","locale","i18n","t","interval","drafts","autosave","saving","setSaving","lastSaved","setLastSaved","debouncedFields","fieldRef","modifiedRef","localeRef","current","url","method","slug","setTimeout","body","_status","res","fetch","JSON","stringify","credentials","headers","language","status","Date","getTime","docs","updatedAt","div","className","Fragment","distance","date"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../src/elements/Autosave/index.tsx"],"sourcesContent":["'use client'\n// TODO: abstract the `next/navigation` dependency out from this component\nimport type { ClientCollectionConfig, ClientGlobalConfig } from 'payload/types'\n\nimport { useDocumentEvents } from '@payloadcms/ui/providers/DocumentEvents'\nimport React, { useEffect, useRef, useState } from 'react'\n\nimport { useAllFormFields, useFormModified } from '../../forms/Form/context.js'\nimport { useDebounce } from '../../hooks/useDebounce.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { formatTimeToNow } from '../../utilities/formatDate.js'\nimport { reduceFieldsToValues } from '../../utilities/reduceFieldsToValues.js'\nimport './index.scss'\n\nconst baseClass = 'autosave'\n\nexport type Props = {\n  collection?: ClientCollectionConfig\n  global?: ClientGlobalConfig\n  id?: number | string\n  publishedDocUpdatedAt: string\n}\n\nexport const Autosave: React.FC<Props> = ({\n  id,\n  collection,\n  global: globalDoc,\n  publishedDocUpdatedAt,\n}) => {\n  const {\n    routes: { api },\n    serverURL,\n  } = useConfig()\n  const { docConfig, getVersions, versions } = useDocumentInfo()\n  const { reportUpdate } = useDocumentEvents()\n  const versionsConfig = docConfig?.versions\n\n  const [fields] = useAllFormFields()\n  const modified = useFormModified()\n  const { code: locale } = useLocale()\n  const { i18n, t } = useTranslation()\n\n  let interval = 800\n  if (versionsConfig.drafts && versionsConfig?.drafts?.autosave)\n    interval = versionsConfig.drafts.autosave.interval\n\n  const [saving, setSaving] = useState(false)\n  const [lastSaved, setLastSaved] = useState<number>()\n  const debouncedFields = useDebounce(fields, interval)\n  const fieldRef = useRef(fields)\n  const modifiedRef = useRef(modified)\n  const localeRef = useRef(locale)\n\n  // Store fields in ref so the autosave func\n  // can always retrieve the most to date copies\n  // after the timeout has executed\n  fieldRef.current = fields\n\n  // Store modified in ref so the autosave func\n  // can bail out if modified becomes false while\n  // timing out during autosave\n  modifiedRef.current = modified\n\n  // Store locale in ref so the autosave func\n  // can always retrieve the most to date locale\n  localeRef.current = locale\n\n  // When debounced fields change, autosave\n  useEffect(() => {\n    const autosave = () => {\n      if (modified) {\n        setSaving(true)\n\n        let url: string\n        let method: string\n        let entitySlug: string\n\n        if (collection && id) {\n          entitySlug = collection.slug\n          url = `${serverURL}${api}/${entitySlug}/${id}?draft=true&autosave=true&locale=${localeRef.current}`\n          method = 'PATCH'\n        }\n\n        if (globalDoc) {\n          entitySlug = globalDoc.slug\n          url = `${serverURL}${api}/globals/${entitySlug}?draft=true&autosave=true&locale=${localeRef.current}`\n          method = 'POST'\n        }\n\n        if (url) {\n          setTimeout(async () => {\n            if (modifiedRef.current) {\n              const body = {\n                ...reduceFieldsToValues(fieldRef.current, true),\n                _status: 'draft',\n              }\n              const res = await fetch(url, {\n                body: JSON.stringify(body),\n                credentials: 'include',\n                headers: {\n                  'Accept-Language': i18n.language,\n                  'Content-Type': 'application/json',\n                },\n                method,\n              })\n\n              if (res.status === 200) {\n                const newDate = new Date()\n                setLastSaved(newDate.getTime())\n                reportUpdate({\n                  id,\n                  entitySlug,\n                  updatedAt: newDate.toISOString(),\n                })\n                void getVersions()\n              }\n            }\n\n            setSaving(false)\n          }, 1000)\n        }\n      }\n    }\n\n    void autosave()\n  }, [\n    i18n,\n    debouncedFields,\n    modified,\n    serverURL,\n    api,\n    collection,\n    globalDoc,\n    reportUpdate,\n    id,\n    getVersions,\n  ])\n\n  useEffect(() => {\n    if (versions?.docs?.[0]) {\n      setLastSaved(new Date(versions.docs[0].updatedAt).getTime())\n    } else if (publishedDocUpdatedAt) {\n      setLastSaved(new Date(publishedDocUpdatedAt).getTime())\n    }\n  }, [publishedDocUpdatedAt, versions])\n\n  return (\n    <div className={baseClass}>\n      {saving && t('general:saving')}\n      {!saving && lastSaved && (\n        <React.Fragment>\n          {t('version:lastSavedAgo', {\n            distance: formatTimeToNow({ date: lastSaved, i18n }),\n          })}\n        </React.Fragment>\n      )}\n    </div>\n  )\n}\n"],"names":["useDocumentEvents","React","useEffect","useRef","useState","useAllFormFields","useFormModified","useDebounce","useConfig","useDocumentInfo","useLocale","useTranslation","formatTimeToNow","reduceFieldsToValues","baseClass","Autosave","id","collection","global","globalDoc","publishedDocUpdatedAt","routes","api","serverURL","docConfig","getVersions","versions","reportUpdate","versionsConfig","fields","modified","code","locale","i18n","t","interval","drafts","autosave","saving","setSaving","lastSaved","setLastSaved","debouncedFields","fieldRef","modifiedRef","localeRef","current","url","method","entitySlug","slug","setTimeout","body","_status","res","fetch","JSON","stringify","credentials","headers","language","status","newDate","Date","getTime","updatedAt","toISOString","docs","div","className","Fragment","distance","date"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/elements/DocumentControls/index.scss

@@ -5,7 +5,7 @@
   position: sticky;
   top: 0;
   width: 100%;
-  z-index: 2;
+  z-index: 5;
   display: flex;
   align-items: center;
 
@@ -27,7 +27,7 @@
     align-items: center;
     gap: var(--base);
     padding-bottom: 1px;
-    z-index: 1;
+    z-index: 4;
     height: var(--doc-controls-height);
   }
 

package/dist/elements/EditUpload/index.d.ts

@@ -1,14 +1,26 @@
 import type { Data } from 'payload/types';
+import type CropType from 'react-image-crop';
 import React from 'react';
 import 'react-image-crop/dist/ReactCrop.css';
 import './index.scss';
+type FocalPosition = {
+    x: number;
+    y: number;
+};
 export type EditUploadProps = {
     doc?: Data;
     fileName: string;
     fileSrc: string;
     imageCacheTag?: string;
+    initialCrop?: CropType;
+    initialFocalPoint?: FocalPosition;
+    onSave?: ({ crop, pointPosition }: {
+        crop: CropType;
+        pointPosition: FocalPosition;
+    }) => void;
     showCrop?: boolean;
     showFocalPoint?: boolean;
 };
 export declare const EditUpload: React.FC<EditUploadProps>;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/EditUpload/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/EditUpload/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAIzC,OAAO,KAA2B,MAAM,OAAO,CAAA;AAE/C,OAAO,qCAAqC,CAAA;AAO5C,OAAO,cAAc,CAAA;AAerB,MAAM,MAAM,eAAe,GAAG;IAC5B,GAAG,CAAC,EAAE,IAAI,CAAA;IACV,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;IACf,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAwPhD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/EditUpload/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,KAAK,QAAQ,MAAM,kBAAkB,CAAA;AAG5C,OAAO,KAA2B,MAAM,OAAO,CAAA;AAE/C,OAAO,qCAAqC,CAAA;AAM5C,OAAO,cAAc,CAAA;AAerB,KAAK,aAAa,GAAG;IACnB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,GAAG,CAAC,EAAE,IAAI,CAAA;IACV,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;IACf,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,WAAW,CAAC,EAAE,QAAQ,CAAA;IACtB,iBAAiB,CAAC,EAAE,aAAa,CAAA;IACjC,MAAM,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,EAAE;QAAE,IAAI,EAAE,QAAQ,CAAC;QAAC,aAAa,EAAE,aAAa,CAAA;KAAE,KAAK,IAAI,CAAA;IAC5F,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAA;AAeD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAgPhD,CAAA"}

package/dist/elements/EditUpload/index.js

@@ -4,7 +4,6 @@ import React, { useRef, useState } from 'react';
 import ReactCrop from 'react-image-crop';
 import { editDrawerSlug } from '../../elements/Upload/index.js';
 import { Plus } from '../../icons/Plus/index.js';
-import { useFormQueryParams } from '../../providers/FormQueryParams/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { Button } from '../Button/index.js';
 const baseClass = 'edit-upload';
@@ -16,23 +15,29 @@ const Input = ({ name, onChange, value })=>/*#__PURE__*/ React.createElement("di
         type: "number",
         value: value
     }));
-export const EditUpload = ({ fileName, fileSrc, imageCacheTag, showCrop, showFocalPoint })=>{
-    const { Modal, useModal } = facelessUIImport;
+const defaultCrop = {
+    height: 100,
+    unit: '%',
+    width: 100,
+    x: 0,
+    y: 0
+};
+const defaultPointPosition = {
+    x: 50,
+    y: 50
+};
+export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, initialFocalPoint, onSave, showCrop, showFocalPoint })=>{
+    const { useModal } = facelessUIImport;
     const { closeModal } = useModal();
     const { t } = useTranslation();
-    const { dispatchFormQueryParams, formQueryParams } = useFormQueryParams();
-    const { uploadEdits } = formQueryParams || {};
-    const [crop, setCrop] = useState({
-        height: uploadEdits?.crop?.height || 100,
-        unit: '%',
-        width: uploadEdits?.crop?.width || 100,
-        x: uploadEdits?.crop?.x || 0,
-        y: uploadEdits?.crop?.y || 0
-    });
-    const [pointPosition, setPointPosition] = useState({
-        x: uploadEdits?.focalPoint?.x || 50,
-        y: uploadEdits?.focalPoint?.y || 50
-    });
+    const [crop, setCrop] = useState(()=>({
+            ...defaultCrop,
+            ...initialCrop
+        }));
+    const [pointPosition, setPointPosition] = useState(()=>({
+            ...defaultPointPosition,
+            ...initialFocalPoint
+        }));
     const [checkBounds, setCheckBounds] = useState(false);
     const [originalHeight, setOriginalHeight] = useState(0);
     const [originalWidth, setOriginalWidth] = useState(0);
@@ -60,14 +65,9 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, showCrop, showFoc
         }
     };
     const saveEdits = ()=>{
-        dispatchFormQueryParams({
-            type: 'SET',
-            params: {
-                uploadEdits: crop || pointPosition ? {
-                    crop: crop || null,
-                    focalPoint: pointPosition ? pointPosition : null
-                } : null
-            }
+        if (typeof onSave === 'function') onSave({
+            crop,
+            pointPosition
         });
         closeModal(editDrawerSlug);
     };
@@ -106,7 +106,7 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, showCrop, showFoc
         "aria-label": t('general:applyChanges'),
         buttonStyle: "primary",
         className: `${baseClass}__save`,
-        onClick: ()=>saveEdits()
+        onClick: saveEdits
     }, t('general:applyChanges')))), /*#__PURE__*/ React.createElement("div", {
         className: `${baseClass}__toolWrap`
     }, /*#__PURE__*/ React.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/EditUpload/index.tsx"],"sourcesContent":["'use client'\nimport type { Data } from 'payload/types'\nimport type CropType from 'react-image-crop'\n\nimport * as facelessUIImport from '@faceless-ui/modal'\nimport React, { useRef, useState } from 'react'\nimport ReactCrop from 'react-image-crop'\nimport 'react-image-crop/dist/ReactCrop.css'\n\nimport { editDrawerSlug } from '../../elements/Upload/index.js'\nimport { Plus } from '../../icons/Plus/index.js'\nimport { useFormQueryParams } from '../../providers/FormQueryParams/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport './index.scss'\n\nconst baseClass = 'edit-upload'\n\nconst Input: React.FC<{ name: string; onChange: (value: string) => void; value: string }> = ({\n  name,\n  onChange,\n  value,\n}) => (\n  <div className={`${baseClass}__input`}>\n    {name}\n    <input name={name} onChange={(e) => onChange(e.target.value)} type=\"number\" value={value} />\n  </div>\n)\n\nexport type EditUploadProps = {\n  doc?: Data\n  fileName: string\n  fileSrc: string\n  imageCacheTag?: string\n  showCrop?: boolean\n  showFocalPoint?: boolean\n}\n\nexport const EditUpload: React.FC<EditUploadProps> = ({\n  fileName,\n  fileSrc,\n  imageCacheTag,\n  showCrop,\n  showFocalPoint,\n}) => {\n  const { Modal, useModal } = facelessUIImport\n\n  const { closeModal } = useModal()\n  const { t } = useTranslation()\n  const { dispatchFormQueryParams, formQueryParams } = useFormQueryParams()\n  const { uploadEdits } = formQueryParams || {}\n  const [crop, setCrop] = useState<CropType>({\n    height: uploadEdits?.crop?.height || 100,\n    unit: '%',\n    width: uploadEdits?.crop?.width || 100,\n    x: uploadEdits?.crop?.x || 0,\n    y: uploadEdits?.crop?.y || 0,\n  })\n\n  const [pointPosition, setPointPosition] = useState<{ x: number; y: number }>({\n    x: uploadEdits?.focalPoint?.x || 50,\n    y: uploadEdits?.focalPoint?.y || 50,\n  })\n  const [checkBounds, setCheckBounds] = useState<boolean>(false)\n  const [originalHeight, setOriginalHeight] = useState<number>(0)\n  const [originalWidth, setOriginalWidth] = useState<number>(0)\n\n  const focalWrapRef = useRef<HTMLDivElement | undefined>()\n  const imageRef = useRef<HTMLImageElement | undefined>()\n  const cropRef = useRef<HTMLDivElement | undefined>()\n\n  const fineTuneCrop = ({ dimension, value }: { dimension: 'height' | 'width'; value: string }) => {\n    const intValue = parseInt(value)\n    if (dimension === 'width' && intValue >= originalWidth) return null\n    if (dimension === 'height' && intValue >= originalHeight) return null\n\n    const percentage = 100 * (intValue / (dimension === 'width' ? originalWidth : originalHeight))\n\n    if (percentage === 100 || percentage === 0) return null\n\n    setCrop({\n      ...crop,\n      [dimension]: percentage,\n    })\n  }\n\n  const fineTuneFocalPoint = ({ coordinate, value }: { coordinate: 'x' | 'y'; value: string }) => {\n    const intValue = parseInt(value)\n    if (intValue >= 0 && intValue <= 100) {\n      setPointPosition((prevPosition) => ({ ...prevPosition, [coordinate]: intValue }))\n    }\n  }\n\n  const saveEdits = () => {\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    closeModal(editDrawerSlug)\n  }\n\n  const onDragEnd = React.useCallback(({ x, y }) => {\n    setPointPosition({ x, y })\n    setCheckBounds(false)\n  }, [])\n\n  const centerFocalPoint = () => {\n    const containerRect = focalWrapRef.current.getBoundingClientRect()\n    const boundsRect = showCrop\n      ? cropRef.current.getBoundingClientRect()\n      : imageRef.current.getBoundingClientRect()\n    const xCenter =\n      ((boundsRect.left - containerRect.left + boundsRect.width / 2) / containerRect.width) * 100\n    const yCenter =\n      ((boundsRect.top - containerRect.top + boundsRect.height / 2) / containerRect.height) * 100\n    setPointPosition({ x: xCenter, y: yCenter })\n  }\n\n  const fileSrcToUse = imageCacheTag ? `${fileSrc}?${imageCacheTag}` : fileSrc\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__header`}>\n        <h2 title={`${t('general:editing')} ${fileName}`}>\n          {t('general:editing')} {fileName}\n        </h2>\n        <div className={`${baseClass}__actions`}>\n          <Button\n            aria-label={t('general:cancel')}\n            buttonStyle=\"secondary\"\n            className={`${baseClass}__cancel`}\n            onClick={() => closeModal(editDrawerSlug)}\n          >\n            {t('general:cancel')}\n          </Button>\n          <Button\n            aria-label={t('general:applyChanges')}\n            buttonStyle=\"primary\"\n            className={`${baseClass}__save`}\n            onClick={() => saveEdits()}\n          >\n            {t('general:applyChanges')}\n          </Button>\n        </div>\n      </div>\n      <div className={`${baseClass}__toolWrap`}>\n        <div className={`${baseClass}__crop`}>\n          <div\n            className={`${baseClass}__focal-wrapper`}\n            ref={focalWrapRef}\n            style={{\n              aspectRatio: `${originalWidth / originalHeight}`,\n            }}\n          >\n            {showCrop ? (\n              <ReactCrop\n                className={`${baseClass}__reactCrop`}\n                crop={crop}\n                onChange={(_, c) => setCrop(c)}\n                onComplete={() => setCheckBounds(true)}\n                renderSelectionAddon={() => {\n                  return <div className={`${baseClass}__crop-window`} ref={cropRef} />\n                }}\n              >\n                <img\n                  alt={t('upload:setCropArea')}\n                  onLoad={(e) => {\n                    setOriginalHeight(e.currentTarget.naturalHeight)\n                    setOriginalWidth(e.currentTarget.naturalWidth)\n                  }}\n                  ref={imageRef}\n                  src={fileSrcToUse}\n                />\n              </ReactCrop>\n            ) : (\n              <img\n                alt={t('upload:setFocalPoint')}\n                onLoad={(e) => {\n                  setOriginalHeight(e.currentTarget.naturalHeight)\n                  setOriginalWidth(e.currentTarget.naturalWidth)\n                }}\n                ref={imageRef}\n                src={fileSrcToUse}\n              />\n            )}\n            {showFocalPoint && (\n              <DraggableElement\n                boundsRef={showCrop ? cropRef : imageRef}\n                checkBounds={showCrop ? checkBounds : false}\n                className={`${baseClass}__focalPoint`}\n                containerRef={focalWrapRef}\n                initialPosition={pointPosition}\n                onDragEnd={onDragEnd}\n                setCheckBounds={showCrop ? setCheckBounds : false}\n              >\n                <Plus />\n              </DraggableElement>\n            )}\n          </div>\n        </div>\n        {(showCrop || showFocalPoint) && (\n          <div className={`${baseClass}__sidebar`}>\n            {showCrop && (\n              <div className={`${baseClass}__groupWrap`}>\n                <div>\n                  <div className={`${baseClass}__titleWrap`}>\n                    <h3>{t('upload:crop')}</h3>\n                    <Button\n                      buttonStyle=\"none\"\n                      className={`${baseClass}__reset`}\n                      onClick={() =>\n                        setCrop({\n                          height: 100,\n                          unit: '%',\n                          width: 100,\n                          x: 0,\n                          y: 0,\n                        })\n                      }\n                    >\n                      {t('general:reset')}\n                    </Button>\n                  </div>\n                </div>\n                <span className={`${baseClass}__description`}>\n                  {t('upload:cropToolDescription')}\n                </span>\n                <div className={`${baseClass}__inputsWrap`}>\n                  <Input\n                    name={`${t('upload:width')} (px)`}\n                    onChange={(value) => fineTuneCrop({ dimension: 'width', value })}\n                    value={((crop.width / 100) * originalWidth).toFixed(0)}\n                  />\n                  <Input\n                    name={`${t('upload:height')} (px)`}\n                    onChange={(value) => fineTuneCrop({ dimension: 'height', value })}\n                    value={((crop.height / 100) * originalHeight).toFixed(0)}\n                  />\n                </div>\n              </div>\n            )}\n\n            {showFocalPoint && (\n              <div className={`${baseClass}__groupWrap`}>\n                <div>\n                  <div className={`${baseClass}__titleWrap`}>\n                    <h3>{t('upload:focalPoint')}</h3>\n                    <Button\n                      buttonStyle=\"none\"\n                      className={`${baseClass}__reset`}\n                      onClick={centerFocalPoint}\n                    >\n                      {t('general:reset')}\n                    </Button>\n                  </div>\n                </div>\n                <span className={`${baseClass}__description`}>\n                  {t('upload:focalPointDescription')}\n                </span>\n                <div className={`${baseClass}__inputsWrap`}>\n                  <Input\n                    name=\"X %\"\n                    onChange={(value) => fineTuneFocalPoint({ coordinate: 'x', value })}\n                    value={pointPosition.x.toFixed(0)}\n                  />\n                  <Input\n                    name=\"Y %\"\n                    onChange={(value) => fineTuneFocalPoint({ coordinate: 'y', value })}\n                    value={pointPosition.y.toFixed(0)}\n                  />\n                </div>\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst DraggableElement = ({\n  boundsRef,\n  checkBounds,\n  children,\n  className,\n  containerRef,\n  initialPosition = { x: 50, y: 50 },\n  onDragEnd,\n  setCheckBounds,\n}) => {\n  const [position, setPosition] = useState({ x: initialPosition.x, y: initialPosition.y })\n  const [isDragging, setIsDragging] = useState(false)\n  const dragRef = useRef<HTMLButtonElement | undefined>()\n\n  const getCoordinates = React.useCallback(\n    (mouseXArg?: number, mouseYArg?: number, recenter?: boolean) => {\n      const containerRect = containerRef.current.getBoundingClientRect()\n      const boundsRect = boundsRef.current.getBoundingClientRect()\n      const mouseX = mouseXArg ?? boundsRect.left\n      const mouseY = mouseYArg ?? boundsRect.top\n\n      const xOutOfBounds = mouseX < boundsRect.left || mouseX > boundsRect.right\n      const yOutOfBounds = mouseY < boundsRect.top || mouseY > boundsRect.bottom\n\n      let x = ((mouseX - containerRect.left) / containerRect.width) * 100\n      let y = ((mouseY - containerRect.top) / containerRect.height) * 100\n      const xCenter =\n        ((boundsRect.left - containerRect.left + boundsRect.width / 2) / containerRect.width) * 100\n      const yCenter =\n        ((boundsRect.top - containerRect.top + boundsRect.height / 2) / containerRect.height) * 100\n      if (xOutOfBounds || yOutOfBounds) {\n        setIsDragging(false)\n        if (mouseX < boundsRect.left) {\n          x = ((boundsRect.left - containerRect.left) / containerRect.width) * 100\n        } else if (mouseX > boundsRect.right) {\n          x =\n            ((containerRect.width - (containerRect.right - boundsRect.right)) /\n              containerRect.width) *\n            100\n        }\n\n        if (mouseY < boundsRect.top) {\n          y = ((boundsRect.top - containerRect.top) / containerRect.height) * 100\n        } else if (mouseY > boundsRect.bottom) {\n          y =\n            ((containerRect.height - (containerRect.bottom - boundsRect.bottom)) /\n              containerRect.height) *\n            100\n        }\n\n        if (recenter) {\n          x = xOutOfBounds ? xCenter : x\n          y = yOutOfBounds ? yCenter : y\n        }\n      }\n\n      return { x, y }\n    },\n    [boundsRef, containerRef],\n  )\n\n  const handleMouseDown = (event) => {\n    event.preventDefault()\n    setIsDragging(true)\n  }\n\n  const handleMouseMove = (event) => {\n    if (!isDragging) return null\n    const { x, y } = getCoordinates(event.clientX, event.clientY)\n\n    setPosition({ x, y })\n  }\n\n  const onDrop = () => {\n    setIsDragging(false)\n    onDragEnd(position)\n  }\n\n  React.useEffect(() => {\n    if (isDragging || !dragRef.current) return\n    if (checkBounds) {\n      const { height, left, top, width } = dragRef.current.getBoundingClientRect()\n      const { x, y } = getCoordinates(left + width / 2, top + height / 2, true)\n      onDragEnd({ x, y })\n      setPosition({ x, y })\n      setCheckBounds(false)\n      return\n    }\n  }, [getCoordinates, isDragging, checkBounds, setCheckBounds, position.x, position.y, onDragEnd])\n\n  React.useEffect(() => {\n    setPosition({ x: initialPosition.x, y: initialPosition.y })\n  }, [initialPosition.x, initialPosition.y])\n\n  return (\n    <div\n      className={[\n        `${baseClass}__draggable-container`,\n        isDragging && `${baseClass}__draggable-container--dragging`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onMouseMove={handleMouseMove}\n    >\n      <button\n        className={[`${baseClass}__draggable`, className].filter(Boolean).join(' ')}\n        onMouseDown={handleMouseDown}\n        onMouseUp={onDrop}\n        ref={dragRef}\n        style={{ left: `${position.x}%`, top: `${position.y}%` }}\n        type=\"button\"\n      >\n        {children}\n      </button>\n      <div />\n    </div>\n  )\n}\n"],"names":["facelessUIImport","React","useRef","useState","ReactCrop","editDrawerSlug","Plus","useFormQueryParams","useTranslation","Button","baseClass","Input","name","onChange","value","div","className","input","e","target","type","EditUpload","fileName","fileSrc","imageCacheTag","showCrop","showFocalPoint","Modal","useModal","closeModal","t","dispatchFormQueryParams","formQueryParams","uploadEdits","crop","setCrop","height","unit","width","x","y","pointPosition","setPointPosition","focalPoint","checkBounds","setCheckBounds","originalHeight","setOriginalHeight","originalWidth","setOriginalWidth","focalWrapRef","imageRef","cropRef","fineTuneCrop","dimension","intValue","parseInt","percentage","fineTuneFocalPoint","coordinate","prevPosition","saveEdits","params","onDragEnd","useCallback","centerFocalPoint","containerRect","current","getBoundingClientRect","boundsRect","xCenter","left","yCenter","top","fileSrcToUse","h2","title","aria-label","buttonStyle","onClick","ref","style","aspectRatio","_","c","onComplete","renderSelectionAddon","img","alt","onLoad","currentTarget","naturalHeight","naturalWidth","src","DraggableElement","boundsRef","containerRef","initialPosition","h3","span","toFixed","children","position","setPosition","isDragging","setIsDragging","dragRef","getCoordinates","mouseXArg","mouseYArg","recenter","mouseX","mouseY","xOutOfBounds","right","yOutOfBounds","bottom","handleMouseDown","event","preventDefault","handleMouseMove","clientX","clientY","onDrop","useEffect","filter","Boolean","join","onMouseMove","button","onMouseDown","onMouseUp"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../src/elements/EditUpload/index.tsx"],"sourcesContent":["'use client'\nimport type { Data } from 'payload/types'\nimport type CropType from 'react-image-crop'\n\nimport * as facelessUIImport from '@faceless-ui/modal'\nimport React, { useRef, useState } from 'react'\nimport ReactCrop from 'react-image-crop'\nimport 'react-image-crop/dist/ReactCrop.css'\n\nimport { editDrawerSlug } from '../../elements/Upload/index.js'\nimport { Plus } from '../../icons/Plus/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport './index.scss'\n\nconst baseClass = 'edit-upload'\n\nconst Input: React.FC<{ name: string; onChange: (value: string) => void; value: string }> = ({\n  name,\n  onChange,\n  value,\n}) => (\n  <div className={`${baseClass}__input`}>\n    {name}\n    <input name={name} onChange={(e) => onChange(e.target.value)} type=\"number\" value={value} />\n  </div>\n)\n\ntype FocalPosition = {\n  x: number\n  y: number\n}\n\nexport type EditUploadProps = {\n  doc?: Data\n  fileName: string\n  fileSrc: string\n  imageCacheTag?: string\n  initialCrop?: CropType\n  initialFocalPoint?: FocalPosition\n  onSave?: ({ crop, pointPosition }: { crop: CropType; pointPosition: FocalPosition }) => void\n  showCrop?: boolean\n  showFocalPoint?: boolean\n}\n\nconst defaultCrop: CropType = {\n  height: 100,\n  unit: '%',\n  width: 100,\n  x: 0,\n  y: 0,\n}\n\nconst defaultPointPosition: FocalPosition = {\n  x: 50,\n  y: 50,\n}\n\nexport const EditUpload: React.FC<EditUploadProps> = ({\n  fileName,\n  fileSrc,\n  imageCacheTag,\n  initialCrop,\n  initialFocalPoint,\n  onSave,\n  showCrop,\n  showFocalPoint,\n}) => {\n  const { useModal } = facelessUIImport\n\n  const { closeModal } = useModal()\n  const { t } = useTranslation()\n\n  const [crop, setCrop] = useState<CropType>(() => ({\n    ...defaultCrop,\n    ...initialCrop,\n  }))\n\n  const [pointPosition, setPointPosition] = useState<FocalPosition>(() => ({\n    ...defaultPointPosition,\n    ...initialFocalPoint,\n  }))\n  const [checkBounds, setCheckBounds] = useState<boolean>(false)\n  const [originalHeight, setOriginalHeight] = useState<number>(0)\n  const [originalWidth, setOriginalWidth] = useState<number>(0)\n\n  const focalWrapRef = useRef<HTMLDivElement | undefined>()\n  const imageRef = useRef<HTMLImageElement | undefined>()\n  const cropRef = useRef<HTMLDivElement | undefined>()\n\n  const fineTuneCrop = ({ dimension, value }: { dimension: 'height' | 'width'; value: string }) => {\n    const intValue = parseInt(value)\n    if (dimension === 'width' && intValue >= originalWidth) return null\n    if (dimension === 'height' && intValue >= originalHeight) return null\n\n    const percentage = 100 * (intValue / (dimension === 'width' ? originalWidth : originalHeight))\n\n    if (percentage === 100 || percentage === 0) return null\n\n    setCrop({\n      ...crop,\n      [dimension]: percentage,\n    })\n  }\n\n  const fineTuneFocalPoint = ({ coordinate, value }: { coordinate: 'x' | 'y'; value: string }) => {\n    const intValue = parseInt(value)\n    if (intValue >= 0 && intValue <= 100) {\n      setPointPosition((prevPosition) => ({ ...prevPosition, [coordinate]: intValue }))\n    }\n  }\n\n  const saveEdits = () => {\n    if (typeof onSave === 'function')\n      onSave({\n        crop,\n        pointPosition,\n      })\n    closeModal(editDrawerSlug)\n  }\n\n  const onDragEnd = React.useCallback(({ x, y }) => {\n    setPointPosition({ x, y })\n    setCheckBounds(false)\n  }, [])\n\n  const centerFocalPoint = () => {\n    const containerRect = focalWrapRef.current.getBoundingClientRect()\n    const boundsRect = showCrop\n      ? cropRef.current.getBoundingClientRect()\n      : imageRef.current.getBoundingClientRect()\n    const xCenter =\n      ((boundsRect.left - containerRect.left + boundsRect.width / 2) / containerRect.width) * 100\n    const yCenter =\n      ((boundsRect.top - containerRect.top + boundsRect.height / 2) / containerRect.height) * 100\n    setPointPosition({ x: xCenter, y: yCenter })\n  }\n\n  const fileSrcToUse = imageCacheTag ? `${fileSrc}?${imageCacheTag}` : fileSrc\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__header`}>\n        <h2 title={`${t('general:editing')} ${fileName}`}>\n          {t('general:editing')} {fileName}\n        </h2>\n        <div className={`${baseClass}__actions`}>\n          <Button\n            aria-label={t('general:cancel')}\n            buttonStyle=\"secondary\"\n            className={`${baseClass}__cancel`}\n            onClick={() => closeModal(editDrawerSlug)}\n          >\n            {t('general:cancel')}\n          </Button>\n          <Button\n            aria-label={t('general:applyChanges')}\n            buttonStyle=\"primary\"\n            className={`${baseClass}__save`}\n            onClick={saveEdits}\n          >\n            {t('general:applyChanges')}\n          </Button>\n        </div>\n      </div>\n      <div className={`${baseClass}__toolWrap`}>\n        <div className={`${baseClass}__crop`}>\n          <div\n            className={`${baseClass}__focal-wrapper`}\n            ref={focalWrapRef}\n            style={{\n              aspectRatio: `${originalWidth / originalHeight}`,\n            }}\n          >\n            {showCrop ? (\n              <ReactCrop\n                className={`${baseClass}__reactCrop`}\n                crop={crop}\n                onChange={(_, c) => setCrop(c)}\n                onComplete={() => setCheckBounds(true)}\n                renderSelectionAddon={() => {\n                  return <div className={`${baseClass}__crop-window`} ref={cropRef} />\n                }}\n              >\n                <img\n                  alt={t('upload:setCropArea')}\n                  onLoad={(e) => {\n                    setOriginalHeight(e.currentTarget.naturalHeight)\n                    setOriginalWidth(e.currentTarget.naturalWidth)\n                  }}\n                  ref={imageRef}\n                  src={fileSrcToUse}\n                />\n              </ReactCrop>\n            ) : (\n              <img\n                alt={t('upload:setFocalPoint')}\n                onLoad={(e) => {\n                  setOriginalHeight(e.currentTarget.naturalHeight)\n                  setOriginalWidth(e.currentTarget.naturalWidth)\n                }}\n                ref={imageRef}\n                src={fileSrcToUse}\n              />\n            )}\n            {showFocalPoint && (\n              <DraggableElement\n                boundsRef={showCrop ? cropRef : imageRef}\n                checkBounds={showCrop ? checkBounds : false}\n                className={`${baseClass}__focalPoint`}\n                containerRef={focalWrapRef}\n                initialPosition={pointPosition}\n                onDragEnd={onDragEnd}\n                setCheckBounds={showCrop ? setCheckBounds : false}\n              >\n                <Plus />\n              </DraggableElement>\n            )}\n          </div>\n        </div>\n        {(showCrop || showFocalPoint) && (\n          <div className={`${baseClass}__sidebar`}>\n            {showCrop && (\n              <div className={`${baseClass}__groupWrap`}>\n                <div>\n                  <div className={`${baseClass}__titleWrap`}>\n                    <h3>{t('upload:crop')}</h3>\n                    <Button\n                      buttonStyle=\"none\"\n                      className={`${baseClass}__reset`}\n                      onClick={() =>\n                        setCrop({\n                          height: 100,\n                          unit: '%',\n                          width: 100,\n                          x: 0,\n                          y: 0,\n                        })\n                      }\n                    >\n                      {t('general:reset')}\n                    </Button>\n                  </div>\n                </div>\n                <span className={`${baseClass}__description`}>\n                  {t('upload:cropToolDescription')}\n                </span>\n                <div className={`${baseClass}__inputsWrap`}>\n                  <Input\n                    name={`${t('upload:width')} (px)`}\n                    onChange={(value) => fineTuneCrop({ dimension: 'width', value })}\n                    value={((crop.width / 100) * originalWidth).toFixed(0)}\n                  />\n                  <Input\n                    name={`${t('upload:height')} (px)`}\n                    onChange={(value) => fineTuneCrop({ dimension: 'height', value })}\n                    value={((crop.height / 100) * originalHeight).toFixed(0)}\n                  />\n                </div>\n              </div>\n            )}\n\n            {showFocalPoint && (\n              <div className={`${baseClass}__groupWrap`}>\n                <div>\n                  <div className={`${baseClass}__titleWrap`}>\n                    <h3>{t('upload:focalPoint')}</h3>\n                    <Button\n                      buttonStyle=\"none\"\n                      className={`${baseClass}__reset`}\n                      onClick={centerFocalPoint}\n                    >\n                      {t('general:reset')}\n                    </Button>\n                  </div>\n                </div>\n                <span className={`${baseClass}__description`}>\n                  {t('upload:focalPointDescription')}\n                </span>\n                <div className={`${baseClass}__inputsWrap`}>\n                  <Input\n                    name=\"X %\"\n                    onChange={(value) => fineTuneFocalPoint({ coordinate: 'x', value })}\n                    value={pointPosition.x.toFixed(0)}\n                  />\n                  <Input\n                    name=\"Y %\"\n                    onChange={(value) => fineTuneFocalPoint({ coordinate: 'y', value })}\n                    value={pointPosition.y.toFixed(0)}\n                  />\n                </div>\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst DraggableElement = ({\n  boundsRef,\n  checkBounds,\n  children,\n  className,\n  containerRef,\n  initialPosition = { x: 50, y: 50 },\n  onDragEnd,\n  setCheckBounds,\n}) => {\n  const [position, setPosition] = useState({ x: initialPosition.x, y: initialPosition.y })\n  const [isDragging, setIsDragging] = useState(false)\n  const dragRef = useRef<HTMLButtonElement | undefined>()\n\n  const getCoordinates = React.useCallback(\n    (mouseXArg?: number, mouseYArg?: number, recenter?: boolean) => {\n      const containerRect = containerRef.current.getBoundingClientRect()\n      const boundsRect = boundsRef.current.getBoundingClientRect()\n      const mouseX = mouseXArg ?? boundsRect.left\n      const mouseY = mouseYArg ?? boundsRect.top\n\n      const xOutOfBounds = mouseX < boundsRect.left || mouseX > boundsRect.right\n      const yOutOfBounds = mouseY < boundsRect.top || mouseY > boundsRect.bottom\n\n      let x = ((mouseX - containerRect.left) / containerRect.width) * 100\n      let y = ((mouseY - containerRect.top) / containerRect.height) * 100\n      const xCenter =\n        ((boundsRect.left - containerRect.left + boundsRect.width / 2) / containerRect.width) * 100\n      const yCenter =\n        ((boundsRect.top - containerRect.top + boundsRect.height / 2) / containerRect.height) * 100\n      if (xOutOfBounds || yOutOfBounds) {\n        setIsDragging(false)\n        if (mouseX < boundsRect.left) {\n          x = ((boundsRect.left - containerRect.left) / containerRect.width) * 100\n        } else if (mouseX > boundsRect.right) {\n          x =\n            ((containerRect.width - (containerRect.right - boundsRect.right)) /\n              containerRect.width) *\n            100\n        }\n\n        if (mouseY < boundsRect.top) {\n          y = ((boundsRect.top - containerRect.top) / containerRect.height) * 100\n        } else if (mouseY > boundsRect.bottom) {\n          y =\n            ((containerRect.height - (containerRect.bottom - boundsRect.bottom)) /\n              containerRect.height) *\n            100\n        }\n\n        if (recenter) {\n          x = xOutOfBounds ? xCenter : x\n          y = yOutOfBounds ? yCenter : y\n        }\n      }\n\n      return { x, y }\n    },\n    [boundsRef, containerRef],\n  )\n\n  const handleMouseDown = (event) => {\n    event.preventDefault()\n    setIsDragging(true)\n  }\n\n  const handleMouseMove = (event) => {\n    if (!isDragging) return null\n    const { x, y } = getCoordinates(event.clientX, event.clientY)\n\n    setPosition({ x, y })\n  }\n\n  const onDrop = () => {\n    setIsDragging(false)\n    onDragEnd(position)\n  }\n\n  React.useEffect(() => {\n    if (isDragging || !dragRef.current) return\n    if (checkBounds) {\n      const { height, left, top, width } = dragRef.current.getBoundingClientRect()\n      const { x, y } = getCoordinates(left + width / 2, top + height / 2, true)\n      onDragEnd({ x, y })\n      setPosition({ x, y })\n      setCheckBounds(false)\n      return\n    }\n  }, [getCoordinates, isDragging, checkBounds, setCheckBounds, position.x, position.y, onDragEnd])\n\n  React.useEffect(() => {\n    setPosition({ x: initialPosition.x, y: initialPosition.y })\n  }, [initialPosition.x, initialPosition.y])\n\n  return (\n    <div\n      className={[\n        `${baseClass}__draggable-container`,\n        isDragging && `${baseClass}__draggable-container--dragging`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onMouseMove={handleMouseMove}\n    >\n      <button\n        className={[`${baseClass}__draggable`, className].filter(Boolean).join(' ')}\n        onMouseDown={handleMouseDown}\n        onMouseUp={onDrop}\n        ref={dragRef}\n        style={{ left: `${position.x}%`, top: `${position.y}%` }}\n        type=\"button\"\n      >\n        {children}\n      </button>\n      <div />\n    </div>\n  )\n}\n"],"names":["facelessUIImport","React","useRef","useState","ReactCrop","editDrawerSlug","Plus","useTranslation","Button","baseClass","Input","name","onChange","value","div","className","input","e","target","type","defaultCrop","height","unit","width","x","y","defaultPointPosition","EditUpload","fileName","fileSrc","imageCacheTag","initialCrop","initialFocalPoint","onSave","showCrop","showFocalPoint","useModal","closeModal","t","crop","setCrop","pointPosition","setPointPosition","checkBounds","setCheckBounds","originalHeight","setOriginalHeight","originalWidth","setOriginalWidth","focalWrapRef","imageRef","cropRef","fineTuneCrop","dimension","intValue","parseInt","percentage","fineTuneFocalPoint","coordinate","prevPosition","saveEdits","onDragEnd","useCallback","centerFocalPoint","containerRect","current","getBoundingClientRect","boundsRect","xCenter","left","yCenter","top","fileSrcToUse","h2","title","aria-label","buttonStyle","onClick","ref","style","aspectRatio","_","c","onComplete","renderSelectionAddon","img","alt","onLoad","currentTarget","naturalHeight","naturalWidth","src","DraggableElement","boundsRef","containerRef","initialPosition","h3","span","toFixed","children","position","setPosition","isDragging","setIsDragging","dragRef","getCoordinates","mouseXArg","mouseYArg","recenter","mouseX","mouseY","xOutOfBounds","right","yOutOfBounds","bottom","handleMouseDown","event","preventDefault","handleMouseMove","clientX","clientY","onDrop","useEffect","filter","Boolean","join","onMouseMove","button","onMouseDown","onMouseUp"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/elements/Upload/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Upload/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAA;AAIzE,OAAO,KAA2C,MAAM,OAAO,CAAA;AAe/D,OAAO,cAAc,CAAA;AAGrB,eAAO,MAAM,cAAc,gBAAgB,CAAA;AAC3C,eAAO,MAAM,eAAe,kBAAkB,CAAA;AAU9C,eAAO,MAAM,aAAa;;;uBAgBzB,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,cAAc,EAAE,MAAM,CAAA;IACtB,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,IAAI,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA+JxC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Upload/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAA;AAKzE,OAAO,KAA2C,MAAM,OAAO,CAAA;AAe/D,OAAO,cAAc,CAAA;AAGrB,eAAO,MAAM,cAAc,gBAAgB,CAAA;AAC3C,eAAO,MAAM,eAAe,kBAAkB,CAAA;AAU9C,eAAO,MAAM,aAAa;;;uBAgBzB,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,cAAc,EAAE,MAAM,CAAA;IACtB,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,IAAI,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA0MxC,CAAA"}

package/dist/elements/Upload/index.js

@@ -1,9 +1,10 @@
 '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 { fieldBaseClass } from '../../fields/shared/index.js';
-import { useFormSubmitted } from '../../forms/Form/context.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';
@@ -42,12 +43,18 @@ export const Upload = (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
     });
+    const [crop, setCrop] = useState({
+        x: 0,
+        y: 0
+    });
     const handleFileNameChange = (e)=>{
         const updatedFileName = e.target.value;
         if (value) {
@@ -75,6 +82,29 @@ export const Upload = (props)=>{
     }, [
         setValue
     ]);
+    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)}%`);
+        setModified(true);
+        dispatchFormQueryParams({
+            type: 'SET',
+            params: {
+                uploadEdits: crop || pointPosition ? {
+                    crop: crop || null,
+                    focalPoint: pointPosition ? pointPosition : null
+                } : null
+            }
+        });
+    }, [
+        dispatchFormQueryParams,
+        setModified
+    ]);
     useEffect(()=>{
         setDoc(reduceFieldsToValues(initialState || {}, true));
         setReplacingFile(false);
@@ -159,6 +189,12 @@ export const Upload = (props)=>{
         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, {

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 { isImage } from 'payload/utilities'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport { fieldBaseClass } from '../../fields/shared/index.js'\nimport { 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 [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 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  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            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","isImage","React","useCallback","useEffect","useState","fieldBaseClass","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","doc","setDoc","docPermissions","errorMessage","setValue","showError","path","handleFileNameChange","e","updatedFileName","target","fileValue","newFile","File","type","handleFileSelection","files","fileToUpload","handleFileRemoval","fileReader","FileReader","onload","imgSrc","result","readAsDataURL","canRemoveUpload","update","permission","delete","hasImageSizes","imageSizes","length","hasResizeOptions","Boolean","resizeOptions","crop","showCrop","focalPoint","showFocalPoint","lastSubmittedTime","Date","toISOString","filter","join","message","filename","handleRemove","imageCacheTag","mimeTypes","Fragment","input","name","buttonStyle","icon","iconStyle","onClick","round","tooltip","Header","fileName","url","hoverTitle","title","label"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"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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"}

package/dist/elements/Upload/index.scss

@@ -23,13 +23,24 @@
     width: 150px;
 
     .thumbnail {
-      position: absolute;
+      position: relative;
       width: 100%;
       height: 100%;
       object-fit: contain;
     }
   }
 
+  .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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/ui",
-  "version": "3.0.0-beta.24",
+  "version": "3.0.0-beta.26",
   "homepage": "https://payloadcms.com",
   "repository": {
     "type": "git",
@@ -113,7 +113,7 @@
     "react-toastify": "10.0.4",
     "use-context-selector": "1.4.1",
     "uuid": "9.0.1",
-    "@payloadcms/translations": "3.0.0-beta.24"
+    "@payloadcms/translations": "3.0.0-beta.26"
   },
   "devDependencies": {
     "@types/body-scroll-lock": "^3.1.0",
@@ -134,13 +134,13 @@
     "webpack": "^5.78.0",
     "webpack-cli": "^5.1.4",
     "@payloadcms/eslint-config": "1.1.1",
-    "payload": "3.0.0-beta.24"
+    "payload": "3.0.0-beta.26"
   },
   "peerDependencies": {
     "next": "^14.3.0-canary.7",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "payload": "3.0.0-beta.24"
+    "payload": "3.0.0-beta.26"
   },
   "engines": {
     "node": ">=18.20.2"