@payloadcms/ui 3.0.0-beta.127 → 3.0.0-beta.129

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","$","isActive","parentPath","setIsActive","tab","i18n","errorCount","setErrorCount","undefined","path","name","fieldHasErrors","t1","t2","_jsx","fields","t3","t4","t5","filter","Boolean","t6","label","_jsxs","Fragment","children","className","join","onClick","type","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.scss'\n\nconst baseClass = 'tabs-field__tab-button'\n\ntype TabProps = {\n  readonly isActive?: boolean\n  readonly parentPath: string\n  readonly setIsActive: () => void\n  readonly tab: ClientTab\n}\n\nexport const TabComponent: React.FC<TabProps> = ({ isActive, parentPath, setIsActive, tab }) => {\n  const { i18n } = useTranslation()\n  const [errorCount, setErrorCount] = useState(undefined)\n\n  const path = `${parentPath ? `${parentPath}.` : ''}${tabHasName(tab) ? tab.name : ''}`\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        ]\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;AASlB,OAAO,MAAMC,YAAA,GAAmCC,EAAA;EAAA,MAAAC,CAAA,GAAAX,EAAA;EAAC;IAAAY,QAAA;IAAAC,UAAA;IAAAC,WAAA;IAAAC;EAAA,IAAAL,EAA0C;EACzF;IAAAM;EAAA,IAAiBT,cAAA;EACjB,OAAAU,UAAA,EAAAC,aAAA,IAAoCd,QAAA,CAAAe,SAAS;EAE7C,MAAAC,IAAA,GAAa,GAAGP,UAAA,GAAa,GAAGA,UAAA,GAAa,GAAG,KAAKX,UAAA,CAAWa,GAAA,IAAOA,GAAA,CAAAM,IAAA,GAAW,IAAI;EACtF,MAAAC,cAAA,GAAuBL,UAAA,IAAa;EAAA,IAAAM,EAAA;EAAA,IAAAZ,CAAA,QAAAI,GAAA,IAAAJ,CAAA,QAAAS,IAAA,IAAAT,CAAA,QAAAW,cAAA,IAAAX,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAK,IAAA,IAAAL,CAAA,QAAAM,UAAA,IAAAN,CAAA,QAAAG,WAAA;IAIhC,MAAAU,EAAA,GAAAC,IAAA,CAAAnB,gBAAA;MAAAoB,MAAA,EAA0BX,GAAA,CAAAW,MAAA;MAAAN,IAAA;MAAAF;IAAA,C;IAItB,MAAAS,EAAA,GAAAL,cAAA,IAAkB,GAAAd,SAAA,aAAyB;IAC3C,MAAAoB,EAAA,GAAAhB,QAAA,IAAY,GAAAJ,SAAA,UAAsB;IAAA,IAAAqB,EAAA;IAAA,IAAAlB,CAAA,QAAAgB,EAAA,IAAAhB,CAAA,QAAAiB,EAAA;MAHzBC,EAAA,IAAArB,SAAA,EAETmB,EAA2C,EAC3CC,EAAkC,EAAAE,MAAA,CAAAC,OAE1B;MAAApB,CAAA,MAAAgB,EAAA;MAAAhB,CAAA,MAAAiB,EAAA;MAAAjB,CAAA,OAAAkB,EAAA;IAAA;MAAAA,EAAA,GAAAlB,CAAA;IAAA;IAAA,IAAAqB,EAAA;IAAA,IAAArB,CAAA,SAAAI,GAAA,IAAAJ,CAAA,SAAAK,IAAA;MAKTgB,EAAA,GAAAjB,GAAA,CAAAkB,KAAA,GAAYhC,cAAA,CAAec,GAAA,CAAAkB,KAAA,EAAWjB,IAAA,IAAQd,UAAA,CAAWa,GAAA,IAAOA,GAAA,CAAAM,IAAA,GAAW;MAAAV,CAAA,OAAAI,GAAA;MAAAJ,CAAA,OAAAK,IAAA;MAAAL,CAAA,OAAAqB,EAAA;IAAA;MAAAA,EAAA,GAAArB,CAAA;IAAA;IAbhFY,EAAA,GAAAW,KAAA,CAAA/B,KAAA,CAAAgC,QAAA;MAAAC,QAAA,GACEZ,E,EACAU,KAAA,CAAC;QAAAG,SAAA,EACYR,EAKD,CAAAS,IAAA,CACF;QAAAC,OAAA,EACCzB,WAAA;QAAA0B,IAAA,EACJ;QAAAJ,QAAA,GAEJJ,EAA2E,EAC3EV,cAAA,IAAkBG,IAAA,CAAApB,SAAA;UAAAoC,KAAA,EAAkBxB,UAAA;UAAAD;QAAA,C;;;;;;;;;;;;;;SAdzCO,E;CAkBJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","tabHasName","React","useState","ErrorPill","WatchChildErrors","useTranslation","baseClass","TabComponent","t0","$","isActive","parentPath","setIsActive","tab","i18n","errorCount","setErrorCount","undefined","t1","split","t2","name","t3","path","join","fieldHasErrors","t4","t5","_jsx","fields","t6","t7","t8","filter","Boolean","t9","label","_jsxs","Fragment","children","className","onClick","type","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.scss'\n\nconst baseClass = 'tabs-field__tab-button'\n\ntype TabProps = {\n  readonly isActive?: boolean\n  readonly parentPath: string\n  readonly setIsActive: () => void\n  readonly tab: ClientTab\n}\n\nexport const TabComponent: React.FC<TabProps> = ({ isActive, parentPath, setIsActive, tab }) => {\n  const { i18n } = useTranslation()\n  const [errorCount, setErrorCount] = useState(undefined)\n\n  const path = [\n    ...(parentPath ? parentPath.split('.') : []),\n    ...(tabHasName(tab) ? [tab.name] : []),\n  ].join('.')\n\n  const fieldHasErrors = errorCount > 0\n\n  return (\n    <React.Fragment>\n      <WatchChildErrors fields={tab.fields} path={path.split('.')} setErrorCount={setErrorCount} />\n      <button\n        className={[\n          baseClass,\n          fieldHasErrors && `${baseClass}--has-error`,\n          isActive && `${baseClass}--active`,\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":"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","ignoreList":[]}

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

@@ -2,10 +2,7 @@ import React from 'react';
 import './index.scss';
 import { TabsProvider } from './provider.js';
 export { TabsProvider };
-export declare const TabsField: React.FC<Record<string, unknown> & {
-    readonly descriptionProps?: import("payload").FieldDescriptionClientProps<Omit<import("payload").TabsFieldClient, "type"> & Partial<Pick<import("payload").TabsFieldClient, "type">>>;
-    readonly errorProps?: import("payload").FieldErrorClientProps<Omit<import("payload").TabsFieldClient, "type"> & Partial<Pick<import("payload").TabsFieldClient, "type">>>;
+export declare const TabsField: React.FC<Pick<import("payload").ServerFieldBase, "permissions"> & {
     readonly field: Omit<import("payload").TabsFieldClient, "type"> & Partial<Pick<import("payload").TabsFieldClient, "type">>;
-    readonly labelProps?: import("payload").FieldLabelClientProps<Omit<import("payload").TabsFieldClient, "type"> & Partial<Pick<import("payload").TabsFieldClient, "type">>>;
-} & import("payload").FormFieldBase>;
+} & Omit<import("payload").ClientComponentProps, "field" | "customComponents">>;
 //# 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":"AAKA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAW/D,OAAO,cAAc,CAAA;AACrB,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAK5C,OAAO,EAAE,YAAY,EAAE,CAAA;AA2KvB,eAAO,MAAM,SAAS;;;;;oCAAoC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Tabs/index.tsx"],"names":[],"mappings":"AAYA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAY/D,OAAO,cAAc,CAAA;AACrB,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAK5C,OAAO,EAAE,YAAY,EAAE,CAAA;AAuLvB,eAAO,MAAM,SAAS;;+EAAoC,CAAA"}

package/dist/fields/Tabs/index.js

@@ -6,8 +6,9 @@ import { getTranslation } from '@payloadcms/translations';
 import { tabHasName, toKebabCase } from 'payload/shared';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useCollapsible } from '../../elements/Collapsible/provider.js';
-import { useFieldProps } from '../../forms/FieldPropsProvider/index.js';
+import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
 import { RenderFields } from '../../forms/RenderFields/index.js';
+import { useField } from '../../forms/useField/index.js';
 import { withCondition } from '../../forms/withCondition/index.js';
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
 import { usePreferences } from '../../providers/Preferences/index.js';
@@ -19,51 +20,61 @@ import { TabsProvider } from './provider.js';
 import { TabComponent } from './Tab/index.js';
 const baseClass = 'tabs-field';
 export { TabsProvider };
+function generateTabPath({
+  activeTabConfig,
+  path
+}) {
+  let tabPath = path;
+  if (tabHasName(activeTabConfig) && activeTabConfig.name) {
+    if (path) {
+      tabPath = `${path}.${activeTabConfig.name}`;
+    } else {
+      tabPath = activeTabConfig.name;
+    }
+  }
+  return tabPath;
+}
 const TabsFieldComponent = props => {
-  const $ = _c(54);
+  const $ = _c(75);
   const {
-    field,
     field: t0,
     forceRender: t1,
-    readOnly: readOnlyFromTopLevelProps
+    indexPath: t2,
+    parentPath: t3,
+    parentSchemaPath: t4,
+    path: t5,
+    permissions,
+    readOnly
   } = props;
   const {
-    _path: pathFromProps,
-    admin: t2,
-    tabs: t3
+    admin: t6,
+    tabs: t7
   } = t0;
-  let t4;
-  if ($[0] !== t2) {
-    t4 = t2 === undefined ? {} : t2;
-    $[0] = t2;
-    $[1] = t4;
+  let t8;
+  if ($[0] !== t6) {
+    t8 = t6 === undefined ? {} : t6;
+    $[0] = t6;
+    $[1] = t8;
   } else {
-    t4 = $[1];
+    t8 = $[1];
   }
   const {
-    className,
-    readOnly: readOnlyFromAdmin
-  } = t4;
-  let t5;
-  if ($[2] !== t3) {
-    t5 = t3 === undefined ? [] : t3;
-    $[2] = t3;
-    $[3] = t5;
+    className
+  } = t8;
+  let t9;
+  if ($[2] !== t7) {
+    t9 = t7 === undefined ? [] : t7;
+    $[2] = t7;
+    $[3] = t9;
   } else {
-    t5 = $[3];
+    t9 = $[3];
   }
-  const tabs = t5;
+  const tabs = t9;
   const forceRender = t1 === undefined ? false : t1;
-  const {
-    indexPath,
-    path: pathFromContext,
-    readOnly: readOnlyFromContext,
-    schemaPath,
-    siblingPermissions
-  } = useFieldProps();
-  const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin;
-  const readOnly = readOnlyFromProps || readOnlyFromContext;
-  const path = pathFromContext ?? pathFromProps;
+  const indexPath = t2 === undefined ? "" : t2;
+  const parentPath = t3 === undefined ? "" : t3;
+  const parentSchemaPath = t4 === undefined ? "" : t4;
+  const path = t5 === undefined ? "" : t5;
   const {
     getPreference,
     setPreference
@@ -79,35 +90,106 @@ const TabsFieldComponent = props => {
   } = useCollapsible();
   const [activeTabIndex, setActiveTabIndex] = useState(0);
   const tabsPrefKey = `tabs-${indexPath}`;
-  let t6;
-  let t7;
-  if ($[4] !== preferencesKey || $[5] !== getPreference || $[6] !== path || $[7] !== tabsPrefKey) {
-    t6 = () => {
+  let t10;
+  if ($[4] !== tabs || $[5] !== activeTabIndex || $[6] !== parentPath) {
+    t10 = () => generateTabPath({
+      activeTabConfig: tabs[activeTabIndex],
+      path: parentPath
+    });
+    $[4] = tabs;
+    $[5] = activeTabIndex;
+    $[6] = parentPath;
+    $[7] = t10;
+  } else {
+    t10 = $[7];
+  }
+  const [activeTabPath, setActiveTabPath] = useState(t10);
+  let t11;
+  if ($[8] !== tabs || $[9] !== activeTabIndex || $[10] !== activeTabPath || $[11] !== parentPath) {
+    t11 = tabHasName(tabs[activeTabIndex]) ? activeTabPath : parentPath;
+    $[8] = tabs;
+    $[9] = activeTabIndex;
+    $[10] = activeTabPath;
+    $[11] = parentPath;
+    $[12] = t11;
+  } else {
+    t11 = $[12];
+  }
+  const activePathChildrenPath = t11;
+  let t12;
+  if ($[13] !== tabs || $[14] !== parentSchemaPath) {
+    t12 = () => generateTabPath({
+      activeTabConfig: tabs[0],
+      path: parentSchemaPath
+    });
+    $[13] = tabs;
+    $[14] = parentSchemaPath;
+    $[15] = t12;
+  } else {
+    t12 = $[15];
+  }
+  const [activeTabSchemaPath, setActiveTabSchemaPath] = useState(t12);
+  let t13;
+  if ($[16] !== tabs || $[17] !== activeTabIndex || $[18] !== activeTabSchemaPath || $[19] !== parentSchemaPath) {
+    t13 = tabHasName(tabs[activeTabIndex]) ? activeTabSchemaPath : parentSchemaPath;
+    $[16] = tabs;
+    $[17] = activeTabIndex;
+    $[18] = activeTabSchemaPath;
+    $[19] = parentSchemaPath;
+    $[20] = t13;
+  } else {
+    t13 = $[20];
+  }
+  const activePathSchemaChildrenPath = t13;
+  let t14;
+  let t15;
+  if ($[21] !== preferencesKey || $[22] !== getPreference || $[23] !== path || $[24] !== tabsPrefKey || $[25] !== tabs || $[26] !== parentPath || $[27] !== parentSchemaPath) {
+    t14 = () => {
       if (preferencesKey) {
         const getInitialPref = async () => {
           const existingPreferences = await getPreference(preferencesKey);
           const initialIndex = path ? existingPreferences?.fields?.[path]?.tabIndex : existingPreferences?.fields?.[tabsPrefKey]?.tabIndex;
-          setActiveTabIndex(initialIndex || 0);
+          const newIndex = initialIndex || 0;
+          setActiveTabIndex(newIndex);
+          setActiveTabPath(generateTabPath({
+            activeTabConfig: tabs[newIndex],
+            path: parentPath
+          }));
+          setActiveTabSchemaPath(generateTabPath({
+            activeTabConfig: tabs[newIndex],
+            path: parentSchemaPath
+          }));
         };
         getInitialPref();
       }
     };
-    t7 = [path, getPreference, preferencesKey, tabsPrefKey];
-    $[4] = preferencesKey;
-    $[5] = getPreference;
-    $[6] = path;
-    $[7] = tabsPrefKey;
-    $[8] = t6;
-    $[9] = t7;
+    t15 = [path, getPreference, preferencesKey, tabsPrefKey, tabs, parentPath, parentSchemaPath];
+    $[21] = preferencesKey;
+    $[22] = getPreference;
+    $[23] = path;
+    $[24] = tabsPrefKey;
+    $[25] = tabs;
+    $[26] = parentPath;
+    $[27] = parentSchemaPath;
+    $[28] = t14;
+    $[29] = t15;
   } else {
-    t6 = $[8];
-    t7 = $[9];
+    t14 = $[28];
+    t15 = $[29];
   }
-  useEffect(t6, t7);
-  let t8;
-  if ($[10] !== getPreference || $[11] !== preferencesKey || $[12] !== setPreference || $[13] !== path || $[14] !== tabsPrefKey) {
-    t8 = async incomingTabIndex => {
+  useEffect(t14, t15);
+  let t16;
+  if ($[30] !== tabs || $[31] !== parentPath || $[32] !== parentSchemaPath || $[33] !== getPreference || $[34] !== preferencesKey || $[35] !== setPreference || $[36] !== path || $[37] !== tabsPrefKey) {
+    t16 = async incomingTabIndex => {
       setActiveTabIndex(incomingTabIndex);
+      setActiveTabPath(generateTabPath({
+        activeTabConfig: tabs[incomingTabIndex],
+        path: parentPath
+      }));
+      setActiveTabSchemaPath(generateTabPath({
+        activeTabConfig: tabs[incomingTabIndex],
+        path: parentSchemaPath
+      }));
       const existingPreferences_0 = await getPreference(preferencesKey);
       if (preferencesKey) {
         setPreference(preferencesKey, {
@@ -132,66 +214,49 @@ const TabsFieldComponent = props => {
         });
       }
     };
-    $[10] = getPreference;
-    $[11] = preferencesKey;
-    $[12] = setPreference;
-    $[13] = path;
-    $[14] = tabsPrefKey;
-    $[15] = t8;
+    $[30] = tabs;
+    $[31] = parentPath;
+    $[32] = parentSchemaPath;
+    $[33] = getPreference;
+    $[34] = preferencesKey;
+    $[35] = setPreference;
+    $[36] = path;
+    $[37] = tabsPrefKey;
+    $[38] = t16;
   } else {
-    t8 = $[15];
+    t16 = $[38];
   }
-  const handleTabChange = t8;
+  const handleTabChange = t16;
   const activeTabConfig = tabs[activeTabIndex];
-  let t9;
-  if ($[16] !== path || $[17] !== activeTabConfig) {
-    t9 = function generateTabPath() {
-      let tabPath = path;
-      if (path && tabHasName(activeTabConfig) && activeTabConfig.name) {
-        tabPath = `${path}.${activeTabConfig.name}`;
-      } else {
-        if (!path && tabHasName(activeTabConfig) && activeTabConfig.name) {
-          tabPath = activeTabConfig.name;
-        }
-      }
-      return tabPath;
-    };
-    $[16] = path;
-    $[17] = activeTabConfig;
-    $[18] = t9;
-  } else {
-    t9 = $[18];
-  }
-  const generateTabPath = t9;
-  const activeTabDescription = activeTabConfig?.description;
-  let t10;
-  if ($[19] !== activeTabDescription || $[20] !== i18n) {
-    t10 = typeof activeTabDescription === "function" ? activeTabDescription({
+  const activeTabDescription = activeTabConfig.description;
+  let t17;
+  if ($[39] !== activeTabDescription || $[40] !== i18n) {
+    t17 = typeof activeTabDescription === "function" ? activeTabDescription({
       t: i18n.t
     }) : activeTabDescription;
-    $[19] = activeTabDescription;
-    $[20] = i18n;
-    $[21] = t10;
+    $[39] = activeTabDescription;
+    $[40] = i18n;
+    $[41] = t17;
   } else {
-    t10 = $[21];
+    t17 = $[41];
   }
-  const activeTabStaticDescription = t10;
-  const t11 = isWithinCollapsible && `${baseClass}--within-collapsible`;
-  let t12;
-  if ($[22] !== className || $[23] !== t11) {
-    t12 = [fieldBaseClass, className, baseClass, t11].filter(Boolean);
-    $[22] = className;
-    $[23] = t11;
-    $[24] = t12;
+  const activeTabStaticDescription = t17;
+  const t18 = isWithinCollapsible && `${baseClass}--within-collapsible`;
+  let t19;
+  if ($[42] !== className || $[43] !== t18) {
+    t19 = [fieldBaseClass, className, baseClass, t18].filter(Boolean);
+    $[42] = className;
+    $[43] = t18;
+    $[44] = t19;
   } else {
-    t12 = $[24];
+    t19 = $[44];
   }
-  const t13 = t12.join(" ");
-  let t14;
-  if ($[25] !== activeTabIndex || $[26] !== path || $[27] !== handleTabChange || $[28] !== tabs || $[29] !== activeTabConfig || $[30] !== i18n || $[31] !== field || $[32] !== activeTabStaticDescription || $[33] !== generateTabPath || $[34] !== siblingPermissions || $[35] !== schemaPath || $[36] !== forceRender || $[37] !== readOnly || $[38] !== t13) {
-    let t15;
-    if ($[40] !== activeTabIndex || $[41] !== path || $[42] !== handleTabChange) {
-      t15 = (tab, tabIndex) => _jsx(TabComponent, {
+  const t20 = t19.join(" ");
+  let t21;
+  if ($[45] !== activeTabIndex || $[46] !== path || $[47] !== handleTabChange || $[48] !== tabs || $[49] !== activeTabConfig || $[50] !== indexPath || $[51] !== permissions || $[52] !== activeTabStaticDescription || $[53] !== forceRender || $[54] !== activePathChildrenPath || $[55] !== activePathSchemaChildrenPath || $[56] !== activeTabPath || $[57] !== readOnly || $[58] !== t20) {
+    let t22;
+    if ($[60] !== activeTabIndex || $[61] !== path || $[62] !== handleTabChange) {
+      t22 = (tab, tabIndex) => _jsx(TabComponent, {
         isActive: activeTabIndex === tabIndex,
         parentPath: path,
         setIsActive: () => {
@@ -199,78 +264,170 @@ const TabsFieldComponent = props => {
         },
         tab
       }, tabIndex);
-      $[40] = activeTabIndex;
-      $[41] = path;
-      $[42] = handleTabChange;
-      $[43] = t15;
+      $[60] = activeTabIndex;
+      $[61] = path;
+      $[62] = handleTabChange;
+      $[63] = t22;
     } else {
-      t15 = $[43];
+      t22 = $[63];
     }
-    let t16;
-    if ($[44] !== activeTabConfig || $[45] !== i18n || $[46] !== field || $[47] !== activeTabStaticDescription || $[48] !== generateTabPath || $[49] !== siblingPermissions || $[50] !== schemaPath || $[51] !== forceRender || $[52] !== readOnly) {
-      t16 = activeTabConfig && _jsxs("div", {
-        className: [`${baseClass}__tab`, activeTabConfig.label && `${baseClass}__tabConfigLabel-${toKebabCase(getTranslation(activeTabConfig.label, i18n))}`].filter(Boolean).join(" "),
-        children: [_jsx(FieldDescription, {
-          Description: field?.admin?.components?.Description,
-          description: activeTabStaticDescription,
-          field
-        }), _jsx(RenderFields, {
-          fields: activeTabConfig.fields,
-          forceRender,
-          margins: "small",
-          path: generateTabPath(),
-          permissions: "name" in activeTabConfig && siblingPermissions?.[activeTabConfig.name]?.fields ? siblingPermissions[activeTabConfig.name]?.fields : siblingPermissions,
-          readOnly,
-          schemaPath: `${schemaPath ? `${schemaPath}` : ""}${tabHasName(activeTabConfig) && activeTabConfig.name ? `.${activeTabConfig.name}` : ""}`
-        }, activeTabConfig.label ? getTranslation(activeTabConfig.label, i18n) : activeTabConfig.name)]
+    let t23;
+    if ($[64] !== activeTabConfig || $[65] !== indexPath || $[66] !== activeTabIndex || $[67] !== permissions || $[68] !== activeTabStaticDescription || $[69] !== forceRender || $[70] !== activePathChildrenPath || $[71] !== activePathSchemaChildrenPath || $[72] !== activeTabPath || $[73] !== readOnly) {
+      t23 = activeTabConfig && _jsx(ActiveTabContent, {
+        description: activeTabStaticDescription,
+        fields: activeTabConfig.fields,
+        forceRender,
+        parentIndexPath: tabHasName(activeTabConfig) ? "" : `${indexPath ? indexPath + "-" : ""}` + String(activeTabIndex),
+        parentPath: activePathChildrenPath,
+        parentSchemaPath: activePathSchemaChildrenPath,
+        path: activeTabPath,
+        permissions: "name" in activeTabConfig && permissions?.[activeTabConfig.name]?.fields ? permissions[activeTabConfig.name].fields : permissions,
+        readOnly
       });
-      $[44] = activeTabConfig;
-      $[45] = i18n;
-      $[46] = field;
-      $[47] = activeTabStaticDescription;
-      $[48] = generateTabPath;
-      $[49] = siblingPermissions;
-      $[50] = schemaPath;
-      $[51] = forceRender;
-      $[52] = readOnly;
-      $[53] = t16;
+      $[64] = activeTabConfig;
+      $[65] = indexPath;
+      $[66] = activeTabIndex;
+      $[67] = permissions;
+      $[68] = activeTabStaticDescription;
+      $[69] = forceRender;
+      $[70] = activePathChildrenPath;
+      $[71] = activePathSchemaChildrenPath;
+      $[72] = activeTabPath;
+      $[73] = readOnly;
+      $[74] = t23;
     } else {
-      t16 = $[53];
+      t23 = $[74];
     }
-    t14 = _jsx("div", {
-      className: t13,
+    t21 = _jsx("div", {
+      className: t20,
       children: _jsxs(TabsProvider, {
         children: [_jsx("div", {
           className: `${baseClass}__tabs-wrap`,
           children: _jsx("div", {
             className: `${baseClass}__tabs`,
-            children: tabs.map(t15)
+            children: tabs.map(t22)
           })
         }), _jsx("div", {
           className: `${baseClass}__content-wrap`,
-          children: t16
+          children: t23
         })]
       })
     });
-    $[25] = activeTabIndex;
-    $[26] = path;
-    $[27] = handleTabChange;
-    $[28] = tabs;
-    $[29] = activeTabConfig;
-    $[30] = i18n;
-    $[31] = field;
-    $[32] = activeTabStaticDescription;
-    $[33] = generateTabPath;
-    $[34] = siblingPermissions;
-    $[35] = schemaPath;
-    $[36] = forceRender;
-    $[37] = readOnly;
-    $[38] = t13;
-    $[39] = t14;
+    $[45] = activeTabIndex;
+    $[46] = path;
+    $[47] = handleTabChange;
+    $[48] = tabs;
+    $[49] = activeTabConfig;
+    $[50] = indexPath;
+    $[51] = permissions;
+    $[52] = activeTabStaticDescription;
+    $[53] = forceRender;
+    $[54] = activePathChildrenPath;
+    $[55] = activePathSchemaChildrenPath;
+    $[56] = activeTabPath;
+    $[57] = readOnly;
+    $[58] = t20;
+    $[59] = t21;
   } else {
-    t14 = $[39];
+    t21 = $[59];
   }
-  return t14;
+  return t21;
 };
 export const TabsField = withCondition(TabsFieldComponent);
+function ActiveTabContent(t0) {
+  const $ = _c(20);
+  const {
+    description,
+    fields,
+    forceRender,
+    label,
+    parentIndexPath,
+    parentPath,
+    parentSchemaPath,
+    path,
+    permissions,
+    readOnly
+  } = t0;
+  const {
+    i18n
+  } = useTranslation();
+  let t1;
+  if ($[0] !== path) {
+    t1 = {
+      path
+    };
+    $[0] = path;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const {
+    customComponents: t2
+  } = useField(t1);
+  let t3;
+  if ($[2] !== t2) {
+    t3 = t2 === undefined ? {} : t2;
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  const {
+    AfterInput,
+    BeforeInput,
+    Description,
+    Field
+  } = t3;
+  if (Field) {
+    return Field;
+  }
+  const t4 = label && `${baseClass}__tabConfigLabel-${toKebabCase(getTranslation(label, i18n))}`;
+  let t5;
+  if ($[4] !== t4) {
+    t5 = [`${baseClass}__tab`, t4].filter(Boolean);
+    $[4] = t4;
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  const t6 = t5.join(" ");
+  let t7;
+  if ($[6] !== description || $[7] !== path || $[8] !== Description || $[9] !== fields || $[10] !== forceRender || $[11] !== parentIndexPath || $[12] !== parentPath || $[13] !== parentSchemaPath || $[14] !== permissions || $[15] !== readOnly || $[16] !== BeforeInput || $[17] !== AfterInput || $[18] !== t6) {
+    t7 = _jsxs("div", {
+      className: t6,
+      children: [_jsx(RenderCustomComponent, {
+        CustomComponent: Description,
+        Fallback: _jsx(FieldDescription, {
+          description,
+          path
+        })
+      }), BeforeInput, _jsx(RenderFields, {
+        fields,
+        forceRender,
+        parentIndexPath,
+        parentPath,
+        parentSchemaPath,
+        permissions,
+        readOnly
+      }), AfterInput]
+    });
+    $[6] = description;
+    $[7] = path;
+    $[8] = Description;
+    $[9] = fields;
+    $[10] = forceRender;
+    $[11] = parentIndexPath;
+    $[12] = parentPath;
+    $[13] = parentSchemaPath;
+    $[14] = permissions;
+    $[15] = readOnly;
+    $[16] = BeforeInput;
+    $[17] = AfterInput;
+    $[18] = t6;
+    $[19] = t7;
+  } else {
+    t7 = $[19];
+  }
+  return t7;
+}
 //# sourceMappingURL=index.js.map