@payloadcms/ui 4.0.0-internal.9496957 → 4.0.0-internal.970009e

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,29 @@ 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: 0,
+            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: 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"],"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={0}\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                  {content}\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;

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

@@ -2,7 +2,8 @@ import { RenderServerComponent } from '../../RenderServerComponent/index.js';
 export const renderTabHandler = ({
   req,
   searchParams,
-  tabSlug
+  tabSlug,
+  user
 }) => {
   if (!req.user) {
     throw new Error('Unauthorized');
@@ -35,7 +36,7 @@ export const renderTabHandler = ({
         payload: req.payload,
         req,
         searchParams: searchParams ?? req.query,
-        user: req.user
+        user
       }
     });
     return {

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

@@ -1 +1 @@
-{"version":3,"file":"renderTabServerFn.js","names":["RenderServerComponent","renderTabHandler","req","searchParams","tabSlug","user","Error","importMap","payload","tabs","config","admin","components","sidebar","component","tabConfig","find","tab","slug","Component","Content","serverProps","i18n","locale","params","routeParams","query","error","errorMessage","message","String","logger","err","msg"],"sources":["../../../../src/elements/Nav/SidebarTabs/renderTabServerFn.ts"],"sourcesContent":["import type { ServerFunction } from 'payload'\nimport type React from 'react'\n\nimport { RenderServerComponent } from '../../RenderServerComponent/index.js'\n\nexport type RenderTabServerFnArgs = {\n  searchParams?: Record<string, unknown>\n  tabSlug: string\n}\n\nexport type RenderTabServerFnReturnType = {\n  component: React.ReactNode\n}\n\nexport const renderTabHandler: ServerFunction<\n  RenderTabServerFnArgs,\n  RenderTabServerFnReturnType\n> = ({ req, searchParams, tabSlug }) => {\n  if (!req.user) {\n    throw new Error('Unauthorized')\n  }\n\n  const { importMap } = req.payload\n  const { tabs } = req.payload.config.admin.components?.sidebar || {}\n\n  if (!tabs) {\n    return { component: null }\n  }\n\n  const tabConfig = tabs.find((tab) => tab.slug === tabSlug)\n\n  if (!tabConfig) {\n    return { component: null }\n  }\n\n  try {\n    const component = RenderServerComponent({\n      Component: tabConfig.components.Content,\n      importMap,\n      serverProps: {\n        i18n: req.i18n,\n        locale: req.locale,\n        params: req.routeParams,\n        payload: req.payload,\n        req,\n        searchParams: searchParams ?? req.query,\n        user: req.user,\n      },\n    })\n\n    return { component }\n  } catch (error) {\n    const errorMessage = error instanceof Error ? error.message : String(error)\n\n    req.payload.logger.error({\n      err: error,\n      msg: `Error rendering tab \"${tabSlug}\": ${errorMessage}`,\n    })\n\n    return { component: null }\n  }\n}\n"],"mappings":"AAGA,SAASA,qBAAqB,QAAQ;AAWtC,OAAO,MAAMC,gBAAA,GAGTA,CAAC;EAAEC,GAAG;EAAEC,YAAY;EAAEC;AAAO,CAAE;EACjC,IAAI,CAACF,GAAA,CAAIG,IAAI,EAAE;IACb,MAAM,IAAIC,KAAA,CAAM;EAClB;EAEA,MAAM;IAAEC;EAAS,CAAE,GAAGL,GAAA,CAAIM,OAAO;EACjC,MAAM;IAAEC;EAAI,CAAE,GAAGP,GAAA,CAAIM,OAAO,CAACE,MAAM,CAACC,KAAK,CAACC,UAAU,EAAEC,OAAA,IAAW,CAAC;EAElE,IAAI,CAACJ,IAAA,EAAM;IACT,OAAO;MAAEK,SAAA,EAAW;IAAK;EAC3B;EAEA,MAAMC,SAAA,GAAYN,IAAA,CAAKO,IAAI,CAAEC,GAAA,IAAQA,GAAA,CAAIC,IAAI,KAAKd,OAAA;EAElD,IAAI,CAACW,SAAA,EAAW;IACd,OAAO;MAAED,SAAA,EAAW;IAAK;EAC3B;EAEA,IAAI;IACF,MAAMA,SAAA,GAAYd,qBAAA,CAAsB;MACtCmB,SAAA,EAAWJ,SAAA,CAAUH,UAAU,CAACQ,OAAO;MACvCb,SAAA;MACAc,WAAA,EAAa;QACXC,IAAA,EAAMpB,GAAA,CAAIoB,IAAI;QACdC,MAAA,EAAQrB,GAAA,CAAIqB,MAAM;QAClBC,MAAA,EAAQtB,GAAA,CAAIuB,WAAW;QACvBjB,OAAA,EAASN,GAAA,CAAIM,OAAO;QACpBN,GAAA;QACAC,YAAA,EAAcA,YAAA,IAAgBD,GAAA,CAAIwB,KAAK;QACvCrB,IAAA,EAAMH,GAAA,CAAIG;MACZ;IACF;IAEA,OAAO;MAAES;IAAU;EACrB,EAAE,OAAOa,KAAA,EAAO;IACd,MAAMC,YAAA,GAAeD,KAAA,YAAiBrB,KAAA,GAAQqB,KAAA,CAAME,OAAO,GAAGC,MAAA,CAAOH,KAAA;IAErEzB,GAAA,CAAIM,OAAO,CAACuB,MAAM,CAACJ,KAAK,CAAC;MACvBK,GAAA,EAAKL,KAAA;MACLM,GAAA,EAAK,wBAAwB7B,OAAA,MAAawB,YAAA;IAC5C;IAEA,OAAO;MAAEd,SAAA,EAAW;IAAK;EAC3B;AACF","ignoreList":[]}
+{"version":3,"file":"renderTabServerFn.js","names":["RenderServerComponent","renderTabHandler","req","searchParams","tabSlug","user","Error","importMap","payload","tabs","config","admin","components","sidebar","component","tabConfig","find","tab","slug","Component","Content","serverProps","i18n","locale","params","routeParams","query","error","errorMessage","message","String","logger","err","msg"],"sources":["../../../../src/elements/Nav/SidebarTabs/renderTabServerFn.ts"],"sourcesContent":["import type { ServerFunction } from 'payload'\nimport type React from 'react'\n\nimport { RenderServerComponent } from '../../RenderServerComponent/index.js'\n\nexport type RenderTabServerFnArgs = {\n  searchParams?: Record<string, unknown>\n  tabSlug: string\n}\n\nexport type RenderTabServerFnReturnType = {\n  component: React.ReactNode\n}\n\nexport const renderTabHandler: ServerFunction<\n  RenderTabServerFnArgs,\n  RenderTabServerFnReturnType\n> = ({ req, searchParams, tabSlug, user }) => {\n  if (!req.user) {\n    throw new Error('Unauthorized')\n  }\n\n  const { importMap } = req.payload\n  const { tabs } = req.payload.config.admin.components?.sidebar || {}\n\n  if (!tabs) {\n    return { component: null }\n  }\n\n  const tabConfig = tabs.find((tab) => tab.slug === tabSlug)\n\n  if (!tabConfig) {\n    return { component: null }\n  }\n\n  try {\n    const component = RenderServerComponent({\n      Component: tabConfig.components.Content,\n      importMap,\n      serverProps: {\n        i18n: req.i18n,\n        locale: req.locale,\n        params: req.routeParams,\n        payload: req.payload,\n        req,\n        searchParams: searchParams ?? req.query,\n        user,\n      },\n    })\n\n    return { component }\n  } catch (error) {\n    const errorMessage = error instanceof Error ? error.message : String(error)\n\n    req.payload.logger.error({\n      err: error,\n      msg: `Error rendering tab \"${tabSlug}\": ${errorMessage}`,\n    })\n\n    return { component: null }\n  }\n}\n"],"mappings":"AAGA,SAASA,qBAAqB,QAAQ;AAWtC,OAAO,MAAMC,gBAAA,GAGTA,CAAC;EAAEC,GAAG;EAAEC,YAAY;EAAEC,OAAO;EAAEC;AAAI,CAAE;EACvC,IAAI,CAACH,GAAA,CAAIG,IAAI,EAAE;IACb,MAAM,IAAIC,KAAA,CAAM;EAClB;EAEA,MAAM;IAAEC;EAAS,CAAE,GAAGL,GAAA,CAAIM,OAAO;EACjC,MAAM;IAAEC;EAAI,CAAE,GAAGP,GAAA,CAAIM,OAAO,CAACE,MAAM,CAACC,KAAK,CAACC,UAAU,EAAEC,OAAA,IAAW,CAAC;EAElE,IAAI,CAACJ,IAAA,EAAM;IACT,OAAO;MAAEK,SAAA,EAAW;IAAK;EAC3B;EAEA,MAAMC,SAAA,GAAYN,IAAA,CAAKO,IAAI,CAAEC,GAAA,IAAQA,GAAA,CAAIC,IAAI,KAAKd,OAAA;EAElD,IAAI,CAACW,SAAA,EAAW;IACd,OAAO;MAAED,SAAA,EAAW;IAAK;EAC3B;EAEA,IAAI;IACF,MAAMA,SAAA,GAAYd,qBAAA,CAAsB;MACtCmB,SAAA,EAAWJ,SAAA,CAAUH,UAAU,CAACQ,OAAO;MACvCb,SAAA;MACAc,WAAA,EAAa;QACXC,IAAA,EAAMpB,GAAA,CAAIoB,IAAI;QACdC,MAAA,EAAQrB,GAAA,CAAIqB,MAAM;QAClBC,MAAA,EAAQtB,GAAA,CAAIuB,WAAW;QACvBjB,OAAA,EAASN,GAAA,CAAIM,OAAO;QACpBN,GAAA;QACAC,YAAA,EAAcA,YAAA,IAAgBD,GAAA,CAAIwB,KAAK;QACvCrB;MACF;IACF;IAEA,OAAO;MAAES;IAAU;EACrB,EAAE,OAAOa,KAAA,EAAO;IACd,MAAMC,YAAA,GAAeD,KAAA,YAAiBrB,KAAA,GAAQqB,KAAA,CAAME,OAAO,GAAGC,MAAA,CAAOH,KAAA;IAErEzB,GAAA,CAAIM,OAAO,CAACuB,MAAM,CAACJ,KAAK,CAAC;MACvBK,GAAA,EAAKL,KAAA;MACLM,GAAA,EAAK,wBAAwB7B,OAAA,MAAawB,YAAA;IAC5C;IAEA,OAAO;MAAEd,SAAA,EAAW;IAAK;EAC3B;AACF","ignoreList":[]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/elements/Nav/context.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAKhD,KAAK,cAAc,GAAG;IACpB,QAAQ,EAAE,OAAO,CAAA;IACjB,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC9C,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;CACrC,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,+BAKrB,CAAA;AAEF,eAAO,MAAM,MAAM,sBAA8B,CAAA;AAYjD;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CAsEA,CAAA"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/elements/Nav/context.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAKhD,KAAK,cAAc,GAAG;IACpB,QAAQ,EAAE,OAAO,CAAA;IACjB,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC9C,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;CACxD,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,+BAKrB,CAAA;AAEF,eAAO,MAAM,MAAM,sBAA8B,CAAA;AAYjD;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CAmGA,CAAA"}

package/dist/elements/Nav/context.js

@@ -41,14 +41,26 @@ export const NavProvider = ({
   } = useWindowInfo();
   const pathname = usePathname();
   const {
-    getPreference
+    getPreference,
+    setPreference
   } = usePreferences();
   const navRef = useRef(null);
-  // initialize the nav to be closed
-  // this is because getting the preference is async
-  // so instead of closing it after the preference is loaded
-  // we will open it after the preference is loaded
-  const [navOpen, setNavOpen] = React.useState(initialIsOpen);
+  const previousBreakpoints = useRef({
+    large: largeBreak,
+    mid: midBreak,
+    small: smallBreak
+  });
+  const previousPathname = useRef(pathname);
+  // The server supplies the saved open state for the initial render.
+  const [navOpen, setNavOpenState] = React.useState(initialIsOpen);
+  const setNavOpen = React.useCallback((value, persist = false) => {
+    setNavOpenState(value);
+    if (persist) {
+      void setPreference(PREFERENCE_KEYS.NAV, {
+        open: value
+      }, true);
+    }
+  }, [setPreference]);
   const [hydrated, setHydrated] = React.useState(false);
   // on load check the user's preference and set "initial" state
   useEffect(() => {
@@ -63,10 +75,11 @@ export const NavProvider = ({
   // on smaller screens where the nav is a modal
   // close the nav when the user navigates away
   useEffect(() => {
-    if (smallBreak === true) {
+    if (previousPathname.current !== pathname && smallBreak === true) {
       setNavOpen(false);
     }
-  }, [pathname]);
+    previousPathname.current = pathname;
+  }, [pathname, setNavOpen, smallBreak]);
   // on open and close, lock the body scroll
   // do not do this on desktop, the sidebar is not a modal
   useEffect(() => {
@@ -82,11 +95,19 @@ export const NavProvider = ({
   // close the nav when the user resizes down to mobile
   // the sidebar is a modal on mobile
   useEffect(() => {
-    if (largeBreak === true || midBreak === true || smallBreak === true) {
+    const previous = previousBreakpoints.current;
+    if (largeBreak === true && previous.large === false || midBreak === true && previous.mid === false || smallBreak === true && previous.small !== true) {
       setNavOpen(false);
     }
-    setHydrated(true);
-  }, [largeBreak, midBreak, smallBreak]);
+    previousBreakpoints.current = {
+      large: largeBreak,
+      mid: midBreak,
+      small: smallBreak
+    };
+    if (typeof smallBreak === 'boolean') {
+      setHydrated(true);
+    }
+  }, [largeBreak, midBreak, setNavOpen, smallBreak]);
   // when the component unmounts, clear all body scroll locks
   useEffect(() => {
     return () => {

package/dist/elements/Nav/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":["useWindowInfo","PREFERENCE_KEYS","React","useEffect","useRef","usePreferences","usePathname","NavContext","createContext","hydrated","navOpen","navRef","setNavOpen","useNav","use","getNavPreference","getPreference","navPrefs","NAV","preferredState","open","NavProvider","children","initialIsOpen","breakpoints","l","largeBreak","m","midBreak","s","smallBreak","pathname","useState","setHydrated","setNavFromPreferences","current","style","overscrollBehavior","_jsx","value"],"sources":["../../../src/elements/Nav/context.tsx"],"sourcesContent":["'use client'\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport { PREFERENCE_KEYS } from 'payload/shared'\nimport React, { useEffect, useRef } from 'react'\n\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport { usePathname } from '../../providers/RouterAdapter/index.js'\n\ntype NavContextType = {\n  hydrated: boolean\n  navOpen: boolean\n  navRef: React.RefObject<HTMLDivElement | null>\n  setNavOpen: (value: boolean) => void\n}\n\n/**\n * @internal\n */\nexport const NavContext = React.createContext<NavContextType>({\n  hydrated: false,\n  navOpen: true,\n  navRef: null,\n  setNavOpen: () => {},\n})\n\nexport const useNav = () => React.use(NavContext)\n\nconst getNavPreference = async (getPreference): Promise<boolean> => {\n  const navPrefs = await getPreference(PREFERENCE_KEYS.NAV)\n  const preferredState = navPrefs?.open\n  if (typeof preferredState === 'boolean') {\n    return preferredState\n  } else {\n    return true\n  }\n}\n\n/**\n * @internal\n */\nexport const NavProvider: React.FC<{\n  children: React.ReactNode\n  initialIsOpen?: boolean\n}> = ({ children, initialIsOpen }) => {\n  const {\n    breakpoints: { l: largeBreak, m: midBreak, s: smallBreak },\n  } = useWindowInfo()\n\n  const pathname = usePathname()\n\n  const { getPreference } = usePreferences()\n  const navRef = useRef(null)\n\n  // initialize the nav to be closed\n  // this is because getting the preference is async\n  // so instead of closing it after the preference is loaded\n  // we will open it after the preference is loaded\n  const [navOpen, setNavOpen] = React.useState(initialIsOpen)\n\n  const [hydrated, setHydrated] = React.useState(false)\n\n  // on load check the user's preference and set \"initial\" state\n  useEffect(() => {\n    if (largeBreak === false) {\n      const setNavFromPreferences = async () => {\n        const preferredState = await getNavPreference(getPreference)\n        setNavOpen(preferredState)\n      }\n\n      void setNavFromPreferences()\n    }\n  }, [largeBreak, getPreference, setNavOpen])\n\n  // on smaller screens where the nav is a modal\n  // close the nav when the user navigates away\n  useEffect(() => {\n    if (smallBreak === true) {\n      setNavOpen(false)\n    }\n  }, [pathname])\n\n  // on open and close, lock the body scroll\n  // do not do this on desktop, the sidebar is not a modal\n  useEffect(() => {\n    if (navRef.current) {\n      if (navOpen && midBreak) {\n        navRef.current.style.overscrollBehavior = 'contain'\n      } else {\n        navRef.current.style.overscrollBehavior = 'auto'\n      }\n    }\n  }, [navOpen, midBreak])\n\n  // on smaller screens where the nav is a modal\n  // close the nav when the user resizes down to mobile\n  // the sidebar is a modal on mobile\n  useEffect(() => {\n    if (largeBreak === true || midBreak === true || smallBreak === true) {\n      setNavOpen(false)\n    }\n    setHydrated(true)\n  }, [largeBreak, midBreak, smallBreak])\n\n  // when the component unmounts, clear all body scroll locks\n  useEffect(() => {\n    return () => {\n      if (navRef.current) {\n        navRef.current.style.overscrollBehavior = 'auto'\n      }\n    }\n  }, [])\n\n  return <NavContext value={{ hydrated, navOpen, navRef, setNavOpen }}>{children}</NavContext>\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"context.js","names":["useWindowInfo","PREFERENCE_KEYS","React","useEffect","useRef","usePreferences","usePathname","NavContext","createContext","hydrated","navOpen","navRef","setNavOpen","useNav","use","getNavPreference","getPreference","navPrefs","NAV","preferredState","open","NavProvider","children","initialIsOpen","breakpoints","l","largeBreak","m","midBreak","s","smallBreak","pathname","setPreference","previousBreakpoints","large","mid","small","previousPathname","setNavOpenState","useState","useCallback","value","persist","setHydrated","setNavFromPreferences","current","style","overscrollBehavior","previous","_jsx"],"sources":["../../../src/elements/Nav/context.tsx"],"sourcesContent":["'use client'\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport { PREFERENCE_KEYS } from 'payload/shared'\nimport React, { useEffect, useRef } from 'react'\n\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport { usePathname } from '../../providers/RouterAdapter/index.js'\n\ntype NavContextType = {\n  hydrated: boolean\n  navOpen: boolean\n  navRef: React.RefObject<HTMLDivElement | null>\n  setNavOpen: (value: boolean, persist?: boolean) => void\n}\n\n/**\n * @internal\n */\nexport const NavContext = React.createContext<NavContextType>({\n  hydrated: false,\n  navOpen: true,\n  navRef: null,\n  setNavOpen: () => {},\n})\n\nexport const useNav = () => React.use(NavContext)\n\nconst getNavPreference = async (getPreference): Promise<boolean> => {\n  const navPrefs = await getPreference(PREFERENCE_KEYS.NAV)\n  const preferredState = navPrefs?.open\n  if (typeof preferredState === 'boolean') {\n    return preferredState\n  } else {\n    return true\n  }\n}\n\n/**\n * @internal\n */\nexport const NavProvider: React.FC<{\n  children: React.ReactNode\n  initialIsOpen?: boolean\n}> = ({ children, initialIsOpen }) => {\n  const {\n    breakpoints: { l: largeBreak, m: midBreak, s: smallBreak },\n  } = useWindowInfo()\n\n  const pathname = usePathname()\n\n  const { getPreference, setPreference } = usePreferences()\n  const navRef = useRef(null)\n  const previousBreakpoints = useRef({\n    large: largeBreak,\n    mid: midBreak,\n    small: smallBreak,\n  })\n  const previousPathname = useRef(pathname)\n\n  // The server supplies the saved open state for the initial render.\n  const [navOpen, setNavOpenState] = React.useState(initialIsOpen)\n\n  const setNavOpen = React.useCallback(\n    (value: boolean, persist = false) => {\n      setNavOpenState(value)\n\n      if (persist) {\n        void setPreference(PREFERENCE_KEYS.NAV, { open: value }, true)\n      }\n    },\n    [setPreference],\n  )\n\n  const [hydrated, setHydrated] = React.useState(false)\n\n  // on load check the user's preference and set \"initial\" state\n  useEffect(() => {\n    if (largeBreak === false) {\n      const setNavFromPreferences = async () => {\n        const preferredState = await getNavPreference(getPreference)\n        setNavOpen(preferredState)\n      }\n\n      void setNavFromPreferences()\n    }\n  }, [largeBreak, getPreference, setNavOpen])\n\n  // on smaller screens where the nav is a modal\n  // close the nav when the user navigates away\n  useEffect(() => {\n    if (previousPathname.current !== pathname && smallBreak === true) {\n      setNavOpen(false)\n    }\n    previousPathname.current = pathname\n  }, [pathname, setNavOpen, smallBreak])\n\n  // on open and close, lock the body scroll\n  // do not do this on desktop, the sidebar is not a modal\n  useEffect(() => {\n    if (navRef.current) {\n      if (navOpen && midBreak) {\n        navRef.current.style.overscrollBehavior = 'contain'\n      } else {\n        navRef.current.style.overscrollBehavior = 'auto'\n      }\n    }\n  }, [navOpen, midBreak])\n\n  // on smaller screens where the nav is a modal\n  // close the nav when the user resizes down to mobile\n  // the sidebar is a modal on mobile\n  useEffect(() => {\n    const previous = previousBreakpoints.current\n\n    if (\n      (largeBreak === true && previous.large === false) ||\n      (midBreak === true && previous.mid === false) ||\n      (smallBreak === true && previous.small !== true)\n    ) {\n      setNavOpen(false)\n    }\n\n    previousBreakpoints.current = {\n      large: largeBreak,\n      mid: midBreak,\n      small: smallBreak,\n    }\n    if (typeof smallBreak === 'boolean') {\n      setHydrated(true)\n    }\n  }, [largeBreak, midBreak, setNavOpen, smallBreak])\n\n  // when the component unmounts, clear all body scroll locks\n  useEffect(() => {\n    return () => {\n      if (navRef.current) {\n        navRef.current.style.overscrollBehavior = 'auto'\n      }\n    }\n  }, [])\n\n  return <NavContext value={{ hydrated, navOpen, navRef, setNavOpen }}>{children}</NavContext>\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Nav/getNavPrefs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getNavPrefs.d.ts","sourceRoot":"","sources":["../../../src/elements/Nav/getNavPrefs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAK7D,eAAO,MAAM,WAAW,QAAqB,cAAc,KAAG,OAAO,CAAC,cAAc,CAoElF,CAAA"}
+{"version":3,"file":"getNavPrefs.d.ts","sourceRoot":"","sources":["../../../src/elements/Nav/getNavPrefs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAK7D,eAAO,MAAM,WAAW,QAAqB,cAAc,KAAG,OAAO,CAAC,cAAc,CAsElF,CAAA"}

package/dist/elements/Nav/getNavPrefs.js

@@ -12,6 +12,7 @@ export const getNavPrefs = cache(async req => {
     collection: 'payload-preferences',
     depth: 0,
     limit: 1,
+    overrideAccess: true,
     pagination: false,
     req,
     where: {
@@ -34,6 +35,7 @@ export const getNavPrefs = cache(async req => {
     collection: 'payload-preferences',
     depth: 0,
     limit: 1,
+    overrideAccess: true,
     pagination: false,
     req,
     where: {

package/dist/elements/Nav/getNavPrefs.js.map

@@ -1 +1 @@
-{"version":3,"file":"getNavPrefs.js","names":["PREFERENCE_KEYS","cache","getNavPrefs","req","user","collection","activeTab","undefined","groups","open","navPrefs","payload","find","depth","limit","pagination","where","and","key","equals","NAV","id","then","res","docs","value","sidebarPrefs","NAV_SIDEBAR_ACTIVE_TAB"],"sources":["../../../src/elements/Nav/getNavPrefs.ts"],"sourcesContent":["import type { NavPreferences, PayloadRequest } from 'payload'\n\nimport { PREFERENCE_KEYS } from 'payload/shared'\nimport { cache } from 'react'\n\nexport const getNavPrefs = cache(async (req: PayloadRequest): Promise<NavPreferences> => {\n  if (!req?.user?.collection) {\n    return { activeTab: undefined, groups: {}, open: true }\n  }\n\n  const navPrefs = await req.payload\n    .find({\n      collection: 'payload-preferences',\n      depth: 0,\n      limit: 1,\n      pagination: false,\n      req,\n      where: {\n        and: [\n          {\n            key: {\n              equals: PREFERENCE_KEYS.NAV,\n            },\n          },\n          {\n            'user.relationTo': {\n              equals: req.user.collection,\n            },\n          },\n          {\n            'user.value': {\n              equals: req?.user?.id,\n            },\n          },\n        ],\n      },\n    })\n    ?.then((res) => res?.docs?.[0]?.value)\n\n  const sidebarPrefs = await req.payload\n    .find({\n      collection: 'payload-preferences',\n      depth: 0,\n      limit: 1,\n      pagination: false,\n      req,\n      where: {\n        and: [\n          {\n            key: {\n              equals: PREFERENCE_KEYS.NAV_SIDEBAR_ACTIVE_TAB,\n            },\n          },\n          {\n            'user.relationTo': {\n              equals: req.user.collection,\n            },\n          },\n          {\n            'user.value': {\n              equals: req?.user?.id,\n            },\n          },\n        ],\n      },\n    })\n    ?.then((res) => res?.docs?.[0]?.value)\n\n  return {\n    activeTab: sidebarPrefs?.activeTab,\n    groups: navPrefs?.groups ?? {},\n    open: navPrefs?.open ?? true,\n  }\n})\n"],"mappings":"AAEA,SAASA,eAAe,QAAQ;AAChC,SAASC,KAAK,QAAQ;AAEtB,OAAO,MAAMC,WAAA,GAAcD,KAAA,CAAM,MAAOE,GAAA;EACtC,IAAI,CAACA,GAAA,EAAKC,IAAA,EAAMC,UAAA,EAAY;IAC1B,OAAO;MAAEC,SAAA,EAAWC,SAAA;MAAWC,MAAA,EAAQ,CAAC;MAAGC,IAAA,EAAM;IAAK;EACxD;EAEA,MAAMC,QAAA,GAAW,MAAMP,GAAA,CAAIQ,OAAO,CAC/BC,IAAI,CAAC;IACJP,UAAA,EAAY;IACZQ,KAAA,EAAO;IACPC,KAAA,EAAO;IACPC,UAAA,EAAY;IACZZ,GAAA;IACAa,KAAA,EAAO;MACLC,GAAA,EAAK,CACH;QACEC,GAAA,EAAK;UACHC,MAAA,EAAQnB,eAAA,CAAgBoB;QAC1B;MACF,GACA;QACE,mBAAmB;UACjBD,MAAA,EAAQhB,GAAA,CAAIC,IAAI,CAACC;QACnB;MACF,GACA;QACE,cAAc;UACZc,MAAA,EAAQhB,GAAA,EAAKC,IAAA,EAAMiB;QACrB;MACF;IAEJ;EACF,IACEC,IAAA,CAAMC,GAAA,IAAQA,GAAA,EAAKC,IAAA,GAAO,EAAE,EAAEC,KAAA;EAElC,MAAMC,YAAA,GAAe,MAAMvB,GAAA,CAAIQ,OAAO,CACnCC,IAAI,CAAC;IACJP,UAAA,EAAY;IACZQ,KAAA,EAAO;IACPC,KAAA,EAAO;IACPC,UAAA,EAAY;IACZZ,GAAA;IACAa,KAAA,EAAO;MACLC,GAAA,EAAK,CACH;QACEC,GAAA,EAAK;UACHC,MAAA,EAAQnB,eAAA,CAAgB2B;QAC1B;MACF,GACA;QACE,mBAAmB;UACjBR,MAAA,EAAQhB,GAAA,CAAIC,IAAI,CAACC;QACnB;MACF,GACA;QACE,cAAc;UACZc,MAAA,EAAQhB,GAAA,EAAKC,IAAA,EAAMiB;QACrB;MACF;IAEJ;EACF,IACEC,IAAA,CAAMC,GAAA,IAAQA,GAAA,EAAKC,IAAA,GAAO,EAAE,EAAEC,KAAA;EAElC,OAAO;IACLnB,SAAA,EAAWoB,YAAA,EAAcpB,SAAA;IACzBE,MAAA,EAAQE,QAAA,EAAUF,MAAA,IAAU,CAAC;IAC7BC,IAAA,EAAMC,QAAA,EAAUD,IAAA,IAAQ;EAC1B;AACF","ignoreList":[]}
+{"version":3,"file":"getNavPrefs.js","names":["PREFERENCE_KEYS","cache","getNavPrefs","req","user","collection","activeTab","undefined","groups","open","navPrefs","payload","find","depth","limit","overrideAccess","pagination","where","and","key","equals","NAV","id","then","res","docs","value","sidebarPrefs","NAV_SIDEBAR_ACTIVE_TAB"],"sources":["../../../src/elements/Nav/getNavPrefs.ts"],"sourcesContent":["import type { NavPreferences, PayloadRequest } from 'payload'\n\nimport { PREFERENCE_KEYS } from 'payload/shared'\nimport { cache } from 'react'\n\nexport const getNavPrefs = cache(async (req: PayloadRequest): Promise<NavPreferences> => {\n  if (!req?.user?.collection) {\n    return { activeTab: undefined, groups: {}, open: true }\n  }\n\n  const navPrefs = await req.payload\n    .find({\n      collection: 'payload-preferences',\n      depth: 0,\n      limit: 1,\n      overrideAccess: true,\n      pagination: false,\n      req,\n      where: {\n        and: [\n          {\n            key: {\n              equals: PREFERENCE_KEYS.NAV,\n            },\n          },\n          {\n            'user.relationTo': {\n              equals: req.user.collection,\n            },\n          },\n          {\n            'user.value': {\n              equals: req?.user?.id,\n            },\n          },\n        ],\n      },\n    })\n    ?.then((res) => res?.docs?.[0]?.value)\n\n  const sidebarPrefs = await req.payload\n    .find({\n      collection: 'payload-preferences',\n      depth: 0,\n      limit: 1,\n      overrideAccess: true,\n      pagination: false,\n      req,\n      where: {\n        and: [\n          {\n            key: {\n              equals: PREFERENCE_KEYS.NAV_SIDEBAR_ACTIVE_TAB,\n            },\n          },\n          {\n            'user.relationTo': {\n              equals: req.user.collection,\n            },\n          },\n          {\n            'user.value': {\n              equals: req?.user?.id,\n            },\n          },\n        ],\n      },\n    })\n    ?.then((res) => res?.docs?.[0]?.value)\n\n  return {\n    activeTab: sidebarPrefs?.activeTab,\n    groups: navPrefs?.groups ?? {},\n    open: navPrefs?.open ?? true,\n  }\n})\n"],"mappings":"AAEA,SAASA,eAAe,QAAQ;AAChC,SAASC,KAAK,QAAQ;AAEtB,OAAO,MAAMC,WAAA,GAAcD,KAAA,CAAM,MAAOE,GAAA;EACtC,IAAI,CAACA,GAAA,EAAKC,IAAA,EAAMC,UAAA,EAAY;IAC1B,OAAO;MAAEC,SAAA,EAAWC,SAAA;MAAWC,MAAA,EAAQ,CAAC;MAAGC,IAAA,EAAM;IAAK;EACxD;EAEA,MAAMC,QAAA,GAAW,MAAMP,GAAA,CAAIQ,OAAO,CAC/BC,IAAI,CAAC;IACJP,UAAA,EAAY;IACZQ,KAAA,EAAO;IACPC,KAAA,EAAO;IACPC,cAAA,EAAgB;IAChBC,UAAA,EAAY;IACZb,GAAA;IACAc,KAAA,EAAO;MACLC,GAAA,EAAK,CACH;QACEC,GAAA,EAAK;UACHC,MAAA,EAAQpB,eAAA,CAAgBqB;QAC1B;MACF,GACA;QACE,mBAAmB;UACjBD,MAAA,EAAQjB,GAAA,CAAIC,IAAI,CAACC;QACnB;MACF,GACA;QACE,cAAc;UACZe,MAAA,EAAQjB,GAAA,EAAKC,IAAA,EAAMkB;QACrB;MACF;IAEJ;EACF,IACEC,IAAA,CAAMC,GAAA,IAAQA,GAAA,EAAKC,IAAA,GAAO,EAAE,EAAEC,KAAA;EAElC,MAAMC,YAAA,GAAe,MAAMxB,GAAA,CAAIQ,OAAO,CACnCC,IAAI,CAAC;IACJP,UAAA,EAAY;IACZQ,KAAA,EAAO;IACPC,KAAA,EAAO;IACPC,cAAA,EAAgB;IAChBC,UAAA,EAAY;IACZb,GAAA;IACAc,KAAA,EAAO;MACLC,GAAA,EAAK,CACH;QACEC,GAAA,EAAK;UACHC,MAAA,EAAQpB,eAAA,CAAgB4B;QAC1B;MACF,GACA;QACE,mBAAmB;UACjBR,MAAA,EAAQjB,GAAA,CAAIC,IAAI,CAACC;QACnB;MACF,GACA;QACE,cAAc;UACZe,MAAA,EAAQjB,GAAA,EAAKC,IAAA,EAAMkB;QACrB;MACF;IAEJ;EACF,IACEC,IAAA,CAAMC,GAAA,IAAQA,GAAA,EAAKC,IAAA,GAAO,EAAE,EAAEC,KAAA;EAElC,OAAO;IACLpB,SAAA,EAAWqB,YAAA,EAAcrB,SAAA;IACzBE,MAAA,EAAQE,QAAA,EAAUF,MAAA,IAAU,CAAC;IAC7BC,IAAA,EAAMC,QAAA,EAAUD,IAAA,IAAQ;EAC1B;AACF","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../../../src/elements/Nav/index.client.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAI7C,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAA;AAUrE;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC;IACtC,MAAM,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,CAAA;IACxC,cAAc,EAAE,cAAc,CAAA;CAC/B,CA+DA,CAAA"}
+{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../../../src/elements/Nav/index.client.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAI7C,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAA;AAUrE;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC;IACtC,MAAM,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,CAAA;IACxC,cAAc,EAAE,cAAc,CAAA;CAC/B,CA0DA,CAAA"}

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

@@ -73,19 +73,10 @@ export const DefaultNavClient = t0 => {
               className: `${baseClass}__link-label`,
               children: getTranslation(label_0, i18n)
             });
-            if (pathname === href) {
-              return _jsx("div", {
-                className: `${baseClass}__link-wrapper`,
-                children: _jsx("div", {
-                  className: linkClass,
-                  id,
-                  children: Label
-                })
-              }, i);
-            }
             return _jsx("div", {
               className: `${baseClass}__link-wrapper`,
               children: _jsx(Link, {
+                "aria-current": isActive ? pathname === href ? "page" : "location" : undefined,
                 className: linkClass,
                 href,
                 id,

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

@@ -1 +1 @@
-{"version":3,"file":"index.client.js","names":["c","_c","getTranslation","EntityType","formatAdminURL","React","Fragment","useConfig","usePathname","useTranslation","Link","NavGroup","baseClass","DefaultNavClient","t0","$","groups","navPreferences","pathname","config","t1","routes","t2","admin","adminRoute","i18n","t3","t4","t5","key","entities","label","_jsx","isOpen","open","children","map","t6","i","slug","type","label_0","href","id","collection","global","isActive","startsWith","undefined","includes","length","linkClass","Label","className","prefetch"],"sources":["../../../src/elements/Nav/index.client.tsx"],"sourcesContent":["'use client'\n\nimport type { NavPreferences } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { EntityType, formatAdminURL } from 'payload/shared'\nimport React, { Fragment } from 'react'\n\nimport type { groupNavItems } from '../../utilities/groupNavItems.js'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { usePathname } from '../../providers/RouterAdapter/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Link } from '../Link/index.js'\nimport { NavGroup } from '../NavGroup/index.js'\n\nconst baseClass = 'nav'\n\n/**\n * @internal\n */\nexport const DefaultNavClient: React.FC<{\n  groups: ReturnType<typeof groupNavItems>\n  navPreferences: NavPreferences\n}> = ({ groups, navPreferences }) => {\n  const pathname = usePathname()\n\n  const {\n    config: {\n      routes: { admin: adminRoute },\n    },\n  } = useConfig()\n\n  const { i18n } = useTranslation()\n\n  return (\n    <Fragment>\n      {groups.map(({ entities, label }, key) => {\n        return (\n          <NavGroup isOpen={navPreferences?.groups?.[label]?.open} key={key} label={label}>\n            {entities.map(({ slug, type, label }, i) => {\n              let href: string\n              let id: string\n\n              if (type === EntityType.collection) {\n                href = formatAdminURL({ adminRoute, path: `/collections/${slug}` })\n                id = `nav-${slug}`\n              }\n\n              if (type === EntityType.global) {\n                href = formatAdminURL({ adminRoute, path: `/globals/${slug}` })\n                id = `nav-global-${slug}`\n              }\n\n              const isActive =\n                pathname.startsWith(href) && ['/', undefined].includes(pathname[href.length])\n\n              const linkClass = `${baseClass}__link${isActive ? ` ${baseClass}__link--selected` : ''}`\n\n              const Label = (\n                <span className={`${baseClass}__link-label`}>{getTranslation(label, i18n)}</span>\n              )\n\n              // If the URL matches the link exactly\n              if (pathname === href) {\n                return (\n                  <div className={`${baseClass}__link-wrapper`} key={i}>\n                    <div className={linkClass} id={id}>\n                      {Label}\n                    </div>\n                  </div>\n                )\n              }\n\n              return (\n                <div className={`${baseClass}__link-wrapper`} key={i}>\n                  <Link className={linkClass} href={href} id={id} prefetch={false}>\n                    {Label}\n                  </Link>\n                </div>\n              )\n            })}\n          </NavGroup>\n        )\n      })}\n    </Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.client.js","names":["c","_c","getTranslation","EntityType","formatAdminURL","React","Fragment","useConfig","usePathname","useTranslation","Link","NavGroup","baseClass","DefaultNavClient","t0","$","groups","navPreferences","pathname","config","t1","routes","t2","admin","adminRoute","i18n","t3","t4","t5","key","entities","label","_jsx","isOpen","open","map","t6","i","slug","type","label_0","href","id","collection","path","global","isActive","startsWith","undefined","includes","length","linkClass","Label","className","children","prefetch"],"sources":["../../../src/elements/Nav/index.client.tsx"],"sourcesContent":["'use client'\n\nimport type { NavPreferences } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { EntityType, formatAdminURL } from 'payload/shared'\nimport React, { Fragment } from 'react'\n\nimport type { groupNavItems } from '../../utilities/groupNavItems.js'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { usePathname } from '../../providers/RouterAdapter/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Link } from '../Link/index.js'\nimport { NavGroup } from '../NavGroup/index.js'\n\nconst baseClass = 'nav'\n\n/**\n * @internal\n */\nexport const DefaultNavClient: React.FC<{\n  groups: ReturnType<typeof groupNavItems>\n  navPreferences: NavPreferences\n}> = ({ groups, navPreferences }) => {\n  const pathname = usePathname()\n\n  const {\n    config: {\n      routes: { admin: adminRoute },\n    },\n  } = useConfig()\n\n  const { i18n } = useTranslation()\n\n  return (\n    <Fragment>\n      {groups.map(({ entities, label }, key) => {\n        return (\n          <NavGroup isOpen={navPreferences?.groups?.[label]?.open} key={key} label={label}>\n            {entities.map(({ slug, type, label }, i) => {\n              let href: string\n              let id: string\n\n              if (type === EntityType.collection) {\n                href = formatAdminURL({ adminRoute, path: `/collections/${slug}` })\n                id = `nav-${slug}`\n              }\n\n              if (type === EntityType.global) {\n                href = formatAdminURL({ adminRoute, path: `/globals/${slug}` })\n                id = `nav-global-${slug}`\n              }\n\n              const isActive =\n                pathname.startsWith(href) && ['/', undefined].includes(pathname[href.length])\n\n              const linkClass = `${baseClass}__link${isActive ? ` ${baseClass}__link--selected` : ''}`\n\n              const Label = (\n                <span className={`${baseClass}__link-label`}>{getTranslation(label, i18n)}</span>\n              )\n\n              return (\n                <div className={`${baseClass}__link-wrapper`} key={i}>\n                  <Link\n                    aria-current={isActive ? (pathname === href ? 'page' : 'location') : undefined}\n                    className={linkClass}\n                    href={href}\n                    id={id}\n                    prefetch={false}\n                  >\n                    {Label}\n                  </Link>\n                </div>\n              )\n            })}\n          </NavGroup>\n        )\n      })}\n    </Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}