tempest-react-sdk 0.43.0 → 0.45.0

package/dist/components/DataTable/DataTable.js

@@ -7,155 +7,180 @@ import { Table as a } from "../Table/Table.js";
 import { compareValues as o } from "../../utils/compare-values.js";
 import s from "./DataTable.module.js";
 import { EditableCell as c } from "./EditableCell.js";
-import { DEFAULT_EDIT_LABELS as ee } from "./edit-labels.js";
-import { useCallback as l, useEffect as te, useMemo as u, useState as d } from "react";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { LoadingRows as ee } from "./LoadingRows.js";
+import { useDevWarnings as te } from "./use-dev-warnings.js";
+import { DEFAULT_EDIT_LABELS as ne } from "./edit-labels.js";
+import { useCallback as l, useEffect as re, useMemo as u, useState as d } from "react";
+import { jsx as f, jsxs as ie } from "react/jsx-runtime";
 //#region src/components/DataTable/DataTable.tsx
-function m(e, t) {
+function ae(e, t) {
 	return `${String(e)}::${String(t)}`;
 }
-function h(e) {
+function p(e) {
 	return typeof e.header == "string" ? e.header : String(e.key);
 }
-function g({ data: g, columns: _, pageSize: v = 10, searchable: y = !1, searchKeys: b, initialSort: ne, rowKey: x = (e, t) => t, emptyMessage: re, onCellChange: S, editLabels: C, className: w, ...ie }) {
-	let [T, ae] = d(""), [E, oe] = d(ne ?? null), { page: D, setPage: O } = t(1, v), k = n(), [A, j] = d(null), [M, N] = d(null), [P, F] = d({}), [I, L] = d({}), [R, z] = d({}), B = u(() => ({
-		...ee,
-		...C
-	}), [C]), V = S !== void 0 && _.some((e) => e.editable), H = u(() => b && b.length > 0 ? b : _.filter((e) => {
-		let t = g.find((t) => t[e.key] != null), n = t ? t[e.key] : void 0;
+function m({ data: m, columns: h, pageSize: g = 10, searchable: _ = !1, searchKeys: v, initialSort: oe, rowKey: y = (e, t) => t, emptyMessage: se, onCellChange: b, editLabels: ce, totalItems: le, page: x, onPageChange: S, manualSort: ue, onSortChange: C, manualSearch: de, onSearchChange: fe, loading: w = !1, className: pe, ...me }) {
+	let [T, he] = d(""), [E, ge] = d(oe ?? null), { page: _e, setPage: ve } = t(1, g), ye = n(), D = le !== void 0, O = ue ?? D, k = de ?? D, A = x ?? _e, j = l((e) => {
+		x === void 0 && ve(e), S?.(e);
+	}, [
+		x,
+		ve,
+		S
+	]);
+	te({
+		serverMode: D,
+		controlledPage: x,
+		onPageChange: S,
+		sortIsManual: O,
+		onSortChange: C
+	});
+	let [M, N] = d(null), [P, F] = d(null), [I, L] = d({}), [R, z] = d({}), [B, V] = d({}), H = u(() => ({
+		...ne,
+		...ce
+	}), [ce]), U = b !== void 0 && h.some((e) => e.editable), be = u(() => v && v.length > 0 ? v : h.filter((e) => {
+		let t = m.find((t) => t[e.key] != null), n = t ? t[e.key] : void 0;
 		return typeof n == "string" || typeof n == "number";
 	}).map((e) => e.key), [
-		b,
-		_,
-		g
-	]), U = u(() => {
+		v,
+		h,
+		m
+	]), W = u(() => {
 		let e = T.trim().toLowerCase();
-		return !e || !y ? g : g.filter((t) => H.some((n) => {
+		return !e || !_ || k ? m : m.filter((t) => be.some((n) => {
 			let r = t[n];
 			return r != null && String(r).toLowerCase().includes(e);
 		}));
 	}, [
-		g,
+		m,
 		T,
-		y,
-		H
-	]), W = u(() => {
-		if (!E) return U;
+		_,
+		k,
+		be
+	]), G = u(() => {
+		if (!E || O) return W;
 		let e = E.direction === "asc" ? 1 : -1;
-		return [...U].sort((t, n) => o(t[E.key], n[E.key]) * e);
-	}, [U, E]), G = Math.max(1, Math.ceil(W.length / v));
-	te(() => {
-		D > G && O(G);
+		return [...W].sort((t, n) => o(t[E.key], n[E.key]) * e);
 	}, [
-		D,
-		G,
+		W,
+		E,
 		O
-	]);
-	let K = Math.min(D, G), q = u(() => {
-		let e = (K - 1) * v;
-		return W.slice(e, e + v);
+	]), xe = le ?? G.length, K = Math.max(1, Math.ceil(xe / g));
+	re(() => {
+		!D && A > K && j(K);
 	}, [
-		W,
+		D,
+		A,
 		K,
-		v
+		j
 	]);
-	function se(e) {
-		oe((t) => !t || t.key !== e ? {
+	let q = D ? A : Math.min(A, K), J = u(() => {
+		if (D) return G;
+		let e = (q - 1) * g;
+		return G.slice(e, e + g);
+	}, [
+		D,
+		G,
+		q,
+		g
+	]);
+	function Se(e) {
+		let t = E, n = !t || t.key !== e ? {
 			key: e,
 			direction: "asc"
 		} : t.direction === "asc" ? {
 			key: e,
 			direction: "desc"
-		} : null);
+		} : null;
+		ge(n), C?.(n);
 	}
-	let J = l((e) => (K - 1) * v + e, [K, v]), Y = u(() => {
-		if (!V) return [];
+	let Y = l((e) => (q - 1) * g + e, [q, g]), X = u(() => {
+		if (!U) return [];
 		let e = [];
-		return q.forEach((t, n) => {
-			let r = x(t, J(n));
-			for (let t of _) t.editable && e.push(m(r, t.key));
+		return J.forEach((t, n) => {
+			let r = y(t, Y(n));
+			for (let t of h) t.editable && e.push(ae(r, t.key));
 		}), e;
 	}, [
-		V,
-		q,
-		_,
-		J
-	]), X = l((e, t, n) => n in P ? P[n] : e[t.key], [P]), Z = l(async (e, t, n) => {
-		z((t) => ({
+		U,
+		J,
+		h,
+		Y
+	]), Z = l((e, t, n) => n in I ? I[n] : e[t.key], [I]), Ce = l(async (e, t, n) => {
+		V((t) => ({
 			...t,
 			[e]: !0
 		}));
 		try {
-			await S?.(n), k(B.saved(h(t)));
+			await b?.(n), ye(H.saved(p(t)));
 		} catch (n) {
-			F((t) => {
+			L((t) => {
 				let n = { ...t };
 				return delete n[e], n;
 			});
-			let r = n instanceof Error && n.message ? n.message : B.saveFailed(h(t));
-			L((t) => ({
+			let r = n instanceof Error && n.message ? n.message : H.saveFailed(p(t));
+			z((t) => ({
 				...t,
 				[e]: r
 			}));
 		} finally {
-			z((t) => {
+			V((t) => {
 				let n = { ...t };
 				return delete n[e], n;
 			});
 		}
 	}, [
-		S,
-		k,
-		B
+		b,
+		ye,
+		H
 	]), Q = l((e, t) => {
 		if (t === "none") {
-			j(null), N(e);
+			N(null), F(e);
 			return;
 		}
-		let n = Y.indexOf(e), r = Y[n + (t === "next" ? 1 : -1)];
+		let n = X.indexOf(e), r = X[n + (t === "next" ? 1 : -1)];
 		if (r === void 0) {
-			j(null), N(e);
+			N(null), F(e);
 			return;
 		}
-		j(r), N(null);
-	}, [Y]), $ = l((e, t, n, r, i, a) => {
-		let o = X(e, t, n);
+		N(r), F(null);
+	}, [X]), we = l((e, t, n, r, i, a) => {
+		let o = Z(e, t, n);
 		if (i === (t.formatEdit ? t.formatEdit(e) : String(o ?? ""))) {
 			Q(n, a);
 			return;
 		}
 		let s = t.parse ? t.parse(i, e) : t.editorType === "number" ? Number(i) : i.trim(), c = t.validate?.(s, e) ?? null;
 		if (c) {
-			L((e) => ({
+			z((e) => ({
 				...e,
 				[n]: c
 			}));
 			return;
 		}
-		L((e) => {
+		z((e) => {
 			let t = { ...e };
 			return delete t[n], t;
-		}), F((e) => ({
+		}), L((e) => ({
 			...e,
 			[n]: s
-		})), Q(n, a), Z(n, t, {
+		})), Q(n, a), Ce(n, t, {
 			row: e,
 			key: t.key,
 			value: s,
 			previous: o,
-			rowIndex: J(r)
+			rowIndex: Y(r)
 		});
 	}, [
-		X,
-		Q,
 		Z,
-		J
-	]), ce = u(() => _.map((e) => {
-		let t = E?.key === e.key ? E?.direction === "asc" ? " ▲" : " ▼" : "", n = e.sortable ? /* @__PURE__ */ p("button", {
+		Q,
+		Ce,
+		Y
+	]), Te = u(() => h.map((e) => {
+		let t = E?.key === e.key ? E?.direction === "asc" ? " ▲" : " ▼" : "", n = e.sortable ? /* @__PURE__ */ ie("button", {
 			type: "button",
 			className: s.sortButton,
-			onClick: () => se(e.key),
-			"aria-label": `Ordenar por ${h(e)}`,
+			onClick: () => Se(e.key),
+			"aria-label": `Ordenar por ${p(e)}`,
 			children: [e.header, /* @__PURE__ */ f("span", {
 				className: s.sortIndicator,
 				"aria-hidden": !0,
@@ -167,7 +192,7 @@ function g({ data: g, columns: _, pageSize: v = 10, searchable: y = !1, searchKe
 				[e.key]: n
 			};
 			return e.render ? e.render(r) : r[e.key] ?? null;
-		}, a = V && e.editable === !0;
+		}, a = U && e.editable === !0;
 		return {
 			key: String(e.key),
 			header: n,
@@ -175,24 +200,24 @@ function g({ data: g, columns: _, pageSize: v = 10, searchable: y = !1, searchKe
 			priority: e.priority,
 			width: e.width,
 			render: a ? (t, n) => {
-				let r = m(x(t, J(n)), e.key), a = X(t, e, r), o = e.formatEdit ? e.formatEdit(t) : String(a ?? "");
+				let r = ae(y(t, Y(n)), e.key), a = Z(t, e, r), o = e.formatEdit ? e.formatEdit(t) : String(a ?? "");
 				return /* @__PURE__ */ f(c, {
 					text: o,
-					columnLabel: h(e),
+					columnLabel: p(e),
 					rowNumber: n + 1,
 					inputType: e.editorType ?? "text",
-					editing: A === r,
-					refocus: M === r,
-					saving: R[r] === !0,
-					error: I[r] ?? null,
+					editing: M === r,
+					refocus: P === r,
+					saving: B[r] === !0,
+					error: R[r] ?? null,
 					errorId: `tempest-cell-error-${r.replace(/[^\w-]/g, "_")}`,
-					labels: B,
+					labels: H,
 					onOpen: () => {
-						j(r), N(null);
+						N(r), F(null);
 					},
-					onCommit: (i, a) => $(t, e, r, n, i, a),
+					onCommit: (i, a) => we(t, e, r, n, i, a),
 					onCancel: () => {
-						j(null), N(r), L((e) => {
+						N(null), F(r), z((e) => {
 							let t = { ...e };
 							return delete t[r], t;
 						});
@@ -202,45 +227,53 @@ function g({ data: g, columns: _, pageSize: v = 10, searchable: y = !1, searchKe
 			} : r
 		};
 	}), [
-		_,
+		h,
 		E,
-		V,
-		A,
+		U,
 		M,
+		P,
+		B,
 		R,
+		H,
 		I,
-		B,
-		P,
-		J,
-		$
-	]);
-	return /* @__PURE__ */ p("div", {
-		className: e(s.wrapper, w),
-		...ie,
+		Y,
+		we
+	]), $ = w && J.length === 0;
+	return /* @__PURE__ */ ie("div", {
+		className: e(s.wrapper, pe),
+		...me,
 		children: [
-			y && /* @__PURE__ */ f(i, {
+			_ && /* @__PURE__ */ f(i, {
 				value: T,
 				onChange: (e) => {
-					ae(e), O(1);
+					he(e), j(1), fe?.(e);
 				},
 				wrapperClassName: s.search
 			}),
-			/* @__PURE__ */ f(a, {
-				columns: ce,
-				data: q,
-				rowKey: (e, t) => x(e, J(t)),
-				emptyMessage: re
+			/* @__PURE__ */ f("div", {
+				className: e(w && !$ && s.pending),
+				"aria-busy": w || void 0,
+				"data-testid": "tempest-datatable-body",
+				children: $ ? /* @__PURE__ */ f(ee, {
+					columns: Te.length,
+					rows: Math.min(g, 8)
+				}) : /* @__PURE__ */ f(a, {
+					columns: Te,
+					data: J,
+					rowKey: (e, t) => y(e, Y(t)),
+					emptyMessage: se
+				})
 			}),
-			G > 1 && /* @__PURE__ */ f(r, {
-				page: K,
-				totalPages: G,
-				onPageChange: O,
-				totalItems: W.length
+			K > 1 && /* @__PURE__ */ f(r, {
+				page: q,
+				totalPages: K,
+				onPageChange: j,
+				totalItems: xe
 			})
 		]
 	});
 }
 //#endregion
-export { g as DataTable };
+export { m as DataTable };
 
 //# sourceMappingURL=DataTable.js.map

package/dist/components/DataTable/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","names":[],"sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — the table does four jobs\n * a caller turns on independently — paging (pageSize), search (searchable,\n * searchKeys), sort (initialSort) and inline edit (onCellChange, editLabels) — over\n * one row model (data, columns, rowKey, emptyMessage). The body is long because\n * those four share the derived-rows pipeline: filter, then sort, then page, then map\n * to cells, in that order and off the same memo.\n */\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { compareValues } from \"@/utils/compare-values\";\nimport { usePagination } from \"@/hooks\";\nimport { useAnnounce } from \"@/hooks/use-announce\";\nimport { Table, type TableAlign, type TableColumn, type TablePriority } from \"../Table\";\nimport { Pagination } from \"../Pagination\";\nimport { SearchBar } from \"../SearchBar\";\nimport { EditableCell } from \"./EditableCell\";\nimport { DEFAULT_EDIT_LABELS, type CellCommitMove, type DataTableEditLabels } from \"./edit-labels\";\nimport styles from \"./DataTable.module.css\";\n\nexport type SortDirection = \"asc\" | \"desc\";\n\nexport interface DataTableSort<T> {\n    key: keyof T;\n    direction: SortDirection;\n}\n\n/** Input types an editable column can use. */\nexport type DataTableEditorType = \"text\" | \"number\" | \"date\" | \"email\" | \"tel\" | \"url\";\n\n/** One accepted cell edit, handed to `onCellChange`. */\nexport interface DataTableCellChange<T> {\n    /** The row as it was before the edit. */\n    row: T;\n    /** Which column changed. */\n    key: keyof T;\n    /** The parsed new value. */\n    value: unknown;\n    /** The value that was displayed before the edit. */\n    previous: unknown;\n    /** Index of the row in the full `data` array. */\n    rowIndex: number;\n}\n\n/**\n * Column definition for {@link DataTable}. Extends the headless {@link Table}\n * column shape with a typed `key`, opt-in sorting, opt-in inline editing, and the\n * visual options that are forwarded to the underlying Table cell.\n */\nexport interface DataTableColumn<T> {\n    /** Property of the row this column reads from. Doubles as the cell key. */\n    key: keyof T;\n    /** Column heading. */\n    header: ReactNode;\n    /** Custom cell renderer. Defaults to `String(row[key])`. */\n    render?: (row: T) => ReactNode;\n    /** Enable click-to-sort on this column's header. */\n    sortable?: boolean;\n    /** Text alignment forwarded to the Table cell. */\n    align?: TableAlign;\n    /** Responsive visibility priority forwarded to the Table cell. */\n    priority?: TablePriority;\n    /** Fixed column width forwarded to the Table cell. */\n    width?: string | number;\n    /**\n     * Let cells in this column be edited in place. Requires `onCellChange` on the\n     * table; without it the column stays read-only.\n     */\n    editable?: boolean;\n    /** Editor input type. Default `\"text\"`. */\n    editorType?: DataTableEditorType;\n    /** Text the editor opens with. Defaults to `String(value ?? \"\")`. */\n    formatEdit?: (row: T) => string;\n    /**\n     * Turn the typed string into the stored value. Defaults to the trimmed string,\n     * or `Number(raw)` when `editorType` is `\"number\"`.\n     */\n    parse?: (raw: string, row: T) => unknown;\n    /** Return a message to reject the edit, or `null` to accept it. */\n    validate?: (value: unknown, row: T) => string | null;\n}\n\nexport interface DataTableProps<T> extends HTMLAttributes<HTMLDivElement> {\n    /** Full, unfiltered dataset. Sorting/filtering/pagination happen client-side. */\n    data: T[];\n    /** Column definitions. */\n    columns: DataTableColumn<T>[];\n    /** Rows per page. Default 10. */\n    pageSize?: number;\n    /** Render a search input above the table. Default false. */\n    searchable?: boolean;\n    /**\n     * Keys to match the search term against. When omitted, every column whose\n     * value is a string or number is searched.\n     */\n    searchKeys?: (keyof T)[];\n    /** Initial sort applied before any header interaction. */\n    initialSort?: DataTableSort<T>;\n    /** Stable key extractor for rows. Defaults to the row index. */\n    rowKey?: (row: T, index: number) => string | number;\n    /** Content shown when no rows match. */\n    emptyMessage?: ReactNode;\n    /**\n     * Persist an accepted cell edit. Return a promise: while it is pending the cell\n     * already shows the new value, and a rejection rolls that back and surfaces the\n     * error in the cell. Without this prop no column is editable.\n     */\n    onCellChange?: (change: DataTableCellChange<T>) => void | Promise<void>;\n    /** Override the PT-BR copy of the editing affordances. */\n    editLabels?: Partial<DataTableEditLabels>;\n}\n\n/** Identity of one cell, stable across re-renders and pagination. */\nfunction cellId(rowKeyValue: string | number, columnKey: PropertyKey): string {\n    return `${String(rowKeyValue)}::${String(columnKey)}`;\n}\n\nfunction headerText<T>(column: DataTableColumn<T>): string {\n    return typeof column.header === \"string\" ? column.header : String(column.key);\n}\n\n/**\n * Stateful, headless data table built on top of {@link Table}. Adds\n * client-side searching, click-to-sort columns, pagination and opt-in inline\n * editing while delegating all table markup to the underlying Table component.\n *\n * - Clicking a sortable header cycles asc → desc → unsorted.\n * - Search matches a case-insensitive substring across `searchKeys`\n *   (or every string/number column when not provided).\n * - Pagination is hidden when the result fits on a single page.\n * - A column with `editable` renders a button that opens an inline editor;\n *   `Enter` commits, `Escape` discards, `Tab` walks to the next editable cell.\n *\n * Editing is strictly opt-in: with no `editable` column (or no `onCellChange`) the\n * rendered markup is byte-for-byte what it was before the feature existed, which\n * matters because the component is published.\n *\n * ## Optimistic, with a visible rollback\n *\n * An accepted edit is shown immediately and `onCellChange` runs in the background.\n * If it rejects, the cell returns to the old value **and** shows the reason as a\n * `role=\"alert\"` tied to the cell. A silent revert is worse than no optimistic\n * update at all: the user watched their edit appear and has no reason to doubt it.\n *\n * The header memo depends on `columns`, `sort` and the editing state only:\n * `toggleSort` and the commit callbacks are recreated each render but always close\n * over the same setters, so including them would rebuild every header on every\n * render without changing behaviour. That is why `exhaustive-deps` is silenced on\n * that dependency array.\n */\nexport function DataTable<T>({\n    data,\n    columns,\n    pageSize = 10,\n    searchable = false,\n    searchKeys,\n    initialSort,\n    rowKey = (_row, index) => index,\n    emptyMessage,\n    onCellChange,\n    editLabels,\n    className,\n    ...rest\n}: DataTableProps<T>) {\n    const [search, setSearch] = useState<string>(\"\");\n    const [sort, setSort] = useState<DataTableSort<T> | null>(initialSort ?? null);\n    const { page, setPage } = usePagination(1, pageSize);\n    const announce = useAnnounce();\n\n    const [editing, setEditing] = useState<string | null>(null);\n    const [refocus, setRefocus] = useState<string | null>(null);\n    const [overrides, setOverrides] = useState<Record<string, unknown>>({});\n    const [errors, setErrors] = useState<Record<string, string>>({});\n    const [saving, setSaving] = useState<Record<string, boolean>>({});\n\n    const labels = useMemo<DataTableEditLabels>(\n        () => ({ ...DEFAULT_EDIT_LABELS, ...editLabels }),\n        [editLabels],\n    );\n    const editingEnabled = onCellChange !== undefined && columns.some((column) => column.editable);\n\n    const effectiveSearchKeys = useMemo<(keyof T)[]>(() => {\n        if (searchKeys && searchKeys.length > 0) return searchKeys;\n        return columns\n            .filter((column) => {\n                const sample = data.find((row) => row[column.key] != null);\n                const value = sample ? sample[column.key] : undefined;\n                return typeof value === \"string\" || typeof value === \"number\";\n            })\n            .map((column) => column.key);\n    }, [searchKeys, columns, data]);\n\n    const filtered = useMemo<T[]>(() => {\n        const term = search.trim().toLowerCase();\n        if (!term || !searchable) return data;\n        return data.filter((row) =>\n            effectiveSearchKeys.some((key) => {\n                const value = row[key];\n                return value != null && String(value).toLowerCase().includes(term);\n            }),\n        );\n    }, [data, search, searchable, effectiveSearchKeys]);\n\n    const sorted = useMemo<T[]>(() => {\n        if (!sort) return filtered;\n        const factor = sort.direction === \"asc\" ? 1 : -1;\n        return [...filtered].sort((a, b) => compareValues(a[sort.key], b[sort.key]) * factor);\n    }, [filtered, sort]);\n\n    const totalPages = Math.max(1, Math.ceil(sorted.length / pageSize));\n\n    // Clamp the current page when the dataset shrinks (e.g. after filtering).\n    useEffect(() => {\n        if (page > totalPages) setPage(totalPages);\n    }, [page, totalPages, setPage]);\n\n    const safePage = Math.min(page, totalPages);\n    const pageRows = useMemo<T[]>(() => {\n        const start = (safePage - 1) * pageSize;\n        return sorted.slice(start, start + pageSize);\n    }, [sorted, safePage, pageSize]);\n\n    function toggleSort(key: keyof T): void {\n        setSort((current) => {\n            if (!current || current.key !== key) return { key, direction: \"asc\" };\n            if (current.direction === \"asc\") return { key, direction: \"desc\" };\n            return null;\n        });\n    }\n\n    const absoluteIndex = useCallback(\n        (pageIndex: number) => (safePage - 1) * pageSize + pageIndex,\n        [safePage, pageSize],\n    );\n\n    /**\n     * Every editable cell on the page, row-major — the order `Tab` walks.\n     *\n     * Row-major and not column-major because a row is the record a user is\n     * correcting; walking down a column would make them re-find their place on\n     * every keystroke.\n     */\n    const editableCellIds = useMemo<string[]>(() => {\n        if (!editingEnabled) return [];\n        const ids: string[] = [];\n        pageRows.forEach((row, index) => {\n            const key = rowKey(row, absoluteIndex(index));\n            for (const column of columns) {\n                if (column.editable) ids.push(cellId(key, column.key));\n            }\n        });\n        return ids;\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [editingEnabled, pageRows, columns, absoluteIndex]);\n\n    const displayed = useCallback(\n        (row: T, column: DataTableColumn<T>, id: string): unknown =>\n            id in overrides ? overrides[id] : row[column.key],\n        [overrides],\n    );\n\n    /**\n     * Run the caller's `onCellChange` behind the optimistic update.\n     *\n     * Only the *success* is announced. The failure already renders as a\n     * `role=\"alert\"` inside the cell, which screen readers read on insertion —\n     * announcing it again from the shared region would read it twice and put the\n     * same text in the document twice.\n     */\n    const persist = useCallback(\n        async (id: string, column: DataTableColumn<T>, change: DataTableCellChange<T>) => {\n            setSaving((current) => ({ ...current, [id]: true }));\n            try {\n                await onCellChange?.(change);\n                announce(labels.saved(headerText(column)));\n            } catch (error) {\n                setOverrides((current) => {\n                    const next = { ...current };\n                    delete next[id];\n                    return next;\n                });\n                const message =\n                    error instanceof Error && error.message\n                        ? error.message\n                        : labels.saveFailed(headerText(column));\n                setErrors((current) => ({ ...current, [id]: message }));\n            } finally {\n                setSaving((current) => {\n                    const next = { ...current };\n                    delete next[id];\n                    return next;\n                });\n            }\n        },\n        [onCellChange, announce, labels],\n    );\n\n    const moveFrom = useCallback(\n        (id: string, move: CellCommitMove): void => {\n            if (move === \"none\") {\n                setEditing(null);\n                setRefocus(id);\n                return;\n            }\n            const index = editableCellIds.indexOf(id);\n            const target = editableCellIds[index + (move === \"next\" ? 1 : -1)];\n            if (target === undefined) {\n                setEditing(null);\n                setRefocus(id);\n                return;\n            }\n            setEditing(target);\n            setRefocus(null);\n        },\n        [editableCellIds],\n    );\n\n    /**\n     * Parse, validate, stage optimistically, then save in the background.\n     *\n     * Validation runs before anything is staged, and a rejection leaves the editor\n     * open with the message attached to the input — the user has to be able to fix\n     * what they typed without retyping it.\n     */\n    const commit = useCallback(\n        (\n            row: T,\n            column: DataTableColumn<T>,\n            id: string,\n            pageIndex: number,\n            raw: string,\n            move: CellCommitMove,\n        ): void => {\n            const previous = displayed(row, column, id);\n            const currentText = column.formatEdit ? column.formatEdit(row) : String(previous ?? \"\");\n            if (raw === currentText) {\n                moveFrom(id, move);\n                return;\n            }\n\n            const value = column.parse\n                ? column.parse(raw, row)\n                : column.editorType === \"number\"\n                  ? Number(raw)\n                  : raw.trim();\n\n            const invalid = column.validate?.(value, row) ?? null;\n            if (invalid) {\n                setErrors((current) => ({ ...current, [id]: invalid }));\n                return;\n            }\n\n            setErrors((current) => {\n                const next = { ...current };\n                delete next[id];\n                return next;\n            });\n            setOverrides((current) => ({ ...current, [id]: value }));\n            moveFrom(id, move);\n            void persist(id, column, {\n                row,\n                key: column.key,\n                value,\n                previous,\n                rowIndex: absoluteIndex(pageIndex),\n            });\n        },\n        [displayed, moveFrom, persist, absoluteIndex],\n    );\n\n    const tableColumns = useMemo<TableColumn<T>[]>(\n        () =>\n            columns.map((column) => {\n                const isSorted = sort?.key === column.key;\n                const indicator = isSorted ? (sort?.direction === \"asc\" ? \" ▲\" : \" ▼\") : \"\";\n                const header = column.sortable ? (\n                    <button\n                        type=\"button\"\n                        className={styles.sortButton}\n                        onClick={() => toggleSort(column.key)}\n                        aria-label={`Ordenar por ${headerText(column)}`}\n                    >\n                        {column.header}\n                        <span className={styles.sortIndicator} aria-hidden>\n                            {indicator}\n                        </span>\n                    </button>\n                ) : (\n                    column.header\n                );\n\n                const plainCell = (row: T): ReactNode => {\n                    if (column.render) return column.render(row);\n                    return (row[column.key] as ReactNode) ?? null;\n                };\n\n                /**\n                 * Render an editable cell's content against the optimistic value.\n                 *\n                 * The row is shallow-patched rather than the value passed alongside it,\n                 * because a column with a custom `render` (a `<Money>`, a badge) reads\n                 * the row — handing it the stale row would show the old number under a\n                 * cell the user just changed.\n                 */\n                const patchedCell = (row: T, value: unknown): ReactNode => {\n                    const patched = { ...row, [column.key]: value } as T;\n                    if (column.render) return column.render(patched);\n                    return (patched[column.key] as ReactNode) ?? null;\n                };\n\n                const editable = editingEnabled && column.editable === true;\n\n                return {\n                    key: String(column.key),\n                    header,\n                    align: column.align,\n                    priority: column.priority,\n                    width: column.width,\n                    render: editable\n                        ? (row: T, index: number) => {\n                              const id = cellId(rowKey(row, absoluteIndex(index)), column.key);\n                              const value = displayed(row, column, id);\n                              const text = column.formatEdit\n                                  ? column.formatEdit(row)\n                                  : String(value ?? \"\");\n                              return (\n                                  <EditableCell\n                                      text={text}\n                                      columnLabel={headerText(column)}\n                                      rowNumber={index + 1}\n                                      inputType={column.editorType ?? \"text\"}\n                                      editing={editing === id}\n                                      refocus={refocus === id}\n                                      saving={saving[id] === true}\n                                      error={errors[id] ?? null}\n                                      errorId={`tempest-cell-error-${id.replace(/[^\\w-]/g, \"_\")}`}\n                                      labels={labels}\n                                      onOpen={() => {\n                                          setEditing(id);\n                                          setRefocus(null);\n                                      }}\n                                      onCommit={(raw, move) =>\n                                          commit(row, column, id, index, raw, move)\n                                      }\n                                      onCancel={() => {\n                                          setEditing(null);\n                                          setRefocus(id);\n                                          setErrors((current) => {\n                                              const next = { ...current };\n                                              delete next[id];\n                                              return next;\n                                          });\n                                      }}\n                                  >\n                                      {patchedCell(row, value)}\n                                  </EditableCell>\n                              );\n                          }\n                        : plainCell,\n                };\n            }),\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [\n            columns,\n            sort,\n            editingEnabled,\n            editing,\n            refocus,\n            saving,\n            errors,\n            labels,\n            overrides,\n            absoluteIndex,\n            commit,\n        ],\n    );\n\n    return (\n        <div className={cn(styles.wrapper, className)} {...rest}>\n            {searchable && (\n                <SearchBar\n                    value={search}\n                    onChange={(value) => {\n                        setSearch(value);\n                        setPage(1);\n                    }}\n                    wrapperClassName={styles.search}\n                />\n            )}\n            <Table\n                columns={tableColumns}\n                data={pageRows}\n                rowKey={(row, index) => rowKey(row, absoluteIndex(index))}\n                emptyMessage={emptyMessage}\n            />\n            {totalPages > 1 && (\n                <Pagination\n                    page={safePage}\n                    totalPages={totalPages}\n                    onPageChange={setPage}\n                    totalItems={sorted.length}\n                />\n            )}\n        </div>\n    );\n}\n"],"mappings":";;;;;;;;;;;;;AAkHA,SAAS,EAAO,GAA8B,GAAgC;CAC1E,OAAO,GAAG,OAAO,CAAW,EAAE,IAAI,OAAO,CAAS;AACtD;AAEA,SAAS,EAAc,GAAoC;CACvD,OAAO,OAAO,EAAO,UAAW,WAAW,EAAO,SAAS,OAAO,EAAO,GAAG;AAChF;AA+BA,SAAgB,EAAa,EACzB,SACA,YACA,cAAW,IACX,gBAAa,IACb,eACA,iBACA,aAAU,GAAM,MAAU,GAC1B,kBACA,iBACA,eACA,cACA,GAAG,MACe;CAClB,IAAM,CAAC,GAAQ,MAAa,EAAiB,EAAE,GACzC,CAAC,GAAM,MAAW,EAAkC,MAAe,IAAI,GACvE,EAAE,SAAM,eAAY,EAAc,GAAG,CAAQ,GAC7C,IAAW,EAAY,GAEvB,CAAC,GAAS,KAAc,EAAwB,IAAI,GACpD,CAAC,GAAS,KAAc,EAAwB,IAAI,GACpD,CAAC,GAAW,KAAgB,EAAkC,CAAC,CAAC,GAChE,CAAC,GAAQ,KAAa,EAAiC,CAAC,CAAC,GACzD,CAAC,GAAQ,KAAa,EAAkC,CAAC,CAAC,GAE1D,IAAS,SACJ;EAAE,GAAG;EAAqB,GAAG;CAAW,IAC/C,CAAC,CAAU,CACf,GACM,IAAiB,MAAiB,KAAA,KAAa,EAAQ,MAAM,MAAW,EAAO,QAAQ,GAEvF,IAAsB,QACpB,KAAc,EAAW,SAAS,IAAU,IACzC,EACF,QAAQ,MAAW;EAChB,IAAM,IAAS,EAAK,MAAM,MAAQ,EAAI,EAAO,QAAQ,IAAI,GACnD,IAAQ,IAAS,EAAO,EAAO,OAAO,KAAA;EAC5C,OAAO,OAAO,KAAU,YAAY,OAAO,KAAU;CACzD,CAAC,CAAC,CACD,KAAK,MAAW,EAAO,GAAG,GAChC;EAAC;EAAY;EAAS;CAAI,CAAC,GAExB,IAAW,QAAmB;EAChC,IAAM,IAAO,EAAO,KAAK,CAAC,CAAC,YAAY;EAEvC,OADI,CAAC,KAAQ,CAAC,IAAmB,IAC1B,EAAK,QAAQ,MAChB,EAAoB,MAAM,MAAQ;GAC9B,IAAM,IAAQ,EAAI;GAClB,OAAO,KAAS,QAAQ,OAAO,CAAK,CAAC,CAAC,YAAY,CAAC,CAAC,SAAS,CAAI;EACrE,CAAC,CACL;CACJ,GAAG;EAAC;EAAM;EAAQ;EAAY;CAAmB,CAAC,GAE5C,IAAS,QAAmB;EAC9B,IAAI,CAAC,GAAM,OAAO;EAClB,IAAM,IAAS,EAAK,cAAc,QAAQ,IAAI;EAC9C,OAAO,CAAC,GAAG,CAAQ,CAAC,CAAC,MAAM,GAAG,MAAM,EAAc,EAAE,EAAK,MAAM,EAAE,EAAK,IAAI,IAAI,CAAM;CACxF,GAAG,CAAC,GAAU,CAAI,CAAC,GAEb,IAAa,KAAK,IAAI,GAAG,KAAK,KAAK,EAAO,SAAS,CAAQ,CAAC;CAGlE,SAAgB;EACZ,AAAI,IAAO,KAAY,EAAQ,CAAU;CAC7C,GAAG;EAAC;EAAM;EAAY;CAAO,CAAC;CAE9B,IAAM,IAAW,KAAK,IAAI,GAAM,CAAU,GACpC,IAAW,QAAmB;EAChC,IAAM,KAAS,IAAW,KAAK;EAC/B,OAAO,EAAO,MAAM,GAAO,IAAQ,CAAQ;CAC/C,GAAG;EAAC;EAAQ;EAAU;CAAQ,CAAC;CAE/B,SAAS,GAAW,GAAoB;EACpC,IAAS,MACD,CAAC,KAAW,EAAQ,QAAQ,IAAY;GAAE;GAAK,WAAW;EAAM,IAChE,EAAQ,cAAc,QAAc;GAAE;GAAK,WAAW;EAAO,IAC1D,IACV;CACL;CAEA,IAAM,IAAgB,GACjB,OAAuB,IAAW,KAAK,IAAW,GACnD,CAAC,GAAU,CAAQ,CACvB,GASM,IAAkB,QAAwB;EAC5C,IAAI,CAAC,GAAgB,OAAO,CAAC;EAC7B,IAAM,IAAgB,CAAC;EAOvB,OANA,EAAS,SAAS,GAAK,MAAU;GAC7B,IAAM,IAAM,EAAO,GAAK,EAAc,CAAK,CAAC;GAC5C,KAAK,IAAM,KAAU,GACjB,AAAI,EAAO,YAAU,EAAI,KAAK,EAAO,GAAK,EAAO,GAAG,CAAC;EAE7D,CAAC,GACM;CAEX,GAAG;EAAC;EAAgB;EAAU;EAAS;CAAa,CAAC,GAE/C,IAAY,GACb,GAAQ,GAA4B,MACjC,KAAM,IAAY,EAAU,KAAM,EAAI,EAAO,MACjD,CAAC,CAAS,CACd,GAUM,IAAU,EACZ,OAAO,GAAY,GAA4B,MAAmC;EAC9E,GAAW,OAAa;GAAE,GAAG;IAAU,IAAK;EAAK,EAAE;EACnD,IAAI;GAEA,AADA,MAAM,IAAe,CAAM,GAC3B,EAAS,EAAO,MAAM,EAAW,CAAM,CAAC,CAAC;EAC7C,SAAS,GAAO;GACZ,GAAc,MAAY;IACtB,IAAM,IAAO,EAAE,GAAG,EAAQ;IAE1B,OADA,OAAO,EAAK,IACL;GACX,CAAC;GACD,IAAM,IACF,aAAiB,SAAS,EAAM,UAC1B,EAAM,UACN,EAAO,WAAW,EAAW,CAAM,CAAC;GAC9C,GAAW,OAAa;IAAE,GAAG;KAAU,IAAK;GAAQ,EAAE;EAC1D,UAAU;GACN,GAAW,MAAY;IACnB,IAAM,IAAO,EAAE,GAAG,EAAQ;IAE1B,OADA,OAAO,EAAK,IACL;GACX,CAAC;EACL;CACJ,GACA;EAAC;EAAc;EAAU;CAAM,CACnC,GAEM,IAAW,GACZ,GAAY,MAA+B;EACxC,IAAI,MAAS,QAAQ;GAEjB,AADA,EAAW,IAAI,GACf,EAAW,CAAE;GACb;EACJ;EACA,IAAM,IAAQ,EAAgB,QAAQ,CAAE,GAClC,IAAS,EAAgB,KAAS,MAAS,SAAS,IAAI;EAC9D,IAAI,MAAW,KAAA,GAAW;GAEtB,AADA,EAAW,IAAI,GACf,EAAW,CAAE;GACb;EACJ;EAEA,AADA,EAAW,CAAM,GACjB,EAAW,IAAI;CACnB,GACA,CAAC,CAAe,CACpB,GASM,IAAS,GAEP,GACA,GACA,GACA,GACA,GACA,MACO;EACP,IAAM,IAAW,EAAU,GAAK,GAAQ,CAAE;EAE1C,IAAI,OADgB,EAAO,aAAa,EAAO,WAAW,CAAG,IAAI,OAAO,KAAY,EAAE,IAC7D;GACrB,EAAS,GAAI,CAAI;GACjB;EACJ;EAEA,IAAM,IAAQ,EAAO,QACf,EAAO,MAAM,GAAK,CAAG,IACrB,EAAO,eAAe,WACpB,OAAO,CAAG,IACV,EAAI,KAAK,GAEX,IAAU,EAAO,WAAW,GAAO,CAAG,KAAK;EACjD,IAAI,GAAS;GACT,GAAW,OAAa;IAAE,GAAG;KAAU,IAAK;GAAQ,EAAE;GACtD;EACJ;EASA,AAPA,GAAW,MAAY;GACnB,IAAM,IAAO,EAAE,GAAG,EAAQ;GAE1B,OADA,OAAO,EAAK,IACL;EACX,CAAC,GACD,GAAc,OAAa;GAAE,GAAG;IAAU,IAAK;EAAM,EAAE,GACvD,EAAS,GAAI,CAAI,GACjB,EAAa,GAAI,GAAQ;GACrB;GACA,KAAK,EAAO;GACZ;GACA;GACA,UAAU,EAAc,CAAS;EACrC,CAAC;CACL,GACA;EAAC;EAAW;EAAU;EAAS;CAAa,CAChD,GAEM,KAAe,QAEb,EAAQ,KAAK,MAAW;EAEpB,IAAM,IADW,GAAM,QAAQ,EAAO,MACR,GAAM,cAAc,QAAQ,OAAO,OAAQ,IACnE,IAAS,EAAO,WAClB,kBAAC,UAAD;GACI,MAAK;GACL,WAAW,EAAO;GAClB,eAAe,GAAW,EAAO,GAAG;GACpC,cAAY,eAAe,EAAW,CAAM;GAJhD,UAAA,CAMK,EAAO,QACR,kBAAC,QAAD;IAAM,WAAW,EAAO;IAAe,eAAA;IAClC,UAAA;GACC,CAAA,CACF;EAER,CAAA,IAAA,EAAO,QAGL,KAAa,MACX,EAAO,SAAe,EAAO,OAAO,CAAG,IACnC,EAAI,EAAO,QAAsB,MAWvC,KAAe,GAAQ,MAA8B;GACvD,IAAM,IAAU;IAAE,GAAG;KAAM,EAAO,MAAM;GAAM;GAE9C,OADI,EAAO,SAAe,EAAO,OAAO,CAAO,IACvC,EAAQ,EAAO,QAAsB;EACjD,GAEM,IAAW,KAAkB,EAAO,aAAa;EAEvD,OAAO;GACH,KAAK,OAAO,EAAO,GAAG;GACtB;GACA,OAAO,EAAO;GACd,UAAU,EAAO;GACjB,OAAO,EAAO;GACd,QAAQ,KACD,GAAQ,MAAkB;IACvB,IAAM,IAAK,EAAO,EAAO,GAAK,EAAc,CAAK,CAAC,GAAG,EAAO,GAAG,GACzD,IAAQ,EAAU,GAAK,GAAQ,CAAE,GACjC,IAAO,EAAO,aACd,EAAO,WAAW,CAAG,IACrB,OAAO,KAAS,EAAE;IACxB,OACI,kBAAC,GAAD;KACU;KACN,aAAa,EAAW,CAAM;KAC9B,WAAW,IAAQ;KACnB,WAAW,EAAO,cAAc;KAChC,SAAS,MAAY;KACrB,SAAS,MAAY;KACrB,QAAQ,EAAO,OAAQ;KACvB,OAAO,EAAO,MAAO;KACrB,SAAS,sBAAsB,EAAG,QAAQ,WAAW,GAAG;KAChD;KACR,cAAc;MAEV,AADA,EAAW,CAAE,GACb,EAAW,IAAI;KACnB;KACA,WAAW,GAAK,MACZ,EAAO,GAAK,GAAQ,GAAI,GAAO,GAAK,CAAI;KAE5C,gBAAgB;MAGZ,AAFA,EAAW,IAAI,GACf,EAAW,CAAE,GACb,GAAW,MAAY;OACnB,IAAM,IAAO,EAAE,GAAG,EAAQ;OAE1B,OADA,OAAO,EAAK,IACL;MACX,CAAC;KACL;KAEC,UAAA,EAAY,GAAK,CAAK;IACb,CAAA;GAEtB,IACA;EACV;CACJ,CAAC,GAEL;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACJ,CACJ;CAEA,OACI,kBAAC,OAAD;EAAK,WAAW,EAAG,EAAO,SAAS,CAAS;EAAG,GAAI;EAAnD,UAAA;GACK,KACG,kBAAC,GAAD;IACI,OAAO;IACP,WAAW,MAAU;KAEjB,AADA,GAAU,CAAK,GACf,EAAQ,CAAC;IACb;IACA,kBAAkB,EAAO;GAC5B,CAAA;GAEL,kBAAC,GAAD;IACI,SAAS;IACT,MAAM;IACN,SAAS,GAAK,MAAU,EAAO,GAAK,EAAc,CAAK,CAAC;IAC1C;GACjB,CAAA;GACA,IAAa,KACV,kBAAC,GAAD;IACI,MAAM;IACM;IACZ,cAAc;IACd,YAAY,EAAO;GACtB,CAAA;EAEJ;;AAEb"}
+{"version":3,"file":"DataTable.js","names":[],"sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — the table does four jobs\n * a caller turns on independently — paging (pageSize), search (searchable,\n * searchKeys), sort (initialSort) and inline edit (onCellChange, editLabels) — over\n * one row model (data, columns, rowKey, emptyMessage). The body is long because\n * those four share the derived-rows pipeline: filter, then sort, then page, then map\n * to cells, in that order and off the same memo.\n */\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { compareValues } from \"@/utils/compare-values\";\nimport { usePagination } from \"@/hooks\";\nimport { useAnnounce } from \"@/hooks/use-announce\";\nimport { Table, type TableAlign, type TableColumn, type TablePriority } from \"../Table\";\nimport { Pagination } from \"../Pagination\";\nimport { SearchBar } from \"../SearchBar\";\nimport { EditableCell } from \"./EditableCell\";\nimport { LoadingRows } from \"./LoadingRows\";\nimport { useDevWarnings } from \"./use-dev-warnings\";\nimport { DEFAULT_EDIT_LABELS, type CellCommitMove, type DataTableEditLabels } from \"./edit-labels\";\nimport styles from \"./DataTable.module.css\";\n\nexport type SortDirection = \"asc\" | \"desc\";\n\nexport interface DataTableSort<T> {\n    key: keyof T;\n    direction: SortDirection;\n}\n\n/** Input types an editable column can use. */\nexport type DataTableEditorType = \"text\" | \"number\" | \"date\" | \"email\" | \"tel\" | \"url\";\n\n/** One accepted cell edit, handed to `onCellChange`. */\nexport interface DataTableCellChange<T> {\n    /** The row as it was before the edit. */\n    row: T;\n    /** Which column changed. */\n    key: keyof T;\n    /** The parsed new value. */\n    value: unknown;\n    /** The value that was displayed before the edit. */\n    previous: unknown;\n    /** Index of the row in the full `data` array. */\n    rowIndex: number;\n}\n\n/**\n * Column definition for {@link DataTable}. Extends the headless {@link Table}\n * column shape with a typed `key`, opt-in sorting, opt-in inline editing, and the\n * visual options that are forwarded to the underlying Table cell.\n */\nexport interface DataTableColumn<T> {\n    /** Property of the row this column reads from. Doubles as the cell key. */\n    key: keyof T;\n    /** Column heading. */\n    header: ReactNode;\n    /** Custom cell renderer. Defaults to `String(row[key])`. */\n    render?: (row: T) => ReactNode;\n    /** Enable click-to-sort on this column's header. */\n    sortable?: boolean;\n    /** Text alignment forwarded to the Table cell. */\n    align?: TableAlign;\n    /** Responsive visibility priority forwarded to the Table cell. */\n    priority?: TablePriority;\n    /** Fixed column width forwarded to the Table cell. */\n    width?: string | number;\n    /**\n     * Let cells in this column be edited in place. Requires `onCellChange` on the\n     * table; without it the column stays read-only.\n     */\n    editable?: boolean;\n    /** Editor input type. Default `\"text\"`. */\n    editorType?: DataTableEditorType;\n    /** Text the editor opens with. Defaults to `String(value ?? \"\")`. */\n    formatEdit?: (row: T) => string;\n    /**\n     * Turn the typed string into the stored value. Defaults to the trimmed string,\n     * or `Number(raw)` when `editorType` is `\"number\"`.\n     */\n    parse?: (raw: string, row: T) => unknown;\n    /** Return a message to reject the edit, or `null` to accept it. */\n    validate?: (value: unknown, row: T) => string | null;\n}\n\nexport interface DataTableProps<T> extends HTMLAttributes<HTMLDivElement> {\n    /**\n     * The rows to work with.\n     *\n     * By default this is the **full** dataset and sorting, searching and paging\n     * all happen in memory. Pass `totalItems` and it becomes the current page as\n     * the server returned it, with those three delegated to the caller.\n     */\n    data: T[];\n    /** Column definitions. */\n    columns: DataTableColumn<T>[];\n    /** Rows per page. Default 10. */\n    pageSize?: number;\n    /** Render a search input above the table. Default false. */\n    searchable?: boolean;\n    /**\n     * Keys to match the search term against. When omitted, every column whose\n     * value is a string or number is searched.\n     */\n    searchKeys?: (keyof T)[];\n    /** Initial sort applied before any header interaction. */\n    initialSort?: DataTableSort<T>;\n    /** Stable key extractor for rows. Defaults to the row index. */\n    rowKey?: (row: T, index: number) => string | number;\n    /** Content shown when no rows match. */\n    emptyMessage?: ReactNode;\n    /**\n     * Persist an accepted cell edit. Return a promise: while it is pending the cell\n     * already shows the new value, and a rejection rolls that back and surfaces the\n     * error in the cell. Without this prop no column is editable.\n     */\n    onCellChange?: (change: DataTableCellChange<T>) => void | Promise<void>;\n    /** Override the PT-BR copy of the editing affordances. */\n    editLabels?: Partial<DataTableEditLabels>;\n    /**\n     * Total row count across every page — the `total` of a paginated envelope.\n     *\n     * Passing it switches the table to **server mode**: `data` is read as the\n     * current page, the page count comes from this number instead of\n     * `data.length`, and sorting and searching are delegated to the caller\n     * (see `manualSort` / `manualSearch`, which are implied here). Pair it with\n     * `page` and `onPageChange`.\n     */\n    totalItems?: number;\n    /** Current page, 1-based. Controlled — required in server mode. */\n    page?: number;\n    /** Called with the next page. Required whenever `page` is controlled. */\n    onPageChange?: (page: number) => void;\n    /**\n     * Sorting is the caller's job: clicking a header reports through\n     * `onSortChange` and the rows are left in the order they arrived.\n     *\n     * Implied by `totalItems`, because sorting the page in memory would sort\n     * *that page only* while the header claims the whole table is ordered.\n     */\n    manualSort?: boolean;\n    /** Called with the next sort state — `null` when the header cycles back to unsorted. */\n    onSortChange?: (sort: DataTableSort<T> | null) => void;\n    /**\n     * Searching is the caller's job: typing reports through `onSearchChange` and\n     * the rows are left as they arrived.\n     *\n     * Implied by `totalItems`. Filtering the current page would hide the rows\n     * that do not match *on this page* and show nothing for a term that only\n     * matches on page three — an empty table that looks like \"no results\".\n     */\n    manualSearch?: boolean;\n    /** Called with the current search term (debouncing, if any, is the caller's). */\n    onSearchChange?: (term: string) => void;\n    /**\n     * A fetch is in flight.\n     *\n     * With rows already on screen they stay put, dimmed and `aria-busy`, so the\n     * page does not jump under the cursor between pages. With no rows yet it\n     * renders placeholder lines at full height, which is a different statement\n     * from `emptyMessage`: \"loading\" and \"there is nothing\" are not the same\n     * screen.\n     */\n    loading?: boolean;\n}\n\n/** Identity of one cell, stable across re-renders and pagination. */\nfunction cellId(rowKeyValue: string | number, columnKey: PropertyKey): string {\n    return `${String(rowKeyValue)}::${String(columnKey)}`;\n}\n\nfunction headerText<T>(column: DataTableColumn<T>): string {\n    return typeof column.header === \"string\" ? column.header : String(column.key);\n}\n\n/**\n * Stateful, headless data table built on top of {@link Table}. Adds\n * client-side searching, click-to-sort columns, pagination and opt-in inline\n * editing while delegating all table markup to the underlying Table component.\n *\n * - Clicking a sortable header cycles asc → desc → unsorted.\n * - Search matches a case-insensitive substring across `searchKeys`\n *   (or every string/number column when not provided).\n * - Pagination is hidden when the result fits on a single page.\n * - A column with `editable` renders a button that opens an inline editor;\n *   `Enter` commits, `Escape` discards, `Tab` walks to the next editable cell.\n *\n * Editing is strictly opt-in: with no `editable` column (or no `onCellChange`) the\n * rendered markup is byte-for-byte what it was before the feature existed, which\n * matters because the component is published.\n *\n * ## Optimistic, with a visible rollback\n *\n * An accepted edit is shown immediately and `onCellChange` runs in the background.\n * If it rejects, the cell returns to the old value **and** shows the reason as a\n * `role=\"alert\"` tied to the cell. A silent revert is worse than no optimistic\n * update at all: the user watched their edit appear and has no reason to doubt it.\n *\n * The header memo depends on `columns`, `sort` and the editing state only:\n * `toggleSort` and the commit callbacks are recreated each render but always close\n * over the same setters, so including them would rebuild every header on every\n * render without changing behaviour. That is why `exhaustive-deps` is silenced on\n * that dependency array.\n */\nexport function DataTable<T>({\n    data,\n    columns,\n    pageSize = 10,\n    searchable = false,\n    searchKeys,\n    initialSort,\n    rowKey = (_row, index) => index,\n    emptyMessage,\n    onCellChange,\n    editLabels,\n    totalItems,\n    page: controlledPage,\n    onPageChange,\n    manualSort,\n    onSortChange,\n    manualSearch,\n    onSearchChange,\n    loading = false,\n    className,\n    ...rest\n}: DataTableProps<T>) {\n    const [search, setSearch] = useState<string>(\"\");\n    const [sort, setSort] = useState<DataTableSort<T> | null>(initialSort ?? null);\n    const { page: internalPage, setPage: setInternalPage } = usePagination(1, pageSize);\n    const announce = useAnnounce();\n\n    const serverMode = totalItems !== undefined;\n    const sortIsManual = manualSort ?? serverMode;\n    const searchIsManual = manualSearch ?? serverMode;\n    const page = controlledPage ?? internalPage;\n\n    const setPage = useCallback(\n        (next: number) => {\n            if (controlledPage === undefined) setInternalPage(next);\n            onPageChange?.(next);\n        },\n        [controlledPage, setInternalPage, onPageChange],\n    );\n\n    useDevWarnings({ serverMode, controlledPage, onPageChange, sortIsManual, onSortChange });\n\n    const [editing, setEditing] = useState<string | null>(null);\n    const [refocus, setRefocus] = useState<string | null>(null);\n    const [overrides, setOverrides] = useState<Record<string, unknown>>({});\n    const [errors, setErrors] = useState<Record<string, string>>({});\n    const [saving, setSaving] = useState<Record<string, boolean>>({});\n\n    const labels = useMemo<DataTableEditLabels>(\n        () => ({ ...DEFAULT_EDIT_LABELS, ...editLabels }),\n        [editLabels],\n    );\n    const editingEnabled = onCellChange !== undefined && columns.some((column) => column.editable);\n\n    const effectiveSearchKeys = useMemo<(keyof T)[]>(() => {\n        if (searchKeys && searchKeys.length > 0) return searchKeys;\n        return columns\n            .filter((column) => {\n                const sample = data.find((row) => row[column.key] != null);\n                const value = sample ? sample[column.key] : undefined;\n                return typeof value === \"string\" || typeof value === \"number\";\n            })\n            .map((column) => column.key);\n    }, [searchKeys, columns, data]);\n\n    const filtered = useMemo<T[]>(() => {\n        const term = search.trim().toLowerCase();\n        if (!term || !searchable || searchIsManual) return data;\n        return data.filter((row) =>\n            effectiveSearchKeys.some((key) => {\n                const value = row[key];\n                return value != null && String(value).toLowerCase().includes(term);\n            }),\n        );\n    }, [data, search, searchable, searchIsManual, effectiveSearchKeys]);\n\n    const sorted = useMemo<T[]>(() => {\n        if (!sort || sortIsManual) return filtered;\n        const factor = sort.direction === \"asc\" ? 1 : -1;\n        return [...filtered].sort((a, b) => compareValues(a[sort.key], b[sort.key]) * factor);\n    }, [filtered, sort, sortIsManual]);\n\n    const rowCount = totalItems ?? sorted.length;\n    const totalPages = Math.max(1, Math.ceil(rowCount / pageSize));\n\n    /**\n     * Clamp the current page when the dataset shrinks (e.g. after filtering).\n     *\n     * Skipped in server mode: `page` belongs to the caller there, and a clamp\n     * fired against a `totalItems` that has not caught up with the new filter\n     * yet would send them a page they did not ask for, mid-fetch.\n     */\n    useEffect(() => {\n        if (!serverMode && page > totalPages) setPage(totalPages);\n    }, [serverMode, page, totalPages, setPage]);\n\n    const safePage = serverMode ? page : Math.min(page, totalPages);\n    const pageRows = useMemo<T[]>(() => {\n        if (serverMode) return sorted;\n        const start = (safePage - 1) * pageSize;\n        return sorted.slice(start, start + pageSize);\n    }, [serverMode, sorted, safePage, pageSize]);\n\n    function toggleSort(key: keyof T): void {\n        const current = sort;\n        const next: DataTableSort<T> | null =\n            !current || current.key !== key\n                ? { key, direction: \"asc\" }\n                : current.direction === \"asc\"\n                  ? { key, direction: \"desc\" }\n                  : null;\n        setSort(next);\n        onSortChange?.(next);\n    }\n\n    const absoluteIndex = useCallback(\n        (pageIndex: number) => (safePage - 1) * pageSize + pageIndex,\n        [safePage, pageSize],\n    );\n\n    /**\n     * Every editable cell on the page, row-major — the order `Tab` walks.\n     *\n     * Row-major and not column-major because a row is the record a user is\n     * correcting; walking down a column would make them re-find their place on\n     * every keystroke.\n     */\n    const editableCellIds = useMemo<string[]>(() => {\n        if (!editingEnabled) return [];\n        const ids: string[] = [];\n        pageRows.forEach((row, index) => {\n            const key = rowKey(row, absoluteIndex(index));\n            for (const column of columns) {\n                if (column.editable) ids.push(cellId(key, column.key));\n            }\n        });\n        return ids;\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [editingEnabled, pageRows, columns, absoluteIndex]);\n\n    const displayed = useCallback(\n        (row: T, column: DataTableColumn<T>, id: string): unknown =>\n            id in overrides ? overrides[id] : row[column.key],\n        [overrides],\n    );\n\n    /**\n     * Run the caller's `onCellChange` behind the optimistic update.\n     *\n     * Only the *success* is announced. The failure already renders as a\n     * `role=\"alert\"` inside the cell, which screen readers read on insertion —\n     * announcing it again from the shared region would read it twice and put the\n     * same text in the document twice.\n     */\n    const persist = useCallback(\n        async (id: string, column: DataTableColumn<T>, change: DataTableCellChange<T>) => {\n            setSaving((current) => ({ ...current, [id]: true }));\n            try {\n                await onCellChange?.(change);\n                announce(labels.saved(headerText(column)));\n            } catch (error) {\n                setOverrides((current) => {\n                    const next = { ...current };\n                    delete next[id];\n                    return next;\n                });\n                const message =\n                    error instanceof Error && error.message\n                        ? error.message\n                        : labels.saveFailed(headerText(column));\n                setErrors((current) => ({ ...current, [id]: message }));\n            } finally {\n                setSaving((current) => {\n                    const next = { ...current };\n                    delete next[id];\n                    return next;\n                });\n            }\n        },\n        [onCellChange, announce, labels],\n    );\n\n    const moveFrom = useCallback(\n        (id: string, move: CellCommitMove): void => {\n            if (move === \"none\") {\n                setEditing(null);\n                setRefocus(id);\n                return;\n            }\n            const index = editableCellIds.indexOf(id);\n            const target = editableCellIds[index + (move === \"next\" ? 1 : -1)];\n            if (target === undefined) {\n                setEditing(null);\n                setRefocus(id);\n                return;\n            }\n            setEditing(target);\n            setRefocus(null);\n        },\n        [editableCellIds],\n    );\n\n    /**\n     * Parse, validate, stage optimistically, then save in the background.\n     *\n     * Validation runs before anything is staged, and a rejection leaves the editor\n     * open with the message attached to the input — the user has to be able to fix\n     * what they typed without retyping it.\n     */\n    const commit = useCallback(\n        (\n            row: T,\n            column: DataTableColumn<T>,\n            id: string,\n            pageIndex: number,\n            raw: string,\n            move: CellCommitMove,\n        ): void => {\n            const previous = displayed(row, column, id);\n            const currentText = column.formatEdit ? column.formatEdit(row) : String(previous ?? \"\");\n            if (raw === currentText) {\n                moveFrom(id, move);\n                return;\n            }\n\n            const value = column.parse\n                ? column.parse(raw, row)\n                : column.editorType === \"number\"\n                  ? Number(raw)\n                  : raw.trim();\n\n            const invalid = column.validate?.(value, row) ?? null;\n            if (invalid) {\n                setErrors((current) => ({ ...current, [id]: invalid }));\n                return;\n            }\n\n            setErrors((current) => {\n                const next = { ...current };\n                delete next[id];\n                return next;\n            });\n            setOverrides((current) => ({ ...current, [id]: value }));\n            moveFrom(id, move);\n            void persist(id, column, {\n                row,\n                key: column.key,\n                value,\n                previous,\n                rowIndex: absoluteIndex(pageIndex),\n            });\n        },\n        [displayed, moveFrom, persist, absoluteIndex],\n    );\n\n    const tableColumns = useMemo<TableColumn<T>[]>(\n        () =>\n            columns.map((column) => {\n                const isSorted = sort?.key === column.key;\n                const indicator = isSorted ? (sort?.direction === \"asc\" ? \" ▲\" : \" ▼\") : \"\";\n                const header = column.sortable ? (\n                    <button\n                        type=\"button\"\n                        className={styles.sortButton}\n                        onClick={() => toggleSort(column.key)}\n                        aria-label={`Ordenar por ${headerText(column)}`}\n                    >\n                        {column.header}\n                        <span className={styles.sortIndicator} aria-hidden>\n                            {indicator}\n                        </span>\n                    </button>\n                ) : (\n                    column.header\n                );\n\n                const plainCell = (row: T): ReactNode => {\n                    if (column.render) return column.render(row);\n                    return (row[column.key] as ReactNode) ?? null;\n                };\n\n                /**\n                 * Render an editable cell's content against the optimistic value.\n                 *\n                 * The row is shallow-patched rather than the value passed alongside it,\n                 * because a column with a custom `render` (a `<Money>`, a badge) reads\n                 * the row — handing it the stale row would show the old number under a\n                 * cell the user just changed.\n                 */\n                const patchedCell = (row: T, value: unknown): ReactNode => {\n                    const patched = { ...row, [column.key]: value } as T;\n                    if (column.render) return column.render(patched);\n                    return (patched[column.key] as ReactNode) ?? null;\n                };\n\n                const editable = editingEnabled && column.editable === true;\n\n                return {\n                    key: String(column.key),\n                    header,\n                    align: column.align,\n                    priority: column.priority,\n                    width: column.width,\n                    render: editable\n                        ? (row: T, index: number) => {\n                              const id = cellId(rowKey(row, absoluteIndex(index)), column.key);\n                              const value = displayed(row, column, id);\n                              const text = column.formatEdit\n                                  ? column.formatEdit(row)\n                                  : String(value ?? \"\");\n                              return (\n                                  <EditableCell\n                                      text={text}\n                                      columnLabel={headerText(column)}\n                                      rowNumber={index + 1}\n                                      inputType={column.editorType ?? \"text\"}\n                                      editing={editing === id}\n                                      refocus={refocus === id}\n                                      saving={saving[id] === true}\n                                      error={errors[id] ?? null}\n                                      errorId={`tempest-cell-error-${id.replace(/[^\\w-]/g, \"_\")}`}\n                                      labels={labels}\n                                      onOpen={() => {\n                                          setEditing(id);\n                                          setRefocus(null);\n                                      }}\n                                      onCommit={(raw, move) =>\n                                          commit(row, column, id, index, raw, move)\n                                      }\n                                      onCancel={() => {\n                                          setEditing(null);\n                                          setRefocus(id);\n                                          setErrors((current) => {\n                                              const next = { ...current };\n                                              delete next[id];\n                                              return next;\n                                          });\n                                      }}\n                                  >\n                                      {patchedCell(row, value)}\n                                  </EditableCell>\n                              );\n                          }\n                        : plainCell,\n                };\n            }),\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [\n            columns,\n            sort,\n            editingEnabled,\n            editing,\n            refocus,\n            saving,\n            errors,\n            labels,\n            overrides,\n            absoluteIndex,\n            commit,\n        ],\n    );\n\n    const showSkeleton = loading && pageRows.length === 0;\n\n    return (\n        <div className={cn(styles.wrapper, className)} {...rest}>\n            {searchable && (\n                <SearchBar\n                    value={search}\n                    onChange={(value) => {\n                        setSearch(value);\n                        setPage(1);\n                        onSearchChange?.(value);\n                    }}\n                    wrapperClassName={styles.search}\n                />\n            )}\n            <div\n                className={cn(loading && !showSkeleton && styles.pending)}\n                aria-busy={loading || undefined}\n                data-testid=\"tempest-datatable-body\"\n            >\n                {showSkeleton ? (\n                    <LoadingRows columns={tableColumns.length} rows={Math.min(pageSize, 8)} />\n                ) : (\n                    <Table\n                        columns={tableColumns}\n                        data={pageRows}\n                        rowKey={(row, index) => rowKey(row, absoluteIndex(index))}\n                        emptyMessage={emptyMessage}\n                    />\n                )}\n            </div>\n            {totalPages > 1 && (\n                <Pagination\n                    page={safePage}\n                    totalPages={totalPages}\n                    onPageChange={setPage}\n                    totalItems={rowCount}\n                />\n            )}\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/components/DataTable/DataTable.module.cjs

@@ -1,2 +1,2 @@
-var e=`tempest_wrapper_iB6ka`,t=`tempest_search_2y-yM`,n=`tempest_sortButton_9p6w4`,r=`tempest_sortIndicator_bZMlH`,i=`tempest_cellWrap_8-ugE`,a=`tempest_cellButton_BgVe-`,o=`tempest_cellButtonInvalid_6MDdd`,s=`tempest_cellEditor_LfeJW`,c=`tempest_cellEditorInvalid_J7e2W`,l=`tempest_cellError_CRf3e`,u={wrapper:e,search:t,sortButton:n,sortIndicator:r,cellWrap:i,cellButton:a,cellButtonInvalid:o,cellEditor:s,cellEditorInvalid:c,cellError:l};exports.cellButton=a,exports.cellButtonInvalid=o,exports.cellEditor=s,exports.cellEditorInvalid=c,exports.cellError=l,exports.cellWrap=i,exports.default=u,exports.search=t,exports.sortButton=n,exports.sortIndicator=r,exports.wrapper=e;
+var e=`tempest_wrapper_iB6ka`,t=`tempest_search_2y-yM`,n=`tempest_pending_AzPOe`,r=`tempest_loading_o14rI`,i=`tempest_loadingRow_PsjGm`,a=`tempest_sortButton_9p6w4`,o=`tempest_sortIndicator_bZMlH`,s=`tempest_cellWrap_8-ugE`,c=`tempest_cellButton_BgVe-`,l=`tempest_cellButtonInvalid_6MDdd`,u=`tempest_cellEditor_LfeJW`,d=`tempest_cellEditorInvalid_J7e2W`,f=`tempest_cellError_CRf3e`,p={wrapper:e,search:t,pending:n,loading:r,loadingRow:i,sortButton:a,sortIndicator:o,cellWrap:s,cellButton:c,cellButtonInvalid:l,cellEditor:u,cellEditorInvalid:d,cellError:f};exports.cellButton=c,exports.cellButtonInvalid=l,exports.cellEditor=u,exports.cellEditorInvalid=d,exports.cellError=f,exports.cellWrap=s,exports.default=p,exports.loading=r,exports.loadingRow=i,exports.pending=n,exports.search=t,exports.sortButton=a,exports.sortIndicator=o,exports.wrapper=e;
 //# sourceMappingURL=DataTable.module.cjs.map

package/dist/components/DataTable/DataTable.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.module.cjs","names":[],"sources":["../../../src/components/DataTable/DataTable.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-3, 0.75rem);\n}\n\n.search {\n    max-width: 20rem;\n}\n\n.sortButton {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.25rem;\n    padding: 0;\n    border: none;\n    background: none;\n    font: inherit;\n    color: inherit;\n    cursor: pointer;\n    user-select: none;\n}\n\n.sortIndicator {\n    font-size: 0.75em;\n    opacity: 0.7;\n}\n\n/* ── Inline editing ─────────────────────────────────────────────────────────── */\n\n.cellWrap {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1, 0.25rem);\n    align-items: stretch;\n    width: 100%;\n}\n\n/*\n * The dashed bottom edge is a resting affordance, not only a hover one: on a touch\n * screen there is no hover, so an editable cell that looks exactly like a read-only\n * one is undiscoverable. It is the weakest mark that still says \"this is editable\";\n * hover and focus then promote it to a full box.\n */\n.cellButton {\n    position: relative;\n    display: block;\n    width: 100%;\n    margin: calc(-1 * var(--tempest-space-1, 0.25rem)) calc(-1 * var(--tempest-space-2, 0.5rem));\n    padding: var(--tempest-space-1, 0.25rem) var(--tempest-space-2, 0.5rem);\n    border: 1px dashed transparent;\n    border-bottom-color: var(--tempest-border-strong);\n    border-radius: var(--tempest-radius-sm, 0.25rem);\n    background: none;\n    font: inherit;\n    color: inherit;\n    text-align: inherit;\n    cursor: pointer;\n}\n\n.cellButton:hover {\n    border-color: var(--tempest-border-strong);\n    background-color: var(--tempest-surface-2);\n}\n\n.cellButton:focus-visible {\n    outline: none;\n    border-color: transparent;\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width) var(--tempest-focus-ring-color);\n}\n\n.cellButtonInvalid {\n    border-color: var(--tempest-danger-border);\n}\n\n/*\n * Touch: grow the hit area to the cell's own padding — exactly `--tempest-space-3`\n * vertically and `--tempest-space-4` horizontally in `Table.module.css` — so the\n * whole `<td>` is tappable and the target clears 44px without spilling into the\n * neighbouring row, which a symmetric slop would do in a dense table.\n */\n@media (pointer: coarse) {\n    .cellButton::after {\n        content: \"\";\n        position: absolute;\n        inset-block: calc(-1 * var(--tempest-space-3, 0.75rem));\n        inset-inline: calc(-1 * var(--tempest-space-4, 1rem));\n    }\n}\n\n.cellButton[aria-busy=\"true\"] {\n    opacity: 0.6;\n}\n\n.cellEditor {\n    width: 100%;\n    min-width: 0;\n    margin: calc(-1 * var(--tempest-space-1, 0.25rem)) calc(-1 * var(--tempest-space-2, 0.5rem));\n    padding: var(--tempest-space-1, 0.25rem) var(--tempest-space-2, 0.5rem);\n    border: 1px solid var(--tempest-border-strong);\n    border-radius: var(--tempest-radius-sm, 0.25rem);\n    background-color: var(--tempest-bg);\n    font: inherit;\n    color: var(--tempest-text);\n}\n\n.cellEditor:focus {\n    outline: none;\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width) var(--tempest-focus-ring-color);\n}\n\n.cellEditorInvalid {\n    border-color: var(--tempest-danger-border);\n}\n\n/*\n * The message sits on a tinted fill because `--tempest-danger-fg` over\n * `--tempest-danger-bg` is a pair `contrast.test.ts` verifies in both themes;\n * danger text straight onto the table background is not.\n */\n.cellError {\n    padding: 0.125rem var(--tempest-space-2, 0.5rem);\n    border-radius: var(--tempest-radius-sm, 0.25rem);\n    background-color: var(--tempest-danger-bg);\n    color: var(--tempest-danger-fg);\n    font-size: var(--tempest-font-size-sm, 0.8125rem);\n    line-height: 1.4;\n    white-space: normal;\n}\n"],"mappings":""}
+{"version":3,"file":"DataTable.module.cjs","names":[],"sources":["../../../src/components/DataTable/DataTable.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-3, 0.75rem);\n}\n\n.search {\n    max-width: 20rem;\n}\n\n/*\n * A page swap keeps the rows it already has, dimmed. Replacing them with a\n * spinner would collapse the table to nothing and bounce whatever sits below it\n * back up, which is the jump the user's cursor was resting on.\n */\n.pending {\n    opacity: 0.6;\n    transition: opacity var(--tempest-duration-fast, 120ms) ease;\n    pointer-events: none;\n}\n\n.loading {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-3, 0.75rem);\n    padding: var(--tempest-space-3, 0.75rem) 0;\n}\n\n.loadingRow {\n    display: grid;\n    grid-auto-flow: column;\n    grid-auto-columns: 1fr;\n    gap: var(--tempest-space-4, 1rem);\n    align-items: center;\n}\n\n.sortButton {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.25rem;\n    padding: 0;\n    border: none;\n    background: none;\n    font: inherit;\n    color: inherit;\n    cursor: pointer;\n    user-select: none;\n}\n\n.sortIndicator {\n    font-size: 0.75em;\n    opacity: 0.7;\n}\n\n/* ── Inline editing ─────────────────────────────────────────────────────────── */\n\n.cellWrap {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1, 0.25rem);\n    align-items: stretch;\n    width: 100%;\n}\n\n/*\n * The dashed bottom edge is a resting affordance, not only a hover one: on a touch\n * screen there is no hover, so an editable cell that looks exactly like a read-only\n * one is undiscoverable. It is the weakest mark that still says \"this is editable\";\n * hover and focus then promote it to a full box.\n */\n.cellButton {\n    position: relative;\n    display: block;\n    width: 100%;\n    margin: calc(-1 * var(--tempest-space-1, 0.25rem)) calc(-1 * var(--tempest-space-2, 0.5rem));\n    padding: var(--tempest-space-1, 0.25rem) var(--tempest-space-2, 0.5rem);\n    border: 1px dashed transparent;\n    border-bottom-color: var(--tempest-border-strong);\n    border-radius: var(--tempest-radius-sm, 0.25rem);\n    background: none;\n    font: inherit;\n    color: inherit;\n    text-align: inherit;\n    cursor: pointer;\n}\n\n.cellButton:hover {\n    border-color: var(--tempest-border-strong);\n    background-color: var(--tempest-surface-2);\n}\n\n.cellButton:focus-visible {\n    outline: none;\n    border-color: transparent;\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width) var(--tempest-focus-ring-color);\n}\n\n.cellButtonInvalid {\n    border-color: var(--tempest-danger-border);\n}\n\n/*\n * Touch: grow the hit area to the cell's own padding — exactly `--tempest-space-3`\n * vertically and `--tempest-space-4` horizontally in `Table.module.css` — so the\n * whole `<td>` is tappable and the target clears 44px without spilling into the\n * neighbouring row, which a symmetric slop would do in a dense table.\n */\n@media (pointer: coarse) {\n    .cellButton::after {\n        content: \"\";\n        position: absolute;\n        inset-block: calc(-1 * var(--tempest-space-3, 0.75rem));\n        inset-inline: calc(-1 * var(--tempest-space-4, 1rem));\n    }\n}\n\n.cellButton[aria-busy=\"true\"] {\n    opacity: 0.6;\n}\n\n.cellEditor {\n    width: 100%;\n    min-width: 0;\n    margin: calc(-1 * var(--tempest-space-1, 0.25rem)) calc(-1 * var(--tempest-space-2, 0.5rem));\n    padding: var(--tempest-space-1, 0.25rem) var(--tempest-space-2, 0.5rem);\n    border: 1px solid var(--tempest-border-strong);\n    border-radius: var(--tempest-radius-sm, 0.25rem);\n    background-color: var(--tempest-bg);\n    font: inherit;\n    color: var(--tempest-text);\n}\n\n.cellEditor:focus {\n    outline: none;\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width) var(--tempest-focus-ring-color);\n}\n\n.cellEditorInvalid {\n    border-color: var(--tempest-danger-border);\n}\n\n/*\n * The message sits on a tinted fill because `--tempest-danger-fg` over\n * `--tempest-danger-bg` is a pair `contrast.test.ts` verifies in both themes;\n * danger text straight onto the table background is not.\n */\n.cellError {\n    padding: 0.125rem var(--tempest-space-2, 0.5rem);\n    border-radius: var(--tempest-radius-sm, 0.25rem);\n    background-color: var(--tempest-danger-bg);\n    color: var(--tempest-danger-fg);\n    font-size: var(--tempest-font-size-sm, 0.8125rem);\n    line-height: 1.4;\n    white-space: normal;\n}\n"],"mappings":""}

package/dist/components/DataTable/DataTable.module.js

@@ -1,17 +1,20 @@
 //#region src/components/DataTable/DataTable.module.css
-var e = "tempest_wrapper_iB6ka", t = "tempest_search_2y-yM", n = "tempest_sortButton_9p6w4", r = "tempest_sortIndicator_bZMlH", i = "tempest_cellWrap_8-ugE", a = "tempest_cellButton_BgVe-", o = "tempest_cellButtonInvalid_6MDdd", s = "tempest_cellEditor_LfeJW", c = "tempest_cellEditorInvalid_J7e2W", l = "tempest_cellError_CRf3e", u = {
+var e = "tempest_wrapper_iB6ka", t = "tempest_search_2y-yM", n = "tempest_pending_AzPOe", r = "tempest_loading_o14rI", i = "tempest_loadingRow_PsjGm", a = "tempest_sortButton_9p6w4", o = "tempest_sortIndicator_bZMlH", s = "tempest_cellWrap_8-ugE", c = "tempest_cellButton_BgVe-", l = "tempest_cellButtonInvalid_6MDdd", u = "tempest_cellEditor_LfeJW", d = "tempest_cellEditorInvalid_J7e2W", f = "tempest_cellError_CRf3e", p = {
 	wrapper: e,
 	search: t,
-	sortButton: n,
-	sortIndicator: r,
-	cellWrap: i,
-	cellButton: a,
-	cellButtonInvalid: o,
-	cellEditor: s,
-	cellEditorInvalid: c,
-	cellError: l
+	pending: n,
+	loading: r,
+	loadingRow: i,
+	sortButton: a,
+	sortIndicator: o,
+	cellWrap: s,
+	cellButton: c,
+	cellButtonInvalid: l,
+	cellEditor: u,
+	cellEditorInvalid: d,
+	cellError: f
 };
 //#endregion
-export { a as cellButton, o as cellButtonInvalid, s as cellEditor, c as cellEditorInvalid, l as cellError, i as cellWrap, u as default, t as search, n as sortButton, r as sortIndicator, e as wrapper };
+export { c as cellButton, l as cellButtonInvalid, u as cellEditor, d as cellEditorInvalid, f as cellError, s as cellWrap, p as default, r as loading, i as loadingRow, n as pending, t as search, a as sortButton, o as sortIndicator, e as wrapper };
 
 //# sourceMappingURL=DataTable.module.js.map

package/dist/components/DataTable/DataTable.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.module.js","names":[],"sources":["../../../src/components/DataTable/DataTable.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-3, 0.75rem);\n}\n\n.search {\n    max-width: 20rem;\n}\n\n.sortButton {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.25rem;\n    padding: 0;\n    border: none;\n    background: none;\n    font: inherit;\n    color: inherit;\n    cursor: pointer;\n    user-select: none;\n}\n\n.sortIndicator {\n    font-size: 0.75em;\n    opacity: 0.7;\n}\n\n/* ── Inline editing ─────────────────────────────────────────────────────────── */\n\n.cellWrap {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1, 0.25rem);\n    align-items: stretch;\n    width: 100%;\n}\n\n/*\n * The dashed bottom edge is a resting affordance, not only a hover one: on a touch\n * screen there is no hover, so an editable cell that looks exactly like a read-only\n * one is undiscoverable. It is the weakest mark that still says \"this is editable\";\n * hover and focus then promote it to a full box.\n */\n.cellButton {\n    position: relative;\n    display: block;\n    width: 100%;\n    margin: calc(-1 * var(--tempest-space-1, 0.25rem)) calc(-1 * var(--tempest-space-2, 0.5rem));\n    padding: var(--tempest-space-1, 0.25rem) var(--tempest-space-2, 0.5rem);\n    border: 1px dashed transparent;\n    border-bottom-color: var(--tempest-border-strong);\n    border-radius: var(--tempest-radius-sm, 0.25rem);\n    background: none;\n    font: inherit;\n    color: inherit;\n    text-align: inherit;\n    cursor: pointer;\n}\n\n.cellButton:hover {\n    border-color: var(--tempest-border-strong);\n    background-color: var(--tempest-surface-2);\n}\n\n.cellButton:focus-visible {\n    outline: none;\n    border-color: transparent;\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width) var(--tempest-focus-ring-color);\n}\n\n.cellButtonInvalid {\n    border-color: var(--tempest-danger-border);\n}\n\n/*\n * Touch: grow the hit area to the cell's own padding — exactly `--tempest-space-3`\n * vertically and `--tempest-space-4` horizontally in `Table.module.css` — so the\n * whole `<td>` is tappable and the target clears 44px without spilling into the\n * neighbouring row, which a symmetric slop would do in a dense table.\n */\n@media (pointer: coarse) {\n    .cellButton::after {\n        content: \"\";\n        position: absolute;\n        inset-block: calc(-1 * var(--tempest-space-3, 0.75rem));\n        inset-inline: calc(-1 * var(--tempest-space-4, 1rem));\n    }\n}\n\n.cellButton[aria-busy=\"true\"] {\n    opacity: 0.6;\n}\n\n.cellEditor {\n    width: 100%;\n    min-width: 0;\n    margin: calc(-1 * var(--tempest-space-1, 0.25rem)) calc(-1 * var(--tempest-space-2, 0.5rem));\n    padding: var(--tempest-space-1, 0.25rem) var(--tempest-space-2, 0.5rem);\n    border: 1px solid var(--tempest-border-strong);\n    border-radius: var(--tempest-radius-sm, 0.25rem);\n    background-color: var(--tempest-bg);\n    font: inherit;\n    color: var(--tempest-text);\n}\n\n.cellEditor:focus {\n    outline: none;\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width) var(--tempest-focus-ring-color);\n}\n\n.cellEditorInvalid {\n    border-color: var(--tempest-danger-border);\n}\n\n/*\n * The message sits on a tinted fill because `--tempest-danger-fg` over\n * `--tempest-danger-bg` is a pair `contrast.test.ts` verifies in both themes;\n * danger text straight onto the table background is not.\n */\n.cellError {\n    padding: 0.125rem var(--tempest-space-2, 0.5rem);\n    border-radius: var(--tempest-radius-sm, 0.25rem);\n    background-color: var(--tempest-danger-bg);\n    color: var(--tempest-danger-fg);\n    font-size: var(--tempest-font-size-sm, 0.8125rem);\n    line-height: 1.4;\n    white-space: normal;\n}\n"],"mappings":""}
+{"version":3,"file":"DataTable.module.js","names":[],"sources":["../../../src/components/DataTable/DataTable.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-3, 0.75rem);\n}\n\n.search {\n    max-width: 20rem;\n}\n\n/*\n * A page swap keeps the rows it already has, dimmed. Replacing them with a\n * spinner would collapse the table to nothing and bounce whatever sits below it\n * back up, which is the jump the user's cursor was resting on.\n */\n.pending {\n    opacity: 0.6;\n    transition: opacity var(--tempest-duration-fast, 120ms) ease;\n    pointer-events: none;\n}\n\n.loading {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-3, 0.75rem);\n    padding: var(--tempest-space-3, 0.75rem) 0;\n}\n\n.loadingRow {\n    display: grid;\n    grid-auto-flow: column;\n    grid-auto-columns: 1fr;\n    gap: var(--tempest-space-4, 1rem);\n    align-items: center;\n}\n\n.sortButton {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.25rem;\n    padding: 0;\n    border: none;\n    background: none;\n    font: inherit;\n    color: inherit;\n    cursor: pointer;\n    user-select: none;\n}\n\n.sortIndicator {\n    font-size: 0.75em;\n    opacity: 0.7;\n}\n\n/* ── Inline editing ─────────────────────────────────────────────────────────── */\n\n.cellWrap {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1, 0.25rem);\n    align-items: stretch;\n    width: 100%;\n}\n\n/*\n * The dashed bottom edge is a resting affordance, not only a hover one: on a touch\n * screen there is no hover, so an editable cell that looks exactly like a read-only\n * one is undiscoverable. It is the weakest mark that still says \"this is editable\";\n * hover and focus then promote it to a full box.\n */\n.cellButton {\n    position: relative;\n    display: block;\n    width: 100%;\n    margin: calc(-1 * var(--tempest-space-1, 0.25rem)) calc(-1 * var(--tempest-space-2, 0.5rem));\n    padding: var(--tempest-space-1, 0.25rem) var(--tempest-space-2, 0.5rem);\n    border: 1px dashed transparent;\n    border-bottom-color: var(--tempest-border-strong);\n    border-radius: var(--tempest-radius-sm, 0.25rem);\n    background: none;\n    font: inherit;\n    color: inherit;\n    text-align: inherit;\n    cursor: pointer;\n}\n\n.cellButton:hover {\n    border-color: var(--tempest-border-strong);\n    background-color: var(--tempest-surface-2);\n}\n\n.cellButton:focus-visible {\n    outline: none;\n    border-color: transparent;\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width) var(--tempest-focus-ring-color);\n}\n\n.cellButtonInvalid {\n    border-color: var(--tempest-danger-border);\n}\n\n/*\n * Touch: grow the hit area to the cell's own padding — exactly `--tempest-space-3`\n * vertically and `--tempest-space-4` horizontally in `Table.module.css` — so the\n * whole `<td>` is tappable and the target clears 44px without spilling into the\n * neighbouring row, which a symmetric slop would do in a dense table.\n */\n@media (pointer: coarse) {\n    .cellButton::after {\n        content: \"\";\n        position: absolute;\n        inset-block: calc(-1 * var(--tempest-space-3, 0.75rem));\n        inset-inline: calc(-1 * var(--tempest-space-4, 1rem));\n    }\n}\n\n.cellButton[aria-busy=\"true\"] {\n    opacity: 0.6;\n}\n\n.cellEditor {\n    width: 100%;\n    min-width: 0;\n    margin: calc(-1 * var(--tempest-space-1, 0.25rem)) calc(-1 * var(--tempest-space-2, 0.5rem));\n    padding: var(--tempest-space-1, 0.25rem) var(--tempest-space-2, 0.5rem);\n    border: 1px solid var(--tempest-border-strong);\n    border-radius: var(--tempest-radius-sm, 0.25rem);\n    background-color: var(--tempest-bg);\n    font: inherit;\n    color: var(--tempest-text);\n}\n\n.cellEditor:focus {\n    outline: none;\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width) var(--tempest-focus-ring-color);\n}\n\n.cellEditorInvalid {\n    border-color: var(--tempest-danger-border);\n}\n\n/*\n * The message sits on a tinted fill because `--tempest-danger-fg` over\n * `--tempest-danger-bg` is a pair `contrast.test.ts` verifies in both themes;\n * danger text straight onto the table background is not.\n */\n.cellError {\n    padding: 0.125rem var(--tempest-space-2, 0.5rem);\n    border-radius: var(--tempest-radius-sm, 0.25rem);\n    background-color: var(--tempest-danger-bg);\n    color: var(--tempest-danger-fg);\n    font-size: var(--tempest-font-size-sm, 0.8125rem);\n    line-height: 1.4;\n    white-space: normal;\n}\n"],"mappings":""}

package/dist/components/DataTable/LoadingRows.cjs

@@ -0,0 +1,2 @@
+const e=require("../Skeleton/Skeleton.cjs"),t=require("./DataTable.module.cjs");let n=require("react/jsx-runtime");function r({columns:r,rows:i}){return(0,n.jsx)(`div`,{className:t.default.loading,"aria-hidden":`true`,children:Array.from({length:i},(i,a)=>(0,n.jsx)(`div`,{className:t.default.loadingRow,children:Array.from({length:Math.max(r,1)},(t,r)=>(0,n.jsx)(e.Skeleton,{variant:`text`},r))},a))})}exports.LoadingRows=r;
+//# sourceMappingURL=LoadingRows.cjs.map

package/dist/components/DataTable/LoadingRows.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingRows.cjs","names":[],"sources":["../../../src/components/DataTable/LoadingRows.tsx"],"sourcesContent":["import { Skeleton } from \"../Skeleton\";\nimport styles from \"./DataTable.module.css\";\n\n/** Props for {@link LoadingRows}. */\nexport interface LoadingRowsProps {\n    /** How many placeholder cells to draw per row. */\n    columns: number;\n    /** How many placeholder rows to draw. */\n    rows: number;\n}\n\n/**\n * Placeholder rows for a table that has nothing to show yet.\n *\n * A first load and an empty result are different statements, and the usual\n * shortcut — showing `emptyMessage` while the request is in flight — tells the\n * user \"there is nothing here\" and then contradicts itself a moment later.\n * Drawing rows at roughly the real height also keeps whatever sits below the\n * table from jumping when the data lands.\n *\n * The whole block is `aria-hidden`: it carries no information a screen reader can\n * use, and the busy state is already on the wrapper. It also stays out of\n * `role=\"status\"`, which the table's announcement region already occupies —\n * two status regions on one table means the second one is what gets ignored.\n *\n * @param props - Grid size to fill.\n * @returns The placeholder block.\n */\nexport function LoadingRows({ columns, rows }: LoadingRowsProps) {\n    return (\n        <div className={styles.loading} aria-hidden=\"true\">\n            {Array.from({ length: rows }, (_, rowIndex) => (\n                <div key={rowIndex} className={styles.loadingRow}>\n                    {Array.from({ length: Math.max(columns, 1) }, (_, cellIndex) => (\n                        <Skeleton key={cellIndex} variant=\"text\" />\n                    ))}\n                </div>\n            ))}\n        </div>\n    );\n}\n"],"mappings":"mHA4BA,SAAgB,EAAY,CAAE,UAAS,QAA0B,CAC7D,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAS,cAAY,OACvC,SAAA,MAAM,KAAK,CAAE,OAAQ,CAAK,GAAI,EAAG,KAC9B,EAAA,EAAA,IAAA,CAAC,MAAD,CAAoB,UAAW,EAAA,QAAO,WACjC,SAAA,MAAM,KAAK,CAAE,OAAQ,KAAK,IAAI,EAAS,CAAC,CAAE,GAAI,EAAG,KAC9C,EAAA,EAAA,IAAA,CAAC,EAAA,SAAD,CAA0B,QAAQ,MAAQ,EAA3B,CAA2B,CAC7C,CACA,EAJK,CAIL,CACR,CACA,CAAA,CAEb"}