@vjdesigns/vjdesigns-ui 2.4.0 → 3.0.0

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

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