@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

package/dist/components/data-display/DataGrid/DataGrid.mjs

@@ -0,0 +1,403 @@
+import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
+import { useLocale as t } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { useMergedRef as n } from "../../../hooks/useMergedRef.mjs";
+import { cx as r } from "../../../utils/cx.mjs";
+import { announce as i } from "../../../utils/announce.mjs";
+import { Spinner as a } from "../../feedback/Spinner/Spinner.mjs";
+import { ArrowDownIcon as o, ArrowUpIcon as s, SortIcon as c } from "../../primitives/Icon/icons.mjs";
+import { ScrollArea as ee } from "../../layout/ScrollArea/ScrollArea.mjs";
+import { CheckBox as l } from "../../forms/CheckBox/CheckBox.mjs";
+import { Pagination as te } from "../../navigation/Pagination/Pagination.mjs";
+import { compareValues as u, filterRows as ne, getCellValue as d, sortRows as re } from "./dataGridUtils.mjs";
+import f from "./DataGrid.module.css.mjs";
+import { useEffect as ie, useId as ae, useLayoutEffect as oe, useMemo as p, useRef as m, useState as h } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region src/components/data-display/DataGrid/DataGrid.tsx
+var se = {
+	compact: f.compact,
+	comfortable: f.comfortable,
+	spacious: f.spacious
+}, ce = {
+	plain: f.plain,
+	striped: f.striped,
+	outline: f.outline
+}, le = {
+	start: f.alignStart,
+	center: f.alignCenter,
+	end: f.alignEnd
+}, ue = 10, de = "a[href],button:not([disabled]),input:not([disabled]):not([type='hidden']),select:not([disabled]),textarea:not([disabled]),[contenteditable='true'],[data-grid-widget]", v = (e) => Array.from(e.querySelectorAll(de));
+function y(e) {
+	return e instanceof HTMLTextAreaElement || e instanceof HTMLSelectElement ? !0 : e instanceof HTMLInputElement ? ![
+		"checkbox",
+		"radio",
+		"button",
+		"submit",
+		"reset",
+		"color",
+		"file",
+		"image"
+	].includes(e.type) : e.getAttribute("contenteditable") === "true";
+}
+function b(e) {
+	let t = v(e).filter((e) => !e.hasAttribute("data-grid-secondary"));
+	return t.length === 1 && !y(t[0]) ? t[0] : e;
+}
+var fe = (e) => {
+	let [t, n] = (e.getAttribute("data-cell") ?? "0:0").split(":").map(Number);
+	return [t, n];
+}, pe = (e) => typeof e == "number" ? `${e}px` : e, me = (e) => e.id;
+function x({ rows: u, columns: y, getRowId: x = me, getRowLabel: he, "aria-label": S, "aria-labelledby": C, "aria-describedby": ge, sort: _e, defaultSort: ve, onSortChange: ye, multiSort: be = !0, filter: w = "", selectionMode: T = "none", selected: xe, defaultSelected: Se, onSelectedChange: Ce, isRowSelectable: E, pageSize: D, page: we, defaultPage: Te = 1, onPageChange: Ee, manual: O = !1, rowCount: De, onRowActivate: k, loading: Oe = !1, emptyState: ke, density: Ae = "comfortable", variant: je = "outline", hoverable: Me = !0, stickyHeader: Ne = !0, maxHeight: Pe, layout: Fe = "auto", tableStyle: Ie, className: Le, style: Re, ref: ze }) {
+	let { messages: A, locale: j } = t(), M = A.dataGrid, N = m(null), Be = ae(), Ve = `${Be}-pages`, He = `${Be}-name`, Ue = n(N, ze), [P, We] = e({
+		value: _e,
+		defaultValue: ve ?? [],
+		onChange: ye
+	}), [F, I] = e({
+		value: xe,
+		defaultValue: Se ?? [],
+		onChange: Ce
+	}), [Ge, L] = e({
+		value: we,
+		defaultValue: Te,
+		onChange: Ee
+	}), R = p(() => O ? u.slice() : re(ne(u, w, y), P, y, j), [
+		O,
+		u,
+		w,
+		y,
+		P,
+		j
+	]), z = O ? De ?? u.length : R.length, B = D ? Math.max(1, Math.ceil(z / D)) : 1, V = Math.min(Math.max(1, Ge), B), H = D && !O ? (V - 1) * D : 0, U = D && !O ? R.slice(H, H + D) : R, W = D ? (V - 1) * D : 0, G = `${w}|${JSON.stringify(P)}`, Ke = m(G);
+	ie(() => {
+		Ke.current !== G && (Ke.current = G, D && V !== 1 && L(1));
+	}, [
+		G,
+		D,
+		V,
+		L
+	]);
+	let qe = m(w);
+	ie(() => {
+		if (qe.current === w) return;
+		let e = window.setTimeout(() => {
+			qe.current = w, i(z === 0 ? M.noResults : M.rowCount(z));
+		}, 600);
+		return () => window.clearTimeout(e);
+	}, [
+		w,
+		z,
+		M
+	]);
+	let K = T === "multiple", Je = T !== "none", Ye = +!!K, q = y.length + Ye, Xe = y.find((e) => e.rowHeader) ?? y[0], Ze = (e) => he?.(e) ?? String((Xe && d(e, Xe)) ?? x(e)), Qe = (e) => e.headerLabel ?? (typeof e.header == "string" ? e.header : e.key), J = p(() => new Set(F), [F]), $e = (e) => E?.(e) ?? !0, Y = p(() => R.filter((e) => E?.(e) ?? !0).map(x), [
+		R,
+		E,
+		x
+	]), X = Y.filter((e) => J.has(e)).length, et = Y.length > 0 && X === Y.length, tt = X > 0 && !et, nt = m(null), Z = m(!1), rt = (e, t, n) => {
+		let r = U[e];
+		if (!r || !$e(r)) return;
+		let i = x(r);
+		if (T === "single") {
+			I(J.has(i) && n !== !0 ? [] : [i]), nt.current = e;
+			return;
+		}
+		let a = n ?? !J.has(i), o = nt.current, s = [i];
+		if (t && o !== null && o !== e) {
+			let [t, n] = o < e ? [o, e] : [e, o];
+			s = U.slice(t, n + 1).filter($e).map(x);
+		}
+		let c = new Set(F);
+		for (let e of s) a ? c.add(e) : c.delete(e);
+		nt.current = e, I(Array.from(c));
+	}, it = (e) => {
+		let t = new Set(F);
+		for (let n of Y) e ? t.add(n) : t.delete(n);
+		I(Array.from(t));
+	}, at = (e, t) => {
+		let n = P.find((t) => t.key === e.key), r = n ? n.direction === "ascending" ? "descending" : null : "ascending", a;
+		a = t && be ? n ? r ? P.map((t) => t.key === e.key ? {
+			key: t.key,
+			direction: r
+		} : t) : P.filter((t) => t.key !== e.key) : [...P, {
+			key: e.key,
+			direction: "ascending"
+		}] : r ? [{
+			key: e.key,
+			direction: r
+		}] : [], We(a), i(r ? M.sorted(Qe(e), r === "ascending" ? M.ascending : M.descending) : M.sortCleared);
+	}, ot = U.length, [st, ct] = h({
+		r: 0,
+		c: 0
+	}), lt = Math.min(st.r, ot), ut = Math.min(st.c, q - 1), [dt, Q] = h(!1), [ft, pt] = h(0), mt = (e, t) => N.current?.querySelector(`[data-cell="${e}:${t}"]`) ?? null;
+	oe(() => {
+		let e = N.current;
+		if (!e) return;
+		for (let t of e.querySelectorAll("[data-cell]")) {
+			t.tabIndex = -1;
+			for (let e of v(t)) e.tabIndex = -1;
+		}
+		let t = mt(lt, ut);
+		if (t) {
+			if (dt) for (let e of v(t)) e.tabIndex = 0;
+			else b(t).tabIndex = 0;
+		}
+	}), oe(() => {
+		if (ft === 0) return;
+		let e = mt(lt, ut);
+		if (!e) return;
+		let t = b(e);
+		t.focus({ preventScroll: !0 }), (t === e ? e : t).scrollIntoView?.({
+			block: "nearest",
+			inline: "nearest"
+		});
+	}, [ft]);
+	let $ = (e, t) => {
+		Q(!1), ct({
+			r: Math.max(0, Math.min(e, ot)),
+			c: Math.max(0, Math.min(t, q - 1))
+		}), pt((e) => e + 1);
+	}, ht = (e) => {
+		let t = e.target, n = t.closest("[data-cell]");
+		if (!n || !N.current?.contains(n)) return;
+		let [r, i] = fe(n);
+		(r !== lt || i !== ut) && ct({
+			r,
+			c: i
+		}), Q(t !== n && t !== b(n));
+	}, gt = (e) => {
+		let t = e.relatedTarget;
+		(!t || !N.current?.contains(t)) && Q(!1);
+	}, _t = (e) => {
+		if (Z.current = e.shiftKey, e.defaultPrevented || e.nativeEvent.isComposing) return;
+		let t = e.target, n = t.closest("[data-cell]");
+		if (!n || !N.current?.contains(n)) return;
+		let [r, i] = fe(n);
+		if (dt || t !== n && t !== b(n)) {
+			if (e.key === "Escape") e.preventDefault(), Q(!1), n.focus();
+			else if (e.key === "Tab") {
+				let r = v(n);
+				if (r.length === 0) return;
+				e.preventDefault(), r[(r.indexOf(t) + (e.shiftKey ? -1 : 1) + r.length) % r.length].focus();
+			}
+			return;
+		}
+		let a = getComputedStyle(n).direction === "rtl", o = e.ctrlKey || e.metaKey, s = r > 0 ? U[r - 1] : void 0;
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), $(r + 1, i);
+				return;
+			case "ArrowUp":
+				e.preventDefault(), $(r - 1, i);
+				return;
+			case "ArrowRight":
+				e.preventDefault(), $(r, a ? i - 1 : i + 1);
+				return;
+			case "ArrowLeft":
+				e.preventDefault(), $(r, a ? i + 1 : i - 1);
+				return;
+			case "Home":
+				e.preventDefault(), $(o ? 0 : r, 0);
+				return;
+			case "End":
+				e.preventDefault(), $(o ? ot : r, q - 1);
+				return;
+			case "PageDown":
+				e.preventDefault(), $(Math.max(1, r + ue), i);
+				return;
+			case "PageUp":
+				e.preventDefault(), $(Math.max(+(r > 0), r - ue), i);
+				return;
+			case "Enter":
+			case "F2": {
+				let r = v(n);
+				r.length > 0 && (t === n || e.key === "F2") ? (e.preventDefault(), Q(!0), r[0].focus()) : e.key === "Enter" && t === n && s && k && (e.preventDefault(), k(s));
+				return;
+			}
+			case " ":
+				s && Je && t === n && (e.preventDefault(), rt(r - 1, e.shiftKey));
+				return;
+			default: o && e.key.toLowerCase() === "a" && K && (e.preventDefault(), it(!et));
+		}
+	}, vt = p(() => new Intl.NumberFormat(j), [j]), yt = p(() => new Intl.DateTimeFormat(j, { dateStyle: "medium" }), [j]), bt = (e) => e == null ? "" : typeof e == "number" ? vt.format(e) : e instanceof Date ? yt.format(e) : String(e), xt = (e, t) => {
+		if (e.target.closest(de)) return;
+		let n = U[t];
+		T === "single" && rt(t, !1, !0), n && k && k(n);
+	}, St = P[0], Ct = !O && w.trim() !== "", wt = !!D || K && X > 0, Tt = z === 0 ? 0 : W + 1, Et = Math.min(z, W + U.length);
+	return /* @__PURE__ */ _("div", {
+		className: r(f.frame, ce[je], se[Ae], Me && f.hoverable, Ne && f.sticky, Le),
+		style: Re,
+		children: [
+			/* @__PURE__ */ g(ee, {
+				scrollbars: "both",
+				maxHeight: Pe,
+				shadows: !1,
+				tabIndex: -1,
+				className: f.scroll,
+				children: /* @__PURE__ */ _("table", {
+					ref: Ue,
+					role: "grid",
+					className: r(f.table, Fe === "fixed" && f.fixed),
+					style: Ie,
+					"aria-label": S,
+					"aria-labelledby": C,
+					"aria-describedby": ge,
+					"aria-rowcount": z + 1,
+					"aria-colcount": q,
+					"aria-multiselectable": K || void 0,
+					"aria-busy": Oe || void 0,
+					onKeyDown: _t,
+					onFocus: ht,
+					onBlur: gt,
+					onPointerDown: (e) => {
+						Z.current = e.shiftKey;
+					},
+					children: [/* @__PURE__ */ g("thead", {
+						className: f.head,
+						children: /* @__PURE__ */ _("tr", {
+							"aria-rowindex": 1,
+							children: [K && /* @__PURE__ */ g("th", {
+								role: "columnheader",
+								"data-cell": "0:0",
+								"data-select-column": "",
+								"aria-colindex": 1,
+								className: r(f.cell, f.selectCell),
+								children: /* @__PURE__ */ g(l, {
+									checked: et,
+									indeterminate: tt,
+									disabled: Y.length === 0,
+									onCheckedChange: (e) => it(tt ? !0 : e),
+									"aria-label": A.table.selectAll
+								})
+							}), y.map((e, t) => {
+								let n = t + Ye, i = P.findIndex((t) => t.key === e.key), a = i >= 0 ? P[i].direction : null, ee = a === "ascending" ? s : a === "descending" ? o : c, l = e.align ?? (e.numeric ? "end" : "start");
+								return /* @__PURE__ */ _("th", {
+									role: "columnheader",
+									"data-cell": `0:${n}`,
+									"aria-colindex": n + 1,
+									scope: "col",
+									"aria-sort": St?.key === e.key ? St.direction : void 0,
+									"data-sorted": a ?? void 0,
+									className: r(f.cell, f.headerCell, e.sortable && f.sortableCell, le[l], e.numeric && f.numeric, e.headerEnd != null && f.hasHeaderEnd, e.className),
+									style: {
+										inlineSize: pe(e.width),
+										minInlineSize: pe(e.minWidth),
+										...e.style
+									},
+									children: [e.sortable ? /* @__PURE__ */ _("button", {
+										type: "button",
+										className: f.sortButton,
+										onClick: (t) => at(e, t.shiftKey || Z.current),
+										children: [/* @__PURE__ */ g("span", {
+											className: f.sortLabel,
+											children: e.header
+										}), /* @__PURE__ */ _("span", {
+											className: f.sortIcon,
+											"aria-hidden": "true",
+											children: [/* @__PURE__ */ g(ee, {
+												size: "sm",
+												strokeWidth: 2.5
+											}), P.length > 1 && i >= 0 && /* @__PURE__ */ g("span", {
+												className: f.sortPriority,
+												children: i + 1
+											})]
+										})]
+									}) : e.header, e.headerEnd]
+								}, e.key);
+							})]
+						})
+					}), /* @__PURE__ */ g("tbody", {
+						className: f.body,
+						children: U.length === 0 ? /* @__PURE__ */ g("tr", {
+							className: f.emptyRow,
+							children: /* @__PURE__ */ g("td", {
+								role: "gridcell",
+								colSpan: q,
+								className: r(f.cell, f.emptyCell),
+								children: Oe ? /* @__PURE__ */ _("span", {
+									className: f.loadingInline,
+									children: [/* @__PURE__ */ g(a, {
+										size: "sm",
+										decorative: !0
+									}), A.table.loading]
+								}) : ke ?? (Ct ? M.noResults : M.empty)
+							})
+						}) : U.map((e, t) => {
+							let n = x(e), i = t + 1, a = J.has(n), o = $e(e);
+							return /* @__PURE__ */ _("tr", {
+								"aria-rowindex": W + t + 2,
+								"aria-selected": Je ? a : void 0,
+								"aria-disabled": Je && !o ? !0 : void 0,
+								"data-selected": a || void 0,
+								className: r(f.row, (k || T === "single") && f.clickable),
+								onClick: (e) => xt(e, t),
+								children: [K && /* @__PURE__ */ g("td", {
+									role: "gridcell",
+									"data-cell": `${i}:0`,
+									"data-select-column": "",
+									"aria-colindex": 1,
+									className: r(f.cell, f.selectCell),
+									children: /* @__PURE__ */ g(l, {
+										checked: a,
+										disabled: !o,
+										onCheckedChange: (e) => rt(t, Z.current, e),
+										"aria-label": A.table.selectRowNamed(Ze(e))
+									})
+								}), y.map((n, o) => {
+									let s = o + Ye, c = d(e, n), ee = n.cell ? n.cell(e, {
+										value: c,
+										rowIndex: H + t,
+										selected: a
+									}) : bt(c), l = n.align ?? (n.numeric ? "end" : "start"), te = n.rowHeader ? "th" : "td";
+									return /* @__PURE__ */ g(te, {
+										role: n.rowHeader ? "rowheader" : "gridcell",
+										"data-cell": `${i}:${s}`,
+										"aria-colindex": s + 1,
+										scope: n.rowHeader ? "row" : void 0,
+										className: r(f.cell, n.rowHeader && f.rowHeader, le[l], n.numeric && f.numeric, n.className),
+										style: n.style,
+										children: ee
+									}, n.key);
+								})]
+							}, n);
+						})
+					})]
+				})
+			}),
+			Oe && U.length > 0 && /* @__PURE__ */ g("div", {
+				className: f.loadingOverlay,
+				children: /* @__PURE__ */ g(a, { label: A.table.loading })
+			}),
+			/* @__PURE__ */ g("span", {
+				hidden: !0,
+				id: Ve,
+				children: A.pagination.nav
+			}),
+			S && !C && /* @__PURE__ */ g("span", {
+				hidden: !0,
+				id: He,
+				children: S
+			}),
+			wt && /* @__PURE__ */ _("div", {
+				className: f.footer,
+				children: [/* @__PURE__ */ g("span", {
+					role: "status",
+					className: f.status,
+					children: K && X > 0 ? M.selectedCount(X) : null
+				}), D ? /* @__PURE__ */ _("div", {
+					className: f.paging,
+					children: [/* @__PURE__ */ g("span", {
+						className: f.range,
+						children: M.range(Tt, Et, z)
+					}), B > 1 && /* @__PURE__ */ g(te, {
+						size: "sm",
+						compact: !0,
+						pageCount: B,
+						page: V,
+						onPageChange: L,
+						"aria-labelledby": `${Ve} ${C ?? He}`
+					})]
+				}) : null]
+			})
+		]
+	});
+}
+//#endregion
+export { x as DataGrid, u as compareValues, ne as filterRows, d as getCellValue, re as sortRows };

package/dist/components/data-display/DataGrid/DataGrid.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_frame_uic8v_19`,t=`_plain_uic8v_36`,n=`_striped_uic8v_40`,r=`_body_uic8v_40`,i=`_row_uic8v_40`,a=`_outline_uic8v_44`,o=`_compact_uic8v_52`,s=`_comfortable_uic8v_58`,c=`_spacious_uic8v_64`,l=`_scroll_uic8v_70`,u=`_table_uic8v_75`,d=`_cell_uic8v_87`,f=`_hoverable_uic8v_114`,p=`_clickable_uic8v_118`,m=`_head_uic8v_140`,h=`_sticky_uic8v_153`,g=`_rowHeader_uic8v_159`,_=`_alignStart_uic8v_166`,v=`_alignCenter_uic8v_170`,y=`_alignEnd_uic8v_174`,b=`_numeric_uic8v_178`,x=`_selectCell_uic8v_186`,S=`_sortableCell_uic8v_192`,C=`_sortButton_uic8v_196`,w=`_sortLabel_uic8v_238`,T=`_sortIcon_uic8v_239`,E=`_sortPriority_uic8v_265`,D=`_emptyCell_uic8v_273`,O=`_loadingInline_uic8v_279`,k=`_loadingOverlay_uic8v_285`,A=`_footer_uic8v_295`,j=`_status_uic8v_307`,M=`_paging_uic8v_313`,N=`_range_uic8v_321`,P=`_fixed_uic8v_348`,F=`_hasHeaderEnd_uic8v_353`,I={frame:e,plain:t,striped:n,body:r,row:i,outline:a,compact:o,comfortable:s,spacious:c,scroll:l,table:u,cell:d,hoverable:f,clickable:p,head:m,sticky:h,rowHeader:g,alignStart:_,alignCenter:v,alignEnd:y,numeric:b,selectCell:x,sortableCell:S,sortButton:C,sortLabel:w,sortIcon:T,sortPriority:E,emptyCell:D,loadingInline:O,loadingOverlay:k,footer:A,status:j,paging:M,range:N,fixed:P,hasHeaderEnd:F};exports.alignCenter=v,exports.alignEnd=y,exports.alignStart=_,exports.body=r,exports.cell=d,exports.clickable=p,exports.comfortable=s,exports.compact=o,exports.default=I,exports.emptyCell=D,exports.fixed=P,exports.footer=A,exports.frame=e,exports.hasHeaderEnd=F,exports.head=m,exports.hoverable=f,exports.loadingInline=O,exports.loadingOverlay=k,exports.numeric=b,exports.outline=a,exports.paging=M,exports.plain=t,exports.range=N,exports.row=i,exports.rowHeader=g,exports.scroll=l,exports.selectCell=x,exports.sortButton=C,exports.sortIcon=T,exports.sortLabel=w,exports.sortPriority=E,exports.sortableCell=S,exports.spacious=c,exports.status=j,exports.sticky=h,exports.striped=n,exports.table=u;

package/dist/components/data-display/DataGrid/DataGrid.module.css.mjs

@@ -0,0 +1,41 @@
+//#region src/components/data-display/DataGrid/DataGrid.module.css
+var e = "_frame_uic8v_19", t = "_plain_uic8v_36", n = "_striped_uic8v_40", r = "_body_uic8v_40", i = "_row_uic8v_40", a = "_outline_uic8v_44", o = "_compact_uic8v_52", s = "_comfortable_uic8v_58", c = "_spacious_uic8v_64", l = "_scroll_uic8v_70", u = "_table_uic8v_75", d = "_cell_uic8v_87", f = "_hoverable_uic8v_114", p = "_clickable_uic8v_118", m = "_head_uic8v_140", h = "_sticky_uic8v_153", g = "_rowHeader_uic8v_159", _ = "_alignStart_uic8v_166", v = "_alignCenter_uic8v_170", y = "_alignEnd_uic8v_174", b = "_numeric_uic8v_178", x = "_selectCell_uic8v_186", S = "_sortableCell_uic8v_192", C = "_sortButton_uic8v_196", w = "_sortLabel_uic8v_238", T = "_sortIcon_uic8v_239", E = "_sortPriority_uic8v_265", D = "_emptyCell_uic8v_273", O = "_loadingInline_uic8v_279", k = "_loadingOverlay_uic8v_285", A = "_footer_uic8v_295", j = "_status_uic8v_307", M = "_paging_uic8v_313", N = "_range_uic8v_321", P = "_fixed_uic8v_348", F = "_hasHeaderEnd_uic8v_353", I = {
+	frame: e,
+	plain: t,
+	striped: n,
+	body: r,
+	row: i,
+	outline: a,
+	compact: o,
+	comfortable: s,
+	spacious: c,
+	scroll: l,
+	table: u,
+	cell: d,
+	hoverable: f,
+	clickable: p,
+	head: m,
+	sticky: h,
+	rowHeader: g,
+	alignStart: _,
+	alignCenter: v,
+	alignEnd: y,
+	numeric: b,
+	selectCell: x,
+	sortableCell: S,
+	sortButton: C,
+	sortLabel: w,
+	sortIcon: T,
+	sortPriority: E,
+	emptyCell: D,
+	loadingInline: O,
+	loadingOverlay: k,
+	footer: A,
+	status: j,
+	paging: M,
+	range: N,
+	fixed: P,
+	hasHeaderEnd: F
+};
+//#endregion
+export { v as alignCenter, y as alignEnd, _ as alignStart, r as body, d as cell, p as clickable, s as comfortable, o as compact, I as default, D as emptyCell, P as fixed, A as footer, e as frame, F as hasHeaderEnd, m as head, f as hoverable, O as loadingInline, k as loadingOverlay, b as numeric, a as outline, M as paging, t as plain, N as range, i as row, g as rowHeader, l as scroll, x as selectCell, C as sortButton, T as sortIcon, w as sortLabel, E as sortPriority, S as sortableCell, c as spacious, j as status, h as sticky, n as striped, u as table };

package/dist/components/data-display/DataGrid/dataGridUtils.cjs.js

@@ -0,0 +1 @@
+function e(e,t){return t.value?t.value(e):e?.[t.key]}function t(e,t,n){let r=e==null||e===``,i=t==null||t===``;return r||i?r===i?0:r?1:-1:typeof e==`number`&&typeof t==`number`?e-t:e instanceof Date&&t instanceof Date?e.getTime()-t.getTime():typeof e==`boolean`&&typeof t==`boolean`?Number(e)-Number(t):(n??new Intl.Collator(void 0,{numeric:!0,sensitivity:`base`})).compare(String(e),String(t))}function n(n,r,i,a){let o=r.map(e=>({item:e,column:i.find(t=>t.key===e.key)})).filter(e=>!!e.column);if(o.length===0)return n.slice();let s=new Intl.Collator(a,{numeric:!0,sensitivity:`base`});return n.slice().sort((n,r)=>{for(let{item:i,column:a}of o){let o=a.compare?a.compare(n,r):t(e(n,a),e(r,a),s);if(o!==0)return i.direction===`ascending`?o:-o}return 0})}function r(e){return e.normalize(`NFD`).replace(/[̀-ͯ]/g,``).toLowerCase().trim()}function i(e){return e==null?``:e instanceof Date?e.toISOString():String(e)}function a(t,n,a){let o=r(n).split(/\s+/).filter(Boolean);if(o.length===0)return t.slice();let s=a.filter(e=>e.filterable!==!1);return t.filter(t=>{let n=r(s.map(n=>i(e(t,n))).join(` `));return o.every(e=>n.includes(e))})}exports.compareValues=t,exports.filterRows=a,exports.getCellValue=e,exports.normalizeSearch=r,exports.sortRows=n;

package/dist/components/data-display/DataGrid/dataGridUtils.d.ts

@@ -0,0 +1,28 @@
+/** A row's id: what selection and React keys use. */
+export type DataGridRowId = string | number;
+/** One level of a (possibly multi-column) sort. */
+export interface DataGridSortItem {
+    /** Column key. */
+    key: string;
+    direction: "ascending" | "descending";
+}
+/** The parts of a column the pipeline reads. */
+export interface DataGridColumnLike<T> {
+    key: string;
+    value?: (row: T) => unknown;
+    compare?: (a: T, b: T) => number;
+    filterable?: boolean;
+}
+/** A column's raw value for a row: `column.value(row)`, else `row[column.key]`. */
+export declare function getCellValue<T>(row: T, column: DataGridColumnLike<T>): unknown;
+/** Ascending order for raw values: numbers numerically, dates by time, text with locale and numeric collation. Empty values sort last. */
+export declare function compareValues(a: unknown, b: unknown, collator?: Intl.Collator): number;
+/** A stable sorted copy of `rows`, by each sort level in turn. The input is never mutated. */
+export declare function sortRows<T>(rows: readonly T[], sort: readonly DataGridSortItem[], columns: readonly DataGridColumnLike<T>[], locale?: string): T[];
+/** Lowercases and strips diacritics, so "jose" finds "José". */
+export declare function normalizeSearch(text: string): string;
+/**
+ * The rows where any filterable column contains every word of `query`
+ * (case- and diacritic-insensitive). An empty query keeps every row.
+ */
+export declare function filterRows<T>(rows: readonly T[], query: string, columns: readonly DataGridColumnLike<T>[]): T[];

package/dist/components/data-display/DataGrid/dataGridUtils.mjs

@@ -0,0 +1,46 @@
+//#region src/components/data-display/DataGrid/dataGridUtils.ts
+function e(e, t) {
+	return t.value ? t.value(e) : e?.[t.key];
+}
+function t(e, t, n) {
+	let r = e == null || e === "", i = t == null || t === "";
+	return r || i ? r === i ? 0 : r ? 1 : -1 : typeof e == "number" && typeof t == "number" ? e - t : e instanceof Date && t instanceof Date ? e.getTime() - t.getTime() : typeof e == "boolean" && typeof t == "boolean" ? Number(e) - Number(t) : (n ?? new Intl.Collator(void 0, {
+		numeric: !0,
+		sensitivity: "base"
+	})).compare(String(e), String(t));
+}
+function n(n, r, i, a) {
+	let o = r.map((e) => ({
+		item: e,
+		column: i.find((t) => t.key === e.key)
+	})).filter((e) => !!e.column);
+	if (o.length === 0) return n.slice();
+	let s = new Intl.Collator(a, {
+		numeric: !0,
+		sensitivity: "base"
+	});
+	return n.slice().sort((n, r) => {
+		for (let { item: i, column: a } of o) {
+			let o = a.compare ? a.compare(n, r) : t(e(n, a), e(r, a), s);
+			if (o !== 0) return i.direction === "ascending" ? o : -o;
+		}
+		return 0;
+	});
+}
+function r(e) {
+	return e.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase().trim();
+}
+function i(e) {
+	return e == null ? "" : e instanceof Date ? e.toISOString() : String(e);
+}
+function a(t, n, a) {
+	let o = r(n).split(/\s+/).filter(Boolean);
+	if (o.length === 0) return t.slice();
+	let s = a.filter((e) => e.filterable !== !1);
+	return t.filter((t) => {
+		let n = r(s.map((n) => i(e(t, n))).join(" "));
+		return o.every((e) => n.includes(e));
+	});
+}
+//#endregion
+export { t as compareValues, a as filterRows, e as getCellValue, r as normalizeSearch, n as sortRows };

package/dist/components/data-display/DataGrid/index.d.ts

@@ -0,0 +1 @@
+export * from './DataGrid';

package/dist/components/data-display/EmptyState/EmptyState.cjs.js

@@ -0,0 +1 @@
+const e=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),t=require("../../../utils/cx.cjs.js"),n=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),r=require("../../primitives/Button/Button.cjs.js"),i=require("../../primitives/Icon/icons.cjs.js"),a=require("../../primitives/Typography/Typography.cjs.js"),o=require("./EmptyState.module.css.cjs.js");let s=require("react"),c=require("react/jsx-runtime");var l={neutral:o.default.neutral,primary:o.default.primary,info:o.default.info,success:o.default.success,warning:o.default.warning,danger:o.default.danger},u={plain:o.default.plain,card:o.default.card,subtle:o.default.subtle},d={sm:o.default.sm,md:o.default.md,lg:o.default.lg},f={center:o.default.alignCenter,start:o.default.alignStart},p={sm:`lg`,md:`2xl`,lg:`4xl`},m={sm:`sm`,md:`md`,lg:`lg`},h={"no-data":{icon:(0,c.jsx)(i.FileIcon,{}),tone:`neutral`,copy:`noData`},"no-results":{icon:(0,c.jsx)(i.SearchIcon,{}),tone:`neutral`,copy:`noResults`},error:{icon:(0,c.jsx)(i.ErrorIcon,{}),tone:`danger`,copy:`error`},offline:{icon:(0,c.jsx)(i.OfflineIcon,{}),tone:`warning`,copy:`offline`},"no-access":{icon:(0,c.jsx)(i.LockIcon,{}),tone:`neutral`,copy:`noAccess`},"first-run":{icon:(0,c.jsx)(i.StarIcon,{}),tone:`primary`,copy:`firstRun`}};function g(e,t,n){return t===`noResults`?{title:e.noResults.title(n),description:e.noResults.description}:e[t]}var _=e=>typeof e==`string`||typeof e==`number`?String(e):void 0,v=({kind:v,query:y,icon:b,illustration:x,title:S,headingLevel:C=2,description:w,actions:T,onRetry:E,retryLabel:D,retrying:O=!1,footer:k,tone:A,size:j=`md`,align:M=`center`,variant:N=`plain`,announce:P=!1,announceMessage:F,className:I,children:L,...R})=>{let z=e.useMessages(),B=D??z.emptyState.retry,V=v?h[v]:void 0,H=V?g(z.emptyState,V.copy,y):void 0,U=(0,s.useId)(),W=S===void 0?H?.title:S,G=w===void 0?H?.description:w,K=b===void 0?V?.icon:b,q=A??V?.tone??`neutral`,J=W!=null&&W!==``,Y=G!=null&&G!==``,X=E!==void 0||T!=null,Z=F??[_(W),_(G)].filter(Boolean).join(`. `),[Q,$]=(0,s.useState)(``);(0,s.useEffect)(()=>{if($(``),!P||!Z)return;let e=window.setTimeout(()=>$(Z),150);return()=>window.clearTimeout(e)},[P,Z]);let ee=R.role&&J&&R[`aria-label`]===void 0&&R[`aria-labelledby`]===void 0?U:void 0;return(0,c.jsxs)(`div`,{"aria-labelledby":ee,...R,className:t.cx(o.default.root,u[N],d[j],f[M],l[q],I),"data-kind":v,children:[x==null?K!=null&&(0,c.jsxs)(`div`,{className:o.default.media,"aria-hidden":`true`,children:[(0,c.jsx)(`span`,{className:o.default.blob,children:K}),(0,c.jsx)(`span`,{className:o.default.dot})]}):(0,c.jsx)(`div`,{className:o.default.illustration,"aria-hidden":`true`,children:x}),(J||Y)&&(0,c.jsxs)(`div`,{className:o.default.text,children:[J&&(0,c.jsx)(a.Heading,{id:U,level:C,size:p[j],weight:`black`,className:o.default.title,children:W}),Y&&(0,c.jsx)(a.Text,{size:m[j],tone:`muted`,leading:`normal`,wrap:`pretty`,className:o.default.description,children:G})]}),L,X&&(0,c.jsxs)(`div`,{className:o.default.actions,children:[E!==void 0&&(0,c.jsx)(r.Button,{size:j,variant:`solid`,tone:`primary`,loading:O,startIcon:(0,c.jsx)(i.RefreshIcon,{}),onClick:()=>E(),children:B}),T]}),k!=null&&(0,c.jsx)(`div`,{className:o.default.footer,children:k}),P&&(0,c.jsx)(n.VisuallyHidden,{role:P===`assertive`?`alert`:`status`,"aria-live":P===`assertive`?`assertive`:`polite`,"aria-atomic":`true`,children:Q})]})};exports.EmptyState=v;

package/dist/components/data-display/EmptyState/EmptyState.d.ts

@@ -0,0 +1,112 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { Size } from '../../../types/common';
+import { HeadingLevel } from '../../primitives/Typography';
+/**
+ * Semantic color of the icon blob. `neutral` (default) suits most empty
+ * moments; `primary` suits onboarding; status tones suit errors and warnings.
+ */
+export type EmptyStateTone = "neutral" | "primary" | "info" | "success" | "warning" | "danger";
+/**
+ * Surface style.
+ * - `plain`: no container, just the content.
+ * - `card`: dashed border, rounded `--radius-xl` container (good for drop or
+ *   "add something" areas).
+ * - `subtle`: sunken background, rounded `--radius-xl` container.
+ */
+export type EmptyStateVariant = "plain" | "card" | "subtle";
+/** Horizontal alignment of the content. */
+export type EmptyStateAlign = "center" | "start";
+/** Built-in presets with a default icon, tone, title, and description. */
+export type EmptyStateKind = "no-data" | "no-results" | "error" | "offline" | "no-access" | "first-run";
+/**
+ * Live-region behavior.
+ * - `false`: not announced (default; for empty states present on page load).
+ * - `"polite"`: announced via `role="status"` when it appears or its message
+ *   changes. Use for search and filter results.
+ * - `"assertive"`: announced via `role="alert"`, interrupting the user. Use
+ *   only for errors the user must know about right away.
+ */
+export type EmptyStateAnnounce = false | "polite" | "assertive";
+export interface EmptyStateOwnProps {
+    /**
+     * Preset with a default icon, tone, title, and description. Every one of
+     * those can still be overridden with its own prop (e.g. to translate).
+     */
+    kind?: EmptyStateKind;
+    /**
+     * For `kind="no-results"`: the search text, shown in the default title as
+     * `No results for "query"`. Pass your own `title` to translate it.
+     */
+    query?: string;
+    /**
+     * Icon shown large inside the soft tinted blob. Pass a built-in `Icon` (it
+     * is resized to fit). Always decorative: hidden from assistive technology.
+     * Pass `null` to hide a preset's icon.
+     */
+    icon?: ReactNode;
+    /**
+     * Custom art (an SVG or image) that replaces the icon blob. Treated as
+     * decorative and hidden from assistive technology, so the title and
+     * description must carry the meaning.
+     */
+    illustration?: ReactNode;
+    /** Bold display heading. Overrides the preset title. */
+    title?: ReactNode;
+    /** Heading level, chosen to fit the page outline (e.g. 3 inside a card under an h2). @default 2 */
+    headingLevel?: HeadingLevel;
+    /** Supporting text under the title. Overrides the preset description. */
+    description?: ReactNode;
+    /** Primary and secondary actions, usually `Button`s or `Link`s. Rendered after the retry button. */
+    actions?: ReactNode;
+    /**
+     * Shows a "Try again" button (first in the actions row) and calls this
+     * when it is pressed. Works with any kind; most useful with `error` and
+     * `offline`.
+     */
+    onRetry?: () => void;
+    /** Label of the retry button. Localize it here. @default "Try again" */
+    retryLabel?: ReactNode;
+    /** Shows the retry button in its loading state while a retry is in flight. @default false */
+    retrying?: boolean;
+    /** Small trailing content, such as a "Learn more" link. */
+    footer?: ReactNode;
+    /** Color of the icon blob. @default the preset's tone, otherwise "neutral" */
+    tone?: EmptyStateTone;
+    /** Scale: `sm` inside a card or table, `md` in a panel, `lg` for a full page. @default "md" */
+    size?: Size;
+    /** Content alignment. @default "center" */
+    align?: EmptyStateAlign;
+    /** Surface style. @default "plain" */
+    variant?: EmptyStateVariant;
+    /**
+     * Announce the empty state to screen readers when it appears (or when its
+     * message changes, e.g. a new `query`). `"polite"` uses `role="status"`;
+     * `"assertive"` uses `role="alert"` and should be kept for errors.
+     * @default false
+     */
+    announce?: EmptyStateAnnounce;
+    /**
+     * Text announced when `announce` is set. Defaults to the title and
+     * description when they are plain strings; pass this when either is JSX.
+     */
+    announceMessage?: string;
+}
+export type EmptyStateProps = EmptyStateOwnProps & Omit<ComponentPropsWithRef<"div">, keyof EmptyStateOwnProps>;
+/**
+ * A friendly, centered block for "no data", "no results", "error", and
+ * first-run moments. Pick a `kind` for sensible default copy, or build your
+ * own from `icon` (or `illustration`), `title`, `description`, `actions`,
+ * and `footer`.
+ *
+ * Accessibility:
+ * - Icons and illustrations are decorative (`aria-hidden`); the title and
+ *   description carry the meaning.
+ * - The title is a real heading (`headingLevel`, default 2).
+ * - With `announce`, a visually hidden live region (`role="status"`, or
+ *   `role="alert"` for `"assertive"`) is filled just after mount, so screen
+ *   readers reliably read the result of a search or filter. Without it,
+ *   nothing is announced; use that for states present on page load.
+ * - If you give the root a landmark `role` (e.g. `"region"`), it is labelled
+ *   by the title automatically.
+ */
+export declare const EmptyState: ({ kind, query, icon, illustration, title, headingLevel, description, actions, onRetry, retryLabel: retryLabelProp, retrying, footer, tone, size, align, variant, announce, announceMessage, className, children, ...rest }: EmptyStateProps) => import("react").JSX.Element;