quirk-ui 0.0.412 → 0.0.413
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),i=require("react"),e=require("../../../NavLink-RigeMjDg.cjs"),ne=require("../../../chevron-down-DfK1XBl3.cjs"),te=require("../../../external-link-DDShu-48.cjs"),le={standard:e.styles.standard,transparent:e.styles.transparent},ae={left:e.styles.left,center:e.styles.center,right:e.styles.right};function ie({title:H,logo:
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),i=require("react"),e=require("../../../NavLink-RigeMjDg.cjs"),ne=require("../../../chevron-down-DfK1XBl3.cjs"),te=require("../../../external-link-DDShu-48.cjs"),le={standard:e.styles.standard,transparent:e.styles.transparent},ae={left:e.styles.left,center:e.styles.center,right:e.styles.right};function ie({title:H,logo:m,items:f,groups:u,utilityItems:C,isSticky:V=!1,showSearch:L=!0,showLocaleSelect:E=!0,alignment:b="right",variant:A="standard",navigationType:R="default",className:J}){const[M,K]=i.useState(0),[x,r]=i.useState(null),[y,Q]=i.useState(!1),[j,U]=i.useState(!1),[S,Y]=i.useState(!1),[Z,I]=i.useState(null),[v,$]=i.useState(0),[P,W]=i.useState(null),k=i.useRef(null),h=i.useRef(null),N=i.useRef(new Map),_=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} ${e.styles.searchWrapper}`,children:s.jsx("div",{className:e.styles.linkItem})}),z=()=>s.jsx("div",{className:`${e.styles.linkWrapper} ${e.styles.parent} `,children:s.jsx("div",{className:e.styles.linkItem})}),w=t=>{const l=N.current.get(t);if(l&&h.current){const o=l.getBoundingClientRect(),c=h.current.getBoundingClientRect(),n=o.left-c.left+o.width/2;I(n)}};console.log(w);const ee=t=>{r(l=>l===t?null:t)},se=t=>t.map((l,o)=>{var T,D,F,G;const c=`group-${o}`,p=P===o,n=(T=l.primaryItems)==null?void 0:T[v??0];return s.jsxs("div",{className:`${e.styles.linkWrapper} ${e.styles.parent}`,onMouseEnter:()=>{W(o),r(c),w(c)},onMouseLeave:()=>{W(null),$(0),r(null)},children:[s.jsx("div",{className:e.styles.linkItem,children:s.jsxs("button",{ref:a=>{N.current.set(c,a)},role:"menuitem","aria-haspopup":"true","aria-expanded":p,"aria-controls":`submenu-${o}`,className:`${e.styles.sublinkToggle} ${p?e.styles.open:""} `,children:[l.title,s.jsx(ne.ChevronDown,{size:18,className:e.styles.chevron})]})}),s.jsx("div",{id:`submenu-${o}`,className:`${e.styles.sublinks} ${p?e.styles.show:""}`,role:"menu","aria-label":`${l.title} submenu`,children:s.jsx("div",{children:s.jsxs("div",{className:`${e.styles.sublinksInner} ${l.spotlight?e.styles.withSpotlight:e.styles.withoutSpotlight}`,children:[s.jsxs("div",{className:`${e.styles.sublinksColumn} ${e.styles.primaryColumn}`,children:[s.jsx("div",{className:e.styles.linkItem}),(D=l.primaryItems)==null?void 0:D.map((a,d)=>a.href?s.jsxs("a",{href:a.href,className:`${e.styles.link} ${v===d?e.styles.open:""}`,target:a.isExternal?"_blank":"_self",rel:a.isExternal?"noopener noreferrer":void 0,onClick:()=>{var X;r(null),(X=a.onClick)==null||X.call(a)},onMouseEnter:()=>a.sublinks?$(d):null,role:"menuitem",children:[s.jsxs("span",{className:e.styles.linkContent,children:[a.label,a.subtitle&&s.jsx("span",{className:e.styles.subtitle,children:a.subtitle})]}),a.isExternal&&s.jsx(te.ExternalLink,{className:e.styles.newTabIcon,size:16})]},a._key??d):s.jsx("button",{className:`${e.styles.sublinkToggle} ${v===d?e.styles.open:""}`,onMouseEnter:()=>$(d),children:s.jsxs("span",{className:e.styles.linkContent,children:[a.label,a.subtitle&&s.jsx("span",{className:e.styles.subtitle,children:a.subtitle})]})},a._key??d))]}),(n==null?void 0:n.sublinks)&&((F=n==null?void 0:n.sublinks)==null?void 0:F.length)>0&&s.jsxs("div",{className:`${e.styles.sublinksColumn} ${e.styles.fadeInFromLeft}`,children:[(n==null?void 0:n.description)&&s.jsx("div",{className:e.styles.sublinksDescription,children:n==null?void 0:n.description}),(n==null?void 0:n.sublinks)&&(n==null?void 0:n.sublinks.length)>0&&g(n.sublinks,`${c}-${v}`)]},`${n.label}-${(G=n==null?void 0:n.sublinks)==null?void 0:G.length}`)]})})})]},l._key??`group-${o}`)}),g=(t,l="")=>t.map(o=>{const c=`${l}/${o.label}`;return s.jsx(e.NavLink,{link:o,path:c,parentPath:l,openPath:x,togglePath:ee,updateTriangleIndicator:w,setOpenPath:r,renderLinks:g,buttonRefs:N},o._key??c)}),B=i.useCallback(t=>{k.current&&!k.current.contains(t.target)&&r(null)},[]),O=i.useCallback(()=>{q(),typeof window<"u"&&window.innerWidth>768&&(Q(!1),r(null),typeof document<"u"&&(document.body.style.overflow=""))},[]),q=i.useCallback(()=>{if(h.current){const t=h.current.getBoundingClientRect().width;K(t),Y(!0)}},[]);return i.useEffect(()=>{const t=typeof window<"u",l=typeof document<"u";return t&&window.addEventListener("resize",O),l&&document.addEventListener("click",B),q(),()=>{t&&window.removeEventListener("resize",O),l&&document.removeEventListener("click",B)}},[]),i.useEffect(()=>{if(typeof window<"u"){const t=()=>{const l=window.innerWidth<768;U(l)};return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)}},[]),i.useEffect(()=>{if(typeof document<"u")return document.body.style.overflow=y?"hidden":"",()=>{document.body.style.overflow=""}},[y]),s.jsx("header",{ref:k,className:`${J??""} ${ae[b]} ${le[A]} ${e.styles.navbar} ${V?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} ${(!C||C.length===0)&&b!=="center"?e.styles.twoColumn:""}`,children:[m?s.jsx("div",{className:e.styles.logo,children:m}):s.jsx("div",{className:e.styles.title,children:H}),s.jsx("nav",{ref:h,style:{left:b==="center"?`calc(50% - ${M/2}px)`:"0"},className:`${e.styles.nav} ${y?e.styles.open:""} ${S?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:`${Z}px`},className:`${e.styles.triangle} ${x?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"})}),R==="default"&&f&&s.jsxs("div",{className:e.styles.grid,children:[f&&f.length>0&&g(f),L&&!j&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(_,{})]}),E&&s.jsx(z,{})]}),!j&&R==="advanced"&&u&&s.jsxs("div",{className:e.styles.grid,children:[u.length>0&&se(u),L&&s.jsxs(s.Fragment,{children:[s.jsx("span",{className:e.styles.separator}),s.jsx(_,{})]}),E&&s.jsx(z,{})]}),s.jsx("p",{children:"HELLO"}),s.jsxs("p",{children:["vis: ",S]}),s.jsxs("p",{children:["open: ",y]}),s.jsxs("p",{children:["path: ",x]}),s.jsxs("p",{children:["nav: ",M]}),s.jsxs("p",{children:["mobile: ",j]})]})})]})})}exports.Navbar=ie;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as n, jsxs as
|
|
1
|
+
import { jsx as n, jsxs as a, Fragment as K } from "react/jsx-runtime";
|
|
2
2
|
import { useState as c, useRef as y, useCallback as M, useEffect as x } from "react";
|
|
3
3
|
import { s as e, N as oe } from "../../../NavLink-BlhKWQ4q.js";
|
|
4
4
|
import { C as re } from "../../../chevron-down-DSUzBz9F.js";
|
|
@@ -12,22 +12,22 @@ const de = {
|
|
|
12
12
|
right: e.right
|
|
13
13
|
};
|
|
14
14
|
function $e({
|
|
15
|
-
title:
|
|
15
|
+
title: Q,
|
|
16
16
|
logo: R,
|
|
17
17
|
items: p,
|
|
18
18
|
groups: h,
|
|
19
19
|
utilityItems: W,
|
|
20
|
-
isSticky:
|
|
20
|
+
isSticky: U = !1,
|
|
21
21
|
showSearch: z = !0,
|
|
22
22
|
showLocaleSelect: B = !0,
|
|
23
|
-
alignment:
|
|
24
|
-
variant:
|
|
23
|
+
alignment: N = "right",
|
|
24
|
+
variant: Y = "standard",
|
|
25
25
|
navigationType: O = "default",
|
|
26
26
|
// searchComponent,
|
|
27
27
|
// localeSelectComponent,
|
|
28
|
-
className:
|
|
28
|
+
className: Z
|
|
29
29
|
}) {
|
|
30
|
-
const [_,
|
|
30
|
+
const [_, I] = c(0), [m, d] = c(null), [v, P] = c(!1), [w, ee] = c(!1), [T, ne] = c(!1), [se, le] = c(null), [b, k] = c(
|
|
31
31
|
0
|
|
32
32
|
), [te, j] = c(null), g = y(null), f = y(null), C = y(/* @__PURE__ */ new Map()), D = () => /* @__PURE__ */ n(
|
|
33
33
|
"div",
|
|
@@ -43,12 +43,12 @@ function $e({
|
|
|
43
43
|
}
|
|
44
44
|
};
|
|
45
45
|
console.log(E);
|
|
46
|
-
const
|
|
46
|
+
const ie = (l) => {
|
|
47
47
|
d((t) => t === l ? null : l);
|
|
48
|
-
},
|
|
49
|
-
var S, V, A,
|
|
48
|
+
}, ae = (l) => l.map((t, o) => {
|
|
49
|
+
var S, V, A, q;
|
|
50
50
|
const r = `group-${o}`, $ = te === o, s = (S = t.primaryItems) == null ? void 0 : S[b ?? 0];
|
|
51
|
-
return /* @__PURE__ */
|
|
51
|
+
return /* @__PURE__ */ a(
|
|
52
52
|
"div",
|
|
53
53
|
{
|
|
54
54
|
className: `${e.linkWrapper} ${e.parent}`,
|
|
@@ -59,11 +59,11 @@ function $e({
|
|
|
59
59
|
j(null), k(0), d(null);
|
|
60
60
|
},
|
|
61
61
|
children: [
|
|
62
|
-
/* @__PURE__ */ n("div", { className: e.linkItem, children: /* @__PURE__ */
|
|
62
|
+
/* @__PURE__ */ n("div", { className: e.linkItem, children: /* @__PURE__ */ a(
|
|
63
63
|
"button",
|
|
64
64
|
{
|
|
65
|
-
ref: (
|
|
66
|
-
C.current.set(r,
|
|
65
|
+
ref: (i) => {
|
|
66
|
+
C.current.set(r, i);
|
|
67
67
|
},
|
|
68
68
|
role: "menuitem",
|
|
69
69
|
"aria-haspopup": "true",
|
|
@@ -83,37 +83,37 @@ function $e({
|
|
|
83
83
|
className: `${e.sublinks} ${$ ? e.show : ""}`,
|
|
84
84
|
role: "menu",
|
|
85
85
|
"aria-label": `${t.title} submenu`,
|
|
86
|
-
children: /* @__PURE__ */ n("div", { children: /* @__PURE__ */
|
|
86
|
+
children: /* @__PURE__ */ n("div", { children: /* @__PURE__ */ a(
|
|
87
87
|
"div",
|
|
88
88
|
{
|
|
89
89
|
className: `${e.sublinksInner} ${t.spotlight ? e.withSpotlight : e.withoutSpotlight}`,
|
|
90
90
|
children: [
|
|
91
|
-
/* @__PURE__ */
|
|
91
|
+
/* @__PURE__ */ a(
|
|
92
92
|
"div",
|
|
93
93
|
{
|
|
94
94
|
className: `${e.sublinksColumn} ${e.primaryColumn}`,
|
|
95
95
|
children: [
|
|
96
96
|
/* @__PURE__ */ n("div", { className: e.linkItem }),
|
|
97
97
|
(V = t.primaryItems) == null ? void 0 : V.map(
|
|
98
|
-
(
|
|
98
|
+
(i, u) => i.href ? /* @__PURE__ */ a(
|
|
99
99
|
"a",
|
|
100
100
|
{
|
|
101
|
-
href:
|
|
101
|
+
href: i.href,
|
|
102
102
|
className: `${e.link} ${b === u ? e.open : ""}`,
|
|
103
|
-
target:
|
|
104
|
-
rel:
|
|
103
|
+
target: i.isExternal ? "_blank" : "_self",
|
|
104
|
+
rel: i.isExternal ? "noopener noreferrer" : void 0,
|
|
105
105
|
onClick: () => {
|
|
106
|
-
var
|
|
107
|
-
d(null), (
|
|
106
|
+
var J;
|
|
107
|
+
d(null), (J = i.onClick) == null || J.call(i);
|
|
108
108
|
},
|
|
109
|
-
onMouseEnter: () =>
|
|
109
|
+
onMouseEnter: () => i.sublinks ? k(u) : null,
|
|
110
110
|
role: "menuitem",
|
|
111
111
|
children: [
|
|
112
|
-
/* @__PURE__ */
|
|
113
|
-
|
|
114
|
-
|
|
112
|
+
/* @__PURE__ */ a("span", { className: e.linkContent, children: [
|
|
113
|
+
i.label,
|
|
114
|
+
i.subtitle && /* @__PURE__ */ n("span", { className: e.subtitle, children: i.subtitle })
|
|
115
115
|
] }),
|
|
116
|
-
|
|
116
|
+
i.isExternal && /* @__PURE__ */ n(
|
|
117
117
|
ce,
|
|
118
118
|
{
|
|
119
119
|
className: e.newTabIcon,
|
|
@@ -122,36 +122,36 @@ function $e({
|
|
|
122
122
|
)
|
|
123
123
|
]
|
|
124
124
|
},
|
|
125
|
-
|
|
125
|
+
i._key ?? u
|
|
126
126
|
) : /* @__PURE__ */ n(
|
|
127
127
|
"button",
|
|
128
128
|
{
|
|
129
129
|
className: `${e.sublinkToggle} ${b === u ? e.open : ""}`,
|
|
130
130
|
onMouseEnter: () => k(u),
|
|
131
|
-
children: /* @__PURE__ */
|
|
132
|
-
|
|
133
|
-
|
|
131
|
+
children: /* @__PURE__ */ a("span", { className: e.linkContent, children: [
|
|
132
|
+
i.label,
|
|
133
|
+
i.subtitle && /* @__PURE__ */ n("span", { className: e.subtitle, children: i.subtitle })
|
|
134
134
|
] })
|
|
135
135
|
},
|
|
136
|
-
|
|
136
|
+
i._key ?? u
|
|
137
137
|
)
|
|
138
138
|
)
|
|
139
139
|
]
|
|
140
140
|
}
|
|
141
141
|
),
|
|
142
|
-
(s == null ? void 0 : s.sublinks) && ((A = s == null ? void 0 : s.sublinks) == null ? void 0 : A.length) > 0 && /* @__PURE__ */
|
|
142
|
+
(s == null ? void 0 : s.sublinks) && ((A = s == null ? void 0 : s.sublinks) == null ? void 0 : A.length) > 0 && /* @__PURE__ */ a(
|
|
143
143
|
"div",
|
|
144
144
|
{
|
|
145
145
|
className: `${e.sublinksColumn} ${e.fadeInFromLeft}`,
|
|
146
146
|
children: [
|
|
147
147
|
(s == null ? void 0 : s.description) && /* @__PURE__ */ n("div", { className: e.sublinksDescription, children: s == null ? void 0 : s.description }),
|
|
148
|
-
(s == null ? void 0 : s.sublinks) && L(
|
|
148
|
+
(s == null ? void 0 : s.sublinks) && (s == null ? void 0 : s.sublinks.length) > 0 && L(
|
|
149
149
|
s.sublinks,
|
|
150
150
|
`${r}-${b}`
|
|
151
151
|
)
|
|
152
152
|
]
|
|
153
153
|
},
|
|
154
|
-
`${s.label}-${(
|
|
154
|
+
`${s.label}-${(q = s == null ? void 0 : s.sublinks) == null ? void 0 : q.length}`
|
|
155
155
|
)
|
|
156
156
|
]
|
|
157
157
|
}
|
|
@@ -170,8 +170,8 @@ function $e({
|
|
|
170
170
|
link: o,
|
|
171
171
|
path: r,
|
|
172
172
|
parentPath: t,
|
|
173
|
-
openPath:
|
|
174
|
-
togglePath:
|
|
173
|
+
openPath: m,
|
|
174
|
+
togglePath: ie,
|
|
175
175
|
updateTriangleIndicator: E,
|
|
176
176
|
setOpenPath: d,
|
|
177
177
|
renderLinks: L,
|
|
@@ -186,7 +186,7 @@ function $e({
|
|
|
186
186
|
}, []), H = M(() => {
|
|
187
187
|
if (f.current) {
|
|
188
188
|
const l = f.current.getBoundingClientRect().width;
|
|
189
|
-
|
|
189
|
+
I(l), ne(!0);
|
|
190
190
|
}
|
|
191
191
|
}, []);
|
|
192
192
|
return x(() => {
|
|
@@ -211,32 +211,32 @@ function $e({
|
|
|
211
211
|
"header",
|
|
212
212
|
{
|
|
213
213
|
ref: g,
|
|
214
|
-
className: `${
|
|
214
|
+
className: `${Z ?? ""} ${ue[N]} ${de[Y]} ${e.navbar} ${U ? e.sticky : ""} ${h && h.length ? e.advanced : e.default}`,
|
|
215
215
|
role: "navigation",
|
|
216
216
|
"aria-label": "Main navigation",
|
|
217
|
-
children: /* @__PURE__ */
|
|
217
|
+
children: /* @__PURE__ */ a(
|
|
218
218
|
"div",
|
|
219
219
|
{
|
|
220
|
-
className: `${e.container} ${(!W || W.length === 0) &&
|
|
220
|
+
className: `${e.container} ${(!W || W.length === 0) && N !== "center" ? e.twoColumn : ""}`,
|
|
221
221
|
children: [
|
|
222
|
-
R ? /* @__PURE__ */ n("div", { className: e.logo, children: R }) : /* @__PURE__ */ n("div", { className: e.title, children:
|
|
222
|
+
R ? /* @__PURE__ */ n("div", { className: e.logo, children: R }) : /* @__PURE__ */ n("div", { className: e.title, children: Q }),
|
|
223
223
|
/* @__PURE__ */ n(
|
|
224
224
|
"nav",
|
|
225
225
|
{
|
|
226
226
|
ref: f,
|
|
227
227
|
style: {
|
|
228
|
-
left:
|
|
228
|
+
left: N === "center" ? `calc(50% - ${_ / 2}px)` : "0"
|
|
229
229
|
},
|
|
230
230
|
className: `${e.nav} ${v ? e.open : ""} ${T ? e.visible : e.hidden}`,
|
|
231
231
|
id: "main-menu",
|
|
232
232
|
role: "menubar",
|
|
233
233
|
"aria-label": "Main navigation",
|
|
234
|
-
children: /* @__PURE__ */
|
|
234
|
+
children: /* @__PURE__ */ a("div", { className: e.navInner, children: [
|
|
235
235
|
/* @__PURE__ */ n(
|
|
236
236
|
"svg",
|
|
237
237
|
{
|
|
238
238
|
style: { left: `${se}px` },
|
|
239
|
-
className: `${e.triangle} ${
|
|
239
|
+
className: `${e.triangle} ${m ? e.show : ""}`,
|
|
240
240
|
width: 16,
|
|
241
241
|
height: 12,
|
|
242
242
|
viewBox: "0 0 100 75",
|
|
@@ -252,40 +252,40 @@ function $e({
|
|
|
252
252
|
)
|
|
253
253
|
}
|
|
254
254
|
),
|
|
255
|
-
O === "default" && p && /* @__PURE__ */
|
|
255
|
+
O === "default" && p && /* @__PURE__ */ a("div", { className: e.grid, children: [
|
|
256
256
|
p && p.length > 0 && L(p),
|
|
257
|
-
z && !w && /* @__PURE__ */
|
|
257
|
+
z && !w && /* @__PURE__ */ a(K, { children: [
|
|
258
258
|
/* @__PURE__ */ n("span", { className: e.separator }),
|
|
259
259
|
/* @__PURE__ */ n(D, {})
|
|
260
260
|
] }),
|
|
261
261
|
B && /* @__PURE__ */ n(G, {})
|
|
262
262
|
] }),
|
|
263
|
-
!w && O === "advanced" && h && /* @__PURE__ */
|
|
264
|
-
h.length > 0 &&
|
|
265
|
-
z && /* @__PURE__ */
|
|
263
|
+
!w && O === "advanced" && h && /* @__PURE__ */ a("div", { className: e.grid, children: [
|
|
264
|
+
h.length > 0 && ae(h),
|
|
265
|
+
z && /* @__PURE__ */ a(K, { children: [
|
|
266
266
|
/* @__PURE__ */ n("span", { className: e.separator }),
|
|
267
267
|
/* @__PURE__ */ n(D, {})
|
|
268
268
|
] }),
|
|
269
269
|
B && /* @__PURE__ */ n(G, {})
|
|
270
270
|
] }),
|
|
271
271
|
/* @__PURE__ */ n("p", { children: "HELLO" }),
|
|
272
|
-
/* @__PURE__ */
|
|
272
|
+
/* @__PURE__ */ a("p", { children: [
|
|
273
273
|
"vis: ",
|
|
274
274
|
T
|
|
275
275
|
] }),
|
|
276
|
-
/* @__PURE__ */
|
|
276
|
+
/* @__PURE__ */ a("p", { children: [
|
|
277
277
|
"open: ",
|
|
278
278
|
v
|
|
279
279
|
] }),
|
|
280
|
-
/* @__PURE__ */
|
|
280
|
+
/* @__PURE__ */ a("p", { children: [
|
|
281
281
|
"path: ",
|
|
282
|
-
|
|
282
|
+
m
|
|
283
283
|
] }),
|
|
284
|
-
/* @__PURE__ */
|
|
284
|
+
/* @__PURE__ */ a("p", { children: [
|
|
285
285
|
"nav: ",
|
|
286
286
|
_
|
|
287
287
|
] }),
|
|
288
|
-
/* @__PURE__ */
|
|
288
|
+
/* @__PURE__ */ a("p", { children: [
|
|
289
289
|
"mobile: ",
|
|
290
290
|
w
|
|
291
291
|
] })
|