@payloadcms/ui 3.0.0-alpha.48 → 3.0.0-alpha.49

package/dist/elements/EditMany/index.js

@@ -3,19 +3,19 @@ import * as facelessUIImport from '@faceless-ui/modal';
 import { getTranslation } from '@payloadcms/translations';
 import { useRouter } from 'next/navigation.js';
 import React, { useCallback, useState } from 'react';
-import { FieldPathProvider } from '../../forms/FieldPathProvider/index.js';
 import { useForm } from '../../forms/Form/context.js';
-import Form from '../../forms/Form/index.js';
-import RenderFields from '../../forms/RenderFields/index.js';
-import FormSubmit from '../../forms/Submit/index.js';
+import { Form } from '../../forms/Form/index.js';
+import { RenderFields } from '../../forms/RenderFields/index.js';
+import { FormSubmit } from '../../forms/Submit/index.js';
 import { X } from '../../icons/X/index.js';
 import { useAuth } from '../../providers/Auth/index.js';
-import { useComponentMap } from '../../providers/ComponentMapProvider/index.js';
+import { useComponentMap } from '../../providers/ComponentMap/index.js';
 import { useConfig } from '../../providers/Config/index.js';
 import { DocumentInfoProvider } from '../../providers/DocumentInfo/index.js';
-import { OperationContext } from '../../providers/OperationProvider/index.js';
+import { OperationContext } from '../../providers/Operation/index.js';
+import { useRouteCache } from '../../providers/RouteCache/index.js';
 import { useSearchParams } from '../../providers/SearchParams/index.js';
-import { SelectAllStatus, useSelection } from '../../providers/SelectionProvider/index.js';
+import { SelectAllStatus, useSelection } from '../../providers/Selection/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { getFormState } from '../../utilities/getFormState.js';
 import { Drawer, DrawerToggler } from '../Drawer/index.js';
@@ -25,7 +25,7 @@ const Submit = ({ action, disabled })=>{
     const { submit } = useForm();
     const { t } = useTranslation();
     const save = useCallback(()=>{
-        submit({
+        void submit({
             action,
             method: 'PATCH',
             skipValidation: true
@@ -44,7 +44,7 @@ const Publish = ({ action, disabled })=>{
     const { submit } = useForm();
     const { t } = useTranslation();
     const save = useCallback(()=>{
-        submit({
+        void submit({
             action,
             method: 'PATCH',
             overrides: {
@@ -66,7 +66,7 @@ const SaveDraft = ({ action, disabled })=>{
     const { submit } = useForm();
     const { t } = useTranslation();
     const save = useCallback(()=>{
-        submit({
+        void submit({
             action,
             method: 'PATCH',
             overrides: {
@@ -85,8 +85,8 @@ const SaveDraft = ({ action, disabled })=>{
     }, t('version:saveDraft'));
 };
 export const EditMany = (props)=>{
-    const { Modal, useModal } = facelessUIImport;
-    const { collection: { slug, fields, labels: { plural } } = {}, collection } = props;
+    const { useModal } = facelessUIImport;
+    const { collection: { slug, fields, labels: { plural } } = {}, collection, fieldMap } = props;
     const { permissions } = useAuth();
     const { closeModal } = useModal();
     const { routes: { api: apiRoute }, serverURL } = useConfig();
@@ -99,6 +99,7 @@ export const EditMany = (props)=>{
     const [reducedFieldMap, setReducedFieldMap] = useState([]);
     const [initialState, setInitialState] = useState();
     const hasInitializedState = React.useRef(false);
+    const { clearRouteCache } = useRouteCache();
     const collectionPermissions = permissions?.collections?.[slug];
     const hasUpdatePermission = collectionPermissions?.update?.permission;
     const drawerSlug = `edit-${slug}`;
@@ -108,7 +109,7 @@ export const EditMany = (props)=>{
             const reducedFieldMap = [];
             fieldMap.map((field)=>{
                 selected.map((selectedField)=>{
-                    if (field.name === selectedField.name) {
+                    if ('name' in field && field.name === selectedField.name) {
                         reducedFieldMap.push(field);
                     }
                 });
@@ -145,6 +146,20 @@ export const EditMany = (props)=>{
         serverURL,
         slug
     ]);
+    const onChange = useCallback(({ formState: prevFormState })=>getFormState({
+            apiRoute,
+            body: {
+                collectionSlug: slug,
+                formState: prevFormState,
+                operation: 'update',
+                schemaPath: slug
+            },
+            serverURL
+        }), [
+        serverURL,
+        apiRoute,
+        slug
+    ]);
     if (selectAll === SelectAllStatus.None || !hasUpdatePermission) {
         return null;
     }
@@ -154,6 +169,8 @@ export const EditMany = (props)=>{
                 page: selectAll === SelectAllStatus.AllAvailable ? '1' : undefined
             }
         }));
+        clearRouteCache();
+        closeModal(drawerSlug);
     };
     return /*#__PURE__*/ React.createElement("div", {
         className: baseClass
@@ -168,7 +185,8 @@ export const EditMany = (props)=>{
         Header: null,
         slug: drawerSlug
     }, /*#__PURE__*/ React.createElement(DocumentInfoProvider, {
-        collection: collection
+        collectionSlug: slug,
+        id: null
     }, /*#__PURE__*/ React.createElement(OperationContext.Provider, {
         value: "update"
     }, /*#__PURE__*/ React.createElement("div", {
@@ -186,18 +204,21 @@ export const EditMany = (props)=>{
         id: `close-drawer__${drawerSlug}`,
         onClick: ()=>closeModal(drawerSlug),
         type: "button"
-    }, /*#__PURE__*/ React.createElement(X, null))), /*#__PURE__*/ React.createElement(FieldPathProvider, {
-        path: "",
-        schemaPath: slug
-    }, /*#__PURE__*/ React.createElement(Form, {
+    }, /*#__PURE__*/ React.createElement(X, null))), /*#__PURE__*/ React.createElement(Form, {
         className: `${baseClass}__form`,
         initialState: initialState,
+        onChange: [
+            onChange
+        ],
         onSuccess: onSuccess
     }, /*#__PURE__*/ React.createElement(FieldSelect, {
-        fields: fields,
+        fieldMap: fieldMap,
         setSelected: setSelected
     }), reducedFieldMap.length === 0 ? null : /*#__PURE__*/ React.createElement(RenderFields, {
-        fieldMap: reducedFieldMap
+        fieldMap: reducedFieldMap,
+        path: "",
+        readOnly: false,
+        schemaPath: slug
     }), /*#__PURE__*/ React.createElement("div", {
         className: `${baseClass}__sidebar-wrap`
     }, /*#__PURE__*/ React.createElement("div", {
@@ -215,7 +236,7 @@ export const EditMany = (props)=>{
     })) : /*#__PURE__*/ React.createElement(Submit, {
         action: `${serverURL}${apiRoute}/${slug}${getQueryParams()}`,
         disabled: selected.length === 0
-    }))))))))))));
+    })))))))))));
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/EditMany/index.tsx"],"sourcesContent":["'use client'\nimport type { FormState } from 'payload/types'\n\nimport * as facelessUIImport from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport { useRouter } from 'next/navigation.js'\nimport React, { useCallback, useState } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { FieldPathProvider } from '../../forms/FieldPathProvider/index.js'\nimport { useForm } from '../../forms/Form/context.js'\nimport Form from '../../forms/Form/index.js'\nimport RenderFields from '../../forms/RenderFields/index.js'\nimport FormSubmit from '../../forms/Submit/index.js'\nimport { X } from '../../icons/X/index.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useComponentMap } from '../../providers/ComponentMapProvider/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { DocumentInfoProvider } from '../../providers/DocumentInfo/index.js'\nimport { OperationContext } from '../../providers/OperationProvider/index.js'\nimport { useSearchParams } from '../../providers/SearchParams/index.js'\nimport { SelectAllStatus, useSelection } from '../../providers/SelectionProvider/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { getFormState } from '../../utilities/getFormState.js'\nimport { Drawer, DrawerToggler } from '../Drawer/index.js'\nimport { FieldSelect } from '../FieldSelect/index.js'\nimport './index.scss'\n\nconst baseClass = 'edit-many'\n\nconst Submit: React.FC<{ action: string; disabled: boolean }> = ({ action, disabled }) => {\n  const { submit } = useForm()\n  const { t } = useTranslation()\n\n  const save = useCallback(() => {\n    submit({\n      action,\n      method: 'PATCH',\n      skipValidation: true,\n    })\n  }, [action, submit])\n\n  return (\n    <FormSubmit className={`${baseClass}__save`} disabled={disabled} onClick={save}>\n      {t('general:save')}\n    </FormSubmit>\n  )\n}\nconst Publish: React.FC<{ action: string; disabled: boolean }> = ({ action, disabled }) => {\n  const { submit } = useForm()\n  const { t } = useTranslation()\n\n  const save = useCallback(() => {\n    submit({\n      action,\n      method: 'PATCH',\n      overrides: {\n        _status: 'published',\n      },\n      skipValidation: true,\n    })\n  }, [action, submit])\n\n  return (\n    <FormSubmit className={`${baseClass}__publish`} disabled={disabled} onClick={save}>\n      {t('version:publishChanges')}\n    </FormSubmit>\n  )\n}\nconst SaveDraft: React.FC<{ action: string; disabled: boolean }> = ({ action, disabled }) => {\n  const { submit } = useForm()\n  const { t } = useTranslation()\n\n  const save = useCallback(() => {\n    submit({\n      action,\n      method: 'PATCH',\n      overrides: {\n        _status: 'draft',\n      },\n      skipValidation: true,\n    })\n  }, [action, submit])\n\n  return (\n    <FormSubmit className={`${baseClass}__draft`} disabled={disabled} onClick={save}>\n      {t('version:saveDraft')}\n    </FormSubmit>\n  )\n}\nexport const EditMany: React.FC<Props> = (props) => {\n  const { Modal, useModal } = facelessUIImport\n\n  const { collection: { slug, fields, labels: { plural } } = {}, collection } = props\n\n  const { permissions } = useAuth()\n  const { closeModal } = useModal()\n  const {\n    routes: { api: apiRoute },\n    serverURL,\n  } = useConfig()\n  const { count, getQueryParams, selectAll } = useSelection()\n  const { i18n, t } = useTranslation()\n  const [selected, setSelected] = useState([])\n  const { stringifyParams } = useSearchParams()\n  const router = useRouter()\n  const { componentMap } = useComponentMap()\n  const [reducedFieldMap, setReducedFieldMap] = useState([])\n  const [initialState, setInitialState] = useState<FormState>()\n  const hasInitializedState = React.useRef(false)\n\n  const collectionPermissions = permissions?.collections?.[slug]\n  const hasUpdatePermission = collectionPermissions?.update?.permission\n\n  const drawerSlug = `edit-${slug}`\n\n  React.useEffect(() => {\n    if (componentMap?.collections?.[slug]?.fieldMap) {\n      const fieldMap = componentMap.collections[slug].fieldMap\n      const reducedFieldMap = []\n      fieldMap.map((field) => {\n        selected.map((selectedField) => {\n          if (field.name === selectedField.name) {\n            reducedFieldMap.push(field)\n          }\n        })\n      })\n      setReducedFieldMap(reducedFieldMap)\n    }\n  }, [componentMap.collections, fields, slug, selected])\n\n  React.useEffect(() => {\n    if (!hasInitializedState.current) {\n      const getInitialState = async () => {\n        const result = await getFormState({\n          apiRoute,\n          body: {\n            collectionSlug: slug,\n            data: {},\n            operation: 'update',\n            schemaPath: slug,\n          },\n          serverURL,\n        })\n\n        setInitialState(result)\n        hasInitializedState.current = true\n      }\n\n      void getInitialState()\n    }\n  }, [apiRoute, hasInitializedState, serverURL, slug])\n\n  if (selectAll === SelectAllStatus.None || !hasUpdatePermission) {\n    return null\n  }\n\n  const onSuccess = () => {\n    router.replace(\n      stringifyParams({\n        params: { page: selectAll === SelectAllStatus.AllAvailable ? '1' : undefined },\n      }),\n    )\n  }\n\n  return (\n    <div className={baseClass}>\n      <DrawerToggler\n        aria-label={t('general:edit')}\n        className={`${baseClass}__toggle`}\n        onClick={() => {\n          setSelected([])\n        }}\n        slug={drawerSlug}\n      >\n        {t('general:edit')}\n      </DrawerToggler>\n      <Drawer Header={null} slug={drawerSlug}>\n        {/* @ts-expect-error */}\n        <DocumentInfoProvider collection={collection}>\n          <OperationContext.Provider value=\"update\">\n            <div className={`${baseClass}__main`}>\n              <div className={`${baseClass}__header`}>\n                <h2 className={`${baseClass}__header__title`}>\n                  {t('general:editingLabel', { count, label: getTranslation(plural, i18n) })}\n                </h2>\n                <button\n                  aria-label={t('general:close')}\n                  className={`${baseClass}__header__close`}\n                  id={`close-drawer__${drawerSlug}`}\n                  onClick={() => closeModal(drawerSlug)}\n                  type=\"button\"\n                >\n                  <X />\n                </button>\n              </div>\n              <FieldPathProvider path=\"\" schemaPath={slug}>\n                <Form\n                  className={`${baseClass}__form`}\n                  initialState={initialState}\n                  onSuccess={onSuccess}\n                >\n                  <FieldSelect fields={fields} setSelected={setSelected} />\n                  {reducedFieldMap.length === 0 ? null : (\n                    <RenderFields fieldMap={reducedFieldMap} />\n                  )}\n                  <div className={`${baseClass}__sidebar-wrap`}>\n                    <div className={`${baseClass}__sidebar`}>\n                      <div className={`${baseClass}__sidebar-sticky-wrap`}>\n                        <div className={`${baseClass}__document-actions`}>\n                          {collection?.versions?.drafts ? (\n                            <React.Fragment>\n                              <Publish\n                                action={`${serverURL}${apiRoute}/${slug}${getQueryParams()}`}\n                                disabled={selected.length === 0}\n                              />\n                              <SaveDraft\n                                action={`${serverURL}${apiRoute}/${slug}${getQueryParams()}`}\n                                disabled={selected.length === 0}\n                              />\n                            </React.Fragment>\n                          ) : (\n                            <Submit\n                              action={`${serverURL}${apiRoute}/${slug}${getQueryParams()}`}\n                              disabled={selected.length === 0}\n                            />\n                          )}\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </Form>\n              </FieldPathProvider>\n            </div>\n          </OperationContext.Provider>\n        </DocumentInfoProvider>\n      </Drawer>\n    </div>\n  )\n}\n"],"names":["facelessUIImport","getTranslation","useRouter","React","useCallback","useState","FieldPathProvider","useForm","Form","RenderFields","FormSubmit","X","useAuth","useComponentMap","useConfig","DocumentInfoProvider","OperationContext","useSearchParams","SelectAllStatus","useSelection","useTranslation","getFormState","Drawer","DrawerToggler","FieldSelect","baseClass","Submit","action","disabled","submit","t","save","method","skipValidation","className","onClick","Publish","overrides","_status","SaveDraft","EditMany","props","Modal","useModal","collection","slug","fields","labels","plural","permissions","closeModal","routes","api","apiRoute","serverURL","count","getQueryParams","selectAll","i18n","selected","setSelected","stringifyParams","router","componentMap","reducedFieldMap","setReducedFieldMap","initialState","setInitialState","hasInitializedState","useRef","collectionPermissions","collections","hasUpdatePermission","update","permission","drawerSlug","useEffect","fieldMap","map","field","selectedField","name","push","current","getInitialState","result","body","collectionSlug","data","operation","schemaPath","None","onSuccess","replace","params","page","AllAvailable","undefined","div","aria-label","Header","Provider","value","h2","label","button","id","type","path","length","versions","drafts","Fragment"],"mappings":"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"}
+{"version":3,"sources":["../../../src/elements/EditMany/index.tsx"],"sourcesContent":["'use client'\nimport type { FormState } from 'payload/types'\n\nimport * as facelessUIImport from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport { useRouter } from 'next/navigation.js'\nimport React, { useCallback, useState } from 'react'\n\nimport type { FormProps } from '../../forms/Form/index.js'\n\nimport { useForm } from '../../forms/Form/context.js'\nimport { Form } from '../../forms/Form/index.js'\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { FormSubmit } from '../../forms/Submit/index.js'\nimport { X } from '../../icons/X/index.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useComponentMap } from '../../providers/ComponentMap/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { DocumentInfoProvider } from '../../providers/DocumentInfo/index.js'\nimport { OperationContext } from '../../providers/Operation/index.js'\nimport { useRouteCache } from '../../providers/RouteCache/index.js'\nimport { useSearchParams } from '../../providers/SearchParams/index.js'\nimport { SelectAllStatus, useSelection } from '../../providers/Selection/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { getFormState } from '../../utilities/getFormState.js'\nimport { Drawer, DrawerToggler } from '../Drawer/index.js'\nimport { FieldSelect } from '../FieldSelect/index.js'\nimport './index.scss'\n\nconst baseClass = 'edit-many'\n\nimport type { ClientCollectionConfig } from 'payload/types'\n\nimport type { FieldMap } from '../../utilities/buildComponentMap.js'\n\nexport type EditManyProps = {\n  collection: ClientCollectionConfig\n  fieldMap: FieldMap\n}\n\nconst Submit: React.FC<{ action: string; disabled: boolean }> = ({ action, disabled }) => {\n  const { submit } = useForm()\n  const { t } = useTranslation()\n\n  const save = useCallback(() => {\n    void submit({\n      action,\n      method: 'PATCH',\n      skipValidation: true,\n    })\n  }, [action, submit])\n\n  return (\n    <FormSubmit className={`${baseClass}__save`} disabled={disabled} onClick={save}>\n      {t('general:save')}\n    </FormSubmit>\n  )\n}\nconst Publish: React.FC<{ action: string; disabled: boolean }> = ({ action, disabled }) => {\n  const { submit } = useForm()\n  const { t } = useTranslation()\n\n  const save = useCallback(() => {\n    void submit({\n      action,\n      method: 'PATCH',\n      overrides: {\n        _status: 'published',\n      },\n      skipValidation: true,\n    })\n  }, [action, submit])\n\n  return (\n    <FormSubmit className={`${baseClass}__publish`} disabled={disabled} onClick={save}>\n      {t('version:publishChanges')}\n    </FormSubmit>\n  )\n}\nconst SaveDraft: React.FC<{ action: string; disabled: boolean }> = ({ action, disabled }) => {\n  const { submit } = useForm()\n  const { t } = useTranslation()\n\n  const save = useCallback(() => {\n    void submit({\n      action,\n      method: 'PATCH',\n      overrides: {\n        _status: 'draft',\n      },\n      skipValidation: true,\n    })\n  }, [action, submit])\n\n  return (\n    <FormSubmit className={`${baseClass}__draft`} disabled={disabled} onClick={save}>\n      {t('version:saveDraft')}\n    </FormSubmit>\n  )\n}\nexport const EditMany: React.FC<EditManyProps> = (props) => {\n  const { useModal } = facelessUIImport\n\n  const { collection: { slug, fields, labels: { plural } } = {}, collection, fieldMap } = props\n\n  const { permissions } = useAuth()\n  const { closeModal } = useModal()\n  const {\n    routes: { api: apiRoute },\n    serverURL,\n  } = useConfig()\n  const { count, getQueryParams, selectAll } = useSelection()\n  const { i18n, t } = useTranslation()\n  const [selected, setSelected] = useState([])\n  const { stringifyParams } = useSearchParams()\n  const router = useRouter()\n  const { componentMap } = useComponentMap()\n  const [reducedFieldMap, setReducedFieldMap] = useState([])\n  const [initialState, setInitialState] = useState<FormState>()\n  const hasInitializedState = React.useRef(false)\n  const { clearRouteCache } = useRouteCache()\n\n  const collectionPermissions = permissions?.collections?.[slug]\n  const hasUpdatePermission = collectionPermissions?.update?.permission\n\n  const drawerSlug = `edit-${slug}`\n\n  React.useEffect(() => {\n    if (componentMap?.collections?.[slug]?.fieldMap) {\n      const fieldMap = componentMap.collections[slug].fieldMap\n      const reducedFieldMap = []\n      fieldMap.map((field) => {\n        selected.map((selectedField) => {\n          if ('name' in field && field.name === selectedField.name) {\n            reducedFieldMap.push(field)\n          }\n        })\n      })\n      setReducedFieldMap(reducedFieldMap)\n    }\n  }, [componentMap.collections, fields, slug, selected])\n\n  React.useEffect(() => {\n    if (!hasInitializedState.current) {\n      const getInitialState = async () => {\n        const result = await getFormState({\n          apiRoute,\n          body: {\n            collectionSlug: slug,\n            data: {},\n            operation: 'update',\n            schemaPath: slug,\n          },\n          serverURL,\n        })\n\n        setInitialState(result)\n        hasInitializedState.current = true\n      }\n\n      void getInitialState()\n    }\n  }, [apiRoute, hasInitializedState, serverURL, slug])\n\n  const onChange: FormProps['onChange'][0] = useCallback(\n    ({ formState: prevFormState }) =>\n      getFormState({\n        apiRoute,\n        body: {\n          collectionSlug: slug,\n          formState: prevFormState,\n          operation: 'update',\n          schemaPath: slug,\n        },\n        serverURL,\n      }),\n    [serverURL, apiRoute, slug],\n  )\n\n  if (selectAll === SelectAllStatus.None || !hasUpdatePermission) {\n    return null\n  }\n\n  const onSuccess = () => {\n    router.replace(\n      stringifyParams({\n        params: { page: selectAll === SelectAllStatus.AllAvailable ? '1' : undefined },\n      }),\n    )\n    clearRouteCache()\n    closeModal(drawerSlug)\n  }\n\n  return (\n    <div className={baseClass}>\n      <DrawerToggler\n        aria-label={t('general:edit')}\n        className={`${baseClass}__toggle`}\n        onClick={() => {\n          setSelected([])\n        }}\n        slug={drawerSlug}\n      >\n        {t('general:edit')}\n      </DrawerToggler>\n      <Drawer Header={null} slug={drawerSlug}>\n        <DocumentInfoProvider collectionSlug={slug} id={null}>\n          <OperationContext.Provider value=\"update\">\n            <div className={`${baseClass}__main`}>\n              <div className={`${baseClass}__header`}>\n                <h2 className={`${baseClass}__header__title`}>\n                  {t('general:editingLabel', { count, label: getTranslation(plural, i18n) })}\n                </h2>\n                <button\n                  aria-label={t('general:close')}\n                  className={`${baseClass}__header__close`}\n                  id={`close-drawer__${drawerSlug}`}\n                  onClick={() => closeModal(drawerSlug)}\n                  type=\"button\"\n                >\n                  <X />\n                </button>\n              </div>\n              <Form\n                className={`${baseClass}__form`}\n                initialState={initialState}\n                onChange={[onChange]}\n                onSuccess={onSuccess}\n              >\n                <FieldSelect fieldMap={fieldMap} setSelected={setSelected} />\n                {reducedFieldMap.length === 0 ? null : (\n                  <RenderFields\n                    fieldMap={reducedFieldMap}\n                    path=\"\"\n                    readOnly={false}\n                    schemaPath={slug}\n                  />\n                )}\n                <div className={`${baseClass}__sidebar-wrap`}>\n                  <div className={`${baseClass}__sidebar`}>\n                    <div className={`${baseClass}__sidebar-sticky-wrap`}>\n                      <div className={`${baseClass}__document-actions`}>\n                        {collection?.versions?.drafts ? (\n                          <React.Fragment>\n                            <Publish\n                              action={`${serverURL}${apiRoute}/${slug}${getQueryParams()}`}\n                              disabled={selected.length === 0}\n                            />\n                            <SaveDraft\n                              action={`${serverURL}${apiRoute}/${slug}${getQueryParams()}`}\n                              disabled={selected.length === 0}\n                            />\n                          </React.Fragment>\n                        ) : (\n                          <Submit\n                            action={`${serverURL}${apiRoute}/${slug}${getQueryParams()}`}\n                            disabled={selected.length === 0}\n                          />\n                        )}\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </Form>\n            </div>\n          </OperationContext.Provider>\n        </DocumentInfoProvider>\n      </Drawer>\n    </div>\n  )\n}\n"],"names":["facelessUIImport","getTranslation","useRouter","React","useCallback","useState","useForm","Form","RenderFields","FormSubmit","X","useAuth","useComponentMap","useConfig","DocumentInfoProvider","OperationContext","useRouteCache","useSearchParams","SelectAllStatus","useSelection","useTranslation","getFormState","Drawer","DrawerToggler","FieldSelect","baseClass","Submit","action","disabled","submit","t","save","method","skipValidation","className","onClick","Publish","overrides","_status","SaveDraft","EditMany","props","useModal","collection","slug","fields","labels","plural","fieldMap","permissions","closeModal","routes","api","apiRoute","serverURL","count","getQueryParams","selectAll","i18n","selected","setSelected","stringifyParams","router","componentMap","reducedFieldMap","setReducedFieldMap","initialState","setInitialState","hasInitializedState","useRef","clearRouteCache","collectionPermissions","collections","hasUpdatePermission","update","permission","drawerSlug","useEffect","map","field","selectedField","name","push","current","getInitialState","result","body","collectionSlug","data","operation","schemaPath","onChange","formState","prevFormState","None","onSuccess","replace","params","page","AllAvailable","undefined","div","aria-label","Header","id","Provider","value","h2","label","button","type","length","path","readOnly","versions","drafts","Fragment"],"mappings":"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"}

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

@@ -2,12 +2,13 @@ import type { Data } from 'payload/types';
 import React from 'react';
 import 'react-image-crop/dist/ReactCrop.css';
 import './index.scss';
-export declare const EditUpload: React.FC<{
+export type EditUploadProps = {
     doc?: Data;
     fileName: string;
     fileSrc: string;
     imageCacheTag?: string;
     showCrop?: boolean;
     showFocalPoint?: boolean;
-}>;
+};
+export declare const EditUpload: React.FC<EditUploadProps>;
 //# 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,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,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,CAkPA,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;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"}

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 const EditUpload: React.FC<{\n  doc?: Data\n  fileName: string\n  fileSrc: string\n  imageCacheTag?: string\n  showCrop?: boolean\n  showFocalPoint?: boolean\n}> = ({ fileName, fileSrc, imageCacheTag, showCrop, showFocalPoint }) => {\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"],"mappings":"AAAA;AAIA,YAAYA,sBAAsB,qBAAoB;AACtD,OAAOC,SAASC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AAC/C,OAAOC,eAAe,mBAAkB;AAGxC,SAASC,cAAc,QAAQ,iCAAgC;AAC/D,SAASC,IAAI,QAAQ,4BAA2B;AAChD,SAASC,kBAAkB,QAAQ,2CAA0C;AAC7E,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,MAAM,QAAQ,qBAAoB;AAG3C,MAAMC,YAAY;AAElB,MAAMC,QAAsF,CAAC,EAC3FC,IAAI,EACJC,QAAQ,EACRC,KAAK,EACN,iBACC,oBAACC;QAAIC,WAAW,CAAC,EAAEN,UAAU,OAAO,CAAC;OAClCE,oBACD,oBAACK;QAAML,MAAMA;QAAMC,UAAU,CAACK,IAAML,SAASK,EAAEC,MAAM,CAACL,KAAK;QAAGM,MAAK;QAASN,OAAOA;;AAIvF,OAAO,MAAMO,aAOR,CAAC,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,aAAa,EAAEC,QAAQ,EAAEC,cAAc,EAAE;IAClE,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAG5B;IAE5B,MAAM,EAAE6B,UAAU,EAAE,GAAGD;IACvB,MAAM,EAAEE,CAAC,EAAE,GAAGtB;IACd,MAAM,EAAEuB,uBAAuB,EAAEC,eAAe,EAAE,GAAGzB;IACrD,MAAM,EAAE0B,WAAW,EAAE,GAAGD,mBAAmB,CAAC;IAC5C,MAAM,CAACE,MAAMC,QAAQ,GAAGhC,SAAmB;QACzCiC,QAAQH,aAAaC,MAAME,UAAU;QACrCC,MAAM;QACNC,OAAOL,aAAaC,MAAMI,SAAS;QACnCC,GAAGN,aAAaC,MAAMK,KAAK;QAC3BC,GAAGP,aAAaC,MAAMM,KAAK;IAC7B;IAEA,MAAM,CAACC,eAAeC,iBAAiB,GAAGvC,SAAmC;QAC3EoC,GAAGN,aAAaU,YAAYJ,KAAK;QACjCC,GAAGP,aAAaU,YAAYH,KAAK;IACnC;IACA,MAAM,CAACI,aAAaC,eAAe,GAAG1C,SAAkB;IACxD,MAAM,CAAC2C,gBAAgBC,kBAAkB,GAAG5C,SAAiB;IAC7D,MAAM,CAAC6C,eAAeC,iBAAiB,GAAG9C,SAAiB;IAE3D,MAAM+C,eAAehD;IACrB,MAAMiD,WAAWjD;IACjB,MAAMkD,UAAUlD;IAEhB,MAAMmD,eAAe,CAAC,EAAEC,SAAS,EAAExC,KAAK,EAAoD;QAC1F,MAAMyC,WAAWC,SAAS1C;QAC1B,IAAIwC,cAAc,WAAWC,YAAYP,eAAe,OAAO;QAC/D,IAAIM,cAAc,YAAYC,YAAYT,gBAAgB,OAAO;QAEjE,MAAMW,aAAa,MAAOF,CAAAA,WAAYD,CAAAA,cAAc,UAAUN,gBAAgBF,cAAa,CAAC;QAE5F,IAAIW,eAAe,OAAOA,eAAe,GAAG,OAAO;QAEnDtB,QAAQ;YACN,GAAGD,IAAI;YACP,CAACoB,UAAU,EAAEG;QACf;IACF;IAEA,MAAMC,qBAAqB,CAAC,EAAEC,UAAU,EAAE7C,KAAK,EAA4C;QACzF,MAAMyC,WAAWC,SAAS1C;QAC1B,IAAIyC,YAAY,KAAKA,YAAY,KAAK;YACpCb,iBAAiB,CAACkB,eAAkB,CAAA;oBAAE,GAAGA,YAAY;oBAAE,CAACD,WAAW,EAAEJ;gBAAS,CAAA;QAChF;IACF;IAEA,MAAMM,YAAY;QAChB9B,wBAAwB;YACtBX,MAAM;YACN0C,QAAQ;gBACN7B,aACEC,QAAQO,gBACJ;oBACEP,MAAMA,QAAQ;oBACdS,YAAYF,gBAAgBA,gBAAgB;gBAC9C,IACA;YACR;QACF;QACAZ,WAAWxB;IACb;IAEA,MAAM0D,YAAY9D,MAAM+D,WAAW,CAAC,CAAC,EAAEzB,CAAC,EAAEC,CAAC,EAAE;QAC3CE,iBAAiB;YAAEH;YAAGC;QAAE;QACxBK,eAAe;IACjB,GAAG,EAAE;IAEL,MAAMoB,mBAAmB;QACvB,MAAMC,gBAAgBhB,aAAaiB,OAAO,CAACC,qBAAqB;QAChE,MAAMC,aAAa5C,WACf2B,QAAQe,OAAO,CAACC,qBAAqB,KACrCjB,SAASgB,OAAO,CAACC,qBAAqB;QAC1C,MAAME,UACJ,AAAED,CAAAA,WAAWE,IAAI,GAAGL,cAAcK,IAAI,GAAGF,WAAW/B,KAAK,GAAG,CAAA,IAAK4B,cAAc5B,KAAK,GAAI;QAC1F,MAAMkC,UACJ,AAAEH,CAAAA,WAAWI,GAAG,GAAGP,cAAcO,GAAG,GAAGJ,WAAWjC,MAAM,GAAG,CAAA,IAAK8B,cAAc9B,MAAM,GAAI;QAC1FM,iBAAiB;YAAEH,GAAG+B;YAAS9B,GAAGgC;QAAQ;IAC5C;IAEA,MAAME,eAAelD,gBAAgB,CAAC,EAAED,QAAQ,CAAC,EAAEC,cAAc,CAAC,GAAGD;IAErE,qBACE,oBAACR;QAAIC,WAAWN;qBACd,oBAACK;QAAIC,WAAW,CAAC,EAAEN,UAAU,QAAQ,CAAC;qBACpC,oBAACiE;QAAGC,OAAO,CAAC,EAAE9C,EAAE,mBAAmB,CAAC,EAAER,SAAS,CAAC;OAC7CQ,EAAE,oBAAmB,KAAER,yBAE1B,oBAACP;QAAIC,WAAW,CAAC,EAAEN,UAAU,SAAS,CAAC;qBACrC,oBAACD;QACCoE,cAAY/C,EAAE;QACdgD,aAAY;QACZ9D,WAAW,CAAC,EAAEN,UAAU,QAAQ,CAAC;QACjCqE,SAAS,IAAMlD,WAAWxB;OAEzByB,EAAE,kCAEL,oBAACrB;QACCoE,cAAY/C,EAAE;QACdgD,aAAY;QACZ9D,WAAW,CAAC,EAAEN,UAAU,MAAM,CAAC;QAC/BqE,SAAS,IAAMlB;OAEd/B,EAAE,0CAIT,oBAACf;QAAIC,WAAW,CAAC,EAAEN,UAAU,UAAU,CAAC;qBACtC,oBAACK;QAAIC,WAAW,CAAC,EAAEN,UAAU,MAAM,CAAC;qBAClC,oBAACK;QACCC,WAAW,CAAC,EAAEN,UAAU,eAAe,CAAC;QACxCsE,KAAK9B;QACL+B,OAAO;YACLC,aAAa,CAAC,EAAElC,gBAAgBF,eAAe,CAAC;QAClD;OAECrB,yBACC,oBAACrB;QACCY,WAAW,CAAC,EAAEN,UAAU,WAAW,CAAC;QACpCwB,MAAMA;QACNrB,UAAU,CAACsE,GAAGC,IAAMjD,QAAQiD;QAC5BC,YAAY,IAAMxC,eAAe;QACjCyC,sBAAsB;YACpB,qBAAO,oBAACvE;gBAAIC,WAAW,CAAC,EAAEN,UAAU,aAAa,CAAC;gBAAEsE,KAAK5B;;QAC3D;qBAEA,oBAACmC;QACCC,KAAK1D,EAAE;QACP2D,QAAQ,CAACvE;YACP6B,kBAAkB7B,EAAEwE,aAAa,CAACC,aAAa;YAC/C1C,iBAAiB/B,EAAEwE,aAAa,CAACE,YAAY;QAC/C;QACAZ,KAAK7B;QACL0C,KAAKnB;wBAIT,oBAACa;QACCC,KAAK1D,EAAE;QACP2D,QAAQ,CAACvE;YACP6B,kBAAkB7B,EAAEwE,aAAa,CAACC,aAAa;YAC/C1C,iBAAiB/B,EAAEwE,aAAa,CAACE,YAAY;QAC/C;QACAZ,KAAK7B;QACL0C,KAAKnB;QAGRhD,gCACC,oBAACoE;QACCC,WAAWtE,WAAW2B,UAAUD;QAChCP,aAAanB,WAAWmB,cAAc;QACtC5B,WAAW,CAAC,EAAEN,UAAU,YAAY,CAAC;QACrCsF,cAAc9C;QACd+C,iBAAiBxD;QACjBsB,WAAWA;QACXlB,gBAAgBpB,WAAWoB,iBAAiB;qBAE5C,oBAACvC,gBAKR,AAACmB,CAAAA,YAAYC,cAAa,mBACzB,oBAACX;QAAIC,WAAW,CAAC,EAAEN,UAAU,SAAS,CAAC;OACpCe,0BACC,oBAACV;QAAIC,WAAW,CAAC,EAAEN,UAAU,WAAW,CAAC;qBACvC,oBAACK,2BACC,oBAACA;QAAIC,WAAW,CAAC,EAAEN,UAAU,WAAW,CAAC;qBACvC,oBAACwF,YAAIpE,EAAE,+BACP,oBAACrB;QACCqE,aAAY;QACZ9D,WAAW,CAAC,EAAEN,UAAU,OAAO,CAAC;QAChCqE,SAAS,IACP5C,QAAQ;gBACNC,QAAQ;gBACRC,MAAM;gBACNC,OAAO;gBACPC,GAAG;gBACHC,GAAG;YACL;OAGDV,EAAE,mCAIT,oBAACqE;QAAKnF,WAAW,CAAC,EAAEN,UAAU,aAAa,CAAC;OACzCoB,EAAE,8CAEL,oBAACf;QAAIC,WAAW,CAAC,EAAEN,UAAU,YAAY,CAAC;qBACxC,oBAACC;QACCC,MAAM,CAAC,EAAEkB,EAAE,gBAAgB,KAAK,CAAC;QACjCjB,UAAU,CAACC,QAAUuC,aAAa;gBAAEC,WAAW;gBAASxC;YAAM;QAC9DA,OAAO,AAAC,CAAA,AAACoB,KAAKI,KAAK,GAAG,MAAOU,aAAY,EAAGoD,OAAO,CAAC;sBAEtD,oBAACzF;QACCC,MAAM,CAAC,EAAEkB,EAAE,iBAAiB,KAAK,CAAC;QAClCjB,UAAU,CAACC,QAAUuC,aAAa;gBAAEC,WAAW;gBAAUxC;YAAM;QAC/DA,OAAO,AAAC,CAAA,AAACoB,KAAKE,MAAM,GAAG,MAAOU,cAAa,EAAGsD,OAAO,CAAC;UAM7D1E,gCACC,oBAACX;QAAIC,WAAW,CAAC,EAAEN,UAAU,WAAW,CAAC;qBACvC,oBAACK,2BACC,oBAACA;QAAIC,WAAW,CAAC,EAAEN,UAAU,WAAW,CAAC;qBACvC,oBAACwF,YAAIpE,EAAE,qCACP,oBAACrB;QACCqE,aAAY;QACZ9D,WAAW,CAAC,EAAEN,UAAU,OAAO,CAAC;QAChCqE,SAASd;OAERnC,EAAE,mCAIT,oBAACqE;QAAKnF,WAAW,CAAC,EAAEN,UAAU,aAAa,CAAC;OACzCoB,EAAE,gDAEL,oBAACf;QAAIC,WAAW,CAAC,EAAEN,UAAU,YAAY,CAAC;qBACxC,oBAACC;QACCC,MAAK;QACLC,UAAU,CAACC,QAAU4C,mBAAmB;gBAAEC,YAAY;gBAAK7C;YAAM;QACjEA,OAAO2B,cAAcF,CAAC,CAAC6D,OAAO,CAAC;sBAEjC,oBAACzF;QACCC,MAAK;QACLC,UAAU,CAACC,QAAU4C,mBAAmB;gBAAEC,YAAY;gBAAK7C;YAAM;QACjEA,OAAO2B,cAAcD,CAAC,CAAC4D,OAAO,CAAC;;AAUnD,EAAC;AAED,MAAMN,mBAAmB,CAAC,EACxBC,SAAS,EACTnD,WAAW,EACXyD,QAAQ,EACRrF,SAAS,EACTgF,YAAY,EACZC,kBAAkB;IAAE1D,GAAG;IAAIC,GAAG;AAAG,CAAC,EAClCuB,SAAS,EACTlB,cAAc,EACf;IACC,MAAM,CAACyD,UAAUC,YAAY,GAAGpG,SAAS;QAAEoC,GAAG0D,gBAAgB1D,CAAC;QAAEC,GAAGyD,gBAAgBzD,CAAC;IAAC;IACtF,MAAM,CAACgE,YAAYC,cAAc,GAAGtG,SAAS;IAC7C,MAAMuG,UAAUxG;IAEhB,MAAMyG,iBAAiB1G,MAAM+D,WAAW,CACtC,CAAC4C,WAAoBC,WAAoBC;QACvC,MAAM5C,gBAAgB8B,aAAa7B,OAAO,CAACC,qBAAqB;QAChE,MAAMC,aAAa0B,UAAU5B,OAAO,CAACC,qBAAqB;QAC1D,MAAM2C,SAASH,aAAavC,WAAWE,IAAI;QAC3C,MAAMyC,SAASH,aAAaxC,WAAWI,GAAG;QAE1C,MAAMwC,eAAeF,SAAS1C,WAAWE,IAAI,IAAIwC,SAAS1C,WAAW6C,KAAK;QAC1E,MAAMC,eAAeH,SAAS3C,WAAWI,GAAG,IAAIuC,SAAS3C,WAAW+C,MAAM;QAE1E,IAAI7E,IAAI,AAAEwE,CAAAA,SAAS7C,cAAcK,IAAI,AAAD,IAAKL,cAAc5B,KAAK,GAAI;QAChE,IAAIE,IAAI,AAAEwE,CAAAA,SAAS9C,cAAcO,GAAG,AAAD,IAAKP,cAAc9B,MAAM,GAAI;QAChE,MAAMkC,UACJ,AAAED,CAAAA,WAAWE,IAAI,GAAGL,cAAcK,IAAI,GAAGF,WAAW/B,KAAK,GAAG,CAAA,IAAK4B,cAAc5B,KAAK,GAAI;QAC1F,MAAMkC,UACJ,AAAEH,CAAAA,WAAWI,GAAG,GAAGP,cAAcO,GAAG,GAAGJ,WAAWjC,MAAM,GAAG,CAAA,IAAK8B,cAAc9B,MAAM,GAAI;QAC1F,IAAI6E,gBAAgBE,cAAc;YAChCV,cAAc;YACd,IAAIM,SAAS1C,WAAWE,IAAI,EAAE;gBAC5BhC,IAAI,AAAE8B,CAAAA,WAAWE,IAAI,GAAGL,cAAcK,IAAI,AAAD,IAAKL,cAAc5B,KAAK,GAAI;YACvE,OAAO,IAAIyE,SAAS1C,WAAW6C,KAAK,EAAE;gBACpC3E,IACE,AAAE2B,CAAAA,cAAc5B,KAAK,GAAI4B,CAAAA,cAAcgD,KAAK,GAAG7C,WAAW6C,KAAK,AAAD,CAAC,IAC7DhD,cAAc5B,KAAK,GACrB;YACJ;YAEA,IAAI0E,SAAS3C,WAAWI,GAAG,EAAE;gBAC3BjC,IAAI,AAAE6B,CAAAA,WAAWI,GAAG,GAAGP,cAAcO,GAAG,AAAD,IAAKP,cAAc9B,MAAM,GAAI;YACtE,OAAO,IAAI4E,SAAS3C,WAAW+C,MAAM,EAAE;gBACrC5E,IACE,AAAE0B,CAAAA,cAAc9B,MAAM,GAAI8B,CAAAA,cAAckD,MAAM,GAAG/C,WAAW+C,MAAM,AAAD,CAAC,IAChElD,cAAc9B,MAAM,GACtB;YACJ;YAEA,IAAI0E,UAAU;gBACZvE,IAAI0E,eAAe3C,UAAU/B;gBAC7BC,IAAI2E,eAAe3C,UAAUhC;YAC/B;QACF;QAEA,OAAO;YAAED;YAAGC;QAAE;IAChB,GACA;QAACuD;QAAWC;KAAa;IAG3B,MAAMqB,kBAAkB,CAACC;QACvBA,MAAMC,cAAc;QACpBd,cAAc;IAChB;IAEA,MAAMe,kBAAkB,CAACF;QACvB,IAAI,CAACd,YAAY,OAAO;QACxB,MAAM,EAAEjE,CAAC,EAAEC,CAAC,EAAE,GAAGmE,eAAeW,MAAMG,OAAO,EAAEH,MAAMI,OAAO;QAE5DnB,YAAY;YAAEhE;YAAGC;QAAE;IACrB;IAEA,MAAMmF,SAAS;QACblB,cAAc;QACd1C,UAAUuC;IACZ;IAEArG,MAAM2H,SAAS,CAAC;QACd,IAAIpB,cAAc,CAACE,QAAQvC,OAAO,EAAE;QACpC,IAAIvB,aAAa;YACf,MAAM,EAAER,MAAM,EAAEmC,IAAI,EAAEE,GAAG,EAAEnC,KAAK,EAAE,GAAGoE,QAAQvC,OAAO,CAACC,qBAAqB;YAC1E,MAAM,EAAE7B,CAAC,EAAEC,CAAC,EAAE,GAAGmE,eAAepC,OAAOjC,QAAQ,GAAGmC,MAAMrC,SAAS,GAAG;YACpE2B,UAAU;gBAAExB;gBAAGC;YAAE;YACjB+D,YAAY;gBAAEhE;gBAAGC;YAAE;YACnBK,eAAe;YACf;QACF;IACF,GAAG;QAAC8D;QAAgBH;QAAY5D;QAAaC;QAAgByD,SAAS/D,CAAC;QAAE+D,SAAS9D,CAAC;QAAEuB;KAAU;IAE/F9D,MAAM2H,SAAS,CAAC;QACdrB,YAAY;YAAEhE,GAAG0D,gBAAgB1D,CAAC;YAAEC,GAAGyD,gBAAgBzD,CAAC;QAAC;IAC3D,GAAG;QAACyD,gBAAgB1D,CAAC;QAAE0D,gBAAgBzD,CAAC;KAAC;IAEzC,qBACE,oBAACzB;QACCC,WAAW;YACT,CAAC,EAAEN,UAAU,qBAAqB,CAAC;YACnC8F,cAAc,CAAC,EAAE9F,UAAU,+BAA+B,CAAC;SAC5D,CACEmH,MAAM,CAACC,SACPC,IAAI,CAAC;QACRC,aAAaR;qBAEb,oBAACS;QACCjH,WAAW;YAAC,CAAC,EAAEN,UAAU,WAAW,CAAC;YAAEM;SAAU,CAAC6G,MAAM,CAACC,SAASC,IAAI,CAAC;QACvEG,aAAab;QACbc,WAAWR;QACX3C,KAAK0B;QACLzB,OAAO;YAAEV,MAAM,CAAC,EAAE+B,SAAS/D,CAAC,CAAC,CAAC,CAAC;YAAEkC,KAAK,CAAC,EAAE6B,SAAS9D,CAAC,CAAC,CAAC,CAAC;QAAC;QACvDpB,MAAK;OAEJiF,yBAEH,oBAACtF;AAGP"}
+{"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"],"mappings":"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"}

package/dist/elements/EditUpload/index.scss

@@ -25,8 +25,7 @@ $header-height: base(5);
     }
   }
 
-  [dir='rtl']
-  &__actions {
+  [dir='rtl'] &__actions {
     margin-right: auto;
     margin-left: unset;
   }

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

@@ -1,5 +1,11 @@
+import type { I18n } from '@payloadcms/translations';
 import React from 'react';
-import type { Props } from './types.js';
 import './index.scss';
-export declare const ErrorPill: React.FC<Props>;
+export type ErrorPillProps = {
+    className?: string;
+    count: number;
+    i18n: I18n;
+    withMessage?: boolean;
+};
+export declare const ErrorPill: React.FC<ErrorPillProps>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ErrorPill/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAEvC,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAkBrC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ErrorPill/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AAEpD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,IAAI,CAAA;IACV,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAkB9C,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ErrorPill/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport type { Props } from './types.js'\n\nimport './index.scss'\n\nconst baseClass = 'error-pill'\n\nexport const ErrorPill: React.FC<Props> = (props) => {\n  const { className, count, i18n, withMessage } = props\n  const lessThan3Chars = !withMessage && count < 99\n\n  const classes = [baseClass, lessThan3Chars && `${baseClass}--fixed-width`, className && className]\n    .filter(Boolean)\n    .join(' ')\n\n  if (count === 0) return null\n\n  return (\n    <div className={classes}>\n      <div className={`${baseClass}__content`}>\n        <span className={`${baseClass}__count`}>{count}</span>\n        {withMessage && ` ${count > 1 ? i18n.t('general:errors') : i18n.t('general:error')}`}\n      </div>\n    </div>\n  )\n}\n"],"names":["React","baseClass","ErrorPill","props","className","count","i18n","withMessage","lessThan3Chars","classes","filter","Boolean","join","div","span","t"],"mappings":"AAAA,OAAOA,WAAW,QAAO;AAMzB,MAAMC,YAAY;AAElB,OAAO,MAAMC,YAA6B,CAACC;IACzC,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGJ;IAChD,MAAMK,iBAAiB,CAACD,eAAeF,QAAQ;IAE/C,MAAMI,UAAU;QAACR;QAAWO,kBAAkB,CAAC,EAAEP,UAAU,aAAa,CAAC;QAAEG,aAAaA;KAAU,CAC/FM,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,IAAIP,UAAU,GAAG,OAAO;IAExB,qBACE,oBAACQ;QAAIT,WAAWK;qBACd,oBAACI;QAAIT,WAAW,CAAC,EAAEH,UAAU,SAAS,CAAC;qBACrC,oBAACa;QAAKV,WAAW,CAAC,EAAEH,UAAU,OAAO,CAAC;OAAGI,QACxCE,eAAe,CAAC,CAAC,EAAEF,QAAQ,IAAIC,KAAKS,CAAC,CAAC,oBAAoBT,KAAKS,CAAC,CAAC,iBAAiB,CAAC;AAI5F,EAAC"}
+{"version":3,"sources":["../../../src/elements/ErrorPill/index.tsx"],"sourcesContent":["import type { I18n } from '@payloadcms/translations'\n\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'error-pill'\n\nexport type ErrorPillProps = {\n  className?: string\n  count: number\n  i18n: I18n\n  withMessage?: boolean\n}\n\nexport const ErrorPill: React.FC<ErrorPillProps> = (props) => {\n  const { className, count, i18n, withMessage } = props\n  const lessThan3Chars = !withMessage && count < 99\n\n  const classes = [baseClass, lessThan3Chars && `${baseClass}--fixed-width`, className && className]\n    .filter(Boolean)\n    .join(' ')\n\n  if (count === 0) return null\n\n  return (\n    <div className={classes}>\n      <div className={`${baseClass}__content`}>\n        <span className={`${baseClass}__count`}>{count}</span>\n        {withMessage && ` ${count > 1 ? i18n.t('general:errors') : i18n.t('general:error')}`}\n      </div>\n    </div>\n  )\n}\n"],"names":["React","baseClass","ErrorPill","props","className","count","i18n","withMessage","lessThan3Chars","classes","filter","Boolean","join","div","span","t"],"mappings":"AAEA,OAAOA,WAAW,QAAO;AAIzB,MAAMC,YAAY;AASlB,OAAO,MAAMC,YAAsC,CAACC;IAClD,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGJ;IAChD,MAAMK,iBAAiB,CAACD,eAAeF,QAAQ;IAE/C,MAAMI,UAAU;QAACR;QAAWO,kBAAkB,CAAC,EAAEP,UAAU,aAAa,CAAC;QAAEG,aAAaA;KAAU,CAC/FM,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,IAAIP,UAAU,GAAG,OAAO;IAExB,qBACE,oBAACQ;QAAIT,WAAWK;qBACd,oBAACI;QAAIT,WAAW,CAAC,EAAEH,UAAU,SAAS,CAAC;qBACrC,oBAACa;QAAKV,WAAW,CAAC,EAAEH,UAAU,OAAO,CAAC;OAAGI,QACxCE,eAAe,CAAC,CAAC,EAAEF,QAAQ,IAAIC,KAAKS,CAAC,CAAC,oBAAoBT,KAAKS,CAAC,CAAC,iBAAiB,CAAC;AAI5F,EAAC"}

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

@@ -1,10 +1,10 @@
-import type { Field, FieldWithPath } from 'payload/types';
+import type { FieldWithPath } from 'payload/types';
 import React from 'react';
+import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js';
 import './index.scss';
-type Props = {
-    fields: Field[];
+export type FieldSelectProps = {
+    fieldMap: FieldMap;
     setSelected: (fields: FieldWithPath[]) => void;
 };
-export declare const FieldSelect: React.FC<Props>;
-export {};
+export declare const FieldSelect: React.FC<FieldSelectProps>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FieldSelect/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAIzD,OAAO,KAAmB,MAAM,OAAO,CAAA;AAOvC,OAAO,cAAc,CAAA;AAIrB,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,KAAK,EAAE,CAAA;IACf,WAAW,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,KAAK,IAAI,CAAA;CAC/C,CAAA;AA2DD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAmCvC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FieldSelect/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAElD,OAAO,KAA6B,MAAM,OAAO,CAAA;AAEjD,OAAO,KAAK,EAAE,QAAQ,EAAe,MAAM,yDAAyD,CAAA;AAOpG,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,QAAQ,CAAA;IAClB,WAAW,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,KAAK,IAAI,CAAA;CAC/C,CAAA;AAyFD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAsClD,CAAA"}

package/dist/elements/FieldSelect/index.js

@@ -1,40 +1,55 @@
-import { getTranslation } from '@payloadcms/translations';
-import { fieldAffectsData, fieldHasSubFields, tabHasName } from 'payload/types';
-import React, { useState } from 'react';
+import React, { Fragment, useState } from 'react';
+import { FieldLabel } from '../../forms/FieldLabel/index.js';
 import { useForm } from '../../forms/Form/context.js';
-import { createNestedFieldPath } from '../../forms/Form/createNestedFieldPath.js';
-import Label from '../../forms/Label/index.js';
+import { createNestedClientFieldPath } from '../../forms/Form/createNestedFieldPath.js';
 import { useTranslation } from '../../providers/Translation/index.js';
-import ReactSelect from '../ReactSelect/index.js';
+import { ReactSelect } from '../ReactSelect/index.js';
 const baseClass = 'field-select';
-const combineLabel = (prefix, field, i18n)=>`${prefix === '' ? '' : `${prefix} > `}${getTranslation(field.label || field.name, i18n) || ''}`;
-const reduceFields = (fields, i18n, path = '', labelPrefix = '')=>fields.reduce((fieldsToUse, field)=>{
+const combineLabel = (prefix, field)=>{
+    return /*#__PURE__*/ React.createElement(Fragment, null, /*#__PURE__*/ React.createElement("span", {
+        style: {
+            display: 'inline-block'
+        }
+    }, prefix), prefix ? /*#__PURE__*/ React.createElement(Fragment, null, ' > ') : '', /*#__PURE__*/ React.createElement("span", {
+        style: {
+            display: 'inline-block'
+        }
+    }, 'CustomLabel' in field.fieldComponentProps && field.fieldComponentProps.CustomLabel !== undefined ? field.fieldComponentProps.CustomLabel : /*#__PURE__*/ React.createElement(FieldLabel, 'labelProps' in field.fieldComponentProps && field.fieldComponentProps.labelProps || {})));
+};
+const reduceFields = (fieldMap, path = '', labelPrefix = null)=>{
+    if (!fieldMap) {
+        return [];
+    }
+    return fieldMap?.reduce((fieldsToUse, field)=>{
+        const { isFieldAffectingData } = field;
         // escape for a variety of reasons
-        if (fieldAffectsData(field) && (field.admin?.disableBulkEdit || field.unique || field.hidden || field.admin?.hidden || field.admin?.readOnly)) {
+        if (isFieldAffectingData && (field.disableBulkEdit || field.unique || field.isHidden || 'readOnly' in field.fieldComponentProps && field.fieldComponentProps.readOnly)) {
             return fieldsToUse;
         }
-        if (!(field.type === 'array' || field.type === 'blocks') && fieldHasSubFields(field)) {
+        if (!(field.type === 'array' || field.type === 'blocks') && 'fieldMap' in field.fieldComponentProps) {
             return [
                 ...fieldsToUse,
-                ...reduceFields(field.fields, i18n, createNestedFieldPath(path, field), combineLabel(labelPrefix, field, i18n))
+                ...reduceFields(field.fieldComponentProps.fieldMap, createNestedClientFieldPath(path, field), combineLabel(labelPrefix, field))
             ];
         }
-        if (field.type === 'tabs') {
+        if (field.type === 'tabs' && 'fieldMap' in field.fieldComponentProps) {
             return [
                 ...fieldsToUse,
-                ...field.tabs.reduce((tabFields, tab)=>{
-                    return [
-                        ...tabFields,
-                        ...reduceFields(tab.fields, i18n, tabHasName(tab) ? createNestedFieldPath(path, field) : path, combineLabel(labelPrefix, field, i18n))
-                    ];
+                ...field.fieldComponentProps.fieldMap.reduce((tabFields, tab)=>{
+                    if ('fieldMap' in tab.fieldComponentProps) {
+                        return [
+                            ...tabFields,
+                            ...reduceFields(tab.fieldComponentProps.fieldMap, 'name' in tab && tab.name ? createNestedClientFieldPath(path, field) : path, combineLabel(labelPrefix, field))
+                        ];
+                    }
                 }, [])
             ];
         }
         const formattedField = {
-            label: combineLabel(labelPrefix, field, i18n),
+            label: combineLabel(labelPrefix, field),
             value: {
                 ...field,
-                path: createNestedFieldPath(path, field)
+                path: createNestedClientFieldPath(path, field)
             }
         };
         return [
@@ -42,9 +57,10 @@ const reduceFields = (fields, i18n, path = '', labelPrefix = '')=>fields.reduce(
             formattedField
         ];
     }, []);
-export const FieldSelect = ({ fields, setSelected })=>{
-    const { i18n, t } = useTranslation();
-    const [options] = useState(()=>reduceFields(fields, i18n));
+};
+export const FieldSelect = ({ fieldMap, setSelected })=>{
+    const { t } = useTranslation();
+    const [options] = useState(()=>reduceFields(fieldMap));
     const { dispatchFields, getFields } = useForm();
     const handleChange = (selected)=>{
         const activeFields = getFields();
@@ -69,7 +85,7 @@ export const FieldSelect = ({ fields, setSelected })=>{
     };
     return /*#__PURE__*/ React.createElement("div", {
         className: baseClass
-    }, /*#__PURE__*/ React.createElement(Label, {
+    }, /*#__PURE__*/ React.createElement(FieldLabel, {
         label: t('fields:selectFieldsToEdit')
     }), /*#__PURE__*/ React.createElement(ReactSelect, {
         isMulti: true,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/FieldSelect/index.tsx"],"sourcesContent":["import type { Field, FieldWithPath } from 'payload/types'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { fieldAffectsData, fieldHasSubFields, tabHasName } from 'payload/types'\nimport React, { useState } from 'react'\n\nimport { useForm } from '../../forms/Form/context.js'\nimport { createNestedFieldPath } from '../../forms/Form/createNestedFieldPath.js'\nimport Label from '../../forms/Label/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport ReactSelect from '../ReactSelect/index.js'\nimport './index.scss'\n\nconst baseClass = 'field-select'\n\ntype Props = {\n  fields: Field[]\n  setSelected: (fields: FieldWithPath[]) => void\n}\n\nconst combineLabel = (prefix, field, i18n): string =>\n  `${prefix === '' ? '' : `${prefix} > `}${getTranslation(field.label || field.name, i18n) || ''}`\nconst reduceFields = (\n  fields: Field[],\n  i18n,\n  path = '',\n  labelPrefix = '',\n): { label: string; value: FieldWithPath }[] =>\n  fields.reduce((fieldsToUse, field) => {\n    // escape for a variety of reasons\n    if (\n      fieldAffectsData(field) &&\n      (field.admin?.disableBulkEdit ||\n        field.unique ||\n        field.hidden ||\n        field.admin?.hidden ||\n        field.admin?.readOnly)\n    ) {\n      return fieldsToUse\n    }\n    if (!(field.type === 'array' || field.type === 'blocks') && fieldHasSubFields(field)) {\n      return [\n        ...fieldsToUse,\n        ...reduceFields(\n          field.fields,\n          i18n,\n          createNestedFieldPath(path, field),\n          combineLabel(labelPrefix, field, i18n),\n        ),\n      ]\n    }\n    if (field.type === 'tabs') {\n      return [\n        ...fieldsToUse,\n        ...field.tabs.reduce((tabFields, tab) => {\n          return [\n            ...tabFields,\n            ...reduceFields(\n              tab.fields,\n              i18n,\n              tabHasName(tab) ? createNestedFieldPath(path, field) : path,\n              combineLabel(labelPrefix, field, i18n),\n            ),\n          ]\n        }, []),\n      ]\n    }\n    const formattedField = {\n      label: combineLabel(labelPrefix, field, i18n),\n      value: {\n        ...field,\n        path: createNestedFieldPath(path, field),\n      },\n    }\n\n    return [...fieldsToUse, formattedField]\n  }, [])\nexport const FieldSelect: React.FC<Props> = ({ fields, setSelected }) => {\n  const { i18n, t } = useTranslation()\n  const [options] = useState(() => reduceFields(fields, i18n))\n  const { dispatchFields, getFields } = useForm()\n  const handleChange = (selected) => {\n    const activeFields = getFields()\n    if (selected === null) {\n      setSelected([])\n    } else {\n      setSelected(selected.map(({ value }) => value))\n    }\n    // remove deselected values from form state\n    if (selected === null || Object.keys(activeFields || []).length > selected.length) {\n      Object.keys(activeFields).forEach((path) => {\n        if (\n          selected === null ||\n          !selected.find((field) => {\n            return field.value.path === path\n          })\n        ) {\n          dispatchFields({\n            type: 'REMOVE',\n            path,\n          })\n        }\n      })\n    }\n  }\n\n  return (\n    <div className={baseClass}>\n      <Label label={t('fields:selectFieldsToEdit')} />\n      <ReactSelect isMulti onChange={handleChange} options={options} />\n    </div>\n  )\n}\n"],"names":["getTranslation","fieldAffectsData","fieldHasSubFields","tabHasName","React","useState","useForm","createNestedFieldPath","Label","useTranslation","ReactSelect","baseClass","combineLabel","prefix","field","i18n","label","name","reduceFields","fields","path","labelPrefix","reduce","fieldsToUse","admin","disableBulkEdit","unique","hidden","readOnly","type","tabs","tabFields","tab","formattedField","value","FieldSelect","setSelected","t","options","dispatchFields","getFields","handleChange","selected","activeFields","map","Object","keys","length","forEach","find","div","className","isMulti","onChange"],"mappings":"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"}
+{"version":3,"sources":["../../../src/elements/FieldSelect/index.tsx"],"sourcesContent":["import type { FieldWithPath } from 'payload/types'\n\nimport React, { Fragment, useState } from 'react'\n\nimport type { FieldMap, MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js'\n\nimport { FieldLabel } from '../../forms/FieldLabel/index.js'\nimport { useForm } from '../../forms/Form/context.js'\nimport { createNestedClientFieldPath } from '../../forms/Form/createNestedFieldPath.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ReactSelect } from '../ReactSelect/index.js'\nimport './index.scss'\n\nconst baseClass = 'field-select'\n\nexport type FieldSelectProps = {\n  fieldMap: FieldMap\n  setSelected: (fields: FieldWithPath[]) => void\n}\n\nconst combineLabel = (prefix: JSX.Element, field: MappedField): JSX.Element => {\n  return (\n    <Fragment>\n      <span style={{ display: 'inline-block' }}>{prefix}</span>\n      {prefix ? <Fragment>{' > '}</Fragment> : ''}\n      <span style={{ display: 'inline-block' }}>\n        {'CustomLabel' in field.fieldComponentProps &&\n        field.fieldComponentProps.CustomLabel !== undefined ? (\n          field.fieldComponentProps.CustomLabel\n        ) : (\n          <FieldLabel\n            {...(('labelProps' in field.fieldComponentProps &&\n              field.fieldComponentProps.labelProps) ||\n              {})}\n          />\n        )}\n      </span>\n    </Fragment>\n  )\n}\n\nconst reduceFields = (\n  fieldMap: FieldMap,\n  path = '',\n  labelPrefix: JSX.Element = null,\n): { Label: JSX.Element; value: FieldWithPath }[] => {\n  if (!fieldMap) {\n    return []\n  }\n\n  return fieldMap?.reduce((fieldsToUse, field) => {\n    const { isFieldAffectingData } = field\n    // escape for a variety of reasons\n    if (\n      isFieldAffectingData &&\n      (field.disableBulkEdit ||\n        field.unique ||\n        field.isHidden ||\n        ('readOnly' in field.fieldComponentProps && field.fieldComponentProps.readOnly))\n    ) {\n      return fieldsToUse\n    }\n\n    if (\n      !(field.type === 'array' || field.type === 'blocks') &&\n      'fieldMap' in field.fieldComponentProps\n    ) {\n      return [\n        ...fieldsToUse,\n        ...reduceFields(\n          field.fieldComponentProps.fieldMap,\n          createNestedClientFieldPath(path, field),\n          combineLabel(labelPrefix, field),\n        ),\n      ]\n    }\n\n    if (field.type === 'tabs' && 'fieldMap' in field.fieldComponentProps) {\n      return [\n        ...fieldsToUse,\n        ...field.fieldComponentProps.fieldMap.reduce((tabFields, tab) => {\n          if ('fieldMap' in tab.fieldComponentProps) {\n            return [\n              ...tabFields,\n              ...reduceFields(\n                tab.fieldComponentProps.fieldMap,\n                'name' in tab && tab.name ? createNestedClientFieldPath(path, field) : path,\n                combineLabel(labelPrefix, field),\n              ),\n            ]\n          }\n        }, []),\n      ]\n    }\n\n    const formattedField = {\n      label: combineLabel(labelPrefix, field),\n      value: {\n        ...field,\n        path: createNestedClientFieldPath(path, field),\n      },\n    }\n\n    return [...fieldsToUse, formattedField]\n  }, [])\n}\n\nexport const FieldSelect: React.FC<FieldSelectProps> = ({ fieldMap, setSelected }) => {\n  const { t } = useTranslation()\n  const [options] = useState(() => reduceFields(fieldMap))\n\n  const { dispatchFields, getFields } = useForm()\n\n  const handleChange = (selected) => {\n    const activeFields = getFields()\n    if (selected === null) {\n      setSelected([])\n    } else {\n      setSelected(selected.map(({ value }) => value))\n    }\n\n    // remove deselected values from form state\n    if (selected === null || Object.keys(activeFields || []).length > selected.length) {\n      Object.keys(activeFields).forEach((path) => {\n        if (\n          selected === null ||\n          !selected.find((field) => {\n            return field.value.path === path\n          })\n        ) {\n          dispatchFields({\n            type: 'REMOVE',\n            path,\n          })\n        }\n      })\n    }\n  }\n\n  return (\n    <div className={baseClass}>\n      <FieldLabel label={t('fields:selectFieldsToEdit')} />\n      <ReactSelect isMulti onChange={handleChange} options={options} />\n    </div>\n  )\n}\n"],"names":["React","Fragment","useState","FieldLabel","useForm","createNestedClientFieldPath","useTranslation","ReactSelect","baseClass","combineLabel","prefix","field","span","style","display","fieldComponentProps","CustomLabel","undefined","labelProps","reduceFields","fieldMap","path","labelPrefix","reduce","fieldsToUse","isFieldAffectingData","disableBulkEdit","unique","isHidden","readOnly","type","tabFields","tab","name","formattedField","label","value","FieldSelect","setSelected","t","options","dispatchFields","getFields","handleChange","selected","activeFields","map","Object","keys","length","forEach","find","div","className","isMulti","onChange"],"mappings":"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"}