@mortenbrudvik/waveui 0.7.0 → 0.8.0

package/dist/components/data-display/List.mjs

@@ -4,42 +4,43 @@ import { flattenChildren as t, isElementOfType as n } from "../../lib/children.m
 import { reportMissingContext as r, warnDeprecated as i, warnOnce as a } from "../../lib/dev.mjs";
 import { materialiseSlotContent as o, slotRendersContent as s } from "../../lib/slot.mjs";
 import { composeEventHandlers as c } from "../../lib/composeEventHandlers.mjs";
-import { useEventCallback as l } from "../../hooks/useEventCallback.mjs";
-import { useControllable as u } from "../../hooks/useControllable.mjs";
-import { useId as d } from "../../hooks/useId.mjs";
-import { getArrowIntent as f, getDirection as p } from "../../lib/direction.mjs";
-import { FOCUSABLE_SELECTOR as m, isFocusable as h } from "../../lib/focus.mjs";
-import { useRovingTabIndex as g } from "../../hooks/useRovingTabIndex.mjs";
-import { useMergedRefs as _ } from "../../hooks/useMergedRefs.mjs";
-import { forcedColors as v } from "../../lib/styles.mjs";
-import { ListRegistry as y } from "./List.registry.mjs";
-import * as b from "react";
-import { jsx as x, jsxs as S } from "react/jsx-runtime";
+import { listClassNames as l, listItemClassNames as u } from "../../lib/classNames.mjs";
+import { useEventCallback as d } from "../../hooks/useEventCallback.mjs";
+import { useControllable as f } from "../../hooks/useControllable.mjs";
+import { useId as p } from "../../hooks/useId.mjs";
+import { getArrowIntent as m, getDirection as h } from "../../lib/direction.mjs";
+import { FOCUSABLE_SELECTOR as g, isFocusable as _ } from "../../lib/focus.mjs";
+import { useRovingTabIndex as v } from "../../hooks/useRovingTabIndex.mjs";
+import { useMergedRefs as y } from "../../hooks/useMergedRefs.mjs";
+import { forcedColors as b } from "../../lib/styles.mjs";
+import { ListRegistry as x } from "./List.registry.mjs";
+import * as S from "react";
+import { jsx as C, jsxs as w } from "react/jsx-runtime";
 //#region src/components/data-display/List.tsx
-var C = b.createContext(null);
-C.displayName = "ListContext";
-var w = null;
-function T() {
-	return w ??= {
+var T = S.createContext(null);
+T.displayName = "ListContext";
+var E = null;
+function D() {
+	return E ??= {
 		mode: "list",
 		selectedValues: /* @__PURE__ */ new Set(),
 		toggleItem: () => {},
 		getTabIndex: () => -1,
-		registry: new y()
-	}, w;
+		registry: new x()
+	}, E;
 }
-function E(e) {
-	return b.useContext(C) || (r(e, "a List"), T());
-}
-var D = [];
 function O(e) {
+	return S.useContext(T) || (r(e, "a List"), D());
+}
+var k = [];
+function A(e) {
 	a(`List:duplicate:${e}`, `List: several items share the value "${e}". Item values must be unique within a List; items with the same value are selected (and tab stops) together.`);
 }
-function k(e) {
-	return t(e).some(({ node: e }) => n(e, H) && s(e.props.action));
+function j(e) {
+	return t(e).some(({ node: e }) => n(e, W) && s(e.props.action));
 }
-var A = [
-	m,
+var M = [
+	g,
 	"[data-list-action]",
 	"label",
 	"[role=\"button\"]",
@@ -53,23 +54,23 @@ var A = [
 	"[role=\"slider\"]",
 	"[role=\"spinbutton\"]"
 ].join(", ");
-function j(e) {
+function N(e) {
 	let t = e.currentTarget, n = e.target;
 	if (!n || typeof n.nodeType != "number" || !t.contains(n)) return !0;
 	let r = n.nodeType === Node.ELEMENT_NODE ? n : n.parentElement ?? null;
-	for (; r && r !== t; r = r.parentElement) if (r.matches(A)) return !0;
+	for (; r && r !== t; r = r.parentElement) if (r.matches(M)) return !0;
 	return !1;
 }
-function M(e) {
+function P(e) {
 	return e.ctrlKey || e.altKey || e.metaKey ? !1 : e.key === "Enter" || e.key === " ";
 }
-var N = /* @__PURE__ */ new Set([
+var F = /* @__PURE__ */ new Set([
 	"textbox",
 	"searchbox",
 	"combobox",
 	"spinbutton",
 	"slider"
-]), P = /* @__PURE__ */ new Set([
+]), I = /* @__PURE__ */ new Set([
 	"button",
 	"checkbox",
 	"color",
@@ -80,22 +81,22 @@ var N = /* @__PURE__ */ new Set([
 	"reset",
 	"submit"
 ]);
-function F(e) {
+function L(e) {
 	let t = e.getAttribute("role");
-	if (t !== null && N.has(t)) return !0;
+	if (t !== null && F.has(t)) return !0;
 	let n = e.localName;
-	return n === "textarea" || n === "select" ? !0 : n === "input" ? !P.has(e.type) : e.matches("[contenteditable]:not([contenteditable=\"false\"])");
+	return n === "textarea" || n === "select" ? !0 : n === "input" ? !I.has(e.type) : e.matches("[contenteditable]:not([contenteditable=\"false\"])");
 }
-function I(e) {
-	return Array.from(e.querySelectorAll(m)).filter((e) => h(e));
+function R(e) {
+	return Array.from(e.querySelectorAll(g)).filter((e) => _(e));
 }
-function L(e) {
+function z(e) {
 	if (!e.parentElement) return -1;
 	let t = 0;
 	for (let n = e.previousElementSibling; n; n = n.previousElementSibling) t++;
 	return t;
 }
-function R(e, t) {
+function B(e, t) {
 	let n = null, r = null, i = null, a = 0;
 	for (let o = e.firstElementChild; o; o = o.nextElementSibling, a++) {
 		if (t.value !== void 0 && o.getAttribute("data-roving-value") === t.value) {
@@ -105,204 +106,204 @@ function R(e, t) {
 		a === t.index && (r = o), i = o;
 	}
 	let o = n ?? r ?? (t.index >= 0 ? i : null);
-	return o ? o.hasAttribute("tabindex") ? o : I(o)[0] ?? null : null;
+	return o ? o.hasAttribute("tabindex") ? o : R(o)[0] ?? null : null;
 }
-function z(e) {
+function V(e) {
 	for (let t = e.firstElementChild; t; t = t.nextElementSibling) if (t.hasAttribute("data-list-action")) return t;
 	return null;
 }
-function B(e) {
+function H(e) {
 	let t = [];
-	for (let n of I(e)) {
-		let r = F(n) ? e : n;
+	for (let n of R(e)) {
+		let r = L(n) ? e : n;
 		t.includes(r) || t.push(r);
 	}
 	return t;
 }
-var V = (t) => {
-	let { selectable: n = !1, selectionMode: r, selectedItems: o, defaultSelectedItems: s, onSelectionChange: l, selectedItem: d, defaultSelectedItem: f, onSelectedItemChange: p, className: m, children: h, ref: v, onKeyDown: S, onKeyDownCapture: w, onFocus: T, ...E } = t;
+var U = (t) => {
+	let { selectable: n = !1, selectionMode: r, selectedItems: o, defaultSelectedItems: s, onSelectionChange: u, selectedItem: d, defaultSelectedItem: p, onSelectedItemChange: m, className: h, children: g, ref: _, onKeyDown: b, onKeyDownCapture: w, onFocus: E, ...D } = t;
 	r === "multi" && i("List", "selectionMode=\"multi\"", "selectionMode=\"multiple\"");
-	let A = r === "multiple" || r === "multi", j = b.useMemo(() => !A && d !== void 0 ? d === null ? D : [d] : o, [
-		A,
+	let O = r === "multiple" || r === "multi", M = S.useMemo(() => !O && d !== void 0 ? d === null ? k : [d] : o, [
+		O,
 		d,
 		o
-	]), M = b.useMemo(() => !A && f != null ? [f] : s ?? D, [
-		A,
-		f,
+	]), N = S.useMemo(() => !O && p != null ? [p] : s ?? k, [
+		O,
+		p,
 		s
-	]), [N, P] = u(j, M, (e) => {
+	]), [P, F] = f(M, N, (e) => {
 		let t = [...e];
-		l?.(t), A || p?.(t[0] ?? null);
-	}), [F] = b.useState(() => new y());
-	b.useLayoutEffect(() => {
-		F.setActive(n);
-	}, [F, n]);
-	let I = b.useSyncExternalStore(F.subscribe, F.getSnapshot, F.getServerSnapshot), L = b.useMemo(() => I ? N.filter((e) => I.valueSet.has(e)) : N, [I, N]), z = b.useMemo(() => new Set(L), [L]), B = n && (I ? I.hasActions : k(h)), V = n ? B ? "grid" : "listbox" : "list", H = I ? I.values.find((e) => z.has(e)) ?? null : L[0] ?? null, { containerProps: U, getTabIndex: W } = g({
-		activeValue: H,
+		u?.(t), O || m?.(t[0] ?? null);
+	}), [I] = S.useState(() => new x());
+	S.useLayoutEffect(() => {
+		I.setActive(n);
+	}, [I, n]);
+	let L = S.useSyncExternalStore(I.subscribe, I.getSnapshot, I.getServerSnapshot), R = S.useMemo(() => L ? P.filter((e) => L.valueSet.has(e)) : P, [L, P]), z = S.useMemo(() => new Set(R), [R]), V = n && (L ? L.hasActions : j(g)), H = n ? V ? "grid" : "listbox" : "list", U = L ? L.values.find((e) => z.has(e)) ?? null : R[0] ?? null, { containerProps: W, getTabIndex: G } = v({
+		activeValue: U,
 		orientation: "vertical",
-		typeahead: (I?.count ?? 0) > 7,
+		typeahead: (L?.count ?? 0) > 7,
 		tabStop: "active",
 		itemSelector: ":scope > [data-roving-value]"
-	}), { ref: G, onKeyDown: K, onKeyDownCapture: q, onFocus: J } = U, Y = b.useRef(null), X = _(v, n ? G : null, Y);
-	b.useLayoutEffect(() => {
-		let e = F.takeFocusLoss(), t = Y.current;
+	}), { ref: K, onKeyDown: q, onKeyDownCapture: J, onFocus: Y } = W, X = S.useRef(null), ee = y(_, n ? K : null, X);
+	S.useLayoutEffect(() => {
+		let e = I.takeFocusLoss(), t = X.current;
 		if (!e || !t) return;
 		let n = t.ownerDocument, r = n.activeElement;
-		r && r !== n.body && r.isConnected || R(t, e)?.focus();
-	}, [V, F]), b.useLayoutEffect(() => {
-		F.syncOrder(Y.current);
+		r && r !== n.body && r.isConnected || B(t, e)?.focus();
+	}, [H, I]), S.useLayoutEffect(() => {
+		I.syncOrder(X.current);
 	});
-	let Z = b.useCallback((e) => {
-		P((t) => {
-			let n = F.prune(t), r = n.includes(e);
-			return A ? r ? n.filter((t) => t !== e) : [...n, e] : r ? [] : [e];
+	let Z = S.useCallback((e) => {
+		F((t) => {
+			let n = I.prune(t), r = n.includes(e);
+			return O ? r ? n.filter((t) => t !== e) : [...n, e] : r ? [] : [e];
 		});
 	}, [
-		A,
-		F,
-		P
-	]), Q = I?.duplicates ?? D;
-	b.useEffect(() => {
-		for (let e of Q) O(e);
+		O,
+		I,
+		F
+	]), Q = L?.duplicates ?? k;
+	S.useEffect(() => {
+		for (let e of Q) A(e);
 	}, [Q]);
-	let $ = L.length;
-	b.useEffect(() => {
-		n && !A && $ > 1 && a("List:single-several-selected", `List: a single-selection list (selectionMode "single") received ${$} selected items. Pass one value with \`selectedItem\`, or use selectionMode="multiple".`);
+	let $ = R.length;
+	S.useEffect(() => {
+		n && !O && $ > 1 && a("List:single-several-selected", `List: a single-selection list (selectionMode "single") received ${$} selected items. Pass one value with \`selectedItem\`, or use selectionMode="multiple".`);
 	}, [
 		n,
-		A,
+		O,
 		$
 	]);
-	let ee = b.useMemo(() => ({
-		mode: V,
+	let te = S.useMemo(() => ({
+		mode: H,
 		selectedValues: z,
 		toggleItem: Z,
-		getTabIndex: W,
-		registry: F
+		getTabIndex: G,
+		registry: I
 	}), [
-		V,
+		H,
 		z,
 		Z,
-		W,
-		F
-	]), te = V === "grid" ? "div" : "ul", ne = V === "grid" ? "grid" : V === "listbox" ? "listbox" : "list";
-	return /* @__PURE__ */ x(C.Provider, {
-		value: ee,
-		children: /* @__PURE__ */ x(te, {
-			role: ne,
-			"aria-multiselectable": n && A ? !0 : void 0,
-			className: e("m-0 list-none p-0", m),
-			...E,
-			ref: X,
+		G,
+		I
+	]), ne = H === "grid" ? "div" : "ul", re = H === "grid" ? "grid" : H === "listbox" ? "listbox" : "list";
+	return /* @__PURE__ */ C(T.Provider, {
+		value: te,
+		children: /* @__PURE__ */ C(ne, {
+			role: re,
+			"aria-multiselectable": n && O ? !0 : void 0,
+			className: e(l.root, "m-0 list-none p-0", h),
+			...D,
+			ref: ee,
 			"data-roving-container": n ? "" : void 0,
-			onKeyDown: n ? c(S, K) : S,
-			onKeyDownCapture: n ? c(w, q) : w,
-			onFocus: n ? c(T, J, { checkDefaultPrevented: !1 }) : T,
-			children: h
+			onKeyDown: n ? c(b, q) : b,
+			onKeyDownCapture: n ? c(w, J) : w,
+			onFocus: n ? c(E, Y, { checkDefaultPrevented: !1 }) : E,
+			children: g
 		})
 	});
 };
-V.displayName = "List";
-var H = ({ value: t, action: n, className: r, children: i, onClick: a, onKeyDown: u, ref: m, ...h }) => {
-	let { mode: g, selectedValues: y, toggleItem: C, getTabIndex: w, registry: T } = E("ListItem"), D = d("list-item"), O = t || void 0, k = O ?? D, A = s(n), [N] = b.useState(() => ({})), P = b.useRef(null), R = _(m, P);
-	b.useLayoutEffect(() => {
-		T.set(N, {
-			value: O,
-			hasAction: A,
-			element: P
+U.displayName = "List";
+var W = ({ value: t, action: n, className: r, children: i, onClick: a, onKeyDown: l, ref: f, ...g }) => {
+	let { mode: _, selectedValues: v, toggleItem: x, getTabIndex: T, registry: E } = O("ListItem"), D = p("list-item"), k = t || void 0, A = k ?? D, j = s(n), [M] = S.useState(() => ({})), F = S.useRef(null), I = y(f, F);
+	S.useLayoutEffect(() => {
+		E.set(M, {
+			value: k,
+			hasAction: j,
+			element: F
 		});
 	}, [
-		T,
-		N,
-		O,
-		A
-	]), b.useLayoutEffect(() => () => T.delete(N), [T, N]);
-	let V = l((e) => {
+		E,
+		M,
+		k,
+		j
+	]), S.useLayoutEffect(() => () => E.delete(M), [E, M]);
+	let B = d((e) => {
 		let t = e.parentElement;
-		T.recordFocusLoss({
-			value: O,
-			index: t ? L(t) : -1
+		E.recordFocusLoss({
+			value: k,
+			index: t ? z(t) : -1
 		});
 	});
-	b.useLayoutEffect(() => {
-		let e = P.current;
+	S.useLayoutEffect(() => {
+		let e = F.current;
 		return () => {
 			if (!e) return;
 			let t = e.ownerDocument.activeElement;
-			t && e.contains(t) && T.recordFocusLoss({
-				value: O,
-				index: L(e)
+			t && e.contains(t) && E.recordFocusLoss({
+				value: k,
+				index: z(e)
 			});
 		};
-	}, [T, O]);
-	let H = O !== void 0 && y.has(O), U = g !== "list", W = () => {
-		O !== void 0 && C(O);
-	}, G = (e) => {
-		j(e) || W();
+	}, [E, k]);
+	let U = k !== void 0 && v.has(k), W = _ !== "list", G = () => {
+		k !== void 0 && x(k);
+	}, K = (e) => {
+		N(e) || G();
 	}, q = (e) => {
-		j(e) || M(e) && (e.preventDefault(), W());
-	}, J = (e) => {
-		let t = e.currentTarget, n = e.target, r = z(t);
+		N(e) || P(e) && (e.preventDefault(), G());
+	}, Y = (e) => {
+		let t = e.currentTarget, n = e.target, r = V(t);
 		if (!r || !r.contains(n)) {
 			if (n !== t) return;
-			if (M(e)) {
-				e.preventDefault(), W();
+			if (P(e)) {
+				e.preventDefault(), G();
 				return;
 			}
-			let i = f(e.key, {
+			let i = m(e.key, {
 				orientation: "horizontal",
-				dir: p(t)
-			}) === "next" && r ? B(r)[0] : void 0;
+				dir: h(t)
+			}) === "next" && r ? H(r)[0] : void 0;
 			i && (e.preventDefault(), i.focus());
 			return;
 		}
-		if (n !== r && F(n)) {
+		if (n !== r && L(n)) {
 			e.key === "Escape" && (e.preventDefault(), r.focus());
 			return;
 		}
 		if (n === r && (e.key === "Enter" || e.key === "F2")) {
-			let t = I(r).find((e) => F(e));
+			let t = R(r).find((e) => L(e));
 			t && (e.preventDefault(), t.focus());
 			return;
 		}
-		let i = f(e.key, {
+		let i = m(e.key, {
 			orientation: "horizontal",
-			dir: p(t)
+			dir: h(t)
 		});
 		if (!i) return;
 		e.preventDefault();
-		let a = B(r), o = a.indexOf(n);
+		let a = H(r), o = a.indexOf(n);
 		i === "next" ? a[o + 1]?.focus() : o > 0 ? a[o - 1].focus() : t.focus();
-	}, Y = g === "grid" ? "div" : "li", X = g === "grid" ? "div" : "span", Z = g === "grid" ? "row" : g === "listbox" ? "option" : "listitem", Q = U ? {
-		"aria-selected": H,
-		tabIndex: w(k),
-		"data-roving-value": k,
-		"data-selected": H ? "" : void 0,
-		onClick: c(a, G),
-		onKeyDown: c(u, g === "grid" ? J : q)
+	}, X = _ === "grid" ? "div" : "li", ee = _ === "grid" ? "div" : "span", Z = _ === "grid" ? "row" : _ === "listbox" ? "option" : "listitem", Q = W ? {
+		"aria-selected": U,
+		tabIndex: T(A),
+		"data-roving-value": A,
+		"data-selected": U ? "" : void 0,
+		onClick: c(a, K),
+		onKeyDown: c(l, _ === "grid" ? Y : q)
 	} : {
 		onClick: a,
-		onKeyDown: u
+		onKeyDown: l
 	};
-	return /* @__PURE__ */ S(Y, {
+	return /* @__PURE__ */ w(X, {
 		role: Z,
-		className: e("flex items-center border-b border-border px-4 py-2 text-body-1", U && ["relative cursor-pointer", "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring"], U && (H ? ["bg-subtle-selected before:absolute before:inset-y-2 before:start-0 before:w-0.5 before:rounded-full before:bg-primary", v.selectedContainer] : "hover:bg-subtle-hover"), r),
-		...h,
-		ref: R,
+		className: e(u.root, "flex items-center border-b border-border px-4 py-2 text-body-1", W && ["relative cursor-pointer", "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring"], W && (U ? ["bg-subtle-selected before:absolute before:inset-y-2 before:start-0 before:w-0.5 before:rounded-full before:bg-primary", b.selectedContainer] : "hover:bg-subtle-hover"), r),
+		...g,
+		ref: I,
 		...Q,
-		children: [/* @__PURE__ */ x(X, {
-			role: g === "grid" ? "gridcell" : void 0,
-			className: "min-w-0 flex-1",
+		children: [/* @__PURE__ */ C(ee, {
+			role: _ === "grid" ? "gridcell" : void 0,
+			className: e(u.content, "min-w-0 flex-1"),
 			children: i
-		}), A && /* @__PURE__ */ x(K, {
-			grid: g === "grid",
-			onRemovedWithFocus: V,
+		}), j && /* @__PURE__ */ C(J, {
+			grid: _ === "grid",
+			onRemovedWithFocus: B,
 			children: o(n)
 		})]
 	});
 };
-H.displayName = "ListItem";
-var U = ["[data-roving-container]", ...[
+W.displayName = "ListItem";
+var G = ["[data-roving-container]", ...[
 	"toolbar",
 	"radiogroup",
 	"listbox",
@@ -312,19 +313,19 @@ var U = ["[data-roving-container]", ...[
 	"menu",
 	"menubar",
 	"tree"
-].map((e) => `[role="${e}"]`)].join(", "), W = [
+].map((e) => `[role="${e}"]`)].join(", "), K = [
 	"tabindex",
 	"href",
 	"contenteditable",
 	"controls"
 ];
-function G(e) {
+function q(e) {
 	let t = /* @__PURE__ */ new Map(), n = /* @__PURE__ */ new WeakSet(), r = () => {
 		for (let n of t.keys()) e.contains(n) || t.delete(n);
-		for (let r of e.querySelectorAll(m)) {
+		for (let r of e.querySelectorAll(g)) {
 			let i = r.getAttribute("tabindex");
 			if (i === "-1" || n.has(r)) continue;
-			let a = r.closest(U);
+			let a = r.closest(G);
 			a && e.contains(a) || (t.set(r, i), r.setAttribute("tabindex", "-1"));
 		}
 	};
@@ -345,37 +346,37 @@ function G(e) {
 		subtree: !0,
 		childList: !0,
 		attributes: !0,
-		attributeFilter: W
+		attributeFilter: K
 	}), () => {
 		i.disconnect();
 		for (let [e, n] of t) n === null ? e.removeAttribute("tabindex") : e.setAttribute("tabindex", n);
 		t.clear();
 	};
 }
-function K({ grid: t, onRemovedWithFocus: n, children: r }) {
-	let i = b.useRef(null);
-	return b.useLayoutEffect(() => {
+function J({ grid: t, onRemovedWithFocus: n, children: r }) {
+	let i = S.useRef(null);
+	return S.useLayoutEffect(() => {
 		let e = i.current;
 		return () => {
 			if (!e) return;
 			let t = e.ownerDocument.activeElement;
 			t && e.contains(t) && n(e);
 		};
-	}, [n, t]), b.useLayoutEffect(() => {
+	}, [n, t]), S.useLayoutEffect(() => {
 		let e = i.current;
-		return t && e ? G(e) : void 0;
-	}, [t]), /* @__PURE__ */ x(t ? "div" : "span", {
+		return t && e ? q(e) : void 0;
+	}, [t]), /* @__PURE__ */ C(t ? "div" : "span", {
 		ref: i,
 		role: t ? "gridcell" : void 0,
 		tabIndex: t ? -1 : void 0,
 		"data-list-action": "",
-		className: e("ms-2 shrink-0", t && "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring"),
+		className: e(u.action, "ms-2 shrink-0", t && "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring"),
 		children: r
 	});
 }
-K.displayName = "ListActionCell";
-var q = /* @__PURE__ */ Object.assign(V, { Item: H });
+J.displayName = "ListActionCell";
+var Y = /* @__PURE__ */ Object.assign(U, { Item: W });
 //#endregion
-export { q as List, H as ListItem };
+export { Y as List, W as ListItem };
 
 //# sourceMappingURL=List.mjs.map