@cube-dev/ui-kit 0.190.2 → 0.190.3

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

@@ -1,5 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.190.2 | Cube Dev Team */
-import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+/** @license MIT | @cube-dev/ui-kit v0.190.3 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { TooltipProvider } from "../../overlays/Tooltip/TooltipProvider.js";
 import { TextItem } from "../../content/TextItem/TextItem.js";
@@ -18,28 +17,27 @@ import { MoreIcon } from "../../../icons/MoreIcon.js";
 import { __Checkbox } from "../../fields/Checkbox/Checkbox.js";
 import { Placeholder } from "../../content/Placeholder/Placeholder.js";
 import { Skeleton } from "../../content/Skeleton/Skeleton.js";
-import { ArrowNarrowDownIcon } from "../../../icons/ArrowNarrowDownIcon.js";
-import { ArrowNarrowUpIcon } from "../../../icons/ArrowNarrowUpIcon.js";
-import { ROW_MENU_COLUMN_KEY, isMenuEmpty, normalizeMenuAction } from "./row-menu.js";
-import { COLUMN_MENU_SORT_DIRECTION, isColumnMenuSortKey, processColumnMenuItems } from "./column-menu.js";
+import { TableElement, TableHeaderItem, TableTreeToggle, TableTreeTogglePlaceholder } from "./styled.js";
+import { renderColumnHeaderContent, resolveColumnSort } from "./column-header.js";
 import { columnCellClassName } from "./column-styles.js";
 import { buildColumnTints, tintSlot } from "./column-tint.js";
 import { ColumnResizer } from "./ColumnResizer.js";
-import { TableElement, TableHeaderItem, TableTreeToggle, TableTreeTogglePlaceholder } from "./styled.js";
+import { ROW_MENU_COLUMN_KEY, isMenuEmpty, normalizeMenuAction } from "./row-menu.js";
 import { TableHeaderCell } from "./TableHeaderCell.js";
 import { TableRow, TableRowDropIndicator } from "./TableRow.js";
+import { TreeGridTable } from "./TreeGridTable.js";
 import { selectionRowKey } from "./types.js";
 import { toTsv } from "./use-cell-selection.js";
+import { useColumnMenu } from "./use-column-menu.js";
 import { getDraggableColumnKeys, isColumnDraggable } from "./use-column-order.js";
 import { useRowMoveAnimation } from "./use-row-move-animation.js";
 import { useScrollability } from "./use-scrollability.js";
 import { getColumnText, getColumnValue } from "./use-table-columns.js";
 import { ROW_NUMBER_COLUMN_KEY, SELECTION_COLUMN_KEY } from "./use-table-selection.js";
-import { c } from "react-compiler-runtime";
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import clsx from "clsx";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { VisuallyHidden, useTree } from "react-aria";
+import { VisuallyHidden } from "react-aria";
 import { useVirtualizer } from "@tanstack/react-virtual";
 
 //#region src/components/data/TableBase/TableView.tsx
@@ -108,135 +106,34 @@ function pinStyle(column) {
 	if (column.pinOffset == null) return void 0;
 	return { ["--pin-offset"]: `${column.pinOffset}px` };
 }
+/** What a data cell shows: `column.render`'s output, or the display text. */
+function renderCellContent(column, row, rowIndex, ctx) {
+	const value = column.isStructural ? void 0 : getColumnValue(column, row, rowIndex);
+	const rendered = column.render ? column.render(value, row, rowIndex, ctx) : column.isStructural ? null : getColumnText(column, row, rowIndex);
+	const isText = typeof rendered === "string" || typeof rendered === "number" || typeof rendered === "bigint";
+	return isText && !column.autoHeight ? /* @__PURE__ */ jsx(TextItem, { children: String(rendered) }) : isText ? String(rendered) : rendered;
+}
 /**
-* Hook boundary for the native table. Flat tables deliberately avoid this
-* component so their DOM and keyboard behaviour remain exactly as before.
+* A tree column's cell content: indented to the row's level, with the expand
+* toggle — or a placeholder holding its place on a leaf — before the value.
 */
-function TreeGridTable(props) {
-	const $ = c(16);
-	const { tree, tableProps, style, children } = props;
-	const ref = useRef(null);
-	const pendingFocusKey = useRef(null);
-	const { gridProps } = useTree(tree.ariaProps, tree.state, ref);
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = () => {
-			const key = pendingFocusKey.current;
-			if (key == null) return;
-			const activeElement = document.activeElement;
-			if (activeElement && activeElement !== document.body && !ref.current?.contains(activeElement)) {
-				pendingFocusKey.current = null;
-				return;
-			}
-			const target = Array.from(ref.current?.querySelectorAll("tbody tr[data-element=\"Row\"][data-key]") ?? []).find((element) => element.dataset.key === String(key));
-			if (target) {
-				pendingFocusKey.current = null;
-				target.focus();
-			}
-		};
-		$[0] = t0;
-	} else t0 = $[0];
-	useEffect(t0);
-	let t1;
-	if ($[1] !== gridProps) {
-		t1 = (event) => {
-			const pendingKey = pendingFocusKey.current;
-			const nextTarget = event.relatedTarget;
-			if (pendingKey != null && nextTarget instanceof Element) {
-				if (nextTarget.closest("tbody tr[data-element=\"Row\"][data-key]")?.dataset.key !== String(pendingKey)) pendingFocusKey.current = null;
-			}
-			gridProps.onBlurCapture?.(event);
-		};
-		$[1] = gridProps;
-		$[2] = t1;
-	} else t1 = $[2];
-	const handleBlurCapture = t1;
-	let t2;
-	if ($[3] !== gridProps || $[4] !== tree.entries || $[5] !== tree.state) {
-		t2 = (event_0) => {
-			const row = event_0.target.closest("tbody tr[data-element=\"Row\"][data-key]");
-			if (!row || event_0.target !== row) {
-				gridProps.onKeyDownCapture?.(event_0);
-				return;
-			}
-			const currentKey = pendingFocusKey.current ?? row.dataset.key;
-			const index = tree.entries.findIndex((entry) => String(entry.key) === String(currentKey));
-			const entry_0 = tree.entries[index];
-			if (!entry_0) return;
-			const focusEntry = (next) => {
-				if (!next) return false;
-				tree.state.selectionManager.setFocusedKey(next.key);
-				const target_0 = Array.from(ref.current?.querySelectorAll("tbody tr[data-element=\"Row\"][data-key]") ?? []).find((element_0) => element_0.dataset.key === String(next.key));
-				if (target_0) {
-					pendingFocusKey.current = null;
-					target_0.focus();
-				} else pendingFocusKey.current = next.key;
-				return true;
-			};
-			const hasChildren = entry_0.children.length > 0;
-			const isExpanded = tree.state.expandedKeys.has(entry_0.key);
-			let handled = false;
-			if (event_0.key === "ArrowRight" && hasChildren) if (isExpanded) handled = focusEntry(entry_0.children[0]);
-			else {
-				tree.state.toggleKey(entry_0.key);
-				handled = true;
-			}
-			else if (event_0.key === "ArrowLeft") {
-				if (hasChildren && isExpanded) {
-					tree.state.toggleKey(entry_0.key);
-					handled = true;
-				} else if (entry_0.parentKey != null) handled = focusEntry(tree.entries.find((candidate) => candidate.key === entry_0.parentKey));
-			} else if (event_0.key === "ArrowDown") handled = focusEntry(tree.entries[index + 1]);
-			else if (event_0.key === "ArrowUp") handled = focusEntry(tree.entries[index - 1]);
-			if (handled) {
-				event_0.preventDefault();
-				event_0.stopPropagation();
-				return;
-			}
-			if (pendingFocusKey.current != null && [
-				"ArrowDown",
-				"ArrowUp",
-				"ArrowRight",
-				"ArrowLeft"
-			].includes(event_0.key)) {
-				event_0.preventDefault();
-				event_0.stopPropagation();
-				return;
-			}
-			gridProps.onKeyDownCapture?.(event_0);
-		};
-		$[3] = gridProps;
-		$[4] = tree.entries;
-		$[5] = tree.state;
-		$[6] = t2;
-	} else t2 = $[6];
-	const handleKeyDownCapture = t2;
-	let t3;
-	if ($[7] !== gridProps || $[8] !== tableProps) {
-		t3 = mergeProps$1(gridProps, tableProps);
-		$[7] = gridProps;
-		$[8] = tableProps;
-		$[9] = t3;
-	} else t3 = $[9];
-	let t4;
-	if ($[10] !== children || $[11] !== handleBlurCapture || $[12] !== handleKeyDownCapture || $[13] !== style || $[14] !== t3) {
-		t4 = /* @__PURE__ */ jsx("table", {
-			...t3,
-			ref,
-			role: "treegrid",
-			style,
-			onBlurCapture: handleBlurCapture,
-			onKeyDownCapture: handleKeyDownCapture,
-			children
-		});
-		$[10] = children;
-		$[11] = handleBlurCapture;
-		$[12] = handleKeyDownCapture;
-		$[13] = style;
-		$[14] = t3;
-		$[15] = t4;
-	} else t4 = $[15];
-	return t4;
+function renderTreeCellContent(entry, isExpanded, expandButtonProps, content) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-element": "TreeContent",
+		style: { "--tree-level": String(entry.level) },
+		children: [entry.children.length > 0 ? /* @__PURE__ */ jsx(TableTreeToggle, {
+			...expandButtonProps,
+			"data-element": "TreeToggle",
+			tabIndex: -1,
+			children: /* @__PURE__ */ jsx(DirectionIcon, { to: isExpanded ? "bottom" : "right" })
+		}) : /* @__PURE__ */ jsx(TableTreeTogglePlaceholder, {
+			"data-element": "TreeToggle",
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ jsx("div", {
+			"data-element": "TreeValue",
+			children: content
+		})]
+	});
 }
 /**
 * The one place table DOM exists. Both `ItemTable` and `DataTable` resolve their
@@ -261,16 +158,6 @@ function TableView(props) {
 	const toast = useToast();
 	const [scrollerEl, setScrollerEl] = useState(null);
 	const scrollerRef = useRef(null);
-	/**
-	* The column whose menu is open, held for the whole table rather than per
-	* header cell.
-	*
-	* `renderHeaderCell` is a closure inside this component, not a component of
-	* its own, so it cannot hold state — and only one column menu can be open at a
-	* time anyway. Controlled rather than letting `MenuTrigger` own it: Shift+F10
-	* has to be able to open it from the `<th>`, and the trigger is not a tab stop.
-	*/
-	const [openMenuColumnKey, setOpenMenuColumnKey] = useState(null);
 	const localBodyRef = useRef(null);
 	const handleBodyRef = useCallback((element) => {
 		localBodyRef.current = element;
@@ -593,70 +480,17 @@ function TableView(props) {
 			"aria-colindex": column.ariaColIndex,
 			style: pinStyle(column)
 		}, column.key);
+		return renderColumnHeaderCell(column, rowSpan);
+	}
+	/** A data column's header cell: its sort, menu, resize handle and drag. */
+	function renderColumnHeaderCell(column, rowSpan) {
 		const header = column.header;
-		const activeSorts = sorts ?? (sort ? [sort] : []);
-		const sortIndex = activeSorts.findIndex((entry) => entry.columnKey === column.key);
-		const activeSort = sortIndex === -1 ? null : activeSorts[sortIndex];
-		const isSorted = activeSort != null;
-		const sortRank = activeSorts.length > 1 ? sortIndex + 1 : null;
-		const isSortable = sortMode !== "off" && !column.isStructural && column.isSortable === true;
+		const sortState = resolveColumnSort(column, sortMode, sorts, sort);
+		const { activeSort, isSorted, isSortable } = sortState;
 		const canResize = !column.isStructural && (column.isResizable ?? isResizable) && onColumnResize != null && onColumnResizeEnd != null;
-		const ctx = {
-			columnKey: column.key,
-			columnIndex: column.index,
-			sort: activeSort?.direction ?? null,
-			isSortable,
-			isResizing: false,
-			width: column.width
-		};
-		const sortIndicator = isSortable ? /* @__PURE__ */ jsx("div", {
-			"data-element": "SortIndicator",
-			"data-rank": sortRank ?? void 0,
-			"data-sorted": isSorted ? "" : void 0,
-			"data-dir": activeSort?.direction,
-			"aria-hidden": "true",
-			children: activeSort?.direction === "desc" ? /* @__PURE__ */ jsx(ArrowNarrowDownIcon, {}) : /* @__PURE__ */ jsx(ArrowNarrowUpIcon, {})
-		}) : null;
-		const hasCustomRightIcon = header?.rightIcon != null;
-		const rightIcon = hasCustomRightIcon ? header.rightIcon : sortIndicator;
-		const suffixContent = hasCustomRightIcon ? sortIndicator : null;
-		const suffix = header?.suffix != null || suffixContent ? /* @__PURE__ */ jsxs(Fragment$1, { children: [header?.suffix, suffixContent] }) : void 0;
-		const menuItems = resolveColumnMenu(column);
+		const menuItems = columnMenu.resolveColumnMenu(column);
 		const hasMenu = menuItems != null;
-		const isContextOnly = columnContextMenu === "context-only";
-		const menuAction = hasMenu && !isContextOnly ? /* @__PURE__ */ jsxs(_MenuTrigger, {
-			isOpen: openMenuColumnKey === column.key,
-			placement: "bottom end",
-			onOpenChange: (open) => setOpenMenuColumnKey(open ? column.key : null),
-			children: [/* @__PURE__ */ jsx(ItemAction, {
-				tabIndex: -1,
-				icon: /* @__PURE__ */ jsx(MoreIcon, {}),
-				"aria-label": t("itemTable.columnMenu", "Column menu"),
-				...columnMenuTriggerProps,
-				...header?.menuTriggerProps
-			}), /* @__PURE__ */ jsx(__Menu, {
-				...columnMenuProps,
-				...header?.menuProps,
-				onAction: columnMenuActionHandler(column, false),
-				children: processColumnMenuItems(menuItems, columnMenuContext(column, isSortable, activeSort))
-			})]
-		}) : null;
-		const actions = header?.actions != null || menuAction ? /* @__PURE__ */ jsxs(Fragment$1, { children: [header?.actions, menuAction] }) : void 0;
-		const content = header?.render ? header.render(ctx) : column.title == null && !header ? null : /* @__PURE__ */ jsx(TableHeaderItem, {
-			icon: header?.icon,
-			rightIcon,
-			prefix: header?.prefix,
-			suffix,
-			description: header?.description,
-			descriptionPlacement: header?.descriptionPlacement,
-			tooltip: header?.tooltip ?? true,
-			theme: header?.theme,
-			actions,
-			autoHideActions: header?.autoHideActions ?? true,
-			preserveActionsSpace: actions != null,
-			styles: header?.styles,
-			children: column.title
-		});
+		const content = renderColumnHeaderContent(column, sortState, columnMenu.renderColumnMenuTrigger(column, menuItems, sortState));
 		const isDraggable = isColumnDraggable(column, isColumnReorderable);
 		return /* @__PURE__ */ jsxs(TableHeaderCell, {
 			columnKey: column.key,
@@ -674,7 +508,7 @@ function TableView(props) {
 				"data-resizable": canResize ? "" : void 0,
 				"data-last-column": lastColumnFlag(column),
 				"data-sorted": isSorted ? "" : void 0,
-				"data-menu-open": openMenuColumnKey === column.key ? "" : void 0,
+				"data-menu-open": columnMenu.openMenuColumnKey === column.key ? "" : void 0,
 				"data-tint": tintSlot(tints, column.key, "header"),
 				role: "columnheader",
 				scope: "col",
@@ -684,24 +518,7 @@ function TableView(props) {
 				"aria-sort": activeSort ? ARIA_SORT[activeSort.direction] : void 0,
 				"aria-haspopup": hasMenu ? "menu" : void 0,
 				style: pinStyle(column),
-				onFocus: isColumnReorderable ? () => onColumnFocus?.(isDraggable ? column.key : null) : void 0,
-				onClick: isSortable ? () => onColumnSort?.(column.key) : void 0,
-				onContextMenu: hasMenu ? (event) => openColumnContextMenu(column, isSortable, activeSort, event) : void 0,
-				onKeyDown: isSortable || hasMenu ? (event) => {
-					if (event.key === "F10" && event.shiftKey && hasMenu) {
-						if (isContextOnly) openColumnContextMenu(column, isSortable, activeSort, event);
-						else {
-							event.preventDefault();
-							event.stopPropagation();
-							setOpenMenuColumnKey(column.key);
-						}
-						return;
-					}
-					if (!isSortable) return;
-					if (event.key !== "Enter" && event.key !== " ") return;
-					event.preventDefault();
-					onColumnSort?.(column.key);
-				} : void 0
+				...columnHeaderHandlers(column, sortState, hasMenu, isDraggable)
 			},
 			children: [content, canResize ? /* @__PURE__ */ jsx(ColumnResizer, {
 				column,
@@ -711,6 +528,29 @@ function TableView(props) {
 			}) : null]
 		}, column.key);
 	}
+	/**
+	* A data column's header as a control: a press or Enter/Space sorts it, a
+	* right-click or Shift+F10 opens its menu, and focus feeds Alt+Arrow
+	* reordering.
+	*/
+	function columnHeaderHandlers(column, sortState, hasMenu, isDraggable) {
+		const { isSortable } = sortState;
+		return {
+			onFocus: isColumnReorderable ? () => onColumnFocus?.(isDraggable ? column.key : null) : void 0,
+			onClick: isSortable ? () => onColumnSort?.(column.key) : void 0,
+			onContextMenu: hasMenu ? (event) => columnMenu.openColumnContextMenu(column, sortState, event) : void 0,
+			onKeyDown: isSortable || hasMenu ? (event) => {
+				if (event.key === "F10" && event.shiftKey && hasMenu) {
+					columnMenu.openColumnMenuFromKeyboard(column, sortState, event);
+					return;
+				}
+				if (!isSortable) return;
+				if (event.key !== "Enter" && event.key !== " ") return;
+				event.preventDefault();
+				onColumnSort?.(column.key);
+			} : void 0
+		};
+	}
 	function renderCell(column, row, rowIndex, rowKey, isLastRow, pinnedEdge, treeItemAria) {
 		const rangeKey = selectionRowKey(sectionOf(pinnedEdge), rowKey);
 		if (column.key === SELECTION_COLUMN_KEY) return renderSelectionCell(column, row, rowIndex, rowKey, isLastRow, pinnedEdge);
@@ -739,27 +579,9 @@ function TableView(props) {
 			isSelected: selection?.isSelected(rowKey) ?? false,
 			tree: pinnedEdge == null ? treeRowState(rowIndex) : void 0
 		};
-		const value = column.isStructural ? void 0 : getColumnValue(column, row, rowIndex);
-		const rendered = column.render ? column.render(value, row, rowIndex, ctx) : column.isStructural ? null : getColumnText(column, row, rowIndex);
-		const isText = typeof rendered === "string" || typeof rendered === "number" || typeof rendered === "bigint";
-		const content = isText && !column.autoHeight ? /* @__PURE__ */ jsx(TextItem, { children: String(rendered) }) : isText ? String(rendered) : rendered;
+		const content = renderCellContent(column, row, rowIndex, ctx);
 		const treeEntry = pinnedEdge == null ? tree?.entries[rowIndex] : void 0;
-		const displayContent = treeEntry && column.key === tree?.columnKey ? /* @__PURE__ */ jsxs("div", {
-			"data-element": "TreeContent",
-			style: { "--tree-level": String(treeEntry.level) },
-			children: [treeEntry.children.length > 0 ? /* @__PURE__ */ jsx(TableTreeToggle, {
-				...treeItemAria?.expandButtonProps,
-				"data-element": "TreeToggle",
-				tabIndex: -1,
-				children: /* @__PURE__ */ jsx(DirectionIcon, { to: tree.state.expandedKeys.has(treeEntry.key) ? "bottom" : "right" })
-			}) : /* @__PURE__ */ jsx(TableTreeTogglePlaceholder, {
-				"data-element": "TreeToggle",
-				"aria-hidden": "true"
-			}), /* @__PURE__ */ jsx("div", {
-				"data-element": "TreeValue",
-				children: content
-			})]
-		}) : content;
+		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";
@@ -1065,44 +887,13 @@ function TableView(props) {
 			onAction: menuActionHandler(row, rowKey, true)
 		}, void 0, "clientX" in event.nativeEvent ? event.nativeEvent : void 0);
 	});
-	function resolveColumnMenu(column) {
-		if (columnContextMenu === false || column.isStructural) return null;
-		const items = column.header?.menu;
-		return isMenuEmpty(items) ? null : items;
-	}
-	/** The reserved sort keys, labelled here so `column-menu.ts` stays pure. */
-	function columnMenuContext(column, isSortable, activeSort) {
-		return {
-			isSortable,
-			sort: activeSort?.direction ?? null,
-			disallowSortRemoval: column.disallowSortRemoval === true,
-			labels: {
-				"sort-asc": t("itemTable.sortAscending", "Sort ascending"),
-				"sort-desc": t("itemTable.sortDescending", "Sort descending"),
-				"clear-sort": t("itemTable.clearSort", "Clear sort")
-			}
-		};
-	}
-	function columnMenuActionHandler(column, closeAfter) {
-		return (action) => {
-			const normalized = normalizeMenuAction(action);
-			if (isColumnMenuSortKey(normalized)) onColumnSortChange?.(column.key, COLUMN_MENU_SORT_DIRECTION[normalized]);
-			column.header?.onMenuAction?.(normalized);
-			onColumnMenuAction?.(normalized, column.key);
-			if (closeAfter) contextMenu.close();
-		};
-	}
-	const openColumnContextMenu = useEvent((column, isSortable, activeSort, event) => {
-		const items = resolveColumnMenu(column);
-		if (items == null) return;
-		event.preventDefault();
-		event.stopPropagation();
-		contextMenu.open({
-			...columnMenuProps,
-			...column.header?.menuProps,
-			children: processColumnMenuItems(items, columnMenuContext(column, isSortable, activeSort)),
-			onAction: columnMenuActionHandler(column, true)
-		}, void 0, "clientX" in event.nativeEvent ? event.nativeEvent : void 0);
+	const columnMenu = useColumnMenu({
+		contextMenu,
+		columnContextMenu,
+		columnMenuProps,
+		columnMenuTriggerProps,
+		onColumnSortChange,
+		onColumnMenuAction
 	});
 	/** Resolves the row a pointer or keyboard event landed in. */
 	function rowFromEvent(target) {
@@ -1195,17 +986,25 @@ function TableView(props) {
 		"aria-colcount": columnCount,
 		"aria-multiselectable": selection?.selectionMode === "multiple" ? true : void 0
 	};
-	let bodyContent;
-	if (error != null) bodyContent = renderStateRow(error);
-	else if (showSkeleton) bodyContent = renderSkeletonRows();
-	else if (showBlank) bodyContent = null;
-	else if (!hasRows) bodyContent = renderStateRow(isFiltered ? noResultsLabel : emptyLabel);
-	else if (shouldVirtualize) bodyContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		renderSpacerRow(paddingTop, "top"),
-		virtualItems.map((v) => withDropIndicators(rows[v.index], v.index, true)),
-		renderSpacerRow(paddingBottom, "bottom")
-	] });
-	else bodyContent = rows.map((row, index) => withDropIndicators(row, index));
+	const tableStyle = layout.totalWidth != null ? { width: layout.totalWidth } : void 0;
+	/**
+	* What `<tbody>` holds between the pinned rows: the error, the loading
+	* skeleton, nothing at all, the empty state, or the rows — in that order of
+	* precedence.
+	*/
+	function renderBodyContent() {
+		if (error != null) return renderStateRow(error);
+		if (showSkeleton) return renderSkeletonRows();
+		if (showBlank) return null;
+		if (!hasRows) return renderStateRow(isFiltered ? noResultsLabel : emptyLabel);
+		if (shouldVirtualize) return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			renderSpacerRow(paddingTop, "top"),
+			virtualItems.map((v) => withDropIndicators(rows[v.index], v.index, true)),
+			renderSpacerRow(paddingBottom, "bottom")
+		] });
+		return rows.map((row, index) => withDropIndicators(row, index));
+	}
+	const bodyContent = renderBodyContent();
 	const tableContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		colGroup,
 		isHeaderHidden ? null : /* @__PURE__ */ jsx("thead", {
@@ -1323,11 +1122,11 @@ function TableView(props) {
 				children: tree ? /* @__PURE__ */ jsx(TreeGridTable, {
 					tree,
 					tableProps,
-					style: layout.totalWidth != null ? { width: layout.totalWidth } : void 0,
+					style: tableStyle,
 					children: tableContent
 				}) : /* @__PURE__ */ jsx("table", {
 					...tableProps,
-					style: layout.totalWidth != null ? { width: layout.totalWidth } : void 0,
+					style: tableStyle,
 					children: tableContent
 				})
 			}),