@cube-dev/ui-kit 0.0.0-canary-7406950 → 0.0.0-canary-b7944fa

package/dist/components/content/PrismCode/prismSetup.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7406950 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b7944fa | Cube Dev Team */
 import { Prism as RendererPrism } from "prism-react-renderer";
 
 //#region src/components/content/PrismCode/prismSetup.tsx

package/dist/components/content/PrismDiffCode/PrismDiffCode.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7406950 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b7944fa | Cube Dev Team */
 import { _PrismCode } from "../PrismCode/PrismCode.js";
 import { jsx } from "react/jsx-runtime";
 import { diffLines } from "diff";

package/dist/components/content/Result/Result.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7406950 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b7944fa | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { wrapNodeIfPlain } from "../../../utils/react/wrapNodeIfPlain.js";

package/dist/components/content/Skeleton/Skeleton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7406950 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b7944fa | Cube Dev Team */
 import { Space } from "../../layout/Space.js";
 import { Grid } from "../../layout/Grid.js";
 import { Flow } from "../../layout/Flow.js";

package/dist/components/content/Tag/Tag.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7406950 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b7944fa | Cube Dev Team */
 import { _Item } from "../Item/Item.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { CloseIcon } from "../../../icons/CloseIcon.js";

package/dist/components/content/Text.d.ts

@@ -140,7 +140,7 @@ declare const MinorText: react.ComponentType<{
   accessKey?: string | undefined;
   autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
   autoFocus?: boolean | undefined;
-  contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+  contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
   contextMenu?: string | undefined;
   dir?: string | undefined;
   draggable?: (boolean | "true" | "false") | undefined;
@@ -179,7 +179,7 @@ declare const MinorText: react.ComponentType<{
   part?: string | undefined;
   "aria-activedescendant"?: string | undefined;
   "aria-atomic"?: (boolean | "true" | "false") | undefined;
-  "aria-autocomplete"?: "list" | "inline" | "none" | "both" | undefined;
+  "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
   "aria-braillelabel"?: string | undefined;
   "aria-brailleroledescription"?: string | undefined;
   "aria-busy"?: (boolean | "true" | "false") | undefined;
@@ -546,7 +546,7 @@ declare const DangerText: react.ComponentType<{
   accessKey?: string | undefined;
   autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
   autoFocus?: boolean | undefined;
-  contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+  contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
   contextMenu?: string | undefined;
   dir?: string | undefined;
   draggable?: (boolean | "true" | "false") | undefined;
@@ -585,7 +585,7 @@ declare const DangerText: react.ComponentType<{
   part?: string | undefined;
   "aria-activedescendant"?: string | undefined;
   "aria-atomic"?: (boolean | "true" | "false") | undefined;
-  "aria-autocomplete"?: "list" | "inline" | "none" | "both" | undefined;
+  "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
   "aria-braillelabel"?: string | undefined;
   "aria-brailleroledescription"?: string | undefined;
   "aria-busy"?: (boolean | "true" | "false") | undefined;
@@ -952,7 +952,7 @@ declare const SuccessText: react.ComponentType<{
   accessKey?: string | undefined;
   autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
   autoFocus?: boolean | undefined;
-  contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+  contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
   contextMenu?: string | undefined;
   dir?: string | undefined;
   draggable?: (boolean | "true" | "false") | undefined;
@@ -991,7 +991,7 @@ declare const SuccessText: react.ComponentType<{
   part?: string | undefined;
   "aria-activedescendant"?: string | undefined;
   "aria-atomic"?: (boolean | "true" | "false") | undefined;
-  "aria-autocomplete"?: "list" | "inline" | "none" | "both" | undefined;
+  "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
   "aria-braillelabel"?: string | undefined;
   "aria-brailleroledescription"?: string | undefined;
   "aria-busy"?: (boolean | "true" | "false") | undefined;
@@ -1358,7 +1358,7 @@ declare const StrongText: react.ComponentType<{
   accessKey?: string | undefined;
   autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
   autoFocus?: boolean | undefined;
-  contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+  contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
   contextMenu?: string | undefined;
   dir?: string | undefined;
   draggable?: (boolean | "true" | "false") | undefined;
@@ -1397,7 +1397,7 @@ declare const StrongText: react.ComponentType<{
   part?: string | undefined;
   "aria-activedescendant"?: string | undefined;
   "aria-atomic"?: (boolean | "true" | "false") | undefined;
-  "aria-autocomplete"?: "list" | "inline" | "none" | "both" | undefined;
+  "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
   "aria-braillelabel"?: string | undefined;
   "aria-brailleroledescription"?: string | undefined;
   "aria-busy"?: (boolean | "true" | "false") | undefined;
@@ -1764,7 +1764,7 @@ declare const EmphasisText: react.ComponentType<{
   accessKey?: string | undefined;
   autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
   autoFocus?: boolean | undefined;
-  contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+  contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
   contextMenu?: string | undefined;
   dir?: string | undefined;
   draggable?: (boolean | "true" | "false") | undefined;
@@ -1803,7 +1803,7 @@ declare const EmphasisText: react.ComponentType<{
   part?: string | undefined;
   "aria-activedescendant"?: string | undefined;
   "aria-atomic"?: (boolean | "true" | "false") | undefined;
-  "aria-autocomplete"?: "list" | "inline" | "none" | "both" | undefined;
+  "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
   "aria-braillelabel"?: string | undefined;
   "aria-brailleroledescription"?: string | undefined;
   "aria-busy"?: (boolean | "true" | "false") | undefined;
@@ -2170,7 +2170,7 @@ declare const PlaceholderText: react.ComponentType<{
   accessKey?: string | undefined;
   autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
   autoFocus?: boolean | undefined;
-  contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+  contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
   contextMenu?: string | undefined;
   dir?: string | undefined;
   draggable?: (boolean | "true" | "false") | undefined;
@@ -2209,7 +2209,7 @@ declare const PlaceholderText: react.ComponentType<{
   part?: string | undefined;
   "aria-activedescendant"?: string | undefined;
   "aria-atomic"?: (boolean | "true" | "false") | undefined;
-  "aria-autocomplete"?: "list" | "inline" | "none" | "both" | undefined;
+  "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
   "aria-braillelabel"?: string | undefined;
   "aria-brailleroledescription"?: string | undefined;
   "aria-busy"?: (boolean | "true" | "false") | undefined;
@@ -2576,7 +2576,7 @@ declare const HighlightText: react.ComponentType<{
   accessKey?: string | undefined;
   autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
   autoFocus?: boolean | undefined;
-  contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+  contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
   contextMenu?: string | undefined;
   dir?: string | undefined;
   draggable?: (boolean | "true" | "false") | undefined;
@@ -2615,7 +2615,7 @@ declare const HighlightText: react.ComponentType<{
   part?: string | undefined;
   "aria-activedescendant"?: string | undefined;
   "aria-atomic"?: (boolean | "true" | "false") | undefined;
-  "aria-autocomplete"?: "list" | "inline" | "none" | "both" | undefined;
+  "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
   "aria-braillelabel"?: string | undefined;
   "aria-brailleroledescription"?: string | undefined;
   "aria-busy"?: (boolean | "true" | "false") | undefined;

package/dist/components/content/Text.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7406950 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b7944fa | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useSlotProps } from "../../utils/react/Slots.js";
 import { BASE_STYLES, COLOR_STYLES, TEXT_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";

package/dist/components/content/TextItem/TextItem.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7406950 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b7944fa | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { TEXT_PROP_MAP, _Text } from "../Text.js";
 import { highlightText } from "../highlightText.js";

package/dist/components/content/Title.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7406950 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b7944fa | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useSlotProps } from "../../utils/react/Slots.js";
 import { TEXT_PROP_MAP } from "./Text.js";

package/dist/components/content/Tree/Tree.js

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

package/dist/components/content/Tree/TreeNode.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7406950 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b7944fa | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";

package/dist/components/content/Tree/styled.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7406950 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b7944fa | Cube Dev Team */
 import { _Item } from "../Item/Item.js";
 import { Action } from "../../actions/Action/Action.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/content/Tree/tree-index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7406950 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b7944fa | Cube Dev Team */
 //#region src/components/content/Tree/tree-index.ts
 function buildTreeIndex(treeData) {
 	const byKey = /* @__PURE__ */ new Map();

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7406950 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b7944fa | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useMemo, 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-7406950 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b7944fa | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useRef, useState } from "react";
 

package/dist/components/content/highlightText.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7406950 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b7944fa | 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-7406950 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b7944fa | Cube Dev Team */
 import { TooltipProvider } from "../overlays/Tooltip/TooltipProvider.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";

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

@@ -1,12 +1,15 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7406950 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b7944fa | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useI18n } from "../../../i18n/useI18n.js";
+import { DraggableCollection } from "../../shared/DraggableCollection.js";
 import { clampPage, getPageInfo } from "../../navigation/Pagination/use-pagination.js";
 import { ItemTableFooter } from "../ItemTable/ItemTableFooter.js";
+import { RowCollection } from "../TableBase/RowCollection.js";
 import { selectionRowKey } from "../TableBase/types.js";
 import { useCellSelection } from "../TableBase/use-cell-selection.js";
+import { getDraggableColumnKeys, isColumnDraggable, useColumnOrder } from "../TableBase/use-column-order.js";
 import { useTableColumns } from "../TableBase/use-table-columns.js";
 import { ROW_NUMBER_COLUMN_KEY } from "../TableBase/use-table-selection.js";
 import { TableView } from "../TableBase/TableView.js";
@@ -16,7 +19,9 @@ import { useTableStorage } from "../TableBase/use-table-storage.js";
 import { CONTAINER_STYLES } from "@tenphi/tasty";
 import { forwardRef, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
+import { useMultipleSelectionState } from "react-stately";
 import { useControlledState } from "@react-stately/utils";
+import { SelectionManager } from "@react-stately/selection";
 
 //#region src/components/data/DataTable/DataTable.tsx
 /** Wide enough for five digits at the dense default. */
@@ -42,29 +47,31 @@ function defaultGetRowKey(rowKey) {
 * Cloud.
 */
 function DataTable(props, ref) {
-	const { data, columns, rowKey = "id", getRowKey, pinnedTopRows, pinnedBottomRows, isLoading = false, loadingIndicator = "overlay", skeletonRowCount, error, emptyLabel, noResultsLabel, isFiltered, shape = "plain", size = "small", rowHeight, headerHeight, isStriped = true, isHeaderHidden, isHeaderSticky, showRowNumbers = false, sortMode, sorts: sortsProp, defaultSorts, onSortsChange, paginationMode = "client", page: pageProp, defaultPage, onPageChange, pageSize: pageSizeProp, defaultPageSize = 100, onPageSizeChange, pageSizeOptions, total: totalProp, totalPages, hasNextPage, summary = true, autoHidePagination = true, footerStart, footerCenter, footerEnd, cellSelectionMode = "range", isCellSelectable, selectedCellRange, defaultSelectedCellRange, onCellRangeChange, isRowMoveAnimated, isResizable = true, columnWidths: columnWidthsProp, defaultColumnWidths, onColumnResize, isVirtualized, virtualizeThreshold, overscan, getRowProps, storageKey, styles, headerStyles, headerCellStyles, bodyStyles, rowStyles, cellStyles, footerStyles, ariaLabel, qa, mods, ...rest } = props;
+	const { data, columns, rowKey = "id", getRowKey, pinnedTopRows, pinnedBottomRows, isLoading = false, loadingIndicator = "overlay", skeletonRowCount, error, emptyLabel, noResultsLabel, isFiltered, shape = "plain", size = "small", rowHeight, headerHeight, isStriped = true, isHeaderHidden, isHeaderSticky, showRowNumbers = false, sortMode, sorts: sortsProp, defaultSorts, onSortsChange, paginationMode = "client", page: pageProp, defaultPage, onPageChange, pageSize: pageSizeProp, defaultPageSize = 100, onPageSizeChange, pageSizeOptions, total: totalProp, totalPages, hasNextPage, summary = true, autoHidePagination = true, footerStart, footerCenter, footerEnd, cellSelectionMode = "range", isCellSelectable, selectedCellRange, defaultSelectedCellRange, onCellRangeChange, isRowMoveAnimated, isResizable = true, columnWidths: columnWidthsProp, defaultColumnWidths, onColumnResize, isColumnReorderable = false, columnOrder, defaultColumnOrder, onColumnOrderChange, columnContextMenu, onColumnMenuAction, columnMenuTriggerProps, columnMenuProps, isVirtualized, virtualizeThreshold, overscan, getRowProps, storageKey, styles, headerStyles, headerCellStyles, bodyStyles, rowStyles, cellStyles, footerStyles, ariaLabel, qa, mods, ...rest } = props;
 	const rootRef = useCombinedRefs(ref, useRef(null));
 	const [scrollerEl, setScrollerEl] = useState(null);
 	const containerWidth = useContainerWidth(scrollerEl);
 	const storage = useTableStorage(storageKey);
-	/**
-	* `dataType` is presentational, so it is folded into the column here rather
-	* than reaching the renderer: `number` right-aligns and takes tabular figures
-	* so digits line up down the column.
-	*/
-	const resolvedColumns = useMemo(() => columns.map((column) => {
-		const isNumeric = column.dataType === "number";
-		return {
-			...column,
-			align: column.align ?? (isNumeric ? "end" : "start"),
-			cellStyles: isNumeric ? {
-				fontVariantNumeric: "tabular-nums",
-				...typeof column.cellStyles === "object" ? column.cellStyles : null
-			} : column.cellStyles
-		};
-	}), [columns]);
-	const { sorts, sortedRows, toggleSort, mode: resolvedSortMode } = useTableSorts({
-		columns: resolvedColumns,
+	const columnOrderState = useColumnOrder({
+		columns: useMemo(() => columns.map((column) => {
+			const isNumeric = column.dataType === "number";
+			return {
+				...column,
+				align: column.align ?? (isNumeric ? "end" : "start"),
+				cellStyles: isNumeric ? {
+					fontVariantNumeric: "tabular-nums",
+					...typeof column.cellStyles === "object" ? column.cellStyles : null
+				} : column.cellStyles
+			};
+		}), [columns]),
+		columnOrder,
+		defaultColumnOrder,
+		onColumnOrderChange,
+		storage
+	});
+	const orderedColumns = columnOrderState.columns;
+	const { sorts, sortedRows, toggleSort, setColumnSort, mode: resolvedSortMode } = useTableSorts({
+		columns: orderedColumns,
 		rows: data,
 		mode: sortMode,
 		sorts: sortsProp,
@@ -112,7 +119,7 @@ function DataTable(props, ref) {
 		setDraftColumnWidths(null);
 	});
 	const layout = useTableColumns({
-		columns: resolvedColumns,
+		columns: orderedColumns,
 		containerWidth,
 		columnWidths,
 		leadingColumns: useMemo(() => showRowNumbers ? [{
@@ -169,7 +176,27 @@ function DataTable(props, ref) {
 	const smallestPageSize = pageSizeOptions?.length ? Math.min(...pageSizeOptions) : pageSize;
 	const showPagination = isPaginated && !(autoHidePagination && !hasNextPage && pageInfo.totalPages <= 1 && total <= smallestPageSize);
 	const hasFooter = showPagination || footerStart != null || footerCenter != null || footerEnd != null;
-	return /* @__PURE__ */ jsx(TableView, {
+	const headRowRef = useRef(null);
+	const draggableColumnKeys = useMemo(() => getDraggableColumnKeys(layout.columns, isColumnReorderable), [layout.columns, isColumnReorderable]);
+	const columnCollection = useMemo(() => new RowCollection(layout.columns.filter((column) => isColumnDraggable(column, isColumnReorderable)), (column) => column.key, /* @__PURE__ */ new Set(), (column) => typeof column.title === "string" ? column.title : column.key), [layout.columns, isColumnReorderable]);
+	/**
+	* `'single'`, not `'none'`.
+	*
+	* `useDraggableItem` only deletes its own `onClick` — the one that would
+	* hijack a screen-reader click away from the sort — when the selection mode is
+	* not `'none'`, and only then does it attach the keyboard drag description.
+	* Nothing is ever actually selected here.
+	*/
+	const columnSelectionState = useMultipleSelectionState({
+		selectionMode: "single",
+		disabledBehavior: "all"
+	});
+	const columnSelectionManager = useMemo(() => new SelectionManager(columnCollection, columnSelectionState), [columnCollection, columnSelectionState]);
+	const handleColumnFocus = useEvent((columnKey) => {
+		columnSelectionManager.setFocusedKey(columnKey);
+	});
+	const isColumnDragEnabled = isColumnReorderable && draggableColumnKeys.length > 1;
+	const renderTable = (columnDragState, columnDropState, headCollectionProps) => /* @__PURE__ */ jsx(TableView, {
 		...rest,
 		rootRef,
 		qa: qa || "DataTable",
@@ -204,6 +231,11 @@ function DataTable(props, ref) {
 		sortMode: resolvedSortMode,
 		sorts,
 		onColumnSort: toggleSort,
+		onColumnSortChange: setColumnSort,
+		columnContextMenu,
+		onColumnMenuAction,
+		columnMenuTriggerProps,
+		columnMenuProps,
 		isVirtualized,
 		virtualizeThreshold,
 		overscan,
@@ -219,6 +251,12 @@ function DataTable(props, ref) {
 		rowStyles,
 		cellStyles,
 		mods,
+		isColumnReorderable: isColumnDragEnabled,
+		columnDragState,
+		columnDropState,
+		headCollectionProps,
+		headRowRef,
+		onColumnFocus: handleColumnFocus,
 		footer: hasFooter ? /* @__PURE__ */ jsx(ItemTableFooter, {
 			start: footerStart,
 			center: footerCenter,
@@ -237,6 +275,18 @@ function DataTable(props, ref) {
 			} : void 0
 		}) : null
 	});
+	return isColumnDragEnabled ? /* @__PURE__ */ jsx(DraggableCollection, {
+		state: {
+			collection: columnCollection,
+			selectionManager: columnSelectionManager,
+			disabledKeys: /* @__PURE__ */ new Set()
+		},
+		listRef: headRowRef,
+		orderedKeys: draggableColumnKeys,
+		orientation: "horizontal",
+		onReorder: columnOrderState.reorder,
+		children: (dragState, dropState, collectionProps) => renderTable(dragState, dropState, collectionProps)
+	}) : renderTable();
 }
 const _DataTable = forwardRef(DataTable);
 _DataTable.displayName = "DataTable";

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

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","names":[],"sources":["../../../../src/components/data/DataTable/DataTable.tsx"],"sourcesContent":["import { useControlledState } from '@react-stately/utils';\nimport { CONTAINER_STYLES } from '@tenphi/tasty';\nimport { forwardRef, useMemo, useRef, useState } from 'react';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { useI18n } from '../../../i18n';\nimport { useCombinedRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { clampPage, getPageInfo } from '../../navigation/Pagination';\nimport { ItemTableFooter } from '../ItemTable/ItemTableFooter';\nimport { TableView } from '../TableBase/TableView';\nimport { selectionRowKey } from '../TableBase/types';\nimport { useCellSelection } from '../TableBase/use-cell-selection';\nimport { useContainerWidth } from '../TableBase/use-container-width';\nimport { useTableColumns } from '../TableBase/use-table-columns';\nimport { ROW_NUMBER_COLUMN_KEY } from '../TableBase/use-table-selection';\nimport { useTableSorts } from '../TableBase/use-table-sorts';\nimport { useTableStorage } from '../TableBase/use-table-storage';\n\nimport type { Key } from '@react-types/shared';\nimport type { ForwardedRef, ReactElement } from 'react';\nimport type { CubeTableRowSection } from '../TableBase/types';\nimport type { CubeDataTableColumn, CubeDataTableProps } from './types';\n\n/** Wide enough for five digits at the dense default. */\nconst ROW_NUMBER_WIDTH = 56;\n\nconst EMPTY_WIDTHS: Record<string, number> = {};\n\nfunction defaultGetRowKey<T>(rowKey: string) {\n  return (row: T, index: number): Key => {\n    const value = (row as any)?.[rowKey];\n\n    return value == null ? index : (value as Key);\n  };\n}\n\n/**\n * A grid for query results.\n *\n * The same engine as `ItemTable` — one `TableView`, one column layout, one\n * value pipeline — with the defaults an analytical grid wants rather than a\n * list's: denser type, banded rows, resizable columns, multi-column sort, and\n * rows pinned for totals.\n *\n * It knows nothing about Cube. Measures, dimensions, pivots and drill-downs\n * reach it as ordinary columns, `render` output and `column.header.menu`\n * content, which is what keeps the ~34 kB of Cloud's column-header menu in\n * Cloud.\n */\nfunction DataTable<T = any>(\n  props: CubeDataTableProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    data,\n    columns,\n    rowKey = 'id',\n    getRowKey,\n    pinnedTopRows,\n    pinnedBottomRows,\n    isLoading = false,\n    loadingIndicator = 'overlay',\n    skeletonRowCount,\n    error,\n    emptyLabel,\n    noResultsLabel,\n    isFiltered,\n    shape = 'plain',\n    // Denser than `ItemTable`'s `medium`: a result grid is read as a block, and\n    // more rows on screen is the point of it.\n    size = 'small',\n    rowHeight,\n    headerHeight,\n    isStriped = true,\n    isHeaderHidden,\n    isHeaderSticky,\n    showRowNumbers = false,\n    sortMode,\n    sorts: sortsProp,\n    defaultSorts,\n    onSortsChange,\n    paginationMode = 'client',\n    page: pageProp,\n    defaultPage,\n    onPageChange,\n    pageSize: pageSizeProp,\n    defaultPageSize = 100,\n    onPageSizeChange,\n    pageSizeOptions,\n    total: totalProp,\n    totalPages,\n    hasNextPage,\n    summary = true,\n    autoHidePagination = true,\n    footerStart,\n    footerCenter,\n    footerEnd,\n    cellSelectionMode = 'range',\n    isCellSelectable,\n    selectedCellRange,\n    defaultSelectedCellRange,\n    onCellRangeChange,\n    isRowMoveAnimated,\n    isResizable = true,\n    columnWidths: columnWidthsProp,\n    defaultColumnWidths,\n    onColumnResize,\n    isVirtualized,\n    virtualizeThreshold,\n    overscan,\n    getRowProps,\n    storageKey,\n    styles,\n    headerStyles,\n    headerCellStyles,\n    bodyStyles,\n    rowStyles,\n    cellStyles,\n    footerStyles,\n    ariaLabel,\n    qa,\n    mods,\n    ...rest\n  } = props;\n\n  const localRef = useRef<HTMLDivElement>(null);\n  const rootRef = useCombinedRefs(ref, localRef);\n  const [scrollerEl, setScrollerEl] = useState<HTMLElement | null>(null);\n  const containerWidth = useContainerWidth(scrollerEl);\n\n  const storage = useTableStorage(storageKey);\n\n  /**\n   * `dataType` is presentational, so it is folded into the column here rather\n   * than reaching the renderer: `number` right-aligns and takes tabular figures\n   * so digits line up down the column.\n   */\n  const resolvedColumns = useMemo(\n    () =>\n      columns.map((column) => {\n        const isNumeric = column.dataType === 'number';\n\n        return {\n          ...column,\n          align: column.align ?? (isNumeric ? 'end' : 'start'),\n          cellStyles: isNumeric\n            ? {\n                fontVariantNumeric: 'tabular-nums',\n                ...(typeof column.cellStyles === 'object'\n                  ? column.cellStyles\n                  : null),\n              }\n            : column.cellStyles,\n        } as CubeDataTableColumn<T>;\n      }),\n    [columns],\n  );\n\n  const {\n    sorts,\n    sortedRows,\n    toggleSort,\n    mode: resolvedSortMode,\n  } = useTableSorts<T>({\n    columns: resolvedColumns,\n    rows: data,\n    mode: sortMode,\n    sorts: sortsProp,\n    defaultSorts,\n    onSortsChange,\n  });\n\n  const [pageSize, setPageSizeState] = useControlledState<number>(\n    pageSizeProp as number,\n    (pageSizeProp === undefined && storage.has('pageSize')\n      ? storage.initial.pageSize ?? defaultPageSize\n      : defaultPageSize) as number,\n    onPageSizeChange as (value: number) => void,\n  );\n  const [page, setPageState] = useControlledState<number>(\n    pageProp as number,\n    defaultPage ?? 1,\n    onPageChange as (value: number) => void,\n  );\n\n  const isPaginated = paginationMode !== 'off';\n  const isServerPaginated = paginationMode === 'server';\n  const total = isServerPaginated ? totalProp ?? 0 : sortedRows.length;\n\n  const pageInfo = getPageInfo({\n    page,\n    pageSize,\n    total,\n    totalPages: isServerPaginated ? totalPages : undefined,\n  });\n\n  const setPage = useEvent((next: number) =>\n    setPageState(clampPage(next, pageInfo.totalPages)),\n  );\n  const setPageSize = useEvent((next: number) => {\n    setPageSizeState(next);\n    setPageState(1);\n\n    if (pageSizeProp === undefined) storage.write({ pageSize: next });\n  });\n\n  const visibleRows =\n    paginationMode === 'client'\n      ? sortedRows.slice(\n          (pageInfo.page - 1) * pageSize,\n          pageInfo.page * pageSize,\n        )\n      : sortedRows;\n\n  const [ownColumnWidths, setOwnColumnWidths] = useState<\n    Record<string, number>\n  >(\n    () =>\n      (columnWidthsProp === undefined && storage.has('columnWidths')\n        ? storage.initial.columnWidths ?? defaultColumnWidths\n        : defaultColumnWidths) ?? EMPTY_WIDTHS,\n  );\n  const [draftColumnWidths, setDraftColumnWidths] = useState<Record<\n    string,\n    number\n  > | null>(null);\n  const draftRef = useRef<Record<string, number> | null>(null);\n\n  const baseColumnWidths = columnWidthsProp ?? ownColumnWidths;\n  const columnWidths = draftColumnWidths ?? baseColumnWidths;\n\n  const handleColumnResize = useEvent((key: string, width: number) => {\n    draftRef.current = {\n      ...(draftRef.current ?? baseColumnWidths),\n      [key]: Math.round(width),\n    };\n    setDraftColumnWidths(draftRef.current);\n  });\n\n  const handleColumnResizeEnd = useEvent((key: string) => {\n    const next = draftRef.current ?? baseColumnWidths;\n\n    if (columnWidthsProp === undefined) {\n      setOwnColumnWidths(next);\n      storage.write({ columnWidths: next });\n    }\n\n    onColumnResize?.(key, next[key], next);\n    draftRef.current = null;\n    setDraftColumnWidths(null);\n  });\n\n  const leadingColumns = useMemo(\n    () =>\n      showRowNumbers\n        ? [{ key: ROW_NUMBER_COLUMN_KEY, width: ROW_NUMBER_WIDTH }]\n        : undefined,\n    [showRowNumbers],\n  );\n\n  const layout = useTableColumns<T>({\n    columns: resolvedColumns,\n    containerWidth,\n    columnWidths,\n    leadingColumns,\n  });\n\n  const { t } = useI18n();\n\n  const resolvedGetRowKey = useMemo(\n    () => getRowKey ?? defaultGetRowKey<T>(rowKey),\n    [getRowKey, rowKey],\n  );\n\n  // Every row a range can reach, in the order they appear on screen. Pinned rows\n  // are in it: a total is a figure like any other, and having to copy it\n  // separately from the column it sums is the wrong trade.\n  //\n  // The keys are built here rather than inside the hook so they cannot disagree\n  // with the ones the renderer stamps — a pinned row is keyed by its own index\n  // within its group, exactly as `renderPinnedRow` keys it.\n  const selectionRows = useMemo(\n    () => [\n      ...(pinnedTopRows ?? []),\n      ...visibleRows,\n      ...(pinnedBottomRows ?? []),\n    ],\n    [pinnedTopRows, visibleRows, pinnedBottomRows],\n  );\n  const selectionRowKeys = useMemo(\n    () => [\n      // Section-qualified, matching what the renderer stamps: the same record\n      // is routinely pinned at both edges, and one flat key space collapsed the\n      // two into whichever came first.\n      ...(pinnedTopRows ?? []).map((row, index) =>\n        selectionRowKey('pinnedTop', resolvedGetRowKey(row, index)),\n      ),\n      ...visibleRows.map(resolvedGetRowKey),\n      ...(pinnedBottomRows ?? []).map((row, index) =>\n        selectionRowKey('pinnedBottom', resolvedGetRowKey(row, index)),\n      ),\n    ],\n    [pinnedTopRows, visibleRows, pinnedBottomRows, resolvedGetRowKey],\n  );\n\n  // The hook works in one flat row order; the section a row belongs to is a\n  // property of where it sits in that order, so it is resolved here rather than\n  // asking the consumer to track it.\n  const resolveCellSelectable = useEvent(\n    (row: T, rowKey: Key, columnKey: string) => {\n      if (!isCellSelectable) return true;\n\n      const index = selectionRowKeys.indexOf(rowKey);\n      const topCount = pinnedTopRows?.length ?? 0;\n      const section: CubeTableRowSection =\n        index < topCount\n          ? 'pinnedTop'\n          : index < topCount + visibleRows.length\n            ? 'body'\n            : 'pinnedBottom';\n\n      return isCellSelectable({ row, rowKey, columnKey, section });\n    },\n  );\n\n  const cellSelection = useCellSelection<T>({\n    mode: cellSelectionMode,\n    columns: layout.columns,\n    rows: selectionRows,\n    rowKeys: selectionRowKeys,\n    isCellSelectable: isCellSelectable ? resolveCellSelectable : undefined,\n    range: selectedCellRange,\n    defaultRange: defaultSelectedCellRange,\n    onRangeChange: onCellRangeChange,\n  });\n\n  // Same as `ItemTable`: style props (`height`, `maxHeight`, `margin`, …) land\n  // on the root frame. `height` is the one that matters — there is no\n  // page-scroll mode, so bounding the grid is what turns the body into a\n  // scroller, pins the header, and lets virtualization engage at all.\n  const rootStyles = { ...extractStyles(props, CONTAINER_STYLES), ...styles };\n\n  const smallestPageSize = pageSizeOptions?.length\n    ? Math.min(...pageSizeOptions)\n    : pageSize;\n\n  const showPagination =\n    isPaginated &&\n    !(\n      autoHidePagination &&\n      !hasNextPage &&\n      pageInfo.totalPages <= 1 &&\n      total <= smallestPageSize\n    );\n\n  const hasFooter =\n    showPagination ||\n    footerStart != null ||\n    footerCenter != null ||\n    footerEnd != null;\n\n  return (\n    <TableView<T>\n      {...rest}\n      rootRef={rootRef}\n      qa={qa || 'DataTable'}\n      rows={visibleRows}\n      pinnedTopRows={pinnedTopRows}\n      pinnedBottomRows={pinnedBottomRows}\n      // Continuous across pages: row 101 is row 101, not row 1 of page two.\n      //\n      // Server mode counts too — the page and its size are known there just the\n      // same, and `rows` is that page. Only `'off'` starts at 1, because then\n      // there is no page to be on.\n      rowNumberOffset={\n        paginationMode === 'off' ? 0 : (pageInfo.page - 1) * pageSize\n      }\n      // The same offset drives `aria-rowindex`, which is document-absolute by\n      // contract — a screen reader on page 3 should hear \"row 51 of 240\", not\n      // \"row 1 of 25\".\n      rowIndexOffset={\n        paginationMode === 'off' ? 0 : (pageInfo.page - 1) * pageSize\n      }\n      totalRowCount={total}\n      layout={layout}\n      // Always on, unlike `ItemTable`. A result grid is read down a column, and\n      // once the values are wide and right-aligned the rule is what keeps a\n      // figure attached to its column — which is why Cloud's ag-grid theme sets\n      // `columnBorder` for `DataTable` and not for the list grids.\n      hasColumnDividers\n      cellSelection={cellSelection}\n      getRowKey={resolvedGetRowKey}\n      onScrollerRef={setScrollerEl}\n      isLoading={isLoading}\n      loadingIndicator={loadingIndicator}\n      skeletonRowCount={skeletonRowCount}\n      error={error}\n      // Same localized fallbacks as `ItemTable`: a grid that has finished\n      // loading and shows an unexplained blank rectangle reads as broken.\n      emptyLabel={emptyLabel ?? t('itemTable.noItems', 'No items')}\n      noResultsLabel={\n        noResultsLabel ?? t('itemTable.noResults', 'No results found')\n      }\n      isFiltered={isFiltered}\n      shape={shape}\n      size={size}\n      rowHeight={rowHeight}\n      headerHeight={headerHeight}\n      isStriped={isStriped}\n      isRowMoveAnimated={isRowMoveAnimated}\n      isHeaderHidden={isHeaderHidden}\n      isHeaderSticky={isHeaderSticky}\n      // The header shows the column name at body size — a result grid has no\n      // room for the uppercase caption a list header uses.\n      // `t4` throughout: a result grid is read as a block, and one step down\n      // from the list preset fits noticeably more on screen without losing\n      // legibility. The header takes the medium weight of the same step.\n      contentPreset=\"t4\"\n      headerPreset=\"t4m\"\n      sortMode={resolvedSortMode}\n      sorts={sorts}\n      onColumnSort={toggleSort}\n      isVirtualized={isVirtualized}\n      virtualizeThreshold={virtualizeThreshold}\n      overscan={overscan}\n      isResizable={isResizable}\n      onColumnResize={handleColumnResize}\n      onColumnResizeEnd={handleColumnResizeEnd}\n      getRowProps={getRowProps}\n      ariaLabel={ariaLabel}\n      styles={rootStyles}\n      headerStyles={headerStyles}\n      headerCellStyles={headerCellStyles}\n      bodyStyles={bodyStyles}\n      rowStyles={rowStyles}\n      cellStyles={cellStyles}\n      mods={mods}\n      footer={\n        hasFooter ? (\n          <ItemTableFooter\n            start={footerStart}\n            center={footerCenter}\n            end={footerEnd}\n            styles={footerStyles}\n            pagination={\n              showPagination\n                ? {\n                    page: pageInfo.page,\n                    pageSize,\n                    total,\n                    totalPages: pageInfo.totalPages,\n                    pageSizeOptions,\n                    summary,\n                    hasNextPage,\n                    onPageChange: setPage,\n                    onPageSizeChange: setPageSize,\n                  }\n                : undefined\n            }\n          />\n        ) : null\n      }\n    />\n  );\n}\n\nconst _DataTable = forwardRef(DataTable) as unknown as (<T = any>(\n  props: CubeDataTableProps<T> & { ref?: ForwardedRef<HTMLDivElement> },\n) => ReactElement) & { displayName?: string };\n\n_DataTable.displayName = 'DataTable';\n\nexport { _DataTable as DataTable };\n"],"mappings":"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"}
+{"version":3,"file":"DataTable.js","names":[],"sources":["../../../../src/components/data/DataTable/DataTable.tsx"],"sourcesContent":["import { SelectionManager } from '@react-stately/selection';\nimport { useControlledState } from '@react-stately/utils';\nimport { CONTAINER_STYLES } from '@tenphi/tasty';\nimport { forwardRef, useMemo, useRef, useState } from 'react';\nimport { useMultipleSelectionState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { useI18n } from '../../../i18n';\nimport { useCombinedRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { clampPage, getPageInfo } from '../../navigation/Pagination';\nimport { DraggableCollection } from '../../shared/DraggableCollection';\nimport { ItemTableFooter } from '../ItemTable/ItemTableFooter';\nimport { RowCollection } from '../TableBase/RowCollection';\nimport { TableView } from '../TableBase/TableView';\nimport { selectionRowKey } from '../TableBase/types';\nimport { useCellSelection } from '../TableBase/use-cell-selection';\nimport {\n  getDraggableColumnKeys,\n  isColumnDraggable,\n  useColumnOrder,\n} from '../TableBase/use-column-order';\nimport { useContainerWidth } from '../TableBase/use-container-width';\nimport { useTableColumns } from '../TableBase/use-table-columns';\nimport { ROW_NUMBER_COLUMN_KEY } from '../TableBase/use-table-selection';\nimport { useTableSorts } from '../TableBase/use-table-sorts';\nimport { useTableStorage } from '../TableBase/use-table-storage';\n\nimport type { Key } from '@react-types/shared';\nimport type { ForwardedRef, ReactElement } from 'react';\nimport type { CubeTableRowSection } from '../TableBase/types';\nimport type { CubeDataTableColumn, CubeDataTableProps } from './types';\n\n/** Wide enough for five digits at the dense default. */\nconst ROW_NUMBER_WIDTH = 56;\n\nconst EMPTY_WIDTHS: Record<string, number> = {};\n\nfunction defaultGetRowKey<T>(rowKey: string) {\n  return (row: T, index: number): Key => {\n    const value = (row as any)?.[rowKey];\n\n    return value == null ? index : (value as Key);\n  };\n}\n\n/**\n * A grid for query results.\n *\n * The same engine as `ItemTable` — one `TableView`, one column layout, one\n * value pipeline — with the defaults an analytical grid wants rather than a\n * list's: denser type, banded rows, resizable columns, multi-column sort, and\n * rows pinned for totals.\n *\n * It knows nothing about Cube. Measures, dimensions, pivots and drill-downs\n * reach it as ordinary columns, `render` output and `column.header.menu`\n * content, which is what keeps the ~34 kB of Cloud's column-header menu in\n * Cloud.\n */\nfunction DataTable<T = any>(\n  props: CubeDataTableProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    data,\n    columns,\n    rowKey = 'id',\n    getRowKey,\n    pinnedTopRows,\n    pinnedBottomRows,\n    isLoading = false,\n    loadingIndicator = 'overlay',\n    skeletonRowCount,\n    error,\n    emptyLabel,\n    noResultsLabel,\n    isFiltered,\n    shape = 'plain',\n    // Denser than `ItemTable`'s `medium`: a result grid is read as a block, and\n    // more rows on screen is the point of it.\n    size = 'small',\n    rowHeight,\n    headerHeight,\n    isStriped = true,\n    isHeaderHidden,\n    isHeaderSticky,\n    showRowNumbers = false,\n    sortMode,\n    sorts: sortsProp,\n    defaultSorts,\n    onSortsChange,\n    paginationMode = 'client',\n    page: pageProp,\n    defaultPage,\n    onPageChange,\n    pageSize: pageSizeProp,\n    defaultPageSize = 100,\n    onPageSizeChange,\n    pageSizeOptions,\n    total: totalProp,\n    totalPages,\n    hasNextPage,\n    summary = true,\n    autoHidePagination = true,\n    footerStart,\n    footerCenter,\n    footerEnd,\n    cellSelectionMode = 'range',\n    isCellSelectable,\n    selectedCellRange,\n    defaultSelectedCellRange,\n    onCellRangeChange,\n    isRowMoveAnimated,\n    isResizable = true,\n    columnWidths: columnWidthsProp,\n    defaultColumnWidths,\n    onColumnResize,\n    isColumnReorderable = false,\n    columnOrder,\n    defaultColumnOrder,\n    onColumnOrderChange,\n    columnContextMenu,\n    onColumnMenuAction,\n    columnMenuTriggerProps,\n    columnMenuProps,\n    isVirtualized,\n    virtualizeThreshold,\n    overscan,\n    getRowProps,\n    storageKey,\n    styles,\n    headerStyles,\n    headerCellStyles,\n    bodyStyles,\n    rowStyles,\n    cellStyles,\n    footerStyles,\n    ariaLabel,\n    qa,\n    mods,\n    ...rest\n  } = props;\n\n  const localRef = useRef<HTMLDivElement>(null);\n  const rootRef = useCombinedRefs(ref, localRef);\n  const [scrollerEl, setScrollerEl] = useState<HTMLElement | null>(null);\n  const containerWidth = useContainerWidth(scrollerEl);\n\n  const storage = useTableStorage(storageKey);\n\n  /**\n   * `dataType` is presentational, so it is folded into the column here rather\n   * than reaching the renderer: `number` right-aligns and takes tabular figures\n   * so digits line up down the column.\n   */\n  const resolvedColumns = useMemo(\n    () =>\n      columns.map((column) => {\n        const isNumeric = column.dataType === 'number';\n\n        return {\n          ...column,\n          align: column.align ?? (isNumeric ? 'end' : 'start'),\n          cellStyles: isNumeric\n            ? {\n                fontVariantNumeric: 'tabular-nums',\n                ...(typeof column.cellStyles === 'object'\n                  ? column.cellStyles\n                  : null),\n              }\n            : column.cellStyles,\n        } as CubeDataTableColumn<T>;\n      }),\n    [columns],\n  );\n\n  // Applied to the SOURCE columns, before `useTableColumns`, so hidden-column\n  // filtering, structural injection and pinned hoisting all still happen\n  // downstream and `columnOrder` can never fight `pin`.\n  const columnOrderState = useColumnOrder<T>({\n    columns: resolvedColumns,\n    columnOrder,\n    defaultColumnOrder,\n    onColumnOrderChange,\n    storage,\n  });\n  const orderedColumns = columnOrderState.columns;\n\n  const {\n    sorts,\n    sortedRows,\n    toggleSort,\n    setColumnSort,\n    mode: resolvedSortMode,\n  } = useTableSorts<T>({\n    columns: orderedColumns,\n    rows: data,\n    mode: sortMode,\n    sorts: sortsProp,\n    defaultSorts,\n    onSortsChange,\n  });\n\n  const [pageSize, setPageSizeState] = useControlledState<number>(\n    pageSizeProp as number,\n    (pageSizeProp === undefined && storage.has('pageSize')\n      ? storage.initial.pageSize ?? defaultPageSize\n      : defaultPageSize) as number,\n    onPageSizeChange as (value: number) => void,\n  );\n  const [page, setPageState] = useControlledState<number>(\n    pageProp as number,\n    defaultPage ?? 1,\n    onPageChange as (value: number) => void,\n  );\n\n  const isPaginated = paginationMode !== 'off';\n  const isServerPaginated = paginationMode === 'server';\n  const total = isServerPaginated ? totalProp ?? 0 : sortedRows.length;\n\n  const pageInfo = getPageInfo({\n    page,\n    pageSize,\n    total,\n    totalPages: isServerPaginated ? totalPages : undefined,\n  });\n\n  const setPage = useEvent((next: number) =>\n    setPageState(clampPage(next, pageInfo.totalPages)),\n  );\n  const setPageSize = useEvent((next: number) => {\n    setPageSizeState(next);\n    setPageState(1);\n\n    if (pageSizeProp === undefined) storage.write({ pageSize: next });\n  });\n\n  const visibleRows =\n    paginationMode === 'client'\n      ? sortedRows.slice(\n          (pageInfo.page - 1) * pageSize,\n          pageInfo.page * pageSize,\n        )\n      : sortedRows;\n\n  const [ownColumnWidths, setOwnColumnWidths] = useState<\n    Record<string, number>\n  >(\n    () =>\n      (columnWidthsProp === undefined && storage.has('columnWidths')\n        ? storage.initial.columnWidths ?? defaultColumnWidths\n        : defaultColumnWidths) ?? EMPTY_WIDTHS,\n  );\n  const [draftColumnWidths, setDraftColumnWidths] = useState<Record<\n    string,\n    number\n  > | null>(null);\n  const draftRef = useRef<Record<string, number> | null>(null);\n\n  const baseColumnWidths = columnWidthsProp ?? ownColumnWidths;\n  const columnWidths = draftColumnWidths ?? baseColumnWidths;\n\n  const handleColumnResize = useEvent((key: string, width: number) => {\n    draftRef.current = {\n      ...(draftRef.current ?? baseColumnWidths),\n      [key]: Math.round(width),\n    };\n    setDraftColumnWidths(draftRef.current);\n  });\n\n  const handleColumnResizeEnd = useEvent((key: string) => {\n    const next = draftRef.current ?? baseColumnWidths;\n\n    if (columnWidthsProp === undefined) {\n      setOwnColumnWidths(next);\n      storage.write({ columnWidths: next });\n    }\n\n    onColumnResize?.(key, next[key], next);\n    draftRef.current = null;\n    setDraftColumnWidths(null);\n  });\n\n  const leadingColumns = useMemo(\n    () =>\n      showRowNumbers\n        ? [{ key: ROW_NUMBER_COLUMN_KEY, width: ROW_NUMBER_WIDTH }]\n        : undefined,\n    [showRowNumbers],\n  );\n\n  const layout = useTableColumns<T>({\n    columns: orderedColumns,\n    containerWidth,\n    columnWidths,\n    leadingColumns,\n  });\n\n  const { t } = useI18n();\n\n  const resolvedGetRowKey = useMemo(\n    () => getRowKey ?? defaultGetRowKey<T>(rowKey),\n    [getRowKey, rowKey],\n  );\n\n  // Every row a range can reach, in the order they appear on screen. Pinned rows\n  // are in it: a total is a figure like any other, and having to copy it\n  // separately from the column it sums is the wrong trade.\n  //\n  // The keys are built here rather than inside the hook so they cannot disagree\n  // with the ones the renderer stamps — a pinned row is keyed by its own index\n  // within its group, exactly as `renderPinnedRow` keys it.\n  const selectionRows = useMemo(\n    () => [\n      ...(pinnedTopRows ?? []),\n      ...visibleRows,\n      ...(pinnedBottomRows ?? []),\n    ],\n    [pinnedTopRows, visibleRows, pinnedBottomRows],\n  );\n  const selectionRowKeys = useMemo(\n    () => [\n      // Section-qualified, matching what the renderer stamps: the same record\n      // is routinely pinned at both edges, and one flat key space collapsed the\n      // two into whichever came first.\n      ...(pinnedTopRows ?? []).map((row, index) =>\n        selectionRowKey('pinnedTop', resolvedGetRowKey(row, index)),\n      ),\n      ...visibleRows.map(resolvedGetRowKey),\n      ...(pinnedBottomRows ?? []).map((row, index) =>\n        selectionRowKey('pinnedBottom', resolvedGetRowKey(row, index)),\n      ),\n    ],\n    [pinnedTopRows, visibleRows, pinnedBottomRows, resolvedGetRowKey],\n  );\n\n  // The hook works in one flat row order; the section a row belongs to is a\n  // property of where it sits in that order, so it is resolved here rather than\n  // asking the consumer to track it.\n  const resolveCellSelectable = useEvent(\n    (row: T, rowKey: Key, columnKey: string) => {\n      if (!isCellSelectable) return true;\n\n      const index = selectionRowKeys.indexOf(rowKey);\n      const topCount = pinnedTopRows?.length ?? 0;\n      const section: CubeTableRowSection =\n        index < topCount\n          ? 'pinnedTop'\n          : index < topCount + visibleRows.length\n            ? 'body'\n            : 'pinnedBottom';\n\n      return isCellSelectable({ row, rowKey, columnKey, section });\n    },\n  );\n\n  const cellSelection = useCellSelection<T>({\n    mode: cellSelectionMode,\n    columns: layout.columns,\n    rows: selectionRows,\n    rowKeys: selectionRowKeys,\n    isCellSelectable: isCellSelectable ? resolveCellSelectable : undefined,\n    range: selectedCellRange,\n    defaultRange: defaultSelectedCellRange,\n    onRangeChange: onCellRangeChange,\n  });\n\n  // Same as `ItemTable`: style props (`height`, `maxHeight`, `margin`, …) land\n  // on the root frame. `height` is the one that matters — there is no\n  // page-scroll mode, so bounding the grid is what turns the body into a\n  // scroller, pins the header, and lets virtualization engage at all.\n  const rootStyles = { ...extractStyles(props, CONTAINER_STYLES), ...styles };\n\n  const smallestPageSize = pageSizeOptions?.length\n    ? Math.min(...pageSizeOptions)\n    : pageSize;\n\n  const showPagination =\n    isPaginated &&\n    !(\n      autoHidePagination &&\n      !hasNextPage &&\n      pageInfo.totalPages <= 1 &&\n      total <= smallestPageSize\n    );\n\n  const hasFooter =\n    showPagination ||\n    footerStart != null ||\n    footerCenter != null ||\n    footerEnd != null;\n\n  /* ── column reordering ────────────────────────────────────────────────── */\n\n  const headRowRef = useRef<HTMLTableRowElement>(null);\n  const draggableColumnKeys = useMemo(\n    () => getDraggableColumnKeys(layout.columns, isColumnReorderable),\n    [layout.columns, isColumnReorderable],\n  );\n  const columnCollection = useMemo(\n    () =>\n      new RowCollection(\n        layout.columns.filter((column) =>\n          isColumnDraggable(column, isColumnReorderable),\n        ),\n        (column) => column.key,\n        new Set(),\n        // The drag announcements read this — otherwise a screen reader hears\n        // \"Insert between  and \".\n        (column) =>\n          typeof column.title === 'string' ? column.title : column.key,\n      ),\n    [layout.columns, isColumnReorderable],\n  );\n  /**\n   * `'single'`, not `'none'`.\n   *\n   * `useDraggableItem` only deletes its own `onClick` — the one that would\n   * hijack a screen-reader click away from the sort — when the selection mode is\n   * not `'none'`, and only then does it attach the keyboard drag description.\n   * Nothing is ever actually selected here.\n   */\n  const columnSelectionState = useMultipleSelectionState({\n    selectionMode: 'single',\n    disabledBehavior: 'all',\n  });\n  const columnSelectionManager = useMemo(\n    () => new SelectionManager(columnCollection, columnSelectionState),\n    [columnCollection, columnSelectionState],\n  );\n  const handleColumnFocus = useEvent((columnKey: string | null) => {\n    columnSelectionManager.setFocusedKey(columnKey);\n  });\n\n  // One draggable column cannot be reordered, so the machinery stays unmounted\n  // and the header keeps its exact DOM.\n  const isColumnDragEnabled =\n    isColumnReorderable && draggableColumnKeys.length > 1;\n\n  const renderTable = (\n    columnDragState?: any,\n    columnDropState?: any,\n    headCollectionProps?: Record<string, any>,\n  ) => (\n    <TableView<T>\n      {...rest}\n      rootRef={rootRef}\n      qa={qa || 'DataTable'}\n      rows={visibleRows}\n      pinnedTopRows={pinnedTopRows}\n      pinnedBottomRows={pinnedBottomRows}\n      // Continuous across pages: row 101 is row 101, not row 1 of page two.\n      //\n      // Server mode counts too — the page and its size are known there just the\n      // same, and `rows` is that page. Only `'off'` starts at 1, because then\n      // there is no page to be on.\n      rowNumberOffset={\n        paginationMode === 'off' ? 0 : (pageInfo.page - 1) * pageSize\n      }\n      // The same offset drives `aria-rowindex`, which is document-absolute by\n      // contract — a screen reader on page 3 should hear \"row 51 of 240\", not\n      // \"row 1 of 25\".\n      rowIndexOffset={\n        paginationMode === 'off' ? 0 : (pageInfo.page - 1) * pageSize\n      }\n      totalRowCount={total}\n      layout={layout}\n      // Always on, unlike `ItemTable`. A result grid is read down a column, and\n      // once the values are wide and right-aligned the rule is what keeps a\n      // figure attached to its column — which is why Cloud's ag-grid theme sets\n      // `columnBorder` for `DataTable` and not for the list grids.\n      hasColumnDividers\n      cellSelection={cellSelection}\n      getRowKey={resolvedGetRowKey}\n      onScrollerRef={setScrollerEl}\n      isLoading={isLoading}\n      loadingIndicator={loadingIndicator}\n      skeletonRowCount={skeletonRowCount}\n      error={error}\n      // Same localized fallbacks as `ItemTable`: a grid that has finished\n      // loading and shows an unexplained blank rectangle reads as broken.\n      emptyLabel={emptyLabel ?? t('itemTable.noItems', 'No items')}\n      noResultsLabel={\n        noResultsLabel ?? t('itemTable.noResults', 'No results found')\n      }\n      isFiltered={isFiltered}\n      shape={shape}\n      size={size}\n      rowHeight={rowHeight}\n      headerHeight={headerHeight}\n      isStriped={isStriped}\n      isRowMoveAnimated={isRowMoveAnimated}\n      isHeaderHidden={isHeaderHidden}\n      isHeaderSticky={isHeaderSticky}\n      // The header shows the column name at body size — a result grid has no\n      // room for the uppercase caption a list header uses.\n      // `t4` throughout: a result grid is read as a block, and one step down\n      // from the list preset fits noticeably more on screen without losing\n      // legibility. The header takes the medium weight of the same step.\n      contentPreset=\"t4\"\n      headerPreset=\"t4m\"\n      sortMode={resolvedSortMode}\n      sorts={sorts}\n      onColumnSort={toggleSort}\n      onColumnSortChange={setColumnSort}\n      columnContextMenu={columnContextMenu}\n      onColumnMenuAction={onColumnMenuAction}\n      columnMenuTriggerProps={columnMenuTriggerProps}\n      columnMenuProps={columnMenuProps}\n      isVirtualized={isVirtualized}\n      virtualizeThreshold={virtualizeThreshold}\n      overscan={overscan}\n      isResizable={isResizable}\n      onColumnResize={handleColumnResize}\n      onColumnResizeEnd={handleColumnResizeEnd}\n      getRowProps={getRowProps}\n      ariaLabel={ariaLabel}\n      styles={rootStyles}\n      headerStyles={headerStyles}\n      headerCellStyles={headerCellStyles}\n      bodyStyles={bodyStyles}\n      rowStyles={rowStyles}\n      cellStyles={cellStyles}\n      mods={mods}\n      isColumnReorderable={isColumnDragEnabled}\n      columnDragState={columnDragState}\n      columnDropState={columnDropState}\n      headCollectionProps={headCollectionProps}\n      headRowRef={headRowRef}\n      onColumnFocus={handleColumnFocus}\n      footer={\n        hasFooter ? (\n          <ItemTableFooter\n            start={footerStart}\n            center={footerCenter}\n            end={footerEnd}\n            styles={footerStyles}\n            pagination={\n              showPagination\n                ? {\n                    page: pageInfo.page,\n                    pageSize,\n                    total,\n                    totalPages: pageInfo.totalPages,\n                    pageSizeOptions,\n                    summary,\n                    hasNextPage,\n                    onPageChange: setPage,\n                    onPageSizeChange: setPageSize,\n                  }\n                : undefined\n            }\n          />\n        ) : null\n      }\n    />\n  );\n\n  return isColumnDragEnabled ? (\n    <DraggableCollection\n      state={{\n        collection: columnCollection as any,\n        selectionManager: columnSelectionManager as any,\n        disabledKeys: new Set(),\n      }}\n      // The element that DIRECTLY contains the header cells. React Aria's\n      // `ListDropTargetDelegate` resolves a drop by measuring `[data-key]`\n      // descendants of this element, so pointing it anywhere else leaves every\n      // drop unresolvable — the column lifts but never lands.\n      listRef={headRowRef}\n      orderedKeys={draggableColumnKeys}\n      orientation=\"horizontal\"\n      onReorder={columnOrderState.reorder}\n    >\n      {(dragState, dropState, collectionProps) =>\n        renderTable(dragState, dropState, collectionProps)\n      }\n    </DraggableCollection>\n  ) : (\n    renderTable()\n  );\n}\n\nconst _DataTable = forwardRef(DataTable) as unknown as (<T = any>(\n  props: CubeDataTableProps<T> & { ref?: ForwardedRef<HTMLDivElement> },\n) => ReactElement) & { displayName?: string };\n\n_DataTable.displayName = 'DataTable';\n\nexport { _DataTable as DataTable };\n"],"mappings":"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"}

package/dist/components/data/DataTable/types.d.ts

@@ -124,6 +124,49 @@ interface CubeDataTableProps<T = any> extends BaseProps, ContainerStyleProps {
   columnWidths?: Record<string, number>;
   defaultColumnWidths?: Record<string, number>;
   onColumnResize?: (columnKey: string, width: number, all: Record<string, number>) => void;
+  /**
+   * Drag column headers sideways to reorder them.
+   *
+   * Named for the axis: `ItemTable`'s `isReorderable` already means ROW
+   * reordering, and the two are different features.
+   *
+   * Structural and pinned columns stay put. `pin` is already the ordering
+   * authority for a pinned column, and a sticky `<th>` cannot be hit-tested
+   * reliably under horizontal scroll.
+   *
+   * @default false
+   */
+  isColumnReorderable?: boolean;
+  /**
+   * Controlled order, as column keys. Works with or without dragging, so a
+   * column manager elsewhere in the page can drive it on its own.
+   *
+   * Stale keys are ignored, and a column missing from the list lands after the
+   * neighbour it had in `columns` rather than at the end.
+   */
+  columnOrder?: string[];
+  defaultColumnOrder?: string[];
+  /** The FULL key list, including hidden and pinned columns. */
+  onColumnOrderChange?: (order: string[]) => void;
+  /**
+   * Where a column's `header.menu` is exposed.
+   *
+   * - `true` — a `⋮` trigger in the header, plus right-click and Shift+F10.
+   * - `'context-only'` — right-click and Shift+F10 only, no trigger.
+   * - `false` — suppressed entirely.
+   *
+   * @default true
+   */
+  columnContextMenu?: boolean | 'context-only';
+  /**
+   * The key of the pressed `Menu.Item`, as written — no `.$` prefix.
+   *
+   * Fires for the reserved sort keys too (`sort-asc`, `sort-desc`,
+   * `clear-sort`), after the table has already applied them.
+   */
+  onColumnMenuAction?: (action: string, columnKey: string) => void;
+  columnMenuTriggerProps?: Record<string, any>;
+  columnMenuProps?: Record<string, any>;
   isVirtualized?: boolean | 'auto';
   virtualizeThreshold?: number;
   overscan?: number;

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7406950 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b7944fa | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
@@ -32,7 +32,7 @@ function defaultGetRowKey(rowKey) {
 	};
 }
 function ItemTable(props, ref) {
-	const { data, columns, rowKey = "id", getRowKey, isLoading = false, loadingIndicator = "overlay", selectionMode, bulkActions, rowLink, onRowAction, rowMenu, rowContextMenu = false, onRowMenuAction, rowMenuTriggerProps, bulkBarPlacement = "floating", bulkBarStyles, selectedKeys: selectedKeysProp, defaultSelectedKeys, onSelectionChange, selectAllMode = "page", isRowSelectable, selectionTooltip, disabledKeys, skeletonRowCount = 6, emptyLabel, noResultsLabel, error, isFiltered, toolbar, isSearchable = false, searchMode = "client", searchPlaceholder, searchValue: searchValueProp, defaultSearchValue, onSearchChange, searchDelay = 500, searchFilter, filters, actions, onRefresh, paginationMode = "client", pageSize: pageSizeProp, defaultPageSize = 50, autoHidePagination = true, onLoadMore, hasMore, isLoadingMore, loadMoreMargin, storageKey, persist, isReorderable = false, onReorder, dropOnRow, getItemDragInfo, isResizable = false, columnWidths: columnWidthsProp, defaultColumnWidths, onColumnResize, onPageSizeChange, pageSizeOptions = [
+	const { data, columns, rowKey = "id", getRowKey, isLoading = false, loadingIndicator = "overlay", selectionMode, bulkActions, rowLink, onRowAction, rowMenu, rowContextMenu = false, onRowMenuAction, rowMenuTriggerProps, bulkBarPlacement = "floating", bulkBarStyles, selectedKeys: selectedKeysProp, defaultSelectedKeys, onSelectionChange, selectAllMode = "page", isRowSelectable, selectionTooltip, disabledKeys, skeletonRowCount = 6, emptyLabel, noResultsLabel, error, isFiltered, toolbar, isSearchable = false, searchMode = "client", searchPlaceholder, searchValue: searchValueProp, defaultSearchValue, onSearchChange, searchDelay = 500, searchFilter, filters, actions, onRefresh, paginationMode = "client", pageSize: pageSizeProp, defaultPageSize = 50, autoHidePagination = true, onLoadMore, hasMore, isLoadingMore, loadMoreMargin, storageKey, persist, isReorderable = false, onReorder, dropOnRow, getItemDragInfo, isResizable = false, columnWidths: columnWidthsProp, defaultColumnWidths, onColumnResize, columnContextMenu, onColumnMenuAction, columnMenuTriggerProps, columnMenuProps, onPageSizeChange, pageSizeOptions = [
 		10,
 		20,
 		50,
@@ -58,7 +58,7 @@ function ItemTable(props, ref) {
 		filter: searchFilter
 	});
 	const storage = useTableStorage(storageKey, persist);
-	const { sort, sortedRows, toggleSort, mode: resolvedSortMode } = useTableSort({
+	const { sort, sortedRows, toggleSort, setColumnSort, mode: resolvedSortMode } = useTableSort({
 		columns,
 		rows: searchedRows,
 		mode: sortMode,
@@ -273,6 +273,11 @@ function ItemTable(props, ref) {
 		sortMode: resolvedSortMode,
 		sort,
 		onColumnSort: toggleSort,
+		onColumnSortChange: setColumnSort,
+		columnContextMenu,
+		onColumnMenuAction,
+		columnMenuTriggerProps,
+		columnMenuProps,
 		getRowProps,
 		ariaLabel,
 		styles: rootStyles,