@mortenbrudvik/waveui 0.14.0 → 0.15.0

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

@@ -16,25 +16,26 @@ 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 * as T from "react";
-import { jsx as E, jsxs as D } from "react/jsx-runtime";
+import { useCollapsePresence as oe } from "../../hooks/useCollapsePresence.mjs";
+import { TreeCheckForcedContext as x, TreeContext as se, TreeItemContext as ce, TreeLabelContext as S, TreeParentContext as le, useTreeContext as ue } from "./Tree.context.mjs";
+import { collectItems as de, computeCheckStates as C, toggleCheck as fe } from "./Tree.selection.mjs";
+import * as w from "react";
+import { jsx as T, jsxs as E } 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 pe = [], me = "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 he(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`.";
-function O(e) {
+var ge = "Tree: `selected` has no effect with selectionMode=\"multiple\"; use `checkedItems`, and `current` for the item the user is on.", _e = "Tree: `checkedItems` and `defaultCheckedItems` need selectionMode=\"multiple\"; without it the tree draws no checkboxes and ignores them.", ve = "Tree: selectionMode=\"single\" draws a radio on every item for `selected`; pass `selected` (null while nothing is selected) and update it from `onItemSelect`.";
+function D(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 O = "[role=\"treeitem\"]", k = "button, [href], input, select, textarea, [role=\"button\"], [tabindex]", ye = "[&:focus-within:not(:has(>*>[role=group]_:focus))>[data-tree-row]_[data-tree-actions]]:visible", be = "[@media(hover:hover)]:not-forced-colors:[&:focus-within:not(:has(>*>[role=group]_:focus))>[data-tree-row]_[data-tree-aside]]:invisible", A = "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", xe = "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", Se = "[&>*]:[grid-area:1/1] forced-colors:flex [@media(hover:none)]:flex";
+function j(e) {
 	let t = e.querySelector(":scope > [data-tree-row] [data-tree-actions]");
 	if (!t) return !1;
 	let n = /* @__PURE__ */ new Map();
-	for (let e of Array.from(t.querySelectorAll(A))) {
+	for (let e of Array.from(t.querySelectorAll(k))) {
 		if (g(e) || e.matches(":disabled")) continue;
 		let r = e.closest("[hidden], [inert]");
 		if (r && t.contains(r)) continue;
@@ -43,61 +44,61 @@ 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) => {
-		w((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
-	}, [w]), A = T.useCallback((e) => {
-		w((t) => {
+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: _, motion: te, className: y, children: ne, onKeyDown: re, onKeyDownCapture: ie, onFocus: ae, onBlur: b, ref: oe, ...ce }) => {
+	let [ue] = w.useState(() => n ?? pe), [de, C] = f(t, ue, (e) => a?.([...e])), E = w.useMemo(() => new Set(de), [de]), me = w.useCallback((e) => {
+		C((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
+	}, [C]), k = w.useCallback((e) => {
+		C((t) => {
 			let n = e.filter((e) => !t.includes(e));
 			return n.length > 0 ? [...t, ...n] : t;
 		});
-	}, [w]), _e = d((e) => {
+	}, [C]), ye = 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) => {
+	}), [be] = w.useState(() => g ?? pe), A = w.useRef(void 0), [xe, Se] = f(h, be, (e) => _?.([...e], A.current)), j = w.useMemo(() => new Set(xe), [xe]), M = w.useRef(null), Ce = w.useCallback((e) => {
 		M.current ??= /* @__PURE__ */ new Set();
 		let t = M.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);
-			return j.current = {
+	}, []), we = d((e, t) => {
+		let n = D(M.current);
+		Se((r) => {
+			let i = fe(n, r, e);
+			return A.current = {
 				value: e,
 				checked: i.includes(e),
 				event: t
 			}, i;
-		}), j.current = void 0;
+		}), A.current = void 0;
 	}), P = p === "multiple" ? void 0 : p === "single" ? s ?? null : s;
-	T.useEffect(() => {
-		p === "multiple" && s !== void 0 && i("Tree:selected-with-multiple", me);
-	}, [p, s]), T.useEffect(() => {
-		p === "single" && s === void 0 && i("Tree:single-without-selected", ge);
+	w.useEffect(() => {
+		p === "multiple" && s !== void 0 && i("Tree:selected-with-multiple", ge);
+	}, [p, s]), w.useEffect(() => {
+		p === "single" && s === void 0 && i("Tree:single-without-selected", ve);
 	}, [p, s]);
 	let F = h !== void 0 || g !== void 0;
-	T.useEffect(() => {
-		p !== "multiple" && F && i("Tree:checked-without-multiple", he);
+	w.useEffect(() => {
+		p !== "multiple" && F && i("Tree:checked-without-multiple", _e);
 	}, [p, F]);
-	let [I, L] = T.useState(null), R = T.useRef(null), z = T.useCallback((e) => {
+	let [I, L] = w.useState(null), R = w.useRef(null), z = w.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), () => {
+		return t.set(e, n), n > 1 && he(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,
-		itemSelector: k,
+		itemSelector: O,
 		orientation: "vertical",
 		loop: !1,
 		typeahead: !0
-	}), we = T.useMemo(() => ({
-		expanded: D,
-		toggle: fe,
-		expand: A,
-		activate: _e,
+	}), U = w.useMemo(() => ({
+		expanded: E,
+		toggle: me,
+		expand: k,
+		activate: ye,
 		selected: P,
 		current: u,
 		getTabIndex: V,
@@ -107,14 +108,15 @@ var M = ({ expandedItems: t, defaultExpandedItems: n, onExpandedItemsChange: a,
 		navigationMode: m,
 		registerValue: z,
 		selectionMode: p,
-		checked: xe,
-		toggleChecked: Ce,
-		registerTopLevel: Se
+		checked: j,
+		toggleChecked: we,
+		registerTopLevel: Ce,
+		motion: te
 	}), [
-		D,
-		fe,
-		A,
-		_e,
+		E,
+		me,
+		k,
+		ye,
 		P,
 		u,
 		V,
@@ -123,10 +125,11 @@ var M = ({ expandedItems: t, defaultExpandedItems: n, onExpandedItemsChange: a,
 		m,
 		z,
 		p,
-		xe,
+		j,
+		we,
 		Ce,
-		Se
-	]), Te = ee(b, B.ref), U = (e) => {
+		te
+	]), Te = ee(oe, B.ref), W = (e) => {
 		e.key.length === 1 && N(e.currentTarget), B.onKeyDown(e);
 	}, Ee = (e) => {
 		e.key === " " && N(e.currentTarget), B.onKeyDownCapture(e);
@@ -134,27 +137,27 @@ var M = ({ expandedItems: t, defaultExpandedItems: n, onExpandedItemsChange: a,
 		let t = e.relatedTarget;
 		(!t || !e.currentTarget.contains(t)) && L(null);
 	};
-	return /* @__PURE__ */ E(oe.Provider, {
-		value: we,
-		children: /* @__PURE__ */ E(C.Provider, {
+	return /* @__PURE__ */ T(se.Provider, {
+		value: U,
+		children: /* @__PURE__ */ T(le.Provider, {
 			value: null,
-			children: /* @__PURE__ */ E(x.Provider, {
+			children: /* @__PURE__ */ T(x.Provider, {
 				value: !1,
-				children: /* @__PURE__ */ E("div", {
+				children: /* @__PURE__ */ T("div", {
 					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, B.onFocus, { checkDefaultPrevented: !1 }),
+					onBlur: c(b, De, { checkDefaultPrevented: !1 }),
 					ref: Te,
-					children: /* @__PURE__ */ E(S.Provider, {
+					children: /* @__PURE__ */ T(S.Provider, {
 						value: !1,
-						children: y
+						children: ne
 					})
 				})
 			})
@@ -170,23 +173,23 @@ function N(e) {
 		e.getAttribute("data-roving-text") !== r && e.setAttribute("data-roving-text", r);
 	});
 }
-function Se(e) {
+function Ce(e) {
 	let t = e.target;
 	return !t?.closest?.("[data-tree-actions]") && t?.closest?.("[role=\"treeitem\"]") === e.currentTarget;
 }
-function Ce(e) {
+function we(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 }) => {
 	let o = r === "treegrid", { containerProps: { ref: s }, handleKeyDown: c, handleFocus: l } = v({
-		itemSelector: A,
+		itemSelector: k,
 		manageTabIndex: !0,
 		orientation: "horizontal",
 		loop: !o,
 		tabStop: n
-	}), [d, f] = T.useState(null);
-	T.useEffect(() => {
+	}), [d, f] = w.useState(null);
+	w.useEffect(() => {
 		if (d !== "leaving") return;
 		let e = requestAnimationFrame(() => f(null));
 		return () => cancelAnimationFrame(e);
@@ -205,7 +208,7 @@ var P = ({ labelledBy: t, tabStop: n, navigationMode: r, onReturn: i, children:
 			dir: h(e.currentTarget)
 		}) === "prev";
 	};
-	return /* @__PURE__ */ E("span", {
+	return /* @__PURE__ */ T("span", {
 		role: "toolbar",
 		"aria-labelledby": t,
 		"aria-orientation": "horizontal",
@@ -219,67 +222,71 @@ var P = ({ labelledBy: t, tabStop: n, navigationMode: r, onReturn: i, children:
 		},
 		onFocus: p,
 		onBlur: g,
-		className: e(u.actions, "inline-flex items-center gap-1", j),
+		className: e(u.actions, "inline-flex items-center gap-1", A),
 		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;
-	T.useEffect(() => Ee(r), [Ee, r]), T.useEffect(() => {
-		j && i("Tree.Item:inside-label", fe);
-	}, [j]);
-	let W = [], Oe = [], ke;
+var F = ({ value: r, icon: l, iconAfter: d, expandIcon: f, aside: g, actions: _, leaf: v = !1, className: ae, children: b, onClick: se, onKeyDown: fe, onFocus: pe, onBlur: he, ref: ge, ..._e }) => {
+	let { "data-roving-text": ve, ...D } = _e, O = ue("Tree.Item"), k = w.useContext(le), A = w.useContext(S), N = O.expanded.has(r), I = p("tree-item-label"), L = p("tree-item-aside"), R = w.useContext(x), z = w.useRef(null), B = ee(ge, z), [V, H] = w.useState(null), U = w.useCallback((e) => (H(e), () => H((t) => t === e ? null : t)), []), Te = w.useMemo(() => ({ registerLayout: U }), [U]), W = V?.nameId ?? I, { registerValue: Ee, registerTopLevel: De } = O;
+	w.useEffect(() => Ee(r), [Ee, r]), w.useEffect(() => {
+		A && i("Tree.Item:inside-label", me);
+	}, [A]);
+	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);
+		let r = /* @__PURE__ */ T(w.Fragment, { children: t }, e);
+		n(t, F) ? (ke ??= t.props.value, G.push(r)) : n(t, M) ? 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 = w.useRef(null), { isMounted: Ne, wrapperRef: Pe, presenceProps: Fe, className: Ie } = oe(J && N, {
+		motion: O.motion,
+		partRef: Me,
+		getTrigger: () => z.current
+	}), Le = /* @__PURE__ */ T("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__ */ T(re, { className: e(u.expandIcon, "shrink-0 transition-transform motion-reduce:transition-none", N ? "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 = O.selectionMode === "multiple", X = w.useMemo(() => Y ? {
 		value: r,
-		children: v ? [] : le(b, {
+		children: v ? [] : de(b, {
 			item: F,
 			tree: M
 		})
 	} : null, [
-		J,
+		Y,
 		r,
 		v,
 		b
-	]), X = Y ? w([Y], k.checked, R).get(r) : void 0, Ne = T.useRef(null);
-	T.useLayoutEffect(() => {
-		Ne.current = Y ? {
-			node: Y,
+	]), Z = X ? C([X], O.checked, R).get(r) : void 0, Re = w.useRef(null);
+	w.useLayoutEffect(() => {
+		Re.current = X ? {
+			node: X,
 			element: z.current
 		} : null;
 	});
-	let Pe = A === null && !j;
-	T.useLayoutEffect(() => J && Pe ? De(Ne) : void 0, [
-		J,
-		Pe,
+	let ze = k === null && !A;
+	w.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 = O.selected === void 0 ? void 0 : O.selected === r, Be = O.current !== void 0 && O.current !== null && O.current === r, Ve = () => {
+		J && O.toggle(r), O.activate(r);
+	}, He = (e) => {
+		we(e) && (se?.(e), e.defaultPrevented || Ve());
+	}, Ue = (e) => {
+		if (!Ce(e) || (fe?.(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() : O.toggleChecked(r, e.nativeEvent);
 				return;
 			case "*": {
 				e.preventDefault();
 				let t = e.currentTarget.parentElement?.querySelectorAll(":scope > [role=\"treeitem\"][aria-expanded=\"false\"][data-roving-value]");
-				k.expand(Array.from(t ?? [], (e) => e.getAttribute("data-roving-value") ?? "").filter(Boolean));
+				O.expand(Array.from(t ?? [], (e) => e.getAttribute("data-roving-value") ?? "").filter(Boolean));
 				return;
 			}
 		}
@@ -288,87 +295,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) {
-				k.toggle(r);
+			if (e.preventDefault(), J && !N) {
+				O.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 (O.navigationMode === "treegrid" && j(e.currentTarget)) return;
+			J && ke !== void 0 && O.focusValue(ke);
+		} else t === "prev" && (e.preventDefault(), J && N ? O.toggle(r) : k !== null && O.focusValue(k));
+	}, $ = w.useRef(null), We = (e) => e.target.closest("[data-tree-actions]")?.closest("[role=\"treeitem\"]") === e.currentTarget, Ge = (e) => {
+		(e.target === e.currentTarget || We(e)) && O.onItemFocus(r), We(e) && ($.current = e.target);
+	}, Ke = (e) => {
+		We(e) && (e.relatedTarget !== null || e.target.isConnected) && ($.current = null);
 	};
-	T.useLayoutEffect(() => {
+	w.useLayoutEffect(() => {
 		let e = $.current;
 		if (!e) return;
 		let t = z.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__ */ T("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 });
 		},
 		onClick: (e) => {
-			k.toggleChecked(r, e.nativeEvent);
+			O.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__ */ T(ie, {
 			size: 12,
 			className: y.selectedLeaf
-		}) : X === "checked" ? /* @__PURE__ */ E(ne, {
+		}) : Z === "checked" ? /* @__PURE__ */ T(ne, {
 			size: 12,
 			className: y.selectedLeaf
 		}) : null
-	}), He = k.selectionMode === "single" ? /* @__PURE__ */ E("span", {
+	}), Je = O.selectionMode === "single" ? /* @__PURE__ */ T("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);
-	return /* @__PURE__ */ D("div", {
+		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__ */ T("span", { className: e("block size-2 rounded-full bg-primary", y.selectedLeaf) })
+	}) : null, Ye = qe ?? Je, Xe = R || Y && O.checked.has(r);
+	return /* @__PURE__ */ E("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),
-		...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",
-		tabIndex: k.getTabIndex(r),
+		"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 && ye, q && K && be, ae),
+		...D,
+		"aria-labelledby": D["aria-labelledby"] ?? (D["aria-label"] === void 0 ? W : void 0),
+		"aria-describedby": te(D["aria-describedby"], K ? L : void 0, V?.descriptionId),
+		"aria-expanded": J ? N : void 0,
+		"aria-checked": Z === void 0 ? void 0 : Z === "mixed" ? "mixed" : Z === "checked",
+		tabIndex: O.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),
+		"data-selected": Q ? "" : void 0,
+		"data-current": Be ? "" : void 0,
+		onClick: He,
+		onKeyDown: Ue,
+		onFocus: (e) => c(pe, Ge, { checkDefaultPrevented: !1 })(e),
+		onBlur: (e) => c(he, Ke, { checkDefaultPrevented: !1 })(e),
 		ref: B,
-		children: [/* @__PURE__ */ D("div", {
+		children: [/* @__PURE__ */ E("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", {
+				/* @__PURE__ */ T("span", {
 					id: I,
 					"data-tree-label": "",
-					"data-roving-text": ge,
-					className: e(u.label, "truncate", (je || G || K) && "min-w-0"),
-					children: /* @__PURE__ */ E(x.Provider, {
+					"data-roving-text": ve,
+					className: e(u.label, "truncate", (je || K || q) && "min-w-0"),
+					children: /* @__PURE__ */ T(x.Provider, {
 						value: !1,
-						children: /* @__PURE__ */ E(S.Provider, {
+						children: /* @__PURE__ */ T(S.Provider, {
 							value: !0,
-							children: /* @__PURE__ */ E(se.Provider, {
+							children: /* @__PURE__ */ T(ce.Provider, {
 								value: Te,
 								children: Oe
 							})
@@ -376,33 +383,39 @@ var F = ({ value: r, icon: l, iconAfter: d, expandIcon: f, aside: g, actions: _,
 					})
 				}),
 				je,
-				(G || K) && /* @__PURE__ */ D("span", {
+				(K || q) && /* @__PURE__ */ E("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", {
+					className: e("group/end ms-auto inline-grid shrink-0 items-center gap-1", K && q && Se),
+					children: [K && /* @__PURE__ */ T("span", {
 						id: L,
 						"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 && xe),
 						children: a(g)
-					}), K && /* @__PURE__ */ E(P, {
-						labelledBy: U,
-						tabStop: k.navigationMode === "tree" && k.focusedItem === r ? "last-focused" : "none",
-						navigationMode: k.navigationMode,
-						onReturn: () => k.focusValue(r),
+					}), q && /* @__PURE__ */ T(P, {
+						labelledBy: W,
+						tabStop: O.navigationMode === "tree" && O.focusedItem === r ? "last-focused" : "none",
+						navigationMode: O.navigationMode,
+						onReturn: () => O.focusValue(r),
 						children: a(_)
 					})]
 				})
 			]
-		}), q && N && /* @__PURE__ */ E(C.Provider, {
+		}), Ne && /* @__PURE__ */ T(le.Provider, {
 			value: r,
-			children: /* @__PURE__ */ E(x.Provider, {
-				value: We,
-				children: /* @__PURE__ */ E(S.Provider, {
+			children: /* @__PURE__ */ T(x.Provider, {
+				value: Xe,
+				children: /* @__PURE__ */ T(S.Provider, {
 					value: !1,
-					children: /* @__PURE__ */ E("div", {
-						role: "group",
-						className: e(u.group, "ps-4"),
-						children: W
+					children: /* @__PURE__ */ T("div", {
+						ref: Pe,
+						...Fe,
+						className: e(u.collapse, Ie),
+						children: /* @__PURE__ */ T("div", {
+							ref: Me,
+							role: "group",
+							className: e(u.group, "ps-4"),
+							children: G
+						})
 					})
 				})
 			})