@alfakit/react 0.0.0-stage → 0.1.0

package/dist/components/table/table-block.js

@@ -0,0 +1,875 @@
+import { useActionRunner, useChoice, usePageSchema, usePanel, usePollComponent, useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { Icon } from "../../lib/icons.js";
+import { Button } from "../ui/button.js";
+import { useStore } from "../../hooks/use-store.js";
+import { extraProps } from "../../lib/attributes.js";
+import { Spinner } from "../ui/spinner.js";
+import { ActionList } from "../actions/action-list.js";
+import { useVirtualList } from "../../hooks/use-virtual-list.js";
+import { Input } from "../ui/input.js";
+import { Checkbox } from "../ui/checkbox.js";
+import { VirtualSpacerRow } from "../schema/virtual-spacer.js";
+import { showToast } from "../notifications/flash-toasts.js";
+import { Slot } from "../panel/slot.js";
+import { useIsMobile } from "../../hooks/use-mobile.js";
+import { LiveRecordsPill, useLiveUpdates } from "../realtime/live-records-pill.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table.js";
+import { TableCellContent } from "./cells.js";
+import { TableTriggerButton } from "./trigger-button.js";
+import { ColumnManager } from "./column-manager.js";
+import { ContentLayout, ContentLayoutSort } from "./content-layout.js";
+import { FilterIndicators, TableFilters } from "./filters.js";
+import { GroupHeaderRow, TableGroupingMenu, useCollapsedGroups, useTablePersistence } from "./grouping.js";
+import { TablePagination } from "./pagination.js";
+import { Spreadsheet } from "./spreadsheet-lazy.js";
+import { SummaryRow, TableSummaryFooter } from "./summary-rows.js";
+import { TableViews } from "./table-views.js";
+import { STACKED_TABLE_CLASSES, TableSelection, VIRTUAL_ESTIMATES, ariaSort, cachedTableTotals, canSelectAllRecords, columnGroupHeaderRow, columnVisibilityClasses, debounce, filtersPlacement, groupTableRows, isGroupedColumn, isTableLoading, loadTableTotals, mobileTable, moveListItem, pageFlash, pageSelectionState, paginationTotal, primaryColumnName, reorderTable, resolvePartialProps, selectedRecordsArguments, skeletonRowCount, stackedCellClasses, startTableReordering, stopTableReordering, tableLoadingStore, tableTotalsFailed, tableTotalsStore, triggerButtonView, virtualizeOptions, visitTable, withTableTotals } from "@alfakit/core";
+import { Link, router } from "@inertiajs/react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon, ChevronDownIcon, ChevronUpIcon, GripVerticalIcon, SearchIcon, Table2Icon, XIcon } from "lucide-react";
+//#region src/components/table/table-block.tsx
+const ALIGN = {
+	start: "text-start",
+	center: "text-center",
+	end: "text-end",
+	between: "text-start",
+	justify: "text-justify"
+};
+const VERTICAL_ALIGN = {
+	start: "align-top",
+	center: "align-middle",
+	end: "align-bottom"
+};
+function DataTable({ table: serverTable, component = "table", token: tokenProp, className }) {
+	const t = useT();
+	const choice = useChoice();
+	const panel = usePanel();
+	const isMobile = useIsMobile();
+	const page = usePageSchema();
+	const runner = useActionRunner();
+	const token = tokenProp ?? page?.token ?? "";
+	const totalsVersion = useStore(tableTotalsStore);
+	const totalsUrl = panel.endpoints.tableTotals;
+	useEffect(() => {
+		loadTableTotals(serverTable, {
+			url: totalsUrl,
+			token,
+			component
+		});
+	}, [
+		serverTable,
+		totalsUrl,
+		token,
+		component,
+		totalsVersion
+	]);
+	const tableProp = useMemo(() => withTableTotals(serverTable, cachedTableTotals(serverTable, component), tableTotalsFailed(serverTable, component)), [
+		serverTable,
+		component,
+		totalsVersion
+	]);
+	const table = useMemo(() => mobileTable(tableProp, tableProp.columns.filter((column) => tableProp.visibleColumns.includes(column.name)), {
+		isMobile,
+		panel
+	}), [
+		tableProp,
+		isMobile,
+		panel
+	]);
+	const context = useMemo(() => ({
+		token,
+		component
+	}), [token, component]);
+	const selection = useMemo(() => new TableSelection(), []);
+	const selectionState = useStore(selection.store);
+	const [search, setSearch] = useState(table.search ?? "");
+	const [reordering, setReordering] = useState(Boolean(table.reordering));
+	const [order, setOrder] = useState(null);
+	const [dragKey, setDragKey] = useState(null);
+	const [announcement, setAnnouncement] = useState("");
+	const [spreadsheet, setSpreadsheet] = useState(false);
+	const spreadsheetOpen = spreadsheet && Boolean(table.spreadsheet) && !reordering;
+	const records = table.records ?? [];
+	const columns = table.columns.filter((column) => table.visibleColumns.includes(column.name));
+	const hasActions = records.some((record) => record.actions && record.actions.length > 0);
+	const selectable = Boolean(table.selectable);
+	const [collapsedGroups, toggleGroup] = useCollapsedGroups(table);
+	const leadingCells = Number(table.recordActionsPosition === "before-cells" && hasActions) + Number(reordering) + Number(selectable) + Number(table.recordActionsPosition === "before-columns" && hasActions);
+	const trailingCells = Number((table.recordActionsPosition === "after-columns" || table.recordActionsPosition === "after-cells") && hasActions);
+	useTablePersistence(table);
+	const [syncedSearch, setSyncedSearch] = useState(table.search);
+	if (syncedSearch !== table.search) {
+		setSyncedSearch(table.search);
+		setSearch(table.search ?? "");
+	}
+	const pushSearch = useMemo(() => debounce((value) => visitTable(table.identifier, { search: value || null }, ["page"]), table.searchDebounce), [table.identifier, table.searchDebounce]);
+	const pollComponent = usePollComponent();
+	useEffect(() => pollComponent(component, table.pollingInterval), [
+		pollComponent,
+		component,
+		table.pollingInterval
+	]);
+	const live = useLiveUpdates(table.live, component, {
+		polling: Boolean(table.pollingInterval),
+		records
+	});
+	const awaitingRecords = Boolean(table.deferLoading) && !table.records;
+	const deferredRequested = useRef(false);
+	useEffect(() => {
+		if (!awaitingRecords) {
+			deferredRequested.current = false;
+			return;
+		}
+		if (deferredRequested.current) return;
+		deferredRequested.current = true;
+		router.reload({ only: resolvePartialProps(["page"]) });
+	}, [awaitingRecords]);
+	useEffect(() => selection.syncScope(table.selectionScope), [selection, table.selectionScope]);
+	selection.configure(table);
+	useEffect(() => {
+		return router.on("success", (event) => {
+			if (pageFlash(event.detail.page).alfakitAction?.deselectRecords) selection.clear();
+		});
+	}, [selection]);
+	const [sortingColumn, setSortingColumn] = useState(null);
+	const sort = (column) => {
+		const direction = table.sort?.column === column && table.sort.direction === "asc" ? "desc" : "asc";
+		setSortingColumn(column);
+		visitTable(table.identifier, {
+			sort: column,
+			direction
+		}, ["page"], { onFinish: () => setSortingColumn(null) });
+	};
+	const bulkContext = useMemo(() => ({
+		token,
+		component,
+		records: selectionState.allSelected ? [] : [...selectionState.selected],
+		allRecords: selectionState.allSelected
+	}), [
+		token,
+		component,
+		selectionState
+	]);
+	const orderedRecords = order ? order.map((key) => records.find((record) => String(record.key) === String(key))).filter((record) => Boolean(record)) : records;
+	const finishReorder = async () => {
+		try {
+			if (order && panel.endpoints.tableReorder && panel.endpoints.tableCell) await reorderTable({
+				reorder: panel.endpoints.tableReorder,
+				cell: panel.endpoints.tableCell
+			}, token, component, order, { reload: !table.reordering });
+		} catch (error) {
+			showToast({
+				id: "alfakit-reorder-failed",
+				title: t("table.reorder_failed", {}, "Couldn't save the new order"),
+				body: error instanceof Error ? error.message : String(error),
+				status: "danger",
+				format: "alfakit"
+			});
+		} finally {
+			setOrder(null);
+			setReordering(false);
+			stopTableReordering(table);
+		}
+	};
+	const moveRow = (index, offset) => {
+		const keys = orderedRecords.map((item) => item.key);
+		const target = index + offset;
+		if (target < 0 || target >= keys.length) return;
+		setOrder(moveListItem(keys, index, target));
+		setAnnouncement(t("table.row_moved", {
+			position: target + 1,
+			total: keys.length
+		}, "Row moved to position :position of :total"));
+	};
+	const groupRow = columnGroupHeaderRow(columns, table.columnGroups);
+	const headerRowSpan = groupRow ? 2 : void 0;
+	const rows = groupTableRows(table, orderedRecords, collapsedGroups);
+	const { range: rowWindow, indexes: positions, attach: attachBody, item: attachRow } = useVirtualList(rows.length, virtualizeOptions(table.virtualize, VIRTUAL_ESTIMATES.row));
+	const headerRows = groupRow ? 2 : 1;
+	const rowCells = columns.length + leadingCells + trailingCells;
+	const primaryColumn = primaryColumnName(columns);
+	const rowClick = (record) => {
+		if (reordering) return;
+		if (table.recordAction) {
+			const action = record.actions?.flatMap((item) => "actions" in item ? item.actions : [item]).find((item) => "name" in item && item.name === table.recordAction);
+			if (action && "name" in action) {
+				runner.trigger(action, {
+					...context,
+					record: record.key
+				});
+				return;
+			}
+		}
+		if (record.url) {
+			if (record.openUrlInNewTab) window.open(record.url, "_blank", "noopener");
+			else router.visit(record.url);
+		}
+	};
+	const reorderTrigger = triggerButtonView(table, reordering ? "reorderRecordsActive" : "reorderRecords", {
+		label: reordering ? t("table.reorder_stop", {}, "Done") : t("table.reorder_start", {}, "Reorder"),
+		variant: reordering ? "default" : "outline"
+	});
+	const loadingState = useStore(tableLoadingStore);
+	const showSkeleton = Boolean(table.loadingSkeleton) && isTableLoading(loadingState, table.identifier);
+	const filtersAt = filtersPlacement(table.filtersLayout);
+	const stacked = Boolean(table.stackedOnMobile);
+	const toolbar = /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-3",
+		children: [
+			/* @__PURE__ */ jsx(Slot, {
+				name: "table.header.before",
+				scope: component
+			}),
+			(table.heading || table.description || table.headerActions?.length) && /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-start justify-between gap-3",
+				children: [/* @__PURE__ */ jsxs("div", { children: [table.heading && /* @__PURE__ */ jsx("h3", {
+					className: "text-base font-semibold",
+					children: table.heading
+				}), table.description && /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-sm",
+					children: table.description
+				})] }), table.headerActions && /* @__PURE__ */ jsx(ActionList, {
+					actions: table.headerActions,
+					context,
+					size: "sm"
+				})]
+			}),
+			/* @__PURE__ */ jsx(Slot, {
+				name: "table.header.after",
+				scope: component
+			}),
+			/* @__PURE__ */ jsx(Slot, {
+				name: "table.toolbar.before",
+				scope: component
+			}),
+			table.views && /* @__PURE__ */ jsx(TableViews, {
+				table,
+				token,
+				component
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [
+					/* @__PURE__ */ jsx(Slot, {
+						name: "table.toolbar.search.before",
+						scope: component
+					}),
+					table.searchable && /* @__PURE__ */ jsxs("div", {
+						className: "relative min-w-48 flex-1 sm:max-w-xs",
+						children: [
+							/* @__PURE__ */ jsx(Icon, {
+								name: "alfakit::tables.search-field",
+								fallback: SearchIcon,
+								className: "text-muted-foreground pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2"
+							}),
+							/* @__PURE__ */ jsx(Input, {
+								type: "search",
+								value: search,
+								placeholder: table.searchPlaceholder,
+								onChange: (event) => {
+									setSearch(event.target.value);
+									if (!table.searchOnBlur) pushSearch(event.target.value);
+								},
+								onBlur: () => table.searchOnBlur && pushSearch(search),
+								onKeyDown: (event) => event.key === "Enter" && pushSearch.flush(),
+								className: "h-8 ps-8",
+								"aria-label": t("search", {}, "Search")
+							}),
+							search && /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "text-muted-foreground hover:text-foreground absolute end-2 top-1/2 -translate-y-1/2",
+								"aria-label": t("clear", {}, "Clear"),
+								onClick: () => {
+									setSearch("");
+									pushSearch("");
+									pushSearch.flush();
+								},
+								children: /* @__PURE__ */ jsx(XIcon, { className: "size-4" })
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx(Slot, {
+						name: "table.toolbar.search.after",
+						scope: component
+					}),
+					/* @__PURE__ */ jsx(Slot, {
+						name: "table.toolbar.start",
+						scope: component
+					}),
+					/* @__PURE__ */ jsx("span", { className: "flex-1" }),
+					/* @__PURE__ */ jsx(Slot, {
+						name: "table.toolbar.end",
+						scope: component
+					}),
+					/* @__PURE__ */ jsx(Slot, {
+						name: "table.toolbar.reorder-trigger.before",
+						scope: component
+					}),
+					table.reorderable && reorderTrigger && /* @__PURE__ */ jsx(TableTriggerButton, {
+						view: reorderTrigger,
+						defaultIcon: /* @__PURE__ */ jsx(Icon, {
+							name: "alfakit::tables.actions.enable-reordering",
+							fallback: GripVerticalIcon
+						}),
+						"aria-pressed": reordering,
+						onClick: () => {
+							if (reordering) {
+								finishReorder();
+								return;
+							}
+							setReordering(true);
+							startTableReordering(table);
+						}
+					}),
+					/* @__PURE__ */ jsx(Slot, {
+						name: "table.toolbar.reorder-trigger.after",
+						scope: component
+					}),
+					table.spreadsheet && !reordering && /* @__PURE__ */ jsxs(Button, {
+						type: "button",
+						variant: spreadsheetOpen ? "default" : "outline",
+						size: "sm",
+						"data-slot": "spreadsheet-trigger",
+						"aria-pressed": spreadsheetOpen,
+						onClick: () => setSpreadsheet((open) => !open),
+						onMouseEnter: () => void Spreadsheet.preload(),
+						onFocus: () => void Spreadsheet.preload(),
+						children: [/* @__PURE__ */ jsx(Icon, {
+							name: "alfakit::tables.actions.spreadsheet",
+							fallback: Table2Icon
+						}), t("table.spreadsheet.open", {}, "Edit as spreadsheet")]
+					}),
+					table.contentLayout && /* @__PURE__ */ jsx(ContentLayoutSort, {
+						table,
+						columns
+					}),
+					/* @__PURE__ */ jsx(Slot, {
+						name: "table.toolbar.grouping-selector.before",
+						scope: component
+					}),
+					/* @__PURE__ */ jsx(TableGroupingMenu, { table }),
+					/* @__PURE__ */ jsx(Slot, {
+						name: "table.toolbar.grouping-selector.after",
+						scope: component
+					}),
+					filtersAt === "toolbar" && /* @__PURE__ */ jsx(TableFilters, {
+						table,
+						component
+					}),
+					/* @__PURE__ */ jsx(Slot, {
+						name: "table.toolbar.column-manager-trigger.before",
+						scope: component
+					}),
+					/* @__PURE__ */ jsx(ColumnManager, {
+						table,
+						token,
+						component
+					}),
+					/* @__PURE__ */ jsx(Slot, {
+						name: "table.toolbar.column-manager-trigger.after",
+						scope: component
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Slot, {
+				name: "table.toolbar.after",
+				scope: component
+			}),
+			filtersAt === "above" && /* @__PURE__ */ jsx(TableFilters, {
+				table,
+				component
+			}),
+			!table.hiddenFilterIndicators && /* @__PURE__ */ jsx(FilterIndicators, { table }),
+			/* @__PURE__ */ jsx(Slot, {
+				name: "table.filter-indicators",
+				scope: component
+			}),
+			live && table.live?.newRecordsIndicator && /* @__PURE__ */ jsx(LiveRecordsPill, { live })
+		]
+	});
+	const total = paginationTotal(table.pagination);
+	const selectedCount = selectionState.allSelected ? total ?? records.length : selectionState.selected.size;
+	const bulkBar = selectable && selectedCount > 0 && table.bulkActions ? /* @__PURE__ */ jsxs("div", {
+		className: "bg-primary/5 border-primary/20 flex flex-wrap items-center gap-3 rounded-md border px-3 py-2 text-sm",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "font-medium",
+				children: choice("table.selected", selectedCount, {}, ":count selected")
+			}),
+			/* @__PURE__ */ jsx(Slot, {
+				name: "table.selection-indicator.actions.before",
+				scope: component
+			}),
+			!selectionState.allSelected && total !== null && total > records.length && canSelectAllRecords(table) && /* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				variant: "link",
+				size: "sm",
+				onClick: () => selection.selectAll(),
+				children: [
+					t("table.select_all", {}, "Select all"),
+					" (",
+					total,
+					")"
+				]
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "link",
+				size: "sm",
+				onClick: () => selection.clear(),
+				children: t("table.deselect_all", {}, "Deselect all")
+			}),
+			/* @__PURE__ */ jsx(Slot, {
+				name: "table.selection-indicator.actions.after",
+				scope: component
+			}),
+			selection.isFull && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground text-xs",
+				children: choice("table.max_selected", table.maxSelectableRecords ?? 0, {}, "You can select up to :count records")
+			}),
+			/* @__PURE__ */ jsx("span", { className: "flex-1" }),
+			/* @__PURE__ */ jsx(ActionList, {
+				actions: table.bulkActions,
+				context: bulkContext,
+				size: "sm"
+			})
+		]
+	}) : null;
+	const columnHeader = (column, rowSpan) => {
+		const active = table.sort?.column === column.name;
+		const label = column.sortable ? /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "hover:text-foreground inline-flex items-center gap-1",
+			"aria-busy": sortingColumn === column.name || void 0,
+			onClick: () => sort(column.name),
+			children: [column.label, sortingColumn === column.name ? /* @__PURE__ */ jsx(Spinner, {
+				"data-slot": "table-sort-spinner",
+				className: "size-3.5"
+			}) : active ? table.sort?.direction === "asc" ? /* @__PURE__ */ jsx(Icon, {
+				name: "alfakit::tables.header-cell.sort-asc-button",
+				fallback: ArrowUpIcon,
+				className: "size-3.5",
+				"aria-hidden": "true"
+			}) : /* @__PURE__ */ jsx(Icon, {
+				name: "alfakit::tables.header-cell.sort-desc-button",
+				fallback: ArrowDownIcon,
+				className: "size-3.5",
+				"aria-hidden": "true"
+			}) : /* @__PURE__ */ jsx(Icon, {
+				name: "alfakit::tables.header-cell.sort-button",
+				fallback: ArrowUpDownIcon,
+				className: "size-3.5 opacity-40",
+				"aria-hidden": "true"
+			})]
+		}) : column.label;
+		return /* @__PURE__ */ jsx(TableHead, {
+			rowSpan,
+			"aria-sort": column.sortable ? ariaSort(column.name, table.sort?.column, table.sort?.direction) : void 0,
+			style: column.width ? { width: column.width } : void 0,
+			...extraProps(column.extraHeaderAttributes, cn(ALIGN[column.alignment ?? "start"], column.wrapHeader ? "whitespace-normal" : void 0, column.grow === false && "w-0", columnVisibilityClasses(column))),
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1",
+				children: [
+					column.headerTooltip ? /* @__PURE__ */ jsxs("span", {
+						title: column.headerTooltip,
+						"data-slot": "header-tooltip",
+						children: [label, /* @__PURE__ */ jsxs("span", {
+							className: "sr-only",
+							children: [
+								" (",
+								column.headerTooltip,
+								")"
+							]
+						})]
+					}) : label,
+					/* @__PURE__ */ jsx(Slot, {
+						name: "table.header-cell",
+						scope: component,
+						data: { column: column.name }
+					}),
+					column.searchable && /* @__PURE__ */ jsx(Input, {
+						type: "search",
+						defaultValue: table.columnSearches?.[column.name] ?? "",
+						placeholder: t("search", {}, "Search"),
+						"aria-label": `${t("search", {}, "Search")} ${column.label}`,
+						className: "h-7 text-xs font-normal",
+						onKeyDown: (event) => event.key === "Enter" && visitTable(table.identifier, { columnSearch: {
+							...table.columnSearches ?? {},
+							[column.name]: event.target.value
+						} }, ["page"])
+					})
+				]
+			})
+		}, column.name);
+	};
+	const groupsOnlySelection = selectable && Boolean(table.selectGroupsOnly);
+	const content = /* @__PURE__ */ jsxs("div", {
+		"data-surface": "table",
+		"aria-busy": showSkeleton || void 0,
+		className: "bg-card relative overflow-hidden rounded-xl border shadow-xs",
+		children: [showSkeleton && /* @__PURE__ */ jsx("div", {
+			"data-slot": "table-loading-skeleton",
+			"aria-hidden": "true",
+			className: "bg-card/80 absolute inset-0 z-10 flex flex-col gap-3 p-4",
+			children: Array.from({ length: skeletonRowCount(records) }, (_, index) => /* @__PURE__ */ jsx("div", { className: "bg-muted h-6 animate-pulse rounded-md" }, index))
+		}), awaitingRecords ? /* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground p-8 text-center text-sm",
+			children: t("loading", {}, "Loading…")
+		}) : records.length === 0 && !(table.grouping?.groupsOnly && table.recordGroups?.length) ? /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center gap-3 px-6 py-12 text-center",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "bg-muted text-muted-foreground flex size-12 items-center justify-center rounded-full",
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: table.emptyState.icon,
+						className: "size-6"
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+					className: "font-medium",
+					children: table.emptyState.heading
+				}), table.emptyState.description && /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-sm",
+					children: table.emptyState.description
+				})] }),
+				table.emptyState.actions && /* @__PURE__ */ jsx(ActionList, {
+					actions: table.emptyState.actions,
+					context,
+					size: "sm"
+				})
+			]
+		}) : table.contentLayout ? /* @__PURE__ */ jsx(ContentLayout, {
+			table,
+			records,
+			columns,
+			token,
+			component,
+			context,
+			selectable,
+			selection,
+			onRecordClick: rowClick
+		}) : /* @__PURE__ */ jsxs(Table, {
+			"aria-rowcount": rowWindow.active ? rows.length + headerRows : void 0,
+			"data-stacked-on-mobile": stacked || void 0,
+			className: cn(stacked && STACKED_TABLE_CLASSES.table),
+			children: [
+				/* @__PURE__ */ jsxs(TableHeader, {
+					className: cn(stacked && STACKED_TABLE_CLASSES.header),
+					children: [/* @__PURE__ */ jsxs(TableRow, {
+						className: "hover:bg-transparent",
+						children: [
+							table.recordActionsPosition === "before-cells" && hasActions && /* @__PURE__ */ jsx(TableHead, {
+								rowSpan: headerRowSpan,
+								className: "w-0",
+								children: t("actions", {}, "Actions")
+							}),
+							reordering && /* @__PURE__ */ jsx(TableHead, {
+								rowSpan: headerRowSpan,
+								className: "w-16",
+								children: /* @__PURE__ */ jsx("span", {
+									className: "sr-only",
+									children: t("table.reorder_start", {}, "Reorder")
+								})
+							}),
+							selectable && /* @__PURE__ */ jsx(TableHead, {
+								rowSpan: headerRowSpan,
+								className: "w-10",
+								children: !groupsOnlySelection && /* @__PURE__ */ jsx(Checkbox, {
+									checked: pageSelectionState(selection, records),
+									onCheckedChange: (checked) => checked === true ? selection.selectPage(records) : selection.deselectPage(records),
+									"aria-label": t("table.select_page", {}, "Select page")
+								})
+							}),
+							table.recordActionsPosition === "before-columns" && hasActions && /* @__PURE__ */ jsx(TableHead, {
+								rowSpan: headerRowSpan,
+								className: "w-0",
+								children: t("actions", {}, "Actions")
+							}),
+							groupRow ? groupRow.map((cell) => cell.group ? /* @__PURE__ */ jsx(TableHead, {
+								colSpan: cell.span,
+								scope: "colgroup",
+								...extraProps(cell.group.extraHeaderAttributes, cn("border-b", ALIGN[cell.group.alignment ?? "center"], cell.group.wrapHeader ? "whitespace-normal" : void 0)),
+								children: cell.group.label
+							}, cell.key) : cell.column ? columnHeader(cell.column, 2) : null) : columns.map((column) => columnHeader(column)),
+							(table.recordActionsPosition === "after-columns" || table.recordActionsPosition === "after-cells") && hasActions && /* @__PURE__ */ jsx(TableHead, {
+								rowSpan: headerRowSpan,
+								className: "w-0 text-end",
+								children: /* @__PURE__ */ jsx("span", {
+									className: "sr-only",
+									children: t("actions", {}, "Actions")
+								})
+							})
+						]
+					}), groupRow && /* @__PURE__ */ jsx(TableRow, {
+						className: "hover:bg-transparent",
+						children: columns.filter((column) => isGroupedColumn(column.name, table.columnGroups)).map((column) => columnHeader(column))
+					})]
+				}),
+				/* @__PURE__ */ jsxs(TableBody, {
+					ref: attachBody,
+					className: cn(stacked && STACKED_TABLE_CLASSES.body),
+					children: [
+						/* @__PURE__ */ jsx(VirtualSpacerRow, {
+							height: rowWindow.before,
+							colSpan: rowCells
+						}),
+						positions.map((position) => {
+							const row = rows[position];
+							if (row.kind === "group") return /* @__PURE__ */ jsx(GroupHeaderRow, {
+								group: row.group,
+								collapsed: row.collapsed,
+								collapsible: Boolean(table.grouping?.collapsible && !table.grouping.groupsOnly),
+								colSpan: columns.length + leadingCells + trailingCells,
+								onToggle: () => toggleGroup(row.group.key),
+								selection: groupsOnlySelection ? {
+									checked: selection.groupState(row.group.key, records),
+									onChange: (checked) => checked ? selection.selectGroup(row.group.key, records) : selection.deselectGroup(row.group.key, records)
+								} : void 0
+							}, `group:${row.group.key}`);
+							if (row.kind === "summary") return /* @__PURE__ */ jsx(SummaryRow, {
+								columns,
+								values: row.summary,
+								leading: leadingCells,
+								trailing: trailingCells
+							}, `summary:${row.group.key}`);
+							const { record, index } = row;
+							const clickable = !reordering && Boolean(record.url || table.recordAction);
+							const actions = record.actions ? /* @__PURE__ */ jsx(ActionList, {
+								actions: record.actions,
+								context: {
+									...context,
+									record: record.key,
+									arguments: selectedRecordsArguments(selectionState, record.actions)
+								},
+								size: "sm",
+								align: "end",
+								className: "flex-nowrap"
+							}) : null;
+							return /* @__PURE__ */ jsxs(TableRow, {
+								ref: attachRow,
+								"data-index": position,
+								"aria-rowindex": rowWindow.active ? position + headerRows + 1 : void 0,
+								"data-state": selection.isSelected(record.key) ? "selected" : void 0,
+								draggable: reordering,
+								onDragStart: () => setDragKey(record.key),
+								onDragOver: (event) => event.preventDefault(),
+								onDrop: () => {
+									if (dragKey === null) return;
+									const keys = orderedRecords.map((item) => item.key);
+									const from = keys.findIndex((key) => String(key) === String(dragKey));
+									const [moved] = keys.splice(from, 1);
+									if (moved !== void 0) keys.splice(index, 0, moved);
+									setOrder(keys);
+									setDragKey(null);
+								},
+								className: cn(clickable && "cursor-pointer", table.striped && index % 2 === 1 && "bg-muted/30", stacked && STACKED_TABLE_CLASSES.row, record.classes),
+								onClick: () => clickable && rowClick(record),
+								children: [
+									reordering && /* @__PURE__ */ jsx(TableCell, {
+										className: "w-16 cursor-grab",
+										children: /* @__PURE__ */ jsxs("div", {
+											className: "flex items-center",
+											children: [
+												/* @__PURE__ */ jsx(Icon, {
+													name: "alfakit::tables.reorder.handle",
+													fallback: GripVerticalIcon,
+													className: "text-muted-foreground size-4",
+													"aria-hidden": "true"
+												}),
+												/* @__PURE__ */ jsx(Button, {
+													type: "button",
+													variant: "ghost",
+													size: "icon-xs",
+													"aria-label": t("form.move_up", {}, "Move up"),
+													disabled: index === 0,
+													onClick: () => moveRow(index, -1),
+													children: /* @__PURE__ */ jsx(ChevronUpIcon, {})
+												}),
+												/* @__PURE__ */ jsx(Button, {
+													type: "button",
+													variant: "ghost",
+													size: "icon-xs",
+													"aria-label": t("form.move_down", {}, "Move down"),
+													disabled: index === orderedRecords.length - 1,
+													onClick: () => moveRow(index, 1),
+													children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+												})
+											]
+										})
+									}),
+									table.recordActionsPosition === "before-cells" && hasActions && /* @__PURE__ */ jsx(TableCell, {
+										className: cn(stacked && STACKED_TABLE_CLASSES.actionsCell),
+										onClick: (event) => event.stopPropagation(),
+										children: actions
+									}),
+									selectable && /* @__PURE__ */ jsx(TableCell, {
+										className: cn(stacked && STACKED_TABLE_CLASSES.controlCell),
+										onClick: (event) => event.stopPropagation(),
+										children: record.selectable !== false && /* @__PURE__ */ jsx(Checkbox, {
+											checked: selection.isSelected(record.key),
+											disabled: !selection.canSelect(record.key),
+											onCheckedChange: (checked) => selection.toggle(record.key, checked === true, record.group ?? ""),
+											"aria-label": t("table.select_row", {}, "Select row")
+										})
+									}),
+									table.recordActionsPosition === "before-columns" && hasActions && /* @__PURE__ */ jsx(TableCell, {
+										className: cn(stacked && STACKED_TABLE_CLASSES.actionsCell),
+										onClick: (event) => event.stopPropagation(),
+										children: actions
+									}),
+									columns.map((column) => {
+										const cell = record.cells[column.name] ?? {};
+										const clickDisabled = Boolean(cell.disabledClick);
+										const content = /* @__PURE__ */ jsx(TableCellContent, {
+											column,
+											cell,
+											recordKey: record.key,
+											token,
+											component
+										});
+										const wrapped = clickDisabled ? content : cell.url ? cell.openUrlInNewTab ? /* @__PURE__ */ jsxs("a", {
+											href: cell.url,
+											target: "_blank",
+											rel: "noopener noreferrer",
+											className: "hover:underline",
+											onClick: (event) => event.stopPropagation(),
+											children: [content, /* @__PURE__ */ jsxs("span", {
+												className: "sr-only",
+												children: [" ", t("opens_in_new_tab", {}, "(opens in a new tab)")]
+											})]
+										}) : /* @__PURE__ */ jsx(Link, {
+											href: cell.url,
+											className: "hover:underline",
+											onClick: (event) => event.stopPropagation(),
+											children: content
+										}) : cell.action && record.actions ? /* @__PURE__ */ jsx("button", {
+											type: "button",
+											className: "text-start hover:underline",
+											onClick: (event) => {
+												event.stopPropagation();
+												const action = record.actions?.flatMap((item) => "actions" in item ? item.actions : [item]).find((item) => "name" in item && item.name === cell.action);
+												if (action && "name" in action) runner.trigger(action, {
+													...context,
+													record: record.key
+												});
+											},
+											children: content
+										}) : clickable && column.name === primaryColumn ? table.recordAction || !record.url ? /* @__PURE__ */ jsx("button", {
+											type: "button",
+											className: "focus-visible:ring-ring/50 rounded-sm text-start outline-none focus-visible:ring-[3px]",
+											onClick: (event) => {
+												event.stopPropagation();
+												rowClick(record);
+											},
+											children: content
+										}) : record.openUrlInNewTab ? /* @__PURE__ */ jsxs("a", {
+											href: record.url,
+											target: "_blank",
+											rel: "noopener noreferrer",
+											className: "focus-visible:ring-ring/50 rounded-sm outline-none focus-visible:ring-[3px]",
+											onClick: (event) => event.stopPropagation(),
+											children: [content, /* @__PURE__ */ jsxs("span", {
+												className: "sr-only",
+												children: [" ", t("opens_in_new_tab", {}, "(opens in a new tab)")]
+											})]
+										}) : /* @__PURE__ */ jsx(Link, {
+											href: record.url,
+											className: "focus-visible:ring-ring/50 rounded-sm outline-none focus-visible:ring-[3px]",
+											onClick: (event) => event.stopPropagation(),
+											children: content
+										}) : content;
+										return /* @__PURE__ */ jsxs(TableCell, {
+											title: cell.tooltip,
+											"data-click-disabled": clickDisabled || void 0,
+											onClick: clickDisabled ? (event) => event.stopPropagation() : void 0,
+											...extraProps(cell.extraAttributes, cn(clickDisabled && "cursor-default", ALIGN[column.alignment ?? "start"], column.verticalAlignment && VERTICAL_ALIGN[column.verticalAlignment], column.wrap && "whitespace-normal", cell.hidden && "invisible", columnVisibilityClasses(column), stacked && stackedCellClasses(column))),
+											children: [stacked && /* @__PURE__ */ jsx("span", {
+												className: STACKED_TABLE_CLASSES.label,
+												"aria-hidden": "true",
+												children: column.label
+											}), wrapped]
+										}, column.name);
+									}),
+									(table.recordActionsPosition === "after-columns" || table.recordActionsPosition === "after-cells") && hasActions && /* @__PURE__ */ jsx(TableCell, {
+										className: cn("text-end", stacked && STACKED_TABLE_CLASSES.actionsCell),
+										onClick: (event) => event.stopPropagation(),
+										children: actions
+									})
+								]
+							}, String(record.key));
+						}),
+						/* @__PURE__ */ jsx(VirtualSpacerRow, {
+							height: rowWindow.after,
+							colSpan: rowCells
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx(TableSummaryFooter, {
+					table,
+					columns,
+					leading: leadingCells,
+					trailing: trailingCells,
+					className: cn(stacked && STACKED_TABLE_CLASSES.footer)
+				})
+			]
+		})]
+	});
+	const surface = spreadsheetOpen ? /* @__PURE__ */ jsx(Spreadsheet, {
+		table,
+		token,
+		component,
+		onClose: () => setSpreadsheet(false)
+	}) : content;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "table-block",
+		className: cn("flex flex-col gap-4", className),
+		children: [
+			toolbar,
+			bulkBar,
+			/* @__PURE__ */ jsx(Slot, {
+				name: "table.content.before",
+				scope: component
+			}),
+			filtersAt === "before" || filtersAt === "after" ? /* @__PURE__ */ jsxs("div", {
+				"data-slot": "table-filters-layout",
+				className: "flex flex-col gap-4 lg:flex-row lg:items-start",
+				children: [
+					filtersAt === "before" && /* @__PURE__ */ jsx(TableFilters, {
+						table,
+						component
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "min-w-0 flex-1",
+						children: surface
+					}),
+					filtersAt === "after" && /* @__PURE__ */ jsx(TableFilters, {
+						table,
+						component
+					})
+				]
+			}) : surface,
+			/* @__PURE__ */ jsx(Slot, {
+				name: "table.content.after",
+				scope: component
+			}),
+			filtersAt === "below" && /* @__PURE__ */ jsx(TableFilters, {
+				table,
+				component
+			}),
+			/* @__PURE__ */ jsx(TablePagination, { table }),
+			/* @__PURE__ */ jsx("span", {
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				className: "sr-only",
+				children: announcement
+			})
+		]
+	});
+}
+//#endregion
+export { DataTable };
+
+//# sourceMappingURL=table-block.js.map