@galaxy-io/dls 1.6.0 → 2.0.0

package/dist/table/InfiniteSpreadsheet.js

@@ -1,242 +1,779 @@
+import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
+import Skeleton, { SkeletonVariant } from "../feedback/Skeleton.js";
+import { Placement, Side } from "../theme/enums.js";
 import Text, { TextVariant } from "../text/Text.js";
-import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
-import { CellEnrichmentStatus, ColumnAlign, ColumnPin, ColumnResizeMode, SpreadsheetCellType, TableDensity, TableVariant } from "./types.js";
-import { getDensityRowHeightPx } from "./utils.js";
-import { useTableKeyboardNavigation } from "./useTableKeyboardNavigation.js";
-import { useTableColumnResize } from "./useTableColumnResize.js";
+import { CONTROL_SIZE, SPACE } from "../theme/tokens/scales.js";
+import { useControlledState } from "../hooks/useControlledState.js";
+import Beacon, { BeaconSize, BeaconVariant } from "../beacons/Beacon.js";
+import Icon, { IconVariant } from "../icons/Icon.js";
+import Button, { ButtonVariant } from "../buttons/Button.js";
+import EmptyState from "../feedback/EmptyState.js";
+import { InputSize } from "../inputs/Input.js";
+import { SelectInputSize } from "../inputs/SelectInput.js";
+import { DateInputSize } from "../inputs/DateInput.js";
+import { SwitchInputSize } from "../inputs/SwitchInput.js";
+import Menu from "../menu/Menu.js";
+import { SpreadsheetCellEditor, SpreadsheetEditorKind } from "./SpreadsheetCellEditor.js";
+import { CELL_TEXT_CSS, COLUMN_ALIGN_TO_CSS_MAP, PIN_TO_CSS_MAP, PIN_TO_EDGE_CSS_MAP, TABLE_LARGE_METRICS, TABLE_MEDIUM_METRICS, TABLE_SMALL_METRICS, TableCell, TableCellText, TableColumnsMenu, TableFrame, TableRow, VIRTUAL_BODY_CSS, VIRTUAL_ROW_CSS } from "./TableCore.js";
+import { useSpreadsheetCellNavigation } from "./useSpreadsheetCellNavigation.js";
 import { useTableColumnLayout } from "./useTableColumnLayout.js";
-import { useSpreadsheetEditing } from "./useSpreadsheetEditing.js";
-import { useInfiniteScrollSentinel } from "./useInfiniteScrollSentinel.js";
-import { useElementClientSize } from "../hooks/useElementClientSize.js";
-import { InfiniteScrollSentinel, StyledTable, TableBody, TableDataCell, TableHead, TableHeaderRow, TableLoadingRow, TableOuterContainer, TableRow, TableScrollContainer } from "./TablePrimitives.js";
-import TableStatusRow from "./TableStatusRow.js";
-import { ActionColumnHeaderCell, CellLoadingSkeleton } from "./SpreadsheetPrimitives.js";
-import SpreadsheetRow from "./SpreadsheetRow.js";
-import SpreadsheetHeaderCell from "./SpreadsheetHeaderCell.js";
-import { useCallback, useMemo, useRef } from "react";
+import { useTableVirtualizer } from "./useTableVirtualizer.js";
+/* empty css                              */
+import { styled } from "@linaria/react";
+import { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { PlusIcon } from "@phosphor-icons/react";
-import { useVirtualizer } from "@tanstack/react-virtual";
+import { cx } from "@linaria/core";
+import { DotsThreeIcon, PlusIcon } from "@phosphor-icons/react";
 //#region src/table/InfiniteSpreadsheet.tsx
 /**
-* An editable grid — cell-level editing, keyboard navigation between cells, and
-* per-row actions, over the same infinite-scroll machinery as `InfiniteTable`.
+* InfiniteSpreadsheet is the editable grid: a virtualized table whose cells are values the user
+* edits in place, one cell at a time, with a spreadsheet's keyboard model (arrow keys between
+* cells, Enter / F2 or typing to edit, Tab to commit and move on, Escape to cancel). Each column
+* declares the type of its values (`cellType`), which picks the display and the 2.0 input used as
+* the editor, rendered bare (no frame, fill or focus line; the text stays where the read-only
+* cell drew it); the app receives each changed value through the column's `onCellChange` and stores
+* it. Columns can carry header menus, rows action menus, and cells a status dot for background
+* work on a value.
 *
-* Reach for this when cells are inputs. When the data is read-only, the tables
-* are lighter.
+* Built on the shared table core (`TableCore`, `useTableColumnLayout`, `useTableVirtualizer`) and
+* its own `SpreadsheetCellEditor` and `useSpreadsheetCellNavigation`; it imports nothing from
+* InfiniteTable or VirtualizedInfiniteTable, and no `@tanstack/react-table`. Read-only data is
+* InfiniteTable or VirtualizedInfiniteTable.
 */
-function InfiniteSpreadsheet(props) {
-	const { columns, totalRowCount, getRowData, getRowId, height, 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 = true, columnSizing, defaultColumnSizing, onColumnSizingChange, columnResizeMode = ColumnResizeMode.ON_CHANGE, ariaLabel, ariaLabelledBy, onAddColumn, addColumnAriaLabel = "Add column", rowActions, getRowActionsAriaLabel, editingCell: controlledEditingCell, onEditingCellChange, enableRowFocus = true } = props;
-	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 showActionColumn = Boolean(onAddColumn) || Boolean(rowActions && rowActions.length > 0);
-	const actionColumnWidth = showActionColumn ? 48 : 0;
-	const resize = useTableColumnResize({
-		columns,
-		enabled: enableColumnResizing,
-		columnSizing,
-		defaultColumnSizing,
-		onColumnSizingChange,
-		mode: columnResizeMode
+/** Row rung of the grid (canonical subset; the 1.x TableDensity members). Same rows as InfiniteTableSize. */
+var InfiniteSpreadsheetSize = /* @__PURE__ */ function(InfiniteSpreadsheetSize) {
+	/** 32px rows, body_sm text, 24px editors. */
+	InfiniteSpreadsheetSize["SMALL"] = "SMALL";
+	/** 48px rows, body_md text, 32px editors. The default. */
+	InfiniteSpreadsheetSize["MEDIUM"] = "MEDIUM";
+	/** 52px rows, body_lg text, 36px editors. */
+	InfiniteSpreadsheetSize["LARGE"] = "LARGE";
+	return InfiniteSpreadsheetSize;
+}({});
+/** Type of a column's values; picks the display format and the editor. */
+var SpreadsheetCellType = /* @__PURE__ */ function(SpreadsheetCellType) {
+	/** Free text; edited with TextInput. */
+	SpreadsheetCellType["TEXT"] = "TEXT";
+	/** A number; mono, right-aligned, edited with NumberInput. */
+	SpreadsheetCellType["NUMBER"] = "NUMBER";
+	/** Yes / no; edited with SwitchInput, or toggled with Space. */
+	SpreadsheetCellType["BOOLEAN"] = "BOOLEAN";
+	/** One of `options`; edited with SelectInput. */
+	SpreadsheetCellType["ENUM"] = "ENUM";
+	/** A date; edited with DateInput. */
+	SpreadsheetCellType["DATE"] = "DATE";
+	return SpreadsheetCellType;
+}({});
+/** Background work on a cell's value, shown as a dot (`IDLE` shows none). */
+var SpreadsheetCellStatus = /* @__PURE__ */ function(SpreadsheetCellStatus) {
+	/** Nothing in progress: no dot. */
+	SpreadsheetCellStatus["IDLE"] = "IDLE";
+	/** Queued. */
+	SpreadsheetCellStatus["PENDING"] = "PENDING";
+	/** In progress: the dot pulses. */
+	SpreadsheetCellStatus["RUNNING"] = "RUNNING";
+	/** Finished. */
+	SpreadsheetCellStatus["COMPLETE"] = "COMPLETE";
+	/** Failed. */
+	SpreadsheetCellStatus["ERROR"] = "ERROR";
+	return SpreadsheetCellStatus;
+}({});
+var INFINITE_SPREADSHEET_SIZE_TO_TABLE_METRICS_MAP = {
+	["SMALL"]: TABLE_SMALL_METRICS,
+	["MEDIUM"]: TABLE_MEDIUM_METRICS,
+	["LARGE"]: TABLE_LARGE_METRICS
+};
+var INFINITE_SPREADSHEET_SIZE_TO_INPUT_SIZE_MAP = {
+	["SMALL"]: InputSize.SMALL,
+	["MEDIUM"]: InputSize.MEDIUM,
+	["LARGE"]: InputSize.LARGE
+};
+var INFINITE_SPREADSHEET_SIZE_TO_SELECT_INPUT_SIZE_MAP = {
+	["SMALL"]: SelectInputSize.SMALL,
+	["MEDIUM"]: SelectInputSize.MEDIUM,
+	["LARGE"]: SelectInputSize.LARGE
+};
+var INFINITE_SPREADSHEET_SIZE_TO_DATE_INPUT_SIZE_MAP = {
+	["SMALL"]: DateInputSize.SMALL,
+	["MEDIUM"]: DateInputSize.MEDIUM,
+	["LARGE"]: DateInputSize.LARGE
+};
+var INFINITE_SPREADSHEET_SIZE_TO_SWITCH_INPUT_SIZE_MAP = {
+	["SMALL"]: SwitchInputSize.SMALL,
+	["MEDIUM"]: SwitchInputSize.MEDIUM,
+	["LARGE"]: SwitchInputSize.LARGE
+};
+var INFINITE_SPREADSHEET_SIZE_TO_BEACON_SIZE_MAP = {
+	["SMALL"]: BeaconSize.SMALL,
+	["MEDIUM"]: BeaconSize.MEDIUM,
+	["LARGE"]: BeaconSize.LARGE
+};
+/** Icon px of an ENUM option's icon: the input rung's icon, one step below III-A.4 (Mitch, 2026-10-04). */
+var INFINITE_SPREADSHEET_SIZE_TO_ICON_PX_MAP = {
+	["SMALL"]: 12,
+	["MEDIUM"]: 14,
+	["LARGE"]: 14
+};
+/** The trailing corner's button size in pixels (the metrics' `buttonSize` rung). */
+var INFINITE_SPREADSHEET_SIZE_TO_BUTTON_PX_MAP = {
+	["SMALL"]: Number.parseFloat(CONTROL_SIZE.xSmall),
+	["MEDIUM"]: Number.parseFloat(CONTROL_SIZE.small),
+	["LARGE"]: Number.parseFloat(CONTROL_SIZE.medium)
+};
+/** The status dot's color. Running is `PRIMARY` (neutral, pulsing); there is no `INFO` status. */
+var SPREADSHEET_CELL_STATUS_TO_BEACON_VARIANT_MAP = {
+	["IDLE"]: BeaconVariant.TERTIARY,
+	["PENDING"]: BeaconVariant.TERTIARY,
+	["RUNNING"]: BeaconVariant.PRIMARY,
+	["COMPLETE"]: BeaconVariant.SUCCESS,
+	["ERROR"]: BeaconVariant.ERROR
+};
+/** The status dot's accessible name. */
+var SPREADSHEET_CELL_STATUS_TO_LABEL_MAP = {
+	["IDLE"]: "",
+	["PENDING"]: "Pending",
+	["RUNNING"]: "Running",
+	["COMPLETE"]: "Complete",
+	["ERROR"]: "Failed"
+};
+var SPREADSHEET_CELL_TYPE_TO_EDITOR_KIND_MAP = {
+	["TEXT"]: SpreadsheetEditorKind.TEXT,
+	["NUMBER"]: SpreadsheetEditorKind.NUMBER,
+	["BOOLEAN"]: SpreadsheetEditorKind.BOOLEAN,
+	["ENUM"]: SpreadsheetEditorKind.ENUM,
+	["DATE"]: SpreadsheetEditorKind.DATE
+};
+/** A cell's display: the status dot, then the value. */
+var CellContent = /*#__PURE__*/ styled("div")({
+	name: "CellContent",
+	class: "gx-InfiniteSpreadsheet-CellContent-c19rlwda",
+	propsAsIs: false
+});
+/** An ENUM value: the option's icon and label. */
+var EnumValue = /*#__PURE__*/ styled("span")({
+	name: "EnumValue",
+	class: "gx-InfiniteSpreadsheet-EnumValue-e1pc8s7a",
+	propsAsIs: false
+});
+/** The icon-to-label gap of an ENUM value: SelectInput's gap at the editor's rung. */
+var INFINITE_SPREADSHEET_SIZE_TO_ENUM_GAP_CSS_MAP = {
+	["SMALL"]: "gx-InfiniteSpreadsheet-SMALL-ssqy8uo",
+	["MEDIUM"]: "gx-InfiniteSpreadsheet-MEDIUM-m1lgem46",
+	["LARGE"]: "gx-InfiniteSpreadsheet-LARGE-lyl2afm"
+};
+/** The add-row row: after the last row, its button pinned to the visible left edge. */
+var AddRow = /*#__PURE__*/ styled("tr")({
+	name: "AddRow",
+	class: "gx-InfiniteSpreadsheet-AddRow-a1ral1dk",
+	propsAsIs: false
+});
+var AddRowCell = /*#__PURE__*/ styled("td")({
+	name: "AddRowCell",
+	class: "gx-InfiniteSpreadsheet-AddRowCell-agvcmj7",
+	propsAsIs: false
+});
+var AddRowViewport = /*#__PURE__*/ styled("div")({
+	name: "AddRowViewport",
+	class: "gx-InfiniteSpreadsheet-AddRowViewport-ackajun",
+	propsAsIs: false
+});
+/** The trailing corner's controls side by side. */
+var CornerControls = /*#__PURE__*/ styled("div")({
+	name: "CornerControls",
+	class: "gx-InfiniteSpreadsheet-CornerControls-c1n4ne6",
+	propsAsIs: false
+});
+/** No focus ring of the browser's own on an unselected cell (the selected outline is the indicator). */
+var CELL_FOCUS_CSS = "gx-InfiniteSpreadsheet-CELL_FOCUS_CSS-cddbf9b";
+/** A cell the user can edit: the 1.x per-cell hover. */
+var CELL_EDITABLE_CSS = "gx-InfiniteSpreadsheet-CELL_EDITABLE_CSS-c1ejud51";
+/** The roving cell while the grid holds focus: the current cell is always visible . */
+var CELL_SELECTED_CSS = "gx-InfiniteSpreadsheet-CELL_SELECTED_CSS-cw8kq87";
+/**
+* The cell being edited: the bare editor fills it inside the same padding as the read-only cell
+* (so the text does not move), above pinned neighbours.
+*/
+var CELL_EDITING_CSS = "gx-InfiniteSpreadsheet-CELL_EDITING_CSS-c1dhzhlk";
+/** The trailing corner, as wide as its header controls (header, footer and body cells). */
+var TRAILING_CSS = "gx-InfiniteSpreadsheet-TRAILING_CSS-tfgc5gq";
+/** Spread on the row-actions trigger: the cell is the tab stop, not the button. */
+var UNTABBABLE = { tabIndex: -1 };
+var DATE_FORMAT_OPTIONS = { dateStyle: "medium" };
+/** Two cell values are the same (dates by time; a TEXT `null` edits as `""`). */
+function isSameValue(type, current, next) {
+	if (current instanceof Date || next instanceof Date) return current instanceof Date && next instanceof Date && current.getTime() === next.getTime();
+	if (type === "TEXT") return Object.is(current ?? "", next ?? "");
+	return Object.is(current, next);
+}
+/** The value of a cell as text, by type (custom `cell` replaces it). */
+function CellDisplay({ column, value, metrics, iconPx, enumGapCss }) {
+	if (column.cellType === "ENUM" && typeof value === "string" && value !== "") {
+		const option = column.options.find((candidate) => candidate.id === value);
+		return /* @__PURE__ */ jsxs(EnumValue, {
+			className: enumGapCss,
+			children: [option?.icon !== void 0 && /* @__PURE__ */ jsx(Icon, {
+				component: option.icon,
+				size: iconPx,
+				variant: IconVariant.SECONDARY
+			}), /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				size: metrics.textSize,
+				lineClamp: 1,
+				shouldTooltipOnOverflow: true,
+				className: CELL_TEXT_CSS,
+				...option === void 0 ? { variant: TextVariant.TERTIARY } : {},
+				children: option?.label ?? value
+			})]
+		});
+	}
+	if (value instanceof Date) return /* @__PURE__ */ jsx(Text, {
+		as: "span",
+		size: metrics.textSize,
+		lineClamp: 1,
+		shouldTooltipOnOverflow: true,
+		isTabular: true,
+		className: CELL_TEXT_CSS,
+		children: new Intl.DateTimeFormat(void 0, DATE_FORMAT_OPTIONS).format(value)
 	});
-	const { canResizeColumn, startResize, resizeByKeyboard, getColumnResizeBounds } = resize;
-	const { getColumnWidth, pinnedOffsets, rowMinWidth } = useTableColumnLayout({
-		columns,
-		columnSizing: resize.columnSizing,
-		rightOffsetBase: actionColumnWidth
+	return /* @__PURE__ */ jsx(TableCellText, {
+		value,
+		textSize: metrics.textSize
 	});
-	const { editingCell, startEditing, commitEditing, cancelEditing } = useSpreadsheetEditing({
-		editingCell: controlledEditingCell,
-		onEditingCellChange
+}
+/** One grid row: a cell per visible column, then the trailing (row actions) cell. */
+var SpreadsheetRow = memo(function SpreadsheetRow({ row, rowIndex, rowId, columns, metrics, size, callbacks, tabStopColumn, hasGridFocus, editingColumnId, editEntry, draftRef, hasRowActions, hasTrailingColumn, isActionsOpen, isBorderless, ariaRowIndex, style }) {
+	const isLoaded = row !== void 0;
+	const editorSizes = {
+		input: INFINITE_SPREADSHEET_SIZE_TO_INPUT_SIZE_MAP[size],
+		select: INFINITE_SPREADSHEET_SIZE_TO_SELECT_INPUT_SIZE_MAP[size],
+		date: INFINITE_SPREADSHEET_SIZE_TO_DATE_INPUT_SIZE_MAP[size],
+		switchInput: INFINITE_SPREADSHEET_SIZE_TO_SWITCH_INPUT_SIZE_MAP[size]
+	};
+	const actionsColumn = columns.length;
+	const actions = hasRowActions && isLoaded && callbacks.getRowActions ? callbacks.getRowActions(row, rowIndex) : null;
+	const cellHandlers = (columnIndex) => ({
+		ref: (element) => callbacks.registerCell(rowIndex, columnIndex, element),
+		tabIndex: tabStopColumn === columnIndex ? 0 : -1,
+		onFocus: (event) => {
+			if (event.currentTarget.contains(event.target)) callbacks.onCellFocus(rowIndex, columnIndex);
+		},
+		onKeyDown: (event) => callbacks.onCellKeyDown(rowIndex, columnIndex, event)
 	});
-	const rowHeight = estimateRowHeight ?? getDensityRowHeightPx(density);
-	const virtualizer = useVirtualizer({
-		count: totalRowCount,
-		getScrollElement: () => scrollContainerRef.current,
-		estimateSize: () => rowHeight,
-		overscan
+	return /* @__PURE__ */ jsxs(TableRow, {
+		role: "row",
+		"aria-rowindex": ariaRowIndex,
+		...isLoaded ? {} : { "aria-busy": true },
+		className: cx(VIRTUAL_ROW_CSS, isBorderless && "gx-TableCore-ROW_NO_BORDER_CSS-rpsswqs"),
+		style,
+		children: [columns.map((resolved, columnIndex) => {
+			const column = resolved.column;
+			const { pin, isPinEdge, cellStyle } = resolved;
+			const isEditing = editingColumnId === column.id;
+			const isEditable = isLoaded && column.isReadOnly !== true;
+			const isSelected = hasGridFocus && tabStopColumn === columnIndex;
+			const handlers = cellHandlers(columnIndex);
+			let content;
+			if (!isLoaded) content = /* @__PURE__ */ jsx(Skeleton, {
+				variant: SkeletonVariant.TEXT,
+				size: metrics.skeletonSize
+			});
+			else if (isEditing) content = /* @__PURE__ */ jsx(SpreadsheetCellEditor, {
+				kind: SPREADSHEET_CELL_TYPE_TO_EDITOR_KIND_MAP[column.cellType],
+				value: column.accessor(row),
+				header: column.header,
+				options: column.cellType === "ENUM" ? column.options : void 0,
+				sizes: editorSizes,
+				entry: editEntry,
+				draftRef,
+				onCommit: callbacks.onCommit,
+				onCancel: callbacks.onCancel,
+				onTab: callbacks.onTab,
+				onPanelOpenChange: callbacks.onPanelOpenChange
+			});
+			else {
+				const value = column.accessor(row);
+				const status = column.getCellStatus?.(row, rowIndex) ?? "IDLE";
+				content = /* @__PURE__ */ jsxs(CellContent, { children: [status !== "IDLE" && /* @__PURE__ */ jsx(Beacon, {
+					size: INFINITE_SPREADSHEET_SIZE_TO_BEACON_SIZE_MAP[size],
+					variant: SPREADSHEET_CELL_STATUS_TO_BEACON_VARIANT_MAP[status],
+					isPulse: status === "RUNNING",
+					ariaLabel: SPREADSHEET_CELL_STATUS_TO_LABEL_MAP[status]
+				}), column.cell ? column.cell({
+					value,
+					row,
+					rowIndex,
+					rowId
+				}) : /* @__PURE__ */ jsx(CellDisplay, {
+					column,
+					value,
+					metrics,
+					iconPx: INFINITE_SPREADSHEET_SIZE_TO_ICON_PX_MAP[size],
+					enumGapCss: INFINITE_SPREADSHEET_SIZE_TO_ENUM_GAP_CSS_MAP[size]
+				})] });
+			}
+			return /* @__PURE__ */ jsx(TableCell, {
+				...handlers,
+				ref: (element) => {
+					handlers.ref(element);
+					if (isEditing) callbacks.registerEditingCell(element);
+				},
+				role: column.isRowHeader === true ? "rowheader" : "gridcell",
+				"aria-colindex": columnIndex + 1,
+				...isEditable ? {} : { "aria-readonly": true },
+				className: cx(COLUMN_ALIGN_TO_CSS_MAP[column.align ?? "left"], pin !== void 0 && PIN_TO_CSS_MAP[pin], pin !== void 0 && isPinEdge && PIN_TO_EDGE_CSS_MAP[pin], CELL_FOCUS_CSS, isEditable && !isEditing && CELL_EDITABLE_CSS, isSelected && CELL_SELECTED_CSS, isEditing && CELL_EDITING_CSS),
+				style: cellStyle,
+				onPointerDown: (event) => callbacks.onCellPointerDown(rowIndex, columnIndex, event.currentTarget),
+				onClick: () => callbacks.onCellClick(rowIndex, columnIndex),
+				onDoubleClick: () => callbacks.onCellDoubleClick(rowIndex, columnIndex),
+				children: content
+			}, column.id);
+		}), hasTrailingColumn && (hasRowActions ? /* @__PURE__ */ jsx(TableCell, {
+			...cellHandlers(actionsColumn),
+			role: "gridcell",
+			"aria-colindex": actionsColumn + 1,
+			className: cx("gx-TableCore-SYNTHETIC_CELL_CSS-s1g01kh5", PIN_TO_CSS_MAP[Side.RIGHT], TRAILING_CSS, CELL_FOCUS_CSS, hasGridFocus && tabStopColumn === actionsColumn && CELL_SELECTED_CSS),
+			children: actions !== null && actions !== void 0 && /* @__PURE__ */ jsx(Menu, {
+				isOpen: isActionsOpen,
+				onOpenChange: (isOpen) => callbacks.onActionsOpenChange(rowId, isOpen),
+				trigger: /* @__PURE__ */ jsx(Button, {
+					icon: DotsThreeIcon,
+					variant: ButtonVariant.TERTIARY,
+					size: metrics.buttonSize,
+					ariaLabel: `Actions for ${callbacks.getRowName(row, rowIndex)}`,
+					...UNTABBABLE
+				}),
+				size: metrics.menuSize,
+				placement: Placement.BOTTOM_END,
+				children: actions
+			})
+		}) : /* @__PURE__ */ jsx(TableCell, {
+			role: "gridcell",
+			"aria-colindex": actionsColumn + 1,
+			"aria-readonly": true,
+			className: cx("gx-TableCore-SYNTHETIC_CELL_CSS-s1g01kh5", PIN_TO_CSS_MAP[Side.RIGHT], TRAILING_CSS)
+		}))]
 	});
-	const virtualRows = virtualizer.getVirtualItems();
-	const virtualTotalSize = virtualizer.getTotalSize();
-	const sentinelRef = useInfiniteScrollSentinel({
-		scrollRef: scrollContainerRef,
-		hasNextPage,
-		isFetchingNextPage,
-		fetchNextPage,
-		rowCount: totalRowCount
+});
+/** `data-*` and `id` 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
+	};
+}
+/** A printable character that starts editing a TEXT / NUMBER cell. */
+var isPrintableKey = (event) => event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
+var SPACE_4 = Number.parseFloat(SPACE[4]);
+var SPACE_8 = Number.parseFloat(SPACE[8]);
+/** The editable grid. */
+var InfiniteSpreadsheetInner = forwardRef(function InfiniteSpreadsheet(props, ref) {
+	const { columns, totalRowCount, getRowData, getRowId, size: sizeProp, isLoading: isLoadingProp, error: errorProp, emptyState, onEndReached, rowActions, onAddRow, onAddColumn, editingCell, onEditingCellChange, columnLayout, defaultColumnLayout, onColumnLayoutChange, canCustomizeColumns: canCustomizeColumnsProp, ariaLabel, id, className, style, ...rest } = props;
+	const error = errorProp === "" ? void 0 : errorProp;
+	const size = sizeProp ?? "MEDIUM";
+	const isLoading = isLoadingProp ?? false;
+	const canCustomizeColumns = canCustomizeColumnsProp ?? false;
+	const rowCount = Math.max(0, Math.floor(totalRowCount));
+	const metrics = INFINITE_SPREADSHEET_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 || onAddColumn !== void 0 || canCustomizeColumns;
+	const cornerButtons = (canCustomizeColumns ? 1 : 0) + (onAddColumn !== void 0 ? 1 : 0);
+	const buttonPx = INFINITE_SPREADSHEET_SIZE_TO_BUTTON_PX_MAP[size];
+	const trailingWidthPx = Math.max(metrics.rowHeightPx, cornerButtons * buttonPx + Math.max(0, cornerButtons - 1) * SPACE_4 + 2 * SPACE_8);
+	const layout = useTableColumnLayout({
+		columns: useMemo(() => columns.map((column) => column.cellType === "NUMBER" && column.align === void 0 ? {
+			...column,
+			align: "right"
+		} : column), [columns]),
+		columnLayout,
+		defaultColumnLayout: defaultColumnLayout ?? {},
+		onColumnLayoutChange,
+		canResizeColumns: true,
+		canCustomizeColumns,
+		leadingCount: 0,
+		hasTrailing: hasTrailingColumn,
+		syntheticWidthPx: trailingWidthPx
 	});
-	const keyboard = useTableKeyboardNavigation({
-		bodyRef,
-		rowCount: totalRowCount,
-		enabled: enableRowFocus,
-		scrollToIndex: useCallback((rowIndex) => virtualizer.scrollToIndex(rowIndex), [virtualizer])
+	const visibleColumns = layout.visibleColumns;
+	const hasFooter = visibleColumns.some(({ column }) => column.footer !== void 0 && column.footer !== null);
+	const columnCount = visibleColumns.length + (hasRowActions ? 1 : 0);
+	const resolveRowId = useCallback((row, index) => getRowId ? getRowId(row, index) : String(index), [getRowId]);
+	const [editing, setEditing] = useControlledState({
+		value: editingCell,
+		defaultValue: null,
+		onChange: onEditingCellChange
 	});
-	/**
-	* Handed to column enrichment actions. Materializing rows is opt-in, so an
-	* action that only needs a count no longer pays for a full scan.
-	*/
-	const rowsContext = useMemo(() => ({
-		totalRowCount,
+	const [editEntry, setEditEntry] = useState({ kind: "select" });
+	const isPanelOpenRef = useRef(false);
+	const draftRef = useRef(null);
+	const editingElementRef = useRef(null);
+	const [openActionsRowId, setOpenActionsRowId] = useState(null);
+	const [hasGridFocus, setHasGridFocus] = useState(false);
+	const virtualizerRef = useRef(null);
+	const navigation = useSpreadsheetCellNavigation({
+		rowCount,
+		columnCount,
+		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)
+	});
+	const editingRowIndex = editing !== null && editing.rowIndex < rowCount ? editing.rowIndex : -1;
+	const getItemKey = useCallback((index) => {
+		const row = getRowData(index);
+		return row === void 0 ? index : resolveRowId(row, index);
+	}, [getRowData, resolveRowId]);
+	const keepIndexes = rowCount > 0 ? [navigation.active.rowIndex] : [];
+	if (editingRowIndex >= 0) keepIndexes.push(editingRowIndex);
+	const virtualizer = useTableVirtualizer({
+		count: rowCount,
+		scrollRef,
+		rowHeightPx: metrics.rowHeightPx,
+		headerHeightPx: metrics.headerHeightPx,
+		footerHeightPx: hasFooter ? metrics.headerHeightPx : 0,
+		getItemKey,
+		keepIndexes
+	});
+	virtualizerRef.current = { scrollToIndex: (index) => virtualizer.scrollToIndex(index, { align: "auto" }) };
+	const [isMounted, setIsMounted] = useState(false);
+	useIsomorphicLayoutEffect(() => setIsMounted(true), []);
+	const latest = {
+		columns,
+		visibleColumns,
 		getRowData,
-		getLoadedRows: () => {
-			const rows = [];
-			for (let index = 0; index < totalRowCount; index += 1) {
-				const row = getRowData(index);
-				if (row !== void 0) rows.push(row);
-			}
-			return rows;
+		resolveRowId,
+		rowActions,
+		editing,
+		setEditing,
+		navigation,
+		hasRowActions
+	};
+	const latestRef = useRef(latest);
+	latestRef.current = latest;
+	const wasSelectedRef = useRef(false);
+	const { startEdit, commitValue, finishEdit, callbacks } = useMemo(() => {
+		const columnAt = (columnIndex) => latestRef.current.visibleColumns[columnIndex]?.column;
+		/** Starts editing a cell (loaded rows, editable columns only). */
+		const startEdit = (rowIndex, columnIndex, entry) => {
+			const column = columnAt(columnIndex);
+			if (column === void 0 || column.isReadOnly === true) return false;
+			if (latestRef.current.getRowData(rowIndex) === void 0) return false;
+			isPanelOpenRef.current = column.cellType === "ENUM" || column.cellType === "DATE";
+			setEditEntry(entry);
+			latestRef.current.setEditing({
+				rowIndex,
+				columnId: column.id
+			});
+			return true;
+		};
+		/** Reports `next` for a cell if it changed. */
+		const commitValue = (rowIndex, columnId, next) => {
+			const column = latestRef.current.columns.find((candidate) => candidate.id === columnId);
+			const row = latestRef.current.getRowData(rowIndex);
+			if (column === void 0 || row === void 0 || column.isReadOnly === true) return;
+			const current = column.accessor(row);
+			if (isSameValue(column.cellType, current, next)) return;
+			column.onCellChange?.(next, row, rowIndex);
+		};
+		/** Ends editing (after any commit) and, unless the press went elsewhere, focuses a cell. */
+		const finishEdit = (focus) => {
+			isPanelOpenRef.current = false;
+			editingElementRef.current = null;
+			latestRef.current.setEditing(null);
+			if (focus !== null) latestRef.current.navigation.focusCell(focus.rowIndex, focus.columnIndex);
+		};
+		return {
+			startEdit,
+			commitValue,
+			finishEdit,
+			callbacks: (() => {
+				const editingTarget = () => {
+					const current = latestRef.current.editing;
+					if (current === null) return null;
+					const columnIndex = latestRef.current.visibleColumns.findIndex((entry) => entry.column.id === current.columnId);
+					return {
+						...current,
+						columnIndex: Math.max(0, columnIndex)
+					};
+				};
+				return {
+					registerCell: (rowIndex, columnIndex, element) => latestRef.current.navigation.registerCell(rowIndex, columnIndex, element),
+					registerEditingCell: (element) => {
+						if (element !== null) editingElementRef.current = element;
+					},
+					onCellFocus: (rowIndex, columnIndex) => latestRef.current.navigation.handleCellFocus(rowIndex, columnIndex),
+					onCellKeyDown: (rowIndex, columnIndex, event) => {
+						const current = latestRef.current;
+						const isActionsCell = current.hasRowActions && columnIndex === current.visibleColumns.length;
+						if (event.target !== event.currentTarget && !isActionsCell) return;
+						const editingNow = current.editing;
+						const column = columnAt(columnIndex);
+						if (editingNow !== null && editingNow.rowIndex === rowIndex && column !== void 0 && editingNow.columnId === column.id) return;
+						if (current.navigation.handleNavigationKey({
+							rowIndex,
+							columnIndex
+						}, event)) return;
+						const row = current.getRowData(rowIndex);
+						const isMenuKey = event.key === "F10" && event.shiftKey || event.key === "ContextMenu";
+						if (row !== void 0 && current.rowActions !== void 0 && (isMenuKey || isActionsCell && (event.key === "Enter" || event.key === " "))) {
+							const actions = current.rowActions(row, rowIndex);
+							if (actions === null || actions === void 0) return;
+							event.preventDefault();
+							setOpenActionsRowId(current.resolveRowId(row, rowIndex));
+							return;
+						}
+						if (column === void 0 || isActionsCell) return;
+						if (event.key === " ") event.preventDefault();
+						if (row === void 0 || column.isReadOnly === true) return;
+						if (event.key === "Enter" || event.key === "F2") {
+							event.preventDefault();
+							startEdit(rowIndex, columnIndex, { kind: "select" });
+						} else if (event.key === " " && column.cellType === "BOOLEAN") commitValue(rowIndex, column.id, column.accessor(row) !== true);
+						else if (isPrintableKey(event) && (column.cellType === "TEXT" || column.cellType === "NUMBER")) {
+							event.preventDefault();
+							startEdit(rowIndex, columnIndex, {
+								kind: "char",
+								char: event.key
+							});
+						}
+					},
+					onCellPointerDown: (rowIndex, columnIndex, element) => {
+						const { active } = latestRef.current.navigation;
+						wasSelectedRef.current = active.rowIndex === rowIndex && active.columnIndex === columnIndex && element.ownerDocument.activeElement === element;
+					},
+					onCellClick: (rowIndex, columnIndex) => {
+						const editingNow = latestRef.current.editing;
+						const column = columnAt(columnIndex);
+						if (editingNow !== null && editingNow.rowIndex === rowIndex && editingNow.columnId === column?.id) return;
+						if (wasSelectedRef.current) startEdit(rowIndex, columnIndex, { kind: "select" });
+						wasSelectedRef.current = false;
+					},
+					onCellDoubleClick: (rowIndex, columnIndex) => {
+						const editingNow = latestRef.current.editing;
+						const column = columnAt(columnIndex);
+						if (editingNow !== null && editingNow.rowIndex === rowIndex && editingNow.columnId === column?.id) return;
+						startEdit(rowIndex, columnIndex, { kind: "select" });
+					},
+					onCommit: (value) => {
+						const target = editingTarget();
+						if (target === null) return;
+						commitValue(target.rowIndex, target.columnId, value);
+						finishEdit({
+							rowIndex: target.rowIndex,
+							columnIndex: target.columnIndex
+						});
+					},
+					onCancel: () => {
+						const target = editingTarget();
+						if (target === null) return;
+						finishEdit({
+							rowIndex: target.rowIndex,
+							columnIndex: target.columnIndex
+						});
+					},
+					onTab: (value, isBackward) => {
+						const target = editingTarget();
+						if (target === null) return;
+						commitValue(target.rowIndex, target.columnId, value);
+						const last = latestRef.current.visibleColumns.length - 1 + (latestRef.current.hasRowActions ? 1 : 0);
+						const next = Math.min(Math.max(target.columnIndex + (isBackward ? -1 : 1), 0), last);
+						finishEdit({
+							rowIndex: target.rowIndex,
+							columnIndex: next
+						});
+					},
+					onPanelOpenChange: (isOpen) => {
+						isPanelOpenRef.current = isOpen;
+					},
+					onActionsOpenChange: (rowId, isOpen) => setOpenActionsRowId((current) => isOpen ? rowId : current === rowId ? null : current),
+					getRowActions: (row, rowIndex) => latestRef.current.rowActions?.(row, rowIndex),
+					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);
+					}
+				};
+			})()
+		};
+	}, []);
+	const isEditing = editing !== null;
+	useEffect(() => {
+		if (!isEditing) return;
+		const handlePointerDown = (event) => {
+			if (isPanelOpenRef.current) return;
+			const element = editingElementRef.current;
+			const target = event.target;
+			if (element !== null && target instanceof Node && element.contains(target)) return;
+			const current = latestRef.current.editing;
+			if (current === null) return;
+			const draft = draftRef.current?.();
+			if (draft !== void 0) commitValue(current.rowIndex, current.columnId, draft);
+			finishEdit(null);
+		};
+		document.addEventListener("pointerdown", handlePointerDown, true);
+		return () => document.removeEventListener("pointerdown", handlePointerDown, true);
+	}, [
+		isEditing,
+		commitValue,
+		finishEdit
+	]);
+	useEffect(() => {
+		if (isEditing) return;
+		const root = scrollRef.current?.parentElement ?? null;
+		if (root === null) return;
+		const active = root.ownerDocument.activeElement;
+		if (active === null || !root.contains(active)) setHasGridFocus(false);
+	}, [isEditing]);
+	const pendingAddRef = useRef(null);
+	useEffect(() => {
+		const before = pendingAddRef.current;
+		if (before === null || rowCount <= before) return;
+		pendingAddRef.current = null;
+		const target = rowCount - 1;
+		const columnIndex = visibleColumns.findIndex(({ column }) => column.isReadOnly !== true);
+		if (columnIndex < 0) return;
+		navigation.focusCell(target, columnIndex);
+		startEdit(target, columnIndex, { kind: "select" });
+	}, [
+		rowCount,
+		visibleColumns,
+		navigation,
+		startEdit
+	]);
+	const handleAddRow = onAddRow ? () => {
+		pendingAddRef.current = rowCount;
+		onAddRow();
+	} : void 0;
+	rootProps.onFocus = () => setHasGridFocus(true);
+	rootProps.onBlur = (event) => {
+		const next = event.relatedTarget;
+		if (next instanceof Node && event.currentTarget.contains(next)) return;
+		setHasGridFocus(false);
+	};
+	const virtualItems = isMounted ? virtualizer.getVirtualItems() : [];
+	const totalSize = isMounted ? virtualizer.getTotalSize() : 0;
+	const showAddRow = handleAddRow !== void 0 && rowCount > 0 && !isLoading;
+	const bodyVariables = { "--gx-table-virtual-height": `${totalSize + (showAddRow ? metrics.rowHeightPx : 0)}px` };
+	const rootVariables = { "--gx-spreadsheet-trailing-width": `${trailingWidthPx}px` };
+	const hasStatusAfter = isLoading || error !== void 0;
+	const scrollMargin = virtualizer.options.scrollMargin;
+	const editingColumnIdAt = (rowIndex) => editing !== null && editing.rowIndex === rowIndex ? editing.columnId : null;
+	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);
 		}
-	}), [totalRowCount, getRowData]);
-	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: "gridcell",
-		children: col.cellLoading ? col.cellLoading() : /* @__PURE__ */ jsx(CellLoadingSkeleton, {})
-	}, col.id));
-	/** Initial load: normal flow, since the body has no virtual height yet. */
-	const renderLoadingRows = () => Array.from({ length: loadingRowCount }).map((_, rowIndex) => /* @__PURE__ */ jsx(TableLoadingRow, {
-		$density: density,
-		$variant: variant,
-		role: "row",
-		"aria-hidden": "true",
-		children: renderLoadingCells()
-	}, `loading-${rowIndex}`));
-	/**
-	* Paging: the body's children are absolutely positioned once virtualization
-	* is active, so these have to be offset past the last row rather than left in
-	* normal flow — otherwise they stack on top of the first visible rows.
-	*/
-	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 trailingLoadingHeight = isFetchingNextPage ? loadingRowCount * rowHeight : 0;
-	const statusAvailableHeight = (height !== void 0 || Boolean(fillHeight)) && viewportHeight !== void 0 ? Math.max(0, viewportHeight - (headerHeight ?? 0)) : void 0;
-	const columnCount = columns.length + (showActionColumn ? 1 : 0);
-	return /* @__PURE__ */ jsx(TableOuterContainer, {
-		$width: width,
-		$height: height,
-		$fillWidth: fillWidth,
-		$fillHeight: fillHeight,
-		children: /* @__PURE__ */ jsxs(TableScrollContainer, {
-			ref: scrollContainerRef,
-			$noLastRowPadding: noLastRowPadding,
-			children: [/* @__PURE__ */ jsxs(StyledTable, {
-				$rowMinWidth: rowMinWidth + actionColumnWidth,
-				role: "grid",
-				"aria-label": ariaLabel,
-				"aria-labelledby": ariaLabelledBy,
-				"aria-rowcount": totalRowCount + (noHeader ? 0 : 1),
-				"aria-colcount": columnCount,
-				children: [!noHeader && /* @__PURE__ */ jsx(TableHead, {
-					ref: headerRef,
-					role: "rowgroup",
-					children: /* @__PURE__ */ jsxs(TableHeaderRow, {
-						role: "row",
-						"aria-rowindex": 1,
-						children: [columns.map((col, columnIndex) => /* @__PURE__ */ jsx(SpreadsheetHeaderCell, {
-							column: col,
-							columnIndex,
-							width: getColumnWidth(col),
-							pinnedOffset: pinnedOffsets.get(col.id),
-							density,
-							variant,
-							rowsContext,
-							isResizable: canResizeColumn(col),
-							isResizing: resize.resizingColumnId === col.id,
-							resizeBounds: getColumnResizeBounds(col.id),
-							onResizeStart: startResize,
-							onResizeKeyDown: resizeByKeyboard
-						}, col.id)), showActionColumn && /* @__PURE__ */ jsx(ActionColumnHeaderCell, {
-							$variant: variant,
-							role: "columnheader",
-							"aria-colindex": columnCount,
-							"aria-label": addColumnAriaLabel,
-							children: onAddColumn && /* @__PURE__ */ jsx(Button, {
-								icon: PlusIcon,
-								variant: ButtonVariant.TERTIARY,
-								size: ButtonSize.SMALL,
-								ariaLabel: addColumnAriaLabel,
-								onClick: onAddColumn
-							})
-						})]
-					})
-				}), /* @__PURE__ */ jsxs(TableBody, {
-					ref: bodyRef,
-					role: "rowgroup",
-					$virtualHeight: showRows ? virtualTotalSize + trailingLoadingHeight : void 0,
-					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
-						}),
-						showRows && virtualRows.map((virtualRow) => {
-							const rowData = getRowData(virtualRow.index);
-							const rowKey = rowData && getRowId ? getRowId(rowData, virtualRow.index) : String(virtualRow.index);
-							return /* @__PURE__ */ jsx(SpreadsheetRow, {
-								rowData,
-								rowIndex: virtualRow.index,
-								translateY: virtualRow.start,
-								rowHeight,
-								isLastRow: noLastRowBorder && virtualRow.index === totalRowCount - 1,
-								density,
-								variant,
-								columns,
-								pinnedOffsets,
-								getColumnWidth,
-								editingCell,
-								onStartEditing: startEditing,
-								onCommitEditing: commitEditing,
-								onCancelEditing: cancelEditing,
-								rowActions,
-								rowActionsAriaLabel: getRowActionsAriaLabel?.(virtualRow.index),
-								showActionColumn,
-								tabIndex: keyboard.getRowTabIndex(virtualRow.index),
-								onFocus: enableRowFocus ? () => keyboard.onRowFocus(virtualRow.index) : void 0,
-								onKeyDown: enableRowFocus ? (event) => keyboard.onRowKeyDown(virtualRow.index, event) : void 0
-							}, rowKey);
-						}),
-						isFetchingNextPage && showRows && renderTrailingLoadingRows(virtualTotalSize)
-					]
-				})]
-			}), /* @__PURE__ */ jsx(InfiniteScrollSentinel, {
-				ref: sentinelRef,
-				"aria-hidden": "true"
-			})]
-		})
+		return cached;
+	};
+	const defaultEmptyState = /* @__PURE__ */ jsx(EmptyState, {
+		header: "No rows",
+		size: metrics.emptyStateSize,
+		role: "status",
+		...handleAddRow ? { actions: /* @__PURE__ */ jsx(Button, {
+			label: "Add row",
+			icon: PlusIcon,
+			variant: ButtonVariant.SECONDARY,
+			size: metrics.buttonSize,
+			onClick: handleAddRow
+		}) } : {}
 	});
-}
+	return /* @__PURE__ */ jsxs(TableFrame, {
+		metrics,
+		columnLayout: layout,
+		leadingHeaders: [],
+		trailingHeader: hasTrailingColumn ? /* @__PURE__ */ jsxs(CornerControls, { children: [canCustomizeColumns && /* @__PURE__ */ jsx(TableColumnsMenu, {
+			entries: layout.menuEntries,
+			metrics,
+			onToggle: (columnId, isVisible) => layout.setColumnHidden(columnId, !isVisible),
+			onReset: layout.resetLayout
+		}), onAddColumn !== void 0 && /* @__PURE__ */ jsx(Button, {
+			icon: PlusIcon,
+			variant: ButtonVariant.TERTIARY,
+			size: metrics.buttonSize,
+			ariaLabel: "Add column",
+			onClick: onAddColumn
+		})] }) : void 0,
+		hasTrailingColumn,
+		sort: null,
+		onSortPress: noop,
+		canCustomizeColumns,
+		rowCount,
+		isLoading,
+		error,
+		emptyState: emptyState ?? defaultEmptyState,
+		onEndReached,
+		role: "grid",
+		ariaLabel,
+		tableAria,
+		isMultiselectable: false,
+		ariaRowCount: rowCount + 1 + (showAddRow ? 1 : 0) + (hasFooter ? 1 : 0),
+		rootRef: ref,
+		scrollRef,
+		rootProps,
+		className,
+		style: {
+			...rootVariables,
+			...style
+		},
+		bodyClassName: VIRTUAL_BODY_CSS,
+		bodyStyle: bodyVariables,
+		trailingClassName: TRAILING_CSS,
+		children: [virtualItems.map((item) => {
+			const row = getRowData(item.index);
+			const rowId = row === void 0 ? `pending-${item.index}` : resolveRowId(row, item.index);
+			return /* @__PURE__ */ jsx(SpreadsheetRow, {
+				row,
+				rowIndex: item.index,
+				rowId,
+				columns: visibleColumns,
+				metrics,
+				size,
+				callbacks,
+				tabStopColumn: navigation.active.rowIndex === item.index ? navigation.active.columnIndex : -1,
+				hasGridFocus,
+				editingColumnId: editingColumnIdAt(item.index),
+				editEntry,
+				draftRef,
+				hasRowActions,
+				hasTrailingColumn,
+				isActionsOpen: openActionsRowId === rowId,
+				isBorderless: item.index === rowCount - 1 && !hasStatusAfter && !showAddRow,
+				ariaRowIndex: item.index + 2,
+				style: startStyle(item.start - scrollMargin)
+			}, rowId);
+		}), showAddRow && isMounted && /* @__PURE__ */ jsx(AddRow, {
+			role: "row",
+			"aria-rowindex": rowCount + 2,
+			className: "gx-TableCore-VIRTUAL_ROW_CSS-vb9km4t",
+			style: startStyle(totalSize),
+			children: /* @__PURE__ */ jsx(AddRowCell, {
+				role: "gridcell",
+				"aria-colindex": 1,
+				"aria-colspan": columnCount + (hasTrailingColumn && !hasRowActions ? 1 : 0),
+				children: /* @__PURE__ */ jsx(AddRowViewport, { children: /* @__PURE__ */ jsx(Button, {
+					variant: ButtonVariant.TERTIARY,
+					icon: PlusIcon,
+					label: "Add row",
+					size: metrics.buttonSize,
+					onClick: handleAddRow
+				}) })
+			})
+		})]
+	});
+});
+InfiniteSpreadsheetInner.displayName = "InfiniteSpreadsheet";
+var noop = () => {};
+/** The editable grid. */
+var InfiniteSpreadsheet = InfiniteSpreadsheetInner;
 //#endregion
-export { CellEnrichmentStatus, ColumnAlign, ColumnPin, ColumnResizeMode, SpreadsheetCellType, TableDensity, TableVariant, InfiniteSpreadsheet as default };
+export { InfiniteSpreadsheetSize, SpreadsheetCellStatus, SpreadsheetCellType, InfiniteSpreadsheet as default };