@galaxy-io/dls 1.6.1 → 2.0.0

package/dist/table/VirtualizedInfiniteTable.d.ts

@@ -1,19 +1,109 @@
-import React from "react";
-import { type VirtualizedInfiniteTableProps } from "./types";
-export { ColumnAlign, ColumnPin, ColumnResizeMode, TableDensity, TableVariant } from "./types";
-export type { ColumnDef, ColumnSizingState, Row, VirtualizedInfiniteTableProps } from "./types";
 /**
- * Kept as an alias of the props type this component has always exported under
- * this name, so `import type { InfiniteTableProps }` from this module still
- * resolves.
+ * InfiniteTable for very long lists: the same columns, header, sizes, sort indicator, row
+ * actions, column arrangement and status states, but only the rows in view (plus
+ * `VIRTUAL_OVERSCAN` above and below) are in the DOM. The app gives a row count and
+ * `getRowData(index)` instead of an array; rows it has not loaded yet show as skeleton rows in
+ * place. Every row is exactly the `size` rung's height; there is no selection, no expansion and
+ * no client-side sorting (the app re-queries when `sort` changes).
+ *
+ * Built on the shared table core (`TableCore`, `useTableColumnLayout`,
+ * `useTableKeyboardNavigation`, `useInfiniteScrollSentinel`) plus `useTableVirtualizer`
+ * (`@tanstack/react-virtual`, an optional peer). It imports nothing from `InfiniteTable`, so it
+ * never needs `@tanstack/react-table`.
  */
-export type InfiniteTableProps<TData> = VirtualizedInfiniteTableProps<TData>;
+import { type AriaAttributes, type CSSProperties, type KeyboardEvent, type MouseEvent, type ReactElement, type ReactNode, type RefAttributes } from "react";
+import type { TableColumn, TableColumnLayout, TableSort } from "./types.js";
+/** Row rung of the table (canonical subset; the 1.x TableDensity members). Same rows as InfiniteTableSize. */
+export declare enum VirtualizedInfiniteTableSize {
+    /** 32px rows, body_sm text. */
+    SMALL = "SMALL",
+    /** 48px rows, body_md text. The default. */
+    MEDIUM = "MEDIUM",
+    /** 52px rows, body_lg text. */
+    LARGE = "LARGE"
+}
+export interface VirtualizedInfiniteTableProps<TData> extends AriaAttributes {
+    /** The columns in their default order. Same column type as InfiniteTable (`@galaxy-io/dls/table/types`). */
+    columns: TableColumn<TData>[];
+    /** Number of rows the table can show, loaded or not. Grow it as pages arrive. */
+    totalRowCount: number;
+    /** Returns the row at `index`, or `undefined` while it is not loaded (it shows as a skeleton row). Called for visible rows only; must be cheap. */
+    getRowData: (index: number) => TData | undefined;
+    /**
+     * Stable identity of a loaded row, for `activeRowId` and React keys.
+     * @default (row, index) => String(index)
+     */
+    getRowId?: (row: TData, index: number) => string;
+    /**
+     * Row rung: 32 / 48 / 52px rows. Every row is exactly this tall.
+     * @default VirtualizedInfiniteTableSize.MEDIUM
+     */
+    size?: VirtualizedInfiniteTableSize;
+    /**
+     * Rows are loading: skeleton rows replace an empty body, or follow the last row while more load. Sets `aria-busy`.
+     * @default false
+     */
+    isLoading?: boolean;
+    /** Message from the app when loading failed. Shown as an error state in an empty body, or as an error row after the last row. `onEndReached` pauses while it is set. */
+    error?: string;
+    /**
+     * Shown in the body when `totalRowCount` is 0 and the table is neither loading nor in error.
+     * @default <EmptyState header="No results" />
+     */
+    emptyState?: ReactNode;
+    /** Called when the last row comes within 500px of view, and again only after `totalRowCount` grows. */
+    onEndReached?: () => void;
+    /** Called when a loaded row is clicked or Enter is pressed on it. Not called for clicks on a control inside the row. */
+    onRowClick?: (row: TData, event: MouseEvent<HTMLTableRowElement> | KeyboardEvent<HTMLTableRowElement>) => void;
+    /** Id of the row shown as current, such as the one open in a side panel. Display only: set it from `onRowClick`. */
+    activeRowId?: string | null;
+    /** Menu rows (`MenuItem`, `MenuSeparator`, …) for a loaded row's actions menu, opened from a trailing "…" button. Return `null` for a row with no actions. */
+    rowActions?: (row: TData, rowIndex: number) => ReactNode;
+    /** Controlled sorted column, shown in the header. The table never reorders rows itself: the app re-queries with the new sort. */
+    sort?: TableSort | null;
+    /**
+     * Initial sort while uncontrolled.
+     * @default null
+     */
+    defaultSort?: TableSort | null;
+    /** Called with the next sort when a sortable header is pressed. Reset the data (and scroll) when it changes. */
+    onSortChange?: (sort: TableSort | null) => void;
+    /** Controlled column arrangement: order, hidden column ids and widths. Persist it to keep a user's layout. */
+    columnLayout?: TableColumnLayout;
+    /**
+     * Initial arrangement while uncontrolled (for example, columns hidden by default).
+     * @default {}
+     */
+    defaultColumnLayout?: TableColumnLayout;
+    /** Called with the full new arrangement when the user resizes, moves, hides, shows or resets columns. Fires on every resize step; debounce before saving. */
+    onColumnLayoutChange?: (columnLayout: TableColumnLayout) => void;
+    /**
+     * Adds a drag handle at the end of each header cell (arrow keys too). Columns opt out with `canResize: false`.
+     * @default false
+     */
+    canResizeColumns?: boolean;
+    /**
+     * Lets the user reorder columns (drag a header, or Alt+ArrowLeft / Alt+ArrowRight on it) and show or hide them from a Columns menu at the end of the header. Columns opt out of hiding with `canHide: false`.
+     * @default false
+     */
+    canCustomizeColumns?: boolean;
+    /** Accessible name of the table. Use `aria-labelledby` instead when a visible heading names it. */
+    ariaLabel?: string;
+    /** DOM id on the root `<div>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<div>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root `<div>`. */
+    className?: string;
+    /** Inline style on the root `<div>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
 /**
- * `InfiniteTable` with row virtualization — only the visible window is in the
- * DOM, so it stays responsive at tens of thousands of rows.
- *
- * The trade is a fixed row height and no natural content sizing. Prefer plain
- * `InfiniteTable` until row count actually becomes the problem.
+ * The public, generic call signature (`TData` inferred from `getRowData` and `columns`). Never
+ * called: it only types the default export. An arrow function rather than a type literal, so
+ * react-docgen-typescript reads the props for the Docs tab (the SelectInput precedent).
  */
-declare function VirtualizedInfiniteTable<TData>(props: VirtualizedInfiniteTableProps<TData>): React.JSX.Element;
+declare const VIRTUALIZED_INFINITE_TABLE_SIGNATURE: <TData>(_props: VirtualizedInfiniteTableProps<TData> & RefAttributes<HTMLDivElement>) => ReactElement | null;
+/** InfiniteTable with a virtual body, for tens of thousands of rows. */
+declare const VirtualizedInfiniteTable: typeof VIRTUALIZED_INFINITE_TABLE_SIGNATURE;
 export default VirtualizedInfiniteTable;

package/dist/table/VirtualizedInfiniteTable.js

@@ -1,233 +1,294 @@
-import Text, { TextVariant } from "../text/Text.js";
-import { ColumnAlign, ColumnPin, ColumnResizeMode, TableDensity, TableVariant } from "./types.js";
-import { createVirtualRow, getDensityRowHeightPx } from "./utils.js";
-import { useTableColumnResize } from "./useTableColumnResize.js";
+import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
+import { useControlledState } from "../hooks/useControlledState.js";
+import { TABLE_LARGE_METRICS, TABLE_MEDIUM_METRICS, TABLE_SMALL_METRICS, TableBodyRow, TableColumnsMenu, TableFrame, TableSkeletonRow, VIRTUAL_BODY_CSS, VIRTUAL_ROW_CSS } 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 React, { useCallback, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useVirtualizer } from "@tanstack/react-virtual";
+import { useTableVirtualizer } from "./useTableVirtualizer.js";
+import { useTableKeyboardNavigation } from "./useTableKeyboardNavigation.js";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/table/VirtualizedInfiniteTable.tsx
-function VirtualizedRowInner({ rowData, rowIndex, translateY, rowHeight, density, variant, isLastRow, isClickable, columns, getColumnWidth, pinnedOffsets, onClick }) {
-	return /* @__PURE__ */ jsx(TableRow, {
-		$density: density,
-		$variant: variant,
-		$isLastRow: isLastRow,
-		$isClickable: isClickable,
-		$translateY: translateY,
-		$rowHeight: rowHeight,
-		role: "row",
-		"aria-rowindex": rowIndex + 2,
-		onClick: onClick ? (event) => onClick(rowIndex, event) : void 0,
-		children: columns.map((col, columnIndex) => /* @__PURE__ */ jsx(TableDataCell, {
-			$width: getColumnWidth(col),
-			$minWidth: col.minSize,
-			$maxWidth: col.maxSize,
-			$pin: col.pin,
-			$pinnedOffset: pinnedOffsets.get(col.id),
-			$align: col.align,
-			$density: density,
-			$variant: variant,
-			role: "cell",
-			"aria-colindex": columnIndex + 1,
-			children: rowData && col.cell ? col.cell({
-				value: col.accessorFn?.(rowData),
-				row: createVirtualRow(rowData, rowIndex)
-			}) : null
-		}, col.id))
-	});
-}
-var VirtualizedRow = React.memo(VirtualizedRowInner);
 /**
-* `InfiniteTable` with row virtualization — only the visible window is in the
-* DOM, so it stays responsive at tens of thousands of rows.
+* InfiniteTable for very long lists: the same columns, header, sizes, sort indicator, row
+* actions, column arrangement and status states, but only the rows in view (plus
+* `VIRTUAL_OVERSCAN` above and below) are in the DOM. The app gives a row count and
+* `getRowData(index)` instead of an array; rows it has not loaded yet show as skeleton rows in
+* place. Every row is exactly the `size` rung's height; there is no selection, no expansion and
+* no client-side sorting (the app re-queries when `sort` changes).
 *
-* The trade is a fixed row height and no natural content sizing. Prefer plain
-* `InfiniteTable` until row count actually becomes the problem.
+* Built on the shared table core (`TableCore`, `useTableColumnLayout`,
+* `useTableKeyboardNavigation`, `useInfiniteScrollSentinel`) plus `useTableVirtualizer`
+* (`@tanstack/react-virtual`, an optional peer). It imports nothing from `InfiniteTable`, so it
+* never needs `@tanstack/react-table`.
 */
-function VirtualizedInfiniteTable(props) {
-	const { columns, totalRowCount, getRowData, getRowId, height, minHeight, maxHeight, width, fillWidth, fillHeight, density = TableDensity.MEDIUM, variant = TableVariant.PRIMARY, estimateRowHeight, overscan = 25, hasNextPage, isFetchingNextPage, fetchNextPage, isLoading = false, isError = false, error, loadingRowCount = 5, contentWhenEmpty, contentWhenError, noHeader = false, noLastRowBorder = false, noLastRowPadding = false, enableColumnResizing = false, columnSizing, defaultColumnSizing, onColumnSizingChange, columnResizeMode = ColumnResizeMode.ON_CHANGE, ariaLabel, ariaLabelledBy, onRowClick } = props;
-	const scrollContainerRef = useRef(null);
-	const headerRef = useRef(null);
-	const { width: viewportWidth, height: viewportHeight } = useElementClientSize(scrollContainerRef);
-	const { height: headerHeight } = useElementClientSize(headerRef);
-	const resize = useTableColumnResize({
+/** Row rung of the table (canonical subset; the 1.x TableDensity members). Same rows as InfiniteTableSize. */
+var VirtualizedInfiniteTableSize = /* @__PURE__ */ function(VirtualizedInfiniteTableSize) {
+	/** 32px rows, body_sm text. */
+	VirtualizedInfiniteTableSize["SMALL"] = "SMALL";
+	/** 48px rows, body_md text. The default. */
+	VirtualizedInfiniteTableSize["MEDIUM"] = "MEDIUM";
+	/** 52px rows, body_lg text. */
+	VirtualizedInfiniteTableSize["LARGE"] = "LARGE";
+	return VirtualizedInfiniteTableSize;
+}({});
+var VIRTUALIZED_INFINITE_TABLE_SIZE_TO_TABLE_METRICS_MAP = {
+	["SMALL"]: TABLE_SMALL_METRICS,
+	["MEDIUM"]: TABLE_MEDIUM_METRICS,
+	["LARGE"]: TABLE_LARGE_METRICS
+};
+/** `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
+	};
+}
+/** What the live region says when the sort changes and the rows jump to the top. */
+function sortAnnouncement(sort, columns) {
+	if (sort === null) return "Sort cleared";
+	return `Sorted by ${columns.find((column) => column.id === sort.columnId)?.header ?? sort.columnId}, ${sort.isDescending ? "descending" : "ascending"}`;
+}
+/** InfiniteTable with a virtual body, for tens of thousands of rows. */
+var VirtualizedInfiniteTableInner = forwardRef(function VirtualizedInfiniteTable(props, ref) {
+	const { columns, totalRowCount, getRowData, getRowId, size: sizeProp, isLoading: isLoadingProp, error: errorProp, emptyState, onEndReached, onRowClick, activeRowId, rowActions, sort, defaultSort, onSortChange, 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 canResizeColumns = canResizeColumnsProp ?? false;
+	const canCustomizeColumns = canCustomizeColumnsProp ?? false;
+	const rowCount = Math.max(0, Math.floor(totalRowCount));
+	const metrics = VIRTUALIZED_INFINITE_TABLE_SIZE_TO_TABLE_METRICS_MAP[size];
+	const scrollRef = useRef(null);
+	const { rootProps, tableAria } = splitPassthrough(rest);
+	if (id !== void 0) rootProps.id = id;
+	const hasRowActions = rowActions !== void 0;
+	const hasTrailingColumn = hasRowActions || canCustomizeColumns;
+	const isInteractive = onRowClick !== void 0 || hasRowActions;
+	const hasRowClick = onRowClick !== void 0;
+	const resolveRowId = useCallback((row, index) => getRowId ? getRowId(row, index) : String(index), [getRowId]);
+	const [currentSort, setSort] = useControlledState({
+		value: sort,
+		defaultValue: defaultSort ?? null,
+		onChange: onSortChange
+	});
+	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 [openActionsRowId, setOpenActionsRowId] = useState(null);
+	const layout = useTableColumnLayout({
 		columns,
-		enabled: enableColumnResizing,
-		columnSizing,
-		defaultColumnSizing,
-		onColumnSizingChange,
-		mode: columnResizeMode
+		columnLayout,
+		defaultColumnLayout: defaultColumnLayout ?? {},
+		onColumnLayoutChange,
+		canResizeColumns,
+		canCustomizeColumns,
+		leadingCount: 0,
+		hasTrailing: hasTrailingColumn,
+		syntheticWidthPx: metrics.rowHeightPx
 	});
-	const { getColumnWidth, pinnedOffsets, rowMinWidth } = useTableColumnLayout({
+	const visibleColumns = layout.visibleColumns;
+	const hasFooter = visibleColumns.some(({ column }) => column.footer !== void 0 && column.footer !== null);
+	const latestRef = useRef({
 		columns,
-		columnSizing: resize.columnSizing
+		getRowData,
+		resolveRowId,
+		onRowClick,
+		rowActions
 	});
-	const rowHeight = estimateRowHeight ?? getDensityRowHeightPx(density);
-	const virtualizer = useVirtualizer({
-		count: totalRowCount,
-		getScrollElement: () => scrollContainerRef.current,
-		estimateSize: () => rowHeight,
-		overscan
+	latestRef.current = {
+		columns,
+		getRowData,
+		resolveRowId,
+		onRowClick,
+		rowActions
+	};
+	const handleKey = useCallback((rowIndex, event) => {
+		const current = latestRef.current;
+		if (event.key === " ") {
+			event.preventDefault();
+			return;
+		}
+		const row = current.getRowData(rowIndex);
+		if (row === void 0) return;
+		if (event.key === "Enter") {
+			current.onRowClick?.(row, event);
+			return;
+		}
+		if (event.key === "F10" && event.shiftKey || event.key === "ContextMenu") {
+			const actions = current.rowActions?.(row, rowIndex);
+			if (actions === null || actions === void 0) return;
+			event.preventDefault();
+			setOpenActionsRowId(current.resolveRowId(row, rowIndex));
+		}
+	}, []);
+	const virtualizerRef = useRef(null);
+	const navigation = useTableKeyboardNavigation({
+		rowCount,
+		getPageSize: useCallback(() => {
+			const scroll = scrollRef.current;
+			if (scroll === null) return 1;
+			return Math.max(1, Math.floor((scroll.clientHeight - metrics.headerHeightPx) / metrics.rowHeightPx) - 1);
+		}, [metrics.rowHeightPx, metrics.headerHeightPx]),
+		scrollToIndex: (index) => virtualizerRef.current?.scrollToIndex(index),
+		onKeyDown: handleKey
 	});
-	const virtualRows = virtualizer.getVirtualItems();
-	const sentinelRef = useInfiniteScrollSentinel({
-		scrollRef: scrollContainerRef,
-		hasNextPage,
-		isFetchingNextPage,
-		fetchNextPage,
-		rowCount: totalRowCount
+	const getItemKey = useCallback((index) => {
+		const row = latestRef.current.getRowData(index);
+		return row === void 0 ? index : latestRef.current.resolveRowId(row, index);
+	}, []);
+	const virtualizer = useTableVirtualizer({
+		count: rowCount,
+		scrollRef,
+		rowHeightPx: metrics.rowHeightPx,
+		headerHeightPx: metrics.headerHeightPx,
+		footerHeightPx: hasFooter ? metrics.headerHeightPx : 0,
+		getItemKey,
+		keepIndexes: rowCount > 0 ? [navigation.tabStopIndex] : []
 	});
-	const handleRowClick = useCallback((rowIndex, event) => {
-		const rowData = getRowData(rowIndex);
-		if (!rowData || !onRowClick) return;
-		onRowClick(createVirtualRow(rowData, rowIndex), event);
-	}, [getRowData, onRowClick]);
-	const renderLoadingCells = () => columns.map((col) => /* @__PURE__ */ jsx(TableDataCell, {
-		$width: getColumnWidth(col),
-		$minWidth: col.minSize,
-		$maxWidth: col.maxSize,
-		$pin: col.pin,
-		$pinnedOffset: pinnedOffsets.get(col.id),
-		$align: col.align,
-		$density: density,
-		$variant: variant,
-		role: "cell",
-		children: col.cellLoading ? col.cellLoading() : null
-	}, col.id));
-	/** Loading rows for the initial load: normal flow, no virtual offset. */
-	const renderLoadingRows = () => Array.from({ length: loadingRowCount }).map((_, rowIndex) => /* @__PURE__ */ jsx(TableLoadingRow, {
-		$density: density,
-		$variant: variant,
-		role: "row",
-		"aria-hidden": "true",
-		children: renderLoadingCells()
-	}, `loading-${rowIndex}`));
-	/**
-	* Loading rows appended while paging. The body is absolutely positioned once
-	* virtualization is active, so these have to be offset past the last row
-	* rather than left in normal flow.
-	*/
-	const renderTrailingLoadingRows = (startOffset) => Array.from({ length: loadingRowCount }).map((_, rowIndex) => /* @__PURE__ */ jsx(TableRow, {
-		$density: density,
-		$variant: variant,
-		$translateY: startOffset + rowIndex * rowHeight,
-		$rowHeight: rowHeight,
-		role: "row",
-		"aria-hidden": "true",
-		children: renderLoadingCells()
-	}, `loading-more-${rowIndex}`));
-	const showLoading = isLoading && totalRowCount === 0;
-	const showError = isError && totalRowCount === 0;
-	const showEmpty = totalRowCount === 0 && !isLoading && !isError && Boolean(contentWhenEmpty);
-	const showRows = !showLoading && !showError && !showEmpty;
-	const statusAvailableHeight = (height !== void 0 || minHeight !== void 0 || maxHeight !== void 0 || Boolean(fillHeight)) && viewportHeight !== void 0 ? Math.max(0, viewportHeight - (headerHeight ?? 0)) : void 0;
-	const virtualTotalSize = virtualizer.getTotalSize();
-	const trailingLoadingHeight = isFetchingNextPage ? loadingRowCount * rowHeight : 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: "table",
-				"aria-label": ariaLabel,
-				"aria-labelledby": ariaLabelledBy,
-				"aria-rowcount": totalRowCount + (noHeader ? 0 : 1),
-				"aria-colcount": columns.length,
-				children: [!noHeader && /* @__PURE__ */ jsx(TableHead, {
-					ref: headerRef,
-					role: "rowgroup",
-					children: /* @__PURE__ */ jsx(TableHeaderRow, {
-						role: "row",
-						"aria-rowindex": 1,
-						children: columns.map((col, columnIndex) => /* @__PURE__ */ jsx(TableHeaderCell, {
-							$width: getColumnWidth(col),
-							$minWidth: col.minSize,
-							$maxWidth: col.maxSize,
-							$pin: col.pin,
-							$pinnedOffset: pinnedOffsets.get(col.id),
-							$align: col.align,
-							$density: density,
-							$variant: variant,
-							role: "columnheader",
-							scope: "col",
-							"aria-colindex": columnIndex + 1,
-							"aria-label": col.headerAriaLabel,
-							children: /* @__PURE__ */ jsx(TableHeaderCellContent, {
-								content: typeof col.header === "function" ? col.header({ table: null }) : col.header ?? col.id,
-								isSortable: false,
-								sortDirection: false,
-								resize: resize.canResizeColumn(col) ? {
-									columnId: col.id,
-									columnLabel: typeof col.header === "string" ? col.header : col.id,
-									isResizing: resize.resizingColumnId === col.id,
-									bounds: resize.getColumnResizeBounds(col.id),
-									onResizeStart: resize.startResize,
-									onResizeKeyDown: resize.resizeByKeyboard
-								} : void 0
-							})
-						}, col.id))
-					})
-				}), /* @__PURE__ */ jsxs(TableBody, {
-					role: "rowgroup",
-					$virtualHeight: showRows ? virtualTotalSize + trailingLoadingHeight : void 0,
-					children: [
-						showLoading && renderLoadingRows(),
-						showError && /* @__PURE__ */ jsx(TableStatusRow, {
-							colSpan: columns.length,
-							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: columns.length,
-							viewportWidth,
-							availableHeight: statusAvailableHeight,
-							role: "status",
-							children: contentWhenEmpty
-						}),
-						showRows && virtualRows.map((virtualRow) => {
-							const rowData = getRowData(virtualRow.index);
-							const rowId = rowData && getRowId ? getRowId(rowData, virtualRow.index) : String(virtualRow.index);
-							return /* @__PURE__ */ jsx(VirtualizedRow, {
-								rowData,
-								rowIndex: virtualRow.index,
-								translateY: virtualRow.start,
-								rowHeight,
-								density,
-								variant,
-								isLastRow: noLastRowBorder && virtualRow.index === totalRowCount - 1,
-								isClickable: Boolean(onRowClick),
-								columns,
-								getColumnWidth,
-								pinnedOffsets,
-								onClick: onRowClick ? handleRowClick : void 0
-							}, rowId);
-						}),
-						isFetchingNextPage && (showRows ? renderTrailingLoadingRows(virtualTotalSize) : null)
-					]
-				})]
-			}), /* @__PURE__ */ jsx(InfiniteScrollSentinel, {
-				ref: sentinelRef,
-				"aria-hidden": "true"
-			})]
+	virtualizerRef.current = { scrollToIndex: (index) => virtualizer.scrollToIndex(index, { align: "auto" }) };
+	const [isMounted, setIsMounted] = useState(false);
+	useIsomorphicLayoutEffect(() => setIsMounted(true), []);
+	const [announcement, setAnnouncement] = useState("");
+	const sortKey = currentSort === null ? "" : `${currentSort.columnId}:${currentSort.isDescending}`;
+	const previousSortKeyRef = useRef(sortKey);
+	useEffect(() => {
+		if (previousSortKeyRef.current === sortKey) return;
+		previousSortKeyRef.current = sortKey;
+		virtualizer.scrollToOffset(0);
+		setAnnouncement(sortAnnouncement(currentSort, latestRef.current.columns));
+	}, [
+		sortKey,
+		currentSort,
+		virtualizer
+	]);
+	const callbacks = useMemo(() => ({
+		registerRow: navigation.registerRow,
+		onRowClick: hasRowClick ? (row, event) => latestRef.current.onRowClick?.(row, event) : void 0,
+		onRowKeyDown: navigation.handleRowKeyDown,
+		onRowFocus: navigation.handleRowFocus,
+		onToggleSelect: () => {},
+		onToggleExpand: () => {},
+		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);
+		}
+	}), [
+		navigation.registerRow,
+		navigation.handleRowKeyDown,
+		navigation.handleRowFocus,
+		hasRowClick,
+		hasRowActions
+	]);
+	const startStylesRef = useRef(/* @__PURE__ */ new Map());
+	const startStyle = (start) => {
+		let cached = startStylesRef.current.get(start);
+		if (cached === void 0) {
+			cached = { "--gx-table-row-start": `${start}px` };
+			if (startStylesRef.current.size > 2e3) startStylesRef.current.clear();
+			startStylesRef.current.set(start, cached);
+		}
+		return cached;
+	};
+	const virtualItems = isMounted ? virtualizer.getVirtualItems() : [];
+	const bodyVariables = { "--gx-table-virtual-height": `${isMounted ? virtualizer.getTotalSize() : 0}px` };
+	const cellRole = isInteractive ? "gridcell" : "cell";
+	const hasStatusAfter = isLoading || error !== void 0;
+	const scrollMargin = virtualizer.options.scrollMargin;
+	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: false,
+		ariaRowCount: rowCount + 1 + (hasFooter ? 1 : 0),
+		rootRef: ref,
+		scrollRef,
+		rootProps,
+		className,
+		style,
+		bodyClassName: VIRTUAL_BODY_CSS,
+		bodyStyle: bodyVariables,
+		announcement,
+		children: virtualItems.map((item) => {
+			const row = getRowData(item.index);
+			const isBorderless = item.index === rowCount - 1 && !hasStatusAfter;
+			const rowStyle = startStyle(item.start - scrollMargin);
+			if (row === void 0) return /* @__PURE__ */ jsx(TableSkeletonRow, {
+				columns: visibleColumns,
+				metrics,
+				leadingCount: 0,
+				hasTrailingColumn,
+				isBorderless,
+				ariaRowIndex: item.index + 2,
+				...isInteractive ? { pending: {
+					rowRef: (element) => navigation.registerRow(item.index, element),
+					isTabStop: item.index === navigation.tabStopIndex,
+					onKeyDown: (event) => navigation.handleRowKeyDown(item.index, event),
+					onFocus: () => navigation.handleRowFocus(item.index)
+				} } : {},
+				className: VIRTUAL_ROW_CSS,
+				style: rowStyle
+			}, `pending-${item.index}`);
+			const rowId = resolveRowId(row, item.index);
+			return /* @__PURE__ */ jsx(TableBodyRow, {
+				row,
+				rowIndex: item.index,
+				rowId,
+				columns: visibleColumns,
+				metrics,
+				callbacks,
+				cellRole,
+				isFocusable: isInteractive,
+				isTabStop: item.index === navigation.tabStopIndex,
+				isClickable: hasRowClick,
+				isBorderless,
+				isActive: activeRowId !== void 0 && activeRowId !== null && activeRowId === rowId,
+				isSelected: void 0,
+				hasExpandColumn: false,
+				isExpanded: void 0,
+				panelId: void 0,
+				hasTrailingColumn,
+				isActionsOpen: openActionsRowId === rowId,
+				ariaRowIndex: item.index + 2,
+				hasColIndex: true,
+				className: VIRTUAL_ROW_CSS,
+				style: rowStyle
+			}, rowId);
 		})
 	});
-}
+});
+VirtualizedInfiniteTableInner.displayName = "VirtualizedInfiniteTable";
+/** InfiniteTable with a virtual body, for tens of thousands of rows. */
+var VirtualizedInfiniteTable = VirtualizedInfiniteTableInner;
 //#endregion
-export { ColumnAlign, ColumnPin, ColumnResizeMode, TableDensity, TableVariant, VirtualizedInfiniteTable as default };
+export { VirtualizedInfiniteTableSize, VirtualizedInfiniteTable as default };