@cube-dev/ui-kit 0.193.0 → 0.193.2

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.193.2 | 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";
@@ -11,7 +11,7 @@ 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 { MoreIcon } from "../../../icons/MoreIcon.js";
-import { allowEscapeToPropagate } from "../../../utils/react/escapePropagation.js";
+import { allowOverlayKeysToPropagate } from "../../../utils/react/overlayKeyPropagation.js";
 import { __Checkbox } from "../../fields/Checkbox/Checkbox.js";
 import { Children, memo, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -145,7 +145,7 @@ function TreeNodeInner(props) {
 		"data-element": "Checkbox",
 		role: "presentation",
 		onClick: handleWrapperClick,
-		onKeyDown: allowEscapeToPropagate,
+		onKeyDown: allowOverlayKeysToPropagate,
 		children: /* @__PURE__ */ jsx(__Checkbox, {
 			isSelected: isChecked,
 			isIndeterminate,

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

@@ -1 +1 @@
-{"version":3,"file":"TreeNode.js","names":["Children","memo","useMemo","useRef","useState","useHover","useTreeItem","useEvent","useI18n","DirectionIcon","LoadingIcon","MoreIcon","mergeProps","mergeRefs","allowEscapeToPropagate","CubeItemActionProps","ItemAction","CubeMenuProps","Menu","MenuTrigger","useContextMenu","Checkbox","TreeNodeCheckboxWrapper","TreeNodeRow","TreeNodeToggle","TreeNodeTogglePlaceholder","TreeRowItem","Key","Node","Styles","CSSProperties","KeyboardEvent","MouseEvent","ReactNode","Ref","TreeState","CubeTreeNodeData","TreeContextMenu","TreeItemProps","TreeNodeState","isMenuEmpty","menu","undefined","toArray","length","TreeNodeProps","node","data","state","isCheckable","isExpanded","isIndeterminate","isChecked","isLoading","onToggleChecked","key","size","itemProps","rowStyles","virtualStyle","virtualRef","element","HTMLElement","virtualIndex","contextMenu","onAction","action","menuTriggerProps","Partial","menuProps","TreeNodeInner","props","t","treeMenu","treeContextMenu","treeOnAction","rowRef","HTMLDivElement","isLeaf","hasChildNodes","rowProps","gridCellProps","expandButtonProps","isPressed","hasChildItems","isDisabled","disabledKeys","has","isSelected","selectionManager","hoverProps","isHovered","isFocused","focusedKey","isRowCheckable","nodeState","effectiveMenuChildren","hasMenu","effectiveContextMenu","menuExposed","contextMenuOnly","isMenuOpen","setIsMenuOpen","handleMenuAction","actionStr","String","normalizedAction","startsWith","slice","rowContextMenu","placement","children","handleCheckboxChange","handleWrapperClick","e","stopPropagation","isCheckboxDisabled","target","closest","handleKeyDown","preventDefault","shiftKey","open","composedKeyDown","onKeyDown","sharedMods","checked","indeterminate","expanded","loading","leaf","rowMods","disabled","itemMods","focused","hovered","pressed","rowStyle","level","ariaChecked","finalRowProps","toggleNode","checkboxNode","title","resolvedItemProps","prefix","userPrefix","actions","userActions","restUserProps","composedPrefix","menuAction","composedActions","refs","list","push","targetRef","rendered","TreeNode"],"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 { useI18n } from '../../../i18n';\nimport { DirectionIcon } from '../../../icons/DirectionIcon';\nimport { LoadingIcon } from '../../../icons/LoadingIcon';\nimport { MoreIcon } from '../../../icons/MoreIcon';\nimport { mergeProps, mergeRefs } from '../../../utils/react';\nimport { allowEscapeToPropagate } from '../../../utils/react/escapePropagation';\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,\n  ReactNode,\n  Ref,\n} from 'react';\nimport type { TreeState } from 'react-stately';\nimport type {\n  CubeTreeNodeData,\n  TreeContextMenu,\n  TreeItemProps,\n  TreeNodeState,\n} from './types';\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\nfunction TreeNodeInner(props: TreeNodeProps) {\n  const { t } = useI18n();\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  } = props;\n\n  const rowRef = useRef<HTMLDivElement>(null);\n\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\n  // React Aria counts a row as a parent only with more than one child (it\n  // expects the row's content first). `hasChildItems` makes single-child and\n  // lazy rows expandable: `aria-expanded` and arrow-key expansion.\n  const { rowProps, gridCellProps, expandButtonProps, isPressed } = useTreeItem(\n    { node, hasChildItems: !isLeaf },\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  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  const handleWrapperClick = useEvent((e: MouseEvent<HTMLElement>) => {\n    e.stopPropagation();\n    if (isDisabled || data.isCheckboxDisabled) return;\n    // The inner <Checkbox> label toggles on direct click; skip to avoid a double toggle.\n    if ((e.target as HTMLElement).closest('[data-qa=\"CheckboxWrapper\"]'))\n      return;\n    onToggleChecked(String(node.key));\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 for our own shortcuts (Shift+F10 menu open, Space\n  // checkbox toggle). Returns `true` when the event was handled and\n  // react-aria's keydown must NOT run; returns `false` to chain to\n  // react-aria's handler.\n  const handleKeyDown = useEvent((e: KeyboardEvent) => {\n    // Space toggles the checkbox first when checkable. We DON'T claim\n    // the event (return `false`) so react-aria's onKeyDown still runs\n    // afterwards and the focused row also selects — matching the\n    // pre-refactor behavior when handlers were chained via\n    // `mergeProps`. `preventDefault` is kept to suppress page scroll.\n    if (\n      e.key === ' ' &&\n      isRowCheckable &&\n      !isDisabled &&\n      !data.isCheckboxDisabled\n    ) {\n      e.preventDefault();\n      onToggleChecked(String(node.key));\n      return false;\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    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);\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 so our Shift+F10 / Space-checkbox shortcuts can\n  // short-circuit the default react-aria behavior.\n  const finalRowProps = {\n    ...mergeProps(rowProps, hoverProps),\n    'aria-checked': ariaChecked,\n    onKeyDown: composedKeyDown,\n  };\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={handleWrapperClick}\n      // Hold the checkbox's keys here, but let Escape reach a surrounding overlay.\n      onKeyDown={allowEscapeToPropagate}\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        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={t('tree.actions', '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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"}
+{"version":3,"file":"TreeNode.js","names":["Children","memo","useMemo","useRef","useState","useHover","useTreeItem","useEvent","useI18n","DirectionIcon","LoadingIcon","MoreIcon","mergeProps","mergeRefs","allowOverlayKeysToPropagate","CubeItemActionProps","ItemAction","CubeMenuProps","Menu","MenuTrigger","useContextMenu","Checkbox","TreeNodeCheckboxWrapper","TreeNodeRow","TreeNodeToggle","TreeNodeTogglePlaceholder","TreeRowItem","Key","Node","Styles","CSSProperties","KeyboardEvent","MouseEvent","ReactNode","Ref","TreeState","CubeTreeNodeData","TreeContextMenu","TreeItemProps","TreeNodeState","isMenuEmpty","menu","undefined","toArray","length","TreeNodeProps","node","data","state","isCheckable","isExpanded","isIndeterminate","isChecked","isLoading","onToggleChecked","key","size","itemProps","rowStyles","virtualStyle","virtualRef","element","HTMLElement","virtualIndex","contextMenu","onAction","action","menuTriggerProps","Partial","menuProps","TreeNodeInner","props","t","treeMenu","treeContextMenu","treeOnAction","rowRef","HTMLDivElement","isLeaf","hasChildNodes","rowProps","gridCellProps","expandButtonProps","isPressed","hasChildItems","isDisabled","disabledKeys","has","isSelected","selectionManager","hoverProps","isHovered","isFocused","focusedKey","isRowCheckable","nodeState","effectiveMenuChildren","hasMenu","effectiveContextMenu","menuExposed","contextMenuOnly","isMenuOpen","setIsMenuOpen","handleMenuAction","actionStr","String","normalizedAction","startsWith","slice","rowContextMenu","placement","children","handleCheckboxChange","handleWrapperClick","e","stopPropagation","isCheckboxDisabled","target","closest","handleKeyDown","preventDefault","shiftKey","open","composedKeyDown","onKeyDown","sharedMods","checked","indeterminate","expanded","loading","leaf","rowMods","disabled","itemMods","focused","hovered","pressed","rowStyle","level","ariaChecked","finalRowProps","toggleNode","checkboxNode","title","resolvedItemProps","prefix","userPrefix","actions","userActions","restUserProps","composedPrefix","menuAction","composedActions","refs","list","push","targetRef","rendered","TreeNode"],"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 { useI18n } from '../../../i18n';\nimport { DirectionIcon } from '../../../icons/DirectionIcon';\nimport { LoadingIcon } from '../../../icons/LoadingIcon';\nimport { MoreIcon } from '../../../icons/MoreIcon';\nimport { mergeProps, mergeRefs } from '../../../utils/react';\nimport { allowOverlayKeysToPropagate } from '../../../utils/react/overlayKeyPropagation';\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,\n  ReactNode,\n  Ref,\n} from 'react';\nimport type { TreeState } from 'react-stately';\nimport type {\n  CubeTreeNodeData,\n  TreeContextMenu,\n  TreeItemProps,\n  TreeNodeState,\n} from './types';\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\nfunction TreeNodeInner(props: TreeNodeProps) {\n  const { t } = useI18n();\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  } = props;\n\n  const rowRef = useRef<HTMLDivElement>(null);\n\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\n  // React Aria counts a row as a parent only with more than one child (it\n  // expects the row's content first). `hasChildItems` makes single-child and\n  // lazy rows expandable: `aria-expanded` and arrow-key expansion.\n  const { rowProps, gridCellProps, expandButtonProps, isPressed } = useTreeItem(\n    { node, hasChildItems: !isLeaf },\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  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  const handleWrapperClick = useEvent((e: MouseEvent<HTMLElement>) => {\n    e.stopPropagation();\n    if (isDisabled || data.isCheckboxDisabled) return;\n    // The inner <Checkbox> label toggles on direct click; skip to avoid a double toggle.\n    if ((e.target as HTMLElement).closest('[data-qa=\"CheckboxWrapper\"]'))\n      return;\n    onToggleChecked(String(node.key));\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 for our own shortcuts (Shift+F10 menu open, Space\n  // checkbox toggle). Returns `true` when the event was handled and\n  // react-aria's keydown must NOT run; returns `false` to chain to\n  // react-aria's handler.\n  const handleKeyDown = useEvent((e: KeyboardEvent) => {\n    // Space toggles the checkbox first when checkable. We DON'T claim\n    // the event (return `false`) so react-aria's onKeyDown still runs\n    // afterwards and the focused row also selects — matching the\n    // pre-refactor behavior when handlers were chained via\n    // `mergeProps`. `preventDefault` is kept to suppress page scroll.\n    if (\n      e.key === ' ' &&\n      isRowCheckable &&\n      !isDisabled &&\n      !data.isCheckboxDisabled\n    ) {\n      e.preventDefault();\n      onToggleChecked(String(node.key));\n      return false;\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    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);\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 so our Shift+F10 / Space-checkbox shortcuts can\n  // short-circuit the default react-aria behavior.\n  const finalRowProps = {\n    ...mergeProps(rowProps, hoverProps),\n    'aria-checked': ariaChecked,\n    onKeyDown: composedKeyDown,\n  };\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={handleWrapperClick}\n      // Hold the checkbox's keys here, but let Escape and Tab reach the tree and\n      // a surrounding overlay.\n      onKeyDown={allowOverlayKeysToPropagate}\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        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={t('tree.actions', '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/styled.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.193.2 | 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.193.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.193.2 | 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.193.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.193.2 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { c } from "react/compiler-runtime";
 import { useState } from "react";

package/dist/components/content/Tree/use-load-data.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.193.2 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { isDevEnvOrTest } from "../../../utils/is-dev-env.js";
 import { c } from "react/compiler-runtime";

package/dist/components/content/highlightText.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.193.2 | 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.193.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.193.2 | Cube Dev Team */
 import { TooltipProvider } from "../overlays/Tooltip/TooltipProvider.js";
 import { c } from "react/compiler-runtime";
 import { useEffect, useRef, useState } from "react";

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.193.2 | Cube Dev Team */
 import { extractStyles, mergeStyleLayers } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useI18n } from "../../../i18n/useI18n.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.193.2 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { _Text } from "../../content/Text.js";
 import { useI18n } from "../../../i18n/useI18n.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.193.2 | Cube Dev Team */
 import { _Text } from "../../content/Text.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { c } from "react/compiler-runtime";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.193.2 | Cube Dev Team */
 import { _Pagination } from "../../navigation/Pagination/Pagination.js";
 import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.193.2 | Cube Dev Team */
 import { useI18n } from "../../../i18n/useI18n.js";
 import { Button } from "../../actions/index.js";
 import { ReloadIcon } from "../../../icons/ReloadIcon.js";

package/dist/components/data/ItemTable/use-item-table-column-widths.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.193.2 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { freezeColumnWidths, useTableColumns } from "../TableBase/use-table-columns.js";
 import { c } from "react/compiler-runtime";

package/dist/components/data/ItemTable/use-item-table-drag-drop.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.193.2 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { isTableTreeDescendant } from "../TableBase/table-tree.js";
 import { ItemTableDragPreview } from "./ItemTableDragPreview.js";

package/dist/components/data/ItemTable/use-item-table-pagination.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.193.2 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { clampPage, getPageInfo } from "../../navigation/Pagination/use-pagination.js";
 import { reindexTableTree } from "../TableBase/table-tree.js";

package/dist/components/data/ItemTable/use-item-table-selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.193.2 | Cube Dev Team */
 import { flattenTableTree } from "../TableBase/table-tree.js";
 import { useTableSelection } from "../TableBase/use-table-selection.js";
 import { c } from "react/compiler-runtime";

package/dist/components/data/ItemTable/use-item-table-sort.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.193.2 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { sortTableTree } from "../TableBase/table-tree.js";
 import { compareByColumn, useTableSort } from "../TableBase/use-table-sort.js";

package/dist/components/data/ItemTable/use-item-table-tree-model.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.193.2 | Cube Dev Team */
 import { useWarn } from "../../../_internal/hooks/use-warn.js";
 import { buildTableTree } from "../TableBase/table-tree.js";
 import { c } from "react/compiler-runtime";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.193.2 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { c } from "react/compiler-runtime";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.193.2 | Cube Dev Team */
 //#region src/components/data/TableBase/RowCollection.ts
 /**
 * A `Collection<Node<T>>` over a plain row array.

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.193.2 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { c } from "react/compiler-runtime";
 import { useEffect, useRef, useState } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.193.2 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
 import { c } from "react/compiler-runtime";

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

@@ -1,4 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.193.2 | Cube Dev Team */
+import { useSlotProps } from "../../../utils/react/Slots.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { TooltipProvider } from "../../overlays/Tooltip/TooltipProvider.js";
 import { TextItem } from "../../content/TextItem/TextItem.js";
@@ -30,6 +31,7 @@ import { selectionRowKey } from "./types.js";
 import { toTsv } from "./use-cell-selection.js";
 import { useColumnMenu } from "./use-column-menu.js";
 import { getDraggableColumnKeys, isColumnDraggable } from "./use-column-order.js";
+import { canWindowColumns, useColumnWindow } from "./use-column-window.js";
 import { useRowMoveAnimation } from "./use-row-move-animation.js";
 import { useScrollability } from "./use-scrollability.js";
 import { getColumnText, getColumnValue } from "./use-table-columns.js";
@@ -187,6 +189,8 @@ function TableView(props) {
 	const toast = useToast();
 	const [scrollerEl, setScrollerEl] = useState(null);
 	const scrollerRef = useRef(null);
+	const textSlotProps = useSlotProps({}, "text");
+	const { segments: bodyColumns, refreshAppearance } = useColumnWindow(layout, scrollerEl, isVirtualized !== false && !isAutoHeight && !bodyStyles && !rowStyles && !cellStyles && Object.keys(textSlotProps).length === 0 && (!contentPreset || contentPreset === "t4") && canWindowColumns(columns, styles), tree?.columnKey);
 	const localBodyRef = useRef(null);
 	const handleBodyRef = useCallback((element) => {
 		localBodyRef.current = element;
@@ -372,6 +376,28 @@ function TableView(props) {
 			})
 		});
 	}
+	function renderColumnSpacer(key, span, pinnedEdge, isLastRow = false) {
+		return /* @__PURE__ */ jsx("td", {
+			"data-element": "ColumnSpacer",
+			"data-pinned": pinnedEdge,
+			"data-last-row": isLastRow ? "" : void 0,
+			colSpan: span,
+			"aria-hidden": "true",
+			role: "presentation"
+		}, key);
+	}
+	function renderSkeletonCell(column) {
+		return /* @__PURE__ */ jsx("td", {
+			"data-element": "Cell",
+			"data-pin": column.pin,
+			"data-pin-edge": column.isPinEdge ? "" : void 0,
+			"data-align": column.align,
+			role: "gridcell",
+			"aria-colindex": column.ariaColIndex,
+			style: pinStyle(column),
+			children: /* @__PURE__ */ jsx(Placeholder, {})
+		}, `column-cell:${column.key}`);
+	}
 	function renderSkeletonRows(count = skeletonRowCount, keyPrefix = "skeleton") {
 		return Array.from({ length: count }, (_, rowIndex) => /* @__PURE__ */ jsx("tr", {
 			"data-element": "Row",
@@ -379,16 +405,7 @@ function TableView(props) {
 			role: "row",
 			"aria-rowindex": bodyRowIndex(rowIndex),
 			"aria-busy": "true",
-			children: columns.map((column) => /* @__PURE__ */ jsx("td", {
-				"data-element": "Cell",
-				"data-pin": column.pin,
-				"data-pin-edge": column.isPinEdge ? "" : void 0,
-				"data-align": column.align,
-				role: "gridcell",
-				"aria-colindex": column.ariaColIndex,
-				style: pinStyle(column),
-				children: /* @__PURE__ */ jsx(Placeholder, {})
-			}, column.key))
+			children: bodyColumns.map((segment) => segment.column ? renderSkeletonCell(segment.column) : renderColumnSpacer(segment.key, segment.span))
 		}, `${keyPrefix}-${rowIndex}`));
 	}
 	function renderSelectionHeaderCell(column, rowSpan = 1) {
@@ -449,7 +466,7 @@ function TableView(props) {
 					children: checkbox
 				}) : checkbox
 			})
-		}, column.key);
+		}, `column-cell:${column.key}`);
 	}
 	function renderRowMenuCell(column, row, rowIndex, rowKey, isLastRow, pinnedEdge) {
 		const items = resolveRowMenu(row, rowIndex, rowKey);
@@ -479,7 +496,7 @@ function TableView(props) {
 					children: items
 				})] })
 			})
-		}, column.key);
+		}, `column-cell:${column.key}`);
 	}
 	function renderHeaderCell(column, rowSpan = 1) {
 		if (column.key === SELECTION_COLUMN_KEY) return renderSelectionHeaderCell(column, rowSpan);
@@ -596,7 +613,7 @@ function TableView(props) {
 			"aria-colindex": column.ariaColIndex,
 			style: pinStyle(column),
 			children: pinnedEdge ? null : rowNumberOffset + rowIndex + 1
-		}, column.key);
+		}, `column-cell:${column.key}`);
 		if (column.key === ROW_MENU_COLUMN_KEY) return renderRowMenuCell(column, row, rowIndex, rowKey, isLastRow, pinnedEdge);
 		const ctx = {
 			row,
@@ -643,7 +660,7 @@ function TableView(props) {
 				tabIndex: -1,
 				"aria-label": getColumnText(column, row, rowIndex) ?? void 0
 			}) : null]
-		}, column.key);
+		}, `column-cell:${column.key}`);
 	}
 	/**
 	* A pinned row — a total or subtotal.
@@ -660,13 +677,13 @@ function TableView(props) {
 			"data-pinned": edge,
 			role: "row",
 			"aria-rowindex": pinnedRowIndex(index, edge),
-			children: columns.map((column) => renderCell(column, row, index, rowKey, false, edge))
+			children: bodyColumns.map((segment) => segment.column ? renderCell(segment.column, row, index, rowKey, false, edge) : renderColumnSpacer(segment.key, segment.span, edge))
 		}, `pinned-${edge}-${rowKey}`);
 	}
 	/** The cells of one body row. Shared by both render paths. */
 	function renderRowCells(row, rowIndex, treeItemAria) {
 		const rowKey = bodyRowKey(row, rowIndex);
-		return columns.map((column) => renderCell(column, row, rowIndex, rowKey, rowIndex === rows.length - 1, void 0, treeItemAria));
+		return bodyColumns.map((segment) => segment.column ? renderCell(segment.column, row, rowIndex, rowKey, rowIndex === rows.length - 1, void 0, treeItemAria) : renderColumnSpacer(segment.key, segment.span, void 0, rowIndex === rows.length - 1));
 	}
 	/**
 	* The `<tr>` shell. Virtuoso owns the element in the virtualized path (it
@@ -793,7 +810,7 @@ function TableView(props) {
 		virtualizer.getTotalSize();
 		localBodyRef.current?.querySelectorAll("tr[data-index]").forEach((element) => virtualizer.measureElement(element));
 	}, [estimatedRowHeight, virtualizer]);
-	useTableTooltipRefresh(scrollerEl, virtualizer.isScrolling);
+	useTableTooltipRefresh(scrollerEl, virtualizer.isScrolling, refreshAppearance);
 	const focusedTreeKey = tree?.state.selectionManager.focusedKey;
 	useEffect(() => {
 		if (!shouldVirtualize || focusedTreeKey == null || !tree) return;