@mortenbrudvik/waveui 0.4.0 → 0.8.0

package/dist/components/table/DataGrid.mjs

@@ -0,0 +1,490 @@
+"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 } 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 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 = () => {
+		if (s !== void 0) return s;
+		let e = null;
+		for (let t of n) {
+			if (r.has(t)) {
+				e = t;
+				break;
+			}
+			e ??= t;
+		}
+		return s = e, e;
+	}, f = (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), () => {
+		e.delete(t);
+	});
+	return {
+		subscribe: m(c),
+		subscribeSelectAll: m(l),
+		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;
+			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);
+			};
+		},
+		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();
+			}
+		},
+		setSingleMode(e) {
+			o = e;
+		},
+		isSelected(e, t = !1) {
+			return t ? d() === e : n.has(e);
+		},
+		countRegistrations(e) {
+			return r.get(e) ?? 0;
+		},
+		getSelectAllState() {
+			return a;
+		},
+		getRegistered() {
+			return Array.from(r.keys());
+		},
+		prune(e) {
+			return e.filter((e) => r.has(e));
+		}
+	};
+}
+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) {
+			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 E = y.createContext(null), D = y.createContext(null), O = y.createContext("body"), k = y.createContext(null), A = y.createContext(!0), j = {
+	selectionMode: "none",
+	store: w([]),
+	toggleRow: () => {},
+	toggleAll: () => {},
+	radioName: "",
+	selectAllLabel: S,
+	selectionHeaderLabel: C
+}, M = {
+	sort: null,
+	requestSort: () => {}
+};
+function N(e) {
+	return y.useContext(E) || (i(e, "DataGrid"), j);
+}
+function P(e) {
+	return y.useContext(D) || (i(e, "DataGrid"), M);
+}
+var F = [];
+function I(e) {
+	return e === void 0 ? void 0 : Array.from(e);
+}
+function L(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 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 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."));
+	}, [
+		W,
+		u,
+		p
+	]);
+	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: p ?? ce.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 : {
+			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(() => {
+		$.setSingleMode(Q);
+	}, [$, Q]);
+	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], L(r, t) ? t : r;
+		});
+	}, [
+		Q,
+		Z,
+		$
+	]), 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;
+		});
+	}, [Z, $]), Ce = ee("wave-datagrid-selection"), we = N?.selectAll ?? S, Te = N?.selectionHeader ?? C, Ee = y.useMemo(() => ({
+		selectionMode: v,
+		store: $,
+		toggleRow: be,
+		toggleAll: Se,
+		radioName: Ce,
+		selectAllLabel: we,
+		selectionHeaderLabel: Te
+	}), [
+		v,
+		$,
+		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)
+		] });
+	}
+	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
+				})
+			})
+		})
+	});
+};
+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,
+		scope: "col",
+		"data-selection-cell": "",
+		className: e(p.selectionCell, B, "text-start", _),
+		children: t === "multiple" ? /* @__PURE__ */ b("input", {
+			ref: c,
+			type: "checkbox",
+			"aria-label": a,
+			checked: s === "all",
+			onChange: () => {
+				u((e) => e + 1), i();
+			},
+			className: e(p.selectAllCheckbox, V, _)
+		}) : /* @__PURE__ */ b("span", {
+			className: "sr-only",
+			children: o
+		})
+	});
+}
+var ae = {
+	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;
+	}, [
+		r,
+		i,
+		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,
+		"data-selection-cell": "",
+		className: e(p.selectionCell, B, _)
+	});
+}
+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
+			});
+			return y.cloneElement(e, void 0, n, e.props.children);
+		}
+		return /* @__PURE__ */ b(A.Provider, {
+			value: a,
+			children: e
+		});
+	});
+	return i(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(() => {
+		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, {
+		value: "header",
+		children: /* @__PURE__ */ b(k.Provider, {
+			value: d,
+			children: /* @__PURE__ */ b("thead", {
+				ref: u,
+				className: e(p.root, "bg-card", n),
+				...a,
+				children: f
+			})
+		})
+	});
+};
+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) => {
+		let t = e.currentTarget.firstElementChild;
+		p !== void 0 && t?.localName === "button" && t.contains(e.target) && d(p);
+	};
+	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__ */ b("th", {
+		ref: o,
+		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", {
+			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)]
+		})
+	});
+};
+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;
+	}, [
+		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;
+		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"));
+		if (e >= 0) {
+			let t = P[e].node;
+			F = t.props.id ?? T, t.props.id === void 0 && (I = e);
+		}
+	}
+	let L = P.map(({ key: e, node: t }, n) => R({
+		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", {
+		role: "gridcell",
+		"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")
+		})
+	})), /* @__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]
+	});
+};
+J.displayName = "DataGridRow";
+var Y = ({ children: t, className: n, ref: r, ...i }) => /* @__PURE__ */ b("td", {
+	ref: r,
+	role: "gridcell",
+	className: e(u.root, z, "text-body-1", _, n),
+	...i,
+	children: t
+});
+Y.displayName = "DataGridCell";
+var se = /* @__PURE__ */ Object.assign(H, {
+	Header: G,
+	HeaderCell: K,
+	Body: q,
+	Row: J,
+	Cell: Y
+});
+//#endregion
+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