@mortenbrudvik/waveui 0.7.0 → 0.9.0

package/dist/components/table/DataGrid.mjs

@@ -3,16 +3,17 @@ 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 { useControllable as l } from "../../hooks/useControllable.mjs";
-import { useId as u } from "../../hooks/useId.mjs";
-import { useMergedRefs as d } from "../../hooks/useMergedRefs.mjs";
-import { focusRingInset as f, forcedColors as p } from "../../lib/styles.mjs";
-import { useGridNavigation as m } from "./useGridNavigation.mjs";
-import * as h from "react";
-import { Fragment as g, jsx as _, jsxs as ee } from "react/jsx-runtime";
+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 { focusRingInset as _, forcedColors as v } from "../../lib/styles.mjs";
+import { useGridNavigation as te } from "./useGridNavigation.mjs";
+import * as y from "react";
+import { Fragment as ne, jsx as b, jsxs as x } from "react/jsx-runtime";
 //#region src/components/table/DataGrid.tsx
-var v = "Select all rows", y = "Selection";
-function b(e, t = !1) {
+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) => {
 		for (let t of Array.from(e)) t();
 	}, d = () => {
@@ -82,7 +83,7 @@ function b(e, t = !1) {
 		}
 	};
 }
-function x() {
+function T() {
 	let e = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Set(), n = null, r = () => {
 		let r = null, i = null;
 		for (let [t, a] of e) {
@@ -113,177 +114,177 @@ function x() {
 		refresh: r
 	};
 }
-var te = h.createContext(null), S = h.createContext(null), C = h.createContext("body"), w = h.createContext(null), T = h.createContext(!0), E = {
+var E = y.createContext(null), D = y.createContext(null), O = y.createContext("body"), k = y.createContext(null), A = y.createContext(!0), j = {
 	selectionMode: "none",
-	store: b([]),
+	store: w([]),
 	toggleRow: () => {},
 	toggleAll: () => {},
 	radioName: "",
-	selectAllLabel: v,
-	selectionHeaderLabel: y
-}, D = {
+	selectAllLabel: S,
+	selectionHeaderLabel: C
+}, M = {
 	sort: null,
 	requestSort: () => {}
 };
-function O(e) {
-	return h.useContext(te) || (i(e, "DataGrid"), E);
+function N(e) {
+	return y.useContext(E) || (i(e, "DataGrid"), j);
 }
-function k(e) {
-	return h.useContext(S) || (i(e, "DataGrid"), D);
+function P(e) {
+	return y.useContext(D) || (i(e, "DataGrid"), M);
 }
-var A = [];
-function j(e) {
+var F = [];
+function I(e) {
 	return e === void 0 ? void 0 : Array.from(e);
 }
-function M(e, t) {
+function L(e, t) {
 	return e.length === t.length && e.every((e, n) => e === t[n]);
 }
-function N({ key: e, node: t }) {
-	return /* @__PURE__ */ _(h.Fragment, { children: t }, e);
+function R({ key: e, node: t }) {
+	return /* @__PURE__ */ b(y.Fragment, { children: t }, e);
 }
-function ne(e) {
+function re(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 P = "px-4 py-3 border-b border-border", F = "w-10 px-3 py-3 border-b border-border", I = "accent-primary cursor-pointer", L = (r) => {
-	let { sort: i, defaultSort: f, sortColumn: p, defaultSortColumn: x, sortDirection: C, defaultSortDirection: w, onSortChange: T, selectionMode: E = "none", selectedItems: D, defaultSelectedItems: O, onSelectedItemsChange: k, selectedKeys: ne, defaultSelectedKeys: P, onSelectionChange: F, labels: I, columns: L, containerProps: R, children: z, className: B, onKeyDown: V, onFocus: U, onBlur: G, ref: K, ...q } = r, J = i !== void 0 || f !== void 0, [re, ie] = h.useState(J);
-	J && !re && ie(!0);
-	let ae = re || J, oe = p !== void 0 || C !== void 0;
-	p !== void 0 && o("DataGrid", "sortColumn", "sort"), C !== void 0 && o("DataGrid", "sortDirection", "sort"), x !== void 0 && o("DataGrid", "defaultSortColumn", "defaultSort"), w !== void 0 && o("DataGrid", "defaultSortDirection", "defaultSort");
-	let se = J && (oe || x !== void 0 || w !== void 0);
-	h.useEffect(() => {
+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]), h.useEffect(() => {
-		J || (p !== void 0 && C === 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.") : C !== 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."));
+	}, [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."));
 	}, [
-		J,
-		p,
-		C
+		W,
+		u,
+		p
 	]);
-	let [Y, ce] = h.useState(() => ({
-		column: x ?? "",
-		direction: w ?? "ascending"
-	})), le = h.useMemo(() => {
-		if (p === void 0 && C === void 0) return;
-		let e = p ?? Y.column;
+	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;
 		return e === "" ? null : {
 			columnId: e,
-			direction: C ?? Y.direction
+			direction: p ?? ce.direction
 		};
 	}, [
+		u,
 		p,
-		C,
-		Y
-	]), ue = h.useMemo(() => x ? {
-		columnId: x,
-		direction: w ?? "ascending"
-	} : null, [x, w]), [de, fe] = l(J ? i : le, f === void 0 ? ue : f, (e) => {
-		e && (J || ce((t) => t.column === e.columnId && t.direction === e.direction ? t : {
+		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 : {
 			column: e.columnId,
 			direction: e.direction
-		}), T && (ae ? T(e) : T(e.columnId, e.direction)));
-	}), pe = h.useCallback((e) => {
-		fe((t) => ({
+		}), _ && (J ? _(e) : _(e.columnId, e.direction)));
+	}), me = y.useCallback((e) => {
+		pe((t) => ({
 			columnId: e,
 			direction: t?.columnId === e && t.direction === "ascending" ? "descending" : "ascending"
 		}));
-	}, [fe]), me = h.useMemo(() => ({
-		sort: de,
-		requestSort: pe
-	}), [de, pe]);
-	F !== void 0 && o("DataGrid", "onSelectionChange", "onSelectedItemsChange");
-	let he = h.useMemo(() => j(ne), [ne]), ge = h.useMemo(() => j(P), [P]), _e = a("DataGrid", D, he, "selectedKeys", "selectedItems"), ve = a("DataGrid", O, ge, "defaultSelectedKeys", "defaultSelectedItems") ?? A, [X, Z] = l(_e, ve, (e) => {
-		k?.([...e]), F?.(new Set(e));
-	}), Q = E === "single", [$] = h.useState(() => b(X, Q));
-	h.useLayoutEffect(() => {
+	}, [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]), h.useLayoutEffect(() => {
+	}, [$, X]), y.useLayoutEffect(() => {
 		$.setSingleMode(Q);
 	}, [$, Q]);
-	let ye = h.useCallback((e) => {
+	let be = y.useCallback((e) => {
 		Z((t) => {
 			let n = $.prune(t), r;
-			return r = Q ? n[0] === e ? [] : [e] : n.includes(e) ? n.filter((t) => t !== e) : [...n, e], M(r, t) ? t : r;
+			return r = Q ? n[0] === e ? [] : [e] : n.includes(e) ? n.filter((t) => t !== e) : [...n, e], L(r, t) ? t : r;
 		});
 	}, [
 		Q,
 		Z,
 		$
-	]), be = X.length;
-	h.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 xe = h.useCallback(() => {
+	]), 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 M(r, e) ? e : r;
+			return L(r, e) ? e : r;
 		});
-	}, [Z, $]), Se = u("wave-datagrid-selection"), Ce = I?.selectAll ?? v, we = I?.selectionHeader ?? y, Te = h.useMemo(() => ({
-		selectionMode: E,
+	}, [Z, $]), Ce = ee("wave-datagrid-selection"), we = N?.selectAll ?? S, Te = N?.selectionHeader ?? C, Ee = y.useMemo(() => ({
+		selectionMode: v,
 		store: $,
-		toggleRow: ye,
-		toggleAll: xe,
-		radioName: Se,
-		selectAllLabel: Ce,
-		selectionHeaderLabel: we
+		toggleRow: be,
+		toggleAll: Se,
+		radioName: Ce,
+		selectAllLabel: we,
+		selectionHeaderLabel: Te
 	}), [
-		E,
+		v,
 		$,
-		ye,
-		xe,
+		be,
 		Se,
 		Ce,
-		we
-	]), { gridRef: Ee, gridProps: De } = m(), Oe = d(K, Ee), ke = z, Ae = L ? t(z) : [];
-	if (L && !Ae.some(({ node: e }) => n(e, H))) {
+		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");
-		ke = /* @__PURE__ */ ee(g, { children: [
-			Ae.filter(e).map(N),
-			/* @__PURE__ */ _(H, { children: /* @__PURE__ */ _("tr", { children: L.map((e) => /* @__PURE__ */ _(W, {
+		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)) }) }),
-			Ae.filter((t) => !e(t)).map(N)
+			je.filter((t) => !e(t)).map(R)
 		] });
 	}
-	let { className: je, "aria-label": Me, "aria-labelledby": Ne, ...Pe } = R ?? {}, Fe = Pe.role !== void 0, Ie = !Fe && (Me !== void 0 || Ne !== void 0);
-	return h.useEffect(() => {
-		Ie && 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.");
-	}, [Ie]), /* @__PURE__ */ _(te.Provider, {
-		value: Te,
-		children: /* @__PURE__ */ _(S.Provider, {
-			value: me,
-			children: /* @__PURE__ */ _("div", {
-				...Pe,
-				"aria-label": Fe ? Me : void 0,
-				"aria-labelledby": Fe ? Ne : void 0,
-				className: e("overflow-x-auto rounded-md border border-border", je),
-				children: /* @__PURE__ */ _("table", {
-					ref: Oe,
+	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": E === "multiple" || void 0,
-					className: e("w-full border-separate border-spacing-0", B),
-					...q,
-					onKeyDown: c(V, De.onKeyDown),
-					onFocus: c(U, De.onFocus, { checkDefaultPrevented: !1 }),
-					onBlur: c(G, De.onBlur, { checkDefaultPrevented: !1 }),
-					children: ke
+					"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
 				})
 			})
 		})
 	});
 };
-L.displayName = "DataGrid";
-function R({ selectionMode: t, ref: n }) {
-	let { store: r, toggleAll: i, selectAllLabel: a, selectionHeaderLabel: o } = O("DataGrid.Header"), s = h.useSyncExternalStore(r.subscribeSelectAll, r.getSelectAllState, r.getSelectAllState), c = h.useRef(null), [l, u] = h.useState(0);
-	return h.useLayoutEffect(() => {
+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__ */ _("th", {
+	}, [s, l]), /* @__PURE__ */ b("th", {
 		ref: n,
 		scope: "col",
 		"data-selection-cell": "",
-		className: e(F, "text-start", f),
-		children: t === "multiple" ? /* @__PURE__ */ _("input", {
+		className: e(p.selectionCell, B, "text-start", _),
+		children: t === "multiple" ? /* @__PURE__ */ b("input", {
 			ref: c,
 			type: "checkbox",
 			"aria-label": a,
@@ -291,199 +292,199 @@ function R({ selectionMode: t, ref: n }) {
 			onChange: () => {
 				u((e) => e + 1), i();
 			},
-			className: e(I, f)
-		}) : /* @__PURE__ */ _("span", {
+			className: e(p.selectAllCheckbox, V, _)
+		}) : /* @__PURE__ */ b("span", {
 			className: "sr-only",
 			children: o
 		})
 	});
 }
-var z = {
+var ae = {
 	subscribe: () => () => {},
 	register: () => () => {},
 	getFirst: () => null,
 	refresh: () => {}
 };
-function B({ selectionMode: t, initialFirst: n }) {
-	let r = h.useContext(w) ?? z, [i] = h.useState(() => ({})), a = h.useRef(null), o = h.useCallback(() => {
+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;
 	}, [
 		r,
 		i,
 		n
-	]), s = h.useCallback(() => n, [n]), c = h.useSyncExternalStore(r.subscribe, o, s);
-	return h.useLayoutEffect(() => r.register(i, () => a.current), [r, i]), c ? /* @__PURE__ */ _(R, {
+	]), 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__ */ _("td", {
+	}) : /* @__PURE__ */ b("td", {
 		ref: a,
 		"data-selection-cell": "",
-		className: e(F, f)
+		className: e(p.selectionCell, B, _)
 	});
 }
-function V(e, t) {
-	let r = !0, i = (e) => h.Children.map(e, (e) => {
-		if (n(e, h.Fragment)) return h.cloneElement(e, void 0, i(e.props.children));
-		if (!h.isValidElement(e)) return e;
+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, {
+			let n = t === "none" ? null : /* @__PURE__ */ b(U, {
 				selectionMode: t,
 				initialFirst: a
 			});
-			return h.cloneElement(e, void 0, n, e.props.children);
+			return y.cloneElement(e, void 0, n, e.props.children);
 		}
-		return /* @__PURE__ */ _(T.Provider, {
+		return /* @__PURE__ */ b(A.Provider, {
 			value: a,
 			children: e
 		});
 	});
 	return i(e);
 }
-var H = ({ children: t, className: n, ref: i, ...a }) => {
-	let { selectionMode: o } = O("DataGrid.Header"), [c, l] = h.useState(null), u = d(i, l), [f] = h.useState(x), p = V(t, o);
-	return h.useLayoutEffect(() => {
-		f.refresh();
-	}), h.useEffect(() => {
+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(() => {
+		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__ */ _(C.Provider, {
+	}), /* @__PURE__ */ b(O.Provider, {
 		value: "header",
-		children: /* @__PURE__ */ _(w.Provider, {
-			value: f,
-			children: /* @__PURE__ */ _("thead", {
+		children: /* @__PURE__ */ b(k.Provider, {
+			value: d,
+			children: /* @__PURE__ */ b("thead", {
 				ref: u,
-				className: e("bg-card", n),
+				className: e(p.root, "bg-card", n),
 				...a,
-				children: p
+				children: f
 			})
 		})
 	});
 };
-H.displayName = "DataGridHeader";
-var U = (e) => /* @__PURE__ */ _("svg", {
-	className: "h-3 w-3 shrink-0",
+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: e === "ascending" ? /* @__PURE__ */ _("path", { d: "M6 2L10 8H2L6 2Z" }) : /* @__PURE__ */ _("path", { d: "M6 10L2 4H10L6 10Z" })
-}), W = ({ columnId: t, sortable: n = !1, children: r, className: i, onClick: a, ref: o, ...l }) => {
-	let { sort: u, requestSort: d } = k("DataGrid.HeaderCell"), p = n && t ? t : void 0, m = p !== void 0 && u?.columnId === p ? u.direction : null, g = (e) => {
+	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) => {
 		let t = e.currentTarget.firstElementChild;
 		p !== void 0 && t?.localName === "button" && t.contains(e.target) && d(p);
 	};
-	return h.useEffect(() => {
+	return y.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__ */ _("th", {
+	}, [n, t]), /* @__PURE__ */ b("th", {
 		ref: o,
 		scope: "col",
 		"aria-sort": p === void 0 ? void 0 : m ?? "none",
-		className: e(P, "text-start align-middle font-semibold text-caption-1 uppercase tracking-wider", f, p !== void 0 && "p-0 hover:bg-subtle-hover", i),
+		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, g),
-		children: p === void 0 ? /* @__PURE__ */ _("span", {
+		onClick: p === void 0 ? a : c(a, h),
+		children: p === void 0 ? /* @__PURE__ */ b("span", {
 			className: "inline-flex items-center gap-1",
 			children: r
-		}) : /* @__PURE__ */ ee("button", {
+		}) : /* @__PURE__ */ x("button", {
 			type: "button",
-			className: e("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", f),
-			children: [r, m && U(m)]
+			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)]
 		})
 	});
 };
-W.displayName = "DataGridHeaderCell";
-var G = ({ children: e, className: t, ref: n, ...r }) => /* @__PURE__ */ _(C.Provider, {
+K.displayName = "DataGridHeaderCell";
+var q = ({ children: t, className: n, ref: r, ...i }) => /* @__PURE__ */ b(O.Provider, {
 	value: "body",
-	children: /* @__PURE__ */ _("tbody", {
-		ref: n,
-		className: t,
-		...r,
-		children: e
+	children: /* @__PURE__ */ b("tbody", {
+		ref: r,
+		className: e(l.root, n),
+		...i,
+		children: t
 	})
 });
-G.displayName = "DataGridBody";
-var K = ({ rowId: i, selectionLabel: a, children: o, className: l, onKeyDown: d, ref: m, ...g }) => {
-	let { selectionMode: v, store: y, toggleRow: b, radioName: x } = O("DataGrid.Row"), te = h.useContext(C), S = h.useContext(T), w = te === "header", E = v !== "none" && !w, D = u("wave-datagrid-row-label"), k = v === "single", A = h.useCallback(() => i !== void 0 && y.isSelected(i, k), [
+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,
-		y,
-		k
-	]), j = h.useSyncExternalStore(y.subscribe, A, A);
-	h.useLayoutEffect(() => {
-		if (i === void 0 || w) return;
-		let e = y.register(i);
-		return r && y.countRegistrations(i) > 1 && ne(i), e;
+		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;
 	}, [
-		y,
+		h,
 		i,
-		w
-	]), h.useEffect(() => {
-		E && 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.");
-	}, [E, i]);
-	let M = E && i !== void 0 && a === void 0, P = (e) => {
-		if (!E || i === void 0 || e.key !== " ") return;
+		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;
 		let t = e.target;
-		(t === e.currentTarget || t.parentElement === e.currentTarget) && (e.preventDefault(), b(i));
-	}, L = t(o), R, z = -1;
-	if (M) {
-		let e = L.findIndex(({ node: e }) => n(e, q, "td", "th"));
+		(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"));
 		if (e >= 0) {
-			let t = L[e].node;
-			R = t.props.id ?? D, t.props.id === void 0 && (z = e);
+			let t = P[e].node;
+			F = t.props.id ?? T, t.props.id === void 0 && (I = e);
 		}
 	}
-	let V = L.map(({ key: e, node: t }, n) => N({
+	let L = P.map(({ key: e, node: t }, n) => R({
 		key: e,
-		node: n === z ? h.cloneElement(t, { id: D }) : t
-	})), H = M && R === void 0;
-	h.useEffect(() => {
-		H && 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).");
-	}, [H]);
-	let U = null;
-	return w && v !== "none" ? U = /* @__PURE__ */ _(B, {
-		selectionMode: v,
+		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
-	}) : E && (U = /* @__PURE__ */ _("td", {
+	}) : w && (H = /* @__PURE__ */ b("td", {
 		role: "gridcell",
 		"data-selection-cell": "",
-		className: e(F, f),
-		children: i !== void 0 && /* @__PURE__ */ _("input", {
-			type: v === "multiple" ? "checkbox" : "radio",
-			name: v === "single" ? x : void 0,
-			form: v === "single" ? "" : void 0,
-			checked: j,
-			onChange: () => b(i),
-			"aria-label": a ?? (R ? void 0 : "Select row"),
-			"aria-labelledby": a === void 0 ? R : void 0,
-			className: e(I, "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring")
+		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")
 		})
-	})), /* @__PURE__ */ ee("tr", {
-		ref: m,
-		className: e(!w && "hover:bg-subtle-hover data-[selected]:bg-selected transition-colors motion-reduce:transition-none", E && j && p.selectedContainer, l),
-		"aria-selected": E ? j : void 0,
-		"data-selected": E && j ? "" : void 0,
-		...g,
-		onKeyDown: c(d, P),
-		children: [U, V]
+	})), /* @__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]
 	});
 };
-K.displayName = "DataGridRow";
-var q = ({ children: t, className: n, ref: r, ...i }) => /* @__PURE__ */ _("td", {
+J.displayName = "DataGridRow";
+var Y = ({ children: t, className: n, ref: r, ...i }) => /* @__PURE__ */ b("td", {
 	ref: r,
 	role: "gridcell",
-	className: e(P, "text-body-1", f, n),
+	className: e(u.root, z, "text-body-1", _, n),
 	...i,
 	children: t
 });
-q.displayName = "DataGridCell";
-var J = /* @__PURE__ */ Object.assign(L, {
-	Header: H,
-	HeaderCell: W,
-	Body: G,
-	Row: K,
-	Cell: q
+Y.displayName = "DataGridCell";
+var se = /* @__PURE__ */ Object.assign(H, {
+	Header: G,
+	HeaderCell: K,
+	Body: q,
+	Row: J,
+	Cell: Y
 });
 //#endregion
-export { J as DataGrid, G as DataGridBody, q as DataGridCell, H as DataGridHeader, W as DataGridHeaderCell, K as DataGridRow, b as createSelectionStore };
+export { se as DataGrid, q as DataGridBody, Y as DataGridCell, G as DataGridHeader, K as DataGridHeaderCell, J as DataGridRow, w as createSelectionStore };
 
 //# sourceMappingURL=DataGrid.mjs.map