@payloadcms/ui 3.0.0-beta.84 → 3.0.0-beta.86

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

@@ -1,4 +1,6 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useWindowInfo } from '@faceless-ui/window-info';
 import React from 'react';
@@ -7,34 +9,82 @@ import { useTranslation } from '../../../providers/Translation/index.js';
 import { useNav } from '../context.js';
 import './index.scss';
 const baseClass = 'nav-toggler';
-export const NavToggler = (props)=>{
-    const { id, children, className, tabIndex = 0 } = props;
-    const { t } = useTranslation();
-    const { setPreference } = usePreferences();
-    const { navOpen, setNavOpen } = useNav();
-    const { breakpoints: { l: largeBreak } } = useWindowInfo();
-    return /*#__PURE__*/ _jsx("button", {
-        "aria-label": `${navOpen ? t('general:close') : t('general:open')} ${t('general:menu')}`,
-        className: [
-            baseClass,
-            navOpen && `${baseClass}--is-open`,
-            className
-        ].filter(Boolean).join(' '),
-        id: id,
-        onClick: async ()=>{
-            setNavOpen(!navOpen);
-            // only when the user explicitly toggles the nav on desktop do we want to set the preference
-            // this is because the js may open or close the nav based on the window size, routing, etc
-            if (!largeBreak) {
-                await setPreference('nav', {
-                    open: !navOpen
-                });
-            }
-        },
-        tabIndex: tabIndex,
-        type: "button",
-        children: children
+export const NavToggler = props => {
+  const $ = _c(15);
+  const {
+    id,
+    children,
+    className,
+    tabIndex: t0
+  } = props;
+  const tabIndex = t0 === undefined ? 0 : t0;
+  const {
+    t
+  } = useTranslation();
+  const {
+    setPreference
+  } = usePreferences();
+  const {
+    navOpen,
+    setNavOpen
+  } = useNav();
+  const {
+    breakpoints: t1
+  } = useWindowInfo();
+  const {
+    l: largeBreak
+  } = t1;
+  const t2 = `${navOpen ? t("general:close") : t("general:open")} ${t("general:menu")}`;
+  const t3 = navOpen && `${baseClass}--is-open`;
+  let t4;
+  if ($[0] !== t3 || $[1] !== className) {
+    t4 = [baseClass, t3, className].filter(Boolean);
+    $[0] = t3;
+    $[1] = className;
+    $[2] = t4;
+  } else {
+    t4 = $[2];
+  }
+  const t5 = t4.join(" ");
+  let t6;
+  if ($[3] !== setNavOpen || $[4] !== navOpen || $[5] !== largeBreak || $[6] !== setPreference) {
+    t6 = async () => {
+      setNavOpen(!navOpen);
+      if (!largeBreak) {
+        await setPreference("nav", {
+          open: !navOpen
+        });
+      }
+    };
+    $[3] = setNavOpen;
+    $[4] = navOpen;
+    $[5] = largeBreak;
+    $[6] = setPreference;
+    $[7] = t6;
+  } else {
+    t6 = $[7];
+  }
+  let t7;
+  if ($[8] !== t2 || $[9] !== t5 || $[10] !== id || $[11] !== t6 || $[12] !== tabIndex || $[13] !== children) {
+    t7 = _jsx("button", {
+      "aria-label": t2,
+      className: t5,
+      id,
+      onClick: t6,
+      tabIndex,
+      type: "button",
+      children
     });
+    $[8] = t2;
+    $[9] = t5;
+    $[10] = id;
+    $[11] = t6;
+    $[12] = tabIndex;
+    $[13] = children;
+    $[14] = t7;
+  } else {
+    t7 = $[14];
+  }
+  return t7;
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/Nav/NavToggler/index.tsx"],"sourcesContent":["'use client'\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport React from 'react'\n\nimport { usePreferences } from '../../../providers/Preferences/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { useNav } from '../context.js'\nimport './index.scss'\n\nconst baseClass = 'nav-toggler'\n\nexport const NavToggler: React.FC<{\n  children?: React.ReactNode\n  className?: string\n  id?: string\n  tabIndex?: number\n}> = (props) => {\n  const { id, children, className, tabIndex = 0 } = props\n\n  const { t } = useTranslation()\n\n  const { setPreference } = usePreferences()\n\n  const { navOpen, setNavOpen } = useNav()\n\n  const {\n    breakpoints: { l: largeBreak },\n  } = useWindowInfo()\n\n  return (\n    <button\n      aria-label={`${navOpen ? t('general:close') : t('general:open')} ${t('general:menu')}`}\n      className={[baseClass, navOpen && `${baseClass}--is-open`, className]\n        .filter(Boolean)\n        .join(' ')}\n      id={id}\n      onClick={async () => {\n        setNavOpen(!navOpen)\n\n        // only when the user explicitly toggles the nav on desktop do we want to set the preference\n        // this is because the js may open or close the nav based on the window size, routing, etc\n        if (!largeBreak) {\n          await setPreference('nav', {\n            open: !navOpen,\n          })\n        }\n      }}\n      tabIndex={tabIndex}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  )\n}\n"],"names":["useWindowInfo","React","usePreferences","useTranslation","useNav","baseClass","NavToggler","props","id","children","className","tabIndex","t","setPreference","navOpen","setNavOpen","breakpoints","l","largeBreak","button","aria-label","filter","Boolean","join","onClick","open","type"],"mappings":"AAAA;;AACA,SAASA,aAAa,QAAQ,2BAA0B;AACxD,OAAOC,WAAW,QAAO;AAEzB,SAASC,cAAc,QAAQ,0CAAyC;AACxE,SAASC,cAAc,QAAQ,0CAAyC;AACxE,SAASC,MAAM,QAAQ,gBAAe;AACtC,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,aAKR,CAACC;IACJ,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,WAAW,CAAC,EAAE,GAAGJ;IAElD,MAAM,EAAEK,CAAC,EAAE,GAAGT;IAEd,MAAM,EAAEU,aAAa,EAAE,GAAGX;IAE1B,MAAM,EAAEY,OAAO,EAAEC,UAAU,EAAE,GAAGX;IAEhC,MAAM,EACJY,aAAa,EAAEC,GAAGC,UAAU,EAAE,EAC/B,GAAGlB;IAEJ,qBACE,KAACmB;QACCC,cAAY,CAAC,EAAEN,UAAUF,EAAE,mBAAmBA,EAAE,gBAAgB,CAAC,EAAEA,EAAE,gBAAgB,CAAC;QACtFF,WAAW;YAACL;YAAWS,WAAW,CAAC,EAAET,UAAU,SAAS,CAAC;YAAEK;SAAU,CAClEW,MAAM,CAACC,SACPC,IAAI,CAAC;QACRf,IAAIA;QACJgB,SAAS;YACPT,WAAW,CAACD;YAEZ,4FAA4F;YAC5F,0FAA0F;YAC1F,IAAI,CAACI,YAAY;gBACf,MAAML,cAAc,OAAO;oBACzBY,MAAM,CAACX;gBACT;YACF;QACF;QACAH,UAAUA;QACVe,MAAK;kBAEJjB;;AAGP,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","useWindowInfo","React","usePreferences","useTranslation","useNav","baseClass","NavToggler","props","$","id","children","className","tabIndex","t0","undefined","t","setPreference","navOpen","setNavOpen","breakpoints","t1","l","largeBreak","t2","t3","t4","filter","Boolean","t5","join","t6","open","t7","_jsx","onClick","type"],"sources":["../../../../src/elements/Nav/NavToggler/index.tsx"],"sourcesContent":["'use client'\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport React from 'react'\n\nimport { usePreferences } from '../../../providers/Preferences/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { useNav } from '../context.js'\nimport './index.scss'\n\nconst baseClass = 'nav-toggler'\n\nexport const NavToggler: React.FC<{\n  children?: React.ReactNode\n  className?: string\n  id?: string\n  tabIndex?: number\n}> = (props) => {\n  const { id, children, className, tabIndex = 0 } = props\n\n  const { t } = useTranslation()\n\n  const { setPreference } = usePreferences()\n\n  const { navOpen, setNavOpen } = useNav()\n\n  const {\n    breakpoints: { l: largeBreak },\n  } = useWindowInfo()\n\n  return (\n    <button\n      aria-label={`${navOpen ? t('general:close') : t('general:open')} ${t('general:menu')}`}\n      className={[baseClass, navOpen && `${baseClass}--is-open`, className]\n        .filter(Boolean)\n        .join(' ')}\n      id={id}\n      onClick={async () => {\n        setNavOpen(!navOpen)\n\n        // only when the user explicitly toggles the nav on desktop do we want to set the preference\n        // this is because the js may open or close the nav based on the window size, routing, etc\n        if (!largeBreak) {\n          await setPreference('nav', {\n            open: !navOpen,\n          })\n        }\n      }}\n      tabIndex={tabIndex}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,aAAa,QAAQ;AAC9B,OAAOC,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAC/B,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,UAAA,GAKRC,KAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EACH;IAAAU,EAAA;IAAAC,QAAA;IAAAC,SAAA;IAAAC,QAAA,EAAAC;EAAA,IAAkDN,KAAA;EAAjB,MAAAK,QAAA,GAAAC,EAAY,KAAAC,SAAA,OAAZD,EAAY;EAE7C;IAAAE;EAAA,IAAcZ,cAAA;EAEd;IAAAa;EAAA,IAA0Bd,cAAA;EAE1B;IAAAe,OAAA;IAAAC;EAAA,IAAgCd,MAAA;EAEhC;IAAAe,WAAA,EAAAC;EAAA,IAEIpB,aAAA;EADW;IAAAqB,CAAA,EAAAC;EAAA,IAAAF,EAAiB;EAKhB,MAAAG,EAAA,MAAGN,OAAA,GAAUF,CAAA,CAAE,mBAAmBA,CAAA,CAAE,mBAAmBA,CAAA,CAAE,iBAAiB;EAC/D,MAAAS,EAAA,GAAAP,OAAA,IAAW,GAAAZ,SAAA,WAAuB;EAAA,IAAAoB,EAAA;EAAA,IAAAjB,CAAA,QAAAgB,EAAA,IAAAhB,CAAA,QAAAG,SAAA;IAA9Cc,EAAA,IAAApB,SAAA,EAAYmB,EAAkC,EAAEb,SAAA,EAAAe,MAAA,CAAAC,OACjD;IAAAnB,CAAA,MAAAgB,EAAA;IAAAhB,CAAA,MAAAG,SAAA;IAAAH,CAAA,MAAAiB,EAAA;EAAA;IAAAA,EAAA,GAAAjB,CAAA;EAAA;EADC,MAAAoB,EAAA,GAAAH,EACD,CAAAI,IAAA,CACF;EAAA,IAAAC,EAAA;EAAA,IAAAtB,CAAA,QAAAU,UAAA,IAAAV,CAAA,QAAAS,OAAA,IAAAT,CAAA,QAAAc,UAAA,IAAAd,CAAA,QAAAQ,aAAA;IAECc,EAAA,SAAAA,CAAA;MACPZ,UAAA,EAAYD,OAAA;MAAA,KAIPK,UAAA;QAAA,MACGN,aAAA,CAAc;UAAAe,IAAA,GACXd;QAAA,CACT;MAAA;IAAA;IAEJT,CAAA,MAAAU,UAAA;IAAAV,CAAA,MAAAS,OAAA;IAAAT,CAAA,MAAAc,UAAA;IAAAd,CAAA,MAAAQ,aAAA;IAAAR,CAAA,MAAAsB,EAAA;EAAA;IAAAA,EAAA,GAAAtB,CAAA;EAAA;EAAA,IAAAwB,EAAA;EAAA,IAAAxB,CAAA,QAAAe,EAAA,IAAAf,CAAA,QAAAoB,EAAA,IAAApB,CAAA,SAAAC,EAAA,IAAAD,CAAA,SAAAsB,EAAA,IAAAtB,CAAA,SAAAI,QAAA,IAAAJ,CAAA,SAAAE,QAAA;IAhBFsB,EAAA,GAAAC,IAAA,CAAC;MAAA,cACaV,EAA0E;MAAAZ,SAAA,EAC3EiB,EAEH;MAAAnB,EAAA;MAAAyB,OAAA,EAECJ,EAUT;MAAAlB,QAAA;MAAAuB,IAAA,EAEK;MAAAzB;IAAA,C;;;;;;;;;;;SAlBPsB,E;CAuBJ","ignoreList":[]}

package/dist/elements/Nav/context.js

@@ -1,99 +1,137 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useWindowInfo } from '@faceless-ui/window-info';
 import { clearAllBodyScrollLocks, disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
 import React, { useEffect, useRef } from 'react';
 import { usePreferences } from '../../providers/Preferences/index.js';
-export const NavContext = /*#__PURE__*/ React.createContext({
-    hydrated: false,
-    navOpen: true,
-    navRef: null,
-    setNavOpen: ()=>{},
-    shouldAnimate: false
+export const NavContext = /*#__PURE__*/React.createContext({
+  hydrated: false,
+  navOpen: true,
+  navRef: null,
+  setNavOpen: () => {},
+  shouldAnimate: false
 });
-export const useNav = ()=>React.useContext(NavContext);
-const getNavPreference = async (getPreference)=>{
-    const navPrefs = await getPreference('nav');
-    const preferredState = navPrefs?.open;
-    if (typeof preferredState === 'boolean') {
-        return preferredState;
-    } else {
-        return true;
-    }
+export const useNav = () => {
+  return React.useContext(NavContext);
+};
+const getNavPreference = async getPreference => {
+  const navPrefs = await getPreference('nav');
+  const preferredState = navPrefs?.open;
+  if (typeof preferredState === 'boolean') {
+    return preferredState;
+  } else {
+    return true;
+  }
 };
-export const NavProvider = ({ children, initialIsOpen })=>{
-    const { breakpoints: { l: largeBreak, m: midBreak, s: smallBreak } } = useWindowInfo();
-    const { getPreference } = 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 [shouldAnimate, setShouldAnimate] = React.useState(false);
-    const [hydrated, setHydrated] = React.useState(false);
-    // on load check the user's preference and set "initial" state
-    useEffect(()=>{
-        if (largeBreak === false) {
-            const setNavFromPreferences = async ()=>{
-                const preferredState = await getNavPreference(getPreference);
-                setNavOpen(preferredState);
-            };
-            void setNavFromPreferences();
-        }
-    }, [
-        largeBreak,
-        getPreference,
-        setNavOpen
-    ]);
-    // TODO: on smaller screens where the nav is a modal
-    // close the nav when the user navigates away
-    // on open and close, lock the body scroll
-    // do not do this on desktop, the sidebar is not a modal
-    useEffect(()=>{
-        if (navRef.current) {
-            if (navOpen && midBreak) {
-                disableBodyScroll(navRef.current);
-            } else {
-                enableBodyScroll(navRef.current);
-            }
-        }
-    }, [
-        navOpen,
-        midBreak
-    ]);
-    // on smaller screens where the nav is a modal
-    // 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) {
-            setNavOpen(false);
-        }
-        setHydrated(true);
-        setTimeout(()=>{
-            setShouldAnimate(true);
-        }, 100);
-    }, [
-        largeBreak,
-        midBreak,
-        smallBreak
-    ]);
-    // when the component unmounts, clear all body scroll locks
-    useEffect(()=>{
-        return ()=>{
-            clearAllBodyScrollLocks();
+export const NavProvider = t0 => {
+  const $ = _c(13);
+  const {
+    children,
+    initialIsOpen
+  } = t0;
+  const {
+    breakpoints: t1
+  } = useWindowInfo();
+  const {
+    l: largeBreak,
+    m: midBreak,
+    s: smallBreak
+  } = t1;
+  const {
+    getPreference
+  } = usePreferences();
+  const navRef = useRef(null);
+  const [navOpen, setNavOpen] = React.useState(initialIsOpen);
+  const [shouldAnimate, setShouldAnimate] = React.useState(false);
+  const [hydrated, setHydrated] = React.useState(false);
+  let t2;
+  let t3;
+  if ($[0] !== largeBreak || $[1] !== getPreference) {
+    t2 = () => {
+      if (largeBreak === false) {
+        const setNavFromPreferences = async () => {
+          const preferredState = await getNavPreference(getPreference);
+          setNavOpen(preferredState);
         };
-    }, []);
-    return /*#__PURE__*/ _jsx(NavContext.Provider, {
-        value: {
-            hydrated,
-            navOpen,
-            navRef,
-            setNavOpen,
-            shouldAnimate
-        },
-        children: children
-    });
+        setNavFromPreferences();
+      }
+    };
+    t3 = [largeBreak, getPreference, setNavOpen];
+    $[0] = largeBreak;
+    $[1] = getPreference;
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t2 = $[2];
+    t3 = $[3];
+  }
+  useEffect(t2, t3);
+  let t4;
+  if ($[4] !== navOpen || $[5] !== midBreak) {
+    t4 = [navOpen, midBreak];
+    $[4] = navOpen;
+    $[5] = midBreak;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  useEffect(() => {
+    if (navRef.current) {
+      if (navOpen && midBreak) {
+        disableBodyScroll(navRef.current);
+      } else {
+        enableBodyScroll(navRef.current);
+      }
+    }
+  }, t4);
+  let t5;
+  let t6;
+  if ($[7] !== largeBreak || $[8] !== midBreak || $[9] !== smallBreak) {
+    t5 = () => {
+      if (largeBreak === true || midBreak === true || smallBreak === true) {
+        setNavOpen(false);
+      }
+      setHydrated(true);
+      setTimeout(() => {
+        setShouldAnimate(true);
+      }, 100);
+    };
+    t6 = [largeBreak, midBreak, smallBreak];
+    $[7] = largeBreak;
+    $[8] = midBreak;
+    $[9] = smallBreak;
+    $[10] = t5;
+    $[11] = t6;
+  } else {
+    t5 = $[10];
+    t6 = $[11];
+  }
+  useEffect(t5, t6);
+  let t7;
+  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = [];
+    $[12] = t7;
+  } else {
+    t7 = $[12];
+  }
+  useEffect(_temp2, t7);
+  return _jsx(NavContext.Provider, {
+    value: {
+      hydrated,
+      navOpen,
+      navRef,
+      setNavOpen,
+      shouldAnimate
+    },
+    children
+  });
 };
-
+function _temp() {
+  clearAllBodyScrollLocks();
+}
+function _temp2() {
+  return _temp;
+}
 //# sourceMappingURL=context.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Nav/context.tsx"],"sourcesContent":["'use client'\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport { clearAllBodyScrollLocks, disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'\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\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.useContext(NavContext)\n\nconst getNavPreference = async (getPreference): Promise<boolean> => {\n  const navPrefs = await getPreference('nav')\n  const preferredState = navPrefs?.open\n  if (typeof preferredState === 'boolean') {\n    return preferredState\n  } else {\n    return true\n  }\n}\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 { 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  // TODO: on smaller screens where the nav is a modal\n  // close the nav when the user navigates away\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        disableBodyScroll(navRef.current)\n      } else {\n        enableBodyScroll(navRef.current)\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    setTimeout(() => {\n      setShouldAnimate(true)\n    }, 100)\n  }, [largeBreak, midBreak, smallBreak])\n\n  // when the component unmounts, clear all body scroll locks\n  useEffect(() => {\n    return () => {\n      clearAllBodyScrollLocks()\n    }\n  }, [])\n\n  return (\n    <NavContext.Provider value={{ hydrated, navOpen, navRef, setNavOpen, shouldAnimate }}>\n      {children}\n    </NavContext.Provider>\n  )\n}\n"],"names":["useWindowInfo","clearAllBodyScrollLocks","disableBodyScroll","enableBodyScroll","React","useEffect","useRef","usePreferences","NavContext","createContext","hydrated","navOpen","navRef","setNavOpen","shouldAnimate","useNav","useContext","getNavPreference","getPreference","navPrefs","preferredState","open","NavProvider","children","initialIsOpen","breakpoints","l","largeBreak","m","midBreak","s","smallBreak","useState","setShouldAnimate","setHydrated","setNavFromPreferences","current","setTimeout","Provider","value"],"mappings":"AAAA;;AACA,SAASA,aAAa,QAAQ,2BAA0B;AACxD,SAASC,uBAAuB,EAAEC,iBAAiB,EAAEC,gBAAgB,QAAQ,mBAAkB;AAC/F,OAAOC,SAASC,SAAS,EAAEC,MAAM,QAAQ,QAAO;AAEhD,SAASC,cAAc,QAAQ,uCAAsC;AAUrE,OAAO,MAAMC,2BAAaJ,MAAMK,aAAa,CAAiB;IAC5DC,UAAU;IACVC,SAAS;IACTC,QAAQ;IACRC,YAAY,KAAO;IACnBC,eAAe;AACjB,GAAE;AAEF,OAAO,MAAMC,SAAS,IAAMX,MAAMY,UAAU,CAACR,YAAW;AAExD,MAAMS,mBAAmB,OAAOC;IAC9B,MAAMC,WAAW,MAAMD,cAAc;IACrC,MAAME,iBAAiBD,UAAUE;IACjC,IAAI,OAAOD,mBAAmB,WAAW;QACvC,OAAOA;IACT,OAAO;QACL,OAAO;IACT;AACF;AAEA,OAAO,MAAME,cAGR,CAAC,EAAEC,QAAQ,EAAEC,aAAa,EAAE;IAC/B,MAAM,EACJC,aAAa,EAAEC,GAAGC,UAAU,EAAEC,GAAGC,QAAQ,EAAEC,GAAGC,UAAU,EAAE,EAC3D,GAAG/B;IAEJ,MAAM,EAAEkB,aAAa,EAAE,GAAGX;IAC1B,MAAMK,SAASN,OAAO;IAEtB,kCAAkC;IAClC,kDAAkD;IAClD,0DAA0D;IAC1D,iDAAiD;IACjD,MAAM,CAACK,SAASE,WAAW,GAAGT,MAAM4B,QAAQ,CAACR;IAE7C,MAAM,CAACV,eAAemB,iBAAiB,GAAG7B,MAAM4B,QAAQ,CAAC;IACzD,MAAM,CAACtB,UAAUwB,YAAY,GAAG9B,MAAM4B,QAAQ,CAAC;IAE/C,8DAA8D;IAC9D3B,UAAU;QACR,IAAIsB,eAAe,OAAO;YACxB,MAAMQ,wBAAwB;gBAC5B,MAAMf,iBAAiB,MAAMH,iBAAiBC;gBAC9CL,WAAWO;YACb;YAEA,KAAKe;QACP;IACF,GAAG;QAACR;QAAYT;QAAeL;KAAW;IAE1C,oDAAoD;IACpD,6CAA6C;IAE7C,0CAA0C;IAC1C,wDAAwD;IACxDR,UAAU;QACR,IAAIO,OAAOwB,OAAO,EAAE;YAClB,IAAIzB,WAAWkB,UAAU;gBACvB3B,kBAAkBU,OAAOwB,OAAO;YAClC,OAAO;gBACLjC,iBAAiBS,OAAOwB,OAAO;YACjC;QACF;IACF,GAAG;QAACzB;QAASkB;KAAS;IAEtB,8CAA8C;IAC9C,qDAAqD;IACrD,mCAAmC;IACnCxB,UAAU;QACR,IAAIsB,eAAe,QAAQE,aAAa,QAAQE,eAAe,MAAM;YACnElB,WAAW;QACb;QACAqB,YAAY;QAEZG,WAAW;YACTJ,iBAAiB;QACnB,GAAG;IACL,GAAG;QAACN;QAAYE;QAAUE;KAAW;IAErC,2DAA2D;IAC3D1B,UAAU;QACR,OAAO;YACLJ;QACF;IACF,GAAG,EAAE;IAEL,qBACE,KAACO,WAAW8B,QAAQ;QAACC,OAAO;YAAE7B;YAAUC;YAASC;YAAQC;YAAYC;QAAc;kBAChFS;;AAGP,EAAC"}
+{"version":3,"file":"context.js","names":["c","_c","useWindowInfo","clearAllBodyScrollLocks","disableBodyScroll","enableBodyScroll","React","useEffect","useRef","usePreferences","NavContext","createContext","hydrated","navOpen","navRef","setNavOpen","shouldAnimate","useNav","useContext","getNavPreference","getPreference","navPrefs","preferredState","open","NavProvider","t0","$","children","initialIsOpen","breakpoints","t1","l","largeBreak","m","midBreak","s","smallBreak","useState","setShouldAnimate","setHydrated","t2","t3","setNavFromPreferences","t4","current","t5","t6","setTimeout","t7","Symbol","for","_temp2","_jsx","Provider","value","_temp"],"sources":["../../../src/elements/Nav/context.tsx"],"sourcesContent":["'use client'\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport { clearAllBodyScrollLocks, disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'\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\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.useContext(NavContext)\n\nconst getNavPreference = async (getPreference): Promise<boolean> => {\n  const navPrefs = await getPreference('nav')\n  const preferredState = navPrefs?.open\n  if (typeof preferredState === 'boolean') {\n    return preferredState\n  } else {\n    return true\n  }\n}\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 { 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  // TODO: on smaller screens where the nav is a modal\n  // close the nav when the user navigates away\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        disableBodyScroll(navRef.current)\n      } else {\n        enableBodyScroll(navRef.current)\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    setTimeout(() => {\n      setShouldAnimate(true)\n    }, 100)\n  }, [largeBreak, midBreak, smallBreak])\n\n  // when the component unmounts, clear all body scroll locks\n  useEffect(() => {\n    return () => {\n      clearAllBodyScrollLocks()\n    }\n  }, [])\n\n  return (\n    <NavContext.Provider value={{ hydrated, navOpen, navRef, setNavOpen, shouldAnimate }}>\n      {children}\n    </NavContext.Provider>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/NavGroup/index.js

@@ -1,4 +1,6 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useState } from 'react';
 import AnimateHeightImport from 'react-animate-height';
@@ -8,81 +10,147 @@ import { useNav } from '../Nav/context.js';
 import './index.scss';
 const AnimateHeight = AnimateHeightImport.default || AnimateHeightImport;
 const baseClass = 'nav-group';
-export const NavGroup = ({ children, label })=>{
-    const [collapsed, setCollapsed] = useState(true);
-    const [animate, setAnimate] = useState(false);
-    const { getPreference, setPreference } = usePreferences();
-    const { navOpen } = useNav();
-    const preferencesKey = `collapsed-${label}-groups`;
-    useEffect(()=>{
-        if (label) {
-            const setCollapsedFromPreferences = async ()=>{
-                const preferences = await getPreference(preferencesKey) || [];
-                setCollapsed(preferences.indexOf(label) !== -1);
-            };
-            void setCollapsedFromPreferences();
-        }
-    }, [
-        getPreference,
-        label,
-        preferencesKey
-    ]);
-    if (label) {
-        const toggleCollapsed = async ()=>{
-            setAnimate(true);
-            let preferences = await getPreference(preferencesKey) || [];
-            if (collapsed) {
-                preferences = preferences.filter((preference)=>label !== preference);
-            } else {
-                preferences.push(label);
-            }
-            void setPreference(preferencesKey, preferences);
-            setCollapsed(!collapsed);
+export const NavGroup = t0 => {
+  const $ = _c(28);
+  const {
+    children,
+    label
+  } = t0;
+  const [collapsed, setCollapsed] = useState(true);
+  const [animate, setAnimate] = useState(false);
+  const {
+    getPreference,
+    setPreference
+  } = usePreferences();
+  const {
+    navOpen
+  } = useNav();
+  const preferencesKey = `collapsed-${label}-groups`;
+  let t1;
+  let t2;
+  if ($[0] !== label || $[1] !== getPreference || $[2] !== preferencesKey) {
+    t1 = () => {
+      if (label) {
+        const setCollapsedFromPreferences = async () => {
+          const preferences = (await getPreference(preferencesKey)) || [];
+          setCollapsed(preferences.indexOf(label) !== -1);
         };
-        return /*#__PURE__*/ _jsxs("div", {
-            className: [
-                `${baseClass}`,
-                `${label}`,
-                collapsed && `${baseClass}--collapsed`
-            ].filter(Boolean).join(' '),
-            id: `nav-group-${label}`,
-            children: [
-                /*#__PURE__*/ _jsxs("button", {
-                    className: [
-                        `${baseClass}__toggle`,
-                        `${baseClass}__toggle--${collapsed ? 'collapsed' : 'open'}`
-                    ].filter(Boolean).join(' '),
-                    onClick: toggleCollapsed,
-                    tabIndex: !navOpen ? -1 : 0,
-                    type: "button",
-                    children: [
-                        /*#__PURE__*/ _jsx("div", {
-                            className: `${baseClass}__label`,
-                            children: label
-                        }),
-                        /*#__PURE__*/ _jsx("div", {
-                            className: `${baseClass}__indicator`,
-                            children: /*#__PURE__*/ _jsx(ChevronIcon, {
-                                className: `${baseClass}__indicator`,
-                                direction: !collapsed ? 'up' : undefined
-                            })
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ _jsx(AnimateHeight, {
-                    duration: animate ? 200 : 0,
-                    height: collapsed ? 0 : 'auto',
-                    children: /*#__PURE__*/ _jsx("div", {
-                        className: `${baseClass}__content`,
-                        children: children
-                    })
-                })
-            ]
-        });
+        setCollapsedFromPreferences();
+      }
+    };
+    t2 = [getPreference, label, preferencesKey];
+    $[0] = label;
+    $[1] = getPreference;
+    $[2] = preferencesKey;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t1 = $[3];
+    t2 = $[4];
+  }
+  useEffect(t1, t2);
+  if (label) {
+    let t3;
+    if ($[5] !== getPreference || $[6] !== preferencesKey || $[7] !== collapsed || $[8] !== label || $[9] !== setPreference) {
+      t3 = async () => {
+        setAnimate(true);
+        let preferences_0 = (await getPreference(preferencesKey)) || [];
+        if (collapsed) {
+          preferences_0 = preferences_0.filter(preference => label !== preference);
+        } else {
+          preferences_0.push(label);
+        }
+        setPreference(preferencesKey, preferences_0);
+        setCollapsed(!collapsed);
+      };
+      $[5] = getPreference;
+      $[6] = preferencesKey;
+      $[7] = collapsed;
+      $[8] = label;
+      $[9] = setPreference;
+      $[10] = t3;
+    } else {
+      t3 = $[10];
+    }
+    const toggleCollapsed = t3;
+    const t4 = `${label}`;
+    const t5 = collapsed && `${baseClass}--collapsed`;
+    let t6;
+    if ($[11] !== t4 || $[12] !== t5) {
+      t6 = [`${baseClass}`, t4, t5].filter(Boolean);
+      $[11] = t4;
+      $[12] = t5;
+      $[13] = t6;
+    } else {
+      t6 = $[13];
     }
-    return /*#__PURE__*/ _jsx(React.Fragment, {
-        children: children
+    const t7 = t6.join(" ");
+    const t8 = `nav-group-${label}`;
+    const t9 = `${baseClass}__toggle--${collapsed ? "collapsed" : "open"}`;
+    let t10;
+    if ($[14] !== t9) {
+      t10 = [`${baseClass}__toggle`, t9].filter(Boolean);
+      $[14] = t9;
+      $[15] = t10;
+    } else {
+      t10 = $[15];
+    }
+    const t11 = t10.join(" ");
+    const t12 = !navOpen ? -1 : 0;
+    let t13;
+    if ($[16] !== label || $[17] !== collapsed || $[18] !== t11 || $[19] !== toggleCollapsed || $[20] !== t12 || $[21] !== animate || $[22] !== children || $[23] !== t7 || $[24] !== t8) {
+      t13 = _jsxs("div", {
+        className: t7,
+        id: t8,
+        children: [_jsxs("button", {
+          className: t11,
+          onClick: toggleCollapsed,
+          tabIndex: t12,
+          type: "button",
+          children: [_jsx("div", {
+            className: `${baseClass}__label`,
+            children: label
+          }), _jsx("div", {
+            className: `${baseClass}__indicator`,
+            children: _jsx(ChevronIcon, {
+              className: `${baseClass}__indicator`,
+              direction: !collapsed ? "up" : undefined
+            })
+          })]
+        }), _jsx(AnimateHeight, {
+          duration: animate ? 200 : 0,
+          height: collapsed ? 0 : "auto",
+          children: _jsx("div", {
+            className: `${baseClass}__content`,
+            children
+          })
+        })]
+      });
+      $[16] = label;
+      $[17] = collapsed;
+      $[18] = t11;
+      $[19] = toggleCollapsed;
+      $[20] = t12;
+      $[21] = animate;
+      $[22] = children;
+      $[23] = t7;
+      $[24] = t8;
+      $[25] = t13;
+    } else {
+      t13 = $[25];
+    }
+    return t13;
+  }
+  let t3;
+  if ($[26] !== children) {
+    t3 = _jsx(React.Fragment, {
+      children
     });
+    $[26] = children;
+    $[27] = t3;
+  } else {
+    t3 = $[27];
+  }
+  return t3;
 };
-
 //# sourceMappingURL=index.js.map