npm - @payloadcms/ui - Versions diffs - 4.0.0-internal.c3ac604 → 4.0.0-internal.c6494b5 - Mend

@payloadcms/ui 4.0.0-internal.c3ac604 → 4.0.0-internal.c6494b5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1752) hide show

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

	@@ -1 +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":[]}
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 scrollbar-thin`} 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":[]}

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":[]}
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, 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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,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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":"AAAA;;;AACA,SAASA,aAAa,QAAQ;AAC9B,SAASC,eAAe,QAAQ;AAChC,OAAOC,KAAA,IAASC,SAAS,EAAEC,MAAM,QAAQ;AAEzC,SAASC,cAAc,QAAQ;AAC/B,SAASC,WAAW,QAAQ;AAS5B;;;AAGA,OAAO,MAAMC,UAAA,gBAAaL,KAAA,CAAMM,aAAa,CAAiB;EAC5DC,QAAA,EAAU;EACVC,OAAA,EAAS;EACTC,MAAA,EAAQ;EACRC,UAAA,EAAYA,CAAA,MAAO;AACrB;AAEA,OAAO,MAAMC,MAAA,GAASA,CAAA,KAAMX,KAAA,CAAMY,GAAG,CAACP,UAAA;AAEtC,MAAMQ,gBAAA,GAAmB,MAAOC,aAAA;EAC9B,MAAMC,QAAA,GAAW,MAAMD,aAAA,CAAcf,eAAA,CAAgBiB,GAAG;EACxD,MAAMC,cAAA,GAAiBF,QAAA,EAAUG,IAAA;EACjC,IAAI,OAAOD,cAAA,KAAmB,WAAW;IACvC,OAAOA,cAAA;EACT,OAAO;IACL,OAAO;EACT;AACF;AAEA;;;AAGA,OAAO,MAAME,WAAA,GAGRA,CAAC;EAAEC,QAAQ;EAAEC;AAAa,CAAE;EAC/B,MAAM;IACJC,WAAA,EAAa;MAAEC,CAAA,EAAGC,UAAU;MAAEC,CAAA,EAAGC,QAAQ;MAAEC,CAAA,EAAGC;IAAU;EAAE,CAC3D,GAAG9B,aAAA;EAEJ,MAAM+B,QAAA,GAAWzB,WAAA;EAEjB,MAAM;IAAEU;EAAa,CAAE,~~GAAGX~~,cAAA;~~EAC1B~~,MAAMM,MAAA,GAASP,MAAA,CAAO;~~EAEtB~~;~~EACA~~;~~EACA~~;EACA;EACA,MAAM,~~CAACM~~,OAAA,~~EAASE~~,~~UAAA~~,~~CAAW~~,~~GAAGV~~,KAAA,~~CAAM8B~~,QAAQ,CAACT,aAAA;~~EAE7C~~,MAAM,~~CAACd~~,QAAA,~~EAAUwB~~,WAAA,CAAY,~~GAAG/B~~,KAAA,~~CAAM8B~~,QAAQ,CAAC;EAE/C;~~EACA7B~~,SAAA,CAAU;IACR,IAAIuB,UAAA,KAAe,OAAO;MACxB,~~MAAMQ~~,qBAAA,GAAwB,MAAAA,CAAA;QAC5B,~~MAAMf~~,cAAA,GAAiB,MAAMJ,gBAAA,CAAiBC,aAAA;QAC9CJ,UAAA,CAAWO,cAAA;MACb;MAEA,~~KAAKe~~,qBAAA;IACP;EACF,GAAG,~~CAACR~~,UAAA,EAAYV,aAAA,EAAeJ,UAAA,CAAW;EAE1C;EACA;EACAT,SAAA,CAAU;IACR,~~IAAI2B~~,UAAA,KAAe,MAAM;~~MACvBlB~~,UAAA,CAAW;IACb;~~EACF~~,GAAG,~~CAACmB~~,QAAA,~~CAAS~~;~~EAEb~~;EACA;~~EACA5B~~,SAAA,CAAU;IACR,IAAIQ,MAAA,~~CAAOwB~~,OAAO,EAAE;MAClB,~~IAAIzB~~,OAAA,IAAWkB,QAAA,EAAU;QACvBjB,MAAA,~~CAAOwB~~,OAAO,CAACC,KAAK,CAACC,kBAAkB,GAAG;MAC5C,OAAO;~~QACL1B~~,MAAA,~~CAAOwB~~,OAAO,CAACC,KAAK,CAACC,kBAAkB,GAAG;MAC5C;IACF;EACF,GAAG,~~CAAC3B~~,OAAA,EAASkB,QAAA,CAAS;EAEtB;EACA;EACA;EACAzB,SAAA,CAAU;IACR,~~IAAIuB~~,~~UAAA~~,KAAe,~~QAAQE~~,QAAA,KAAa,~~QAAQE~~,UAAA,KAAe,~~MAAM~~;~~MACnElB~~,UAAA,CAAW;IACb;~~IACAqB~~,WAAA,CAAY;~~EACd~~,GAAG,~~CAACP~~,UAAA,EAAYE,QAAA,~~EAAUE~~,UAAA,CAAW;~~EAErC~~;EACA3B,SAAA,CAAU;IACR,OAAO;MACL,IAAIQ,MAAA,~~CAAOwB~~,OAAO,EAAE;~~QAClBxB~~,MAAA,~~CAAOwB~~,OAAO,CAACC,KAAK,CAACC,kBAAkB,GAAG;MAC5C;IACF;EACF,GAAG,EAAE;EAEL,~~oBAAOC~~,IAAA,~~CAAC/B~~,UAAA;~~IAAWgC~~,KAAA,EAAO;~~MAAE9B~~,QAAA;MAAUC,OAAA;MAASC,MAAA;MAAQC;IAAW;cAAIU;;AACxE","ignoreList":[]}
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","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 CHANGED Viewed

	@@ -1 +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"}
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,CAsElF,CAAA"}

package/dist/elements/Nav/getNavPrefs.js CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":[]}
1	+ {"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 CHANGED Viewed

	@@ -1 +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"}
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,CA0DA,CAAA"}

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

@@ -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 CHANGED Viewed

	@@ -1 +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":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,SAASC,cAAc,QAAQ;AAC/B,SAASC,UAAU,EAAEC,cAAc,QAAQ;AAC3C,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAIhC,SAASC,SAAS,QAAQ;AAC1B,SAASC,WAAW,QAAQ;AAC5B,SAASC,cAAc,QAAQ;AAC/B,SAASC,IAAI,QAAQ;AACrB,SAASC,QAAQ,QAAQ;AAEzB,MAAMC,SAAA,GAAY;AAElB;;;AAGA,OAAO,MAAMC,gBAAA,GAGRC,EAAA;EAAA,MAAAC,CAAA,GAAAd,EAAA;EAAC;IAAAe,MAAA;IAAAC;EAAA,IAAAH,EAA0B;EAC9B,MAAAI,QAAA,GAAiBV,WAAA;EAEjB;IAAAW,MAAA,EAAAC;EAAA,IAIIb,SAAA;EAHM;IAAAc,MAAA,EAAAC;EAAA,IAAAF,EAEP;EADS;IAAAG,KAAA,EAAAC;EAAA,IAAAF,EAAqB;EAIjC;IAAAG;EAAA,IAAiBhB,cAAA;EAAA,IAAAiB,EAAA;EAAA,IAAAX,CAAA,QAAAS,UAAA,IAAAT,CAAA,QAAAC,MAAA,IAAAD,CAAA,QAAAU,IAAA,IAAAV,CAAA,QAAAE,cAAA,EAAAD,MAAA,IAAAD,CAAA,QAAAG,QAAA;IAAA,IAAAS,EAAA;IAAA,IAAAZ,CAAA,QAAAS,UAAA,IAAAT,CAAA,QAAAU,IAAA,IAAAV,CAAA,QAAAE,cAAA,EAAAD,MAAA,IAAAD,CAAA,QAAAG,QAAA;MAIDS,EAAA,GAAAA,CAAAC,EAAA,EAAAC,GAAA;QAAC;UAAAC,QAAA;UAAAC;QAAA,IAAAH,EAAmB;QAAA,OAE5BI,IAAA,CAAArB,QAAA;UAAAsB,MAAA,EAAkBhB,cAAA,EAAAD,MAAA,GAAyBe,KAAA,GAAAG,IAAA;UAAAH,KAAA;UAAAI,QAAA,EACxCL,QAAA,CAAAM,GAAA,EAAAC,EAAA,EAAAC,CAAA;YAAc;cAAAC,IAAA;cAAAC,IAAA;cAAAT,KAAA,EAAAU;YAAA,IAAAJ,EAAqB;YAC9BK,GAAA,CAAAA,IAAA;YACAC,GAAA,CAAAA,EAAA;YAAA,IAEAH,IAAA,KAAArC,UAAA,CAAAyC,UAA8B;cAChCF,IAAA,CAAAA,CAAA,CAAOA;gBAAAA;gBAAAA,KAAA,CAAmCA,gBAAgBH,IAAA;cAAM,CAAC;cACjEI,EAAA,CAAAA,CAAA,CAAKA,OAAOJ,IAAA,EAAM;YAAlB;YAAA,IAGEC,IAAA,KAAArC,UAAA,CAAA0C,MAA0B;cAC5BH,IAAA,CAAAA,CAAA,CAAOA;gBAAAA;gBAAAA,KAAA,CAAmCA,YAAYH,IAAA;cAAM,CAAC;cAC7DI,EAAA,CAAAA,CAAA,CAAKA,cAAcJ,IAAA,EAAM;YAAzB;YAGF,MAAAO,QAAA,GACE5B,QAAA,CAAA6B,UAAA,CAAoBL,IAAA,KAAS,CAAC,KAAAM,SAAA,EAAAC,QAAA,CAAyB/B,QAAQ,CAACwB,IAAA,CAAAQ,MAAA,CAAY;YAE9E,MAAAC,SAAA,GAAkB,GAAAvC,SAAA,SAAqBkC,QAAA,GAAW,IAAAlC,SAAA,kBAA+B,GAAG,IAAI;YAExF,MAAAwC,KAAA,GACEpB,IAAA,CAAC;cAAAqB,SAAA,EAAgB,GAAAzC,SAAA,cAA0B;cAAAuB,QAAA,EAAGjC,cAAA,CAAe6B,OAAA,EAAON,IAAA;YAAA,C;~~gBAIlEP~~,~~QAAA,KAAawB,~~IAAA~~;cAAA~~,~~OAEbV,IAAA,~~CAAC;~~gBAAAqB~~,SAAA,EAAe,GAAAzC,SAAA,gBAA4B;~~gBAAAuB~~,QAAA,EAC1CH,IAAA,~~CAAC;kBAAAqB~~,~~SAAA,EAAeF,SAAA~~;~~kBAAAR~~,~~EAAA;kBAAAR~~,QAAA,~~EACbiB;gBAAA~~,~~C;iBAF8Cd~~,~~CAAA;YAAA;YAAA~~,~~OASrDN,~~IAAA,~~CAAC;cAAAqB~~,~~SAAA~~,~~EAAe~~,~~GAAAzC,SAAA,gBAA4B~~;~~cAAAuB~~,~~QAAA,EAC1CH,IAAA,CAAAtB,IAAA;gBAAA2C,~~SAAA,~~EAAiBF~~,SAAA;gBAAAT,IAAA;gBAAAC,EAAA;gBAAAW,QAAA;gBAAAnB,QAAA,~~EACdiB~~;cAAA,C;~~eAF8Cd~~,CAAA;UAAA,~~CAMvD~~;QAAA,~~GA1C4DT~~,GAAA;MAAA;~~MA6ClEd~~,CAAA,MAAAS,UAAA;MAAAT,CAAA,MAAAU,IAAA;MAAAV,CAAA,MAAAE,cAAA,EAAAD,MAAA;MAAAD,CAAA,MAAAG,QAAA;MAAAH,CAAA,OAAAY,EAAA;IAAA;MAAAA,EAAA,GAAAZ,CAAA;IAAA;~~IAhDFW~~,EAAA,GAAAM,IAAA,CAAA1B,QAAA;MAAA6B,QAAA,EACGnB,MAAA,CAAAoB,GAAA,CAAWT,~~EA+CZ~~;IAAA,C;;;;;;;;;;~~SAhDFD~~,E;~~CAmDJ~~","ignoreList":[]}
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 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":[]}

package/dist/elements/Nav/index.css CHANGED Viewed

@@ -3,6 +3,8 @@
     position: sticky;
     top: 0;
     left: 0;
+    display: flex;
+    flex-direction: column;
     flex-shrink: 0;
     height: 100vh;
     width: var(--nav-width);
@@ -19,20 +21,20 @@
     border-left: var(--stroke-width-small) solid var(--color-border);
   }
-  .nav__mobile-close {
-    display: none;
+  .nav__close {
+    display: flex;
+    align-items: center;
     background: none;
     border: 0;
     outline: 0;
-    padding: var(--spacer-3) 0;
   }
   .nav__scroll {
-    height: 100%;
+    flex: 1 1 0;
+    min-height: 0;
+    width: 100%;
     display: flex;
     flex-direction: column;
-    padding: var(--nav-padding-block-start) var(--nav-padding-inline-end)
-      var(--nav-padding-block-end) var(--nav-padding-inline-start);
     overflow-y: auto;
     &::-webkit-scrollbar {
@@ -55,13 +57,6 @@
   .nav__controls {
     display: flex;
     flex-direction: column;
-    gap: var(--spacer-2-5);
-    margin-top: auto;
-    margin-bottom: 0;
-    > :first-child {
-      margin-top: var(--spacer-3);
-    }
   }
   .nav__log-out {
@@ -72,40 +67,62 @@
     transform: translateX(calc(-1 * var(--spacer-1) * 0.5));
   }
-  .nav__link-wrapper {
-    padding-block: var(--spacer-1);
-    width: calc(100% + var(--spacer-1));
-    margin-left: calc(-1 * var(--spacer-1));
-    &:first-child {
-      padding-block-start: 0;
-    }
+  .nav__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-shrink: 0;
+    width: 100%;
+    padding: var(--spacer-2) var(--spacer-2) var(--spacer-2) var(--spacer-2);
+    background-color: var(--color-bg);
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
   }
   .nav__link {
     display: flex;
     align-items: center;
     position: relative;
-    padding-block: var(--spacer-1);
-    padding-inline: var(--spacer-2);
+    isolation: isolate;
+    padding-block: var(--spacer-2);
+    padding-inline: var(--spacer-3);
     text-decoration: none;
+    &::before {
+      content: '';
+      position: absolute;
+      inset-block: var(--spacer-1);
+      inset-inline: var(--spacer-2);
+      border-radius: var(--button-radius);
+      z-index: -1;
+    }
   }
-  a.nav__link {
-    border-radius: var(--button-radius);
+  a.nav__link:not(.nav__link--selected):hover {
+    text-decoration: none;
-    &:hover {
+    &::before {
       background: var(--color-bg-secondary);
-      text-decoration: none;
+    }
+  }
+  a.nav__link:focus-visible {
+    outline: none;
+    &::before {
+      outline: var(--accessibility-outline);
+      outline-offset: var(--accessibility-outline-offset);
     }
   }
   .nav__link--selected {
     font-weight: 600;
-    border-radius: var(--button-radius);
-    background: var(--color-bg-selected);
+    &::before {
+      background: var(--color-bg-selected);
+    }
   }
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
   @media (max-width: 1024px) {
     .nav__scroll {
       --nav-padding-inline-start: var(--spacer-2);
@@ -113,15 +130,11 @@
     }
   }
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
   @media (max-width: 768px) {
     .nav__scroll {
       --nav-padding-inline-start: var(--gutter-h);
       --nav-padding-inline-end: var(--gutter-h);
     }
-    .nav__mobile-close {
-      display: flex;
-      align-items: center;
-    }
   }
 }

package/dist/elements/Nav/index.d.ts CHANGED Viewed

@@ -1,8 +1,12 @@
 import type { PayloadRequest, ServerProps } from 'payload';
 import React from 'react';
+import type { UserMenuSettingsGroup } from '../UserMenu/SettingsMenu/index.js';
 import './index.css';
 export type NavProps = {
+    CustomAvatar?: React.ReactNode;
+    CustomLogoutButton?: React.ReactNode;
     req?: PayloadRequest;
+    settingsItemGroups?: UserMenuSettingsGroup[];
 } & ServerProps;
 export declare const DefaultNav: React.FC<NavProps>;
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/Nav/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Nav/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAG1D,OAAO,KAAK,MAAM,OAAO,CAAA;~~AAWzB~~,OAAO,aAAa,CAAA;AAMpB,MAAM,MAAM,QAAQ,GAAG;IACrB,GAAG,CAAC,EAAE,cAAc,CAAA;~~CACrB~~,GAAG,WAAW,CAAA;AAEf,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,~~CAsMzC~~,CAAA"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Nav/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAG1D,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAA;AAe9E,OAAO,aAAa,CAAA;AAMpB,MAAM,MAAM,QAAQ,GAAG;IACrB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACpC,GAAG,CAAC,EAAE,cAAc,CAAA;IACpB,kBAAkB,CAAC,EAAE,qBAAqB,EAAE,CAAA;CAC7C,GAAG,WAAW,CAAA;AAEf,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAsNzC,CAAA"}

package/dist/elements/Nav/index.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { EntityType } from 'payload';
 import React from 'react';
 /* eslint-disable payload/no-imports-from-exports-dir -- Server component must reference exports dir for proper client boundary */
-import { DefaultNavClient, NavWrapper, SettingsMenuButton } from '../../exports/client/index.js';
+import { DefaultNavClient, NavSidebarToggle, NavWrapper, SettingsMenuButton, UserMenu } from '../../exports/client/index.js';
 /* eslint-enable payload/no-imports-from-exports-dir */
 import { AlignJustifiedIcon } from '../../icons/AlignJustified/index.js';
 import { groupNavItems } from '../../utilities/groupNavItems.js';
@@ -13,6 +13,8 @@ const baseClass = 'nav';
 import { getNavPrefs } from './getNavPrefs.js';
 export const DefaultNav = async props => {
   const {
+    CustomAvatar,
+    CustomLogoutButton,
     documentSubViewType,
     i18n,
     locale,
@@ -21,6 +23,7 @@ export const DefaultNav = async props => {
     permissions,
     req,
     searchParams,
+    settingsItemGroups,
     user,
     viewType,
     visibleEntities
@@ -160,6 +163,17 @@ export const DefaultNav = async props => {
   }, ...(payload.config.admin?.components?.sidebar?.tabs?.filter(tab => !tab.disabled) || [])];
   return /*#__PURE__*/_jsxs(NavWrapper, {
     baseClass: baseClass,
+    header: /*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__header`,
+      children: [/*#__PURE__*/_jsx(UserMenu, {
+        CustomAvatar: CustomAvatar,
+        CustomLogoutButton: CustomLogoutButton,
+        settingsItemGroups: settingsItemGroups,
+        showTitle: true
+      }), /*#__PURE__*/_jsx(NavSidebarToggle, {
+        baseClass: baseClass
+      })]
+    }),
     children: [RenderedBeforeNav, /*#__PURE__*/_jsxs("nav", {
       className: `${baseClass}__wrap`,
       children: [/*#__PURE__*/_jsx(SidebarTabs, {