@payloadcms/ui 4.0.0-internal.38b7f1d → 4.0.0-internal.3b50481

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));
       }
     }
   }
@@ -51,8 +51,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-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"}

package/dist/fields/Tabs/index.js

@@ -4,9 +4,10 @@ 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';
 import { useFormFields } from '../../forms/Form/index.js';
 import { RenderFields } from '../../forms/RenderFields/index.js';
 import { useField } from '../../forms/useField/index.js';
@@ -22,7 +23,7 @@ import './index.css';
 const baseClass = 'tabs-field';
 export { TabsProvider };
 const TabsFieldComponent = props => {
-  const $ = _c(44);
+  const $ = _c(74);
   const {
     field: t0,
     forceRender: t1,
@@ -77,6 +78,7 @@ const TabsFieldComponent = props => {
   const {
     isWithinCollapsible
   } = useCollapsible();
+  const tabsID = useId();
   let t11;
   if ($[4] !== tabs) {
     t11 = t12 => {
@@ -109,14 +111,23 @@ 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;
+  const hasVisibleTabs = tabStates.some(_temp2);
+  let t14;
+  if ($[11] !== getPreference || $[12] !== path || $[13] !== preferencesKey || $[14] !== setPreference || $[15] !== tabsPrefKey) {
+    t14 = async incomingTabIndex => {
       setActiveTabIndex(incomingTabIndex);
       const existingPreferences = await getPreference(preferencesKey);
       if (preferencesKey) {
@@ -142,19 +153,19 @@ const TabsFieldComponent = props => {
         });
       }
     };
-    $[8] = getPreference;
-    $[9] = path;
-    $[10] = preferencesKey;
-    $[11] = setPreference;
-    $[12] = tabsPrefKey;
-    $[13] = t13;
+    $[11] = getPreference;
+    $[12] = path;
+    $[13] = preferencesKey;
+    $[14] = setPreference;
+    $[15] = tabsPrefKey;
+    $[16] = t14;
   } else {
-    t13 = $[13];
+    t14 = $[16];
   }
-  const handleTabChange = t13;
-  let t14;
-  if ($[14] !== getPreference || $[15] !== path || $[16] !== preferencesKey || $[17] !== tabStates.length || $[18] !== tabsPrefKey) {
-    t14 = () => {
+  const handleTabChange = t14;
+  let t15;
+  if ($[17] !== getPreference || $[18] !== path || $[19] !== preferencesKey || $[20] !== tabStates.length || $[21] !== tabsPrefKey) {
+    t15 = () => {
       if (preferencesKey) {
         const getInitialPref = async () => {
           const existingPreferences_0 = await getPreference(preferencesKey);
@@ -165,33 +176,34 @@ const TabsFieldComponent = props => {
         getInitialPref();
       }
     };
-    $[14] = getPreference;
-    $[15] = path;
-    $[16] = preferencesKey;
-    $[17] = tabStates.length;
-    $[18] = tabsPrefKey;
-    $[19] = t14;
+    $[17] = getPreference;
+    $[18] = path;
+    $[19] = preferencesKey;
+    $[20] = tabStates.length;
+    $[21] = tabsPrefKey;
+    $[22] = t15;
   } else {
-    t14 = $[19];
+    t15 = $[22];
   }
-  let t15;
-  if ($[20] !== getPreference || $[21] !== parentPath || $[22] !== parentSchemaPath || $[23] !== path || $[24] !== preferencesKey || $[25] !== tabs || $[26] !== tabsPrefKey) {
-    t15 = [path, getPreference, preferencesKey, tabsPrefKey, tabs, parentPath, parentSchemaPath];
-    $[20] = getPreference;
-    $[21] = parentPath;
-    $[22] = parentSchemaPath;
-    $[23] = path;
-    $[24] = preferencesKey;
-    $[25] = tabs;
-    $[26] = tabsPrefKey;
-    $[27] = t15;
+  let t16;
+  if ($[23] !== getPreference || $[24] !== parentPath || $[25] !== parentSchemaPath || $[26] !== path || $[27] !== preferencesKey || $[28] !== tabStates.length || $[29] !== tabs || $[30] !== tabsPrefKey) {
+    t16 = [path, getPreference, preferencesKey, tabsPrefKey, tabs, parentPath, parentSchemaPath, tabStates.length];
+    $[23] = getPreference;
+    $[24] = parentPath;
+    $[25] = parentSchemaPath;
+    $[26] = path;
+    $[27] = preferencesKey;
+    $[28] = tabStates.length;
+    $[29] = tabs;
+    $[30] = tabsPrefKey;
+    $[31] = t16;
   } else {
-    t15 = $[27];
+    t16 = $[31];
   }
-  useEffect(t14, t15);
-  let t16;
-  if ($[28] !== activeTabInfo?.passesCondition || $[29] !== handleTabChange || $[30] !== tabStates) {
-    t16 = () => {
+  useEffect(t15, t16);
+  let t17;
+  if ($[32] !== activeTabInfo?.passesCondition || $[33] !== handleTabChange || $[34] !== tabStates) {
+    t17 = () => {
       if (activeTabInfo?.passesCondition === false) {
         const nextTab = tabStates.find(_temp3);
         if (nextTab) {
@@ -199,88 +211,139 @@ const TabsFieldComponent = props => {
         }
       }
     };
-    $[28] = activeTabInfo?.passesCondition;
-    $[29] = handleTabChange;
-    $[30] = tabStates;
-    $[31] = t16;
-  } else {
-    t16 = $[31];
-  }
-  let t17;
-  if ($[32] !== activeTabInfo || $[33] !== handleTabChange || $[34] !== tabStates) {
-    t17 = [activeTabInfo, tabStates, handleTabChange];
-    $[32] = activeTabInfo;
+    $[32] = activeTabInfo?.passesCondition;
     $[33] = handleTabChange;
     $[34] = tabStates;
     $[35] = t17;
   } else {
     t17 = $[35];
   }
-  useEffect(t16, t17);
-  const t18 = isWithinCollapsible && `${baseClass}--within-collapsible`;
-  const t19 = !hasVisibleTabs && `${baseClass}--hidden`;
-  let t20;
-  if ($[36] !== className || $[37] !== t18 || $[38] !== t19) {
-    t20 = [fieldBaseClass, className, baseClass, t18, t19].filter(Boolean);
-    $[36] = className;
-    $[37] = t18;
-    $[38] = t19;
-    $[39] = t20;
+  let t18;
+  if ($[36] !== activeTabInfo || $[37] !== handleTabChange || $[38] !== tabStates) {
+    t18 = [activeTabInfo, tabStates, handleTabChange];
+    $[36] = activeTabInfo;
+    $[37] = handleTabChange;
+    $[38] = tabStates;
+    $[39] = t18;
   } else {
-    t20 = $[39];
+    t18 = $[39];
   }
+  useEffect(t17, t18);
+  const t19 = isWithinCollapsible && `${baseClass}--within-collapsible`;
+  const t20 = !hasVisibleTabs && `${baseClass}--hidden`;
   let t21;
-  if ($[40] !== activeTabIndex || $[41] !== handleTabChange || $[42] !== 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);
-    };
-    $[40] = activeTabIndex;
-    $[41] = handleTabChange;
-    $[42] = path;
+  if ($[40] !== className || $[41] !== t19 || $[42] !== t20) {
+    t21 = [fieldBaseClass, className, baseClass, t19, t20].filter(Boolean);
+    $[40] = className;
+    $[41] = t19;
+    $[42] = t20;
     $[43] = t21;
   } else {
     t21 = $[43];
   }
-  return _jsx("div", {
-    className: t20.join(" "),
-    children: _jsxs(TabsProvider, {
-      children: [_jsx("div", {
-        className: `${baseClass}__tabs-wrap`,
-        children: _jsx("div", {
-          className: `${baseClass}__tabs`,
-          children: tabStates.map(t21)
-        })
-      }), _jsx("div", {
-        className: `${baseClass}__content-wrap`,
-        children: activeTabConfig && _jsx(TabContent, {
-          description: activeTabStaticDescription,
-          field: activeTabConfig,
-          forceRender,
-          hidden: false,
-          parentIndexPath: indexPath,
+  const t22 = t21.join(" ");
+  let t23;
+  if ($[44] !== activeTabConfig || $[45] !== activeTabIndex || $[46] !== activeTabStaticDescription || $[47] !== forceRender || $[48] !== handleTabChange || $[49] !== indexPath || $[50] !== path || $[51] !== permissions || $[52] !== readOnly || $[53] !== schemaPath || $[54] !== t22 || $[55] !== tabStates || $[56] !== tabsID) {
+    let t24;
+    if ($[58] !== activeTabIndex || $[59] !== handleTabChange || $[60] !== path || $[61] !== tabsID) {
+      t24 = t25 => {
+        const {
+          index: index_0,
+          passesCondition: passesCondition_2,
+          tab: tab_0
+        } = t25;
+        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);
+      };
+      $[58] = activeTabIndex;
+      $[59] = handleTabChange;
+      $[60] = path;
+      $[61] = tabsID;
+      $[62] = t24;
+    } else {
+      t24 = $[62];
+    }
+    let t25;
+    if ($[63] !== activeTabConfig || $[64] !== activeTabIndex || $[65] !== activeTabStaticDescription || $[66] !== forceRender || $[67] !== indexPath || $[68] !== path || $[69] !== permissions || $[70] !== readOnly || $[71] !== schemaPath || $[72] !== tabsID) {
+      t25 = t26 => {
+        const {
+          index: index_1
+        } = t26;
+        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);
+      };
+      $[63] = activeTabConfig;
+      $[64] = activeTabIndex;
+      $[65] = activeTabStaticDescription;
+      $[66] = forceRender;
+      $[67] = indexPath;
+      $[68] = path;
+      $[69] = permissions;
+      $[70] = readOnly;
+      $[71] = schemaPath;
+      $[72] = tabsID;
+      $[73] = t25;
+    } else {
+      t25 = $[73];
+    }
+    t23 = _jsx("div", {
+      className: t22,
+      children: _jsxs(TabsProvider, {
+        children: [_jsx(TabsList, {
+          tabsClassName: `${baseClass}__tabs`,
+          tabsWrapClassName: `${baseClass}__tabs-wrap`,
+          children: tabStates.map(t24)
+        }), _jsx("div", {
+          className: `${baseClass}__content-wrap`,
+          children: tabStates.map(t25)
+        })]
+      })
+    });
+    $[44] = activeTabConfig;
+    $[45] = activeTabIndex;
+    $[46] = activeTabStaticDescription;
+    $[47] = forceRender;
+    $[48] = handleTabChange;
+    $[49] = indexPath;
+    $[50] = path;
+    $[51] = permissions;
+    $[52] = readOnly;
+    $[53] = schemaPath;
+    $[54] = t22;
+    $[55] = tabStates;
+    $[56] = tabsID;
+    $[57] = t23;
+  } else {
+    t23 = $[57];
+  }
+  return t23;
 };
 export const TabsField = withCondition(TabsFieldComponent);
 function TabContent(t0) {