@payloadcms/ui 4.0.0-internal.d28e9fb → 4.0.0-internal.d3909a9

package/dist/fields/Slug/index.js

@@ -1,19 +1,21 @@
 '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';
 import { FieldLabel } from '../../fields/FieldLabel/index.js';
 import { useForm } from '../../forms/Form/index.js';
 import { useField } from '../../forms/useField/index.js';
+import { withCondition } from '../../forms/withCondition/index.js';
 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';
@@ -21,17 +23,15 @@ const baseClass = 'slug-field-component';
 /**
  * @experimental This component is experimental and may change or be removed in the future. Use at your own risk.
  */
-export const SlugField = t0 => {
-  const $ = _c(17);
-  const {
-    field,
-    path,
-    useAsSlug
-  } = t0;
+const SlugFieldComponent = ({
+  field,
+  path
+}) => {
   const {
     admin,
     label,
-    required
+    required,
+    useAsSlug
   } = field;
   const {
     description,
@@ -43,160 +43,123 @@ export const SlugField = 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 currentLocale = useLocale();
+  const locale = currentLocale?.code;
   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"),
-            buttonStyle: "icon-subtle",
+          children: [!isLocked && /*#__PURE__*/_jsx(Button, {
+            "aria-label": t('authentication:generate'),
+            buttonStyle: "ghost",
             className: `${baseClass}__action-btn`,
-            icon: _jsx(RefreshIcon, {}),
-            iconStyle: "none",
-            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"),
-            buttonStyle: "icon-subtle",
+          }), /*#__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
             }),
-            iconStyle: "none",
-            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
       })]
     })]
   });
 };
-function _temp(prev) {
-  return !prev;
-}
+export const SlugField = withCondition(SlugFieldComponent);
 //# 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","LockIcon","LockOpenIcon","RefreshIcon","useDocumentInfo","useServerFunctions","useTranslation","baseClass","SlugField","t0","$","field","path","useAsSlug","admin","label","required","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","iconStyle","margin","onClick","size","prev"],"sources":["../../../src/fields/Slug/index.tsx"],"sourcesContent":["'use client'\n\nimport type { SlugFieldClientProps } 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 { 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\n/**\n * @experimental This component is experimental and may change or be removed in the future. Use at your own risk.\n */\nexport const SlugField: React.FC<SlugFieldClientProps> = ({ field, path, useAsSlug }) => {\n  const { admin, label, required } = 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=\"icon-subtle\"\n                  className={`${baseClass}__action-btn`}\n                  icon={<RefreshIcon />}\n                  iconStyle=\"none\"\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=\"icon-subtle\"\n                className={`${baseClass}__action-btn`}\n                icon={isLocked ? <LockIcon size={16} /> : <LockOpenIcon size={16} />}\n                iconStyle=\"none\"\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"],"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","currentLocale","locale","code","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 currentLocale = useLocale()\n  const locale = currentLocale?.code\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":"AAAA;;;AAIA,SAASA,cAAc,QAAQ;AAC/B,OAAOC,KAAA,IAASC,WAAW,EAAEC,QAAQ,QAAQ;AAC7C,SAASC,KAAK,QAAQ;AAEtB,SAASC,MAAM,QAAQ;AACvB,SAASC,gBAAgB,QAAQ;AACjC,SAASC,UAAU,QAAQ;AAC3B,SAASC,UAAU,QAAQ;AAC3B,SAASC,OAAO,QAAQ;AACxB,SAASC,QAAQ,QAAQ;AACzB,SAASC,aAAa,QAAQ;AAC9B,SAASC,QAAQ,QAAQ;AACzB,SAASC,YAAY,QAAQ;AAC7B,SAASC,WAAW,QAAQ;AAC5B,SAASC,eAAe,QAAQ;AAChC,SAASC,SAAS,QAAQ;AAC1B,SAASC,kBAAkB,QAAQ;AACnC,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAOlB;;;AAGA,MAAMC,kBAAA,GAA+CA,CAAC;EAAEC,KAAK;EAAEC;AAAI,CAAE;EACnE,MAAM;IAAEC,KAAK;IAAEC,KAAK;IAAEC,QAAQ;IAAEC;EAAS,CAAE,GAAGL,KAAA;EAC9C,MAAM;IAAEM,WAAW;IAAEC,WAAW;IAAEC,QAAA,EAAUC;EAAiB,CAAE,GAAGP,KAAA,IAAS,CAAC;EAE5E,MAAM;IAAEQ,IAAI;IAAEC;EAAC,CAAE,GAAGd,cAAA;EAEpB,MAAM;IAAEe,EAAE;IAAEC,cAAc;IAAEC;EAAU,CAAE,GAAGpB,eAAA;EAE3C,MAAM;IAAEqB;EAAO,CAAE,GAAGnB,kBAAA;EAEpB,MAAMoB,aAAA,GAAgBrB,SAAA;EACtB,MAAMsB,MAAA,GAASD,aAAA,EAAeE,IAAA;EAE9B,MAAM;IACJjB,IAAA,EAAMkB,SAAS;IACfC,QAAQ;IACRC,SAAS;IACTC;EAAK,CACN,GAAGjC,QAAA,CAAiB;IAAEY,IAAA,EAAMA,IAAA,IAAQD,KAAA,CAAMuB;EAAK;EAEhD,MAAM;IAAEC,OAAO;IAAEC;EAAa,CAAE,GAAGrC,OAAA;EAEnC,MAAM,CAACsC,QAAA,EAAUC,WAAA,CAAY,GAAG7C,QAAA,CAAS;EAEzC;;;;EAIA,MAAM8C,cAAA,GAAiB/C,WAAA,CACrB,MAAOgD,CAAA;IACLA,CAAA,CAAEC,cAAc;IAEhB,MAAMC,cAAA,GAAiB1B,SAAA,GAAYoB,aAAA,CAAcpB,SAAA,IAAa2B,SAAA;IAE9D,IAAIC,aAAA;IAEJ,IAAI;MACFA,aAAA,GAAgB,MAAMlB,OAAA,CAAQ;QAC5BH,EAAA,EAAIA,EAAA,IAAMoB,SAAA;QACVnB,cAAA;QACAqB,IAAA,EAAMV,OAAA;QACNV,UAAA;QACAG,MAAA;QACAhB,IAAA,EAAMkB,SAAA;QACNY;MACF;IACF,EAAE,OAAOI,IAAA,EAAM;MACbpD,KAAA,CAAMqD,KAAK,CAACzB,CAAA,CAAE;MACd;IACF;IAEA;IACA;IACA,IAAIsB,aAAA,KAAkB,QAAQA,aAAA,KAAkBD,SAAA,IAAaC,aAAA,KAAkB,IAAI;MACjF;IACF;IAEA;;;IAGA,IAAIX,KAAA,KAAUW,aAAA,EAAe;MAC3Bb,QAAA,CAASa,aAAA;IACX;EACF,GACA,CACEb,QAAA,EACAE,KAAA,EACAjB,SAAA,EACAmB,OAAA,EACAT,OAAA,EACAU,aAAA,EACAb,EAAA,EACAC,cAAA,EACAC,UAAA,EACAG,MAAA,EACAE,SAAA,EACAR,CAAA,CACD;EAGH,MAAM0B,UAAA,GAAaxD,WAAA,CAAagD,GAAA;IAC9BA,GAAA,CAAEC,cAAc;IAChBH,WAAA,CAAaW,IAAA,IAAS,CAACA,IAAA;EACzB,GAAG,EAAE;EAEL,MAAMC,YAAA,GAAe1D,WAAA,CAClBgD,GAAA;IACCT,QAAA,CAASS,GAAA,CAAEW,MAAM,CAAClB,KAAK;EACzB,GACA,CAACF,QAAA,CAAS;EAGZ,MAAMqB,UAAA,GAAaC,OAAA,CAAQjC,iBAAA,IAAqBiB,QAAA;EAEhD,oBACEiB,KAAA,CAAC;IACCC,SAAA,EAAW,CACT,cACA9C,SAAA,EACAuB,SAAA,IAAa,GAAGvB,SAAA,SAAkB,EAClC4B,QAAA,IAAY,GAAG5B,SAAA,UAAmB,EAClCW,iBAAA,IAAqB,GAAGX,SAAA,aAAsB,CAC/C,CACE+C,MAAM,CAACH,OAAA,EACPI,IAAI,CAAC;4BAERC,IAAA,CAAC5D,UAAA;MAAW6D,OAAA,EAAS,SAAS7B,SAAA,EAAW;MAAEhB,KAAA,EAAOA,KAAA;MAAOC,QAAA,EAAUA;qBACnEuC,KAAA,CAAC;MAAIC,SAAA,EAAW,GAAG9C,SAAA,QAAiB;8BAClCiD,IAAA,CAAC7D,UAAA;QAAWe,IAAA,EAAMkB,SAAA;QAAWE,SAAA,EAAWA;uBAExCsB,KAAA,CAAC;QACCC,SAAA,EAAW,CACT,oBACA,GAAG9C,SAAA,mBAA4B,EAC/BuB,SAAA,IAAa,yBACd,CACEwB,MAAM,CAACH,OAAA,EACPI,IAAI,CAAC;gCAERC,IAAA,CAAC;UACC,cAAYpE,cAAA,CAAewB,KAAA,EAAOO,IAAA,KAAST,IAAA;UAC3C2C,SAAA,EAAW,cAAc9C,SAAA,SAAkB;UAC3CmD,QAAA,EAAUR,UAAA;UACV7B,EAAA,EAAI,SAASO,SAAA,EAAW+B,OAAA,CAAQ,OAAO,OAAO;UAC9C3B,IAAA,EAAMJ,SAAA;UACNgC,QAAA,EAAUZ,YAAA;UACVhC,WAAA,EAAa5B,cAAA,CAAe4B,WAAA,EAAaG,IAAA;UACzC0C,IAAA,EAAK;UACL9B,KAAA,EAAOA,KAAA,IAAS;YAGjB,CAACb,iBAAA,iBACAkC,KAAA,CAAC;UAAIC,SAAA,EAAW,GAAG9C,SAAA,WAAoB;qBACpC,CAAC4B,QAAA,iBACAqB,IAAA,CAAC/D,MAAA;YACC,cAAY2B,CAAA,CAAE;YACd0C,WAAA,EAAY;YACZT,SAAA,EAAW,GAAG9C,SAAA,cAAuB;YACrCwD,IAAA,eAAMP,IAAA,CAACtD,WAAA;YACPmB,EAAA,EAAI,SAASO,SAAA,EAAW+B,OAAA,CAAQ,OAAO,gBAAgB;YACvDK,MAAA,EAAQ;YACRC,OAAA,EAAS5B;2BAGbmB,IAAA,CAAC/D,MAAA;YACC,cAAY0C,QAAA,GAAWf,CAAA,CAAE,oBAAoBA,CAAA,CAAE;YAC/C0C,WAAA,EAAY;YACZT,SAAA,EAAW,GAAG9C,SAAA,cAAuB;YACrCwD,IAAA,EAAM5B,QAAA,gBAAWqB,IAAA,CAACxD,QAAA;cAASkE,IAAA,EAAM;8BAASV,IAAA,CAACvD,YAAA;cAAaiE,IAAA,EAAM;;YAC9D7C,EAAA,EAAI,SAASO,SAAA,EAAW+B,OAAA,CAAQ,OAAO,YAAY;YACnDK,MAAA,EAAQ;YACRC,OAAA,EAASnB;;;uBAMjBU,IAAA,CAAC9D,gBAAA;QAAiBqB,WAAA,EAAaA,WAAA;QAAaL,IAAA,EAAMkB;;;;AAI1D;AAEA,OAAO,MAAMuC,SAAA,GAAYpE,aAAA,CAAcS,kBAAA","ignoreList":[]}

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

@@ -1,9 +1,10 @@
 import type { ClientTab } from 'payload';
 import React from 'react';
-import './index.css';
 type TabProps = {
     readonly hidden?: boolean;
+    readonly id?: string;
     readonly isActive?: boolean;
+    readonly panelID?: string;
     readonly parentPath: string;
     readonly setIsActive: () => void;
     readonly tab: ClientTab;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/fields/Tabs/Tab/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAIxC,OAAO,KAAmB,MAAM,OAAO,CAAA;AAKvC,OAAO,aAAa,CAAA;AAIpB,KAAK,QAAQ,GAAG;IACd,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,WAAW,EAAE,MAAM,IAAI,CAAA;IAChC,QAAQ,CAAC,GAAG,EAAE,SAAS,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAsC3C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/fields/Tabs/Tab/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAIxC,OAAO,KAAmB,MAAM,OAAO,CAAA;AAUvC,KAAK,QAAQ,GAAG;IACd,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,WAAW,EAAE,MAAM,IAAI,CAAA;IAChC,QAAQ,CAAC,GAAG,EAAE,SAAS,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAwC3C,CAAA"}

package/dist/fields/Tabs/Tab/index.js

@@ -6,15 +6,18 @@ import { getTranslation } from '@payloadcms/translations';
 import { tabHasName } from 'payload/shared';
 import React, { useState } from 'react';
 import { ErrorPill } from '../../../elements/ErrorPill/index.js';
+import { TabButton } from '../../../elements/Tabs/index.js';
+import { useFormInitializing } from '../../../forms/Form/context.js';
 import { WatchChildErrors } from '../../../forms/WatchChildErrors/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
-import './index.css';
 const baseClass = 'tabs-field__tab-button';
 export const TabComponent = t0 => {
-  const $ = _c(12);
+  const $ = _c(11);
   const {
+    id,
     hidden,
     isActive,
+    panelID,
     parentPath,
     setIsActive,
     tab
@@ -22,34 +25,27 @@ export const TabComponent = t0 => {
   const {
     i18n
   } = useTranslation();
+  const isInitializing = useFormInitializing();
   const [errorCount, setErrorCount] = useState(undefined);
   let t1;
-  if ($[0] !== errorCount || $[1] !== hidden || $[2] !== i18n || $[3] !== isActive || $[4] !== parentPath || $[5] !== setIsActive || $[6] !== tab) {
+  if ($[0] !== errorCount || $[1] !== hidden || $[2] !== i18n || $[3] !== id || $[4] !== isActive || $[5] !== isInitializing || $[6] !== panelID || $[7] !== parentPath || $[8] !== setIsActive || $[9] !== tab) {
     const path = [...(parentPath ? parentPath.split(".").slice(0, -1) : []), ...(tabHasName(tab) ? [tab.name] : [])];
     const fieldHasErrors = errorCount > 0;
-    const t2 = _jsx(WatchChildErrors, {
-      fields: tab.fields,
-      path,
-      setErrorCount
-    });
-    const t3 = fieldHasErrors && `${baseClass}--has-error`;
-    const t4 = isActive && `${baseClass}--active`;
-    const t5 = hidden && `${baseClass}--hidden`;
-    let t6;
-    if ($[8] !== t3 || $[9] !== t4 || $[10] !== t5) {
-      t6 = [baseClass, t3, t4, t5].filter(Boolean);
-      $[8] = t3;
-      $[9] = t4;
-      $[10] = t5;
-      $[11] = t6;
-    } else {
-      t6 = $[11];
-    }
     t1 = _jsxs(React.Fragment, {
-      children: [t2, _jsxs("button", {
-        className: t6.join(" "),
+      children: [_jsx(WatchChildErrors, {
+        fields: tab.fields,
+        path,
+        setErrorCount
+      }), _jsxs(TabButton, {
+        className: baseClass,
+        disabled: isInitializing,
+        hasError: fieldHasErrors,
+        hidden,
+        id,
+        isActive,
+        modifierClassName: baseClass,
         onClick: setIsActive,
-        type: "button",
+        panelID,
         children: [tab.label ? getTranslation(tab.label, i18n) : tabHasName(tab) ? tab.name : "", fieldHasErrors && _jsx(ErrorPill, {
           count: errorCount,
           i18n
@@ -59,13 +55,16 @@ export const TabComponent = t0 => {
     $[0] = errorCount;
     $[1] = hidden;
     $[2] = i18n;
-    $[3] = isActive;
-    $[4] = parentPath;
-    $[5] = setIsActive;
-    $[6] = tab;
-    $[7] = t1;
+    $[3] = id;
+    $[4] = isActive;
+    $[5] = isInitializing;
+    $[6] = panelID;
+    $[7] = parentPath;
+    $[8] = setIsActive;
+    $[9] = tab;
+    $[10] = t1;
   } else {
-    t1 = $[7];
+    t1 = $[10];
   }
   return t1;
 };

package/dist/fields/Tabs/Tab/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","getTranslation","tabHasName","React","useState","ErrorPill","WatchChildErrors","useTranslation","baseClass","TabComponent","t0","$","hidden","isActive","parentPath","setIsActive","tab","i18n","errorCount","setErrorCount","undefined","t1","path","split","slice","name","fieldHasErrors","t2","_jsx","fields","t3","t4","t5","t6","filter","Boolean","_jsxs","Fragment","children","className","join","onClick","type","label","count"],"sources":["../../../../src/fields/Tabs/Tab/index.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientTab } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { tabHasName } from 'payload/shared'\nimport React, { useState } from 'react'\n\nimport { ErrorPill } from '../../../elements/ErrorPill/index.js'\nimport { WatchChildErrors } from '../../../forms/WatchChildErrors/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'tabs-field__tab-button'\n\ntype TabProps = {\n  readonly hidden?: boolean\n  readonly isActive?: boolean\n  readonly parentPath: string\n  readonly setIsActive: () => void\n  readonly tab: ClientTab\n}\n\nexport const TabComponent: React.FC<TabProps> = ({\n  hidden,\n  isActive,\n  parentPath,\n  setIsActive,\n  tab,\n}) => {\n  const { i18n } = useTranslation()\n  const [errorCount, setErrorCount] = useState(undefined)\n\n  const path = [\n    // removes parent 'tabs' path segment, i.e. `_index-0`\n    ...(parentPath ? parentPath.split('.').slice(0, -1) : []),\n    ...(tabHasName(tab) ? [tab.name] : []),\n  ]\n\n  const fieldHasErrors = errorCount > 0\n\n  return (\n    <React.Fragment>\n      <WatchChildErrors fields={tab.fields} path={path} setErrorCount={setErrorCount} />\n      <button\n        className={[\n          baseClass,\n          fieldHasErrors && `${baseClass}--has-error`,\n          isActive && `${baseClass}--active`,\n          hidden && `${baseClass}--hidden`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        onClick={setIsActive}\n        type=\"button\"\n      >\n        {tab.label ? getTranslation(tab.label, i18n) : tabHasName(tab) ? tab.name : ''}\n        {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} />}\n      </button>\n    </React.Fragment>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,SAASC,cAAc,QAAQ;AAC/B,SAASC,UAAU,QAAQ;AAC3B,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,SAAS,QAAQ;AAC1B,SAASC,gBAAgB,QAAQ;AACjC,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAUlB,OAAO,MAAMC,YAAA,GAAmCC,EAAA;EAAA,MAAAC,CAAA,GAAAX,EAAA;EAAC;IAAAY,MAAA;IAAAC,QAAA;IAAAC,UAAA;IAAAC,WAAA;IAAAC;EAAA,IAAAN,EAMhD;EACC;IAAAO;EAAA,IAAiBV,cAAA;EACjB,OAAAW,UAAA,EAAAC,aAAA,IAAoCf,QAAA,CAAAgB,SAAS;EAAA,IAAAC,EAAA;EAAA,IAAAV,CAAA,QAAAO,UAAA,IAAAP,CAAA,QAAAC,MAAA,IAAAD,CAAA,QAAAM,IAAA,IAAAN,CAAA,QAAAE,QAAA,IAAAF,CAAA,QAAAG,UAAA,IAAAH,CAAA,QAAAI,WAAA,IAAAJ,CAAA,QAAAK,GAAA;IAE7C,MAAAM,IAAA,QAEMR,UAAA,GAAaA,UAAA,CAAAS,KAAA,CAAiB,KAAAC,KAAA,MAAe,MAAO,OACpDtB,UAAA,CAAWc,GAAA,KAAQA,GAAA,CAAAS,IAAA,MAAc;IAGvC,MAAAC,cAAA,GAAuBR,UAAA,IAAa;IAIhC,MAAAS,EAAA,GAAAC,IAAA,CAAAtB,gBAAA;MAAAuB,MAAA,EAA0Bb,GAAA,CAAAa,MAAA;MAAAP,IAAA;MAAAH;IAAA,C;IAItB,MAAAW,EAAA,GAAAJ,cAAA,IAAkB,GAAAlB,SAAA,aAAyB;IAC3C,MAAAuB,EAAA,GAAAlB,QAAA,IAAY,GAAAL,SAAA,UAAsB;IAClC,MAAAwB,EAAA,GAAApB,MAAA,IAAU,GAAAJ,SAAA,UAAsB;IAAA,IAAAyB,EAAA;IAAA,IAAAtB,CAAA,QAAAmB,EAAA,IAAAnB,CAAA,QAAAoB,EAAA,IAAApB,CAAA,SAAAqB,EAAA;MAJvBC,EAAA,IAAAzB,SAAA,EAETsB,EAA2C,EAC3CC,EAAkC,EAClCC,EAAgC,EAAAE,MAAA,CAAAC,OAExB;MAAAxB,CAAA,MAAAmB,EAAA;MAAAnB,CAAA,MAAAoB,EAAA;MAAApB,CAAA,OAAAqB,EAAA;MAAArB,CAAA,OAAAsB,EAAA;IAAA;MAAAA,EAAA,GAAAtB,CAAA;IAAA;IATdU,EAAA,GAAAe,KAAA,CAAAjC,KAAA,CAAAkC,QAAA;MAAAC,QAAA,GACEX,E,EACAS,KAAA,CAAC;QAAAG,SAAA,EACYN,EAMD,CAAAO,IAAA,CACF;QAAAC,OAAA,EACC1B,WAAA;QAAA2B,IAAA,EACJ;QAAAJ,QAAA,GAEJtB,GAAA,CAAA2B,KAAA,GAAY1C,cAAA,CAAee,GAAA,CAAA2B,KAAA,EAAW1B,IAAA,IAAQf,UAAA,CAAWc,GAAA,IAAOA,GAAA,CAAAS,IAAA,GAAW,IAC3EC,cAAA,IAAkBE,IAAA,CAAAvB,SAAA;UAAAuC,KAAA,EAAkB1B,UAAA;UAAAD;QAAA,C;;;;;;;;;;;;;;SAfzCI,E;CAmBJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","tabHasName","React","useState","ErrorPill","TabButton","useFormInitializing","WatchChildErrors","useTranslation","baseClass","TabComponent","t0","$","id","hidden","isActive","panelID","parentPath","setIsActive","tab","i18n","isInitializing","errorCount","setErrorCount","undefined","t1","path","split","slice","name","fieldHasErrors","_jsxs","Fragment","children","_jsx","fields","className","disabled","hasError","modifierClassName","onClick","label","count"],"sources":["../../../../src/fields/Tabs/Tab/index.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientTab } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { tabHasName } from 'payload/shared'\nimport React, { useState } from 'react'\n\nimport { ErrorPill } from '../../../elements/ErrorPill/index.js'\nimport { TabButton } from '../../../elements/Tabs/index.js'\nimport { useFormInitializing } from '../../../forms/Form/context.js'\nimport { WatchChildErrors } from '../../../forms/WatchChildErrors/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\n\nconst baseClass = 'tabs-field__tab-button'\n\ntype TabProps = {\n  readonly hidden?: boolean\n  readonly id?: string\n  readonly isActive?: boolean\n  readonly panelID?: string\n  readonly parentPath: string\n  readonly setIsActive: () => void\n  readonly tab: ClientTab\n}\n\nexport const TabComponent: React.FC<TabProps> = ({\n  id,\n  hidden,\n  isActive,\n  panelID,\n  parentPath,\n  setIsActive,\n  tab,\n}) => {\n  const { i18n } = useTranslation()\n  const isInitializing = useFormInitializing()\n  const [errorCount, setErrorCount] = useState(undefined)\n\n  const path = [\n    // removes parent 'tabs' path segment, i.e. `_index-0`\n    ...(parentPath ? parentPath.split('.').slice(0, -1) : []),\n    ...(tabHasName(tab) ? [tab.name] : []),\n  ]\n\n  const fieldHasErrors = errorCount > 0\n\n  return (\n    <React.Fragment>\n      <WatchChildErrors fields={tab.fields} path={path} setErrorCount={setErrorCount} />\n      <TabButton\n        className={baseClass}\n        disabled={isInitializing}\n        hasError={fieldHasErrors}\n        hidden={hidden}\n        id={id}\n        isActive={isActive}\n        modifierClassName={baseClass}\n        onClick={setIsActive}\n        panelID={panelID}\n      >\n        {tab.label ? getTranslation(tab.label, i18n) : tabHasName(tab) ? tab.name : ''}\n        {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} />}\n      </TabButton>\n    </React.Fragment>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,SAASC,cAAc,QAAQ;AAC/B,SAASC,UAAU,QAAQ;AAC3B,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,SAAS,QAAQ;AAC1B,SAASC,SAAS,QAAQ;AAC1B,SAASC,mBAAmB,QAAQ;AACpC,SAASC,gBAAgB,QAAQ;AACjC,SAASC,cAAc,QAAQ;AAE/B,MAAMC,SAAA,GAAY;AAYlB,OAAO,MAAMC,YAAA,GAAmCC,EAAA;EAAA,MAAAC,CAAA,GAAAb,EAAA;EAAC;IAAAc,EAAA;IAAAC,MAAA;IAAAC,QAAA;IAAAC,OAAA;IAAAC,UAAA;IAAAC,WAAA;IAAAC;EAAA,IAAAR,EAQhD;EACC;IAAAS;EAAA,IAAiBZ,cAAA;EACjB,MAAAa,cAAA,GAAuBf,mBAAA;EACvB,OAAAgB,UAAA,EAAAC,aAAA,IAAoCpB,QAAA,CAAAqB,SAAS;EAAA,IAAAC,EAAA;EAAA,IAAAb,CAAA,QAAAU,UAAA,IAAAV,CAAA,QAAAE,MAAA,IAAAF,CAAA,QAAAQ,IAAA,IAAAR,CAAA,QAAAC,EAAA,IAAAD,CAAA,QAAAG,QAAA,IAAAH,CAAA,QAAAS,cAAA,IAAAT,CAAA,QAAAI,OAAA,IAAAJ,CAAA,QAAAK,UAAA,IAAAL,CAAA,QAAAM,WAAA,IAAAN,CAAA,QAAAO,GAAA;IAE7C,MAAAO,IAAA,QAEMT,UAAA,GAAaA,UAAA,CAAAU,KAAA,CAAiB,KAAAC,KAAA,MAAe,MAAO,OACpD3B,UAAA,CAAWkB,GAAA,KAAQA,GAAA,CAAAU,IAAA,MAAc;IAGvC,MAAAC,cAAA,GAAuBR,UAAA,IAAa;IAGlCG,EAAA,GAAAM,KAAA,CAAA7B,KAAA,CAAA8B,QAAA;MAAAC,QAAA,GACEC,IAAA,CAAA3B,gBAAA;QAAA4B,MAAA,EAA0BhB,GAAA,CAAAgB,MAAA;QAAAT,IAAA;QAAAH;MAAA,C,GAC1BQ,KAAA,CAAA1B,SAAA;QAAA+B,SAAA,EAAA3B,SAAA;QAAA4B,QAAA,EAEYhB,cAAA;QAAAiB,QAAA,EACAR,cAAA;QAAAhB,MAAA;QAAAD,EAAA;QAAAE,QAAA;QAAAwB,iBAAA,EAAA9B,SAAA;QAAA+B,OAAA,EAKDtB,WAAA;QAAAF,OAAA;QAAAiB,QAAA,GAGRd,GAAA,CAAAsB,KAAA,GAAYzC,cAAA,CAAemB,GAAA,CAAAsB,KAAA,EAAWrB,IAAA,IAAQnB,UAAA,CAAWkB,GAAA,IAAOA,GAAA,CAAAU,IAAA,GAAW,IAC3EC,cAAA,IAAkBI,IAAA,CAAA9B,SAAA;UAAAsC,KAAA,EAAkBpB,UAAA;UAAAF;QAAA,C;;;;;;;;;;;;;;;;;SAdzCK,E;CAkBJ","ignoreList":[]}

package/dist/fields/Tabs/index.css

@@ -1,8 +1,8 @@
 @layer payload-default {
   .tabs-field {
     margin-top: var(--spacer-6);
-    margin-left: calc(var(--gutter-h) * -1);
-    margin-right: calc(var(--gutter-h) * -1);
+    margin-inline-start: calc(var(--gutter-h) * -1 * var(--field-border-bleed, 1));
+    margin-inline-end: calc(var(--gutter-h) * -1 * var(--field-border-bleed, 1));
   }
 
   .tabs-field--hidden {
@@ -10,24 +10,24 @@
   }
 
   .tabs-field__content-wrap {
-    padding-left: var(--gutter-h);
-    padding-right: var(--gutter-h);
+    padding-inline-start: calc(var(--gutter-h) * var(--field-border-bleed, 1));
+    padding-inline-end: calc(var(--gutter-h) * var(--field-border-bleed, 1));
   }
 
   .tabs-field--within-collapsible {
-    margin: 0 calc(var(--spacer-3) * -1);
+    margin: 0 calc(var(--spacer-3) * -1 * var(--field-border-bleed, 1));
 
     .tabs-field__content-wrap {
-      padding-left: var(--spacer-3);
-      padding-right: var(--spacer-3);
+      padding-inline-start: calc(var(--spacer-3) * var(--field-border-bleed, 1));
+      padding-inline-end: calc(var(--spacer-3) * var(--field-border-bleed, 1));
     }
 
     .tabs-field__tabs {
       &:before,
       &:after {
         content: ' ';
-        display: block;
-        width: var(--spacer-2);
+        display: var(--field-tabs-edge-display, block);
+        width: calc(var(--spacer-2) * var(--field-border-bleed, 1));
       }
     }
   }
@@ -46,13 +46,13 @@
     vertical-align: bottom;
     position: relative;
     z-index: 1;
-    box-shadow: inset 0px -1px var(--border-default-default);
+    box-shadow: inset 0px -1px var(--color-border);
 
     &:before,
     &:after {
       content: ' ';
-      display: block;
-      width: calc(var(--gutter-h) - var(--spacer-2));
+      display: var(--field-tabs-edge-display, block);
+      width: max(0px, calc(var(--gutter-h) * var(--field-border-bleed, 1) - var(--spacer-2)));
       flex-shrink: 0;
     }
   }
@@ -62,13 +62,14 @@
   }
 
   .tabs-field__description {
-    margin-bottom: var(--spacer-4);
+    margin-bottom: var(--spacer-6);
   }
 
+  /* 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) {
     .tabs-field--within-collapsible {
-      margin-left: calc(var(--gutter-h) * -1);
-      margin-right: calc(var(--gutter-h) * -1);
+      margin-inline-start: calc(var(--gutter-h) * -1 * var(--field-border-bleed, 1));
+      margin-inline-end: calc(var(--gutter-h) * -1 * var(--field-border-bleed, 1));
     }
   }
 }

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

@@ -1,9 +1,7 @@
-import type { ClientComponentProps } from 'payload';
+import type { TabsFieldClientProps } from 'payload';
 import React from 'react';
 import { TabsProvider } from './provider.js';
 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, "customComponents" | "field">>;
+export declare const TabsField: React.FC<TabsFieldClientProps>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Tabs/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,oBAAoB,EAMrB,MAAM,SAAS,CAAA;AAIhB,OAAO,KAA2C,MAAM,OAAO,CAAA;AAa/D,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAE5C,OAAO,aAAa,CAAA;AAIpB,OAAO,EAAE,YAAY,EAAE,CAAA;AAuKvB,eAAO,MAAM,SAAS;;6DAAoC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Tabs/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAMV,oBAAoB,EACrB,MAAM,SAAS,CAAA;AAIhB,OAAO,KAAkD,MAAM,OAAO,CAAA;AActE,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAE5C,OAAO,aAAa,CAAA;AAIpB,OAAO,EAAE,YAAY,EAAE,CAAA;AA+LvB,eAAO,MAAM,SAAS,gCAAoC,CAAA"}