quirk-ui 0.0.407 → 0.0.409

package/dist/core/components/NavBar/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),n=require("react"),e=require("../../../NavLink-D2MSB11f.cjs"),D={standard:e.styles.standard,transparent:e.styles.transparent},F={left:e.styles.left,center:e.styles.center,right:e.styles.right};function H({title:L,logo:v,items:r,groups:y,utilityItems:p,isSticky:R=!1,showSearch:C=!0,showLocaleSelect:E=!0,alignment:u="right",variant:M="standard",navigationType:S="default",className:W}){const[w,B]=n.useState(0),[f,o]=n.useState(null),[c,z]=n.useState(!1),[m,I]=n.useState(!1),[g,O]=n.useState(!1),[q,_]=n.useState(null),h=n.useRef(null),a=n.useRef(null),x=n.useRef(new Map),P=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} ${e.styles.searchWrapper}`,children:s.jsx("div",{className:e.styles.linkItem})}),T=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} `,children:s.jsx("div",{className:e.styles.linkItem})}),j=t=>{const l=x.current.get(t);if(l&&a.current){const i=l.getBoundingClientRect(),d=a.current.getBoundingClientRect(),V=i.left-d.left+i.width/2;_(V)}};console.log(j);const X=t=>{o(l=>l===t?null:t)},b=(t,l="")=>t.map(i=>{const d=`${l}/${i.label}`;return s.jsx(e.NavLink,{link:i,path:d,parentPath:l,openPath:f,togglePath:X,updateTriangleIndicator:j,setOpenPath:o,renderLinks:b,buttonRefs:x},i._key??d)}),N=n.useCallback(t=>{h.current&&!h.current.contains(t.target)&&o(null)},[]),$=n.useCallback(()=>{k(),typeof window<"u"&&window.innerWidth>768&&(z(!1),o(null),typeof document<"u"&&(document.body.style.overflow=""))},[]),k=n.useCallback(()=>{if(a.current){const t=a.current.getBoundingClientRect().width;B(t),O(!0)}},[]);return n.useEffect(()=>{const t=typeof window<"u",l=typeof document<"u";return t&&window.addEventListener("resize",$),l&&document.addEventListener("click",N),k(),()=>{t&&window.removeEventListener("resize",$),l&&document.removeEventListener("click",N)}},[]),n.useEffect(()=>{if(typeof window<"u"){const t=()=>{const l=window.innerWidth<768;I(l)};return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)}},[]),n.useEffect(()=>{if(typeof document<"u")return document.body.style.overflow=c?"hidden":"",()=>{document.body.style.overflow=""}},[c]),s.jsx("header",{ref:h,className:`${W??""} ${F[u]} ${D[M]} ${e.styles.navbar} ${R?e.styles.sticky:""} ${y&&y.length?e.styles.advanced:e.styles.default}`,role:"navigation","aria-label":"Main navigation",children:s.jsxs("div",{className:`${e.styles.container} ${(!p||p.length===0)&&u!=="center"?e.styles.twoColumn:""}`,children:[v?s.jsx("div",{className:e.styles.logo,children:v}):s.jsx("div",{className:e.styles.title,children:L}),s.jsx("nav",{ref:a,style:{left:u==="center"?`calc(50% - ${w/2}px)`:"0"},className:`${e.styles.nav} ${c?e.styles.open:""} ${g?e.styles.visible:e.styles.hidden}`,id:"main-menu",role:"menubar","aria-label":"Main navigation",children:s.jsxs("div",{className:e.styles.navInner,children:[s.jsx("svg",{style:{left:`${q}px`},className:`${e.styles.triangle} ${f?e.styles.show:""}`,width:16,height:12,viewBox:"0 0 100 75",xmlns:"http://www.w3.org/2000/svg",children:s.jsx("polygon",{points:"50,5 95,70 5,70",strokeLinejoin:"round",fill:"white",stroke:"white"})}),S==="default"&&r&&s.jsxs("div",{className:e.styles.grid,children:[r&&r.length>0&&b(r),C&&!m&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(P,{})]}),E&&s.jsx(T,{})]}),s.jsx("p",{children:"HELLO"}),s.jsxs("p",{children:["vis: ",g]}),s.jsxs("p",{children:["open: ",c]}),s.jsxs("p",{children:["path: ",f]}),s.jsxs("p",{children:["nav: ",w]}),s.jsxs("p",{children:["mobile: ",m]})]})})]})})}exports.Navbar=H;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),n=require("react"),e=require("../../../NavLink-D2MSB11f.cjs"),V={standard:e.styles.standard,transparent:e.styles.transparent},D={left:e.styles.left,center:e.styles.center,right:e.styles.right};function H({title:W,logo:p,items:r,groups:u,utilityItems:m,isSticky:B=!1,showSearch:w=!0,showLocaleSelect:x=!0,alignment:f="right",variant:S="standard",navigationType:g="default",className:z}){const[j,I]=n.useState(0),[v,c]=n.useState(null),[o,O]=n.useState(!1),[h,q]=n.useState(!1),[N,_]=n.useState(!1),[P,X]=n.useState(null),y=n.useRef(null),i=n.useRef(null),b=n.useRef(new Map),$=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} ${e.styles.searchWrapper}`,children:s.jsx("div",{className:e.styles.linkItem})}),k=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} `,children:s.jsx("div",{className:e.styles.linkItem})}),L=t=>{const l=b.current.get(t);if(l&&i.current){const a=l.getBoundingClientRect(),d=i.current.getBoundingClientRect(),T=a.left-d.left+a.width/2;X(T)}};console.log(L);const F=t=>{c(l=>l===t?null:t)},R=(t,l="")=>t.map(a=>{const d=`${l}/${a.label}`;return s.jsx(e.NavLink,{link:a,path:d,parentPath:l,openPath:v,togglePath:F,updateTriangleIndicator:L,setOpenPath:c,renderLinks:R,buttonRefs:b},a._key??d)}),C=n.useCallback(t=>{y.current&&!y.current.contains(t.target)&&c(null)},[]),E=n.useCallback(()=>{M(),typeof window<"u"&&window.innerWidth>768&&(O(!1),c(null),typeof document<"u"&&(document.body.style.overflow=""))},[]),M=n.useCallback(()=>{if(i.current){const t=i.current.getBoundingClientRect().width;I(t),_(!0)}},[]);return n.useEffect(()=>{const t=typeof window<"u",l=typeof document<"u";return t&&window.addEventListener("resize",E),l&&document.addEventListener("click",C),M(),()=>{t&&window.removeEventListener("resize",E),l&&document.removeEventListener("click",C)}},[]),n.useEffect(()=>{if(typeof window<"u"){const t=()=>{const l=window.innerWidth<768;q(l)};return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)}},[]),n.useEffect(()=>{if(typeof document<"u")return document.body.style.overflow=o?"hidden":"",()=>{document.body.style.overflow=""}},[o]),s.jsx("header",{ref:y,className:`${z??""} ${D[f]} ${V[S]} ${e.styles.navbar} ${B?e.styles.sticky:""} ${u&&u.length?e.styles.advanced:e.styles.default}`,role:"navigation","aria-label":"Main navigation",children:s.jsxs("div",{className:`${e.styles.container} ${(!m||m.length===0)&&f!=="center"?e.styles.twoColumn:""}`,children:[p?s.jsx("div",{className:e.styles.logo,children:p}):s.jsx("div",{className:e.styles.title,children:W}),s.jsx("nav",{ref:i,style:{left:f==="center"?`calc(50% - ${j/2}px)`:"0"},className:`${e.styles.nav} ${o?e.styles.open:""} ${N?e.styles.visible:e.styles.hidden}`,id:"main-menu",role:"menubar","aria-label":"Main navigation",children:s.jsxs("div",{className:e.styles.navInner,children:[s.jsx("svg",{style:{left:`${P}px`},className:`${e.styles.triangle} ${v?e.styles.show:""}`,width:16,height:12,viewBox:"0 0 100 75",xmlns:"http://www.w3.org/2000/svg",children:s.jsx("polygon",{points:"50,5 95,70 5,70",strokeLinejoin:"round",fill:"white",stroke:"white"})}),g==="default"&&r&&s.jsxs("div",{className:e.styles.grid,children:[r&&r.length>0&&R(r),w&&!h&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx($,{})]}),x&&s.jsx(k,{})]}),!h&&g==="advanced"&&u&&s.jsxs("div",{className:e.styles.grid,children:[w&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx($,{})]}),x&&s.jsx(k,{})]}),s.jsx("p",{children:"HELLO"}),s.jsxs("p",{children:["vis: ",N]}),s.jsxs("p",{children:["open: ",o]}),s.jsxs("p",{children:["path: ",v]}),s.jsxs("p",{children:["nav: ",j]}),s.jsxs("p",{children:["mobile: ",h]})]})})]})})}exports.Navbar=H;

package/dist/core/components/NavBar/index.mjs

@@ -1,126 +1,126 @@
-import { jsx as t, jsxs as s, Fragment as G } from "react/jsx-runtime";
-import { useState as r, useRef as p, useCallback as m, useEffect as w } from "react";
-import { s as e, N as J } from "../../../NavLink-CkJJdirp.js";
-const K = {
+import { jsx as n, jsxs as s, Fragment as j } from "react/jsx-runtime";
+import { useState as r, useRef as w, useCallback as g, useEffect as N } from "react";
+import { s as e, N as K } from "../../../NavLink-CkJJdirp.js";
+const Q = {
   standard: e.standard,
   transparent: e.transparent
-}, Q = {
+}, S = {
   left: e.left,
   center: e.center,
   right: e.right
 };
 function ne({
-  title: x,
-  logo: g,
-  items: l,
-  groups: N,
-  utilityItems: $,
-  isSticky: z = !1,
-  showSearch: B = !0,
-  showLocaleSelect: I = !0,
-  alignment: u = "right",
-  variant: O = "standard",
-  navigationType: j = "default",
+  title: X,
+  logo: $,
+  items: o,
+  groups: u,
+  utilityItems: b,
+  isSticky: P = !1,
+  showSearch: y = !0,
+  showLocaleSelect: L = !0,
+  alignment: h = "right",
+  variant: V = "standard",
+  navigationType: k = "default",
   // searchComponent,
   // localeSelectComponent,
-  className: X
+  className: D
 }) {
-  const [b, P] = r(0), [h, c] = r(null), [d, S] = r(!1), [y, T] = r(!1), [L, V] = r(!1), [D, F] = r(null), v = p(null), o = p(null), k = p(/* @__PURE__ */ new Map()), H = () => /* @__PURE__ */ t(
+  const [R, F] = r(0), [v, d] = r(null), [c, H] = r(!1), [p, T] = r(!1), [W, _] = r(!1), [q, A] = r(null), m = w(null), l = w(null), C = w(/* @__PURE__ */ new Map()), E = () => /* @__PURE__ */ n(
     "div",
     {
       className: `${e.linkWrapper} ${e.parent} ${e.searchWrapper}`,
-      children: /* @__PURE__ */ t("div", { className: e.linkItem })
+      children: /* @__PURE__ */ n("div", { className: e.linkItem })
     }
-  ), _ = () => /* @__PURE__ */ t("div", { className: `${e.linkWrapper} ${e.parent} `, children: /* @__PURE__ */ t("div", { className: e.linkItem }) }), R = (n) => {
-    const i = k.current.get(n);
-    if (i && o.current) {
-      const a = i.getBoundingClientRect(), f = o.current.getBoundingClientRect(), A = a.left - f.left + a.width / 2;
-      F(A);
+  ), M = () => /* @__PURE__ */ n("div", { className: `${e.linkWrapper} ${e.parent} `, children: /* @__PURE__ */ n("div", { className: e.linkItem }) }), x = (t) => {
+    const i = C.current.get(t);
+    if (i && l.current) {
+      const a = i.getBoundingClientRect(), f = l.current.getBoundingClientRect(), J = a.left - f.left + a.width / 2;
+      A(J);
     }
   };
-  console.log(R);
-  const q = (n) => {
-    c((i) => i === n ? null : n);
-  }, W = (n, i = "") => n.map((a) => {
+  console.log(x);
+  const G = (t) => {
+    d((i) => i === t ? null : t);
+  }, z = (t, i = "") => t.map((a) => {
     const f = `${i}/${a.label}`;
-    return /* @__PURE__ */ t(
-      J,
+    return /* @__PURE__ */ n(
+      K,
       {
         link: a,
         path: f,
         parentPath: i,
-        openPath: h,
-        togglePath: q,
-        updateTriangleIndicator: R,
-        setOpenPath: c,
-        renderLinks: W,
-        buttonRefs: k
+        openPath: v,
+        togglePath: G,
+        updateTriangleIndicator: x,
+        setOpenPath: d,
+        renderLinks: z,
+        buttonRefs: C
       },
       a._key ?? f
     );
-  }), C = m((n) => {
-    v.current && !v.current.contains(n.target) && c(null);
-  }, []), E = m(() => {
-    M(), typeof window < "u" && window.innerWidth > 768 && (S(!1), c(null), typeof document < "u" && (document.body.style.overflow = ""));
-  }, []), M = m(() => {
-    if (o.current) {
-      const n = o.current.getBoundingClientRect().width;
-      P(n), V(!0);
+  }), B = g((t) => {
+    m.current && !m.current.contains(t.target) && d(null);
+  }, []), I = g(() => {
+    O(), typeof window < "u" && window.innerWidth > 768 && (H(!1), d(null), typeof document < "u" && (document.body.style.overflow = ""));
+  }, []), O = g(() => {
+    if (l.current) {
+      const t = l.current.getBoundingClientRect().width;
+      F(t), _(!0);
     }
   }, []);
-  return w(() => {
-    const n = typeof window < "u", i = typeof document < "u";
-    return n && window.addEventListener("resize", E), i && document.addEventListener("click", C), M(), () => {
-      n && window.removeEventListener("resize", E), i && document.removeEventListener("click", C);
+  return N(() => {
+    const t = typeof window < "u", i = typeof document < "u";
+    return t && window.addEventListener("resize", I), i && document.addEventListener("click", B), O(), () => {
+      t && window.removeEventListener("resize", I), i && document.removeEventListener("click", B);
     };
-  }, []), w(() => {
+  }, []), N(() => {
     if (typeof window < "u") {
-      const n = () => {
+      const t = () => {
         const i = window.innerWidth < 768;
         T(i);
       };
-      return n(), window.addEventListener("resize", n), () => window.removeEventListener("resize", n);
+      return t(), window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
     }
-  }, []), w(() => {
+  }, []), N(() => {
     if (typeof document < "u")
-      return document.body.style.overflow = d ? "hidden" : "", () => {
+      return document.body.style.overflow = c ? "hidden" : "", () => {
         document.body.style.overflow = "";
       };
-  }, [d]), /* @__PURE__ */ t(
+  }, [c]), /* @__PURE__ */ n(
     "header",
     {
-      ref: v,
-      className: `${X ?? ""} ${Q[u]} ${K[O]} ${e.navbar} ${z ? e.sticky : ""} ${N && N.length ? e.advanced : e.default}`,
+      ref: m,
+      className: `${D ?? ""} ${S[h]} ${Q[V]} ${e.navbar} ${P ? e.sticky : ""} ${u && u.length ? e.advanced : e.default}`,
       role: "navigation",
       "aria-label": "Main navigation",
       children: /* @__PURE__ */ s(
         "div",
         {
-          className: `${e.container} ${(!$ || $.length === 0) && u !== "center" ? e.twoColumn : ""}`,
+          className: `${e.container} ${(!b || b.length === 0) && h !== "center" ? e.twoColumn : ""}`,
           children: [
-            g ? /* @__PURE__ */ t("div", { className: e.logo, children: g }) : /* @__PURE__ */ t("div", { className: e.title, children: x }),
-            /* @__PURE__ */ t(
+            $ ? /* @__PURE__ */ n("div", { className: e.logo, children: $ }) : /* @__PURE__ */ n("div", { className: e.title, children: X }),
+            /* @__PURE__ */ n(
               "nav",
               {
-                ref: o,
+                ref: l,
                 style: {
-                  left: u === "center" ? `calc(50% - ${b / 2}px)` : "0"
+                  left: h === "center" ? `calc(50% - ${R / 2}px)` : "0"
                 },
-                className: `${e.nav} ${d ? e.open : ""} ${L ? e.visible : e.hidden}`,
+                className: `${e.nav} ${c ? e.open : ""} ${W ? e.visible : e.hidden}`,
                 id: "main-menu",
                 role: "menubar",
                 "aria-label": "Main navigation",
                 children: /* @__PURE__ */ s("div", { className: e.navInner, children: [
-                  /* @__PURE__ */ t(
+                  /* @__PURE__ */ n(
                     "svg",
                     {
-                      style: { left: `${D}px` },
-                      className: `${e.triangle} ${h ? e.show : ""}`,
+                      style: { left: `${q}px` },
+                      className: `${e.triangle} ${v ? e.show : ""}`,
                       width: 16,
                       height: 12,
                       viewBox: "0 0 100 75",
                       xmlns: "http://www.w3.org/2000/svg",
-                      children: /* @__PURE__ */ t(
+                      children: /* @__PURE__ */ n(
                         "polygon",
                         {
                           points: "50,5 95,70 5,70",
@@ -131,34 +131,41 @@ function ne({
                       )
                     }
                   ),
-                  j === "default" && l && /* @__PURE__ */ s("div", { className: e.grid, children: [
-                    l && l.length > 0 && W(l),
-                    B && !y && /* @__PURE__ */ s(G, { children: [
-                      /* @__PURE__ */ t("span", { className: e.separator }),
-                      /* @__PURE__ */ t(H, {})
+                  k === "default" && o && /* @__PURE__ */ s("div", { className: e.grid, children: [
+                    o && o.length > 0 && z(o),
+                    y && !p && /* @__PURE__ */ s(j, { children: [
+                      /* @__PURE__ */ n("span", { className: e.separator }),
+                      /* @__PURE__ */ n(E, {})
                     ] }),
-                    I && /* @__PURE__ */ t(_, {})
+                    L && /* @__PURE__ */ n(M, {})
                   ] }),
-                  /* @__PURE__ */ t("p", { children: "HELLO" }),
+                  !p && k === "advanced" && u && /* @__PURE__ */ s("div", { className: e.grid, children: [
+                    y && /* @__PURE__ */ s(j, { children: [
+                      /* @__PURE__ */ n("span", { className: e.separator }),
+                      /* @__PURE__ */ n(E, {})
+                    ] }),
+                    L && /* @__PURE__ */ n(M, {})
+                  ] }),
+                  /* @__PURE__ */ n("p", { children: "HELLO" }),
                   /* @__PURE__ */ s("p", { children: [
                     "vis: ",
-                    L
+                    W
                   ] }),
                   /* @__PURE__ */ s("p", { children: [
                     "open: ",
-                    d
+                    c
                   ] }),
                   /* @__PURE__ */ s("p", { children: [
                     "path: ",
-                    h
+                    v
                   ] }),
                   /* @__PURE__ */ s("p", { children: [
                     "nav: ",
-                    b
+                    R
                   ] }),
                   /* @__PURE__ */ s("p", { children: [
                     "mobile: ",
-                    y
+                    p
                   ] })
                 ] })
               }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "quirk-ui",
   "private": false,
-  "version": "0.0.407",
+  "version": "0.0.409",
   "type": "module",
   "exports": {
     ".": {