@payloadcms/ui 3.0.0-beta.1 → 3.0.0-beta.100

package/dist/elements/Modal/index.d.ts

@@ -1,9 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
-declare const Modal: import("react").FC<import("@faceless-ui/modal/dist/Modal/index.js").ModalProps & {
-    modal?: import("@faceless-ui/modal/dist/ModalProvider/context.js").IModalContext;
-} & {
-    children?: import("react").ReactNode | import("@faceless-ui/modal/dist/Modal/index.js").ChildFunction;
-}>;
-declare const useModal: () => import("@faceless-ui/modal/dist/ModalProvider/context.js").IModalContext;
+import { Modal, useModal } from '@faceless-ui/modal';
 export { Modal, useModal };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Modal/index.tsx"],"names":[],"mappings":";AACA,QAAA,MAAQ,KAAK;;;;EAC8E,CAAA;AAC3F,QAAA,MAAQ,QAAQ,gFACiF,CAAA;AACjG,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Modal/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AACpD,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAA"}

package/dist/elements/Modal/index.js

@@ -1,10 +1,5 @@
-import * as facelessUIImport from '@faceless-ui/modal';
-const { Modal } = facelessUIImport && 'Modal' in facelessUIImport ? facelessUIImport : {
-    Modal: undefined
-};
-const { useModal } = facelessUIImport && 'useModal' in facelessUIImport ? facelessUIImport : {
-    useModal: undefined
-};
-export { Modal, useModal };
+'use client';
 
+import { Modal, useModal } from '@faceless-ui/modal';
+export { Modal, useModal };
 //# sourceMappingURL=index.js.map

package/dist/elements/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Modal/index.tsx"],"sourcesContent":["import * as facelessUIImport from '@faceless-ui/modal'\nconst { Modal } =\n  facelessUIImport && 'Modal' in facelessUIImport ? facelessUIImport : { Modal: undefined }\nconst { useModal } =\n  facelessUIImport && 'useModal' in facelessUIImport ? facelessUIImport : { useModal: undefined }\nexport { Modal, useModal }\n"],"names":["facelessUIImport","Modal","undefined","useModal"],"rangeMappings":";;;;;;;","mappings":"AAAA,YAAYA,sBAAsB,qBAAoB;AACtD,MAAM,EAAEC,KAAK,EAAE,GACbD,oBAAoB,WAAWA,mBAAmBA,mBAAmB;IAAEC,OAAOC;AAAU;AAC1F,MAAM,EAAEC,QAAQ,EAAE,GAChBH,oBAAoB,cAAcA,mBAAmBA,mBAAmB;IAAEG,UAAUD;AAAU;AAChG,SAASD,KAAK,EAAEE,QAAQ,GAAE"}
+{"version":3,"file":"index.js","names":["Modal","useModal"],"sources":["../../../src/elements/Modal/index.tsx"],"sourcesContent":["'use client'\nimport { Modal, useModal } from '@faceless-ui/modal'\nexport { Modal, useModal }\n"],"mappings":"AAAA;;AACA,SAASA,KAAK,EAAEC,QAAQ,QAAQ;AAChC,SAASD,KAAK,EAAEC,QAAQ","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Nav/NavToggler/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAsCA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Nav/NavToggler/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAqCA,CAAA"}

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

@@ -1,38 +1,90 @@
 'use client';
-import * as facelessUIImport from '@faceless-ui/window-info';
+
+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';
 import { usePreferences } from '../../../providers/Preferences/index.js';
 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 { useWindowInfo } = facelessUIImport;
-    const { t } = useTranslation();
-    const { setPreference } = usePreferences();
-    const { navOpen, setNavOpen } = useNav();
-    const { breakpoints: { l: largeBreak } } = useWindowInfo();
-    return /*#__PURE__*/ React.createElement("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);
+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 * as facelessUIImport 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  const { useWindowInfo } = facelessUIImport\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":["facelessUIImport","React","usePreferences","useTranslation","useNav","baseClass","NavToggler","props","id","children","className","tabIndex","useWindowInfo","t","setPreference","navOpen","setNavOpen","breakpoints","l","largeBreak","button","aria-label","filter","Boolean","join","onClick","open","type"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,YAAYA,sBAAsB,2BAA0B;AAC5D,OAAOC,WAAW,QAAO;AAEzB,SAASC,cAAc,QAAQ,0CAAyC;AACxE,SAASC,cAAc,QAAQ,0CAAyC;AACxE,SAASC,MAAM,QAAQ,gBAAe;AAGtC,MAAMC,YAAY;AAElB,OAAO,MAAMC,aAKR,CAACC;IACJ,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,WAAW,CAAC,EAAE,GAAGJ;IAClD,MAAM,EAAEK,aAAa,EAAE,GAAGZ;IAE1B,MAAM,EAAEa,CAAC,EAAE,GAAGV;IAEd,MAAM,EAAEW,aAAa,EAAE,GAAGZ;IAE1B,MAAM,EAAEa,OAAO,EAAEC,UAAU,EAAE,GAAGZ;IAEhC,MAAM,EACJa,aAAa,EAAEC,GAAGC,UAAU,EAAE,EAC/B,GAAGP;IAEJ,qBACE,oBAACQ;QACCC,cAAY,CAAC,EAAEN,UAAUF,EAAE,mBAAmBA,EAAE,gBAAgB,CAAC,EAAEA,EAAE,gBAAgB,CAAC;QACtFH,WAAW;YAACL;YAAWU,WAAW,CAAC,EAAEV,UAAU,SAAS,CAAC;YAAEK;SAAU,CAClEY,MAAM,CAACC,SACPC,IAAI,CAAC;QACRhB,IAAIA;QACJiB,SAAS;YACPT,WAAW,CAACD;YAEZ,4FAA4F;YAC5F,0FAA0F;YAC1F,IAAI,CAACI,YAAY;gBACf,MAAML,cAAc,OAAO;oBACzBY,MAAM,CAACX;gBACT;YACF;QACF;QACAJ,UAAUA;QACVgB,MAAK;OAEJlB;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.d.ts

@@ -1,13 +1,16 @@
 import React from 'react';
 type NavContextType = {
+    hydrated: boolean;
     navOpen: boolean;
-    navRef: React.RefObject<HTMLDivElement>;
+    navRef: React.RefObject<HTMLDivElement | null>;
     setNavOpen: (value: boolean) => void;
+    shouldAnimate: boolean;
 };
 export declare const NavContext: React.Context<NavContextType>;
 export declare const useNav: () => NavContextType;
 export declare const NavProvider: React.FC<{
     children: React.ReactNode;
+    initialIsOpen?: boolean;
 }>;
 export {};
 //# sourceMappingURL=context.d.ts.map

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;AAIhD,KAAK,cAAc,GAAG;IACpB,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IACvC,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;CACrC,CAAA;AAED,eAAO,MAAM,UAAU,+BAIrB,CAAA;AAEF,eAAO,MAAM,MAAM,sBAAqC,CAAA;AAYxD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CA8DA,CAAA"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/elements/Nav/context.tsx"],"names":[],"mappings":"AAGA,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,eAAO,MAAM,UAAU,+BAMrB,CAAA;AAEF,eAAO,MAAM,MAAM,sBAAqC,CAAA;AAYxD,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

@@ -1,89 +1,101 @@
 'use client';
-import * as facelessUIImport from '@faceless-ui/window-info';
+
+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({
-    navOpen: true,
-    navRef: null,
-    setNavOpen: ()=>{}
+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);
 };
-export const NavProvider = ({ children })=>{
-    const { useWindowInfo } = facelessUIImport;
-    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(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);
-            };
-            setNavFromPreferences() // eslint-disable-line @typescript-eslint/no-floating-promises
-            ;
-        }
-    }, [
-        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 === false || midBreak === false || smallBreak === false) {
-            setNavOpen(false);
-        }
-    }, [
-        largeBreak,
-        midBreak,
-        smallBreak
-    ]);
-    // when the component unmounts, clear all body scroll locks
-    useEffect(()=>{
-        return ()=>{
-            clearAllBodyScrollLocks();
-        };
-    }, []);
-    return /*#__PURE__*/ React.createElement(NavContext.Provider, {
-        value: {
-            navOpen,
-            navRef,
-            setNavOpen
-        }
-    }, children);
+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();
+    };
+  }, []);
+  return /*#__PURE__*/_jsx(NavContext.Provider, {
+    value: {
+      hydrated,
+      navOpen,
+      navRef,
+      setNavOpen,
+      shouldAnimate
+    },
+    children: children
+  });
 };
-
 //# 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 * as facelessUIImport 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  navOpen: boolean\n  navRef: React.RefObject<HTMLDivElement>\n  setNavOpen: (value: boolean) => void\n}\n\nexport const NavContext = React.createContext<NavContextType>({\n  navOpen: true,\n  navRef: null,\n  setNavOpen: () => {},\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}> = ({ children }) => {\n  const { useWindowInfo } = facelessUIImport\n\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(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      setNavFromPreferences() // eslint-disable-line @typescript-eslint/no-floating-promises\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 === false || midBreak === false || smallBreak === false) {\n      setNavOpen(false)\n    }\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={{ navOpen, navRef, setNavOpen }}>{children}</NavContext.Provider>\n  )\n}\n"],"names":["facelessUIImport","clearAllBodyScrollLocks","disableBodyScroll","enableBodyScroll","React","useEffect","useRef","usePreferences","NavContext","createContext","navOpen","navRef","setNavOpen","useNav","useContext","getNavPreference","getPreference","navPrefs","preferredState","open","NavProvider","children","useWindowInfo","breakpoints","l","largeBreak","m","midBreak","s","smallBreak","useState","setNavFromPreferences","current","Provider","value"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,YAAYA,sBAAsB,2BAA0B;AAC5D,SAASC,uBAAuB,EAAEC,iBAAiB,EAAEC,gBAAgB,QAAQ,mBAAkB;AAC/F,OAAOC,SAASC,SAAS,EAAEC,MAAM,QAAQ,QAAO;AAEhD,SAASC,cAAc,QAAQ,uCAAsC;AAQrE,OAAO,MAAMC,2BAAaJ,MAAMK,aAAa,CAAiB;IAC5DC,SAAS;IACTC,QAAQ;IACRC,YAAY,KAAO;AACrB,GAAE;AAEF,OAAO,MAAMC,SAAS,IAAMT,MAAMU,UAAU,CAACN,YAAW;AAExD,MAAMO,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,cAER,CAAC,EAAEC,QAAQ,EAAE;IAChB,MAAM,EAAEC,aAAa,EAAE,GAAGtB;IAE1B,MAAM,EACJuB,aAAa,EAAEC,GAAGC,UAAU,EAAEC,GAAGC,QAAQ,EAAEC,GAAGC,UAAU,EAAE,EAC3D,GAAGP;IAEJ,MAAM,EAAEN,aAAa,EAAE,GAAGT;IAC1B,MAAMI,SAASL,OAAO;IAEtB,kCAAkC;IAClC,kDAAkD;IAClD,0DAA0D;IAC1D,iDAAiD;IACjD,MAAM,CAACI,SAASE,WAAW,GAAGR,MAAM0B,QAAQ,CAAC;IAE7C,8DAA8D;IAC9DzB,UAAU;QACR,IAAIoB,eAAe,OAAO;YACxB,MAAMM,wBAAwB;gBAC5B,MAAMb,iBAAiB,MAAMH,iBAAiBC;gBAC9CJ,WAAWM;YACb;YAEAa,wBAAwB,8DAA8D;;QACxF;IACF,GAAG;QAACN;QAAYT;QAAeJ;KAAW;IAE1C,oDAAoD;IACpD,6CAA6C;IAE7C,0CAA0C;IAC1C,wDAAwD;IACxDP,UAAU;QACR,IAAIM,OAAOqB,OAAO,EAAE;YAClB,IAAItB,WAAWiB,UAAU;gBACvBzB,kBAAkBS,OAAOqB,OAAO;YAClC,OAAO;gBACL7B,iBAAiBQ,OAAOqB,OAAO;YACjC;QACF;IACF,GAAG;QAACtB;QAASiB;KAAS;IAEtB,8CAA8C;IAC9C,qDAAqD;IACrD,mCAAmC;IACnCtB,UAAU;QACR,IAAIoB,eAAe,SAASE,aAAa,SAASE,eAAe,OAAO;YACtEjB,WAAW;QACb;IACF,GAAG;QAACa;QAAYE;QAAUE;KAAW;IAErC,2DAA2D;IAC3DxB,UAAU;QACR,OAAO;YACLJ;QACF;IACF,GAAG,EAAE;IAEL,qBACE,oBAACO,WAAWyB,QAAQ;QAACC,OAAO;YAAExB;YAASC;YAAQC;QAAW;OAAIS;AAElE,EAAC"}
+{"version":3,"file":"context.js","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","_jsx","Provider","value"],"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":"AAAA;;;AACA,SAASA,aAAa,QAAQ;AAC9B,SAASC,uBAAuB,EAAEC,iBAAiB,EAAEC,gBAAgB,QAAQ;AAC7E,OAAOC,KAAA,IAASC,SAAS,EAAEC,MAAM,QAAQ;AAEzC,SAASC,cAAc,QAAQ;AAU/B,OAAO,MAAMC,UAAA,gBAAaJ,KAAA,CAAMK,aAAa,CAAiB;EAC5DC,QAAA,EAAU;EACVC,OAAA,EAAS;EACTC,MAAA,EAAQ;EACRC,UAAA,EAAYA,CAAA,MAAO;EACnBC,aAAA,EAAe;AACjB;AAEA,OAAO,MAAMC,MAAA,GAASA,CAAA;EAAA,OAAMX,KAAA,CAAAY,UAAA,CAAAR,UAAiB;AAAA;AAE7C,MAAMS,gBAAA,GAAmB,MAAOC,aAAA;EAC9B,MAAMC,QAAA,GAAW,MAAMD,aAAA,CAAc;EACrC,MAAME,cAAA,GAAiBD,QAAA,EAAUE,IAAA;EACjC,IAAI,OAAOD,cAAA,KAAmB,WAAW;IACvC,OAAOA,cAAA;EACT,OAAO;IACL,OAAO;EACT;AACF;AAEA,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,GAAG/B,aAAA;EAEJ,MAAM;IAAEkB;EAAa,CAAE,GAAGX,cAAA;EAC1B,MAAMK,MAAA,GAASN,MAAA,CAAO;EAEtB;EACA;EACA;EACA;EACA,MAAM,CAACK,OAAA,EAASE,UAAA,CAAW,GAAGT,KAAA,CAAM4B,QAAQ,CAACR,aAAA;EAE7C,MAAM,CAACV,aAAA,EAAemB,gBAAA,CAAiB,GAAG7B,KAAA,CAAM4B,QAAQ,CAAC;EACzD,MAAM,CAACtB,QAAA,EAAUwB,WAAA,CAAY,GAAG9B,KAAA,CAAM4B,QAAQ,CAAC;EAE/C;EACA3B,SAAA,CAAU;IACR,IAAIsB,UAAA,KAAe,OAAO;MACxB,MAAMQ,qBAAA,GAAwB,MAAAA,CAAA;QAC5B,MAAMf,cAAA,GAAiB,MAAMH,gBAAA,CAAiBC,aAAA;QAC9CL,UAAA,CAAWO,cAAA;MACb;MAEA,KAAKe,qBAAA;IACP;EACF,GAAG,CAACR,UAAA,EAAYT,aAAA,EAAeL,UAAA,CAAW;EAE1C;EACA;EAEA;EACA;EACAR,SAAA,CAAU;IACR,IAAIO,MAAA,CAAOwB,OAAO,EAAE;MAClB,IAAIzB,OAAA,IAAWkB,QAAA,EAAU;QACvB3B,iBAAA,CAAkBU,MAAA,CAAOwB,OAAO;MAClC,OAAO;QACLjC,gBAAA,CAAiBS,MAAA,CAAOwB,OAAO;MACjC;IACF;EACF,GAAG,CAACzB,OAAA,EAASkB,QAAA,CAAS;EAEtB;EACA;EACA;EACAxB,SAAA,CAAU;IACR,IAAIsB,UAAA,KAAe,QAAQE,QAAA,KAAa,QAAQE,UAAA,KAAe,MAAM;MACnElB,UAAA,CAAW;IACb;IACAqB,WAAA,CAAY;IAEZG,UAAA,CAAW;MACTJ,gBAAA,CAAiB;IACnB,GAAG;EACL,GAAG,CAACN,UAAA,EAAYE,QAAA,EAAUE,UAAA,CAAW;EAErC;EACA1B,SAAA,CAAU;IACR,OAAO;MACLJ,uBAAA;IACF;EACF,GAAG,EAAE;EAEL,oBACEqC,IAAA,CAAC9B,UAAA,CAAW+B,QAAQ;IAACC,KAAA,EAAO;MAAE9B,QAAA;MAAUC,OAAA;MAASC,MAAA;MAAQC,UAAA;MAAYC;IAAc;cAChFS;;AAGP","ignoreList":[]}