@cube-dev/ui-kit 0.201.0 → 0.203.0

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.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";
@@ -23,6 +23,7 @@ import { columnCellClassName } from "./column-styles.js";
 import { buildColumnTints, tintSlot } from "./column-tint.js";
 import { ColumnResizer } from "./ColumnResizer.js";
 import { isMenuEmpty, normalizeMenuAction } from "./row-menu.js";
+import { buildTableBodyItems } from "./table-body-sections.js";
 import { TableHeaderCell } from "./TableHeaderCell.js";
 import { TableRow, TableRowDropIndicator } from "./TableRow.js";
 import { TableRowLink } from "./TableRowLink.js";
@@ -56,10 +57,11 @@ function isCellControl(target, row) {
 	const control = target.closest(CELL_CONTROL_SELECTOR);
 	return control != null && control !== row;
 }
-function flatRowTabStop(restingRow, visibleRow, mountedRows, range) {
+function flatRowTabStop(restingRow, visibleRow, mountedRows, range, recordIndices) {
 	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;
+	const restingIndex = recordIndices?.[restingRow.index] ?? restingRow.index;
+	if (range && restingIndex >= range.startIndex && restingIndex <= range.endIndex) return restingRow;
+	return visibleRow && mountedRows.some((item) => item.index === (recordIndices?.[visibleRow.index] ?? visibleRow.index)) ? visibleRow : null;
 }
 function scrollerTabStop(hasCellSelection, hasRowNavigation, restingRow, tabStopRow) {
 	if (hasRowNavigation && restingRow && !tabStopRow) return 0;
@@ -139,10 +141,25 @@ const ESTIMATED_ROW_HEIGHT = {
 	large: 48,
 	xlarge: 56
 };
+const ESTIMATED_HEADER_HEIGHT = {
+	xsmall: 24,
+	small: 28,
+	medium: 32,
+	large: 40,
+	xlarge: 48
+};
 function pinStyle(column) {
 	if (column.pinOffset == null) return void 0;
 	return { ["--pin-offset"]: `${column.pinOffset}px` };
 }
+/** Reuse the adapter's measured scrollport; captions need no width observer. */
+function sectionCaptionTokens(layout, tableWidth) {
+	if (!layout) return void 0;
+	return {
+		"$section-table-width": tableWidth != null ? `${tableWidth}px` : "100%",
+		"$section-viewport-width": layout.viewportWidth != null ? `${layout.viewportWidth}px` : "100%"
+	};
+}
 /** Default text keeps its tooltip tree while the virtual window moves. */
 function TableCellContent(t0) {
 	const $ = c(8);
@@ -217,7 +234,7 @@ function renderTreeCellContent(entry, isExpanded, expandButtonProps, content) {
 * bookkeeping and the tasty sub-element contract have a single implementation.
 */
 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 { qa, rows, rowKeys, sectionLayout, 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;
@@ -250,9 +267,9 @@ function TableView(props) {
 	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);
+	const bodyRowCount = sectionLayout?.rowCount ?? Math.max(totalRowCount ?? rows.length, rowIndexOffset + rows.length);
 	/** 1-based `aria-rowindex` for the i-th body row of the current page. */
-	const bodyRowIndex = (rowIndex) => headerRowCount + pinnedTopCount + rowIndexOffset + rowIndex + 1;
+	const bodyRowIndex = (rowIndex) => headerRowCount + pinnedTopCount + (sectionLayout?.rowIndices[rowIndex] ?? rowIndexOffset + rowIndex) + 1;
 	const bodyRowKey = (row, rowIndex) => rowKeys?.[rowIndex] ?? getRowKey(row, rowIndex);
 	const treeRowState = (rowIndex) => {
 		const entry = tree?.entries[rowIndex];
@@ -801,7 +818,7 @@ function TableView(props) {
 			...Object.fromEntries(Object.entries(extra?.mods ?? {}).filter(([, active]) => active).map(([name]) => [`data-${name}`, ""]))
 		};
 	}
-	function renderRow(row, rowIndex, isVirtual = false) {
+	function renderRow(row, rowIndex, isVirtual = false, virtualIndex = rowIndex) {
 		const { height, ...rowProps } = getRowElementProps(row, rowIndex);
 		const rowKey = bodyRowKey(row, rowIndex);
 		const treeNode = tree?.nodes[rowIndex];
@@ -810,7 +827,7 @@ function TableView(props) {
 			rowKey,
 			rowProps,
 			height,
-			index: isVirtual ? rowIndex : void 0,
+			index: isVirtual ? virtualIndex : void 0,
 			measureRef: isVirtual ? virtualizer.measureElement : void 0,
 			dragState: isReorderable ? dragState : void 0,
 			dropState: isReorderable ? dropState : void 0,
@@ -826,7 +843,7 @@ function TableView(props) {
 		return /* @__PURE__ */ jsx(TableRowLink, {
 			to: link,
 			children: render
-		}, rowProps["data-key"]);
+		}, `record:${rowProps["data-key"]}`);
 	}
 	function renderSpacerRow(height, position) {
 		if (height <= 0) return null;
@@ -846,9 +863,9 @@ function TableView(props) {
 	* The indicators render nothing unless a drag is in flight, so a table that
 	* is merely *capable* of dragging keeps its ordinary structure.
 	*/
-	function withDropIndicators(row, index, isVirtual = false) {
+	function withDropIndicators(row, index, isVirtual = false, virtualIndex = index) {
 		const rowKey = bodyRowKey(row, index);
-		const rowNode = renderRow(row, index, isVirtual);
+		const rowNode = renderRow(row, index, isVirtual, virtualIndex);
 		if (!isReorderable || !dropState) return rowNode;
 		return /* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsx(TableRowDropIndicator, {
@@ -871,17 +888,26 @@ function TableView(props) {
 	const showSkeleton = isLoading && loadingIndicator !== "none" && (!hasRows || loadingIndicator === "skeleton");
 	const showBlank = isLoading && !hasRows && loadingIndicator === "none";
 	const shouldVirtualize = !isAutoHeight && hasRows && error == null && (isVirtualized === true || isVirtualized === "auto" && rows.length > virtualizeThreshold);
-	const getItemKey = useCallback((index) => String(rowKeys?.[index] ?? getRowKey(rows[index], index)), [
+	const bodyItems = useMemo(() => sectionLayout ? buildTableBodyItems(rows.length, sectionLayout) : void 0, [rows.length, sectionLayout]);
+	const getItemKey = useCallback((index) => {
+		const item = bodyItems?.items[index];
+		if (item?.kind === "section") return `section:${typeof item.section.key}:${item.section.key}`;
+		const rowIndex = item?.rowIndex ?? index;
+		const key = String(rowKeys?.[rowIndex] ?? getRowKey(rows[rowIndex], rowIndex));
+		return bodyItems ? `record:${key}` : key;
+	}, [
 		rows,
 		rowKeys,
-		getRowKey
+		getRowKey,
+		bodyItems
 	]);
 	const estimatedRowHeight = (rowHeight ?? (rowSizeKey ? SIZES[rowSizeKey] : ESTIMATED_ROW_HEIGHT[size ?? "medium"])) + 1;
+	const estimatedSectionHeight = (headerHeight ?? ESTIMATED_HEADER_HEIGHT[size]) + 1;
 	const virtualizer = useVirtualizer({
-		count: shouldVirtualize ? rows.length : 0,
+		count: shouldVirtualize ? bodyItems?.items.length ?? rows.length : 0,
 		getScrollElement: () => scrollerRef.current,
 		getItemKey,
-		estimateSize: () => estimatedRowHeight,
+		estimateSize: (index) => bodyItems?.items[index]?.kind === "section" ? estimatedSectionHeight : estimatedRowHeight,
 		measureElement: (element) => element.getBoundingClientRect().height,
 		overscan
 	});
@@ -890,7 +916,11 @@ function TableView(props) {
 		virtualizer.measure();
 		virtualizer.getTotalSize();
 		localBodyRef.current?.querySelectorAll("tr[data-index]").forEach((element) => virtualizer.measureElement(element));
-	}, [estimatedRowHeight, virtualizer]);
+	}, [
+		estimatedRowHeight,
+		estimatedSectionHeight,
+		virtualizer
+	]);
 	useTableTooltipRefresh(scrollerEl, virtualizer.isScrolling, refreshAppearance, resetRange);
 	const focusedTreeKey = tree?.state.selectionManager.focusedKey;
 	useEffect(() => {
@@ -975,7 +1005,11 @@ function TableView(props) {
 	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);
+	const tabStopRow = flatRowTabStop(restingRow, shouldVirtualize && virtualItems.length && hasFlatRowNavigation ? focusableRowFrom(recordIndexAtItem(virtualizer.range?.startIndex ?? virtualItems[0].index), 1) : null, shouldVirtualize ? virtualItems : void 0, virtualizer.range, bodyItems?.recordIndices);
+	function recordIndexAtItem(index) {
+		const item = bodyItems?.items[index];
+		return item?.kind === "section" ? item.section.rowIndex : item?.rowIndex ?? index;
+	}
 	function mountedRow(key) {
 		return Array.from(localBodyRef.current?.querySelectorAll("tr[data-element=\"Row\"][data-key]") ?? []).find((element) => element.dataset.key === String(key));
 	}
@@ -985,7 +1019,7 @@ function TableView(props) {
 		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];
+			const offset = virtualizer.getOffsetForIndex(bodyItems?.recordIndices[next.index] ?? next.index, "auto")?.[0];
 			if (offset != null) virtualizer.scrollToOffset(offset);
 		}
 		const target = mountedRow(next.key);
@@ -1274,10 +1308,40 @@ function TableView(props) {
 		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)),
+			virtualItems.map((v) => renderBodyItem(bodyItems?.items[v.index], v.index, true)),
 			renderSpacerRow(paddingBottom, "bottom")
 		] });
-		return rows.map((row, index) => withDropIndicators(row, index));
+		return bodyItems ? bodyItems.items.map((item, index) => renderBodyItem(item, index)) : rows.map((row, index) => withDropIndicators(row, index));
+	}
+	function renderBodyItem(item, index, isVirtual = false) {
+		if (item?.kind !== "section") {
+			const rowIndex = item?.rowIndex ?? index;
+			return withDropIndicators(rows[rowIndex], rowIndex, isVirtual, index);
+		}
+		const { section } = item;
+		return /* @__PURE__ */ jsx("tr", {
+			"data-element": "SectionRow",
+			"data-section-key": String(section.key),
+			role: "row",
+			"aria-rowindex": headerRowCount + pinnedTopCount + section.index + 1,
+			"data-index": isVirtual ? index : void 0,
+			ref: isVirtual ? virtualizer.measureElement : void 0,
+			children: Array.from({ length: Math.ceil(Math.max(columnCount, 1) / 1e3) }, (_, index) => /* @__PURE__ */ jsx("td", {
+				"data-element": "SectionCell",
+				role: index === 0 ? "gridcell" : "presentation",
+				"aria-hidden": index > 0 || void 0,
+				colSpan: Math.min(Math.max(columnCount, 1) - index * 1e3, 1e3),
+				"aria-colindex": index === 0 ? 1 : void 0,
+				"aria-colspan": index === 0 ? Math.max(columnCount, 1) : void 0,
+				children: index === 0 ? /* @__PURE__ */ jsx("div", {
+					"data-element": "SectionContent",
+					children: /* @__PURE__ */ jsx("div", {
+						"data-element": "SectionLabel",
+						children: section.title
+					})
+				}) : null
+			}, index))
+		}, `section:${typeof section.key}:${section.key}`);
 	}
 	const bodyContent = renderBodyContent();
 	const tableContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [
@@ -1330,6 +1394,7 @@ function TableView(props) {
 		ref: rootRef,
 		qa: qa || "Table",
 		styles: mergedStyles,
+		tokens: sectionCaptionTokens(sectionLayout, layout.totalWidth),
 		mods: {
 			size,
 			shape,