@payloadcms/ui 4.0.0-internal.38b7f1d → 4.0.0-internal.5d5a2b2

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

@@ -0,0 +1,87 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
+import React from 'react';
+// eslint-disable-next-line payload/no-imports-from-exports-dir -- Server component must reference exports dir for proper client boundary
+import { SidebarTabsClient } from '../../../exports/client/index.js';
+import { RenderServerComponent } from '../../RenderServerComponent/index.js';
+import './index.css';
+const baseClass = 'sidebar-tabs';
+export const SidebarTabs = props => {
+  const {
+    documentSubViewType,
+    i18n,
+    locale,
+    navPreferences,
+    params,
+    payload,
+    permissions,
+    req,
+    searchParams,
+    tabs,
+    user,
+    viewType
+  } = props;
+  // Determine which tab should be active on initial load
+  // First try saved preference, then default tab, then first tab
+  const preferredTabSlug = navPreferences.activeTab || tabs.find(tab => tab.isDefaultActive)?.slug || tabs[0]?.slug;
+  // Verify the preferred tab actually exists, otherwise fall back to default or first tab
+  const activeTab = tabs.find(t => t.slug === preferredTabSlug) || tabs.find(tab => tab.isDefaultActive) || tabs[0];
+  const initialActiveTabID = activeTab?.slug || tabs[0]?.slug;
+  // Build initial tab contents
+  // Strategy: Pre-render tabs that are already React elements (can't be lazy-loaded),
+  // and only render the initially active tab if it's a CustomComponent (can be lazy-loaded)
+  const initialTabContents = {};
+  const renderComponent = component => {
+    // Check if component is already a React node (payload provided React component)
+    if (/*#__PURE__*/React.isValidElement(component)) {
+      return component;
+    } else {
+      // Otherwise render it as a CustomComponent
+      return RenderServerComponent({
+        clientProps: {
+          documentSubViewType,
+          viewType
+        },
+        Component: component,
+        importMap: payload.importMap,
+        serverProps: {
+          i18n,
+          locale,
+          params,
+          payload,
+          permissions,
+          req,
+          searchParams,
+          user
+        }
+      });
+    }
+  };
+  for (const tab of tabs) {
+    if (/*#__PURE__*/React.isValidElement(tab.components.Content)) {
+      initialTabContents[tab.slug] = tab.components.Content;
+    }
+  }
+  // If the active tab is a CustomComponent (lazy-loadable), render it now
+  if (activeTab && ! /*#__PURE__*/React.isValidElement(activeTab.components.Content)) {
+    initialTabContents[activeTab.slug] = renderComponent(activeTab.components.Content);
+  }
+  return /*#__PURE__*/_jsx(SidebarTabsClient, {
+    baseClass: baseClass,
+    initialActiveTabID: initialActiveTabID,
+    initialTabContents: initialTabContents,
+    tabs: tabs.map(tab => {
+      const labelText = tab.label ? getTranslation(tab.label, i18n) : tab.slug;
+      // CustomComponents can be lazy-loaded/revalidated, React elements cannot
+      const isLazyLoadable = ! /*#__PURE__*/React.isValidElement(tab.components.Content);
+      return {
+        slug: tab.slug,
+        icon: renderComponent(tab.components.Icon),
+        isDefaultActive: tab.isDefaultActive,
+        label: labelText,
+        lazyLoadable: isLazyLoadable
+      };
+    })
+  });
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["getTranslation","React","SidebarTabsClient","RenderServerComponent","baseClass","SidebarTabs","props","documentSubViewType","i18n","locale","navPreferences","params","payload","permissions","req","searchParams","tabs","user","viewType","preferredTabSlug","activeTab","find","tab","isDefaultActive","slug","t","initialActiveTabID","initialTabContents","renderComponent","component","isValidElement","clientProps","Component","importMap","serverProps","components","Content","_jsx","map","labelText","label","isLazyLoadable","icon","Icon","lazyLoadable"],"sources":["../../../../src/elements/Nav/SidebarTabs/index.tsx"],"sourcesContent":["import type { NavPreferences, PayloadComponent, SidebarTab } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { NavProps } from '../index.js'\n\n// eslint-disable-next-line payload/no-imports-from-exports-dir -- Server component must reference exports dir for proper client boundary\nimport { SidebarTabsClient } from '../../../exports/client/index.js'\nimport { RenderServerComponent } from '../../RenderServerComponent/index.js'\nimport './index.css'\n\ntype SidebarTabWithReactNode = {\n  components: {\n    Content: PayloadComponent | React.ReactNode\n    Icon: PayloadComponent | React.ReactNode\n  }\n} & Omit<SidebarTab, 'components'>\n\nexport type SidebarTabsProps = {\n  navPreferences: NavPreferences\n  tabs: SidebarTabWithReactNode[]\n} & NavProps\n\nconst baseClass = 'sidebar-tabs'\n\nexport const SidebarTabs: React.FC<SidebarTabsProps> = (props) => {\n  const {\n    documentSubViewType,\n    i18n,\n    locale,\n    navPreferences,\n    params,\n    payload,\n    permissions,\n    req,\n    searchParams,\n    tabs,\n    user,\n    viewType,\n  } = props\n\n  // Determine which tab should be active on initial load\n  // First try saved preference, then default tab, then first tab\n  const preferredTabSlug =\n    navPreferences.activeTab || tabs.find((tab) => tab.isDefaultActive)?.slug || tabs[0]?.slug\n\n  // Verify the preferred tab actually exists, otherwise fall back to default or first tab\n  const activeTab =\n    tabs.find((t) => t.slug === preferredTabSlug) ||\n    tabs.find((tab) => tab.isDefaultActive) ||\n    tabs[0]\n\n  const initialActiveTabID = activeTab?.slug || tabs[0]?.slug\n\n  // Build initial tab contents\n  // Strategy: Pre-render tabs that are already React elements (can't be lazy-loaded),\n  // and only render the initially active tab if it's a CustomComponent (can be lazy-loaded)\n  const initialTabContents: Record<string, React.ReactNode> = {}\n\n  const renderComponent = (component: PayloadComponent | React.ReactNode): React.ReactNode => {\n    // Check if component is already a React node (payload provided React component)\n    if (React.isValidElement(component)) {\n      return component\n    } else {\n      // Otherwise render it as a CustomComponent\n      return RenderServerComponent({\n        clientProps: {\n          documentSubViewType,\n          viewType,\n        },\n        Component: component as PayloadComponent,\n        importMap: payload.importMap,\n        serverProps: {\n          i18n,\n          locale,\n          params,\n          payload,\n          permissions,\n          req,\n          searchParams,\n          user,\n        },\n      })\n    }\n  }\n\n  for (const tab of tabs) {\n    if (React.isValidElement(tab.components.Content)) {\n      initialTabContents[tab.slug] = tab.components.Content\n    }\n  }\n\n  // If the active tab is a CustomComponent (lazy-loadable), render it now\n  if (activeTab && !React.isValidElement(activeTab.components.Content)) {\n    initialTabContents[activeTab.slug] = renderComponent(activeTab.components.Content)\n  }\n\n  return (\n    <SidebarTabsClient\n      baseClass={baseClass}\n      initialActiveTabID={initialActiveTabID}\n      initialTabContents={initialTabContents}\n      tabs={tabs.map((tab) => {\n        const labelText = tab.label ? getTranslation(tab.label, i18n) : tab.slug\n        // CustomComponents can be lazy-loaded/revalidated, React elements cannot\n        const isLazyLoadable = !React.isValidElement(tab.components.Content)\n\n        return {\n          slug: tab.slug,\n          icon: renderComponent(tab.components.Icon),\n          isDefaultActive: tab.isDefaultActive,\n          label: labelText,\n          lazyLoadable: isLazyLoadable,\n        }\n      })}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,10 @@
+import type { ServerFunction } from 'payload';
+import type React from 'react';
+export type RenderTabServerFnArgs = {
+    tabSlug: string;
+};
+export type RenderTabServerFnReturnType = {
+    component: React.ReactNode;
+};
+export declare const renderTabHandler: ServerFunction<RenderTabServerFnArgs, RenderTabServerFnReturnType>;
+//# sourceMappingURL=renderTabServerFn.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderTabServerFn.d.ts","sourceRoot":"","sources":["../../../../src/elements/Nav/SidebarTabs/renderTabServerFn.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAC7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,2BAA2B,GAAG;IACxC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,cAAc,CAC3C,qBAAqB,EACrB,2BAA2B,CA6C5B,CAAA"}

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

@@ -0,0 +1,54 @@
+import { RenderServerComponent } from '../../RenderServerComponent/index.js';
+export const renderTabHandler = ({
+  req,
+  tabSlug
+}) => {
+  if (!req.user) {
+    throw new Error('Unauthorized');
+  }
+  const {
+    importMap
+  } = req.payload;
+  const {
+    tabs
+  } = req.payload.config.admin.components?.sidebar || {};
+  if (!tabs) {
+    return {
+      component: null
+    };
+  }
+  const tabConfig = tabs.find(tab => tab.slug === tabSlug);
+  if (!tabConfig) {
+    return {
+      component: null
+    };
+  }
+  try {
+    const component = RenderServerComponent({
+      Component: tabConfig.components.Content,
+      importMap,
+      serverProps: {
+        i18n: req.i18n,
+        locale: req.locale,
+        params: req.routeParams,
+        payload: req.payload,
+        req,
+        searchParams: req.query,
+        user: req.user
+      }
+    });
+    return {
+      component
+    };
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    req.payload.logger.error({
+      err: error,
+      msg: `Error rendering tab "${tabSlug}": ${errorMessage}`
+    });
+    return {
+      component: null
+    };
+  }
+};
+//# sourceMappingURL=renderTabServerFn.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderTabServerFn.js","names":["RenderServerComponent","renderTabHandler","req","tabSlug","user","Error","importMap","payload","tabs","config","admin","components","sidebar","component","tabConfig","find","tab","slug","Component","Content","serverProps","i18n","locale","params","routeParams","searchParams","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  tabSlug: string\n}\n\nexport type RenderTabServerFnReturnType = {\n  component: React.ReactNode\n}\n\nexport const renderTabHandler: ServerFunction<\n  RenderTabServerFnArgs,\n  RenderTabServerFnReturnType\n> = ({ req, 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: 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;AAUtC,OAAO,MAAMC,gBAAA,GAGTA,CAAC;EAAEC,GAAG;EAAEC;AAAO,CAAE;EACnB,IAAI,CAACD,GAAA,CAAIE,IAAI,EAAE;IACb,MAAM,IAAIC,KAAA,CAAM;EAClB;EAEA,MAAM;IAAEC;EAAS,CAAE,GAAGJ,GAAA,CAAIK,OAAO;EACjC,MAAM;IAAEC;EAAI,CAAE,GAAGN,GAAA,CAAIK,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,GAAYb,qBAAA,CAAsB;MACtCkB,SAAA,EAAWJ,SAAA,CAAUH,UAAU,CAACQ,OAAO;MACvCb,SAAA;MACAc,WAAA,EAAa;QACXC,IAAA,EAAMnB,GAAA,CAAImB,IAAI;QACdC,MAAA,EAAQpB,GAAA,CAAIoB,MAAM;QAClBC,MAAA,EAAQrB,GAAA,CAAIsB,WAAW;QACvBjB,OAAA,EAASL,GAAA,CAAIK,OAAO;QACpBL,GAAA;QACAuB,YAAA,EAAcvB,GAAA,CAAIwB,KAAK;QACvBtB,IAAA,EAAMF,GAAA,CAAIE;MACZ;IACF;IAEA,OAAO;MAAES;IAAU;EACrB,EAAE,OAAOc,KAAA,EAAO;IACd,MAAMC,YAAA,GAAeD,KAAA,YAAiBtB,KAAA,GAAQsB,KAAA,CAAME,OAAO,GAAGC,MAAA,CAAOH,KAAA;IAErEzB,GAAA,CAAIK,OAAO,CAACwB,MAAM,CAACJ,KAAK,CAAC;MACvBK,GAAA,EAAKL,KAAA;MACLM,GAAA,EAAK,wBAAwB9B,OAAA,MAAayB,YAAA;IAC5C;IAEA,OAAO;MAAEf,SAAA,EAAW;IAAK;EAC3B;AACF","ignoreList":[]}

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

@@ -4,7 +4,6 @@ type NavContextType = {
     navOpen: boolean;
     navRef: React.RefObject<HTMLDivElement | null>;
     setNavOpen: (value: boolean) => void;
-    shouldAnimate: boolean;
 };
 /**
  * @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":"AAIA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAIhD,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;IACpC,aAAa,EAAE,OAAO,CAAA;CACvB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,+BAMrB,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,CAkFA,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,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"}

package/dist/elements/Nav/context.js

@@ -2,10 +2,10 @@
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useWindowInfo } from '@faceless-ui/window-info';
-import { usePathname } from 'next/navigation.js';
 import { PREFERENCE_KEYS } from 'payload/shared';
 import React, { useEffect, useRef } from 'react';
 import { usePreferences } from '../../providers/Preferences/index.js';
+import { usePathname } from '../../providers/RouterAdapter/index.js';
 /**
  * @internal
  */
@@ -13,8 +13,7 @@ export const NavContext = /*#__PURE__*/React.createContext({
   hydrated: false,
   navOpen: true,
   navRef: null,
-  setNavOpen: () => {},
-  shouldAnimate: false
+  setNavOpen: () => {}
 });
 export const useNav = () => React.use(NavContext);
 const getNavPreference = async getPreference => {
@@ -50,7 +49,6 @@ export const NavProvider = ({
   // 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 [shouldAnimate, setShouldAnimate] = React.useState(false);
   const [hydrated, setHydrated] = React.useState(false);
   // on load check the user's preference and set "initial" state
   useEffect(() => {
@@ -88,12 +86,6 @@ export const NavProvider = ({
       setNavOpen(false);
     }
     setHydrated(true);
-    const timeout = setTimeout(() => {
-      setShouldAnimate(true);
-    }, 100);
-    return () => {
-      clearTimeout(timeout);
-    };
   }, [largeBreak, midBreak, smallBreak]);
   // when the component unmounts, clear all body scroll locks
   useEffect(() => {
@@ -108,8 +100,7 @@ export const NavProvider = ({
       hydrated,
       navOpen,
       navRef,
-      setNavOpen,
-      shouldAnimate
+      setNavOpen
     },
     children: children
   });

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":["useWindowInfo","usePathname","PREFERENCE_KEYS","React","useEffect","useRef","usePreferences","NavContext","createContext","hydrated","navOpen","navRef","setNavOpen","shouldAnimate","useNav","use","getNavPreference","getPreference","navPrefs","NAV","preferredState","open","NavProvider","children","initialIsOpen","breakpoints","l","largeBreak","m","midBreak","s","smallBreak","pathname","useState","setShouldAnimate","setHydrated","setNavFromPreferences","current","style","overscrollBehavior","timeout","setTimeout","clearTimeout","_jsx","value"],"sources":["../../../src/elements/Nav/context.tsx"],"sourcesContent":["'use client'\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport { usePathname } from 'next/navigation.js'\nimport { PREFERENCE_KEYS } from 'payload/shared'\nimport React, { useEffect, useRef } from 'react'\n\nimport { usePreferences } from '../../providers/Preferences/index.js'\n\ntype NavContextType = {\n  hydrated: boolean\n  navOpen: boolean\n  navRef: React.RefObject<HTMLDivElement | null>\n  setNavOpen: (value: boolean) => void\n  shouldAnimate: boolean\n}\n\n/**\n * @internal\n */\nexport const NavContext = React.createContext<NavContextType>({\n  hydrated: false,\n  navOpen: true,\n  navRef: null,\n  setNavOpen: () => {},\n  shouldAnimate: false,\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 [shouldAnimate, setShouldAnimate] = React.useState(false)\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\n    const timeout = setTimeout(() => {\n      setShouldAnimate(true)\n    }, 100)\n    return () => {\n      clearTimeout(timeout)\n    }\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 (\n    <NavContext value={{ hydrated, navOpen, navRef, setNavOpen, shouldAnimate }}>\n      {children}\n    </NavContext>\n  )\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","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":[]}

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

@@ -0,0 +1,3 @@
+import type { NavPreferences, PayloadRequest } from 'payload';
+export declare const getNavPrefs: (req: PayloadRequest) => Promise<NavPreferences>;
+//# sourceMappingURL=getNavPrefs.d.ts.map

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

@@ -0,0 +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"}

package/dist/elements/Nav/getNavPrefs.js

@@ -0,0 +1,61 @@
+import { PREFERENCE_KEYS } from 'payload/shared';
+import { cache } from 'react';
+export const getNavPrefs = cache(async req => {
+  if (!req?.user?.collection) {
+    return {
+      activeTab: undefined,
+      groups: {},
+      open: true
+    };
+  }
+  const navPrefs = await req.payload.find({
+    collection: 'payload-preferences',
+    depth: 0,
+    limit: 1,
+    pagination: false,
+    req,
+    where: {
+      and: [{
+        key: {
+          equals: PREFERENCE_KEYS.NAV
+        }
+      }, {
+        'user.relationTo': {
+          equals: req.user.collection
+        }
+      }, {
+        'user.value': {
+          equals: req?.user?.id
+        }
+      }]
+    }
+  })?.then(res => res?.docs?.[0]?.value);
+  const sidebarPrefs = await req.payload.find({
+    collection: 'payload-preferences',
+    depth: 0,
+    limit: 1,
+    pagination: false,
+    req,
+    where: {
+      and: [{
+        key: {
+          equals: PREFERENCE_KEYS.NAV_SIDEBAR_ACTIVE_TAB
+        }
+      }, {
+        'user.relationTo': {
+          equals: req.user.collection
+        }
+      }, {
+        'user.value': {
+          equals: req?.user?.id
+        }
+      }]
+    }
+  })?.then(res => res?.docs?.[0]?.value);
+  return {
+    activeTab: sidebarPrefs?.activeTab,
+    groups: navPrefs?.groups ?? {},
+    open: navPrefs?.open ?? true
+  };
+});
+//# sourceMappingURL=getNavPrefs.js.map

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

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

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

@@ -0,0 +1,11 @@
+import type { NavPreferences } from 'payload';
+import React from 'react';
+import type { groupNavItems } from '../../utilities/groupNavItems.js';
+/**
+ * @internal
+ */
+export declare const DefaultNavClient: React.FC<{
+    groups: ReturnType<typeof groupNavItems>;
+    navPreferences: NavPreferences;
+}>;
+//# sourceMappingURL=index.client.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,121 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
+import { EntityType, formatAdminURL } from 'payload/shared';
+import React, { Fragment } from 'react';
+import { useConfig } from '../../providers/Config/index.js';
+import { usePathname } from '../../providers/RouterAdapter/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { Link } from '../Link/index.js';
+import { NavGroup } from '../NavGroup/index.js';
+const baseClass = 'nav';
+/**
+ * @internal
+ */
+export const DefaultNavClient = t0 => {
+  const $ = _c(11);
+  const {
+    groups,
+    navPreferences
+  } = t0;
+  const pathname = usePathname();
+  const {
+    config: t1
+  } = useConfig();
+  const {
+    routes: t2
+  } = t1;
+  const {
+    admin: adminRoute
+  } = t2;
+  const {
+    i18n
+  } = useTranslation();
+  let t3;
+  if ($[0] !== adminRoute || $[1] !== groups || $[2] !== i18n || $[3] !== navPreferences?.groups || $[4] !== pathname) {
+    let t4;
+    if ($[6] !== adminRoute || $[7] !== i18n || $[8] !== navPreferences?.groups || $[9] !== pathname) {
+      t4 = (t5, key) => {
+        const {
+          entities,
+          label
+        } = t5;
+        return _jsx(NavGroup, {
+          isOpen: navPreferences?.groups?.[label]?.open,
+          label,
+          children: entities.map((t6, i) => {
+            const {
+              slug,
+              type,
+              label: label_0
+            } = t6;
+            let href;
+            let id;
+            if (type === EntityType.collection) {
+              href = formatAdminURL({
+                adminRoute,
+                path: `/collections/${slug}`
+              });
+              id = `nav-${slug}`;
+            }
+            if (type === EntityType.global) {
+              href = formatAdminURL({
+                adminRoute,
+                path: `/globals/${slug}`
+              });
+              id = `nav-global-${slug}`;
+            }
+            const isActive = pathname.startsWith(href) && ["/", undefined].includes(pathname[href.length]);
+            const linkClass = `${baseClass}__link${isActive ? ` ${baseClass}__link--selected` : ""}`;
+            const Label = _jsx("span", {
+              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, {
+                className: linkClass,
+                href,
+                id,
+                prefetch: false,
+                children: Label
+              })
+            }, i);
+          })
+        }, key);
+      };
+      $[6] = adminRoute;
+      $[7] = i18n;
+      $[8] = navPreferences?.groups;
+      $[9] = pathname;
+      $[10] = t4;
+    } else {
+      t4 = $[10];
+    }
+    t3 = _jsx(Fragment, {
+      children: groups.map(t4)
+    });
+    $[0] = adminRoute;
+    $[1] = groups;
+    $[2] = i18n;
+    $[3] = navPreferences?.groups;
+    $[4] = pathname;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  return t3;
+};
+//# sourceMappingURL=index.client.js.map

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

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

package/dist/elements/Nav/index.css

@@ -0,0 +1,132 @@
+@layer payload-default {
+  .nav {
+    position: sticky;
+    top: 0;
+    left: 0;
+    flex-shrink: 0;
+    height: 100vh;
+    width: var(--nav-width);
+    border-right: 1px solid var(--color-border);
+    overflow: hidden;
+    --nav-padding-inline-start: var(--spacer-2-5);
+    --nav-padding-inline-end: var(--spacer-2-5);
+    --nav-padding-block-start: var(--spacer-2-5);
+    --nav-padding-block-end: var(--spacer-5);
+  }
+
+  [dir='rtl'] .nav {
+    border-right: none;
+    border-left: 1px solid var(--color-border);
+  }
+
+  .nav__mobile-close {
+    display: none;
+    background: none;
+    border: 0;
+    outline: 0;
+    padding: var(--spacer-3) 0;
+  }
+
+  .nav__scroll {
+    height: 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 {
+      display: none;
+    }
+  }
+
+  .nav__wrap {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    flex-grow: 1;
+  }
+
+  .nav__label {
+    color: var(--color-text-tertiary);
+  }
+
+  .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 {
+    border-radius: var(--button-radius);
+  }
+
+  .nav__log-out:hover g {
+    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__link {
+    display: flex;
+    align-items: center;
+    position: relative;
+    padding-block: var(--spacer-1);
+    padding-inline: var(--spacer-2);
+    text-decoration: none;
+  }
+
+  a.nav__link {
+    border-radius: var(--button-radius);
+
+    &:hover {
+      background: var(--color-bg-secondary);
+      text-decoration: none;
+    }
+  }
+
+  .nav__link--selected {
+    font-weight: 600;
+    border-radius: var(--button-radius);
+    background: var(--color-bg-selected);
+  }
+
+  @media (max-width: 1024px) {
+    .nav__scroll {
+      --nav-padding-inline-start: var(--spacer-2);
+      --nav-padding-inline-end: var(--spacer-2);
+    }
+  }
+
+  @media (max-width: 768px) {
+    .nav__scroll {
+      --nav-padding-inline-start: var(--gutter-h);
+      --nav-padding-inline-end: var(--gutter-h);
+    }
+
+    .nav__link {
+      font-size: var(--text-body-small-font-size);
+      line-height: var(--spacer-4);
+    }
+
+    .nav__mobile-close {
+      display: flex;
+      align-items: center;
+    }
+  }
+}