@payloadcms/ui 4.0.0-internal.77191e5 → 4.0.0-internal.7b53b6d

package/dist/elements/Modal/index.js

@@ -1,4 +1,84 @@
 'use client';
 
-export { Modal, useModal } from '@faceless-ui/modal';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Modal as FacelessModal, useModal } from '@faceless-ui/modal';
+import React, { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+import { useModalFocus } from '../../providers/ModalFocus/index.js';
+export { useModal } from '@faceless-ui/modal';
+export const Modal = props => {
+  const {
+    id,
+    slug,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    focusTrapOptions,
+    trapFocus = true
+  } = props;
+  const modalID = id || slug;
+  const {
+    modalState
+  } = useModal();
+  const isOpen = Boolean(modalState[slug]?.isOpen);
+  const popupFocusTargetsRef = useRef([]);
+  const {
+    getReturnFocusTargets
+  } = useModalFocus();
+  useLayoutEffect(() => {
+    if (isOpen) {
+      // Freeze each modal's targets before focus moves into it or a nested modal.
+      popupFocusTargetsRef.current = getReturnFocusTargets();
+    }
+  }, [getReturnFocusTargets, isOpen]);
+  const options = useMemo(() => ({
+    escapeDeactivates: false,
+    initialFocus: () => {
+      const modal = document.getElementById(modalID);
+      const heading = modal?.querySelector('h1, h2, h3, h4, h5, h6');
+      if (heading) {
+        heading.tabIndex = -1;
+      }
+      return heading ?? modal;
+    },
+    setReturnFocus: opener => (popupFocusTargetsRef.current.length ? popupFocusTargetsRef.current : [opener]).find(element => element?.isConnected && element !== document.body && element !== document.documentElement && !element.closest('[inert]') && !element.matches(':disabled') && element.getClientRects().length > 0 && getComputedStyle(element).visibility !== 'hidden') ?? false,
+    ...focusTrapOptions
+  }), [modalID, focusTrapOptions]);
+  useEffect(() => {
+    if (!isOpen || ariaLabel || ariaLabelledBy) {
+      return;
+    }
+    let hasFocusedTitle = false;
+    const updateTitle = () => {
+      const modal_0 = document.getElementById(modalID);
+      const heading_0 = modal_0?.querySelector('h1, h2, h3, h4, h5, h6');
+      if (modal_0 && heading_0) {
+        if (!heading_0.id) {
+          heading_0.id = `modal-title-${slug}`;
+        }
+        modal_0.setAttribute('aria-labelledby', heading_0.id);
+        modal_0.removeAttribute('aria-label');
+        if (!hasFocusedTitle && trapFocus && focusTrapOptions?.initialFocus === undefined && !modal_0.closest('[inert]') && (document.activeElement === modal_0 || document.activeElement === document.body)) {
+          heading_0.tabIndex = -1;
+          heading_0.focus({
+            preventScroll: true
+          });
+          hasFocusedTitle = document.activeElement === heading_0;
+        }
+      }
+    };
+    updateTitle();
+    const observer = new MutationObserver(updateTitle);
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+    return () => observer.disconnect();
+  }, [isOpen, modalID, slug, ariaLabel, ariaLabelledBy, trapFocus, focusTrapOptions?.initialFocus]);
+  return /*#__PURE__*/_jsx(FacelessModal, {
+    ...props,
+    "data-payload-modal-slug": slug,
+    focusTrapOptions: options,
+    id: modalID,
+    tabIndex: -1
+  });
+};
 //# sourceMappingURL=index.js.map

package/dist/elements/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Modal","useModal"],"sources":["../../../src/elements/Modal/index.tsx"],"sourcesContent":["'use client'\nexport { Modal, useModal } from '@faceless-ui/modal'\n"],"mappings":"AAAA;;AACA,SAASA,KAAK,EAAEC,QAAQ,QAAQ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["Modal","FacelessModal","useModal","React","useEffect","useLayoutEffect","useMemo","useRef","useModalFocus","props","id","slug","ariaLabel","ariaLabelledBy","focusTrapOptions","trapFocus","modalID","modalState","isOpen","Boolean","popupFocusTargetsRef","getReturnFocusTargets","current","options","escapeDeactivates","initialFocus","modal","document","getElementById","heading","querySelector","tabIndex","setReturnFocus","opener","length","find","element","isConnected","body","documentElement","closest","matches","getClientRects","getComputedStyle","visibility","hasFocusedTitle","updateTitle","setAttribute","removeAttribute","undefined","activeElement","focus","preventScroll","observer","MutationObserver","observe","childList","subtree","disconnect","_jsx"],"sources":["../../../src/elements/Modal/index.tsx"],"sourcesContent":["'use client'\n\nimport type { ComponentProps } from 'react'\n\nimport { Modal as FacelessModal, useModal } from '@faceless-ui/modal'\nimport React, { useEffect, useLayoutEffect, useMemo, useRef } from 'react'\n\nimport { useModalFocus } from '../../providers/ModalFocus/index.js'\n\nexport { useModal } from '@faceless-ui/modal'\n\nexport const Modal: React.FC<ComponentProps<typeof FacelessModal>> = (props) => {\n  const {\n    id,\n    slug,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    focusTrapOptions,\n    trapFocus = true,\n  } = props\n  const modalID = id || slug\n  const { modalState } = useModal()\n  const isOpen = Boolean(modalState[slug]?.isOpen)\n  const popupFocusTargetsRef = useRef<readonly HTMLElement[]>([])\n  const { getReturnFocusTargets } = useModalFocus()\n\n  useLayoutEffect(() => {\n    if (isOpen) {\n      // Freeze each modal's targets before focus moves into it or a nested modal.\n      popupFocusTargetsRef.current = getReturnFocusTargets()\n    }\n  }, [getReturnFocusTargets, isOpen])\n  const options = useMemo(\n    () => ({\n      escapeDeactivates: false,\n      initialFocus: () => {\n        const modal = document.getElementById(modalID)\n        const heading = modal?.querySelector<HTMLElement>('h1, h2, h3, h4, h5, h6')\n\n        if (heading) {\n          heading.tabIndex = -1\n        }\n        return heading ?? modal\n      },\n      setReturnFocus: (opener: HTMLElement) =>\n        (popupFocusTargetsRef.current.length ? popupFocusTargetsRef.current : [opener]).find(\n          (element) =>\n            element?.isConnected &&\n            element !== document.body &&\n            element !== document.documentElement &&\n            !element.closest('[inert]') &&\n            !element.matches(':disabled') &&\n            element.getClientRects().length > 0 &&\n            getComputedStyle(element).visibility !== 'hidden',\n        ) ?? false,\n      ...focusTrapOptions,\n    }),\n    [modalID, focusTrapOptions],\n  )\n\n  useEffect(() => {\n    if (!isOpen || ariaLabel || ariaLabelledBy) {\n      return\n    }\n\n    let hasFocusedTitle = false\n\n    const updateTitle = () => {\n      const modal = document.getElementById(modalID)\n      const heading = modal?.querySelector<HTMLElement>('h1, h2, h3, h4, h5, h6')\n\n      if (modal && heading) {\n        if (!heading.id) {\n          heading.id = `modal-title-${slug}`\n        }\n        modal.setAttribute('aria-labelledby', heading.id)\n        modal.removeAttribute('aria-label')\n        if (\n          !hasFocusedTitle &&\n          trapFocus &&\n          focusTrapOptions?.initialFocus === undefined &&\n          !modal.closest('[inert]') &&\n          (document.activeElement === modal || document.activeElement === document.body)\n        ) {\n          heading.tabIndex = -1\n          heading.focus({ preventScroll: true })\n          hasFocusedTitle = document.activeElement === heading\n        }\n      }\n    }\n\n    updateTitle()\n    const observer = new MutationObserver(updateTitle)\n    observer.observe(document.body, { childList: true, subtree: true })\n    return () => observer.disconnect()\n  }, [isOpen, modalID, slug, ariaLabel, ariaLabelledBy, trapFocus, focusTrapOptions?.initialFocus])\n\n  return (\n    <FacelessModal\n      {...props}\n      data-payload-modal-slug={slug}\n      focusTrapOptions={options}\n      id={modalID}\n      tabIndex={-1}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Nav/NavSidebarToggle/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAeA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Nav/NavSidebarToggle/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CA2BA,CAAA"}

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

@@ -1,52 +1,46 @@
 'use client';
 
-import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
+import { useTranslation } from '../../../providers/Translation/index.js';
 import { SidebarToggle } from '../../SidebarToggle/index.js';
 import { useNav } from '../context.js';
 /**
  * @internal
  */
-export const NavSidebarToggle = t0 => {
-  const $ = _c(6);
-  const {
-    baseClass
-  } = t0;
+export const NavSidebarToggle = ({
+  baseClass
+}) => {
   const {
     navOpen,
+    navToggleRef,
     setNavOpen
   } = useNav();
-  const t1 = `${baseClass}__mobile-close`;
-  let t2;
-  if ($[0] !== setNavOpen) {
-    t2 = () => {
-      setNavOpen(false);
-    };
-    $[0] = setNavOpen;
-    $[1] = t2;
-  } else {
-    t2 = $[1];
-  }
-  const t3 = !navOpen ? -1 : undefined;
-  let t4;
-  if ($[2] !== t1 || $[3] !== t2 || $[4] !== t3) {
-    t4 = _jsx("button", {
-      className: t1,
-      onClick: t2,
-      tabIndex: t3,
-      type: "button",
-      children: _jsx(SidebarToggle, {
-        isActive: true
-      })
-    });
-    $[2] = t1;
-    $[3] = t2;
-    $[4] = t3;
-    $[5] = t4;
-  } else {
-    t4 = $[5];
-  }
-  return t4;
+  const {
+    t
+  } = useTranslation();
+  const shouldReturnFocus = React.useRef(false);
+  React.useEffect(() => {
+    if (!navOpen && shouldReturnFocus.current) {
+      shouldReturnFocus.current = false;
+      navToggleRef?.current?.focus({
+        preventScroll: true
+      });
+    }
+  }, [navOpen, navToggleRef]);
+  return /*#__PURE__*/_jsx("button", {
+    "aria-expanded": navOpen,
+    "aria-label": t('general:hideSidebar'),
+    className: `${baseClass}__close`,
+    onClick: () => {
+      shouldReturnFocus.current = true;
+      setNavOpen(false, true);
+    },
+    tabIndex: !navOpen ? -1 : undefined,
+    type: "button",
+    children: /*#__PURE__*/_jsx(SidebarToggle, {
+      isActive: true
+    })
+  });
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +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":[]}
+{"version":3,"file":"index.js","names":["React","useTranslation","SidebarToggle","useNav","NavSidebarToggle","baseClass","navOpen","navToggleRef","setNavOpen","t","shouldReturnFocus","useRef","useEffect","current","focus","preventScroll","_jsx","className","onClick","tabIndex","undefined","type","isActive"],"sources":["../../../../src/elements/Nav/NavSidebarToggle/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useTranslation } from '../../../providers/Translation/index.js'\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, navToggleRef, setNavOpen } = useNav()\n  const { t } = useTranslation()\n  const shouldReturnFocus = React.useRef(false)\n\n  React.useEffect(() => {\n    if (!navOpen && shouldReturnFocus.current) {\n      shouldReturnFocus.current = false\n      navToggleRef?.current?.focus({ preventScroll: true })\n    }\n  }, [navOpen, navToggleRef])\n\n  return (\n    <button\n      aria-expanded={navOpen}\n      aria-label={t('general:hideSidebar')}\n      className={`${baseClass}__close`}\n      onClick={() => {\n        shouldReturnFocus.current = true\n        setNavOpen(false, true)\n      }}\n      tabIndex={!navOpen ? -1 : undefined}\n      type=\"button\"\n    >\n      <SidebarToggle isActive />\n    </button>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAC/B,SAASC,aAAa,QAAQ;AAC9B,SAASC,MAAM,QAAQ;AAEvB;;;AAGA,OAAO,MAAMC,gBAAA,GAERA,CAAC;EAAEC;AAAS,CAAE;EACjB,MAAM;IAAEC,OAAO;IAAEC,YAAY;IAAEC;EAAU,CAAE,GAAGL,MAAA;EAC9C,MAAM;IAAEM;EAAC,CAAE,GAAGR,cAAA;EACd,MAAMS,iBAAA,GAAoBV,KAAA,CAAMW,MAAM,CAAC;EAEvCX,KAAA,CAAMY,SAAS,CAAC;IACd,IAAI,CAACN,OAAA,IAAWI,iBAAA,CAAkBG,OAAO,EAAE;MACzCH,iBAAA,CAAkBG,OAAO,GAAG;MAC5BN,YAAA,EAAcM,OAAA,EAASC,KAAA,CAAM;QAAEC,aAAA,EAAe;MAAK;IACrD;EACF,GAAG,CAACT,OAAA,EAASC,YAAA,CAAa;EAE1B,oBACES,IAAA,CAAC;IACC,iBAAeV,OAAA;IACf,cAAYG,CAAA,CAAE;IACdQ,SAAA,EAAW,GAAGZ,SAAA,SAAkB;IAChCa,OAAA,EAASA,CAAA;MACPR,iBAAA,CAAkBG,OAAO,GAAG;MAC5BL,UAAA,CAAW,OAAO;IACpB;IACAW,QAAA,EAAU,CAACb,OAAA,GAAU,CAAC,IAAIc,SAAA;IAC1BC,IAAA,EAAK;cAEL,aAAAL,IAAA,CAACd,aAAA;MAAcoB,QAAQ;;;AAG7B","ignoreList":[]}

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

@@ -6,5 +6,6 @@ import './index.css';
 export declare const NavWrapper: React.FC<{
     baseClass?: string;
     children: React.ReactNode;
+    header?: React.ReactNode;
 }>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Nav/NavWrapper/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,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;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB,CAuBA,CAAA"}

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

@@ -1,24 +1,29 @@
 'use client';
 
 import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import { useEmbed } from '../../../providers/Embed/index.js';
 import { useNav } from '../context.js';
 import './index.css';
 /**
  * @internal
  */
 export const NavWrapper = props => {
-  const $ = _c(10);
+  const $ = _c(11);
   const {
     baseClass,
-    children
+    children,
+    header
   } = props;
   const {
     hydrated,
     navOpen,
     navRef
   } = useNav();
+  const {
+    isEmbedded
+  } = useEmbed();
   const t0 = navOpen && `${baseClass}--nav-open`;
   const t1 = hydrated && `${baseClass}--nav-hydrated`;
   let t2;
@@ -33,26 +38,27 @@ export const NavWrapper = props => {
   }
   const t3 = t2.join(" ");
   const t4 = !navOpen ? true : undefined;
-  const t5 = `${baseClass}__scroll`;
+  const t5 = !isEmbedded && header;
   let t6;
-  if ($[4] !== children || $[5] !== navRef || $[6] !== t3 || $[7] !== t4 || $[8] !== t5) {
-    t6 = _jsx("aside", {
+  if ($[4] !== baseClass || $[5] !== children || $[6] !== navRef || $[7] !== t3 || $[8] !== t4 || $[9] !== t5) {
+    t6 = _jsxs("aside", {
       className: t3,
       inert: t4,
-      children: _jsx("div", {
-        className: t5,
+      children: [t5, _jsx("div", {
+        className: `${baseClass}__scroll`,
         ref: navRef,
         children
-      })
+      })]
     });
-    $[4] = children;
-    $[5] = navRef;
-    $[6] = t3;
-    $[7] = t4;
-    $[8] = t5;
-    $[9] = t6;
+    $[4] = baseClass;
+    $[5] = children;
+    $[6] = navRef;
+    $[7] = t3;
+    $[8] = t4;
+    $[9] = t5;
+    $[10] = t6;
   } else {
-    t6 = $[9];
+    t6 = $[10];
   }
   return t6;
 };

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

@@ -1 +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":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useEmbed","useNav","NavWrapper","props","$","baseClass","children","header","hydrated","navOpen","navRef","isEmbedded","t0","t1","t2","filter","Boolean","t3","join","t4","undefined","t5","t6","_jsxs","className","inert","_jsx","ref"],"sources":["../../../../src/elements/Nav/NavWrapper/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useEmbed } from '../../../providers/Embed/index.js'\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  header?: React.ReactNode\n}> = (props) => {\n  const { baseClass, children, header } = props\n\n  const { hydrated, navOpen, navRef } = useNav()\n  const { isEmbedded } = useEmbed()\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      {!isEmbedded && header}\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,QAAQ,QAAQ;AACzB,SAASC,MAAM,QAAQ;AACvB,OAAO;AAEP;;;AAGA,OAAO,MAAMC,UAAA,GAIRC,KAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EACH;IAAAO,SAAA;IAAAC,QAAA;IAAAC;EAAA,IAAwCJ,KAAA;EAExC;IAAAK,QAAA;IAAAC,OAAA;IAAAC;EAAA,IAAsCT,MAAA;EACtC;IAAAU;EAAA,IAAuBX,QAAA;EAMjB,MAAAY,EAAA,GAAAH,OAAmC,IAAnC,GAAcJ,SAAA,YAAqB;EACnC,MAAAQ,EAAA,GAAAL,QAAwC,IAAxC,GAAeH,SAAA,gBAAyB;EAAA,IAAAS,EAAA;EAAA,IAAAV,CAAA,QAAAC,SAAA,IAAAD,CAAA,QAAAQ,EAAA,IAAAR,CAAA,QAAAS,EAAA;IAH/BC,EAAA,IACTT,SAAA,EACAO,EAAmC,EACnCC,EAAwC,CACzC,CAAAE,MACQ,CAACC,OAAA;IAAAZ,CAAA,MAAAC,SAAA;IAAAD,CAAA,MAAAQ,EAAA;IAAAR,CAAA,MAAAS,EAAA;IAAAT,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EALC,MAAAa,EAAA,GAAAH,EAKD,CAAAI,IACH,CAAC;EACD,MAAAC,EAAA,IAACV,OAAiB,GAAlB,IAAkB,GAAlBW,SAAkB;EAExB,MAAAC,EAAA,IAACV,UAAc,IAAfJ,MAAe;EAAA,IAAAe,EAAA;EAAA,IAAAlB,CAAA,QAAAC,SAAA,IAAAD,CAAA,QAAAE,QAAA,IAAAF,CAAA,QAAAM,MAAA,IAAAN,CAAA,QAAAa,EAAA,IAAAb,CAAA,QAAAe,EAAA,IAAAf,CAAA,QAAAiB,EAAA;IAVlBC,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EACYP,EAMH;MAAAQ,KAAA,EACDN,EAAkB;MAAAb,QAAA,E,CAExBe,EAAe,EAChBK,IAAA,CAAC;QAAAF,SAAA,EAAe,GAAGnB,SAAA,UAAmB;QAAAsB,GAAA,EAAOjB,MAAA;QAAAJ;;;;;;;;;;;;;SAX/CgB,E;CAgBJ","ignoreList":[]}

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

@@ -1 +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,aAAa,CAAA;AAIpB,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Nav/SettingsMenuButton/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAKvC,OAAO,aAAa,CAAA;AAIpB,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,CAsBhE,CAAA"}

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

@@ -28,6 +28,7 @@ export const SettingsMenuButton = t0 => {
       className: baseClass,
       horizontalAlign: "left",
       id: "settings-menu",
+      popupType: "menu",
       size: "small",
       verticalAlign: "bottom",
       children: settingsMenu.map(_temp)

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

@@ -1 +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.css'\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":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","Fragment","GearIcon","useTranslation","Popup","baseClass","SettingsMenuButton","t0","$","settingsMenu","t","length","t1","_jsx","button","ariaLabel","horizontalAlign","id","popupType","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.css'\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      popupType=\"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;EAEd,IAAI,CAACM,YAAwC,IAAxBA,YAAA,CAAAE,MAAmB,KAAK;IAAA,OACpC;EAAA;EACT,IAAAC,EAAA;EAAA,IAAAJ,CAAA,QAAAC,YAAA,IAAAD,CAAA,QAAAE,CAAA;IAGEE,EAAA,GAAAC,IAAA,CAACT,KAAA;MAAAU,MAAA,EACSD,IAAA,CAACX,QAAA;QAAAa,SAAA,EAAoBL,CAAA,CAAE;;iBACpBL,SAAA;MAAAW,eAAA,EACK;MAAAC,EAAA,EACb;MAAAC,SAAA,EACO;MAAAC,IAAA,EACL;MAAAC,aAAA,EACS;MAAAC,QAAA,EAEbZ,YAAA,CAAAa,GAAgB,CAACC,KACwB;;;;;;;;SAV5CX,E;CAcJ;AAtBqE,SAAAW,MAAAC,IAAA,EAAAC,CAAA;EAAA,OAkB7DZ,IAAA,CAACZ,QAAA;IAAAoB,QAAA,EAA0CG;KAA5B,sBAAsBC,CAAA,EAAG;AAAA","ignoreList":[]}

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

@@ -1 +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":[]}
+{"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,EAAeT,SAAA;MAAAU,QAAA,EACdC,KAAA,CAAC;QAAAF,SAAA,EAAe,GAAGT,SAAA,WAAoB;QAAAU,QAAA,E,CACrCF,IAAA,CAAC;UAAAE,QAAA,EAAMN;YACPI,IAAA,CAAC;UAAAC,SAAA,EAAkB,GAAGT,SAAA,SAAkB;UAAAY,OAAA,EAAWP,OAAA;UAAAQ,IAAA,EAAc;UAAAH,QAAA,EAC9DJ,CAAA,CAAE;;;;;;;;;;;SAJTC,E;CASJ","ignoreList":[]}

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

@@ -1 +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,CAmM9D,CAAA"}
+{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../../../../src/elements/Nav/SidebarTabs/index.client.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA+C,MAAM,OAAO,CAAA;AAWnE,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,CAwN9D,CAAA"}

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

@@ -2,7 +2,7 @@
 
 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 React, { useCallback, useId, 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';
@@ -22,12 +22,15 @@ export const SidebarTabsClient = ({
   const {
     serverFunction
   } = useServerFunctions();
+  const tabsID = useId();
   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);
+  // The retry button calls loadTabContent through this, since loadTabContent can't call itself
+  const loadTabContentRef = useRef(null);
   // Update cached content when server provides new initialTabContents
   // This is needed because useState only uses initialValue on first mount
   React.useEffect(() => {
@@ -58,7 +61,7 @@ export const SidebarTabsClient = ({
       const result = await serverFunction({
         name: 'render-tab',
         args: {
-          ...serverArgs,
+          searchParams: serverArgs?.searchParams,
           tabSlug
         }
       });
@@ -83,7 +86,7 @@ export const SidebarTabsClient = ({
         delete clearedContent[tabSlug];
         tabContentRef.current = clearedContent;
         setTabContent(clearedContent);
-        void loadTabContent(tabSlug, {
+        void loadTabContentRef.current?.(tabSlug, {
           serverArgs
         });
       };
@@ -98,9 +101,12 @@ export const SidebarTabsClient = ({
       setTabContent(newContent);
     } finally {
       loadingTabsRef.current.delete(tabSlug);
-      setLoadingTab(null);
+      setLoadingTab(currentTab => currentTab === tabSlug ? null : currentTab);
     }
   }, [serverFunction]);
+  React.useEffect(() => {
+    loadTabContentRef.current = loadTabContent;
+  }, [loadTabContent]);
   const reloadTabContent = useCallback((tabSlug_0, serverArgs_0) => {
     // Clear cached content to force reload
     const clearedContent_0 = {
@@ -151,13 +157,15 @@ export const SidebarTabsClient = ({
     children: /*#__PURE__*/_jsxs("div", {
       className: baseClass,
       children: [/*#__PURE__*/_jsx("div", {
-        className: `${baseClass}__tabs`,
+        className: `${baseClass}__tabs scrollbar-thin`,
         role: "tablist",
         children: tabs.map((tab_0, index) => {
           const isActive = tab_0.slug === activeTabID;
           return /*#__PURE__*/_jsxs("button", {
+            "aria-controls": `${tabsID}-panel-${tab_0.slug}`,
             "aria-selected": isActive,
             className: `${baseClass}__tab ${isActive ? `${baseClass}__tab--active` : ''}`,
+            id: `${tabsID}-tab-${tab_0.slug}`,
             onClick: () => handleTabChange(tab_0.slug),
             onKeyDown: e_0 => handleTabKeyDown(e_0, index),
             onMouseEnter: () => setHoveredTab(tab_0.slug),
@@ -179,26 +187,36 @@ export const SidebarTabsClient = ({
             })]
           }, tab_0.slug);
         })
-      }), /*#__PURE__*/_jsxs("div", {
+      }), /*#__PURE__*/_jsx("div", {
         className: `${baseClass}__content`,
-        role: "tabpanel",
-        children: [/*#__PURE__*/_jsx(DelayedSpinner, {
-          baseClass: baseClass,
-          delay: loadingDelay,
-          isLoading: loadingTab === activeTabID
-        }), tabs.map(tab_1 => {
+        children: 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
+          const isActive_0 = tab_1.slug === activeTabID;
+          return /*#__PURE__*/_jsxs("div", {
+            "aria-labelledby": `${tabsID}-tab-${tab_1.slug}`,
+            hidden: !isActive_0,
+            id: `${tabsID}-panel-${tab_1.slug}`,
+            role: "tabpanel",
+            tabIndex: -1,
+            children: [/*#__PURE__*/_jsx(DelayedSpinner, {
+              baseClass: baseClass,
+              delay: loadingDelay,
+              isLoading: isActive_0 && loadingTab === tab_1.slug
+            }), /*#__PURE__*/_jsx("div", {
+              style: loadingTab === tab_1.slug ? {
+                display: 'none'
+              } : undefined,
+              children: /*#__PURE__*/_jsx(React.Suspense, {
+                fallback: /*#__PURE__*/_jsx(DelayedSpinner, {
+                  baseClass: baseClass,
+                  delay: loadingDelay,
+                  isLoading: true
+                }),
+                children: content
+              })
+            })]
           }, tab_1.slug);
-        })]
+        })
       })]
     })
   });

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

@@ -1 +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","serverArgs","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 (\n      tabSlug: string,\n      {\n        revalidate = false,\n        serverArgs,\n      }: { revalidate?: boolean; serverArgs?: Partial<RenderTabServerFnArgs> } = {},\n    ) => {\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: { ...serverArgs, 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, threading the original serverArgs through so the\n          // retry doesn't silently fall back to req.query-based rendering (the stale-tree bug).\n          const clearedContent = { ...tabContentRef.current }\n          delete clearedContent[tabSlug]\n          tabContentRef.current = clearedContent\n          setTabContent(clearedContent)\n          void loadTabContent(tabSlug, { serverArgs })\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, serverArgs?: Partial<RenderTabServerFnArgs>) => {\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, { serverArgs })\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":[]}
+{"version":3,"file":"index.client.js","names":["PREFERENCE_KEYS","React","useCallback","useId","useRef","useState","usePreferences","useServerFunctions","SidebarTabsProvider","DelayedSpinner","Tooltip","TabError","SidebarTabsClient","baseClass","initialActiveTabID","initialTabContents","loadingDelay","tabs","setPreference","serverFunction","tabsID","activeTabID","setActiveTabID","tabContent","setTabContent","loadingTab","setLoadingTab","hoveredTab","setHoveredTab","loadingTabsRef","Set","tabContentRef","loadTabContentRef","useEffect","current","prev","loadTabContent","tabSlug","revalidate","serverArgs","hasCachedContent","Boolean","has","add","result","name","args","searchParams","newContent","component","error","errorMessage","Error","message","handleRetry","clearedContent","_jsx","onRetry","delete","currentTab","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","id","onClick","onKeyDown","onMouseEnter","onMouseLeave","tabIndex","type","position","show","label","icon","content","hidden","delay","isLoading","style","display","undefined","Suspense","fallback"],"sources":["../../../../src/elements/Nav/SidebarTabs/index.client.tsx"],"sourcesContent":["'use client'\n\nimport { PREFERENCE_KEYS } from 'payload/shared'\nimport React, { useCallback, useId, 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  const tabsID = useId()\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  // The retry button calls loadTabContent through this, since loadTabContent can't call itself\n  const loadTabContentRef = useRef<typeof loadTabContent>(null)\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 (\n      tabSlug: string,\n      {\n        revalidate = false,\n        serverArgs,\n      }: { revalidate?: boolean; serverArgs?: Partial<RenderTabServerFnArgs> } = {},\n    ) => {\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: { searchParams: serverArgs?.searchParams, tabSlug } satisfies 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, threading the original serverArgs through so the\n          // retry doesn't silently fall back to req.query-based rendering (the stale-tree bug).\n          const clearedContent = { ...tabContentRef.current }\n          delete clearedContent[tabSlug]\n          tabContentRef.current = clearedContent\n          setTabContent(clearedContent)\n          void loadTabContentRef.current?.(tabSlug, { serverArgs })\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((currentTab) => (currentTab === tabSlug ? null : currentTab))\n      }\n    },\n    [serverFunction],\n  )\n\n  React.useEffect(() => {\n    loadTabContentRef.current = loadTabContent\n  }, [loadTabContent])\n\n  const reloadTabContent = useCallback(\n    (tabSlug: string, serverArgs?: Partial<RenderTabServerFnArgs>) => {\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, { serverArgs })\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 scrollbar-thin`} role=\"tablist\">\n          {tabs.map((tab, index) => {\n            const isActive = tab.slug === activeTabID\n\n            return (\n              <button\n                aria-controls={`${tabsID}-panel-${tab.slug}`}\n                aria-selected={isActive}\n                className={`${baseClass}__tab ${isActive ? `${baseClass}__tab--active` : ''}`}\n                id={`${tabsID}-tab-${tab.slug}`}\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`}>\n          {tabs.map((tab) => {\n            const content = tabContent[tab.slug]\n            const isActive = tab.slug === activeTabID\n            return (\n              <div\n                aria-labelledby={`${tabsID}-tab-${tab.slug}`}\n                hidden={!isActive}\n                id={`${tabsID}-panel-${tab.slug}`}\n                key={tab.slug}\n                role=\"tabpanel\"\n                tabIndex={-1}\n              >\n                <DelayedSpinner\n                  baseClass={baseClass}\n                  delay={loadingDelay}\n                  isLoading={isActive && loadingTab === tab.slug}\n                />\n                <div style={loadingTab === tab.slug ? { display: 'none' } : undefined}>\n                  <React.Suspense\n                    fallback={\n                      <DelayedSpinner baseClass={baseClass} delay={loadingDelay} isLoading />\n                    }\n                  >\n                    {content}\n                  </React.Suspense>\n                </div>\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    </SidebarTabsProvider>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -4,7 +4,6 @@
     flex-direction: column;
     width: 100%;
     flex-grow: 1;
-    gap: var(--spacer-2-5);
   }
 
   .sidebar-tabs__tabs {
@@ -12,7 +11,9 @@
     gap: 0;
     background-color: var(--color-bg-secondary);
     border-radius: var(--button-radius);
-    width: 100%;
+    margin: var(--spacer-2-5) var(--spacer-2-5) 0;
+    overflow-x: auto;
+    overflow-y: hidden;
   }
 
   .sidebar-tabs__tab {
@@ -23,7 +24,6 @@
     align-items: center;
     justify-content: center;
     height: var(--button-height);
-    padding: 0 var(--spacer-1);
     cursor: pointer;
     border-radius: var(--button-radius);
     border: var(--stroke-width-small) solid transparent;
@@ -37,7 +37,7 @@
 
     &:focus-visible {
       outline: var(--accessibility-outline);
-      outline-offset: var(--accessibility-outline-offset);
+      outline-offset: var(--accessibility-outline-inset);
       border-radius: var(--button-radius);
     }
   }

package/dist/elements/Nav/context.d.ts

@@ -3,7 +3,8 @@ type NavContextType = {
     hydrated: boolean;
     navOpen: boolean;
     navRef: React.RefObject<HTMLDivElement | null>;
-    setNavOpen: (value: boolean) => void;
+    navToggleRef?: React.RefObject<HTMLAnchorElement | HTMLButtonElement | null>;
+    setNavOpen: (value: boolean, persist?: boolean) => void;
 };
 /**
  * @internal