@cube-dev/ui-kit 0.0.0-canary-4ba0ca0 → 0.0.0-canary-c22ced9

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ba0ca0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c22ced9 | 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-4ba0ca0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c22ced9 | 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-4ba0ca0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c22ced9 | Cube Dev Team */
 import { _Item } from "../Item/Item.js";
 import { CloseIcon } from "../../../icons/CloseIcon.js";
 import { tasty } from "@tenphi/tasty";

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

@@ -141,7 +141,7 @@ declare const MinorText: react.ComponentType<{
   accessKey?: string | undefined;
   autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
   autoFocus?: boolean | undefined;
-  contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+  contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
   contextMenu?: string | undefined;
   dir?: string | undefined;
   draggable?: (boolean | "true" | "false") | undefined;
@@ -550,7 +550,7 @@ declare const DangerText: react.ComponentType<{
   accessKey?: string | undefined;
   autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
   autoFocus?: boolean | undefined;
-  contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+  contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
   contextMenu?: string | undefined;
   dir?: string | undefined;
   draggable?: (boolean | "true" | "false") | undefined;
@@ -959,7 +959,7 @@ declare const SuccessText: react.ComponentType<{
   accessKey?: string | undefined;
   autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
   autoFocus?: boolean | undefined;
-  contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+  contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
   contextMenu?: string | undefined;
   dir?: string | undefined;
   draggable?: (boolean | "true" | "false") | undefined;
@@ -1368,7 +1368,7 @@ declare const StrongText: react.ComponentType<{
   accessKey?: string | undefined;
   autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
   autoFocus?: boolean | undefined;
-  contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+  contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
   contextMenu?: string | undefined;
   dir?: string | undefined;
   draggable?: (boolean | "true" | "false") | undefined;
@@ -1777,7 +1777,7 @@ declare const EmphasisText: react.ComponentType<{
   accessKey?: string | undefined;
   autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
   autoFocus?: boolean | undefined;
-  contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+  contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
   contextMenu?: string | undefined;
   dir?: string | undefined;
   draggable?: (boolean | "true" | "false") | undefined;
@@ -2186,7 +2186,7 @@ declare const PlaceholderText: react.ComponentType<{
   accessKey?: string | undefined;
   autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
   autoFocus?: boolean | undefined;
-  contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+  contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
   contextMenu?: string | undefined;
   dir?: string | undefined;
   draggable?: (boolean | "true" | "false") | undefined;
@@ -2595,7 +2595,7 @@ declare const HighlightText: react.ComponentType<{
   accessKey?: string | undefined;
   autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
   autoFocus?: boolean | undefined;
-  contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+  contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
   contextMenu?: string | undefined;
   dir?: string | undefined;
   draggable?: (boolean | "true" | "false") | undefined;

package/dist/components/content/Text.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ba0ca0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c22ced9 | 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-4ba0ca0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c22ced9 | 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-4ba0ca0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c22ced9 | 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-4ba0ca0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c22ced9 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
@@ -76,7 +76,7 @@ function resolveSelectionMode(selectionMode, isSelectable) {
 	return "single";
 }
 function TreeBase(props, ref) {
-	const { treeData, isCheckable = false, isSelectable, selectionMode: selectionModeProp, size = "medium", shape = "default", containerPadding = 4, isDisabled = false, defaultExpandedKeys, expandedKeys, autoExpandParent = false, defaultCheckedKeys, checkedKeys, defaultSelectedKeys, selectedKeys, height, loadData, onExpand, onCheck, onSelect, itemProps, rowStyles, ariaLabel, qa, ...otherProps } = props;
+	const { treeData, isCheckable = false, isSelectable, selectionMode: selectionModeProp, size = "medium", shape = "default", containerPadding = 4, isDisabled = false, defaultExpandedKeys, expandedKeys, autoExpandParent = false, defaultCheckedKeys, checkedKeys, defaultSelectedKeys, selectedKeys, height, loadData, onExpand, onCheck, onSelect, itemProps, rowStyles, ariaLabel, qa, expandOnFolderClick = false, menu: treeMenu, contextMenu: treeContextMenu, onAction: treeOnAction, menuTriggerProps, menuProps, ...otherProps } = props;
 	const baseStyles = extractStyles(otherProps, OUTER_STYLES);
 	const treeRef = useRef(null);
 	const treeIndex = useMemo(() => buildTreeIndex(treeData), [treeData]);
@@ -281,7 +281,13 @@ function TreeBase(props, ref) {
 				},
 				virtualRef: rowVirtualizer.measureElement,
 				virtualIndex: virtualItem.index,
-				onToggleChecked: checkbox.toggle
+				menu: treeMenu,
+				contextMenu: treeContextMenu,
+				menuTriggerProps,
+				menuProps,
+				expandOnFolderClick,
+				onToggleChecked: checkbox.toggle,
+				onAction: treeOnAction
 			}, node.key);
 		})
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"Tree.js","names":["mergeProps"],"sources":["../../../../src/components/content/Tree/Tree.tsx"],"sourcesContent":["import { useVirtualizer } from '@tanstack/react-virtual';\nimport { OUTER_STYLES } from '@tenphi/tasty';\nimport { forwardRef, useLayoutEffect, useMemo, useRef } from 'react';\nimport { useTree } from 'react-aria';\nimport { Item, useTreeState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { SIZE_NAME_TO_KEY, SIZES } from '../../../tokens/sizes';\nimport { mergeProps, mergeRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\n\nimport { TreeElement } from './styled';\nimport { buildTreeIndex } from './tree-index';\nimport { TreeNode } from './TreeNode';\nimport { useCheckboxTree } from './use-checkbox-tree';\nimport { useLoadData } from './use-load-data';\n\nimport type { Key, Node, Selection } from '@react-types/shared';\nimport type {\n  CSSProperties,\n  ForwardedRef,\n  ReactElement,\n  ReactNode,\n} from 'react';\nimport type {\n  CubeTreeNodeData,\n  CubeTreeProps,\n  TreeOnExpandInfo,\n  TreeOnSelectInfo,\n  TreeSelectionMode,\n} from './types';\n\n/**\n * Render an `<Item>` for React Stately's collection builder.\n *\n * The visible content is rendered by `TreeNode` via `nodesByKey`,\n * so `<Item>`'s body is only used by Stately for the collection\n * (`textValue` for keyboard nav, `childItems` for nested traversal).\n */\nfunction renderItem(node: CubeTreeNodeData): ReactElement {\n  const textValue =\n    typeof node.title === 'string' ? node.title : String(node.key);\n  return (\n    <Item\n      key={node.key}\n      textValue={textValue}\n      childItems={node.children as CubeTreeNodeData[] | undefined}\n    >\n      {node.title as ReactNode}\n    </Item>\n  );\n}\n\nfunction collectDisabledKeys(\n  treeData: CubeTreeNodeData[],\n  treeIsDisabled: boolean,\n): string[] {\n  const keys: string[] = [];\n  const visit = (nodes: CubeTreeNodeData[]) => {\n    for (const node of nodes) {\n      if (treeIsDisabled || node.isDisabled) keys.push(node.key);\n      if (node.children) visit(node.children);\n    }\n  };\n  visit(treeData);\n  return keys;\n}\n\n/** Expand the supplied keys with all of their ancestor keys. */\nfunction expandWithParents(\n  keys: string[] | undefined,\n  parentOf: Map<string, string | null>,\n): string[] | undefined {\n  if (!keys || keys.length === 0) return keys;\n  const set = new Set<string>(keys);\n  for (const key of keys) {\n    let parent = parentOf.get(key);\n    while (parent) {\n      set.add(parent);\n      parent = parentOf.get(parent);\n    }\n  }\n  return Array.from(set);\n}\n\n/**\n * Diff two key sets to find the single key that was added or removed.\n * Returns `null` when both sets are equal.\n */\nfunction findToggledKey(\n  previous: Set<Key>,\n  next: Set<Key>,\n): { key: Key; added: boolean } | null {\n  for (const k of next) {\n    if (!previous.has(k)) return { key: k, added: true };\n  }\n  for (const k of previous) {\n    if (!next.has(k)) return { key: k, added: false };\n  }\n  return null;\n}\n\nfunction resolveSelectionMode(\n  selectionMode: TreeSelectionMode | undefined,\n  isSelectable: boolean | undefined,\n): TreeSelectionMode {\n  if (selectionMode != null) return selectionMode;\n  if (isSelectable === false) return 'none';\n  return 'single';\n}\n\nfunction TreeBase(props: CubeTreeProps, ref: ForwardedRef<HTMLDivElement>) {\n  const {\n    treeData,\n    isCheckable = false,\n    isSelectable,\n    selectionMode: selectionModeProp,\n    size = 'medium',\n    shape = 'default',\n    containerPadding = 4,\n    isDisabled = false,\n    defaultExpandedKeys,\n    expandedKeys,\n    autoExpandParent = false,\n    defaultCheckedKeys,\n    checkedKeys,\n    defaultSelectedKeys,\n    selectedKeys,\n    height,\n    loadData,\n    onExpand,\n    onCheck,\n    onSelect,\n    itemProps,\n    rowStyles,\n    ariaLabel,\n    qa,\n    ...otherProps\n  } = props;\n\n  const baseStyles = extractStyles(otherProps, OUTER_STYLES);\n\n  const treeRef = useRef<HTMLDivElement>(null);\n\n  const treeIndex = useMemo(() => buildTreeIndex(treeData), [treeData]);\n  const nodesByKey = treeIndex.byKey;\n  const parentOf = treeIndex.parentOf;\n\n  const disabledKeys = useMemo(\n    () => collectDisabledKeys(treeData, isDisabled),\n    [treeData, isDisabled],\n  );\n\n  const selectionMode = resolveSelectionMode(selectionModeProp, isSelectable);\n\n  const effectiveExpandedKeys = useMemo(\n    () =>\n      autoExpandParent\n        ? expandWithParents(expandedKeys, parentOf)\n        : expandedKeys,\n    [autoExpandParent, expandedKeys, parentOf],\n  );\n\n  const effectiveDefaultExpandedKeys = useMemo(\n    () =>\n      autoExpandParent\n        ? expandWithParents(defaultExpandedKeys, parentOf)\n        : defaultExpandedKeys,\n    [autoExpandParent, defaultExpandedKeys, parentOf],\n  );\n\n  const checkbox = useCheckboxTree({\n    treeData,\n    index: treeIndex,\n    isCheckable,\n    defaultCheckedKeys,\n    checkedKeys,\n    onCheck,\n  });\n\n  const loadDataController = useLoadData({\n    nodesByKey,\n    loadData,\n    initialExpandedKeys: effectiveExpandedKeys ?? effectiveDefaultExpandedKeys,\n  });\n\n  /**\n   * In controlled mode, `previous` is read from `effectiveExpandedKeys`;\n   * in uncontrolled mode this ref is the only source. Initialized from\n   * the *effective* (ancestor-expanded) keys so the first toggle diffs\n   * correctly.\n   */\n  const previousExpandedRef = useRef<Set<Key>>(\n    new Set<Key>(effectiveExpandedKeys ?? effectiveDefaultExpandedKeys ?? []),\n  );\n\n  const handleExpandedChange = useEvent((nextSet: Set<Key>) => {\n    loadDataController.onExpandedChanged(nextSet);\n\n    const previous =\n      expandedKeys !== undefined\n        ? new Set<Key>(effectiveExpandedKeys ?? [])\n        : previousExpandedRef.current;\n    previousExpandedRef.current = new Set<Key>(nextSet);\n\n    if (!onExpand) return;\n\n    const toggled = findToggledKey(previous, nextSet);\n    if (!toggled) return;\n\n    const node = nodesByKey.get(String(toggled.key));\n    if (!node) return;\n\n    const info: TreeOnExpandInfo = {\n      expanded: toggled.added,\n      node,\n    };\n    onExpand(Array.from(nextSet), info);\n  });\n\n  /**\n   * Same pattern as `previousExpandedRef`: in controlled mode we read\n   * from `selectedKeys`; in uncontrolled mode this ref tracks state.\n   */\n  const previousSelectionRef = useRef<Set<Key>>(\n    new Set<Key>(selectedKeys ?? defaultSelectedKeys ?? []),\n  );\n\n  /**\n   * `useEvent` captures the closure lazily, so `state` (declared below\n   * `ariaProps` / `useTreeState`) is safely accessible at call time.\n   */\n  const handleSelectionChange = useEvent((selection: Selection) => {\n    if (!onSelect) return;\n    let arr: Key[];\n    if (selection === 'all') {\n      // `nodesByKey` contains the full tree; use the collection's visible\n      // keys so we don't leak keys under collapsed parents.\n      arr = [];\n      for (const key of state.collection.getKeys()) {\n        const node = state.collection.getItem(key);\n        if (node && node.type === 'item') arr.push(key);\n      }\n    } else {\n      arr = Array.from(selection);\n    }\n\n    const nextSet = new Set<Key>(arr);\n    const previous =\n      selectedKeys !== undefined\n        ? new Set<Key>(selectedKeys ?? [])\n        : previousSelectionRef.current;\n    previousSelectionRef.current = nextSet;\n\n    const toggled = findToggledKey(previous, nextSet);\n    if (!toggled) return;\n\n    const node = nodesByKey.get(String(toggled.key));\n    if (!node) return;\n\n    const selectedNodes = arr\n      .map((k) => nodesByKey.get(String(k)))\n      .filter((n): n is CubeTreeNodeData => !!n);\n\n    const info: TreeOnSelectInfo = {\n      selected: toggled.added,\n      node,\n      selectedNodes,\n    };\n\n    onSelect(arr, info);\n  });\n\n  const hasOnSelect = onSelect != null;\n\n  const ariaProps = useMemo(\n    () => ({\n      selectionMode,\n      selectedKeys,\n      defaultSelectedKeys,\n      onSelectionChange:\n        hasOnSelect && selectionMode !== 'none'\n          ? handleSelectionChange\n          : undefined,\n      expandedKeys: effectiveExpandedKeys,\n      defaultExpandedKeys: effectiveDefaultExpandedKeys,\n      onExpandedChange: handleExpandedChange,\n      disabledKeys,\n      disabledBehavior: 'all' as const,\n      items: treeData,\n      children: renderItem as any,\n      'aria-label': ariaLabel ?? 'Tree',\n    }),\n    [\n      selectionMode,\n      selectedKeys,\n      defaultSelectedKeys,\n      hasOnSelect,\n      handleSelectionChange,\n      effectiveExpandedKeys,\n      effectiveDefaultExpandedKeys,\n      handleExpandedChange,\n      disabledKeys,\n      treeData,\n      ariaLabel,\n    ],\n  );\n\n  const baseState = useTreeState<CubeTreeNodeData>(ariaProps);\n\n  // The legacy `TreeCollection` from `useTreeState` lacks `getChildren`,\n  // but `useTree` calls it for nested rows. Derive a patched state.\n  // TODO: Remove this patch when upgrading to a react-stately version\n  // that ships `getChildren` on TreeCollection natively.\n  const state = useMemo(() => {\n    const collection = baseState.collection;\n    if (typeof (collection as any).getChildren === 'function') {\n      return baseState;\n    }\n    const patched = Object.create(collection);\n    patched.getChildren = (key: Key): Iterable<Node<CubeTreeNodeData>> => {\n      const node = collection.getItem(key);\n      return node ? Array.from(node.childNodes) : [];\n    };\n    return { ...baseState, collection: patched };\n  }, [baseState]);\n\n  const { gridProps } = useTree(ariaProps, state, treeRef);\n\n  const visibleNodes: Node<CubeTreeNodeData>[] = useMemo(() => {\n    const out: Node<CubeTreeNodeData>[] = [];\n    for (const key of state.collection.getKeys()) {\n      const node = state.collection.getItem(key);\n      if (node && node.type === 'item') out.push(node);\n    }\n    return out;\n  }, [state.collection]);\n\n  const visibleNodesRef = useRef(visibleNodes);\n  visibleNodesRef.current = visibleNodes;\n\n  // ----- Virtualization -----\n  const rowVirtualizer = useVirtualizer({\n    count: visibleNodes.length,\n    getScrollElement: () => treeRef.current,\n    getItemKey: (index: number) => {\n      const node = visibleNodesRef.current[index];\n      return node?.key ?? index;\n    },\n    estimateSize: () => SIZES[SIZE_NAME_TO_KEY[size]],\n    gap: 1,\n    overscan: 10,\n    paddingStart: containerPadding,\n    paddingEnd: containerPadding,\n  });\n\n  const containerStyle = useMemo<CSSProperties>(() => {\n    const style: CSSProperties = {\n      position: 'relative',\n      height: `${rowVirtualizer.getTotalSize()}px`,\n    };\n    if (height != null) {\n      (style as any)['--tree-height'] = `${height}px`;\n    }\n    return style;\n  }, [rowVirtualizer.getTotalSize(), height]);\n\n  // Keep focused node visible during keyboard navigation.\n  useLayoutEffect(() => {\n    const focusedKey = state.selectionManager.focusedKey;\n    if (focusedKey == null) return;\n\n    const scrollElement = treeRef.current;\n    if (!scrollElement) return;\n\n    const row = scrollElement.querySelector(\n      `[data-qa-key=\"${CSS.escape(String(focusedKey))}\"]`,\n    ) as HTMLElement | null;\n    if (!row || typeof row.scrollIntoView !== 'function') return;\n\n    row.scrollIntoView({ block: 'nearest' });\n  }, [state.selectionManager.focusedKey]);\n\n  const mods = useMemo(\n    () => ({\n      'has-height': height != null,\n      shape,\n    }),\n    [height, shape],\n  );\n\n  // Both `useTree` and the consumer need the same DOM node.\n  const mergedRef = useMemo(() => mergeRefs(ref, treeRef), [ref, treeRef]);\n\n  const elementProps = mergeProps(gridProps, {\n    ref: mergedRef,\n  });\n\n  return (\n    <TreeElement\n      {...elementProps}\n      qa={qa ?? 'Tree'}\n      mods={mods}\n      styles={baseStyles}\n      style={containerStyle}\n    >\n      {rowVirtualizer.getVirtualItems().map((virtualItem) => {\n        const node = visibleNodes[virtualItem.index];\n        if (!node) return null;\n        const keyStr = String(node.key);\n        const data = nodesByKey.get(keyStr);\n        if (!data) return null;\n        return (\n          <TreeNode\n            key={node.key}\n            node={node}\n            data={data}\n            state={state}\n            isCheckable={isCheckable}\n            isExpanded={state.expandedKeys.has(node.key)}\n            isChecked={checkbox.checkedSet.has(keyStr)}\n            isIndeterminate={checkbox.halfCheckedSet.has(keyStr)}\n            isLoading={loadDataController.loadingKeys.has(keyStr)}\n            size={size}\n            itemProps={itemProps}\n            rowStyles={rowStyles}\n            virtualStyle={{\n              position: 'absolute',\n              top: 0,\n              left: containerPadding,\n              right: containerPadding,\n              transform: `translateY(${virtualItem.start}px)`,\n            }}\n            virtualRef={rowVirtualizer.measureElement}\n            virtualIndex={virtualItem.index}\n            onToggleChecked={checkbox.toggle}\n          />\n        );\n      })}\n    </TreeElement>\n  );\n}\n\nconst _Tree = forwardRef(TreeBase);\n_Tree.displayName = 'Tree';\n\n/**\n * Hierarchical data display with optional checkboxes, single/multi\n * selection, async lazy loading, and keyboard navigation.\n *\n * Built on `useTree` / `useTreeState` (React Aria + React Stately) and\n * styled with Tasty.\n *\n * @example\n * ```tsx\n * <Tree\n *   treeData={data}\n *   isCheckable\n *   selectionMode=\"none\"\n *   defaultExpandedKeys={['root']}\n *   onCheck={(keys) => console.log(keys)}\n * />\n * ```\n */\nexport const Tree = _Tree;\n"],"mappings":"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"}
+{"version":3,"file":"Tree.js","names":["mergeProps"],"sources":["../../../../src/components/content/Tree/Tree.tsx"],"sourcesContent":["import { useVirtualizer } from '@tanstack/react-virtual';\nimport { OUTER_STYLES } from '@tenphi/tasty';\nimport { forwardRef, useLayoutEffect, useMemo, useRef } from 'react';\nimport { useTree } from 'react-aria';\nimport { Item, useTreeState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { SIZE_NAME_TO_KEY, SIZES } from '../../../tokens/sizes';\nimport { mergeProps, mergeRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\n\nimport { TreeElement } from './styled';\nimport { buildTreeIndex } from './tree-index';\nimport { TreeNode } from './TreeNode';\nimport { useCheckboxTree } from './use-checkbox-tree';\nimport { useLoadData } from './use-load-data';\n\nimport type { Key, Node, Selection } from '@react-types/shared';\nimport type {\n  CSSProperties,\n  ForwardedRef,\n  ReactElement,\n  ReactNode,\n} from 'react';\nimport type {\n  CubeTreeNodeData,\n  CubeTreeProps,\n  TreeOnExpandInfo,\n  TreeOnSelectInfo,\n  TreeSelectionMode,\n} from './types';\n\n/**\n * Render an `<Item>` for React Stately's collection builder.\n *\n * The visible content is rendered by `TreeNode` via `nodesByKey`,\n * so `<Item>`'s body is only used by Stately for the collection\n * (`textValue` for keyboard nav, `childItems` for nested traversal).\n */\nfunction renderItem(node: CubeTreeNodeData): ReactElement {\n  const textValue =\n    typeof node.title === 'string' ? node.title : String(node.key);\n  return (\n    <Item\n      key={node.key}\n      textValue={textValue}\n      childItems={node.children as CubeTreeNodeData[] | undefined}\n    >\n      {node.title as ReactNode}\n    </Item>\n  );\n}\n\nfunction collectDisabledKeys(\n  treeData: CubeTreeNodeData[],\n  treeIsDisabled: boolean,\n): string[] {\n  const keys: string[] = [];\n  const visit = (nodes: CubeTreeNodeData[]) => {\n    for (const node of nodes) {\n      if (treeIsDisabled || node.isDisabled) keys.push(node.key);\n      if (node.children) visit(node.children);\n    }\n  };\n  visit(treeData);\n  return keys;\n}\n\n/** Expand the supplied keys with all of their ancestor keys. */\nfunction expandWithParents(\n  keys: string[] | undefined,\n  parentOf: Map<string, string | null>,\n): string[] | undefined {\n  if (!keys || keys.length === 0) return keys;\n  const set = new Set<string>(keys);\n  for (const key of keys) {\n    let parent = parentOf.get(key);\n    while (parent) {\n      set.add(parent);\n      parent = parentOf.get(parent);\n    }\n  }\n  return Array.from(set);\n}\n\n/**\n * Diff two key sets to find the single key that was added or removed.\n * Returns `null` when both sets are equal.\n */\nfunction findToggledKey(\n  previous: Set<Key>,\n  next: Set<Key>,\n): { key: Key; added: boolean } | null {\n  for (const k of next) {\n    if (!previous.has(k)) return { key: k, added: true };\n  }\n  for (const k of previous) {\n    if (!next.has(k)) return { key: k, added: false };\n  }\n  return null;\n}\n\nfunction resolveSelectionMode(\n  selectionMode: TreeSelectionMode | undefined,\n  isSelectable: boolean | undefined,\n): TreeSelectionMode {\n  if (selectionMode != null) return selectionMode;\n  if (isSelectable === false) return 'none';\n  return 'single';\n}\n\nfunction TreeBase(props: CubeTreeProps, ref: ForwardedRef<HTMLDivElement>) {\n  const {\n    treeData,\n    isCheckable = false,\n    isSelectable,\n    selectionMode: selectionModeProp,\n    size = 'medium',\n    shape = 'default',\n    containerPadding = 4,\n    isDisabled = false,\n    defaultExpandedKeys,\n    expandedKeys,\n    autoExpandParent = false,\n    defaultCheckedKeys,\n    checkedKeys,\n    defaultSelectedKeys,\n    selectedKeys,\n    height,\n    loadData,\n    onExpand,\n    onCheck,\n    onSelect,\n    itemProps,\n    rowStyles,\n    ariaLabel,\n    qa,\n    expandOnFolderClick = false,\n    menu: treeMenu,\n    contextMenu: treeContextMenu,\n    onAction: treeOnAction,\n    menuTriggerProps,\n    menuProps,\n    ...otherProps\n  } = props;\n\n  const baseStyles = extractStyles(otherProps, OUTER_STYLES);\n\n  const treeRef = useRef<HTMLDivElement>(null);\n\n  const treeIndex = useMemo(() => buildTreeIndex(treeData), [treeData]);\n  const nodesByKey = treeIndex.byKey;\n  const parentOf = treeIndex.parentOf;\n\n  const disabledKeys = useMemo(\n    () => collectDisabledKeys(treeData, isDisabled),\n    [treeData, isDisabled],\n  );\n\n  const selectionMode = resolveSelectionMode(selectionModeProp, isSelectable);\n\n  const effectiveExpandedKeys = useMemo(\n    () =>\n      autoExpandParent\n        ? expandWithParents(expandedKeys, parentOf)\n        : expandedKeys,\n    [autoExpandParent, expandedKeys, parentOf],\n  );\n\n  const effectiveDefaultExpandedKeys = useMemo(\n    () =>\n      autoExpandParent\n        ? expandWithParents(defaultExpandedKeys, parentOf)\n        : defaultExpandedKeys,\n    [autoExpandParent, defaultExpandedKeys, parentOf],\n  );\n\n  const checkbox = useCheckboxTree({\n    treeData,\n    index: treeIndex,\n    isCheckable,\n    defaultCheckedKeys,\n    checkedKeys,\n    onCheck,\n  });\n\n  const loadDataController = useLoadData({\n    nodesByKey,\n    loadData,\n    initialExpandedKeys: effectiveExpandedKeys ?? effectiveDefaultExpandedKeys,\n  });\n\n  /**\n   * In controlled mode, `previous` is read from `effectiveExpandedKeys`;\n   * in uncontrolled mode this ref is the only source. Initialized from\n   * the *effective* (ancestor-expanded) keys so the first toggle diffs\n   * correctly.\n   */\n  const previousExpandedRef = useRef<Set<Key>>(\n    new Set<Key>(effectiveExpandedKeys ?? effectiveDefaultExpandedKeys ?? []),\n  );\n\n  const handleExpandedChange = useEvent((nextSet: Set<Key>) => {\n    loadDataController.onExpandedChanged(nextSet);\n\n    const previous =\n      expandedKeys !== undefined\n        ? new Set<Key>(effectiveExpandedKeys ?? [])\n        : previousExpandedRef.current;\n    previousExpandedRef.current = new Set<Key>(nextSet);\n\n    if (!onExpand) return;\n\n    const toggled = findToggledKey(previous, nextSet);\n    if (!toggled) return;\n\n    const node = nodesByKey.get(String(toggled.key));\n    if (!node) return;\n\n    const info: TreeOnExpandInfo = {\n      expanded: toggled.added,\n      node,\n    };\n    onExpand(Array.from(nextSet), info);\n  });\n\n  /**\n   * Same pattern as `previousExpandedRef`: in controlled mode we read\n   * from `selectedKeys`; in uncontrolled mode this ref tracks state.\n   */\n  const previousSelectionRef = useRef<Set<Key>>(\n    new Set<Key>(selectedKeys ?? defaultSelectedKeys ?? []),\n  );\n\n  /**\n   * `useEvent` captures the closure lazily, so `state` (declared below\n   * `ariaProps` / `useTreeState`) is safely accessible at call time.\n   */\n  const handleSelectionChange = useEvent((selection: Selection) => {\n    if (!onSelect) return;\n    let arr: Key[];\n    if (selection === 'all') {\n      // `nodesByKey` contains the full tree; use the collection's visible\n      // keys so we don't leak keys under collapsed parents.\n      arr = [];\n      for (const key of state.collection.getKeys()) {\n        const node = state.collection.getItem(key);\n        if (node && node.type === 'item') arr.push(key);\n      }\n    } else {\n      arr = Array.from(selection);\n    }\n\n    const nextSet = new Set<Key>(arr);\n    const previous =\n      selectedKeys !== undefined\n        ? new Set<Key>(selectedKeys ?? [])\n        : previousSelectionRef.current;\n    previousSelectionRef.current = nextSet;\n\n    const toggled = findToggledKey(previous, nextSet);\n    if (!toggled) return;\n\n    const node = nodesByKey.get(String(toggled.key));\n    if (!node) return;\n\n    const selectedNodes = arr\n      .map((k) => nodesByKey.get(String(k)))\n      .filter((n): n is CubeTreeNodeData => !!n);\n\n    const info: TreeOnSelectInfo = {\n      selected: toggled.added,\n      node,\n      selectedNodes,\n    };\n\n    onSelect(arr, info);\n  });\n\n  const hasOnSelect = onSelect != null;\n\n  const ariaProps = useMemo(\n    () => ({\n      selectionMode,\n      selectedKeys,\n      defaultSelectedKeys,\n      onSelectionChange:\n        hasOnSelect && selectionMode !== 'none'\n          ? handleSelectionChange\n          : undefined,\n      expandedKeys: effectiveExpandedKeys,\n      defaultExpandedKeys: effectiveDefaultExpandedKeys,\n      onExpandedChange: handleExpandedChange,\n      disabledKeys,\n      disabledBehavior: 'all' as const,\n      items: treeData,\n      children: renderItem as any,\n      'aria-label': ariaLabel ?? 'Tree',\n    }),\n    [\n      selectionMode,\n      selectedKeys,\n      defaultSelectedKeys,\n      hasOnSelect,\n      handleSelectionChange,\n      effectiveExpandedKeys,\n      effectiveDefaultExpandedKeys,\n      handleExpandedChange,\n      disabledKeys,\n      treeData,\n      ariaLabel,\n    ],\n  );\n\n  const baseState = useTreeState<CubeTreeNodeData>(ariaProps);\n\n  // The legacy `TreeCollection` from `useTreeState` lacks `getChildren`,\n  // but `useTree` calls it for nested rows. Derive a patched state.\n  // TODO: Remove this patch when upgrading to a react-stately version\n  // that ships `getChildren` on TreeCollection natively.\n  const state = useMemo(() => {\n    const collection = baseState.collection;\n    if (typeof (collection as any).getChildren === 'function') {\n      return baseState;\n    }\n    const patched = Object.create(collection);\n    patched.getChildren = (key: Key): Iterable<Node<CubeTreeNodeData>> => {\n      const node = collection.getItem(key);\n      return node ? Array.from(node.childNodes) : [];\n    };\n    return { ...baseState, collection: patched };\n  }, [baseState]);\n\n  const { gridProps } = useTree(ariaProps, state, treeRef);\n\n  const visibleNodes: Node<CubeTreeNodeData>[] = useMemo(() => {\n    const out: Node<CubeTreeNodeData>[] = [];\n    for (const key of state.collection.getKeys()) {\n      const node = state.collection.getItem(key);\n      if (node && node.type === 'item') out.push(node);\n    }\n    return out;\n  }, [state.collection]);\n\n  const visibleNodesRef = useRef(visibleNodes);\n  visibleNodesRef.current = visibleNodes;\n\n  // ----- Virtualization -----\n  const rowVirtualizer = useVirtualizer({\n    count: visibleNodes.length,\n    getScrollElement: () => treeRef.current,\n    getItemKey: (index: number) => {\n      const node = visibleNodesRef.current[index];\n      return node?.key ?? index;\n    },\n    estimateSize: () => SIZES[SIZE_NAME_TO_KEY[size]],\n    gap: 1,\n    overscan: 10,\n    paddingStart: containerPadding,\n    paddingEnd: containerPadding,\n  });\n\n  const containerStyle = useMemo<CSSProperties>(() => {\n    const style: CSSProperties = {\n      position: 'relative',\n      height: `${rowVirtualizer.getTotalSize()}px`,\n    };\n    if (height != null) {\n      (style as any)['--tree-height'] = `${height}px`;\n    }\n    return style;\n  }, [rowVirtualizer.getTotalSize(), height]);\n\n  // Keep focused node visible during keyboard navigation.\n  useLayoutEffect(() => {\n    const focusedKey = state.selectionManager.focusedKey;\n    if (focusedKey == null) return;\n\n    const scrollElement = treeRef.current;\n    if (!scrollElement) return;\n\n    const row = scrollElement.querySelector(\n      `[data-qa-key=\"${CSS.escape(String(focusedKey))}\"]`,\n    ) as HTMLElement | null;\n    if (!row || typeof row.scrollIntoView !== 'function') return;\n\n    row.scrollIntoView({ block: 'nearest' });\n  }, [state.selectionManager.focusedKey]);\n\n  const mods = useMemo(\n    () => ({\n      'has-height': height != null,\n      shape,\n    }),\n    [height, shape],\n  );\n\n  // Both `useTree` and the consumer need the same DOM node.\n  const mergedRef = useMemo(() => mergeRefs(ref, treeRef), [ref, treeRef]);\n\n  const elementProps = mergeProps(gridProps, {\n    ref: mergedRef,\n  });\n\n  return (\n    <TreeElement\n      {...elementProps}\n      qa={qa ?? 'Tree'}\n      mods={mods}\n      styles={baseStyles}\n      style={containerStyle}\n    >\n      {rowVirtualizer.getVirtualItems().map((virtualItem) => {\n        const node = visibleNodes[virtualItem.index];\n        if (!node) return null;\n        const keyStr = String(node.key);\n        const data = nodesByKey.get(keyStr);\n        if (!data) return null;\n        return (\n          <TreeNode\n            key={node.key}\n            node={node}\n            data={data}\n            state={state}\n            isCheckable={isCheckable}\n            isExpanded={state.expandedKeys.has(node.key)}\n            isChecked={checkbox.checkedSet.has(keyStr)}\n            isIndeterminate={checkbox.halfCheckedSet.has(keyStr)}\n            isLoading={loadDataController.loadingKeys.has(keyStr)}\n            size={size}\n            itemProps={itemProps}\n            rowStyles={rowStyles}\n            virtualStyle={{\n              position: 'absolute',\n              top: 0,\n              left: containerPadding,\n              right: containerPadding,\n              transform: `translateY(${virtualItem.start}px)`,\n            }}\n            virtualRef={rowVirtualizer.measureElement}\n            virtualIndex={virtualItem.index}\n            menu={treeMenu}\n            contextMenu={treeContextMenu}\n            menuTriggerProps={menuTriggerProps}\n            menuProps={menuProps}\n            expandOnFolderClick={expandOnFolderClick}\n            onToggleChecked={checkbox.toggle}\n            onAction={treeOnAction}\n          />\n        );\n      })}\n    </TreeElement>\n  );\n}\n\nconst _Tree = forwardRef(TreeBase);\n_Tree.displayName = 'Tree';\n\n/**\n * Hierarchical data display with optional checkboxes, single/multi\n * selection, async lazy loading, and keyboard navigation.\n *\n * Built on `useTree` / `useTreeState` (React Aria + React Stately) and\n * styled with Tasty.\n *\n * @example\n * ```tsx\n * <Tree\n *   treeData={data}\n *   isCheckable\n *   selectionMode=\"none\"\n *   defaultExpandedKeys={['root']}\n *   onCheck={(keys) => console.log(keys)}\n * />\n * ```\n */\nexport const Tree = _Tree;\n"],"mappings":"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"}

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

@@ -1,12 +1,17 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ba0ca0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c22ced9 | 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";
 import { LoadingIcon } from "../../../icons/LoadingIcon.js";
+import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { DirectionIcon } from "../../../icons/DirectionIcon.js";
+import { MoreIcon } from "../../../icons/MoreIcon.js";
+import { _MenuTrigger } from "../../actions/Menu/MenuTrigger.js";
+import { __Menu } from "../../actions/Menu/Menu.js";
+import { useContextMenu } from "../../actions/use-context-menu.js";
 import { TreeNodeCheckboxWrapper, TreeNodeRow, TreeNodeToggle, TreeNodeTogglePlaceholder, TreeRowItem } from "./styled.js";
 import { __Checkbox } from "../../fields/Checkbox/Checkbox.js";
-import { memo, useMemo, useRef } from "react";
+import { Children, memo, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useHover, useTreeItem } from "react-aria";
 
@@ -14,10 +19,14 @@ import { useHover, useTreeItem } from "react-aria";
 const stopPropagation = (e) => {
 	e.stopPropagation();
 };
+/** Check whether a `menu` ReactNode actually contains anything. */
+function isMenuEmpty(menu) {
+	if (menu === null || menu === void 0 || menu === false) return true;
+	return Children.toArray(menu).length === 0;
+}
 function TreeNodeInner(props) {
-	const { node, data, state, isCheckable, isExpanded, isIndeterminate, isChecked, isLoading, onToggleChecked, size, itemProps, rowStyles, virtualStyle, virtualRef, virtualIndex } = props;
+	const { node, data, state, isCheckable, isExpanded, isIndeterminate, isChecked, isLoading, onToggleChecked, size, itemProps, rowStyles, virtualStyle, virtualRef, virtualIndex, menu: treeMenu, contextMenu: treeContextMenu, onAction: treeOnAction, menuTriggerProps, menuProps, expandOnFolderClick } = props;
 	const rowRef = useRef(null);
-	const combinedRef = useMemo(() => virtualRef ? mergeRefs(rowRef, virtualRef) : rowRef, [virtualRef]);
 	const { rowProps, gridCellProps, expandButtonProps, isPressed } = useTreeItem({ node }, state, rowRef);
 	const isDisabled = state.disabledKeys.has(node.key);
 	const isSelected = state.selectionManager.isSelected(node.key);
@@ -25,14 +34,74 @@ function TreeNodeInner(props) {
 	const isFocused = state.selectionManager.isFocused && state.selectionManager.focusedKey === node.key;
 	const isLeaf = data.isLeaf === true || data.isLeaf !== false && !node.hasChildNodes;
 	const isRowCheckable = isCheckable && data.isCheckable !== false;
+	const nodeState = {
+		isExpanded,
+		isSelected,
+		isChecked,
+		isIndeterminate,
+		isLeaf
+	};
+	const effectiveMenuChildren = data.menu === null ? null : data.menu !== void 0 ? data.menu : typeof treeMenu === "function" ? treeMenu(data, nodeState) : treeMenu ?? null;
+	const hasMenu = !isMenuEmpty(effectiveMenuChildren);
+	const effectiveContextMenu = data.contextMenu ?? treeContextMenu ?? false;
+	const menuExposed = hasMenu && (effectiveContextMenu === true || effectiveContextMenu === "context-only");
+	const contextMenuOnly = effectiveContextMenu === "context-only";
+	const [isMenuOpen, setIsMenuOpen] = useState(false);
+	const handleMenuAction = useEvent((action) => {
+		const actionStr = String(action);
+		const normalizedAction = actionStr.startsWith(".$") ? actionStr.slice(2) : actionStr;
+		data.onAction?.(normalizedAction);
+		treeOnAction?.(normalizedAction, node.key);
+		menuProps?.onAction?.(normalizedAction);
+	});
+	const rowContextMenu = useContextMenu(__Menu, { placement: "bottom start" }, {
+		...menuProps,
+		onAction: handleMenuAction,
+		children: effectiveMenuChildren
+	});
 	const handleCheckboxChange = useEvent(() => {
 		onToggleChecked(String(node.key));
 	});
+	const shouldExpandOnRowClick = !!expandOnFolderClick && !isLeaf && !isDisabled;
+	const handleFolderRowClick = useEvent((e) => {
+		if (e.button !== 0) return;
+		e.preventDefault();
+		e.stopPropagation();
+		state.toggleKey(node.key);
+		state.selectionManager.setFocused(true);
+		state.selectionManager.setFocusedKey(node.key);
+	});
+	const handleFolderRowPointerEvent = useEvent((e) => {
+		if (e.button !== 0) return;
+		e.stopPropagation();
+	});
 	const handleKeyDown = useEvent((e) => {
 		if (e.key === " " && isRowCheckable && !isDisabled && !data.isCheckboxDisabled) {
 			e.preventDefault();
+			e.stopPropagation();
 			onToggleChecked(String(node.key));
+			return true;
+		}
+		if (e.key === "F10" && e.shiftKey && menuExposed) {
+			e.preventDefault();
+			e.stopPropagation();
+			if (contextMenuOnly) rowContextMenu.open();
+			else setIsMenuOpen(true);
+			return true;
 		}
+		if (shouldExpandOnRowClick && (e.key === "Enter" || e.key === " ") && !isRowCheckable) {
+			e.preventDefault();
+			e.stopPropagation();
+			state.toggleKey(node.key);
+			state.selectionManager.setFocused(true);
+			state.selectionManager.setFocusedKey(node.key);
+			return true;
+		}
+		return false;
+	});
+	const composedKeyDown = useEvent((e) => {
+		if (handleKeyDown(e)) return;
+		rowProps.onKeyDown?.(e);
 	});
 	const sharedMods = useMemo(() => ({
 		checked: isChecked,
@@ -40,14 +109,16 @@ function TreeNodeInner(props) {
 		expanded: isExpanded,
 		loading: isLoading,
 		leaf: isLeaf,
-		"has-checkbox": isRowCheckable
+		"has-checkbox": isRowCheckable,
+		"has-menu": menuExposed
 	}), [
 		isChecked,
 		isIndeterminate,
 		isExpanded,
 		isLoading,
 		isLeaf,
-		isRowCheckable
+		isRowCheckable,
+		menuExposed
 	]);
 	const rowMods = useMemo(() => ({
 		...sharedMods,
@@ -69,10 +140,19 @@ function TreeNodeInner(props) {
 		...virtualStyle
 	}), [node.level, virtualStyle]);
 	const ariaChecked = isRowCheckable ? isIndeterminate ? "mixed" : isChecked ? "true" : "false" : void 0;
-	const finalRowProps = mergeProps$1(rowProps, hoverProps, {
+	const baseRowProps = {
+		...mergeProps$1(rowProps, hoverProps),
 		"aria-checked": ariaChecked,
-		onKeyDown: handleKeyDown
-	});
+		onKeyDown: composedKeyDown
+	};
+	const finalRowProps = shouldExpandOnRowClick ? {
+		...baseRowProps,
+		onClick: handleFolderRowClick,
+		onPointerDown: handleFolderRowPointerEvent,
+		onPointerUp: handleFolderRowPointerEvent,
+		onMouseDown: handleFolderRowPointerEvent,
+		onMouseUp: handleFolderRowPointerEvent
+	} : baseRowProps;
 	const toggleNode = isLeaf ? /* @__PURE__ */ jsx(TreeNodeTogglePlaceholder, {
 		"aria-hidden": true,
 		"data-element": "Toggle"
@@ -95,23 +175,42 @@ function TreeNodeInner(props) {
 			onChange: handleCheckboxChange
 		})
 	}) : null;
-	const { prefix: userPrefix, ...restUserProps } = (typeof itemProps === "function" ? itemProps(data, {
-		isExpanded,
-		isSelected,
-		isChecked,
-		isIndeterminate,
-		isLeaf
-	}) : itemProps) ?? {};
+	const { prefix: userPrefix, actions: userActions, ...restUserProps } = (typeof itemProps === "function" ? itemProps(data, nodeState) : itemProps) ?? {};
 	const composedPrefix = checkboxNode || userPrefix ? /* @__PURE__ */ jsxs(Fragment$1, { children: [checkboxNode, userPrefix] }) : null;
-	return /* @__PURE__ */ jsx(TreeNodeRow, {
+	const menuAction = menuExposed && !contextMenuOnly ? /* @__PURE__ */ jsxs(_MenuTrigger, {
+		isOpen: isMenuOpen,
+		onOpenChange: setIsMenuOpen,
+		children: [/* @__PURE__ */ jsx(ItemAction, {
+			tabIndex: -1,
+			icon: /* @__PURE__ */ jsx(MoreIcon, {}),
+			"aria-label": "Actions",
+			...menuTriggerProps
+		}), /* @__PURE__ */ jsx(__Menu, {
+			...menuProps,
+			onAction: handleMenuAction,
+			children: effectiveMenuChildren
+		})]
+	}) : null;
+	const composedActions = userActions || menuAction ? /* @__PURE__ */ jsxs(Fragment$1, { children: [userActions, menuAction] }) : void 0;
+	const refs = useMemo(() => {
+		const list = [rowRef];
+		if (virtualRef) list.push(virtualRef);
+		if (menuExposed) list.push(rowContextMenu.targetRef);
+		return mergeRefs(...list);
+	}, [
+		virtualRef,
+		menuExposed,
+		rowContextMenu.targetRef
+	]);
+	return /* @__PURE__ */ jsxs(TreeNodeRow, {
 		...finalRowProps,
-		ref: combinedRef,
+		ref: refs,
 		mods: rowMods,
 		style: rowStyle,
 		"data-element": "Row",
 		"data-qa-key": String(node.key),
 		"data-index": virtualIndex,
-		children: /* @__PURE__ */ jsx(TreeRowItem, {
+		children: [/* @__PURE__ */ jsx(TreeRowItem, {
 			...gridCellProps,
 			...restUserProps,
 			size,
@@ -120,9 +219,10 @@ function TreeNodeInner(props) {
 			mods: itemMods,
 			icon: toggleNode,
 			prefix: composedPrefix,
+			actions: composedActions,
 			styles: rowStyles,
 			children: data.title
-		})
+		}), menuExposed && rowContextMenu.rendered]
 	});
 }
 const TreeNode = memo(TreeNodeInner);

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

@@ -1 +1 @@
-{"version":3,"file":"TreeNode.js","names":["mergeProps","Checkbox"],"sources":["../../../../src/components/content/Tree/TreeNode.tsx"],"sourcesContent":["import { memo, useMemo, useRef } from 'react';\nimport { useHover, useTreeItem } from 'react-aria';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { DirectionIcon, LoadingIcon } from '../../../icons';\nimport { mergeProps, mergeRefs } from '../../../utils/react';\nimport { Checkbox } from '../../fields/Checkbox/Checkbox';\n\nimport {\n  TreeNodeCheckboxWrapper,\n  TreeNodeRow,\n  TreeNodeToggle,\n  TreeNodeTogglePlaceholder,\n  TreeRowItem,\n} from './styled';\n\nimport type { Node } from '@react-types/shared';\nimport type { Styles } from '@tenphi/tasty';\nimport type { CSSProperties, KeyboardEvent, SyntheticEvent } from 'react';\nimport type { TreeState } from 'react-stately';\nimport type { CubeTreeNodeData, TreeItemProps, TreeNodeState } from './types';\n\nconst stopPropagation = (e: SyntheticEvent) => {\n  e.stopPropagation();\n};\n\nexport interface TreeNodeProps {\n  node: Node<CubeTreeNodeData>;\n  /** The original `CubeTreeNodeData` for this row, looked up by key. */\n  data: CubeTreeNodeData;\n  state: TreeState<CubeTreeNodeData>;\n\n  /** Whether the tree as a whole renders checkboxes. */\n  isCheckable: boolean;\n  /** Whether this row is currently expanded. */\n  isExpanded: boolean;\n  /** Whether the row is in an indeterminate (half-checked) state. */\n  isIndeterminate: boolean;\n  /** Whether the row is fully checked. */\n  isChecked: boolean;\n  /** Whether `loadData` is currently fetching this row's children. */\n  isLoading: boolean;\n\n  /** Toggle this row's checkbox (cascades). */\n  onToggleChecked: (key: string) => void;\n\n  /** Row size passed to the underlying Item. */\n  size?: string;\n\n  /** Per-node Item customization (static object or callback). */\n  itemProps?:\n    | TreeItemProps\n    | ((data: CubeTreeNodeData, state: TreeNodeState) => TreeItemProps);\n\n  /** Styles applied to the visible row (`TreeRowItem`). */\n  rowStyles?: Styles;\n\n  /** Inline style for virtualizer absolute positioning. */\n  virtualStyle?: CSSProperties;\n  /** Ref callback from `@tanstack/react-virtual` to measure row height. */\n  virtualRef?: (element: HTMLElement | null) => void;\n  /** Virtual index for `data-index` attribute. */\n  virtualIndex?: number;\n}\n\nfunction TreeNodeInner(props: TreeNodeProps) {\n  const {\n    node,\n    data,\n    state,\n    isCheckable,\n    isExpanded,\n    isIndeterminate,\n    isChecked,\n    isLoading,\n    onToggleChecked,\n    size,\n    itemProps,\n    rowStyles,\n    virtualStyle,\n    virtualRef,\n    virtualIndex,\n  } = props;\n\n  const rowRef = useRef<HTMLDivElement>(null);\n  const combinedRef = useMemo(\n    () => (virtualRef ? mergeRefs(rowRef, virtualRef) : rowRef),\n    [virtualRef],\n  );\n\n  const { rowProps, gridCellProps, expandButtonProps, isPressed } = useTreeItem(\n    { node },\n    state,\n    rowRef,\n  );\n\n  const isDisabled = state.disabledKeys.has(node.key);\n  const isSelected = state.selectionManager.isSelected(node.key);\n\n  // `useTreeItem` doesn't track hover; we need it for the `hovered` mod.\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n  // React Aria's treegrid uses roving tabindex, so no `data-focused`\n  // attribute lands on the row — mirror it as a mod manually.\n  const isFocused =\n    state.selectionManager.isFocused &&\n    state.selectionManager.focusedKey === node.key;\n  // For lazy rows with no children yet, still render a toggle unless\n  // explicitly marked as leaf.\n  const isLeaf =\n    data.isLeaf === true || (data.isLeaf !== false && !node.hasChildNodes);\n  const isRowCheckable = isCheckable && data.isCheckable !== false;\n\n  const handleCheckboxChange = useEvent(() => {\n    onToggleChecked(String(node.key));\n  });\n\n  const handleKeyDown = useEvent((e: KeyboardEvent) => {\n    if (\n      e.key === ' ' &&\n      isRowCheckable &&\n      !isDisabled &&\n      !data.isCheckboxDisabled\n    ) {\n      e.preventDefault();\n      onToggleChecked(String(node.key));\n    }\n  });\n\n  const sharedMods = useMemo(\n    () => ({\n      checked: isChecked,\n      indeterminate: isIndeterminate,\n      expanded: isExpanded,\n      loading: isLoading,\n      leaf: isLeaf,\n      'has-checkbox': isRowCheckable,\n    }),\n    [isChecked, isIndeterminate, isExpanded, isLoading, isLeaf, isRowCheckable],\n  );\n\n  const rowMods = useMemo(\n    () => ({ ...sharedMods, disabled: isDisabled }),\n    [sharedMods, isDisabled],\n  );\n\n  const itemMods = useMemo(\n    () => ({\n      ...sharedMods,\n      focused: isFocused,\n      hovered: isHovered,\n      pressed: isPressed,\n    }),\n    [sharedMods, isFocused, isHovered, isPressed],\n  );\n\n  const rowStyle = useMemo<CSSProperties>(\n    () => ({\n      ['--tree-level' as keyof CSSProperties]: String(node.level ?? 0),\n      ...virtualStyle,\n    }),\n    [node.level, virtualStyle],\n  );\n\n  // Only emit `aria-checked` when the tree is in checkable mode.\n  const ariaChecked: 'mixed' | 'true' | 'false' | undefined = isRowCheckable\n    ? isIndeterminate\n      ? 'mixed'\n      : isChecked\n        ? 'true'\n        : 'false'\n    : undefined;\n\n  const finalRowProps = mergeProps(rowProps, hoverProps, {\n    'aria-checked': ariaChecked,\n    onKeyDown: handleKeyDown,\n  });\n\n  // Leaf rows get a placeholder so sibling indents align.\n  const toggleNode = isLeaf ? (\n    <TreeNodeTogglePlaceholder aria-hidden data-element=\"Toggle\" />\n  ) : (\n    <TreeNodeToggle {...expandButtonProps} tabIndex={-1} data-element=\"Toggle\">\n      {isLoading ? (\n        <LoadingIcon />\n      ) : (\n        <DirectionIcon to={isExpanded ? 'bottom' : 'right'} />\n      )}\n    </TreeNodeToggle>\n  );\n\n  const checkboxNode = isRowCheckable ? (\n    <TreeNodeCheckboxWrapper\n      data-element=\"Checkbox\"\n      role=\"presentation\"\n      onClick={stopPropagation}\n      onKeyDown={stopPropagation}\n    >\n      <Checkbox\n        isSelected={isChecked}\n        isIndeterminate={isIndeterminate}\n        isDisabled={isDisabled || data.isCheckboxDisabled}\n        aria-label={\n          typeof data.title === 'string' ? data.title : String(node.key)\n        }\n        // @ts-expect-error AriaCheckboxProps loses `onChange` where InputDOMProps overlaps (react-types).\n        onChange={handleCheckboxChange}\n      />\n    </TreeNodeCheckboxWrapper>\n  ) : null;\n\n  const nodeState: TreeNodeState = {\n    isExpanded,\n    isSelected,\n    isChecked,\n    isIndeterminate,\n    isLeaf,\n  };\n  const resolvedItemProps =\n    typeof itemProps === 'function' ? itemProps(data, nodeState) : itemProps;\n  const { prefix: userPrefix, ...restUserProps } = resolvedItemProps ?? {};\n\n  const composedPrefix =\n    checkboxNode || userPrefix ? (\n      <>\n        {checkboxNode}\n        {userPrefix}\n      </>\n    ) : null;\n\n  return (\n    <TreeNodeRow\n      {...finalRowProps}\n      ref={combinedRef}\n      mods={rowMods}\n      style={rowStyle}\n      data-element=\"Row\"\n      data-qa-key={String(node.key)}\n      data-index={virtualIndex}\n    >\n      <TreeRowItem\n        {...gridCellProps}\n        {...restUserProps}\n        size={size}\n        isSelected={isSelected}\n        isDisabled={isDisabled}\n        mods={itemMods}\n        icon={toggleNode}\n        prefix={composedPrefix}\n        styles={rowStyles}\n      >\n        {data.title}\n      </TreeRowItem>\n    </TreeNodeRow>\n  );\n}\n\nexport const TreeNode = memo(TreeNodeInner);\n"],"mappings":"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"}
+{"version":3,"file":"TreeNode.js","names":["Menu","mergeProps","Checkbox","MenuTrigger"],"sources":["../../../../src/components/content/Tree/TreeNode.tsx"],"sourcesContent":["import { Children, memo, useMemo, useRef, useState } from 'react';\nimport { useHover, useTreeItem } from 'react-aria';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { DirectionIcon, LoadingIcon, MoreIcon } from '../../../icons';\nimport { mergeProps, mergeRefs } from '../../../utils/react';\nimport { CubeItemActionProps, ItemAction } from '../../actions/ItemAction';\nimport { CubeMenuProps, Menu, MenuTrigger } from '../../actions/Menu';\nimport { useContextMenu } from '../../actions/use-context-menu';\nimport { Checkbox } from '../../fields/Checkbox/Checkbox';\n\nimport {\n  TreeNodeCheckboxWrapper,\n  TreeNodeRow,\n  TreeNodeToggle,\n  TreeNodeTogglePlaceholder,\n  TreeRowItem,\n} from './styled';\n\nimport type { Key, Node } from '@react-types/shared';\nimport type { Styles } from '@tenphi/tasty';\nimport type {\n  CSSProperties,\n  KeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  ReactNode,\n  PointerEvent as ReactPointerEvent,\n  Ref,\n  SyntheticEvent,\n} from 'react';\nimport type { TreeState } from 'react-stately';\nimport type {\n  CubeTreeNodeData,\n  TreeContextMenu,\n  TreeItemProps,\n  TreeNodeState,\n} from './types';\n\nconst stopPropagation = (e: SyntheticEvent) => {\n  e.stopPropagation();\n};\n\n/** Check whether a `menu` ReactNode actually contains anything. */\nfunction isMenuEmpty(menu: ReactNode): boolean {\n  if (menu === null || menu === undefined || menu === false) return true;\n  return Children.toArray(menu).length === 0;\n}\n\nexport interface TreeNodeProps {\n  node: Node<CubeTreeNodeData>;\n  /** The original `CubeTreeNodeData` for this row, looked up by key. */\n  data: CubeTreeNodeData;\n  state: TreeState<CubeTreeNodeData>;\n\n  /** Whether the tree as a whole renders checkboxes. */\n  isCheckable: boolean;\n  /** Whether this row is currently expanded. */\n  isExpanded: boolean;\n  /** Whether the row is in an indeterminate (half-checked) state. */\n  isIndeterminate: boolean;\n  /** Whether the row is fully checked. */\n  isChecked: boolean;\n  /** Whether `loadData` is currently fetching this row's children. */\n  isLoading: boolean;\n\n  /** Toggle this row's checkbox (cascades). */\n  onToggleChecked: (key: string) => void;\n\n  /** Row size passed to the underlying Item. */\n  size?: string;\n\n  /** Per-node Item customization (static object or callback). */\n  itemProps?:\n    | TreeItemProps\n    | ((data: CubeTreeNodeData, state: TreeNodeState) => TreeItemProps);\n\n  /** Styles applied to the visible row (`TreeRowItem`). */\n  rowStyles?: Styles;\n\n  /** Inline style for virtualizer absolute positioning. */\n  virtualStyle?: CSSProperties;\n  /** Ref callback from `@tanstack/react-virtual` to measure row height. */\n  virtualRef?: (element: HTMLElement | null) => void;\n  /** Virtual index for `data-index` attribute. */\n  virtualIndex?: number;\n\n  /** Tree-wide menu default (resolved against `data.menu`). */\n  menu?:\n    | ReactNode\n    | ((data: CubeTreeNodeData, state: TreeNodeState) => ReactNode | null);\n  /** Tree-wide `contextMenu` default. */\n  contextMenu?: TreeContextMenu;\n  /** Tree-wide `onAction` callback. */\n  onAction?: (action: string, key: Key) => void;\n  /** Forwarded to every per-row `MenuTrigger`. */\n  menuTriggerProps?: Partial<CubeItemActionProps>;\n  /** Forwarded to every per-row `Menu`. */\n  menuProps?: Partial<CubeMenuProps<object>>;\n\n  /**\n   * When true, pressing a non-leaf row toggles its expansion instead\n   * of triggering selection.\n   */\n  expandOnFolderClick?: boolean;\n}\n\nfunction TreeNodeInner(props: TreeNodeProps) {\n  const {\n    node,\n    data,\n    state,\n    isCheckable,\n    isExpanded,\n    isIndeterminate,\n    isChecked,\n    isLoading,\n    onToggleChecked,\n    size,\n    itemProps,\n    rowStyles,\n    virtualStyle,\n    virtualRef,\n    virtualIndex,\n    menu: treeMenu,\n    contextMenu: treeContextMenu,\n    onAction: treeOnAction,\n    menuTriggerProps,\n    menuProps,\n    expandOnFolderClick,\n  } = props;\n\n  const rowRef = useRef<HTMLDivElement>(null);\n\n  const { rowProps, gridCellProps, expandButtonProps, isPressed } = useTreeItem(\n    { node },\n    state,\n    rowRef,\n  );\n\n  const isDisabled = state.disabledKeys.has(node.key);\n  const isSelected = state.selectionManager.isSelected(node.key);\n\n  // `useTreeItem` doesn't track hover; we need it for the `hovered` mod.\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n  // React Aria's treegrid uses roving tabindex, so no `data-focused`\n  // attribute lands on the row — mirror it as a mod manually.\n  const isFocused =\n    state.selectionManager.isFocused &&\n    state.selectionManager.focusedKey === node.key;\n  // For lazy rows with no children yet, still render a toggle unless\n  // explicitly marked as leaf.\n  const isLeaf =\n    data.isLeaf === true || (data.isLeaf !== false && !node.hasChildNodes);\n  const isRowCheckable = isCheckable && data.isCheckable !== false;\n\n  const nodeState: TreeNodeState = {\n    isExpanded,\n    isSelected,\n    isChecked,\n    isIndeterminate,\n    isLeaf,\n  };\n\n  // ---- Menu resolution (per-node override > tree-level) --------------------\n\n  const effectiveMenuChildren: ReactNode =\n    data.menu === null\n      ? null\n      : data.menu !== undefined\n        ? data.menu\n        : typeof treeMenu === 'function'\n          ? treeMenu(data, nodeState)\n          : treeMenu ?? null;\n  const hasMenu = !isMenuEmpty(effectiveMenuChildren);\n\n  const effectiveContextMenu: TreeContextMenu =\n    data.contextMenu ?? treeContextMenu ?? false;\n  // The menu is exposed only when the consumer opts in via\n  // `contextMenu`. When `contextMenu` is `false` (default) we render\n  // nothing, even if `menu` is provided — this matches the plan and\n  // keeps default rows visually clean.\n  const menuExposed =\n    hasMenu &&\n    (effectiveContextMenu === true || effectiveContextMenu === 'context-only');\n  const contextMenuOnly = effectiveContextMenu === 'context-only';\n\n  // Controlled state for menu trigger (enables keyboard opening with Shift+F10)\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n\n  const handleMenuAction = useEvent((action: Key) => {\n    // Strip the \".$\" prefix that React adds via Children.toArray/map.\n    const actionStr = String(action);\n    const normalizedAction = actionStr.startsWith('.$')\n      ? actionStr.slice(2)\n      : actionStr;\n    data.onAction?.(normalizedAction);\n    treeOnAction?.(normalizedAction, node.key);\n    // Forward to the consumer-supplied `menuProps.onAction` so users\n    // who pass extra `Menu` props through `menuProps` still receive\n    // the action stream alongside the tree-level callback.\n    menuProps?.onAction?.(normalizedAction);\n  });\n\n  const rowContextMenu = useContextMenu<HTMLDivElement, CubeMenuProps<object>>(\n    Menu,\n    { placement: 'bottom start' },\n    {\n      ...menuProps,\n      onAction: handleMenuAction,\n      children: effectiveMenuChildren,\n    },\n  );\n\n  // ---- Checkbox ------------------------------------------------------------\n\n  const handleCheckboxChange = useEvent(() => {\n    onToggleChecked(String(node.key));\n  });\n\n  // ---- Folder-click interception ------------------------------------------\n\n  const shouldExpandOnRowClick =\n    !!expandOnFolderClick && !isLeaf && !isDisabled;\n\n  const handleFolderRowClick = useEvent((e: ReactMouseEvent) => {\n    // Only intercept primary-button clicks; let right-click reach\n    // `useContextMenu` (it listens for the `contextmenu` event).\n    if (e.button !== 0) return;\n    e.preventDefault();\n    e.stopPropagation();\n    state.toggleKey(node.key);\n    state.selectionManager.setFocused(true);\n    state.selectionManager.setFocusedKey(node.key);\n  });\n\n  const handleFolderRowPointerEvent = useEvent((e: ReactPointerEvent) => {\n    if (e.button !== 0) return;\n    // Stop usePress from latching its `isPressed` state — the row is\n    // not a press target anymore in this mode.\n    e.stopPropagation();\n  });\n\n  // ---- Keyboard ------------------------------------------------------------\n\n  // Composed keydown handler. Runs BEFORE `rowProps.onKeyDown` from\n  // `useTreeItem` so we can short-circuit the default react-aria\n  // behavior (which would otherwise trigger selection on Enter/Space).\n  // Returns `true` when the event was handled and react-aria's keydown\n  // must NOT run.\n  const handleKeyDown = useEvent((e: KeyboardEvent) => {\n    // Space toggles the checkbox first when checkable.\n    if (\n      e.key === ' ' &&\n      isRowCheckable &&\n      !isDisabled &&\n      !data.isCheckboxDisabled\n    ) {\n      e.preventDefault();\n      e.stopPropagation();\n      onToggleChecked(String(node.key));\n      return true;\n    }\n\n    // Shift+F10 opens the row menu (standard accessibility shortcut).\n    if (e.key === 'F10' && e.shiftKey && menuExposed) {\n      e.preventDefault();\n      e.stopPropagation();\n      if (contextMenuOnly) {\n        rowContextMenu.open();\n      } else {\n        setIsMenuOpen(true);\n      }\n      return true;\n    }\n\n    // Enter/Space toggles expansion for folders in expandOnFolderClick\n    // mode (matches the row-click behavior). Must run BEFORE\n    // `useTreeItem`'s onKeyDown so react-aria doesn't also fire\n    // selection on the same keypress.\n    if (\n      shouldExpandOnRowClick &&\n      (e.key === 'Enter' || e.key === ' ') &&\n      !isRowCheckable\n    ) {\n      e.preventDefault();\n      e.stopPropagation();\n      state.toggleKey(node.key);\n      state.selectionManager.setFocused(true);\n      state.selectionManager.setFocusedKey(node.key);\n      return true;\n    }\n\n    return false;\n  });\n\n  // Wrapper that delegates to react-aria's default keydown only when\n  // our handler did not claim the event. Replaces (rather than\n  // chains with) `rowProps.onKeyDown` so the order of handlers is\n  // strictly: our shortcuts → react-aria default.\n  const composedKeyDown = useEvent((e: KeyboardEvent<HTMLDivElement>) => {\n    if (handleKeyDown(e)) return;\n    rowProps.onKeyDown?.(e as unknown as globalThis.KeyboardEvent);\n  });\n\n  // ---- Mods ----------------------------------------------------------------\n\n  const sharedMods = useMemo(\n    () => ({\n      checked: isChecked,\n      indeterminate: isIndeterminate,\n      expanded: isExpanded,\n      loading: isLoading,\n      leaf: isLeaf,\n      'has-checkbox': isRowCheckable,\n      'has-menu': menuExposed,\n    }),\n    [\n      isChecked,\n      isIndeterminate,\n      isExpanded,\n      isLoading,\n      isLeaf,\n      isRowCheckable,\n      menuExposed,\n    ],\n  );\n\n  const rowMods = useMemo(\n    () => ({ ...sharedMods, disabled: isDisabled }),\n    [sharedMods, isDisabled],\n  );\n\n  const itemMods = useMemo(\n    () => ({\n      ...sharedMods,\n      focused: isFocused,\n      hovered: isHovered,\n      pressed: isPressed,\n    }),\n    [sharedMods, isFocused, isHovered, isPressed],\n  );\n\n  const rowStyle = useMemo<CSSProperties>(\n    () => ({\n      ['--tree-level' as keyof CSSProperties]: String(node.level ?? 0),\n      ...virtualStyle,\n    }),\n    [node.level, virtualStyle],\n  );\n\n  // Only emit `aria-checked` when the tree is in checkable mode.\n  const ariaChecked: 'mixed' | 'true' | 'false' | undefined = isRowCheckable\n    ? isIndeterminate\n      ? 'mixed'\n      : isChecked\n        ? 'true'\n        : 'false'\n    : undefined;\n\n  // ---- Compose row props ---------------------------------------------------\n\n  // Merge react-aria + hover props but EXCLUDE `onKeyDown` from the\n  // chain — `composedKeyDown` already wraps `rowProps.onKeyDown` and\n  // must run first to short-circuit Enter/Space selection in\n  // `expandOnFolderClick` mode.\n  const baseRowProps = {\n    ...mergeProps(rowProps, hoverProps),\n    'aria-checked': ariaChecked,\n    onKeyDown: composedKeyDown,\n  };\n\n  // When `expandOnFolderClick` applies, replace the click + pointer\n  // handlers so usePress (from `useSelectableItem`) doesn't trigger\n  // selection. We still want focus/keyboard nav, so we manually call\n  // `setFocusedKey` + `setFocused`.\n  const finalRowProps = shouldExpandOnRowClick\n    ? {\n        ...baseRowProps,\n        onClick: handleFolderRowClick,\n        onPointerDown: handleFolderRowPointerEvent,\n        onPointerUp: handleFolderRowPointerEvent,\n        onMouseDown: handleFolderRowPointerEvent as unknown as ReactMouseEvent,\n        onMouseUp: handleFolderRowPointerEvent as unknown as ReactMouseEvent,\n      }\n    : baseRowProps;\n\n  // ---- Toggle (chevron) and checkbox slots --------------------------------\n\n  // Leaf rows get a placeholder so sibling indents align.\n  const toggleNode = isLeaf ? (\n    <TreeNodeTogglePlaceholder aria-hidden data-element=\"Toggle\" />\n  ) : (\n    <TreeNodeToggle {...expandButtonProps} tabIndex={-1} data-element=\"Toggle\">\n      {isLoading ? (\n        <LoadingIcon />\n      ) : (\n        <DirectionIcon to={isExpanded ? 'bottom' : 'right'} />\n      )}\n    </TreeNodeToggle>\n  );\n\n  const checkboxNode = isRowCheckable ? (\n    <TreeNodeCheckboxWrapper\n      data-element=\"Checkbox\"\n      role=\"presentation\"\n      onClick={stopPropagation}\n      onKeyDown={stopPropagation}\n    >\n      <Checkbox\n        isSelected={isChecked}\n        isIndeterminate={isIndeterminate}\n        isDisabled={isDisabled || data.isCheckboxDisabled}\n        aria-label={\n          typeof data.title === 'string' ? data.title : String(node.key)\n        }\n        // @ts-expect-error AriaCheckboxProps loses `onChange` where InputDOMProps overlaps (react-types).\n        onChange={handleCheckboxChange}\n      />\n    </TreeNodeCheckboxWrapper>\n  ) : null;\n\n  // ---- Resolve user-supplied per-node Item props --------------------------\n\n  const resolvedItemProps =\n    typeof itemProps === 'function' ? itemProps(data, nodeState) : itemProps;\n  const {\n    prefix: userPrefix,\n    actions: userActions,\n    ...restUserProps\n  } = resolvedItemProps ?? {};\n\n  const composedPrefix =\n    checkboxNode || userPrefix ? (\n      <>\n        {checkboxNode}\n        {userPrefix}\n      </>\n    ) : null;\n\n  // ---- Built-in overflow `⋮` action ---------------------------------------\n\n  const menuAction =\n    menuExposed && !contextMenuOnly ? (\n      <MenuTrigger isOpen={isMenuOpen} onOpenChange={setIsMenuOpen}>\n        <ItemAction\n          tabIndex={-1}\n          icon={<MoreIcon />}\n          aria-label=\"Actions\"\n          {...menuTriggerProps}\n        />\n        <Menu {...menuProps} onAction={handleMenuAction}>\n          {effectiveMenuChildren}\n        </Menu>\n      </MenuTrigger>\n    ) : null;\n\n  // Compose with user-supplied actions (user actions render first).\n  const composedActions =\n    userActions || menuAction ? (\n      <>\n        {userActions}\n        {menuAction}\n      </>\n    ) : undefined;\n\n  // ---- Refs / context-menu wiring -----------------------------------------\n\n  // When the context menu is enabled for this row, attach the hook's\n  // `targetRef` to the row so right-clicks land on the correct anchor.\n  const refs = useMemo(() => {\n    const list: Ref<HTMLDivElement>[] = [rowRef];\n    if (virtualRef) list.push(virtualRef);\n    if (menuExposed) list.push(rowContextMenu.targetRef);\n    return mergeRefs(...list);\n  }, [virtualRef, menuExposed, rowContextMenu.targetRef]);\n\n  return (\n    <TreeNodeRow\n      {...finalRowProps}\n      ref={refs}\n      mods={rowMods}\n      style={rowStyle}\n      data-element=\"Row\"\n      data-qa-key={String(node.key)}\n      data-index={virtualIndex}\n    >\n      <TreeRowItem\n        {...gridCellProps}\n        {...restUserProps}\n        size={size}\n        isSelected={isSelected}\n        isDisabled={isDisabled}\n        mods={itemMods}\n        icon={toggleNode}\n        prefix={composedPrefix}\n        actions={composedActions}\n        styles={rowStyles}\n      >\n        {data.title}\n      </TreeRowItem>\n      {menuExposed && rowContextMenu.rendered}\n    </TreeNodeRow>\n  );\n}\n\nexport const TreeNode = memo(TreeNodeInner);\n"],"mappings":"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"}

package/dist/components/content/Tree/index.d.ts

@@ -1,3 +1,3 @@
 
-import { CubeTreeNodeData, CubeTreeProps, TreeLoadDataNode, TreeOnCheckInfo, TreeOnExpandInfo, TreeOnSelectInfo, TreeSelectionMode } from "./types.js";
+import { CubeTreeNodeData, CubeTreeProps, TreeContextMenu, TreeLoadDataNode, TreeNodeState, TreeOnCheckInfo, TreeOnExpandInfo, TreeOnSelectInfo, TreeSelectionMode } from "./types.js";
 import { Tree } from "./Tree.js";

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

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