@cube-dev/ui-kit 0.158.0 → 0.159.0

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

@@ -1,25 +1,33 @@
-/** @license MIT | @cube-dev/ui-kit v0.158.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.159.0 | 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";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { useI18n } from "../../../i18n/useI18n.js";
-import { UpIcon } from "../../../icons/UpIcon.js";
+import { ArrowNarrowDownIcon } from "../../../icons/ArrowNarrowDownIcon.js";
+import { ArrowNarrowUpIcon } from "../../../icons/ArrowNarrowUpIcon.js";
 import { MoreIcon } from "../../../icons/MoreIcon.js";
 import { _MenuTrigger } from "../../actions/Menu/MenuTrigger.js";
 import { __Menu } from "../../actions/Menu/Menu.js";
 import { Action } from "../../actions/Action/Action.js";
 import { useContextMenu } from "../../actions/use-context-menu.js";
 import { useToast } from "../../overlays/Toast/useToast.js";
+import { usePaletteVersion } from "../../../tokens/palette-config.js";
+import { SIZES, SIZE_NAME_TO_KEY } from "../../../tokens/sizes.js";
+import { getColorTheme, useColorTheme } from "../../../tokens/color-theme.js";
 import { __Checkbox } from "../../fields/Checkbox/Checkbox.js";
 import { Placeholder } from "../../content/Placeholder/Placeholder.js";
 import { Skeleton } from "../../content/Skeleton/Skeleton.js";
-import { ColumnResizer } from "./ColumnResizer.js";
 import { ROW_MENU_COLUMN_KEY, isMenuEmpty, normalizeMenuAction } from "./row-menu.js";
+import { COLUMN_MENU_SORT_DIRECTION, isColumnMenuSortKey, processColumnMenuItems } from "./column-menu.js";
+import { buildColumnTints, tintSlot } from "./column-tint.js";
+import { ColumnResizer } from "./ColumnResizer.js";
 import { TableElement, TableHeaderItem } from "./styled.js";
+import { TableHeaderCell } from "./TableHeaderCell.js";
 import { TableRow, TableRowDropIndicator } from "./TableRow.js";
 import { selectionRowKey } from "./types.js";
 import { toTsv } from "./use-cell-selection.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";
@@ -48,6 +56,23 @@ const ARIA_SORT = {
 	desc: "descending"
 };
 /**
+* Registers one column tint's tokens.
+*
+* A component per theme rather than a loop of `useColorTheme` calls: the number
+* of tinted columns is data-dependent, and hooks cannot be called in a loop. Each
+* of these has a fixed hook count, and mounting a different NUMBER of them is
+* fine. Keyed on the theme name, so remounting only happens when the set of
+* colours actually changes.
+*
+* Renders nothing — `useColorTheme` injects into a global slot keyed by the
+* theme's own hash, so two tables sharing a colour share one injection and
+* neither can evict the other's.
+*/
+function ColumnTintRegistrar({ config }) {
+	useColorTheme(config);
+	return null;
+}
+/**
 * Content height per size step, mirroring `$row-height` in `styled.ts`. Only the
 * initial estimate — every rendered row is measured, so a wrong guess costs a
 * scrollbar adjustment, not a layout bug. The `+ 1` is the row separator.
@@ -83,13 +108,32 @@ function pinStyle(column) {
 * bookkeeping and the tasty sub-element contract have a single implementation.
 */
 function TableView(props) {
-	const { qa, rows, getRowKey, layout, onScrollerRef, rootRef, size = "medium", shape = "plain", 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, isReorderable = false, dragState, dropState, collectionProps, bodyRef, isResizable = false, onColumnResize, onColumnResizeEnd, emptyLabel, noResultsLabel, error, isFiltered = false, sortMode = "off", sort, sorts, onColumnSort, getRowProps, headerPreset, contentPreset, toolbar, footer, ariaLabel, styles, headerStyles, headerCellStyles, bodyStyles, rowStyles, cellStyles, mods } = props;
+	const { qa, rows, 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, 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;
+	/**
+	* `rowSize` resolved to the size scale, or `null` when it was not given.
+	*
+	* Both halves come from `SIZE_NAME_TO_KEY` rather than being written out
+	* twice: the CSS keeps the token so it follows the scale, and the virtualizer
+	* needs the number, and the two must not drift.
+	*/
+	const rowSizeKey = rowSize ? SIZE_NAME_TO_KEY[rowSize] : null;
+	const lastDraggableKey = isColumnReorderable ? getDraggableColumnKeys(columns, true).at(-1) ?? null : null;
 	const { t } = useI18n();
 	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;
@@ -108,18 +152,23 @@ function TableView(props) {
 	const bodyRowIndex = (rowIndex) => headerRowCount + pinnedTopCount + rowIndexOffset + rowIndex + 1;
 	/** 1-based `aria-rowindex` for the i-th pinned row at `edge`. */
 	const pinnedRowIndex = (index, edge) => edge === "top" ? headerRowCount + index + 1 : headerRowCount + pinnedTopCount + bodyRowCount + index + 1;
+	const tints = useMemo(() => buildColumnTints(columns, { resolveTheme: getColorTheme }), [columns, usePaletteVersion()]);
 	const mergedStyles = useMemo(() => ({
 		...styles,
 		...contentPreset ? { Table: { preset: contentPreset } } : null,
 		...headerStyles ? { HeadRow: headerStyles } : null,
-		...headerPreset || headerCellStyles ? { HeaderCell: {
+		...headerPreset || headerCellStyles || tints.headerCellStyles ? { HeaderCell: {
 			...headerPreset ? { preset: headerPreset } : null,
+			...tints.headerCellStyles,
 			...headerCellStyles
 		} } : null,
 		...bodyStyles ? { Body: bodyStyles } : null,
 		...rowStyles ? { Row: rowStyles } : null,
-		...cellStyles ? { Cell: cellStyles } : null,
-		...rowHeight != null ? { "$row-height": `${rowHeight}px` } : null,
+		...cellStyles || tints.cellStyles ? { Cell: {
+			...tints.cellStyles,
+			...cellStyles
+		} } : null,
+		...rowHeight != null ? { "$row-height": `${rowHeight}px` } : rowSizeKey ? { "$row-height": `$size-${rowSizeKey.toLowerCase()}` } : null,
 		...headerHeight != null ? { "$header-height": `${headerHeight}px` } : null
 	}), [
 		styles,
@@ -130,8 +179,10 @@ function TableView(props) {
 		bodyStyles,
 		rowStyles,
 		cellStyles,
+		rowSizeKey,
 		rowHeight,
-		headerHeight
+		headerHeight,
+		tints
 	]);
 	/**
 	* Whether a cell is inside the current range.
@@ -212,6 +263,21 @@ function TableView(props) {
 		if (column.index === 0) return "start";
 		if (column.index === columns.length - 1) return "end";
 	}
+	/**
+	* The row band, mirrored from the `<tr>` onto its cells.
+	*
+	* `Row` already carries `data-odd` and publishes `#row-base` from it, which is
+	* all an untinted cell needs. A TINTED cell has to pick its own band, and a
+	* sub-element's state keys resolve against the table root rather than its DOM
+	* parent — so the flag has to be on the cell itself. Same reason `data-pinned`
+	* is mirrored.
+	*
+	* Pinned rows are exempt: they carry no `data-odd` on the `<tr>` either, and
+	* banding a totals row would be wrong.
+	*/
+	function cellBandFlag(rowIndex, pinnedEdge) {
+		return pinnedEdge == null && isStriped && rowIndex % 2 === 1 ? "" : void 0;
+	}
 	function renderStateRow(content) {
 		return /* @__PURE__ */ jsx("tr", {
 			"data-element": "Row",
@@ -290,6 +356,7 @@ function TableView(props) {
 			"data-pin-edge": column.isPinEdge ? "" : void 0,
 			"data-last-row": isLastRow ? "" : void 0,
 			"data-pinned": pinnedEdge,
+			"data-odd": cellBandFlag(rowIndex, pinnedEdge),
 			"data-last-column": lastColumnFlag(column),
 			"data-corner": bottomCornerFlag(column, rowIndex, isLastRow, pinnedEdge),
 			role: "gridcell",
@@ -316,6 +383,7 @@ function TableView(props) {
 			"data-pin-edge": column.isPinEdge ? "" : void 0,
 			"data-last-row": isLastRow ? "" : void 0,
 			"data-pinned": pinnedEdge,
+			"data-odd": cellBandFlag(rowIndex, pinnedEdge),
 			"data-last-column": lastColumnFlag(column),
 			"data-corner": bottomCornerFlag(column, rowIndex, isLastRow, pinnedEdge),
 			role: "gridcell",
@@ -383,12 +451,33 @@ function TableView(props) {
 			"data-sorted": isSorted ? "" : void 0,
 			"data-dir": activeSort?.direction,
 			"aria-hidden": "true",
-			children: /* @__PURE__ */ jsx(UpIcon, {})
+			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 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,
@@ -398,33 +487,57 @@ function TableView(props) {
 			descriptionPlacement: header?.descriptionPlacement,
 			tooltip: header?.tooltip ?? true,
 			theme: header?.theme,
-			actions: header?.actions,
+			actions,
 			autoHideActions: header?.autoHideActions ?? true,
+			preserveActionsSpace: actions != null,
 			styles: header?.styles,
 			children: column.title
 		});
-		return /* @__PURE__ */ jsxs("th", {
-			"data-element": "HeaderCell",
-			"data-key": column.key,
-			"data-pin": column.pin,
-			"data-pin-edge": column.isPinEdge ? "" : void 0,
-			"data-align": header?.align ?? column.align,
-			"data-sortable": isSortable ? "" : void 0,
-			"data-resizable": canResize ? "" : void 0,
-			"data-last-column": lastColumnFlag(column),
-			"data-sorted": isSorted ? "" : void 0,
-			role: "columnheader",
-			scope: "col",
-			tabIndex: isSortable ? 0 : -1,
-			"aria-colindex": column.ariaColIndex,
-			"aria-sort": activeSort ? ARIA_SORT[activeSort.direction] : void 0,
-			style: pinStyle(column),
-			onClick: isSortable ? () => onColumnSort?.(column.key) : void 0,
-			onKeyDown: isSortable ? (event) => {
-				if (event.key !== "Enter" && event.key !== " ") return;
-				event.preventDefault();
-				onColumnSort?.(column.key);
-			} : void 0,
+		const isDraggable = isColumnDraggable(column, isColumnReorderable);
+		return /* @__PURE__ */ jsxs(TableHeaderCell, {
+			columnKey: column.key,
+			hasAction: isSortable,
+			isLastDraggable: isDraggable && column.key === lastDraggableKey,
+			dragState: isDraggable ? columnDragState : void 0,
+			dropState: isDraggable ? columnDropState : void 0,
+			cellProps: {
+				"data-element": "HeaderCell",
+				"data-key": column.key,
+				"data-pin": column.pin,
+				"data-pin-edge": column.isPinEdge ? "" : void 0,
+				"data-align": header?.align ?? column.align,
+				"data-sortable": isSortable ? "" : void 0,
+				"data-resizable": canResize ? "" : void 0,
+				"data-last-column": lastColumnFlag(column),
+				"data-sorted": isSorted ? "" : void 0,
+				"data-menu-open": openMenuColumnKey === column.key ? "" : void 0,
+				"data-tint": tintSlot(tints, column.key, "header"),
+				role: "columnheader",
+				scope: "col",
+				tabIndex: isSortable || hasMenu || isDraggable ? 0 : -1,
+				"aria-colindex": column.ariaColIndex,
+				"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
+			},
 			children: [content, canResize ? /* @__PURE__ */ jsx(ColumnResizer, {
 				column,
 				label: t("itemTable.resizeColumn", "Resize column"),
@@ -442,6 +555,7 @@ function TableView(props) {
 			"data-kind": "row-number",
 			"data-last-row": isLastRow ? "" : void 0,
 			"data-pinned": pinnedEdge,
+			"data-odd": cellBandFlag(rowIndex, pinnedEdge),
 			"data-last-column": lastColumnFlag(column),
 			"data-corner": bottomCornerFlag(column, rowIndex, isLastRow, pinnedEdge),
 			role: "gridcell",
@@ -476,6 +590,8 @@ function TableView(props) {
 			"data-link": link !== void 0 ? "" : void 0,
 			"data-last-row": isLastRow ? "" : void 0,
 			"data-pinned": pinnedEdge,
+			"data-odd": cellBandFlag(rowIndex, pinnedEdge),
+			"data-tint": tintSlot(tints, column.key, pinnedEdge == null ? "body" : "totals"),
 			"data-last-column": lastColumnFlag(column),
 			"data-corner": bottomCornerFlag(column, rowIndex, isLastRow, pinnedEdge),
 			"data-cell-selected": isCellSelected(rangeKey, column.key) ? "" : void 0,
@@ -619,7 +735,7 @@ function TableView(props) {
 		count: shouldVirtualize ? rows.length : 0,
 		getScrollElement: () => scrollerRef.current,
 		getItemKey: (index) => String(getRowKey(rowsRef.current[index], index)),
-		estimateSize: () => (rowHeight ?? ESTIMATED_ROW_HEIGHT[size ?? "medium"]) + 1,
+		estimateSize: () => (rowHeight ?? (rowSizeKey ? SIZES[rowSizeKey] : ESTIMATED_ROW_HEIGHT[size ?? "medium"])) + 1,
 		measureElement: (element) => element.getBoundingClientRect().height,
 		overscan
 	});
@@ -744,6 +860,45 @@ 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);
+	});
 	/** Resolves the row a pointer or keyboard event landed in. */
 	function rowFromEvent(target) {
 		const element = target?.closest?.("tr[data-element=\"Row\"][data-key]");
@@ -764,6 +919,12 @@ function TableView(props) {
 		"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)
 	});
 	const tableProps = {
@@ -911,6 +1072,7 @@ function TableView(props) {
 			}) }),
 			overlay,
 			contextMenu.rendered,
+			tints.configs.map((config, index) => /* @__PURE__ */ jsx(ColumnTintRegistrar, { config }, index)),
 			footer
 		]
 	});