@cube-dev/ui-kit 0.193.1 → 0.194.0

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

@@ -1,4 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.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";
@@ -15,7 +16,7 @@ import { SIZES, SIZE_NAME_TO_KEY } from "../../../tokens/sizes.js";
 import { getColorTheme, useColorTheme } from "../../../tokens/color-theme.js";
 import { MoreIcon } from "../../../icons/MoreIcon.js";
 import { __Checkbox } from "../../fields/Checkbox/Checkbox.js";
-import { Placeholder } from "../../content/Placeholder/Placeholder.js";
+import { Placeholder, PlaceholderGroupContext } from "../../content/Placeholder/Placeholder.js";
 import { Skeleton } from "../../content/Skeleton/Skeleton.js";
 import { TableElement, TableHeaderItem, TableTreeToggle, TableTreeTogglePlaceholder } from "./styled.js";
 import { renderColumnHeaderContent, resolveColumnSort } from "./column-header.js";
@@ -30,6 +31,7 @@ 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 { canWindowColumns, useColumnWindow } from "./use-column-window.js";
 import { useRowMoveAnimation } from "./use-row-move-animation.js";
 import { useScrollability } from "./use-scrollability.js";
 import { getColumnText, getColumnValue } from "./use-table-columns.js";
@@ -187,6 +189,8 @@ function TableView(props) {
 	const toast = useToast();
 	const [scrollerEl, setScrollerEl] = useState(null);
 	const scrollerRef = useRef(null);
+	const textSlotProps = useSlotProps({}, "text");
+	const { segments: bodyColumns, refreshAppearance, resetRange } = useColumnWindow(layout, scrollerEl, isVirtualized !== false && !isAutoHeight && !bodyStyles && !rowStyles && !cellStyles && Object.keys(textSlotProps).length === 0 && (!contentPreset || contentPreset === "t4") && canWindowColumns(columns, styles), tree?.columnKey);
 	const localBodyRef = useRef(null);
 	const handleBodyRef = useCallback((element) => {
 		localBodyRef.current = element;
@@ -372,6 +376,31 @@ function TableView(props) {
 			})
 		});
 	}
+	function renderColumnSpacer(key, span, pinnedEdge, isLastRow = false) {
+		return /* @__PURE__ */ jsx("td", {
+			"data-element": "ColumnSpacer",
+			"data-pinned": pinnedEdge,
+			"data-last-row": isLastRow ? "" : void 0,
+			colSpan: span,
+			"aria-hidden": "true",
+			role: "presentation"
+		}, key);
+	}
+	function renderSkeletonCell(column) {
+		return /* @__PURE__ */ jsx("td", {
+			"data-element": "Cell",
+			"data-pin": column.pin,
+			"data-pin-edge": column.isPinEdge ? "" : void 0,
+			"data-align": column.align,
+			role: "gridcell",
+			"aria-colindex": column.ariaColIndex,
+			style: pinStyle(column),
+			children: /* @__PURE__ */ jsx(PlaceholderGroupContext.Provider, {
+				value: true,
+				children: /* @__PURE__ */ jsx(Placeholder, {})
+			})
+		}, `column-cell:${column.key}`);
+	}
 	function renderSkeletonRows(count = skeletonRowCount, keyPrefix = "skeleton") {
 		return Array.from({ length: count }, (_, rowIndex) => /* @__PURE__ */ jsx("tr", {
 			"data-element": "Row",
@@ -379,16 +408,7 @@ function TableView(props) {
 			role: "row",
 			"aria-rowindex": bodyRowIndex(rowIndex),
 			"aria-busy": "true",
-			children: columns.map((column) => /* @__PURE__ */ jsx("td", {
-				"data-element": "Cell",
-				"data-pin": column.pin,
-				"data-pin-edge": column.isPinEdge ? "" : void 0,
-				"data-align": column.align,
-				role: "gridcell",
-				"aria-colindex": column.ariaColIndex,
-				style: pinStyle(column),
-				children: /* @__PURE__ */ jsx(Placeholder, {})
-			}, column.key))
+			children: bodyColumns.map((segment) => segment.column ? renderSkeletonCell(segment.column) : renderColumnSpacer(segment.key, segment.span))
 		}, `${keyPrefix}-${rowIndex}`));
 	}
 	function renderSelectionHeaderCell(column, rowSpan = 1) {
@@ -449,7 +469,7 @@ function TableView(props) {
 					children: checkbox
 				}) : checkbox
 			})
-		}, column.key);
+		}, `column-cell:${column.key}`);
 	}
 	function renderRowMenuCell(column, row, rowIndex, rowKey, isLastRow, pinnedEdge) {
 		const items = resolveRowMenu(row, rowIndex, rowKey);
@@ -479,7 +499,7 @@ function TableView(props) {
 					children: items
 				})] })
 			})
-		}, column.key);
+		}, `column-cell:${column.key}`);
 	}
 	function renderHeaderCell(column, rowSpan = 1) {
 		if (column.key === SELECTION_COLUMN_KEY) return renderSelectionHeaderCell(column, rowSpan);
@@ -596,7 +616,7 @@ function TableView(props) {
 			"aria-colindex": column.ariaColIndex,
 			style: pinStyle(column),
 			children: pinnedEdge ? null : rowNumberOffset + rowIndex + 1
-		}, column.key);
+		}, `column-cell:${column.key}`);
 		if (column.key === ROW_MENU_COLUMN_KEY) return renderRowMenuCell(column, row, rowIndex, rowKey, isLastRow, pinnedEdge);
 		const ctx = {
 			row,
@@ -643,7 +663,7 @@ function TableView(props) {
 				tabIndex: -1,
 				"aria-label": getColumnText(column, row, rowIndex) ?? void 0
 			}) : null]
-		}, column.key);
+		}, `column-cell:${column.key}`);
 	}
 	/**
 	* A pinned row — a total or subtotal.
@@ -660,13 +680,13 @@ function TableView(props) {
 			"data-pinned": edge,
 			role: "row",
 			"aria-rowindex": pinnedRowIndex(index, edge),
-			children: columns.map((column) => renderCell(column, row, index, rowKey, false, edge))
+			children: bodyColumns.map((segment) => segment.column ? renderCell(segment.column, row, index, rowKey, false, edge) : renderColumnSpacer(segment.key, segment.span, edge))
 		}, `pinned-${edge}-${rowKey}`);
 	}
 	/** The cells of one body row. Shared by both render paths. */
 	function renderRowCells(row, rowIndex, treeItemAria) {
 		const rowKey = bodyRowKey(row, rowIndex);
-		return columns.map((column) => renderCell(column, row, rowIndex, rowKey, rowIndex === rows.length - 1, void 0, treeItemAria));
+		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));
 	}
 	/**
 	* The `<tr>` shell. Virtuoso owns the element in the virtualized path (it
@@ -793,7 +813,7 @@ function TableView(props) {
 		virtualizer.getTotalSize();
 		localBodyRef.current?.querySelectorAll("tr[data-index]").forEach((element) => virtualizer.measureElement(element));
 	}, [estimatedRowHeight, virtualizer]);
-	useTableTooltipRefresh(scrollerEl, virtualizer.isScrolling);
+	useTableTooltipRefresh(scrollerEl, virtualizer.isScrolling, refreshAppearance, resetRange);
 	const focusedTreeKey = tree?.state.selectionManager.focusedKey;
 	useEffect(() => {
 		if (!shouldVirtualize || focusedTreeKey == null || !tree) return;