@cube-dev/ui-kit 0.200.1 → 0.202.0

package/dist/components/data/TableBase/TableView.js

@@ -1,14 +1,13 @@
-/** @license MIT | @cube-dev/ui-kit v0.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
 import { useSlotProps } from "../../../utils/react/Slots.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { TooltipProvider } from "../../overlays/Tooltip/TooltipProvider.js";
-import { TextItem } from "../../content/TextItem/TextItem.js";
+import { TextItemWithNativeLink } from "../../content/TextItem/TextItem.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { DirectionIcon } from "../../../icons/DirectionIcon.js";
 import { MenuTrigger as _MenuTrigger } from "../../actions/Menu/MenuTrigger.js";
 import { Menu as __Menu } from "../../actions/Menu/Menu.js";
-import { Action } from "../../actions/Action/Action.js";
 import { useContextMenu } from "../../actions/use-context-menu.js";
 import { useToast } from "../../overlays/Toast/useToast.js";
 import { usePaletteVersion } from "../../../tokens/palette-config.js";
@@ -26,6 +25,7 @@ import { ColumnResizer } from "./ColumnResizer.js";
 import { isMenuEmpty, normalizeMenuAction } from "./row-menu.js";
 import { TableHeaderCell } from "./TableHeaderCell.js";
 import { TableRow, TableRowDropIndicator } from "./TableRow.js";
+import { TableRowLink } from "./TableRowLink.js";
 import { TreeGridTable } from "./TreeGridTable.js";
 import { selectionRowKey } from "./types.js";
 import { toTsv } from "./use-cell-selection.js";
@@ -38,12 +38,46 @@ import { getColumnText, getColumnValue } from "./use-table-columns.js";
 import "./use-table-selection.js";
 import { useTableTooltipRefresh } from "./use-table-tooltip-refresh.js";
 import { c } from "react/compiler-runtime";
+import { useGlobalStyles } from "@tenphi/tasty";
 import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import clsx from "clsx";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { VisuallyHidden } from "react-aria";
+import { getInteractionModality } from "@react-aria/interactions";
 import { useVirtualizer } from "@tanstack/react-virtual";
 //#region src/components/data/TableBase/TableView.tsx
+const CELL_CONTROL_SELECTOR = "a,button,input,select,textarea,label[for],label:has(button,input,select,textarea),[tabindex],[contenteditable=\"\"],[contenteditable=\"true\"],[contenteditable=\"plaintext-only\"],[role=\"button\"],[role=\"checkbox\"],[role=\"switch\"],[role=\"menuitem\"],[role=\"menuitemcheckbox\"],[role=\"menuitemradio\"],[role=\"radio\"],[role=\"textbox\"],[role=\"combobox\"],[role=\"slider\"],[role=\"spinbutton\"],[role=\"link\"]";
+const NATIVE_CELL_CONTROL_SELECTOR = `:where([data-element=CellContent][data-native-row-content]) :where(${CELL_CONTROL_SELECTOR})`;
+const NATIVE_CELL_CONTROL_STYLES = {
+	position: "relative",
+	zIndex: 1
+};
+function isCellControl(target, row) {
+	const control = target.closest(CELL_CONTROL_SELECTOR);
+	return control != null && control !== row;
+}
+function flatRowTabStop(restingRow, visibleRow, mountedRows, range) {
+	if (!mountedRows || !restingRow) return restingRow;
+	if (range && restingRow.index >= range.startIndex && restingRow.index <= range.endIndex) return restingRow;
+	return visibleRow && mountedRows.some((item) => item.index === visibleRow.index) ? visibleRow : null;
+}
+function scrollerTabStop(hasCellSelection, hasRowNavigation, restingRow, tabStopRow) {
+	if (hasRowNavigation && restingRow && !tabStopRow) return 0;
+	return hasCellSelection || hasRowNavigation ? -1 : void 0;
+}
+/** Correct native table/header geometry only when completing row focus. */
+function revealFocusedRow(row, scroller, isHeaderSticky) {
+	if (scroller.scrollHeight <= scroller.clientHeight) return;
+	const viewport = scroller.getBoundingClientRect();
+	const bounds = row.getBoundingClientRect();
+	const header = row.closest("table")?.tHead;
+	const headerHeight = isHeaderSticky ? header?.getBoundingClientRect().height ?? 0 : 0;
+	const top = viewport.top + scroller.clientTop + headerHeight;
+	const bottom = viewport.top + scroller.clientTop + scroller.clientHeight;
+	if (bounds.top >= top && bounds.bottom <= bottom) return;
+	const delta = bounds.top < top || bounds.height > bottom - top ? bounds.top - top : bounds.bottom - bottom;
+	scroller.scrollTop += delta;
+}
 /**
 * The same block as an HTML table, so a spreadsheet keeps the cell boundaries.
 *
@@ -111,8 +145,8 @@ function pinStyle(column) {
 }
 /** Default text keeps its tooltip tree while the virtual window moves. */
 function TableCellContent(t0) {
-	const $ = c(7);
-	const { column, row, rowIndex } = t0;
+	const $ = c(8);
+	const { column, row, rowIndex, nativeLinkProps } = t0;
 	let t1;
 	if ($[0] !== column || $[1] !== row || $[2] !== rowIndex) {
 		t1 = getColumnText(column, row, rowIndex);
@@ -123,25 +157,37 @@ function TableCellContent(t0) {
 	} else t1 = $[3];
 	const text = t1;
 	let t2;
-	if ($[4] !== column.autoHeight || $[5] !== text) {
-		t2 = column.autoHeight || text == null ? text : /* @__PURE__ */ jsx(TextItem, { children: text });
+	if ($[4] !== column.autoHeight || $[5] !== nativeLinkProps || $[6] !== text) {
+		t2 = column.autoHeight || text == null ? text : /* @__PURE__ */ jsx(TextItemWithNativeLink, {
+			nativeLinkProps,
+			children: text
+		});
 		$[4] = column.autoHeight;
-		$[5] = text;
-		$[6] = t2;
-	} else t2 = $[6];
+		$[5] = nativeLinkProps;
+		$[6] = text;
+		$[7] = t2;
+	} else t2 = $[7];
 	return t2;
 }
-function renderCellValue(rendered, autoHeight) {
+function renderCellValue(rendered, autoHeight, nativeLinkProps) {
 	const isText = typeof rendered === "string" || typeof rendered === "number" || typeof rendered === "bigint";
-	return isText && !autoHeight ? /* @__PURE__ */ jsx(TextItem, { children: String(rendered) }) : isText ? String(rendered) : rendered;
+	return isText && !autoHeight ? /* @__PURE__ */ jsx(TextItemWithNativeLink, {
+		nativeLinkProps,
+		children: String(rendered)
+	}) : isText ? String(rendered) : rendered != null && typeof rendered !== "boolean" ? /* @__PURE__ */ jsx("div", {
+		"data-element": "CellContent",
+		"data-native-row-content": nativeLinkProps ? "" : void 0,
+		children: rendered
+	}) : rendered;
 }
-function renderCellContent(column, row, rowIndex, ctx) {
+function renderCellContent(column, row, rowIndex, ctx, nativeLinkProps) {
 	if (!column.render) return column.isStructural ? null : /* @__PURE__ */ jsx(TableCellContent, {
 		column,
 		row,
-		rowIndex
+		rowIndex,
+		nativeLinkProps
 	});
-	return renderCellValue(column.render(column.isStructural ? void 0 : getColumnValue(column, row, rowIndex), row, rowIndex, ctx), column.autoHeight);
+	return renderCellValue(column.render(column.isStructural ? void 0 : getColumnValue(column, row, rowIndex), row, rowIndex, ctx), column.autoHeight, nativeLinkProps);
 }
 /**
 * A tree column's cell content: indented to the row's level, with the expand
@@ -173,6 +219,7 @@ function renderTreeCellContent(entry, isExpanded, expandButtonProps, content) {
 function TableView(props) {
 	const { qa, rows, rowKeys, getRowKey, layout, columnHeaderPaths, onScrollerRef, rootRef, size = "medium", shape = "plain", rowSize, rowHeight, headerHeight, isHeaderHidden = false, isStriped = false, hasColumnDividers, isRowMoveAnimated = true, isHeaderSticky = true, isAutoHeight = false, isVirtualized = "auto", virtualizeThreshold = 50, overscan = 20, isLoading = false, loadingIndicator = "overlay", skeletonRowCount = 6, selection, selectionTooltip, overlay, rowMenu, rowContextMenu = false, onRowMenuAction, rowMenuTriggerProps, rowLink, onRowAction, onLoadMore, hasMore = false, isLoadingMore = false, loadMoreMargin, pinnedTopRows, pinnedBottomRows, cellSelection, rowNumberOffset = 0, rowIndexOffset = 0, totalRowCount, tree, isReorderable = false, dragState, dropState, collectionProps, isColumnReorderable = false, columnDragState, columnDropState, headCollectionProps, headRowRef, onColumnFocus, bodyRef, isResizable = false, onColumnResize, onColumnResizeEnd, emptyLabel, noResultsLabel, error, isFiltered = false, sortMode = "off", sort, sorts, onColumnSort, onColumnSortChange, columnContextMenu = true, onColumnMenuAction, columnMenuTriggerProps, columnMenuProps, getRowProps, headerPreset, contentPreset, toolbar, footer, ariaLabel, styles, headerStyles, headerCellStyles, bodyStyles, rowStyles, cellStyles, mods } = props;
 	const { columns } = layout;
+	useGlobalStyles(NATIVE_CELL_CONTROL_SELECTOR, rowLink ? NATIVE_CELL_CONTROL_STYLES : void 0);
 	const columnCount = columns.length;
 	const headerGroupDepth = columns.reduce((depth, column) => Math.max(depth, columnHeaderPaths?.get(column.key)?.length ?? 0), 0);
 	/**
@@ -501,15 +548,21 @@ function TableView(props) {
 			style: pinStyle(column),
 			children: isMenuEmpty(items) ? null : /* @__PURE__ */ jsx("div", {
 				"data-element": "RowActions",
-				children: /* @__PURE__ */ jsxs(_MenuTrigger, { children: [/* @__PURE__ */ jsx(ItemAction, {
-					tabIndex: -1,
-					icon: /* @__PURE__ */ jsx(MoreIcon, {}),
-					"aria-label": t("itemTable.rowActions", "Row actions"),
-					...rowMenuTriggerProps
-				}), /* @__PURE__ */ jsx(__Menu, {
-					onAction: menuActionHandler(row, rowKey, false),
-					children: items
-				})] })
+				children: /* @__PURE__ */ jsxs(_MenuTrigger, {
+					isDisabled: selection?.isRowDisabled(rowKey),
+					shouldRestoreFocus: tree ? void 0 : false,
+					onOpenChange: tree ? void 0 : (isOpen) => handleRowMenuOpenChange(isOpen, rowKey, rowIndex),
+					children: [/* @__PURE__ */ jsx(ItemAction, {
+						tabIndex: !tree && tabStopRow?.key === rowKey ? 0 : -1,
+						icon: /* @__PURE__ */ jsx(MoreIcon, {}),
+						"aria-label": t("itemTable.rowActions", "Row actions"),
+						...rowMenuTriggerProps,
+						isDisabled: selection?.isRowDisabled(rowKey) || rowMenuTriggerProps?.isDisabled
+					}), /* @__PURE__ */ jsx(__Menu, {
+						onAction: menuActionHandler(row, rowKey, false),
+						children: items
+					})]
+				})
 			})
 		}, `column-cell:${column.key}`);
 	}
@@ -612,7 +665,7 @@ function TableView(props) {
 			} : void 0
 		};
 	}
-	function renderCell(column, row, rowIndex, rowKey, isLastRow, pinnedEdge, treeItemAria) {
+	function renderCell(column, row, rowIndex, rowKey, isLastRow, pinnedEdge, treeItemAria, nativeLinkProps) {
 		const rangeKey = selectionRowKey(sectionOf(pinnedEdge), rowKey);
 		if (column.key === "__cube-selection__") return renderSelectionCell(column, row, rowIndex, rowKey, isLastRow, pinnedEdge);
 		if (column.key === "__cube-row-number__") return /* @__PURE__ */ jsx("td", {
@@ -640,13 +693,13 @@ function TableView(props) {
 			isSelected: selection?.isSelected(rowKey) ?? false,
 			tree: pinnedEdge == null ? treeRowState(rowIndex) : void 0
 		};
-		const content = renderCellContent(column, row, rowIndex, ctx);
+		const content = renderCellContent(column, row, rowIndex, ctx, nativeLinkProps);
 		const treeEntry = pinnedEdge == null ? tree?.entries[rowIndex] : void 0;
 		const displayContent = treeEntry && column.key === tree?.columnKey ? renderTreeCellContent(treeEntry, tree.state.expandedKeys.has(treeEntry.key), treeItemAria?.expandButtonProps, content) : content;
 		const columnClassName = columnCellClassName(typeof column.cellStyles === "function" ? column.cellStyles(ctx) : column.cellStyles);
 		const extraCellProps = column.cellProps?.(ctx);
 		const CellTag = column.isRowHeader ? "th" : "td";
-		const link = column.isRowHeader ? rowLink?.(row, rowIndex) : void 0;
+		const isLinkedHeader = column.isRowHeader && nativeLinkProps !== void 0;
 		return /* @__PURE__ */ jsxs(CellTag, {
 			"data-element": "Cell",
 			"data-key": column.key,
@@ -654,7 +707,7 @@ function TableView(props) {
 			"data-pin-edge": column.isPinEdge ? "" : void 0,
 			"data-align": column.align,
 			"data-wrap": column.autoHeight ? "" : void 0,
-			"data-link": link !== void 0 ? "" : void 0,
+			"data-link": isLinkedHeader ? "" : void 0,
 			"data-last-row": isLastRow ? "" : void 0,
 			"data-pinned": pinnedEdge,
 			"data-odd": cellBandFlag(rowIndex, pinnedEdge),
@@ -669,9 +722,9 @@ function TableView(props) {
 			style: pinStyle(column),
 			...extraCellProps,
 			className: clsx(columnClassName, extraCellProps?.className) || void 0,
-			children: [displayContent, link !== void 0 ? /* @__PURE__ */ jsx(Action, {
+			children: [displayContent, isLinkedHeader ? /* @__PURE__ */ jsx("a", {
+				...nativeLinkProps,
 				"data-element": "RowLink",
-				to: link,
 				tabIndex: -1,
 				"aria-label": getColumnText(column, row, rowIndex) ?? void 0
 			}) : null]
@@ -687,18 +740,23 @@ function TableView(props) {
 	*/
 	function renderPinnedRow(row, index, edge) {
 		const rowKey = getRowKey(row, index);
-		return /* @__PURE__ */ jsx("tr", {
+		const render = (nativeLinkProps) => /* @__PURE__ */ jsx("tr", {
 			"data-element": "Row",
 			"data-pinned": edge,
 			role: "row",
 			"aria-rowindex": pinnedRowIndex(index, edge),
-			children: bodyColumns.map((segment) => segment.column ? renderCell(segment.column, row, index, rowKey, false, edge) : renderColumnSpacer(segment.key, segment.span, edge))
+			children: bodyColumns.map((segment) => segment.column ? renderCell(segment.column, row, index, rowKey, false, edge, void 0, nativeLinkProps) : renderColumnSpacer(segment.key, segment.span, edge))
+		}, `pinned-${edge}-${rowKey}`);
+		const link = !hasRowLinkColumn || selection?.isRowDisabled(rowKey) ? void 0 : rowLink?.(row, index);
+		return /* @__PURE__ */ jsx(TableRowLink, {
+			to: link,
+			children: render
 		}, `pinned-${edge}-${rowKey}`);
 	}
 	/** The cells of one body row. Shared by both render paths. */
-	function renderRowCells(row, rowIndex, treeItemAria) {
+	function renderRowCells(row, rowIndex, treeItemAria, nativeLinkProps) {
 		const rowKey = bodyRowKey(row, rowIndex);
-		return bodyColumns.map((segment) => segment.column ? renderCell(segment.column, row, rowIndex, rowKey, rowIndex === rows.length - 1, void 0, treeItemAria) : renderColumnSpacer(segment.key, segment.span, void 0, rowIndex === rows.length - 1));
+		return bodyColumns.map((segment) => segment.column ? renderCell(segment.column, row, rowIndex, rowKey, rowIndex === rows.length - 1, void 0, treeItemAria, nativeLinkProps) : renderColumnSpacer(segment.key, segment.span, void 0, rowIndex === rows.length - 1));
 	}
 	/**
 	* The `<tr>` shell. Virtuoso owns the element in the virtualized path (it
@@ -708,6 +766,7 @@ function TableView(props) {
 	function getRowElementProps(row, rowIndex) {
 		const rowKey = bodyRowKey(row, rowIndex);
 		const isSelected = selection?.isSelected(rowKey) ?? false;
+		const isDisabled = selection?.isRowDisabled(rowKey) ?? false;
 		const ctx = {
 			row,
 			rowKey,
@@ -725,19 +784,20 @@ function TableView(props) {
 			"data-odd": isStriped && rowIndex % 2 === 1 ? "" : void 0,
 			"data-dimmed": extra?.isDimmed ? "" : void 0,
 			"data-selected": isSelected ? "" : void 0,
-			"data-disabled": selection?.isRowDisabled(rowKey) ? "" : void 0,
+			"data-disabled": isDisabled ? "" : void 0,
 			role: "row",
-			tabIndex: !tree && isReorderable ? rowIndex === focusedRowIndex ? 0 : -1 : void 0,
+			tabIndex: hasFlatRowNavigation ? !isDisabled && rowKey === tabStopRow?.key ? 0 : -1 : void 0,
 			"aria-selected": selection?.isEnabled ? isSelected : void 0,
+			"aria-disabled": isDisabled || void 0,
 			"aria-rowindex": bodyRowIndex(rowIndex),
 			title: extra?.tooltip,
 			height: extra?.height,
-			"data-clickable": onRowAction != null || rowLink?.(row, rowIndex) !== void 0 ? "" : void 0,
+			"data-clickable": !isDisabled && (onRowAction != null || hasRowLinkColumn && rowLink?.(row, rowIndex) !== void 0) ? "" : void 0,
 			onClick: onRowAction != null ? (event) => {
-				if (event.target.closest("a, button, input, select, textarea, [role=\"button\"], [role=\"menuitem\"]")) return;
+				if (isDisabled || isCellControl(event.target, event.currentTarget)) return;
 				onRowAction(row, rowKey);
 			} : void 0,
-			onContextMenu: isMenuEnabled ? (event) => openContextMenuFor(row, rowIndex, rowKey, event) : void 0,
+			onContextMenu: isMenuEnabled && !isDisabled ? (event) => openContextMenuFor(row, rowIndex, rowKey, event) : void 0,
 			...Object.fromEntries(Object.entries(extra?.mods ?? {}).filter(([, active]) => active).map(([name]) => [`data-${name}`, ""]))
 		};
 	}
@@ -746,7 +806,7 @@ function TableView(props) {
 		const rowKey = bodyRowKey(row, rowIndex);
 		const treeNode = tree?.nodes[rowIndex];
 		const treeEntry = tree?.entries[rowIndex];
-		return /* @__PURE__ */ jsx(TableRow, {
+		const render = (nativeLinkProps) => /* @__PURE__ */ jsx(TableRow, {
 			rowKey,
 			rowProps,
 			height,
@@ -760,7 +820,12 @@ function TableView(props) {
 				entry: treeEntry,
 				isVirtualized: isVirtual
 			} : void 0,
-			children: (treeItemAria) => renderRowCells(row, rowIndex, treeItemAria)
+			children: (treeItemAria) => renderRowCells(row, rowIndex, treeItemAria, nativeLinkProps)
+		}, rowProps["data-key"]);
+		const link = !hasRowLinkColumn || selection?.isRowDisabled(rowKey) ? void 0 : rowLink?.(row, rowIndex);
+		return /* @__PURE__ */ jsx(TableRowLink, {
+			to: link,
+			children: render
 		}, rowProps["data-key"]);
 	}
 	function renderSpacerRow(height, position) {
@@ -820,6 +885,7 @@ function TableView(props) {
 		measureElement: (element) => element.getBoundingClientRect().height,
 		overscan
 	});
+	const virtualItems = shouldVirtualize ? virtualizer.getVirtualItems() : [];
 	useLayoutEffect(() => {
 		virtualizer.measure();
 		virtualizer.getTotalSize();
@@ -881,7 +947,80 @@ function TableView(props) {
 		rowCountBeforeFetchRef.current = null;
 	}, [isLoadingMore]);
 	const loadMoreSkeletonCount = Math.min(Math.max(lastBatchSizeRef.current || rows.length || skeletonRowCount, 1), MAX_LOAD_MORE_SKELETON_ROWS);
-	const [focusedRowIndex, setFocusedRowIndex] = useState(0);
+	const isMenuEnabled = rowMenu != null && rowContextMenu !== false;
+	const hasRowLinkColumn = columns.some((column) => column.isRowHeader);
+	const hasFlatRowNavigation = !tree && (isReorderable || rowLink != null && hasRowLinkColumn || onRowAction != null || isMenuEnabled);
+	const [focusedRow, setFocusedRow] = useState({
+		key: null,
+		index: 0
+	});
+	const pendingRowFocus = useRef(null);
+	const ownedRow = useRef(null);
+	const menuOrigin = useRef(null);
+	function focusableRowFrom(index, direction) {
+		for (; index >= 0 && index < rows.length; index += direction) {
+			const row = rows[index];
+			const key = bodyRowKey(row, index);
+			if (selection?.isRowDisabled(key)) continue;
+			if (isReorderable || onRowAction != null || hasRowLinkColumn && rowLink?.(row, index) !== void 0 || isMenuEnabled && !isMenuEmpty(resolveRowMenu(row, index, key))) return {
+				key,
+				index
+			};
+		}
+		return null;
+	}
+	function rowIndexForKey(key) {
+		return selection?.collection.indexOf(key) ?? rows.findIndex((row, index) => bodyRowKey(row, index) === key);
+	}
+	const focusedRowIndex = focusedRow.key == null ? -1 : rowIndexForKey(focusedRow.key);
+	const restingIndex = focusedRowIndex >= 0 ? focusedRowIndex : Math.min(focusedRow.index, rows.length - 1);
+	const restingRow = hasFlatRowNavigation ? focusableRowFrom(Math.max(restingIndex, 0), 1) ?? focusableRowFrom(restingIndex, -1) : null;
+	const tabStopRow = flatRowTabStop(restingRow, shouldVirtualize && virtualItems.length && hasFlatRowNavigation ? focusableRowFrom(virtualizer.range?.startIndex ?? virtualItems[0].index, 1) : null, shouldVirtualize ? virtualItems : void 0, virtualizer.range);
+	function mountedRow(key) {
+		return Array.from(localBodyRef.current?.querySelectorAll("tr[data-element=\"Row\"][data-key]") ?? []).find((element) => element.dataset.key === String(key));
+	}
+	function focusFlatRow(next) {
+		if (!next) return;
+		pendingRowFocus.current = next.key;
+		setFocusedRow((current) => current.key === next.key && current.index === next.index ? current : next);
+		selection?.selectionManager.setFocusedKey(next.key);
+		if (shouldVirtualize) {
+			const offset = virtualizer.getOffsetForIndex(next.index, "auto")?.[0];
+			if (offset != null) virtualizer.scrollToOffset(offset);
+		}
+		const target = mountedRow(next.key);
+		if (target) {
+			pendingRowFocus.current = null;
+			ownedRow.current = target;
+			target.focus({ preventScroll: shouldVirtualize });
+			if (scrollerRef.current) revealFocusedRow(target, scrollerRef.current, isHeaderSticky);
+		}
+	}
+	useLayoutEffect(() => {
+		if (!hasFlatRowNavigation) return;
+		const previous = ownedRow.current;
+		const active = document.activeElement;
+		if (active && active !== document.body && !scrollerRef.current?.contains(active)) {
+			pendingRowFocus.current = null;
+			return;
+		}
+		const wasUnmounted = pendingRowFocus.current == null && previous && !previous.isConnected;
+		if (wasUnmounted && focusedRowIndex >= 0) {
+			ownedRow.current = null;
+			scrollerRef.current?.focus({ preventScroll: true });
+			return;
+		}
+		const wasRemoved = wasUnmounted && focusedRowIndex < 0;
+		if (pendingRowFocus.current == null && !wasRemoved) return;
+		const previousIndex = wasRemoved ? Number(previous.dataset.rowIndex) : restingRow?.index ?? 0;
+		const next = wasRemoved ? focusableRowFrom(Math.min(previousIndex, rows.length - 1), 1) ?? focusableRowFrom(Math.min(previousIndex, rows.length - 1), -1) : restingRow;
+		if (next) focusFlatRow(next);
+		else {
+			pendingRowFocus.current = null;
+			ownedRow.current = null;
+			scrollerRef.current?.focus({ preventScroll: true });
+		}
+	});
 	const [isRangeDragging, setIsRangeDragging] = useState(false);
 	useEffect(() => {
 		if (!isRangeDragging) return;
@@ -896,16 +1035,11 @@ function TableView(props) {
 			window.removeEventListener("pointercancel", end);
 		};
 	}, [isRangeDragging, cellSelection]);
-	const moveRowFocus = useEvent((from, delta) => {
-		const current = from.closest("tr[data-element=\"Row\"]");
-		const all = Array.from(scrollerRef.current?.querySelectorAll("tbody tr[data-element=\"Row\"]:not([data-placeholder])") ?? []);
-		if (!all.length) return false;
-		const index = current ? all.indexOf(current) : -1;
-		const next = Math.min(Math.max((index === -1 ? focusedRowIndex : index) + delta, 0), all.length - 1);
-		setFocusedRowIndex(next);
-		all[next]?.focus();
-		return true;
-	});
+	function moveRowFocus(index, key) {
+		const logicalIndex = pendingRowFocus.current == null ? index : rowIndexForKey(pendingRowFocus.current);
+		const direction = key === "ArrowUp" || key === "End" ? -1 : 1;
+		focusFlatRow(focusableRowFrom(key === "Home" ? 0 : key === "End" ? rows.length - 1 : logicalIndex + direction, direction));
+	}
 	const sentinelRef = useRef(null);
 	const onLoadMoreEvent = useEvent(() => onLoadMore?.());
 	useEffect(() => {
@@ -930,7 +1064,44 @@ function TableView(props) {
 		rows.length
 	]);
 	const contextMenu = useContextMenu(__Menu, { placement: "bottom start" });
-	const isMenuEnabled = rowMenu != null && rowContextMenu !== false;
+	function rememberRowMenuOrigin(key, index, isContextMenu = false) {
+		menuOrigin.current = {
+			key,
+			index,
+			isContextMenu,
+			target: document.activeElement instanceof HTMLElement ? document.activeElement : null
+		};
+		const element = mountedRow(key);
+		if (element) ownedRow.current = element;
+		setFocusedRow({
+			key,
+			index
+		});
+	}
+	const restoreRowMenuFocus = useEvent(() => {
+		const origin = menuOrigin.current;
+		menuOrigin.current = null;
+		if (!origin) return;
+		const active = document.activeElement;
+		if (active instanceof HTMLElement && active !== document.body && active.isConnected && active !== origin.target && !active.closest("[role=\"menu\"]")) return;
+		if (origin.target?.isConnected && !selection?.isRowDisabled(origin.key)) origin.target.focus();
+		else {
+			const currentIndex = rowIndexForKey(origin.key);
+			const index = currentIndex >= 0 ? currentIndex : Math.min(origin.index, rows.length - 1);
+			const next = focusableRowFrom(index, 1) ?? focusableRowFrom(index, -1);
+			if (next) focusFlatRow(next);
+			else scrollerRef.current?.focus({ preventScroll: true });
+		}
+	});
+	function handleRowMenuOpenChange(isOpen, key, index) {
+		if (isOpen) rememberRowMenuOrigin(key, index);
+		else restoreRowMenuFocus();
+	}
+	useEffect(() => {
+		if (contextMenu.isOpen || !menuOrigin.current?.isContextMenu) return;
+		contextMenu.close();
+		restoreRowMenuFocus();
+	}, [contextMenu, restoreRowMenuFocus]);
 	function resolveRowMenu(row, rowIndex, rowKey) {
 		if (!rowMenu) return null;
 		return rowMenu(row, {
@@ -943,20 +1114,29 @@ function TableView(props) {
 			isDropTarget: false
 		});
 	}
+	const notifyRowMenuAction = useEvent((action, row, rowKey) => {
+		const index = rowIndexForKey(rowKey);
+		onRowMenuAction?.(normalizeMenuAction(action), index >= 0 ? rows[index] : row, rowKey);
+	});
 	function menuActionHandler(row, rowKey, closeAfter) {
 		return (action) => {
-			onRowMenuAction?.(normalizeMenuAction(action), row, rowKey);
+			notifyRowMenuAction(action, row, rowKey);
 			if (closeAfter) contextMenu.close();
 		};
 	}
 	const openContextMenuFor = useEvent((row, rowIndex, rowKey, event) => {
 		const items = resolveRowMenu(row, rowIndex, rowKey);
-		if (isMenuEmpty(items)) return;
+		if (selection?.isRowDisabled(rowKey) || isMenuEmpty(items)) return;
 		event.preventDefault();
+		if (!tree) rememberRowMenuOrigin(rowKey, rowIndex, true);
+		const rect = mountedRow(rowKey)?.getBoundingClientRect();
 		contextMenu.open({
 			children: items,
 			onAction: menuActionHandler(row, rowKey, true)
-		}, void 0, "clientX" in event.nativeEvent ? event.nativeEvent : void 0);
+		}, tree ? void 0 : { shouldRestoreFocus: false }, "clientX" in event.nativeEvent ? event.nativeEvent : new MouseEvent("contextmenu", {
+			clientX: rect ? rect.left + rect.width / 2 : 0,
+			clientY: rect ? rect.top + rect.height / 2 : 0
+		}));
 	});
 	const columnMenu = useColumnMenu({
 		contextMenu,
@@ -969,17 +1149,41 @@ function TableView(props) {
 	/** Resolves the row a pointer or keyboard event landed in. */
 	function rowFromEvent(target) {
 		const element = target?.closest?.("tr[data-element=\"Row\"][data-key]");
-		if (!element) return null;
+		if (!element || element.parentElement !== localBodyRef.current) return null;
 		const index = Number(element.getAttribute("data-row-index"));
 		if (!Number.isInteger(index)) return null;
 		const row = rows[index];
 		return row === void 0 ? null : {
 			row,
 			index,
-			key: bodyRowKey(row, index)
+			key: bodyRowKey(row, index),
+			element
 		};
 	}
-	const virtualItems = shouldVirtualize ? virtualizer.getVirtualItems() : [];
+	function handleFlatRowNavigation(event, found) {
+		if (!hasFlatRowNavigation || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || dragState?.draggingKeys?.size) return false;
+		if (![
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) return false;
+		const target = event.target;
+		if (target === event.currentTarget) switch (event.key) {
+			case "Home":
+				focusFlatRow(focusableRowFrom(0, 1));
+				break;
+			case "End":
+				focusFlatRow(focusableRowFrom(rows.length - 1, -1));
+				break;
+			default: focusFlatRow(tabStopRow ?? restingRow);
+		}
+		else if (found && target === found.element) moveRowFocus(found.index, event.key);
+		else if (event.key === "ArrowDown" && target.matches("th[data-element=\"HeaderCell\"]")) focusFlatRow(tabStopRow ?? restingRow);
+		else return false;
+		event.preventDefault();
+		return true;
+	}
 	const paddingTop = virtualItems.length ? virtualItems[0].start : 0;
 	const paddingBottom = virtualItems.length ? virtualizer.getTotalSize() - virtualItems[virtualItems.length - 1].end : 0;
 	const colGroup = /* @__PURE__ */ jsx("colgroup", { children: columns.map((column) => /* @__PURE__ */ jsx("col", { style: column.width != null ? { width: column.width } : void 0 }, column.key)) });
@@ -1143,24 +1347,68 @@ function TableView(props) {
 			/* @__PURE__ */ jsx("div", {
 				"data-element": "Scroller",
 				ref: handleScrollerRef,
-				tabIndex: cellSelection?.isEnabled ? -1 : void 0,
+				tabIndex: scrollerTabStop(cellSelection?.isEnabled, hasFlatRowNavigation, restingRow, tabStopRow),
+				onFocusCapture: (event) => {
+					if (!hasFlatRowNavigation) return;
+					const found = rowFromEvent(event.target);
+					if (!found || selection?.isRowDisabled(found.key) || focusableRowFrom(found.index, 1)?.key !== found.key) {
+						pendingRowFocus.current = null;
+						ownedRow.current = null;
+						return;
+					}
+					if (pendingRowFocus.current !== found.key) pendingRowFocus.current = null;
+					ownedRow.current = found.element;
+					setFocusedRow({
+						key: found.key,
+						index: found.index
+					});
+					selection?.selectionManager.setFocusedKey(found.key);
+					if (event.target === found.element && getInteractionModality() !== "pointer" && scrollerRef.current) revealFocusedRow(found.element, scrollerRef.current, isHeaderSticky);
+				},
+				onBlurCapture: (event) => {
+					const target = event.relatedTarget;
+					if (target instanceof Element && !event.currentTarget.contains(target)) {
+						pendingRowFocus.current = null;
+						if (!target.closest("[role=\"menu\"]")) ownedRow.current = null;
+					}
+				},
 				onKeyDown: (event) => {
+					const found = rowFromEvent(event.target);
+					const target = event.target;
+					const isRowTarget = found && target === found.element;
+					if (pendingRowFocus.current != null && found && pendingRowFocus.current !== found.key && (event.key === "Enter" || event.key === "F10" && event.shiftKey)) {
+						event.preventDefault();
+						event.stopPropagation();
+						return;
+					}
+					if (handleFlatRowNavigation(event, found)) return;
 					if (event.key === "F10" && event.shiftKey && isMenuEnabled) {
-						const found = rowFromEvent(event.target);
 						if (found) {
 							event.stopPropagation();
 							openContextMenuFor(found.row, found.index, found.key, event);
 						}
 						return;
 					}
-					if (event.key === "Enter" && onRowAction) {
-						const found = rowFromEvent(event.target);
-						if (found && !event.target.closest("a, button, input, select, textarea, [role=\"button\"]")) onRowAction(found.row, found.key);
-						return;
-					}
-					if (!tree && isReorderable && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
-						if (dragState?.draggingKeys?.size) return;
-						if (moveRowFocus(event.target, event.key === "ArrowDown" ? 1 : -1)) event.preventDefault();
+					if (event.key === "Enter" && found) {
+						if (!selection?.isRowDisabled(found.key) && !isCellControl(target, found.element)) {
+							if (isReorderable && isRowTarget) return;
+							const link = found.element.querySelector("[data-element=\"RowLink\"]");
+							if (link && !tree) {
+								event.preventDefault();
+								link.dispatchEvent(new MouseEvent("click", {
+									bubbles: true,
+									cancelable: true,
+									button: 0,
+									altKey: event.altKey,
+									ctrlKey: event.ctrlKey,
+									metaKey: event.metaKey,
+									shiftKey: event.shiftKey
+								}));
+							} else if (onRowAction) {
+								event.preventDefault();
+								onRowAction(found.row, found.key);
+							}
+						}
 						return;
 					}
 					if (event.key === "Escape") {