@cube-dev/ui-kit 0.157.3 → 0.159.0

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

@@ -0,0 +1,115 @@
+/** @license MIT | @cube-dev/ui-kit v0.159.0 | Cube Dev Team */
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useDraggableItem, useDropIndicator } from "react-aria";
+
+//#region src/components/data/TableBase/TableHeaderCell.tsx
+/**
+* Controls inside the header that own their own press, and must never start a
+* column drag.
+*
+* Drag-source resolution walks the DOM tree, not the React event path, so
+* `Item`'s `Actions` slot calling `stopPropagation` does nothing here — the
+* `<th>` is still the drag source as far as the browser is concerned. Only
+* `preventDefault` on `dragstart` stops it, which is what the capture handler
+* below does.
+*/
+const NO_DRAG_SELECTOR = "[data-element=\"Resizer\"], [data-element=\"Actions\"], a, button, input, select, textarea, [role=\"button\"], [role=\"menuitem\"]";
+function HeaderCell(props) {
+	const { cellProps, extra, children } = props;
+	return /* @__PURE__ */ jsx("th", {
+		...cellProps,
+		...extra,
+		children
+	});
+}
+/**
+* A header cell inside a collection that accepts drags.
+*
+* Split from the plain one so the drag hooks can be called unconditionally —
+* they are hooks, and whether a table reorders its columns is a prop.
+*/
+function DraggableHeaderCell(props) {
+	const { columnKey, hasAction, isLastDraggable, dragState, dropState } = props;
+	const { dragProps, isDragging } = useDraggableItem({
+		key: columnKey,
+		hasAction
+	}, dragState);
+	return /* @__PURE__ */ jsxs(HeaderCell, {
+		...props,
+		extra: {
+			...mergeProps$1(props.cellProps, dragProps, { onDragStartCapture: (event) => {
+				if (event.target?.closest?.(NO_DRAG_SELECTOR)) {
+					event.preventDefault();
+					event.stopPropagation();
+				}
+			} }),
+			"data-draggable": "",
+			"data-dragging": isDragging ? "" : void 0
+		},
+		children: [
+			/* @__PURE__ */ jsx(ColumnDropIndicator, {
+				columnKey,
+				dropPosition: "before",
+				dropState
+			}),
+			props.children,
+			isLastDraggable ? /* @__PURE__ */ jsx(ColumnDropIndicator, {
+				columnKey,
+				dropPosition: "after",
+				dropState
+			}) : null
+		]
+	});
+}
+function TableHeaderCell(props) {
+	return props.dragState && props.dropState ? /* @__PURE__ */ jsx(DraggableHeaderCell, { ...props }) : /* @__PURE__ */ jsx(HeaderCell, { ...props });
+}
+/**
+* The line showing where a dragged column would land.
+*
+* Lives INSIDE the `<th>`, absolutely positioned on one of its edges — a `<tr>`
+* may only contain `<th>`/`<td>`, so there is nowhere between two header cells
+* to put it. Being absolute also means mounting one cannot shift the layout,
+* which is the bug class the row indicator had to be careful about.
+*
+* `useDropIndicator` reports `isHidden` unless this is the active target, so a
+* table merely capable of reordering keeps its exact DOM until a drag starts.
+*/
+function ColumnDropIndicator({ columnKey, dropPosition, dropState }) {
+	const ref = useRef(null);
+	const { dropIndicatorProps, isHidden, isDropTarget } = useDropIndicator({ target: {
+		type: "item",
+		key: columnKey,
+		dropPosition
+	} }, dropState, ref);
+	/**
+	* Re-register the drop targets when the header's geometry changes.
+	*
+	* React Aria's `ListDropTargetDelegate` measures every `[data-key]` at the
+	* moment a drag starts. A column resized mid-drag — or a scrollbar appearing —
+	* leaves those rects stale, and the drop lands in the wrong place. Same trick
+	* `TabDropIndicator` uses.
+	*/
+	const [, forceUpdate] = useState(0);
+	useEffect(() => {
+		const row = ref.current?.closest("[data-element=\"HeadRow\"]");
+		if (!row || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => forceUpdate((n) => n + 1));
+		observer.observe(row);
+		return () => observer.disconnect();
+	}, []);
+	if (isHidden) return null;
+	return /* @__PURE__ */ jsx("div", {
+		...dropIndicatorProps,
+		ref,
+		"data-element": "ColumnDropIndicator",
+		"data-position": dropPosition,
+		"data-drop-target": isDropTarget ? "" : void 0
+	});
+}
+
+//#endregion
+export { TableHeaderCell };
+//# sourceMappingURL=TableHeaderCell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeaderCell.js","names":["mergeProps"],"sources":["../../../../src/components/data/TableBase/TableHeaderCell.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { useDraggableItem, useDropIndicator } from 'react-aria';\n\nimport { mergeProps } from '../../../utils/react';\n\nimport type { ReactNode } from 'react';\nimport type {\n  DraggableCollectionState,\n  DroppableCollectionState,\n} from 'react-stately';\n\n/**\n * Controls inside the header that own their own press, and must never start a\n * column drag.\n *\n * Drag-source resolution walks the DOM tree, not the React event path, so\n * `Item`'s `Actions` slot calling `stopPropagation` does nothing here — the\n * `<th>` is still the drag source as far as the browser is concerned. Only\n * `preventDefault` on `dragstart` stops it, which is what the capture handler\n * below does.\n */\nconst NO_DRAG_SELECTOR =\n  '[data-element=\"Resizer\"], [data-element=\"Actions\"], a, button, input, select, textarea, [role=\"button\"], [role=\"menuitem\"]';\n\nexport interface TableHeaderCellProps {\n  columnKey: string;\n  /** Everything the renderer already computed: mods, ARIA, handlers, styles. */\n  cellProps: Record<string, any>;\n  /** Whether the header itself responds to Enter — i.e. it sorts. */\n  hasAction: boolean;\n  isLastDraggable: boolean;\n  dragState?: DraggableCollectionState;\n  dropState?: DroppableCollectionState;\n  children: ReactNode;\n}\n\nfunction HeaderCell(\n  props: TableHeaderCellProps & { extra?: Record<string, any> },\n) {\n  const { cellProps, extra, children } = props;\n\n  return (\n    <th {...cellProps} {...extra}>\n      {children}\n    </th>\n  );\n}\n\n/**\n * A header cell inside a collection that accepts drags.\n *\n * Split from the plain one so the drag hooks can be called unconditionally —\n * they are hooks, and whether a table reorders its columns is a prop.\n */\nfunction DraggableHeaderCell(props: TableHeaderCellProps) {\n  const { columnKey, hasAction, isLastDraggable, dragState, dropState } = props;\n\n  const { dragProps, isDragging } = useDraggableItem(\n    // `hasAction` re-gates React Aria's Enter/Space capture behind Alt, so plain\n    // Enter still reaches the header's own sort handler instead of starting a\n    // keyboard drag session.\n    { key: columnKey, hasAction },\n    dragState as DraggableCollectionState,\n  );\n\n  return (\n    <HeaderCell\n      {...props}\n      extra={{\n        // `dragProps` last for `draggable`, which is a value rather than a\n        // handler — `mergeProps` chains handlers but takes the later value. The\n        // sort `onClick` survives: `useDraggableItem` only deletes its own.\n        ...mergeProps(props.cellProps, dragProps, {\n          // Capture, so this runs before React Aria's own `onDragStart` on the\n          // same node and can cancel it.\n          onDragStartCapture: (event: any) => {\n            if ((event.target as HTMLElement)?.closest?.(NO_DRAG_SELECTOR)) {\n              event.preventDefault();\n              event.stopPropagation();\n            }\n          },\n        }),\n        'data-draggable': '',\n        'data-dragging': isDragging ? '' : undefined,\n      }}\n    >\n      <ColumnDropIndicator\n        columnKey={columnKey}\n        dropPosition=\"before\"\n        dropState={dropState as DroppableCollectionState}\n      />\n      {props.children}\n      {isLastDraggable ? (\n        <ColumnDropIndicator\n          columnKey={columnKey}\n          dropPosition=\"after\"\n          dropState={dropState as DroppableCollectionState}\n        />\n      ) : null}\n    </HeaderCell>\n  );\n}\n\nexport function TableHeaderCell(props: TableHeaderCellProps) {\n  return props.dragState && props.dropState ? (\n    <DraggableHeaderCell {...props} />\n  ) : (\n    <HeaderCell {...props} />\n  );\n}\n\ninterface ColumnDropIndicatorProps {\n  columnKey: string;\n  dropPosition: 'before' | 'after';\n  dropState: DroppableCollectionState;\n}\n\n/**\n * The line showing where a dragged column would land.\n *\n * Lives INSIDE the `<th>`, absolutely positioned on one of its edges — a `<tr>`\n * may only contain `<th>`/`<td>`, so there is nowhere between two header cells\n * to put it. Being absolute also means mounting one cannot shift the layout,\n * which is the bug class the row indicator had to be careful about.\n *\n * `useDropIndicator` reports `isHidden` unless this is the active target, so a\n * table merely capable of reordering keeps its exact DOM until a drag starts.\n */\nfunction ColumnDropIndicator({\n  columnKey,\n  dropPosition,\n  dropState,\n}: ColumnDropIndicatorProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const { dropIndicatorProps, isHidden, isDropTarget } = useDropIndicator(\n    { target: { type: 'item', key: columnKey, dropPosition } },\n    dropState,\n    ref,\n  );\n\n  /**\n   * Re-register the drop targets when the header's geometry changes.\n   *\n   * React Aria's `ListDropTargetDelegate` measures every `[data-key]` at the\n   * moment a drag starts. A column resized mid-drag — or a scrollbar appearing —\n   * leaves those rects stale, and the drop lands in the wrong place. Same trick\n   * `TabDropIndicator` uses.\n   */\n  const [, forceUpdate] = useState(0);\n\n  useEffect(() => {\n    const row = ref.current?.closest('[data-element=\"HeadRow\"]');\n\n    if (!row || typeof ResizeObserver === 'undefined') return;\n\n    const observer = new ResizeObserver(() => forceUpdate((n) => n + 1));\n\n    observer.observe(row);\n\n    return () => observer.disconnect();\n  }, []);\n\n  if (isHidden) return null;\n\n  return (\n    <div\n      {...dropIndicatorProps}\n      ref={ref}\n      data-element=\"ColumnDropIndicator\"\n      data-position={dropPosition}\n      data-drop-target={isDropTarget ? '' : undefined}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAqBA,MAAM,mBACJ;AAcF,SAAS,WACP,OACA;CACA,MAAM,EAAE,WAAW,OAAO,aAAa;AAEvC,QACE,oBAAC;EAAG,GAAI;EAAW,GAAI;EACpB;GACE;;;;;;;;AAUT,SAAS,oBAAoB,OAA6B;CACxD,MAAM,EAAE,WAAW,WAAW,iBAAiB,WAAW,cAAc;CAExE,MAAM,EAAE,WAAW,eAAe,iBAIhC;EAAE,KAAK;EAAW;EAAW,EAC7B,UACD;AAED,QACE,qBAAC;EACC,GAAI;EACJ,OAAO;GAIL,GAAGA,aAAW,MAAM,WAAW,WAAW,EAGxC,qBAAqB,UAAe;AAClC,QAAK,MAAM,QAAwB,UAAU,iBAAiB,EAAE;AAC9D,WAAM,gBAAgB;AACtB,WAAM,iBAAiB;;MAG5B,CAAC;GACF,kBAAkB;GAClB,iBAAiB,aAAa,KAAK;GACpC;;GAED,oBAAC;IACY;IACX,cAAa;IACF;KACX;GACD,MAAM;GACN,kBACC,oBAAC;IACY;IACX,cAAa;IACF;KACX,GACA;;GACO;;AAIjB,SAAgB,gBAAgB,OAA6B;AAC3D,QAAO,MAAM,aAAa,MAAM,YAC9B,oBAAC,uBAAoB,GAAI,QAAS,GAElC,oBAAC,cAAW,GAAI,QAAS;;;;;;;;;;;;;AAqB7B,SAAS,oBAAoB,EAC3B,WACA,cACA,aAC2B;CAC3B,MAAM,MAAM,OAAuB,KAAK;CACxC,MAAM,EAAE,oBAAoB,UAAU,iBAAiB,iBACrD,EAAE,QAAQ;EAAE,MAAM;EAAQ,KAAK;EAAW;EAAc,EAAE,EAC1D,WACA,IACD;;;;;;;;;CAUD,MAAM,GAAG,eAAe,SAAS,EAAE;AAEnC,iBAAgB;EACd,MAAM,MAAM,IAAI,SAAS,QAAQ,6BAA2B;AAE5D,MAAI,CAAC,OAAO,OAAO,mBAAmB,YAAa;EAEnD,MAAM,WAAW,IAAI,qBAAqB,aAAa,MAAM,IAAI,EAAE,CAAC;AAEpE,WAAS,QAAQ,IAAI;AAErB,eAAa,SAAS,YAAY;IACjC,EAAE,CAAC;AAEN,KAAI,SAAU,QAAO;AAErB,QACE,oBAAC;EACC,GAAI;EACC;EACL,gBAAa;EACb,iBAAe;EACf,oBAAkB,eAAe,KAAK;GACtC"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.159.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";

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

@@ -1,25 +1,33 @@
-/** @license MIT | @cube-dev/ui-kit v0.157.3 | 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
 		]
 	});