@payloadcms/ui 4.0.0-internal.e7d4ebc → 4.0.0-internal.ec73d44

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useCallback","useState","toast","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","t4","error","undefined","handleGenerate","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'\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 { 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      let formattedSlug: null | string | undefined\n\n      try {\n        formattedSlug = await slugify({\n          collectionSlug,\n          data: getData(),\n          globalSlug,\n          path: fieldPath,\n          valueToSlugify,\n        })\n      } catch (_err) {\n        toast.error(t('error:unspecific'))\n        return\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      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":[]}
+{"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

@@ -2,7 +2,9 @@ import type { ClientTab } from 'payload';
 import React from 'react';
 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;AAUvC,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,CAoC3C,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

@@ -12,10 +12,12 @@ import { WatchChildErrors } from '../../../forms/WatchChildErrors/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
 const baseClass = 'tabs-field__tab-button';
 export const TabComponent = t0 => {
-  const $ = _c(9);
+  const $ = _c(11);
   const {
+    id,
     hidden,
     isActive,
+    panelID,
     parentPath,
     setIsActive,
     tab
@@ -26,7 +28,7 @@ export const TabComponent = t0 => {
   const isInitializing = useFormInitializing();
   const [errorCount, setErrorCount] = useState(undefined);
   let t1;
-  if ($[0] !== errorCount || $[1] !== hidden || $[2] !== i18n || $[3] !== isActive || $[4] !== isInitializing || $[5] !== parentPath || $[6] !== setIsActive || $[7] !== 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;
     t1 = _jsxs(React.Fragment, {
@@ -39,9 +41,11 @@ export const TabComponent = t0 => {
         disabled: isInitializing,
         hasError: fieldHasErrors,
         hidden,
+        id,
         isActive,
         modifierClassName: baseClass,
         onClick: setIsActive,
+        panelID,
         children: [tab.label ? getTranslation(tab.label, i18n) : tabHasName(tab) ? tab.name : "", fieldHasErrors && _jsx(ErrorPill, {
           count: errorCount,
           i18n
@@ -51,14 +55,16 @@ export const TabComponent = t0 => {
     $[0] = errorCount;
     $[1] = hidden;
     $[2] = i18n;
-    $[3] = isActive;
-    $[4] = isInitializing;
-    $[5] = parentPath;
-    $[6] = setIsActive;
-    $[7] = tab;
-    $[8] = t1;
+    $[3] = id;
+    $[4] = isActive;
+    $[5] = isInitializing;
+    $[6] = panelID;
+    $[7] = parentPath;
+    $[8] = setIsActive;
+    $[9] = tab;
+    $[10] = t1;
   } else {
-    t1 = $[8];
+    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","TabButton","useFormInitializing","WatchChildErrors","useTranslation","baseClass","TabComponent","t0","$","hidden","isActive","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 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 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        isActive={isActive}\n        modifierClassName={baseClass}\n        onClick={setIsActive}\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;AAUlB,OAAO,MAAMC,YAAA,GAAmCC,EAAA;EAAA,MAAAC,CAAA,GAAAb,EAAA;EAAC;IAAAc,MAAA;IAAAC,QAAA;IAAAC,UAAA;IAAAC,WAAA;IAAAC;EAAA,IAAAN,EAMhD;EACC;IAAAO;EAAA,IAAiBV,cAAA;EACjB,MAAAW,cAAA,GAAuBb,mBAAA;EACvB,OAAAc,UAAA,EAAAC,aAAA,IAAoClB,QAAA,CAAAmB,SAAS;EAAA,IAAAC,EAAA;EAAA,IAAAX,CAAA,QAAAQ,UAAA,IAAAR,CAAA,QAAAC,MAAA,IAAAD,CAAA,QAAAM,IAAA,IAAAN,CAAA,QAAAE,QAAA,IAAAF,CAAA,QAAAO,cAAA,IAAAP,CAAA,QAAAG,UAAA,IAAAH,CAAA,QAAAI,WAAA,IAAAJ,CAAA,QAAAK,GAAA;IAE7C,MAAAO,IAAA,QAEMT,UAAA,GAAaA,UAAA,CAAAU,KAAA,CAAiB,KAAAC,KAAA,MAAe,MAAO,OACpDzB,UAAA,CAAWgB,GAAA,KAAQA,GAAA,CAAAU,IAAA,MAAc;IAGvC,MAAAC,cAAA,GAAuBR,UAAA,IAAa;IAGlCG,EAAA,GAAAM,KAAA,CAAA3B,KAAA,CAAA4B,QAAA;MAAAC,QAAA,GACEC,IAAA,CAAAzB,gBAAA;QAAA0B,MAAA,EAA0BhB,GAAA,CAAAgB,MAAA;QAAAT,IAAA;QAAAH;MAAA,C,GAC1BQ,KAAA,CAAAxB,SAAA;QAAA6B,SAAA,EAAAzB,SAAA;QAAA0B,QAAA,EAEYhB,cAAA;QAAAiB,QAAA,EACAR,cAAA;QAAAf,MAAA;QAAAC,QAAA;QAAAuB,iBAAA,EAAA5B,SAAA;QAAA6B,OAAA,EAIDtB,WAAA;QAAAe,QAAA,GAERd,GAAA,CAAAsB,KAAA,GAAYvC,cAAA,CAAeiB,GAAA,CAAAsB,KAAA,EAAWrB,IAAA,IAAQjB,UAAA,CAAWgB,GAAA,IAAOA,GAAA,CAAAU,IAAA,GAAW,IAC3EC,cAAA,IAAkBI,IAAA,CAAA5B,SAAA;UAAAoC,KAAA,EAAkBpB,UAAA;UAAAF;QAAA,C;;;;;;;;;;;;;;;SAZzCK,E;CAgBJ","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,CAASqB,SAAA;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,GAAa,KAEPT,UAAA,GAAaA,UAAA,CAAAU,KAAgB,CAAC,KAAAC,KAAU,CAAC,GAAG,EAAM,CAAE,GAApD,EAAoD,OACpD3B,UAAA,CAAWkB,GAAoB,CAAE,GAAjC,CAAmBA,GAAA,CAAAU,IAAQ,CAAM,GAAjC,EAAiC,EACtC;IAED,MAAAC,cAAA,GAAuBR,UAAA,GAAa;IAGlCG,EAAA,GAAAM,KAAA,CAAC7B,KAAA,CAAA8B,QAAc;MAAAC,QAAA,E,CACbC,IAAA,CAAC3B,gBAAA;QAAA4B,MAAA,EAAyBhB,GAAA,CAAAgB,MAAU;QAAAT,IAAA;QAAAH;UACpCQ,KAAA,CAAC1B,SAAA;QAAA+B,SAAA,EACY3B,SAAA;QAAA4B,QAAA,EACDhB,cAAA;QAAAiB,QAAA,EACAR,cAAA;QAAAhB,MAAA;QAAAD,EAAA;QAAAE,QAAA;QAAAwB,iBAAA,EAIS9B,SAAA;QAAA+B,OAAA,EACVtB,WAAA;QAAAF,OAAA;QAAAiB,QAAA,E,CAGRd,GAAA,CAAAsB,KAA2E,GAA/DzC,cAAA,CAAemB,GAAA,CAAAsB,KAAS,EAAErB,IAAqC,IAA7BnB,UAAA,CAAWkB,GAAkB,IAAXA,GAAA,CAAAU,IAAW,GAA7B,EAA6B,EAC3EC,c,IAAkBI,IAAA,CAAC9B,SAAA;UAAAsC,KAAA,EAAiBpB,UAAA;UAAAF;;;;;;;;;;;;;;;;;;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,28 @@
   }
 
   .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(--collapsible-content-padding, 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: calc(
+        var(--collapsible-content-padding, var(--spacer-3)) * var(--field-border-bleed, 1)
+      );
     }
 
     .tabs-field__tabs {
+      padding-inline: calc(
+        var(--collapsible-content-padding, var(--spacer-3)) * var(--field-border-bleed, 1)
+      );
+
       &:before,
       &:after {
-        content: ' ';
-        display: block;
-        width: var(--spacer-2);
+        display: none;
       }
     }
   }
@@ -51,8 +55,8 @@
     &: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-3)));
       flex-shrink: 0;
     }
   }
@@ -62,13 +66,6 @@
   }
 
   .tabs-field__description {
-    margin-bottom: var(--spacer-4);
-  }
-
-  @media (max-width: 768px) {
-    .tabs-field--within-collapsible {
-      margin-left: calc(var(--gutter-h) * -1);
-      margin-right: calc(var(--gutter-h) * -1);
-    }
+    margin-bottom: var(--spacer-6);
   }
 }

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;AAc/D,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAE5C,OAAO,aAAa,CAAA;AAIpB,OAAO,EAAE,YAAY,EAAE,CAAA;AAiLvB,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"}

package/dist/fields/Tabs/index.js

@@ -4,7 +4,7 @@ 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 { getFieldPaths, toKebabCase } from 'payload/shared';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useId, useState } from 'react';
 import { useCollapsible } from '../../elements/Collapsible/provider.js';
 import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
 import { TabsList } from '../../elements/Tabs/index.js';
@@ -23,7 +23,7 @@ import './index.css';
 const baseClass = 'tabs-field';
 export { TabsProvider };
 const TabsFieldComponent = props => {
-  const $ = _c(45);
+  const $ = _c(76);
   const {
     field: t0,
     forceRender: t1,
@@ -78,6 +78,7 @@ const TabsFieldComponent = props => {
   const {
     isWithinCollapsible
   } = useCollapsible();
+  const tabsID = useId();
   let t11;
   if ($[4] !== tabs) {
     t11 = t12 => {
@@ -110,14 +111,31 @@ const TabsFieldComponent = props => {
   const activeTabInfo = tabStates[activeTabIndex];
   const activeTabConfig = activeTabInfo?.tab;
   const activeTabDescription = activeTabConfig?.admin?.description ?? activeTabConfig?.description;
-  const activeTabStaticDescription = typeof activeTabDescription === "function" ? activeTabDescription({
-    i18n,
-    t: i18n.t
-  }) : activeTabDescription;
-  const hasVisibleTabs = tabStates.some(_temp2);
   let t13;
-  if ($[8] !== getPreference || $[9] !== path || $[10] !== preferencesKey || $[11] !== setPreference || $[12] !== tabsPrefKey) {
-    t13 = async incomingTabIndex => {
+  if ($[8] !== activeTabDescription || $[9] !== i18n) {
+    t13 = typeof activeTabDescription === "function" ? activeTabDescription({
+      i18n,
+      t: i18n.t
+    }) : activeTabDescription;
+    $[8] = activeTabDescription;
+    $[9] = i18n;
+    $[10] = t13;
+  } else {
+    t13 = $[10];
+  }
+  const activeTabStaticDescription = t13;
+  let t14;
+  if ($[11] !== tabStates) {
+    t14 = tabStates.some(_temp2);
+    $[11] = tabStates;
+    $[12] = t14;
+  } else {
+    t14 = $[12];
+  }
+  const hasVisibleTabs = t14;
+  let t15;
+  if ($[13] !== getPreference || $[14] !== path || $[15] !== preferencesKey || $[16] !== setPreference || $[17] !== tabsPrefKey) {
+    t15 = async incomingTabIndex => {
       setActiveTabIndex(incomingTabIndex);
       const existingPreferences = await getPreference(preferencesKey);
       if (preferencesKey) {
@@ -143,19 +161,19 @@ const TabsFieldComponent = props => {
         });
       }
     };
-    $[8] = getPreference;
-    $[9] = path;
-    $[10] = preferencesKey;
-    $[11] = setPreference;
-    $[12] = tabsPrefKey;
-    $[13] = t13;
+    $[13] = getPreference;
+    $[14] = path;
+    $[15] = preferencesKey;
+    $[16] = setPreference;
+    $[17] = tabsPrefKey;
+    $[18] = t15;
   } else {
-    t13 = $[13];
+    t15 = $[18];
   }
-  const handleTabChange = t13;
-  let t14;
-  if ($[14] !== getPreference || $[15] !== path || $[16] !== preferencesKey || $[17] !== tabStates.length || $[18] !== tabsPrefKey) {
-    t14 = () => {
+  const handleTabChange = t15;
+  let t16;
+  if ($[19] !== getPreference || $[20] !== path || $[21] !== preferencesKey || $[22] !== tabStates.length || $[23] !== tabsPrefKey) {
+    t16 = () => {
       if (preferencesKey) {
         const getInitialPref = async () => {
           const existingPreferences_0 = await getPreference(preferencesKey);
@@ -166,34 +184,34 @@ const TabsFieldComponent = props => {
         getInitialPref();
       }
     };
-    $[14] = getPreference;
-    $[15] = path;
-    $[16] = preferencesKey;
-    $[17] = tabStates.length;
-    $[18] = tabsPrefKey;
-    $[19] = t14;
+    $[19] = getPreference;
+    $[20] = path;
+    $[21] = preferencesKey;
+    $[22] = tabStates.length;
+    $[23] = tabsPrefKey;
+    $[24] = t16;
   } else {
-    t14 = $[19];
+    t16 = $[24];
   }
-  let t15;
-  if ($[20] !== getPreference || $[21] !== parentPath || $[22] !== parentSchemaPath || $[23] !== path || $[24] !== preferencesKey || $[25] !== tabStates.length || $[26] !== tabs || $[27] !== tabsPrefKey) {
-    t15 = [path, getPreference, preferencesKey, tabsPrefKey, tabs, parentPath, parentSchemaPath, tabStates.length];
-    $[20] = getPreference;
-    $[21] = parentPath;
-    $[22] = parentSchemaPath;
-    $[23] = path;
-    $[24] = preferencesKey;
-    $[25] = tabStates.length;
-    $[26] = tabs;
-    $[27] = tabsPrefKey;
-    $[28] = t15;
+  let t17;
+  if ($[25] !== getPreference || $[26] !== parentPath || $[27] !== parentSchemaPath || $[28] !== path || $[29] !== preferencesKey || $[30] !== tabStates.length || $[31] !== tabs || $[32] !== tabsPrefKey) {
+    t17 = [path, getPreference, preferencesKey, tabsPrefKey, tabs, parentPath, parentSchemaPath, tabStates.length];
+    $[25] = getPreference;
+    $[26] = parentPath;
+    $[27] = parentSchemaPath;
+    $[28] = path;
+    $[29] = preferencesKey;
+    $[30] = tabStates.length;
+    $[31] = tabs;
+    $[32] = tabsPrefKey;
+    $[33] = t17;
   } else {
-    t15 = $[28];
+    t17 = $[33];
   }
-  useEffect(t14, t15);
-  let t16;
-  if ($[29] !== activeTabInfo?.passesCondition || $[30] !== handleTabChange || $[31] !== tabStates) {
-    t16 = () => {
+  useEffect(t16, t17);
+  let t18;
+  if ($[34] !== activeTabInfo?.passesCondition || $[35] !== handleTabChange || $[36] !== tabStates) {
+    t18 = () => {
       if (activeTabInfo?.passesCondition === false) {
         const nextTab = tabStates.find(_temp3);
         if (nextTab) {
@@ -201,86 +219,139 @@ const TabsFieldComponent = props => {
         }
       }
     };
-    $[29] = activeTabInfo?.passesCondition;
-    $[30] = handleTabChange;
-    $[31] = tabStates;
-    $[32] = t16;
+    $[34] = activeTabInfo?.passesCondition;
+    $[35] = handleTabChange;
+    $[36] = tabStates;
+    $[37] = t18;
   } else {
-    t16 = $[32];
+    t18 = $[37];
   }
-  let t17;
-  if ($[33] !== activeTabInfo || $[34] !== handleTabChange || $[35] !== tabStates) {
-    t17 = [activeTabInfo, tabStates, handleTabChange];
-    $[33] = activeTabInfo;
-    $[34] = handleTabChange;
-    $[35] = tabStates;
-    $[36] = t17;
-  } else {
-    t17 = $[36];
-  }
-  useEffect(t16, t17);
-  const t18 = isWithinCollapsible && `${baseClass}--within-collapsible`;
-  const t19 = !hasVisibleTabs && `${baseClass}--hidden`;
-  let t20;
-  if ($[37] !== className || $[38] !== t18 || $[39] !== t19) {
-    t20 = [fieldBaseClass, className, baseClass, t18, t19].filter(Boolean);
-    $[37] = className;
-    $[38] = t18;
-    $[39] = t19;
-    $[40] = t20;
+  let t19;
+  if ($[38] !== activeTabInfo || $[39] !== handleTabChange || $[40] !== tabStates) {
+    t19 = [activeTabInfo, tabStates, handleTabChange];
+    $[38] = activeTabInfo;
+    $[39] = handleTabChange;
+    $[40] = tabStates;
+    $[41] = t19;
   } else {
-    t20 = $[40];
+    t19 = $[41];
   }
-  let t21;
-  if ($[41] !== activeTabIndex || $[42] !== handleTabChange || $[43] !== path) {
-    t21 = t22 => {
-      const {
-        index: index_0,
-        passesCondition: passesCondition_2,
-        tab: tab_0
-      } = t22;
-      return _jsx(TabComponent, {
-        hidden: !passesCondition_2,
-        isActive: activeTabIndex === index_0,
-        parentPath: path,
-        setIsActive: () => {
-          handleTabChange(index_0);
-        },
-        tab: tab_0
-      }, index_0);
-    };
-    $[41] = activeTabIndex;
-    $[42] = handleTabChange;
-    $[43] = path;
+  useEffect(t18, t19);
+  const t20 = isWithinCollapsible && `${baseClass}--within-collapsible`;
+  const t21 = !hasVisibleTabs && `${baseClass}--hidden`;
+  let t22;
+  if ($[42] !== className || $[43] !== t20 || $[44] !== t21) {
+    t22 = [fieldBaseClass, className, baseClass, t20, t21].filter(Boolean);
+    $[42] = className;
+    $[43] = t20;
     $[44] = t21;
+    $[45] = t22;
   } else {
-    t21 = $[44];
+    t22 = $[45];
   }
-  return _jsx("div", {
-    className: t20.join(" "),
-    children: _jsxs(TabsProvider, {
-      children: [_jsx(TabsList, {
-        tabsClassName: `${baseClass}__tabs`,
-        tabsWrapClassName: `${baseClass}__tabs-wrap`,
-        children: tabStates.map(t21)
-      }), _jsx("div", {
-        className: `${baseClass}__content-wrap`,
-        children: activeTabConfig && _jsx(TabContent, {
-          description: activeTabStaticDescription,
-          field: activeTabConfig,
-          forceRender,
-          hidden: false,
-          parentIndexPath: indexPath,
+  const t23 = t22.join(" ");
+  let t24;
+  if ($[46] !== activeTabConfig || $[47] !== activeTabIndex || $[48] !== activeTabStaticDescription || $[49] !== forceRender || $[50] !== handleTabChange || $[51] !== indexPath || $[52] !== path || $[53] !== permissions || $[54] !== readOnly || $[55] !== schemaPath || $[56] !== t23 || $[57] !== tabStates || $[58] !== tabsID) {
+    let t25;
+    if ($[60] !== activeTabIndex || $[61] !== handleTabChange || $[62] !== path || $[63] !== tabsID) {
+      t25 = t26 => {
+        const {
+          index: index_0,
+          passesCondition: passesCondition_2,
+          tab: tab_0
+        } = t26;
+        return _jsx(TabComponent, {
+          hidden: !passesCondition_2,
+          id: `${tabsID}-tab-${index_0}`,
+          isActive: activeTabIndex === index_0,
+          panelID: `${tabsID}-panel-${index_0}`,
           parentPath: path,
-          parentSchemaPath: schemaPath,
-          path,
-          permissions: permissions && typeof permissions === "object" && "name" in activeTabConfig ? permissions[activeTabConfig.name] && typeof permissions[activeTabConfig.name] === "object" && "fields" in permissions[activeTabConfig.name] ? permissions[activeTabConfig.name].fields : permissions[activeTabConfig.name] : permissions,
-          readOnly,
-          tabIndex: activeTabIndex
-        })
-      })]
-    })
-  });
+          setIsActive: () => {
+            handleTabChange(index_0);
+          },
+          tab: tab_0
+        }, index_0);
+      };
+      $[60] = activeTabIndex;
+      $[61] = handleTabChange;
+      $[62] = path;
+      $[63] = tabsID;
+      $[64] = t25;
+    } else {
+      t25 = $[64];
+    }
+    let t26;
+    if ($[65] !== activeTabConfig || $[66] !== activeTabIndex || $[67] !== activeTabStaticDescription || $[68] !== forceRender || $[69] !== indexPath || $[70] !== path || $[71] !== permissions || $[72] !== readOnly || $[73] !== schemaPath || $[74] !== tabsID) {
+      t26 = t27 => {
+        const {
+          index: index_1
+        } = t27;
+        return _jsx("div", {
+          "aria-labelledby": `${tabsID}-tab-${index_1}`,
+          hidden: index_1 !== activeTabIndex,
+          id: `${tabsID}-panel-${index_1}`,
+          role: "tabpanel",
+          tabIndex: 0,
+          children: index_1 === activeTabIndex && activeTabConfig && _jsx(TabContent, {
+            description: activeTabStaticDescription,
+            field: activeTabConfig,
+            forceRender,
+            hidden: false,
+            parentIndexPath: indexPath,
+            parentPath: path,
+            parentSchemaPath: schemaPath,
+            path,
+            permissions: permissions && typeof permissions === "object" && "name" in activeTabConfig ? permissions[activeTabConfig.name] && typeof permissions[activeTabConfig.name] === "object" && "fields" in permissions[activeTabConfig.name] ? permissions[activeTabConfig.name].fields : permissions[activeTabConfig.name] : permissions,
+            readOnly,
+            tabIndex: activeTabIndex
+          })
+        }, index_1);
+      };
+      $[65] = activeTabConfig;
+      $[66] = activeTabIndex;
+      $[67] = activeTabStaticDescription;
+      $[68] = forceRender;
+      $[69] = indexPath;
+      $[70] = path;
+      $[71] = permissions;
+      $[72] = readOnly;
+      $[73] = schemaPath;
+      $[74] = tabsID;
+      $[75] = t26;
+    } else {
+      t26 = $[75];
+    }
+    t24 = _jsx("div", {
+      className: t23,
+      children: _jsxs(TabsProvider, {
+        children: [_jsx(TabsList, {
+          tabsClassName: `${baseClass}__tabs`,
+          tabsWrapClassName: `${baseClass}__tabs-wrap`,
+          children: tabStates.map(t25)
+        }), _jsx("div", {
+          className: `${baseClass}__content-wrap`,
+          children: tabStates.map(t26)
+        })]
+      })
+    });
+    $[46] = activeTabConfig;
+    $[47] = activeTabIndex;
+    $[48] = activeTabStaticDescription;
+    $[49] = forceRender;
+    $[50] = handleTabChange;
+    $[51] = indexPath;
+    $[52] = path;
+    $[53] = permissions;
+    $[54] = readOnly;
+    $[55] = schemaPath;
+    $[56] = t23;
+    $[57] = tabStates;
+    $[58] = tabsID;
+    $[59] = t24;
+  } else {
+    t24 = $[59];
+  }
+  return t24;
 };
 export const TabsField = withCondition(TabsFieldComponent);
 function TabContent(t0) {