@vjdesigns/vjdesigns-ui 2.5.0 → 3.0.0

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

@@ -8,31 +8,31 @@ import { CheckBox as o } from "../../forms/CheckBox/CheckBox.mjs";
 import { Spinner as s } from "../../feedback/Spinner/Spinner.mjs";
 import { ScrollArea as c } from "../../layout/ScrollArea/ScrollArea.mjs";
 import { Pagination as l } from "../../navigation/Pagination/Pagination.mjs";
-import { ArrowDownIcon as u, ArrowUpIcon as ee, SortIcon as te } from "../../primitives/Icon/icons.mjs";
-import { useLocale as ne } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
-import { compareValues as d, createSearchIndex as re, filterRows as f, getCellValue as ie, matchesWords as ae, searchWords as oe, sortIndices as se, sortRows as p } from "./dataGridUtils.mjs";
-import m from "./DataGrid.module.css.mjs";
-import { Fragment as ce, useDeferredValue as le, useEffect as ue, useId as de, useLayoutEffect as h, useMemo as g, useRef as _, useState as v } from "react";
-import { Fragment as fe, jsx as y, jsxs as b } from "react/jsx-runtime";
+import { ArrowDownIcon as u, ArrowUpIcon as d, SortIcon as ee } from "../../primitives/Icon/icons.mjs";
+import { useLocale as te } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { compareValues as f, createSearchIndex as ne, filterRows as p, getCellValue as re, matchesWords as ie, searchWords as ae, sortIndices as oe, sortRows as m } from "./dataGridUtils.mjs";
+import h from "./DataGrid.module.css.mjs";
+import { Fragment as se, useDeferredValue as ce, useEffect as g, useId as le, useLayoutEffect as _, useMemo as v, useRef as y, useState as b } from "react";
+import { Fragment as ue, jsx as x, jsxs as S } from "react/jsx-runtime";
 // src/components/data-display/DataGrid/DataGrid.tsx
-var pe = {
-	compact: m.compact,
-	comfortable: m.comfortable,
-	spacious: m.spacious
-}, me = {
-	plain: m.plain,
-	striped: m.striped,
-	outline: m.outline
-}, he = {
-	start: m.alignStart,
-	center: m.alignCenter,
-	end: m.alignEnd
-}, ge = 10, _e = 100, ve = 2e3, ye = {
+var de = {
+	compact: h.compact,
+	comfortable: h.comfortable,
+	spacious: h.spacious
+}, fe = {
+	plain: h.plain,
+	striped: h.striped,
+	outline: h.outline
+}, pe = {
+	start: h.alignStart,
+	center: h.alignCenter,
+	end: h.alignEnd
+}, me = 10, he = 100, ge = 2e3, _e = {
 	compact: 37,
 	comfortable: 49,
 	spacious: 65
-}, be = "a[href],button:not([disabled]),input:not([disabled]):not([type='hidden']),select:not([disabled]),textarea:not([disabled]),[contenteditable='true'],[data-grid-widget]", x = (e) => Array.from(e.querySelectorAll(be)), xe = `[data-cell], [data-cell] :is(${be})`;
-function Se(e) {
+}, ve = "a[href],button:not([disabled]),input:not([disabled]):not([type='hidden']),select:not([disabled]),textarea:not([disabled]),[contenteditable='true'],[data-grid-widget]", C = (e) => Array.from(e.querySelectorAll(ve)), ye = `[data-cell], [data-cell] :is(${ve})`;
+function be(e) {
 	return e instanceof HTMLTextAreaElement || e instanceof HTMLSelectElement ? !0 : e instanceof HTMLInputElement ? ![
 		"checkbox",
 		"radio",
@@ -44,92 +44,92 @@ function Se(e) {
 		"image"
 	].includes(e.type) : e.getAttribute("contenteditable") === "true";
 }
-function S(e) {
-	let t = x(e).filter((e) => !e.hasAttribute("data-grid-secondary"));
-	return t.length === 1 && !Se(t[0]) ? t[0] : e;
+function xe(e) {
+	let t = C(e).filter((e) => !e.hasAttribute("data-grid-secondary"));
+	return t.length === 1 && !be(t[0]) ? t[0] : e;
 }
-var Ce = (e) => {
+var Se = (e) => {
 	let [t, n] = (e.getAttribute("data-cell") ?? "0:0").split(":").map(Number);
 	return [t, n];
-}, we = (e) => typeof e == "number" ? `${e}px` : e, Te = (e) => e.id;
-function C({ rows: d, columns: f, getRowId: p = Te, getRowLabel: Se, "aria-label": C, "aria-labelledby": Ee, "aria-describedby": De, sort: Oe, defaultSort: ke, onSortChange: Ae, multiSort: je = !0, filter: Me, selectionMode: w = "none", selected: Ne, defaultSelected: Pe, onSelectedChange: Fe, isRowSelectable: Ie, pageSize: T, virtualize: Le = "auto", page: Re, defaultPage: ze = 1, onPageChange: Be, manual: E = !1, rowCount: Ve, onRowActivate: D, loading: He = !1, emptyState: Ue, density: We = "comfortable", variant: Ge = "outline", hoverable: Ke = !0, stickyHeader: qe = !0, maxHeight: Je, layout: Ye, tableStyle: Xe, className: Ze, style: Qe, ref: $e }) {
-	let { messages: O, locale: k } = ne(), A = O.dataGrid, j = _(null), et = de(), tt = `${et}-pages`, nt = `${et}-name`, rt = t(j, $e), [M, it] = e({
+}, Ce = (e) => typeof e == "number" ? `${e}px` : e, we = (e) => e.id;
+function Te({ rows: f, columns: p, getRowId: m = we, getRowLabel: be, "aria-label": Te, "aria-labelledby": Ee, "aria-describedby": De, sort: Oe, defaultSort: ke, onSortChange: Ae, multiSort: je = !0, filter: Me, selectionMode: w = "none", selected: Ne, defaultSelected: Pe, onSelectedChange: Fe, isRowSelectable: Ie, pageSize: T, virtualize: Le = "auto", page: Re, defaultPage: ze = 1, onPageChange: Be, manual: E = !1, rowCount: Ve, onRowActivate: D, loading: He = !1, emptyState: Ue, density: We = "comfortable", variant: Ge = "outline", hoverable: Ke = !0, stickyHeader: qe = !0, maxHeight: Je, layout: Ye, tableStyle: Xe, treegrid: Ze = !1, getRowProps: Qe, renderRowDetail: $e, onRowsShown: et, onVisibleRangeChange: tt, className: nt, style: rt, ref: it }) {
+	let { messages: O, locale: k } = te(), A = O.dataGrid, j = y(null), at = le(), ot = `${at}-pages`, st = `${at}-name`, ct = t(j, it), [M, lt] = e({
 		value: Oe,
 		defaultValue: ke ?? [],
 		onChange: Ae
-	}), [N, at] = e({
+	}), [N, ut] = e({
 		value: Ne,
 		defaultValue: Pe ?? [],
 		onChange: Fe
-	}), [ot, st] = e({
+	}), [dt, ft] = e({
 		value: Re,
 		defaultValue: ze,
 		onChange: Be
-	}), P = g(() => E ? null : se(d, M, f, k), [
+	}), P = v(() => E ? null : oe(f, M, p, k), [
 		E,
-		d,
-		M,
 		f,
+		M,
+		p,
 		k
-	]), F = g(() => re(d, f), [d, f]), I = Me ?? "", ct = le(I), lt = Me !== void 0 && !E;
-	ue(() => {
-		if (!lt || d.length < ve || typeof window > "u") return;
+	]), F = v(() => ne(f, p), [f, p]), I = Me ?? "", pt = ce(I), mt = Me !== void 0 && !E;
+	g(() => {
+		if (!mt || f.length < ge || typeof window > "u") return;
 		let e = window.requestIdleCallback ?? ((e) => window.setTimeout(() => e({
 			didTimeout: !1,
 			timeRemaining: () => 8
 		}), 50)), t = window.cancelIdleCallback ?? window.clearTimeout, n = 0, r = 0, i = (t) => {
-			for (; n < d.length && t.timeRemaining() > 2;) for (let e = Math.min(d.length, n + 1e3); n < e; n++) F.text(n);
-			n < d.length && (r = e(i));
+			for (; n < f.length && t.timeRemaining() > 2;) for (let e = Math.min(f.length, n + 1e3); n < e; n++) F.text(n);
+			n < f.length && (r = e(i));
 		};
 		return r = e(i), () => t(r);
 	}, [
-		lt,
-		d,
+		mt,
+		f,
 		F
 	]);
-	let L = g(() => {
-		if (E || !P) return d;
-		let e = oe(ct);
-		if (e.length === 0) return P.map((e) => d[e]);
+	let L = v(() => {
+		if (E || !P) return f;
+		let e = ae(pt);
+		if (e.length === 0) return P.map((e) => f[e]);
 		let t = [];
-		for (let n of P) ae(F.text(n), e) && t.push(d[n]);
+		for (let n of P) ie(F.text(n), e) && t.push(f[n]);
 		return t;
 	}, [
 		E,
 		P,
-		d,
-		ct,
+		f,
+		pt,
 		F
-	]), R = E ? Ve ?? d.length : L.length, ut = T ? Math.max(1, Math.ceil(R / T)) : 1, z = Math.min(Math.max(1, ot), ut), dt = T && !E ? (z - 1) * T : 0, B = T && !E ? L.slice(dt, dt + T) : L, V = T ? (z - 1) * T : 0, H = Le === "auto" ? B.length > _e : Le, ft = _(null), pt = _(null), [mt, ht] = v(0);
-	h(() => {
-		let e = pt.current;
+	]), R = E ? Ve ?? f.length : L.length, ht = T ? Math.max(1, Math.ceil(R / T)) : 1, z = Math.min(Math.max(1, dt), ht), gt = T && !E ? (z - 1) * T : 0, B = T && !E ? L.slice(gt, gt + T) : L, V = T ? (z - 1) * T : 0, H = !$e && (Le === "auto" ? B.length > he : Le), _t = y(null), vt = y(null), [yt, bt] = b(0);
+	_(() => {
+		let e = vt.current;
 		if (!H || !e) return;
-		let t = () => ht(e.offsetHeight);
+		let t = () => bt(e.offsetHeight);
 		if (t(), typeof ResizeObserver > "u") return;
 		let n = new ResizeObserver(t);
 		return n.observe(e), () => n.disconnect();
 	}, [H]);
 	let U = n({
 		count: H ? B.length : 0,
-		scrollElement: ft,
-		estimateSize: ye[We],
-		paddingStart: mt,
+		scrollElement: _t,
+		estimateSize: _e[We],
+		paddingStart: yt,
 		overscan: 10,
 		initialCount: 30
-	}), gt = Je ?? (H ? "70vh" : void 0), _t = Ye ?? (H ? "fixed" : "auto"), W = `${I}|${JSON.stringify(M)}`, vt = _(W);
-	ue(() => {
-		vt.current !== W && (vt.current = W, T && z !== 1 && st(1));
+	}), xt = Je ?? (H ? "70vh" : void 0), St = Ye ?? (H ? "fixed" : "auto"), W = `${I}|${JSON.stringify(M)}`, Ct = y(W);
+	g(() => {
+		Ct.current !== W && (Ct.current = W, T && z !== 1 && ft(1));
 	}, [
 		W,
 		T,
 		z,
-		st
+		ft
 	]);
-	let yt = _(I);
-	ue(() => {
-		if (yt.current === I) return;
+	let wt = y(I);
+	g(() => {
+		if (wt.current === I) return;
 		let e = window.setTimeout(() => {
-			yt.current = I, a(R === 0 ? A.noResults : A.rowCount(R));
+			wt.current = I, a(R === 0 ? A.noResults : A.rowCount(R));
 		}, 600);
 		return () => window.clearTimeout(e);
 	}, [
@@ -137,35 +137,35 @@ function C({ rows: d, columns: f, getRowId: p = Te, getRowLabel: Se, "aria-label
 		R,
 		A
 	]);
-	let G = w === "multiple", bt = w !== "none", xt = +!!G, K = f.length + xt, St = f.find((e) => e.rowHeader) ?? f[0], Ct = (e) => Se?.(e) ?? String((St && ie(e, St)) ?? p(e)), wt = (e) => e.headerLabel ?? (typeof e.header == "string" ? e.header : e.key), q = g(() => new Set(N), [N]), Tt = (e) => Ie?.(e) ?? !0, J = g(() => L.filter((e) => Ie?.(e) ?? !0).map(p), [
+	let G = w === "multiple", Tt = w !== "none", Et = +!!G, K = p.length + Et, Dt = p.find((e) => e.rowHeader) ?? p[0], Ot = (e) => be?.(e) ?? String((Dt && re(e, Dt)) ?? m(e)), kt = (e) => e.headerLabel ?? (typeof e.header == "string" ? e.header : e.key), q = v(() => new Set(N), [N]), At = (e) => Ie?.(e) ?? !0, J = v(() => L.filter((e) => Ie?.(e) ?? !0).map(m), [
 		L,
 		Ie,
-		p
-	]), Y = g(() => {
+		m
+	]), Y = v(() => {
 		let e = 0;
 		for (let t of J) q.has(t) && e++;
 		return e;
-	}, [J, q]), Et = J.length > 0 && Y === J.length, Dt = Y > 0 && !Et, Ot = _(null), kt = _(!1), At = (e, t, n) => {
+	}, [J, q]), jt = J.length > 0 && Y === J.length, Mt = Y > 0 && !jt, Nt = y(null), Pt = y(!1), Ft = (e, t, n) => {
 		let r = B[e];
-		if (!r || !Tt(r)) return;
-		let i = p(r);
+		if (!r || !At(r)) return;
+		let i = m(r);
 		if (w === "single") {
-			at(q.has(i) && n !== !0 ? [] : [i]), Ot.current = e;
+			ut(q.has(i) && n !== !0 ? [] : [i]), Nt.current = e;
 			return;
 		}
-		let a = n ?? !q.has(i), o = Ot.current, s = [i];
+		let a = n ?? !q.has(i), o = Nt.current, s = [i];
 		if (t && o !== null && o !== e) {
 			let [t, n] = o < e ? [o, e] : [e, o];
-			s = B.slice(t, n + 1).filter(Tt).map(p);
+			s = B.slice(t, n + 1).filter(At).map(m);
 		}
 		let c = new Set(N);
 		for (let e of s) a ? c.add(e) : c.delete(e);
-		Ot.current = e, at(Array.from(c));
-	}, jt = (e) => {
+		Nt.current = e, ut(Array.from(c));
+	}, It = (e) => {
 		let t = new Set(N);
 		for (let n of J) e ? t.add(n) : t.delete(n);
-		at(Array.from(t));
-	}, Mt = (e, t) => {
+		ut(Array.from(t));
+	}, Lt = (e, t) => {
 		let n = M.find((t) => t.key === e.key), r = n ? n.direction === "ascending" ? "descending" : null : "ascending", i;
 		i = t && je ? n ? r ? M.map((t) => t.key === e.key ? {
 			key: t.key,
@@ -176,66 +176,66 @@ function C({ rows: d, columns: f, getRowId: p = Te, getRowLabel: Se, "aria-label
 		}] : r ? [{
 			key: e.key,
 			direction: r
-		}] : [], it(i), a(r ? A.sorted(wt(e), r === "ascending" ? A.ascending : A.descending) : A.sortCleared);
-	}, Nt = B.length, [Pt, Ft] = v({
+		}] : [], lt(i), a(r ? A.sorted(kt(e), r === "ascending" ? A.ascending : A.descending) : A.sortCleared);
+	}, Rt = B.length, [zt, Bt] = b({
 		r: 0,
 		c: 0
-	}), X = Math.min(Pt.r, Nt), It = Math.min(Pt.c, K - 1), [Lt, Z] = v(!1), [Rt, zt] = v(0), Bt = (e, t) => j.current?.querySelector(`[data-cell="${e}:${t}"]`) ?? null;
-	h(() => {
+	}), X = Math.min(zt.r, Rt), Vt = Math.min(zt.c, K - 1), [Ht, Z] = b(!1), [Ut, Wt] = b(0), Gt = (e, t) => j.current?.querySelector(`[data-cell="${e}:${t}"]`) ?? null;
+	_(() => {
 		let e = j.current;
 		if (!e) return;
-		let t = Bt(X, It);
-		!t && X > 0 && (t = e.querySelector(`tbody [data-cell$=":${It}"]`));
+		let t = Gt(X, Vt);
+		!t && X > 0 && (t = e.querySelector(`tbody [data-cell$=":${Vt}"]`));
 		let n = /* @__PURE__ */ new Set();
 		if (t) {
-			if (Lt) for (let e of x(t)) n.add(e);
-			else n.add(S(t));
+			if (Ht) for (let e of C(t)) n.add(e);
+			else n.add(xe(t));
 		}
-		for (let t of e.querySelectorAll(xe)) {
+		for (let t of e.querySelectorAll(ye)) {
 			let e = n.has(t) ? "0" : "-1";
 			t.getAttribute("tabindex") !== e && t.setAttribute("tabindex", e);
 		}
 	});
-	let Vt = _(!1), Ht = () => {
-		let e = Bt(X, It);
+	let Kt = y(!1), qt = () => {
+		let e = Gt(X, Vt);
 		if (!e) return !1;
-		let t = S(e);
+		let t = xe(e);
 		return t.focus({ preventScroll: !0 }), (t === e ? e : t).scrollIntoView?.({
 			block: "nearest",
 			inline: "nearest"
 		}), !0;
 	};
-	h(() => {
-		Rt !== 0 && (Vt.current = !Ht());
-	}, [Rt]), h(() => {
-		Vt.current && (Ht() ? Vt.current = !1 : H && X > 0 && U.scrollToIndex(X - 1));
+	_(() => {
+		Ut !== 0 && (Kt.current = !qt());
+	}, [Ut]), _(() => {
+		Kt.current && (qt() ? Kt.current = !1 : H && X > 0 && U.scrollToIndex(X - 1));
 	});
 	let Q = (e, t) => {
-		let n = Math.max(0, Math.min(e, Nt));
-		Z(!1), Ft({
+		let n = Math.max(0, Math.min(e, Rt));
+		Z(!1), Bt({
 			r: n,
 			c: Math.max(0, Math.min(t, K - 1))
-		}), H && n > 0 && U.scrollToIndex(n - 1), zt((e) => e + 1);
-	}, Ut = (e) => {
+		}), H && n > 0 && U.scrollToIndex(n - 1), Wt((e) => e + 1);
+	}, Jt = (e) => {
 		let t = e.target, n = t.closest("[data-cell]");
 		if (!n || !j.current?.contains(n)) return;
-		let [r, i] = Ce(n);
-		(r !== X || i !== It) && Ft({
+		let [r, i] = Se(n);
+		(r !== X || i !== Vt) && Bt({
 			r,
 			c: i
-		}), Z(t !== n && t !== S(n));
-	}, Wt = (e) => {
+		}), Z(t !== n && t !== xe(n));
+	}, Yt = (e) => {
 		let t = e.relatedTarget;
 		t && j.current?.contains(t) || Z(!1);
-	}, Gt = (e) => {
-		if (kt.current = e.shiftKey, e.defaultPrevented || e.nativeEvent.isComposing) return;
+	}, Xt = (e) => {
+		if (Pt.current = e.shiftKey, e.defaultPrevented || e.nativeEvent.isComposing) return;
 		let t = e.target, n = t.closest("[data-cell]");
 		if (!n || !j.current?.contains(n)) return;
-		let [r, i] = Ce(n);
-		if (Lt || t !== n && t !== S(n)) {
+		let [r, i] = Se(n);
+		if (Ht || t !== n && t !== xe(n)) {
 			if (e.key === "Escape") e.preventDefault(), Z(!1), n.focus();
 			else if (e.key === "Tab") {
-				let r = x(n);
+				let r = C(n);
 				if (r.length === 0) return;
 				e.preventDefault(), r[(r.indexOf(t) + (e.shiftKey ? -1 : 1) + r.length) % r.length].focus();
 			}
@@ -259,116 +259,128 @@ function C({ rows: d, columns: f, getRowId: p = Te, getRowLabel: Se, "aria-label
 				e.preventDefault(), Q(o ? 0 : r, 0);
 				return;
 			case "End":
-				e.preventDefault(), Q(o ? Nt : r, K - 1);
+				e.preventDefault(), Q(o ? Rt : r, K - 1);
 				return;
 			case "PageDown":
-				e.preventDefault(), Q(Math.max(1, r + ge), i);
+				e.preventDefault(), Q(Math.max(1, r + me), i);
 				return;
 			case "PageUp":
-				e.preventDefault(), Q(Math.max(+(r > 0), r - ge), i);
+				e.preventDefault(), Q(Math.max(+(r > 0), r - me), i);
 				return;
 			case "Enter":
 			case "F2": {
-				let r = x(n);
+				let r = C(n);
 				r.length > 0 && (t === n || e.key === "F2") ? (e.preventDefault(), Z(!0), r[0].focus()) : e.key === "Enter" && t === n && s && D && (e.preventDefault(), D(s));
 				return;
 			}
 			case " ":
-				s && bt && t === n && (e.preventDefault(), At(r - 1, e.shiftKey));
+				s && Tt && t === n && (e.preventDefault(), Ft(r - 1, e.shiftKey));
 				return;
-			default: o && e.key.toLowerCase() === "a" && G && (e.preventDefault(), jt(!Et));
+			default: o && e.key.toLowerCase() === "a" && G && (e.preventDefault(), It(!jt));
 		}
-	}, Kt = g(() => new Intl.NumberFormat(k), [k]), qt = g(() => new Intl.DateTimeFormat(k, { dateStyle: "medium" }), [k]), Jt = (e) => e == null ? "" : typeof e == "number" ? Kt.format(e) : e instanceof Date ? qt.format(e) : String(e), Yt = (e, t) => {
-		if (e.target.closest(be)) return;
+	}, Zt = v(() => new Intl.NumberFormat(k), [k]), Qt = v(() => new Intl.DateTimeFormat(k, { dateStyle: "medium" }), [k]), $t = (e) => e == null ? "" : typeof e == "number" ? Zt.format(e) : e instanceof Date ? Qt.format(e) : String(e), en = (e, t) => {
+		if (e.target.closest(ve)) return;
 		let n = B[t];
-		w === "single" && At(t, !1, !0), n && D && D(n);
+		w === "single" && Ft(t, !1, !0), n && D && D(n);
 	}, $ = H ? r(U, X > 0 ? [X - 1] : []) : B.map((e, t) => ({
 		index: t,
 		start: 0,
 		end: 0,
 		size: 0
-	})), Xt = $[$.length - 1], Zt = H && Xt ? U.totalSize - Xt.end : 0, Qt = M[0], $t = !E && ct.trim() !== "", en = !!T || G && Y > 0, tn = R === 0 ? 0 : V + 1, nn = Math.min(R, V + B.length);
-	return /* @__PURE__ */ b("div", {
-		className: i(m.frame, me[Ge], pe[We], Ke && m.hoverable, qe && m.sticky, Ze),
+	})), tn = $[$.length - 1], nn = y({});
+	nn.current.fn = et, g(() => {
+		let e = nn.current, t = e.last;
+		t === B || t && t.length === B.length && t.every((e, t) => e === B[t]) || (e.last = B, e.fn?.(B));
+	});
+	let rn = H ? U.virtualItems : $, an = rn[0]?.index ?? 0, on = rn[rn.length - 1]?.index ?? -1, sn = y(tt);
+	sn.current = tt, g(() => {
+		sn.current?.({
+			start: an,
+			end: on
+		});
+	}, [an, on]);
+	let cn = H && tn ? U.totalSize - tn.end : 0, ln = M[0], un = !E && pt.trim() !== "", dn = !!T || G && Y > 0, fn = R === 0 ? 0 : V + 1, pn = Math.min(R, V + B.length);
+	return /* @__PURE__ */ S("div", {
+		className: i(h.frame, fe[Ge], de[We], Ke && h.hoverable, qe && h.sticky, nt),
 		style: H ? {
-			...Qe,
-			"--_head-h": `${mt}px`
-		} : Qe,
+			...rt,
+			"--_head-h": `${yt}px`
+		} : rt,
 		children: [
-			/* @__PURE__ */ y(c, {
+			/* @__PURE__ */ x(c, {
 				scrollbars: "both",
-				maxHeight: gt,
+				maxHeight: xt,
 				shadows: !1,
 				tabIndex: -1,
-				className: m.scroll,
-				viewportRef: ft,
-				viewportClassName: H ? m.virtualViewport : void 0,
-				children: /* @__PURE__ */ b("table", {
-					ref: rt,
-					role: "grid",
-					className: i(m.table, _t === "fixed" && m.fixed),
+				className: h.scroll,
+				viewportRef: _t,
+				viewportClassName: H ? h.virtualViewport : void 0,
+				children: /* @__PURE__ */ S("table", {
+					ref: ct,
+					role: Ze ? "treegrid" : "grid",
+					className: i(h.table, St === "fixed" && h.fixed),
 					style: Xe,
-					"aria-label": C,
+					"aria-label": Te,
 					"aria-labelledby": Ee,
 					"aria-describedby": De,
 					"aria-rowcount": R + 1,
 					"aria-colcount": K,
 					"aria-multiselectable": G || void 0,
 					"aria-busy": He || void 0,
-					onKeyDown: Gt,
-					onFocus: Ut,
-					onBlur: Wt,
+					onKeyDown: Xt,
+					onFocus: Jt,
+					onBlur: Yt,
 					onPointerDown: (e) => {
-						kt.current = e.shiftKey;
+						Pt.current = e.shiftKey;
 					},
-					children: [/* @__PURE__ */ y("thead", {
-						ref: pt,
-						className: m.head,
-						children: /* @__PURE__ */ b("tr", {
+					children: [/* @__PURE__ */ x("thead", {
+						ref: vt,
+						className: h.head,
+						children: /* @__PURE__ */ S("tr", {
 							"aria-rowindex": 1,
-							children: [G && /* @__PURE__ */ y("th", {
+							children: [G && /* @__PURE__ */ x("th", {
 								role: "columnheader",
 								"data-cell": "0:0",
 								"data-select-column": "",
 								"aria-colindex": 1,
-								className: i(m.cell, m.selectCell),
-								children: /* @__PURE__ */ y(o, {
-									checked: Et,
-									indeterminate: Dt,
+								className: i(h.cell, h.selectCell),
+								children: /* @__PURE__ */ x(o, {
+									checked: jt,
+									indeterminate: Mt,
 									disabled: J.length === 0,
-									onCheckedChange: (e) => jt(Dt ? !0 : e),
+									onCheckedChange: (e) => It(Mt ? !0 : e),
 									"aria-label": O.table.selectAll
 								})
-							}), f.map((e, t) => {
-								let n = t + xt, r = M.findIndex((t) => t.key === e.key), a = r >= 0 ? M[r].direction : null, o = a === "ascending" ? ee : a === "descending" ? u : te, s = e.align ?? (e.numeric ? "end" : "start");
-								return /* @__PURE__ */ b("th", {
+							}), p.map((e, t) => {
+								let n = t + Et, r = M.findIndex((t) => t.key === e.key), a = r >= 0 ? M[r].direction : null, o = a === "ascending" ? d : a === "descending" ? u : ee, s = e.align ?? (e.numeric ? "end" : "start");
+								return /* @__PURE__ */ S("th", {
 									role: "columnheader",
 									"data-cell": `0:${n}`,
 									"aria-colindex": n + 1,
 									scope: "col",
-									"aria-sort": Qt?.key === e.key ? Qt.direction : void 0,
+									"aria-sort": ln?.key === e.key ? ln.direction : void 0,
 									"data-sorted": a ?? void 0,
-									className: i(m.cell, m.headerCell, e.sortable && m.sortableCell, he[s], e.numeric && m.numeric, e.headerEnd != null && m.hasHeaderEnd, e.className),
+									className: i(h.cell, h.headerCell, e.sortable && h.sortableCell, pe[s], e.numeric && h.numeric, e.headerEnd != null && h.hasHeaderEnd, e.className),
 									style: {
-										inlineSize: we(e.width),
-										minInlineSize: we(e.minWidth),
+										inlineSize: Ce(e.width),
+										minInlineSize: Ce(e.minWidth),
 										...e.style
 									},
-									children: [e.sortable ? /* @__PURE__ */ b("button", {
+									children: [e.sortable ? /* @__PURE__ */ S("button", {
 										type: "button",
-										className: m.sortButton,
-										onClick: (t) => Mt(e, t.shiftKey || kt.current),
-										children: [/* @__PURE__ */ y("span", {
-											className: m.sortLabel,
+										className: h.sortButton,
+										onClick: (t) => Lt(e, t.shiftKey || Pt.current),
+										children: [/* @__PURE__ */ x("span", {
+											className: h.sortLabel,
 											children: e.header
-										}), /* @__PURE__ */ b("span", {
-											className: m.sortIcon,
+										}), /* @__PURE__ */ S("span", {
+											className: h.sortIcon,
 											"aria-hidden": "true",
-											children: [/* @__PURE__ */ y(o, {
+											children: [/* @__PURE__ */ x(o, {
 												size: "sm",
 												strokeWidth: 2.5
-											}), M.length > 1 && r >= 0 && /* @__PURE__ */ y("span", {
-												className: m.sortPriority,
+											}), M.length > 1 && r >= 0 && /* @__PURE__ */ x("span", {
+												className: h.sortPriority,
 												children: r + 1
 											})]
 										})]
@@ -376,113 +388,126 @@ function C({ rows: d, columns: f, getRowId: p = Te, getRowLabel: Se, "aria-label
 								}, e.key);
 							})]
 						})
-					}), /* @__PURE__ */ y("tbody", {
-						className: m.body,
-						children: B.length === 0 ? /* @__PURE__ */ y("tr", {
-							className: m.emptyRow,
-							children: /* @__PURE__ */ y("td", {
+					}), /* @__PURE__ */ x("tbody", {
+						className: h.body,
+						children: B.length === 0 ? /* @__PURE__ */ x("tr", {
+							className: h.emptyRow,
+							children: /* @__PURE__ */ x("td", {
 								role: "gridcell",
 								colSpan: K,
-								className: i(m.cell, m.emptyCell),
-								children: He ? /* @__PURE__ */ b("span", {
-									className: m.loadingInline,
-									children: [/* @__PURE__ */ y(s, {
+								className: i(h.cell, h.emptyCell),
+								children: He ? /* @__PURE__ */ S("span", {
+									className: h.loadingInline,
+									children: [/* @__PURE__ */ x(s, {
 										size: "sm",
 										decorative: !0
 									}), O.table.loading]
-								}) : Ue ?? ($t ? A.noResults : A.empty)
+								}) : Ue ?? (un ? A.noResults : A.empty)
 							})
-						}) : /* @__PURE__ */ b(fe, { children: [$.map((e, t) => {
-							let n = e.index, r = B[n], a = p(r), s = n + 1, c = q.has(a), l = Tt(r), u = H ? e.start - (t === 0 ? mt : $[t - 1].end) : 0;
-							return /* @__PURE__ */ b(ce, { children: [u > .5 && /* @__PURE__ */ y("tr", {
-								"aria-hidden": "true",
-								className: m.spacer,
-								style: { blockSize: u },
-								children: /* @__PURE__ */ y("td", { colSpan: K })
-							}), /* @__PURE__ */ b("tr", {
-								ref: H ? U.measureElement : void 0,
-								"data-index": H ? n : void 0,
-								"data-even": (V + n) % 2 == 1 || void 0,
-								"aria-rowindex": V + n + 2,
-								"aria-selected": bt ? c : void 0,
-								"aria-disabled": bt && !l ? !0 : void 0,
-								"data-selected": c || void 0,
-								className: i(m.row, (D || w === "single") && m.clickable),
-								onClick: (e) => Yt(e, n),
-								children: [G && /* @__PURE__ */ y("td", {
-									role: "gridcell",
-									"data-cell": `${s}:0`,
-									"data-select-column": "",
-									"aria-colindex": 1,
-									className: i(m.cell, m.selectCell),
-									children: /* @__PURE__ */ y(o, {
-										checked: c,
-										disabled: !l,
-										onCheckedChange: (e) => At(n, kt.current, e),
-										"aria-label": O.table.selectRowNamed(Ct(r))
+						}) : /* @__PURE__ */ S(ue, { children: [$.map((e, t) => {
+							let n = e.index, r = B[n], a = m(r), s = n + 1, c = q.has(a), l = Qe?.(r), u = $e?.(r), d = At(r), ee = H ? e.start - (t === 0 ? yt : $[t - 1].end) : 0;
+							return /* @__PURE__ */ S(se, { children: [
+								ee > .5 && /* @__PURE__ */ x("tr", {
+									"aria-hidden": "true",
+									className: h.spacer,
+									style: { blockSize: ee },
+									children: /* @__PURE__ */ x("td", { colSpan: K })
+								}),
+								/* @__PURE__ */ S("tr", {
+									ref: H ? U.measureElement : void 0,
+									"data-index": H ? n : void 0,
+									"data-even": (V + n) % 2 == 1 || void 0,
+									"aria-rowindex": V + n + 2,
+									"aria-selected": Tt && l?.selectable !== !1 ? c : void 0,
+									"aria-disabled": Tt && !d && l?.selectable !== !1 ? !0 : void 0,
+									"data-selected": c || void 0,
+									"aria-level": l?.level,
+									"aria-expanded": l?.expanded,
+									className: i(h.row, (D || w === "single") && h.clickable, l?.className),
+									onClick: (e) => en(e, n),
+									children: [G && /* @__PURE__ */ x("td", {
+										role: "gridcell",
+										"data-cell": `${s}:0`,
+										"data-select-column": "",
+										"aria-colindex": 1,
+										className: i(h.cell, h.selectCell),
+										children: l?.selectable !== !1 && /* @__PURE__ */ x(o, {
+											checked: c,
+											disabled: !d,
+											onCheckedChange: (e) => Ft(n, Pt.current, e),
+											"aria-label": O.table.selectRowNamed(Ot(r))
+										})
+									}), p.map((e, t) => {
+										let a = t + Et, o = re(r, e), l = e.cell ? e.cell(r, {
+											value: o,
+											rowIndex: gt + n,
+											selected: c
+										}) : $t(o), u = e.align ?? (e.numeric ? "end" : "start"), d = e.rowHeader ? "th" : "td";
+										return /* @__PURE__ */ x(d, {
+											role: e.rowHeader ? "rowheader" : "gridcell",
+											"data-cell": `${s}:${a}`,
+											"aria-colindex": a + 1,
+											scope: e.rowHeader ? "row" : void 0,
+											className: i(h.cell, e.rowHeader && h.rowHeader, pe[u], e.numeric && h.numeric, e.className),
+											style: e.style,
+											children: l
+										}, e.key);
+									})]
+								}),
+								u != null && u !== !1 && /* @__PURE__ */ x("tr", {
+									className: h.detailRow,
+									children: /* @__PURE__ */ x("td", {
+										colSpan: K,
+										className: i(h.cell, h.detailCell),
+										children: u
 									})
-								}), f.map((e, t) => {
-									let a = t + xt, o = ie(r, e), l = e.cell ? e.cell(r, {
-										value: o,
-										rowIndex: dt + n,
-										selected: c
-									}) : Jt(o), u = e.align ?? (e.numeric ? "end" : "start"), ee = e.rowHeader ? "th" : "td";
-									return /* @__PURE__ */ y(ee, {
-										role: e.rowHeader ? "rowheader" : "gridcell",
-										"data-cell": `${s}:${a}`,
-										"aria-colindex": a + 1,
-										scope: e.rowHeader ? "row" : void 0,
-										className: i(m.cell, e.rowHeader && m.rowHeader, he[u], e.numeric && m.numeric, e.className),
-										style: e.style,
-										children: l
-									}, e.key);
-								})]
-							})] }, a);
-						}), Zt > .5 && /* @__PURE__ */ y("tr", {
+								})
+							] }, a);
+						}), cn > .5 && /* @__PURE__ */ x("tr", {
 							"aria-hidden": "true",
-							className: m.spacer,
-							style: { blockSize: Zt },
-							children: /* @__PURE__ */ y("td", { colSpan: K })
+							className: h.spacer,
+							style: { blockSize: cn },
+							children: /* @__PURE__ */ x("td", { colSpan: K })
 						})] })
 					})]
 				})
 			}),
-			He && B.length > 0 && /* @__PURE__ */ y("div", {
-				className: m.loadingOverlay,
-				children: /* @__PURE__ */ y(s, { label: O.table.loading })
+			He && B.length > 0 && /* @__PURE__ */ x("div", {
+				className: h.loadingOverlay,
+				children: /* @__PURE__ */ x(s, { label: O.table.loading })
 			}),
-			/* @__PURE__ */ y("span", {
+			/* @__PURE__ */ x("span", {
 				hidden: !0,
-				id: tt,
+				id: ot,
 				children: O.pagination.nav
 			}),
-			C && !Ee && /* @__PURE__ */ y("span", {
+			Te && !Ee && /* @__PURE__ */ x("span", {
 				hidden: !0,
-				id: nt,
-				children: C
+				id: st,
+				children: Te
 			}),
-			en && /* @__PURE__ */ b("div", {
-				className: m.footer,
-				children: [/* @__PURE__ */ y("span", {
+			dn && /* @__PURE__ */ S("div", {
+				className: h.footer,
+				children: [/* @__PURE__ */ x("span", {
 					role: "status",
-					className: m.status,
+					className: h.status,
 					children: G && Y > 0 ? A.selectedCount(Y) : null
-				}), T ? /* @__PURE__ */ b("div", {
-					className: m.paging,
-					children: [/* @__PURE__ */ y("span", {
-						className: m.range,
-						children: A.range(tn, nn, R)
-					}), ut > 1 && /* @__PURE__ */ y(l, {
+				}), T ? /* @__PURE__ */ S("div", {
+					className: h.paging,
+					children: [/* @__PURE__ */ x("span", {
+						className: h.range,
+						children: A.range(fn, pn, R)
+					}), ht > 1 && /* @__PURE__ */ x(l, {
 						size: "sm",
 						compact: !0,
-						pageCount: ut,
+						pageCount: ht,
 						page: z,
-						onPageChange: st,
-						"aria-labelledby": `${tt} ${Ee ?? nt}`
+						onPageChange: ft,
+						"aria-labelledby": `${ot} ${Ee ?? st}`
 					})]
 				}) : null]
 			})
 		]
 	});
 }
-export { C as DataGrid, d as compareValues, re as createSearchIndex, f as filterRows, ie as getCellValue, se as sortIndices, p as sortRows };
+export { Te as DataGrid, f as compareValues, ne as createSearchIndex, p as filterRows, re as getCellValue, oe as sortIndices, m as sortRows };