@payloadcms/ui 4.0.0-internal.7b031c8 → 4.0.0-internal.7b53b6d

package/dist/elements/EditMany/DrawerContent.js

@@ -13,6 +13,7 @@ import { RenderField } from '../../forms/RenderFields/RenderField.js';
 import { FormSubmit } from '../../forms/Submit/index.js';
 import { ChevronIcon } from '../../icons/Chevron/index.js';
 import { useAuth } from '../../providers/Auth/index.js';
+import { useBranchParam } from '../../providers/Branch/index.js';
 import { useConfig } from '../../providers/Config/index.js';
 import { DocumentInfoProvider } from '../../providers/DocumentInfo/index.js';
 import { useLocale } from '../../providers/Locale/index.js';
@@ -195,9 +196,9 @@ export const EditManyDrawerContent = props => {
     permissions,
     user
   } = useAuth();
-  const {
-    code: locale
-  } = useLocale();
+  const currentLocale = useLocale();
+  const locale = currentLocale?.code;
+  const branch = useBranchParam();
   const {
     closeModal
   } = useModal();
@@ -281,15 +282,16 @@ export const EditManyDrawerContent = props => {
       });
     }
     return qs.stringify({
+      branch,
       locale,
       select: {},
       where: combineWhereConstraints(whereConstraints)
     }, {
       addQueryPrefix: true
     });
-  }, [collection, searchParams, selectAll, ids, locale, where]);
+  }, [branch, collection, searchParams, selectAll, ids, locale, where]);
   const onSuccess = () => {
-    router.replace(qs.stringify({
+    void router.replace(qs.stringify({
       ...parseSearchParams(searchParams),
       _r: Date.now(),
       page: selectAll ? '1' : undefined
@@ -324,8 +326,8 @@ export const EditManyDrawerContent = props => {
       skipValidation: true
     });
     dispatchFields({
-      type: 'UPDATE_MANY',
-      formState: state_0
+      type: 'MERGE_SERVER_STATE',
+      serverState: state_0
     });
     setIsInitializing(false);
   }, [getFormState, collection.slug, collectionPermissions, setSelectedFields]);

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

@@ -1 +1 @@
-{"version":3,"file":"DrawerContent.js","names":["c","_c","useModal","getTranslation","combineWhereConstraints","formatAdminURL","mergeListSearchAndWhere","unflatten","qs","React","useCallback","useEffect","useMemo","useState","useForm","Form","RenderField","FormSubmit","ChevronIcon","useAuth","useConfig","DocumentInfoProvider","useLocale","OperationContext","useRouter","useSearchParams","useServerFunctions","useTranslation","abortAndIgnore","handleAbortRef","parseSearchParams","Button","FieldSelect","baseClass","Submit","t0","$","action","disabled","submit","t","t1","method","skipValidation","save","t2","_jsx","className","onClick","size","children","PublishButton","overrides","_status","SaveDraftButton","buttonStyle","EditManyDrawerContent","props","collection","fields","labels","plural","singular","count","drawerSlug","ids","onSuccess","onSuccessFromProps","selectAll","selectedFields","setSelectedFields","where","permissions","user","code","locale","closeModal","config","routes","api","apiRoute","getFormState","i18n","isInitializing","setIsInitializing","router","abortFormStateRef","useRef","collectionPermissions","collections","slug","searchParams","select","reduce","acc","option","value","path","onChange","formState","prevFormState","submitted","controller","state","collectionSlug","docPermissions","docPreferences","operation","schemaPath","signal","current","abortFormState","queryString","whereConstraints","push","queryWithSearch","collectionConfig","search","get","id","not_equals","in","stringify","addQueryPrefix","replace","_r","Date","now","page","undefined","onFieldSelect","dispatchFields","selected","type","title","label","currentEditor","hasPublishedDoc","initialData","isLocked","lastUpdateTime","mostRecentVersionIsAutosaved","unpublishedVersionCount","versionCount","_jsxs","icon","direction","versions","drafts","Fragment","length","map","i","field","fieldPermissions","clientFieldConfig","indexPath","parentPath","parentSchemaPath"],"sources":["../../../src/elements/EditMany/DrawerContent.tsx"],"sourcesContent":["'use client'\n\nimport type { SelectType, Where } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  combineWhereConstraints,\n  formatAdminURL,\n  mergeListSearchAndWhere,\n  unflatten,\n} from 'payload/shared'\nimport * as qs from 'qs-esm'\nimport React, { useCallback, useEffect, useMemo, useState } from 'react'\n\nimport type { FormProps } from '../../forms/Form/index.js'\nimport type { OnFieldSelect } from '../FieldSelect/index.js'\nimport type { FieldOption } from '../FieldSelect/reduceFieldOptions.js'\nimport type { EditManyProps } from './index.js'\n\nimport { useForm } from '../../forms/Form/context.js'\nimport { Form } from '../../forms/Form/index.js'\nimport { RenderField } from '../../forms/RenderFields/RenderField.js'\nimport { FormSubmit } from '../../forms/Submit/index.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { DocumentInfoProvider } from '../../providers/DocumentInfo/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { OperationContext } from '../../providers/Operation/index.js'\nimport { useRouter, useSearchParams } from '../../providers/RouterAdapter/index.js'\nimport { useServerFunctions } from '../../providers/ServerFunctions/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { abortAndIgnore, handleAbortRef } from '../../utilities/abortAndIgnore.js'\nimport { parseSearchParams } from '../../utilities/parseSearchParams.js'\nimport { Button } from '../Button/index.js'\nimport { FieldSelect } from '../FieldSelect/index.js'\nimport { baseClass } from './index.js'\nimport './index.css'\nimport '../../forms/RenderFields/index.css'\n\nconst Submit: React.FC<{\n  readonly action: string\n  readonly disabled: boolean\n}> = ({ 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} size=\"medium\">\n      {t('general:save')}\n    </FormSubmit>\n  )\n}\n\nconst PublishButton: React.FC<{\n  action: string\n  disabled: boolean\n}> = ({ 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\n      className={`${baseClass}__publish`}\n      disabled={disabled}\n      onClick={save}\n      size=\"medium\"\n    >\n      {t('version:publishChanges')}\n    </FormSubmit>\n  )\n}\n\nconst SaveDraftButton: React.FC<{\n  action: string\n  disabled: boolean\n}> = ({ 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\n      buttonStyle=\"secondary\"\n      className={`${baseClass}__draft`}\n      disabled={disabled}\n      onClick={save}\n      size=\"medium\"\n    >\n      {t('version:saveDraft')}\n    </FormSubmit>\n  )\n}\n\ntype EditManyDrawerContentProps = {\n  /**\n   * The total count of selected items\n   */\n  count?: number\n  /**\n   * The slug of the drawer\n   */\n  drawerSlug: string\n  /**\n   * The IDs of the selected items\n   */\n  ids?: (number | string)[]\n  /**\n   * The function to call after a successful action\n   */\n  onSuccess?: () => void\n  /**\n   * Whether all items are selected\n   */\n  selectAll?: boolean\n  /**\n   * The fields that are selected to bulk edit\n   */\n  selectedFields: FieldOption[]\n  /**\n   * The function to set the selected fields to bulk edit\n   */\n  setSelectedFields: (fields: FieldOption[]) => void\n  where?: Where\n} & EditManyProps\n\nexport const EditManyDrawerContent: React.FC<EditManyDrawerContentProps> = (props) => {\n  const {\n    collection,\n    collection: { fields, labels: { plural, singular } } = {},\n    count,\n    drawerSlug,\n    ids,\n    onSuccess: onSuccessFromProps,\n    selectAll,\n    selectedFields,\n    setSelectedFields,\n    where,\n  } = props\n\n  const { permissions, user } = useAuth()\n  const { code: locale } = useLocale()\n\n  const { closeModal } = useModal()\n\n  const {\n    config: {\n      routes: { api: apiRoute },\n    },\n  } = useConfig()\n\n  const { getFormState } = useServerFunctions()\n\n  const { i18n, t } = useTranslation()\n\n  const [isInitializing, setIsInitializing] = useState(false)\n\n  const router = useRouter()\n  const abortFormStateRef = React.useRef<AbortController>(null)\n  const collectionPermissions = permissions?.collections?.[collection.slug]\n  const searchParams = useSearchParams()\n\n  const select = useMemo<SelectType>(() => {\n    return unflatten(\n      selectedFields.reduce((acc, option) => {\n        acc[option.value.path] = true\n        return acc\n      }, {} as SelectType),\n    )\n  }, [selectedFields])\n\n  const onChange: FormProps['onChange'][0] = useCallback(\n    async ({ formState: prevFormState, submitted }) => {\n      const controller = handleAbortRef(abortFormStateRef)\n\n      const { state } = await getFormState({\n        collectionSlug: collection.slug,\n        docPermissions: collectionPermissions,\n        docPreferences: null,\n        formState: prevFormState,\n        operation: 'update',\n        schemaPath: collection.slug,\n        select,\n        signal: controller.signal,\n        skipValidation: !submitted,\n      })\n\n      abortFormStateRef.current = null\n\n      return state\n    },\n    [getFormState, collection, collectionPermissions, select],\n  )\n\n  useEffect(() => {\n    const abortFormState = abortFormStateRef.current\n\n    return () => {\n      abortAndIgnore(abortFormState)\n    }\n  }, [])\n\n  const queryString = useMemo((): string => {\n    const whereConstraints: Where[] = []\n\n    if (where) {\n      whereConstraints.push(where)\n    }\n\n    const queryWithSearch = mergeListSearchAndWhere({\n      collectionConfig: collection,\n      search: searchParams.get('search'),\n    })\n\n    if (queryWithSearch) {\n      whereConstraints.push(queryWithSearch)\n    }\n\n    if (selectAll) {\n      // Match the current filter/search, or default to all docs\n      whereConstraints.push(\n        (parseSearchParams(searchParams)?.where as Where) || {\n          id: {\n            not_equals: '',\n          },\n        },\n      )\n    } else {\n      // If we're not selecting all, we need to select specific docs\n      whereConstraints.push({\n        id: {\n          in: ids || [],\n        },\n      })\n    }\n\n    return qs.stringify(\n      {\n        locale,\n        select: {},\n        where: combineWhereConstraints(whereConstraints),\n      },\n      { addQueryPrefix: true },\n    )\n  }, [collection, searchParams, selectAll, ids, locale, where])\n\n  const onSuccess = () => {\n    router.replace(\n      qs.stringify(\n        {\n          ...parseSearchParams(searchParams),\n          _r: Date.now(), // Cache buster to force fresh data fetch. Prevents an e2e race condition where sometimes the data is not updated.\n          page: selectAll ? '1' : undefined,\n        },\n        { addQueryPrefix: true },\n      ),\n    )\n    closeModal(drawerSlug)\n\n    if (typeof onSuccessFromProps === 'function') {\n      onSuccessFromProps()\n    }\n  }\n\n  const onFieldSelect = useCallback<OnFieldSelect>(\n    async ({ dispatchFields, formState, selected }) => {\n      setIsInitializing(true)\n\n      setSelectedFields(selected || [])\n\n      const { state } = await getFormState({\n        collectionSlug: collection.slug,\n        docPermissions: collectionPermissions,\n        docPreferences: null,\n        formState,\n        operation: 'update',\n        schemaPath: collection.slug,\n        select: unflatten(\n          selected.reduce((acc, option) => {\n            acc[option.value.path] = true\n            return acc\n          }, {} as SelectType),\n        ),\n        skipValidation: true,\n      })\n\n      dispatchFields({\n        type: 'UPDATE_MANY',\n        formState: state,\n      })\n\n      setIsInitializing(false)\n    },\n    [getFormState, collection.slug, collectionPermissions, setSelectedFields],\n  )\n\n  const title = t('general:editingLabel', {\n    count,\n    label: getTranslation(count > 1 ? plural : singular, i18n),\n  })\n\n  return (\n    <DocumentInfoProvider\n      collectionSlug={collection.slug}\n      currentEditor={user}\n      hasPublishedDoc={false}\n      id={null}\n      initialData={{}}\n      isLocked={false}\n      lastUpdateTime={0}\n      mostRecentVersionIsAutosaved={false}\n      unpublishedVersionCount={0}\n      versionCount={0}\n    >\n      <OperationContext value=\"update\">\n        <Form\n          className={`${baseClass}__form`}\n          isInitializing={isInitializing}\n          onChange={[onChange]}\n          onSuccess={onSuccess}\n        >\n          <div className={`${baseClass}__header`}>\n            <Button\n              aria-label={t('general:close')}\n              buttonStyle=\"ghost\"\n              className={`${baseClass}__header__close`}\n              icon={<ChevronIcon direction=\"left\" size={24} />}\n              onClick={() => closeModal(drawerSlug)}\n            />\n            <h2 className={`${baseClass}__header__title`} title={title}>\n              {title}\n            </h2>\n            <div className={`${baseClass}__header__actions`}>\n              {collection?.versions?.drafts ? (\n                <React.Fragment>\n                  <SaveDraftButton\n                    action={formatAdminURL({\n                      apiRoute,\n                      path: `/${collection.slug}${queryString}&draft=true`,\n                    })}\n                    disabled={selectedFields.length === 0}\n                  />\n                  <PublishButton\n                    action={formatAdminURL({\n                      apiRoute,\n                      path: `/${collection.slug}${queryString}&draft=true`,\n                    })}\n                    disabled={selectedFields.length === 0}\n                  />\n                </React.Fragment>\n              ) : (\n                <Submit\n                  action={formatAdminURL({\n                    apiRoute,\n                    path: `/${collection.slug}${queryString}`,\n                  })}\n                  disabled={selectedFields.length === 0}\n                />\n              )}\n            </div>\n          </div>\n          <div className={`${baseClass}__body`}>\n            <div className={`${baseClass}__select-fields`}>\n              <FieldSelect\n                fields={fields}\n                onChange={onFieldSelect}\n                permissions={collectionPermissions.fields}\n              />\n            </div>\n            {selectedFields.length === 0 ? null : (\n              <div className={`${baseClass}__edit`}>\n                <div className=\"render-fields\">\n                  {selectedFields.map((option, i) => {\n                    const {\n                      value: { field, fieldPermissions, path },\n                    } = option\n\n                    return (\n                      <RenderField\n                        clientFieldConfig={field}\n                        indexPath=\"\"\n                        key={`${path}-${i}`}\n                        parentPath=\"\"\n                        parentSchemaPath=\"\"\n                        path={path}\n                        permissions={fieldPermissions}\n                      />\n                    )\n                  })}\n                </div>\n              </div>\n            )}\n          </div>\n        </Form>\n      </OperationContext>\n    </DocumentInfoProvider>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,SACEC,uBAAuB,EACvBC,cAAc,EACdC,uBAAuB,EACvBC,SAAS,QACJ;AACP,YAAYC,EAAA,MAAQ;AACpB,OAAOC,KAAA,IAASC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ;AAOjE,SAASC,OAAO,QAAQ;AACxB,SAASC,IAAI,QAAQ;AACrB,SAASC,WAAW,QAAQ;AAC5B,SAASC,UAAU,QAAQ;AAC3B,SAASC,WAAW,QAAQ;AAC5B,SAASC,OAAO,QAAQ;AACxB,SAASC,SAAS,QAAQ;AAC1B,SAASC,oBAAoB,QAAQ;AACrC,SAASC,SAAS,QAAQ;AAC1B,SAASC,gBAAgB,QAAQ;AACjC,SAASC,SAAS,EAAEC,eAAe,QAAQ;AAC3C,SAASC,kBAAkB,QAAQ;AACnC,SAASC,cAAc,QAAQ;AAC/B,SAASC,cAAc,EAAEC,cAAc,QAAQ;AAC/C,SAASC,iBAAiB,QAAQ;AAClC,SAASC,MAAM,QAAQ;AACvB,SAASC,WAAW,QAAQ;AAC5B,SAASC,SAAS,QAAQ;AAC1B,OAAO;AACP,OAAO;AAEP,MAAMC,MAAA,GAGDC,EAAA;EAAA,MAAAC,CAAA,GAAAnC,EAAA;EAAC;IAAAoC,MAAA;IAAAC;EAAA,IAAAH,EAAoB;EACxB;IAAAI;EAAA,IAAmBzB,OAAA;EACnB;IAAA0B;EAAA,IAAcb,cAAA;EAAA,IAAAc,EAAA;EAAA,IAAAL,CAAA,QAAAC,MAAA,IAAAD,CAAA,QAAAG,MAAA;IAEWE,EAAA,GAAAA,CAAA;MAClBF,MAAA;QAAAF,MAAA;QAAAK,MAAA,EAEK;QAAAC,cAAA;MAAA,CAEV;IAAA;IACFP,CAAA,MAAAC,MAAA;IAAAD,CAAA,MAAAG,MAAA;IAAAH,CAAA,MAAAK,EAAA;EAAA;IAAAA,EAAA,GAAAL,CAAA;EAAA;EANA,MAAAQ,IAAA,GAAaH,EAMM;EAAA,IAAAI,EAAA;EAAA,IAAAT,CAAA,QAAAE,QAAA,IAAAF,CAAA,QAAAQ,IAAA,IAAAR,CAAA,QAAAI,CAAA;IAGjBK,EAAA,GAAAC,IAAA,CAAA7B,UAAA;MAAA8B,SAAA,EAAuB,GAAAd,SAAA,QAAoB;MAAAK,QAAA;MAAAU,OAAA,EAA+BJ,IAAA;MAAAK,IAAA,EAAW;MAAAC,QAAA,EAClFV,CAAA,CAAE;IAAA,C;;;;;;;;SADLK,E;CAIJ;AAEA,MAAMM,aAAA,GAGDhB,EAAA;EAAA,MAAAC,CAAA,GAAAnC,EAAA;EAAC;IAAAoC,MAAA;IAAAC;EAAA,IAAAH,EAAoB;EACxB;IAAAI;EAAA,IAAmBzB,OAAA;EACnB;IAAA0B;EAAA,IAAcb,cAAA;EAAA,IAAAc,EAAA;EAAA,IAAAL,CAAA,QAAAC,MAAA,IAAAD,CAAA,QAAAG,MAAA;IAEWE,EAAA,GAAAA,CAAA;MAClBF,MAAA;QAAAF,MAAA;QAAAK,MAAA,EAEK;QAAAU,SAAA;UAAAC,OAAA,EAEG;QAAA;QAAAV,cAAA;MAAA,CAGb;IAAA;IACFP,CAAA,MAAAC,MAAA;IAAAD,CAAA,MAAAG,MAAA;IAAAH,CAAA,MAAAK,EAAA;EAAA;IAAAA,EAAA,GAAAL,CAAA;EAAA;EATA,MAAAQ,IAAA,GAAaH,EASM;EAAA,IAAAI,EAAA;EAAA,IAAAT,CAAA,QAAAE,QAAA,IAAAF,CAAA,QAAAQ,IAAA,IAAAR,CAAA,QAAAI,CAAA;IAGjBK,EAAA,GAAAC,IAAA,CAAA7B,UAAA;MAAA8B,SAAA,EACa,GAAAd,SAAA,WAAuB;MAAAK,QAAA;MAAAU,OAAA,EAEzBJ,IAAA;MAAAK,IAAA,EACJ;MAAAC,QAAA,EAEJV,CAAA,CAAE;IAAA,C;;;;;;;;SANLK,E;CASJ;AAEA,MAAMS,eAAA,GAGDnB,EAAA;EAAA,MAAAC,CAAA,GAAAnC,EAAA;EAAC;IAAAoC,MAAA;IAAAC;EAAA,IAAAH,EAAoB;EACxB;IAAAI;EAAA,IAAmBzB,OAAA;EACnB;IAAA0B;EAAA,IAAcb,cAAA;EAAA,IAAAc,EAAA;EAAA,IAAAL,CAAA,QAAAC,MAAA,IAAAD,CAAA,QAAAG,MAAA;IAEWE,EAAA,GAAAA,CAAA;MAClBF,MAAA;QAAAF,MAAA;QAAAK,MAAA,EAEK;QAAAU,SAAA;UAAAC,OAAA,EAEG;QAAA;QAAAV,cAAA;MAAA,CAGb;IAAA;IACFP,CAAA,MAAAC,MAAA;IAAAD,CAAA,MAAAG,MAAA;IAAAH,CAAA,MAAAK,EAAA;EAAA;IAAAA,EAAA,GAAAL,CAAA;EAAA;EATA,MAAAQ,IAAA,GAAaH,EASM;EAAA,IAAAI,EAAA;EAAA,IAAAT,CAAA,QAAAE,QAAA,IAAAF,CAAA,QAAAQ,IAAA,IAAAR,CAAA,QAAAI,CAAA;IAGjBK,EAAA,GAAAC,IAAA,CAAA7B,UAAA;MAAAsC,WAAA,EACc;MAAAR,SAAA,EACD,GAAAd,SAAA,SAAqB;MAAAK,QAAA;MAAAU,OAAA,EAEvBJ,IAAA;MAAAK,IAAA,EACJ;MAAAC,QAAA,EAEJV,CAAA,CAAE;IAAA,C;;;;;;;;SAPLK,E;CAUJ;AAkCA,OAAO,MAAMW,qBAAA,GAA+DC,KAAA;EAC1E,MAAM;IACJC,UAAU;IACVA,UAAA,EAAY;MAAEC,MAAM;MAAEC,MAAA,EAAQ;QAAEC,MAAM;QAAEC;MAAQ;IAAE,CAAE,GAAG,CAAC,CAAC;IACzDC,KAAK;IACLC,UAAU;IACVC,GAAG;IACHC,SAAA,EAAWC,kBAAkB;IAC7BC,SAAS;IACTC,cAAc;IACdC,iBAAiB;IACjBC;EAAK,CACN,GAAGd,KAAA;EAEJ,MAAM;IAAEe,WAAW;IAAEC;EAAI,CAAE,GAAGtD,OAAA;EAC9B,MAAM;IAAEuD,IAAA,EAAMC;EAAM,CAAE,GAAGrD,SAAA;EAEzB,MAAM;IAAEsD;EAAU,CAAE,GAAG1E,QAAA;EAEvB,MAAM;IACJ2E,MAAA,EAAQ;MACNC,MAAA,EAAQ;QAAEC,GAAA,EAAKC;MAAQ;IAAE;EAC1B,CACF,GAAG5D,SAAA;EAEJ,MAAM;IAAE6D;EAAY,CAAE,GAAGvD,kBAAA;EAEzB,MAAM;IAAEwD,IAAI;IAAE1C;EAAC,CAAE,GAAGb,cAAA;EAEpB,MAAM,CAACwD,cAAA,EAAgBC,iBAAA,CAAkB,GAAGvE,QAAA,CAAS;EAErD,MAAMwE,MAAA,GAAS7D,SAAA;EACf,MAAM8D,iBAAA,GAAoB7E,KAAA,CAAM8E,MAAM,CAAkB;EACxD,MAAMC,qBAAA,GAAwBhB,WAAA,EAAaiB,WAAA,GAAc/B,UAAA,CAAWgC,IAAI,CAAC;EACzE,MAAMC,YAAA,GAAelE,eAAA;EAErB,MAAMmE,MAAA,GAAShF,OAAA,CAAoB;IACjC,OAAOL,SAAA,CACL8D,cAAA,CAAewB,MAAM,CAAC,CAACC,GAAA,EAAKC,MAAA;MAC1BD,GAAG,CAACC,MAAA,CAAOC,KAAK,CAACC,IAAI,CAAC,GAAG;MACzB,OAAOH,GAAA;IACT,GAAG,CAAC;EAER,GAAG,CAACzB,cAAA,CAAe;EAEnB,MAAM6B,QAAA,GAAqCxF,WAAA,CACzC,OAAO;IAAEyF,SAAA,EAAWC,aAAa;IAAEC;EAAS,CAAE;IAC5C,MAAMC,UAAA,GAAazE,cAAA,CAAeyD,iBAAA;IAElC,MAAM;MAAEiB;IAAK,CAAE,GAAG,MAAMtB,YAAA,CAAa;MACnCuB,cAAA,EAAgB9C,UAAA,CAAWgC,IAAI;MAC/Be,cAAA,EAAgBjB,qBAAA;MAChBkB,cAAA,EAAgB;MAChBP,SAAA,EAAWC,aAAA;MACXO,SAAA,EAAW;MACXC,UAAA,EAAYlD,UAAA,CAAWgC,IAAI;MAC3BE,MAAA;MACAiB,MAAA,EAAQP,UAAA,CAAWO,MAAM;MACzBlE,cAAA,EAAgB,CAAC0D;IACnB;IAEAf,iBAAA,CAAkBwB,OAAO,GAAG;IAE5B,OAAOP,KAAA;EACT,GACA,CAACtB,YAAA,EAAcvB,UAAA,EAAY8B,qBAAA,EAAuBI,MAAA,CAAO;EAG3DjF,SAAA,CAAU;IACR,MAAMoG,cAAA,GAAiBzB,iBAAA,CAAkBwB,OAAO;IAEhD,OAAO;MACLlF,cAAA,CAAemF,cAAA;IACjB;EACF,GAAG,EAAE;EAEL,MAAMC,WAAA,GAAcpG,OAAA,CAAQ;IAC1B,MAAMqG,gBAAA,GAA4B,EAAE;IAEpC,IAAI1C,KAAA,EAAO;MACT0C,gBAAA,CAAiBC,IAAI,CAAC3C,KAAA;IACxB;IAEA,MAAM4C,eAAA,GAAkB7G,uBAAA,CAAwB;MAC9C8G,gBAAA,EAAkB1D,UAAA;MAClB2D,MAAA,EAAQ1B,YAAA,CAAa2B,GAAG,CAAC;IAC3B;IAEA,IAAIH,eAAA,EAAiB;MACnBF,gBAAA,CAAiBC,IAAI,CAACC,eAAA;IACxB;IAEA,IAAI/C,SAAA,EAAW;MACb;MACA6C,gBAAA,CAAiBC,IAAI,CACnBpF,iBAAC,CAAkB6D,YAAA,GAAepB,KAAA,IAAmB;QACnDgD,EAAA,EAAI;UACFC,UAAA,EAAY;QACd;MACF;IAEJ,OAAO;MACL;MACAP,gBAAA,CAAiBC,IAAI,CAAC;QACpBK,EAAA,EAAI;UACFE,EAAA,EAAIxD,GAAA,IAAO;QACb;MACF;IACF;IAEA,OAAOzD,EAAA,CAAGkH,SAAS,CACjB;MACE/C,MAAA;MACAiB,MAAA,EAAQ,CAAC;MACTrB,KAAA,EAAOnE,uBAAA,CAAwB6G,gBAAA;IACjC,GACA;MAAEU,cAAA,EAAgB;IAAK;EAE3B,GAAG,CAACjE,UAAA,EAAYiC,YAAA,EAAcvB,SAAA,EAAWH,GAAA,EAAKU,MAAA,EAAQJ,KAAA,CAAM;EAE5D,MAAML,SAAA,GAAYA,CAAA;IAChBmB,MAAA,CAAOuC,OAAO,CACZpH,EAAA,CAAGkH,SAAS,CACV;MACE,GAAG5F,iBAAA,CAAkB6D,YAAA,CAAa;MAClCkC,EAAA,EAAIC,IAAA,CAAKC,GAAG;MACZC,IAAA,EAAM5D,SAAA,GAAY,MAAM6D;IAC1B,GACA;MAAEN,cAAA,EAAgB;IAAK;IAG3B/C,UAAA,CAAWZ,UAAA;IAEX,IAAI,OAAOG,kBAAA,KAAuB,YAAY;MAC5CA,kBAAA;IACF;EACF;EAEA,MAAM+D,aAAA,GAAgBxH,WAAA,CACpB,OAAO;IAAEyH,cAAc;IAAEhC,SAAS;IAAEiC;EAAQ,CAAE;IAC5ChD,iBAAA,CAAkB;IAElBd,iBAAA,CAAkB8D,QAAA,IAAY,EAAE;IAEhC,MAAM;MAAE7B,KAAK,EAALA;IAAK,CAAE,GAAG,MAAMtB,YAAA,CAAa;MACnCuB,cAAA,EAAgB9C,UAAA,CAAWgC,IAAI;MAC/Be,cAAA,EAAgBjB,qBAAA;MAChBkB,cAAA,EAAgB;MAChBP,SAAA;MACAQ,SAAA,EAAW;MACXC,UAAA,EAAYlD,UAAA,CAAWgC,IAAI;MAC3BE,MAAA,EAAQrF,SAAA,CACN6H,QAAA,CAASvC,MAAM,CAAC,CAACC,KAAA,EAAKC,QAAA;QACpBD,KAAG,CAACC,QAAA,CAAOC,KAAK,CAACC,IAAI,CAAC,GAAG;QACzB,OAAOH,KAAA;MACT,GAAG,CAAC;MAENnD,cAAA,EAAgB;IAClB;IAEAwF,cAAA,CAAe;MACbE,IAAA,EAAM;MACNlC,SAAA,EAAWI;IACb;IAEAnB,iBAAA,CAAkB;EACpB,GACA,CAACH,YAAA,EAAcvB,UAAA,CAAWgC,IAAI,EAAEF,qBAAA,EAAuBlB,iBAAA,CAAkB;EAG3E,MAAMgE,KAAA,GAAQ9F,CAAA,CAAE,wBAAwB;IACtCuB,KAAA;IACAwE,KAAA,EAAOpI,cAAA,CAAe4D,KAAA,GAAQ,IAAIF,MAAA,GAASC,QAAA,EAAUoB,IAAA;EACvD;EAEA,oBACEpC,IAAA,CAACzB,oBAAA;IACCmF,cAAA,EAAgB9C,UAAA,CAAWgC,IAAI;IAC/B8C,aAAA,EAAe/D,IAAA;IACfgE,eAAA,EAAiB;IACjBlB,EAAA,EAAI;IACJmB,WAAA,EAAa,CAAC;IACdC,QAAA,EAAU;IACVC,cAAA,EAAgB;IAChBC,4BAAA,EAA8B;IAC9BC,uBAAA,EAAyB;IACzBC,YAAA,EAAc;cAEd,aAAAjG,IAAA,CAACvB,gBAAA;MAAiByE,KAAA,EAAM;gBACtB,aAAAgD,KAAA,CAACjI,IAAA;QACCgC,SAAA,EAAW,GAAGd,SAAA,QAAiB;QAC/BkD,cAAA,EAAgBA,cAAA;QAChBe,QAAA,EAAU,CAACA,QAAA,CAAS;QACpBhC,SAAA,EAAWA,SAAA;gCAEX8E,KAAA,CAAC;UAAIjG,SAAA,EAAW,GAAGd,SAAA,UAAmB;kCACpCa,IAAA,CAACf,MAAA;YACC,cAAYS,CAAA,CAAE;YACde,WAAA,EAAY;YACZR,SAAA,EAAW,GAAGd,SAAA,iBAA0B;YACxCgH,IAAA,eAAMnG,IAAA,CAAC5B,WAAA;cAAYgI,SAAA,EAAU;cAAOjG,IAAA,EAAM;;YAC1CD,OAAA,EAASA,CAAA,KAAM4B,UAAA,CAAWZ,UAAA;2BAE5BlB,IAAA,CAAC;YAAGC,SAAA,EAAW,GAAGd,SAAA,iBAA0B;YAAEqG,KAAA,EAAOA,KAAA;sBAClDA;2BAEHxF,IAAA,CAAC;YAAIC,SAAA,EAAW,GAAGd,SAAA,mBAA4B;sBAC5CyB,UAAA,EAAYyF,QAAA,EAAUC,MAAA,gBACrBJ,KAAA,CAACvI,KAAA,CAAM4I,QAAQ;sCACbvG,IAAA,CAACQ,eAAA;gBACCjB,MAAA,EAAQhC,cAAA,CAAe;kBACrB2E,QAAA;kBACAiB,IAAA,EAAM,IAAIvC,UAAA,CAAWgC,IAAI,GAAGsB,WAAA;gBAC9B;gBACA1E,QAAA,EAAU+B,cAAA,CAAeiF,MAAM,KAAK;+BAEtCxG,IAAA,CAACK,aAAA;gBACCd,MAAA,EAAQhC,cAAA,CAAe;kBACrB2E,QAAA;kBACAiB,IAAA,EAAM,IAAIvC,UAAA,CAAWgC,IAAI,GAAGsB,WAAA;gBAC9B;gBACA1E,QAAA,EAAU+B,cAAA,CAAeiF,MAAM,KAAK;;8BAIxCxG,IAAA,CAACZ,MAAA;cACCG,MAAA,EAAQhC,cAAA,CAAe;gBACrB2E,QAAA;gBACAiB,IAAA,EAAM,IAAIvC,UAAA,CAAWgC,IAAI,GAAGsB,WAAA;cAC9B;cACA1E,QAAA,EAAU+B,cAAA,CAAeiF,MAAM,KAAK;;;yBAK5CN,KAAA,CAAC;UAAIjG,SAAA,EAAW,GAAGd,SAAA,QAAiB;kCAClCa,IAAA,CAAC;YAAIC,SAAA,EAAW,GAAGd,SAAA,iBAA0B;sBAC3C,aAAAa,IAAA,CAACd,WAAA;cACC2B,MAAA,EAAQA,MAAA;cACRuC,QAAA,EAAUgC,aAAA;cACV1D,WAAA,EAAagB,qBAAA,CAAsB7B;;cAGtCU,cAAA,CAAeiF,MAAM,KAAK,IAAI,oBAC7BxG,IAAA,CAAC;YAAIC,SAAA,EAAW,GAAGd,SAAA,QAAiB;sBAClC,aAAAa,IAAA,CAAC;cAAIC,SAAA,EAAU;wBACZsB,cAAA,CAAekF,GAAG,CAAC,CAACxD,QAAA,EAAQyD,CAAA;gBAC3B,MAAM;kBACJxD,KAAA,EAAO;oBAAEyD,KAAK;oBAAEC,gBAAgB;oBAAEzD;kBAAI;gBAAE,CACzC,GAAGF,QAAA;gBAEJ,oBACEjD,IAAA,CAAC9B,WAAA;kBACC2I,iBAAA,EAAmBF,KAAA;kBACnBG,SAAA,EAAU;kBAEVC,UAAA,EAAW;kBACXC,gBAAA,EAAiB;kBACjB7D,IAAA,EAAMA,IAAA;kBACNzB,WAAA,EAAakF;mBAJR,GAAGzD,IAAA,IAAQuD,CAAA,EAAG;cAOzB;;;;;;;AASlB","ignoreList":[]}
+{"version":3,"file":"DrawerContent.js","names":["c","_c","useModal","getTranslation","combineWhereConstraints","formatAdminURL","mergeListSearchAndWhere","unflatten","qs","React","useCallback","useEffect","useMemo","useState","useForm","Form","RenderField","FormSubmit","ChevronIcon","useAuth","useBranchParam","useConfig","DocumentInfoProvider","useLocale","OperationContext","useRouter","useSearchParams","useServerFunctions","useTranslation","abortAndIgnore","handleAbortRef","parseSearchParams","Button","FieldSelect","baseClass","Submit","t0","$","action","disabled","submit","t","t1","method","skipValidation","save","t2","_jsx","className","onClick","size","children","PublishButton","overrides","_status","SaveDraftButton","buttonStyle","EditManyDrawerContent","props","collection","fields","labels","plural","singular","count","drawerSlug","ids","onSuccess","onSuccessFromProps","selectAll","selectedFields","setSelectedFields","where","permissions","user","currentLocale","locale","code","branch","closeModal","config","routes","api","apiRoute","getFormState","i18n","isInitializing","setIsInitializing","router","abortFormStateRef","useRef","collectionPermissions","collections","slug","searchParams","select","reduce","acc","option","value","path","onChange","formState","prevFormState","submitted","controller","state","collectionSlug","docPermissions","docPreferences","operation","schemaPath","signal","current","abortFormState","queryString","whereConstraints","push","queryWithSearch","collectionConfig","search","get","id","not_equals","in","stringify","addQueryPrefix","replace","_r","Date","now","page","undefined","onFieldSelect","dispatchFields","selected","type","serverState","title","label","currentEditor","hasPublishedDoc","initialData","isLocked","lastUpdateTime","mostRecentVersionIsAutosaved","unpublishedVersionCount","versionCount","_jsxs","icon","direction","versions","drafts","Fragment","length","map","i","field","fieldPermissions","clientFieldConfig","indexPath","parentPath","parentSchemaPath"],"sources":["../../../src/elements/EditMany/DrawerContent.tsx"],"sourcesContent":["'use client'\n\nimport type { SelectType, Where } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  combineWhereConstraints,\n  formatAdminURL,\n  mergeListSearchAndWhere,\n  unflatten,\n} from 'payload/shared'\nimport * as qs from 'qs-esm'\nimport React, { useCallback, useEffect, useMemo, useState } from 'react'\n\nimport type { FormProps } from '../../forms/Form/index.js'\nimport type { OnFieldSelect } from '../FieldSelect/index.js'\nimport type { FieldOption } from '../FieldSelect/reduceFieldOptions.js'\nimport type { EditManyProps } from './index.js'\n\nimport { useForm } from '../../forms/Form/context.js'\nimport { Form } from '../../forms/Form/index.js'\nimport { RenderField } from '../../forms/RenderFields/RenderField.js'\nimport { FormSubmit } from '../../forms/Submit/index.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useBranchParam } from '../../providers/Branch/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { DocumentInfoProvider } from '../../providers/DocumentInfo/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { OperationContext } from '../../providers/Operation/index.js'\nimport { useRouter, useSearchParams } from '../../providers/RouterAdapter/index.js'\nimport { useServerFunctions } from '../../providers/ServerFunctions/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { abortAndIgnore, handleAbortRef } from '../../utilities/abortAndIgnore.js'\nimport { parseSearchParams } from '../../utilities/parseSearchParams.js'\nimport { Button } from '../Button/index.js'\nimport { FieldSelect } from '../FieldSelect/index.js'\nimport { baseClass } from './index.js'\nimport './index.css'\nimport '../../forms/RenderFields/index.css'\n\nconst Submit: React.FC<{\n  readonly action: string\n  readonly disabled: boolean\n}> = ({ 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} size=\"medium\">\n      {t('general:save')}\n    </FormSubmit>\n  )\n}\n\nconst PublishButton: React.FC<{\n  action: string\n  disabled: boolean\n}> = ({ 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\n      className={`${baseClass}__publish`}\n      disabled={disabled}\n      onClick={save}\n      size=\"medium\"\n    >\n      {t('version:publishChanges')}\n    </FormSubmit>\n  )\n}\n\nconst SaveDraftButton: React.FC<{\n  action: string\n  disabled: boolean\n}> = ({ 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\n      buttonStyle=\"secondary\"\n      className={`${baseClass}__draft`}\n      disabled={disabled}\n      onClick={save}\n      size=\"medium\"\n    >\n      {t('version:saveDraft')}\n    </FormSubmit>\n  )\n}\n\ntype EditManyDrawerContentProps = {\n  /**\n   * The total count of selected items\n   */\n  count?: number\n  /**\n   * The slug of the drawer\n   */\n  drawerSlug: string\n  /**\n   * The IDs of the selected items\n   */\n  ids?: (number | string)[]\n  /**\n   * The function to call after a successful action\n   */\n  onSuccess?: () => void\n  /**\n   * Whether all items are selected\n   */\n  selectAll?: boolean\n  /**\n   * The fields that are selected to bulk edit\n   */\n  selectedFields: FieldOption[]\n  /**\n   * The function to set the selected fields to bulk edit\n   */\n  setSelectedFields: (fields: FieldOption[]) => void\n  where?: Where\n} & EditManyProps\n\nexport const EditManyDrawerContent: React.FC<EditManyDrawerContentProps> = (props) => {\n  const {\n    collection,\n    collection: { fields, labels: { plural, singular } } = {},\n    count,\n    drawerSlug,\n    ids,\n    onSuccess: onSuccessFromProps,\n    selectAll,\n    selectedFields,\n    setSelectedFields,\n    where,\n  } = props\n\n  const { permissions, user } = useAuth()\n  const currentLocale = useLocale()\n  const locale = currentLocale?.code\n  const branch = useBranchParam()\n\n  const { closeModal } = useModal()\n\n  const {\n    config: {\n      routes: { api: apiRoute },\n    },\n  } = useConfig()\n\n  const { getFormState } = useServerFunctions()\n\n  const { i18n, t } = useTranslation()\n\n  const [isInitializing, setIsInitializing] = useState(false)\n\n  const router = useRouter()\n  const abortFormStateRef = React.useRef<AbortController>(null)\n  const collectionPermissions = permissions?.collections?.[collection.slug]\n  const searchParams = useSearchParams()\n\n  const select = useMemo<SelectType>(() => {\n    return unflatten(\n      selectedFields.reduce((acc, option) => {\n        acc[option.value.path] = true\n        return acc\n      }, {} as SelectType),\n    )\n  }, [selectedFields])\n\n  const onChange: FormProps['onChange'][0] = useCallback(\n    async ({ formState: prevFormState, submitted }) => {\n      const controller = handleAbortRef(abortFormStateRef)\n\n      const { state } = await getFormState({\n        collectionSlug: collection.slug,\n        docPermissions: collectionPermissions,\n        docPreferences: null,\n        formState: prevFormState,\n        operation: 'update',\n        schemaPath: collection.slug,\n        select,\n        signal: controller.signal,\n        skipValidation: !submitted,\n      })\n\n      abortFormStateRef.current = null\n\n      return state\n    },\n    [getFormState, collection, collectionPermissions, select],\n  )\n\n  useEffect(() => {\n    const abortFormState = abortFormStateRef.current\n\n    return () => {\n      abortAndIgnore(abortFormState)\n    }\n  }, [])\n\n  const queryString = useMemo((): string => {\n    const whereConstraints: Where[] = []\n\n    if (where) {\n      whereConstraints.push(where)\n    }\n\n    const queryWithSearch = mergeListSearchAndWhere({\n      collectionConfig: collection,\n      search: searchParams.get('search'),\n    })\n\n    if (queryWithSearch) {\n      whereConstraints.push(queryWithSearch)\n    }\n\n    if (selectAll) {\n      // Match the current filter/search, or default to all docs\n      whereConstraints.push(\n        (parseSearchParams(searchParams)?.where as Where) || {\n          id: {\n            not_equals: '',\n          },\n        },\n      )\n    } else {\n      // If we're not selecting all, we need to select specific docs\n      whereConstraints.push({\n        id: {\n          in: ids || [],\n        },\n      })\n    }\n\n    return qs.stringify(\n      {\n        branch,\n        locale,\n        select: {},\n        where: combineWhereConstraints(whereConstraints),\n      },\n      { addQueryPrefix: true },\n    )\n  }, [branch, collection, searchParams, selectAll, ids, locale, where])\n\n  const onSuccess = () => {\n    void router.replace(\n      qs.stringify(\n        {\n          ...parseSearchParams(searchParams),\n          _r: Date.now(), // Cache buster to force fresh data fetch. Prevents an e2e race condition where sometimes the data is not updated.\n          page: selectAll ? '1' : undefined,\n        },\n        { addQueryPrefix: true },\n      ),\n    )\n    closeModal(drawerSlug)\n\n    if (typeof onSuccessFromProps === 'function') {\n      onSuccessFromProps()\n    }\n  }\n\n  const onFieldSelect = useCallback<OnFieldSelect>(\n    async ({ dispatchFields, formState, selected }) => {\n      setIsInitializing(true)\n\n      setSelectedFields(selected || [])\n\n      const { state } = await getFormState({\n        collectionSlug: collection.slug,\n        docPermissions: collectionPermissions,\n        docPreferences: null,\n        formState,\n        operation: 'update',\n        schemaPath: collection.slug,\n        select: unflatten(\n          selected.reduce((acc, option) => {\n            acc[option.value.path] = true\n            return acc\n          }, {} as SelectType),\n        ),\n        skipValidation: true,\n      })\n\n      dispatchFields({\n        type: 'MERGE_SERVER_STATE',\n        serverState: state,\n      })\n\n      setIsInitializing(false)\n    },\n    [getFormState, collection.slug, collectionPermissions, setSelectedFields],\n  )\n\n  const title = t('general:editingLabel', {\n    count,\n    label: getTranslation(count > 1 ? plural : singular, i18n),\n  })\n\n  return (\n    <DocumentInfoProvider\n      collectionSlug={collection.slug}\n      currentEditor={user}\n      hasPublishedDoc={false}\n      id={null}\n      initialData={{}}\n      isLocked={false}\n      lastUpdateTime={0}\n      mostRecentVersionIsAutosaved={false}\n      unpublishedVersionCount={0}\n      versionCount={0}\n    >\n      <OperationContext value=\"update\">\n        <Form\n          className={`${baseClass}__form`}\n          isInitializing={isInitializing}\n          onChange={[onChange]}\n          onSuccess={onSuccess}\n        >\n          <div className={`${baseClass}__header`}>\n            <Button\n              aria-label={t('general:close')}\n              buttonStyle=\"ghost\"\n              className={`${baseClass}__header__close`}\n              icon={<ChevronIcon direction=\"left\" size={24} />}\n              onClick={() => closeModal(drawerSlug)}\n            />\n            <h2 className={`${baseClass}__header__title`} title={title}>\n              {title}\n            </h2>\n            <div className={`${baseClass}__header__actions`}>\n              {collection?.versions?.drafts ? (\n                <React.Fragment>\n                  <SaveDraftButton\n                    action={formatAdminURL({\n                      apiRoute,\n                      path: `/${collection.slug}${queryString}&draft=true`,\n                    })}\n                    disabled={selectedFields.length === 0}\n                  />\n                  <PublishButton\n                    action={formatAdminURL({\n                      apiRoute,\n                      path: `/${collection.slug}${queryString}&draft=true`,\n                    })}\n                    disabled={selectedFields.length === 0}\n                  />\n                </React.Fragment>\n              ) : (\n                <Submit\n                  action={formatAdminURL({\n                    apiRoute,\n                    path: `/${collection.slug}${queryString}`,\n                  })}\n                  disabled={selectedFields.length === 0}\n                />\n              )}\n            </div>\n          </div>\n          <div className={`${baseClass}__body`}>\n            <div className={`${baseClass}__select-fields`}>\n              <FieldSelect\n                fields={fields}\n                onChange={onFieldSelect}\n                permissions={collectionPermissions.fields}\n              />\n            </div>\n            {selectedFields.length === 0 ? null : (\n              <div className={`${baseClass}__edit`}>\n                <div className=\"render-fields\">\n                  {selectedFields.map((option, i) => {\n                    const {\n                      value: { field, fieldPermissions, path },\n                    } = option\n\n                    return (\n                      <RenderField\n                        clientFieldConfig={field}\n                        indexPath=\"\"\n                        key={`${path}-${i}`}\n                        parentPath=\"\"\n                        parentSchemaPath=\"\"\n                        path={path}\n                        permissions={fieldPermissions}\n                      />\n                    )\n                  })}\n                </div>\n              </div>\n            )}\n          </div>\n        </Form>\n      </OperationContext>\n    </DocumentInfoProvider>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/EditMany/index.css

@@ -32,11 +32,10 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     color: var(--color-text);
-    font-family: var(--text-body-large-strong-font-family);
-    font-size: var(--text-body-large-strong-font-size);
-    font-weight: var(--text-body-large-strong-font-weight);
-    line-height: var(--text-body-large-strong-line-height);
-    letter-spacing: var(--text-body-large-strong-letter-spacing);
+    font-size: var(--text-body-large-bold-font-size);
+    font-weight: var(--text-body-large-bold-font-weight);
+    line-height: var(--text-body-large-bold-line-height);
+    letter-spacing: var(--text-body-large-bold-letter-spacing);
   }
 
   .edit-many__header__actions {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","useModal","React","useState","useAuth","EditDepthProvider","useTranslation","Drawer","ListSelectionButton","EditManyDrawerContent","baseClass","EditMany","t0","$","collection","count","ids","modalPrefix","onSuccess","selectAll","where","permissions","openModal","t","t1","Symbol","for","selectedFields","setSelectedFields","collectionPermissions","collections","slug","drawerSlug","update","t2","filter","Boolean","t3","t4","_jsxs","className","join","children","_jsx","onClick","Header"],"sources":["../../../src/elements/EditMany/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, Where } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport React, { useState } from 'react'\n\nimport type { FieldOption } from '../FieldSelect/reduceFieldOptions.js'\n\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { EditDepthProvider } from '../../providers/EditDepth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Drawer } from '../Drawer/index.js'\nimport { ListSelectionButton } from '../ListSelection/index.js'\nimport { EditManyDrawerContent } from './DrawerContent.js'\nimport './index.css'\n\nexport const baseClass = 'edit-many'\n\nexport type EditManyProps = {\n  readonly collection: ClientCollectionConfig\n  readonly count: number\n  readonly ids: (number | string)[]\n  /**\n   * When multiple EditMany components are rendered on the page, this will differentiate them.\n   */\n  readonly modalPrefix?: string\n  readonly onSuccess?: () => void\n  readonly selectAll: boolean\n  readonly where?: Where\n}\n\nexport const EditMany: React.FC<EditManyProps> = ({\n  collection,\n  count,\n  ids,\n  modalPrefix,\n  onSuccess,\n  selectAll,\n  where,\n}) => {\n  const { permissions } = useAuth()\n  const { openModal } = useModal()\n\n  const { t } = useTranslation()\n\n  const [selectedFields, setSelectedFields] = useState<FieldOption[]>([])\n\n  const collectionPermissions = permissions?.collections?.[collection.slug]\n\n  const drawerSlug = `${modalPrefix ? `${modalPrefix}-` : ''}edit-${collection.slug}`\n\n  if (count === 0 || !collectionPermissions?.update) {\n    return null\n  }\n\n  return (\n    <div className={[baseClass, `${baseClass}__toggle`].filter(Boolean).join(' ')}>\n      <ListSelectionButton\n        aria-label={t('general:edit')}\n        onClick={() => {\n          openModal(drawerSlug)\n          setSelectedFields([])\n        }}\n      >\n        {t('general:edit')}\n      </ListSelectionButton>\n      <EditDepthProvider>\n        <Drawer Header={null} slug={drawerSlug}>\n          <EditManyDrawerContent\n            collection={collection}\n            count={count}\n            drawerSlug={drawerSlug}\n            ids={ids}\n            onSuccess={onSuccess}\n            selectAll={selectAll}\n            selectedFields={selectedFields}\n            setSelectedFields={setSelectedFields}\n            where={where}\n          />\n        </Drawer>\n      </EditDepthProvider>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","useModal","React","useState","useAuth","EditDepthProvider","useTranslation","Drawer","ListSelectionButton","EditManyDrawerContent","baseClass","EditMany","t0","$","collection","count","ids","modalPrefix","onSuccess","selectAll","where","permissions","openModal","t","t1","Symbol","for","selectedFields","setSelectedFields","collectionPermissions","collections","slug","drawerSlug","update","t2","filter","Boolean","t3","t4","_jsxs","className","join","children","_jsx","onClick","Header"],"sources":["../../../src/elements/EditMany/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, Where } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport React, { useState } from 'react'\n\nimport type { FieldOption } from '../FieldSelect/reduceFieldOptions.js'\n\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { EditDepthProvider } from '../../providers/EditDepth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Drawer } from '../Drawer/index.js'\nimport { ListSelectionButton } from '../ListSelection/index.js'\nimport { EditManyDrawerContent } from './DrawerContent.js'\nimport './index.css'\n\nexport const baseClass = 'edit-many'\n\nexport type EditManyProps = {\n  readonly collection: ClientCollectionConfig\n  readonly count: number\n  readonly ids: (number | string)[]\n  /**\n   * When multiple EditMany components are rendered on the page, this will differentiate them.\n   */\n  readonly modalPrefix?: string\n  readonly onSuccess?: () => void\n  readonly selectAll: boolean\n  readonly where?: Where\n}\n\nexport const EditMany: React.FC<EditManyProps> = ({\n  collection,\n  count,\n  ids,\n  modalPrefix,\n  onSuccess,\n  selectAll,\n  where,\n}) => {\n  const { permissions } = useAuth()\n  const { openModal } = useModal()\n\n  const { t } = useTranslation()\n\n  const [selectedFields, setSelectedFields] = useState<FieldOption[]>([])\n\n  const collectionPermissions = permissions?.collections?.[collection.slug]\n\n  const drawerSlug = `${modalPrefix ? `${modalPrefix}-` : ''}edit-${collection.slug}`\n\n  if (count === 0 || !collectionPermissions?.update) {\n    return null\n  }\n\n  return (\n    <div className={[baseClass, `${baseClass}__toggle`].filter(Boolean).join(' ')}>\n      <ListSelectionButton\n        aria-label={t('general:edit')}\n        onClick={() => {\n          openModal(drawerSlug)\n          setSelectedFields([])\n        }}\n      >\n        {t('general:edit')}\n      </ListSelectionButton>\n      <EditDepthProvider>\n        <Drawer Header={null} slug={drawerSlug}>\n          <EditManyDrawerContent\n            collection={collection}\n            count={count}\n            drawerSlug={drawerSlug}\n            ids={ids}\n            onSuccess={onSuccess}\n            selectAll={selectAll}\n            selectedFields={selectedFields}\n            setSelectedFields={setSelectedFields}\n            where={where}\n          />\n        </Drawer>\n      </EditDepthProvider>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/EditUpload/index.css

@@ -10,7 +10,6 @@
     display: flex;
     flex-direction: column;
     overflow: visible;
-    border-bottom: var(--stroke-width-small) solid var(--color-border);
   }
 
   .edit-upload__content {
@@ -80,10 +79,10 @@
   }
 
   .edit-upload__section-title {
-    font-family: var(--text-body-medium-strong-font-family);
-    font-size: var(--text-body-medium-strong-font-size);
-    font-weight: var(--text-body-medium-strong-font-weight);
-    line-height: var(--text-body-medium-strong-line-height);
+    margin: 0;
+    font-size: var(--text-body-medium-bold-font-size);
+    font-weight: var(--text-body-medium-bold-font-weight);
+    line-height: var(--text-body-medium-bold-line-height);
     color: var(--color-text);
   }
 
@@ -150,6 +149,7 @@
     }
   }
 
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
   @media (max-width: 768px) {
     .edit-upload__content {
       flex-direction: column;

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":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAG1C,OAAO,KAA2B,MAAM,OAAO,CAAA;AAW/C,OAAO,aAAa,CAAA;AACpB,OAAO,eAAe,CAAA;AAItB,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,KAAK,GAAG,MAAM,CAAA;IAC9B,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,CAgQhD,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,KAA2B,MAAM,OAAO,CAAA;AAW/C,OAAO,aAAa,CAAA;AACpB,OAAO,eAAe,CAAA;AAItB,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,KAAK,GAAG,MAAM,CAAA;IAC9B,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,CA2QhD,CAAA"}

package/dist/elements/EditUpload/index.js

@@ -142,6 +142,17 @@ export const EditUpload = ({
               aspectRatio: `${uncroppedPixelWidth / uncroppedPixelHeight}`
             },
             children: [showCrop ? /*#__PURE__*/_jsx(ReactCrop, {
+              ariaLabels: {
+                cropArea: t('upload:setCropArea'),
+                eDragHandle: t('upload:cropRight'),
+                nDragHandle: t('upload:cropTop'),
+                neDragHandle: t('upload:cropTopRight'),
+                nwDragHandle: t('upload:cropTopLeft'),
+                sDragHandle: t('upload:cropBottom'),
+                seDragHandle: t('upload:cropBottomRight'),
+                swDragHandle: t('upload:cropBottomLeft'),
+                wDragHandle: t('upload:cropLeft')
+              },
               className: `${baseClass}__reactCrop`,
               crop: crop,
               onChange: (_, c) => setCrop(c),
@@ -178,11 +189,11 @@ export const EditUpload = ({
             className: `${baseClass}__section`,
             children: [/*#__PURE__*/_jsxs("div", {
               className: `${baseClass}__section-header`,
-              children: [/*#__PURE__*/_jsx("span", {
+              children: [/*#__PURE__*/_jsx("h3", {
                 className: `${baseClass}__section-title`,
                 children: t('upload:crop')
               }), /*#__PURE__*/_jsx("button", {
-                "aria-label": t('general:reset'),
+                "aria-label": `${t('general:reset')}: ${t('upload:crop')}`,
                 className: `${baseClass}__reset`,
                 onClick: () => setCrop({
                   height: 100,
@@ -224,11 +235,11 @@ export const EditUpload = ({
             className: `${baseClass}__section`,
             children: [/*#__PURE__*/_jsxs("div", {
               className: `${baseClass}__section-header`,
-              children: [/*#__PURE__*/_jsx("span", {
+              children: [/*#__PURE__*/_jsx("h3", {
                 className: `${baseClass}__section-title`,
                 children: t('upload:focalPoint')
               }), /*#__PURE__*/_jsx("button", {
-                "aria-label": t('general:reset'),
+                "aria-label": `${t('general:reset')}: ${t('upload:focalPoint')}`,
                 className: `${baseClass}__reset`,
                 onClick: centerFocalPoint,
                 type: "button",
@@ -296,6 +307,9 @@ const DraggableElement = ({
   onDragEnd,
   setCheckBounds
 }) => {
+  const {
+    t
+  } = useTranslation();
   const [position, setPosition] = useState({
     x: initialPosition.x,
     y: initialPosition.y
@@ -318,6 +332,41 @@ const DraggableElement = ({
     event.preventDefault();
     setIsDragging(true);
   };
+  const handleKeyDown = event_0 => {
+    if (event_0.altKey || event_0.ctrlKey || event_0.metaKey || isDragging) {
+      return;
+    }
+    const step = event_0.shiftKey ? 10 : 1;
+    let {
+      x: x_0,
+      y: y_0
+    } = positionRef.current;
+    switch (event_0.key) {
+      case 'ArrowDown':
+        y_0 += step;
+        break;
+      case 'ArrowLeft':
+        x_0 -= step;
+        break;
+      case 'ArrowRight':
+        x_0 += step;
+        break;
+      case 'ArrowUp':
+        y_0 -= step;
+        break;
+      default:
+        return;
+    }
+    event_0.preventDefault();
+    event_0.stopPropagation();
+    const nextPosition = {
+      x: Math.max(0, Math.min(100, x_0)),
+      y: Math.max(0, Math.min(100, y_0))
+    };
+    positionRef.current = nextPosition;
+    setPosition(nextPosition);
+    onDragEnd(nextPosition);
+  };
   // Attach global listeners while dragging — this ensures events fire even when
   // the cursor leaves the focal wrapper area during a fast drag
   React.useEffect(() => {
@@ -329,12 +378,12 @@ const DraggableElement = ({
         return;
       }
       const {
-        x: x_0,
-        y: y_0
+        x: x_1,
+        y: y_1
       } = getCoordinates(e.clientX, e.clientY);
       setPosition({
-        x: x_0,
-        y: y_0
+        x: x_1,
+        y: y_1
       });
     };
     const handleUp = () => {
@@ -360,16 +409,16 @@ const DraggableElement = ({
       width
     } = dragRef.current.getBoundingClientRect();
     const {
-      x: x_1,
-      y: y_1
+      x: x_2,
+      y: y_2
     } = getCoordinates(left + width / 2, top + height / 2);
     onDragEnd({
-      x: x_1,
-      y: y_1
+      x: x_2,
+      y: y_2
     });
     setPosition({
-      x: x_1,
-      y: y_1
+      x: x_2,
+      y: y_2
     });
     setCheckBounds(false);
   }, [getCoordinates, isDragging, checkBounds, setCheckBounds, onDragEnd]);
@@ -382,7 +431,10 @@ const DraggableElement = ({
   return /*#__PURE__*/_jsx("div", {
     className: `${baseClass}__draggable-container`,
     children: /*#__PURE__*/_jsx("button", {
+      "aria-keyshortcuts": "ArrowLeft ArrowRight ArrowUp ArrowDown Shift+ArrowLeft Shift+ArrowRight Shift+ArrowUp Shift+ArrowDown",
+      "aria-label": t('upload:setFocalPoint'),
       className: [`${baseClass}__draggable`, className].filter(Boolean).join(' '),
+      onKeyDown: handleKeyDown,
       onMouseDown: handleMouseDown,
       ref: dragRef,
       style: {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useModal","React","useRef","useState","ReactCrop","editDrawerSlug","NumberInput","PlusIcon","ResetIcon","useTranslation","appendCacheTag","Button","DialogFooter","DialogHeader","DialogModal","baseClass","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","imageLoaded","setImageLoaded","onImageLoad","e","currentTarget","naturalHeight","naturalWidth","fineTuneCrop","dimension","value","intValue","parseInt","Number","isNaN","percentage","prev","fineTuneFocalPosition","coordinate","prevPosition","saveEdits","focalPoint","heightInPixels","Math","round","widthInPixels","onDragEnd","useCallback","centerFocalPoint","fileSrcToUse","cropWidthPx","toFixed","cropHeightPx","_jsxs","className","closeOnBlur","size","slug","_jsx","showClose","title","ref","style","aspectRatio","onChange","_","c","onComplete","renderSelectionAddon","alt","onLoad","src","DraggableElement","boundsRef","containerRef","initialPosition","onClick","type","ariaLabel","target","path","prefix","readOnly","max","min","suffix","buttonStyle","disabled","children","position","setPosition","isDragging","setIsDragging","dragRef","positionRef","current","getCoordinates","mouseX","mouseY","containerRect","getBoundingClientRect","left","top","handleMouseDown","event","preventDefault","useEffect","handleMove","clientX","clientY","handleUp","document","addEventListener","removeEventListener","filter","Boolean","join","onMouseDown"],"sources":["../../../src/elements/EditUpload/index.tsx"],"sourcesContent":["'use client'\n\nimport type { UploadEdits } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport React, { useRef, useState } from 'react'\nimport ReactCrop from 'react-image-crop'\n\nimport { editDrawerSlug } from '../../elements/Upload/index.js'\nimport { NumberInput } from '../../fields/Number/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { ResetIcon } from '../../icons/Reset/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { appendCacheTag } from '../../utilities/appendCacheTag.js'\nimport { Button } from '../Button/index.js'\nimport { DialogFooter, DialogHeader, DialogModal } from '../Dialog/index.js'\nimport './index.css'\nimport './library.css'\n\nconst baseClass = 'edit-upload'\n\ntype FocalPosition = {\n  x: number\n  y: number\n}\n\nexport type EditUploadProps = {\n  fileName: string\n  fileSrc: string\n  imageCacheTag?: false | 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 = { x: 50, y: 50 }\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 [imageLoaded, setImageLoaded] = useState<boolean>(false)\n\n  const onImageLoad = (e) => {\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 (Number.isNaN(intValue)) {\n      return null\n    }\n    const percentage =\n      100 * (intValue / (dimension === 'width' ? uncroppedPixelWidth : uncroppedPixelHeight))\n    if (percentage <= 0 || percentage > 100) {\n      return null\n    }\n    setCrop((prev) => ({ ...prev, [dimension]: percentage }))\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: Math.round((crop.height / 100) * uncroppedPixelHeight),\n        widthInPixels: Math.round((crop.width / 100) * uncroppedPixelWidth),\n      })\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    setFocalPosition({ x: 50, y: 50 })\n  }\n\n  const fileSrcToUse = fileSrc ? appendCacheTag(fileSrc, imageCacheTag) : undefined\n\n  const cropWidthPx = ((crop.width / 100) * uncroppedPixelWidth).toFixed(0)\n  const cropHeightPx = ((crop.height / 100) * uncroppedPixelHeight).toFixed(0)\n\n  return (\n    <DialogModal\n      className={`${baseClass}__dialog`}\n      closeOnBlur={false}\n      size=\"large\"\n      slug={editDrawerSlug}\n    >\n      <DialogHeader showClose title={`${t('general:editing')} ${fileName}`} />\n      <div className={`${baseClass}__body`}>\n        <div className={`${baseClass}__content`}>\n          {/* Canvas area */}\n          <div className={`${baseClass}__crop`}>\n            <div\n              className={`${baseClass}__focal-wrapper`}\n              ref={focalWrapRef}\n              style={{ aspectRatio: `${uncroppedPixelWidth / uncroppedPixelHeight}` }}\n            >\n              {showCrop ? (\n                <ReactCrop\n                  className={`${baseClass}__reactCrop`}\n                  crop={crop}\n                  onChange={(_, c) => setCrop(c)}\n                  onComplete={() => setCheckBounds(true)}\n                  renderSelectionAddon={() => (\n                    <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\n          {/* Sidebar */}\n          {(showCrop || showFocalPoint) && (\n            <div className={`${baseClass}__sidebar`}>\n              {showCrop && (\n                <div className={`${baseClass}__section`}>\n                  <div className={`${baseClass}__section-header`}>\n                    <span className={`${baseClass}__section-title`}>{t('upload:crop')}</span>\n                    <button\n                      aria-label={t('general:reset')}\n                      className={`${baseClass}__reset`}\n                      onClick={() => setCrop({ height: 100, unit: '%', width: 100, x: 0, y: 0 })}\n                      type=\"button\"\n                    >\n                      <ResetIcon />\n                    </button>\n                  </div>\n                  <div className={`${baseClass}__fieldset`}>\n                    <NumberInput\n                      ariaLabel={t('upload:width')}\n                      onChange={(e) => fineTuneCrop({ dimension: 'width', value: e.target.value })}\n                      path=\"cropWidth\"\n                      prefix=\"W\"\n                      readOnly={!imageLoaded}\n                      size=\"medium\"\n                      value={Number(cropWidthPx)}\n                    />\n                    <NumberInput\n                      ariaLabel={t('upload:height')}\n                      onChange={(e) => fineTuneCrop({ dimension: 'height', value: e.target.value })}\n                      path=\"cropHeight\"\n                      prefix=\"H\"\n                      readOnly={!imageLoaded}\n                      size=\"medium\"\n                      value={Number(cropHeightPx)}\n                    />\n                  </div>\n                </div>\n              )}\n\n              {showFocalPoint && (\n                <div className={`${baseClass}__section`}>\n                  <div className={`${baseClass}__section-header`}>\n                    <span className={`${baseClass}__section-title`}>{t('upload:focalPoint')}</span>\n                    <button\n                      aria-label={t('general:reset')}\n                      className={`${baseClass}__reset`}\n                      onClick={centerFocalPoint}\n                      type=\"button\"\n                    >\n                      <ResetIcon />\n                    </button>\n                  </div>\n                  <div className={`${baseClass}__fieldset`}>\n                    <NumberInput\n                      ariaLabel={`${t('upload:focalPoint')} X`}\n                      max={100}\n                      min={0}\n                      onChange={(e) =>\n                        fineTuneFocalPosition({ coordinate: 'x', value: e.target.value })\n                      }\n                      path=\"focalX\"\n                      prefix=\"X\"\n                      size=\"medium\"\n                      suffix=\"%\"\n                      value={Math.round(focalPosition.x)}\n                    />\n                    <NumberInput\n                      ariaLabel={`${t('upload:focalPoint')} Y`}\n                      max={100}\n                      min={0}\n                      onChange={(e) =>\n                        fineTuneFocalPosition({ coordinate: 'y', value: e.target.value })\n                      }\n                      path=\"focalY\"\n                      prefix=\"Y\"\n                      size=\"medium\"\n                      suffix=\"%\"\n                      value={Math.round(focalPosition.y)}\n                    />\n                  </div>\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n      <DialogFooter>\n        <Button\n          aria-label={t('general:cancel')}\n          buttonStyle=\"secondary\"\n          onClick={() => closeModal(editDrawerSlug)}\n        >\n          {t('general:cancel')}\n        </Button>\n        <Button\n          aria-label={t('general:applyChanges')}\n          buttonStyle=\"primary\"\n          disabled={!imageLoaded}\n          onClick={saveEdits}\n        >\n          {t('general:applyChanges')}\n        </Button>\n      </DialogFooter>\n    </DialogModal>\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  // Keep a ref to the latest position so global mouseup handler can read it without a stale closure\n  const positionRef = useRef(position)\n  positionRef.current = position\n\n  const getCoordinates = React.useCallback(\n    (mouseX: number, mouseY: number) => {\n      const containerRect = containerRef.current.getBoundingClientRect()\n      const x = ((mouseX - containerRect.left) / containerRect.width) * 100\n      const y = ((mouseY - containerRect.top) / containerRect.height) * 100\n      return { x: Math.max(0, Math.min(100, x)), y: Math.max(0, Math.min(100, y)) }\n    },\n    [containerRef],\n  )\n\n  const handleMouseDown = (event) => {\n    event.preventDefault()\n    setIsDragging(true)\n  }\n\n  // Attach global listeners while dragging — this ensures events fire even when\n  // the cursor leaves the focal wrapper area during a fast drag\n  React.useEffect(() => {\n    if (!isDragging) {\n      return\n    }\n\n    const handleMove = (e: MouseEvent) => {\n      if (!containerRef.current) {\n        return\n      }\n      const { x, y } = getCoordinates(e.clientX, e.clientY)\n      setPosition({ x, y })\n    }\n\n    const handleUp = () => {\n      setIsDragging(false)\n      onDragEnd(positionRef.current)\n    }\n\n    document.addEventListener('mousemove', handleMove)\n    document.addEventListener('mouseup', handleUp)\n\n    return () => {\n      document.removeEventListener('mousemove', handleMove)\n      document.removeEventListener('mouseup', handleUp)\n    }\n  }, [isDragging, getCoordinates, onDragEnd, containerRef])\n\n  // Re-check position when crop changes (the crop window may have moved)\n  React.useEffect(() => {\n    if (isDragging || !checkBounds || !dragRef.current) {\n      return\n    }\n    const { height, left, top, width } = dragRef.current.getBoundingClientRect()\n    const { x, y } = getCoordinates(left + width / 2, top + height / 2)\n    onDragEnd({ x, y })\n    setPosition({ x, y })\n    setCheckBounds(false)\n  }, [getCoordinates, isDragging, checkBounds, setCheckBounds, onDragEnd])\n\n  React.useEffect(() => {\n    setPosition({ x: initialPosition.x, y: initialPosition.y })\n  }, [initialPosition.x, initialPosition.y])\n\n  return (\n    <div className={`${baseClass}__draggable-container`}>\n      <button\n        className={[`${baseClass}__draggable`, className].filter(Boolean).join(' ')}\n        onMouseDown={handleMouseDown}\n        ref={dragRef}\n        style={{ left: `${position.x}%`, top: `${position.y}%` }}\n        type=\"button\"\n      >\n        {children}\n      </button>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useModal","React","useRef","useState","ReactCrop","editDrawerSlug","NumberInput","PlusIcon","ResetIcon","useTranslation","appendCacheTag","Button","DialogFooter","DialogHeader","DialogModal","baseClass","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","imageLoaded","setImageLoaded","onImageLoad","e","currentTarget","naturalHeight","naturalWidth","fineTuneCrop","dimension","value","intValue","parseInt","Number","isNaN","percentage","prev","fineTuneFocalPosition","coordinate","prevPosition","saveEdits","focalPoint","heightInPixels","Math","round","widthInPixels","onDragEnd","useCallback","centerFocalPoint","fileSrcToUse","cropWidthPx","toFixed","cropHeightPx","_jsxs","className","closeOnBlur","size","slug","_jsx","showClose","title","ref","style","aspectRatio","ariaLabels","cropArea","eDragHandle","nDragHandle","neDragHandle","nwDragHandle","sDragHandle","seDragHandle","swDragHandle","wDragHandle","onChange","_","c","onComplete","renderSelectionAddon","alt","onLoad","src","DraggableElement","boundsRef","containerRef","initialPosition","onClick","type","ariaLabel","target","path","prefix","readOnly","max","min","suffix","buttonStyle","disabled","children","position","setPosition","isDragging","setIsDragging","dragRef","positionRef","current","getCoordinates","mouseX","mouseY","containerRect","getBoundingClientRect","left","top","handleMouseDown","event","preventDefault","handleKeyDown","altKey","ctrlKey","metaKey","step","shiftKey","key","stopPropagation","nextPosition","useEffect","handleMove","clientX","clientY","handleUp","document","addEventListener","removeEventListener","filter","Boolean","join","onKeyDown","onMouseDown"],"sources":["../../../src/elements/EditUpload/index.tsx"],"sourcesContent":["'use client'\n\nimport type { UploadEdits } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport React, { useRef, useState } from 'react'\nimport ReactCrop from 'react-image-crop'\n\nimport { editDrawerSlug } from '../../elements/Upload/index.js'\nimport { NumberInput } from '../../fields/Number/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { ResetIcon } from '../../icons/Reset/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { appendCacheTag } from '../../utilities/appendCacheTag.js'\nimport { Button } from '../Button/index.js'\nimport { DialogFooter, DialogHeader, DialogModal } from '../Dialog/index.js'\nimport './index.css'\nimport './library.css'\n\nconst baseClass = 'edit-upload'\n\ntype FocalPosition = {\n  x: number\n  y: number\n}\n\nexport type EditUploadProps = {\n  fileName: string\n  fileSrc: string\n  imageCacheTag?: false | 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 = { x: 50, y: 50 }\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 [imageLoaded, setImageLoaded] = useState<boolean>(false)\n\n  const onImageLoad = (e) => {\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 (Number.isNaN(intValue)) {\n      return null\n    }\n    const percentage =\n      100 * (intValue / (dimension === 'width' ? uncroppedPixelWidth : uncroppedPixelHeight))\n    if (percentage <= 0 || percentage > 100) {\n      return null\n    }\n    setCrop((prev) => ({ ...prev, [dimension]: percentage }))\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: Math.round((crop.height / 100) * uncroppedPixelHeight),\n        widthInPixels: Math.round((crop.width / 100) * uncroppedPixelWidth),\n      })\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    setFocalPosition({ x: 50, y: 50 })\n  }\n\n  const fileSrcToUse = fileSrc ? appendCacheTag(fileSrc, imageCacheTag) : undefined\n\n  const cropWidthPx = ((crop.width / 100) * uncroppedPixelWidth).toFixed(0)\n  const cropHeightPx = ((crop.height / 100) * uncroppedPixelHeight).toFixed(0)\n\n  return (\n    <DialogModal\n      className={`${baseClass}__dialog`}\n      closeOnBlur={false}\n      size=\"large\"\n      slug={editDrawerSlug}\n    >\n      <DialogHeader showClose title={`${t('general:editing')} ${fileName}`} />\n      <div className={`${baseClass}__body`}>\n        <div className={`${baseClass}__content`}>\n          {/* Canvas area */}\n          <div className={`${baseClass}__crop`}>\n            <div\n              className={`${baseClass}__focal-wrapper`}\n              ref={focalWrapRef}\n              style={{ aspectRatio: `${uncroppedPixelWidth / uncroppedPixelHeight}` }}\n            >\n              {showCrop ? (\n                <ReactCrop\n                  ariaLabels={{\n                    cropArea: t('upload:setCropArea'),\n                    eDragHandle: t('upload:cropRight'),\n                    nDragHandle: t('upload:cropTop'),\n                    neDragHandle: t('upload:cropTopRight'),\n                    nwDragHandle: t('upload:cropTopLeft'),\n                    sDragHandle: t('upload:cropBottom'),\n                    seDragHandle: t('upload:cropBottomRight'),\n                    swDragHandle: t('upload:cropBottomLeft'),\n                    wDragHandle: t('upload:cropLeft'),\n                  }}\n                  className={`${baseClass}__reactCrop`}\n                  crop={crop}\n                  onChange={(_, c) => setCrop(c)}\n                  onComplete={() => setCheckBounds(true)}\n                  renderSelectionAddon={() => (\n                    <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\n          {/* Sidebar */}\n          {(showCrop || showFocalPoint) && (\n            <div className={`${baseClass}__sidebar`}>\n              {showCrop && (\n                <div className={`${baseClass}__section`}>\n                  <div className={`${baseClass}__section-header`}>\n                    <h3 className={`${baseClass}__section-title`}>{t('upload:crop')}</h3>\n                    <button\n                      aria-label={`${t('general:reset')}: ${t('upload:crop')}`}\n                      className={`${baseClass}__reset`}\n                      onClick={() => setCrop({ height: 100, unit: '%', width: 100, x: 0, y: 0 })}\n                      type=\"button\"\n                    >\n                      <ResetIcon />\n                    </button>\n                  </div>\n                  <div className={`${baseClass}__fieldset`}>\n                    <NumberInput\n                      ariaLabel={t('upload:width')}\n                      onChange={(e) => fineTuneCrop({ dimension: 'width', value: e.target.value })}\n                      path=\"cropWidth\"\n                      prefix=\"W\"\n                      readOnly={!imageLoaded}\n                      size=\"medium\"\n                      value={Number(cropWidthPx)}\n                    />\n                    <NumberInput\n                      ariaLabel={t('upload:height')}\n                      onChange={(e) => fineTuneCrop({ dimension: 'height', value: e.target.value })}\n                      path=\"cropHeight\"\n                      prefix=\"H\"\n                      readOnly={!imageLoaded}\n                      size=\"medium\"\n                      value={Number(cropHeightPx)}\n                    />\n                  </div>\n                </div>\n              )}\n\n              {showFocalPoint && (\n                <div className={`${baseClass}__section`}>\n                  <div className={`${baseClass}__section-header`}>\n                    <h3 className={`${baseClass}__section-title`}>{t('upload:focalPoint')}</h3>\n                    <button\n                      aria-label={`${t('general:reset')}: ${t('upload:focalPoint')}`}\n                      className={`${baseClass}__reset`}\n                      onClick={centerFocalPoint}\n                      type=\"button\"\n                    >\n                      <ResetIcon />\n                    </button>\n                  </div>\n                  <div className={`${baseClass}__fieldset`}>\n                    <NumberInput\n                      ariaLabel={`${t('upload:focalPoint')} X`}\n                      max={100}\n                      min={0}\n                      onChange={(e) =>\n                        fineTuneFocalPosition({ coordinate: 'x', value: e.target.value })\n                      }\n                      path=\"focalX\"\n                      prefix=\"X\"\n                      size=\"medium\"\n                      suffix=\"%\"\n                      value={Math.round(focalPosition.x)}\n                    />\n                    <NumberInput\n                      ariaLabel={`${t('upload:focalPoint')} Y`}\n                      max={100}\n                      min={0}\n                      onChange={(e) =>\n                        fineTuneFocalPosition({ coordinate: 'y', value: e.target.value })\n                      }\n                      path=\"focalY\"\n                      prefix=\"Y\"\n                      size=\"medium\"\n                      suffix=\"%\"\n                      value={Math.round(focalPosition.y)}\n                    />\n                  </div>\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n      <DialogFooter>\n        <Button\n          aria-label={t('general:cancel')}\n          buttonStyle=\"secondary\"\n          onClick={() => closeModal(editDrawerSlug)}\n        >\n          {t('general:cancel')}\n        </Button>\n        <Button\n          aria-label={t('general:applyChanges')}\n          buttonStyle=\"primary\"\n          disabled={!imageLoaded}\n          onClick={saveEdits}\n        >\n          {t('general:applyChanges')}\n        </Button>\n      </DialogFooter>\n    </DialogModal>\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 { t } = useTranslation()\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  // Keep a ref to the latest position so global mouseup handler can read it without a stale closure\n  const positionRef = useRef(position)\n  positionRef.current = position\n\n  const getCoordinates = React.useCallback(\n    (mouseX: number, mouseY: number) => {\n      const containerRect = containerRef.current.getBoundingClientRect()\n      const x = ((mouseX - containerRect.left) / containerRect.width) * 100\n      const y = ((mouseY - containerRect.top) / containerRect.height) * 100\n      return { x: Math.max(0, Math.min(100, x)), y: Math.max(0, Math.min(100, y)) }\n    },\n    [containerRef],\n  )\n\n  const handleMouseDown = (event) => {\n    event.preventDefault()\n    setIsDragging(true)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n    if (event.altKey || event.ctrlKey || event.metaKey || isDragging) {\n      return\n    }\n    const step = event.shiftKey ? 10 : 1\n    let { x, y } = positionRef.current\n\n    switch (event.key) {\n      case 'ArrowDown':\n        y += step\n        break\n      case 'ArrowLeft':\n        x -= step\n        break\n      case 'ArrowRight':\n        x += step\n        break\n      case 'ArrowUp':\n        y -= step\n        break\n      default:\n        return\n    }\n\n    event.preventDefault()\n    event.stopPropagation()\n    const nextPosition = {\n      x: Math.max(0, Math.min(100, x)),\n      y: Math.max(0, Math.min(100, y)),\n    }\n\n    positionRef.current = nextPosition\n    setPosition(nextPosition)\n    onDragEnd(nextPosition)\n  }\n\n  // Attach global listeners while dragging — this ensures events fire even when\n  // the cursor leaves the focal wrapper area during a fast drag\n  React.useEffect(() => {\n    if (!isDragging) {\n      return\n    }\n\n    const handleMove = (e: MouseEvent) => {\n      if (!containerRef.current) {\n        return\n      }\n      const { x, y } = getCoordinates(e.clientX, e.clientY)\n      setPosition({ x, y })\n    }\n\n    const handleUp = () => {\n      setIsDragging(false)\n      onDragEnd(positionRef.current)\n    }\n\n    document.addEventListener('mousemove', handleMove)\n    document.addEventListener('mouseup', handleUp)\n\n    return () => {\n      document.removeEventListener('mousemove', handleMove)\n      document.removeEventListener('mouseup', handleUp)\n    }\n  }, [isDragging, getCoordinates, onDragEnd, containerRef])\n\n  // Re-check position when crop changes (the crop window may have moved)\n  React.useEffect(() => {\n    if (isDragging || !checkBounds || !dragRef.current) {\n      return\n    }\n    const { height, left, top, width } = dragRef.current.getBoundingClientRect()\n    const { x, y } = getCoordinates(left + width / 2, top + height / 2)\n    onDragEnd({ x, y })\n    setPosition({ x, y })\n    setCheckBounds(false)\n  }, [getCoordinates, isDragging, checkBounds, setCheckBounds, onDragEnd])\n\n  React.useEffect(() => {\n    setPosition({ x: initialPosition.x, y: initialPosition.y })\n  }, [initialPosition.x, initialPosition.y])\n\n  return (\n    <div className={`${baseClass}__draggable-container`}>\n      <button\n        aria-keyshortcuts=\"ArrowLeft ArrowRight ArrowUp ArrowDown Shift+ArrowLeft Shift+ArrowRight Shift+ArrowUp Shift+ArrowDown\"\n        aria-label={t('upload:setFocalPoint')}\n        className={[`${baseClass}__draggable`, className].filter(Boolean).join(' ')}\n        onKeyDown={handleKeyDown}\n        onMouseDown={handleMouseDown}\n        ref={dragRef}\n        style={{ left: `${position.x}%`, top: `${position.y}%` }}\n        type=\"button\"\n      >\n        {children}\n      </button>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/EditUpload/library.css

@@ -88,10 +88,9 @@
     border-radius: 50%;
   }
 
-  .ReactCrop__crop-selection:focus {
-    outline: none;
-    border-color: var(--color-border-selected);
-    border-style: solid;
+  .ReactCrop__crop-selection:focus-visible {
+    outline: var(--stroke-width-medium) solid var(--color-border-selected);
+    outline-offset: calc(var(--stroke-width-medium) * -1);
   }
 
   .ReactCrop--invisible-crop .ReactCrop__crop-selection {
@@ -148,15 +147,9 @@
     outline: 1px solid transparent;
   }
 
-  .ReactCrop__drag-handle:focus:after {
-    border-color: var(--color-border-selected-strong);
-  }
-
-  .ReactCrop .ord-n:focus:after,
-  .ReactCrop .ord-e:focus:after,
-  .ReactCrop .ord-s:focus:after,
-  .ReactCrop .ord-w:focus:after {
-    background-color: var(--color-border-selected-strong);
+  .ReactCrop .ReactCrop__drag-handle:focus-visible:after {
+    outline: var(--stroke-width-medium) solid var(--color-border-selected-strong);
+    outline-offset: var(--stroke-width-small);
   }
 
   .ReactCrop .ord-nw {

package/dist/elements/ErrorPill/index.css

@@ -7,7 +7,6 @@
     padding: 0 var(--spacer-1);
     border-radius: var(--radius-medium);
     line-height: var(--text-body-medium-line-height);
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     letter-spacing: var(--text-letter-spacing);

package/dist/elements/FieldDiffContainer/index.css

@@ -23,6 +23,7 @@
     padding-inline: var(--spacer-2-5);
   }
 
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
   @media (max-width: 768px) {
     .field-diff-container .field-diff-content {
       grid-template-columns: 1fr;
@@ -65,7 +66,6 @@
     background-color: var(--color-bg-secondary);
     border-radius: var(--radius-medium);
     color: var(--color-text-secondary);
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     line-height: var(--text-body-medium-line-height);

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FieldDiffContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAEzD,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAC1E,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,IAAI,EAAE,UAAU,CAAA;IAChB,KAAK,EAAE;QACL,KAAK,CAAC,EAAE,KAAK,GAAG,aAAa,GAAG,WAAW,CAAA;QAC3C,MAAM,CAAC,EAAE,MAAM,CAAA;KAChB,CAAA;IACD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,EAAE,EAAE,KAAK,CAAC,SAAS,CAAA;CACpB,CAiCA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FieldDiffContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAEzD,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAC1E,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,IAAI,EAAE,UAAU,CAAA;IAChB,KAAK,EAAE;QACL,KAAK,CAAC,EAAE,KAAK,GAAG,aAAa,GAAG,WAAW,CAAA;QAC3C,MAAM,CAAC,EAAE,MAAM,CAAA;KAChB,CAAA;IACD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,EAAE,EAAE,KAAK,CAAC,SAAS,CAAA;CACpB,CAuCA,CAAA"}