@cube-dev/ui-kit 0.0.0-canary-331ae74 → 0.0.0-canary-617ee03

package/dist/components/content/Tree/use-checkbox-tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-331ae74 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-617ee03 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { c } from "react/compiler-runtime";
 import { useState } from "react";

package/dist/components/content/Tree/use-load-data.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-331ae74 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-617ee03 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { isDevEnvOrTest } from "../../../utils/is-dev-env.js";
 import { c } from "react/compiler-runtime";

package/dist/components/content/highlightText.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-331ae74 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-617ee03 | Cube Dev Team */
 import { _Text } from "./Text.js";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/content/use-auto-tooltip.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-331ae74 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-617ee03 | Cube Dev Team */
 import { TooltipProvider } from "../overlays/Tooltip/TooltipProvider.js";
 import { c } from "react/compiler-runtime";
 import { useEffect, useRef, useState } from "react";

package/dist/components/data/DataTable/DataTable.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-331ae74 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-617ee03 | Cube Dev Team */
 import { extractStyles, mergeStyleLayers } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";

package/dist/components/data/ItemTable/ItemTable.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-331ae74 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-617ee03 | Cube Dev Team */
 import { extractStyles, mergeStyleLayers } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/data/ItemTable/ItemTableBulkBar.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-331ae74 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-617ee03 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { _Text } from "../../content/Text.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/data/ItemTable/ItemTableDragPreview.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-331ae74 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-617ee03 | Cube Dev Team */
 import { _Text } from "../../content/Text.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { c } from "react/compiler-runtime";

package/dist/components/data/ItemTable/ItemTableFooter.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-331ae74 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-617ee03 | Cube Dev Team */
 import { _Pagination } from "../../navigation/Pagination/Pagination.js";
 import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";

package/dist/components/data/ItemTable/ItemTableToolbar.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-331ae74 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-617ee03 | Cube Dev Team */
 import { useI18n } from "../../../i18n/useI18n.js";
 import { Button } from "../../actions/index.js";
 import { ReloadIcon } from "../../../icons/ReloadIcon.js";

package/dist/components/data/ItemTable/use-item-table-column-widths.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-331ae74 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-617ee03 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { freezeColumnWidths, useTableColumns } from "../TableBase/use-table-columns.js";
 import { c } from "react/compiler-runtime";

package/dist/components/data/ItemTable/use-item-table-drag-drop.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-331ae74 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-617ee03 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { isTableTreeDescendant } from "../TableBase/table-tree.js";
 import { ItemTableDragPreview } from "./ItemTableDragPreview.js";

package/dist/components/data/ItemTable/use-item-table-pagination.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-331ae74 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-617ee03 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { clampPage, getPageInfo } from "../../navigation/Pagination/use-pagination.js";
 import { reindexTableTree } from "../TableBase/table-tree.js";

package/dist/components/data/ItemTable/use-item-table-selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-331ae74 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-617ee03 | Cube Dev Team */
 import { flattenTableTree } from "../TableBase/table-tree.js";
 import { useTableSelection } from "../TableBase/use-table-selection.js";
 import { c } from "react/compiler-runtime";

package/dist/components/data/ItemTable/use-item-table-sort.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-331ae74 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-617ee03 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { sortTableTree } from "../TableBase/table-tree.js";
 import { compareByColumn, useTableSort } from "../TableBase/use-table-sort.js";

package/dist/components/data/ItemTable/use-item-table-tree-model.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-331ae74 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-617ee03 | Cube Dev Team */
 import { useWarn } from "../../../_internal/hooks/use-warn.js";
 import { buildTableTree } from "../TableBase/table-tree.js";
 import { c } from "react/compiler-runtime";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-331ae74 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-617ee03 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { c } from "react/compiler-runtime";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-331ae74 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-617ee03 | Cube Dev Team */
 //#region src/components/data/TableBase/RowCollection.ts
 /**
 * A `Collection<Node<T>>` over a plain row array.

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-331ae74 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-617ee03 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { c } from "react/compiler-runtime";
 import { useEffect, useRef, useState } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-331ae74 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-617ee03 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
 import { c } from "react/compiler-runtime";

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

@@ -1,4 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-331ae74 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-617ee03 | 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";
@@ -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 } = 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,28 @@ 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(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 +405,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 +466,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 +496,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 +613,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 +660,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 +677,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 +810,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);
 	const focusedTreeKey = tree?.state.selectionManager.focusedKey;
 	useEffect(() => {
 		if (!shouldVirtualize || focusedTreeKey == null || !tree) return;