@cube-dev/ui-kit 0.157.3 → 0.159.0

package/dist/components/content/PrismCode/PrismCode.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 { RendererPrism, ensureYamlSqlExtensions } from "./prismSetup.js";
 import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/content/PrismCode/prismSetup.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 { 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.157.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.159.0 | 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.157.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.159.0 | 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.157.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.159.0 | 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.157.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.159.0 | 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.157.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.159.0 | 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.157.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.159.0 | 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.157.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.159.0 | 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.157.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.159.0 | 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.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 { 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.157.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.159.0 | 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.157.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.159.0 | 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.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 { useMemo, useState } from "react";
 

package/dist/components/content/Tree/use-load-data.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 { 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.157.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.159.0 | 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.157.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.159.0 | Cube Dev Team */
 import { TooltipProvider } from "../overlays/Tooltip/TooltipProvider.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -68,38 +68,46 @@ function useAutoTooltip({ tooltip, children, labelProps, isDynamicLabel = false
 		delete props.ref;
 		return props;
 	}, [labelProps]);
-	const renderWithTooltip = (renderElement, defaultTooltipPlacement) => {
-		if (tooltip) {
-			if (typeof tooltip === "string") return /* @__PURE__ */ jsx(TooltipProvider, {
-				placement: defaultTooltipPlacement,
-				title: tooltip,
-				children: (triggerProps, ref) => renderElement(triggerProps, ref)
-			});
-			if (tooltip === true) {
-				if ((children || labelProps) && (isLabelOverflowed || isDynamicLabel)) return /* @__PURE__ */ jsx(TooltipProvider, {
-					placement: defaultTooltipPlacement,
-					title: children,
-					isDisabled: !isLabelOverflowed && isDynamicLabel,
-					children: (triggerProps, ref) => renderElement(triggerProps, ref)
-				});
-			}
-			if (typeof tooltip === "object") {
-				const { auto, ...tooltipProps } = tooltip;
-				if (tooltipProps.title && auto !== true) return /* @__PURE__ */ jsx(TooltipProvider, {
-					placement: defaultTooltipPlacement,
-					...tooltipProps,
-					children: (triggerProps, ref) => renderElement(triggerProps, ref)
-				});
-				if ((children || labelProps) && (isLabelOverflowed || isDynamicLabel)) return /* @__PURE__ */ jsx(TooltipProvider, {
-					placement: defaultTooltipPlacement,
-					title: tooltipProps.title ?? children,
-					isDisabled: !isLabelOverflowed && isDynamicLabel && tooltipProps.isDisabled !== true,
-					...tooltipProps,
-					children: (triggerProps, ref) => renderElement(triggerProps, ref)
-				});
-			}
+	/**
+	* The `TooltipProvider` props this tooltip resolves to, or `null` when no
+	* tooltip is rendered at all. Resolved once so that both the rendering below
+	* and `isTooltipActive` speak about the same tooltip.
+	*/
+	const resolvedTooltip = useMemo(() => {
+		if (!tooltip) return null;
+		if (typeof tooltip === "string") return { title: tooltip };
+		const hasAutoContent = !!(children || labelProps) && (isLabelOverflowed || isDynamicLabel);
+		if (tooltip === true) {
+			if (!hasAutoContent) return null;
+			return {
+				title: children,
+				isDisabled: !isLabelOverflowed && isDynamicLabel
+			};
 		}
-		return renderElement();
+		const { auto, ...tooltipProps } = tooltip;
+		if (tooltipProps.title && auto !== true) return tooltipProps;
+		if (!hasAutoContent) return null;
+		return {
+			title: tooltipProps.title ?? children,
+			isDisabled: !isLabelOverflowed && isDynamicLabel && tooltipProps.isDisabled !== true,
+			...tooltipProps
+		};
+	}, [
+		tooltip,
+		children,
+		labelProps,
+		isLabelOverflowed,
+		isDynamicLabel
+	]);
+	/** Whether a tooltip is rendered and able to open. */
+	const isTooltipActive = !!resolvedTooltip && resolvedTooltip.isDisabled !== true;
+	const renderWithTooltip = (renderElement, defaultTooltipPlacement) => {
+		if (!resolvedTooltip) return renderElement();
+		return /* @__PURE__ */ jsx(TooltipProvider, {
+			placement: defaultTooltipPlacement,
+			...resolvedTooltip,
+			children: (triggerProps, ref) => renderElement(triggerProps, ref)
+		});
 	};
 	return {
 		labelRef: handleLabelElementRef,
@@ -107,6 +115,7 @@ function useAutoTooltip({ tooltip, children, labelProps, isDynamicLabel = false
 		isLabelOverflowed,
 		isAutoTooltipEnabled,
 		hasTooltip: !!tooltip,
+		isTooltipActive,
 		renderWithTooltip
 	};
 }

package/dist/components/content/use-auto-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-auto-tooltip.js","names":[],"sources":["../../../src/components/content/use-auto-tooltip.tsx"],"sourcesContent":["import {\n  HTMLAttributes,\n  ReactNode,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { OverlayProps } from 'react-aria';\n\nimport {\n  CubeTooltipProviderProps,\n  TooltipProvider,\n} from '../overlays/Tooltip/TooltipProvider';\n\nimport type { Props } from '../../props';\n\nexport type AutoTooltipValue =\n  | string\n  | boolean\n  | (Omit<CubeTooltipProviderProps, 'children'> & { auto?: boolean });\n\nexport interface UseAutoTooltipOptions {\n  tooltip: AutoTooltipValue | undefined;\n  children: ReactNode;\n  labelProps?: Props;\n  isDynamicLabel?: boolean;\n}\n\nexport function useAutoTooltip({\n  tooltip,\n  children,\n  labelProps,\n  isDynamicLabel = false,\n}: UseAutoTooltipOptions) {\n  // Determine if auto tooltip is enabled\n  // Auto tooltip only works when children is a string (overflow detection needs text)\n  const isAutoTooltipEnabled = useMemo(() => {\n    if (typeof children !== 'string') return false;\n\n    // Boolean true enables auto overflow detection\n    if (tooltip === true) return true;\n    if (typeof tooltip === 'object') {\n      // If title is provided and auto is explicitly true, enable auto overflow detection\n      if (tooltip.title) {\n        return tooltip.auto === true;\n      }\n\n      // If no title is provided, default to auto=true unless explicitly disabled\n      const autoValue = tooltip.auto !== undefined ? tooltip.auto : true;\n      return !!autoValue;\n    }\n    return false;\n  }, [tooltip, children]);\n\n  // Track label overflow for auto tooltip (only when enabled)\n  const externalLabelRef = (labelProps as any)?.ref;\n  const [isLabelOverflowed, setIsLabelOverflowed] = useState(false);\n  const elementRef = useRef<HTMLElement | null>(null);\n  const resizeObserverRef = useRef<ResizeObserver | null>(null);\n\n  const checkLabelOverflow = useCallback(() => {\n    const label = elementRef.current;\n    if (!label) {\n      setIsLabelOverflowed(false);\n      return;\n    }\n\n    const hasOverflow = label.scrollWidth > label.clientWidth;\n    setIsLabelOverflowed(hasOverflow);\n  }, []);\n\n  useEffect(() => {\n    if (isAutoTooltipEnabled) {\n      checkLabelOverflow();\n    }\n  }, [isAutoTooltipEnabled, checkLabelOverflow]);\n\n  // Attach ResizeObserver via callback ref to handle DOM node changes\n  const handleLabelElementRef = useCallback(\n    (element: HTMLElement | null) => {\n      // Call external callback ref to notify external refs\n      if (externalLabelRef) {\n        if (typeof externalLabelRef === 'function') {\n          externalLabelRef(element);\n        } else {\n          (externalLabelRef as any).current = element;\n        }\n      }\n\n      // Disconnect previous observer\n      if (resizeObserverRef.current) {\n        try {\n          resizeObserverRef.current.disconnect();\n        } catch {\n          // do nothing\n        }\n        resizeObserverRef.current = null;\n      }\n\n      elementRef.current = element;\n\n      if (element && isAutoTooltipEnabled) {\n        // Create a fresh observer to capture the latest callback\n        const obs = new ResizeObserver(() => {\n          checkLabelOverflow();\n        });\n        resizeObserverRef.current = obs;\n        obs.observe(element);\n        // Initial check\n        checkLabelOverflow();\n      } else {\n        setIsLabelOverflowed(false);\n      }\n    },\n    [externalLabelRef, isAutoTooltipEnabled, checkLabelOverflow],\n  );\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      if (resizeObserverRef.current) {\n        try {\n          resizeObserverRef.current.disconnect();\n        } catch {\n          // do nothing\n        }\n        resizeObserverRef.current = null;\n      }\n      elementRef.current = null;\n    };\n  }, []);\n\n  const finalLabelProps = useMemo(() => {\n    const props = {\n      ...(labelProps || {}),\n    };\n\n    delete props.ref;\n\n    return props;\n  }, [labelProps]);\n\n  const renderWithTooltip = (\n    renderElement: (\n      tooltipTriggerProps?: HTMLAttributes<HTMLElement>,\n      tooltipRef?: RefObject<HTMLElement>,\n    ) => ReactNode,\n    defaultTooltipPlacement: OverlayProps['placement'],\n  ) => {\n    // Handle tooltip rendering based on tooltip prop type\n    if (tooltip) {\n      // String tooltip - simple case\n      if (typeof tooltip === 'string') {\n        return (\n          <TooltipProvider placement={defaultTooltipPlacement} title={tooltip}>\n            {(triggerProps, ref) => renderElement(triggerProps, ref)}\n          </TooltipProvider>\n        );\n      }\n\n      // Boolean tooltip - auto tooltip on overflow\n      if (tooltip === true) {\n        if ((children || labelProps) && (isLabelOverflowed || isDynamicLabel)) {\n          return (\n            <TooltipProvider\n              placement={defaultTooltipPlacement}\n              title={children}\n              isDisabled={!isLabelOverflowed && isDynamicLabel}\n            >\n              {(triggerProps, ref) => renderElement(triggerProps, ref)}\n            </TooltipProvider>\n          );\n        }\n      }\n\n      // Object tooltip - advanced configuration\n      if (typeof tooltip === 'object') {\n        const { auto, ...tooltipProps } = tooltip;\n\n        // If title is provided and auto is not explicitly true, always show the tooltip\n        if (tooltipProps.title && auto !== true) {\n          return (\n            <TooltipProvider\n              placement={defaultTooltipPlacement}\n              {...tooltipProps}\n            >\n              {(triggerProps, ref) => renderElement(triggerProps, ref)}\n            </TooltipProvider>\n          );\n        }\n\n        // If title is provided with auto=true, OR no title but auto behavior enabled\n        if ((children || labelProps) && (isLabelOverflowed || isDynamicLabel)) {\n          return (\n            <TooltipProvider\n              placement={defaultTooltipPlacement}\n              title={tooltipProps.title ?? children}\n              isDisabled={\n                !isLabelOverflowed &&\n                isDynamicLabel &&\n                tooltipProps.isDisabled !== true\n              }\n              {...tooltipProps}\n            >\n              {(triggerProps, ref) => renderElement(triggerProps, ref)}\n            </TooltipProvider>\n          );\n        }\n      }\n    }\n\n    return renderElement();\n  };\n\n  return {\n    labelRef: handleLabelElementRef,\n    labelProps: finalLabelProps,\n    isLabelOverflowed,\n    isAutoTooltipEnabled,\n    hasTooltip: !!tooltip,\n    renderWithTooltip,\n  };\n}\n"],"mappings":";;;;;;AA+BA,SAAgB,eAAe,EAC7B,SACA,UACA,YACA,iBAAiB,SACO;CAGxB,MAAM,uBAAuB,cAAc;AACzC,MAAI,OAAO,aAAa,SAAU,QAAO;AAGzC,MAAI,YAAY,KAAM,QAAO;AAC7B,MAAI,OAAO,YAAY,UAAU;AAE/B,OAAI,QAAQ,MACV,QAAO,QAAQ,SAAS;AAK1B,UAAO,CAAC,EADU,QAAQ,SAAS,SAAY,QAAQ,OAAO;;AAGhE,SAAO;IACN,CAAC,SAAS,SAAS,CAAC;CAGvB,MAAM,mBAAoB,YAAoB;CAC9C,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,MAAM;CACjE,MAAM,aAAa,OAA2B,KAAK;CACnD,MAAM,oBAAoB,OAA8B,KAAK;CAE7D,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,QAAQ,WAAW;AACzB,MAAI,CAAC,OAAO;AACV,wBAAqB,MAAM;AAC3B;;AAIF,uBADoB,MAAM,cAAc,MAAM,YACb;IAChC,EAAE,CAAC;AAEN,iBAAgB;AACd,MAAI,qBACF,qBAAoB;IAErB,CAAC,sBAAsB,mBAAmB,CAAC;CAG9C,MAAM,wBAAwB,aAC3B,YAAgC;AAE/B,MAAI,iBACF,KAAI,OAAO,qBAAqB,WAC9B,kBAAiB,QAAQ;MAEzB,CAAC,iBAAyB,UAAU;AAKxC,MAAI,kBAAkB,SAAS;AAC7B,OAAI;AACF,sBAAkB,QAAQ,YAAY;WAChC;AAGR,qBAAkB,UAAU;;AAG9B,aAAW,UAAU;AAErB,MAAI,WAAW,sBAAsB;GAEnC,MAAM,MAAM,IAAI,qBAAqB;AACnC,wBAAoB;KACpB;AACF,qBAAkB,UAAU;AAC5B,OAAI,QAAQ,QAAQ;AAEpB,uBAAoB;QAEpB,sBAAqB,MAAM;IAG/B;EAAC;EAAkB;EAAsB;EAAmB,CAC7D;AAGD,iBAAgB;AACd,eAAa;AACX,OAAI,kBAAkB,SAAS;AAC7B,QAAI;AACF,uBAAkB,QAAQ,YAAY;YAChC;AAGR,sBAAkB,UAAU;;AAE9B,cAAW,UAAU;;IAEtB,EAAE,CAAC;CAEN,MAAM,kBAAkB,cAAc;EACpC,MAAM,QAAQ,EACZ,GAAI,cAAc,EAAE,EACrB;AAED,SAAO,MAAM;AAEb,SAAO;IACN,CAAC,WAAW,CAAC;CAEhB,MAAM,qBACJ,eAIA,4BACG;AAEH,MAAI,SAAS;AAEX,OAAI,OAAO,YAAY,SACrB,QACE,oBAAC;IAAgB,WAAW;IAAyB,OAAO;eACxD,cAAc,QAAQ,cAAc,cAAc,IAAI;KACxC;AAKtB,OAAI,YAAY,MACd;SAAK,YAAY,gBAAgB,qBAAqB,gBACpD,QACE,oBAAC;KACC,WAAW;KACX,OAAO;KACP,YAAY,CAAC,qBAAqB;gBAEhC,cAAc,QAAQ,cAAc,cAAc,IAAI;MACxC;;AAMxB,OAAI,OAAO,YAAY,UAAU;IAC/B,MAAM,EAAE,MAAM,GAAG,iBAAiB;AAGlC,QAAI,aAAa,SAAS,SAAS,KACjC,QACE,oBAAC;KACC,WAAW;KACX,GAAI;gBAEF,cAAc,QAAQ,cAAc,cAAc,IAAI;MACxC;AAKtB,SAAK,YAAY,gBAAgB,qBAAqB,gBACpD,QACE,oBAAC;KACC,WAAW;KACX,OAAO,aAAa,SAAS;KAC7B,YACE,CAAC,qBACD,kBACA,aAAa,eAAe;KAE9B,GAAI;gBAEF,cAAc,QAAQ,cAAc,cAAc,IAAI;MACxC;;;AAM1B,SAAO,eAAe;;AAGxB,QAAO;EACL,UAAU;EACV,YAAY;EACZ;EACA;EACA,YAAY,CAAC,CAAC;EACd;EACD"}
+{"version":3,"file":"use-auto-tooltip.js","names":[],"sources":["../../../src/components/content/use-auto-tooltip.tsx"],"sourcesContent":["import {\n  HTMLAttributes,\n  ReactNode,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { OverlayProps } from 'react-aria';\n\nimport {\n  CubeTooltipProviderProps,\n  TooltipProvider,\n} from '../overlays/Tooltip/TooltipProvider';\n\nimport type { Props } from '../../props';\n\nexport type AutoTooltipValue =\n  | string\n  | boolean\n  | (Omit<CubeTooltipProviderProps, 'children'> & { auto?: boolean });\n\nexport interface UseAutoTooltipOptions {\n  tooltip: AutoTooltipValue | undefined;\n  children: ReactNode;\n  labelProps?: Props;\n  isDynamicLabel?: boolean;\n}\n\nexport function useAutoTooltip({\n  tooltip,\n  children,\n  labelProps,\n  isDynamicLabel = false,\n}: UseAutoTooltipOptions) {\n  // Determine if auto tooltip is enabled\n  // Auto tooltip only works when children is a string (overflow detection needs text)\n  const isAutoTooltipEnabled = useMemo(() => {\n    if (typeof children !== 'string') return false;\n\n    // Boolean true enables auto overflow detection\n    if (tooltip === true) return true;\n    if (typeof tooltip === 'object') {\n      // If title is provided and auto is explicitly true, enable auto overflow detection\n      if (tooltip.title) {\n        return tooltip.auto === true;\n      }\n\n      // If no title is provided, default to auto=true unless explicitly disabled\n      const autoValue = tooltip.auto !== undefined ? tooltip.auto : true;\n      return !!autoValue;\n    }\n    return false;\n  }, [tooltip, children]);\n\n  // Track label overflow for auto tooltip (only when enabled)\n  const externalLabelRef = (labelProps as any)?.ref;\n  const [isLabelOverflowed, setIsLabelOverflowed] = useState(false);\n  const elementRef = useRef<HTMLElement | null>(null);\n  const resizeObserverRef = useRef<ResizeObserver | null>(null);\n\n  const checkLabelOverflow = useCallback(() => {\n    const label = elementRef.current;\n    if (!label) {\n      setIsLabelOverflowed(false);\n      return;\n    }\n\n    const hasOverflow = label.scrollWidth > label.clientWidth;\n    setIsLabelOverflowed(hasOverflow);\n  }, []);\n\n  useEffect(() => {\n    if (isAutoTooltipEnabled) {\n      checkLabelOverflow();\n    }\n  }, [isAutoTooltipEnabled, checkLabelOverflow]);\n\n  // Attach ResizeObserver via callback ref to handle DOM node changes\n  const handleLabelElementRef = useCallback(\n    (element: HTMLElement | null) => {\n      // Call external callback ref to notify external refs\n      if (externalLabelRef) {\n        if (typeof externalLabelRef === 'function') {\n          externalLabelRef(element);\n        } else {\n          (externalLabelRef as any).current = element;\n        }\n      }\n\n      // Disconnect previous observer\n      if (resizeObserverRef.current) {\n        try {\n          resizeObserverRef.current.disconnect();\n        } catch {\n          // do nothing\n        }\n        resizeObserverRef.current = null;\n      }\n\n      elementRef.current = element;\n\n      if (element && isAutoTooltipEnabled) {\n        // Create a fresh observer to capture the latest callback\n        const obs = new ResizeObserver(() => {\n          checkLabelOverflow();\n        });\n        resizeObserverRef.current = obs;\n        obs.observe(element);\n        // Initial check\n        checkLabelOverflow();\n      } else {\n        setIsLabelOverflowed(false);\n      }\n    },\n    [externalLabelRef, isAutoTooltipEnabled, checkLabelOverflow],\n  );\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      if (resizeObserverRef.current) {\n        try {\n          resizeObserverRef.current.disconnect();\n        } catch {\n          // do nothing\n        }\n        resizeObserverRef.current = null;\n      }\n      elementRef.current = null;\n    };\n  }, []);\n\n  const finalLabelProps = useMemo(() => {\n    const props = {\n      ...(labelProps || {}),\n    };\n\n    delete props.ref;\n\n    return props;\n  }, [labelProps]);\n\n  /**\n   * The `TooltipProvider` props this tooltip resolves to, or `null` when no\n   * tooltip is rendered at all. Resolved once so that both the rendering below\n   * and `isTooltipActive` speak about the same tooltip.\n   */\n  const resolvedTooltip = useMemo<Omit<\n    CubeTooltipProviderProps,\n    'children'\n  > | null>(() => {\n    if (!tooltip) return null;\n\n    // String tooltip - simple case\n    if (typeof tooltip === 'string') {\n      return { title: tooltip };\n    }\n\n    const hasAutoContent =\n      !!(children || labelProps) && (isLabelOverflowed || isDynamicLabel);\n\n    // Boolean tooltip - auto tooltip on overflow\n    if (tooltip === true) {\n      if (!hasAutoContent) return null;\n\n      return {\n        title: children,\n        isDisabled: !isLabelOverflowed && isDynamicLabel,\n      };\n    }\n\n    // Object tooltip - advanced configuration\n    const { auto, ...tooltipProps } = tooltip;\n\n    // If title is provided and auto is not explicitly true, always show the tooltip\n    if (tooltipProps.title && auto !== true) {\n      return tooltipProps;\n    }\n\n    // If title is provided with auto=true, OR no title but auto behavior enabled\n    if (!hasAutoContent) return null;\n\n    return {\n      title: tooltipProps.title ?? children,\n      isDisabled:\n        !isLabelOverflowed &&\n        isDynamicLabel &&\n        tooltipProps.isDisabled !== true,\n      ...tooltipProps,\n    };\n  }, [tooltip, children, labelProps, isLabelOverflowed, isDynamicLabel]);\n\n  /** Whether a tooltip is rendered and able to open. */\n  const isTooltipActive =\n    !!resolvedTooltip && resolvedTooltip.isDisabled !== true;\n\n  const renderWithTooltip = (\n    renderElement: (\n      tooltipTriggerProps?: HTMLAttributes<HTMLElement>,\n      tooltipRef?: RefObject<HTMLElement>,\n    ) => ReactNode,\n    defaultTooltipPlacement: OverlayProps['placement'],\n  ) => {\n    if (!resolvedTooltip) return renderElement();\n\n    return (\n      <TooltipProvider placement={defaultTooltipPlacement} {...resolvedTooltip}>\n        {(triggerProps, ref) => renderElement(triggerProps, ref)}\n      </TooltipProvider>\n    );\n  };\n\n  return {\n    labelRef: handleLabelElementRef,\n    labelProps: finalLabelProps,\n    isLabelOverflowed,\n    isAutoTooltipEnabled,\n    hasTooltip: !!tooltip,\n    isTooltipActive,\n    renderWithTooltip,\n  };\n}\n"],"mappings":";;;;;;AA+BA,SAAgB,eAAe,EAC7B,SACA,UACA,YACA,iBAAiB,SACO;CAGxB,MAAM,uBAAuB,cAAc;AACzC,MAAI,OAAO,aAAa,SAAU,QAAO;AAGzC,MAAI,YAAY,KAAM,QAAO;AAC7B,MAAI,OAAO,YAAY,UAAU;AAE/B,OAAI,QAAQ,MACV,QAAO,QAAQ,SAAS;AAK1B,UAAO,CAAC,EADU,QAAQ,SAAS,SAAY,QAAQ,OAAO;;AAGhE,SAAO;IACN,CAAC,SAAS,SAAS,CAAC;CAGvB,MAAM,mBAAoB,YAAoB;CAC9C,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,MAAM;CACjE,MAAM,aAAa,OAA2B,KAAK;CACnD,MAAM,oBAAoB,OAA8B,KAAK;CAE7D,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,QAAQ,WAAW;AACzB,MAAI,CAAC,OAAO;AACV,wBAAqB,MAAM;AAC3B;;AAIF,uBADoB,MAAM,cAAc,MAAM,YACb;IAChC,EAAE,CAAC;AAEN,iBAAgB;AACd,MAAI,qBACF,qBAAoB;IAErB,CAAC,sBAAsB,mBAAmB,CAAC;CAG9C,MAAM,wBAAwB,aAC3B,YAAgC;AAE/B,MAAI,iBACF,KAAI,OAAO,qBAAqB,WAC9B,kBAAiB,QAAQ;MAEzB,CAAC,iBAAyB,UAAU;AAKxC,MAAI,kBAAkB,SAAS;AAC7B,OAAI;AACF,sBAAkB,QAAQ,YAAY;WAChC;AAGR,qBAAkB,UAAU;;AAG9B,aAAW,UAAU;AAErB,MAAI,WAAW,sBAAsB;GAEnC,MAAM,MAAM,IAAI,qBAAqB;AACnC,wBAAoB;KACpB;AACF,qBAAkB,UAAU;AAC5B,OAAI,QAAQ,QAAQ;AAEpB,uBAAoB;QAEpB,sBAAqB,MAAM;IAG/B;EAAC;EAAkB;EAAsB;EAAmB,CAC7D;AAGD,iBAAgB;AACd,eAAa;AACX,OAAI,kBAAkB,SAAS;AAC7B,QAAI;AACF,uBAAkB,QAAQ,YAAY;YAChC;AAGR,sBAAkB,UAAU;;AAE9B,cAAW,UAAU;;IAEtB,EAAE,CAAC;CAEN,MAAM,kBAAkB,cAAc;EACpC,MAAM,QAAQ,EACZ,GAAI,cAAc,EAAE,EACrB;AAED,SAAO,MAAM;AAEb,SAAO;IACN,CAAC,WAAW,CAAC;;;;;;CAOhB,MAAM,kBAAkB,cAGR;AACd,MAAI,CAAC,QAAS,QAAO;AAGrB,MAAI,OAAO,YAAY,SACrB,QAAO,EAAE,OAAO,SAAS;EAG3B,MAAM,iBACJ,CAAC,EAAE,YAAY,gBAAgB,qBAAqB;AAGtD,MAAI,YAAY,MAAM;AACpB,OAAI,CAAC,eAAgB,QAAO;AAE5B,UAAO;IACL,OAAO;IACP,YAAY,CAAC,qBAAqB;IACnC;;EAIH,MAAM,EAAE,MAAM,GAAG,iBAAiB;AAGlC,MAAI,aAAa,SAAS,SAAS,KACjC,QAAO;AAIT,MAAI,CAAC,eAAgB,QAAO;AAE5B,SAAO;GACL,OAAO,aAAa,SAAS;GAC7B,YACE,CAAC,qBACD,kBACA,aAAa,eAAe;GAC9B,GAAG;GACJ;IACA;EAAC;EAAS;EAAU;EAAY;EAAmB;EAAe,CAAC;;CAGtE,MAAM,kBACJ,CAAC,CAAC,mBAAmB,gBAAgB,eAAe;CAEtD,MAAM,qBACJ,eAIA,4BACG;AACH,MAAI,CAAC,gBAAiB,QAAO,eAAe;AAE5C,SACE,oBAAC;GAAgB,WAAW;GAAyB,GAAI;cACrD,cAAc,QAAQ,cAAc,cAAc,IAAI;IACxC;;AAItB,QAAO;EACL,UAAU;EACV,YAAY;EACZ;EACA;EACA,YAAY,CAAC,CAAC;EACd;EACA;EACD"}

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

@@ -1,13 +1,16 @@
-/** @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 { 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 { useTableColumns } from "../TableBase/use-table-columns.js";
+import { getDraggableColumnKeys, isColumnDraggable, useColumnOrder } from "../TableBase/use-column-order.js";
+import { freezeColumnWidths, useTableColumns } from "../TableBase/use-table-columns.js";
 import { ROW_NUMBER_COLUMN_KEY } from "../TableBase/use-table-selection.js";
 import { TableView } from "../TableBase/TableView.js";
 import { useContainerWidth } from "../TableBase/use-container-width.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", rowSize, 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,
@@ -94,9 +101,15 @@ function DataTable(props, ref) {
 	const draftRef = useRef(null);
 	const baseColumnWidths = columnWidthsProp ?? ownColumnWidths;
 	const columnWidths = draftColumnWidths ?? baseColumnWidths;
+	/**
+	* The resolved widths, for the freeze below. A ref because `layout` is
+	* computed *after* this handler is defined, and `useEvent` only reads it when
+	* the drag actually runs.
+	*/
+	const layoutRef = useRef(null);
 	const handleColumnResize = useEvent((key, width) => {
 		draftRef.current = {
-			...draftRef.current ?? baseColumnWidths,
+			...draftRef.current ?? freezeColumnWidths(layoutRef.current, baseColumnWidths),
 			[key]: Math.round(width)
 		};
 		setDraftColumnWidths(draftRef.current);
@@ -112,7 +125,7 @@ function DataTable(props, ref) {
 		setDraftColumnWidths(null);
 	});
 	const layout = useTableColumns({
-		columns: resolvedColumns,
+		columns: orderedColumns,
 		containerWidth,
 		columnWidths,
 		leadingColumns: useMemo(() => showRowNumbers ? [{
@@ -120,6 +133,7 @@ function DataTable(props, ref) {
 			width: ROW_NUMBER_WIDTH
 		}] : void 0, [showRowNumbers])
 	});
+	layoutRef.current = layout;
 	const { t } = useI18n();
 	const resolvedGetRowKey = useMemo(() => getRowKey ?? defaultGetRowKey(rowKey), [getRowKey, rowKey]);
 	const selectionRows = useMemo(() => [
@@ -169,7 +183,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",
@@ -193,6 +227,7 @@ function DataTable(props, ref) {
 		isFiltered,
 		shape,
 		size,
+		rowSize,
 		rowHeight,
 		headerHeight,
 		isStriped,
@@ -204,6 +239,11 @@ function DataTable(props, ref) {
 		sortMode: resolvedSortMode,
 		sorts,
 		onColumnSort: toggleSort,
+		onColumnSortChange: setColumnSort,
+		columnContextMenu,
+		onColumnMenuAction,
+		columnMenuTriggerProps,
+		columnMenuProps,
 		isVirtualized,
 		virtualizeThreshold,
 		overscan,
@@ -219,6 +259,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 +283,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";