@seekalfred/primitives 0.7.3 → 0.8.0

package/dist/table/table.js

@@ -6,8 +6,8 @@ import { useFlip } from "../lib/flip.js";
 import { Checkbox as Checkbox$1 } from "../checkbox/checkbox.js";
 import { Select as Select$1, SelectItem } from "../select/select.js";
 import { cva } from "class-variance-authority";
-import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
-import { Cell, Column, Row, Table, TableBody, TableFooter, TableHeader } from "react-aria-components";
+import { Fragment, forwardRef, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Button, Cell, Column, Row, Table, TableBody, TableFooter, TableHeader } from "react-aria-components";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { flushSync } from "react-dom";
 //#region src/table/table.tsx
@@ -110,6 +110,34 @@ const CHEVRON_COLUMN_ID = "__table_row_action";
 const CHEVRON_CELL = "w-10 px-0 text-center";
 /** Reserved id for the checkbox column of a selectable table. */
 const SELECT_COLUMN_ID = "__table_row_select";
+/** Prefix of a detail row's id in the grid, so it cannot collide with a real row's. */
+const DETAIL_ROW_PREFIX = "__table_row_detail:";
+/** Only `data-*` gets through `getRowProps`: the rest belongs to the library or to `onRowAction`. */
+function rowAttributes(attributes) {
+	if (!attributes) return void 0;
+	const kept = {};
+	for (const [name, value] of Object.entries(attributes)) if (name.startsWith("data-")) kept[name] = value;
+	return kept;
+}
+/** Whether `renderExpandedRow` had anything to show. */
+const hasContent = (content) => content !== null && content !== void 0 && content !== false;
+/**
+* A header add-on's wrapper in the grid, where the header CELL is the sort
+* control. A press or Enter/Space on the add-on is not a request to sort, so
+* those stop here; focus, hover and every other key (the arrows that walk the
+* grid) pass.
+*/
+const stopSort = {
+	onPointerDown: (e) => e.stopPropagation(),
+	onMouseDown: (e) => e.stopPropagation(),
+	onClick: (e) => e.stopPropagation(),
+	onKeyDown: (e) => {
+		if (e.key === "Enter" || e.key === " ") e.stopPropagation();
+	},
+	onKeyUp: (e) => {
+		if (e.key === "Enter" || e.key === " ") e.stopPropagation();
+	}
+};
 /** The checkbox column is as wide as its box needs, with the table's usual inset on its leading side. */
 const SELECT_CELL = "w-11 px-0 ps-(--density-row-pad-x)";
 /** The horizontal scroll container. The table owns it; 5 of 6 consumers built one by hand. */
@@ -118,7 +146,13 @@ const tableVariants = cva([
 	"w-full border-collapse box-border",
 	"font-sans text-base leading-(--leading-normal)",
 	"bg-surface text-foreground"
-]);
+], {
+	variants: { density: {
+		default: "",
+		compact: "text-sm"
+	} },
+	defaultVariants: { density: "default" }
+});
 /**
 * The header is near-white, not a grey band.
 *
@@ -173,6 +207,8 @@ const tableColumnVariants = cva([
 	"px-(--density-row-pad-x) py-(--density-row-pad-y)",
 	"box-border align-middle text-sm font-semibold select-none",
 	"data-[sorted]:bg-foreground/3 data-[sorted]:text-foreground",
+	"data-[highlighted]:bg-primary-subtle data-[highlighted]:text-foreground",
+	"data-[highlighted]:data-[sorted]:bg-primary-subtle",
 	...FOCUS_RING,
 	"data-[allows-sorting]:cursor-pointer"
 ], {
@@ -182,16 +218,79 @@ const tableColumnVariants = cva([
 			center: "text-center",
 			end: "text-end"
 		},
+		density: {
+			default: "",
+			compact: "py-2"
+		},
+		hidden: {
+			true: "group/column py-0 data-[focus-visible]:py-(--density-row-pad-y)",
+			false: ""
+		},
 		headerType: {
 			sentence: "text-sm leading-none",
 			caps: "text-xs uppercase tracking-wide leading-none"
 		}
 	},
+	compoundVariants: [{
+		density: "compact",
+		hidden: true,
+		class: "data-[focus-visible]:py-2"
+	}],
 	defaultVariants: {
 		align: "start",
-		headerType: "sentence"
+		headerType: "sentence",
+		density: "default",
+		hidden: false
 	}
 });
+/**
+* The disclosure button that opens a row's sub-rows (`getSubRows`).
+*
+* A real button in the first cell, named by that cell's own content and
+* carrying `aria-expanded`, so a reader hears "Meta, button, collapsed"
+* without the library inventing copy. 24px square: the WCAG 2.2 target-size
+* floor (2.5.8), and the step each level of sub-rows is indented by, so a
+* child's text lines up one button-width in from its parent's. The chevron
+* turns a quarter when the row opens; with reduced motion it simply flips.
+*/
+const tableExpandButtonVariants = cva([
+	"inline-flex size-6 shrink-0 items-center justify-center rounded-sm cursor-pointer",
+	"text-muted-foreground data-[hovered]:bg-muted data-[hovered]:text-foreground",
+	"[&_svg]:motion-safe:transition-transform [&_svg]:motion-safe:duration-(--duration-snappy) [&_svg]:motion-safe:ease-snappy",
+	"data-[expanded]:[&_svg]:rotate-90 rtl:data-[expanded]:[&_svg]:-rotate-90",
+	...FOCUS_RING
+]);
+/**
+* A group header row (`isGroupRow`): one cell spanning the row, naming the rows
+* under it ("Mobile" / "Desktop"). The header band's fill and label type, so it
+* reads as a heading of the rows that follow rather than as one of them.
+*/
+const tableGroupRowVariants = cva(["bg-header-fill hover:bg-header-fill", "[&>td]:text-sm [&>td]:font-semibold [&>td]:text-muted-foreground"]);
+/**
+* A detail row (`renderExpandedRow`): one cell spanning the row, under the row it
+* belongs to. Not interactive, so it takes no hover, focus or selection fill and
+* no rule of its own: it reads as part of the row above, and the next row's rule
+* closes it.
+*/
+const tableDetailRowVariants = cva(["box-border bg-muted"]);
+/** The cell of a detail row. The table's own inset, so the content is not flush against the edge. */
+const tableDetailCellVariants = cva(["px-(--density-row-pad-x) py-(--density-row-pad-y)", "box-border align-top"]);
+/**
+* The sort control of a column header in a plain table (`keyboardModel="table"`).
+*
+* In the grid the header cell is the control; in a plain table a cell cannot
+* take focus, so the label sits in a real button that Tab reaches. It wears
+* the header's own type and colour, and is at least 24px tall so a compact
+* header still clears the WCAG 2.2 target size (2.5.8).
+*/
+const tableSortButtonVariants = cva([
+	"inline-flex min-h-6 items-center cursor-pointer",
+	"bg-transparent p-0 border-0 font-[inherit] text-[length:inherit] leading-[inherit] text-inherit",
+	"outline-none focus-visible:outline-solid",
+	"focus-visible:outline-(length:--focus-ring-width)",
+	"focus-visible:outline-offset-(--focus-ring-offset)",
+	"focus-visible:outline-(--color-ring)"
+]);
 const tableRowVariants = cva([
 	"group/row box-border bg-surface",
 	"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard",
@@ -219,6 +318,7 @@ const tableCellVariants = cva([
 	"px-(--density-row-pad-x) py-(--density-row-pad-y)",
 	"box-border align-middle wrap-anywhere",
 	"data-[sorted]:bg-foreground/3",
+	"data-[highlighted]:bg-primary-subtle data-[highlighted]:data-[sorted]:bg-primary-subtle",
 	...FOCUS_RING
 ], {
 	variants: {
@@ -230,11 +330,16 @@ const tableCellVariants = cva([
 		numeric: {
 			true: "tabular-nums whitespace-nowrap",
 			false: ""
+		},
+		density: {
+			default: "",
+			compact: "py-2"
 		}
 	},
 	defaultVariants: {
 		align: "start",
-		numeric: false
+		numeric: false,
+		density: "default"
 	}
 });
 /**
@@ -375,6 +480,20 @@ function RowChevronGlyph() {
 		})
 	});
 }
+function ExpandChevronGlyph() {
+	return /* @__PURE__ */ jsx("svg", {
+		"data-slot": "table-row-expand-chevron",
+		"aria-hidden": "true",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className: "size-(--icon-sm) rtl:-scale-x-100",
+		children: /* @__PURE__ */ jsx("path", { d: "m6 3 5 5-5 5" })
+	});
+}
 function SortCaretGlyph({ direction }) {
 	return /* @__PURE__ */ jsxs("svg", {
 		"data-slot": "table-sort-caret",
@@ -456,9 +575,10 @@ function createColumns() {
 /**
 * A data table.
 *
-* Maturity: **beta**. Row expansion, filtering and grouping are deliberately
-* absent -- each had one consumer or none across the six legacy tables, and the
-* stateful ones belong to DataGrid. Sorting glides: when a sort reorders the
+* Maturity: **beta**. Filtering is deliberately absent -- it had one consumer
+* or none across the six legacy tables, and it belongs to DataGrid. Rows can
+* open onto sub-rows (`getSubRows`) and head a group (`isGroupRow`), which the
+* product's usage and page-speed reports needed. Sorting glides: when a sort reorders the
 * rows, each slides to its new place instead of jumping (the lib/flip helper).
 * Selection is opt-in with `selectionMode="multiple"`.
 *
@@ -496,17 +616,20 @@ function compareKeys(a, b) {
 	if (typeof a === "number" && typeof b === "number") return a - b;
 	return String(a).localeCompare(String(b));
 }
-const Table$1 = forwardRef(function Table$2({ data, columns, getRowId, variant, sortDescriptor, defaultSortDescriptor, onSortChange, onRowAction, isRowHighlighted, rowClassName, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, selectionLabels, frame, headerType, headerFill, striped, totalRow, empty, minWidth, stickyFirstColumn, pageSize, pageSizeOptions, onPageSizeChange, pageLabels, className, ...props }, ref) {
+/** `level` in the order `sort` asks for; unchanged when there is none or its column is gone. */
+function sortRows(level, columns, sort) {
+	if (!sort) return level;
+	const sorted = columns.find((column) => column.id === sort.column);
+	if (!sorted) return level;
+	const direction = sort.direction === "descending" ? -1 : 1;
+	return [...level].sort((a, b) => direction * compareKeys(sortKey(sorted, a), sortKey(sorted, b)));
+}
+const Table$1 = forwardRef(function Table$2({ data, columns, getRowId, variant, sortDescriptor, defaultSortDescriptor, onSortChange, onRowAction, isRowHighlighted, rowClassName, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, selectionLabels, frame, headerType, headerFill, striped, totalRow, empty, minWidth, stickyFirstColumn, pageSize, pageSizeOptions, onPageSizeChange, pageLabels, getSubRows, renderExpandedRow, getRowProps, expandedKeys, defaultExpandedKeys, onExpandedChange, isGroupRow, density, headerHidden, keyboardModel, className, ...props }, ref) {
 	const isControlled = sortDescriptor !== void 0;
 	const [uncontrolledSort, setUncontrolledSort] = useState(defaultSortDescriptor);
 	const activeSort = isControlled ? sortDescriptor : uncontrolledSort;
-	const rows = useMemo(() => {
-		if (isControlled || !activeSort) return data;
-		const sorted = columns.find((column) => column.id === activeSort.column);
-		if (!sorted) return data;
-		const direction = activeSort.direction === "descending" ? -1 : 1;
-		return [...data].sort((a, b) => direction * compareKeys(sortKey(sorted, a), sortKey(sorted, b)));
-	}, [
+	const sortLevel = (level) => isControlled ? level : sortRows(level, columns, activeSort);
+	const rows = useMemo(() => isControlled ? data : sortRows(data, columns, activeSort), [
 		data,
 		columns,
 		activeSort,
@@ -526,15 +649,69 @@ const Table$1 = forwardRef(function Table$2({ data, columns, getRowId, variant,
 		perPage: pageLabels?.perPage ?? ((size) => `${size} per page`),
 		rowsPerPage: pageLabels?.rowsPerPage ?? "Rows per page"
 	};
-	const rowsByKey = new Map(data.map((row) => [getRowId(row), row]));
-	const selectable = selectionMode === "multiple";
+	const [uncontrolledExpanded, setUncontrolledExpanded] = useState(() => new Set(defaultExpandedKeys ?? []));
+	const expanded = expandedKeys === void 0 ? uncontrolledExpanded : new Set(expandedKeys);
+	const toggleExpanded = (key) => {
+		const next = new Set(expanded);
+		if (next.has(key)) next.delete(key);
+		else next.add(key);
+		if (expandedKeys === void 0) setUncontrolledExpanded(next);
+		onExpandedChange?.(next);
+	};
+	const expandable = getSubRows !== void 0;
+	const { rowsByKey, subRowsByRow } = useMemo(() => {
+		const byKey = /* @__PURE__ */ new Map();
+		const subRows = /* @__PURE__ */ new Map();
+		const index = (level) => {
+			for (const row of level) {
+				byKey.set(getRowId(row), row);
+				const children = getSubRows?.(row) ?? [];
+				subRows.set(row, children);
+				index(children);
+			}
+		};
+		index(data);
+		return {
+			rowsByKey: byKey,
+			subRowsByRow: subRows
+		};
+	}, [
+		data,
+		getSubRows,
+		getRowId
+	]);
+	const subRowsOf = (row) => subRowsByRow.get(row) ?? [];
+	const shownRows = [];
+	const walk = (level, depth) => {
+		for (const [index, row] of level.entries()) {
+			const subRows = subRowsOf(row);
+			const key = getRowId(row);
+			const isExpanded = subRows.length > 0 && expanded.has(key);
+			const detail = renderExpandedRow && expanded.has(key) ? renderExpandedRow(row) : void 0;
+			shownRows.push({
+				row,
+				depth,
+				index,
+				hasSubRows: subRows.length > 0,
+				isExpanded,
+				detail: hasContent(detail) ? detail : void 0
+			});
+			if (isExpanded) walk(sortLevel(subRows), depth + 1);
+		}
+	};
+	walk(visibleRows, 0);
+	const idBase = useId();
+	const detailRowKeys = shownRows.filter((shown) => shown.detail !== void 0).map((shown) => `${DETAIL_ROW_PREFIX}${String(getRowId(shown.row))}`);
+	const plain = keyboardModel === "table";
+	const selectable = selectionMode === "multiple" && !plain;
+	const rowAction = plain ? void 0 : onRowAction;
 	const [uncontrolledSelection, setUncontrolledSelection] = useState(defaultSelectedKeys ?? /* @__PURE__ */ new Set());
 	const selection = selectedKeys ?? uncontrolledSelection;
 	const commitSelection = (keys) => {
 		if (selectedKeys === void 0) setUncontrolledSelection(keys);
 		onSelectionChange?.(keys);
 	};
-	const selectedCount = selection === "all" ? visibleRows.length : [...selection].filter((key) => rowsByKey.has(key)).length;
+	const selectedCount = selection === "all" ? shownRows.length : [...selection].filter((key) => rowsByKey.has(key)).length;
 	const selectLabels = {
 		item: selectionLabels?.item ?? {
 			one: "row",
@@ -574,6 +751,101 @@ const Table$1 = forwardRef(function Table$2({ data, columns, getRowId, variant,
 		part,
 		striped: part === "body" && !!striped
 	});
+	const headerPart = headerFill === "none" ? "bare" : "header";
+	const alignOf = (column) => column.align ?? (column.numeric ? "end" : void 0);
+	const stickyFirst = (column, part) => [stickyFirstColumn && column === columns[0] && stickyCell(part), stickyFirstColumn && selectable && column === columns[0] && "start-11"];
+	const columnClass = (column) => cnAll(tableColumnVariants({
+		align: alignOf(column),
+		headerType,
+		density,
+		hidden: headerHidden
+	}), stickyFirst(column, headerPart));
+	const cellClass = (column, part) => cnAll(tableCellVariants({
+		align: alignOf(column),
+		numeric: column.numeric,
+		density
+	}), stickyFirst(column, part));
+	const rowClass = (row, isGroup) => cn(cnAll(tableRowVariants({
+		variant,
+		striped
+	}), isGroup && tableGroupRowVariants(), rowAction && !isGroup && "cursor-pointer", headerHidden && "first:border-t-0"), rowClassName?.(row));
+	const isSortable = (column) => !headerHidden && !!column.sortable;
+	const headerLabel = (column) => {
+		const label = /* @__PURE__ */ jsxs(Fragment$1, { children: [column.header, isSortable(column) ? /* @__PURE__ */ jsx(SortCaretGlyph, { direction: activeSort?.column === column.id ? activeSort.direction : "none" }) : null] });
+		return headerHidden ? /* @__PURE__ */ jsx("span", {
+			"data-slot": "table-column-label",
+			className: "sr-only group-data-[focus-visible]/column:not-sr-only",
+			children: label
+		}) : label;
+	};
+	const headerAddon = (column, grid) => column.headerAddon && !headerHidden ? /* @__PURE__ */ jsx("span", {
+		"data-slot": "table-column-addon",
+		className: "ms-1 inline-flex items-center align-middle",
+		...grid ? stopSort : void 0,
+		children: column.headerAddon
+	}) : null;
+	const changeSort = (descriptor) => {
+		if (!isControlled) setUncontrolledSort(descriptor);
+		setPage(1);
+		onSortChange?.(descriptor);
+	};
+	const cellContent = (column, row, index) => {
+		const value = column.accessor(row);
+		if (!column.cell) return renderValue(column, value, row);
+		const key = getRowId(row);
+		return column.cell({
+			value,
+			row,
+			index,
+			isExpanded: expanded.has(key),
+			toggleExpanded: () => toggleExpanded(key)
+		});
+	};
+	const cellsOf = (row, isGroup) => {
+		if (isGroup) return columns.slice(0, 1).map((column) => ({
+			column,
+			span: 1
+		}));
+		const cells = [];
+		for (let at = 0; at < columns.length;) {
+			const column = columns[at];
+			const asked = Math.floor(column.colSpan?.(row) ?? 1);
+			const span = stickyFirstColumn && at === 0 ? 1 : Number.isNaN(asked) ? 1 : Math.max(1, Math.min(asked, columns.length - at));
+			cells.push({
+				column,
+				span
+			});
+			at += span;
+		}
+		return cells;
+	};
+	const indentClass = (column) => expandable && column === columns[0] && "ps-[calc(var(--density-row-pad-x)+var(--table-row-depth)*--spacing(7))]";
+	const depthStyle = (column, depth) => expandable && column === columns[0] ? { "--table-row-depth": depth } : void 0;
+	const firstCellContent = (column, content, { row, hasSubRows, isExpanded }, labelId) => expandable && column === columns[0] ? /* @__PURE__ */ jsxs("span", {
+		className: "flex items-center gap-1",
+		children: [hasSubRows ? /* @__PURE__ */ jsx(Button, {
+			"data-slot": "table-row-expand",
+			"aria-expanded": isExpanded,
+			"aria-labelledby": labelId,
+			className: cnAll(tableExpandButtonVariants()),
+			onPress: () => toggleExpanded(getRowId(row)),
+			children: /* @__PURE__ */ jsx(ExpandChevronGlyph, {})
+		}) : /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "size-6 shrink-0"
+		}), /* @__PURE__ */ jsx("span", {
+			id: labelId,
+			"data-slot": "table-row-label",
+			className: "min-w-0",
+			children: content
+		})]
+	}) : content;
+	const columnStyle = (column) => column.width === void 0 ? void 0 : { width: column.width };
+	const emptyState = empty === void 0 ? void 0 : /* @__PURE__ */ jsx("div", {
+		"data-slot": "table-empty",
+		className: cnAll(tableEmptyVariants()),
+		children: empty
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "table-card",
 		"data-overflow-start": edges.start || void 0,
@@ -585,24 +857,118 @@ const Table$1 = forwardRef(function Table$2({ data, columns, getRowId, variant,
 				ref: scrollRef,
 				"data-slot": "table-scroll",
 				className: cnAll(tableScrollVariants()),
-				children: /* @__PURE__ */ jsxs(Table, {
+				children: plain ? /* @__PURE__ */ jsxs("table", {
+					ref,
+					...props,
+					"data-slot": "table",
+					"data-keyboard-model": "table",
+					className: cn(tableVariants({ density }), className),
+					style: tableStyle,
+					children: [
+						/* @__PURE__ */ jsx("thead", {
+							"data-slot": "table-header",
+							className: cnAll(tableHeaderVariants({ headerFill })),
+							children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => {
+								const sorted = activeSort?.column === column.id ? activeSort.direction : void 0;
+								return /* @__PURE__ */ jsxs("th", {
+									scope: "col",
+									"data-slot": "table-column",
+									"data-sorted": sortedColumn === column.id || void 0,
+									"data-highlighted": column.highlighted || void 0,
+									"aria-sort": isSortable(column) ? sorted ?? "none" : void 0,
+									className: columnClass(column),
+									style: columnStyle(column),
+									children: [isSortable(column) ? /* @__PURE__ */ jsx("button", {
+										type: "button",
+										"data-slot": "table-sort-button",
+										className: cnAll(tableSortButtonVariants()),
+										onClick: () => changeSort({
+											column: column.id,
+											direction: sorted === "ascending" ? "descending" : "ascending"
+										}),
+										children: headerLabel(column)
+									}) : headerLabel(column), headerAddon(column, false)]
+								}, column.id);
+							}) })
+						}),
+						/* @__PURE__ */ jsx("tbody", {
+							"data-slot": "table-body",
+							children: shownRows.length === 0 && emptyState ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+								colSpan: columns.length,
+								children: emptyState
+							}) }) : shownRows.map((shown, position) => {
+								const { row, depth, index } = shown;
+								const key = getRowId(row);
+								const isGroup = isGroupRow?.(row) ?? false;
+								const cells = cellsOf(row, isGroup);
+								const labelId = `${idBase}-row-${String(position)}`;
+								return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("tr", {
+									...rowAttributes(getRowProps?.(row)),
+									"data-slot": "table-row",
+									"data-flip": String(key),
+									"data-highlighted": isRowHighlighted?.(row) || void 0,
+									"data-depth": expandable ? depth : void 0,
+									"data-open": shown.isExpanded || void 0,
+									"data-group": isGroup || void 0,
+									className: rowClass(row, isGroup),
+									children: cells.map(({ column, span }) => {
+										const content = firstCellContent(column, cellContent(column, row, index), shown, labelId);
+										const cellProps = {
+											"data-slot": "table-cell",
+											"data-sorted": sortedColumn === column.id || void 0,
+											"data-highlighted": column.highlighted || void 0,
+											colSpan: isGroup ? columns.length : span > 1 ? span : void 0,
+											style: depthStyle(column, depth)
+										};
+										return column === columns[0] ? /* @__PURE__ */ jsx("th", {
+											scope: "row",
+											...cellProps,
+											className: cnAll(cellClass(column, "body"), indentClass(column), "font-normal"),
+											children: content
+										}, column.id) : /* @__PURE__ */ jsx("td", {
+											...cellProps,
+											className: cellClass(column, "body"),
+											children: content
+										}, column.id);
+									})
+								}), shown.detail === void 0 ? null : /* @__PURE__ */ jsx("tr", {
+									"data-slot": "table-detail-row",
+									"data-flip": `${String(key)}:detail`,
+									className: cnAll(tableDetailRowVariants()),
+									children: /* @__PURE__ */ jsx("td", {
+										"data-slot": "table-detail-cell",
+										colSpan: columns.length,
+										className: cnAll(tableDetailCellVariants()),
+										children: shown.detail
+									})
+								})] }, String(key));
+							})
+						}),
+						totalRow ? /* @__PURE__ */ jsx("tfoot", {
+							"data-slot": "table-footer",
+							className: cnAll(tableFooterVariants()),
+							children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx("td", {
+								"data-slot": "table-cell",
+								className: cellClass(column, "bare"),
+								children: totalRow(column)
+							}, column.id)) })
+						}) : null
+					]
+				}) : /* @__PURE__ */ jsxs(Table, {
 					ref,
 					...props,
 					"data-slot": "table",
-					className: cn(tableVariants(), className),
+					className: cn(tableVariants({ density }), className),
 					style: tableStyle,
 					selectionMode: selectable ? "multiple" : void 0,
 					selectedKeys: selectable ? selection : void 0,
 					onSelectionChange: selectable ? commitSelection : void 0,
 					sortDescriptor: activeSort,
-					onSortChange: (descriptor) => {
-						if (!isControlled) setUncontrolledSort(descriptor);
-						setPage(1);
-						onSortChange?.(descriptor);
-					},
-					onRowAction: onRowAction ? (key) => {
+					onSortChange: changeSort,
+					disabledKeys: detailRowKeys.length > 0 ? detailRowKeys : void 0,
+					onRowAction: rowAction ? (key) => {
 						const row = rowsByKey.get(key);
-						if (row !== void 0) onRowAction(row);
+						if (row !== void 0 && !isGroupRow?.(row)) rowAction(row);
 					} : void 0,
 					children: [
 						/* @__PURE__ */ jsxs(TableHeader, {
@@ -612,81 +978,98 @@ const Table$1 = forwardRef(function Table$2({ data, columns, getRowId, variant,
 								selectable ? /* @__PURE__ */ jsx(Column, {
 									id: SELECT_COLUMN_ID,
 									"data-slot": "table-column",
-									className: cnAll(tableColumnVariants({ headerType }), SELECT_CELL, stickyFirstColumn && stickyCell(headerFill === "none" ? "bare" : "header"), stickyFirstColumn && "border-e-0"),
-									children: /* @__PURE__ */ jsx(Checkbox$1, {
-										slot: "selection",
-										"aria-label": selectionLabels?.selectAll
+									className: cnAll(tableColumnVariants({
+										headerType,
+										density,
+										hidden: headerHidden
+									}), SELECT_CELL, stickyFirstColumn && stickyCell(headerPart), stickyFirstColumn && "border-e-0"),
+									children: /* @__PURE__ */ jsx("span", {
+										className: headerHidden ? "sr-only group-data-[focus-visible]/column:not-sr-only" : void 0,
+										children: /* @__PURE__ */ jsx(Checkbox$1, {
+											slot: "selection",
+											"aria-label": selectionLabels?.selectAll
+										})
 									})
 								}) : null,
 								columns.map((column) => /* @__PURE__ */ jsxs(Column, {
 									id: column.id,
 									isRowHeader: column === columns[0],
-									allowsSorting: column.sortable,
+									allowsSorting: isSortable(column),
 									"data-slot": "table-column",
 									"data-sorted": sortedColumn === column.id || void 0,
-									className: cnAll(tableColumnVariants({
-										align: column.align ?? (column.numeric ? "end" : void 0),
-										headerType
-									}), stickyFirstColumn && column === columns[0] && stickyCell(headerFill === "none" ? "bare" : "header"), stickyFirstColumn && selectable && column === columns[0] && "start-11"),
-									style: column.width === void 0 ? void 0 : { width: column.width },
-									children: [column.header, column.sortable ? /* @__PURE__ */ jsx(SortCaretGlyph, { direction: activeSort?.column === column.id ? activeSort.direction : "none" }) : null]
+									"data-highlighted": column.highlighted || void 0,
+									className: columnClass(column),
+									style: columnStyle(column),
+									children: [headerLabel(column), headerAddon(column, true)]
 								}, column.id)),
-								onRowAction ? /* @__PURE__ */ jsx(Column, {
+								rowAction ? /* @__PURE__ */ jsx(Column, {
 									id: CHEVRON_COLUMN_ID,
 									"data-slot": "table-column",
-									className: cnAll(tableColumnVariants({ headerType }), CHEVRON_CELL),
+									className: cnAll(tableColumnVariants({
+										headerType,
+										density,
+										hidden: headerHidden
+									}), CHEVRON_CELL),
 									children: ""
 								}) : null
 							]
 						}),
 						/* @__PURE__ */ jsx(TableBody, {
 							"data-slot": "table-body",
-							renderEmptyState: empty === void 0 ? void 0 : () => /* @__PURE__ */ jsx("div", {
-								"data-slot": "table-empty",
-								className: cnAll(tableEmptyVariants()),
-								children: empty
-							}),
-							children: visibleRows.map((row, index) => /* @__PURE__ */ jsxs(Row, {
-								id: getRowId(row),
-								"data-slot": "table-row",
-								"data-flip": String(getRowId(row)),
-								"data-highlighted": isRowHighlighted?.(row) || void 0,
-								className: cn(cnAll(tableRowVariants({
-									variant,
-									striped
-								}), onRowAction && "cursor-pointer"), rowClassName?.(row)),
-								children: [
-									selectable ? /* @__PURE__ */ jsx(Cell, {
-										"data-slot": "table-cell",
-										className: cnAll(tableCellVariants(), SELECT_CELL, stickyFirstColumn && stickyCell("body"), stickyFirstColumn && "border-e-0"),
-										children: /* @__PURE__ */ jsx(Checkbox$1, {
-											slot: "selection",
-											"aria-label": selectionLabels?.selectRow
-										})
-									}) : null,
-									columns.map((column) => {
-										const value = column.accessor(row);
-										return /* @__PURE__ */ jsx(Cell, {
+							renderEmptyState: emptyState === void 0 ? void 0 : () => emptyState,
+							children: shownRows.map((shown, position) => {
+								const { row, depth, index } = shown;
+								const key = getRowId(row);
+								const isGroup = isGroupRow?.(row) ?? false;
+								const cells = cellsOf(row, isGroup);
+								const labelId = `${idBase}-row-${String(position)}`;
+								return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Row, {
+									...rowAttributes(getRowProps?.(row)),
+									id: key,
+									"data-slot": "table-row",
+									"data-flip": String(key),
+									"data-highlighted": isRowHighlighted?.(row) || void 0,
+									"data-depth": expandable ? depth : void 0,
+									"data-open": shown.isExpanded || void 0,
+									"data-group": isGroup || void 0,
+									className: rowClass(row, isGroup),
+									children: [
+										selectable ? /* @__PURE__ */ jsx(Cell, {
+											"data-slot": "table-cell",
+											className: cnAll(tableCellVariants({ density }), SELECT_CELL, stickyFirstColumn && stickyCell("body"), stickyFirstColumn && "border-e-0"),
+											children: /* @__PURE__ */ jsx(Checkbox$1, {
+												slot: "selection",
+												"aria-label": selectionLabels?.selectRow
+											})
+										}) : null,
+										cells.map(({ column, span }) => /* @__PURE__ */ jsx(Cell, {
 											"data-slot": "table-cell",
 											"data-sorted": sortedColumn === column.id || void 0,
-											className: cnAll(tableCellVariants({
-												align: column.align ?? (column.numeric ? "end" : void 0),
-												numeric: column.numeric
-											}), stickyFirstColumn && column === columns[0] && stickyCell("body"), stickyFirstColumn && selectable && column === columns[0] && "start-11"),
-											children: column.cell ? column.cell({
-												value,
-												row,
-												index
-											}) : renderValue(column, value, row)
-										}, column.id);
-									}),
-									onRowAction ? /* @__PURE__ */ jsx(Cell, {
-										"data-slot": "table-cell",
-										className: cnAll(tableCellVariants(), CHEVRON_CELL),
-										children: /* @__PURE__ */ jsx(RowChevronGlyph, {})
-									}) : null
-								]
-							}, String(getRowId(row))))
+											"data-highlighted": column.highlighted || void 0,
+											colSpan: isGroup ? columns.length + (rowAction ? 1 : 0) : span > 1 ? span : void 0,
+											className: cnAll(cellClass(column, "body"), indentClass(column)),
+											style: depthStyle(column, depth),
+											children: firstCellContent(column, cellContent(column, row, index), shown, labelId)
+										}, column.id)),
+										rowAction && !isGroup ? /* @__PURE__ */ jsx(Cell, {
+											"data-slot": "table-cell",
+											className: cnAll(tableCellVariants({ density }), CHEVRON_CELL),
+											children: /* @__PURE__ */ jsx(RowChevronGlyph, {})
+										}) : null
+									]
+								}), shown.detail === void 0 ? null : /* @__PURE__ */ jsx(Row, {
+									id: `${DETAIL_ROW_PREFIX}${String(key)}`,
+									"data-slot": "table-detail-row",
+									"data-flip": `${String(key)}:detail`,
+									className: cnAll(tableDetailRowVariants()),
+									children: /* @__PURE__ */ jsx(Cell, {
+										"data-slot": "table-detail-cell",
+										colSpan: columns.length + (selectable ? 1 : 0) + (rowAction ? 1 : 0),
+										className: cnAll(tableDetailCellVariants()),
+										children: shown.detail
+									})
+								})] }, String(key));
+							})
 						}),
 						totalRow ? /* @__PURE__ */ jsx(TableFooter, {
 							"data-slot": "table-footer",
@@ -696,20 +1079,17 @@ const Table$1 = forwardRef(function Table$2({ data, columns, getRowId, variant,
 								children: [
 									selectable ? /* @__PURE__ */ jsx(Cell, {
 										"data-slot": "table-cell",
-										className: cnAll(tableCellVariants(), SELECT_CELL, stickyFirstColumn && stickyCell("bare"), stickyFirstColumn && "border-e-0"),
+										className: cnAll(tableCellVariants({ density }), SELECT_CELL, stickyFirstColumn && stickyCell("bare"), stickyFirstColumn && "border-e-0"),
 										children: ""
 									}) : null,
 									columns.map((col) => /* @__PURE__ */ jsx(Cell, {
 										"data-slot": "table-cell",
-										className: cnAll(tableCellVariants({
-											align: col.align ?? (col.numeric ? "end" : void 0),
-											numeric: col.numeric
-										}), stickyFirstColumn && col === columns[0] && stickyCell("bare"), stickyFirstColumn && selectable && col === columns[0] && "start-11"),
+										className: cellClass(col, "bare"),
 										children: totalRow(col)
 									}, col.id)),
-									onRowAction ? /* @__PURE__ */ jsx(Cell, {
+									rowAction ? /* @__PURE__ */ jsx(Cell, {
 										"data-slot": "table-cell",
-										className: cnAll(tableCellVariants(), CHEVRON_CELL),
+										className: cnAll(tableCellVariants({ density }), CHEVRON_CELL),
 										children: ""
 									}) : null
 								]
@@ -785,6 +1165,6 @@ const Table$1 = forwardRef(function Table$2({ data, columns, getRowId, variant,
 	});
 });
 //#endregion
-export { Table$1 as Table, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableEmptyVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableStickyCellVariants, tableVariants };
+export { Table$1 as Table, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableDetailCellVariants, tableDetailRowVariants, tableEmptyVariants, tableExpandButtonVariants, tableFooterVariants, tableGroupRowVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableSortButtonVariants, tableStickyCellVariants, tableVariants };
 
 //# sourceMappingURL=table.js.map