@payloadcms/ui 4.0.0-canary.2 → 4.0.0-canary.21

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":"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","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","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","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 { 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: '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/EditUpload/index.css

@@ -1,47 +1,37 @@
 @layer payload-default {
-  .edit-upload {
-    --edit-upload-cell-spacing: var(--spacer-4);
-    --edit-upload-sidebar-width: calc(350px + var(--gutter-h));
-    height: 100%;
-    display: flex;
-    flex-direction: column;
+  /* Allow the ReactCrop 9999px box-shadow overlay to escape the dialog bounds. */
+  .edit-upload__dialog {
+    overflow: visible;
   }
 
-  .edit-upload__header {
-    border-bottom: 1px solid var(--color-border);
-    padding: var(--spacer-2-5);
+  .edit-upload__body {
+    flex: 1 1 auto;
+    min-height: 0;
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .edit-upload__header h2 {
-    margin: 0;
-    text-wrap: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    flex-direction: column;
+    overflow: visible;
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
   }
 
-  [dir='rtl'] .edit-upload__actions {
-    margin-right: auto;
-    margin-left: unset;
-  }
+  .edit-upload__content {
+    --edit-upload-content-min-height: 480px;
+    --edit-upload-sidebar-width: 240px;
 
-  .edit-upload__actions {
-    min-width: 350px;
-    margin-left: auto;
-    padding: var(--spacer-2) 0 var(--spacer-2) var(--spacer-4);
-    justify-content: flex-end;
     display: flex;
-    gap: var(--spacer-3);
-    text-wrap: nowrap;
+    flex-direction: row;
+    flex: 1 1 auto;
+    min-height: var(--edit-upload-content-min-height);
   }
 
-  .edit-upload__toolWrap {
+  /* Canvas area */
+  .edit-upload__crop {
+    flex: 1 1 0;
+    min-width: 0;
     display: flex;
-    justify-content: flex-end;
-    flex: 1;
-    min-height: 0;
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacer-4);
+    background: var(--color-bg-secondary);
   }
 
   .edit-upload .ReactCrop__selection-addon,
@@ -54,173 +44,122 @@
     position: relative;
     display: inline-flex;
     max-height: 100%;
+    max-width: 100%;
   }
 
-  .edit-upload__draggable-container {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    pointer-events: none;
+  /* Sidebar */
+  .edit-upload__sidebar {
+    flex-shrink: 0;
+    width: var(--edit-upload-sidebar-width);
+    border-inline-start: var(--stroke-width-small) solid var(--color-border);
+    display: flex;
+    flex-direction: column;
   }
 
-  .edit-upload__draggable-container--dragging {
-    pointer-events: all;
+  .edit-upload__section {
+    display: flex;
+    flex-direction: column;
+    padding-block-end: var(--spacer-2);
   }
 
-  .edit-upload__draggable-container--dragging .edit-upload__focalPoint {
-    cursor: grabbing;
+  .edit-upload__section + .edit-upload__section {
+    border-top: var(--stroke-width-small) solid var(--color-border);
   }
 
-  .edit-upload__draggable {
-    position: absolute;
+  .edit-upload__section:last-child {
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
   }
 
-  .edit-upload__focalPoint {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    border-radius: 50%;
+  .edit-upload__section-header {
     display: flex;
     align-items: center;
-    justify-content: center;
-    cursor: grab;
-    width: 50px;
-    height: 50px;
-    transform: translate3d(-50%, -50%, 0);
-    pointer-events: all;
-  }
-
-  .edit-upload__focalPoint svg {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.5);
-    border-radius: 100%;
-    width: var(--spacer-6);
+    justify-content: space-between;
     height: var(--spacer-6);
-    color: white;
+    padding-inline-start: var(--spacer-3);
+    padding-inline-end: var(--spacer-2);
   }
 
-  .edit-upload__crop,
-  .edit-upload__focalOnly {
-    padding: var(--spacer-4) var(--spacer-4) var(--spacer-4) 0;
-    width: 100%;
-    display: flex;
-    justify-content: center;
+  .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);
+    color: var(--color-text);
   }
 
-  .edit-upload__crop {
-    padding: var(--edit-upload-cell-spacing);
-    padding-left: var(--gutter-h);
+  .edit-upload__reset {
     display: flex;
-    align-items: flex-start;
-    height: 100%;
-  }
-
-  .edit-upload__imageWrap {
-    position: relative;
-  }
-
-  .edit-upload__point {
-    cursor: move;
-    position: absolute;
-    background: rgba(0, 0, 0, 0.5);
-    border-radius: 100%;
-  }
-
-  .edit-upload__point svg {
-    width: var(--spacer-6);
-    height: var(--spacer-6);
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius-medium);
+    background: transparent;
+    color: var(--color-icon);
+    cursor: pointer;
   }
 
-  .edit-upload__sidebar {
-    border-left: 1px solid var(--color-border);
-    padding-top: var(--edit-upload-cell-spacing);
-    min-width: var(--edit-upload-sidebar-width);
+  .edit-upload__reset:hover {
+    background: var(--color-bg-secondary);
   }
 
-  .edit-upload__sidebar > div:first-child {
-    margin-bottom: var(--spacer-3);
+  .edit-upload__reset:focus-visible {
+    outline: var(--accessibility-outline);
   }
 
-  .edit-upload__groupWrap {
-    display: flex;
-    flex-direction: column;
+  .edit-upload__fieldset {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: var(--spacer-2);
-    padding-right: var(--gutter-h);
-    padding-left: var(--edit-upload-cell-spacing);
-    width: 100%;
+    padding-inline-start: var(--spacer-3);
+    padding-inline-end: var(--spacer-2);
+    padding-block: var(--spacer-1);
   }
 
-  .edit-upload__groupWrap + .edit-upload__groupWrap {
-    padding-top: var(--edit-upload-cell-spacing);
-    margin-top: var(--edit-upload-cell-spacing);
-    border-top: 1px solid var(--color-border);
+  /* Draggable focal point */
+  .edit-upload__draggable-container {
+    position: absolute;
+    inset: 0;
+    pointer-events: none; /* let clicks pass through to the image/crop layer */
   }
 
-  .edit-upload__inputsWrap,
-  .edit-upload__titleWrap {
-    display: flex;
-    gap: var(--spacer-3);
+  .edit-upload__draggable {
+    position: absolute;
+    pointer-events: all; /* only the handle itself is interactive */
   }
 
-  .edit-upload__titleWrap {
-    justify-content: space-between;
+  .edit-upload__focalPoint {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: flex;
     align-items: center;
-  }
-
-  .edit-upload__titleWrap h3 {
-    margin: 0;
-  }
-
-  .edit-upload__reset {
-    height: fit-content;
-    border-radius: var(--radius-small);
-    background-color: var(--color-bg-secondary);
-    padding: 0 var(--spacer-2);
-  }
-
-  .edit-upload__input {
-    flex: 1;
-  }
-
-  @media (max-width: 1024px) {
-    .edit-upload {
-      --edit-upload-cell-spacing: var(--gutter-h);
-    }
+    justify-content: center;
+    width: var(--spacer-5);
+    height: var(--spacer-5);
+    border-radius: 50%;
+    background: var(--color-focal-point-backdrop);
+    color: white;
+    cursor: grab;
+    transform: translate3d(-50%, -50%, 0);
+    pointer-events: all;
 
-    .edit-upload__sidebar {
-      padding-left: 0;
-      border-left: 0;
+    svg {
       width: 100%;
-    }
-
-    .edit-upload__toolWrap {
-      flex-direction: column-reverse;
+      height: 100%;
     }
   }
 
   @media (max-width: 768px) {
-    .edit-upload {
+    .edit-upload__content {
       flex-direction: column;
-    }
-
-    .edit-upload__focalPoint {
-      border-right: none;
-      padding: var(--spacer-3) 0;
-    }
-
-    .edit-upload__inputsWrap {
-      flex-direction: column;
-      gap: var(--spacer-3);
+      min-height: unset;
     }
 
     .edit-upload__sidebar {
-      min-width: 0;
+      width: 100%;
+      border-inline-start: none;
+      border-top: var(--stroke-width-small) solid var(--color-border);
     }
   }
 }

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

@@ -1,6 +1,7 @@
 import type { UploadEdits } from 'payload';
 import React from 'react';
 import './index.css';
+import './library.css';
 type FocalPosition = {
     x: number;
     y: number;
@@ -8,7 +9,7 @@ type FocalPosition = {
 export type EditUploadProps = {
     fileName: string;
     fileSrc: string;
-    imageCacheTag?: string;
+    imageCacheTag?: false | string;
     initialCrop?: UploadEdits['crop'];
     initialFocalPoint?: FocalPosition;
     onSave?: (uploadEdits: UploadEdits) => void;

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