@vjdesigns/vjdesigns-ui 2.3.0 → 2.5.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 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";
+// 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 = {
+	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) {
 	return e instanceof HTMLTextAreaElement || e instanceof HTMLSelectElement ? !0 : e instanceof HTMLInputElement ? ![
 		"checkbox",
 		"radio",
@@ -38,366 +44,445 @@ 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 S(e) {
+	let t = x(e).filter((e) => !e.hasAttribute("data-grid-secondary"));
+	return t.length === 1 && !Se(t[0]) ? t[0] : e;
 }
-var fe = (e) => {
+var Ce = (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,
+}, 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({
+		value: Oe,
+		defaultValue: ke ?? [],
+		onChange: Ae
+	}), [N, at] = e({
+		value: Ne,
+		defaultValue: Pe ?? [],
+		onChange: Fe
+	}), [ot, st] = e({
+		value: Re,
+		defaultValue: ze,
+		onChange: Be
+	}), P = g(() => E ? null : se(d, M, f, k), [
+		E,
+		d,
+		M,
+		f,
+		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;
+		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));
+		};
+		return r = e(i), () => t(r);
+	}, [
+		lt,
+		d,
+		F
+	]);
+	let L = g(() => {
+		if (E || !P) return d;
+		let e = oe(ct);
+		if (e.length === 0) return P.map((e) => d[e]);
+		let t = [];
+		for (let n of P) ae(F.text(n), e) && t.push(d[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));
+		d,
+		ct,
+		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;
+		if (!H || !e) return;
+		let t = () => ht(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,
+		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));
 	}, [
-		G,
-		D,
-		V,
-		L
+		W,
+		T,
+		z,
+		st
 	]);
-	let qe = m(w);
-	ie(() => {
-		if (qe.current === w) return;
+	let yt = _(I);
+	ue(() => {
+		if (yt.current === I) return;
 		let e = window.setTimeout(() => {
-			qe.current = w, i(z === 0 ? M.noResults : M.rowCount(z));
+			yt.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", 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), [
+		L,
+		Ie,
+		p
+	]), Y = g(() => {
+		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) => {
+		let r = B[e];
+		if (!r || !Tt(r)) return;
+		let i = p(r);
+		if (w === "single") {
+			at(q.has(i) && n !== !0 ? [] : [i]), Ot.current = e;
 			return;
 		}
-		let a = n ?? !J.has(i), o = nt.current, s = [i];
+		let a = n ?? !q.has(i), o = Ot.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(Tt).map(p);
 		}
-		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 ? {
+		Ot.current = e, at(Array.from(c));
+	}, jt = (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) => {
+		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({
+		}] : [], it(i), a(r ? A.sorted(wt(e), r === "ascending" ? A.ascending : A.descending) : A.sortCleared);
+	}, Nt = B.length, [Pt, Ft] = v({
 		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(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(() => {
+		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 = Bt(X, It);
+		!t && X > 0 && (t = e.querySelector(`tbody [data-cell$=":${It}"]`));
+		let n = /* @__PURE__ */ new Set();
 		if (t) {
-			if (dt) for (let e of v(t)) e.tabIndex = 0;
-			else b(t).tabIndex = 0;
+			if (Lt) for (let e of x(t)) n.add(e);
+			else n.add(S(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(xe)) {
+			let e = n.has(t) ? "0" : "-1";
+			t.getAttribute("tabindex") !== e && t.setAttribute("tabindex", e);
+		}
+	});
+	let Vt = _(!1), Ht = () => {
+		let e = Bt(X, It);
+		if (!e) return !1;
+		let t = S(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;
+	};
+	h(() => {
+		Rt !== 0 && (Vt.current = !Ht());
+	}, [Rt]), h(() => {
+		Vt.current && (Ht() ? Vt.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({
+			r: n,
+			c: Math.max(0, Math.min(t, K - 1))
+		}), H && n > 0 && U.scrollToIndex(n - 1), zt((e) => e + 1);
+	}, Ut = (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] = Ce(n);
+		(r !== X || i !== It) && Ft({
 			r,
 			c: i
-		}), Q(t !== n && t !== b(n));
-	}, gt = (e) => {
+		}), Z(t !== n && t !== S(n));
+	}, Wt = (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);
+	}, Gt = (e) => {
+		if (kt.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] = Ce(n);
+		if (Lt || t !== n && t !== S(n)) {
+			if (e.key === "Escape") e.preventDefault(), Z(!1), n.focus();
 			else if (e.key === "Tab") {
-				let r = v(n);
+				let r = x(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 ? Nt : r, K - 1);
 				return;
 			case "PageDown":
-				e.preventDefault(), $(Math.max(1, r + ue), i);
+				e.preventDefault(), Q(Math.max(1, r + ge), i);
 				return;
 			case "PageUp":
-				e.preventDefault(), $(Math.max(+(r > 0), r - ue), i);
+				e.preventDefault(), Q(Math.max(+(r > 0), r - ge), 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 = x(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 && bt && t === n && (e.preventDefault(), At(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(), jt(!Et));
 		}
-	}, 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,
+	}, 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;
+		let n = B[t];
+		w === "single" && At(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),
+		style: H ? {
+			...Qe,
+			"--_head-h": `${mt}px`
+		} : Qe,
 		children: [
-			/* @__PURE__ */ g(ee, {
+			/* @__PURE__ */ y(c, {
 				scrollbars: "both",
-				maxHeight: Pe,
+				maxHeight: gt,
 				shadows: !1,
 				tabIndex: -1,
-				className: f.scroll,
-				children: /* @__PURE__ */ _("table", {
-					ref: Ue,
+				className: m.scroll,
+				viewportRef: ft,
+				viewportClassName: H ? m.virtualViewport : void 0,
+				children: /* @__PURE__ */ b("table", {
+					ref: rt,
 					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: i(m.table, _t === "fixed" && m.fixed),
+					style: Xe,
+					"aria-label": C,
+					"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,
 					onPointerDown: (e) => {
-						Z.current = e.shiftKey;
+						kt.current = e.shiftKey;
 					},
-					children: [/* @__PURE__ */ g("thead", {
-						className: f.head,
-						children: /* @__PURE__ */ _("tr", {
+					children: [/* @__PURE__ */ y("thead", {
+						ref: pt,
+						className: m.head,
+						children: /* @__PURE__ */ b("tr", {
 							"aria-rowindex": 1,
-							children: [K && /* @__PURE__ */ g("th", {
+							children: [G && /* @__PURE__ */ y("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(m.cell, m.selectCell),
+								children: /* @__PURE__ */ y(o, {
+									checked: Et,
+									indeterminate: Dt,
+									disabled: J.length === 0,
+									onCheckedChange: (e) => jt(Dt ? !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", {
+							}), 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", {
 									role: "columnheader",
 									"data-cell": `0:${n}`,
 									"aria-colindex": n + 1,
 									scope: "col",
-									"aria-sort": St?.key === e.key ? St.direction : void 0,
+									"aria-sort": Qt?.key === e.key ? Qt.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(m.cell, m.headerCell, e.sortable && m.sortableCell, he[s], e.numeric && m.numeric, e.headerEnd != null && m.hasHeaderEnd, e.className),
 									style: {
-										inlineSize: pe(e.width),
-										minInlineSize: pe(e.minWidth),
+										inlineSize: we(e.width),
+										minInlineSize: we(e.minWidth),
 										...e.style
 									},
-									children: [e.sortable ? /* @__PURE__ */ _("button", {
+									children: [e.sortable ? /* @__PURE__ */ b("button", {
 										type: "button",
-										className: f.sortButton,
-										onClick: (t) => at(e, t.shiftKey || Z.current),
-										children: [/* @__PURE__ */ g("span", {
-											className: f.sortLabel,
+										className: m.sortButton,
+										onClick: (t) => Mt(e, t.shiftKey || kt.current),
+										children: [/* @__PURE__ */ y("span", {
+											className: m.sortLabel,
 											children: e.header
-										}), /* @__PURE__ */ _("span", {
-											className: f.sortIcon,
+										}), /* @__PURE__ */ b("span", {
+											className: m.sortIcon,
 											"aria-hidden": "true",
-											children: [/* @__PURE__ */ g(ee, {
+											children: [/* @__PURE__ */ y(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__ */ y("span", {
+												className: m.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__ */ y("tbody", {
+						className: m.body,
+						children: B.length === 0 ? /* @__PURE__ */ y("tr", {
+							className: m.emptyRow,
+							children: /* @__PURE__ */ y("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(m.cell, m.emptyCell),
+								children: He ? /* @__PURE__ */ b("span", {
+									className: m.loadingInline,
+									children: [/* @__PURE__ */ y(s, {
 										size: "sm",
 										decorative: !0
-									}), A.table.loading]
-								}) : ke ?? (Ct ? M.noResults : M.empty)
+									}), O.table.loading]
+								}) : Ue ?? ($t ? 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", {
+						}) : /* @__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": `${i}:0`,
+									"data-cell": `${s}: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))
+									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))
 									})
-								}), 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);
+								}), 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);
 								})]
-							}, n);
-						})
+							})] }, a);
+						}), Zt > .5 && /* @__PURE__ */ y("tr", {
+							"aria-hidden": "true",
+							className: m.spacer,
+							style: { blockSize: Zt },
+							children: /* @__PURE__ */ y("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__ */ y("div", {
+				className: m.loadingOverlay,
+				children: /* @__PURE__ */ y(s, { label: O.table.loading })
 			}),
-			/* @__PURE__ */ g("span", {
+			/* @__PURE__ */ y("span", {
 				hidden: !0,
-				id: Ve,
-				children: A.pagination.nav
+				id: tt,
+				children: O.pagination.nav
 			}),
-			S && !C && /* @__PURE__ */ g("span", {
+			C && !Ee && /* @__PURE__ */ y("span", {
 				hidden: !0,
-				id: He,
-				children: S
+				id: nt,
+				children: C
 			}),
-			wt && /* @__PURE__ */ _("div", {
-				className: f.footer,
-				children: [/* @__PURE__ */ g("span", {
+			en && /* @__PURE__ */ b("div", {
+				className: m.footer,
+				children: [/* @__PURE__ */ y("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: m.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, {
 						size: "sm",
 						compact: !0,
-						pageCount: B,
-						page: V,
-						onPageChange: L,
-						"aria-labelledby": `${Ve} ${C ?? He}`
+						pageCount: ut,
+						page: z,
+						onPageChange: st,
+						"aria-labelledby": `${tt} ${Ee ?? nt}`
 					})]
 				}) : null]
 			})
 		]
 	});
 }
-//#endregion
-export { x as DataGrid, u as compareValues, ne as filterRows, d as getCellValue, re as sortRows };
+export { C as DataGrid, d as compareValues, re as createSearchIndex, f as filterRows, ie as getCellValue, se as sortIndices, p as sortRows };