@payloadcms/ui 3.0.0-canary.ff8c8fd → 3.0.0

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

@@ -11,7 +11,7 @@ import { useTranslation } from '../../../providers/Translation/index.js';
 import './index.scss';
 const baseClass = 'tabs-field__tab-button';
 export const TabComponent = t0 => {
-  const $ = _c(14);
+  const $ = _c(21);
   const {
     isActive,
     parentPath,
@@ -22,57 +22,82 @@ export const TabComponent = t0 => {
     i18n
   } = useTranslation();
   const [errorCount, setErrorCount] = useState(undefined);
-  const path = `${parentPath ? `${parentPath}.` : ""}${tabHasName(tab) ? tab.name : ""}`;
-  const fieldHasErrors = errorCount > 0;
   let t1;
-  if ($[0] !== tab || $[1] !== path || $[2] !== fieldHasErrors || $[3] !== isActive || $[4] !== i18n || $[5] !== errorCount || $[6] !== setIsActive) {
-    const t2 = _jsx(WatchChildErrors, {
+  if ($[0] !== parentPath) {
+    t1 = parentPath ? parentPath.split(".") : [];
+    $[0] = parentPath;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== tab) {
+    t2 = tabHasName(tab) ? [tab.name] : [];
+    $[2] = tab;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== t1 || $[5] !== t2) {
+    t3 = [...t1, ...t2];
+    $[4] = t1;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  const path = t3.join(".");
+  const fieldHasErrors = errorCount > 0;
+  let t4;
+  if ($[7] !== path || $[8] !== tab || $[9] !== fieldHasErrors || $[10] !== isActive || $[11] !== i18n || $[12] !== errorCount || $[13] !== setIsActive) {
+    const t5 = _jsx(WatchChildErrors, {
       fields: tab.fields,
-      path,
+      path: path.split("."),
       setErrorCount
     });
-    const t3 = fieldHasErrors && `${baseClass}--has-error`;
-    const t4 = isActive && `${baseClass}--active`;
-    let t5;
-    if ($[8] !== t3 || $[9] !== t4) {
-      t5 = [baseClass, t3, t4].filter(Boolean);
-      $[8] = t3;
-      $[9] = t4;
-      $[10] = t5;
+    const t6 = fieldHasErrors && `${baseClass}--has-error`;
+    const t7 = isActive && `${baseClass}--active`;
+    let t8;
+    if ($[15] !== t6 || $[16] !== t7) {
+      t8 = [baseClass, t6, t7].filter(Boolean);
+      $[15] = t6;
+      $[16] = t7;
+      $[17] = t8;
     } else {
-      t5 = $[10];
+      t8 = $[17];
     }
-    let t6;
-    if ($[11] !== tab || $[12] !== i18n) {
-      t6 = tab.label ? getTranslation(tab.label, i18n) : tabHasName(tab) ? tab.name : "";
-      $[11] = tab;
-      $[12] = i18n;
-      $[13] = t6;
+    let t9;
+    if ($[18] !== tab || $[19] !== i18n) {
+      t9 = tab.label ? getTranslation(tab.label, i18n) : tabHasName(tab) ? tab.name : "";
+      $[18] = tab;
+      $[19] = i18n;
+      $[20] = t9;
     } else {
-      t6 = $[13];
+      t9 = $[20];
     }
-    t1 = _jsxs(React.Fragment, {
-      children: [t2, _jsxs("button", {
-        className: t5.join(" "),
+    t4 = _jsxs(React.Fragment, {
+      children: [t5, _jsxs("button", {
+        className: t8.join(" "),
         onClick: setIsActive,
         type: "button",
-        children: [t6, fieldHasErrors && _jsx(ErrorPill, {
+        children: [t9, fieldHasErrors && _jsx(ErrorPill, {
           count: errorCount,
           i18n
         })]
       })]
     });
-    $[0] = tab;
-    $[1] = path;
-    $[2] = fieldHasErrors;
-    $[3] = isActive;
-    $[4] = i18n;
-    $[5] = errorCount;
-    $[6] = setIsActive;
-    $[7] = t1;
+    $[7] = path;
+    $[8] = tab;
+    $[9] = fieldHasErrors;
+    $[10] = isActive;
+    $[11] = i18n;
+    $[12] = errorCount;
+    $[13] = setIsActive;
+    $[14] = t4;
   } else {
-    t1 = $[7];
+    t4 = $[14];
   }
-  return t1;
+  return t4;
 };
 //# sourceMappingURL=index.js.map

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":"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;EAAA,IAAAC,EAAA;EAAA,IAAAT,CAAA,QAAAE,UAAA;IAGvCO,EAAA,GAAAP,UAAA,GAAaA,UAAA,CAAAQ,KAAA,CAAiB,SAAS;IAAAV,CAAA,MAAAE,UAAA;IAAAF,CAAA,MAAAS,EAAA;EAAA;IAAAA,EAAA,GAAAT,CAAA;EAAA;EAAA,IAAAW,EAAA;EAAA,IAAAX,CAAA,QAAAI,GAAA;IACvCO,EAAA,GAAApB,UAAA,CAAWa,GAAA,KAAQA,GAAA,CAAAQ,IAAA,MAAc;IAAAZ,CAAA,MAAAI,GAAA;IAAAJ,CAAA,MAAAW,EAAA;EAAA;IAAAA,EAAA,GAAAX,CAAA;EAAA;EAAA,IAAAa,EAAA;EAAA,IAAAb,CAAA,QAAAS,EAAA,IAAAT,CAAA,QAAAW,EAAA;IAF1BE,EAAA,OACPJ,EAAuC,KACvCE,EAAiC;IACtCX,CAAA,MAAAS,EAAA;IAAAT,CAAA,MAAAW,EAAA;IAAAX,CAAA,MAAAa,EAAA;EAAA;IAAAA,EAAA,GAAAb,CAAA;EAAA;EAHD,MAAAc,IAAA,GAAaD,EAGZ,CAAAE,IAAA,CAAM;EAEP,MAAAC,cAAA,GAAuBV,UAAA,IAAa;EAAA,IAAAW,EAAA;EAAA,IAAAjB,CAAA,QAAAc,IAAA,IAAAd,CAAA,QAAAI,GAAA,IAAAJ,CAAA,QAAAgB,cAAA,IAAAhB,CAAA,SAAAC,QAAA,IAAAD,CAAA,SAAAK,IAAA,IAAAL,CAAA,SAAAM,UAAA,IAAAN,CAAA,SAAAG,WAAA;IAIhC,MAAAe,EAAA,GAAAC,IAAA,CAAAxB,gBAAA;MAAAyB,MAAA,EAA0BhB,GAAA,CAAAgB,MAAA;MAAAN,IAAA,EAAkBA,IAAA,CAAAJ,KAAA,CAAW;MAAAH;IAAA,C;IAInD,MAAAc,EAAA,GAAAL,cAAA,IAAkB,GAAAnB,SAAA,aAAyB;IAC3C,MAAAyB,EAAA,GAAArB,QAAA,IAAY,GAAAJ,SAAA,UAAsB;IAAA,IAAA0B,EAAA;IAAA,IAAAvB,CAAA,SAAAqB,EAAA,IAAArB,CAAA,SAAAsB,EAAA;MAHzBC,EAAA,IAAA1B,SAAA,EAETwB,EAA2C,EAC3CC,EAAkC,EAAAE,MAAA,CAAAC,OAE1B;MAAAzB,CAAA,OAAAqB,EAAA;MAAArB,CAAA,OAAAsB,EAAA;MAAAtB,CAAA,OAAAuB,EAAA;IAAA;MAAAA,EAAA,GAAAvB,CAAA;IAAA;IAAA,IAAA0B,EAAA;IAAA,IAAA1B,CAAA,SAAAI,GAAA,IAAAJ,CAAA,SAAAK,IAAA;MAKTqB,EAAA,GAAAtB,GAAA,CAAAuB,KAAA,GAAYrC,cAAA,CAAec,GAAA,CAAAuB,KAAA,EAAWtB,IAAA,IAAQd,UAAA,CAAWa,GAAA,IAAOA,GAAA,CAAAQ,IAAA,GAAW;MAAAZ,CAAA,OAAAI,GAAA;MAAAJ,CAAA,OAAAK,IAAA;MAAAL,CAAA,OAAA0B,EAAA;IAAA;MAAAA,EAAA,GAAA1B,CAAA;IAAA;IAbhFiB,EAAA,GAAAW,KAAA,CAAApC,KAAA,CAAAqC,QAAA;MAAAC,QAAA,GACEZ,E,EACAU,KAAA,CAAC;QAAAG,SAAA,EACYR,EAKD,CAAAR,IAAA,CACF;QAAAiB,OAAA,EACC7B,WAAA;QAAA8B,IAAA,EACJ;QAAAH,QAAA,GAEJJ,EAA2E,EAC3EV,cAAA,IAAkBG,IAAA,CAAAzB,SAAA;UAAAwC,KAAA,EAAkB5B,UAAA;UAAAD;QAAA,C;;;;;;;;;;;;;;SAdzCY,E;CAkBJ","ignoreList":[]}

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

@@ -1,78 +1,80 @@
 @import '../../../scss/styles.scss';
 
-.tabs-field__tab-button {
-  @extend %btn-reset;
-  @extend %h4;
-  display: flex;
-  padding-bottom: base(1);
-  margin: 0 $baseline 0 0;
-  cursor: pointer;
-  opacity: 0.5;
-  position: relative;
-  white-space: nowrap;
-  flex-shrink: 0;
-  gap: base(0.5);
+@layer payload-default {
+  .tabs-field__tab-button {
+    @extend %btn-reset;
+    @extend %h4;
+    display: flex;
+    padding-bottom: base(1);
+    margin: 0 $baseline 0 0;
+    cursor: pointer;
+    opacity: 0.5;
+    position: relative;
+    white-space: nowrap;
+    flex-shrink: 0;
+    gap: base(0.5);
 
-  &:last-child {
-    margin: 0;
-  }
-
-  &:after {
-    content: ' ';
-    position: absolute;
-    right: 0;
-    bottom: -1px;
-    left: 0;
-    height: 1px;
-    background: var(--theme-elevation-800);
-    opacity: 0;
-  }
-
-  &:hover {
-    opacity: 0.75;
+    &:last-child {
+      margin: 0;
+    }
 
     &:after {
-      opacity: 0.2;
+      content: ' ';
+      position: absolute;
+      right: 0;
+      bottom: -1px;
+      left: 0;
+      height: 1px;
+      background: var(--theme-elevation-800);
+      opacity: 0;
     }
-  }
 
-  &--active {
-    opacity: 1 !important;
+    &:hover {
+      opacity: 0.75;
 
-    &:after {
+      &:after {
+        opacity: 0.2;
+      }
+    }
+
+    &--active {
       opacity: 1 !important;
-      height: 2px;
+
+      &:after {
+        opacity: 1 !important;
+        height: 2px;
+      }
     }
-  }
 
-  &__description {
-    margin-bottom: calc(var(--base) / 2);
-  }
+    &__description {
+      margin-bottom: calc(var(--base) / 2);
+    }
 
-  @include small-break {
-    margin: 0 base(0.75) 0 0;
-    padding-bottom: base(0.5);
+    @include small-break {
+      margin: 0 base(0.75) 0 0;
+      padding-bottom: base(0.5);
 
-    &:last-child {
-      margin: 0;
+      &:last-child {
+        margin: 0;
+      }
     }
   }
-}
 
-html[data-theme='light'] {
-  .tabs-field__tab-button--has-error {
-    color: var(--theme-error-750);
-    &:after {
-      background: var(--theme-error-500);
+  html[data-theme='light'] {
+    .tabs-field__tab-button--has-error {
+      color: var(--theme-error-750);
+      &:after {
+        background: var(--theme-error-500);
+      }
     }
   }
-}
 
-html[data-theme='dark'] {
-  .tabs-field__tab-button--has-error {
-    color: var(--theme-error-500);
-    &:after {
-      background: var(--theme-error-500);
+  html[data-theme='dark'] {
+    .tabs-field__tab-button--has-error {
+      color: var(--theme-error-500);
+      &:after {
+        background: var(--theme-error-500);
+      }
     }
   }
 }

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

@@ -1,7 +1,8 @@
-import type { TabsFieldProps } from 'payload';
 import React from 'react';
 import './index.scss';
 import { TabsProvider } from './provider.js';
 export { TabsProvider };
-export declare const TabsField: React.FC<TabsFieldProps>;
+export declare const TabsField: React.FC<import("payload").FieldPaths & Pick<import("payload").ServerFieldBase, "permissions"> & {
+    readonly field: Omit<import("payload").TabsFieldClient, "type"> & Partial<Pick<import("payload").TabsFieldClient, "type">>;
+} & 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":"AACA,OAAO,KAAK,EAAuB,cAAc,EAAE,MAAM,SAAS,CAAA;AAIlE,OAAO,KAA2C,MAAM,OAAO,CAAA;AAY/D,OAAO,cAAc,CAAA;AACrB,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAI5C,OAAO,EAAE,YAAY,EAAE,CAAA;AAiKvB,eAAO,MAAM,SAAS,0BAAoC,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"}