@alfakit/react 0.0.0-stage → 0.1.0

package/dist/components/table/spreadsheet.js

@@ -0,0 +1,420 @@
+import { useChoice, useDirection, usePanel, useT } from "../../context.js";
+import { Button } from "../ui/button.js";
+import { useStore } from "../../hooks/use-store.js";
+import { Spinner } from "../ui/spinner.js";
+import { useVirtualList } from "../../hooks/use-virtual-list.js";
+import { VirtualSpacerRow } from "../schema/virtual-spacer.js";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../ui/dialog.js";
+import { showToast } from "../notifications/flash-toasts.js";
+import { SPREADSHEET_CLASSES, SPREADSHEET_ISSUE_MESSAGES, SpreadsheetGrid, VIRTUAL_ESTIMATES, inertiaReload, saveSpreadsheetChanges, spreadsheetAnnouncement, spreadsheetAria, spreadsheetCellClass, spreadsheetCellId, spreadsheetColumns, spreadsheetRows, spreadsheetSelectionSize, virtualizeOptions } from "@alfakit/core";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon } from "lucide-react";
+//#region src/components/table/spreadsheet.tsx
+/**
+* Spreadsheet mode of a `Table::spreadsheet()` table (loaded on first use): a keyboard
+* grid over the page's records. Edits stay local (highlighted) until "Save" sends them in
+* one request; the server validates each cell with its column's rules and the record's
+* `update` policy, and its errors show on the cells.
+*/
+function Spreadsheet({ table, token, component, onClose }) {
+	const t = useT();
+	const choice = useChoice();
+	const direction = useDirection();
+	const panel = usePanel();
+	const baseId = useId();
+	const columns = useMemo(() => spreadsheetColumns(table), [table]);
+	const rows = useMemo(() => spreadsheetRows(table.records ?? [], columns), [table.records, columns]);
+	const [grid] = useState(() => new SpreadsheetGrid(rows, columns));
+	const state = useStore(grid.store);
+	const [announcement, setAnnouncement] = useState("");
+	const [preview, setPreview] = useState(null);
+	const gridRef = useRef(null);
+	const endpoint = panel.endpoints.tableCells;
+	useEffect(() => grid.setData(rows, columns), [
+		grid,
+		rows,
+		columns
+	]);
+	const { list, range, indexes, attach, item: attachRow } = useVirtualList(rows.length, virtualizeOptions(table.virtualize, VIRTUAL_ESTIMATES.row));
+	const announce = (message) => {
+		if (message) setAnnouncement(choice(message.key, message.count, {}, message.fallback));
+	};
+	useEffect(() => {
+		if (state.editing) return;
+		const root = gridRef.current;
+		if (!root || !root.contains(document.activeElement)) return;
+		const { row, col } = state.active;
+		const cell = document.getElementById(spreadsheetCellId(baseId, row, col));
+		if (cell) {
+			cell.focus({ preventScroll: false });
+			cell.scrollIntoView?.({
+				block: "nearest",
+				inline: "nearest"
+			});
+		} else list.scrollToIndex(row);
+	}, [
+		state.active,
+		state.editing,
+		baseId,
+		list
+	]);
+	const save = async () => {
+		const changes = grid.changes();
+		if (!endpoint || changes.length === 0 || state.saving) return;
+		grid.setSaving(true);
+		try {
+			const result = await saveSpreadsheetChanges(endpoint, token, component, changes);
+			grid.applySaveResult(result);
+			if (result.saved.length > 0) {
+				announce(spreadsheetAnnouncement("saved", result.saved.length));
+				inertiaReload();
+			}
+			if (result.errors.length > 0) announce(spreadsheetAnnouncement("failed", result.errors.length));
+		} catch (error) {
+			showToast({
+				id: "alfakit-spreadsheet-failed",
+				title: t("table.spreadsheet.request_failed", {}, "Couldn't save the changes"),
+				body: error instanceof Error ? error.message : String(error),
+				status: "danger",
+				format: "alfakit"
+			});
+		} finally {
+			grid.setSaving(false);
+		}
+	};
+	const undoSave = async () => {
+		const changes = grid.undoSaveChanges();
+		if (!endpoint || changes.length === 0) return;
+		grid.setSaving(true);
+		try {
+			const result = await saveSpreadsheetChanges(endpoint, token, component, changes);
+			grid.applySaveResult(result);
+			announce(spreadsheetAnnouncement("undo", result.saved.length));
+			if (result.saved.length > 0) inertiaReload();
+		} finally {
+			grid.setSaving(false);
+		}
+	};
+	const close = () => {
+		if (grid.dirtyCount > 0 && !window.confirm(t("table.spreadsheet.discard_confirm", {}, "Discard your unsaved changes?"))) return;
+		grid.discard();
+		onClose();
+	};
+	const onKeyDown = (event) => {
+		const result = grid.handleKey(event, direction);
+		if (result === "ignored") return;
+		event.preventDefault();
+		if (result === "save") save();
+		else if (result === "undo") announce(spreadsheetAnnouncement("undo", grid.undo()));
+		else if (result === "fill" || result === "clear") announce(spreadsheetAnnouncement(result, grid.lastApplied));
+		if (result === "commit" || result === "cancel" || result === "toggle") requestAnimationFrame(() => document.getElementById(spreadsheetCellId(baseId, grid.state.active.row, grid.state.active.col))?.focus());
+	};
+	const onCopy = (event) => {
+		if (grid.state.editing) return;
+		event.preventDefault();
+		event.clipboardData.setData("text/plain", grid.copyText());
+		announce(spreadsheetAnnouncement("copy", spreadsheetSelectionSize(grid.bounds())));
+	};
+	const onPaste = (event) => {
+		if (grid.state.editing) return;
+		event.preventDefault();
+		const plan = grid.planPaste(event.clipboardData.getData("text/plain"));
+		if (plan.changes.length === 0 && plan.issues.length === 0) return;
+		setPreview({
+			plan,
+			errors: [],
+			validating: Boolean(endpoint && plan.changes.length > 0)
+		});
+		if (!endpoint || plan.changes.length === 0) return;
+		saveSpreadsheetChanges(endpoint, token, component, plan.changes.map((change) => {
+			const record = grid.getRows()[change.row];
+			const column = grid.getColumns()[change.col];
+			return {
+				record: record?.key ?? "",
+				column: column?.name ?? "",
+				state: change.value
+			};
+		}), { dryRun: true }).then((result) => setPreview((current) => current && {
+			...current,
+			errors: result.errors,
+			validating: false
+		})).catch(() => setPreview((current) => current && {
+			...current,
+			validating: false
+		}));
+	};
+	const applyPaste = () => {
+		if (!preview) return;
+		const count = grid.apply(preview.plan.changes);
+		if (preview.errors.length > 0) grid.setErrors(preview.errors);
+		announce(spreadsheetAnnouncement("paste", count));
+		setPreview(null);
+	};
+	const issueText = (issue) => {
+		const message = SPREADSHEET_ISSUE_MESSAGES[issue.reason];
+		return t(message.key, {
+			text: issue.text,
+			column: columns[issue.col]?.label ?? "",
+			row: issue.row + 1
+		}, message.fallback);
+	};
+	const errorList = grid.errorCells();
+	const helpId = `${baseId}-help`;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "spreadsheet",
+		className: "flex flex-col gap-3",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": "spreadsheet-toolbar",
+				className: "flex flex-wrap items-center gap-2",
+				children: [
+					/* @__PURE__ */ jsxs(Button, {
+						type: "button",
+						size: "sm",
+						disabled: grid.dirtyCount === 0 || state.saving,
+						onClick: () => void save(),
+						children: [state.saving && /* @__PURE__ */ jsx(Spinner, {}), t("table.spreadsheet.save", {}, "Save changes")]
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						size: "sm",
+						variant: "outline",
+						disabled: !grid.canUndo || state.saving,
+						onClick: () => announce(spreadsheetAnnouncement("undo", grid.undo())),
+						children: t("table.spreadsheet.undo", {}, "Undo")
+					}),
+					grid.canUndoSave && /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						size: "sm",
+						variant: "outline",
+						disabled: state.saving,
+						onClick: () => void undoSave(),
+						children: t("table.spreadsheet.undo_save", {}, "Undo last save")
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						size: "sm",
+						variant: "ghost",
+						disabled: grid.dirtyCount === 0 || state.saving,
+						onClick: () => grid.discard(),
+						children: t("table.spreadsheet.discard", {}, "Discard")
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "text-muted-foreground text-sm",
+						"aria-live": "polite",
+						children: [grid.dirtyCount > 0 && choice("table.spreadsheet.unsaved", grid.dirtyCount, {}, ":count unsaved change|:count unsaved changes"), grid.errorCount > 0 && /* @__PURE__ */ jsx("span", {
+							className: "text-destructive ms-2",
+							children: choice("table.spreadsheet.errors", grid.errorCount, {}, ":count error|:count errors")
+						})]
+					}),
+					/* @__PURE__ */ jsx("span", { className: "flex-1" }),
+					/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						size: "sm",
+						variant: "outline",
+						onClick: close,
+						children: t("table.spreadsheet.close", {}, "Done")
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				id: helpId,
+				className: "sr-only",
+				children: t("table.spreadsheet.help", {}, "Arrow keys move between cells. Enter or F2 edits a cell, Escape cancels, Tab moves to the next cell. Ctrl+C copies, Ctrl+V pastes, Ctrl+D fills down, Ctrl+Z undoes and Ctrl+S saves.")
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"data-surface": "table",
+				className: SPREADSHEET_CLASSES.root,
+				style: { maxHeight: "70vh" },
+				children: [/* @__PURE__ */ jsxs("table", {
+					ref: gridRef,
+					role: "grid",
+					"aria-label": table.heading ?? t("table.spreadsheet.label", {}, "Spreadsheet"),
+					"aria-describedby": helpId,
+					"aria-rowcount": rows.length + 1,
+					"aria-colcount": columns.length,
+					"aria-multiselectable": "true",
+					"aria-busy": state.saving || void 0,
+					"data-slot": "spreadsheet-grid",
+					className: SPREADSHEET_CLASSES.table,
+					onKeyDown,
+					onCopy,
+					onPaste,
+					children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", {
+						"aria-rowindex": 1,
+						children: columns.map((column, col) => /* @__PURE__ */ jsx("th", {
+							role: "columnheader",
+							scope: "col",
+							"aria-colindex": col + 1,
+							className: SPREADSHEET_CLASSES.header,
+							children: column.label
+						}, column.name))
+					}) }), /* @__PURE__ */ jsxs("tbody", {
+						ref: attach,
+						children: [
+							/* @__PURE__ */ jsx(VirtualSpacerRow, {
+								height: range.before,
+								colSpan: columns.length
+							}),
+							indexes.map((row) => {
+								const record = rows[row];
+								if (!record) return null;
+								return /* @__PURE__ */ jsx("tr", {
+									ref: attachRow,
+									"data-index": row,
+									"aria-rowindex": row + 2,
+									children: columns.map((column, col) => {
+										const active = grid.isActive(row, col);
+										const editing = state.editing && state.editing.row === row && state.editing.col === col;
+										const errors = grid.errorsAt(row, col);
+										const value = grid.value(row, col);
+										const editable = grid.isEditable(row, col);
+										return /* @__PURE__ */ jsxs("td", {
+											id: spreadsheetCellId(baseId, row, col),
+											role: "gridcell",
+											...spreadsheetAria(row, col),
+											tabIndex: active ? 0 : -1,
+											"aria-selected": grid.isSelected(row, col),
+											"aria-readonly": !editable || void 0,
+											"aria-invalid": errors.length > 0 || void 0,
+											title: errors.join(" ") || void 0,
+											"data-slot": "spreadsheet-cell",
+											"data-dirty": grid.isDirty(row, col) || void 0,
+											"data-active": active || void 0,
+											className: spreadsheetCellClass(grid, row, col),
+											onMouseDown: (event) => {
+												if (editing) return;
+												grid.moveTo(row, col, event.shiftKey);
+											},
+											onDoubleClick: () => grid.beginEdit(),
+											children: [editing && column.kind === "select" ? /* @__PURE__ */ jsxs("select", {
+												autoFocus: true,
+												className: SPREADSHEET_CLASSES.editor,
+												"aria-label": column.label,
+												value: state.editing?.value === null || state.editing?.value === void 0 ? "" : String(state.editing.value),
+												onChange: (event) => {
+													grid.updateDraft(event.target.value);
+													grid.commitEdit();
+													document.getElementById(spreadsheetCellId(baseId, row, col))?.focus();
+												},
+												onBlur: () => grid.cancelEdit(),
+												children: [/* @__PURE__ */ jsx("option", {
+													value: "",
+													children: t("table.spreadsheet.no_value", {}, "—")
+												}), column.options?.map((option) => /* @__PURE__ */ jsx("option", {
+													value: option.value,
+													disabled: option.disabled,
+													children: option.label.replace(/<[^>]*>/g, "")
+												}, option.value))]
+											}) : editing ? /* @__PURE__ */ jsx("input", {
+												autoFocus: true,
+												type: column.kind === "number" ? "text" : column.inputType ?? "text",
+												inputMode: column.kind === "number" ? "decimal" : void 0,
+												className: SPREADSHEET_CLASSES.editor,
+												"aria-label": column.label,
+												value: state.editing?.value === null || state.editing?.value === void 0 ? "" : String(state.editing.value),
+												onChange: (event) => grid.updateDraft(event.target.value),
+												onBlur: () => grid.commitEdit()
+											}) : column.kind === "boolean" ? /* @__PURE__ */ jsxs("span", {
+												className: "inline-flex items-center gap-1",
+												children: [/* @__PURE__ */ jsx("span", {
+													"aria-hidden": "true",
+													className: "border-input data-[checked=true]:bg-primary data-[checked=true]:text-primary-foreground inline-flex size-4 items-center justify-center rounded-[4px] border",
+													"data-checked": Boolean(value),
+													children: Boolean(value) && /* @__PURE__ */ jsx(CheckIcon, { className: "size-3" })
+												}), /* @__PURE__ */ jsx("span", {
+													className: "sr-only",
+													children: value ? t("table.spreadsheet.yes", {}, "Yes") : t("table.spreadsheet.no", {}, "No")
+												})]
+											}) : grid.text(row, col), errors.length > 0 && /* @__PURE__ */ jsx("span", {
+												className: "sr-only",
+												children: errors.join(" ")
+											})]
+										}, column.name);
+									})
+								}, String(record.key));
+							}),
+							/* @__PURE__ */ jsx(VirtualSpacerRow, {
+								height: range.after,
+								colSpan: columns.length
+							})
+						]
+					})]
+				}), rows.length === 0 && /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground p-6 text-center text-sm",
+					children: t("table.spreadsheet.empty", {}, "No records to edit.")
+				})]
+			}),
+			errorList.length > 0 && /* @__PURE__ */ jsx("ul", {
+				"data-slot": "spreadsheet-errors",
+				className: "text-destructive flex flex-col gap-1 text-sm",
+				children: errorList.map((error) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "text-start hover:underline",
+					onClick: () => {
+						grid.moveTo(error.row, error.col);
+						document.getElementById(spreadsheetCellId(baseId, error.row, error.col))?.focus();
+					},
+					children: t("table.spreadsheet.cell_error", {
+						row: error.row + 1,
+						column: columns[error.col]?.label ?? "",
+						message: error.messages.join(" ")
+					}, "Row :row, :column: :message")
+				}) }, error.key))
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				className: "sr-only",
+				"data-slot": "spreadsheet-announcement",
+				children: announcement
+			}),
+			/* @__PURE__ */ jsx(Dialog, {
+				open: preview !== null,
+				onOpenChange: (open) => !open && setPreview(null),
+				children: /* @__PURE__ */ jsxs(DialogContent, {
+					className: "sm:max-w-lg",
+					children: [
+						/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: t("table.spreadsheet.paste_title", {}, "Paste cells") }), /* @__PURE__ */ jsxs(DialogDescription, { children: [choice("table.spreadsheet.paste_summary", preview?.plan.changes.length ?? 0, {}, ":count cell will change|:count cells will change"), (preview?.plan.skipped ?? 0) > 0 && ` ${choice("table.spreadsheet.paste_skipped", preview?.plan.skipped ?? 0, {}, ":count read-only cell is skipped|:count read-only cells are skipped")}`] })] }),
+						/* @__PURE__ */ jsxs("div", {
+							"data-slot": "spreadsheet-paste",
+							className: "flex flex-col gap-3",
+							children: [preview?.validating && /* @__PURE__ */ jsxs("p", {
+								className: "text-muted-foreground flex items-center gap-2 text-sm",
+								children: [/* @__PURE__ */ jsx(Spinner, {}), t("table.spreadsheet.paste_validating", {}, "Checking the values…")]
+							}), preview && (preview.plan.issues.length > 0 || preview.errors.length > 0) && /* @__PURE__ */ jsxs("ul", {
+								className: "text-destructive flex max-h-48 flex-col gap-1 overflow-auto text-sm",
+								children: [preview.plan.issues.map((issue) => /* @__PURE__ */ jsx("li", { children: issueText(issue) }, `issue-${issue.row}-${issue.col}`)), preview.errors.map((error) => {
+									const position = grid.position(error.record, error.column);
+									const column = columns.find((item) => item.name === error.column);
+									const row = position?.row ?? -1;
+									return /* @__PURE__ */ jsx("li", { children: t("table.spreadsheet.cell_error", {
+										row: row + 1,
+										column: column?.label ?? error.column,
+										message: error.messages.join(" ")
+									}, "Row :row, :column: :message") }, `error-${String(error.record)}-${error.column}`);
+								})]
+							})]
+						}),
+						/* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "outline",
+							onClick: () => setPreview(null),
+							children: t("cancel", {}, "Cancel")
+						}), /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							disabled: !preview || preview.plan.changes.length === 0,
+							onClick: applyPaste,
+							children: t("table.spreadsheet.paste_apply", {}, "Apply")
+						})] })
+					]
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { Spreadsheet };
+
+//# sourceMappingURL=spreadsheet.js.map

package/dist/components/table/spreadsheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spreadsheet.js","names":[],"sources":["../../../src/components/table/spreadsheet.tsx"],"sourcesContent":["import type {\n  PastePlan,\n  SpreadsheetAnnouncement,\n  SpreadsheetSaveResult,\n  TableSchema,\n} from '@alfakit/core'\nimport {\n  SPREADSHEET_CLASSES,\n  SPREADSHEET_ISSUE_MESSAGES,\n  SpreadsheetGrid,\n  VIRTUAL_ESTIMATES,\n  inertiaReload,\n  saveSpreadsheetChanges,\n  spreadsheetAnnouncement,\n  spreadsheetAria,\n  spreadsheetCellClass,\n  spreadsheetCellId,\n  spreadsheetColumns,\n  spreadsheetRows,\n  spreadsheetSelectionSize,\n  virtualizeOptions,\n} from '@alfakit/core'\nimport { CheckIcon } from 'lucide-react'\nimport {\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type ClipboardEvent,\n  type KeyboardEvent,\n} from 'react'\nimport { useChoice, useDirection, usePanel, useT } from '../../context'\nimport { useStore } from '../../hooks/use-store'\nimport { useVirtualList } from '../../hooks/use-virtual-list'\nimport { showToast } from '../notifications/flash-toasts'\nimport { VirtualSpacerRow } from '../schema/virtual-spacer'\nimport { Button } from '../ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '../ui/dialog'\nimport { Spinner } from '../ui/spinner'\n\nexport interface SpreadsheetProps {\n  table: TableSchema\n  token: string\n  component: string\n  /** Leave spreadsheet mode. */\n  onClose: () => void\n}\n\ninterface PastePreview {\n  plan: PastePlan\n  errors: SpreadsheetSaveResult['errors']\n  validating: boolean\n}\n\n/**\n * Spreadsheet mode of a `Table::spreadsheet()` table (loaded on first use): a keyboard\n * grid over the page's records. Edits stay local (highlighted) until \"Save\" sends them in\n * one request; the server validates each cell with its column's rules and the record's\n * `update` policy, and its errors show on the cells.\n */\nexport function Spreadsheet({ table, token, component, onClose }: SpreadsheetProps) {\n  const t = useT()\n  const choice = useChoice()\n  const direction = useDirection()\n  const panel = usePanel()\n  const baseId = useId()\n  const columns = useMemo(() => spreadsheetColumns(table), [table])\n  const rows = useMemo(\n    () => spreadsheetRows(table.records ?? [], columns),\n    [table.records, columns],\n  )\n  const [grid] = useState(() => new SpreadsheetGrid(rows, columns))\n  const state = useStore(grid.store)\n  const [announcement, setAnnouncement] = useState('')\n  const [preview, setPreview] = useState<PastePreview | null>(null)\n  const gridRef = useRef<HTMLTableElement | null>(null)\n  const endpoint = panel.endpoints.tableCells\n\n  // A reload (save, live update, polling) brings new records; edits of rows still on the\n  // page are kept.\n  useEffect(() => grid.setData(rows, columns), [grid, rows, columns])\n\n  const {\n    list,\n    range,\n    indexes,\n    attach,\n    item: attachRow,\n  } = useVirtualList(rows.length, virtualizeOptions(table.virtualize, VIRTUAL_ESTIMATES.row))\n\n  const announce = (message: SpreadsheetAnnouncement | null) => {\n    if (message) setAnnouncement(choice(message.key, message.count, {}, message.fallback))\n  }\n\n  // Keep focus on the active cell (roving tabindex), scrolling a virtualised row into view.\n  useEffect(() => {\n    if (state.editing) return\n\n    const root = gridRef.current\n\n    if (!root || !root.contains(document.activeElement)) return\n\n    const { row, col } = state.active\n    const cell = document.getElementById(spreadsheetCellId(baseId, row, col))\n\n    if (cell) {\n      cell.focus({ preventScroll: false })\n      cell.scrollIntoView?.({ block: 'nearest', inline: 'nearest' })\n    } else {\n      list.scrollToIndex(row)\n    }\n  }, [state.active, state.editing, baseId, list])\n\n  const save = async () => {\n    const changes = grid.changes()\n\n    if (!endpoint || changes.length === 0 || state.saving) return\n\n    grid.setSaving(true)\n\n    try {\n      const result = await saveSpreadsheetChanges(endpoint, token, component, changes)\n\n      grid.applySaveResult(result)\n\n      if (result.saved.length > 0) {\n        announce(spreadsheetAnnouncement('saved', result.saved.length))\n        inertiaReload()\n      }\n\n      if (result.errors.length > 0) {\n        announce(spreadsheetAnnouncement('failed', result.errors.length))\n      }\n    } catch (error) {\n      showToast({\n        id: 'alfakit-spreadsheet-failed',\n        title: t('table.spreadsheet.request_failed', {}, \"Couldn't save the changes\"),\n        body: error instanceof Error ? error.message : String(error),\n        status: 'danger',\n        format: 'alfakit',\n      })\n    } finally {\n      grid.setSaving(false)\n    }\n  }\n\n  const undoSave = async () => {\n    const changes = grid.undoSaveChanges()\n\n    if (!endpoint || changes.length === 0) return\n\n    grid.setSaving(true)\n\n    try {\n      const result = await saveSpreadsheetChanges(endpoint, token, component, changes)\n\n      grid.applySaveResult(result)\n      announce(spreadsheetAnnouncement('undo', result.saved.length))\n\n      if (result.saved.length > 0) inertiaReload()\n    } finally {\n      grid.setSaving(false)\n    }\n  }\n\n  const close = () => {\n    if (\n      grid.dirtyCount > 0 &&\n      !window.confirm(t('table.spreadsheet.discard_confirm', {}, 'Discard your unsaved changes?'))\n    ) {\n      return\n    }\n\n    grid.discard()\n    onClose()\n  }\n\n  const onKeyDown = (event: KeyboardEvent<HTMLTableElement>) => {\n    const result = grid.handleKey(event, direction)\n\n    if (result === 'ignored') return\n\n    event.preventDefault()\n\n    if (result === 'save') {\n      void save()\n    } else if (result === 'undo') {\n      announce(spreadsheetAnnouncement('undo', grid.undo()))\n    } else if (result === 'fill' || result === 'clear') {\n      announce(spreadsheetAnnouncement(result, grid.lastApplied))\n    }\n\n    if (result === 'commit' || result === 'cancel' || result === 'toggle') {\n      // Back from the editor to the cell.\n      requestAnimationFrame(() =>\n        document\n          .getElementById(spreadsheetCellId(baseId, grid.state.active.row, grid.state.active.col))\n          ?.focus(),\n      )\n    }\n  }\n\n  const onCopy = (event: ClipboardEvent<HTMLTableElement>) => {\n    if (grid.state.editing) return\n\n    event.preventDefault()\n    event.clipboardData.setData('text/plain', grid.copyText())\n    announce(spreadsheetAnnouncement('copy', spreadsheetSelectionSize(grid.bounds())))\n  }\n\n  const onPaste = (event: ClipboardEvent<HTMLTableElement>) => {\n    if (grid.state.editing) return\n\n    event.preventDefault()\n\n    const plan = grid.planPaste(event.clipboardData.getData('text/plain'))\n\n    if (plan.changes.length === 0 && plan.issues.length === 0) return\n\n    setPreview({ plan, errors: [], validating: Boolean(endpoint && plan.changes.length > 0) })\n\n    if (!endpoint || plan.changes.length === 0) return\n\n    // Validate the pasted values on the server before they are applied.\n    void saveSpreadsheetChanges(\n      endpoint,\n      token,\n      component,\n      plan.changes.map((change) => {\n        const record = grid.getRows()[change.row]\n        const column = grid.getColumns()[change.col]\n\n        return { record: record?.key ?? '', column: column?.name ?? '', state: change.value }\n      }),\n      { dryRun: true },\n    )\n      .then((result) =>\n        setPreview(\n          (current) => current && { ...current, errors: result.errors, validating: false },\n        ),\n      )\n      .catch(() => setPreview((current) => current && { ...current, validating: false }))\n  }\n\n  const applyPaste = () => {\n    if (!preview) return\n\n    const count = grid.apply(preview.plan.changes)\n\n    if (preview.errors.length > 0) grid.setErrors(preview.errors)\n\n    announce(spreadsheetAnnouncement('paste', count))\n    setPreview(null)\n  }\n\n  const issueText = (issue: PastePlan['issues'][number]) => {\n    const message = SPREADSHEET_ISSUE_MESSAGES[issue.reason]\n\n    return t(\n      message.key,\n      { text: issue.text, column: columns[issue.col]?.label ?? '', row: issue.row + 1 },\n      message.fallback,\n    )\n  }\n\n  const errorList = grid.errorCells()\n\n  const helpId = `${baseId}-help`\n\n  return (\n    <div data-slot=\"spreadsheet\" className=\"flex flex-col gap-3\">\n      <div data-slot=\"spreadsheet-toolbar\" className=\"flex flex-wrap items-center gap-2\">\n        <Button\n          type=\"button\"\n          size=\"sm\"\n          disabled={grid.dirtyCount === 0 || state.saving}\n          onClick={() => void save()}\n        >\n          {state.saving && <Spinner />}\n          {t('table.spreadsheet.save', {}, 'Save changes')}\n        </Button>\n        <Button\n          type=\"button\"\n          size=\"sm\"\n          variant=\"outline\"\n          disabled={!grid.canUndo || state.saving}\n          onClick={() => announce(spreadsheetAnnouncement('undo', grid.undo()))}\n        >\n          {t('table.spreadsheet.undo', {}, 'Undo')}\n        </Button>\n        {grid.canUndoSave && (\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            variant=\"outline\"\n            disabled={state.saving}\n            onClick={() => void undoSave()}\n          >\n            {t('table.spreadsheet.undo_save', {}, 'Undo last save')}\n          </Button>\n        )}\n        <Button\n          type=\"button\"\n          size=\"sm\"\n          variant=\"ghost\"\n          disabled={grid.dirtyCount === 0 || state.saving}\n          onClick={() => grid.discard()}\n        >\n          {t('table.spreadsheet.discard', {}, 'Discard')}\n        </Button>\n        <span className=\"text-muted-foreground text-sm\" aria-live=\"polite\">\n          {grid.dirtyCount > 0 &&\n            choice(\n              'table.spreadsheet.unsaved',\n              grid.dirtyCount,\n              {},\n              ':count unsaved change|:count unsaved changes',\n            )}\n          {grid.errorCount > 0 && (\n            <span className=\"text-destructive ms-2\">\n              {choice(\n                'table.spreadsheet.errors',\n                grid.errorCount,\n                {},\n                ':count error|:count errors',\n              )}\n            </span>\n          )}\n        </span>\n        <span className=\"flex-1\" />\n        <Button type=\"button\" size=\"sm\" variant=\"outline\" onClick={close}>\n          {t('table.spreadsheet.close', {}, 'Done')}\n        </Button>\n      </div>\n      <p id={helpId} className=\"sr-only\">\n        {t(\n          'table.spreadsheet.help',\n          {},\n          'Arrow keys move between cells. Enter or F2 edits a cell, Escape cancels, Tab moves to the next cell. Ctrl+C copies, Ctrl+V pastes, Ctrl+D fills down, Ctrl+Z undoes and Ctrl+S saves.',\n        )}\n      </p>\n      <div data-surface=\"table\" className={SPREADSHEET_CLASSES.root} style={{ maxHeight: '70vh' }}>\n        <table\n          ref={gridRef}\n          role=\"grid\"\n          aria-label={table.heading ?? t('table.spreadsheet.label', {}, 'Spreadsheet')}\n          aria-describedby={helpId}\n          aria-rowcount={rows.length + 1}\n          aria-colcount={columns.length}\n          aria-multiselectable=\"true\"\n          aria-busy={state.saving || undefined}\n          data-slot=\"spreadsheet-grid\"\n          className={SPREADSHEET_CLASSES.table}\n          onKeyDown={onKeyDown}\n          onCopy={onCopy}\n          onPaste={onPaste}\n        >\n          <thead>\n            <tr aria-rowindex={1}>\n              {columns.map((column, col) => (\n                <th\n                  key={column.name}\n                  role=\"columnheader\"\n                  scope=\"col\"\n                  aria-colindex={col + 1}\n                  className={SPREADSHEET_CLASSES.header}\n                >\n                  {column.label}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody ref={attach}>\n            <VirtualSpacerRow height={range.before} colSpan={columns.length} />\n            {indexes.map((row) => {\n              const record = rows[row]\n\n              if (!record) return null\n\n              return (\n                <tr\n                  key={String(record.key)}\n                  ref={attachRow}\n                  data-index={row}\n                  aria-rowindex={row + 2}\n                >\n                  {columns.map((column, col) => {\n                    const active = grid.isActive(row, col)\n                    const editing =\n                      state.editing && state.editing.row === row && state.editing.col === col\n                    const errors = grid.errorsAt(row, col)\n                    const value = grid.value(row, col)\n                    const editable = grid.isEditable(row, col)\n\n                    return (\n                      <td\n                        key={column.name}\n                        id={spreadsheetCellId(baseId, row, col)}\n                        role=\"gridcell\"\n                        {...spreadsheetAria(row, col)}\n                        tabIndex={active ? 0 : -1}\n                        aria-selected={grid.isSelected(row, col)}\n                        aria-readonly={!editable || undefined}\n                        aria-invalid={errors.length > 0 || undefined}\n                        title={errors.join(' ') || undefined}\n                        data-slot=\"spreadsheet-cell\"\n                        data-dirty={grid.isDirty(row, col) || undefined}\n                        data-active={active || undefined}\n                        className={spreadsheetCellClass(grid, row, col)}\n                        onMouseDown={(event) => {\n                          if (editing) return\n\n                          grid.moveTo(row, col, event.shiftKey)\n                        }}\n                        onDoubleClick={() => grid.beginEdit()}\n                      >\n                        {editing && column.kind === 'select' ? (\n                          <select\n                            autoFocus\n                            className={SPREADSHEET_CLASSES.editor}\n                            aria-label={column.label}\n                            value={\n                              state.editing?.value === null || state.editing?.value === undefined\n                                ? ''\n                                : String(state.editing.value)\n                            }\n                            onChange={(event) => {\n                              grid.updateDraft(event.target.value)\n                              grid.commitEdit()\n                              document.getElementById(spreadsheetCellId(baseId, row, col))?.focus()\n                            }}\n                            onBlur={() => grid.cancelEdit()}\n                          >\n                            <option value=\"\">{t('table.spreadsheet.no_value', {}, '—')}</option>\n                            {column.options?.map((option) => (\n                              <option\n                                key={option.value}\n                                value={option.value}\n                                disabled={option.disabled}\n                              >\n                                {option.label.replace(/<[^>]*>/g, '')}\n                              </option>\n                            ))}\n                          </select>\n                        ) : editing ? (\n                          <input\n                            autoFocus\n                            type={column.kind === 'number' ? 'text' : (column.inputType ?? 'text')}\n                            inputMode={column.kind === 'number' ? 'decimal' : undefined}\n                            className={SPREADSHEET_CLASSES.editor}\n                            aria-label={column.label}\n                            value={\n                              state.editing?.value === null || state.editing?.value === undefined\n                                ? ''\n                                : String(state.editing.value)\n                            }\n                            onChange={(event) => grid.updateDraft(event.target.value)}\n                            onBlur={() => grid.commitEdit()}\n                          />\n                        ) : column.kind === 'boolean' ? (\n                          <span className=\"inline-flex items-center gap-1\">\n                            <span\n                              aria-hidden=\"true\"\n                              className=\"border-input data-[checked=true]:bg-primary data-[checked=true]:text-primary-foreground inline-flex size-4 items-center justify-center rounded-[4px] border\"\n                              data-checked={Boolean(value)}\n                            >\n                              {Boolean(value) && <CheckIcon className=\"size-3\" />}\n                            </span>\n                            <span className=\"sr-only\">\n                              {value\n                                ? t('table.spreadsheet.yes', {}, 'Yes')\n                                : t('table.spreadsheet.no', {}, 'No')}\n                            </span>\n                          </span>\n                        ) : (\n                          grid.text(row, col)\n                        )}\n                        {errors.length > 0 && <span className=\"sr-only\">{errors.join(' ')}</span>}\n                      </td>\n                    )\n                  })}\n                </tr>\n              )\n            })}\n            <VirtualSpacerRow height={range.after} colSpan={columns.length} />\n          </tbody>\n        </table>\n        {rows.length === 0 && (\n          <p className=\"text-muted-foreground p-6 text-center text-sm\">\n            {t('table.spreadsheet.empty', {}, 'No records to edit.')}\n          </p>\n        )}\n      </div>\n      {errorList.length > 0 && (\n        <ul data-slot=\"spreadsheet-errors\" className=\"text-destructive flex flex-col gap-1 text-sm\">\n          {errorList.map((error) => (\n            <li key={error.key}>\n              <button\n                type=\"button\"\n                className=\"text-start hover:underline\"\n                onClick={() => {\n                  grid.moveTo(error.row, error.col)\n                  document.getElementById(spreadsheetCellId(baseId, error.row, error.col))?.focus()\n                }}\n              >\n                {t(\n                  'table.spreadsheet.cell_error',\n                  {\n                    row: error.row + 1,\n                    column: columns[error.col]?.label ?? '',\n                    message: error.messages.join(' '),\n                  },\n                  'Row :row, :column: :message',\n                )}\n              </button>\n            </li>\n          ))}\n        </ul>\n      )}\n      <span\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        className=\"sr-only\"\n        data-slot=\"spreadsheet-announcement\"\n      >\n        {announcement}\n      </span>\n\n      <Dialog open={preview !== null} onOpenChange={(open) => !open && setPreview(null)}>\n        <DialogContent className=\"sm:max-w-lg\">\n          <DialogHeader>\n            <DialogTitle>{t('table.spreadsheet.paste_title', {}, 'Paste cells')}</DialogTitle>\n            <DialogDescription>\n              {choice(\n                'table.spreadsheet.paste_summary',\n                preview?.plan.changes.length ?? 0,\n                {},\n                ':count cell will change|:count cells will change',\n              )}\n              {(preview?.plan.skipped ?? 0) > 0 &&\n                ` ${choice('table.spreadsheet.paste_skipped', preview?.plan.skipped ?? 0, {}, ':count read-only cell is skipped|:count read-only cells are skipped')}`}\n            </DialogDescription>\n          </DialogHeader>\n          <div data-slot=\"spreadsheet-paste\" className=\"flex flex-col gap-3\">\n            {preview?.validating && (\n              <p className=\"text-muted-foreground flex items-center gap-2 text-sm\">\n                <Spinner />\n                {t('table.spreadsheet.paste_validating', {}, 'Checking the values…')}\n              </p>\n            )}\n            {preview && (preview.plan.issues.length > 0 || preview.errors.length > 0) && (\n              <ul className=\"text-destructive flex max-h-48 flex-col gap-1 overflow-auto text-sm\">\n                {preview.plan.issues.map((issue) => (\n                  <li key={`issue-${issue.row}-${issue.col}`}>{issueText(issue)}</li>\n                ))}\n                {preview.errors.map((error) => {\n                  const position = grid.position(error.record, error.column)\n                  const column = columns.find((item) => item.name === error.column)\n                  const row = position?.row ?? -1\n\n                  return (\n                    <li key={`error-${String(error.record)}-${error.column}`}>\n                      {t(\n                        'table.spreadsheet.cell_error',\n                        {\n                          row: row + 1,\n                          column: column?.label ?? error.column,\n                          message: error.messages.join(' '),\n                        },\n                        'Row :row, :column: :message',\n                      )}\n                    </li>\n                  )\n                })}\n              </ul>\n            )}\n          </div>\n          <DialogFooter>\n            <Button type=\"button\" variant=\"outline\" onClick={() => setPreview(null)}>\n              {t('cancel', {}, 'Cancel')}\n            </Button>\n            <Button\n              type=\"button\"\n              disabled={!preview || preview.plan.changes.length === 0}\n              onClick={applyPaste}\n            >\n              {t('table.spreadsheet.paste_apply', {}, 'Apply')}\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/components/table/summary-rows.js

@@ -0,0 +1,104 @@
+import { useFormatter, useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { colorClass, textColorClasses } from "../../lib/colors.js";
+import { Icon } from "../../lib/icons.js";
+import { TableCell, TableFooter, TableRow } from "../ui/table.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/table/summary-rows.tsx
+const ALIGN = {
+	start: "text-start",
+	center: "text-center",
+	end: "text-end",
+	between: "text-start",
+	justify: "text-justify"
+};
+/** `Count::icons()`: each icon with how often it occurs. */
+function SummaryIcons({ icons }) {
+	const format = useFormatter();
+	if (icons.length === 0) return /* @__PURE__ */ jsx("span", {
+		className: "font-medium",
+		children: "—"
+	});
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "summary-icons",
+		className: "flex flex-wrap items-center gap-x-3 gap-y-1",
+		children: icons.map((item, index) => /* @__PURE__ */ jsxs("span", {
+			className: "inline-flex items-center gap-1",
+			children: [/* @__PURE__ */ jsx(Icon, {
+				name: item.icon,
+				className: cn("size-4", colorClass(textColorClasses, item.color ?? void 0, "gray"))
+			}), /* @__PURE__ */ jsx("span", {
+				className: "font-medium tabular-nums",
+				children: format.number(item.count)
+			})]
+		}, index))
+	});
+}
+/** One row of column summaries (`data-slot="table-summary"`). */
+function SummaryRow({ columns, values, label, leading, trailing, className }) {
+	const labelNode = label ? /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground text-xs font-medium",
+		children: label
+	}) : null;
+	return /* @__PURE__ */ jsxs(TableRow, {
+		"data-slot": "table-summary",
+		className: cn("bg-muted/30 hover:bg-muted/30", className),
+		children: [
+			leading > 0 && /* @__PURE__ */ jsx(TableCell, {
+				colSpan: leading,
+				children: labelNode
+			}),
+			columns.map((column, index) => /* @__PURE__ */ jsx(TableCell, {
+				className: cn("align-top", ALIGN[column.alignment ?? "start"]),
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-0.5",
+					children: [leading === 0 && index === 0 && labelNode, (values[column.name] ?? []).map((summary, position) => /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col",
+						children: [summary.label && /* @__PURE__ */ jsx("span", {
+							className: cn("text-muted-foreground text-xs", summary.hiddenLabel && "sr-only"),
+							children: summary.label
+						}), summary.icons ? /* @__PURE__ */ jsx(SummaryIcons, { icons: summary.icons }) : /* @__PURE__ */ jsx("span", {
+							className: "font-medium tabular-nums",
+							children: summary.value ?? "—"
+						})]
+					}, position))]
+				})
+			}, column.name)),
+			trailing > 0 && /* @__PURE__ */ jsx(TableCell, { colSpan: trailing })
+		]
+	});
+}
+/** The page and "all records" summary rows below the table body. */
+function TableSummaryFooter({ table, columns, leading, trailing, className }) {
+	const t = useT();
+	const rows = [table.summaries?.page, table.summaries?.all].filter((row) => Boolean(row));
+	if (rows.length === 0 && table.deferredTotals?.summaries) return /* @__PURE__ */ jsx(TableFooter, {
+		className,
+		children: /* @__PURE__ */ jsx(TableRow, {
+			"data-slot": "table-summary",
+			"aria-busy": "true",
+			children: /* @__PURE__ */ jsx(TableCell, {
+				colSpan: leading + columns.length + trailing,
+				children: /* @__PURE__ */ jsx("span", {
+					"aria-label": t("loading", {}, "Loading"),
+					className: "bg-muted-foreground/20 block h-4 w-40 animate-pulse rounded-md"
+				})
+			})
+		})
+	});
+	if (rows.length === 0) return null;
+	return /* @__PURE__ */ jsx(TableFooter, {
+		className,
+		children: rows.map((row) => /* @__PURE__ */ jsx(SummaryRow, {
+			columns,
+			values: row.values,
+			label: row.label,
+			leading,
+			trailing
+		}, row.label))
+	});
+}
+//#endregion
+export { SummaryRow, TableSummaryFooter };
+
+//# sourceMappingURL=summary-rows.js.map

package/dist/components/table/summary-rows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"summary-rows.js","names":[],"sources":["../../../src/components/table/summary-rows.tsx"],"sourcesContent":["import type {\n  ColumnSchema,\n  ColumnSummariesSchema,\n  SummaryValueSchema,\n  TableSchema,\n  TableSummaryRowSchema,\n} from '@alfakit/core'\nimport { useFormatter, useT } from '../../context'\nimport { colorClass, textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { TableCell, TableFooter, TableRow } from '../ui/table'\n\nconst ALIGN: Record<string, string> = {\n  start: 'text-start',\n  center: 'text-center',\n  end: 'text-end',\n  between: 'text-start',\n  justify: 'text-justify',\n}\n\nexport interface SummaryRowProps {\n  columns: ColumnSchema[]\n  values: ColumnSummariesSchema\n  /** Shown in the leading cells, or above the first column's values. */\n  label?: string\n  /** Cells before the columns (selection, reorder handle, leading actions). */\n  leading: number\n  /** Cells after the columns (trailing actions). */\n  trailing: number\n  className?: string\n}\n\n/** `Count::icons()`: each icon with how often it occurs. */\nfunction SummaryIcons({ icons }: { icons: NonNullable<SummaryValueSchema['icons']> }) {\n  const format = useFormatter()\n\n  if (icons.length === 0) {\n    return <span className=\"font-medium\">—</span>\n  }\n\n  return (\n    <span data-slot=\"summary-icons\" className=\"flex flex-wrap items-center gap-x-3 gap-y-1\">\n      {icons.map((item, index) => (\n        <span key={index} className=\"inline-flex items-center gap-1\">\n          <Icon\n            name={item.icon}\n            className={cn('size-4', colorClass(textColorClasses, item.color ?? undefined, 'gray'))}\n          />\n          <span className=\"font-medium tabular-nums\">{format.number(item.count)}</span>\n        </span>\n      ))}\n    </span>\n  )\n}\n\n/** One row of column summaries (`data-slot=\"table-summary\"`). */\nexport function SummaryRow({\n  columns,\n  values,\n  label,\n  leading,\n  trailing,\n  className,\n}: SummaryRowProps) {\n  const labelNode = label ? (\n    <span className=\"text-muted-foreground text-xs font-medium\">{label}</span>\n  ) : null\n\n  return (\n    <TableRow data-slot=\"table-summary\" className={cn('bg-muted/30 hover:bg-muted/30', className)}>\n      {leading > 0 && <TableCell colSpan={leading}>{labelNode}</TableCell>}\n      {columns.map((column, index) => (\n        <TableCell\n          key={column.name}\n          className={cn('align-top', ALIGN[column.alignment ?? 'start'])}\n        >\n          <div className=\"flex flex-col gap-0.5\">\n            {leading === 0 && index === 0 && labelNode}\n            {(values[column.name] ?? []).map((summary, position) => (\n              <div key={position} className=\"flex flex-col\">\n                {summary.label && (\n                  <span\n                    className={cn(\n                      'text-muted-foreground text-xs',\n                      summary.hiddenLabel && 'sr-only',\n                    )}\n                  >\n                    {summary.label}\n                  </span>\n                )}\n                {summary.icons ? (\n                  <SummaryIcons icons={summary.icons} />\n                ) : (\n                  <span className=\"font-medium tabular-nums\">{summary.value ?? '—'}</span>\n                )}\n              </div>\n            ))}\n          </div>\n        </TableCell>\n      ))}\n      {trailing > 0 && <TableCell colSpan={trailing} />}\n    </TableRow>\n  )\n}\n\n/** The page and \"all records\" summary rows below the table body. */\nexport function TableSummaryFooter({\n  table,\n  columns,\n  leading,\n  trailing,\n  className,\n}: {\n  table: TableSchema\n  columns: ColumnSchema[]\n  leading: number\n  trailing: number\n  className?: string\n}) {\n  const t = useT()\n  const rows = [table.summaries?.page, table.summaries?.all].filter(\n    (row): row is TableSummaryRowSchema => Boolean(row),\n  )\n\n  // `deferTotals()`: one placeholder row until the summaries arrive.\n  if (rows.length === 0 && table.deferredTotals?.summaries) {\n    return (\n      <TableFooter className={className}>\n        <TableRow data-slot=\"table-summary\" aria-busy=\"true\">\n          <TableCell colSpan={leading + columns.length + trailing}>\n            <span\n              aria-label={t('loading', {}, 'Loading')}\n              className=\"bg-muted-foreground/20 block h-4 w-40 animate-pulse rounded-md\"\n            />\n          </TableCell>\n        </TableRow>\n      </TableFooter>\n    )\n  }\n\n  if (rows.length === 0) {\n    return null\n  }\n\n  return (\n    <TableFooter className={className}>\n      {rows.map((row) => (\n        <SummaryRow\n          key={row.label}\n          columns={columns}\n          values={row.values}\n          label={row.label}\n          leading={leading}\n          trailing={trailing}\n        />\n      ))}\n    </TableFooter>\n  )\n}\n"],"mappings":";;;;;;;AAaA,MAAM,QAAgC;CACpC,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;CACT,SAAS;AACX;;AAeA,SAAS,aAAa,EAAE,SAA8D;CACpF,MAAM,SAAS,aAAa;CAE5B,IAAI,MAAM,WAAW,GACnB,OAAO,oBAAC,QAAD;EAAM,WAAU;EAAc,UAAA;CAAO,CAAA;CAG9C,OACE,oBAAC,QAAD;EAAM,aAAU;EAAgB,WAAU;EACvC,UAAA,MAAM,KAAK,MAAM,UAChB,qBAAC,QAAD;GAAkB,WAAU;GAA5B,UAAA,CACE,oBAAC,MAAD;IACE,MAAM,KAAK;IACX,WAAW,GAAG,UAAU,WAAW,kBAAkB,KAAK,SAAS,KAAA,GAAW,MAAM,CAAC;GACtF,CAAA,GACD,oBAAC,QAAD;IAAM,WAAU;IAA4B,UAAA,OAAO,OAAO,KAAK,KAAK;GAAQ,CAAA,CACxE;EANK,GAAA,KAML,CACP;CACG,CAAA;AAEV;;AAGA,SAAgB,WAAW,EACzB,SACA,QACA,OACA,SACA,UACA,aACkB;CAClB,MAAM,YAAY,QAChB,oBAAC,QAAD;EAAM,WAAU;EAA6C,UAAA;CAAY,CAAA,IACvE;CAEJ,OACE,qBAAC,UAAD;EAAU,aAAU;EAAgB,WAAW,GAAG,iCAAiC,SAAS;EAA5F,UAAA;GACG,UAAU,KAAK,oBAAC,WAAD;IAAW,SAAS;IAAU,UAAA;GAAqB,CAAA;GAClE,QAAQ,KAAK,QAAQ,UACpB,oBAAC,WAAD;IAEE,WAAW,GAAG,aAAa,MAAM,OAAO,aAAa,QAAQ;IAE7D,UAAA,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACG,YAAY,KAAK,UAAU,KAAK,YAC/B,OAAO,OAAO,SAAS,CAAC,EAAA,CAAG,KAAK,SAAS,aACzC,qBAAC,OAAD;MAAoB,WAAU;MAA9B,UAAA,CACG,QAAQ,SACP,oBAAC,QAAD;OACE,WAAW,GACT,iCACA,QAAQ,eAAe,SACzB;OAEC,UAAA,QAAQ;MACL,CAAA,GAEP,QAAQ,QACP,oBAAC,cAAD,EAAc,OAAO,QAAQ,MAAQ,CAAA,IAErC,oBAAC,QAAD;OAAM,WAAU;OAA4B,UAAA,QAAQ,SAAS;MAAU,CAAA,CAEtE;KAhBK,GAAA,QAgBL,CACN,CACE;;GACI,GAzBJ,OAAO,IAyBH,CACZ;GACA,WAAW,KAAK,oBAAC,WAAD,EAAW,SAAS,SAAW,CAAA;EACxC;;AAEd;;AAGA,SAAgB,mBAAmB,EACjC,OACA,SACA,SACA,UACA,aAOC;CACD,MAAM,IAAI,KAAK;CACf,MAAM,OAAO,CAAC,MAAM,WAAW,MAAM,MAAM,WAAW,GAAG,CAAC,CAAC,QACxD,QAAsC,QAAQ,GAAG,CACpD;CAGA,IAAI,KAAK,WAAW,KAAK,MAAM,gBAAgB,WAC7C,OACE,oBAAC,aAAD;EAAwB;EACtB,UAAA,oBAAC,UAAD;GAAU,aAAU;GAAgB,aAAU;GAC5C,UAAA,oBAAC,WAAD;IAAW,SAAS,UAAU,QAAQ,SAAS;IAC7C,UAAA,oBAAC,QAAD;KACE,cAAY,EAAE,WAAW,CAAC,GAAG,SAAS;KACtC,WAAU;IACX,CAAA;GACQ,CAAA;EACH,CAAA;CACC,CAAA;CAIjB,IAAI,KAAK,WAAW,GAClB,OAAO;CAGT,OACE,oBAAC,aAAD;EAAwB;EACrB,UAAA,KAAK,KAAK,QACT,oBAAC,YAAD;GAEW;GACT,QAAQ,IAAI;GACZ,OAAO,IAAI;GACF;GACC;EACX,GANM,IAAI,KAMV,CACF;CACU,CAAA;AAEjB"}

package/dist/components/table/table-block.d.ts

@@ -0,0 +1,12 @@
+import { TableSchema } from "@alfakit/core";
+//#region src/components/table/table-block.d.ts
+export interface DataTableProps {
+  table: TableSchema;
+  /** Context component (`table`, `relationManager:…`, `widget:…`). */
+  component?: string;
+  token?: string;
+  className?: string;
+}
+export declare function DataTable({ table: serverTable, component, token: tokenProp, className }: DataTableProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=table-block.d.ts.map

package/dist/components/table/table-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-block.d.ts","names":[],"sources":["../../../src/components/table/table-block.tsx"],"mappings":";;iBA0FiB;EACf,OAAO;;EAEP;EACA;EACA;;wBAiBc,YACd,OAAO,aACP,WACA,OAAO,WACP,aACC,iCAAc,IAAA"}