@payloadcms/ui 3.0.0-beta.65 → 3.0.0-beta.67

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,SAAS,CAAA;AAGzE,OAAO,KAAsC,MAAM,OAAO,CAAA;AAiB1D,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,CAkNpC,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,SAAS,CAAA;AAGzE,OAAO,KAAsC,MAAM,OAAO,CAAA;AAiB1D,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,CAoNpC,CAAA"}

package/dist/elements/Autosave/index.js

@@ -18,7 +18,7 @@ export const Autosave = ({ id, collection, global: globalDoc, publishedDocUpdate
     const { routes: { api }, serverURL } = useConfig();
     const { docConfig, getVersions, versions } = useDocumentInfo();
     const { reportUpdate } = useDocumentEvents();
-    const { dispatchFields, setSubmitted } = useForm();
+    const { dispatchFields, setModified, setSubmitted } = useForm();
     const submitted = useFormSubmitted();
     const versionsConfig = docConfig?.versions;
     const [fields] = useAllFormFields();
@@ -47,6 +47,7 @@ export const Autosave = ({ id, collection, global: globalDoc, publishedDocUpdate
     // Store locale in ref so the autosave func
     // can always retrieve the most to date locale
     localeRef.current = locale;
+    console.log(modifiedRef.current, modified);
     // When debounced fields change, autosave
     useEffect(()=>{
         const abortController = new AbortController();
@@ -89,6 +90,7 @@ export const Autosave = ({ id, collection, global: globalDoc, publishedDocUpdate
                                 if (res.status === 200) {
                                     const newDate = new Date();
                                     setLastSaved(newDate.getTime());
+                                    setModified(false);
                                     reportUpdate({
                                         id,
                                         entitySlug,
@@ -166,6 +168,7 @@ export const Autosave = ({ id, collection, global: globalDoc, publishedDocUpdate
         reportUpdate,
         serverURL,
         setSubmitted,
+        setModified,
         versionsConfig?.drafts,
         debouncedFields,
         submitted

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'\n\nimport { versionDefaults } from 'payload/shared'\nimport React, { useEffect, useRef, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport {\n  useAllFormFields,\n  useForm,\n  useFormModified,\n  useFormSubmitted,\n} from '../../forms/Form/context.js'\nimport { useDebounce } from '../../hooks/useDebounce.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentEvents } from '../../providers/DocumentEvents/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 { reduceFieldsToValuesWithValidation } from '../../utilities/reduceFieldsToValuesWithValidation.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 { dispatchFields, setSubmitted } = useForm()\n  const submitted = useFormSubmitted()\n  const versionsConfig = docConfig?.versions\n\n  const [fields] = useAllFormFields()\n  const formModified = useFormModified()\n  const { code: locale } = useLocale()\n  const { i18n, t } = useTranslation()\n\n  let interval = versionDefaults.autosaveInterval\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 modified = useDebounce(formModified, interval)\n  const fieldRef = useRef(fields)\n  const modifiedRef = useRef(modified)\n  const localeRef = useRef(locale)\n  const debouncedRef = useRef(debouncedFields)\n\n  debouncedRef.current = debouncedFields\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 abortController = new AbortController()\n    let autosaveTimeout = undefined\n\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          autosaveTimeout = setTimeout(async () => {\n            if (modifiedRef.current) {\n              const { data, valid } = {\n                ...reduceFieldsToValuesWithValidation(fieldRef.current, true),\n              }\n              data._status = 'draft'\n              const skipSubmission =\n                submitted && !valid && versionsConfig?.drafts && versionsConfig?.drafts?.validate\n\n              if (!skipSubmission) {\n                const res = await fetch(url, {\n                  body: JSON.stringify(data),\n                  credentials: 'include',\n                  headers: {\n                    'Accept-Language': i18n.language,\n                    'Content-Type': 'application/json',\n                  },\n                  method,\n                  signal: abortController.signal,\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                if (\n                  versionsConfig?.drafts &&\n                  versionsConfig?.drafts?.validate &&\n                  res.status === 400\n                ) {\n                  const json = await res.json()\n                  if (Array.isArray(json.errors)) {\n                    const [fieldErrors, nonFieldErrors] = json.errors.reduce(\n                      ([fieldErrs, nonFieldErrs], err) => {\n                        const newFieldErrs = []\n                        const newNonFieldErrs = []\n\n                        if (err?.message) {\n                          newNonFieldErrs.push(err)\n                        }\n\n                        if (Array.isArray(err?.data)) {\n                          err.data.forEach((dataError) => {\n                            if (dataError?.field) {\n                              newFieldErrs.push(dataError)\n                            } else {\n                              newNonFieldErrs.push(dataError)\n                            }\n                          })\n                        }\n\n                        return [\n                          [...fieldErrs, ...newFieldErrs],\n                          [...nonFieldErrs, ...newNonFieldErrs],\n                        ]\n                      },\n                      [[], []],\n                    )\n\n                    dispatchFields({\n                      type: 'ADD_SERVER_ERRORS',\n                      errors: fieldErrors,\n                    })\n\n                    nonFieldErrors.forEach((err) => {\n                      toast.error(err.message || i18n.t('error:unknown'))\n                    })\n\n                    setSubmitted(true)\n                    setSaving(false)\n                    return\n                  }\n                }\n              }\n            }\n\n            setSaving(false)\n          }, 1000)\n        }\n      }\n    }\n\n    void autosave()\n\n    return () => {\n      clearTimeout(autosaveTimeout)\n      if (abortController.signal) abortController.abort()\n      setSaving(false)\n    }\n  }, [\n    api,\n    collection,\n    dispatchFields,\n    getVersions,\n    globalDoc,\n    i18n,\n    id,\n    interval,\n    modified,\n    reportUpdate,\n    serverURL,\n    setSubmitted,\n    versionsConfig?.drafts,\n    debouncedFields,\n    submitted,\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":["versionDefaults","React","useEffect","useRef","useState","toast","useAllFormFields","useForm","useFormModified","useFormSubmitted","useDebounce","useConfig","useDocumentEvents","useDocumentInfo","useLocale","useTranslation","formatTimeToNow","reduceFieldsToValuesWithValidation","baseClass","Autosave","id","collection","global","globalDoc","publishedDocUpdatedAt","routes","api","serverURL","docConfig","getVersions","versions","reportUpdate","dispatchFields","setSubmitted","submitted","versionsConfig","fields","formModified","code","locale","i18n","t","interval","autosaveInterval","drafts","autosave","saving","setSaving","lastSaved","setLastSaved","debouncedFields","modified","fieldRef","modifiedRef","localeRef","debouncedRef","current","abortController","AbortController","autosaveTimeout","undefined","url","method","entitySlug","slug","setTimeout","data","valid","_status","skipSubmission","validate","res","fetch","body","JSON","stringify","credentials","headers","language","signal","status","newDate","Date","getTime","updatedAt","toISOString","json","Array","isArray","errors","fieldErrors","nonFieldErrors","reduce","fieldErrs","nonFieldErrs","err","newFieldErrs","newNonFieldErrs","message","push","forEach","dataError","field","type","error","clearTimeout","abort","docs","div","className","Fragment","distance","date"],"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'\n\nimport { versionDefaults } from 'payload/shared'\nimport React, { useEffect, useRef, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport {\n  useAllFormFields,\n  useForm,\n  useFormModified,\n  useFormSubmitted,\n} from '../../forms/Form/context.js'\nimport { useDebounce } from '../../hooks/useDebounce.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentEvents } from '../../providers/DocumentEvents/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 { reduceFieldsToValuesWithValidation } from '../../utilities/reduceFieldsToValuesWithValidation.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 { dispatchFields, setModified, setSubmitted } = useForm()\n  const submitted = useFormSubmitted()\n  const versionsConfig = docConfig?.versions\n\n  const [fields] = useAllFormFields()\n  const formModified = useFormModified()\n  const { code: locale } = useLocale()\n  const { i18n, t } = useTranslation()\n\n  let interval = versionDefaults.autosaveInterval\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 modified = useDebounce(formModified, interval)\n  const fieldRef = useRef(fields)\n  const modifiedRef = useRef(modified)\n  const localeRef = useRef(locale)\n  const debouncedRef = useRef(debouncedFields)\n\n  debouncedRef.current = debouncedFields\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  console.log(modifiedRef.current, modified)\n  // When debounced fields change, autosave\n  useEffect(() => {\n    const abortController = new AbortController()\n    let autosaveTimeout = undefined\n\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          autosaveTimeout = setTimeout(async () => {\n            if (modifiedRef.current) {\n              const { data, valid } = {\n                ...reduceFieldsToValuesWithValidation(fieldRef.current, true),\n              }\n              data._status = 'draft'\n              const skipSubmission =\n                submitted && !valid && versionsConfig?.drafts && versionsConfig?.drafts?.validate\n\n              if (!skipSubmission) {\n                const res = await fetch(url, {\n                  body: JSON.stringify(data),\n                  credentials: 'include',\n                  headers: {\n                    'Accept-Language': i18n.language,\n                    'Content-Type': 'application/json',\n                  },\n                  method,\n                  signal: abortController.signal,\n                })\n\n                if (res.status === 200) {\n                  const newDate = new Date()\n                  setLastSaved(newDate.getTime())\n                  setModified(false)\n                  reportUpdate({\n                    id,\n                    entitySlug,\n                    updatedAt: newDate.toISOString(),\n                  })\n                  void getVersions()\n                }\n\n                if (\n                  versionsConfig?.drafts &&\n                  versionsConfig?.drafts?.validate &&\n                  res.status === 400\n                ) {\n                  const json = await res.json()\n                  if (Array.isArray(json.errors)) {\n                    const [fieldErrors, nonFieldErrors] = json.errors.reduce(\n                      ([fieldErrs, nonFieldErrs], err) => {\n                        const newFieldErrs = []\n                        const newNonFieldErrs = []\n\n                        if (err?.message) {\n                          newNonFieldErrs.push(err)\n                        }\n\n                        if (Array.isArray(err?.data)) {\n                          err.data.forEach((dataError) => {\n                            if (dataError?.field) {\n                              newFieldErrs.push(dataError)\n                            } else {\n                              newNonFieldErrs.push(dataError)\n                            }\n                          })\n                        }\n\n                        return [\n                          [...fieldErrs, ...newFieldErrs],\n                          [...nonFieldErrs, ...newNonFieldErrs],\n                        ]\n                      },\n                      [[], []],\n                    )\n\n                    dispatchFields({\n                      type: 'ADD_SERVER_ERRORS',\n                      errors: fieldErrors,\n                    })\n\n                    nonFieldErrors.forEach((err) => {\n                      toast.error(err.message || i18n.t('error:unknown'))\n                    })\n\n                    setSubmitted(true)\n                    setSaving(false)\n                    return\n                  }\n                }\n              }\n            }\n\n            setSaving(false)\n          }, 1000)\n        }\n      }\n    }\n\n    void autosave()\n\n    return () => {\n      clearTimeout(autosaveTimeout)\n      if (abortController.signal) abortController.abort()\n      setSaving(false)\n    }\n  }, [\n    api,\n    collection,\n    dispatchFields,\n    getVersions,\n    globalDoc,\n    i18n,\n    id,\n    interval,\n    modified,\n    reportUpdate,\n    serverURL,\n    setSubmitted,\n    setModified,\n    versionsConfig?.drafts,\n    debouncedFields,\n    submitted,\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":["versionDefaults","React","useEffect","useRef","useState","toast","useAllFormFields","useForm","useFormModified","useFormSubmitted","useDebounce","useConfig","useDocumentEvents","useDocumentInfo","useLocale","useTranslation","formatTimeToNow","reduceFieldsToValuesWithValidation","baseClass","Autosave","id","collection","global","globalDoc","publishedDocUpdatedAt","routes","api","serverURL","docConfig","getVersions","versions","reportUpdate","dispatchFields","setModified","setSubmitted","submitted","versionsConfig","fields","formModified","code","locale","i18n","t","interval","autosaveInterval","drafts","autosave","saving","setSaving","lastSaved","setLastSaved","debouncedFields","modified","fieldRef","modifiedRef","localeRef","debouncedRef","current","console","log","abortController","AbortController","autosaveTimeout","undefined","url","method","entitySlug","slug","setTimeout","data","valid","_status","skipSubmission","validate","res","fetch","body","JSON","stringify","credentials","headers","language","signal","status","newDate","Date","getTime","updatedAt","toISOString","json","Array","isArray","errors","fieldErrors","nonFieldErrors","reduce","fieldErrs","nonFieldErrs","err","newFieldErrs","newNonFieldErrs","message","push","forEach","dataError","field","type","error","clearTimeout","abort","docs","div","className","Fragment","distance","date"],"mappings":"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"}

package/dist/elements/DatePicker/index.scss

@@ -189,7 +189,9 @@ $cal-icon-width: 18px;
       border-right: 1px solid var(--theme-elevation-150);
     }
 
-    &__time {
+    &__time,
+    &__time-container,
+    .react-datepicker__time-container .react-datepicker__time {
       background: none;
     }
 

package/dist/elements/DocumentDrawer/DrawerContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerContent.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentDrawer/DrawerContent.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAG/D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAerD,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAiG/D,CAAA"}
+{"version":3,"file":"DrawerContent.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentDrawer/DrawerContent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAG/D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAcrD,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA2F/D,CAAA"}

package/dist/elements/DocumentDrawer/DrawerContent.js

@@ -1,7 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useModal } from '@faceless-ui/modal';
-import * as qs from 'qs-esm';
 import React, { useCallback, useEffect, useState } from 'react';
 import { toast } from 'sonner';
 import { useRelatedCollections } from '../../fields/Relationship/AddNew/useRelatedCollections.js';
@@ -9,7 +8,6 @@ import { XIcon } from '../../icons/X/index.js';
 import { useComponentMap } from '../../providers/ComponentMap/index.js';
 import { useConfig } from '../../providers/Config/index.js';
 import { DocumentInfoProvider, useDocumentInfo } from '../../providers/DocumentInfo/index.js';
-import { useFormQueryParams } from '../../providers/FormQueryParams/index.js';
 import { useLocale } from '../../providers/Locale/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { Gutter } from '../Gutter/index.js';
@@ -25,13 +23,10 @@ export const DocumentDrawerContent = ({ id: existingDocID, Header, collectionSlu
     const [docID, setDocID] = useState(existingDocID);
     const [isOpen, setIsOpen] = useState(false);
     const [collectionConfig] = useRelatedCollections(collectionSlug);
-    const { formQueryParams } = useFormQueryParams();
-    const formattedQueryParams = qs.stringify(formQueryParams);
     const { componentMap } = useComponentMap();
     const { Edit } = componentMap[`${collectionSlug ? 'collections' : 'globals'}`][collectionSlug];
     const isEditing = Boolean(docID);
     const apiURL = docID ? `${serverURL}${apiRoute}/${collectionSlug}/${docID}${locale?.code ? `?locale=${locale.code}` : ''}` : null;
-    const action = `${serverURL}${apiRoute}/${collectionSlug}${isEditing ? `/${docID}` : ''}?${formattedQueryParams}`;
     useEffect(()=>{
         setIsOpen(Boolean(modalState[drawerSlug]?.isOpen));
     }, [
@@ -86,7 +81,6 @@ export const DocumentDrawerContent = ({ id: existingDocID, Header, collectionSlu
                 /*#__PURE__*/ _jsx(DocumentTitle, {})
             ]
         }),
-        action: action,
         apiURL: apiURL,
         collectionSlug: collectionConfig.slug,
         disableActions: true,

package/dist/elements/DocumentDrawer/DrawerContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/DocumentDrawer/DrawerContent.tsx"],"sourcesContent":["'use client'\n\nimport { useModal } from '@faceless-ui/modal'\nimport * as qs from 'qs-esm'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport type { DocumentDrawerProps } from './types.js'\n\nimport { useRelatedCollections } from '../../fields/Relationship/AddNew/useRelatedCollections.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { useComponentMap } from '../../providers/ComponentMap/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { DocumentInfoProvider, useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useFormQueryParams } from '../../providers/FormQueryParams/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Gutter } from '../Gutter/index.js'\nimport { IDLabel } from '../IDLabel/index.js'\nimport { RenderTitle } from '../RenderTitle/index.js'\nimport { baseClass } from './index.js'\n\nexport const DocumentDrawerContent: React.FC<DocumentDrawerProps> = ({\n  id: existingDocID,\n  Header,\n  collectionSlug,\n  drawerSlug,\n  onSave: onSaveFromProps,\n}) => {\n  const config = useConfig()\n\n  const {\n    routes: { api: apiRoute },\n    serverURL,\n  } = config\n\n  const { closeModal, modalState, toggleModal } = useModal()\n  const locale = useLocale()\n  const { t } = useTranslation()\n  const [docID, setDocID] = useState(existingDocID)\n  const [isOpen, setIsOpen] = useState(false)\n  const [collectionConfig] = useRelatedCollections(collectionSlug)\n  const { formQueryParams } = useFormQueryParams()\n  const formattedQueryParams = qs.stringify(formQueryParams)\n\n  const { componentMap } = useComponentMap()\n\n  const { Edit } = componentMap[`${collectionSlug ? 'collections' : 'globals'}`][collectionSlug]\n  const isEditing = Boolean(docID)\n  const apiURL = docID\n    ? `${serverURL}${apiRoute}/${collectionSlug}/${docID}${locale?.code ? `?locale=${locale.code}` : ''}`\n    : null\n  const action = `${serverURL}${apiRoute}/${collectionSlug}${\n    isEditing ? `/${docID}` : ''\n  }?${formattedQueryParams}`\n\n  useEffect(() => {\n    setIsOpen(Boolean(modalState[drawerSlug]?.isOpen))\n  }, [modalState, drawerSlug])\n\n  const onLoadError = React.useCallback(\n    (data) => {\n      if (isOpen) {\n        closeModal(drawerSlug)\n        toast.error(data.errors?.[0].message || t('error:unspecific'))\n      }\n    },\n    [closeModal, drawerSlug, isOpen, t],\n  )\n\n  const onSave = useCallback<DocumentDrawerProps['onSave']>(\n    (args) => {\n      setDocID(args.doc.id)\n      if (typeof onSaveFromProps === 'function') {\n        void onSaveFromProps({\n          ...args,\n          collectionConfig,\n        })\n      }\n    },\n    [onSaveFromProps, collectionConfig],\n  )\n\n  return (\n    <DocumentInfoProvider\n      BeforeDocument={\n        <Gutter className={`${baseClass}__header`}>\n          <div className={`${baseClass}__header-content`}>\n            <h2 className={`${baseClass}__header-text`}>\n              {Header || <RenderTitle element=\"span\" />}\n            </h2>\n            {/* TODO: the `button` HTML element breaks CSS transitions on the drawer for some reason...\n            i.e. changing to a `div` element will fix the animation issue but will break accessibility\n          */}\n            <button\n              aria-label={t('general:close')}\n              className={`${baseClass}__header-close`}\n              onClick={() => toggleModal(drawerSlug)}\n              type=\"button\"\n            >\n              <XIcon />\n            </button>\n          </div>\n          <DocumentTitle />\n        </Gutter>\n      }\n      action={action}\n      apiURL={apiURL}\n      collectionSlug={collectionConfig.slug}\n      disableActions\n      disableLeaveWithoutSaving\n      id={docID}\n      isEditing={isEditing}\n      onLoadError={onLoadError}\n      onSave={onSave}\n    >\n      {Edit}\n    </DocumentInfoProvider>\n  )\n}\n\nconst DocumentTitle: React.FC = () => {\n  const { id, title } = useDocumentInfo()\n  return id && id !== title ? <IDLabel id={id.toString()} /> : null\n}\n"],"names":["useModal","qs","React","useCallback","useEffect","useState","toast","useRelatedCollections","XIcon","useComponentMap","useConfig","DocumentInfoProvider","useDocumentInfo","useFormQueryParams","useLocale","useTranslation","Gutter","IDLabel","RenderTitle","baseClass","DocumentDrawerContent","id","existingDocID","Header","collectionSlug","drawerSlug","onSave","onSaveFromProps","config","routes","api","apiRoute","serverURL","closeModal","modalState","toggleModal","locale","t","docID","setDocID","isOpen","setIsOpen","collectionConfig","formQueryParams","formattedQueryParams","stringify","componentMap","Edit","isEditing","Boolean","apiURL","code","action","onLoadError","data","error","errors","message","args","doc","BeforeDocument","className","div","h2","element","button","aria-label","onClick","type","DocumentTitle","slug","disableActions","disableLeaveWithoutSaving","title","toString"],"mappings":"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"}
+{"version":3,"sources":["../../../src/elements/DocumentDrawer/DrawerContent.tsx"],"sourcesContent":["'use client'\n\nimport { useModal } from '@faceless-ui/modal'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport type { DocumentDrawerProps } from './types.js'\n\nimport { useRelatedCollections } from '../../fields/Relationship/AddNew/useRelatedCollections.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { useComponentMap } from '../../providers/ComponentMap/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { DocumentInfoProvider, useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Gutter } from '../Gutter/index.js'\nimport { IDLabel } from '../IDLabel/index.js'\nimport { RenderTitle } from '../RenderTitle/index.js'\nimport { baseClass } from './index.js'\n\nexport const DocumentDrawerContent: React.FC<DocumentDrawerProps> = ({\n  id: existingDocID,\n  Header,\n  collectionSlug,\n  drawerSlug,\n  onSave: onSaveFromProps,\n}) => {\n  const config = useConfig()\n\n  const {\n    routes: { api: apiRoute },\n    serverURL,\n  } = config\n\n  const { closeModal, modalState, toggleModal } = useModal()\n  const locale = useLocale()\n  const { t } = useTranslation()\n  const [docID, setDocID] = useState(existingDocID)\n  const [isOpen, setIsOpen] = useState(false)\n  const [collectionConfig] = useRelatedCollections(collectionSlug)\n\n  const { componentMap } = useComponentMap()\n\n  const { Edit } = componentMap[`${collectionSlug ? 'collections' : 'globals'}`][collectionSlug]\n  const isEditing = Boolean(docID)\n  const apiURL = docID\n    ? `${serverURL}${apiRoute}/${collectionSlug}/${docID}${locale?.code ? `?locale=${locale.code}` : ''}`\n    : null\n\n  useEffect(() => {\n    setIsOpen(Boolean(modalState[drawerSlug]?.isOpen))\n  }, [modalState, drawerSlug])\n\n  const onLoadError = React.useCallback(\n    (data) => {\n      if (isOpen) {\n        closeModal(drawerSlug)\n        toast.error(data.errors?.[0].message || t('error:unspecific'))\n      }\n    },\n    [closeModal, drawerSlug, isOpen, t],\n  )\n\n  const onSave = useCallback<DocumentDrawerProps['onSave']>(\n    (args) => {\n      setDocID(args.doc.id)\n      if (typeof onSaveFromProps === 'function') {\n        void onSaveFromProps({\n          ...args,\n          collectionConfig,\n        })\n      }\n    },\n    [onSaveFromProps, collectionConfig],\n  )\n\n  return (\n    <DocumentInfoProvider\n      BeforeDocument={\n        <Gutter className={`${baseClass}__header`}>\n          <div className={`${baseClass}__header-content`}>\n            <h2 className={`${baseClass}__header-text`}>\n              {Header || <RenderTitle element=\"span\" />}\n            </h2>\n            {/* TODO: the `button` HTML element breaks CSS transitions on the drawer for some reason...\n            i.e. changing to a `div` element will fix the animation issue but will break accessibility\n          */}\n            <button\n              aria-label={t('general:close')}\n              className={`${baseClass}__header-close`}\n              onClick={() => toggleModal(drawerSlug)}\n              type=\"button\"\n            >\n              <XIcon />\n            </button>\n          </div>\n          <DocumentTitle />\n        </Gutter>\n      }\n      apiURL={apiURL}\n      collectionSlug={collectionConfig.slug}\n      disableActions\n      disableLeaveWithoutSaving\n      id={docID}\n      isEditing={isEditing}\n      onLoadError={onLoadError}\n      onSave={onSave}\n    >\n      {Edit}\n    </DocumentInfoProvider>\n  )\n}\n\nconst DocumentTitle: React.FC = () => {\n  const { id, title } = useDocumentInfo()\n  return id && id !== title ? <IDLabel id={id.toString()} /> : null\n}\n"],"names":["useModal","React","useCallback","useEffect","useState","toast","useRelatedCollections","XIcon","useComponentMap","useConfig","DocumentInfoProvider","useDocumentInfo","useLocale","useTranslation","Gutter","IDLabel","RenderTitle","baseClass","DocumentDrawerContent","id","existingDocID","Header","collectionSlug","drawerSlug","onSave","onSaveFromProps","config","routes","api","apiRoute","serverURL","closeModal","modalState","toggleModal","locale","t","docID","setDocID","isOpen","setIsOpen","collectionConfig","componentMap","Edit","isEditing","Boolean","apiURL","code","onLoadError","data","error","errors","message","args","doc","BeforeDocument","className","div","h2","element","button","aria-label","onClick","type","DocumentTitle","slug","disableActions","disableLeaveWithoutSaving","title","toString"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import type CropType from 'react-image-crop';
+import type { UploadEdits } from 'payload';
 import React from 'react';
 import 'react-image-crop/dist/ReactCrop.css';
 import './index.scss';
@@ -10,12 +10,9 @@ export type EditUploadProps = {
     fileName: string;
     fileSrc: string;
     imageCacheTag?: string;
-    initialCrop?: CropType;
+    initialCrop?: UploadEdits['crop'];
     initialFocalPoint?: FocalPosition;
-    onSave?: ({ crop, focalPosition }: {
-        crop: CropType;
-        focalPosition: FocalPosition;
-    }) => void;
+    onSave?: (uploadEdits: UploadEdits) => void;
     showCrop?: boolean;
     showFocalPoint?: boolean;
 };

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,QAAQ,MAAM,kBAAkB,CAAA;AAG5C,OAAO,KAAuC,MAAM,OAAO,CAAA;AAE3D,OAAO,qCAAqC,CAAA;AAM5C,OAAO,cAAc,CAAA;AA2BrB,KAAK,aAAa,GAAG;IACnB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,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;AAYD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAyQhD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/EditUpload/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAG1C,OAAO,KAAuC,MAAM,OAAO,CAAA;AAE3D,OAAO,qCAAqC,CAAA;AAM5C,OAAO,cAAc,CAAA;AA2BrB,KAAK,aAAa,GAAG;IACnB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;IACf,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,WAAW,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IACjC,iBAAiB,CAAC,EAAE,aAAa,CAAA;IACjC,MAAM,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAA;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAA;AAUD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAsQhD,CAAA"}

package/dist/elements/EditUpload/index.js

@@ -28,10 +28,8 @@ const Input = /*#__PURE__*/ forwardRef((props, ref)=>{
 });
 const defaultCrop = {
     height: 100,
-    heightPixels: 0,
     unit: '%',
     width: 100,
-    widthPixels: 0,
     x: 0,
     y: 0
 };
@@ -40,7 +38,7 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, init
     const { t } = useTranslation();
     const [crop, setCrop] = useState(()=>({
             ...defaultCrop,
-            ...initialCrop
+            ...initialCrop || {}
         }));
     const defaultFocalPosition = {
         x: 50,
@@ -51,24 +49,25 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, init
             ...initialFocalPoint
         }));
     const [checkBounds, setCheckBounds] = useState(false);
-    const [originalHeight, setOriginalHeight] = useState(0);
-    const [originalWidth, setOriginalWidth] = useState(0);
+    const [uncroppedPixelHeight, setUncroppedPixelHeight] = useState(0);
+    const [uncroppedPixelWidth, setUncroppedPixelWidth] = useState(0);
     const focalWrapRef = useRef(undefined);
     const imageRef = useRef(undefined);
     const cropRef = useRef(undefined);
-    const heightRef = useRef(null);
-    const widthRef = useRef(null);
+    const heightInputRef = useRef(null);
+    const widthInputRef = useRef(null);
     const [imageLoaded, setImageLoaded] = useState(false);
     const onImageLoad = (e)=>{
-        setOriginalHeight(e.currentTarget.naturalHeight);
-        setOriginalWidth(e.currentTarget.naturalWidth);
+        // set the default image height/width on load
+        setUncroppedPixelHeight(e.currentTarget.naturalHeight);
+        setUncroppedPixelWidth(e.currentTarget.naturalWidth);
         setImageLoaded(true);
     };
     const fineTuneCrop = ({ dimension, value })=>{
         const intValue = parseInt(value);
-        if (dimension === 'width' && intValue >= originalWidth) return null;
-        if (dimension === 'height' && intValue >= originalHeight) return null;
-        const percentage = 100 * (intValue / (dimension === 'width' ? originalWidth : originalHeight));
+        if (dimension === 'width' && intValue >= uncroppedPixelWidth) return null;
+        if (dimension === 'height' && intValue >= uncroppedPixelHeight) return null;
+        const percentage = 100 * (intValue / (dimension === 'width' ? uncroppedPixelWidth : uncroppedPixelHeight));
         if (percentage === 100 || percentage === 0) return null;
         setCrop({
             ...crop,
@@ -86,12 +85,10 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, init
     };
     const saveEdits = ()=>{
         if (typeof onSave === 'function') onSave({
-            crop: crop ? {
-                ...crop,
-                heightPixels: Number(heightRef.current?.value ?? crop.heightPixels),
-                widthPixels: Number(widthRef.current?.value ?? crop.widthPixels)
-            } : undefined,
-            focalPosition
+            crop: crop ? crop : undefined,
+            focalPoint: focalPosition,
+            heightInPixels: Number(heightInputRef?.current?.value ?? uncroppedPixelHeight),
+            widthInPixels: Number(widthInputRef?.current?.value ?? uncroppedPixelWidth)
         });
         closeModal(editDrawerSlug);
     };
@@ -158,7 +155,7 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, init
                             className: `${baseClass}__focal-wrapper`,
                             ref: focalWrapRef,
                             style: {
-                                aspectRatio: `${originalWidth / originalHeight}`
+                                aspectRatio: `${uncroppedPixelWidth / uncroppedPixelHeight}`
                             },
                             children: [
                                 showCrop ? /*#__PURE__*/ _jsx(ReactCrop, {
@@ -215,10 +212,8 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, init
                                                     className: `${baseClass}__reset`,
                                                     onClick: ()=>setCrop({
                                                             height: 100,
-                                                            heightPixels: originalHeight,
                                                             unit: '%',
                                                             width: 100,
-                                                            widthPixels: originalWidth,
                                                             x: 0,
                                                             y: 0
                                                         }),
@@ -240,8 +235,8 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, init
                                                         dimension: 'width',
                                                         value
                                                     }),
-                                                ref: widthRef,
-                                                value: (crop.width / 100 * originalWidth).toFixed(0)
+                                                ref: widthInputRef,
+                                                value: (crop.width / 100 * uncroppedPixelWidth).toFixed(0)
                                             }),
                                             /*#__PURE__*/ _jsx(Input, {
                                                 name: `${t('upload:height')} (px)`,
@@ -249,8 +244,8 @@ export const EditUpload = ({ fileName, fileSrc, imageCacheTag, initialCrop, init
                                                         dimension: 'height',
                                                         value
                                                     }),
-                                                ref: heightRef,
-                                                value: (crop.height / 100 * originalHeight).toFixed(0)
+                                                ref: heightInputRef,
+                                                value: (crop.height / 100 * uncroppedPixelHeight).toFixed(0)
                                             })
                                         ]
                                     })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/EditUpload/index.tsx"],"sourcesContent":["'use client'\nimport type CropType from 'react-image-crop'\n\nimport { useModal } from '@faceless-ui/modal'\nimport React, { forwardRef, 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 { PlusIcon } 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\ntype Props = {\n  name: string\n  onChange: (value: string) => void\n  value: string\n}\n\nconst Input = forwardRef<HTMLInputElement, Props>((props, ref) => {\n  const { name, onChange, value } = props\n\n  return (\n    <div className={`${baseClass}__input`}>\n      {name}\n      <input\n        name={name}\n        onChange={(e) => onChange(e.target.value)}\n        ref={ref}\n        type=\"number\"\n        value={value}\n      />\n    </div>\n  )\n})\n\ntype FocalPosition = {\n  x: number\n  y: number\n}\n\nexport type EditUploadProps = {\n  fileName: string\n  fileSrc: string\n  imageCacheTag?: string\n  initialCrop?: CropType\n  initialFocalPoint?: FocalPosition\n  onSave?: ({ crop, focalPosition }: { crop: CropType; focalPosition: FocalPosition }) => void\n  showCrop?: boolean\n  showFocalPoint?: boolean\n}\n\nconst defaultCrop: CropType = {\n  height: 100,\n  heightPixels: 0,\n  unit: '%',\n  width: 100,\n  widthPixels: 0,\n  x: 0,\n  y: 0,\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 { closeModal } = useModal()\n  const { t } = useTranslation()\n\n  const [crop, setCrop] = useState<CropType>(() => ({\n    ...defaultCrop,\n    ...initialCrop,\n  }))\n\n  const defaultFocalPosition: FocalPosition = {\n    x: 50,\n    y: 50,\n  }\n\n  const [focalPosition, setFocalPosition] = useState<FocalPosition>(() => ({\n    ...defaultFocalPosition,\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>(undefined)\n  const imageRef = useRef<HTMLImageElement | undefined>(undefined)\n  const cropRef = useRef<HTMLDivElement | undefined>(undefined)\n\n  const heightRef = useRef<HTMLInputElement | null>(null)\n  const widthRef = useRef<HTMLInputElement | null>(null)\n\n  const [imageLoaded, setImageLoaded] = useState<boolean>(false)\n\n  const onImageLoad = (e) => {\n    setOriginalHeight(e.currentTarget.naturalHeight)\n    setOriginalWidth(e.currentTarget.naturalWidth)\n    setImageLoaded(true)\n  }\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 fineTuneFocalPosition = ({\n    coordinate,\n    value,\n  }: {\n    coordinate: 'x' | 'y'\n    value: string\n  }) => {\n    const intValue = parseInt(value)\n    if (intValue >= 0 && intValue <= 100) {\n      setFocalPosition((prevPosition) => ({ ...prevPosition, [coordinate]: intValue }))\n    }\n  }\n\n  const saveEdits = () => {\n    if (typeof onSave === 'function')\n      onSave({\n        crop: crop\n          ? {\n              ...crop,\n              heightPixels: Number(heightRef.current?.value ?? crop.heightPixels),\n              widthPixels: Number(widthRef.current?.value ?? crop.widthPixels),\n            }\n          : undefined,\n        focalPosition,\n      })\n    closeModal(editDrawerSlug)\n  }\n\n  const onDragEnd = React.useCallback(({ x, y }) => {\n    setFocalPosition({ 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    setFocalPosition({ 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            disabled={!imageLoaded}\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={onImageLoad}\n                  ref={imageRef}\n                  src={fileSrcToUse}\n                />\n              </ReactCrop>\n            ) : (\n              <img\n                alt={t('upload:setFocalPoint')}\n                onLoad={onImageLoad}\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={focalPosition}\n                onDragEnd={onDragEnd}\n                setCheckBounds={showCrop ? setCheckBounds : false}\n              >\n                <PlusIcon />\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                          heightPixels: originalHeight,\n                          unit: '%',\n                          width: 100,\n                          widthPixels: originalWidth,\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                    ref={widthRef}\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                    ref={heightRef}\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) => fineTuneFocalPosition({ coordinate: 'x', value })}\n                    value={focalPosition.x.toFixed(0)}\n                  />\n                  <Input\n                    name=\"Y %\"\n                    onChange={(value) => fineTuneFocalPosition({ coordinate: 'y', value })}\n                    value={focalPosition.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>(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":["useModal","React","forwardRef","useRef","useState","ReactCrop","editDrawerSlug","PlusIcon","useTranslation","Button","baseClass","Input","props","ref","name","onChange","value","div","className","input","e","target","type","defaultCrop","height","heightPixels","unit","width","widthPixels","x","y","EditUpload","fileName","fileSrc","imageCacheTag","initialCrop","initialFocalPoint","onSave","showCrop","showFocalPoint","closeModal","t","crop","setCrop","defaultFocalPosition","focalPosition","setFocalPosition","checkBounds","setCheckBounds","originalHeight","setOriginalHeight","originalWidth","setOriginalWidth","focalWrapRef","undefined","imageRef","cropRef","heightRef","widthRef","imageLoaded","setImageLoaded","onImageLoad","currentTarget","naturalHeight","naturalWidth","fineTuneCrop","dimension","intValue","parseInt","percentage","fineTuneFocalPosition","coordinate","prevPosition","saveEdits","Number","current","onDragEnd","useCallback","centerFocalPoint","containerRect","getBoundingClientRect","boundsRect","xCenter","left","yCenter","top","fileSrcToUse","h2","title","aria-label","buttonStyle","onClick","disabled","style","aspectRatio","_","c","onComplete","renderSelectionAddon","img","alt","onLoad","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"],"mappings":"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"}
+{"version":3,"sources":["../../../src/elements/EditUpload/index.tsx"],"sourcesContent":["'use client'\n\nimport type { UploadEdits } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport React, { forwardRef, 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 { PlusIcon } 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\ntype Props = {\n  name: string\n  onChange: (value: string) => void\n  value: string\n}\n\nconst Input = forwardRef<HTMLInputElement, Props>((props, ref) => {\n  const { name, onChange, value } = props\n\n  return (\n    <div className={`${baseClass}__input`}>\n      {name}\n      <input\n        name={name}\n        onChange={(e) => onChange(e.target.value)}\n        ref={ref}\n        type=\"number\"\n        value={value}\n      />\n    </div>\n  )\n})\n\ntype FocalPosition = {\n  x: number\n  y: number\n}\n\nexport type EditUploadProps = {\n  fileName: string\n  fileSrc: string\n  imageCacheTag?: string\n  initialCrop?: UploadEdits['crop']\n  initialFocalPoint?: FocalPosition\n  onSave?: (uploadEdits: UploadEdits) => void\n  showCrop?: boolean\n  showFocalPoint?: boolean\n}\n\nconst defaultCrop: UploadEdits['crop'] = {\n  height: 100,\n  unit: '%',\n  width: 100,\n  x: 0,\n  y: 0,\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 { closeModal } = useModal()\n  const { t } = useTranslation()\n\n  const [crop, setCrop] = useState<UploadEdits['crop']>(() => ({\n    ...defaultCrop,\n    ...(initialCrop || {}),\n  }))\n\n  const defaultFocalPosition: FocalPosition = {\n    x: 50,\n    y: 50,\n  }\n\n  const [focalPosition, setFocalPosition] = useState<FocalPosition>(() => ({\n    ...defaultFocalPosition,\n    ...initialFocalPoint,\n  }))\n\n  const [checkBounds, setCheckBounds] = useState<boolean>(false)\n  const [uncroppedPixelHeight, setUncroppedPixelHeight] = useState<number>(0)\n  const [uncroppedPixelWidth, setUncroppedPixelWidth] = useState<number>(0)\n\n  const focalWrapRef = useRef<HTMLDivElement | undefined>(undefined)\n  const imageRef = useRef<HTMLImageElement | undefined>(undefined)\n  const cropRef = useRef<HTMLDivElement | undefined>(undefined)\n\n  const heightInputRef = useRef<HTMLInputElement | null>(null)\n  const widthInputRef = useRef<HTMLInputElement | null>(null)\n\n  const [imageLoaded, setImageLoaded] = useState<boolean>(false)\n\n  const onImageLoad = (e) => {\n    // set the default image height/width on load\n    setUncroppedPixelHeight(e.currentTarget.naturalHeight)\n    setUncroppedPixelWidth(e.currentTarget.naturalWidth)\n    setImageLoaded(true)\n  }\n\n  const fineTuneCrop = ({ dimension, value }: { dimension: 'height' | 'width'; value: string }) => {\n    const intValue = parseInt(value)\n    if (dimension === 'width' && intValue >= uncroppedPixelWidth) return null\n    if (dimension === 'height' && intValue >= uncroppedPixelHeight) return null\n\n    const percentage =\n      100 * (intValue / (dimension === 'width' ? uncroppedPixelWidth : uncroppedPixelHeight))\n\n    if (percentage === 100 || percentage === 0) return null\n\n    setCrop({\n      ...crop,\n      [dimension]: percentage,\n    })\n  }\n\n  const fineTuneFocalPosition = ({\n    coordinate,\n    value,\n  }: {\n    coordinate: 'x' | 'y'\n    value: string\n  }) => {\n    const intValue = parseInt(value)\n    if (intValue >= 0 && intValue <= 100) {\n      setFocalPosition((prevPosition) => ({ ...prevPosition, [coordinate]: intValue }))\n    }\n  }\n\n  const saveEdits = () => {\n    if (typeof onSave === 'function')\n      onSave({\n        crop: crop ? crop : undefined,\n        focalPoint: focalPosition,\n        heightInPixels: Number(heightInputRef?.current?.value ?? uncroppedPixelHeight),\n        widthInPixels: Number(widthInputRef?.current?.value ?? uncroppedPixelWidth),\n      })\n    closeModal(editDrawerSlug)\n  }\n\n  const onDragEnd = React.useCallback(({ x, y }) => {\n    setFocalPosition({ 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    setFocalPosition({ 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            disabled={!imageLoaded}\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: `${uncroppedPixelWidth / uncroppedPixelHeight}`,\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={onImageLoad}\n                  ref={imageRef}\n                  src={fileSrcToUse}\n                />\n              </ReactCrop>\n            ) : (\n              <img\n                alt={t('upload:setFocalPoint')}\n                onLoad={onImageLoad}\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={focalPosition}\n                onDragEnd={onDragEnd}\n                setCheckBounds={showCrop ? setCheckBounds : false}\n              >\n                <PlusIcon />\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                    ref={widthInputRef}\n                    value={((crop.width / 100) * uncroppedPixelWidth).toFixed(0)}\n                  />\n                  <Input\n                    name={`${t('upload:height')} (px)`}\n                    onChange={(value) => fineTuneCrop({ dimension: 'height', value })}\n                    ref={heightInputRef}\n                    value={((crop.height / 100) * uncroppedPixelHeight).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) => fineTuneFocalPosition({ coordinate: 'x', value })}\n                    value={focalPosition.x.toFixed(0)}\n                  />\n                  <Input\n                    name=\"Y %\"\n                    onChange={(value) => fineTuneFocalPosition({ coordinate: 'y', value })}\n                    value={focalPosition.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>(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":["useModal","React","forwardRef","useRef","useState","ReactCrop","editDrawerSlug","PlusIcon","useTranslation","Button","baseClass","Input","props","ref","name","onChange","value","div","className","input","e","target","type","defaultCrop","height","unit","width","x","y","EditUpload","fileName","fileSrc","imageCacheTag","initialCrop","initialFocalPoint","onSave","showCrop","showFocalPoint","closeModal","t","crop","setCrop","defaultFocalPosition","focalPosition","setFocalPosition","checkBounds","setCheckBounds","uncroppedPixelHeight","setUncroppedPixelHeight","uncroppedPixelWidth","setUncroppedPixelWidth","focalWrapRef","undefined","imageRef","cropRef","heightInputRef","widthInputRef","imageLoaded","setImageLoaded","onImageLoad","currentTarget","naturalHeight","naturalWidth","fineTuneCrop","dimension","intValue","parseInt","percentage","fineTuneFocalPosition","coordinate","prevPosition","saveEdits","focalPoint","heightInPixels","Number","current","widthInPixels","onDragEnd","useCallback","centerFocalPoint","containerRect","getBoundingClientRect","boundsRect","xCenter","left","yCenter","top","fileSrcToUse","h2","title","aria-label","buttonStyle","onClick","disabled","style","aspectRatio","_","c","onComplete","renderSelectionAddon","img","alt","onLoad","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"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAI5D,OAAO,KAAsC,MAAM,OAAO,CAAA;AAM1D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yDAAyD,CAAA;AAiBvF,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,gBAAgB,EAAE,sBAAsB,CAAA;IACxC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,EAAE,QAAQ,CAAA;IAClB,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CAC3C,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA2IpD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAI5D,OAAO,KAAsC,MAAM,OAAO,CAAA;AAQ1D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yDAAyD,CAAA;AAiBvF,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,gBAAgB,EAAE,sBAAsB,CAAA;IACxC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,EAAE,QAAQ,CAAA;IAClB,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CAC3C,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyLpD,CAAA"}

package/dist/elements/ListControls/index.js

@@ -5,6 +5,7 @@ import { getTranslation } from '@payloadcms/translations';
 import React, { useEffect, useRef, useState } from 'react';
 import AnimateHeightImport from 'react-animate-height';
 const AnimateHeight = AnimateHeightImport.default || AnimateHeightImport;
+import { useListInfo } from '@payloadcms/ui';
 import { useUseTitleField } from '../../hooks/useUseAsTitle.js';
 import { ChevronIcon } from '../../icons/Chevron/index.js';
 import { useListQuery } from '../../providers/ListQuery/index.js';
@@ -29,10 +30,17 @@ const baseClass = 'list-controls';
  */ export const ListControls = (props)=>{
     const { collectionConfig, enableColumns = true, enableSort = false, fieldMap } = props;
     const { handleSearchChange } = useListQuery();
+    const { collectionSlug } = useListInfo();
     const { searchParams } = useSearchParams();
     const titleField = useUseTitleField(collectionConfig, fieldMap);
     const { i18n, t } = useTranslation();
     const { breakpoints: { s: smallBreak } } = useWindowInfo();
+    const [search, setSearch] = useState(typeof searchParams?.search === 'string' ? searchParams?.search : '');
+    const searchLabel = (titleField && getTranslation('label' in titleField.fieldComponentProps && typeof titleField.fieldComponentProps.label === 'string' ? titleField.fieldComponentProps.label : titleField.name, i18n)) ?? 'ID';
+    const listSearchableFields = getTextFieldsToBeSearched(collectionConfig.admin.listSearchableFields, fieldMap);
+    const searchLabelTranslated = useRef(t('general:searchBy', {
+        label: getTranslation(searchLabel, i18n)
+    }));
     const hasWhereParam = useRef(Boolean(searchParams?.where));
     const shouldInitializeWhereOpened = validateWhereQuery(searchParams?.where);
     const [visibleDrawer, setVisibleDrawer] = useState(shouldInitializeWhereOpened ? 'where' : undefined);
@@ -47,6 +55,31 @@ const baseClass = 'list-controls';
         setVisibleDrawer,
         searchParams?.where
     ]);
+    useEffect(()=>{
+        if (listSearchableFields?.length > 0) {
+            searchLabelTranslated.current = listSearchableFields.reduce((placeholderText, field, i)=>{
+                const label = 'fieldComponentProps' in field && 'label' in field.fieldComponentProps && field.fieldComponentProps.label ? field.fieldComponentProps.label : field.name;
+                if (i === 0) {
+                    return `${t('general:searchBy', {
+                        label: getTranslation(label, i18n)
+                    })}`;
+                }
+                if (i === listSearchableFields.length - 1) {
+                    return `${placeholderText} ${t('general:or')} ${getTranslation(label, i18n)}`;
+                }
+                return `${placeholderText}, ${getTranslation(label, i18n)}`;
+            }, '');
+        } else {
+            searchLabelTranslated.current = t('general:searchBy', {
+                label: getTranslation(searchLabel, i18n)
+            });
+        }
+    }, [
+        t,
+        listSearchableFields,
+        i18n,
+        searchLabel
+    ]);
     return /*#__PURE__*/ _jsxs("div", {
         className: baseClass,
         children: [
@@ -54,11 +87,13 @@ const baseClass = 'list-controls';
                 className: `${baseClass}__wrap`,
                 children: [
                     /*#__PURE__*/ _jsx(SearchFilter, {
-                        fieldLabel: (titleField && getTranslation('label' in titleField.fieldComponentProps && typeof titleField.fieldComponentProps.label === 'string' ? titleField.fieldComponentProps.label : titleField.name, i18n)) ?? undefined,
                         fieldName: titleField?.name,
                         handleChange: handleSearchChange,
-                        listSearchableFields: getTextFieldsToBeSearched(collectionConfig.admin.listSearchableFields, fieldMap)
-                    }),
+                        initialParams: searchParams,
+                        label: searchLabelTranslated.current,
+                        setValue: setSearch,
+                        value: search
+                    }, collectionSlug),
                     /*#__PURE__*/ _jsx("div", {
                         className: `${baseClass}__buttons`,
                         children: /*#__PURE__*/ _jsxs("div", {