@payloadcms/ui 4.0.0-canary.9 → 4.0.0-internal.016994f

package/dist/fields/Slug/index.js

@@ -1,9 +1,9 @@
 'use client';
 
-import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import React, { useCallback, useState } from 'react';
+import { toast } from 'sonner';
 import { Button } from '../../elements/Button/index.js';
 import { FieldDescription } from '../../fields/FieldDescription/index.js';
 import { FieldError } from '../../fields/FieldError/index.js';
@@ -15,6 +15,7 @@ import { LockIcon } from '../../icons/Lock/index.js';
 import { LockOpenIcon } from '../../icons/LockOpen/index.js';
 import { RefreshIcon } from '../../icons/Refresh/index.js';
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
+import { useLocale } from '../../providers/Locale/index.js';
 import { useServerFunctions } from '../../providers/ServerFunctions/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import './index.css';
@@ -22,12 +23,10 @@ const baseClass = 'slug-field-component';
 /**
  * @experimental This component is experimental and may change or be removed in the future. Use at your own risk.
  */
-const SlugFieldComponent = t0 => {
-  const $ = _c(17);
-  const {
-    field,
-    path
-  } = t0;
+const SlugFieldComponent = ({
+  field,
+  path
+}) => {
   const {
     admin,
     label,
@@ -44,159 +43,124 @@ const SlugFieldComponent = t0 => {
     t
   } = useTranslation();
   const {
+    id,
     collectionSlug,
     globalSlug
   } = useDocumentInfo();
   const {
     slugify
   } = useServerFunctions();
-  const t1 = path || field.name;
-  let t2;
-  if ($[0] !== t1) {
-    t2 = {
-      path: t1
-    };
-    $[0] = t1;
-    $[1] = t2;
-  } else {
-    t2 = $[1];
-  }
+  const {
+    code: locale
+  } = useLocale();
   const {
     path: fieldPath,
     setValue,
     showError,
     value
-  } = useField(t2);
+  } = useField({
+    path: path || field.name
+  });
   const {
     getData,
     getDataByPath
   } = useForm();
   const [isLocked, setIsLocked] = useState(true);
-  let t3;
-  if ($[2] !== collectionSlug || $[3] !== fieldPath || $[4] !== getData || $[5] !== getDataByPath || $[6] !== globalSlug || $[7] !== setValue || $[8] !== slugify || $[9] !== useAsSlug || $[10] !== value) {
-    t3 = async e => {
-      e.preventDefault();
-      const valueToSlugify = getDataByPath(useAsSlug);
-      const formattedSlug = await slugify({
+  /**
+  * This method allows the user to generate their slug on demand, e.g. when they click the "generate" button.
+  * It uses the `slugify` server function to gain access to their custom slugify function defined in their field config.
+  */
+  const handleGenerate = useCallback(async e => {
+    e.preventDefault();
+    const valueToSlugify = useAsSlug ? getDataByPath(useAsSlug) : undefined;
+    let formattedSlug;
+    try {
+      formattedSlug = await slugify({
+        id: id ?? undefined,
         collectionSlug,
         data: getData(),
         globalSlug,
+        locale,
         path: fieldPath,
         valueToSlugify
       });
-      if (formattedSlug === null || formattedSlug === undefined) {
-        setValue("");
-        return;
-      }
-      if (value !== formattedSlug) {
-        setValue(formattedSlug);
-      }
-    };
-    $[2] = collectionSlug;
-    $[3] = fieldPath;
-    $[4] = getData;
-    $[5] = getDataByPath;
-    $[6] = globalSlug;
-    $[7] = setValue;
-    $[8] = slugify;
-    $[9] = useAsSlug;
-    $[10] = value;
-    $[11] = t3;
-  } else {
-    t3 = $[11];
-  }
-  const handleGenerate = t3;
-  let t4;
-  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-    t4 = e_0 => {
-      e_0.preventDefault();
-      setIsLocked(_temp);
-    };
-    $[12] = t4;
-  } else {
-    t4 = $[12];
-  }
-  const toggleLock = t4;
-  let t5;
-  if ($[13] !== setValue) {
-    t5 = e_1 => {
-      setValue(e_1.target.value);
-    };
-    $[13] = setValue;
-    $[14] = t5;
-  } else {
-    t5 = $[14];
-  }
-  const handleChange = t5;
+    } catch (_err) {
+      toast.error(t('error:unspecific'));
+      return;
+    }
+    // Empty only comes back for globals (no counter fallback) — keep the current value. For
+    // collections the server returns the `<singular>-N` fallback when there's no source.
+    if (formattedSlug === null || formattedSlug === undefined || formattedSlug === '') {
+      return;
+    }
+    /**
+    * The result may be the same as the current value, and if so, we don't want to trigger a re-render.
+    */
+    if (value !== formattedSlug) {
+      setValue(formattedSlug);
+    }
+  }, [setValue, value, useAsSlug, getData, slugify, getDataByPath, id, collectionSlug, globalSlug, locale, fieldPath, t]);
+  const toggleLock = useCallback(e_0 => {
+    e_0.preventDefault();
+    setIsLocked(prev => !prev);
+  }, []);
+  const handleChange = useCallback(e_1 => {
+    setValue(e_1.target.value);
+  }, [setValue]);
   const isReadOnly = Boolean(readOnlyFromProps || isLocked);
-  const t6 = ["field-type", baseClass, showError && `${baseClass}--error`, isLocked && `${baseClass}--locked`, readOnlyFromProps && `${baseClass}--read-only`].filter(Boolean).join(" ");
-  const t7 = _jsx(FieldLabel, {
-    htmlFor: `field-${fieldPath}`,
-    label,
-    required
-  });
-  const t8 = _jsx(FieldError, {
-    path: fieldPath,
-    showError
-  });
-  const t9 = showError && "form-input-group-error";
-  let t10;
-  if ($[15] !== t9) {
-    t10 = ["form-input-group", `${baseClass}__input-container`, t9].filter(Boolean);
-    $[15] = t9;
-    $[16] = t10;
-  } else {
-    t10 = $[16];
-  }
-  return _jsxs("div", {
-    className: t6,
-    children: [t7, _jsxs("div", {
+  return /*#__PURE__*/_jsxs("div", {
+    className: ['field-type', baseClass, showError && `${baseClass}--error`, isLocked && `${baseClass}--locked`, readOnlyFromProps && `${baseClass}--read-only`].filter(Boolean).join(' '),
+    children: [/*#__PURE__*/_jsx(FieldLabel, {
+      htmlFor: `field-${fieldPath}`,
+      label: label,
+      required: required
+    }), /*#__PURE__*/_jsxs("div", {
       className: `${baseClass}__wrap`,
-      children: [t8, _jsxs("div", {
-        className: t10.join(" "),
-        children: [_jsx("input", {
+      children: [/*#__PURE__*/_jsx(FieldError, {
+        path: fieldPath,
+        showError: showError
+      }), /*#__PURE__*/_jsxs("div", {
+        className: ['form-input-group', `${baseClass}__input-container`, showError && 'form-input-group-error'].filter(Boolean).join(' '),
+        children: [/*#__PURE__*/_jsx("input", {
           "aria-label": getTranslation(label, i18n) || path,
           className: `form-input ${baseClass}__input`,
           disabled: isReadOnly,
-          id: `field-${fieldPath?.replace(/\./g, "__")}`,
+          id: `field-${fieldPath?.replace(/\./g, '__')}`,
           name: fieldPath,
           onChange: handleChange,
           placeholder: getTranslation(placeholder, i18n),
           type: "text",
-          value: value || ""
-        }), !readOnlyFromProps && _jsxs("div", {
+          value: value || ''
+        }), !readOnlyFromProps && /*#__PURE__*/_jsxs("div", {
           className: `${baseClass}__actions`,
-          children: [!isLocked && _jsx(Button, {
-            "aria-label": t("authentication:generate"),
+          children: [!isLocked && /*#__PURE__*/_jsx(Button, {
+            "aria-label": t('authentication:generate'),
             buttonStyle: "ghost",
             className: `${baseClass}__action-btn`,
-            icon: _jsx(RefreshIcon, {}),
-            id: `field-${fieldPath?.replace(/\./g, "__")}-generate`,
+            icon: /*#__PURE__*/_jsx(RefreshIcon, {}),
+            id: `field-${fieldPath?.replace(/\./g, '__')}-generate`,
             margin: false,
             onClick: handleGenerate
-          }), _jsx(Button, {
-            "aria-label": isLocked ? t("general:unlock") : t("general:lock"),
+          }), /*#__PURE__*/_jsx(Button, {
+            "aria-label": isLocked ? t('general:unlock') : t('general:lock'),
             buttonStyle: "ghost",
             className: `${baseClass}__action-btn`,
-            icon: isLocked ? _jsx(LockIcon, {
+            icon: isLocked ? /*#__PURE__*/_jsx(LockIcon, {
               size: 16
-            }) : _jsx(LockOpenIcon, {
+            }) : /*#__PURE__*/_jsx(LockOpenIcon, {
               size: 16
             }),
-            id: `field-${fieldPath?.replace(/\./g, "__")}-lock`,
+            id: `field-${fieldPath?.replace(/\./g, '__')}-lock`,
             margin: false,
             onClick: toggleLock
           })]
         })]
-      }), _jsx(FieldDescription, {
-        description,
+      }), /*#__PURE__*/_jsx(FieldDescription, {
+        description: description,
         path: fieldPath
       })]
     })]
   });
 };
 export const SlugField = withCondition(SlugFieldComponent);
-function _temp(prev) {
-  return !prev;
-}
 //# sourceMappingURL=index.js.map

package/dist/fields/Slug/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useCallback","useState","Button","FieldDescription","FieldError","FieldLabel","useForm","useField","withCondition","LockIcon","LockOpenIcon","RefreshIcon","useDocumentInfo","useServerFunctions","useTranslation","baseClass","SlugFieldComponent","t0","$","field","path","admin","label","required","useAsSlug","description","placeholder","readOnly","readOnlyFromProps","i18n","t","collectionSlug","globalSlug","slugify","t1","name","t2","fieldPath","setValue","showError","value","getData","getDataByPath","isLocked","setIsLocked","t3","e","preventDefault","valueToSlugify","formattedSlug","data","undefined","handleGenerate","t4","Symbol","for","e_0","_temp","toggleLock","t5","e_1","target","handleChange","isReadOnly","Boolean","t6","filter","join","t7","_jsx","htmlFor","t8","t9","t10","_jsxs","className","children","disabled","id","replace","onChange","type","buttonStyle","icon","margin","onClick","size","SlugField","prev"],"sources":["../../../src/fields/Slug/index.tsx"],"sourcesContent":["'use client'\n\nimport type { SlugFieldClient } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useCallback, useState } from 'react'\n\nimport { Button } from '../../elements/Button/index.js'\nimport { FieldDescription } from '../../fields/FieldDescription/index.js'\nimport { FieldError } from '../../fields/FieldError/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useForm } from '../../forms/Form/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { LockIcon } from '../../icons/Lock/index.js'\nimport { LockOpenIcon } from '../../icons/LockOpen/index.js'\nimport { RefreshIcon } from '../../icons/Refresh/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useServerFunctions } from '../../providers/ServerFunctions/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'slug-field-component'\n\ntype SlugFieldProps = {\n  readonly field: SlugFieldClient\n  readonly path?: string\n}\n\n/**\n * @experimental This component is experimental and may change or be removed in the future. Use at your own risk.\n */\nconst SlugFieldComponent: React.FC<SlugFieldProps> = ({ field, path }) => {\n  const { admin, label, required, useAsSlug } = field\n  const { description, placeholder, readOnly: readOnlyFromProps } = admin || {}\n\n  const { i18n, t } = useTranslation()\n\n  const { collectionSlug, globalSlug } = useDocumentInfo()\n\n  const { slugify } = useServerFunctions()\n\n  const {\n    path: fieldPath,\n    setValue,\n    showError,\n    value,\n  } = useField<string>({ path: path || field.name })\n\n  const { getData, getDataByPath } = useForm()\n\n  const [isLocked, setIsLocked] = useState(true)\n\n  /**\n   * This method allows the user to generate their slug on demand, e.g. when they click the \"generate\" button.\n   * It uses the `slugify` server function to gain access to their custom slugify function defined in their field config.\n   */\n  const handleGenerate = useCallback(\n    async (e: React.MouseEvent<Element>) => {\n      e.preventDefault()\n\n      const valueToSlugify = getDataByPath(useAsSlug)\n\n      const formattedSlug = await slugify({\n        collectionSlug,\n        data: getData(),\n        globalSlug,\n        path: fieldPath,\n        valueToSlugify,\n      })\n\n      if (formattedSlug === null || formattedSlug === undefined) {\n        setValue('')\n        return\n      }\n\n      /**\n       * The result may be the same as the current value, and if so, we don't want to trigger a re-render.\n       */\n      if (value !== formattedSlug) {\n        setValue(formattedSlug)\n      }\n    },\n    [\n      setValue,\n      value,\n      useAsSlug,\n      getData,\n      slugify,\n      getDataByPath,\n      collectionSlug,\n      globalSlug,\n      fieldPath,\n    ],\n  )\n\n  const toggleLock = useCallback((e: React.MouseEvent<Element>) => {\n    e.preventDefault()\n    setIsLocked((prev) => !prev)\n  }, [])\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      setValue(e.target.value)\n    },\n    [setValue],\n  )\n\n  const isReadOnly = Boolean(readOnlyFromProps || isLocked)\n\n  return (\n    <div\n      className={[\n        'field-type',\n        baseClass,\n        showError && `${baseClass}--error`,\n        isLocked && `${baseClass}--locked`,\n        readOnlyFromProps && `${baseClass}--read-only`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <FieldLabel htmlFor={`field-${fieldPath}`} label={label} required={required} />\n      <div className={`${baseClass}__wrap`}>\n        <FieldError path={fieldPath} showError={showError} />\n\n        <div\n          className={[\n            'form-input-group',\n            `${baseClass}__input-container`,\n            showError && 'form-input-group-error',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n        >\n          <input\n            aria-label={getTranslation(label, i18n) || path}\n            className={`form-input ${baseClass}__input`}\n            disabled={isReadOnly}\n            id={`field-${fieldPath?.replace(/\\./g, '__')}`}\n            name={fieldPath}\n            onChange={handleChange}\n            placeholder={getTranslation(placeholder, i18n)}\n            type=\"text\"\n            value={value || ''}\n          />\n\n          {!readOnlyFromProps && (\n            <div className={`${baseClass}__actions`}>\n              {!isLocked && (\n                <Button\n                  aria-label={t('authentication:generate')}\n                  buttonStyle=\"ghost\"\n                  className={`${baseClass}__action-btn`}\n                  icon={<RefreshIcon />}\n                  id={`field-${fieldPath?.replace(/\\./g, '__')}-generate`}\n                  margin={false}\n                  onClick={handleGenerate}\n                />\n              )}\n              <Button\n                aria-label={isLocked ? t('general:unlock') : t('general:lock')}\n                buttonStyle=\"ghost\"\n                className={`${baseClass}__action-btn`}\n                icon={isLocked ? <LockIcon size={16} /> : <LockOpenIcon size={16} />}\n                id={`field-${fieldPath?.replace(/\\./g, '__')}-lock`}\n                margin={false}\n                onClick={toggleLock}\n              />\n            </div>\n          )}\n        </div>\n\n        <FieldDescription description={description} path={fieldPath} />\n      </div>\n    </div>\n  )\n}\n\nexport const SlugField = withCondition(SlugFieldComponent)\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["getTranslation","React","useCallback","useState","toast","Button","FieldDescription","FieldError","FieldLabel","useForm","useField","withCondition","LockIcon","LockOpenIcon","RefreshIcon","useDocumentInfo","useLocale","useServerFunctions","useTranslation","baseClass","SlugFieldComponent","field","path","admin","label","required","useAsSlug","description","placeholder","readOnly","readOnlyFromProps","i18n","t","id","collectionSlug","globalSlug","slugify","code","locale","fieldPath","setValue","showError","value","name","getData","getDataByPath","isLocked","setIsLocked","handleGenerate","e","preventDefault","valueToSlugify","undefined","formattedSlug","data","_err","error","toggleLock","prev","handleChange","target","isReadOnly","Boolean","_jsxs","className","filter","join","_jsx","htmlFor","disabled","replace","onChange","type","buttonStyle","icon","margin","onClick","size","SlugField"],"sources":["../../../src/fields/Slug/index.tsx"],"sourcesContent":["'use client'\n\nimport type { SlugFieldClient } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useCallback, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport { Button } from '../../elements/Button/index.js'\nimport { FieldDescription } from '../../fields/FieldDescription/index.js'\nimport { FieldError } from '../../fields/FieldError/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useForm } from '../../forms/Form/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { LockIcon } from '../../icons/Lock/index.js'\nimport { LockOpenIcon } from '../../icons/LockOpen/index.js'\nimport { RefreshIcon } from '../../icons/Refresh/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useServerFunctions } from '../../providers/ServerFunctions/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'slug-field-component'\n\ntype SlugFieldProps = {\n  readonly field: SlugFieldClient\n  readonly path?: string\n}\n\n/**\n * @experimental This component is experimental and may change or be removed in the future. Use at your own risk.\n */\nconst SlugFieldComponent: React.FC<SlugFieldProps> = ({ field, path }) => {\n  const { admin, label, required, useAsSlug } = field\n  const { description, placeholder, readOnly: readOnlyFromProps } = admin || {}\n\n  const { i18n, t } = useTranslation()\n\n  const { id, collectionSlug, globalSlug } = useDocumentInfo()\n\n  const { slugify } = useServerFunctions()\n\n  const { code: locale } = useLocale()\n\n  const {\n    path: fieldPath,\n    setValue,\n    showError,\n    value,\n  } = useField<string>({ path: path || field.name })\n\n  const { getData, getDataByPath } = useForm()\n\n  const [isLocked, setIsLocked] = useState(true)\n\n  /**\n   * This method allows the user to generate their slug on demand, e.g. when they click the \"generate\" button.\n   * It uses the `slugify` server function to gain access to their custom slugify function defined in their field config.\n   */\n  const handleGenerate = useCallback(\n    async (e: React.MouseEvent<Element>) => {\n      e.preventDefault()\n\n      const valueToSlugify = useAsSlug ? getDataByPath(useAsSlug) : undefined\n\n      let formattedSlug: null | string | undefined\n\n      try {\n        formattedSlug = await slugify({\n          id: id ?? undefined,\n          collectionSlug,\n          data: getData(),\n          globalSlug,\n          locale,\n          path: fieldPath,\n          valueToSlugify,\n        })\n      } catch (_err) {\n        toast.error(t('error:unspecific'))\n        return\n      }\n\n      // Empty only comes back for globals (no counter fallback) — keep the current value. For\n      // collections the server returns the `<singular>-N` fallback when there's no source.\n      if (formattedSlug === null || formattedSlug === undefined || formattedSlug === '') {\n        return\n      }\n\n      /**\n       * The result may be the same as the current value, and if so, we don't want to trigger a re-render.\n       */\n      if (value !== formattedSlug) {\n        setValue(formattedSlug)\n      }\n    },\n    [\n      setValue,\n      value,\n      useAsSlug,\n      getData,\n      slugify,\n      getDataByPath,\n      id,\n      collectionSlug,\n      globalSlug,\n      locale,\n      fieldPath,\n      t,\n    ],\n  )\n\n  const toggleLock = useCallback((e: React.MouseEvent<Element>) => {\n    e.preventDefault()\n    setIsLocked((prev) => !prev)\n  }, [])\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      setValue(e.target.value)\n    },\n    [setValue],\n  )\n\n  const isReadOnly = Boolean(readOnlyFromProps || isLocked)\n\n  return (\n    <div\n      className={[\n        'field-type',\n        baseClass,\n        showError && `${baseClass}--error`,\n        isLocked && `${baseClass}--locked`,\n        readOnlyFromProps && `${baseClass}--read-only`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <FieldLabel htmlFor={`field-${fieldPath}`} label={label} required={required} />\n      <div className={`${baseClass}__wrap`}>\n        <FieldError path={fieldPath} showError={showError} />\n\n        <div\n          className={[\n            'form-input-group',\n            `${baseClass}__input-container`,\n            showError && 'form-input-group-error',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n        >\n          <input\n            aria-label={getTranslation(label, i18n) || path}\n            className={`form-input ${baseClass}__input`}\n            disabled={isReadOnly}\n            id={`field-${fieldPath?.replace(/\\./g, '__')}`}\n            name={fieldPath}\n            onChange={handleChange}\n            placeholder={getTranslation(placeholder, i18n)}\n            type=\"text\"\n            value={value || ''}\n          />\n\n          {!readOnlyFromProps && (\n            <div className={`${baseClass}__actions`}>\n              {!isLocked && (\n                <Button\n                  aria-label={t('authentication:generate')}\n                  buttonStyle=\"ghost\"\n                  className={`${baseClass}__action-btn`}\n                  icon={<RefreshIcon />}\n                  id={`field-${fieldPath?.replace(/\\./g, '__')}-generate`}\n                  margin={false}\n                  onClick={handleGenerate}\n                />\n              )}\n              <Button\n                aria-label={isLocked ? t('general:unlock') : t('general:lock')}\n                buttonStyle=\"ghost\"\n                className={`${baseClass}__action-btn`}\n                icon={isLocked ? <LockIcon size={16} /> : <LockOpenIcon size={16} />}\n                id={`field-${fieldPath?.replace(/\\./g, '__')}-lock`}\n                margin={false}\n                onClick={toggleLock}\n              />\n            </div>\n          )}\n        </div>\n\n        <FieldDescription description={description} path={fieldPath} />\n      </div>\n    </div>\n  )\n}\n\nexport const SlugField = withCondition(SlugFieldComponent)\n"],"mappings":"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","ignoreList":[]}

package/dist/fields/Tabs/index.d.ts

@@ -5,5 +5,5 @@ import './index.css';
 export { TabsProvider };
 export declare const TabsField: React.FC<import("payload").FieldPaths & {
     readonly field: Omit<import("payload").TabsFieldClient, "type"> & Partial<Pick<import("payload").TabsFieldClient, "type">>;
-} & Omit<ClientComponentProps, "field" | "customComponents">>;
+} & Omit<ClientComponentProps, "customComponents" | "field">>;
 //# sourceMappingURL=index.d.ts.map

package/dist/fields/Text/index.d.ts

@@ -10,5 +10,5 @@ export declare const TextField: React.FC<{
     readonly validate?: import("payload").TextFieldValidation;
 } & {
     readonly field: Omit<import("payload").TextFieldClient, "type"> & Partial<Pick<import("payload").TextFieldClient, "type">>;
-} & Omit<import("payload").ClientComponentProps, "field" | "customComponents">>;
+} & Omit<import("payload").ClientComponentProps, "customComponents" | "field">>;
 //# sourceMappingURL=index.d.ts.map

package/dist/fields/Text/types.d.ts

@@ -1,4 +1,4 @@
-import type { StaticDescription, StaticLabel } from 'payload';
+import type { BrowserAutoComplete, StaticDescription, StaticLabel } from 'payload';
 import type { ChangeEvent, JSX } from 'react';
 import type React from 'react';
 import type { Option, ReactSelectAdapterProps } from '../../elements/ReactSelect/types.js';
@@ -18,7 +18,7 @@ export type TextInputProps = {
     readonly Error?: React.ReactNode;
     readonly htmlAttributes?: {
         'aria-label'?: JSX.IntrinsicElements['input']['aria-label'];
-        autoComplete?: JSX.IntrinsicElements['input']['autoComplete'];
+        autoComplete?: BrowserAutoComplete;
         readOnly?: JSX.IntrinsicElements['input']['readOnly'];
     };
     /**

package/dist/fields/Text/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/fields/Text/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAC7D,OAAO,KAAK,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,MAAM,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAA;AAE1F,MAAM,MAAM,oBAAoB,GAC5B;IACE,QAAQ,CAAC,OAAO,CAAC,EAAE,KAAK,CAAA;IACxB,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;CAC/D,GACD;IACE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAA;IACvB,QAAQ,CAAC,QAAQ,CAAC,EAAE,uBAAuB,CAAC,UAAU,CAAC,CAAA;CACxD,CAAA;AAEL,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACrC,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,WAAW,CAAC,EAAE,iBAAiB,CAAA;IACxC,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,QAAQ,CAAC,cAAc,CAAC,EAAE;QACxB,YAAY,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAA;QAC3D,YAAY,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,cAAc,CAAC,CAAA;QAC7D,QAAQ,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC,CAAA;KACtD,CAAA;IACD;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IACrD,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,QAAQ,CAAC,KAAK,CAAC,EAAE,WAAW,CAAA;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAA;IACjE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IACtD,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,GAAG,CAAC,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B;;OAEG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAClC,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACpC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;CAClC,GAAG,oBAAoB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/fields/Text/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAClF,OAAO,KAAK,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,MAAM,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAA;AAE1F,MAAM,MAAM,oBAAoB,GAC5B;IACE,QAAQ,CAAC,OAAO,CAAC,EAAE,KAAK,CAAA;IACxB,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;CAC/D,GACD;IACE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAA;IACvB,QAAQ,CAAC,QAAQ,CAAC,EAAE,uBAAuB,CAAC,UAAU,CAAC,CAAA;CACxD,CAAA;AAEL,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACrC,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,WAAW,CAAC,EAAE,iBAAiB,CAAA;IACxC,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,QAAQ,CAAC,cAAc,CAAC,EAAE;QACxB,YAAY,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAA;QAC3D,YAAY,CAAC,EAAE,mBAAmB,CAAA;QAClC,QAAQ,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC,CAAA;KACtD,CAAA;IACD;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IACrD,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,QAAQ,CAAC,KAAK,CAAC,EAAE,WAAW,CAAA;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAA;IACjE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IACtD,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,GAAG,CAAC,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B;;OAEG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAClC,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACpC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;CAClC,GAAG,oBAAoB,CAAA"}

package/dist/fields/Text/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/fields/Text/types.ts"],"sourcesContent":["import type { StaticDescription, StaticLabel } from 'payload'\nimport type { ChangeEvent, JSX } from 'react'\nimport type React from 'react'\n\nimport type { Option, ReactSelectAdapterProps } from '../../elements/ReactSelect/types.js'\n\nexport type SharedTextFieldProps =\n  | {\n      readonly hasMany?: false\n      readonly onChange?: (e: ChangeEvent<HTMLInputElement>) => void\n    }\n  | {\n      readonly hasMany?: true\n      readonly onChange?: ReactSelectAdapterProps['onChange']\n    }\n\nexport type TextInputProps = {\n  readonly AfterInput?: React.ReactNode\n  readonly BeforeInput?: React.ReactNode\n  readonly className?: string\n  readonly Description?: React.ReactNode\n  readonly description?: StaticDescription\n  readonly Error?: React.ReactNode\n  readonly htmlAttributes?: {\n    'aria-label'?: JSX.IntrinsicElements['input']['aria-label']\n    autoComplete?: JSX.IntrinsicElements['input']['autoComplete']\n    readOnly?: JSX.IntrinsicElements['input']['readOnly']\n  }\n  /**\n   * Overrides the input `id` and label `htmlFor`. Defaults to 'field-' + path.\n   * Use to avoid duplicate IDs when two inputs share a path.\n   */\n  readonly id?: string\n  readonly inputRef?: React.RefObject<HTMLInputElement>\n  readonly Label?: React.ReactNode\n  readonly label?: StaticLabel\n  readonly localized?: boolean\n  readonly maxRows?: number\n  readonly minRows?: number\n  readonly onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>\n  readonly path: string\n  readonly placeholder?: Record<string, string> | string\n  readonly readOnly?: boolean\n  readonly required?: boolean\n  readonly rtl?: boolean\n  readonly showError?: boolean\n  /**\n   * Controls the height of the input. Defaults to `'large'`.\n   */\n  readonly size?: 'large' | 'medium'\n  readonly style?: React.CSSProperties\n  readonly value?: string\n  readonly valueToRender?: Option[]\n} & SharedTextFieldProps\n"],"mappings":"AAgBA","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/fields/Text/types.ts"],"sourcesContent":["import type { BrowserAutoComplete, StaticDescription, StaticLabel } from 'payload'\nimport type { ChangeEvent, JSX } from 'react'\nimport type React from 'react'\n\nimport type { Option, ReactSelectAdapterProps } from '../../elements/ReactSelect/types.js'\n\nexport type SharedTextFieldProps =\n  | {\n      readonly hasMany?: false\n      readonly onChange?: (e: ChangeEvent<HTMLInputElement>) => void\n    }\n  | {\n      readonly hasMany?: true\n      readonly onChange?: ReactSelectAdapterProps['onChange']\n    }\n\nexport type TextInputProps = {\n  readonly AfterInput?: React.ReactNode\n  readonly BeforeInput?: React.ReactNode\n  readonly className?: string\n  readonly Description?: React.ReactNode\n  readonly description?: StaticDescription\n  readonly Error?: React.ReactNode\n  readonly htmlAttributes?: {\n    'aria-label'?: JSX.IntrinsicElements['input']['aria-label']\n    autoComplete?: BrowserAutoComplete\n    readOnly?: JSX.IntrinsicElements['input']['readOnly']\n  }\n  /**\n   * Overrides the input `id` and label `htmlFor`. Defaults to 'field-' + path.\n   * Use to avoid duplicate IDs when two inputs share a path.\n   */\n  readonly id?: string\n  readonly inputRef?: React.RefObject<HTMLInputElement>\n  readonly Label?: React.ReactNode\n  readonly label?: StaticLabel\n  readonly localized?: boolean\n  readonly maxRows?: number\n  readonly minRows?: number\n  readonly onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>\n  readonly path: string\n  readonly placeholder?: Record<string, string> | string\n  readonly readOnly?: boolean\n  readonly required?: boolean\n  readonly rtl?: boolean\n  readonly showError?: boolean\n  /**\n   * Controls the height of the input. Defaults to `'large'`.\n   */\n  readonly size?: 'large' | 'medium'\n  readonly style?: React.CSSProperties\n  readonly value?: string\n  readonly valueToRender?: Option[]\n} & SharedTextFieldProps\n"],"mappings":"AAgBA","ignoreList":[]}

package/dist/fields/Textarea/index.d.ts

@@ -11,5 +11,5 @@ export declare const TextareaField: React.FC<{
     readonly validate?: TextareaFieldValidation;
 } & {
     readonly field: Omit<import("payload").TextareaFieldClient, "type"> & Partial<Pick<import("payload").TextareaFieldClient, "type">>;
-} & Omit<import("payload").ClientComponentProps, "field" | "customComponents">>;
+} & Omit<import("payload").ClientComponentProps, "customComponents" | "field">>;
 //# sourceMappingURL=index.d.ts.map

package/dist/fields/Upload/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/fields/Upload/Input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,sBAAsB,EACtB,qBAAqB,EACrB,mBAAmB,EAEnB,iBAAiB,EACjB,WAAW,EACX,iBAAiB,EACjB,WAAW,IAAI,eAAe,EAC9B,iBAAiB,EAClB,MAAM,SAAS,CAAA;AAChB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAKjD,OAAO,KAA0C,MAAM,OAAO,CAAA;AAqB9D,OAAO,aAAa,CAAA;AAGpB,eAAO,MAAM,SAAS,WAAW,CAAA;AAIjC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACrC,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAA;IAC9B;;OAEG;IACH,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,UAAU,CAAC,EAAE,sBAAsB,CAAA;IAC5C,QAAQ,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAChD,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,WAAW,CAAC,EAAE,iBAAiB,CAAA;IACxC,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAA;IACjC,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,QAAQ,CAAC,aAAa,CAAC,EAAE,mBAAmB,CAAA;IAC5C,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAA;IACjC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,QAAQ,CAAC,KAAK,CAAC,EAAE,WAAW,CAAA;IAC5B,QAAQ,CAAC,UAAU,CAAC,EAAE,qBAAqB,CAAC,YAAY,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC,CAAA;IACpF,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAA,KAAK,IAAI,CAAA;IAC/B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,UAAU,EAAE,eAAe,CAAC,YAAY,CAAC,CAAA;IAClD,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACpC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,GAAG,MAAM,GAAG,MAAM,GAAG,iBAAiB,GAAG,iBAAiB,EAAE,CAAA;CACjG,CAAA;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBA0sBlD"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/fields/Upload/Input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,sBAAsB,EACtB,qBAAqB,EACrB,mBAAmB,EAEnB,iBAAiB,EACjB,WAAW,EACX,iBAAiB,EACjB,WAAW,IAAI,eAAe,EAC9B,iBAAiB,EAClB,MAAM,SAAS,CAAA;AAChB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAKjD,OAAO,KAA0C,MAAM,OAAO,CAAA;AAwB9D,OAAO,aAAa,CAAA;AAGpB,eAAO,MAAM,SAAS,WAAW,CAAA;AAIjC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACrC,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAA;IAC9B;;OAEG;IACH,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,UAAU,CAAC,EAAE,sBAAsB,CAAA;IAC5C,QAAQ,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAChD,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,WAAW,CAAC,EAAE,iBAAiB,CAAA;IACxC,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAA;IACjC,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,QAAQ,CAAC,aAAa,CAAC,EAAE,mBAAmB,CAAA;IAC5C,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAA;IACjC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,QAAQ,CAAC,KAAK,CAAC,EAAE,WAAW,CAAA;IAC5B,QAAQ,CAAC,UAAU,CAAC,EAAE,qBAAqB,CAAC,YAAY,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC,CAAA;IACpF,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAA,KAAK,IAAI,CAAA;IAC/B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,UAAU,EAAE,eAAe,CAAC,YAAY,CAAC,CAAA;IAClD,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACpC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,GAAG,MAAM,GAAG,MAAM,GAAG,iBAAiB,GAAG,iBAAiB,EAAE,CAAA;CACjG,CAAA;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAqwBlD"}

package/dist/fields/Upload/Input.js

@@ -5,6 +5,7 @@ import { useModal } from '@faceless-ui/modal';
 import { formatAdminURL } from 'payload/shared';
 import * as qs from 'qs-esm';
 import React, { useCallback, useEffect, useMemo } from 'react';
+import { toast } from 'sonner';
 import { useBulkUpload } from '../../elements/BulkUpload/index.js';
 import { Button } from '../../elements/Button/index.js';
 import { useDocumentDrawer } from '../../elements/DocumentDrawer/index.js';
@@ -18,6 +19,8 @@ import { FieldLabel } from '../../fields/FieldLabel/index.js';
 import { useAuth } from '../../providers/Auth/index.js';
 import { useLocale } from '../../providers/Locale/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
+import { abortAndIgnore } from '../../utilities/abortAndIgnore.js';
+import { getFilesFromClipboard } from '../../utilities/getFilesFromClipboard.js';
 import { normalizeRelationshipValue } from '../../utilities/normalizeRelationshipValue.js';
 import { fieldBaseClass } from '../shared/index.js';
 import { UploadComponentHasMany } from './HasMany/index.js';
@@ -139,10 +142,6 @@ export function UploadInput(props) {
   }] = useDocumentDrawer({
     collectionSlug: activeRelationTo
   });
-  /**
-  * Track the last loaded value to prevent unnecessary reloads
-  */
-  const loadedValueRef = React.useRef(null);
   const canCreate = useMemo(() => {
     if (!allowCreate) {
       return false;
@@ -159,7 +158,7 @@ export function UploadInput(props) {
       onChangeFromProps(newValue);
     }
   }, [onChangeFromProps]);
-  const populateDocs = React.useCallback(async items => {
+  const populateDocs = React.useCallback(async (items, options) => {
     if (!items?.length) {
       return [];
     }
@@ -205,7 +204,8 @@ export function UploadInput(props) {
           'Content-Type': 'application/x-www-form-urlencoded',
           'X-Payload-HTTP-Method-Override': 'GET'
         },
-        method: 'POST'
+        method: 'POST',
+        signal: options?.signal
       });
       let docs = [];
       if (response.ok) {
@@ -298,7 +298,18 @@ export function UploadInput(props) {
     }
     openModal(drawerSlug);
   }, [hasMany, relationTo, activeRelationTo, setCollectionSlug, collectionSlugsWithCreatePermission, maxRows, openModal, drawerSlug, setInitialFiles, setSelectableCollections, setMaxFiles]);
-  // only hasMany can bulk select
+  const handlePasteFromClipboard = useCallback(async () => {
+    try {
+      const files = await getFilesFromClipboard();
+      if (!files) {
+        toast.error(t('error:noFileFoundInClipboard'));
+        return;
+      }
+      onLocalFileSelection(files);
+    } catch (_err) {
+      toast.error(t('error:unableToReadClipboard'));
+    }
+  }, [onLocalFileSelection, t]);
   const onListBulkSelect = React.useCallback(async (docs_0, collectionSlug) => {
     const isPoly_1 = Array.isArray(relationTo);
     const relationToUse = isPoly_1 ? collectionSlug || activeRelationTo : activeRelationTo;
@@ -308,23 +319,34 @@ export function UploadInput(props) {
         selectedDocIDs.push(id_0);
       }
     }
-    const itemsToLoad = selectedDocIDs.map(id_1 => ({
+    if (!selectedDocIDs.length) {
+      return;
+    }
+    // A single-value field only has room for one pick, so it takes the first and replaces rather
+    // than appending - otherwise confirming would hand a scalar field an array.
+    const idsToApply = hasMany ? selectedDocIDs : selectedDocIDs.slice(0, 1);
+    const itemsToLoad = idsToApply.map(id_1 => ({
       relationTo: relationToUse,
       value: id_1
     }));
     const loadedDocs = await populateDocs(itemsToLoad);
     if (loadedDocs) {
-      setPopulatedDocs(currentDocs_0 => [...(currentDocs_0 || []), ...loadedDocs]);
+      setPopulatedDocs(currentDocs_0 => hasMany ? [...(currentDocs_0 || []), ...loadedDocs] : loadedDocs);
     }
-    const newValues_0 = selectedDocIDs.map(id_2 => isPoly_1 ? {
+    const newValues_0 = idsToApply.map(id_2 => isPoly_1 ? {
       relationTo: relationToUse,
       value: id_2
     } : id_2);
+    if (!hasMany) {
+      onChange(newValues_0[0]);
+      closeListDrawer();
+      return;
+    }
     // Normalize existing values before merging
     const normalizedExisting_0 = Array.isArray(value) ? value.map(normalizeValue) : [];
     onChange([...normalizedExisting_0, ...newValues_0]);
     closeListDrawer();
-  }, [activeRelationTo, closeListDrawer, onChange, populateDocs, value, relationTo, normalizeValue]);
+  }, [activeRelationTo, closeListDrawer, hasMany, onChange, populateDocs, value, relationTo, normalizeValue]);
   const onDocCreate = React.useCallback(data_0 => {
     const isPoly_2 = Array.isArray(relationTo);
     if (data_0.doc) {
@@ -433,6 +455,7 @@ export function UploadInput(props) {
     setPopulatedDocs(newValue_4);
   }, [onChange, hasMany, relationTo]);
   useEffect(() => {
+    const abortController = new AbortController();
     async function loadInitialDocs() {
       if (value) {
         let itemsToLoad_0 = [];
@@ -469,23 +492,26 @@ export function UploadInput(props) {
           }
         }
         if (itemsToLoad_0.length > 0) {
-          const loadedDocs_1 = await populateDocs(itemsToLoad_0);
-          if (loadedDocs_1) {
-            setPopulatedDocs(loadedDocs_1);
-            loadedValueRef.current = value;
+          try {
+            const loadedDocs_1 = await populateDocs(itemsToLoad_0, {
+              signal: abortController.signal
+            });
+            if (loadedDocs_1 && !abortController.signal.aborted) {
+              setPopulatedDocs(loadedDocs_1);
+            }
+          } catch (_err_0) {
+            // Ignore aborted requests from superseded values / unmount
           }
         }
       } else {
         // Clear populated docs when value is cleared
         setPopulatedDocs([]);
-        loadedValueRef.current = null;
       }
     }
-    // Only load if value has changed from what we last loaded
-    const valueChanged = loadedValueRef.current !== value;
-    if (valueChanged) {
-      void loadInitialDocs();
-    }
+    void loadInitialDocs();
+    return () => {
+      abortAndIgnore(abortController);
+    };
   }, [populateDocs, value, relationTo]);
   useEffect(() => {
     setOnSuccess(onUploadSuccess);
@@ -579,11 +605,24 @@ export function UploadInput(props) {
                 onClick: openListDrawer,
                 size: "medium",
                 children: t('fields:chooseFromExisting')
+              }), canCreate && !readOnly && /*#__PURE__*/_jsxs(_Fragment, {
+                children: [/*#__PURE__*/_jsx("span", {
+                  className: `${baseClass}__dropzoneContent__orText`,
+                  children: t('general:or')
+                }), /*#__PURE__*/_jsx(Button, {
+                  buttonStyle: "secondary",
+                  className: `${baseClass}__pasteFromClipboard`,
+                  icon: "clipboard",
+                  onClick: handlePasteFromClipboard,
+                  size: "medium",
+                  tooltip: t('upload:pasteFromClipboard')
+                })]
               }), /*#__PURE__*/_jsx(CreateDocDrawer, {
                 onSave: onDocCreate
               }), /*#__PURE__*/_jsx(ListDrawer, {
                 allowCreate: canCreate,
-                enableRowSelections: hasMany,
+                // Single-value fields select too, so the drawer always has a Confirm action.
+                enableRowSelections: true,
                 onBulkSelect: onListBulkSelect,
                 onSelect: onListSelect
               })]