@payloadcms/ui 4.0.0-beta.4 → 4.0.0-beta.6

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

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/elements/Nav/context.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAKhD,KAAK,cAAc,GAAG;IACpB,QAAQ,EAAE,OAAO,CAAA;IACjB,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC9C,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,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"}
+{"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,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,iBAAiB,GAAG,IAAI,CAAC,CAAA;IAC5E,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,CAwGA,CAAA"}

package/dist/elements/Nav/context.js

@@ -45,6 +45,7 @@ export const NavProvider = ({
     setPreference
   } = usePreferences();
   const navRef = useRef(null);
+  const navToggleRef = useRef(null);
   const previousBreakpoints = useRef({
     large: largeBreak,
     mid: midBreak,
@@ -121,6 +122,7 @@ export const NavProvider = ({
       hydrated,
       navOpen,
       navRef,
+      navToggleRef,
       setNavOpen
     },
     children: children

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":["useWindowInfo","PREFERENCE_KEYS","React","useEffect","useRef","usePreferences","usePathname","NavContext","createContext","hydrated","navOpen","navRef","setNavOpen","useNav","use","getNavPreference","getPreference","navPrefs","NAV","preferredState","open","NavProvider","children","initialIsOpen","breakpoints","l","largeBreak","m","midBreak","s","smallBreak","pathname","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":[]}
+{"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","navToggleRef","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  navToggleRef?: React.RefObject<HTMLAnchorElement | HTMLButtonElement | 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 navToggleRef = useRef<HTMLAnchorElement | HTMLButtonElement>(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 (\n    <NavContext value={{ hydrated, navOpen, navRef, navToggleRef, setNavOpen }}>\n      {children}\n    </NavContext>\n  )\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;AAU5B;;;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,aAAa;IAAEgB;EAAa,CAAE,GAAG3B,cAAA;EACzC,MAAMM,MAAA,GAASP,MAAA,CAAO;EACtB,MAAM6B,YAAA,GAAe7B,MAAA,CAA8C;EACnE,MAAM8B,mBAAA,GAAsB9B,MAAA,CAAO;IACjC+B,KAAA,EAAOT,UAAA;IACPU,GAAA,EAAKR,QAAA;IACLS,KAAA,EAAOP;EACT;EACA,MAAMQ,gBAAA,GAAmBlC,MAAA,CAAO2B,QAAA;EAEhC;EACA,MAAM,CAACrB,OAAA,EAAS6B,eAAA,CAAgB,GAAGrC,KAAA,CAAMsC,QAAQ,CAACjB,aAAA;EAElD,MAAMX,UAAA,GAAaV,KAAA,CAAMuC,WAAW,CAClC,CAACC,KAAA,EAAgBC,OAAA,GAAU,KAAK;IAC9BJ,eAAA,CAAgBG,KAAA;IAEhB,IAAIC,OAAA,EAAS;MACX,KAAKX,aAAA,CAAc/B,eAAA,CAAgBiB,GAAG,EAAE;QAAEE,IAAA,EAAMsB;MAAM,GAAG;IAC3D;EACF,GACA,CAACV,aAAA,CAAc;EAGjB,MAAM,CAACvB,QAAA,EAAUmC,WAAA,CAAY,GAAG1C,KAAA,CAAMsC,QAAQ,CAAC;EAE/C;EACArC,SAAA,CAAU;IACR,IAAIuB,UAAA,KAAe,OAAO;MACxB,MAAMmB,qBAAA,GAAwB,MAAAA,CAAA;QAC5B,MAAM1B,cAAA,GAAiB,MAAMJ,gBAAA,CAAiBC,aAAA;QAC9CJ,UAAA,CAAWO,cAAA;MACb;MAEA,KAAK0B,qBAAA;IACP;EACF,GAAG,CAACnB,UAAA,EAAYV,aAAA,EAAeJ,UAAA,CAAW;EAE1C;EACA;EACAT,SAAA,CAAU;IACR,IAAImC,gBAAA,CAAiBQ,OAAO,KAAKf,QAAA,IAAYD,UAAA,KAAe,MAAM;MAChElB,UAAA,CAAW;IACb;IACA0B,gBAAA,CAAiBQ,OAAO,GAAGf,QAAA;EAC7B,GAAG,CAACA,QAAA,EAAUnB,UAAA,EAAYkB,UAAA,CAAW;EAErC;EACA;EACA3B,SAAA,CAAU;IACR,IAAIQ,MAAA,CAAOmC,OAAO,EAAE;MAClB,IAAIpC,OAAA,IAAWkB,QAAA,EAAU;QACvBjB,MAAA,CAAOmC,OAAO,CAACC,KAAK,CAACC,kBAAkB,GAAG;MAC5C,OAAO;QACLrC,MAAA,CAAOmC,OAAO,CAACC,KAAK,CAACC,kBAAkB,GAAG;MAC5C;IACF;EACF,GAAG,CAACtC,OAAA,EAASkB,QAAA,CAAS;EAEtB;EACA;EACA;EACAzB,SAAA,CAAU;IACR,MAAM8C,QAAA,GAAWf,mBAAA,CAAoBY,OAAO;IAE5C,IACEpB,UAAC,KAAe,QAAQuB,QAAA,CAASd,KAAK,KAAK,SAC1CP,QAAA,KAAa,QAAQqB,QAAA,CAASb,GAAG,KAAK,SACtCN,UAAA,KAAe,QAAQmB,QAAA,CAASZ,KAAK,KAAK,MAC3C;MACAzB,UAAA,CAAW;IACb;IAEAsB,mBAAA,CAAoBY,OAAO,GAAG;MAC5BX,KAAA,EAAOT,UAAA;MACPU,GAAA,EAAKR,QAAA;MACLS,KAAA,EAAOP;IACT;IACA,IAAI,OAAOA,UAAA,KAAe,WAAW;MACnCc,WAAA,CAAY;IACd;EACF,GAAG,CAAClB,UAAA,EAAYE,QAAA,EAAUhB,UAAA,EAAYkB,UAAA,CAAW;EAEjD;EACA3B,SAAA,CAAU;IACR,OAAO;MACL,IAAIQ,MAAA,CAAOmC,OAAO,EAAE;QAClBnC,MAAA,CAAOmC,OAAO,CAACC,KAAK,CAACC,kBAAkB,GAAG;MAC5C;IACF;EACF,GAAG,EAAE;EAEL,oBACEE,IAAA,CAAC3C,UAAA;IAAWmC,KAAA,EAAO;MAAEjC,QAAA;MAAUC,OAAA;MAASC,MAAA;MAAQsB,YAAA;MAAcrB;IAAW;cACtEU;;AAGP","ignoreList":[]}

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

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

package/dist/elements/Nav/getNavPrefs.js

@@ -8,13 +8,18 @@ export const getNavPrefs = cache(async req => {
       open: true
     };
   }
+  // Navigation renders alongside document creation and must not join its transaction.
+  const preferencesReq = {
+    ...req,
+    transactionID: undefined
+  };
   const navPrefs = await req.payload.find({
     collection: 'payload-preferences',
     depth: 0,
     limit: 1,
     overrideAccess: true,
     pagination: false,
-    req,
+    req: preferencesReq,
     where: {
       and: [{
         key: {
@@ -37,7 +42,7 @@ export const getNavPrefs = cache(async req => {
     limit: 1,
     overrideAccess: true,
     pagination: false,
-    req,
+    req: preferencesReq,
     where: {
       and: [{
         key: {

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

@@ -1 +1 @@
-{"version":3,"file":"getNavPrefs.js","names":["PREFERENCE_KEYS","cache","getNavPrefs","req","user","collection","activeTab","undefined","groups","open","navPrefs","payload","find","depth","limit","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":[]}
+{"version":3,"file":"getNavPrefs.js","names":["PREFERENCE_KEYS","cache","getNavPrefs","req","user","collection","activeTab","undefined","groups","open","preferencesReq","transactionID","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  // Navigation renders alongside document creation and must not join its transaction.\n  const preferencesReq = { ...req, transactionID: undefined }\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: preferencesReq,\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: preferencesReq,\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;EACA,MAAMC,cAAA,GAAiB;IAAE,GAAGP,GAAG;IAAEQ,aAAA,EAAeJ;EAAU;EAE1D,MAAMK,QAAA,GAAW,MAAMT,GAAA,CAAIU,OAAO,CAC/BC,IAAI,CAAC;IACJT,UAAA,EAAY;IACZU,KAAA,EAAO;IACPC,KAAA,EAAO;IACPC,cAAA,EAAgB;IAChBC,UAAA,EAAY;IACZf,GAAA,EAAKO,cAAA;IACLS,KAAA,EAAO;MACLC,GAAA,EAAK,CACH;QACEC,GAAA,EAAK;UACHC,MAAA,EAAQtB,eAAA,CAAgBuB;QAC1B;MACF,GACA;QACE,mBAAmB;UACjBD,MAAA,EAAQnB,GAAA,CAAIC,IAAI,CAACC;QACnB;MACF,GACA;QACE,cAAc;UACZiB,MAAA,EAAQnB,GAAA,EAAKC,IAAA,EAAMoB;QACrB;MACF;IAEJ;EACF,IACEC,IAAA,CAAMC,GAAA,IAAQA,GAAA,EAAKC,IAAA,GAAO,EAAE,EAAEC,KAAA;EAElC,MAAMC,YAAA,GAAe,MAAM1B,GAAA,CAAIU,OAAO,CACnCC,IAAI,CAAC;IACJT,UAAA,EAAY;IACZU,KAAA,EAAO;IACPC,KAAA,EAAO;IACPC,cAAA,EAAgB;IAChBC,UAAA,EAAY;IACZf,GAAA,EAAKO,cAAA;IACLS,KAAA,EAAO;MACLC,GAAA,EAAK,CACH;QACEC,GAAA,EAAK;UACHC,MAAA,EAAQtB,eAAA,CAAgB8B;QAC1B;MACF,GACA;QACE,mBAAmB;UACjBR,MAAA,EAAQnB,GAAA,CAAIC,IAAI,CAACC;QACnB;MACF,GACA;QACE,cAAc;UACZiB,MAAA,EAAQnB,GAAA,EAAKC,IAAA,EAAMoB;QACrB;MACF;IAEJ;EACF,IACEC,IAAA,CAAMC,GAAA,IAAQA,GAAA,EAAKC,IAAA,GAAO,EAAE,EAAEC,KAAA;EAElC,OAAO;IACLtB,SAAA,EAAWuB,YAAA,EAAcvB,SAAA;IACzBE,MAAA,EAAQI,QAAA,EAAUJ,MAAA,IAAU,CAAC;IAC7BC,IAAA,EAAMG,QAAA,EAAUH,IAAA,IAAQ;EAC1B;AACF","ignoreList":[]}

package/dist/elements/Nav/index.css

@@ -22,11 +22,22 @@
   }
 
   .nav__close {
+    position: relative;
     display: flex;
     align-items: center;
     background: none;
     border: 0;
+    border-radius: var(--button-radius);
     outline: 0;
+
+    &:focus-visible::after {
+      content: '';
+      position: absolute;
+      inset: var(--spacer-1);
+      border: var(--stroke-width-small) solid var(--color-border-selected);
+      border-radius: var(--button-radius);
+      pointer-events: none;
+    }
   }
 
   .nav__scroll {

package/dist/elements/Popup/PopupButtonList/index.css

@@ -63,7 +63,7 @@
 
   .popup-button-list__button:focus-visible {
     outline: var(--accessibility-outline);
-    outline-offset: -1px;
+    outline-offset: var(--accessibility-outline-inset);
     border-radius: var(--popup-item-radius);
   }
   .popup-button-list__button:hover {

package/dist/elements/Popup/SubmenuScope.d.ts

@@ -1,21 +1,19 @@
 export type SubmenuNode = {
     closeBranch: () => void;
     id: string;
+    isPointerProtected?: () => boolean;
     open: (viaKeyboard: boolean) => void;
 };
 export type SubmenuScope = {
     activeChildId: null | string;
-    cancelPending: (id?: string) => void;
     closeActiveBranch: () => void;
     register: (node: SubmenuNode) => () => void;
     release: (id: string) => void;
     requestOpen: (args: {
-        delay: boolean;
         id: string;
         viaKeyboard?: boolean;
+        viaPointer?: boolean;
     }) => void;
 };
-export declare const createSubmenuScope: ({ hoverDelay, }?: {
-    hoverDelay?: number;
-}) => SubmenuScope;
+export declare const createSubmenuScope: () => SubmenuScope;
 //# sourceMappingURL=SubmenuScope.d.ts.map

package/dist/elements/Popup/SubmenuScope.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SubmenuScope.d.ts","sourceRoot":"","sources":["../../../src/elements/Popup/SubmenuScope.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAA;CACrC,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,aAAa,EAAE,IAAI,GAAG,MAAM,CAAA;IAC5B,aAAa,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,iBAAiB,EAAE,MAAM,IAAI,CAAA;IAC7B,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,MAAM,IAAI,CAAA;IAC3C,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,WAAW,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAA;CACnF,CAAA;AAID,eAAO,MAAM,kBAAkB,qBAE5B;IAAE,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,KAAQ,YA8EjC,CAAA"}
+{"version":3,"file":"SubmenuScope.d.ts","sourceRoot":"","sources":["../../../src/elements/Popup/SubmenuScope.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,EAAE,EAAE,MAAM,CAAA;IACV,kBAAkB,CAAC,EAAE,MAAM,OAAO,CAAA;IAClC,IAAI,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAA;CACrC,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,aAAa,EAAE,IAAI,GAAG,MAAM,CAAA;IAC5B,iBAAiB,EAAE,MAAM,IAAI,CAAA;IAC7B,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,MAAM,IAAI,CAAA;IAC3C,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,WAAW,EAAE,CAAC,IAAI,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,OAAO,CAAC;QAAC,UAAU,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAA;CACzF,CAAA;AAED,eAAO,MAAM,kBAAkB,QAAO,YAyCrC,CAAA"}

package/dist/elements/Popup/SubmenuScope.js

@@ -1,50 +1,17 @@
-const DEFAULT_HOVER_DELAY = 150;
-export const createSubmenuScope = ({
-  hoverDelay = DEFAULT_HOVER_DELAY
-} = {}) => {
+export const createSubmenuScope = () => {
   const nodes = new Map();
   let activeChildId = null;
-  let pendingChildId = null;
-  let pendingTimer;
-  const cancelPending = id => {
-    if (id && pendingChildId !== id) {
-      return;
-    }
-    if (pendingTimer) {
-      clearTimeout(pendingTimer);
-    }
-    pendingTimer = undefined;
-    pendingChildId = null;
-  };
-  const activate = ({
-    id,
-    viaKeyboard = false
-  }) => {
-    cancelPending();
-    const node = nodes.get(id);
-    if (!node) {
-      return;
-    }
-    if (activeChildId !== id) {
-      nodes.get(activeChildId ?? '')?.closeBranch();
-      activeChildId = id;
-    }
-    node.open(viaKeyboard);
-  };
   return {
     get activeChildId() {
       return activeChildId;
     },
-    cancelPending,
     closeActiveBranch: () => {
-      cancelPending();
       nodes.get(activeChildId ?? '')?.closeBranch();
       activeChildId = null;
     },
     register: node => {
       nodes.set(node.id, node);
       return () => {
-        cancelPending(node.id);
         if (activeChildId === node.id) {
           activeChildId = null;
         }
@@ -52,37 +19,26 @@ export const createSubmenuScope = ({
       };
     },
     release: id => {
-      cancelPending(id);
       if (activeChildId === id) {
         activeChildId = null;
       }
     },
     requestOpen: ({
       id,
-      delay,
-      viaKeyboard = false
+      viaKeyboard = false,
+      viaPointer = false
     }) => {
-      if (!delay) {
-        activate({
-          id,
-          viaKeyboard
-        });
+      if (activeChildId === id) {
         return;
       }
-      if (activeChildId === id) {
-        cancelPending();
+      const node = nodes.get(id);
+      const activeNode = nodes.get(activeChildId ?? '');
+      if (!node || viaPointer && activeNode?.isPointerProtected?.()) {
         return;
       }
-      cancelPending();
-      pendingChildId = id;
-      pendingTimer = setTimeout(() => {
-        pendingTimer = undefined;
-        pendingChildId = null;
-        activate({
-          id,
-          viaKeyboard
-        });
-      }, hoverDelay);
+      activeNode?.closeBranch();
+      activeChildId = id;
+      node.open(viaKeyboard);
     }
   };
 };

package/dist/elements/Popup/SubmenuScope.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubmenuScope.js","names":["DEFAULT_HOVER_DELAY","createSubmenuScope","hoverDelay","nodes","Map","activeChildId","pendingChildId","pendingTimer","cancelPending","id","clearTimeout","undefined","activate","viaKeyboard","node","get","closeBranch","open","closeActiveBranch","register","set","delete","release","requestOpen","delay","setTimeout"],"sources":["../../../src/elements/Popup/SubmenuScope.ts"],"sourcesContent":["export type SubmenuNode = {\n  closeBranch: () => void\n  id: string\n  open: (viaKeyboard: boolean) => void\n}\n\nexport type SubmenuScope = {\n  activeChildId: null | string\n  cancelPending: (id?: string) => void\n  closeActiveBranch: () => void\n  register: (node: SubmenuNode) => () => void\n  release: (id: string) => void\n  requestOpen: (args: { delay: boolean; id: string; viaKeyboard?: boolean }) => void\n}\n\nconst DEFAULT_HOVER_DELAY = 150\n\nexport const createSubmenuScope = ({\n  hoverDelay = DEFAULT_HOVER_DELAY,\n}: { hoverDelay?: number } = {}): SubmenuScope => {\n  const nodes = new Map<string, SubmenuNode>()\n  let activeChildId: null | string = null\n  let pendingChildId: null | string = null\n  let pendingTimer: ReturnType<typeof setTimeout> | undefined\n\n  const cancelPending = (id?: string) => {\n    if (id && pendingChildId !== id) {\n      return\n    }\n\n    if (pendingTimer) {\n      clearTimeout(pendingTimer)\n    }\n    pendingTimer = undefined\n    pendingChildId = null\n  }\n\n  const activate = ({ id, viaKeyboard = false }: { id: string; viaKeyboard?: boolean }) => {\n    cancelPending()\n    const node = nodes.get(id)\n    if (!node) {\n      return\n    }\n\n    if (activeChildId !== id) {\n      nodes.get(activeChildId ?? '')?.closeBranch()\n      activeChildId = id\n    }\n    node.open(viaKeyboard)\n  }\n\n  return {\n    get activeChildId() {\n      return activeChildId\n    },\n    cancelPending,\n    closeActiveBranch: () => {\n      cancelPending()\n      nodes.get(activeChildId ?? '')?.closeBranch()\n      activeChildId = null\n    },\n    register: (node) => {\n      nodes.set(node.id, node)\n      return () => {\n        cancelPending(node.id)\n        if (activeChildId === node.id) {\n          activeChildId = null\n        }\n        nodes.delete(node.id)\n      }\n    },\n    release: (id) => {\n      cancelPending(id)\n      if (activeChildId === id) {\n        activeChildId = null\n      }\n    },\n    requestOpen: ({ id, delay, viaKeyboard = false }) => {\n      if (!delay) {\n        activate({ id, viaKeyboard })\n        return\n      }\n\n      if (activeChildId === id) {\n        cancelPending()\n        return\n      }\n\n      cancelPending()\n      pendingChildId = id\n      pendingTimer = setTimeout(() => {\n        pendingTimer = undefined\n        pendingChildId = null\n        activate({ id, viaKeyboard })\n      }, hoverDelay)\n    },\n  }\n}\n"],"mappings":"AAeA,MAAMA,mBAAA,GAAsB;AAE5B,OAAO,MAAMC,kBAAA,GAAqBA,CAAC;EACjCC,UAAA,GAAaF;AAAmB,CACR,GAAG,CAAC,CAAC;EAC7B,MAAMG,KAAA,GAAQ,IAAIC,GAAA;EAClB,IAAIC,aAAA,GAA+B;EACnC,IAAIC,cAAA,GAAgC;EACpC,IAAIC,YAAA;EAEJ,MAAMC,aAAA,GAAiBC,EAAA;IACrB,IAAIA,EAAA,IAAMH,cAAA,KAAmBG,EAAA,EAAI;MAC/B;IACF;IAEA,IAAIF,YAAA,EAAc;MAChBG,YAAA,CAAaH,YAAA;IACf;IACAA,YAAA,GAAeI,SAAA;IACfL,cAAA,GAAiB;EACnB;EAEA,MAAMM,QAAA,GAAWA,CAAC;IAAEH,EAAE;IAAEI,WAAA,GAAc;EAAK,CAAyC;IAClFL,aAAA;IACA,MAAMM,IAAA,GAAOX,KAAA,CAAMY,GAAG,CAACN,EAAA;IACvB,IAAI,CAACK,IAAA,EAAM;MACT;IACF;IAEA,IAAIT,aAAA,KAAkBI,EAAA,EAAI;MACxBN,KAAA,CAAMY,GAAG,CAACV,aAAA,IAAiB,KAAKW,WAAA;MAChCX,aAAA,GAAgBI,EAAA;IAClB;IACAK,IAAA,CAAKG,IAAI,CAACJ,WAAA;EACZ;EAEA,OAAO;IACL,IAAIR,cAAA,EAAgB;MAClB,OAAOA,aAAA;IACT;IACAG,aAAA;IACAU,iBAAA,EAAmBA,CAAA;MACjBV,aAAA;MACAL,KAAA,CAAMY,GAAG,CAACV,aAAA,IAAiB,KAAKW,WAAA;MAChCX,aAAA,GAAgB;IAClB;IACAc,QAAA,EAAWL,IAAA;MACTX,KAAA,CAAMiB,GAAG,CAACN,IAAA,CAAKL,EAAE,EAAEK,IAAA;MACnB,OAAO;QACLN,aAAA,CAAcM,IAAA,CAAKL,EAAE;QACrB,IAAIJ,aAAA,KAAkBS,IAAA,CAAKL,EAAE,EAAE;UAC7BJ,aAAA,GAAgB;QAClB;QACAF,KAAA,CAAMkB,MAAM,CAACP,IAAA,CAAKL,EAAE;MACtB;IACF;IACAa,OAAA,EAAUb,EAAA;MACRD,aAAA,CAAcC,EAAA;MACd,IAAIJ,aAAA,KAAkBI,EAAA,EAAI;QACxBJ,aAAA,GAAgB;MAClB;IACF;IACAkB,WAAA,EAAaA,CAAC;MAAEd,EAAE;MAAEe,KAAK;MAAEX,WAAA,GAAc;IAAK,CAAE;MAC9C,IAAI,CAACW,KAAA,EAAO;QACVZ,QAAA,CAAS;UAAEH,EAAA;UAAII;QAAY;QAC3B;MACF;MAEA,IAAIR,aAAA,KAAkBI,EAAA,EAAI;QACxBD,aAAA;QACA;MACF;MAEAA,aAAA;MACAF,cAAA,GAAiBG,EAAA;MACjBF,YAAA,GAAekB,UAAA,CAAW;QACxBlB,YAAA,GAAeI,SAAA;QACfL,cAAA,GAAiB;QACjBM,QAAA,CAAS;UAAEH,EAAA;UAAII;QAAY;MAC7B,GAAGX,UAAA;IACL;EACF;AACF","ignoreList":[]}
+{"version":3,"file":"SubmenuScope.js","names":["createSubmenuScope","nodes","Map","activeChildId","closeActiveBranch","get","closeBranch","register","node","set","id","delete","release","requestOpen","viaKeyboard","viaPointer","activeNode","isPointerProtected","open"],"sources":["../../../src/elements/Popup/SubmenuScope.ts"],"sourcesContent":["export type SubmenuNode = {\n  closeBranch: () => void\n  id: string\n  isPointerProtected?: () => boolean\n  open: (viaKeyboard: boolean) => void\n}\n\nexport type SubmenuScope = {\n  activeChildId: null | string\n  closeActiveBranch: () => void\n  register: (node: SubmenuNode) => () => void\n  release: (id: string) => void\n  requestOpen: (args: { id: string; viaKeyboard?: boolean; viaPointer?: boolean }) => void\n}\n\nexport const createSubmenuScope = (): SubmenuScope => {\n  const nodes = new Map<string, SubmenuNode>()\n  let activeChildId: null | string = null\n\n  return {\n    get activeChildId() {\n      return activeChildId\n    },\n    closeActiveBranch: () => {\n      nodes.get(activeChildId ?? '')?.closeBranch()\n      activeChildId = null\n    },\n    register: (node) => {\n      nodes.set(node.id, node)\n      return () => {\n        if (activeChildId === node.id) {\n          activeChildId = null\n        }\n        nodes.delete(node.id)\n      }\n    },\n    release: (id) => {\n      if (activeChildId === id) {\n        activeChildId = null\n      }\n    },\n    requestOpen: ({ id, viaKeyboard = false, viaPointer = false }) => {\n      if (activeChildId === id) {\n        return\n      }\n      const node = nodes.get(id)\n      const activeNode = nodes.get(activeChildId ?? '')\n\n      if (!node || (viaPointer && activeNode?.isPointerProtected?.())) {\n        return\n      }\n      activeNode?.closeBranch()\n      activeChildId = id\n      node.open(viaKeyboard)\n    },\n  }\n}\n"],"mappings":"AAeA,OAAO,MAAMA,kBAAA,GAAqBA,CAAA;EAChC,MAAMC,KAAA,GAAQ,IAAIC,GAAA;EAClB,IAAIC,aAAA,GAA+B;EAEnC,OAAO;IACL,IAAIA,cAAA,EAAgB;MAClB,OAAOA,aAAA;IACT;IACAC,iBAAA,EAAmBA,CAAA;MACjBH,KAAA,CAAMI,GAAG,CAACF,aAAA,IAAiB,KAAKG,WAAA;MAChCH,aAAA,GAAgB;IAClB;IACAI,QAAA,EAAWC,IAAA;MACTP,KAAA,CAAMQ,GAAG,CAACD,IAAA,CAAKE,EAAE,EAAEF,IAAA;MACnB,OAAO;QACL,IAAIL,aAAA,KAAkBK,IAAA,CAAKE,EAAE,EAAE;UAC7BP,aAAA,GAAgB;QAClB;QACAF,KAAA,CAAMU,MAAM,CAACH,IAAA,CAAKE,EAAE;MACtB;IACF;IACAE,OAAA,EAAUF,EAAA;MACR,IAAIP,aAAA,KAAkBO,EAAA,EAAI;QACxBP,aAAA,GAAgB;MAClB;IACF;IACAU,WAAA,EAAaA,CAAC;MAAEH,EAAE;MAAEI,WAAA,GAAc,KAAK;MAAEC,UAAA,GAAa;IAAK,CAAE;MAC3D,IAAIZ,aAAA,KAAkBO,EAAA,EAAI;QACxB;MACF;MACA,MAAMF,IAAA,GAAOP,KAAA,CAAMI,GAAG,CAACK,EAAA;MACvB,MAAMM,UAAA,GAAaf,KAAA,CAAMI,GAAG,CAACF,aAAA,IAAiB;MAE9C,IAAI,CAACK,IAAA,IAASO,UAAA,IAAcC,UAAA,EAAYC,kBAAA,MAAyB;QAC/D;MACF;MACAD,UAAA,EAAYV,WAAA;MACZH,aAAA,GAAgBO,EAAA;MAChBF,IAAA,CAAKU,IAAI,CAACJ,WAAA;IACZ;EACF;AACF","ignoreList":[]}

package/dist/elements/Popup/index.css

@@ -49,6 +49,21 @@
     color: var(--popup-text, var(--color-text-ontooltip));
   }
 
+  .popup__content[data-submenu-safe-area] {
+    overflow: visible;
+  }
+
+  .popup__content[data-submenu-safe-area]::before {
+    /* Debug safe area: uncomment to show the protected path.
+    background-color: color-mix(in srgb, var(--color-bg-assistive) 35%, transparent);
+    */
+    content: '';
+    position: fixed;
+    inset: 0;
+    clip-path: var(--popup-safe-area);
+    pointer-events: none;
+  }
+
   .popup__content.popup--size-small {
     min-width: 80px;
   }

package/dist/elements/Popup/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Popup/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAY,aAAa,EAAE,MAAM,OAAO,CAAA;AAEpE,OAAO,KAAK,SAAS,MAAM,4BAA4B,CAAA;AAEvD,OAAO,KASN,MAAM,OAAO,CAAA;AAKd,OAAO,aAAa,CAAA;AACpB,OAAO,EAAE,KAAK,sBAAsB,EAAgB,MAAM,yBAAyB,CAAA;AAyCnF,MAAM,MAAM,UAAU,GAAG;IACvB,eAAe,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAC1C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC/B,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IACjC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,SAAS,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAA;IAC3C,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACzD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAA;IACjE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,aAAa,GAAG,OAAO,GAAG,OAAO,CAAA;IACxC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;IACjC;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CACjC,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAupBtC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Popup/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAY,aAAa,EAAE,MAAM,OAAO,CAAA;AAEpE,OAAO,KAAK,SAAS,MAAM,4BAA4B,CAAA;AAEvD,OAAO,KASN,MAAM,OAAO,CAAA;AAKd,OAAO,aAAa,CAAA;AACpB,OAAO,EAAE,KAAK,sBAAsB,EAAgB,MAAM,yBAAyB,CAAA;AAyCnF,MAAM,MAAM,UAAU,GAAG;IACvB,eAAe,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAC1C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC/B,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IACjC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,SAAS,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAA;IAC3C,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACzD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAA;IACjE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,aAAa,GAAG,OAAO,GAAG,OAAO,CAAA;IACxC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;IACjC;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CACjC,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA0rBtC,CAAA"}

package/dist/elements/Popup/index.js

@@ -94,7 +94,6 @@ export const Popup = props => {
       if (coordinateParent && isSubmenu) {
         parentPopup.submenuScope.requestOpen({
           id: contentId,
-          delay: false,
           viaKeyboard
         });
         return;
@@ -128,27 +127,67 @@ export const Popup = props => {
     closePopup(options);
   }, [closePopup, parentPopup]);
   const openFromParent = useCallback(viaKeyboard_0 => setActive(true, viaKeyboard_0, false), [setActive]);
-  useEffect(() => {
-    if (!isSubmenu) {
-      return;
-    }
-    return parentPopup.submenuScope.register({
-      id: contentId,
-      closeBranch: () => closePopup({
-        restoreFocus: false
-      }),
-      open: openFromParent
+  const closeFromPointer = useCallback(() => {
+    const hasFocus = popupRef.current?.contains(document.activeElement);
+    const trigger_0 = triggerRef.current?.querySelector('[aria-haspopup="menu"]');
+    closePopup({
+      restoreFocus: false
     });
-  }, [closePopup, contentId, isSubmenu, openFromParent, parentPopup]);
+    if (hasFocus) {
+      trigger_0?.focus();
+    }
+  }, [closePopup]);
   const pointerIntent = useSubmenuPointerIntent({
+    active,
     contentRef: popupRef,
     enabled: isSubmenu && hoverSubmenu,
-    onClose: () => setActive(false),
+    onClose: closeFromPointer,
     onOpen: () => parentPopup?.submenuScope.requestOpen({
       id: contentId,
-      delay: Boolean(parentPopup.submenuScope.activeChildId)
-    })
+      viaPointer: true
+    }),
+    onSafeAreaExpire: ({
+      x,
+      y
+    }) => {
+      const target = document.elementFromPoint(x, y);
+      const parentContent = parentPopup?.popupRef.current;
+      if (parentContent && target?.closest(POPUP_CONTENT_SELECTOR) === parentContent) {
+        const trigger_1 = target.closest('.popup__submenu-hover-watch')?.querySelector('[aria-haspopup="menu"][aria-controls]');
+        const siblingId = trigger_1?.getAttribute('aria-controls');
+        if (siblingId && trigger_1?.getAttribute('aria-disabled') !== 'true') {
+          parentPopup?.submenuScope.requestOpen({
+            id: siblingId
+          });
+          return;
+        }
+      }
+      closeFromPointer();
+    },
+    triggerRef
   });
+  const submenuCallbacks = useRef({
+    closeFromPointer,
+    openFromParent
+  });
+  const parentSubmenuScope = parentPopup?.submenuScope;
+  useEffect(() => {
+    submenuCallbacks.current = {
+      closeFromPointer,
+      openFromParent
+    };
+  }, [closeFromPointer, openFromParent]);
+  useEffect(() => {
+    if (!isSubmenu || !parentSubmenuScope) {
+      return;
+    }
+    return parentSubmenuScope.register({
+      id: contentId,
+      closeBranch: () => submenuCallbacks.current.closeFromPointer(),
+      isPointerProtected: pointerIntent.isProtected,
+      open: viaKeyboard_1 => submenuCallbacks.current.openFromParent(viaKeyboard_1)
+    });
+  }, [contentId, isSubmenu, parentSubmenuScope, pointerIntent.isProtected]);
   // /////////////////////////////////////
   // Position Calculation
   //
@@ -157,12 +196,12 @@ export const Popup = props => {
   // styles if the calculated position differs from current position.
   // /////////////////////////////////////
   const updatePosition = useEffectEvent(() => {
-    const trigger_0 = triggerRef.current;
+    const trigger_2 = triggerRef.current;
     const popup = popupRef.current;
-    if (!trigger_0 || !popup) {
+    if (!trigger_2 || !popup) {
       return;
     }
-    const triggerRect = trigger_0.getBoundingClientRect();
+    const triggerRect = trigger_2.getBoundingClientRect();
     const popupRect = popup.getBoundingClientRect();
     // Gap between the popup and the trigger/viewport edges (in pixels)
     const offset = 8;
@@ -275,6 +314,7 @@ export const Popup = props => {
     if (popup.style.getPropertyValue('--caret-left') !== newCaretLeft) {
       popup.style.setProperty('--caret-left', newCaretLeft);
     }
+    pointerIntent.updateSafeArea();
   });
   // /////////////////////////////////////
   // Click Outside Handler
@@ -284,11 +324,11 @@ export const Popup = props => {
   // - Click in parent popup: child closes
   // /////////////////////////////////////
   const handleClickOutside = useEffectEvent(e => {
-    const target = e.target;
-    const isOutsidePopup = !popupRef.current?.contains(target);
-    const isOutsideTrigger = !triggerRef.current?.contains(target);
+    const target_0 = e.target;
+    const isOutsidePopup = !popupRef.current?.contains(target_0);
+    const isOutsideTrigger = !triggerRef.current?.contains(target_0);
     // Check if click is inside a popup portal
-    const clickedPopupContent = target.closest?.('.popup__content');
+    const clickedPopupContent = target_0.closest?.('.popup__content');
     // If the clicked popup contains this popup's trigger, it's a parent popup
     // and we should close. If it doesn't contain our trigger, it's a child popup
     // and we should stay open to avoid closing parent when interacting with child.
@@ -321,8 +361,8 @@ export const Popup = props => {
       return;
     }
     if (e_0.key === 'ArrowRight' && popupRole === 'menu') {
-      const trigger_1 = document.activeElement?.closest(`.${baseClass}__trigger-wrap`);
-      const nestedTrigger = trigger_1?.querySelector('button, [role="menuitem"]');
+      const trigger_3 = document.activeElement?.closest(`.${baseClass}__trigger-wrap`);
+      const nestedTrigger = trigger_3?.querySelector('button, [role="menuitem"]');
       if (nestedTrigger) {
         e_0.preventDefault();
         nestedTrigger.dispatchEvent(new KeyboardEvent('keydown', {
@@ -383,13 +423,13 @@ export const Popup = props => {
   // Closes popup when buttons/links inside are clicked (includes Enter/Space activation).
   // /////////////////////////////////////
   const handleActionableClick = useEffectEvent(e_1 => {
-    const target_0 = e_1.target;
+    const target_1 = e_1.target;
     // Allow opting out with data-popup-prevent-close attribute on element or ancestor
-    if (target_0.closest('[data-popup-prevent-close]')) {
+    if (target_1.closest('[data-popup-prevent-close]')) {
       return;
     }
     // Check if the clicked element or any ancestor is an actionable element
-    const actionable = target_0.closest('button, a[href], [role="button"], [role="menuitem"]');
+    const actionable = target_1.closest('button, a[href], [role="button"], [role="menuitem"]');
     if (actionable && popupRef.current?.contains(actionable)) {
       if (actionable.closest(`.${baseClass}__content`) !== popupRef.current) {
         return;
@@ -520,7 +560,7 @@ export const Popup = props => {
         tabIndex: 0,
         children: Trigger
       }) : hoverSubmenu && isSubmenu ? /*#__PURE__*/_jsx("div", {
-        ...pointerIntent,
+        ...pointerIntent.triggerProps,
         className: `${baseClass}__submenu-hover-watch`,
         children: Trigger
       }) : Trigger
@@ -532,6 +572,7 @@ export const Popup = props => {
         submenuScope
       },
       children: /*#__PURE__*/_jsxs("div", {
+        ...pointerIntent.contentProps,
         "aria-label": popupAriaLabel,
         className: active ? [`${baseClass}__content`, `${baseClass}--size-${size}`, resolvedSide ? `${baseClass}--side-${resolvedSide}` : isOnTop ? `${baseClass}--v-top` : `${baseClass}--v-bottom`, portalClassName].filter(Boolean).join(' ') :
         // tests do not accidentally target inactive popups.
@@ -539,8 +580,6 @@ export const Popup = props => {
         "data-popup-id": id || undefined,
         "data-theme": theme === 'auto' ? undefined : theme,
         id: contentId,
-        onMouseEnter: pointerIntent.onMouseEnter,
-        onMouseLeave: pointerIntent.onMouseLeave,
         popover: "manual",
         ref: popupRef,
         role: popupRole,