@mortenbrudvik/waveui 0.13.0 → 0.14.0

package/dist/components/table/DataGrid.mjs

@@ -3,21 +3,23 @@ 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 } from "../../lib/classNames.mjs";
-import { useControllable as h } from "../../hooks/useControllable.mjs";
-import { useId as ee } from "../../hooks/useId.mjs";
-import { useMergedRefs as g } from "../../hooks/useMergedRefs.mjs";
-import { useGridNavigation as te } from "./useGridNavigation.mjs";
-import { focusRingInset as _, forcedColors as v } from "../../lib/styles.mjs";
-import * as y from "react";
-import { Fragment as ne, jsx as b, jsxs as x } from "react/jsx-runtime";
+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";
 //#region src/components/table/DataGrid.tsx
-var S = "Select all rows", C = "Selection";
-function w(e, t = !1) {
-	let n = new Set(e), r = /* @__PURE__ */ new Map(), i = 0, a = "none", o = t, s, c = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Set(), u = (e) => {
+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();
-	}, d = () => {
-		if (s !== void 0) return s;
+	}, p = () => {
+		if (l !== void 0) return l;
 		let e = null;
 		for (let t of n) {
 			if (r.has(t)) {
@@ -26,54 +28,67 @@ function w(e, t = !1) {
 			}
 			e ??= t;
 		}
-		return s = e, e;
-	}, f = (e) => {
+		return l = e, e;
+	}, m = (e) => {
 		if (n.size < 2 || !n.has(e)) return;
-		let t = s;
-		s = void 0, o && d() !== t && u(c);
-	}, p = () => {
-		let e = i === 0 ? "none" : i === r.size ? "all" : "some";
-		e !== a && (a = e, u(l));
-	}, m = (e) => (t) => (e.add(t), () => {
+		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: m(c),
-		subscribeSelectAll: m(l),
+		subscribe: y(u),
+		subscribeSelectAll: y(d),
 		register(e) {
-			let t = r.get(e) ?? 0;
-			r.set(e, t + 1), t === 0 && n.has(e) && (i += 1), p(), t === 0 && f(e);
-			let a = !1;
+			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 () => {
-				if (a) return;
-				a = !0;
-				let t = (r.get(e) ?? 0) - 1;
-				if (t > 0) {
-					r.set(e, t);
-					return;
-				}
-				r.delete(e), n.has(e) && --i, p(), f(e);
+				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, s = void 0, i = 0;
-				for (let e of t) r.has(e) && (i += 1);
-				u(c), p();
+				n = t, l = void 0, o = 0;
+				for (let e of t) g(e) && (o += 1);
+				f(u), h();
 			}
 		},
 		setSingleMode(e) {
-			o = e;
+			c = e;
 		},
 		isSelected(e, t = !1) {
-			return t ? d() === e : n.has(e);
+			return t ? p() === e : n.has(e);
 		},
 		countRegistrations(e) {
 			return r.get(e) ?? 0;
 		},
 		getSelectAllState() {
-			return a;
+			return s;
 		},
 		getRegistered() {
 			return Array.from(r.keys());
@@ -83,7 +98,7 @@ function w(e, t = !1) {
 		}
 	};
 }
-function T() {
+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) {
@@ -114,245 +129,357 @@ function T() {
 		refresh: r
 	};
 }
-var E = y.createContext(null), D = y.createContext(null), O = y.createContext("body"), k = y.createContext(null), A = y.createContext(!0), j = {
+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: w([]),
+	store: k([]),
 	toggleRow: () => {},
 	toggleAll: () => {},
 	radioName: "",
-	selectAllLabel: S,
-	selectionHeaderLabel: C
-}, M = {
+	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 N(e) {
-	return y.useContext(E) || (i(e, "DataGrid"), j);
+function R(e) {
+	return T.useContext(j) || (i(e, "DataGrid"), ce);
 }
-function P(e) {
-	return y.useContext(D) || (i(e, "DataGrid"), M);
+function le(e) {
+	return T.useContext(se) || (i(e, "DataGrid.Row"), L);
 }
-var F = [];
-function I(e) {
+function z(e) {
+	return T.useContext(M) || (i(e, "DataGrid"), I);
+}
+var ue = [];
+function de(e) {
 	return e === void 0 ? void 0 : Array.from(e);
 }
-function L(e, t) {
+function fe(e, t) {
 	return e.length === t.length && e.every((e, n) => e === t[n]);
 }
-function R({ key: e, node: t }) {
-	return /* @__PURE__ */ b(y.Fragment, { children: t }, e);
+function pe({ key: e, node: t }) {
+	return /* @__PURE__ */ E(T.Fragment, { children: t }, e);
+}
+function B(e) {
+	return a("DataGrid", e.columnId, e.id, "columns[].id", "columns[].columnId");
 }
-function re(e) {
+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.`);
 }
-var z = "px-4 py-3 border-b border-border", B = "w-10 px-3 py-3 border-b border-border", V = "accent-primary cursor-pointer", H = (r) => {
-	let { sort: i, defaultSort: l, sortColumn: u, defaultSortColumn: f, sortDirection: p, defaultSortDirection: m, onSortChange: _, selectionMode: v = "none", selectedItems: T, defaultSelectedItems: O, onSelectedItemsChange: k, selectedKeys: A, defaultSelectedKeys: j, onSelectionChange: M, labels: N, columns: P, containerProps: re, children: z, className: B, onKeyDown: V, onFocus: H, onBlur: ie, ref: ae, ...U } = r, W = i !== void 0 || l !== void 0, [oe, q] = y.useState(W);
-	W && !oe && q(!0);
-	let J = oe || W, Y = u !== void 0 || p !== void 0;
-	u !== void 0 && o("DataGrid", "sortColumn", "sort"), p !== void 0 && o("DataGrid", "sortDirection", "sort"), f !== void 0 && o("DataGrid", "defaultSortColumn", "defaultSort"), m !== void 0 && o("DataGrid", "defaultSortDirection", "defaultSort");
-	let se = W && (Y || f !== void 0 || m !== void 0);
-	y.useEffect(() => {
-		se && s("DataGrid:mixed-sort", "DataGrid: do not mix `sort`/`defaultSort` with the deprecated `sortColumn`/`sortDirection`/`defaultSortColumn`/`defaultSortDirection`. `sort`/`defaultSort` win.");
-	}, [se]), y.useEffect(() => {
-		W || (u !== void 0 && p === 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.") : p !== void 0 && u === 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."));
+var V = "px-4 py-3 border-b border-border", H = {
+	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."));
 	}, [
 		W,
-		u,
-		p
+		p,
+		h
 	]);
-	let [ce, le] = y.useState(() => ({
-		column: f ?? "",
-		direction: m ?? "ascending"
-	})), ue = y.useMemo(() => {
-		if (u === void 0 && p === void 0) return;
-		let e = u ?? ce.column;
+	let [be, xe] = T.useState(() => ({
+		column: m ?? "",
+		direction: b ?? "ascending"
+	})), Se = T.useMemo(() => {
+		if (p === void 0 && h === void 0) return;
+		let e = p ?? be.column;
 		return e === "" ? null : {
 			columnId: e,
-			direction: p ?? ce.direction
+			direction: h ?? be.direction
 		};
 	}, [
-		u,
 		p,
-		ce
-	]), de = y.useMemo(() => f ? {
-		columnId: f,
-		direction: m ?? "ascending"
-	} : null, [f, m]), [fe, pe] = h(W ? i : ue, l === void 0 ? de : l, (e) => {
-		e && (W || le((t) => t.column === e.columnId && t.direction === e.direction ? t : {
+		h,
+		be
+	]), Ce = T.useMemo(() => m ? {
+		columnId: m,
+		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 : {
 			column: e.columnId,
 			direction: e.direction
-		}), _ && (J ? _(e) : _(e.columnId, e.direction)));
-	}), me = y.useCallback((e) => {
-		pe((t) => ({
-			columnId: e,
-			direction: t?.columnId === e && t.direction === "ascending" ? "descending" : "ascending"
-		}));
-	}, [pe]), he = y.useMemo(() => ({
-		sort: fe,
-		requestSort: me
-	}), [fe, me]);
-	M !== void 0 && o("DataGrid", "onSelectionChange", "onSelectedItemsChange");
-	let ge = y.useMemo(() => I(A), [A]), _e = y.useMemo(() => I(j), [j]), ve = a("DataGrid", T, ge, "selectedKeys", "selectedItems"), ye = a("DataGrid", O, _e, "defaultSelectedKeys", "defaultSelectedItems") ?? F, [X, Z] = h(ve, ye, (e) => {
-		k?.([...e]), M?.(new Set(e));
-	}), Q = v === "single", [$] = y.useState(() => w(X, Q));
-	y.useLayoutEffect(() => {
-		$.setSelected(X);
-	}, [$, X]), y.useLayoutEffect(() => {
+		}), x && (he ? x(e, Ee.current) : x(e.columnId, e.direction)));
+	}), ke = T.useCallback((e, t) => {
+		Ee.current = { event: t };
+		try {
+			Oe((t) => ({
+				columnId: e,
+				direction: t?.columnId === e && t.direction === "ascending" ? "descending" : "ascending"
+			}));
+		} finally {
+			Ee.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 };
+		try {
+			Le(t);
+		} finally {
+			Fe.current = void 0;
+		}
+	}, [Le]), Q = S === "single", [$] = T.useState(() => k(Ie, Q));
+	T.useLayoutEffect(() => {
+		$.setSelected(Ie);
+	}, [$, Ie]), T.useLayoutEffect(() => {
 		$.setSingleMode(Q);
 	}, [$, Q]);
-	let be = y.useCallback((e) => {
-		Z((t) => {
+	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], L(r, t) ? 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,
-		Z,
+		Re,
 		$
-	]), xe = X.length;
-	y.useEffect(() => {
-		Q && xe > 1 && s("DataGrid:single-several-selected", `DataGrid: a single-selection grid (selectionMode "single") has ${xe} 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, xe]);
-	let Se = y.useCallback(() => {
-		Z((e) => {
-			let t = $.prune(e), n = $.getRegistered(), r = n.length > 0 && n.every((e) => t.includes(e)) ? [] : n;
-			return L(r, e) ? e : r;
+	]), 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;
 		});
-	}, [Z, $]), Ce = ee("wave-datagrid-selection"), we = N?.selectAll ?? S, Te = N?.selectionHeader ?? C, Ee = y.useMemo(() => ({
-		selectionMode: v,
+	}, [Re, $]), He = _("wave-datagrid-selection"), Ue = ie?.selectAll ?? D, We = ie?.selectionHeader ?? O, Ge = T.useMemo(() => ({
+		selectionMode: S,
 		store: $,
-		toggleRow: be,
-		toggleAll: Se,
-		radioName: Ce,
-		selectAllLabel: we,
-		selectionHeaderLabel: Te
+		toggleRow: ze,
+		toggleAll: Ve,
+		radioName: He,
+		selectAllLabel: Ue,
+		selectionHeaderLabel: We,
+		selectOnRowClick: A,
+		selectionAppearance: N,
+		subtleSelection: P
 	}), [
-		v,
+		S,
 		$,
-		be,
-		Se,
-		Ce,
-		we,
-		Te
-	]), { gridRef: De, gridProps: Oe } = te(), ke = g(ae, De), Ae = z, je = P ? t(z) : [];
-	if (P && !je.some(({ node: e }) => n(e, G))) {
-		let e = ({ node: e }) => n(e, "caption");
-		Ae = /* @__PURE__ */ x(ne, { children: [
-			je.filter(e).map(R),
-			/* @__PURE__ */ b(G, { children: /* @__PURE__ */ b("tr", { children: P.map((e) => /* @__PURE__ */ b(K, {
-				columnId: e.id,
-				sortable: e.sortable,
-				children: e.label
-			}, e.id)) }) }),
-			je.filter((t) => !e(t)).map(R)
-		] });
+		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;
+		let e = /* @__PURE__ */ new Set();
+		return i.map((t, n) => {
+			let r = l ? l(t) : String(n), i = e.has(r) ? `${r}\u0000${n}` : r;
+			return e.add(i), {
+				item: t,
+				index: n,
+				rowId: 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;
+	}, [
+		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));
+	}, [
+		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, {
+			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)
+		];
 	}
-	let { className: Me, "aria-label": Ne, "aria-labelledby": Pe, ...Fe } = re ?? {}, Ie = Fe.role !== void 0, Le = !Ie && (Ne !== void 0 || Pe !== void 0);
-	return y.useEffect(() => {
-		Le && 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.");
-	}, [Le]), /* @__PURE__ */ b(E.Provider, {
-		value: Ee,
-		children: /* @__PURE__ */ b(D.Provider, {
-			value: he,
-			children: /* @__PURE__ */ b("div", {
-				...Fe,
-				"aria-label": Ie ? Ne : void 0,
-				"aria-labelledby": Ie ? Pe : void 0,
-				className: e(d.container, "overflow-x-auto rounded-md border border-border", Me),
-				children: /* @__PURE__ */ b("table", {
-					ref: ke,
-					role: "grid",
-					"aria-multiselectable": v === "multiple" || void 0,
-					className: e(d.root, "w-full border-separate border-spacing-0", B),
-					...U,
-					onKeyDown: c(V, Oe.onKeyDown),
-					onFocus: c(H, Oe.onFocus, { checkDefaultPrevented: !1 }),
-					onBlur: c(ie, Oe.onBlur, { checkDefaultPrevented: !1 }),
-					children: Ae
+	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, {
+					value: null,
+					children: /* @__PURE__ */ E(oe.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
+							})
+						})
+					})
 				})
 			})
 		})
 	});
-};
-H.displayName = "DataGrid";
-function ie({ selectionMode: t, ref: n }) {
-	let { store: r, toggleAll: i, selectAllLabel: a, selectionHeaderLabel: o } = N("DataGrid.Header"), s = y.useSyncExternalStore(r.subscribeSelectAll, r.getSelectAllState, r.getSelectAllState), c = y.useRef(null), [l, u] = y.useState(0);
-	return y.useLayoutEffect(() => {
-		c.current && (c.current.indeterminate = s === "some");
-	}, [s, l]), /* @__PURE__ */ b("th", {
-		ref: n,
+}
+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(p.selectionCell, B, "text-start", _),
-		children: t === "multiple" ? /* @__PURE__ */ b("input", {
-			ref: c,
+		className: e(n, p.selectionCell, C, "text-start", b, d),
+		children: t === "multiple" ? /* @__PURE__ */ E(te, {
+			ref: h,
 			type: "checkbox",
-			"aria-label": a,
-			checked: s === "all",
-			onChange: () => {
-				u((e) => e + 1), i();
-			},
-			className: e(p.selectAllCheckbox, V, _)
-		}) : /* @__PURE__ */ b("span", {
+			"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: o
+			children: c
 		})
 	});
 }
-var ae = {
+var K = {
 	subscribe: () => () => {},
 	register: () => () => {},
 	getFirst: () => null,
 	refresh: () => {}
 };
-function U({ selectionMode: t, initialFirst: n }) {
-	let r = y.useContext(k) ?? ae, [i] = y.useState(() => ({})), a = y.useRef(null), o = y.useCallback(() => {
-		let e = r.getFirst();
-		return e === null ? n : e === i;
+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;
 	}, [
-		r,
-		i,
+		o,
+		s,
 		n
-	]), s = y.useCallback(() => n, [n]), c = y.useSyncExternalStore(r.subscribe, o, s);
-	return y.useLayoutEffect(() => r.register(i, () => a.current), [r, i]), c ? /* @__PURE__ */ b(ie, {
-		ref: a,
-		selectionMode: t
-	}) : /* @__PURE__ */ b("td", {
-		ref: a,
+	]), 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(p.selectionCell, B, _)
+		className: e(r, p.selectionCell, C, b, m)
 	});
 }
-function W(e, t) {
-	let r = !0, i = (e) => y.Children.map(e, (e) => {
-		if (n(e, y.Fragment)) return y.cloneElement(e, void 0, i(e.props.children));
-		if (!y.isValidElement(e)) return e;
-		let a = r;
-		if (r = !1, n(e, "tr")) {
-			let n = t === "none" ? null : /* @__PURE__ */ b(U, {
-				selectionMode: t,
-				initialFirst: a
+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 y.cloneElement(e, void 0, n, e.props.children);
+			return T.cloneElement(e, void 0, i, /* @__PURE__ */ E(F.Provider, {
+				value: o,
+				children: n
+			}));
 		}
-		return /* @__PURE__ */ b(A.Provider, {
-			value: a,
+		return /* @__PURE__ */ E(F.Provider, {
+			value: o,
 			children: e
 		});
 	});
-	return i(e);
+	return a(e);
 }
-var G = ({ children: t, className: n, ref: i, ...a }) => {
-	let { selectionMode: o } = N("DataGrid.Header"), [c, l] = y.useState(null), u = g(i, l), [d] = y.useState(T), f = W(t, o);
-	return y.useLayoutEffect(() => {
+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();
-	}), y.useEffect(() => {
-		r && c && o !== "none" && Array.from(c.rows).some((e) => e.cells.length > 0 && !e.cells[0].hasAttribute("data-selection-cell")) && 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.");
-	}), /* @__PURE__ */ b(O.Provider, {
+	}), 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__ */ b(k.Provider, {
+		children: /* @__PURE__ */ E(P.Provider, {
 			value: d,
-			children: /* @__PURE__ */ b("thead", {
+			children: /* @__PURE__ */ E("thead", {
 				ref: u,
 				className: e(p.root, "bg-card", n),
 				...a,
@@ -361,130 +488,232 @@ var G = ({ children: t, className: n, ref: i, ...a }) => {
 		})
 	});
 };
-G.displayName = "DataGridHeader";
-var oe = (t) => /* @__PURE__ */ b("svg", {
-	className: e(f.sortIcon, "h-3 w-3 shrink-0"),
-	viewBox: "0 0 12 12",
-	fill: "currentColor",
-	"aria-hidden": "true",
-	focusable: "false",
-	children: t === "ascending" ? /* @__PURE__ */ b("path", { d: "M6 2L10 8H2L6 2Z" }) : /* @__PURE__ */ b("path", { d: "M6 10L2 4H10L6 10Z" })
-}), K = ({ columnId: t, sortable: n = !1, children: r, className: i, onClick: a, ref: o, ...l }) => {
-	let { sort: u, requestSort: d } = P("DataGrid.HeaderCell"), p = n && t ? t : void 0, m = p !== void 0 && u?.columnId === p ? u.direction : null, h = (e) => {
+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;
-		p !== void 0 && t?.localName === "button" && t.contains(e.target) && d(p);
+		m !== void 0 && t?.localName === "button" && t.contains(e.target) && p(m, e.nativeEvent);
 	};
-	return y.useEffect(() => {
+	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__ */ b("th", {
-		ref: o,
+	}, [n, t]), /* @__PURE__ */ E("th", {
+		ref: l,
 		scope: "col",
-		"aria-sort": p === void 0 ? void 0 : m ?? "none",
-		className: e(f.root, z, "text-start align-middle font-semibold text-caption-1 uppercase tracking-wider", _, p !== void 0 && "p-0 hover:bg-subtle-hover", i),
-		...l,
-		onClick: p === void 0 ? a : c(a, h),
-		children: p === void 0 ? /* @__PURE__ */ b("span", {
+		"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: r
-		}) : /* @__PURE__ */ x("button", {
-			type: "button",
-			className: e(f.button, "inline-flex w-full cursor-pointer select-none items-center gap-1 border-0 bg-transparent px-4 py-3 text-start text-inherit [font:inherit] uppercase tracking-wider", _),
-			children: [r, m && oe(m)]
+			children: i
+		}) : /* @__PURE__ */ E(w, {
+			component: "DataGrid.HeaderCell",
+			direction: h,
+			sortIcon: r,
+			className: f.button,
+			iconClassName: f.sortIcon,
+			children: i
 		})
 	});
 };
-K.displayName = "DataGridHeaderCell";
-var q = ({ children: t, className: n, ref: r, ...i }) => /* @__PURE__ */ b(O.Provider, {
-	value: "body",
-	children: /* @__PURE__ */ b("tbody", {
-		ref: r,
-		className: e(l.root, n),
-		...i,
-		children: t
-	})
-});
-q.displayName = "DataGridBody";
-var J = ({ rowId: i, selectionLabel: a, children: o, className: l, onKeyDown: u, ref: d, ...f }) => {
-	let { selectionMode: p, store: h, toggleRow: g, radioName: te } = N("DataGrid.Row"), ne = y.useContext(O), S = y.useContext(A), C = ne === "header", w = p !== "none" && !C, T = ee("wave-datagrid-row-label"), E = p === "single", D = y.useCallback(() => i !== void 0 && h.isSelected(i, E), [
-		i,
-		h,
-		E
-	]), k = y.useSyncExternalStore(h.subscribe, D, D);
-	y.useLayoutEffect(() => {
-		if (i === void 0 || C) return;
-		let e = h.register(i);
-		return r && h.countRegistrations(i) > 1 && re(i), e;
+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, {
+		value: "body",
+		children: /* @__PURE__ */ E("tbody", {
+			ref: r,
+			className: e(l.root, n),
+			...i,
+			children: d
+		})
+	});
+};
+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;
+		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), [
+		w,
+		v,
+		L
+	]), z = T.useSyncExternalStore(v.subscribe, le, le);
+	T.useLayoutEffect(() => {
+		if (w === void 0 || D) return;
+		let e = v.register(w);
+		return r && v.countRegistrations(w) > 1 && me(w), e;
 	}, [
-		h,
-		i,
-		C
-	]), y.useEffect(() => {
-		w && i === void 0 && s("DataGrid.Row:missing-rowId", "DataGrid.Row: a selectable grid needs a `rowId` on every row; this row has no selection control.");
-	}, [w, i]);
-	let j = w && i !== void 0 && a === void 0, M = (e) => {
-		if (!w || i === void 0 || e.key !== " ") return;
+		v,
+		w,
+		D
+	]), T.useLayoutEffect(() => {
+		if (w !== void 0 && !D && P) return v.disable(w);
+	}, [
+		v,
+		w,
+		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;
 		let t = e.target;
-		(t === e.currentTarget || t.parentElement === e.currentTarget) && (e.preventDefault(), g(i));
-	}, P = t(o), F, I = -1;
-	if (j) {
-		let e = P.findIndex(({ node: e }) => n(e, Y, "td", "th"));
+		(t === e.currentTarget || t.parentElement === e.currentTarget) && (e.preventDefault(), P || y(w, e.nativeEvent));
+	}, fe = (e) => {
+		if (!b || !O || w === void 0 || P) return;
+		let t = e.currentTarget;
+		ee(e, { isOwnPart: (e) => e.parentElement === t }) || S(e) || y(w, e.nativeEvent);
+	}, B, V = -1;
+	if (ue) {
+		let e = A.findIndex(({ node: e }) => n(e, Z, "td", "th"));
 		if (e >= 0) {
-			let t = P[e].node;
-			F = t.props.id ?? T, t.props.id === void 0 && (I = e);
+			let t = A[e].node;
+			B = t.props.id ?? k, t.props.id === void 0 && (V = e);
 		}
 	}
-	let L = P.map(({ key: e, node: t }, n) => R({
+	let W = A.map(({ key: e, node: t }, n) => pe({
 		key: e,
-		node: n === I ? y.cloneElement(t, { id: T }) : t
-	})), z = j && F === void 0;
-	y.useEffect(() => {
-		z && 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).");
-	}, [z]);
-	let H = null;
-	return C && p !== "none" ? H = /* @__PURE__ */ b(U, {
-		selectionMode: p,
-		initialFirst: S
-	}) : w && (H = /* @__PURE__ */ b("td", {
+		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
+	}), [
+		o,
+		M,
+		O,
+		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]
+		})
+	});
+};
+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", {
 		role: "gridcell",
+		...s,
+		ref: o,
 		"data-selection-cell": "",
-		className: e(m.selectionCell, B, _),
-		children: i !== void 0 && /* @__PURE__ */ b("input", {
-			type: p === "multiple" ? "checkbox" : "radio",
-			name: p === "single" ? te : void 0,
-			form: p === "single" ? "" : void 0,
-			checked: k,
-			onChange: () => g(i),
-			"aria-label": a ?? (F ? void 0 : "Select row"),
-			"aria-labelledby": a === void 0 ? F : void 0,
-			className: e(m.selectionControl, V, "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring")
+		className: e(n, m.selectionCell, C, b, f.selectionCellProps?.className, r),
+		children: p !== void 0 && c !== "none" && /* @__PURE__ */ E(te, {
+			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,
+			"aria-describedby": a,
+			className: m.selectionControl
 		})
-	})), /* @__PURE__ */ x("tr", {
-		ref: d,
-		className: e(m.root, !C && "hover:bg-subtle-hover data-[selected]:bg-selected transition-colors motion-reduce:transition-none", w && k && v.selectedContainer, l),
-		"aria-selected": w ? k : void 0,
-		"data-selected": w && k ? "" : void 0,
-		...f,
-		onKeyDown: c(u, M),
-		children: [H, L]
+	});
+}
+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, {
+			ref: l,
+			selectionMode: d,
+			initialFirst: p,
+			stableClassName: h.root,
+			cellProps: {
+				...u,
+				className: e(s?.className, r),
+				disabled: t ?? s?.disabled,
+				invisible: n ?? s?.invisible,
+				"aria-label": i ?? s?.["aria-label"],
+				"aria-labelledby": a,
+				"aria-describedby": o,
+				controlRef: c
+			}
+		});
+	}
+	return /* @__PURE__ */ E(ye, {
+		...u,
+		ref: l,
+		component: "DataGrid.SelectionCell",
+		stableClassName: h.root,
+		className: r,
+		controlRef: c,
+		"aria-describedby": o
 	});
 };
-J.displayName = "DataGridRow";
-var Y = ({ children: t, className: n, ref: r, ...i }) => /* @__PURE__ */ b("td", {
+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, z, "text-body-1", _, n),
+	className: e(u.root, V, "relative text-body-1", b, n),
 	...i,
 	children: t
 });
-Y.displayName = "DataGridCell";
-var se = /* @__PURE__ */ Object.assign(H, {
-	Header: G,
-	HeaderCell: K,
-	Body: q,
-	Row: J,
-	Cell: Y
+Z.displayName = "DataGridCell";
+var be = /* @__PURE__ */ Object.assign(W, {
+	Header: q,
+	HeaderCell: J,
+	Body: Y,
+	Row: ve,
+	Cell: Z,
+	SelectionCell: X
 });
 //#endregion
-export { se as DataGrid, q as DataGridBody, Y as DataGridCell, G as DataGridHeader, K as DataGridHeaderCell, J as DataGridRow, w as createSelectionStore };
+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 };
 
 //# sourceMappingURL=DataGrid.mjs.map