@mortenbrudvik/waveui 0.10.0 → 0.11.0

package/dist/components/navigation/Nav.mjs

@@ -1,291 +1,184 @@
 "use client";
 import { cn as e } from "../../lib/cn.mjs";
-import { getElementType as t } from "../../lib/children.mjs";
-import { reportMissingContext as n, resolveDeprecatedProp as r, warnDeprecated as i, warnOnce as a } from "../../lib/dev.mjs";
-import { renderSlot as o, slotRendersContent as s } from "../../lib/slot.mjs";
-import { navCategoryClassNames as c, navClassNames as l, navItemClassNames as u, navSubItemClassNames as d } from "../../lib/classNames.mjs";
-import { useEventCallback as f } from "../../hooks/useEventCallback.mjs";
-import { useControllable as p } from "../../hooks/useControllable.mjs";
-import { useId as m } from "../../hooks/useId.mjs";
-import { disabledStyles as h, focusRingInset as g } from "../../lib/styles.mjs";
-import { ChevronDownIcon as _ } from "../../lib/icons.mjs";
-import * as v from "react";
-import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+import { warnDeprecated as t } from "../../lib/dev.mjs";
+import { materialiseSlotContent as n, renderSlot as r, slotRendersContent as i } from "../../lib/slot.mjs";
+import { navCategoryClassNames as a, navItemClassNames as o, navSubItemClassNames as s } from "../../lib/classNames.mjs";
+import { useId as c } from "../../hooks/useId.mjs";
+import { disabledStyles as l, focusRingInset as u } from "../../lib/styles.mjs";
+import { ChevronDownIcon as d } from "../../lib/icons.mjs";
+import { NavCategoryValueContext as f, NavRovingContext as p, containsValue as m, markNavPart as h, useNavContext as g, useNavListChildCheck as _, useNavValue as v, useRecordCategory as y } from "./Nav.context.mjs";
+import { NavAppItem as b, NavAppItemStatic as x, NavDivider as S, NavSectionHeader as C } from "./Nav.parts.mjs";
+import { NavRoot as w } from "./Nav.root.mjs";
+import * as T from "react";
+import { Fragment as E, jsx as D, jsxs as O } from "react/jsx-runtime";
 //#region src/components/navigation/Nav.tsx
-function S() {
-	let e = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Set(), n = () => t.forEach((e) => e());
-	return {
-		record(t, r) {
-			(e.get(t) ?? null) !== r && (r === null ? e.delete(t) : e.set(t, r), n());
-		},
-		forget(t, r) {
-			e.get(t) === r && (e.delete(t), n());
-		},
-		get: (t) => e.get(t),
-		subscribe(e) {
-			return t.add(e), () => {
-				t.delete(e);
-			};
-		}
-	};
-}
-var C = v.createContext(null);
-C.displayName = "NavContext";
-var w = () => {}, T = {
-	value: "",
-	select: w,
-	openCategories: [],
-	toggleCategory: w,
-	registerValue: () => w,
-	currentCategory: void 0,
-	categoryStore: {
-		record: w,
-		forget: w,
-		get: () => void 0,
-		subscribe: () => w
-	}
-}, E = v.createContext(null);
-E.displayName = "NavCategoryValueContext";
-function D(e) {
-	return v.useContext(C) || (n(e, "Nav"), T);
-}
-function O(e, t) {
-	a(`Nav:duplicate-${e}:${t}`, e === "item" ? `Nav: several items share the value "${t}". Nav.Item and Nav.SubItem values must be unique within a Nav; every item with the current value is marked as the current page.` : `Nav: several categories share the value "${t}". Nav.Category values must be unique within a Nav; they open and close together.`);
+var k = "flex h-5 w-5 shrink-0 items-center justify-center";
+function A(t, n) {
+	return t && i(t) ? r(t, "span", e(n, k), { "aria-hidden": !0 }) : null;
 }
-function k(e, t, n) {
-	let { registerValue: r } = e;
-	v.useEffect(() => r(t, n), [
-		r,
-		t,
-		n
-	]);
-}
-function A(e, t) {
-	let n = v.useContext(E), { categoryStore: r } = e;
-	v.useLayoutEffect(() => {
-		r.record(t, n);
-	}, [
-		r,
-		t,
-		n
-	]);
-}
-var j = "flex h-5 w-5 shrink-0 items-center justify-center";
-function M(t, n) {
-	return t && s(t) ? o(t, "span", e(n, j), { "aria-hidden": !0 }) : null;
-}
-var N = {
-	base: e("flex w-full items-center gap-2 px-4 py-2 text-body-1 text-start no-underline transition-colors motion-reduce:transition-none", g, h),
+var j = {
+	base: e("flex w-full items-center gap-2 px-4 py-2 text-body-1 text-start no-underline transition-colors motion-reduce:transition-none", u, l),
 	selected: "bg-subtle-selected text-primary font-semibold border-s-2 border-s-primary",
-	idle: "text-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover"
-}, P = {
-	base: e("flex w-full items-center ps-11 pe-4 py-1.5 text-body-1 text-start no-underline transition-colors motion-reduce:transition-none", g, h),
+	idle: "text-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover",
+	selectedInRow: "text-primary font-semibold",
+	rowSelected: "bg-subtle-selected border-s-2 border-s-primary"
+}, M = {
+	base: e("flex w-full items-center ps-11 pe-4 py-1.5 text-body-1 text-start no-underline transition-colors motion-reduce:transition-none", u, l),
 	selected: "text-primary font-semibold",
-	idle: "text-muted-foreground not-disabled:not-aria-disabled:hover:text-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover"
-}, F = e("flex w-full items-center gap-2 px-4 py-2 text-body-1 font-semibold text-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover transition-colors motion-reduce:transition-none", "data-[contains-current]:bg-subtle-selected data-[contains-current]:text-primary data-[contains-current]:border-s-2 data-[contains-current]:border-s-primary", g);
-function I(e) {
-	let { children: t } = e.props;
-	return typeof t == "function" ? void 0 : t;
-}
+	idle: "text-muted-foreground not-disabled:not-aria-disabled:hover:text-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover",
+	selectedInRow: "text-primary font-semibold",
+	rowSelected: void 0
+}, N = "group/nav-row flex items-center transition-colors motion-reduce:transition-none", P = "hover:bg-subtle-hover", F = e("flex shrink-0 items-center gap-1 pe-2", "*:opacity-0 group-hover/nav-row:*:opacity-100 group-focus-within/nav-row:*:opacity-100", "forced-colors:*:opacity-100 [@media(hover:none)]:*:opacity-100", "*:has-[[aria-pressed=true]]:opacity-100 *:has-[[aria-expanded=true]]:opacity-100", "[&>[aria-pressed=true]]:opacity-100 [&>[aria-expanded=true]]:opacity-100"), I = e("flex w-full items-center gap-2 px-4 py-2 text-body-1 font-semibold text-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover transition-colors motion-reduce:transition-none", "data-[contains-current]:bg-subtle-selected data-[contains-current]:text-primary data-[contains-current]:border-s-2 data-[contains-current]:border-s-primary", u);
 function L(e) {
-	return (typeof e == "object" || typeof e == "function") && e !== null && typeof e.then == "function";
-}
-function R(e, t) {
-	if (Array.isArray(e)) {
-		for (let n of e) R(n, t);
-		return;
-	}
-	try {
-		v.Children.forEach(e, (e) => {
-			v.isValidElement(e) && t(e);
-		});
-	} catch (e) {
-		if (!L(e)) throw e;
-	}
-}
-function z(e, ...n) {
-	return n.includes(t(e, { suspend: !1 }));
-}
-function B(e, t) {
-	let n = !1;
-	return R(e, (e) => {
-		n ||= z(e, G, K) && e.props.value === t ? !0 : B(I(e), t);
-	}), n;
-}
-function V(e, t) {
-	let n = [];
-	if (!t) return n;
-	let r = (e) => {
-		R(e, (e) => {
-			let i = I(e);
-			z(e, W) && typeof e.props.value == "string" && B(i, t) && n.push(e.props.value), r(i);
-		});
-	};
-	return r(e), n;
-}
-function H(e) {
 	if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return !0;
 	let t = e.currentTarget, n = t.getAttribute("target");
 	return !!n && n.toLowerCase() !== "_self" || t.hasAttribute("download");
 }
-function U(t, n, r, i, a) {
-	let { value: o, icon: s, disabled: c = !1, href: l, className: u, children: d, onClick: f, ref: p, ...m } = t, h = n.value === o, g = l !== void 0, _ = (e) => {
-		if (c) {
+function R(t, r, a, o, s, c, l) {
+	let { value: u, icon: d, disabled: f = !1, href: p, className: m, children: h, onClick: g, actions: _, ref: v, ...y } = t, b = r.value === u, x = p !== void 0, S = a ? { "data-roving-value": u } : void 0, C = i(_), w = y.id ?? l, T = C ? { id: w } : void 0, k = (e) => {
+		if (f) {
 			e.preventDefault();
 			return;
 		}
-		f?.(e), !(g ? !e.defaultPrevented && H(e) : e.defaultPrevented) && n.select(o);
-	}, v = /* @__PURE__ */ x(y, { children: [a && M(s, i.icon), a ? /* @__PURE__ */ b("span", {
-		className: e(i.content, "flex-1 text-start"),
-		children: d
-	}) : d] }), S = e(i.root, r.base, h ? r.selected : r.idle, u);
-	if (g) return /* @__PURE__ */ b("li", {
-		className: i.listItem,
-		children: /* @__PURE__ */ b("a", {
-			...m,
-			ref: p,
-			href: c ? void 0 : l,
-			role: c ? "link" : m.role,
-			"aria-disabled": c ? !0 : m["aria-disabled"],
-			"aria-current": h ? "page" : void 0,
-			onClick: _,
-			className: S,
-			children: v
-		})
+		g?.(e), !(x ? !e.defaultPrevented && L(e) : e.defaultPrevented) && r.select(u);
+	}, j = /* @__PURE__ */ O(E, { children: [c && A(d, s.icon), c ? /* @__PURE__ */ D("span", {
+		className: e(s.content, "flex-1 text-start"),
+		children: h
+	}) : h] }), M = e(s.root, o.base, b ? C ? o.selectedInRow : o.selected : o.idle, C && "min-w-0 flex-1", m), I = C ? e(s.listItem, N, b && o.rowSelected ? o.rowSelected : !f && P) : s.listItem, R = C ? /* @__PURE__ */ D("span", {
+		role: "group",
+		"aria-labelledby": w,
+		"data-wave-nav-actions": "",
+		className: e(s.actions, F),
+		children: n(_)
+	}) : null;
+	if (x) return /* @__PURE__ */ O("li", {
+		className: I,
+		children: [/* @__PURE__ */ D("a", {
+			...y,
+			...T,
+			...S,
+			ref: v,
+			href: f ? void 0 : p,
+			role: f ? "link" : y.role,
+			"aria-disabled": f ? !0 : y["aria-disabled"],
+			"aria-current": b ? "page" : void 0,
+			onClick: k,
+			className: M,
+			children: j
+		}), R]
 	});
-	let { rel: C, ...w } = m;
-	return /* @__PURE__ */ b("li", {
-		className: i.listItem,
-		children: /* @__PURE__ */ b("button", {
+	let { rel: z, ...B } = y;
+	return /* @__PURE__ */ O("li", {
+		className: I,
+		children: [/* @__PURE__ */ D("button", {
 			type: "button",
-			...w,
-			ref: p,
-			disabled: c,
-			"aria-current": h ? "page" : void 0,
-			onClick: _,
-			className: S,
-			children: v
-		})
+			...B,
+			...T,
+			...S,
+			ref: v,
+			disabled: f,
+			"aria-current": b ? "page" : void 0,
+			onClick: k,
+			className: M,
+			children: j
+		}), R]
 	});
 }
-var W = ({ value: t, label: n, icon: r, className: a, children: o, ref: s, ...l }) => {
-	let u = D("Nav.Category"), { value: d, openCategories: f, toggleCategory: p, currentCategory: h, categoryStore: g } = u;
-	k(u, "category", t);
-	let y = m("wave-nav-category"), S = f.includes(t), C = !S && d !== "" && B(o, d), w = v.useSyncExternalStore(g.subscribe, () => d !== "" && g.get(d) === t, () => !1);
-	v.useLayoutEffect(() => {
-		if (C) return g.record(d, t), () => g.forget(d, t);
+var z = ({ value: n, label: r, icon: i, className: o, children: s, ref: l, ...u }) => {
+	let h = g("Nav.Category"), y = T.useContext(p), { value: b, openCategories: x, toggleCategory: S, currentCategory: C, categoryStore: w } = h;
+	v(h, "category", n);
+	let E = c("wave-nav-category"), k = x.includes(n), j = !k && b !== "" && m(s, b), M = T.useSyncExternalStore(w.subscribe, () => b !== "" && w.get(b) === n, () => !1);
+	T.useLayoutEffect(() => {
+		if (j) return w.record(b, n), () => w.forget(b, n);
+	}, [
+		w,
+		j,
+		b,
+		n
+	]);
+	let N = !k && (C === n || M || j);
+	T.useLayoutEffect(() => {
+		if (y) return y.reportCurrentCategory(n, N), () => y.reportCurrentCategory(n, !1);
 	}, [
-		g,
-		C,
-		d,
-		t
+		y,
+		n,
+		N
 	]);
-	let T = !S && (h === t || w || C), O = n, A = o;
-	if (n === void 0) {
-		i("Nav.Category", "text children as the label", "label", "Pass the category label in `label` and only the sub-items as children.");
-		let e = v.Children.toArray(o), t = (e) => typeof e == "string" || typeof e == "number";
-		O = e.filter(t).join(""), A = e.filter((e) => !t(e));
+	let P = T.useRef(null);
+	_(P, "Nav.Category", "sub-items");
+	let F = r, L = s;
+	if (r === void 0) {
+		t("Nav.Category", "text children as the label", "label", "Pass the category label in `label` and only the sub-items as children.");
+		let e = T.Children.toArray(s), n = (e) => typeof e == "string" || typeof e == "number";
+		F = e.filter(n).join(""), L = e.filter((e) => !n(e));
 	}
-	return /* @__PURE__ */ x("li", {
-		ref: s,
-		...l,
-		className: e(c.root, a),
-		children: [/* @__PURE__ */ x("button", {
+	return /* @__PURE__ */ O("li", {
+		ref: l,
+		...u,
+		className: e(a.root, o),
+		children: [/* @__PURE__ */ O("button", {
 			type: "button",
-			"aria-expanded": S,
-			"aria-controls": S ? y : void 0,
-			"aria-current": T ? !0 : void 0,
-			"data-contains-current": T ? "" : void 0,
-			onClick: () => p(t),
-			className: e(c.button, F),
+			"aria-expanded": k,
+			"aria-controls": k ? E : void 0,
+			"aria-current": N ? !0 : void 0,
+			"data-contains-current": N ? "" : void 0,
+			"data-roving-value": y ? `wave-nav-category:${n}` : void 0,
+			onClick: () => S(n),
+			className: e(a.button, I),
 			children: [
-				M(r, c.icon),
-				/* @__PURE__ */ b("span", {
-					className: e(c.label, "flex-1 text-start"),
-					children: O
+				A(i, a.icon),
+				/* @__PURE__ */ D("span", {
+					className: e(a.label, "flex-1 text-start"),
+					children: F
 				}),
-				/* @__PURE__ */ b(_, { className: e(c.expandIcon, "shrink-0 transition-transform motion-reduce:transition-none", S && "rotate-180") })
+				/* @__PURE__ */ D(d, { className: e(a.expandIcon, "shrink-0 transition-transform motion-reduce:transition-none", k && "rotate-180") })
 			]
-		}), S && /* @__PURE__ */ b(E.Provider, {
-			value: t,
-			children: /* @__PURE__ */ b("ul", {
-				id: y,
-				className: e(c.list, "m-0 list-none p-0"),
-				children: A
+		}), k && /* @__PURE__ */ D(f.Provider, {
+			value: n,
+			children: /* @__PURE__ */ D("ul", {
+				ref: P,
+				id: E,
+				className: e(a.list, "m-0 list-none p-0"),
+				children: L
 			})
 		})]
 	});
 };
-W.displayName = "NavCategory";
-function G(e) {
-	let t = D("Nav.Item");
-	return k(t, "item", e.value), A(t, e.value), U(e, t, N, {
-		root: u.root,
-		listItem: u.listItem,
-		icon: u.icon,
-		content: u.content
-	}, !0);
-}
-G.displayName = "NavItem";
-function K(e) {
-	let t = D("Nav.SubItem");
-	return k(t, "item", e.value), A(t, e.value), U(e, t, P, {
-		root: d.root,
-		listItem: d.listItem
-	}, !1);
-}
-K.displayName = "NavSubItem";
-var q = ({ value: t, defaultValue: n, onValueChange: a, selectedValue: o, defaultSelectedValue: s, onNavItemSelect: c, openCategories: u, defaultOpenCategories: d, onOpenCategoriesChange: m, currentCategory: h, className: g, children: _, ref: y, ...x }) => {
-	let w = r("Nav", t, o, "selectedValue", "value"), T = r("Nav", n, s, "defaultSelectedValue", "defaultValue") ?? "";
-	c !== void 0 && i("Nav", "onNavItemSelect", "onValueChange");
-	let [E, D] = p(w, T, a), k = f(c), A = v.useCallback((e) => {
-		D(e), k(e);
-	}, [D, k]), [j] = v.useState(() => d ?? V(_, w ?? T)), [M, N] = p(u, j, (e) => m?.([...e])), P = v.useCallback((e) => {
-		N((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
-	}, [N]), F = v.useRef(null), I = v.useCallback((e, t) => {
-		let n = F.current ??= /* @__PURE__ */ new Map(), r = `${e}:${t}`, i = (n.get(r) ?? 0) + 1;
-		return n.set(r, i), i > 1 && O(e, t), () => {
-			let e = (n.get(r) ?? 1) - 1;
-			e > 0 ? n.set(r, e) : n.delete(r);
-		};
-	}, []), [L] = v.useState(S), R = v.useMemo(() => ({
-		value: E,
-		select: A,
-		openCategories: M,
-		toggleCategory: P,
-		registerValue: I,
-		currentCategory: h,
-		categoryStore: L
-	}), [
-		E,
-		A,
-		M,
-		P,
-		I,
-		h,
-		L
-	]);
-	return /* @__PURE__ */ b(C.Provider, {
-		value: R,
-		children: /* @__PURE__ */ b("nav", {
-			"aria-label": "Navigation",
-			...x,
-			ref: y,
-			className: e(l.root, "w-60 border-e border-border bg-background py-2", g),
-			children: /* @__PURE__ */ b("ul", {
-				className: e(l.list, "m-0 list-none p-0"),
-				children: _
-			})
-		})
-	});
-};
-q.displayName = "Nav";
-var J = /* @__PURE__ */ Object.assign(q, {
-	Category: W,
-	Item: G,
-	SubItem: K
+z.displayName = "NavCategory", h(z, "category");
+function B(e) {
+	let t = g("Nav.Item");
+	v(t, "item", e.value), y(t, e.value);
+	let n = T.useContext(p), r = c("wave-nav-item");
+	return R(e, t, n, j, {
+		root: o.root,
+		listItem: o.listItem,
+		actions: o.actions,
+		icon: o.icon,
+		content: o.content
+	}, !0, r);
+}
+B.displayName = "NavItem", h(B, "entry");
+function V(e) {
+	let t = g("Nav.SubItem");
+	v(t, "item", e.value), y(t, e.value);
+	let n = T.useContext(p), r = c("wave-nav-item");
+	return R(e, t, n, M, {
+		root: s.root,
+		listItem: s.listItem,
+		actions: s.actions
+	}, !1, r);
+}
+V.displayName = "NavSubItem", h(V, "entry");
+var H = /* @__PURE__ */ Object.assign(w, {
+	Category: z,
+	Item: B,
+	SubItem: V,
+	SectionHeader: C,
+	Divider: S,
+	AppItem: b,
+	AppItemStatic: x
 });
 //#endregion
-export { J as Nav, W as NavCategory, G as NavItem, K as NavSubItem };
+export { H as Nav, b as NavAppItem, x as NavAppItemStatic, z as NavCategory, S as NavDivider, B as NavItem, C as NavSectionHeader, V as NavSubItem };
 
 //# sourceMappingURL=Nav.mjs.map