@cube-dev/ui-kit 0.0.0-canary-015f6e5 → 0.0.0-canary-a818f8a

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-015f6e5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a818f8a | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { TooltipProvider } from "../../overlays/Tooltip/TooltipProvider.js";
@@ -203,9 +203,10 @@ function TreeGridTable(props) {
 * bookkeeping and the tasty sub-element contract have a single implementation.
 */
 function TableView(props) {
-	const { qa, rows, rowKeys, getRowKey, layout, onScrollerRef, rootRef, size = "medium", shape = "plain", rowSize, rowHeight, headerHeight, isHeaderHidden = false, isStriped = false, hasColumnDividers, isRowMoveAnimated = true, isHeaderSticky = true, 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 { qa, rows, rowKeys, getRowKey, layout, columnHeaderPaths, onScrollerRef, rootRef, size = "medium", shape = "plain", rowSize, rowHeight, headerHeight, isHeaderHidden = false, isStriped = false, hasColumnDividers, isRowMoveAnimated = true, isHeaderSticky = true, 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;
 	const columnCount = columns.length;
+	const headerGroupDepth = columns.reduce((depth, column) => Math.max(depth, columnHeaderPaths?.get(column.key)?.length ?? 0), 0);
 	/**
 	* `rowSize` resolved to the size scale, or `null` when it was not given.
 	*
@@ -239,7 +240,7 @@ function TableView(props) {
 		setScrollerEl(element);
 		onScrollerRef(element);
 	}, [onScrollerRef]);
-	const headerRowCount = isHeaderHidden ? 0 : 1;
+	const headerRowCount = isHeaderHidden ? 0 : headerGroupDepth + 1;
 	const pinnedTopCount = pinnedTopRows?.length ?? 0;
 	const pinnedBottomCount = pinnedBottomRows?.length ?? 0;
 	const bodyRowCount = Math.max(totalRowCount ?? rows.length, rowIndexOffset + rows.length);
@@ -267,6 +268,10 @@ function TableView(props) {
 			...tints.headerCellStyles,
 			...headerCellStyles
 		} } : null,
+		...headerPreset || headerCellStyles ? { HeaderGroupCell: {
+			...headerPreset ? { preset: headerPreset } : null,
+			...headerCellStyles
+		} } : null,
 		...bodyStyles ? { Body: bodyStyles } : null,
 		...rowStyles ? { Row: rowStyles } : null,
 		...cellStyles || tints.cellStyles ? { Cell: {
@@ -420,7 +425,7 @@ function TableView(props) {
 			}, column.key))
 		}, `${keyPrefix}-${rowIndex}`));
 	}
-	function renderSelectionHeaderCell(column) {
+	function renderSelectionHeaderCell(column, rowSpan = 1) {
 		return /* @__PURE__ */ jsx("th", {
 			"data-element": "HeaderCell",
 			"data-key": column.key,
@@ -430,6 +435,7 @@ function TableView(props) {
 			"data-last-column": lastColumnFlag(column),
 			role: "columnheader",
 			scope: "col",
+			rowSpan: rowSpan > 1 ? rowSpan : void 0,
 			tabIndex: -1,
 			"aria-colindex": column.ariaColIndex,
 			style: pinStyle(column),
@@ -509,8 +515,8 @@ function TableView(props) {
 			})
 		}, column.key);
 	}
-	function renderHeaderCell(column) {
-		if (column.key === SELECTION_COLUMN_KEY) return renderSelectionHeaderCell(column);
+	function renderHeaderCell(column, rowSpan = 1) {
+		if (column.key === SELECTION_COLUMN_KEY) return renderSelectionHeaderCell(column, rowSpan);
 		if (column.key === ROW_NUMBER_COLUMN_KEY) return /* @__PURE__ */ jsx("th", {
 			"data-element": "HeaderCell",
 			"data-key": column.key,
@@ -518,6 +524,7 @@ function TableView(props) {
 			"data-last-column": lastColumnFlag(column),
 			role: "columnheader",
 			scope: "col",
+			rowSpan: rowSpan > 1 ? rowSpan : void 0,
 			tabIndex: -1,
 			"aria-colindex": column.ariaColIndex,
 			style: pinStyle(column)
@@ -531,6 +538,7 @@ function TableView(props) {
 			"data-last-column": lastColumnFlag(column),
 			role: "columnheader",
 			scope: "col",
+			rowSpan: rowSpan > 1 ? rowSpan : void 0,
 			tabIndex: -1,
 			"aria-colindex": column.ariaColIndex,
 			style: pinStyle(column)
@@ -620,6 +628,7 @@ function TableView(props) {
 				"data-tint": tintSlot(tints, column.key, "header"),
 				role: "columnheader",
 				scope: "col",
+				rowSpan: rowSpan > 1 ? rowSpan : void 0,
 				tabIndex: isSortable || hasMenu || isDraggable ? 0 : -1,
 				"aria-colindex": column.ariaColIndex,
 				"aria-sort": activeSort ? ARIA_SORT[activeSort.direction] : void 0,
@@ -1062,17 +1071,70 @@ function TableView(props) {
 	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)) });
-	const headerRow = isHeaderHidden ? null : /* @__PURE__ */ jsx("tr", {
-		"data-element": "HeadRow",
-		role: "row",
-		"aria-rowindex": 1,
-		ref: headRowRef,
-		...headCollectionProps,
-		onKeyDownCapture: (event) => {
-			if (event.target?.closest?.("[data-element=\"Resizer\"]")) return;
-			headCollectionProps?.onKeyDownCapture?.(event);
-		},
-		children: columns.map(renderHeaderCell)
+	function pathsSharePrefix(left, right, depth) {
+		for (let index = 0; index <= depth; index++) if (left[index]?.key !== right[index]?.key) return false;
+		return true;
+	}
+	function renderHeaderGroupCell(group, segment, depth) {
+		const first = segment[0];
+		const last = segment[segment.length - 1];
+		const pin = segment.every((column) => column.pin === first.pin) ? first.pin : void 0;
+		const pinOffset = pin === "start" ? first.pinOffset : pin === "end" ? last.pinOffset : null;
+		return /* @__PURE__ */ jsx("th", {
+			"data-element": "HeaderGroupCell",
+			"data-key": group.key,
+			"data-pin": pin,
+			"data-pin-edge": segment.some((column) => column.isPinEdge) ? "" : void 0,
+			"data-last-column": last.index === columnCount - 1 ? "" : void 0,
+			"data-align": "center",
+			role: "columnheader",
+			scope: "colgroup",
+			tabIndex: -1,
+			"aria-colindex": first.ariaColIndex,
+			colSpan: segment.length,
+			style: pinOffset == null ? void 0 : { ["--pin-offset"]: `${pinOffset}px` },
+			children: /* @__PURE__ */ jsx(TableHeaderItem, { children: group.title })
+		}, `${depth}:${first.key}:${group.key}`);
+	}
+	function renderHeaderRowCells(depth) {
+		const cells = [];
+		for (let columnIndex = 0; columnIndex < columns.length;) {
+			const column = columns[columnIndex];
+			const path = columnHeaderPaths?.get(column.key) ?? [];
+			if (path.length < depth) {
+				columnIndex++;
+				continue;
+			}
+			if (path.length === depth) {
+				cells.push(renderHeaderCell(column, headerRowCount - depth));
+				columnIndex++;
+				continue;
+			}
+			let segmentEnd = columnIndex + 1;
+			while (segmentEnd < columns.length) {
+				const nextPath = columnHeaderPaths?.get(columns[segmentEnd].key) ?? [];
+				if (nextPath.length <= depth || columns[segmentEnd].pin !== column.pin || !pathsSharePrefix(path, nextPath, depth)) break;
+				segmentEnd++;
+			}
+			cells.push(renderHeaderGroupCell(path[depth], columns.slice(columnIndex, segmentEnd), depth));
+			columnIndex = segmentEnd;
+		}
+		return cells;
+	}
+	const headerRows = isHeaderHidden ? null : Array.from({ length: headerRowCount }, (_, depth) => {
+		const isLeafRow = depth === headerRowCount - 1;
+		return /* @__PURE__ */ jsx("tr", {
+			"data-element": "HeadRow",
+			role: "row",
+			"aria-rowindex": depth + 1,
+			ref: isLeafRow ? headRowRef : void 0,
+			...isLeafRow ? headCollectionProps : void 0,
+			onKeyDownCapture: isLeafRow ? (event) => {
+				if (event.target?.closest?.("[data-element=\"Resizer\"]")) return;
+				headCollectionProps?.onKeyDownCapture?.(event);
+			} : void 0,
+			children: renderHeaderRowCells(depth)
+		}, depth);
 	});
 	const tableProps = {
 		"data-element": "Table",
@@ -1098,7 +1160,7 @@ function TableView(props) {
 		colGroup,
 		isHeaderHidden ? null : /* @__PURE__ */ jsx("thead", {
 			"data-element": "Head",
-			children: headerRow
+			children: headerRows
 		}),
 		/* @__PURE__ */ jsxs("tbody", {
 			"data-element": "Body",