@mortenbrudvik/waveui 0.4.0 → 0.7.0

package/dist/components/table/DataGrid.mjs

@@ -0,0 +1,489 @@
+"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 { 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";
+//#region src/components/table/DataGrid.tsx
+var v = "Select all rows", y = "Selection";
+function b(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 x() {
+	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 te = h.createContext(null), S = h.createContext(null), C = h.createContext("body"), w = h.createContext(null), T = h.createContext(!0), E = {
+	selectionMode: "none",
+	store: b([]),
+	toggleRow: () => {},
+	toggleAll: () => {},
+	radioName: "",
+	selectAllLabel: v,
+	selectionHeaderLabel: y
+}, D = {
+	sort: null,
+	requestSort: () => {}
+};
+function O(e) {
+	return h.useContext(te) || (i(e, "DataGrid"), E);
+}
+function k(e) {
+	return h.useContext(S) || (i(e, "DataGrid"), D);
+}
+var A = [];
+function j(e) {
+	return e === void 0 ? void 0 : Array.from(e);
+}
+function M(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 ne(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(() => {
+		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."));
+	}, [
+		J,
+		p,
+		C
+	]);
+	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;
+		return e === "" ? null : {
+			columnId: e,
+			direction: C ?? Y.direction
+		};
+	}, [
+		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 : {
+			column: e.columnId,
+			direction: e.direction
+		}), T && (ae ? T(e) : T(e.columnId, e.direction)));
+	}), pe = h.useCallback((e) => {
+		fe((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(() => {
+		$.setSelected(X);
+	}, [$, X]), h.useLayoutEffect(() => {
+		$.setSingleMode(Q);
+	}, [$, Q]);
+	let ye = h.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;
+		});
+	}, [
+		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(() => {
+		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;
+		});
+	}, [Z, $]), Se = u("wave-datagrid-selection"), Ce = I?.selectAll ?? v, we = I?.selectionHeader ?? y, Te = h.useMemo(() => ({
+		selectionMode: E,
+		store: $,
+		toggleRow: ye,
+		toggleAll: xe,
+		radioName: Se,
+		selectAllLabel: Ce,
+		selectionHeaderLabel: we
+	}), [
+		E,
+		$,
+		ye,
+		xe,
+		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))) {
+		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, {
+				columnId: e.id,
+				sortable: e.sortable,
+				children: e.label
+			}, e.id)) }) }),
+			Ae.filter((t) => !e(t)).map(N)
+		] });
+	}
+	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,
+					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
+				})
+			})
+		})
+	});
+};
+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(() => {
+		c.current && (c.current.indeterminate = s === "some");
+	}, [s, l]), /* @__PURE__ */ _("th", {
+		ref: n,
+		scope: "col",
+		"data-selection-cell": "",
+		className: e(F, "text-start", f),
+		children: t === "multiple" ? /* @__PURE__ */ _("input", {
+			ref: c,
+			type: "checkbox",
+			"aria-label": a,
+			checked: s === "all",
+			onChange: () => {
+				u((e) => e + 1), i();
+			},
+			className: e(I, f)
+		}) : /* @__PURE__ */ _("span", {
+			className: "sr-only",
+			children: o
+		})
+	});
+}
+var z = {
+	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(() => {
+		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, {
+		ref: a,
+		selectionMode: t
+	}) : /* @__PURE__ */ _("td", {
+		ref: a,
+		"data-selection-cell": "",
+		className: e(F, f)
+	});
+}
+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;
+		let a = r;
+		if (r = !1, n(e, "tr")) {
+			let n = t === "none" ? null : /* @__PURE__ */ _(B, {
+				selectionMode: t,
+				initialFirst: a
+			});
+			return h.cloneElement(e, void 0, n, e.props.children);
+		}
+		return /* @__PURE__ */ _(T.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(() => {
+		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, {
+		value: "header",
+		children: /* @__PURE__ */ _(w.Provider, {
+			value: f,
+			children: /* @__PURE__ */ _("thead", {
+				ref: u,
+				className: e("bg-card", n),
+				...a,
+				children: p
+			})
+		})
+	});
+};
+H.displayName = "DataGridHeader";
+var U = (e) => /* @__PURE__ */ _("svg", {
+	className: "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) => {
+		let t = e.currentTarget.firstElementChild;
+		p !== void 0 && t?.localName === "button" && t.contains(e.target) && d(p);
+	};
+	return h.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", {
+		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),
+		...l,
+		onClick: p === void 0 ? a : c(a, g),
+		children: p === void 0 ? /* @__PURE__ */ _("span", {
+			className: "inline-flex items-center gap-1",
+			children: r
+		}) : /* @__PURE__ */ ee("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)]
+		})
+	});
+};
+W.displayName = "DataGridHeaderCell";
+var G = ({ children: e, className: t, ref: n, ...r }) => /* @__PURE__ */ _(C.Provider, {
+	value: "body",
+	children: /* @__PURE__ */ _("tbody", {
+		ref: n,
+		className: t,
+		...r,
+		children: e
+	})
+});
+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), [
+		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;
+	}, [
+		y,
+		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;
+		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"));
+		if (e >= 0) {
+			let t = L[e].node;
+			R = t.props.id ?? D, t.props.id === void 0 && (z = e);
+		}
+	}
+	let V = L.map(({ key: e, node: t }, n) => N({
+		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,
+		initialFirst: S
+	}) : E && (U = /* @__PURE__ */ _("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")
+		})
+	})), /* @__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]
+	});
+};
+K.displayName = "DataGridRow";
+var q = ({ children: t, className: n, ref: r, ...i }) => /* @__PURE__ */ _("td", {
+	ref: r,
+	role: "gridcell",
+	className: e(P, "text-body-1", f, n),
+	...i,
+	children: t
+});
+q.displayName = "DataGridCell";
+var J = /* @__PURE__ */ Object.assign(L, {
+	Header: H,
+	HeaderCell: W,
+	Body: G,
+	Row: K,
+	Cell: q
+});
+//#endregion
+export { J as DataGrid, G as DataGridBody, q as DataGridCell, H as DataGridHeader, W as DataGridHeaderCell, K as DataGridRow, b as createSelectionStore };
+
+//# sourceMappingURL=DataGrid.mjs.map