@galaxy-io/dls 1.6.1 → 2.0.1

package/dist/table/useSpreadsheetCellNavigation.js

@@ -0,0 +1,141 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/table/useSpreadsheetCellNavigation.ts
+/**
+* @internal Shared by InfiniteSpreadsheet; apps use InfiniteSpreadsheet.
+*
+* Roving cell focus over a spreadsheet body (the WAI-ARIA grid pattern): one cell is the tab stop
+* (`tabIndex` 0), every other -1. Arrow keys move one cell, Home / End go to the ends of the row,
+* Ctrl/Cmd+Home / End to the first / last cell of the grid, PageUp / PageDown one visible page.
+* A move scrolls the row into the virtual window first (`scrollToIndex`), focuses the cell once it
+* is mounted and scrolls it into view sideways. A cell element replaced in place (a skeleton row
+* whose data arrives, a row re-keyed by id) takes the focus back on mount.
+*/
+/** Frames to wait for a virtual row to mount after `scrollToIndex`. */
+var MOUNT_RETRY_FRAMES = 6;
+var keyOf = (rowIndex, columnIndex) => `${rowIndex}:${columnIndex}`;
+/** @internal Roving focus over the cells of a spreadsheet body. */
+function useSpreadsheetCellNavigation({ rowCount, columnCount, getPageSize, scrollToIndex }) {
+	const [tabStop, setTabStop] = useState({
+		rowIndex: 0,
+		columnIndex: 0
+	});
+	const active = {
+		rowIndex: rowCount === 0 ? 0 : Math.min(tabStop.rowIndex, rowCount - 1),
+		columnIndex: columnCount === 0 ? 0 : Math.min(tabStop.columnIndex, columnCount - 1)
+	};
+	const cellsRef = useRef(/* @__PURE__ */ new Map());
+	const focusedKeyRef = useRef(null);
+	const frameRef = useRef(null);
+	const optionsRef = useRef({
+		rowCount,
+		columnCount,
+		getPageSize,
+		scrollToIndex
+	});
+	optionsRef.current = {
+		rowCount,
+		columnCount,
+		getPageSize,
+		scrollToIndex
+	};
+	useEffect(() => () => {
+		if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
+	}, []);
+	const registerCell = useCallback((rowIndex, columnIndex, element) => {
+		const key = keyOf(rowIndex, columnIndex);
+		const cells = cellsRef.current;
+		if (element === null) {
+			if (!cells.get(key)?.isConnected) cells.delete(key);
+			return;
+		}
+		const previous = cells.get(key);
+		cells.set(key, element);
+		const activeElement = element.ownerDocument.activeElement;
+		const isFocusLost = activeElement === null || activeElement === element.ownerDocument.body || !activeElement.isConnected;
+		if (previous !== void 0 && previous !== element && !previous.isConnected && focusedKeyRef.current === key && isFocusLost) element.focus({ preventScroll: true });
+	}, []);
+	const focusCell = useCallback((rowIndex, columnIndex) => {
+		setTabStop({
+			rowIndex,
+			columnIndex
+		});
+		optionsRef.current.scrollToIndex(rowIndex);
+		if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
+		let attempts = 0;
+		const tryFocus = () => {
+			frameRef.current = null;
+			const element = cellsRef.current.get(keyOf(rowIndex, columnIndex));
+			if (element?.isConnected) {
+				focusedKeyRef.current = keyOf(rowIndex, columnIndex);
+				element.focus({ preventScroll: true });
+				element.scrollIntoView({
+					block: "nearest",
+					inline: "nearest"
+				});
+				return;
+			}
+			attempts += 1;
+			if (attempts <= MOUNT_RETRY_FRAMES) frameRef.current = requestAnimationFrame(tryFocus);
+		};
+		tryFocus();
+	}, []);
+	return {
+		active,
+		registerCell,
+		focusCell,
+		handleCellFocus: useCallback((rowIndex, columnIndex) => {
+			focusedKeyRef.current = keyOf(rowIndex, columnIndex);
+			setTabStop((current) => current.rowIndex === rowIndex && current.columnIndex === columnIndex ? current : {
+				rowIndex,
+				columnIndex
+			});
+		}, []),
+		handleNavigationKey: useCallback((from, event) => {
+			const { rowCount: rows, columnCount: columns, getPageSize: pageSize } = optionsRef.current;
+			if (rows === 0 || columns === 0) return false;
+			const isCommand = event.ctrlKey || event.metaKey;
+			if (event.altKey) return false;
+			let { rowIndex, columnIndex } = from;
+			switch (event.key) {
+				case "ArrowDown":
+					if (isCommand) return false;
+					rowIndex += 1;
+					break;
+				case "ArrowUp":
+					if (isCommand) return false;
+					rowIndex -= 1;
+					break;
+				case "ArrowRight":
+					if (isCommand) return false;
+					columnIndex += 1;
+					break;
+				case "ArrowLeft":
+					if (isCommand) return false;
+					columnIndex -= 1;
+					break;
+				case "Home":
+					columnIndex = 0;
+					if (isCommand) rowIndex = 0;
+					break;
+				case "End":
+					columnIndex = columns - 1;
+					if (isCommand) rowIndex = rows - 1;
+					break;
+				case "PageDown":
+					if (isCommand) return false;
+					rowIndex += Math.max(1, pageSize());
+					break;
+				case "PageUp":
+					if (isCommand) return false;
+					rowIndex -= Math.max(1, pageSize());
+					break;
+				default: return false;
+			}
+			event.preventDefault();
+			focusCell(Math.min(Math.max(rowIndex, 0), rows - 1), Math.min(Math.max(columnIndex, 0), columns - 1));
+			return true;
+		}, [focusCell])
+	};
+}
+//#endregion
+export { useSpreadsheetCellNavigation };

package/dist/table/useTableColumnLayout.d.ts

@@ -1,28 +1,93 @@
-import { type ColumnDef, type ColumnSizingState } from "./types";
-export interface TableColumnLayout<TData> {
-    /**
-     * Resolved width for a column, or `undefined` when the column is flexible
-     * and should share the leftover space.
-     */
-    getColumnWidth: (column: ColumnDef<TData, unknown>) => number | undefined;
-    /** Sticky offset in pixels, keyed by column id, for pinned columns only. */
-    pinnedOffsets: Map<string, number>;
-    /** Sum of every column's resolved width — the table's minimum content width. */
-    rowMinWidth: number;
-}
-interface UseTableColumnLayoutOptions<TData> {
-    columns: ColumnDef<TData, unknown>[];
-    /** Widths produced by resizing; they win over the column's declared `size`. */
-    columnSizing?: ColumnSizingState;
-    /** Reserved space at the trailing edge, ahead of any right-pinned columns. */
-    rightOffsetBase?: number;
-}
 /**
- * Derives column widths, sticky offsets for pinned columns, and the row's
- * minimum content width from plain column definitions.
+ * @internal Shared by the table components; apps use InfiniteTable, VirtualizedInfiniteTable or
+ * InfiniteSpreadsheet.
  *
- * Deliberately independent of any TanStack table instance so the virtualized
- * table — which has none — shares exactly the same layout maths.
+ * Column arrangement: the `columnLayout` value triple, the visible columns in display order
+ * (grouped left-pinned, unpinned, right-pinned), resolved widths and pinned offsets, the column
+ * custom properties written on the table root, measured header widths, and the resize / move /
+ * hide / reset actions. Every action builds the next full `TableColumnLayout` and reports it.
  */
-export declare function useTableColumnLayout<TData>({ columns, columnSizing, rightOffsetBase, }: UseTableColumnLayoutOptions<TData>): TableColumnLayout<TData>;
-export {};
+import { type CSSProperties } from "react";
+import type { TableColumn, TableColumnLayout, TableColumnPin } from "./types.js";
+/** @internal A visible column with everything the parts need to lay it out. */
+export interface TableResolvedColumn<TData> {
+    /** The app's column definition. */
+    column: TableColumn<TData>;
+    /** Position among the visible columns, from 0: the `<n>` of its custom properties. */
+    position: number;
+    /** Fixed width in pixels, or `undefined` for a column that shares the leftover space. */
+    width: number | undefined;
+    /** Smallest width in pixels. */
+    minWidth: number;
+    /** Largest resize width in pixels. */
+    maxWidth: number;
+    /** The pinned side, if any. */
+    pin: TableColumnPin | undefined;
+    /** Last left-pinned or first right-pinned data column: draws the edge hairline. */
+    isPinEdge: boolean;
+    /** The user can resize it. */
+    canResize: boolean;
+    /** The user can hide it from the Columns menu. */
+    canHide: boolean;
+    /** Per-cell style: points the cell at its column's custom properties. */
+    cellStyle: CSSProperties;
+}
+/** @internal One row of the Columns menu. */
+export interface TableColumnsMenuEntry {
+    /** Column id. */
+    id: string;
+    /** Column header. */
+    header: string;
+    /** Shown in the table. */
+    isVisible: boolean;
+    /** Why it cannot be toggled, if it cannot. */
+    disabledReason: string | undefined;
+}
+/** @internal Options for `useTableColumnLayout`. */
+export interface UseTableColumnLayoutOptions<TData> {
+    /** The columns in their default order. */
+    columns: TableColumn<TData>[];
+    /** Controlled arrangement. */
+    columnLayout: TableColumnLayout | undefined;
+    /** Initial arrangement while uncontrolled. */
+    defaultColumnLayout: TableColumnLayout;
+    /** Called with the full next arrangement. */
+    onColumnLayoutChange: ((columnLayout: TableColumnLayout) => void) | undefined;
+    /** The table's `canResizeColumns`. */
+    canResizeColumns: boolean;
+    /** The table's `canCustomizeColumns`. */
+    canCustomizeColumns: boolean;
+    /** Number of leading synthetic columns (select, expand). */
+    leadingCount: number;
+    /** A trailing synthetic column (row actions / Columns corner) is shown. */
+    hasTrailing: boolean;
+    /** Width of a synthetic column, in pixels (the row height). */
+    syntheticWidthPx: number;
+}
+/** @internal What `useTableColumnLayout` returns. */
+export interface TableColumnLayoutResult<TData> {
+    /** The current arrangement. */
+    layout: TableColumnLayout;
+    /** Visible columns in display order. */
+    visibleColumns: TableResolvedColumn<TData>[];
+    /** Every column in display order with its visibility, for the Columns menu. */
+    menuEntries: TableColumnsMenuEntry[];
+    /** Custom properties for the table root: per-column flex, min, max and pinned offset, and the table min width. */
+    variables: Record<`--gx-${string}`, string>;
+    /** Width of a resizable column for the resize handle: its resolved or measured width. */
+    getColumnWidth: (id: string) => number;
+    /** Registers a header cell for width measurement (flexible columns that can resize). */
+    registerHeaderCell: (id: string, element: HTMLElement | null) => void;
+    /** Sets a column's width (resize). */
+    resizeColumn: (id: string, width: number) => void;
+    /** Moves a column to before `beforeId` among the unpinned columns (`null`: to the end). */
+    moveColumnBefore: (id: string, beforeId: string | null) => void;
+    /** Moves a column one place within its group; returns its new 1-based position, or `null` when it cannot move. */
+    moveColumnBy: (id: string, delta: -1 | 1) => number | null;
+    /** Shows or hides a column. */
+    setColumnHidden: (id: string, isHidden: boolean) => void;
+    /** Back to the columns as defined (`{}`). */
+    resetLayout: () => void;
+}
+/** Column arrangement state and the column custom properties. */
+export declare function useTableColumnLayout<TData>({ columns, columnLayout, defaultColumnLayout, onColumnLayoutChange, canResizeColumns, canCustomizeColumns, leadingCount, hasTrailing, syntheticWidthPx, }: UseTableColumnLayoutOptions<TData>): TableColumnLayoutResult<TData>;

package/dist/table/useTableColumnLayout.js

@@ -1,62 +1,267 @@
-import { ColumnPin } from "./types.js";
-import "./utils.js";
-import { useEffect, useMemo } from "react";
+import { Side } from "../theme/enums.js";
+import { useControlledState } from "../hooks/useControlledState.js";
+import { isDevelopment } from "./TableCore.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 //#region src/table/useTableColumnLayout.ts
-function resolveColumnWidth(column, columnSizing) {
-	const override = columnSizing?.[column.id];
-	if (override !== void 0) return override;
-	if (column.size !== void 0) return column.size;
-	if (column.pin) return column.minSize ?? 150;
-}
 /**
-* Derives column widths, sticky offsets for pinned columns, and the row's
-* minimum content width from plain column definitions.
+* @internal Shared by the table components; apps use InfiniteTable, VirtualizedInfiniteTable or
+* InfiniteSpreadsheet.
 *
-* Deliberately independent of any TanStack table instance so the virtualized
-* table — which has none — shares exactly the same layout maths.
+* Column arrangement: the `columnLayout` value triple, the visible columns in display order
+* (grouped left-pinned, unpinned, right-pinned), resolved widths and pinned offsets, the column
+* custom properties written on the table root, measured header widths, and the resize / move /
+* hide / reset actions. Every action builds the next full `TableColumnLayout` and reports it.
 */
-function useTableColumnLayout({ columns, columnSizing, rightOffsetBase = 0 }) {
-	const layout = useMemo(() => {
-		const widths = /* @__PURE__ */ new Map();
-		let rowMinWidth = 0;
-		columns.forEach((column) => {
-			const width = resolveColumnWidth(column, columnSizing);
-			widths.set(column.id, width);
-			rowMinWidth += width ?? column.minSize ?? 0;
-		});
-		const pinnedOffsets = /* @__PURE__ */ new Map();
-		let leftOffset = 0;
-		columns.forEach((column) => {
-			if (column.pin !== ColumnPin.LEFT) return;
-			pinnedOffsets.set(column.id, leftOffset);
-			leftOffset += widths.get(column.id) ?? 150;
-		});
-		let rightOffset = rightOffsetBase;
-		[...columns].reverse().forEach((column) => {
-			if (column.pin !== ColumnPin.RIGHT) return;
-			pinnedOffsets.set(column.id, rightOffset);
-			rightOffset += widths.get(column.id) ?? 150;
+/** Column ids in display order: `order` first (unknown ids dropped), the rest in `columns` order. */
+function resolveOrder(columns, order) {
+	const known = new Map(columns.map((column) => [column.id, column]));
+	const seen = /* @__PURE__ */ new Set();
+	const result = [];
+	for (const id of order ?? []) {
+		const column = known.get(id);
+		if (column === void 0 || seen.has(id)) continue;
+		seen.add(id);
+		result.push(column);
+	}
+	for (const column of columns) if (!seen.has(column.id)) result.push(column);
+	return result;
+}
+/** Pin group of a column: 0 left, 1 unpinned, 2 right. */
+function pinGroup(pin) {
+	if (pin === Side.LEFT) return 0;
+	if (pin === Side.RIGHT) return 2;
+	return 1;
+}
+/** Column arrangement state and the column custom properties. */
+function useTableColumnLayout({ columns, columnLayout, defaultColumnLayout, onColumnLayoutChange, canResizeColumns, canCustomizeColumns, leadingCount, hasTrailing, syntheticWidthPx }) {
+	const [layout, setLayout] = useControlledState({
+		value: columnLayout,
+		defaultValue: defaultColumnLayout,
+		onChange: onColumnLayoutChange
+	});
+	const layoutRef = useRef(layout);
+	layoutRef.current = layout;
+	const columnsRef = useRef(columns);
+	columnsRef.current = columns;
+	const ordered = useMemo(() => resolveOrder(columns, layout.order), [columns, layout.order]);
+	const hiddenKey = (layout.hiddenIds ?? []).join("\0");
+	const visibleColumns = useMemo(() => {
+		const hidden = new Set(hiddenKey === "" ? [] : hiddenKey.split("\0"));
+		const visible = ordered.filter((column) => !hidden.has(column.id)).sort((a, b) => pinGroup(a.pin) - pinGroup(b.pin));
+		const lastLeft = visible.filter((column) => column.pin === Side.LEFT).at(-1);
+		const firstRight = visible.find((column) => column.pin === Side.RIGHT);
+		return visible.map((column, position) => {
+			const minWidth = column.minWidth ?? 60;
+			const maxWidth = column.maxWidth ?? 800;
+			const pin = column.pin;
+			const variable = (part) => `var(--gx-table-col-${position}-${part})`;
+			const cellStyle = {
+				"--gx-table-cell-flex": variable("flex"),
+				"--gx-table-cell-min-width": variable("min"),
+				"--gx-table-cell-max-width": variable("max")
+			};
+			if (pin !== void 0) cellStyle["--gx-table-cell-offset"] = variable("offset");
+			return {
+				column,
+				position,
+				width: void 0,
+				minWidth,
+				maxWidth,
+				pin,
+				isPinEdge: column === lastLeft || column === firstRight,
+				canResize: column.canResize ?? canResizeColumns,
+				canHide: column.canHide ?? canCustomizeColumns,
+				cellStyle
+			};
 		});
-		return {
-			widths,
-			pinnedOffsets,
-			rowMinWidth
-		};
 	}, [
-		columns,
-		columnSizing,
-		rightOffsetBase
+		ordered,
+		hiddenKey,
+		canResizeColumns,
+		canCustomizeColumns
 	]);
-	const unsizedPinnedColumnIds = useMemo(() => columns.filter((column) => column.pin && column.size === void 0 && column.minSize === void 0).map((column) => column.id), [columns]);
+	const widths = layout.widths;
+	const resolvedWidths = useMemo(() => {
+		const result = /* @__PURE__ */ new Map();
+		for (const { column, pin, minWidth, maxWidth } of visibleColumns) {
+			const own = widths?.[column.id] ?? column.width;
+			if (own !== void 0) result.set(column.id, Math.min(Math.max(own, minWidth), maxWidth));
+			else if (pin !== void 0) result.set(column.id, 150);
+			else result.set(column.id, void 0);
+		}
+		return result;
+	}, [visibleColumns, widths]);
+	const warnedRef = useRef(/* @__PURE__ */ new Set());
 	useEffect(() => {
-		if (unsizedPinnedColumnIds.length === 0) return;
-		console.warn(`[InfiniteTable] Pinned columns need an explicit \`size\` so their sticky offset is correct. Falling back to 150px for: ${unsizedPinnedColumnIds.join(", ")}.`);
-	}, [unsizedPinnedColumnIds]);
-	const { widths, pinnedOffsets, rowMinWidth } = layout;
+		if (!isDevelopment()) return;
+		for (const { column, pin } of visibleColumns) {
+			if (pin === void 0 || column.width !== void 0 || warnedRef.current.has(column.id)) continue;
+			warnedRef.current.add(column.id);
+			console.warn(`[@galaxy-io/dls] Table column "${column.id}" is pinned without a \`width\`; it falls back to 150px.`);
+		}
+	}, [visibleColumns]);
+	const variables = useMemo(() => {
+		const result = {};
+		let minTotal = (leadingCount + (hasTrailing ? 1 : 0)) * syntheticWidthPx;
+		let leftOffset = leadingCount * syntheticWidthPx;
+		const rightColumns = [];
+		for (const resolved of visibleColumns) {
+			const { column, position, minWidth, pin } = resolved;
+			const width = resolvedWidths.get(column.id);
+			const prefix = `--gx-table-col-${position}`;
+			if (width !== void 0) {
+				result[`${prefix}-flex`] = `0 0 ${width}px`;
+				result[`${prefix}-min`] = `${width}px`;
+				result[`${prefix}-max`] = `${width}px`;
+				minTotal += width;
+			} else {
+				result[`${prefix}-flex`] = "1 1 0px";
+				result[`${prefix}-min`] = `${minWidth}px`;
+				result[`${prefix}-max`] = "none";
+				minTotal += minWidth;
+			}
+			if (pin === Side.LEFT) {
+				result[`${prefix}-offset`] = `${leftOffset}px`;
+				leftOffset += width ?? 150;
+			} else if (pin === Side.RIGHT) rightColumns.push(resolved);
+		}
+		let rightOffset = hasTrailing ? syntheticWidthPx : 0;
+		for (const { column, position } of [...rightColumns].reverse()) {
+			result[`--gx-table-col-${position}-offset`] = `${rightOffset}px`;
+			rightOffset += resolvedWidths.get(column.id) ?? 150;
+		}
+		result["--gx-table-min-width"] = `${minTotal}px`;
+		return result;
+	}, [
+		visibleColumns,
+		resolvedWidths,
+		leadingCount,
+		hasTrailing,
+		syntheticWidthPx
+	]);
+	const menuEntries = useMemo(() => {
+		const hidden = new Set(hiddenKey === "" ? [] : hiddenKey.split("\0"));
+		const hideable = ordered.filter((column) => !hidden.has(column.id) && (column.canHide ?? canCustomizeColumns));
+		return ordered.map((column) => {
+			const isVisible = !hidden.has(column.id);
+			const canHide = column.canHide ?? canCustomizeColumns;
+			let disabledReason;
+			if (!canHide) disabledReason = "Always shown";
+			else if (isVisible && hideable.length === 1) disabledReason = "At least one column stays visible";
+			return {
+				id: column.id,
+				header: column.header,
+				isVisible,
+				disabledReason
+			};
+		});
+	}, [
+		ordered,
+		hiddenKey,
+		canCustomizeColumns
+	]);
+	const [measured, setMeasured] = useState({});
+	const headerCellsRef = useRef(/* @__PURE__ */ new Map());
+	const observerRef = useRef(null);
+	const measure = useCallback((id, element) => {
+		const width = Math.round(element.getBoundingClientRect().width);
+		setMeasured((current) => current[id] === width ? current : {
+			...current,
+			[id]: width
+		});
+	}, []);
+	const registerHeaderCell = useCallback((id, element) => {
+		const cells = headerCellsRef.current;
+		const previous = cells.get(id);
+		if (previous === element) return;
+		if (previous !== void 0) observerRef.current?.unobserve(previous);
+		if (element === null) {
+			cells.delete(id);
+			return;
+		}
+		cells.set(id, element);
+		if (typeof ResizeObserver === "undefined") {
+			measure(id, element);
+			return;
+		}
+		if (observerRef.current === null) observerRef.current = new ResizeObserver((entries) => {
+			for (const entry of entries) for (const [cellId, cell] of headerCellsRef.current) if (cell === entry.target) measure(cellId, cell);
+		});
+		observerRef.current.observe(element);
+	}, [measure]);
+	useEffect(() => () => observerRef.current?.disconnect(), []);
+	const getColumnWidth = useCallback((id) => resolvedWidths.get(id) ?? measured[id] ?? 60, [resolvedWidths, measured]);
+	const resizeColumn = useCallback((id, width) => {
+		const current = layoutRef.current;
+		setLayout({
+			...current,
+			widths: {
+				...current.widths,
+				[id]: width
+			}
+		});
+	}, [setLayout]);
+	/** The full display order of every column, as ids. */
+	const fullOrder = useCallback(() => resolveOrder(columnsRef.current, layoutRef.current.order).map((column) => column.id), []);
+	const moveColumnBefore = useCallback((id, beforeId) => {
+		if (id === beforeId) return;
+		const order = fullOrder().filter((entry) => entry !== id);
+		const hidden = new Set(layoutRef.current.hiddenIds ?? []);
+		let index;
+		if (beforeId === null) {
+			const lastUnpinned = [...order].reverse().find((entry) => {
+				const column = columnsRef.current.find((candidate) => candidate.id === entry);
+				return column !== void 0 && column.pin === void 0 && !hidden.has(entry);
+			});
+			index = lastUnpinned === void 0 ? order.length : order.indexOf(lastUnpinned) + 1;
+		} else {
+			index = order.indexOf(beforeId);
+			if (index === -1) index = order.length;
+		}
+		order.splice(index, 0, id);
+		if (fullOrder().every((entry, i) => entry === order[i])) return;
+		setLayout({
+			...layoutRef.current,
+			order
+		});
+	}, [fullOrder, setLayout]);
+	const visibleRef = useRef(visibleColumns);
+	visibleRef.current = visibleColumns;
 	return {
-		getColumnWidth: useMemo(() => (column) => widths.get(column.id), [widths]),
-		pinnedOffsets,
-		rowMinWidth
+		layout,
+		visibleColumns,
+		menuEntries,
+		variables,
+		getColumnWidth,
+		registerHeaderCell,
+		resizeColumn,
+		moveColumnBefore,
+		moveColumnBy: useCallback((id, delta) => {
+			const visible = visibleRef.current;
+			const self = visible.find((entry) => entry.column.id === id);
+			if (self === void 0) return null;
+			const group = visible.filter((entry) => pinGroup(entry.pin) === pinGroup(self.pin));
+			const target = group[group.indexOf(self) + delta];
+			if (target === void 0) return null;
+			const order = fullOrder().filter((entry) => entry !== id);
+			const targetIndex = order.indexOf(target.column.id);
+			order.splice(delta === 1 ? targetIndex + 1 : targetIndex, 0, id);
+			setLayout({
+				...layoutRef.current,
+				order
+			});
+			return self.position + delta + 1;
+		}, [fullOrder, setLayout]),
+		setColumnHidden: useCallback((id, isHidden) => {
+			const current = layoutRef.current;
+			const hidden = (current.hiddenIds ?? []).filter((entry) => entry !== id);
+			if (isHidden) hidden.push(id);
+			setLayout({
+				...current,
+				hiddenIds: hidden
+			});
+		}, [setLayout]),
+		resetLayout: useCallback(() => setLayout({}), [setLayout])
 	};
 }
 //#endregion

package/dist/table/useTableKeyboardNavigation.d.ts

@@ -1,25 +1,36 @@
-/** Body rows carry this attribute so focus can be moved without a ref per row. */
-export declare const ROW_INDEX_ATTRIBUTE = "data-row-index";
-interface UseTableKeyboardNavigationOptions {
-    /** The element containing the body rows. */
-    bodyRef: React.RefObject<HTMLElement | null>;
+/**
+ * @internal Shared by the table components; apps use InfiniteTable, VirtualizedInfiniteTable or
+ * InfiniteSpreadsheet.
+ *
+ * Roving row focus over a table body: one row is the tab stop (`tabIndex` 0), the rest -1.
+ * ArrowUp / ArrowDown, Home / End and PageUp / PageDown move focus; a virtual body passes
+ * `scrollToIndex` so the target row is scrolled into the window before it is focused. Every other
+ * key (Enter, Space, ArrowLeft / ArrowRight, Shift+F10) goes to the host's `onKeyDown`.
+ */
+import { type KeyboardEvent } from "react";
+/** @internal Options for `useTableKeyboardNavigation`. */
+export interface UseTableKeyboardNavigationOptions {
+    /** Rows the keys move over (loaded rows, or every virtual row). */
     rowCount: number;
-    enabled?: boolean;
-    onActivate?: (rowIndex: number, event: React.KeyboardEvent) => void;
-    onToggleSelect?: (rowIndex: number, event: React.KeyboardEvent) => void;
-    /** Lets a virtualized host bring an off-screen row into the DOM first. */
-    scrollToIndex?: (rowIndex: number) => void;
+    /** Rows in one visible page, for PageUp / PageDown. */
+    getPageSize: () => number;
+    /** Brings a row into the rendered window first (virtual bodies). */
+    scrollToIndex?: ((index: number) => void) | undefined;
+    /** Keys the hook does not handle. */
+    onKeyDown: (rowIndex: number, event: KeyboardEvent<HTMLTableRowElement>) => void;
 }
+/** @internal What `useTableKeyboardNavigation` returns. */
 export interface TableKeyboardNavigation {
-    focusedRowIndex: number;
-    /** Roving tabindex: exactly one body row is in the tab order. */
-    getRowTabIndex: (rowIndex: number) => number | undefined;
-    onRowKeyDown: (rowIndex: number, event: React.KeyboardEvent) => void;
-    onRowFocus: (rowIndex: number) => void;
+    /** The row that is the tab stop. */
+    tabStopIndex: number;
+    /** Ref registration for each rendered row element. */
+    registerRow: (rowIndex: number, element: HTMLElement | null) => void;
+    /** The row `keydown` handler (only for events whose target is the row itself). */
+    handleRowKeyDown: (rowIndex: number, event: KeyboardEvent<HTMLTableRowElement>) => void;
+    /** The row (or a control in it) received focus: it becomes the tab stop. */
+    handleRowFocus: (rowIndex: number) => void;
+    /** Moves focus to a row, scrolling it into the window first. */
+    focusRow: (rowIndex: number) => void;
 }
-/**
- * Roving-tabindex keyboard navigation over table rows: one Tab stop for the
- * whole body, arrows to move between rows, Enter to activate, Space to select.
- */
-export declare function useTableKeyboardNavigation({ bodyRef, rowCount, enabled, onActivate, onToggleSelect, scrollToIndex, }: UseTableKeyboardNavigationOptions): TableKeyboardNavigation;
-export {};
+/** @internal Roving focus over the rows of a table body. */
+export declare function useTableKeyboardNavigation({ rowCount, getPageSize, scrollToIndex, onKeyDown, }: UseTableKeyboardNavigationOptions): TableKeyboardNavigation;