@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

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

@@ -0,0 +1,361 @@
+import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
+import { useMessages as t } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { cx as n } from "../../../utils/cx.mjs";
+import { VisuallyHidden as r } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
+import { Spinner as i } from "../../feedback/Spinner/Spinner.mjs";
+import { CheckIcon as a, ChevronRightIcon as o, ErrorIcon as s, MinusIcon as c } from "../../primitives/Icon/icons.mjs";
+import { buildIndex as l, collectIds as u, computeCheckStates as d, nodeText as f, normalizeChecked as p, visibleIds as m } from "./treeUtils.mjs";
+import h from "./TreeView.module.css.mjs";
+import { useCallback as g, useEffect as _, useId as v, useLayoutEffect as y, useMemo as b, useRef as x, useState as S } from "react";
+import { Fragment as ee, jsx as C, jsxs as w } from "react/jsx-runtime";
+//#region src/components/data-display/TreeView/TreeView.tsx
+var te = {
+	sm: h.sm,
+	md: h.md,
+	lg: h.lg
+}, ne = [], re = 500, T = ({ items: T, expanded: ie, defaultExpanded: ae = ne, onExpandedChange: oe, selectionMode: E = "single", selected: se, defaultSelected: ce = ne, onSelectedChange: le, checkboxes: ue = !1, onAction: de, loadChildren: fe, renderLabel: pe, size: me = "md", loadingLabel: he, errorLabel: ge, className: _e, ref: D, onKeyDown: ve, onFocus: ye, onPointerMove: be, ...xe }) => {
+	let Se = t(), O = he ?? Se.treeView.loading, Ce = ge ?? Se.treeView.error, we = v(), k = E === "multiple", A = k && ue, [Te, Ee] = e({
+		value: ie,
+		defaultValue: ae,
+		onChange: oe
+	}), j = b(() => new Set(Te), [Te]), [M, N] = e({
+		value: se,
+		defaultValue: ce,
+		onChange: le
+	}), P = b(() => new Set(M), [M]), [F, De] = S(() => /* @__PURE__ */ new Map()), [Oe, I] = S(() => /* @__PURE__ */ new Set()), [L, R] = S(() => /* @__PURE__ */ new Set()), [ke, z] = S(""), [Ae, je] = S(null), Me = g((e) => e.children ?? F.get(e.id), [F]), B = b(() => l(T, Me), [T, Me]), Ne = x(B);
+	Ne.current = B;
+	let V = b(() => m(T, B, j), [
+		T,
+		B,
+		j
+	]), Pe = b(() => new Set(V), [V]), Fe = b(() => A ? d(T, B, P) : null, [
+		A,
+		T,
+		B,
+		P
+	]), H = Ae;
+	for (; H && !Pe.has(H);) H = B.get(H)?.parentId ?? null;
+	!H && E !== "none" && (H = V.find((e) => P.has(e)) ?? null), H ||= V[0] ?? null;
+	let U = x(null), Ie = g((e) => {
+		if (U.current = e, typeof D == "function") return D(e);
+		D && (D.current = e);
+	}, [D]), W = x(/* @__PURE__ */ new Map()), Le = (e) => (t) => {
+		let n = W.current;
+		return n.set(e, t), () => {
+			n.get(e) === t && n.delete(e);
+		};
+	}, Re = x(null), G = (e) => {
+		je(e);
+		let t = W.current.get(e);
+		t?.isConnected ? (t.focus({ preventScroll: !0 }), t.scrollIntoView?.({ block: "nearest" })) : Re.current = e;
+	};
+	y(() => {
+		let e = Re.current;
+		if (!e) return;
+		let t = W.current.get(e);
+		t?.isConnected && (Re.current = null, t.focus({ preventScroll: !0 }), t.scrollIntoView?.({ block: "nearest" }));
+	});
+	let ze = (e) => {
+		let t = document.activeElement;
+		for (let n of j) {
+			if (e.has(n)) continue;
+			let r = W.current.get(n);
+			r && t && r !== t && r.contains(t) && G(n);
+		}
+		Ee([...e]);
+	}, K = (e, t) => {
+		if (j.has(e) === t) return;
+		let n = new Set(j);
+		t ? n.add(e) : n.delete(e), ze(n);
+	}, q = x(/* @__PURE__ */ new Set()), J = x(!0);
+	_(() => (J.current = !0, () => {
+		J.current = !1;
+	}), []);
+	let Be = x(A);
+	Be.current = A;
+	let Ve = x(P);
+	Ve.current = P, _(() => {
+		if (fe) for (let e of j) {
+			let t = B.get(e);
+			if (!t?.pending || q.current.has(e) || L.has(e)) continue;
+			let n = t.node, r = f(n, W.current.get(e)?.querySelector("[data-tree-label]")?.textContent);
+			q.current.add(e), I(new Set(q.current)), z(r ? `${r}: ${O}` : O), Promise.resolve().then(() => fe(n)).then((t) => {
+				if (J.current) {
+					if (q.current.delete(e), I(new Set(q.current)), Ne.current.get(e)?.node !== n) {
+						z("");
+						return;
+					}
+					De((n) => new Map(n).set(e, t)), z(""), Be.current && Ve.current.has(e) && N((e) => [.../* @__PURE__ */ new Set([...e, ...u(t)])]);
+				}
+			}, () => {
+				J.current && (q.current.delete(e), I(new Set(q.current)), R((t) => new Set(t).add(e)), z(""));
+			});
+		}
+	}, [
+		j,
+		B,
+		L,
+		fe,
+		O,
+		N
+	]), _(() => {
+		let e = [...F.keys()].filter((e) => !B.has(e));
+		e.length > 0 && De((t) => {
+			let n = new Map(t);
+			return e.forEach((e) => n.delete(e)), n;
+		}), [...L].some((e) => !B.has(e)) && R((e) => new Set([...e].filter((e) => B.has(e))));
+	}, [
+		B,
+		F,
+		L
+	]), _(() => {
+		[...L].some((e) => !j.has(e)) && R((e) => new Set([...e].filter((e) => j.has(e))));
+	}, [L, j]);
+	let Y = x(null), He = x(null), Ue = (e) => {
+		Y.current = e, He.current = null;
+	}, X = (e) => !!B.get(e)?.node.disabled, Z = (e) => {
+		let t = B.get(e);
+		return !t || t.node.disabled ? [] : [e, ...(t.children ?? []).flatMap((e) => Z(e.id))];
+	}, We = (e) => !B.get(e)?.children?.length, Ge = (e) => {
+		N([...A ? p(T, B, e) : e]);
+	}, Ke = (e, t, n) => {
+		for (let r of t) if (!X(r)) for (let t of A ? Z(r) : [r]) n ? e.add(t) : e.delete(t);
+		return e;
+	}, qe = (e, t) => {
+		for (let n of t) {
+			if (X(n)) continue;
+			let t = B.get(n);
+			(A ? t?.isParent && j.has(n) ? [] : Z(n) : [n]).forEach((t) => e.add(t));
+		}
+		return e;
+	}, Je = (e) => {
+		if (X(e)) return;
+		Ue(e);
+		let t;
+		t = A ? !Z(e).filter(We).every((e) => P.has(e)) : !P.has(e), Ge(Ke(new Set(P), [e], t));
+	}, Ye = (e) => {
+		X(e) || (Ue(e), (M.length !== 1 || M[0] !== e) && N([e]));
+	}, Q = (e, t) => {
+		let n = V.indexOf(e), r = V.indexOf(t);
+		n === -1 && (n = r), n > r && ([n, r] = [r, n]), He.current ??= new Set(P), Ge(qe(new Set(He.current), V.slice(n, r + 1)));
+	}, Xe = () => {
+		let e = A ? T.flatMap((e) => Z(e.id)) : [...B.keys()].filter((e) => !X(e)), t = e.filter((e) => !A || We(e)).every((e) => P.has(e));
+		Ge(Ke(new Set(P), A ? T.map((e) => e.id) : e, !t));
+	}, Ze = (e, t, n) => {
+		let { node: r } = e;
+		if (!r.disabled) {
+			if (k && t === "pointer") {
+				n && Y.current ? Q(Y.current, r.id) : Je(r.id);
+				return;
+			}
+			E === "single" && Ye(r.id), de ? de(r.id, r) : e.isParent && K(r.id, !j.has(r.id));
+		}
+	}, $ = x({
+		buffer: "",
+		timer: 0
+	});
+	_(() => () => window.clearTimeout($.current.timer), []);
+	let Qe = (e) => {
+		let t = B.get(e);
+		return t ? f(t.node, W.current.get(e)?.querySelector("[data-tree-label]")?.textContent) : "";
+	}, $e = (e, t) => {
+		let n = $.current;
+		window.clearTimeout(n.timer), n.buffer += e.toLowerCase(), n.timer = window.setTimeout(() => {
+			n.buffer = "";
+		}, re);
+		let r = n.buffer, i = Array.from(r).every((e) => e === r[0]), a = i ? r[0] : r, o = i ? t + 1 : Math.max(t, 0), s = [...V.slice(o), ...V.slice(0, o)].find((e) => Qe(e).toLowerCase().startsWith(a));
+		s && G(s);
+	}, et = (e) => {
+		if (ve?.(e), e.defaultPrevented) return;
+		let t = e.target;
+		if (t.getAttribute("role") !== "treeitem") return;
+		let n = t.dataset.treeId, r = n ? B.get(n) : void 0;
+		if (!n || !r) return;
+		U.current?.removeAttribute("data-pointer");
+		let i = V.indexOf(n), a = U.current ? getComputedStyle(U.current).direction === "rtl" : !1, o = a ? "ArrowLeft" : "ArrowRight", s = a ? "ArrowRight" : "ArrowLeft", c = r.isParent && j.has(n), l = e.ctrlKey || e.metaKey;
+		switch (e.key) {
+			case "ArrowDown":
+			case "ArrowUp": {
+				e.preventDefault();
+				let t = V[i + (e.key === "ArrowDown" ? 1 : -1)];
+				if (!t) return;
+				G(t), k && e.shiftKey && (Y.current || Ue(n), Q(Y.current ?? n, t));
+				return;
+			}
+			case o:
+				if (e.preventDefault(), !r.isParent) return;
+				c ? r.children?.length && G(r.children[0].id) : K(n, !0);
+				return;
+			case s:
+				e.preventDefault(), c ? K(n, !1) : r.parentId && G(r.parentId);
+				return;
+			case "Home":
+			case "End": {
+				e.preventDefault();
+				let t = e.key === "Home" ? V[0] : V[V.length - 1];
+				if (!t) return;
+				k && l && e.shiftKey && Q(n, t), G(t);
+				return;
+			}
+			case "Enter":
+				if (e.preventDefault(), e.repeat) return;
+				Ze(r, "keyboard", e.shiftKey);
+				return;
+			case " ":
+				if (e.preventDefault(), $.current.buffer) {
+					$e(" ", i);
+					return;
+				}
+				if (e.repeat) return;
+				k ? e.shiftKey && Y.current ? Q(Y.current, n) : Je(n) : E === "single" && Ye(n);
+				return;
+			case "*": {
+				e.preventDefault();
+				let t = r.parentId ? B.get(r.parentId)?.children ?? [] : T, n = new Set(j);
+				for (let e of t) B.get(e.id)?.isParent && n.add(e.id);
+				n.size !== j.size && ze(n);
+				return;
+			}
+			default:
+				if (k && l && !e.altKey && e.key.toLowerCase() === "a") {
+					e.preventDefault(), Xe();
+					return;
+				}
+				e.key.length === 1 && !l && !e.altKey && (e.preventDefault(), $e(e.key, i));
+		}
+	}, tt = x(null), nt = (e) => {
+		ye?.(e);
+		let t = e.target, n = t.getAttribute("role") === "treeitem" ? t.dataset.treeId : void 0;
+		n && (je(n), tt.current = t);
+	};
+	y(() => {
+		let e = tt.current;
+		if (!e || e.isConnected) return;
+		tt.current = null;
+		let t = document.activeElement;
+		(!t || t === document.body) && H && G(H);
+	});
+	let rt = x({
+		x: NaN,
+		y: NaN
+	}), it = (e) => {
+		if (be?.(e), e.pointerType === "touch") return;
+		let t = rt.current;
+		(t.x !== e.clientX || t.y !== e.clientY) && (t.x = e.clientX, t.y = e.clientY, e.currentTarget.setAttribute("data-pointer", ""));
+	}, at = (e) => {
+		let t = B.get(e.id);
+		if (!t) return null;
+		let { level: r } = t, l = !!e.disabled, u = t.isParent && j.has(e.id), d = u && t.pending && L.has(e.id), f = Oe.has(e.id) || u && t.pending && !d, p = Fe?.get(e.id) ?? !1, m = A ? p === !0 : E !== "none" && P.has(e.id), g = {
+			expanded: u,
+			selected: m,
+			checked: p,
+			disabled: l,
+			level: r,
+			loading: f
+		}, _ = typeof e.icon == "function" ? e.icon(g) : e.icon, v = `${we}-label-${t.ordinal}`, y = { "--_level": r }, b = { "--_level": r + 1 };
+		return /* @__PURE__ */ w("li", {
+			ref: Le(e.id),
+			role: "treeitem",
+			"data-tree-id": e.id,
+			tabIndex: H === e.id ? 0 : -1,
+			"aria-labelledby": v,
+			"aria-level": r,
+			"aria-setsize": t.setsize,
+			"aria-posinset": t.posinset,
+			"aria-expanded": t.isParent ? u : void 0,
+			"aria-selected": E !== "none" && !A ? m : void 0,
+			"aria-checked": A ? p : void 0,
+			"aria-disabled": l || void 0,
+			className: h.item,
+			children: [/* @__PURE__ */ w("div", {
+				className: h.row,
+				style: y,
+				"data-selected": m ? "" : void 0,
+				"data-disabled": l ? "" : void 0,
+				onClick: (e) => {
+					e.defaultPrevented || Ze(t, "pointer", e.shiftKey);
+				},
+				children: [
+					/* @__PURE__ */ C("span", {
+						"aria-hidden": "true",
+						className: h.toggle,
+						"data-state": u ? "open" : "closed",
+						onClick: t.isParent ? (t) => {
+							t.preventDefault(), K(e.id, !u);
+						} : void 0,
+						children: t.isParent && /* @__PURE__ */ C(o, {
+							className: h.chevron,
+							size: "sm",
+							strokeWidth: 2.5
+						})
+					}),
+					A && /* @__PURE__ */ w("span", {
+						"aria-hidden": "true",
+						className: h.checkbox,
+						"data-state": p === "mixed" ? "mixed" : p ? "checked" : "unchecked",
+						children: [/* @__PURE__ */ C(a, {
+							className: n(h.mark, h.check),
+							strokeWidth: 3
+						}), /* @__PURE__ */ C(c, {
+							className: n(h.mark, h.minus),
+							strokeWidth: 3
+						})]
+					}),
+					_ && /* @__PURE__ */ C("span", {
+						"aria-hidden": "true",
+						className: h.icon,
+						children: _
+					}),
+					/* @__PURE__ */ C("span", {
+						id: v,
+						className: h.label,
+						"data-tree-label": "",
+						children: pe ? pe(e, g) : e.label
+					})
+				]
+			}), u && /* @__PURE__ */ w("ul", {
+				role: "group",
+				className: h.group,
+				"aria-busy": f || void 0,
+				children: [
+					t.children?.map(at),
+					f && !t.children && /* @__PURE__ */ w("li", {
+						role: "none",
+						className: h.status,
+						style: b,
+						children: [/* @__PURE__ */ C(i, {
+							decorative: !0,
+							size: "sm",
+							tone: "primary"
+						}), /* @__PURE__ */ C("span", { children: O })]
+					}),
+					d && /* @__PURE__ */ w("li", {
+						role: "none",
+						className: n(h.status, h.error),
+						style: b,
+						children: [/* @__PURE__ */ C(s, { size: "sm" }), /* @__PURE__ */ C("span", {
+							role: "alert",
+							children: Ce
+						})]
+					})
+				]
+			})]
+		}, e.id);
+	};
+	return /* @__PURE__ */ w(ee, { children: [/* @__PURE__ */ C("ul", {
+		...xe,
+		ref: Ie,
+		role: "tree",
+		"aria-multiselectable": k || void 0,
+		className: n(h.root, te[me], A && h.withCheckboxes, _e),
+		onKeyDown: et,
+		onFocus: nt,
+		onPointerMove: it,
+		children: T.map(at)
+	}), /* @__PURE__ */ C(r, {
+		role: "status",
+		children: ke
+	})] });
+};
+//#endregion
+export { T as TreeView };

package/dist/components/data-display/TreeView/TreeView.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_root_lahq7_13`,t=`_sm_lahq7_61`,n=`_md_lahq7_83`,r=`_lg_lahq7_91`,i=`_item_lahq7_117`,a=`_row_lahq7_139`,o=`_group_lahq7_151`,s=`_label_lahq7_255`,c=`_withCheckboxes_lahq7_285`,l=`_toggle_lahq7_335`,u=`_chevron_lahq7_365`,d=`_checkbox_lahq7_417`,f=`_mark_lahq7_477`,p=`_check_lahq7_417`,m=`_minus_lahq7_503`,h=`_icon_lahq7_533`,g=`_status_lahq7_597`,_=`_error_lahq7_623`,v={root:e,sm:t,md:n,lg:r,item:i,row:a,group:o,"tree-group-enter":`_tree-group-enter_lahq7_1`,label:s,withCheckboxes:c,toggle:l,chevron:u,checkbox:d,mark:f,check:p,minus:m,icon:h,status:g,error:_};exports.check=p,exports.checkbox=d,exports.chevron=u,exports.default=v,exports.error=_,exports.group=o,exports.icon=h,exports.item=i,exports.label=s,exports.lg=r,exports.mark=f,exports.md=n,exports.minus=m,exports.root=e,exports.row=a,exports.sm=t,exports.status=g,exports.toggle=l,exports.withCheckboxes=c;

package/dist/components/data-display/TreeView/TreeView.module.css.mjs

@@ -0,0 +1,24 @@
+//#region src/components/data-display/TreeView/TreeView.module.css
+var e = "_root_lahq7_13", t = "_sm_lahq7_61", n = "_md_lahq7_83", r = "_lg_lahq7_91", i = "_item_lahq7_117", a = "_row_lahq7_139", o = "_group_lahq7_151", s = "_label_lahq7_255", c = "_withCheckboxes_lahq7_285", l = "_toggle_lahq7_335", u = "_chevron_lahq7_365", d = "_checkbox_lahq7_417", f = "_mark_lahq7_477", p = "_check_lahq7_417", m = "_minus_lahq7_503", h = "_icon_lahq7_533", g = "_status_lahq7_597", _ = "_error_lahq7_623", v = {
+	root: e,
+	sm: t,
+	md: n,
+	lg: r,
+	item: i,
+	row: a,
+	group: o,
+	"tree-group-enter": "_tree-group-enter_lahq7_1",
+	label: s,
+	withCheckboxes: c,
+	toggle: l,
+	chevron: u,
+	checkbox: d,
+	mark: f,
+	check: p,
+	minus: m,
+	icon: h,
+	status: g,
+	error: _
+};
+//#endregion
+export { p as check, d as checkbox, u as chevron, v as default, _ as error, o as group, h as icon, i as item, s as label, r as lg, f as mark, n as md, m as minus, e as root, a as row, t as sm, g as status, l as toggle, c as withCheckboxes };

package/dist/components/data-display/TreeView/index.d.ts

@@ -0,0 +1 @@
+export * from './TreeView';

package/dist/components/data-display/TreeView/treeUtils.cjs.js

@@ -0,0 +1 @@
+function e(e,t){let n=new Map,r=(e,i,a)=>{e.forEach((o,s)=>{let c=t(o),l=c===void 0&&!!o.hasChildren;n.set(o.id,{node:o,ordinal:n.size,level:i,parentId:a,posinset:s+1,setsize:e.length,children:c,isParent:c!==void 0&&c.length>0||l,pending:l}),c&&r(c,i+1,o.id)})};return r(e,1,null),n}function t(e,t,n){let r=[],i=e=>{for(let a of e){r.push(a.id);let e=t.get(a.id);e?.children&&n.has(a.id)&&i(e.children)}};return i(e),r}function n(e){return e.flatMap(e=>[e.id,...n(e.children??[])])}function r(e,t,n){let r=new Map,i=e=>{let a=t.get(e.id)?.children,o;if(a&&a.length>0){let e=a.map(i);o=e.every(e=>e===!0)?!0:!e.every(e=>e===!1)&&`mixed`}else o=n.has(e.id);return r.set(e.id,o),o};return e.forEach(i),r}function i(e,t,n){let i=r(e,t,n),a=new Set(n);for(let[e,t]of i)t===!0?a.add(e):a.delete(e);return a}function a(e,t){return e.textValue?e.textValue:typeof e.label==`string`||typeof e.label==`number`?String(e.label):(t??``).trim()}exports.buildIndex=e,exports.collectIds=n,exports.computeCheckStates=r,exports.nodeText=a,exports.normalizeChecked=i,exports.visibleIds=t;

package/dist/components/data-display/TreeView/treeUtils.d.ts

@@ -0,0 +1,82 @@
+import { ReactNode } from 'react';
+/** Render state passed to a node's `icon` function and to `renderLabel`. */
+export interface TreeNodeState {
+    /** The node is a parent and is open. */
+    expanded: boolean;
+    /** The node is selected (`aria-selected`), or fully checked in checkbox mode. */
+    selected: boolean;
+    /** Checkbox mode only: `true`, `false`, or `"mixed"` (some descendants checked). */
+    checked: boolean | "mixed";
+    /** The node is disabled. */
+    disabled: boolean;
+    /** Depth, starting at 1 for top-level nodes. */
+    level: number;
+    /** The node's children are loading. */
+    loading: boolean;
+}
+/** One node of a `TreeView`. */
+export interface TreeNode {
+    /** Unique id across the whole tree. Used for expansion, selection, and callbacks. */
+    id: string;
+    /** Visible label. Plain text is best; for rich labels also pass `textValue`. */
+    label: ReactNode;
+    /** Text used for typeahead and announcements when `label` isn't a plain string. */
+    textValue?: string;
+    /**
+     * Child nodes. A non-empty array makes the node a parent. Leave it
+     * `undefined` with `hasChildren` to load children on demand.
+     */
+    children?: TreeNode[];
+    /**
+     * Marks a parent whose children aren't loaded yet. Expanding it calls the
+     * tree's `loadChildren`, or (without `loadChildren`) shows a loading row
+     * until you supply `children` yourself (e.g. from `onExpandedChange`).
+     */
+    hasChildren?: boolean;
+    /** Decorative icon before the label, or a function of the node's state (e.g. an open folder when expanded). Sized to the tree's `size`. */
+    icon?: ReactNode | ((state: TreeNodeState) => ReactNode);
+    /**
+     * Shows the node as unavailable. It stays focusable (`aria-disabled`) and
+     * can still be expanded and collapsed, but can't be selected, checked, or
+     * activated. Its children are not disabled automatically.
+     */
+    disabled?: boolean;
+}
+/** @internal Everything the tree knows about one node, including collapsed ones. */
+export interface NodeInfo {
+    node: TreeNode;
+    /** Position in a depth-first walk; used to build unique DOM ids. */
+    ordinal: number;
+    level: number;
+    parentId: string | null;
+    posinset: number;
+    setsize: number;
+    /** Resolved children: `node.children`, else children loaded through `loadChildren`. */
+    children: TreeNode[] | undefined;
+    /** True when the node has (or may have, for async nodes) children. */
+    isParent: boolean;
+    /** True when the node is a parent whose children still need loading. */
+    pending: boolean;
+}
+export type ChildResolver = (node: TreeNode) => TreeNode[] | undefined;
+/** @internal Indexes every reachable node (expanded or not) by id. */
+export declare function buildIndex(items: TreeNode[], resolve: ChildResolver): Map<string, NodeInfo>;
+/** @internal Ids of the nodes currently shown, in document order. */
+export declare function visibleIds(items: TreeNode[], index: Map<string, NodeInfo>, expanded: Set<string>): string[];
+/** @internal The node and all its loaded descendants. */
+export declare function subtreeIds(id: string, index: Map<string, NodeInfo>): string[];
+/** @internal Ids in a plain array of nodes, recursively. */
+export declare function collectIds(nodes: TreeNode[]): string[];
+/**
+ * @internal Checkbox state of every node. A parent with loaded children is
+ * derived from them (all checked, none, or mixed); a leaf or an unloaded
+ * parent reads its own membership in `checked`.
+ */
+export declare function computeCheckStates(items: TreeNode[], index: Map<string, NodeInfo>, checked: Set<string>): Map<string, boolean | "mixed">;
+/**
+ * @internal Adds fully checked parents to the set and removes partly checked
+ * ones, so `onSelectedChange` reports parents consistently.
+ */
+export declare function normalizeChecked(items: TreeNode[], index: Map<string, NodeInfo>, checked: Set<string>): Set<string>;
+/** @internal Text for typeahead and announcements. */
+export declare function nodeText(node: TreeNode, fallback?: string | null): string;

package/dist/components/data-display/TreeView/treeUtils.mjs

@@ -0,0 +1,54 @@
+//#region src/components/data-display/TreeView/treeUtils.ts
+function e(e, t) {
+	let n = /* @__PURE__ */ new Map(), r = (e, i, a) => {
+		e.forEach((o, s) => {
+			let c = t(o), l = c === void 0 && !!o.hasChildren;
+			n.set(o.id, {
+				node: o,
+				ordinal: n.size,
+				level: i,
+				parentId: a,
+				posinset: s + 1,
+				setsize: e.length,
+				children: c,
+				isParent: c !== void 0 && c.length > 0 || l,
+				pending: l
+			}), c && r(c, i + 1, o.id);
+		});
+	};
+	return r(e, 1, null), n;
+}
+function t(e, t, n) {
+	let r = [], i = (e) => {
+		for (let a of e) {
+			r.push(a.id);
+			let e = t.get(a.id);
+			e?.children && n.has(a.id) && i(e.children);
+		}
+	};
+	return i(e), r;
+}
+function n(e) {
+	return e.flatMap((e) => [e.id, ...n(e.children ?? [])]);
+}
+function r(e, t, n) {
+	let r = /* @__PURE__ */ new Map(), i = (e) => {
+		let a = t.get(e.id)?.children, o;
+		if (a && a.length > 0) {
+			let e = a.map(i);
+			o = e.every((e) => e === !0) ? !0 : !e.every((e) => e === !1) && "mixed";
+		} else o = n.has(e.id);
+		return r.set(e.id, o), o;
+	};
+	return e.forEach(i), r;
+}
+function i(e, t, n) {
+	let i = r(e, t, n), a = new Set(n);
+	for (let [e, t] of i) t === !0 ? a.add(e) : a.delete(e);
+	return a;
+}
+function a(e, t) {
+	return e.textValue ? e.textValue : typeof e.label == "string" || typeof e.label == "number" ? String(e.label) : (t ?? "").trim();
+}
+//#endregion
+export { e as buildIndex, n as collectIds, r as computeCheckStates, a as nodeText, i as normalizeChecked, t as visibleIds };

package/dist/components/data-display/VirtualList/VirtualList.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../hooks/useVirtualizer.cjs.js"),t=require("../../../utils/cx.cjs.js"),n=require("../../layout/ScrollArea/ScrollArea.cjs.js"),r=require("./VirtualList.module.css.cjs.js");let i=require("react"),a=require("react/jsx-runtime");function o({items:o,renderItem:s,getKey:c,estimateSize:l=48,height:u,overscan:d,gap:f,emptyState:p,"aria-label":m,"aria-labelledby":h,scrollbarSize:g,apiRef:_,className:v,itemClassName:y,style:b}){let x=(0,i.useRef)(null),{virtualItems:S,totalSize:C,measureElement:w,scrollToIndex:T}=e.useVirtualizer({count:o.length,scrollElement:x,estimateSize:l,overscan:d,gap:f});return(0,i.useImperativeHandle)(_,()=>({scrollToIndex:T}),[T]),(0,a.jsx)(n.ScrollArea,{viewportRef:x,maxHeight:u,size:g,"aria-label":m,"aria-labelledby":h,className:t.cx(r.default.root,v),style:{...b,height:u},children:o.length===0&&p!=null?(0,a.jsx)(`div`,{className:r.default.empty,children:p}):(0,a.jsx)(`div`,{role:`list`,"aria-label":m,"aria-labelledby":h,className:r.default.list,style:{blockSize:C},children:S.map(e=>{let n=o[e.index];return(0,a.jsx)(`div`,{role:`listitem`,"aria-setsize":o.length,"aria-posinset":e.index+1,"data-index":e.index,ref:w,className:t.cx(r.default.item,y),style:{transform:`translateY(${e.start}px)`},children:s(n,e.index)},c?c(n,e.index):e.index)})})})}exports.VirtualList=o;

package/dist/components/data-display/VirtualList/VirtualList.d.ts

@@ -0,0 +1,66 @@
+import { CSSProperties, ReactNode, Ref } from 'react';
+import { VirtualAlign } from '../../../hooks/useVirtualizer';
+import { ScrollAreaSize } from '../../layout/ScrollArea';
+/** Imperative controls for a `VirtualList`, through its `apiRef`. */
+export interface VirtualListApi {
+    /** Scrolls so the item at `index` is visible. `auto` scrolls only as far as needed. */
+    scrollToIndex: (index: number, options?: {
+        align?: VirtualAlign;
+        behavior?: ScrollBehavior;
+    }) => void;
+}
+export interface VirtualListProps<T> {
+    /** The items. Only the ones in view (plus `overscan`) are rendered. */
+    items: readonly T[];
+    /** Renders one item. Its height can vary; it is measured. */
+    renderItem: (item: T, index: number) => ReactNode;
+    /** Stable key for an item. @default its index */
+    getKey?: (item: T, index: number) => string | number;
+    /** Estimated item height in px (or a function of the index), used until an item is measured. @default 48 */
+    estimateSize?: number | ((index: number) => number);
+    /** Height of the scrolling area (any CSS length, or px as a number). The list needs a height to virtualize. */
+    height: CSSProperties["height"];
+    /** Extra items rendered above and below the view. @default 6 */
+    overscan?: number;
+    /** Space between items, in px. @default 0 */
+    gap?: number;
+    /** Shown instead of the list when `items` is empty. */
+    emptyState?: ReactNode;
+    /** Accessible name of the list. Also names the scrolling region. */
+    "aria-label"?: string;
+    /** Id of a visible element that names the list. */
+    "aria-labelledby"?: string;
+    /** Scrollbar thickness. @default "md" */
+    scrollbarSize?: ScrollAreaSize;
+    /** Controls for scrolling to an item. */
+    apiRef?: Ref<VirtualListApi>;
+    /** Class name for the outer scroll area. */
+    className?: string;
+    /** Class name for each item wrapper. */
+    itemClassName?: string;
+    /** Style for the outer scroll area. */
+    style?: CSSProperties;
+}
+/**
+ * A list that renders only the items in view, so tens of thousands of rows
+ * scroll smoothly. Items may have any height (they're measured as they
+ * render). Built on `useVirtualizer` and `ScrollArea`.
+ *
+ * Accessibility: a real `role="list"` whose items carry `aria-setsize` and
+ * `aria-posinset`, so screen readers announce "item 4,812 of 10,000" even
+ * though only a few dozen exist in the page. The scroll area is keyboard
+ * scrollable, and Tab through items' links and buttons keeps working (new
+ * items render as focus scrolls them into view). Browser find-in-page only
+ * sees rendered items, so offer search for long lists.
+ *
+ * ```tsx
+ * <VirtualList
+ *   aria-label="All players"
+ *   items={players}
+ *   height="24rem"
+ *   getKey={(p) => p.id}
+ *   renderItem={(p) => <PlayerRow player={p} />}
+ * />
+ * ```
+ */
+export declare function VirtualList<T>({ items, renderItem, getKey, estimateSize, height, overscan, gap, emptyState, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, scrollbarSize, apiRef, className, itemClassName, style, }: VirtualListProps<T>): import("react").JSX.Element;

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

@@ -0,0 +1,53 @@
+import { useVirtualizer as e } from "../../../hooks/useVirtualizer.mjs";
+import { cx as t } from "../../../utils/cx.mjs";
+import { ScrollArea as n } from "../../layout/ScrollArea/ScrollArea.mjs";
+import r from "./VirtualList.module.css.mjs";
+import { useImperativeHandle as i, useRef as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/components/data-display/VirtualList/VirtualList.tsx
+function s({ items: s, renderItem: c, getKey: l, estimateSize: u = 48, height: d, overscan: f, gap: p, emptyState: m, "aria-label": h, "aria-labelledby": g, scrollbarSize: _, apiRef: v, className: y, itemClassName: b, style: x }) {
+	let S = a(null), { virtualItems: C, totalSize: w, measureElement: T, scrollToIndex: E } = e({
+		count: s.length,
+		scrollElement: S,
+		estimateSize: u,
+		overscan: f,
+		gap: p
+	});
+	return i(v, () => ({ scrollToIndex: E }), [E]), /* @__PURE__ */ o(n, {
+		viewportRef: S,
+		maxHeight: d,
+		size: _,
+		"aria-label": h,
+		"aria-labelledby": g,
+		className: t(r.root, y),
+		style: {
+			...x,
+			height: d
+		},
+		children: s.length === 0 && m != null ? /* @__PURE__ */ o("div", {
+			className: r.empty,
+			children: m
+		}) : /* @__PURE__ */ o("div", {
+			role: "list",
+			"aria-label": h,
+			"aria-labelledby": g,
+			className: r.list,
+			style: { blockSize: w },
+			children: C.map((e) => {
+				let n = s[e.index];
+				return /* @__PURE__ */ o("div", {
+					role: "listitem",
+					"aria-setsize": s.length,
+					"aria-posinset": e.index + 1,
+					"data-index": e.index,
+					ref: T,
+					className: t(r.item, b),
+					style: { transform: `translateY(${e.start}px)` },
+					children: c(n, e.index)
+				}, l ? l(n, e.index) : e.index);
+			})
+		})
+	});
+}
+//#endregion
+export { s as VirtualList };

package/dist/components/data-display/VirtualList/VirtualList.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_root_boa19_7`,t=`_list_boa19_12`,n=`_item_boa19_17`,r=`_empty_boa19_24`,i={root:e,list:t,item:n,empty:r};exports.default=i,exports.empty=r,exports.item=n,exports.list=t,exports.root=e;

package/dist/components/data-display/VirtualList/VirtualList.module.css.mjs

@@ -0,0 +1,9 @@
+//#region src/components/data-display/VirtualList/VirtualList.module.css
+var e = "_root_boa19_7", t = "_list_boa19_12", n = "_item_boa19_17", r = "_empty_boa19_24", i = {
+	root: e,
+	list: t,
+	item: n,
+	empty: r
+};
+//#endregion
+export { i as default, r as empty, n as item, t as list, e as root };

package/dist/components/data-display/VirtualList/index.d.ts

@@ -0,0 +1 @@
+export * from './VirtualList';