@mortenbrudvik/waveui 0.14.1 → 0.16.0

package/dist/components/layout/Tree.core.mjs

@@ -16,21 +16,23 @@ import { joinIds as te } from "../../lib/aria.mjs";
 import { forcedColors as y } from "../../lib/styles.mjs";
 import { CheckIcon as ne, ChevronRightIcon as re, SubtractIcon as ie } from "../../lib/icons.mjs";
 import { isEditableTarget as ae, isOwnEvent as b } from "../../lib/events.mjs";
-import { TreeCheckForcedContext as x, TreeContext as oe, TreeItemContext as se, TreeLabelContext as S, TreeParentContext as C, useTreeContext as ce } from "./Tree.context.mjs";
-import { collectItems as le, computeCheckStates as w, toggleCheck as ue } from "./Tree.selection.mjs";
+import { useCollapsePresence as oe } from "../../hooks/useCollapsePresence.mjs";
+import { TreeCheckForcedContext as x, TreeContext as se, TreeItemContext as ce, TreeLabelContext as S, TreeParentContext as C, useTreeContext as le } from "./Tree.context.mjs";
+import { computeCheckStates as ue, toggleCheck as de } from "../../lib/treeCascade.mjs";
+import { collectItems as w } from "./Tree.selection.mjs";
 import * as T from "react";
 import { jsx as E, jsxs as D } from "react/jsx-runtime";
 //#region src/components/layout/Tree.core.tsx
-var de = [], fe = "Tree.Item was rendered inside the label of another Tree.Item, so it is not part of that item's child group: the parent cannot expand, its name includes the nested text, and a treeitem sits inside a label (axe aria-required-parent). A Tree.Item finds its nested items among its own children (written directly, in Fragments, or returned by a render function such as `children.map(renderNode)`), but not inside a component that renders Tree.Item itself. Build a data-driven tree with a render function instead of a recursive component.";
-function pe(e) {
+var fe = [], pe = "Tree.Item was rendered inside the label of another Tree.Item, so it is not part of that item's child group: the parent cannot expand, its name includes the nested text, and a treeitem sits inside a label (axe aria-required-parent). A Tree.Item finds its nested items among its own children (written directly, in Fragments, or returned by a render function such as `children.map(renderNode)`), but not inside a component that renders Tree.Item itself. Build a data-driven tree with a render function instead of a recursive component.";
+function me(e) {
 	i(`Tree:duplicate:${e}`, `Tree: several items share the value "${e}". Item values must be unique within a Tree; items with the same value share their expanded, selected and focus state.`);
 }
-var me = "Tree: `selected` has no effect with selectionMode=\"multiple\"; use `checkedItems`, and `current` for the item the user is on.", he = "Tree: `checkedItems` and `defaultCheckedItems` need selectionMode=\"multiple\"; without it the tree draws no checkboxes and ignores them.", ge = "Tree: selectionMode=\"single\" draws a radio on every item for `selected`; pass `selected` (null while nothing is selected) and update it from `onItemSelect`.";
+var he = "Tree: `selected` has no effect with selectionMode=\"multiple\"; use `checkedItems`, and `current` for the item the user is on.", ge = "Tree: `checkedItems` and `defaultCheckedItems` need selectionMode=\"multiple\"; without it the tree draws no checkboxes and ignores them.", _e = "Tree: selectionMode=\"single\" draws a radio on every item for `selected`; pass `selected` (null while nothing is selected) and update it from `onItemSelect`.";
 function O(e) {
 	return e ? Array.from(e, (e) => e.current).filter((e) => e !== null).sort((e, t) => !e.element || !t.element || e.element === t.element ? 0 : e.element.compareDocumentPosition(t.element) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1).map((e) => e.node) : [];
 }
-var k = "[role=\"treeitem\"]", A = "button, [href], input, select, textarea, [role=\"button\"], [tabindex]", _e = "[&:focus-within:not(:has(>[role=group]_:focus))>[data-tree-row]_[data-tree-actions]]:visible", ve = "[@media(hover:hover)]:not-forced-colors:[&:focus-within:not(:has(>[role=group]_:focus))>[data-tree-row]_[data-tree-aside]]:invisible", j = "invisible group-hover/row:visible focus-within:visible forced-colors:visible [@media(hover:none)]:visible has-[[aria-expanded=true]]:visible data-[focus-in-popup]:visible", ye = "not-forced-colors:group-hover/row:invisible [@media(hover:hover)]:not-forced-colors:group-focus-within/end:invisible [@media(hover:hover)]:not-forced-colors:group-has-[[aria-expanded=true]]/end:invisible [@media(hover:hover)]:not-forced-colors:group-has-[[data-focus-in-popup]]/end:invisible", be = "[&>*]:[grid-area:1/1] forced-colors:flex [@media(hover:none)]:flex";
-function xe(e) {
+var k = "[role=\"treeitem\"]", A = "button, [href], input, select, textarea, [role=\"button\"], [tabindex]", ve = "[&:focus-within:not(:has(>*>[role=group]_:focus))>[data-tree-row]_[data-tree-actions]]:visible", ye = "[@media(hover:hover)]:not-forced-colors:[&:focus-within:not(:has(>*>[role=group]_:focus))>[data-tree-row]_[data-tree-aside]]:invisible", j = "invisible group-hover/row:visible focus-within:visible forced-colors:visible [@media(hover:none)]:visible has-[[aria-expanded=true]]:visible data-[focus-in-popup]:visible", be = "not-forced-colors:group-hover/row:invisible [@media(hover:hover)]:not-forced-colors:group-focus-within/end:invisible [@media(hover:hover)]:not-forced-colors:group-has-[[aria-expanded=true]]/end:invisible [@media(hover:hover)]:not-forced-colors:group-has-[[data-focus-in-popup]]/end:invisible", xe = "[&>*]:[grid-area:1/1] forced-colors:flex [@media(hover:none)]:flex";
+function M(e) {
 	let t = e.querySelector(":scope > [data-tree-row] [data-tree-actions]");
 	if (!t) return !1;
 	let n = /* @__PURE__ */ new Map();
@@ -43,98 +45,100 @@ function xe(e) {
 	}
 	return !1;
 }
-var M = ({ expandedItems: t, defaultExpandedItems: n, onExpandedItemsChange: a, onItemSelect: o, selected: s, current: u, selectionMode: p = "none", navigationMode: m = "tree", checkedItems: h, defaultCheckedItems: g, onCheckedItemsChange: _, className: te, children: y, onKeyDown: ne, onKeyDownCapture: re, onFocus: ie, onBlur: ae, ref: b, ...se }) => {
-	let [ce] = T.useState(() => n ?? de), [le, w] = f(t, ce, (e) => a?.([...e])), D = T.useMemo(() => new Set(le), [le]), fe = T.useCallback((e) => {
+var N = ({ expandedItems: t, defaultExpandedItems: n, onExpandedItemsChange: a, onItemSelect: o, selected: s, current: u, selectionMode: p = "none", navigationMode: m = "tree", checkedItems: h, defaultCheckedItems: g, onCheckedItemsChange: _, motion: te, className: y, children: ne, onKeyDown: re, onKeyDownCapture: ie, onFocus: ae, onBlur: b, ref: oe, ...ce }) => {
+	let [le] = T.useState(() => n ?? fe), [ue, w] = f(t, le, (e) => a?.([...e])), D = T.useMemo(() => new Set(ue), [ue]), pe = T.useCallback((e) => {
 		w((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
 	}, [w]), A = T.useCallback((e) => {
 		w((t) => {
 			let n = e.filter((e) => !t.includes(e));
 			return n.length > 0 ? [...t, ...n] : t;
 		});
-	}, [w]), _e = d((e) => {
+	}, [w]), ve = d((e) => {
 		o?.(e);
-	}), [ve] = T.useState(() => g ?? de), j = T.useRef(void 0), [ye, be] = f(h, ve, (e) => _?.([...e], j.current)), xe = T.useMemo(() => new Set(ye), [ye]), M = T.useRef(null), Se = T.useCallback((e) => {
-		M.current ??= /* @__PURE__ */ new Set();
-		let t = M.current;
+	}), [ye] = T.useState(() => g ?? fe), j = T.useRef(void 0), [be, xe] = f(h, ye, (e) => _?.([...e], j.current)), M = T.useMemo(() => new Set(be), [be]), N = T.useRef(null), Se = T.useCallback((e) => {
+		N.current ??= /* @__PURE__ */ new Set();
+		let t = N.current;
 		return t.add(e), () => {
 			t.delete(e);
 		};
 	}, []), Ce = d((e, t) => {
-		let n = O(M.current);
-		be((r) => {
-			let i = ue(n, r, e);
+		let n = O(N.current);
+		xe((r) => {
+			let i = de(n, r, e);
 			return j.current = {
 				value: e,
 				checked: i.includes(e),
 				event: t
 			}, i;
 		}), j.current = void 0;
-	}), P = p === "multiple" ? void 0 : p === "single" ? s ?? null : s;
+	}), F = p === "multiple" ? void 0 : p === "single" ? s ?? null : s;
 	T.useEffect(() => {
-		p === "multiple" && s !== void 0 && i("Tree:selected-with-multiple", me);
+		p === "multiple" && s !== void 0 && i("Tree:selected-with-multiple", he);
 	}, [p, s]), T.useEffect(() => {
-		p === "single" && s === void 0 && i("Tree:single-without-selected", ge);
+		p === "single" && s === void 0 && i("Tree:single-without-selected", _e);
 	}, [p, s]);
-	let F = h !== void 0 || g !== void 0;
+	let I = h !== void 0 || g !== void 0;
 	T.useEffect(() => {
-		p !== "multiple" && F && i("Tree:checked-without-multiple", he);
-	}, [p, F]);
-	let [I, L] = T.useState(null), R = T.useRef(null), z = T.useCallback((e) => {
+		p !== "multiple" && I && i("Tree:checked-without-multiple", ge);
+	}, [p, I]);
+	let [L, R] = T.useState(null), z = T.useRef(null), B = T.useCallback((e) => {
 		if (!r) return () => {};
-		R.current ??= /* @__PURE__ */ new Map();
-		let t = R.current, n = (t.get(e) ?? 0) + 1;
-		return t.set(e, n), n > 1 && pe(e), () => {
+		z.current ??= /* @__PURE__ */ new Map();
+		let t = z.current, n = (t.get(e) ?? 0) + 1;
+		return t.set(e, n), n > 1 && me(e), () => {
 			let n = (t.get(e) ?? 1) - 1;
 			n > 0 ? t.set(e, n) : t.delete(e);
 		};
-	}, []), { containerProps: B, getTabIndex: V, focusValue: H } = v({
-		activeValue: I ?? P ?? null,
+	}, []), { containerProps: V, getTabIndex: H, focusValue: U } = v({
+		activeValue: L ?? F ?? null,
 		itemSelector: k,
 		orientation: "vertical",
 		loop: !1,
 		typeahead: !0
 	}), we = T.useMemo(() => ({
 		expanded: D,
-		toggle: fe,
+		toggle: pe,
 		expand: A,
-		activate: _e,
-		selected: P,
+		activate: ve,
+		selected: F,
 		current: u,
-		getTabIndex: V,
-		focusValue: H,
-		onItemFocus: L,
-		focusedItem: I,
+		getTabIndex: H,
+		focusValue: U,
+		onItemFocus: R,
+		focusedItem: L,
 		navigationMode: m,
-		registerValue: z,
+		registerValue: B,
 		selectionMode: p,
-		checked: xe,
+		checked: M,
 		toggleChecked: Ce,
-		registerTopLevel: Se
+		registerTopLevel: Se,
+		motion: te
 	}), [
 		D,
-		fe,
+		pe,
 		A,
-		_e,
-		P,
+		ve,
+		F,
 		u,
-		V,
 		H,
-		I,
+		U,
+		L,
 		m,
-		z,
+		B,
 		p,
-		xe,
+		M,
 		Ce,
-		Se
-	]), Te = ee(b, B.ref), U = (e) => {
-		e.key.length === 1 && N(e.currentTarget), B.onKeyDown(e);
+		Se,
+		te
+	]), Te = ee(oe, V.ref), W = (e) => {
+		e.key.length === 1 && P(e.currentTarget), V.onKeyDown(e);
 	}, Ee = (e) => {
-		e.key === " " && N(e.currentTarget), B.onKeyDownCapture(e);
+		e.key === " " && P(e.currentTarget), V.onKeyDownCapture(e);
 	}, De = (e) => {
 		let t = e.relatedTarget;
-		(!t || !e.currentTarget.contains(t)) && L(null);
+		(!t || !e.currentTarget.contains(t)) && R(null);
 	};
-	return /* @__PURE__ */ E(oe.Provider, {
+	return /* @__PURE__ */ E(se.Provider, {
 		value: we,
 		children: /* @__PURE__ */ E(C.Provider, {
 			value: null,
@@ -144,25 +148,25 @@ var M = ({ expandedItems: t, defaultExpandedItems: n, onExpandedItemsChange: a,
 					role: "tree",
 					"data-selection-mode": p,
 					"aria-multiselectable": p === "multiple" || void 0,
-					className: e(l.root, "text-body-1", te),
-					...se,
+					className: e(l.root, "text-body-1", y),
+					...ce,
 					"data-roving-container": "",
-					onKeyDown: c(ne, U),
-					onKeyDownCapture: c(re, Ee),
-					onFocus: c(ie, B.onFocus, { checkDefaultPrevented: !1 }),
-					onBlur: c(ae, De, { checkDefaultPrevented: !1 }),
+					onKeyDown: c(re, W),
+					onKeyDownCapture: c(ie, Ee),
+					onFocus: c(ae, V.onFocus, { checkDefaultPrevented: !1 }),
+					onBlur: c(b, De, { checkDefaultPrevented: !1 }),
 					ref: Te,
 					children: /* @__PURE__ */ E(S.Provider, {
 						value: !1,
-						children: y
+						children: ne
 					})
 				})
 			})
 		})
 	});
 };
-M.displayName = "Tree";
-function N(e) {
+N.displayName = "Tree";
+function P(e) {
 	e.querySelectorAll("[role=\"treeitem\"]").forEach((e) => {
 		let t = e.querySelector(":scope > [data-tree-row] > [data-tree-label]");
 		if (!t) return;
@@ -176,9 +180,9 @@ function Se(e) {
 }
 function Ce(e) {
 	let t = e.target;
-	return t === e.currentTarget || !t?.closest?.("[data-tree-checkbox], [data-tree-actions]") && t?.closest?.("[data-tree-row]")?.parentElement === e.currentTarget;
+	return t === e.currentTarget ? e.detail === 0 || !e.currentTarget.querySelector(":scope > [inert]") : !t?.closest?.("[data-tree-checkbox], [data-tree-actions]") && t?.closest?.("[data-tree-row]")?.parentElement === e.currentTarget;
 }
-var P = ({ labelledBy: t, tabStop: n, navigationMode: r, onReturn: i, children: a }) => {
+var F = ({ labelledBy: t, tabStop: n, navigationMode: r, onReturn: i, children: a }) => {
 	let o = r === "treegrid", { containerProps: { ref: s }, handleKeyDown: c, handleFocus: l } = v({
 		itemSelector: A,
 		manageTabIndex: !0,
@@ -223,58 +227,62 @@ var P = ({ labelledBy: t, tabStop: n, navigationMode: r, onReturn: i, children:
 		children: a
 	});
 };
-P.displayName = "TreeItemActions";
-var F = ({ value: r, icon: l, iconAfter: d, expandIcon: f, aside: g, actions: _, leaf: v = !1, className: ae, children: b, onClick: oe, onKeyDown: ue, onFocus: de, onBlur: pe, ref: me, ...he }) => {
-	let { "data-roving-text": ge, ...O } = he, k = ce("Tree.Item"), A = T.useContext(C), j = T.useContext(S), N = k.expanded.has(r), I = p("tree-item-label"), L = p("tree-item-aside"), R = T.useContext(x), z = T.useRef(null), B = ee(me, z), [V, H] = T.useState(null), we = T.useCallback((e) => (H(e), () => H((t) => t === e ? null : t)), []), Te = T.useMemo(() => ({ registerLayout: we }), [we]), U = V?.nameId ?? I, { registerValue: Ee, registerTopLevel: De } = k;
+F.displayName = "TreeItemActions";
+var I = ({ value: r, icon: l, iconAfter: d, expandIcon: f, aside: g, actions: _, leaf: v = !1, className: ae, children: b, onClick: se, onKeyDown: de, onFocus: fe, onBlur: me, ref: he, ...ge }) => {
+	let { "data-roving-text": _e, ...O } = ge, k = le("Tree.Item"), A = T.useContext(C), j = T.useContext(S), P = k.expanded.has(r), L = p("tree-item-label"), R = p("tree-item-aside"), z = T.useContext(x), B = T.useRef(null), V = ee(he, B), [H, U] = T.useState(null), we = T.useCallback((e) => (U(e), () => U((t) => t === e ? null : t)), []), Te = T.useMemo(() => ({ registerLayout: we }), [we]), W = H?.nameId ?? L, { registerValue: Ee, registerTopLevel: De } = k;
 	T.useEffect(() => Ee(r), [Ee, r]), T.useEffect(() => {
-		j && i("Tree.Item:inside-label", fe);
+		j && i("Tree.Item:inside-label", pe);
 	}, [j]);
-	let W = [], Oe = [], ke;
+	let G = [], Oe = [], ke;
 	t(b).forEach(({ key: e, node: t }) => {
 		let r = /* @__PURE__ */ E(T.Fragment, { children: t }, e);
-		n(t, F) ? (ke ??= t.props.value, W.push(r)) : n(t, M) ? W.push(r) : Oe.push(r);
+		n(t, I) ? (ke ??= t.props.value, G.push(r)) : n(t, N) ? G.push(r) : Oe.push(r);
 	});
-	let Ae = l && s(l) ? o(l, "span", e(u.icon, "inline-flex shrink-0"), { "aria-hidden": !0 }) : null, je = d && s(d) ? o(d, "span", e(u.iconAfter, "inline-flex shrink-0"), { "aria-hidden": !0 }) : null, G = s(g), K = s(_), q = W.length > 0 && !v, Me = /* @__PURE__ */ E("span", {
+	let Ae = l && s(l) ? o(l, "span", e(u.icon, "inline-flex shrink-0"), { "aria-hidden": !0 }) : null, je = d && s(d) ? o(d, "span", e(u.iconAfter, "inline-flex shrink-0"), { "aria-hidden": !0 }) : null, K = s(g), q = s(_), J = G.length > 0 && !v, Me = T.useRef(null), { isMounted: Ne, wrapperRef: Pe, presenceProps: Fe, className: Ie } = oe(J && P, {
+		motion: k.motion,
+		partRef: Me,
+		getTrigger: () => B.current
+	}), Le = /* @__PURE__ */ E("span", {
 		className: "w-3 shrink-0",
 		"aria-hidden": "true"
 	});
-	q && f == null ? Me = /* @__PURE__ */ E(re, { className: e(u.expandIcon, "shrink-0 transition-transform motion-reduce:transition-none", N ? "rotate-90" : "wave-rtl:-scale-x-100") }) : q && s(f) && (Me = o(f, "span", e(u.expandIcon, "inline-flex shrink-0"), { "aria-hidden": !0 }));
-	let J = k.selectionMode === "multiple", Y = T.useMemo(() => J ? {
+	J && f == null ? Le = /* @__PURE__ */ E(re, { className: e(u.expandIcon, "shrink-0 transition-transform motion-reduce:transition-none", P ? "rotate-90" : "wave-rtl:-scale-x-100") }) : J && s(f) && (Le = o(f, "span", e(u.expandIcon, "inline-flex shrink-0"), { "aria-hidden": !0 }));
+	let Y = k.selectionMode === "multiple", X = T.useMemo(() => Y ? {
 		value: r,
-		children: v ? [] : le(b, {
-			item: F,
-			tree: M
+		children: v ? [] : w(b, {
+			item: I,
+			tree: N
 		})
 	} : null, [
-		J,
+		Y,
 		r,
 		v,
 		b
-	]), X = Y ? w([Y], k.checked, R).get(r) : void 0, Ne = T.useRef(null);
+	]), Z = X ? ue([X], k.checked, z).get(r) : void 0, Re = T.useRef(null);
 	T.useLayoutEffect(() => {
-		Ne.current = Y ? {
-			node: Y,
-			element: z.current
+		Re.current = X ? {
+			node: X,
+			element: B.current
 		} : null;
 	});
-	let Pe = A === null && !j;
-	T.useLayoutEffect(() => J && Pe ? De(Ne) : void 0, [
-		J,
-		Pe,
+	let ze = A === null && !j;
+	T.useLayoutEffect(() => Y && ze ? De(Re) : void 0, [
+		Y,
+		ze,
 		De
 	]);
-	let Z = k.selected === void 0 ? void 0 : k.selected === r, Fe = k.current !== void 0 && k.current !== null && k.current === r, Q = () => {
-		q && k.toggle(r), k.activate(r);
-	}, Ie = (e) => {
-		Ce(e) && (oe?.(e), e.defaultPrevented || Q());
-	}, Le = (e) => {
-		if (!Se(e) || (ue?.(e), e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey)) return;
+	let Q = k.selected === void 0 ? void 0 : k.selected === r, Be = k.current !== void 0 && k.current !== null && k.current === r, Ve = () => {
+		J && k.toggle(r), k.activate(r);
+	}, He = (e) => {
+		Ce(e) && (se?.(e), e.defaultPrevented || Ve());
+	}, Ue = (e) => {
+		if (!Se(e) || (de?.(e), e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey)) return;
 		switch (e.key) {
 			case "Enter":
-				e.preventDefault(), Q();
+				e.preventDefault(), Ve();
 				return;
 			case " ":
-				e.preventDefault(), X === void 0 ? Q() : k.toggleChecked(r, e.nativeEvent);
+				e.preventDefault(), Z === void 0 ? Ve() : k.toggleChecked(r, e.nativeEvent);
 				return;
 			case "*": {
 				e.preventDefault();
@@ -288,87 +296,87 @@ var F = ({ value: r, icon: l, iconAfter: d, expandIcon: f, aside: g, actions: _,
 			dir: h(e.currentTarget)
 		});
 		if (t === "next") {
-			if (e.preventDefault(), q && !N) {
+			if (e.preventDefault(), J && !P) {
 				k.toggle(r);
 				return;
 			}
-			if (k.navigationMode === "treegrid" && xe(e.currentTarget)) return;
-			q && ke !== void 0 && k.focusValue(ke);
-		} else t === "prev" && (e.preventDefault(), q && N ? k.toggle(r) : A !== null && k.focusValue(A));
-	}, $ = T.useRef(null), Re = (e) => e.target.closest("[data-tree-actions]")?.closest("[role=\"treeitem\"]") === e.currentTarget, ze = (e) => {
-		(e.target === e.currentTarget || Re(e)) && k.onItemFocus(r), Re(e) && ($.current = e.target);
-	}, Be = (e) => {
-		Re(e) && (e.relatedTarget !== null || e.target.isConnected) && ($.current = null);
+			if (k.navigationMode === "treegrid" && M(e.currentTarget)) return;
+			J && ke !== void 0 && k.focusValue(ke);
+		} else t === "prev" && (e.preventDefault(), J && P ? k.toggle(r) : A !== null && k.focusValue(A));
+	}, $ = T.useRef(null), We = (e) => e.target.closest("[data-tree-actions]")?.closest("[role=\"treeitem\"]") === e.currentTarget, Ge = (e) => {
+		(e.target === e.currentTarget || We(e)) && k.onItemFocus(r), We(e) && ($.current = e.target);
+	}, Ke = (e) => {
+		We(e) && (e.relatedTarget !== null || e.target.isConnected) && ($.current = null);
 	};
 	T.useLayoutEffect(() => {
 		let e = $.current;
 		if (!e) return;
-		let t = z.current, n = t?.ownerDocument.activeElement;
+		let t = B.current, n = t?.ownerDocument.activeElement;
 		n && n !== t.ownerDocument.body ? $.current = null : t && !e.isConnected && ($.current = null, t.focus({ preventScroll: !0 }));
 	});
-	let Ve = X === void 0 ? null : /* @__PURE__ */ E("span", {
+	let qe = Z === void 0 ? null : /* @__PURE__ */ E("span", {
 		role: "checkbox",
-		"aria-checked": X === "mixed" ? "mixed" : X === "checked",
-		"aria-labelledby": U,
+		"aria-checked": Z === "mixed" ? "mixed" : Z === "checked",
+		"aria-labelledby": W,
 		tabIndex: -1,
 		"data-tree-checkbox": "",
 		onMouseDown: (e) => {
-			e.preventDefault(), z.current?.focus({ preventScroll: !0 });
+			e.preventDefault(), B.current?.focus({ preventScroll: !0 });
 		},
 		onClick: (e) => {
 			k.toggleChecked(r, e.nativeEvent);
 		},
-		className: e(u.indicator, "relative inline-flex size-4 shrink-0 items-center justify-center rounded-xs border transition-colors motion-reduce:transition-none", "before:absolute before:-inset-1", X === "unchecked" ? e("border-stroke-accessible bg-transparent", y.control) : "border-primary bg-primary text-primary-foreground forced-colors:border-[Highlight] forced-colors:bg-[Highlight]"),
-		children: X === "mixed" ? /* @__PURE__ */ E(ie, {
+		className: e(u.indicator, "relative inline-flex size-4 shrink-0 items-center justify-center rounded-xs border transition-colors motion-reduce:transition-none", "before:absolute before:-inset-1", Z === "unchecked" ? e("border-stroke-accessible bg-transparent", y.control) : "border-primary bg-primary text-primary-foreground forced-colors:border-[Highlight] forced-colors:bg-[Highlight]"),
+		children: Z === "mixed" ? /* @__PURE__ */ E(ie, {
 			size: 12,
 			className: y.selectedLeaf
-		}) : X === "checked" ? /* @__PURE__ */ E(ne, {
+		}) : Z === "checked" ? /* @__PURE__ */ E(ne, {
 			size: 12,
 			className: y.selectedLeaf
 		}) : null
-	}), He = k.selectionMode === "single" ? /* @__PURE__ */ E("span", {
+	}), Je = k.selectionMode === "single" ? /* @__PURE__ */ E("span", {
 		"aria-hidden": "true",
-		className: e(u.indicator, "inline-flex size-4 shrink-0 items-center justify-center rounded-full border transition-colors motion-reduce:transition-none", Z ? "border-2 border-primary forced-colors:border-[Highlight]" : e("border-stroke-accessible", y.control)),
-		children: Z && /* @__PURE__ */ E("span", { className: e("block size-2 rounded-full bg-primary", y.selectedLeaf) })
-	}) : null, Ue = Ve ?? He, We = R || J && k.checked.has(r);
+		className: e(u.indicator, "inline-flex size-4 shrink-0 items-center justify-center rounded-full border transition-colors motion-reduce:transition-none", Q ? "border-2 border-primary forced-colors:border-[Highlight]" : e("border-stroke-accessible", y.control)),
+		children: Q && /* @__PURE__ */ E("span", { className: e("block size-2 rounded-full bg-primary", y.selectedLeaf) })
+	}) : null, Ye = qe ?? Je, Xe = z || Y && k.checked.has(r);
 	return /* @__PURE__ */ D("div", {
 		role: "treeitem",
-		"aria-selected": Z,
-		"aria-current": Fe ? !0 : void 0,
-		"data-checked": X === "checked" ? "" : void 0,
-		"data-mixed": X === "mixed" ? "" : void 0,
-		className: e(u.root, "block outline-none", "[&:focus-visible>[data-tree-row]]:outline-2 [&:focus-visible>[data-tree-row]]:-outline-offset-2 [&:focus-visible>[data-tree-row]]:outline-ring", K && _e, K && G && ve, ae),
+		"aria-selected": Q,
+		"aria-current": Be ? !0 : void 0,
+		"data-checked": Z === "checked" ? "" : void 0,
+		"data-mixed": Z === "mixed" ? "" : void 0,
+		className: e(u.root, "block outline-none", "[&:focus-visible>[data-tree-row]]:outline-2 [&:focus-visible>[data-tree-row]]:-outline-offset-2 [&:focus-visible>[data-tree-row]]:outline-ring", q && ve, q && K && ye, ae),
 		...O,
-		"aria-labelledby": O["aria-labelledby"] ?? (O["aria-label"] === void 0 ? U : void 0),
-		"aria-describedby": te(O["aria-describedby"], G ? L : void 0, V?.descriptionId),
-		"aria-expanded": q ? N : void 0,
-		"aria-checked": X === void 0 ? void 0 : X === "mixed" ? "mixed" : X === "checked",
+		"aria-labelledby": O["aria-labelledby"] ?? (O["aria-label"] === void 0 ? W : void 0),
+		"aria-describedby": te(O["aria-describedby"], K ? R : void 0, H?.descriptionId),
+		"aria-expanded": J ? P : void 0,
+		"aria-checked": Z === void 0 ? void 0 : Z === "mixed" ? "mixed" : Z === "checked",
 		tabIndex: k.getTabIndex(r),
 		"data-roving-value": r,
-		"data-selected": Z ? "" : void 0,
-		"data-current": Fe ? "" : void 0,
-		onClick: Ie,
-		onKeyDown: Le,
-		onFocus: (e) => c(de, ze, { checkDefaultPrevented: !1 })(e),
-		onBlur: (e) => c(pe, Be, { checkDefaultPrevented: !1 })(e),
-		ref: B,
+		"data-selected": Q ? "" : void 0,
+		"data-current": Be ? "" : void 0,
+		onClick: He,
+		onKeyDown: Ue,
+		onFocus: (e) => c(fe, Ge, { checkDefaultPrevented: !1 })(e),
+		onBlur: (e) => c(me, Ke, { checkDefaultPrevented: !1 })(e),
+		ref: V,
 		children: [/* @__PURE__ */ D("div", {
 			"data-tree-row": "",
-			className: e(u.row, "flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 hover:bg-subtle-hover", K && "group/row", Z && e("bg-subtle-selected font-semibold", y.selectedContainer)),
+			className: e(u.row, "flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 hover:bg-subtle-hover", q && "group/row", Q && e("bg-subtle-selected font-semibold", y.selectedContainer)),
 			children: [
-				Me,
-				Ue,
+				Le,
+				Ye,
 				Ae,
 				/* @__PURE__ */ E("span", {
-					id: I,
+					id: L,
 					"data-tree-label": "",
-					"data-roving-text": ge,
-					className: e(u.label, "truncate", (je || G || K) && "min-w-0"),
+					"data-roving-text": _e,
+					className: e(u.label, "truncate", (je || K || q) && "min-w-0"),
 					children: /* @__PURE__ */ E(x.Provider, {
 						value: !1,
 						children: /* @__PURE__ */ E(S.Provider, {
 							value: !0,
-							children: /* @__PURE__ */ E(se.Provider, {
+							children: /* @__PURE__ */ E(ce.Provider, {
 								value: Te,
 								children: Oe
 							})
@@ -376,16 +384,16 @@ var F = ({ value: r, icon: l, iconAfter: d, expandIcon: f, aside: g, actions: _,
 					})
 				}),
 				je,
-				(G || K) && /* @__PURE__ */ D("span", {
+				(K || q) && /* @__PURE__ */ D("span", {
 					"data-tree-end": "",
-					className: e("group/end ms-auto inline-grid shrink-0 items-center gap-1", G && K && be),
-					children: [G && /* @__PURE__ */ E("span", {
-						id: L,
+					className: e("group/end ms-auto inline-grid shrink-0 items-center gap-1", K && q && xe),
+					children: [K && /* @__PURE__ */ E("span", {
+						id: R,
 						"data-tree-aside": "",
-						className: e(u.aside, "inline-flex items-center text-caption-1 text-muted-foreground", K && ye),
+						className: e(u.aside, "inline-flex items-center text-caption-1 text-muted-foreground", q && be),
 						children: a(g)
-					}), K && /* @__PURE__ */ E(P, {
-						labelledBy: U,
+					}), q && /* @__PURE__ */ E(F, {
+						labelledBy: W,
 						tabStop: k.navigationMode === "tree" && k.focusedItem === r ? "last-focused" : "none",
 						navigationMode: k.navigationMode,
 						onReturn: () => k.focusValue(r),
@@ -393,24 +401,30 @@ var F = ({ value: r, icon: l, iconAfter: d, expandIcon: f, aside: g, actions: _,
 					})]
 				})
 			]
-		}), q && N && /* @__PURE__ */ E(C.Provider, {
+		}), Ne && /* @__PURE__ */ E(C.Provider, {
 			value: r,
 			children: /* @__PURE__ */ E(x.Provider, {
-				value: We,
+				value: Xe,
 				children: /* @__PURE__ */ E(S.Provider, {
 					value: !1,
 					children: /* @__PURE__ */ E("div", {
-						role: "group",
-						className: e(u.group, "ps-4"),
-						children: W
+						ref: Pe,
+						...Fe,
+						className: e(u.collapse, Ie),
+						children: /* @__PURE__ */ E("div", {
+							ref: Me,
+							role: "group",
+							className: e(u.group, "ps-4"),
+							children: G
+						})
 					})
 				})
 			})
 		})]
 	});
 };
-F.displayName = "TreeItem";
+I.displayName = "TreeItem";
 //#endregion
-export { F as TreeItem, M as TreeRoot };
+export { I as TreeItem, N as TreeRoot };
 
 //# sourceMappingURL=Tree.core.mjs.map