@mortenbrudvik/waveui 0.14.1 → 0.16.0

package/dist/components/table/DataGrid.mjs

@@ -1,304 +1,121 @@
 "use client";
 import { cn as e } from "../../lib/cn.mjs";
 import { flattenChildren as t, isElementOfType as n } from "../../lib/children.mjs";
-import { isDev as r, reportMissingContext as i, resolveDeprecatedProp as a, warnDeprecated as o, warnOnce as s } from "../../lib/dev.mjs";
-import { composeEventHandlers as c } from "../../lib/composeEventHandlers.mjs";
-import { dataGridBodyClassNames as l, dataGridCellClassNames as u, dataGridClassNames as d, dataGridHeaderCellClassNames as f, dataGridHeaderClassNames as p, dataGridRowClassNames as m, dataGridSelectionCellClassNames as h } from "../../lib/classNames.mjs";
-import { useControllable as g } from "../../hooks/useControllable.mjs";
-import { useId as _ } from "../../hooks/useId.mjs";
-import { useMergedRefs as v } from "../../hooks/useMergedRefs.mjs";
-import { useGridNavigation as y } from "./useGridNavigation.mjs";
-import { focusRingInset as b, forcedColors as x } from "../../lib/styles.mjs";
-import { endsTextSelection as S, isForeignEvent as ee } from "../../lib/events.mjs";
-import { SELECTION_CELL_CLASSES as C, TableSelectionControl as te, TableSortButton as w, getTablePartKind as ne, markTablePart as re } from "./Table.shared.mjs";
-import * as T from "react";
-import { jsx as E, jsxs as ie } from "react/jsx-runtime";
+import { isDev as r, resolveDeprecatedProp as i, warnDeprecated as a, warnOnce as o } from "../../lib/dev.mjs";
+import { composeEventHandlers as s } from "../../lib/composeEventHandlers.mjs";
+import { dataGridBodyClassNames as c, dataGridCellClassNames as l, dataGridClassNames as u, dataGridRowClassNames as d, dataGridSelectionCellClassNames as f } from "../../lib/classNames.mjs";
+import { useControllable as p } from "../../hooks/useControllable.mjs";
+import { useId as ee } from "../../hooks/useId.mjs";
+import { useMergedRefs as m } from "../../hooks/useMergedRefs.mjs";
+import { clearIds as h, selectAllIds as g, summarizeSelection as _, toggleId as v } from "../../lib/selection.mjs";
+import { useGridNavigation as te } from "./useGridNavigation.mjs";
+import { focusRingInset as y, forcedColors as b } from "../../lib/styles.mjs";
+import { endsTextSelection as ne, isForeignEvent as x } from "../../lib/events.mjs";
+import { SELECTION_CELL_CLASSES as re, TableSelectionControl as S, markTablePart as C } from "./Table.shared.mjs";
+import { DataGridFixedLayoutContext as w, DataGridResizeContext as ie, useDataGridColumnSizing as ae } from "./DataGrid.sizing.mjs";
+import { DataGridWindowContext as T, DataGridWindowRowContext as E, getWindowNavigationModel as D, renderWindowRows as oe, useDataGridWindow as se } from "./DataGrid.window.mjs";
+import { createSelectionStore as O } from "./DataGrid.store.mjs";
+import { DataGridContext as ce, DataGridHeaderRowHintContext as le, DataGridItemSelectionDisabledContext as ue, DataGridItemsContext as de, DataGridRowContext as fe, DataGridRowIdContext as pe, DataGridSectionContext as k, DataGridSortContext as me, useDataGridContext as A, useDataGridRowContext as j } from "./DataGrid.context.mjs";
+import { DataGridHeader as M, DataGridHeaderCell as he, DataGridSelectionHeaderSlot as ge, cellBase as N, isSelectionCellElement as P } from "./DataGrid.header.mjs";
+import * as F from "react";
+import { jsx as I, jsxs as _e } from "react/jsx-runtime";
 //#region src/components/table/DataGrid.tsx
-var D = "Select all rows", O = "Selection";
-function k(e, t = !1) {
-	let n = new Set(e), r = /* @__PURE__ */ new Map(), i = /* @__PURE__ */ new Map(), a = 0, o = 0, s = "none", c = t, l, u = /* @__PURE__ */ new Set(), d = /* @__PURE__ */ new Set(), f = (e) => {
-		for (let t of Array.from(e)) t();
-	}, p = () => {
-		if (l !== void 0) return l;
-		let e = null;
-		for (let t of n) {
-			if (r.has(t)) {
-				e = t;
-				break;
-			}
-			e ??= t;
-		}
-		return l = e, e;
-	}, m = (e) => {
-		if (n.size < 2 || !n.has(e)) return;
-		let t = l;
-		l = void 0, c && p() !== t && f(u);
-	}, h = () => {
-		let e = o === 0 ? "none" : o === a ? "all" : "some";
-		e !== s && (s = e, f(d));
-	}, g = (e) => r.has(e) && !i.has(e), _ = (e, t) => {
-		let r = g(e);
-		t();
-		let i = g(e);
-		if (r === i) return;
-		let s = i ? 1 : -1;
-		a += s, n.has(e) && (o += s);
-	}, v = (e, t, n) => {
-		let r = (e.get(t) ?? 0) + n;
-		r > 0 ? e.set(t, r) : e.delete(t);
-	}, y = (e) => (t) => (e.add(t), () => {
-		e.delete(t);
-	});
-	return {
-		subscribe: y(u),
-		subscribeSelectAll: y(d),
-		register(e) {
-			let t = !r.has(e);
-			_(e, () => v(r, e, 1)), h(), t && m(e);
-			let n = !1;
-			return () => {
-				n || (n = !0, _(e, () => v(r, e, -1)), !r.has(e) && (h(), m(e)));
-			};
-		},
-		disable(e) {
-			_(e, () => v(i, e, 1)), h();
-			let t = !1;
-			return () => {
-				t || (t = !0, _(e, () => v(i, e, -1)), h());
-			};
-		},
-		isDisabled(e) {
-			return i.has(e);
-		},
-		setSelected(e) {
-			let t = new Set(e);
-			if (!(t.size === n.size && e.every((e) => n.has(e)))) {
-				n = t, l = void 0, o = 0;
-				for (let e of t) g(e) && (o += 1);
-				f(u), h();
-			}
-		},
-		setSingleMode(e) {
-			c = e;
-		},
-		isSelected(e, t = !1) {
-			return t ? p() === e : n.has(e);
-		},
-		countRegistrations(e) {
-			return r.get(e) ?? 0;
-		},
-		getSelectAllState() {
-			return s;
-		},
-		getRegistered() {
-			return Array.from(r.keys());
-		},
-		prune(e) {
-			return e.filter((e) => r.has(e));
-		}
-	};
-}
-function A() {
-	let e = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Set(), n = null, r = () => {
-		let r = null, i = null;
-		for (let [t, a] of e) {
-			let o = a();
-			if (!o) {
-				if (n !== null && e.has(n)) return;
-				continue;
-			}
-			(!i || o.compareDocumentPosition(i) & Node.DOCUMENT_POSITION_FOLLOWING) && (r = t, i = o);
-		}
-		if (r === null && (r = e.keys().next().value ?? null), r !== n) {
-			n = r;
-			for (let e of Array.from(t)) e();
-		}
-	};
-	return {
-		subscribe(e) {
-			return t.add(e), () => {
-				t.delete(e);
-			};
-		},
-		register(t, n) {
-			return e.set(t, n), r(), () => {
-				e.delete(t), r();
-			};
-		},
-		getFirst: () => n,
-		refresh: r
-	};
-}
-var j = T.createContext(null), M = T.createContext(null), N = T.createContext("body"), P = T.createContext(null), F = T.createContext(!0), ae = T.createContext(null), oe = T.createContext(null), se = T.createContext(null), ce = {
-	selectionMode: "none",
-	store: k([]),
-	toggleRow: () => {},
-	toggleAll: () => {},
-	radioName: "",
-	selectAllLabel: D,
-	selectionHeaderLabel: O,
-	selectOnRowClick: !1,
-	selectionAppearance: "brand",
-	subtleSelection: !1
-}, I = {
-	sort: null,
-	requestSort: () => {}
-}, L = {
-	selectionCellProps: void 0,
-	hasSelectionCell: !0,
-	rowId: void 0,
-	isSelected: !1,
-	disabled: !1,
-	invisible: !1,
-	ariaLabel: void 0,
-	ariaLabelledBy: void 0
-};
-function R(e) {
-	return T.useContext(j) || (i(e, "DataGrid"), ce);
-}
-function le(e) {
-	return T.useContext(se) || (i(e, "DataGrid.Row"), L);
-}
-function z(e) {
-	return T.useContext(M) || (i(e, "DataGrid"), I);
-}
-var ue = [];
-function de(e) {
+var ve = [], ye = [];
+function L(e) {
 	return e === void 0 ? void 0 : Array.from(e);
 }
-function fe(e, t) {
+function be(e, t) {
 	return e.length === t.length && e.every((e, n) => e === t[n]);
 }
-function pe({ key: e, node: t }) {
-	return /* @__PURE__ */ E(T.Fragment, { children: t }, e);
+function xe(e, t, n) {
+	if (n.length === 0) return e;
+	let r = new Set(e), i = _(r, n).all ? h(r, n) : g(r, n), a = new Set(t);
+	return [...Array.from(i).filter((e) => !a.has(e)), ...t.filter((e) => i.has(e))];
+}
+function Se({ key: e, node: t }) {
+	return /* @__PURE__ */ I(F.Fragment, { children: t }, e);
 }
-function B(e) {
-	return a("DataGrid", e.columnId, e.id, "columns[].id", "columns[].columnId");
+function Ce(e) {
+	return t(e).filter(({ node: e }) => F.isValidElement(e)).length;
 }
-function me(e) {
-	s(`DataGrid:duplicate-rowId:${e}`, `DataGrid: several rows share the rowId "${e}". Row ids must be unique within a DataGrid; rows with the same rowId are selected and deselected together.`);
+function R(e) {
+	return i("DataGrid", e.columnId, e.id, "columns[].id", "columns[].columnId");
 }
-var V = "px-4 py-3 border-b border-border", H = {
+function we(e) {
+	o(`DataGrid:duplicate-rowId:${e}`, `DataGrid: several rows share the rowId "${e}". Row ids must be unique within a DataGrid; rows with the same rowId are selected and deselected together.`);
+}
+var Te = {
 	brand: "hover:bg-subtle-hover data-[selected]:bg-selected transition-colors motion-reduce:transition-none",
 	neutral: "hover:bg-subtle-hover data-[selected]:bg-subtle-selected transition-colors motion-reduce:transition-none",
 	none: "hover:bg-subtle-hover transition-colors motion-reduce:transition-none"
 };
-function U(e) {
-	return ne(e) === "dataGridSelectionCell";
-}
-function W(r) {
-	let { items: i, getRowId: l, sort: u, defaultSort: f, sortColumn: p, defaultSortColumn: m, sortDirection: h, defaultSortDirection: b, onSortChange: x, selectionMode: S = "none", selectedItems: ee, defaultSelectedItems: C, onSelectedItemsChange: te, selectedKeys: w, defaultSelectedKeys: ne, onSelectionChange: re, labels: ie, selectOnRowClick: A = !1, selectionAppearance: N = "brand", subtleSelection: P = !1, columns: F, containerProps: ce, children: I, className: L, onKeyDown: R, onFocus: le, onBlur: z, ref: me, ...V } = r, H = i !== void 0, U = u !== void 0 || f !== void 0, W = !U && !H, [G, K] = T.useState(!W);
-	!W && !G && K(!0);
-	let he = G || !W, ge = p !== void 0 || h !== void 0;
-	p !== void 0 && o("DataGrid", "sortColumn", "sort"), h !== void 0 && o("DataGrid", "sortDirection", "sort"), m !== void 0 && o("DataGrid", "defaultSortColumn", "defaultSort"), b !== void 0 && o("DataGrid", "defaultSortDirection", "defaultSort");
-	let _e = ge || m !== void 0 || b !== void 0, ye = U && _e, X = !W && !U && _e;
-	T.useEffect(() => {
-		ye ? s("DataGrid:mixed-sort", "DataGrid: do not mix `sort`/`defaultSort` with the deprecated `sortColumn`/`sortDirection`/`defaultSortColumn`/`defaultSortDirection`. `sort`/`defaultSort` win.") : X && s("DataGrid:items-deprecated-sort", "DataGrid: the deprecated `sortColumn`/`sortDirection`/`defaultSortColumn`/`defaultSortDirection` do not apply to a grid with `items` and are ignored. Pass `sort` or `defaultSort`.");
-	}, [ye, X]), T.useEffect(() => {
-		W && (p !== void 0 && h === void 0 ? s("DataGrid:sortColumn-without-sortDirection", "DataGrid: `sortColumn` is controlled but `sortDirection` is not (mixed control). The direction is kept internally and toggles on repeated clicks, as in 0.4. Pass `sort` (`{ columnId, direction }`) to control both.") : h !== void 0 && p === void 0 && s("DataGrid:sortDirection-without-sortColumn", "DataGrid: `sortDirection` is controlled but `sortColumn` is not (mixed control). The column is kept internally and follows the clicked header, as in 0.4. Pass `sort` (`{ columnId, direction }`) to control both."));
+function z(r) {
+	let { items: c, getRowId: l, isSelectionDisabled: d, sort: f, defaultSort: h, sortColumn: g, defaultSortColumn: _, sortDirection: y, defaultSortDirection: b, onSortChange: ne, selectionMode: x = "none", selectedItems: re, defaultSelectedItems: S, onSelectedItemsChange: C, selectedKeys: oe, defaultSelectedKeys: le, onSelectionChange: k, labels: A, selectOnRowClick: j = !1, selectionAppearance: ge = "brand", subtleSelection: N = !1, columns: P, resizableColumns: _e = !1, columnSizingOptions: we, columnWidths: Te, defaultColumnWidths: z, onColumnWidthsChange: B, virtualWindow: U, containerProps: W, children: G, className: De, style: Oe, onKeyDown: ke, onFocus: Ae, onBlur: je, onPointerDownCapture: Me, ref: Ne, ...Pe } = r, K = c !== void 0, Fe = f !== void 0 || h !== void 0, q = !Fe && !K, [Ie, Le] = F.useState(!q);
+	!q && !Ie && Le(!0);
+	let Re = Ie || !q, ze = g !== void 0 || y !== void 0;
+	g !== void 0 && a("DataGrid", "sortColumn", "sort"), y !== void 0 && a("DataGrid", "sortDirection", "sort"), _ !== void 0 && a("DataGrid", "defaultSortColumn", "defaultSort"), b !== void 0 && a("DataGrid", "defaultSortDirection", "defaultSort");
+	let Be = ze || _ !== void 0 || b !== void 0, Ve = Fe && Be, He = !q && !Fe && Be;
+	F.useEffect(() => {
+		Ve ? o("DataGrid:mixed-sort", "DataGrid: do not mix `sort`/`defaultSort` with the deprecated `sortColumn`/`sortDirection`/`defaultSortColumn`/`defaultSortDirection`. `sort`/`defaultSort` win.") : He && o("DataGrid:items-deprecated-sort", "DataGrid: the deprecated `sortColumn`/`sortDirection`/`defaultSortColumn`/`defaultSortDirection` do not apply to a grid with `items` and are ignored. Pass `sort` or `defaultSort`.");
+	}, [Ve, He]), F.useEffect(() => {
+		q && (g !== void 0 && y === void 0 ? o("DataGrid:sortColumn-without-sortDirection", "DataGrid: `sortColumn` is controlled but `sortDirection` is not (mixed control). The direction is kept internally and toggles on repeated clicks, as in 0.4. Pass `sort` (`{ columnId, direction }`) to control both.") : y !== void 0 && g === void 0 && o("DataGrid:sortDirection-without-sortColumn", "DataGrid: `sortDirection` is controlled but `sortColumn` is not (mixed control). The column is kept internally and follows the clicked header, as in 0.4. Pass `sort` (`{ columnId, direction }`) to control both."));
 	}, [
-		W,
-		p,
-		h
+		q,
+		g,
+		y
 	]);
-	let [be, xe] = T.useState(() => ({
-		column: m ?? "",
+	let [Ue, We] = F.useState(() => ({
+		column: _ ?? "",
 		direction: b ?? "ascending"
-	})), Se = T.useMemo(() => {
-		if (p === void 0 && h === void 0) return;
-		let e = p ?? be.column;
+	})), Ge = F.useMemo(() => {
+		if (g === void 0 && y === void 0) return;
+		let e = g ?? Ue.column;
 		return e === "" ? null : {
 			columnId: e,
-			direction: h ?? be.direction
+			direction: y ?? Ue.direction
 		};
 	}, [
-		p,
-		h,
-		be
-	]), Ce = T.useMemo(() => m ? {
-		columnId: m,
+		g,
+		y,
+		Ue
+	]), Ke = F.useMemo(() => _ ? {
+		columnId: _,
 		direction: b ?? "ascending"
-	} : null, [m, b]), we = W ? Se : u, Te = Ce;
-	f === void 0 ? X && (Te = null) : Te = f;
-	let Ee = T.useRef(void 0), [De, Oe] = g(we, Te, (e) => {
-		e && (W && xe((t) => t.column === e.columnId && t.direction === e.direction ? t : {
+	} : null, [_, b]), qe = q ? Ge : f, Je = Ke;
+	h === void 0 ? He && (Je = null) : Je = h;
+	let Ye = F.useRef(void 0), [Xe, Ze] = p(qe, Je, (e) => {
+		e && (q && We((t) => t.column === e.columnId && t.direction === e.direction ? t : {
 			column: e.columnId,
 			direction: e.direction
-		}), x && (he ? x(e, Ee.current) : x(e.columnId, e.direction)));
-	}), ke = T.useCallback((e, t) => {
-		Ee.current = { event: t };
+		}), ne && (Re ? ne(e, Ye.current) : ne(e.columnId, e.direction)));
+	}), Qe = F.useCallback((e, t) => {
+		Ye.current = { event: t };
 		try {
-			Oe((t) => ({
+			Ze((t) => ({
 				columnId: e,
 				direction: t?.columnId === e && t.direction === "ascending" ? "descending" : "ascending"
 			}));
 		} finally {
-			Ee.current = void 0;
+			Ye.current = void 0;
 		}
-	}, [Oe]), Ae = T.useMemo(() => ({
-		sort: De,
-		requestSort: ke
-	}), [De, ke]);
-	re !== void 0 && o("DataGrid", "onSelectionChange", "onSelectedItemsChange");
-	let je = T.useMemo(() => de(w), [w]), Me = T.useMemo(() => de(ne), [ne]), Ne = a("DataGrid", ee, je, "selectedKeys", "selectedItems"), Pe = a("DataGrid", C, Me, "defaultSelectedKeys", "defaultSelectedItems") ?? ue, Fe = T.useRef(void 0), [Ie, Le] = g(Ne, Pe, (e) => {
-		te?.([...e], Fe.current), re?.(new Set(e));
-	}), Re = T.useCallback((e, t) => {
-		Fe.current = { event: e };
+	}, [Ze]), $e = F.useMemo(() => ({
+		sort: Xe,
+		requestSort: Qe
+	}), [Xe, Qe]);
+	k !== void 0 && a("DataGrid", "onSelectionChange", "onSelectedItemsChange");
+	let et = F.useMemo(() => L(oe), [oe]), tt = F.useMemo(() => L(le), [le]), nt = i("DataGrid", re, et, "selectedKeys", "selectedItems"), rt = i("DataGrid", S, tt, "defaultSelectedKeys", "defaultSelectedItems") ?? ve, it = F.useRef(void 0), [at, ot] = p(nt, rt, (e) => {
+		C?.([...e], it.current), k?.(new Set(e));
+	}), st = F.useCallback((e, t) => {
+		it.current = { event: e };
 		try {
-			Le(t);
+			ot(t);
 		} finally {
-			Fe.current = void 0;
+			it.current = void 0;
 		}
-	}, [Le]), Q = S === "single", [$] = T.useState(() => k(Ie, Q));
-	T.useLayoutEffect(() => {
-		$.setSelected(Ie);
-	}, [$, Ie]), T.useLayoutEffect(() => {
-		$.setSingleMode(Q);
-	}, [$, Q]);
-	let ze = T.useCallback((e, t) => {
-		Re(t, (t) => {
-			let n = $.prune(t), r;
-			return r = Q ? n[0] === e ? [] : [e] : n.includes(e) ? n.filter((t) => t !== e) : [...n, e], fe(r, t) ? t : r;
-		});
-	}, [
-		Q,
-		Re,
-		$
-	]), Be = Ie.length;
-	T.useEffect(() => {
-		Q && Be > 1 && s("DataGrid:single-several-selected", `DataGrid: a single-selection grid (selectionMode "single") has ${Be} selected row ids; only the first one that is rendered is selected. Pass at most one id in \`selectedItems\`/\`defaultSelectedItems\`, or use selectionMode="multiple".`);
-	}, [Q, Be]);
-	let Ve = T.useCallback((e) => {
-		Re(e, (e) => {
-			let t = new Set($.prune(e)), n = $.getRegistered(), r = n.filter((e) => !$.isDisabled(e)), i = r.length > 0 && r.every((e) => t.has(e)) ? n.filter((e) => $.isDisabled(e) && t.has(e)) : n.filter((e) => !$.isDisabled(e) || t.has(e));
-			return fe(i, e) ? e : i;
-		});
-	}, [Re, $]), He = _("wave-datagrid-selection"), Ue = ie?.selectAll ?? D, We = ie?.selectionHeader ?? O, Ge = T.useMemo(() => ({
-		selectionMode: S,
-		store: $,
-		toggleRow: ze,
-		toggleAll: Ve,
-		radioName: He,
-		selectAllLabel: Ue,
-		selectionHeaderLabel: We,
-		selectOnRowClick: A,
-		selectionAppearance: N,
-		subtleSelection: P
-	}), [
-		S,
-		$,
-		ze,
-		Ve,
-		He,
-		Ue,
-		We,
-		A,
-		N,
-		P
-	]), { gridRef: Ke, gridProps: qe } = y(), Je = v(me, Ke), Ye = T.useMemo(() => {
-		if (i === void 0) return null;
+	}, [ot]), J = F.useMemo(() => {
+		if (c === void 0) return null;
 		let e = /* @__PURE__ */ new Set();
-		return i.map((t, n) => {
+		return c.map((t, n) => {
 			let r = l ? l(t) : String(n), i = e.has(r) ? `${r}\u0000${n}` : r;
 			return e.add(i), {
 				item: t,
@@ -307,79 +124,221 @@ function W(r) {
 				key: i
 			};
 		});
-	}, [i, l]), Xe = De?.columnId, Ze = De?.direction, Qe = T.useMemo(() => {
-		if (H && Xe !== void 0 && F) return F.find((e) => B(e) === Xe)?.compare;
+	}, [c, l]), ct = x !== "none", lt = F.useMemo(() => J === null || !d || !ct ? null : J.map((e) => d(e.item, e.index)), [
+		J,
+		d,
+		ct
+	]), ut = F.useMemo(() => {
+		if (J === null || !ct) return null;
+		let e = /* @__PURE__ */ new Set();
+		if (lt) for (let t of J) lt[t.index] && e.add(t.rowId);
+		return {
+			ids: J.map((e) => e.rowId),
+			disabled: e
+		};
+	}, [
+		J,
+		lt,
+		ct
+	]), Y = x === "single", [X] = F.useState(() => O(at, Y, ut));
+	F.useLayoutEffect(() => {
+		X.setUniverse(ut);
+	}, [X, ut]), F.useLayoutEffect(() => {
+		X.setSelected(at);
+	}, [X, at]), F.useLayoutEffect(() => {
+		X.setSingleMode(Y);
+	}, [X, Y]);
+	let dt = F.useCallback((e, t) => {
+		st(t, (t) => {
+			let n;
+			if (K) {
+				let r = new Set(Y ? t.slice(0, 1) : t);
+				n = Array.from(v(r, e, Y ? "single" : "multiple", { allowEmpty: !0 }));
+			} else {
+				let r = X.prune(t);
+				n = Y ? r[0] === e ? [] : [e] : r.includes(e) ? r.filter((t) => t !== e) : [...r, e];
+			}
+			return be(n, t) ? t : n;
+		});
 	}, [
-		H,
-		Xe,
-		F
-	]), $e = T.useMemo(() => {
-		if (Ye === null || !Qe) return Ye;
-		let e = Qe;
-		return Ye.slice().sort(Ze === "descending" ? (t, n) => -e(t.item, n.item) : (t, n) => e(t.item, n.item));
+		K,
+		Y,
+		st,
+		X
+	]), ft = at.length;
+	F.useEffect(() => {
+		Y && ft > 1 && o("DataGrid:single-several-selected", `DataGrid: a single-selection grid (selectionMode "single") has ${ft} selected row ids; only ${K ? "the first one" : "the first one that is rendered"} is selected. Pass at most one id in \`selectedItems\`/\`defaultSelectedItems\`, or use selectionMode="multiple".`);
 	}, [
-		Ye,
-		Qe,
-		Ze
-	]), et = T.useMemo(() => {
-		if (!F || !H) return null;
-		let e = F.map((e, t) => B(e) ?? t);
-		return (t) => /* @__PURE__ */ E(ve, { children: F.map((n, r) => /* @__PURE__ */ E(Z, { children: n.renderCell?.(t) }, e[r])) });
-	}, [F, H]), tt = T.useMemo(() => ({
-		rows: $e,
-		renderColumnsRow: et
-	}), [$e, et]), nt = F?.some((e) => e.columnId === void 0 && e.id === void 0) ?? !1;
-	T.useEffect(() => {
-		nt && s("DataGrid:column-without-columnId", "DataGrid: a column in `columns` has no `columnId` (nor the deprecated `id`), so its header cannot sort. Give every column a unique `columnId`.");
-	}, [nt]);
-	let rt = I, it = F ? t(I) : [], at = (e) => it.some(({ node: t }) => n(t, e)), ot = F && !at(q) ? /* @__PURE__ */ E(q, { children: /* @__PURE__ */ E("tr", { children: F.map((e, t) => {
-		let n = B(e);
-		return /* @__PURE__ */ E(J, {
+		Y,
+		ft,
+		K
+	]);
+	let pt = F.useCallback((e) => {
+		st(e, (e) => {
+			let t;
+			if (K) t = xe(e, X.getUniverseIds(), X.getSelectableIds());
+			else {
+				let n = new Set(X.prune(e)), r = X.getRegistered(), i = r.filter((e) => !X.isDisabled(e));
+				t = i.length > 0 && i.every((e) => n.has(e)) ? r.filter((e) => X.isDisabled(e) && n.has(e)) : r.filter((e) => !X.isDisabled(e) || n.has(e));
+			}
+			return be(t, e) ? e : t;
+		});
+	}, [
+		K,
+		st,
+		X
+	]), mt = ee("wave-datagrid-selection"), ht = A?.selectAll ?? "Select all rows", gt = A?.selectionHeader ?? "Selection", _t = F.useMemo(() => ({
+		selectionMode: x,
+		store: X,
+		toggleRow: dt,
+		toggleAll: pt,
+		radioName: mt,
+		selectAllLabel: ht,
+		selectionHeaderLabel: gt,
+		selectOnRowClick: j,
+		selectionAppearance: ge,
+		subtleSelection: N
+	}), [
+		x,
+		X,
+		dt,
+		pt,
+		mt,
+		ht,
+		gt,
+		j,
+		ge,
+		N
+	]), vt = Xe?.columnId, yt = Xe?.direction, bt = F.useMemo(() => {
+		if (K && vt !== void 0 && P) return P.find((e) => R(e) === vt)?.compare;
+	}, [
+		K,
+		vt,
+		P
+	]), xt = F.useMemo(() => {
+		if (J === null || !bt) return J;
+		let e = bt;
+		return J.slice().sort(yt === "descending" ? (t, n) => -e(t.item, n.item) : (t, n) => e(t.item, n.item));
+	}, [
+		J,
+		bt,
+		yt
+	]), St = F.useMemo(() => {
+		if (!P || !K) return null;
+		let e = P.map((e, t) => R(e) ?? t);
+		return (t) => /* @__PURE__ */ I(H, { children: P.map((n, r) => /* @__PURE__ */ I(Ee, { children: n.renderCell?.(t) }, e[r])) });
+	}, [P, K]), Ct = F.useMemo(() => ({
+		rows: xt,
+		renderColumnsRow: St,
+		selectionDisabled: lt
+	}), [
+		xt,
+		St,
+		lt
+	]), wt = P?.some((e) => e.columnId === void 0 && e.id === void 0) ?? !1;
+	F.useEffect(() => {
+		wt && o("DataGrid:column-without-columnId", "DataGrid: a column in `columns` has no `columnId` (nor the deprecated `id`), so its header cannot sort. Give every column a unique `columnId`.");
+	}, [wt]);
+	let Tt = P ? t(G) : [], Et = (e) => Tt.find(({ node: t }) => n(t, e))?.node, Dt = Et(M), Ot = Et(V), kt = n(Ot, V) ? Ot.props.children : void 0, At = U !== void 0 && K && P !== void 0 && (kt === void 0 || typeof kt == "function") ? U : null, Z = At !== null, jt = n(Dt, M) ? Ce(Dt.props.children) : 1, Mt = c?.length ?? 0, { gridRef: Nt, gridProps: Pt, activeRowIndex: Ft, pendingRowIndex: It } = te({ model: D(At, Mt, jt) }), Q = se({
+		virtualWindow: At,
+		ignored: U !== void 0 && !Z,
+		rows: xt,
+		headerRowCount: jt,
+		columnCount: (P?.length ?? 0) + +!!ct,
+		activeRowIndex: Ft,
+		pendingRowIndex: It
+	}), Lt = m(Ne, Nt, Q.tableRef), Rt = (e) => {
+		Pt.onFocus(e), Q.onFocus(e);
+	}, zt = (e) => {
+		Pt.onBlur(e), Q.onBlur(e);
+	}, Bt = _e || we !== void 0 || Te !== void 0 || z !== void 0, Vt = Bt && !(P && K);
+	F.useEffect(() => {
+		Vt && o("DataGrid:resizable-columns-require-columns", "DataGrid: `resizableColumns`, `columnSizingOptions`, `columnWidths` and `defaultColumnWidths` need the `columns` prop together with `items`, and are ignored without them. Render the grid from `items` and `columns`.");
+	}, [Vt]);
+	let Ht = Bt && !Vt || Z, Ut = F.useMemo(() => Ht && P ? P.map(R) : ye, [Ht, P]), $ = ae({
+		enabled: Ht,
+		resizable: _e,
+		columnIds: Ut,
+		selectionColumn: x !== "none",
+		columnSizingOptions: we,
+		columnWidths: Te,
+		defaultColumnWidths: z,
+		onColumnWidthsChange: B,
+		resizeColumnLabel: A?.resizeColumn,
+		columnWidthText: A?.columnWidth
+	}), Wt = G, Gt = P && Dt === void 0 ? /* @__PURE__ */ I(M, { children: /* @__PURE__ */ I("tr", { children: P.map((e, t) => {
+		let n = R(e);
+		return /* @__PURE__ */ I(he, {
 			columnId: n,
 			sortable: e.sortable ?? e.compare !== void 0,
 			children: e.renderHeaderCell ? e.renderHeaderCell() : e.label
 		}, n ?? t);
-	}) }) }, "wave-generated-header") : null, st = F && H && !at(Y) ? /* @__PURE__ */ E(Y, {}, "wave-generated-body") : null;
-	if (ot || st) {
-		let e = ({ node: e }) => n(e, "caption"), t = it.filter((t) => !e(t)), r = st ? t.findIndex(({ node: e }) => n(e, "tfoot")) : -1, i = r >= 0 ? r : t.length;
-		rt = [
-			...it.filter(e).map(pe),
-			ot,
-			...t.slice(0, i).map(pe),
-			st,
-			...t.slice(i).map(pe)
+	}) }) }, "wave-generated-header") : null, Kt = P && K && Ot === void 0 ? /* @__PURE__ */ I(V, {}, "wave-generated-body") : null;
+	if (Gt || Kt || $.colgroup) {
+		let e = ({ node: e }) => n(e, "caption"), t = Tt.filter((t) => !e(t)), r = Kt ? t.findIndex(({ node: e }) => n(e, "tfoot")) : -1, i = r >= 0 ? r : t.length;
+		Wt = [
+			...Tt.filter(e).map(Se),
+			$.colgroup,
+			Gt,
+			...t.slice(0, i).map(Se),
+			Kt,
+			...t.slice(i).map(Se)
 		];
 	}
-	let { className: ct, "aria-label": lt, "aria-labelledby": ut, ...dt } = ce ?? {}, ft = dt.role !== void 0, pt = !ft && (lt !== void 0 || ut !== void 0);
-	return T.useEffect(() => {
-		pt && s("DataGrid:container-name-without-role", "DataGrid: `containerProps[\"aria-label\"]`/`[\"aria-labelledby\"]` is ignored because the wrapper has no role. Name the grid itself (`aria-label` on DataGrid), or pass a `role` (e.g. \"region\") in `containerProps` too.");
-	}, [pt]), /* @__PURE__ */ E(j.Provider, {
-		value: Ge,
-		children: /* @__PURE__ */ E(M.Provider, {
-			value: Ae,
-			children: /* @__PURE__ */ E(ae.Provider, {
-				value: tt,
-				children: /* @__PURE__ */ E(se.Provider, {
+	let { className: qt, "aria-label": Jt, "aria-labelledby": Yt, ref: Xt, ...Zt } = W ?? {}, Qt = m(Xt, Q.scrollerRef, At?.scrollRef), $t = Zt.role !== void 0, en = !$t && (Jt !== void 0 || Yt !== void 0);
+	return F.useEffect(() => {
+		en && o("DataGrid:container-name-without-role", "DataGrid: `containerProps[\"aria-label\"]`/`[\"aria-labelledby\"]` is ignored because the wrapper has no role. Name the grid itself (`aria-label` on DataGrid), or pass a `role` (e.g. \"region\") in `containerProps` too.");
+	}, [en]), /* @__PURE__ */ I(ce.Provider, {
+		value: _t,
+		children: /* @__PURE__ */ I(me.Provider, {
+			value: $e,
+			children: /* @__PURE__ */ I(de.Provider, {
+				value: Ct,
+				children: /* @__PURE__ */ I(fe.Provider, {
 					value: null,
-					children: /* @__PURE__ */ E(oe.Provider, {
+					children: /* @__PURE__ */ I(pe.Provider, {
 						value: null,
-						children: /* @__PURE__ */ E("div", {
-							...dt,
-							"aria-label": ft ? lt : void 0,
-							"aria-labelledby": ft ? ut : void 0,
-							className: e(d.container, "overflow-x-auto rounded-md border border-border", ct),
-							children: /* @__PURE__ */ E("table", {
-								ref: Je,
-								role: "grid",
-								"aria-multiselectable": S === "multiple" || void 0,
-								"data-selection-appearance": N,
-								"data-subtle-selection": P ? "" : void 0,
-								className: e(d.root, "w-full border-separate border-spacing-0", P && "group/grid", L),
-								...V,
-								onKeyDown: c(R, qe.onKeyDown),
-								onFocus: c(le, qe.onFocus, { checkDefaultPrevented: !1 }),
-								onBlur: c(z, qe.onBlur, { checkDefaultPrevented: !1 }),
-								children: rt
+						children: /* @__PURE__ */ I(ue.Provider, {
+							value: void 0,
+							children: /* @__PURE__ */ I(ie.Provider, {
+								value: $.resizeContext,
+								children: /* @__PURE__ */ I(w.Provider, {
+									value: $.colgroup !== null,
+									children: /* @__PURE__ */ I("div", {
+										tabIndex: Z ? -1 : void 0,
+										...Zt,
+										ref: Qt,
+										"aria-label": $t ? Jt : void 0,
+										"aria-labelledby": $t ? Yt : void 0,
+										className: e(u.container, "overflow-x-auto rounded-md border border-border", Z && "[overflow-anchor:none]", qt),
+										children: /* @__PURE__ */ I("table", {
+											ref: Lt,
+											role: "grid",
+											"aria-multiselectable": x === "multiple" || void 0,
+											"aria-rowcount": Z ? Mt + jt : void 0,
+											"data-selection-appearance": ge,
+											"data-subtle-selection": N ? "" : void 0,
+											"data-resizing": $.resizing ? "" : void 0,
+											className: e(u.root, "w-full border-separate border-spacing-0", N && "group/grid", De),
+											style: $.tableStyle ? {
+												...$.tableStyle,
+												...Oe
+											} : Oe,
+											...Pe,
+											onKeyDown: s(ke, Pt.onKeyDown),
+											onFocus: s(Ae, Rt, { checkDefaultPrevented: !1 }),
+											onBlur: s(je, zt, { checkDefaultPrevented: !1 }),
+											onPointerDownCapture: s(Me, Q.onPointerDownCapture),
+											children: /* @__PURE__ */ I(T.Provider, {
+												value: Q.context,
+												children: /* @__PURE__ */ I(E.Provider, {
+													value: null,
+													children: Wt
+												})
+											})
+										})
+									})
+								})
 							})
 						})
 					})
@@ -388,332 +347,270 @@ function W(r) {
 		})
 	});
 }
-W.displayName = "DataGrid";
-function G({ selectionMode: t, stableClassName: n, cellProps: r, ref: i }) {
-	let { store: a, toggleAll: o, selectAllLabel: s, selectionHeaderLabel: c, subtleSelection: l } = R("DataGrid.Header"), u = T.useSyncExternalStore(a.subscribeSelectAll, a.getSelectAllState, a.getSelectAllState), { className: d, disabled: f, invisible: m, controlRef: h, "aria-label": g, "aria-labelledby": _, "aria-describedby": v, ...y } = r ?? {}, x = !1;
-	return u === "all" ? x = !0 : u === "some" && (x = "mixed"), /* @__PURE__ */ E("th", {
-		scope: "col",
-		...y,
-		ref: i,
-		"data-selection-cell": "",
-		className: e(n, p.selectionCell, C, "text-start", b, d),
-		children: t === "multiple" ? /* @__PURE__ */ E(te, {
-			ref: h,
-			type: "checkbox",
-			"aria-label": g ?? (_ === void 0 ? s : void 0),
-			"aria-labelledby": _,
-			"aria-describedby": v,
-			checked: x,
-			disabled: f,
-			invisible: m,
-			subtle: l,
-			reveal: "grid",
-			onChange: (e) => o(e.nativeEvent),
-			className: p.selectAllCheckbox
-		}) : /* @__PURE__ */ E("span", {
-			className: "sr-only",
-			children: c
-		})
-	});
-}
-var K = {
-	subscribe: () => () => {},
-	register: () => () => {},
-	getFirst: () => null,
-	refresh: () => {}
-};
-function he({ selectionMode: t, initialFirst: n, stableClassName: r, cellProps: i, ref: a }) {
-	let o = T.useContext(P) ?? K, [s] = T.useState(() => ({})), c = T.useRef(null), l = v(c, a), u = T.useCallback(() => {
-		let e = o.getFirst();
-		return e === null ? n : e === s;
+z.displayName = "DataGrid";
+var B = F.memo(function({ item: e, index: t, rowId: n, selectionDisabled: r, render: i, position: a, ariaRowIndex: o, height: s }) {
+	let c = F.useMemo(() => a === void 0 || o === void 0 ? null : {
+		index: a,
+		ariaRowIndex: o,
+		height: s
 	}, [
+		a,
 		o,
-		s,
-		n
-	]), d = T.useCallback(() => n, [n]), f = T.useSyncExternalStore(o.subscribe, u, d);
-	if (T.useLayoutEffect(() => o.register(s, () => c.current), [o, s]), f) return /* @__PURE__ */ E(G, {
-		ref: l,
-		selectionMode: t,
-		stableClassName: r,
-		cellProps: i
-	});
-	let { className: m, disabled: h, invisible: g, controlRef: _, "aria-label": y, "aria-labelledby": x, "aria-describedby": S, ...ee } = i ?? {};
-	return /* @__PURE__ */ E("td", {
-		...ee,
-		ref: l,
-		"data-selection-cell": "",
-		className: e(r, p.selectionCell, C, b, m)
-	});
-}
-function ge(e, r) {
-	let i = !0, a = (e) => T.Children.map(e, (e) => {
-		if (n(e, T.Fragment)) return T.cloneElement(e, void 0, a(e.props.children));
-		if (!T.isValidElement(e)) return e;
-		let o = i;
-		if (i = !1, n(e, "tr")) {
-			let n = e.props.children, i = r === "none" || t(n).some(({ node: e }) => U(e)) ? null : /* @__PURE__ */ E(he, {
-				selectionMode: r,
-				initialFirst: o
-			});
-			return T.cloneElement(e, void 0, i, /* @__PURE__ */ E(F.Provider, {
-				value: o,
-				children: n
-			}));
-		}
-		return /* @__PURE__ */ E(F.Provider, {
-			value: o,
-			children: e
-		});
-	});
-	return a(e);
-}
-var q = ({ children: t, className: n, ref: i, ...a }) => {
-	let { selectionMode: o } = R("DataGrid.Header"), [c, l] = T.useState(null), u = v(i, l), [d] = T.useState(A), f = ge(t, o);
-	return T.useLayoutEffect(() => {
-		d.refresh();
-	}), T.useEffect(() => {
-		if (!r || !c || o === "none") return;
-		let e = Array.from(c.rows, (e) => Array.from(e.cells).filter((e) => e.hasAttribute("data-selection-cell")));
-		e.some((e, t) => e.length === 0 && c.rows[t].cells.length > 0) && s("DataGrid.Header:missing-selection-cell", "DataGrid.Header: a header row has no selection column header cell, so the header has one column fewer than the selectable rows. Render header rows as `<tr>` children of DataGrid.Header (a Fragment is fine), or use `DataGrid.Row` for a header row that another component renders."), e.some((e) => e.length > 1) && s("DataGrid.Header:several-selection-cells", "DataGrid.Header: a header row has more than one selection cell. A DataGrid.SelectionCell rendered by another component is not seen, so the row also gets the automatic cell: render DataGrid.SelectionCell as a child of the row (a Fragment is fine).");
-	}), /* @__PURE__ */ E(N.Provider, {
-		value: "header",
-		children: /* @__PURE__ */ E(P.Provider, {
-			value: d,
-			children: /* @__PURE__ */ E("thead", {
-				ref: u,
-				className: e(p.root, "bg-card", n),
-				...a,
-				children: f
+		s
+	]);
+	return /* @__PURE__ */ I(pe.Provider, {
+		value: n,
+		children: /* @__PURE__ */ I(ue.Provider, {
+			value: r,
+			children: /* @__PURE__ */ I(E.Provider, {
+				value: c,
+				children: i(e, t)
 			})
 		})
 	});
-};
-q.displayName = "DataGridHeader";
-var J = ({ columnId: t, sortable: n = !1, sortIcon: r, children: i, className: a, onClick: o, ref: l, ...u }) => {
-	let { sort: d, requestSort: p } = z("DataGrid.HeaderCell"), m = n && t ? t : void 0, h = m !== void 0 && d?.columnId === m ? d.direction : null, g = (e) => {
-		let t = e.currentTarget.firstElementChild;
-		m !== void 0 && t?.localName === "button" && t.contains(e.target) && p(m, e.nativeEvent);
-	};
-	return T.useEffect(() => {
-		n && !t && s("DataGrid.HeaderCell:sortable-without-columnId", "DataGrid.HeaderCell: `sortable` needs a `columnId`; the header is rendered as not sortable.");
-	}, [n, t]), /* @__PURE__ */ E("th", {
-		ref: l,
-		scope: "col",
-		"aria-sort": m === void 0 ? void 0 : h ?? "none",
-		className: e(f.root, V, "text-start align-middle font-semibold text-caption-1 uppercase tracking-wider", b, m !== void 0 && "p-0 hover:bg-subtle-hover", a),
-		...u,
-		onClick: m === void 0 ? o : c(o, g),
-		children: m === void 0 ? /* @__PURE__ */ E("span", {
-			className: "inline-flex items-center gap-1",
-			children: i
-		}) : /* @__PURE__ */ E(w, {
-			component: "DataGrid.HeaderCell",
-			direction: h,
-			sortIcon: r,
-			className: f.button,
-			iconClassName: f.sortIcon,
-			children: i
-		})
-	});
-};
-J.displayName = "DataGridHeaderCell";
-var _e = T.memo(function({ item: e, index: t, rowId: n, render: r }) {
-	return /* @__PURE__ */ E(oe.Provider, {
-		value: n,
-		children: r(e, t)
-	});
-}), Y = ({ children: t, className: n, ref: r, ...i }) => {
-	let a = T.useContext(ae), o = a?.rows ?? null, c = typeof t == "function" && o === null;
-	T.useEffect(() => {
-		c && s("DataGrid.Body:render-without-items", "DataGrid.Body: a render function child renders one row per item of the DataGrid's `items`, which is not set, so the body has no rows.");
-	}, [c]);
-	let u = (e) => e && o?.map((t) => /* @__PURE__ */ E(_e, {
-		item: t.item,
-		index: t.index,
-		rowId: t.rowId,
-		render: e
-	}, t.key)), d;
-	return d = typeof t == "function" ? u(t) : t === void 0 ? u(a?.renderColumnsRow ?? null) : t, /* @__PURE__ */ E(N.Provider, {
+}), V = ({ children: t, className: n, ref: r, ...i }) => {
+	let a = F.useContext(de), s = F.useContext(T), l = a?.rows ?? null, u = typeof t == "function" && l === null;
+	F.useEffect(() => {
+		u && o("DataGrid.Body:render-without-items", "DataGrid.Body: a render function child renders one row per item of the DataGrid's `items`, which is not set, so the body has no rows.");
+	}, [u]);
+	let d = a?.selectionDisabled ?? null, f = (e) => {
+		if (!e || !l) return null;
+		if (s) {
+			let { headerRowCount: t, virtualWindow: n } = s;
+			return oe(s, l.length, (r) => {
+				let i = l[r];
+				return /* @__PURE__ */ I(B, {
+					item: i.item,
+					index: i.index,
+					rowId: i.rowId,
+					selectionDisabled: d?.[i.index],
+					render: e,
+					position: r,
+					ariaRowIndex: r + t + 1,
+					height: n.itemSize
+				}, `row:${i.key}`);
+			});
+		}
+		return l.map((t) => /* @__PURE__ */ I(B, {
+			item: t.item,
+			index: t.index,
+			rowId: t.rowId,
+			selectionDisabled: d?.[t.index],
+			render: e
+		}, t.key));
+	}, p;
+	return p = typeof t == "function" ? f(t) : t === void 0 ? f(a?.renderColumnsRow ?? null) : t, /* @__PURE__ */ I(k.Provider, {
 		value: "body",
-		children: /* @__PURE__ */ E("tbody", {
+		children: /* @__PURE__ */ I("tbody", {
 			ref: r,
-			className: e(l.root, n),
+			className: e(c.root, n),
 			...i,
-			children: d
+			children: p
 		})
 	});
 };
-Y.displayName = "DataGridBody";
-var ve = ({ rowId: i, selectionLabel: a, selectionCellProps: o, children: l, className: u, onClick: d, onKeyDown: f, ref: p, ...h }) => {
-	let { selectionMode: g, store: v, toggleRow: y, selectOnRowClick: b, selectionAppearance: C } = R("DataGrid.Row"), te = T.useContext(oe), w = i ?? te ?? void 0, ne = T.useContext(N), re = T.useContext(F), D = ne === "header", O = g !== "none" && !D, k = _("wave-datagrid-row-label"), A = t(l), j;
-	for (let { node: e } of A) if (U(e)) {
-		j = e.props;
+V.displayName = "DataGridBody";
+var H = ({ rowId: i, selectionLabel: a, selectionCellProps: c, children: l, className: u, style: f, onClick: p, onKeyDown: m, ref: h, ...g }) => {
+	let { selectionMode: _, store: v, toggleRow: te, selectOnRowClick: y, selectionAppearance: re } = A("DataGrid.Row"), S = F.useContext(E), C = F.useContext(pe), w = i ?? C ?? void 0, ie = F.useContext(k), ae = F.useContext(le), T = ie === "header", D = _ !== "none" && !T, oe = ee("wave-datagrid-row-label"), se = t(l), O;
+	for (let { node: e } of se) if (P(e)) {
+		O = e.props;
 		break;
 	}
-	let M = j !== void 0, P = j?.disabled ?? o?.disabled ?? !1, ae = j?.invisible ?? o?.invisible ?? !1, ce = j?.["aria-labelledby"], I = j?.["aria-label"] ?? o?.["aria-label"] ?? a, L = g === "single", le = T.useCallback(() => w !== void 0 && v.isSelected(w, L), [
+	let ce = O !== void 0, de = F.useContext(ue), me = O?.disabled ?? c?.disabled, j = me ?? de ?? !1, M = O?.invisible ?? c?.invisible ?? !1, he = O?.["aria-labelledby"], N = O?.["aria-label"] ?? c?.["aria-label"] ?? a, ve = _ === "single", ye = F.useCallback(() => w !== void 0 && v.isSelected(w, ve), [
 		w,
 		v,
-		L
-	]), z = T.useSyncExternalStore(v.subscribe, le, le);
-	T.useLayoutEffect(() => {
-		if (w === void 0 || D) return;
+		ve
+	]), L = F.useSyncExternalStore(v.subscribe, ye, ye);
+	F.useLayoutEffect(() => {
+		if (w === void 0 || T) return;
 		let e = v.register(w);
-		return r && v.countRegistrations(w) > 1 && me(w), e;
+		return r && v.countRegistrations(w) > 1 && we(w), e;
 	}, [
 		v,
 		w,
-		D
-	]), T.useLayoutEffect(() => {
-		if (w !== void 0 && !D && P) return v.disable(w);
+		T
+	]), F.useLayoutEffect(() => {
+		if (w !== void 0 && !T && j) return v.disable(w);
 	}, [
 		v,
 		w,
+		T,
+		j
+	]), F.useEffect(() => {
+		D && w === void 0 && o("DataGrid.Row:missing-rowId", "DataGrid.Row: a selectable grid needs a `rowId` on every row; this row has no selection control.");
+	}, [D, w]);
+	let be = D && w !== void 0 && de !== void 0 && me !== void 0 && me !== de;
+	F.useEffect(() => {
+		if (!be) return;
+		let e = (e) => e ? "disabled" : "enabled";
+		o("DataGrid:selection-disabled-mismatch", `DataGrid: the selection cell of row "${w}" is ${e(j)} (\`DataGrid.SelectionCell disabled\` or \`selectionCellProps.disabled\`), but \`isSelectionDisabled\` says its item is ${e(!j)}. Select-all skips a row that either one disables, and the row's control follows its cell: make them agree, or leave the cell's \`disabled\` unset to take it from \`isSelectionDisabled\`.`);
+	}, [
+		be,
+		w,
+		j
+	]);
+	let xe = D && i !== void 0 && C !== null && i !== C;
+	F.useEffect(() => {
+		xe ? o("DataGrid.Row:row-id-mismatch", "DataGrid.Row: a row rendered from the grid's `items` sets its own `rowId`, which differs from its item's id (`getRowId`, by default the item's index). Select-all and its checkbox use the ids from `getRowId`, so the row is outside them and select-all selects ids that no row has. Pass a `getRowId` that returns the row's id, and leave out `rowId`.") : D && w !== void 0 && C === null && v.isOutsideUniverse(w) && o("DataGrid.Row:row-id-outside-items", "DataGrid.Row: a selectable row in a grid with `items` has a `rowId` that is no item's id (`getRowId`, by default the item's index). Select-all and its checkbox use the ids of `items`, so the row is outside them. Render the rows from `items` (a `DataGrid.Body` render function, or `columns`) with a `getRowId` that returns their ids.");
+	}, [
+		xe,
 		D,
-		P
-	]), T.useEffect(() => {
-		O && w === void 0 && s("DataGrid.Row:missing-rowId", "DataGrid.Row: a selectable grid needs a `rowId` on every row; this row has no selection control.");
-	}, [O, w]);
-	let ue = O && w !== void 0 && I === void 0 && ce === void 0, de = (e) => {
-		if (!O || w === void 0 || e.key !== " ") return;
+		w,
+		C,
+		v
+	]);
+	let Ce = D && w !== void 0 && N === void 0 && he === void 0, R = (e) => {
+		if (!D || w === void 0 || e.key !== " ") return;
 		let t = e.target;
-		(t === e.currentTarget || t.parentElement === e.currentTarget) && (e.preventDefault(), P || y(w, e.nativeEvent));
-	}, fe = (e) => {
-		if (!b || !O || w === void 0 || P) return;
+		(t === e.currentTarget || t.parentElement === e.currentTarget) && (e.preventDefault(), j || te(w, e.nativeEvent));
+	}, z = (e) => {
+		if (!y || !D || w === void 0 || j) return;
 		let t = e.currentTarget;
-		ee(e, { isOwnPart: (e) => e.parentElement === t }) || S(e) || y(w, e.nativeEvent);
+		x(e, { isOwnPart: (e) => e.parentElement === t }) || ne(e) || te(w, e.nativeEvent);
 	}, B, V = -1;
-	if (ue) {
-		let e = A.findIndex(({ node: e }) => n(e, Z, "td", "th"));
+	if (Ce) {
+		let e = se.findIndex(({ node: e }) => n(e, Ee, "td", "th"));
 		if (e >= 0) {
-			let t = A[e].node;
-			B = t.props.id ?? k, t.props.id === void 0 && (V = e);
+			let t = se[e].node;
+			B = t.props.id ?? oe, t.props.id === void 0 && (V = e);
 		}
 	}
-	let W = A.map(({ key: e, node: t }, n) => pe({
+	let H = se.map(({ key: e, node: t }, n) => Se({
 		key: e,
-		node: n === V ? T.cloneElement(t, { id: k }) : t
-	})), G = ue && B === void 0;
-	T.useEffect(() => {
-		G && s("DataGrid.Row:selection-label", "DataGrid.Row: no child is a `DataGrid.Cell`, `<td>` or `<th>` element, so the row selection control is named \"Select row\". Pass `selectionLabel` (a cell rendered by another component is not seen).");
-	}, [G]);
-	let K = ce ?? B, ge = I ?? (K === void 0 ? "Select row" : void 0), q = T.useMemo(() => ({
-		selectionCellProps: o,
-		hasSelectionCell: M,
-		rowId: O ? w : void 0,
-		isSelected: z,
-		disabled: P,
-		invisible: ae,
-		ariaLabel: ge,
-		ariaLabelledBy: K
+		node: n === V ? F.cloneElement(t, { id: oe }) : t
+	})), W = Ce && B === void 0;
+	F.useEffect(() => {
+		W && o("DataGrid.Row:selection-label", "DataGrid.Row: no child is a `DataGrid.Cell`, `<td>` or `<th>` element, so the row selection control is named \"Select row\". Pass `selectionLabel` (a cell rendered by another component is not seen).");
+	}, [W]);
+	let G = he ?? B, De = N ?? (G === void 0 ? "Select row" : void 0), Oe = F.useMemo(() => ({
+		selectionCellProps: c,
+		hasSelectionCell: ce,
+		rowId: D ? w : void 0,
+		isSelected: L,
+		disabled: j,
+		invisible: M,
+		ariaLabel: De,
+		ariaLabelledBy: G
 	}), [
-		o,
-		M,
-		O,
+		c,
+		ce,
+		D,
 		w,
-		z,
-		P,
-		ae,
-		ge,
-		K
-	]), J = null;
-	return !M && D && g !== "none" ? J = /* @__PURE__ */ E(he, {
-		selectionMode: g,
-		initialFirst: re,
-		cellProps: o
-	}) : !M && O && (J = /* @__PURE__ */ E(ye, { component: "DataGrid.Row" })), /* @__PURE__ */ E(se.Provider, {
-		value: q,
-		children: /* @__PURE__ */ ie("tr", {
-			ref: p,
-			className: e(m.root, "group/table-row", !D && H[C], O && z && x.selectedContainer, u),
-			"aria-selected": O ? z : void 0,
-			"data-selected": O && z ? "" : void 0,
-			...h,
-			onClick: c(d, fe),
-			onKeyDown: c(f, de),
-			children: [J, W]
+		L,
+		j,
+		M,
+		De,
+		G
+	]), ke = null;
+	return !ce && T && _ !== "none" ? ke = /* @__PURE__ */ I(ge, {
+		selectionMode: _,
+		initialFirst: ae,
+		cellProps: c
+	}) : !ce && D && (ke = /* @__PURE__ */ I(U, { component: "DataGrid.Row" })), /* @__PURE__ */ I(fe.Provider, {
+		value: Oe,
+		children: /* @__PURE__ */ _e("tr", {
+			ref: h,
+			className: e(d.root, "group/table-row", !T && Te[re], D && L && b.selectedContainer, u),
+			"aria-selected": D ? L : void 0,
+			"data-selected": D && L ? "" : void 0,
+			...g,
+			style: S?.height === void 0 ? f : {
+				...f,
+				height: S.height
+			},
+			...S && {
+				"aria-rowindex": S.ariaRowIndex,
+				"data-row-index": S.index
+			},
+			onClick: s(p, z),
+			onKeyDown: s(m, R),
+			children: [ke, H]
 		})
 	});
 };
-ve.displayName = "DataGridRow";
-function ye({ component: t, stableClassName: n, className: r, controlRef: i, "aria-describedby": a, ref: o, ...s }) {
-	let { selectionMode: c, toggleRow: l, radioName: u, subtleSelection: d } = R(t), f = le(t), { rowId: p } = f, h = c === "single";
-	return /* @__PURE__ */ E("td", {
+H.displayName = "DataGridRow";
+function U({ component: t, stableClassName: n, className: r, controlRef: i, "aria-describedby": a, ref: o, ...s }) {
+	let { selectionMode: c, toggleRow: l, radioName: u, subtleSelection: f } = A(t), p = j(t), ee = F.useContext(E)?.index !== void 0, { rowId: m } = p, h = c === "single";
+	return /* @__PURE__ */ I("td", {
 		role: "gridcell",
 		...s,
 		ref: o,
 		"data-selection-cell": "",
-		className: e(n, m.selectionCell, C, b, f.selectionCellProps?.className, r),
-		children: p !== void 0 && c !== "none" && /* @__PURE__ */ E(te, {
+		className: e(n, d.selectionCell, re, ee && "py-0 align-middle", y, p.selectionCellProps?.className, r),
+		children: m !== void 0 && c !== "none" && /* @__PURE__ */ I(S, {
 			ref: i,
 			type: h ? "radio" : "checkbox",
 			name: h ? u : void 0,
 			form: h ? "" : void 0,
-			checked: f.isSelected,
-			disabled: f.disabled,
-			invisible: f.invisible,
-			subtle: d,
-			onChange: (e) => l(p, e.nativeEvent),
-			"aria-label": f.ariaLabel,
-			"aria-labelledby": f.ariaLabelledBy,
+			checked: p.isSelected,
+			disabled: p.disabled,
+			invisible: p.invisible,
+			subtle: f,
+			onChange: (e) => l(m, e.nativeEvent),
+			"aria-label": p.ariaLabel,
+			"aria-labelledby": p.ariaLabelledBy,
 			"aria-describedby": a,
-			className: m.selectionControl
+			className: d.selectionControl
 		})
 	});
 }
-var X = ({ disabled: t, invisible: n, className: r, "aria-label": i, "aria-labelledby": a, "aria-describedby": o, controlRef: c, ref: l, ...u }) => {
-	let { selectionMode: d } = R("DataGrid.SelectionCell"), f = T.useContext(N), p = T.useContext(F), m = T.useContext(se), g = d === "none", _ = !g && m !== null && !m.hasSelectionCell;
-	if (T.useEffect(() => {
-		g && s("DataGrid.SelectionCell:not-selectable", "DataGrid.SelectionCell: the grid has no row selection (`selectionMode` is \"none\"), so the cell renders nothing. Set `selectionMode` on the DataGrid, or remove the cell.");
-	}, [g]), T.useEffect(() => {
-		_ && s("DataGrid.SelectionCell:unseen", "DataGrid.SelectionCell: rendered by another component, so its DataGrid.Row did not see it and added its own selection cell. Render DataGrid.SelectionCell as a child of DataGrid.Row (a Fragment is fine).");
-	}, [_]), g) return null;
-	if (f === "header") {
-		let s = m?.selectionCellProps;
-		return /* @__PURE__ */ E(he, {
+var W = ({ disabled: t, invisible: n, className: r, "aria-label": i, "aria-labelledby": a, "aria-describedby": s, controlRef: c, ref: l, ...u }) => {
+	let { selectionMode: d } = A("DataGrid.SelectionCell"), p = F.useContext(k), ee = F.useContext(le), m = F.useContext(fe), h = d === "none", g = !h && m !== null && !m.hasSelectionCell;
+	if (F.useEffect(() => {
+		h && o("DataGrid.SelectionCell:not-selectable", "DataGrid.SelectionCell: the grid has no row selection (`selectionMode` is \"none\"), so the cell renders nothing. Set `selectionMode` on the DataGrid, or remove the cell.");
+	}, [h]), F.useEffect(() => {
+		g && o("DataGrid.SelectionCell:unseen", "DataGrid.SelectionCell: rendered by another component, so its DataGrid.Row did not see it and added its own selection cell. Render DataGrid.SelectionCell as a child of DataGrid.Row (a Fragment is fine).");
+	}, [g]), h) return null;
+	if (p === "header") {
+		let o = m?.selectionCellProps;
+		return /* @__PURE__ */ I(ge, {
 			ref: l,
 			selectionMode: d,
-			initialFirst: p,
-			stableClassName: h.root,
+			initialFirst: ee,
+			stableClassName: f.root,
 			cellProps: {
 				...u,
-				className: e(s?.className, r),
-				disabled: t ?? s?.disabled,
-				invisible: n ?? s?.invisible,
-				"aria-label": i ?? s?.["aria-label"],
+				className: e(o?.className, r),
+				disabled: t ?? o?.disabled,
+				invisible: n ?? o?.invisible,
+				"aria-label": i ?? o?.["aria-label"],
 				"aria-labelledby": a,
-				"aria-describedby": o,
+				"aria-describedby": s,
 				controlRef: c
 			}
 		});
 	}
-	return /* @__PURE__ */ E(ye, {
+	return /* @__PURE__ */ I(U, {
 		...u,
 		ref: l,
 		component: "DataGrid.SelectionCell",
-		stableClassName: h.root,
+		stableClassName: f.root,
 		className: r,
 		controlRef: c,
-		"aria-describedby": o
+		"aria-describedby": s
 	});
 };
-X.displayName = "DataGridSelectionCell", re(X, "dataGridSelectionCell");
-var Z = ({ children: t, className: n, ref: r, ...i }) => /* @__PURE__ */ E("td", {
-	ref: r,
-	role: "gridcell",
-	className: e(u.root, V, "relative text-body-1", b, n),
-	...i,
-	children: t
-});
-Z.displayName = "DataGridCell";
-var be = /* @__PURE__ */ Object.assign(W, {
-	Header: q,
-	HeaderCell: J,
-	Body: Y,
-	Row: ve,
-	Cell: Z,
-	SelectionCell: X
+W.displayName = "DataGridSelectionCell", C(W, "dataGridSelectionCell");
+var Ee = ({ children: t, className: n, ref: r, ...i }) => {
+	let a = F.useContext(w), o = F.useContext(E)?.index !== void 0;
+	return /* @__PURE__ */ I("td", {
+		ref: r,
+		role: "gridcell",
+		className: e(l.root, N, "relative text-body-1", (a || o) && "overflow-hidden text-ellipsis whitespace-nowrap", o && "py-0 align-middle", y, n),
+		...i,
+		children: t
+	});
+};
+Ee.displayName = "DataGridCell";
+var G = /* @__PURE__ */ Object.assign(z, {
+	Header: M,
+	HeaderCell: he,
+	Body: V,
+	Row: H,
+	Cell: Ee,
+	SelectionCell: W
 });
 //#endregion
-export { be as DataGrid, Y as DataGridBody, Z as DataGridCell, q as DataGridHeader, J as DataGridHeaderCell, ve as DataGridRow, X as DataGridSelectionCell, k as createSelectionStore };
+export { G as DataGrid, V as DataGridBody, Ee as DataGridCell, M as DataGridHeader, he as DataGridHeaderCell, H as DataGridRow, W as DataGridSelectionCell, O as createSelectionStore };
 
 //# sourceMappingURL=DataGrid.mjs.map