@payloadcms/ui 4.0.0-internal.5b1e7cd → 4.0.0-internal.5d5a2b2

package/dist/elements/Nav/NavSidebarToggle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","SidebarToggle","useNav","NavSidebarToggle","t0","$","baseClass","navOpen","setNavOpen","t1","t2","t3","undefined","t4","_jsx","className","onClick","tabIndex","type","children","isActive"],"sources":["../../../../src/elements/Nav/NavSidebarToggle/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { SidebarToggle } from '../../SidebarToggle/index.js'\nimport { useNav } from '../context.js'\n\n/**\n * @internal\n */\nexport const NavSidebarToggle: React.FC<{\n  baseClass?: string\n}> = ({ baseClass }) => {\n  const { navOpen, setNavOpen } = useNav()\n\n  return (\n    <button\n      className={`${baseClass}__mobile-close`}\n      onClick={() => {\n        setNavOpen(false)\n      }}\n      tabIndex={!navOpen ? -1 : undefined}\n      type=\"button\"\n    >\n      <SidebarToggle isActive />\n    </button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,aAAa,QAAQ;AAC9B,SAASC,MAAM,QAAQ;AAEvB;;;AAGA,OAAO,MAAMC,gBAAA,GAERC,EAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EAAC;IAAAO;EAAA,IAAAF,EAAa;EACjB;IAAAG,OAAA;IAAAC;EAAA,IAAgCN,MAAA;EAIjB,MAAAO,EAAA,MAAGH,SAAA,gBAAyB;EAAA,IAAAI,EAAA;EAAA,IAAAL,CAAA,QAAAG,UAAA;IAC9BE,EAAA,GAAAA,CAAA;MACPF,UAAA,MAAW;IAAA;IACbH,CAAA,MAAAG,UAAA;IAAAH,CAAA,MAAAK,EAAA;EAAA;IAAAA,EAAA,GAAAL,CAAA;EAAA;EACU,MAAAM,EAAA,IAACJ,OAAA,QAAAK,SAAe;EAAA,IAAAC,EAAA;EAAA,IAAAR,CAAA,QAAAI,EAAA,IAAAJ,CAAA,QAAAK,EAAA,IAAAL,CAAA,QAAAM,EAAA;IAL5BE,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EACYN,EAA4B;MAAAO,OAAA,EAC9BN,EAET;MAAAO,QAAA,EACUN,EAAgB;MAAAO,IAAA,EACrB;MAAAC,QAAA,EAELL,IAAA,CAAAb,aAAA;QAAAmB,QAAA;MAAA,C;;;;;;;;;SARFP,E;CAWJ","ignoreList":[]}

package/dist/elements/Nav/NavToggler/index.css

@@ -0,0 +1,12 @@
+@layer payload-default {
+  .nav-toggler {
+    position: relative;
+    display: flex;
+    align-items: center;
+    background: transparent;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    cursor: pointer;
+  }
+}

package/dist/elements/Nav/NavToggler/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export declare const NavToggler: React.FC<{
     children?: React.ReactNode;
     className?: string;

package/dist/elements/Nav/NavToggler/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Nav/NavToggler/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAyCA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Nav/NavToggler/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAyCA,CAAA"}

package/dist/elements/Nav/NavToggler/index.js

@@ -8,7 +8,7 @@ import React from 'react';
 import { usePreferences } from '../../../providers/Preferences/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
 import { useNav } from '../context.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'nav-toggler';
 export const NavToggler = props => {
   const $ = _c(15);

package/dist/elements/Nav/NavToggler/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","useWindowInfo","PREFERENCE_KEYS","React","usePreferences","useTranslation","useNav","baseClass","NavToggler","props","$","id","children","className","tabIndex","t0","undefined","t","setPreference","navOpen","setNavOpen","breakpoints","t1","l","largeBreak","t2","t3","t4","filter","Boolean","t5","join","t6","NAV","open","t7","_jsx","onClick","type"],"sources":["../../../../src/elements/Nav/NavToggler/index.tsx"],"sourcesContent":["'use client'\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport { PREFERENCE_KEYS } from 'payload/shared'\nimport React from 'react'\n\nimport { usePreferences } from '../../../providers/Preferences/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { useNav } from '../context.js'\nimport './index.scss'\n\nconst baseClass = 'nav-toggler'\n\nexport const NavToggler: React.FC<{\n  children?: React.ReactNode\n  className?: string\n  id?: string\n  tabIndex?: number\n}> = (props) => {\n  const { id, children, className, tabIndex = 0 } = props\n\n  const { t } = useTranslation()\n\n  const { setPreference } = usePreferences()\n\n  const { navOpen, setNavOpen } = useNav()\n\n  const {\n    breakpoints: { l: largeBreak },\n  } = useWindowInfo()\n\n  return (\n    <button\n      aria-label={`${navOpen ? t('general:close') : t('general:open')} ${t('general:menu')}`}\n      className={[baseClass, navOpen && `${baseClass}--is-open`, className]\n        .filter(Boolean)\n        .join(' ')}\n      id={id}\n      onClick={async () => {\n        setNavOpen(!navOpen)\n\n        // only when the user explicitly toggles the nav on desktop do we want to set the preference\n        // this is because the js may open or close the nav based on the window size, routing, etc\n        if (!largeBreak) {\n          await setPreference(\n            PREFERENCE_KEYS.NAV,\n            {\n              open: !navOpen,\n            },\n            true,\n          )\n        }\n      }}\n      tabIndex={tabIndex}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,aAAa,QAAQ;AAC9B,SAASC,eAAe,QAAQ;AAChC,OAAOC,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAC/B,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,UAAA,GAKRC,KAAA;EAAA,MAAAC,CAAA,GAAAV,EAAA;EACH;IAAAW,EAAA;IAAAC,QAAA;IAAAC,SAAA;IAAAC,QAAA,EAAAC;EAAA,IAAkDN,KAAA;EAAjB,MAAAK,QAAA,GAAAC,EAAY,KAAAC,SAAA,OAAZD,EAAY;EAE7C;IAAAE;EAAA,IAAcZ,cAAA;EAEd;IAAAa;EAAA,IAA0Bd,cAAA;EAE1B;IAAAe,OAAA;IAAAC;EAAA,IAAgCd,MAAA;EAEhC;IAAAe,WAAA,EAAAC;EAAA,IAEIrB,aAAA;EADW;IAAAsB,CAAA,EAAAC;EAAA,IAAAF,EAAiB;EAKhB,MAAAG,EAAA,MAAGN,OAAA,GAAUF,CAAA,CAAE,mBAAmBA,CAAA,CAAE,mBAAmBA,CAAA,CAAE,iBAAiB;EAC/D,MAAAS,EAAA,GAAAP,OAAA,IAAW,GAAAZ,SAAA,WAAuB;EAAA,IAAAoB,EAAA;EAAA,IAAAjB,CAAA,QAAAG,SAAA,IAAAH,CAAA,QAAAgB,EAAA;IAA9CC,EAAA,IAAApB,SAAA,EAAYmB,EAAkC,EAAEb,SAAA,EAAAe,MAAA,CAAAC,OACjD;IAAAnB,CAAA,MAAAG,SAAA;IAAAH,CAAA,MAAAgB,EAAA;IAAAhB,CAAA,MAAAiB,EAAA;EAAA;IAAAA,EAAA,GAAAjB,CAAA;EAAA;EADC,MAAAoB,EAAA,GAAAH,EACD,CAAAI,IAAA,CACF;EAAA,IAAAC,EAAA;EAAA,IAAAtB,CAAA,QAAAc,UAAA,IAAAd,CAAA,QAAAS,OAAA,IAAAT,CAAA,QAAAU,UAAA,IAAAV,CAAA,QAAAQ,aAAA;IAECc,EAAA,SAAAA,CAAA;MACPZ,UAAA,EAAYD,OAAA;MAAA,KAIPK,UAAA;QAAA,MACGN,aAAA,CAAAhB,eAAA,CAAA+B,GAAA;UAAAC,IAAA,GAGKf;QAAA,OAET;MAAA;IAAA;IAGNT,CAAA,MAAAc,UAAA;IAAAd,CAAA,MAAAS,OAAA;IAAAT,CAAA,MAAAU,UAAA;IAAAV,CAAA,MAAAQ,aAAA;IAAAR,CAAA,MAAAsB,EAAA;EAAA;IAAAA,EAAA,GAAAtB,CAAA;EAAA;EAAA,IAAAyB,EAAA;EAAA,IAAAzB,CAAA,QAAAE,QAAA,IAAAF,CAAA,QAAAC,EAAA,IAAAD,CAAA,SAAAe,EAAA,IAAAf,CAAA,SAAAoB,EAAA,IAAApB,CAAA,SAAAsB,EAAA,IAAAtB,CAAA,SAAAI,QAAA;IApBFqB,EAAA,GAAAC,IAAA,CAAC;MAAA,cACaX,EAA0E;MAAAZ,SAAA,EAC3EiB,EAEH;MAAAnB,EAAA;MAAA0B,OAAA,EAECL,EAcT;MAAAlB,QAAA;MAAAwB,IAAA,EAEK;MAAA1B;IAAA,C;;;;;;;;;;;SAtBPuB,E;CA2BJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","useWindowInfo","PREFERENCE_KEYS","React","usePreferences","useTranslation","useNav","baseClass","NavToggler","props","$","id","children","className","tabIndex","t0","undefined","t","setPreference","navOpen","setNavOpen","breakpoints","t1","l","largeBreak","t2","t3","t4","filter","Boolean","t5","join","t6","NAV","open","t7","_jsx","onClick","type"],"sources":["../../../../src/elements/Nav/NavToggler/index.tsx"],"sourcesContent":["'use client'\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport { PREFERENCE_KEYS } from 'payload/shared'\nimport React from 'react'\n\nimport { usePreferences } from '../../../providers/Preferences/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { useNav } from '../context.js'\nimport './index.css'\n\nconst baseClass = 'nav-toggler'\n\nexport const NavToggler: React.FC<{\n  children?: React.ReactNode\n  className?: string\n  id?: string\n  tabIndex?: number\n}> = (props) => {\n  const { id, children, className, tabIndex = 0 } = props\n\n  const { t } = useTranslation()\n\n  const { setPreference } = usePreferences()\n\n  const { navOpen, setNavOpen } = useNav()\n\n  const {\n    breakpoints: { l: largeBreak },\n  } = useWindowInfo()\n\n  return (\n    <button\n      aria-label={`${navOpen ? t('general:close') : t('general:open')} ${t('general:menu')}`}\n      className={[baseClass, navOpen && `${baseClass}--is-open`, className]\n        .filter(Boolean)\n        .join(' ')}\n      id={id}\n      onClick={async () => {\n        setNavOpen(!navOpen)\n\n        // only when the user explicitly toggles the nav on desktop do we want to set the preference\n        // this is because the js may open or close the nav based on the window size, routing, etc\n        if (!largeBreak) {\n          await setPreference(\n            PREFERENCE_KEYS.NAV,\n            {\n              open: !navOpen,\n            },\n            true,\n          )\n        }\n      }}\n      tabIndex={tabIndex}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,aAAa,QAAQ;AAC9B,SAASC,eAAe,QAAQ;AAChC,OAAOC,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAC/B,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,UAAA,GAKRC,KAAA;EAAA,MAAAC,CAAA,GAAAV,EAAA;EACH;IAAAW,EAAA;IAAAC,QAAA;IAAAC,SAAA;IAAAC,QAAA,EAAAC;EAAA,IAAkDN,KAAA;EAAjB,MAAAK,QAAA,GAAAC,EAAY,KAAAC,SAAA,OAAZD,EAAY;EAE7C;IAAAE;EAAA,IAAcZ,cAAA;EAEd;IAAAa;EAAA,IAA0Bd,cAAA;EAE1B;IAAAe,OAAA;IAAAC;EAAA,IAAgCd,MAAA;EAEhC;IAAAe,WAAA,EAAAC;EAAA,IAEIrB,aAAA;EADW;IAAAsB,CAAA,EAAAC;EAAA,IAAAF,EAAiB;EAKhB,MAAAG,EAAA,MAAGN,OAAA,GAAUF,CAAA,CAAE,mBAAmBA,CAAA,CAAE,mBAAmBA,CAAA,CAAE,iBAAiB;EAC/D,MAAAS,EAAA,GAAAP,OAAA,IAAW,GAAAZ,SAAA,WAAuB;EAAA,IAAAoB,EAAA;EAAA,IAAAjB,CAAA,QAAAG,SAAA,IAAAH,CAAA,QAAAgB,EAAA;IAA9CC,EAAA,IAAApB,SAAA,EAAYmB,EAAkC,EAAEb,SAAA,EAAAe,MAAA,CAAAC,OACjD;IAAAnB,CAAA,MAAAG,SAAA;IAAAH,CAAA,MAAAgB,EAAA;IAAAhB,CAAA,MAAAiB,EAAA;EAAA;IAAAA,EAAA,GAAAjB,CAAA;EAAA;EADC,MAAAoB,EAAA,GAAAH,EACD,CAAAI,IAAA,CACF;EAAA,IAAAC,EAAA;EAAA,IAAAtB,CAAA,QAAAc,UAAA,IAAAd,CAAA,QAAAS,OAAA,IAAAT,CAAA,QAAAU,UAAA,IAAAV,CAAA,QAAAQ,aAAA;IAECc,EAAA,SAAAA,CAAA;MACPZ,UAAA,EAAYD,OAAA;MAAA,KAIPK,UAAA;QAAA,MACGN,aAAA,CAAAhB,eAAA,CAAA+B,GAAA;UAAAC,IAAA,GAGKf;QAAA,OAET;MAAA;IAAA;IAGNT,CAAA,MAAAc,UAAA;IAAAd,CAAA,MAAAS,OAAA;IAAAT,CAAA,MAAAU,UAAA;IAAAV,CAAA,MAAAQ,aAAA;IAAAR,CAAA,MAAAsB,EAAA;EAAA;IAAAA,EAAA,GAAAtB,CAAA;EAAA;EAAA,IAAAyB,EAAA;EAAA,IAAAzB,CAAA,QAAAE,QAAA,IAAAF,CAAA,QAAAC,EAAA,IAAAD,CAAA,SAAAe,EAAA,IAAAf,CAAA,SAAAoB,EAAA,IAAApB,CAAA,SAAAsB,EAAA,IAAAtB,CAAA,SAAAI,QAAA;IApBFqB,EAAA,GAAAC,IAAA,CAAC;MAAA,cACaX,EAA0E;MAAAZ,SAAA,EAC3EiB,EAEH;MAAAnB,EAAA;MAAA0B,OAAA,EAECL,EAcT;MAAAlB,QAAA;MAAAwB,IAAA,EAEK;MAAA1B;IAAA,C;;;;;;;;;;;SAtBPuB,E;CA2BJ","ignoreList":[]}

package/dist/elements/Nav/NavWrapper/index.css

@@ -0,0 +1,15 @@
+@layer payload-default {
+  .nav {
+    position: sticky;
+    top: 0;
+    left: 0;
+    flex-shrink: 0;
+    height: 100vh;
+    width: var(--nav-width);
+    border-right: var(--stroke-width-small) solid var(--color-border);
+    [dir='rtl'] & {
+      border-right: none;
+      border-left: var(--stroke-width-small) solid var(--color-border);
+    }
+  }
+}

package/dist/elements/Nav/NavWrapper/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './index.css';
+/**
+ * @internal
+ */
+export declare const NavWrapper: React.FC<{
+    baseClass?: string;
+    children: React.ReactNode;
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/Nav/NavWrapper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Nav/NavWrapper/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,aAAa,CAAA;AAEpB;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAqBA,CAAA"}

package/dist/elements/Nav/NavWrapper/index.js

@@ -0,0 +1,59 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { useNav } from '../context.js';
+import './index.css';
+/**
+ * @internal
+ */
+export const NavWrapper = props => {
+  const $ = _c(10);
+  const {
+    baseClass,
+    children
+  } = props;
+  const {
+    hydrated,
+    navOpen,
+    navRef
+  } = useNav();
+  const t0 = navOpen && `${baseClass}--nav-open`;
+  const t1 = hydrated && `${baseClass}--nav-hydrated`;
+  let t2;
+  if ($[0] !== baseClass || $[1] !== t0 || $[2] !== t1) {
+    t2 = [baseClass, t0, t1].filter(Boolean);
+    $[0] = baseClass;
+    $[1] = t0;
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const t3 = t2.join(" ");
+  const t4 = !navOpen ? true : undefined;
+  const t5 = `${baseClass}__scroll`;
+  let t6;
+  if ($[4] !== children || $[5] !== navRef || $[6] !== t3 || $[7] !== t4 || $[8] !== t5) {
+    t6 = _jsx("aside", {
+      className: t3,
+      inert: t4,
+      children: _jsx("div", {
+        className: t5,
+        ref: navRef,
+        children
+      })
+    });
+    $[4] = children;
+    $[5] = navRef;
+    $[6] = t3;
+    $[7] = t4;
+    $[8] = t5;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  return t6;
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/Nav/NavWrapper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","useNav","NavWrapper","props","$","baseClass","children","hydrated","navOpen","navRef","t0","t1","t2","filter","Boolean","t3","join","t4","undefined","t5","t6","_jsx","className","inert","ref"],"sources":["../../../../src/elements/Nav/NavWrapper/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useNav } from '../context.js'\nimport './index.css'\n\n/**\n * @internal\n */\nexport const NavWrapper: React.FC<{\n  baseClass?: string\n  children: React.ReactNode\n}> = (props) => {\n  const { baseClass, children } = props\n\n  const { hydrated, navOpen, navRef } = useNav()\n\n  return (\n    <aside\n      className={[\n        baseClass,\n        navOpen && `${baseClass}--nav-open`,\n        hydrated && `${baseClass}--nav-hydrated`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      inert={!navOpen ? true : undefined}\n    >\n      <div className={`${baseClass}__scroll`} ref={navRef}>\n        {children}\n      </div>\n    </aside>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,MAAM,QAAQ;AACvB,OAAO;AAEP;;;AAGA,OAAO,MAAMC,UAAA,GAGRC,KAAA;EAAA,MAAAC,CAAA,GAAAL,EAAA;EACH;IAAAM,SAAA;IAAAC;EAAA,IAAgCH,KAAA;EAEhC;IAAAI,QAAA;IAAAC,OAAA;IAAAC;EAAA,IAAsCR,MAAA;EAMhC,MAAAS,EAAA,GAAAF,OAAA,IAAW,GAAGH,SAAA,YAAqB;EACnC,MAAAM,EAAA,GAAAJ,QAAA,IAAY,GAAGF,SAAA,gBAAyB;EAAA,IAAAO,EAAA;EAAA,IAAAR,CAAA,QAAAC,SAAA,IAAAD,CAAA,QAAAM,EAAA,IAAAN,CAAA,QAAAO,EAAA;IAH/BC,EAAA,IACTP,SAAA,EACAK,EAAmC,EACnCC,EAAwC,EAAAE,MAAA,CAAAC,OAEhC;IAAAV,CAAA,MAAAC,SAAA;IAAAD,CAAA,MAAAM,EAAA;IAAAN,CAAA,MAAAO,EAAA;IAAAP,CAAA,MAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EALC,MAAAW,EAAA,GAAAH,EAKD,CAAAI,IAAA,CACF;EACD,MAAAC,EAAA,IAACT,OAAA,UAAAU,SAAiB;EAET,MAAAC,EAAA,MAAGd,SAAA,UAAmB;EAAA,IAAAe,EAAA;EAAA,IAAAhB,CAAA,QAAAE,QAAA,IAAAF,CAAA,QAAAK,MAAA,IAAAL,CAAA,QAAAW,EAAA,IAAAX,CAAA,QAAAa,EAAA,IAAAb,CAAA,QAAAe,EAAA;IAVxCC,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EACYP,EAMH;MAAAQ,KAAA,EACDN,EAAkB;MAAAX,QAAA,EAEzBe,IAAA,CAAC;QAAAC,SAAA,EAAeH,EAAsB;QAAAK,GAAA,EAAOf,MAAA;QAAAH;MAAA,C;;;;;;;;;;;SAV/Cc,E;CAeJ","ignoreList":[]}

package/dist/elements/Nav/SettingsMenuButton/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import './index.scss';
+export type SettingsMenuButtonProps = {
+    settingsMenu?: React.ReactNode[];
+};
+export declare const SettingsMenuButton: React.FC<SettingsMenuButtonProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/Nav/SettingsMenuButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Nav/SettingsMenuButton/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAKvC,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,uBAAuB,GAAG;IACpC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;CACjC,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAqBhE,CAAA"}

package/dist/elements/Nav/SettingsMenuButton/index.js

@@ -0,0 +1,48 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { Fragment } from 'react';
+import { GearIcon } from '../../../icons/Gear/index.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+import { Popup } from '../../Popup/index.js';
+import './index.scss';
+const baseClass = 'settings-menu-button';
+export const SettingsMenuButton = t0 => {
+  const $ = _c(3);
+  const {
+    settingsMenu
+  } = t0;
+  const {
+    t
+  } = useTranslation();
+  if (!settingsMenu || settingsMenu.length === 0) {
+    return null;
+  }
+  let t1;
+  if ($[0] !== settingsMenu || $[1] !== t) {
+    t1 = _jsx(Popup, {
+      button: _jsx(GearIcon, {
+        ariaLabel: t("general:menu")
+      }),
+      className: baseClass,
+      horizontalAlign: "left",
+      id: "settings-menu",
+      size: "small",
+      verticalAlign: "bottom",
+      children: settingsMenu.map(_temp)
+    });
+    $[0] = settingsMenu;
+    $[1] = t;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+};
+function _temp(item, i) {
+  return _jsx(Fragment, {
+    children: item
+  }, `settings-menu-item-${i}`);
+}
+//# sourceMappingURL=index.js.map

package/dist/elements/Nav/SettingsMenuButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","Fragment","GearIcon","useTranslation","Popup","baseClass","SettingsMenuButton","t0","$","settingsMenu","t","length","t1","_jsx","button","ariaLabel","id","size","verticalAlign","children","map","_temp","item","i"],"sources":["../../../../src/elements/Nav/SettingsMenuButton/index.tsx"],"sourcesContent":["'use client'\nimport React, { Fragment } from 'react'\n\nimport { GearIcon } from '../../../icons/Gear/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Popup } from '../../Popup/index.js'\nimport './index.scss'\n\nconst baseClass = 'settings-menu-button'\n\nexport type SettingsMenuButtonProps = {\n  settingsMenu?: React.ReactNode[]\n}\n\nexport const SettingsMenuButton: React.FC<SettingsMenuButtonProps> = ({ settingsMenu }) => {\n  const { t } = useTranslation()\n\n  if (!settingsMenu || settingsMenu.length === 0) {\n    return null\n  }\n\n  return (\n    <Popup\n      button={<GearIcon ariaLabel={t('general:menu')} />}\n      className={baseClass}\n      horizontalAlign=\"left\"\n      id=\"settings-menu\"\n      size=\"small\"\n      verticalAlign=\"bottom\"\n    >\n      {settingsMenu.map((item, i) => (\n        <Fragment key={`settings-menu-item-${i}`}>{item}</Fragment>\n      ))}\n    </Popup>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,SAASC,KAAK,QAAQ;AACtB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAMlB,OAAO,MAAMC,kBAAA,GAAwDC,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAU;EAAA,IAAAF,EAAgB;EACpF;IAAAG;EAAA,IAAcP,cAAA;EAAA,IAEV,CAACM,YAAA,IAAgBA,YAAA,CAAAE,MAAA,MAAwB;IAAA;EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAJ,CAAA,QAAAC,YAAA,IAAAD,CAAA,QAAAE,CAAA;IAK3CE,EAAA,GAAAC,IAAA,CAAAT,KAAA;MAAAU,MAAA,EACUD,IAAA,CAAAX,QAAA;QAAAa,SAAA,EAAqBL,CAAA,CAAE;MAAA,C;;uBAEf;MAAAM,EAAA,EACb;MAAAC,IAAA,EACE;MAAAC,aAAA,EACS;MAAAC,QAAA,EAEbV,YAAA,CAAAW,GAAA,CAAAC,KACyC;IAAA,C;;;;;;;SAT5CT,E;CAaJ;AArBqE,SAAAS,MAAAC,IAAA,EAAAC,CAAA;EAAA,OAiB7DV,IAAA,CAAAZ,QAAA;IAAAkB,QAAA,EAA2CG;EAAA,GAA5B,sBAAsBC,CAAA,EAAG;AAAA","ignoreList":[]}

package/dist/elements/Nav/SettingsMenuButton/index.scss

@@ -0,0 +1,11 @@
+@import '../../../scss/styles.scss';
+
+@layer payload-default {
+  .settings-menu-button {
+    &.popup--h-align-left {
+      .popup__content {
+        left: calc(var(--nav-padding-inline-start) * -0.5);
+      }
+    }
+  }
+}

package/dist/elements/Nav/SidebarTabs/TabError/index.css

@@ -0,0 +1,29 @@
+@layer payload-default {
+  .sidebar-tab-error__content {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    line-height: 1.4;
+
+    strong {
+      font-weight: 600;
+    }
+
+    span {
+      opacity: 0.8;
+      font-size: 0.625rem;
+    }
+  }
+
+  .sidebar-tab-error__retry {
+    all: unset;
+    margin-top: var(--spacer-1);
+    font-size: 0.625rem;
+    text-decoration: underline;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}

package/dist/elements/Nav/SidebarTabs/TabError/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './index.css';
+export type TabErrorProps = {
+    message: string;
+    onRetry: () => void;
+};
+export declare const TabError: React.FC<TabErrorProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/Nav/SidebarTabs/TabError/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/Nav/SidebarTabs/TabError/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAY5C,CAAA"}

package/dist/elements/Nav/SidebarTabs/TabError/index.js

@@ -0,0 +1,43 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useTranslation } from '../../../../providers/Translation/index.js';
+import './index.css';
+const baseClass = 'sidebar-tab-error';
+export const TabError = t0 => {
+  const $ = _c(4);
+  const {
+    message,
+    onRetry
+  } = t0;
+  const {
+    t
+  } = useTranslation();
+  let t1;
+  if ($[0] !== message || $[1] !== onRetry || $[2] !== t) {
+    t1 = _jsx("div", {
+      className: baseClass,
+      children: _jsxs("div", {
+        className: `${baseClass}__content`,
+        children: [_jsx("span", {
+          children: message
+        }), _jsx("button", {
+          className: `${baseClass}__retry`,
+          onClick: onRetry,
+          type: "button",
+          children: t("general:retry")
+        })]
+      })
+    });
+    $[0] = message;
+    $[1] = onRetry;
+    $[2] = t;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/Nav/SidebarTabs/TabError/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","useTranslation","baseClass","TabError","t0","$","message","onRetry","t","t1","_jsx","className","children","_jsxs","onClick","type"],"sources":["../../../../../src/elements/Nav/SidebarTabs/TabError/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'sidebar-tab-error'\n\nexport type TabErrorProps = {\n  message: string\n  onRetry: () => void\n}\n\nexport const TabError: React.FC<TabErrorProps> = ({ message, onRetry }) => {\n  const { t } = useTranslation()\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__content`}>\n        <span>{message}</span>\n        <button className={`${baseClass}__retry`} onClick={onRetry} type=\"button\">\n          {t('general:retry')}\n        </button>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAOlB,OAAO,MAAMC,QAAA,GAAoCC,EAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EAAC;IAAAO,OAAA;IAAAC;EAAA,IAAAH,EAAoB;EACpE;IAAAI;EAAA,IAAcP,cAAA;EAAA,IAAAQ,EAAA;EAAA,IAAAJ,CAAA,QAAAC,OAAA,IAAAD,CAAA,QAAAE,OAAA,IAAAF,CAAA,QAAAG,CAAA;IAEZC,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EAAAT,SAAA;MAAAU,QAAA,EACCC,KAAA,CAAC;QAAAF,SAAA,EAAe,GAAAT,SAAA,WAAuB;QAAAU,QAAA,GACrCF,IAAA,CAAC;UAAAE,QAAA,EAAMN;QAAA,C,GACPI,IAAA,CAAC;UAAAC,SAAA,EAAkB,GAAAT,SAAA,SAAqB;UAAAY,OAAA,EAAWP,OAAA;UAAAQ,IAAA,EAAc;UAAAH,QAAA,EAC9DJ,CAAA,CAAE;QAAA,C;;;;;;;;;;SAJTC,E;CASJ","ignoreList":[]}

package/dist/elements/Nav/SidebarTabs/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_NAV_TAB_SLUG = "nav";
+//# sourceMappingURL=constants.d.ts.map

package/dist/elements/Nav/SidebarTabs/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/elements/Nav/SidebarTabs/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,QAAQ,CAAA"}

package/dist/elements/Nav/SidebarTabs/constants.js

@@ -0,0 +1,2 @@
+export const DEFAULT_NAV_TAB_SLUG = 'nav';
+//# sourceMappingURL=constants.js.map

package/dist/elements/Nav/SidebarTabs/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","names":["DEFAULT_NAV_TAB_SLUG"],"sources":["../../../../src/elements/Nav/SidebarTabs/constants.ts"],"sourcesContent":["export const DEFAULT_NAV_TAB_SLUG = 'nav'\n"],"mappings":"AAAA,OAAO,MAAMA,oBAAA,GAAuB","ignoreList":[]}

package/dist/elements/Nav/SidebarTabs/index.client.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export type TabMetadata = {
+    icon: React.ReactNode;
+    isDefaultActive?: boolean;
+    label: string;
+    /** Whether this tab can be loaded/revalidated via serverFunction */
+    lazyLoadable?: boolean;
+    slug: string;
+};
+export type SidebarTabsClientProps = {
+    baseClass: string;
+    initialActiveTabID: string;
+    initialTabContents: Record<string, React.ReactNode>;
+    /**
+     * Delay before showing loading spinner (in ms), prevents flashing on fast loads
+     * @default 200
+     */
+    loadingDelay?: number;
+    tabs: TabMetadata[];
+};
+export declare const SidebarTabsClient: React.FC<SidebarTabsClientProps>;
+//# sourceMappingURL=index.client.d.ts.map

package/dist/elements/Nav/SidebarTabs/index.client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../../../../src/elements/Nav/SidebarTabs/index.client.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwC,MAAM,OAAO,CAAA;AAW5D,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,oEAAoE;IACpE,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,SAAS,EAAE,MAAM,CAAA;IACjB,kBAAkB,EAAE,MAAM,CAAA;IAC1B,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;IACnD;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,IAAI,EAAE,WAAW,EAAE,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA4L9D,CAAA"}

package/dist/elements/Nav/SidebarTabs/index.client.js

@@ -0,0 +1,199 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { PREFERENCE_KEYS } from 'payload/shared';
+import React, { useCallback, useRef, useState } from 'react';
+import { usePreferences } from '../../../providers/Preferences/index.js';
+import { useServerFunctions } from '../../../providers/ServerFunctions/index.js';
+import { SidebarTabsProvider } from '../../../providers/SidebarTabs/index.js';
+import { DelayedSpinner } from '../../DelayedSpinner/index.js';
+import { Tooltip } from '../../Tooltip/index.js';
+import { TabError } from './TabError/index.js';
+export const SidebarTabsClient = ({
+  baseClass,
+  initialActiveTabID,
+  initialTabContents,
+  loadingDelay = 200,
+  tabs
+}) => {
+  const {
+    setPreference
+  } = usePreferences();
+  const {
+    serverFunction
+  } = useServerFunctions();
+  const [activeTabID, setActiveTabID] = useState(initialActiveTabID);
+  const [tabContent, setTabContent] = useState(initialTabContents);
+  const [loadingTab, setLoadingTab] = useState(null);
+  const [hoveredTab, setHoveredTab] = useState(null);
+  const loadingTabsRef = useRef(new Set());
+  const tabContentRef = useRef(initialTabContents);
+  // Update cached content when server provides new initialTabContents
+  // This is needed because useState only uses initialValue on first mount
+  React.useEffect(() => {
+    tabContentRef.current = {
+      ...tabContentRef.current,
+      ...initialTabContents
+    };
+    setTabContent(prev => ({
+      ...prev,
+      ...initialTabContents
+    }));
+  }, [initialTabContents]);
+  const loadTabContent = useCallback(async (tabSlug, {
+    revalidate = false
+  } = {}) => {
+    const hasCachedContent = Boolean(tabContentRef.current[tabSlug]);
+    // Skip if already loaded (unless revalidating) or currently loading
+    if (hasCachedContent && !revalidate || loadingTabsRef.current.has(tabSlug)) {
+      return;
+    }
+    // Mark as loading - only show spinner if no cached content
+    loadingTabsRef.current.add(tabSlug);
+    if (!hasCachedContent) {
+      setLoadingTab(tabSlug);
+    }
+    try {
+      const result = await serverFunction({
+        name: 'render-tab',
+        args: {
+          tabSlug
+        }
+      });
+      const newContent_0 = {
+        ...tabContentRef.current,
+        [tabSlug]: result.component
+      };
+      tabContentRef.current = newContent_0;
+      setTabContent(newContent_0);
+    } catch (error) {
+      // On revalidate failure, keep showing cached content
+      if (hasCachedContent && revalidate) {
+        return;
+      }
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+      const handleRetry = () => {
+        // Clear the error and retry loading
+        const clearedContent = {
+          ...tabContentRef.current
+        };
+        delete clearedContent[tabSlug];
+        tabContentRef.current = clearedContent;
+        setTabContent(clearedContent);
+        void loadTabContent(tabSlug);
+      };
+      const newContent = {
+        ...tabContentRef.current,
+        [tabSlug]: /*#__PURE__*/_jsx(TabError, {
+          message: errorMessage,
+          onRetry: handleRetry
+        })
+      };
+      tabContentRef.current = newContent;
+      setTabContent(newContent);
+    } finally {
+      loadingTabsRef.current.delete(tabSlug);
+      setLoadingTab(null);
+    }
+  }, [serverFunction]);
+  const reloadTabContent = useCallback(tabSlug_0 => {
+    // Clear cached content to force reload
+    const clearedContent_0 = {
+      ...tabContentRef.current
+    };
+    delete clearedContent_0[tabSlug_0];
+    tabContentRef.current = clearedContent_0;
+    setTabContent(clearedContent_0);
+    void loadTabContent(tabSlug_0);
+  }, [loadTabContent]);
+  const handleTabChange = useCallback(slug => {
+    setActiveTabID(slug);
+    void setPreference(PREFERENCE_KEYS.NAV_SIDEBAR_ACTIVE_TAB, {
+      activeTab: slug
+    });
+    // Only revalidate tabs that can be loaded via serverFunction
+    // Pre-rendered React elements (like default nav) can't be revalidated
+    const tab = tabs.find(t => t.slug === slug);
+    void loadTabContent(slug, {
+      revalidate: tab?.lazyLoadable ?? false
+    });
+  }, [setPreference, loadTabContent, tabs]);
+  const handleTabKeyDown = useCallback((e, currentIndex) => {
+    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+      e.preventDefault();
+      const direction = e.key === 'ArrowLeft' ? -1 : 1;
+      const newIndex = (currentIndex + direction + tabs.length) % tabs.length;
+      const newTab = tabs[newIndex];
+      handleTabChange(newTab.slug);
+      // Focus will be handled by the tabIndex change
+      setTimeout(() => {
+        document.querySelector(`.${baseClass}__tab--active`)?.focus();
+      }, 0);
+    }
+  }, [baseClass, handleTabChange, tabs]);
+  const activeContent = tabContent[activeTabID];
+  // If there's only one tab (the default nav), render it without tab UI
+  if (tabs.length === 1) {
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: activeContent
+    });
+  }
+  return /*#__PURE__*/_jsx(SidebarTabsProvider, {
+    activeTabSlug: activeTabID,
+    reloadTabContent: reloadTabContent,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: baseClass,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__tabs`,
+        role: "tablist",
+        children: tabs.map((tab_0, index) => {
+          const isActive = tab_0.slug === activeTabID;
+          return /*#__PURE__*/_jsxs("button", {
+            "aria-selected": isActive,
+            className: `${baseClass}__tab ${isActive ? `${baseClass}__tab--active` : ''}`,
+            onClick: () => handleTabChange(tab_0.slug),
+            onKeyDown: e_0 => handleTabKeyDown(e_0, index),
+            onMouseEnter: () => setHoveredTab(tab_0.slug),
+            onMouseLeave: () => setHoveredTab(null),
+            role: "tab",
+            tabIndex: isActive ? 0 : -1,
+            type: "button",
+            children: [/*#__PURE__*/_jsx(Tooltip, {
+              className: `${baseClass}__tooltip`,
+              position: "bottom",
+              show: hoveredTab === tab_0.slug,
+              children: tab_0.label
+            }), /*#__PURE__*/_jsx("span", {
+              className: `${baseClass}__tab-icon`,
+              children: tab_0.icon
+            }), /*#__PURE__*/_jsx("span", {
+              className: `${baseClass}__tab-label`,
+              children: tab_0.label
+            })]
+          }, tab_0.slug);
+        })
+      }), /*#__PURE__*/_jsxs("div", {
+        className: `${baseClass}__content`,
+        role: "tabpanel",
+        children: [/*#__PURE__*/_jsx(DelayedSpinner, {
+          baseClass: baseClass,
+          delay: loadingDelay,
+          isLoading: loadingTab === activeTabID
+        }), tabs.map(tab_1 => {
+          const content = tabContent[tab_1.slug];
+          if (!content) {
+            return null;
+          }
+          const isActive_0 = tab_1.slug === activeTabID && loadingTab !== activeTabID;
+          return /*#__PURE__*/_jsx("div", {
+            style: isActive_0 ? undefined : {
+              display: 'none'
+            },
+            children: content
+          }, tab_1.slug);
+        })]
+      })]
+    })
+  });
+};
+//# sourceMappingURL=index.client.js.map

package/dist/elements/Nav/SidebarTabs/index.client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.client.js","names":["PREFERENCE_KEYS","React","useCallback","useRef","useState","usePreferences","useServerFunctions","SidebarTabsProvider","DelayedSpinner","Tooltip","TabError","SidebarTabsClient","baseClass","initialActiveTabID","initialTabContents","loadingDelay","tabs","setPreference","serverFunction","activeTabID","setActiveTabID","tabContent","setTabContent","loadingTab","setLoadingTab","hoveredTab","setHoveredTab","loadingTabsRef","Set","tabContentRef","useEffect","current","prev","loadTabContent","tabSlug","revalidate","hasCachedContent","Boolean","has","add","result","name","args","newContent","component","error","errorMessage","Error","message","handleRetry","clearedContent","_jsx","onRetry","delete","reloadTabContent","handleTabChange","slug","NAV_SIDEBAR_ACTIVE_TAB","activeTab","tab","find","t","lazyLoadable","handleTabKeyDown","e","currentIndex","key","preventDefault","direction","newIndex","length","newTab","setTimeout","document","querySelector","focus","activeContent","_Fragment","activeTabSlug","_jsxs","className","role","map","index","isActive","onClick","onKeyDown","onMouseEnter","onMouseLeave","tabIndex","type","position","show","label","icon","delay","isLoading","content","style","undefined","display"],"sources":["../../../../src/elements/Nav/SidebarTabs/index.client.tsx"],"sourcesContent":["'use client'\n\nimport { PREFERENCE_KEYS } from 'payload/shared'\nimport React, { useCallback, useRef, useState } from 'react'\n\nimport type { RenderTabServerFnArgs, RenderTabServerFnReturnType } from './renderTabServerFn.js'\n\nimport { usePreferences } from '../../../providers/Preferences/index.js'\nimport { useServerFunctions } from '../../../providers/ServerFunctions/index.js'\nimport { SidebarTabsProvider } from '../../../providers/SidebarTabs/index.js'\nimport { DelayedSpinner } from '../../DelayedSpinner/index.js'\nimport { Tooltip } from '../../Tooltip/index.js'\nimport { TabError } from './TabError/index.js'\n\nexport type TabMetadata = {\n  icon: React.ReactNode\n  isDefaultActive?: boolean\n  label: string\n  /** Whether this tab can be loaded/revalidated via serverFunction */\n  lazyLoadable?: boolean\n  slug: string\n}\n\nexport type SidebarTabsClientProps = {\n  baseClass: string\n  initialActiveTabID: string\n  initialTabContents: Record<string, React.ReactNode>\n  /**\n   * Delay before showing loading spinner (in ms), prevents flashing on fast loads\n   * @default 200\n   */\n  loadingDelay?: number\n  tabs: TabMetadata[]\n}\n\nexport const SidebarTabsClient: React.FC<SidebarTabsClientProps> = ({\n  baseClass,\n  initialActiveTabID,\n  initialTabContents,\n  loadingDelay = 200,\n  tabs,\n}) => {\n  const { setPreference } = usePreferences()\n  const { serverFunction } = useServerFunctions()\n\n  const [activeTabID, setActiveTabID] = useState(initialActiveTabID)\n  const [tabContent, setTabContent] = useState<Record<string, React.ReactNode>>(initialTabContents)\n  const [loadingTab, setLoadingTab] = useState<null | string>(null)\n  const [hoveredTab, setHoveredTab] = useState<null | string>(null)\n  const loadingTabsRef = useRef<Set<string>>(new Set())\n  const tabContentRef = useRef(initialTabContents)\n\n  // Update cached content when server provides new initialTabContents\n  // This is needed because useState only uses initialValue on first mount\n  React.useEffect(() => {\n    tabContentRef.current = { ...tabContentRef.current, ...initialTabContents }\n    setTabContent((prev) => ({ ...prev, ...initialTabContents }))\n  }, [initialTabContents])\n\n  const loadTabContent = useCallback(\n    async (tabSlug: string, { revalidate = false }: { revalidate?: boolean } = {}) => {\n      const hasCachedContent = Boolean(tabContentRef.current[tabSlug])\n\n      // Skip if already loaded (unless revalidating) or currently loading\n      if ((hasCachedContent && !revalidate) || loadingTabsRef.current.has(tabSlug)) {\n        return\n      }\n\n      // Mark as loading - only show spinner if no cached content\n      loadingTabsRef.current.add(tabSlug)\n      if (!hasCachedContent) {\n        setLoadingTab(tabSlug)\n      }\n\n      try {\n        const result = (await serverFunction({\n          name: 'render-tab',\n          args: { tabSlug } as RenderTabServerFnArgs,\n        })) as RenderTabServerFnReturnType\n\n        const newContent = {\n          ...tabContentRef.current,\n          [tabSlug]: result.component,\n        }\n\n        tabContentRef.current = newContent\n        setTabContent(newContent)\n      } catch (error) {\n        // On revalidate failure, keep showing cached content\n        if (hasCachedContent && revalidate) {\n          return\n        }\n\n        const errorMessage = error instanceof Error ? error.message : 'Unknown error'\n\n        const handleRetry = () => {\n          // Clear the error and retry loading\n          const clearedContent = { ...tabContentRef.current }\n          delete clearedContent[tabSlug]\n          tabContentRef.current = clearedContent\n          setTabContent(clearedContent)\n          void loadTabContent(tabSlug)\n        }\n\n        const newContent = {\n          ...tabContentRef.current,\n          [tabSlug]: <TabError message={errorMessage} onRetry={handleRetry} />,\n        }\n\n        tabContentRef.current = newContent\n        setTabContent(newContent)\n      } finally {\n        loadingTabsRef.current.delete(tabSlug)\n        setLoadingTab(null)\n      }\n    },\n    [serverFunction],\n  )\n\n  const reloadTabContent = useCallback(\n    (tabSlug: string) => {\n      // Clear cached content to force reload\n      const clearedContent = { ...tabContentRef.current }\n      delete clearedContent[tabSlug]\n      tabContentRef.current = clearedContent\n      setTabContent(clearedContent)\n\n      void loadTabContent(tabSlug)\n    },\n    [loadTabContent],\n  )\n\n  const handleTabChange = useCallback(\n    (slug: string) => {\n      setActiveTabID(slug)\n      void setPreference(PREFERENCE_KEYS.NAV_SIDEBAR_ACTIVE_TAB, { activeTab: slug })\n      // Only revalidate tabs that can be loaded via serverFunction\n      // Pre-rendered React elements (like default nav) can't be revalidated\n      const tab = tabs.find((t) => t.slug === slug)\n      void loadTabContent(slug, { revalidate: tab?.lazyLoadable ?? false })\n    },\n    [setPreference, loadTabContent, tabs],\n  )\n\n  const handleTabKeyDown = useCallback(\n    (e: React.KeyboardEvent, currentIndex: number) => {\n      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n        e.preventDefault()\n        const direction = e.key === 'ArrowLeft' ? -1 : 1\n        const newIndex = (currentIndex + direction + tabs.length) % tabs.length\n        const newTab = tabs[newIndex]\n        handleTabChange(newTab.slug)\n        // Focus will be handled by the tabIndex change\n        setTimeout(() => {\n          document.querySelector<HTMLButtonElement>(`.${baseClass}__tab--active`)?.focus()\n        }, 0)\n      }\n    },\n    [baseClass, handleTabChange, tabs],\n  )\n\n  const activeContent = tabContent[activeTabID]\n\n  // If there's only one tab (the default nav), render it without tab UI\n  if (tabs.length === 1) {\n    return <>{activeContent}</>\n  }\n\n  return (\n    <SidebarTabsProvider activeTabSlug={activeTabID} reloadTabContent={reloadTabContent}>\n      <div className={baseClass}>\n        <div className={`${baseClass}__tabs`} role=\"tablist\">\n          {tabs.map((tab, index) => {\n            const isActive = tab.slug === activeTabID\n\n            return (\n              <button\n                aria-selected={isActive}\n                className={`${baseClass}__tab ${isActive ? `${baseClass}__tab--active` : ''}`}\n                key={tab.slug}\n                onClick={() => handleTabChange(tab.slug)}\n                onKeyDown={(e) => handleTabKeyDown(e, index)}\n                onMouseEnter={() => setHoveredTab(tab.slug)}\n                onMouseLeave={() => setHoveredTab(null)}\n                role=\"tab\"\n                tabIndex={isActive ? 0 : -1}\n                type=\"button\"\n              >\n                <Tooltip\n                  className={`${baseClass}__tooltip`}\n                  position=\"bottom\"\n                  show={hoveredTab === tab.slug}\n                >\n                  {tab.label}\n                </Tooltip>\n                <span className={`${baseClass}__tab-icon`}>{tab.icon}</span>\n                <span className={`${baseClass}__tab-label`}>{tab.label}</span>\n              </button>\n            )\n          })}\n        </div>\n        <div className={`${baseClass}__content`} role=\"tabpanel\">\n          <DelayedSpinner\n            baseClass={baseClass}\n            delay={loadingDelay}\n            isLoading={loadingTab === activeTabID}\n          />\n          {tabs.map((tab) => {\n            const content = tabContent[tab.slug]\n            if (!content) {\n              return null\n            }\n            const isActive = tab.slug === activeTabID && loadingTab !== activeTabID\n            return (\n              <div key={tab.slug} style={isActive ? undefined : { display: 'none' }}>\n                {content}\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    </SidebarTabsProvider>\n  )\n}\n"],"mappings":"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","ignoreList":[]}