@galaxy-io/dls 1.6.0 → 2.0.0

package/dist/table/InfiniteTable.js

@@ -1,449 +1,307 @@
-import Text, { TextSize, TextVariant } from "../text/Text.js";
-import { ColumnAlign, ColumnPin, ColumnResizeMode, TableDensity, TableVariant } from "./types.js";
-import { EXPAND_COLUMN_ID, SELECT_COLUMN_ID, estimateColumnWidth } from "./utils.js";
-import { useTableRowSelection } from "./useTableRowSelection.js";
-import { useTableRowExpansion } from "./useTableRowExpansion.js";
-import { useTableKeyboardNavigation } from "./useTableKeyboardNavigation.js";
-import { useTableColumnResize } from "./useTableColumnResize.js";
+import { useControlledState } from "../hooks/useControlledState.js";
+import { TABLE_LARGE_METRICS, TABLE_MEDIUM_METRICS, TABLE_SMALL_METRICS, TableBodyRow, TableColumnsMenu, TableExpandedRow, TableFrame, TableSelectAllCheckbox } from "./TableCore.js";
 import { useTableColumnLayout } from "./useTableColumnLayout.js";
-import { useInfiniteScrollSentinel } from "./useInfiniteScrollSentinel.js";
-import { useElementClientSize } from "../hooks/useElementClientSize.js";
-import { InfiniteScrollSentinel, StyledTable, TableBody, TableDataCell, TableHead, TableHeaderCell, TableHeaderRow, TableLoadingRow, TableOuterContainer, TableRow, TableScrollContainer } from "./TablePrimitives.js";
-import TableHeaderCellContent from "./TableHeaderCellContent.js";
-import TableStatusRow from "./TableStatusRow.js";
-import TableSelectCell from "./TableSelectCell.js";
-import TableExpandedRow from "./TableExpandedRow.js";
-import TableExpandCell from "./TableExpandCell.js";
-import React, { useCallback, useEffect, useId, useMemo, useRef } from "react";
+import { useTableKeyboardNavigation } from "./useTableKeyboardNavigation.js";
+import { useTableRowSelection } from "./useTableRowSelection.js";
+import { Fragment, forwardRef, useCallback, useId, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { flexRender, getCoreRowModel, getExpandedRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 //#region src/table/InfiniteTable.tsx
 /**
-* A data table with infinite scroll, sorting, row selection, expandable rows and
-* resizable columns. Define the shape with `ColumnDef[]`; `TData` is inferred
-* from your row type.
+* The read-only data table: rows of `data` laid out in `columns`, with a sticky header, optional
+* sorting, row selection, expandable rows, per-row action menus, resizable and user-arranged
+* columns, and a footer row of totals. It renders every row it is given and asks for more through
+* `onEndReached` when the user scrolls near the end. It owns no data: the app fetches, filters
+* and pages; the table sorts on its own only when it holds every row (no `onEndReached`).
 *
-* Renders every loaded row. Past a few thousand rows reach for
-* `VirtualizedInfiniteTable`, which shares the same column and row API.
+* Built on the shared table core (`TableCore`, `useTableColumnLayout`,
+* `useTableKeyboardNavigation`, `useInfiniteScrollSentinel`), which VirtualizedInfiniteTable and
+* InfiniteSpreadsheet share. `@tanstack/react-table` (an optional peer) supplies the row model and
+* type-aware sorting; this is the only module that imports it.
+*
+* Key–value pairs are a `DescriptionList`; a list of cards is `Grid`; editable cells are
+* `InfiniteSpreadsheet`; tens of thousands of rows are `VirtualizedInfiniteTable`.
 */
-function InfiniteTable(props) {
-	const { columns, data, getRowId, height, minHeight, maxHeight, width, fillWidth, fillHeight, density = TableDensity.MEDIUM, variant = TableVariant.PRIMARY, hasNextPage, isFetchingNextPage, fetchNextPage, enableRowSelection, enableMultiRowSelection = true, rowSelection, defaultRowSelection, onRowSelectionChange, onSelectedRowsChange, showSelectionColumn = false, selectionColumnPin = ColumnPin.LEFT, enableSelectAll, enableSelectionRange = true, selectAllAriaLabel = "Select all rows", getRowSelectAriaLabel, enableSorting = false, enableMultiSort = false, sorting, onSortingChange, manualSorting = false, isLoading = false, isError = false, error, loadingRowCount = 5, contentWhenEmpty, contentWhenError, noHeader = false, noLastRowBorder = false, noLastRowPadding = false, onRowClick, onRowDoubleClick, onRowActivate, onRowExpand, expandedRowIds, defaultExpandedRowIds, onExpandedChange, getRowCanExpand, enableMultiRowExpansion = true, showExpandColumn = true, expandColumnPin = ColumnPin.LEFT, enableColumnResizing = false, columnSizing, defaultColumnSizing, onColumnSizingChange, columnResizeMode = ColumnResizeMode.ON_CHANGE, ariaLabel, ariaLabelledBy, getRowAriaLabel, enableRowFocus, onTableReady } = props;
-	const instanceId = useId();
-	const scrollContainerRef = useRef(null);
-	const headerRef = useRef(null);
-	const bodyRef = useRef(null);
-	const { width: viewportWidth, height: viewportHeight } = useElementClientSize(scrollContainerRef);
-	const { height: headerHeight } = useElementClientSize(headerRef);
-	const hasExpansion = onRowExpand !== void 0;
-	const hasExpandColumn = hasExpansion && showExpandColumn;
-	const isSelectable = showSelectionColumn || enableRowSelection !== void 0;
-	const resolvedEnableRowSelection = enableRowSelection ?? (showSelectionColumn ? true : void 0);
-	const canSelectAll = (enableSelectAll ?? enableMultiRowSelection) && enableMultiRowSelection;
-	const selection = useTableRowSelection({
-		rowSelection,
-		defaultRowSelection,
-		onRowSelectionChange,
-		enableMultiRowSelection,
-		enableSelectionRange,
-		onSelectedRowsChange
-	});
-	const expansion = useTableRowExpansion({
-		expandedRowIds,
-		defaultExpandedRowIds,
-		onExpandedChange,
-		enableMultiRowExpansion
-	});
-	const resize = useTableColumnResize({
-		columns,
-		enabled: enableColumnResizing,
-		columnSizing,
-		defaultColumnSizing,
-		onColumnSizingChange,
-		mode: columnResizeMode
-	});
-	const { canResizeColumn } = resize;
-	const rowsRef = useRef([]);
-	const { toggleRow, toggleAll, notifySelectedRows } = selection;
-	const toggleRowSelection = useCallback((row, isShiftKey) => {
-		toggleRow(row, rowsRef.current, isShiftKey);
-	}, [toggleRow]);
-	const resolvedColumns = useMemo(() => {
-		if (!hasExpandColumn && !showSelectionColumn) return columns;
-		const syntheticColumns = [];
-		if (showSelectionColumn) syntheticColumns.push({
-			id: SELECT_COLUMN_ID,
-			size: 44,
-			minSize: 44,
-			maxSize: 44,
-			pin: selectionColumnPin,
-			align: ColumnAlign.CENTER,
-			enableResizing: false,
-			header: canSelectAll ? ({ table }) => {
-				const rows = table.getRowModel().rows;
-				const selectableRows = rows.filter((row) => row.getCanSelect());
-				const selectedCount = selectableRows.filter((row) => row.getIsSelected()).length;
-				return /* @__PURE__ */ jsx(TableSelectCell, {
-					isChecked: selectableRows.length > 0 && selectedCount === selectableRows.length,
-					isIndeterminate: selectedCount > 0 && selectedCount < selectableRows.length,
-					isDisabled: selectableRows.length === 0,
-					density,
-					ariaLabel: selectAllAriaLabel,
-					onChange: (isChecked) => toggleAll(rows, isChecked)
-				});
-			} : () => null,
-			cell: ({ row }) => /* @__PURE__ */ jsx(TableSelectCell, {
-				isChecked: row.getIsSelected(),
-				isDisabled: !row.getCanSelect(),
-				density,
-				ariaLabel: getRowSelectAriaLabel?.(row) ?? `Select row ${row.index + 1}`,
-				onChange: (_isChecked, isShiftKey) => toggleRowSelection(row, isShiftKey)
-			}),
-			cellLoading: () => null
-		});
-		if (hasExpandColumn) syntheticColumns.push({
-			id: EXPAND_COLUMN_ID,
-			size: 44,
-			minSize: 44,
-			maxSize: 44,
-			pin: expandColumnPin,
-			align: ColumnAlign.CENTER,
-			enableResizing: false,
-			header: () => null,
-			cell: ({ row }) => {
-				if (!row.getCanExpand()) return null;
-				return /* @__PURE__ */ jsx(TableExpandCell, {
-					isExpanded: row.getIsExpanded(),
-					density,
-					expandedPanelId: `${instanceId}-expanded-${row.id}`,
-					onToggle: () => row.toggleExpanded()
-				});
-			},
-			cellLoading: () => null
-		});
-		return [...syntheticColumns, ...columns];
-	}, [
-		columns,
-		density,
-		instanceId,
-		hasExpandColumn,
-		expandColumnPin,
-		showSelectionColumn,
-		selectionColumnPin,
-		canSelectAll,
-		selectAllAriaLabel,
-		getRowSelectAriaLabel,
-		toggleAll,
-		toggleRowSelection
-	]);
-	const { getColumnWidth, pinnedOffsets, rowMinWidth } = useTableColumnLayout({
-		columns: resolvedColumns,
-		columnSizing: resize.columnSizing
+/** Row rung of the table (canonical subset; the 1.x TableDensity members). */
+var InfiniteTableSize = /* @__PURE__ */ function(InfiniteTableSize) {
+	/** 32px rows, body_sm text. Dense lists and side panels. */
+	InfiniteTableSize["SMALL"] = "SMALL";
+	/** 48px rows, body_md text. The default. */
+	InfiniteTableSize["MEDIUM"] = "MEDIUM";
+	/** 52px rows, body_lg text. Rows with avatars or two-line cells. */
+	InfiniteTableSize["LARGE"] = "LARGE";
+	return InfiniteTableSize;
+}({});
+var INFINITE_TABLE_SIZE_TO_TABLE_METRICS_MAP = {
+	["SMALL"]: TABLE_SMALL_METRICS,
+	["MEDIUM"]: TABLE_MEDIUM_METRICS,
+	["LARGE"]: TABLE_LARGE_METRICS
+};
+var NO_SORTING = [];
+var noop = () => {};
+/** `data-*` to the root, `aria-*` to the `<table>`. */
+function splitPassthrough(rest) {
+	const rootProps = {};
+	const tableAria = {};
+	for (const [key, value] of Object.entries(rest)) if (key.startsWith("data-")) rootProps[key] = value;
+	else if (key.startsWith("aria-")) tableAria[key] = value;
+	return {
+		rootProps,
+		tableAria
+	};
+}
+/** The read-only data table. */
+var InfiniteTableInner = forwardRef(function InfiniteTable(props, ref) {
+	const { columns, data, getRowId, size: sizeProp, isLoading: isLoadingProp, error: errorProp, emptyState, onEndReached, onRowClick, activeRowId, rowActions, sort, defaultSort, onSortChange, isSelectable: isSelectableProp, value, defaultValue, onChange, renderExpandedRow, expandedIds, defaultExpandedIds, onExpandedIdsChange, columnLayout, defaultColumnLayout, onColumnLayoutChange, canResizeColumns: canResizeColumnsProp, canCustomizeColumns: canCustomizeColumnsProp, ariaLabel, id, className, style, ...rest } = props;
+	const error = errorProp === "" ? void 0 : errorProp;
+	const size = sizeProp ?? "MEDIUM";
+	const isLoading = isLoadingProp ?? false;
+	const isSelectable = isSelectableProp ?? false;
+	const canResizeColumns = canResizeColumnsProp ?? false;
+	const canCustomizeColumns = canCustomizeColumnsProp ?? false;
+	const metrics = INFINITE_TABLE_SIZE_TO_TABLE_METRICS_MAP[size];
+	const baseId = useId();
+	const scrollRef = useRef(null);
+	const { rootProps, tableAria } = splitPassthrough(rest);
+	if (id !== void 0) rootProps.id = id;
+	const hasExpandColumn = renderExpandedRow !== void 0;
+	const hasRowActions = rowActions !== void 0;
+	const hasTrailingColumn = hasRowActions || canCustomizeColumns;
+	const leadingCount = (isSelectable ? 1 : 0) + (hasExpandColumn ? 1 : 0);
+	const isInteractive = onRowClick !== void 0 || isSelectable || hasExpandColumn || hasRowActions;
+	const resolveRowId = useCallback((row, index) => getRowId ? getRowId(row, index) : String(index), [getRowId]);
+	const [currentSort, setSort] = useControlledState({
+		value: sort,
+		defaultValue: defaultSort ?? null,
+		onChange: onSortChange
 	});
-	const table = useReactTable({
+	const isServerSorted = onEndReached !== void 0;
+	const modelRows = useReactTable({
 		data,
-		columns: useMemo(() => resolvedColumns.map((col) => ({
-			id: col.id,
-			accessorFn: col.accessorFn,
-			header: ({ table }) => {
-				if (typeof col.header === "function") return col.header({ table });
-				return col.header ?? col.id;
-			},
-			cell: (info) => {
-				if (col.cell) return col.cell({
-					value: info.getValue(),
-					row: info.row
-				});
-				const value = info.getValue();
-				if (typeof value === "string" || typeof value === "number" || typeof value === "boolean" || typeof value === "bigint") return /* @__PURE__ */ jsx(Text, {
-					size: TextSize.BODY_SM,
-					children: String(value)
-				});
-				return /* @__PURE__ */ jsx(Text, {
-					size: TextSize.BODY_SM,
-					children: ""
-				});
-			},
-			size: col.size,
-			minSize: col.minSize,
-			maxSize: col.maxSize,
-			enableSorting: col.enableSorting ?? enableSorting,
-			sortDescFirst: col.sortDescFirst,
-			meta: {
-				pin: col.pin,
-				align: col.align,
-				cellLoading: col.cellLoading,
-				isCompact: col.id === "__expand__" || col.id === "__select__",
-				isResizable: canResizeColumn(col),
-				label: typeof col.header === "string" ? col.header : col.id
-			}
-		})), [
-			resolvedColumns,
-			enableSorting,
-			canResizeColumn
-		]),
-		getRowId,
+		columns: useMemo(() => columns.map((column) => ({
+			id: column.id,
+			accessorFn: (row) => column.accessor?.(row),
+			sortingFn: "auto",
+			sortUndefined: "last",
+			enableSorting: column.canSort === true
+		})), [columns]),
+		state: { sorting: useMemo(() => currentSort === null || isServerSorted ? NO_SORTING : [{
+			id: currentSort.columnId,
+			desc: currentSort.isDescending
+		}], [currentSort, isServerSorted]) },
+		onSortingChange: noop,
 		getCoreRowModel: getCoreRowModel(),
-		getSortedRowModel: enableSorting && !manualSorting ? getSortedRowModel() : void 0,
-		getExpandedRowModel: hasExpansion ? getExpandedRowModel() : void 0,
-		getRowCanExpand: hasExpansion ? (row) => getRowCanExpand?.(row) ?? true : () => false,
-		state: {
-			rowSelection: selection.rowSelection,
-			expanded: expansion.expanded,
-			columnSizing: resize.columnSizing,
-			...sorting !== void 0 && { sorting }
-		},
-		onRowSelectionChange: selection.onRowSelectionChange,
-		onExpandedChange: expansion.onExpandedChange,
-		onColumnSizingChange: resize.onColumnSizingChange,
-		...onSortingChange !== void 0 && { onSortingChange },
-		enableRowSelection: resolvedEnableRowSelection,
-		enableMultiRowSelection,
-		enableSorting,
-		enableMultiSort,
-		manualSorting
-	});
-	const { rows } = table.getRowModel();
-	useEffect(() => {
-		rowsRef.current = rows;
+		getSortedRowModel: getSortedRowModel(),
+		getRowId: resolveRowId,
+		manualSorting: isServerSorted,
+		enableMultiSort: false
+	}).getRowModel().rows;
+	const displayRows = useMemo(() => modelRows.map((entry) => ({
+		row: entry.original,
+		dataIndex: entry.index,
+		id: entry.id
+	})), [modelRows]);
+	const rowIds = useMemo(() => displayRows.map((entry) => entry.id), [displayRows]);
+	const handleSortPress = useCallback((columnId) => {
+		if (currentSort?.columnId !== columnId) setSort({
+			columnId,
+			isDescending: false
+		});
+		else if (!currentSort.isDescending) setSort({
+			columnId,
+			isDescending: true
+		});
+		else setSort(null);
+	}, [currentSort, setSort]);
+	const selection = useTableRowSelection({
+		value,
+		defaultValue: defaultValue ?? [],
+		onChange,
+		rowIds
 	});
-	const onTableReadyRef = useRef(onTableReady);
-	useEffect(() => {
-		onTableReadyRef.current = onTableReady;
+	const [expanded, setExpanded] = useControlledState({
+		value: expandedIds,
+		defaultValue: defaultExpandedIds ?? [],
+		onChange: onExpandedIdsChange
 	});
-	useEffect(() => {
-		onTableReadyRef.current?.(table);
-	}, [table]);
-	const selectedRowIds = selection.rowSelection;
-	const hasSelectedRowsListener = onSelectedRowsChange !== void 0;
-	useEffect(() => {
-		if (!hasSelectedRowsListener) return;
-		notifySelectedRows(rowsRef.current.filter((row) => row.getIsSelected()));
-	}, [
-		selectedRowIds,
-		hasSelectedRowsListener,
-		notifySelectedRows
-	]);
-	const { pruneMissingRowIds } = expansion;
-	const rowIds = useMemo(() => rows.map((row) => row.id), [rows]);
-	useEffect(() => {
-		pruneMissingRowIds(rowIds);
-	}, [rowIds, pruneMissingRowIds]);
-	const sentinelRef = useInfiniteScrollSentinel({
-		scrollRef: scrollContainerRef,
-		hasNextPage,
-		isFetchingNextPage,
-		fetchNextPage,
-		rowCount: rows.length
+	const expandedSet = useMemo(() => new Set(expanded), [expanded]);
+	const [openActionsRowId, setOpenActionsRowId] = useState(null);
+	const layout = useTableColumnLayout({
+		columns,
+		columnLayout,
+		defaultColumnLayout: defaultColumnLayout ?? {},
+		onColumnLayoutChange,
+		canResizeColumns,
+		canCustomizeColumns,
+		leadingCount,
+		hasTrailing: hasTrailingColumn,
+		syntheticWidthPx: metrics.rowHeightPx
 	});
-	const isRowInteractive = Boolean(onRowClick || onRowActivate || showSelectionColumn);
-	const resolvedEnableRowFocus = enableRowFocus ?? isRowInteractive;
-	const keyboard = useTableKeyboardNavigation({
-		bodyRef,
-		rowCount: rows.length,
-		enabled: resolvedEnableRowFocus,
-		onActivate: (rowIndex, event) => {
-			const row = rowsRef.current[rowIndex];
-			if (!row) return;
-			if (onRowActivate) {
-				onRowActivate(row, event);
-				return;
+	const latest = {
+		columns,
+		displayRows,
+		rowIds,
+		expanded,
+		onRowClick,
+		rowActions,
+		renderExpandedRow,
+		setExpanded,
+		selection,
+		isSelectable
+	};
+	const latestRef = useRef(latest);
+	latestRef.current = latest;
+	const toggleExpand = useCallback((rowId) => {
+		const { expanded: current, rowIds: ids, setExpanded: set } = latestRef.current;
+		const present = new Set(ids);
+		set((current.includes(rowId) ? current.filter((entry) => entry !== rowId) : [...current, rowId]).filter((entry) => present.has(entry)));
+	}, []);
+	const handleKey = useCallback((rowIndex, event) => {
+		const current = latestRef.current;
+		const entry = current.displayRows[rowIndex];
+		if (entry === void 0) return;
+		if (event.key === "Enter") {
+			current.onRowClick?.(entry.row, event);
+			return;
+		}
+		if (event.key === " ") {
+			event.preventDefault();
+			if (current.isSelectable) current.selection.toggleRow(entry.id, event.shiftKey);
+			return;
+		}
+		if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
+			const content = current.renderExpandedRow?.(entry.row);
+			if (content === null || content === void 0) return;
+			const isOpen = current.expanded.includes(entry.id);
+			if (event.key === "ArrowRight" !== isOpen) {
+				event.preventDefault();
+				toggleExpand(entry.id);
 			}
-			onRowClick?.(row, event);
-		},
-		onToggleSelect: (rowIndex) => {
-			const row = rowsRef.current[rowIndex];
-			if (!row || !isSelectable) return;
-			toggleRowSelection(row, false);
+			return;
 		}
+		if (event.key === "F10" && event.shiftKey || event.key === "ContextMenu") {
+			const actions = current.rowActions?.(entry.row, rowIndex);
+			if (actions === null || actions === void 0) return;
+			event.preventDefault();
+			setOpenActionsRowId(entry.id);
+		}
+	}, [toggleExpand]);
+	const getPageSize = useCallback(() => {
+		const scroll = scrollRef.current;
+		if (scroll === null) return 1;
+		return Math.floor(scroll.clientHeight / metrics.rowHeightPx) - 1;
+	}, [metrics.rowHeightPx]);
+	const navigation = useTableKeyboardNavigation({
+		rowCount: displayRows.length,
+		getPageSize,
+		onKeyDown: handleKey
 	});
-	const columnCount = resolvedColumns.length;
-	const headerRowCount = noHeader ? 0 : 1;
-	const renderCellsForColumn = useCallback((col) => ({
-		$width: getColumnWidth(col),
-		$minWidth: col.minSize,
-		$maxWidth: col.maxSize,
-		$pin: col.pin,
-		$pinnedOffset: pinnedOffsets.get(col.id),
-		$align: col.align,
-		$density: density,
-		$variant: variant,
-		$isCompact: col.id === "__expand__" || col.id === "__select__"
+	const hasRowClick = onRowClick !== void 0;
+	const callbacks = useMemo(() => ({
+		registerRow: navigation.registerRow,
+		onRowClick: hasRowClick ? (row, event) => latestRef.current.onRowClick?.(row, event) : void 0,
+		onRowKeyDown: navigation.handleRowKeyDown,
+		onRowFocus: navigation.handleRowFocus,
+		onToggleSelect: (rowId, isRange) => latestRef.current.selection.toggleRow(rowId, isRange),
+		onToggleExpand: toggleExpand,
+		onActionsOpenChange: (rowId, isOpen) => setOpenActionsRowId((current) => isOpen ? rowId : current === rowId ? null : current),
+		getRowActions: hasRowActions ? (row, rowIndex) => latestRef.current.rowActions?.(row, rowIndex) : void 0,
+		getRowName: (row, rowIndex) => {
+			const name = latestRef.current.columns.find((column) => column.isRowHeader === true)?.accessor?.(row);
+			return name === void 0 || name === null || name === "" ? `row ${rowIndex + 1}` : String(name);
+		}
 	}), [
-		getColumnWidth,
-		pinnedOffsets,
-		density,
-		variant
+		navigation.registerRow,
+		navigation.handleRowKeyDown,
+		navigation.handleRowFocus,
+		hasRowClick,
+		hasRowActions,
+		toggleExpand
 	]);
-	const renderLoadingRows = () => Array.from({ length: loadingRowCount }).map((_, rowIndex) => /* @__PURE__ */ jsx(TableLoadingRow, {
-		$density: density,
-		$variant: variant,
-		role: "row",
-		"aria-hidden": "true",
-		children: resolvedColumns.map((col) => /* @__PURE__ */ jsx(TableDataCell, {
-			...renderCellsForColumn(col),
-			role: "cell",
-			children: col.cellLoading ? col.cellLoading() : null
-		}, col.id))
-	}, `loading-${rowIndex}`));
-	const showLoading = isLoading && rows.length === 0;
-	const showError = isError && rows.length === 0;
-	const showEmpty = rows.length === 0 && !isLoading && !isError && Boolean(contentWhenEmpty);
-	const statusAvailableHeight = (height !== void 0 || minHeight !== void 0 || maxHeight !== void 0 || Boolean(fillHeight)) && viewportHeight !== void 0 ? Math.max(0, viewportHeight - (headerHeight ?? 0)) : void 0;
-	return /* @__PURE__ */ jsx(TableOuterContainer, {
-		$width: width,
-		$height: height,
-		$minHeight: minHeight,
-		$maxHeight: maxHeight,
-		$fillWidth: fillWidth,
-		$fillHeight: fillHeight,
-		children: /* @__PURE__ */ jsxs(TableScrollContainer, {
-			ref: scrollContainerRef,
-			$noLastRowPadding: noLastRowPadding,
-			children: [/* @__PURE__ */ jsxs(StyledTable, {
-				$rowMinWidth: rowMinWidth,
-				role: isRowInteractive ? "grid" : "table",
-				"aria-label": ariaLabel,
-				"aria-labelledby": ariaLabelledBy,
-				"aria-rowcount": rows.length + headerRowCount,
-				"aria-colcount": columnCount,
-				"aria-multiselectable": isSelectable && enableMultiRowSelection && isRowInteractive ? true : void 0,
-				children: [!noHeader && /* @__PURE__ */ jsx(TableHead, {
-					ref: headerRef,
-					role: "rowgroup",
-					children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableHeaderRow, {
-						role: "row",
-						"aria-rowindex": 1,
-						children: headerGroup.headers.map((header, columnIndex) => {
-							const meta = header.column.columnDef.meta;
-							const canSort = header.column.getCanSort();
-							const sortDirection = header.column.getIsSorted();
-							const toggleSorting = header.column.getToggleSortingHandler();
-							const headerTemplate = header.column.columnDef.header;
-							const headerContent = typeof headerTemplate === "function" ? headerTemplate(header.getContext()) : headerTemplate;
-							return /* @__PURE__ */ jsx(TableHeaderCell, {
-								$width: getColumnWidth(resolvedColumns[columnIndex]),
-								$minWidth: header.column.columnDef.minSize,
-								$maxWidth: header.column.columnDef.maxSize,
-								$pin: meta?.pin,
-								$pinnedOffset: pinnedOffsets.get(header.column.id),
-								$align: meta?.align,
-								$isSortable: canSort,
-								$density: density,
-								$variant: variant,
-								$isCompact: meta?.isCompact,
-								role: "columnheader",
-								scope: "col",
-								"aria-colindex": columnIndex + 1,
-								"aria-label": resolvedColumns[columnIndex]?.headerAriaLabel,
-								"aria-sort": canSort ? sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none" : void 0,
-								tabIndex: canSort ? 0 : void 0,
-								onClick: canSort ? toggleSorting : void 0,
-								onKeyDown: canSort ? (event) => {
-									if (event.key !== "Enter" && event.key !== " ") return;
-									event.preventDefault();
-									toggleSorting?.(event);
-								} : void 0,
-								children: /* @__PURE__ */ jsx(TableHeaderCellContent, {
-									content: headerContent,
-									isSortable: canSort,
-									sortDirection,
-									resize: meta?.isResizable ? {
-										columnId: header.column.id,
-										columnLabel: meta.label ?? header.column.id,
-										isResizing: resize.resizingColumnId === header.column.id,
-										bounds: resize.getColumnResizeBounds(header.column.id),
-										onResizeStart: resize.startResize,
-										onResizeKeyDown: resize.resizeByKeyboard
-									} : void 0
-								})
-							}, header.id);
-						})
-					}, headerGroup.id))
-				}), /* @__PURE__ */ jsxs(TableBody, {
-					ref: bodyRef,
-					role: "rowgroup",
-					children: [
-						showLoading && renderLoadingRows(),
-						showError && /* @__PURE__ */ jsx(TableStatusRow, {
-							colSpan: columnCount,
-							viewportWidth,
-							availableHeight: statusAvailableHeight,
-							role: "alert",
-							children: typeof contentWhenError === "function" ? contentWhenError(error) : contentWhenError ?? /* @__PURE__ */ jsx(Text, {
-								variant: TextVariant.ERROR,
-								children: error?.message ?? "Error loading data"
-							})
-						}),
-						showEmpty && /* @__PURE__ */ jsx(TableStatusRow, {
-							colSpan: columnCount,
-							viewportWidth,
-							availableHeight: statusAvailableHeight,
-							role: "status",
-							children: contentWhenEmpty
-						}),
-						!showLoading && !showError && rows.map((row, index) => {
-							const isSelected = row.getIsSelected();
-							const isExpanded = hasExpansion && row.getIsExpanded();
-							const isLastRow = index === rows.length - 1;
-							const expandedPanelId = `${instanceId}-expanded-${row.id}`;
-							return /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx(TableRow, {
-								$isClickable: Boolean(onRowClick || onRowActivate),
-								$isSelected: isSelected,
-								$density: density,
-								$variant: variant,
-								$isExpanded: isExpanded,
-								$isLastRow: noLastRowBorder && isLastRow && !isExpanded,
-								role: "row",
-								"aria-rowindex": index + 1 + headerRowCount,
-								"aria-selected": isSelectable ? isSelected : void 0,
-								"aria-expanded": row.getCanExpand() ? isExpanded : void 0,
-								"aria-label": getRowAriaLabel?.(row),
-								tabIndex: keyboard.getRowTabIndex(index),
-								onFocus: resolvedEnableRowFocus ? () => keyboard.onRowFocus(index) : void 0,
-								onKeyDown: resolvedEnableRowFocus ? (event) => keyboard.onRowKeyDown(index, event) : void 0,
-								onClick: onRowClick || onRowActivate ? (event) => {
-									onRowClick?.(row, event);
-									onRowActivate?.(row, event);
-								} : void 0,
-								onDoubleClick: onRowDoubleClick ? (event) => onRowDoubleClick(row, event) : void 0,
-								["data-row-index"]: index,
-								children: row.getVisibleCells().map((cell, columnIndex) => {
-									const meta = cell.column.columnDef.meta;
-									return /* @__PURE__ */ jsx(TableDataCell, {
-										$width: getColumnWidth(resolvedColumns[columnIndex]),
-										$minWidth: cell.column.columnDef.minSize,
-										$maxWidth: cell.column.columnDef.maxSize,
-										$pin: meta?.pin,
-										$pinnedOffset: pinnedOffsets.get(cell.column.id),
-										$align: meta?.align,
-										$density: density,
-										$variant: variant,
-										$isCompact: meta?.isCompact,
-										role: isRowInteractive ? "gridcell" : "cell",
-										"aria-colindex": columnIndex + 1,
-										children: flexRender(cell.column.columnDef.cell, cell.getContext())
-									}, cell.id);
-								})
-							}), isExpanded && onRowExpand && /* @__PURE__ */ jsx(TableExpandedRow, {
-								panelId: expandedPanelId,
-								variant,
-								colSpan: columnCount,
-								rowMinWidth,
-								viewportWidth,
-								gutterWidth: hasExpandColumn ? 44 : 0,
-								isLastRow: noLastRowBorder && isLastRow,
-								children: onRowExpand(row)
-							})] }, row.id);
-						}),
-						isFetchingNextPage && renderLoadingRows()
-					]
-				})]
-			}), /* @__PURE__ */ jsx(InfiniteScrollSentinel, {
-				ref: sentinelRef,
-				"aria-hidden": "true"
-			})]
+	const visibleColumns = layout.visibleColumns;
+	const hasStatusAfter = isLoading || error !== void 0;
+	const rowCount = displayRows.length;
+	const cellRole = isInteractive ? "gridcell" : "cell";
+	const colSpan = leadingCount + visibleColumns.length + (hasTrailingColumn ? 1 : 0);
+	const leadingHeaders = [];
+	if (isSelectable) leadingHeaders.push(/* @__PURE__ */ jsx(TableSelectAllCheckbox, {
+		metrics,
+		isChecked: selection.isAllSelected,
+		isIndeterminate: selection.isSomeSelected,
+		isDisabled: data.length === 0,
+		onToggle: selection.toggleAll
+	}));
+	if (hasExpandColumn) leadingHeaders.push(null);
+	return /* @__PURE__ */ jsx(TableFrame, {
+		metrics,
+		columnLayout: layout,
+		leadingHeaders,
+		trailingHeader: canCustomizeColumns ? /* @__PURE__ */ jsx(TableColumnsMenu, {
+			entries: layout.menuEntries,
+			metrics,
+			onToggle: (columnId, isVisible) => layout.setColumnHidden(columnId, !isVisible),
+			onReset: layout.resetLayout
+		}) : void 0,
+		hasTrailingColumn,
+		sort: currentSort,
+		onSortPress: handleSortPress,
+		canCustomizeColumns,
+		rowCount,
+		isLoading,
+		error,
+		emptyState,
+		onEndReached,
+		role: isInteractive ? "grid" : "table",
+		ariaLabel,
+		tableAria,
+		isMultiselectable: isSelectable,
+		ariaRowCount: void 0,
+		rootRef: ref,
+		scrollRef,
+		rootProps,
+		className,
+		style,
+		children: displayRows.map((entry, rowIndex) => {
+			const content = renderExpandedRow?.(entry.row);
+			const canExpand = content !== null && content !== void 0;
+			const isExpanded = canExpand && expandedSet.has(entry.id);
+			const isLastRow = rowIndex === rowCount - 1;
+			const panelId = `${baseId}-panel-${entry.dataIndex}`;
+			return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TableBodyRow, {
+				row: entry.row,
+				rowIndex,
+				rowId: entry.id,
+				columns: visibleColumns,
+				metrics,
+				callbacks,
+				cellRole,
+				isFocusable: isInteractive,
+				isTabStop: rowIndex === navigation.tabStopIndex,
+				isClickable: hasRowClick,
+				isBorderless: isLastRow && !hasStatusAfter || isExpanded,
+				isActive: activeRowId !== void 0 && activeRowId !== null && activeRowId === entry.id,
+				isSelected: isSelectable ? selection.selectedIds.has(entry.id) : void 0,
+				hasExpandColumn,
+				isExpanded: canExpand ? isExpanded : void 0,
+				panelId: canExpand ? panelId : void 0,
+				hasTrailingColumn,
+				isActionsOpen: openActionsRowId === entry.id,
+				ariaRowIndex: void 0,
+				hasColIndex: false,
+				className: void 0,
+				style: void 0
+			}), isExpanded && /* @__PURE__ */ jsx(TableExpandedRow, {
+				panelId,
+				colSpan,
+				gutterPx: leadingCount * metrics.rowHeightPx,
+				isLast: isLastRow && !hasStatusAfter,
+				children: content
+			})] }, entry.id);
 		})
 	});
-}
+});
+InfiniteTableInner.displayName = "InfiniteTable";
+/** The read-only data table. */
+var InfiniteTable = InfiniteTableInner;
 //#endregion
-export { ColumnAlign, ColumnPin, ColumnResizeMode, TableDensity, TableVariant, InfiniteTable as default, estimateColumnWidth };
+export { InfiniteTableSize, InfiniteTable as default };