@seekalfred/primitives 0.7.1 → 0.7.4

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 { 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
@@ -118,7 +118,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.
 *
@@ -182,16 +188,70 @@ 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"]);
+/**
+* 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",
@@ -230,11 +290,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 +440,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 +535,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 +576,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, 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 +609,65 @@ 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 isExpanded = subRows.length > 0 && expanded.has(getRowId(row));
+			shownRows.push({
+				row,
+				depth,
+				index,
+				hasSubRows: subRows.length > 0,
+				isExpanded
+			});
+			if (isExpanded) walk(sortLevel(subRows), depth + 1);
+		}
+	};
+	walk(visibleRows, 0);
+	const idBase = useId();
+	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 +707,73 @@ 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 changeSort = (descriptor) => {
+		if (!isControlled) setUncontrolledSort(descriptor);
+		setPage(1);
+		onSortChange?.(descriptor);
+	};
+	const cellContent = (column, row, index) => {
+		const value = column.accessor(row);
+		return column.cell ? column.cell({
+			value,
+			row,
+			index
+		}) : renderValue(column, value, row);
+	};
+	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 +785,104 @@ 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__ */ jsx("th", {
+									scope: "col",
+									"data-slot": "table-column",
+									"data-sorted": sortedColumn === column.id || 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)
+								}, 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 shownColumns = isGroup ? columns.slice(0, 1) : columns;
+								const labelId = `${idBase}-row-${String(position)}`;
+								return /* @__PURE__ */ jsx("tr", {
+									"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: shownColumns.map((column) => {
+										const content = firstCellContent(column, cellContent(column, row, index), shown, labelId);
+										const cellProps = {
+											"data-slot": "table-cell",
+											"data-sorted": sortedColumn === column.id || void 0,
+											colSpan: isGroup ? columns.length : 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);
+									})
+								}, 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,
+					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 +892,84 @@ 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, {
+								columns.map((column) => /* @__PURE__ */ jsx(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]
+									className: columnClass(column),
+									style: columnStyle(column),
+									children: headerLabel(column)
 								}, 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 shownColumns = isGroup ? columns.slice(0, 1) : columns;
+								const labelId = `${idBase}-row-${String(position)}`;
+								return /* @__PURE__ */ jsxs(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,
+										shownColumns.map((column) => /* @__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))))
+											colSpan: isGroup ? columns.length + (rowAction ? 1 : 0) : 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
+									]
+								}, String(key));
+							})
 						}),
 						totalRow ? /* @__PURE__ */ jsx(TableFooter, {
 							"data-slot": "table-footer",
@@ -696,20 +979,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 +1065,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, tableEmptyVariants, tableExpandButtonVariants, tableFooterVariants, tableGroupRowVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableSortButtonVariants, tableStickyCellVariants, tableVariants };
 
 //# sourceMappingURL=table.js.map