@cube-dev/ui-kit 0.132.0 → 0.133.0

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.132.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
@@ -19,51 +19,13 @@ import { useHover, useTreeItem } from "react-aria";
 const stopPropagation = (e) => {
 	e.stopPropagation();
 };
-/**
-* CSS selector matching focusable / activatable descendants that
-* should "absorb" a click so the parent row does not also react to
-* it. Used by the `expandOnFolderClick` row click / pointer guards.
-*
-* Covers the standard interactive elements (`button`, `a`, form
-* controls), explicit ARIA roles (`button`, `menuitem`, `checkbox`,
-* `link`, `tab`, `option`, etc.), and react-aria's pressable marker.
-*/
-const INTERACTIVE_DESCENDANT_SELECTOR = [
-	"button",
-	"a[href]",
-	"input",
-	"textarea",
-	"select",
-	"[role=\"button\"]",
-	"[role=\"menuitem\"]",
-	"[role=\"menuitemcheckbox\"]",
-	"[role=\"menuitemradio\"]",
-	"[role=\"checkbox\"]",
-	"[role=\"radio\"]",
-	"[role=\"link\"]",
-	"[role=\"tab\"]",
-	"[role=\"option\"]",
-	"[role=\"switch\"]",
-	"[data-react-aria-pressable]"
-].join(",");
-/**
-* Returns `true` when `target` is (or is contained within) an
-* interactive element that lives BETWEEN `target` and `currentTarget`
-* — i.e. something the user clearly intended to click instead of the
-* row itself.
-*/
-function isInteractiveDescendant(target, currentTarget) {
-	if (!(target instanceof Element) || !(currentTarget instanceof Element)) return false;
-	const interactive = target.closest(INTERACTIVE_DESCENDANT_SELECTOR);
-	return !!interactive && interactive !== currentTarget && currentTarget.contains(interactive);
-}
 /** 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, menu: treeMenu, contextMenu: treeContextMenu, onAction: treeOnAction, menuTriggerProps, menuProps, expandOnFolderClick } = 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 } = props;
 	const rowRef = useRef(null);
 	const { rowProps, gridCellProps, expandButtonProps, isPressed } = useTreeItem({ node }, state, rowRef);
 	const isDisabled = state.disabledKeys.has(node.key);
@@ -100,21 +62,6 @@ function TreeNodeInner(props) {
 	const handleCheckboxChange = useEvent(() => {
 		onToggleChecked(String(node.key));
 	});
-	const shouldExpandOnRowClick = !!expandOnFolderClick && !isLeaf && !isDisabled;
-	const handleFolderRowClick = useEvent((e) => {
-		if (e.button !== 0) return;
-		if (isInteractiveDescendant(e.target, e.currentTarget)) 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;
-		if (isInteractiveDescendant(e.target, e.currentTarget)) return;
-		e.stopPropagation();
-	});
 	const handleKeyDown = useEvent((e) => {
 		if (e.key === " " && isRowCheckable && !isDisabled && !data.isCheckboxDisabled) {
 			e.preventDefault();
@@ -128,14 +75,6 @@ function TreeNodeInner(props) {
 			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) => {
@@ -179,19 +118,11 @@ function TreeNodeInner(props) {
 		...virtualStyle
 	}), [node.level, virtualStyle]);
 	const ariaChecked = isRowCheckable ? isIndeterminate ? "mixed" : isChecked ? "true" : "false" : void 0;
-	const baseRowProps = {
+	const finalRowProps = {
 		...mergeProps$1(rowProps, hoverProps),
 		"aria-checked": ariaChecked,
 		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"

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

@@ -1 +1 @@
-{"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  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/**\n * CSS selector matching focusable / activatable descendants that\n * should \"absorb\" a click so the parent row does not also react to\n * it. Used by the `expandOnFolderClick` row click / pointer guards.\n *\n * Covers the standard interactive elements (`button`, `a`, form\n * controls), explicit ARIA roles (`button`, `menuitem`, `checkbox`,\n * `link`, `tab`, `option`, etc.), and react-aria's pressable marker.\n */\nconst INTERACTIVE_DESCENDANT_SELECTOR = [\n  'button',\n  'a[href]',\n  'input',\n  'textarea',\n  'select',\n  '[role=\"button\"]',\n  '[role=\"menuitem\"]',\n  '[role=\"menuitemcheckbox\"]',\n  '[role=\"menuitemradio\"]',\n  '[role=\"checkbox\"]',\n  '[role=\"radio\"]',\n  '[role=\"link\"]',\n  '[role=\"tab\"]',\n  '[role=\"option\"]',\n  '[role=\"switch\"]',\n  '[data-react-aria-pressable]',\n].join(',');\n\n/**\n * Returns `true` when `target` is (or is contained within) an\n * interactive element that lives BETWEEN `target` and `currentTarget`\n * — i.e. something the user clearly intended to click instead of the\n * row itself.\n */\nfunction isInteractiveDescendant(\n  target: EventTarget | null,\n  currentTarget: EventTarget | null,\n): boolean {\n  if (!(target instanceof Element) || !(currentTarget instanceof Element)) {\n    return false;\n  }\n  const interactive = target.closest(INTERACTIVE_DESCENDANT_SELECTOR);\n  return (\n    !!interactive &&\n    interactive !== currentTarget &&\n    currentTarget.contains(interactive)\n  );\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    // If the click originated inside an interactive descendant\n    // (chevron, checkbox, overflow trigger, user-supplied buttons in\n    // `prefix` / `actions`, etc.) DO NOT toggle the row. Most\n    // react-aria buttons stop propagation through `usePress` already,\n    // and the `actions` slot has its own propagation guard, but\n    // user-supplied controls in the `prefix` slot or any non-react-aria\n    // button do not — without this check they would expand/collapse\n    // the row as a side-effect of being clicked, and the chevron\n    // would visibly double-toggle.\n    if (isInteractiveDescendant(e.target, e.currentTarget)) 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  // Typed against the broader `MouseEvent` because both pointer and\n  // mouse handlers route here. React's `PointerEvent<T>` extends\n  // `MouseEvent<T>`, so via parameter contravariance this single\n  // function is assignable to both `PointerEventHandler<T>` and\n  // `MouseEventHandler<T>` slots without any casts.\n  const handleFolderRowPointerEvent = useEvent(\n    (e: ReactMouseEvent<HTMLDivElement>) => {\n      if (e.button !== 0) return;\n      // Skip when the event originated in an interactive descendant\n      // so the descendant's own usePress / press tracking is not\n      // disrupted by the row swallowing pointer propagation.\n      if (isInteractiveDescendant(e.target, e.currentTarget)) 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\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; returns `false` to chain to 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    // Folder activation via keyboard in expandOnFolderClick mode.\n    // Must run BEFORE `useTreeItem`'s onKeyDown so react-aria doesn't\n    // also fire selection on the same keypress.\n    //   - Enter always expands (matches the row-click behavior, even\n    //     when the row is also checkable — Enter is not a checkbox key).\n    //   - Space only expands when the row is NOT checkable; in\n    //     checkable trees Space is reserved for the checkbox toggle\n    //     (handled by the earlier branch).\n    if (\n      shouldExpandOnRowClick &&\n      (e.key === 'Enter' || (e.key === ' ' && !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,\n        onMouseUp: handleFolderRowPointerEvent,\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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"}
+{"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  ReactNode,\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\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  } = 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  // ---- 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 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 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={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/styled.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.132.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
 import { _Item } from "../Item/Item.js";
 import { Action } from "../../actions/Action/Action.js";
 import { tasty } from "@tenphi/tasty";
@@ -8,6 +8,10 @@ import { tasty } from "@tenphi/tasty";
 * Tree root.
 *
 * Renders as `role="treegrid"` (set on `gridProps` from `useTree`).
+* This element is the outer flex layout container; scrolling is
+* delegated to the inner `TreeScrollContainer` so the virtualized
+* sizer (a flex item here would be squashed by `flex-shrink: 1`) is
+* placed inside a normal block formatting context.
 *
 * Tree-wide modifiers (set on `TreeElement` itself):
 * - `has-height` — paired with `--tree-height` on inline `style`
@@ -36,8 +40,6 @@ const TreeElement = tasty({
 			"has-height": "auto"
 		},
 		minHeight: 0,
-		overflow: "auto",
-		scrollbar: "thin",
 		fill: "#clear",
 		color: "#dark",
 		transition: "theme",
@@ -54,6 +56,26 @@ const TreeElement = tasty({
 	}
 });
 /**
+* Inner scroll viewport. Block-level on purpose — placing the
+* virtualizer's sizer (`height: ${totalSize}px`) directly inside the
+* flex `TreeElement` lets `flex-shrink: 1` collapse it, which makes
+* the scroll area visibly grow as `@tanstack/react-virtual`
+* re-measures rows during scroll.
+*/
+const TreeScrollContainer = tasty({
+	qa: "TreeScrollContainer",
+	styles: {
+		display: "block",
+		flexGrow: 1,
+		flexShrink: 1,
+		flexBasis: "auto",
+		width: "0 100% initial",
+		height: "min 0",
+		overflow: "auto",
+		scrollbar: "thin"
+	}
+});
+/**
 * Per-row wrapper carrying `role="row"`, `rowProps` from
 * `useTreeItem`, and the `--tree-level` CSS custom property used by
 * `TreeRowItem` to compute its left padding.
@@ -148,5 +170,5 @@ const TreeNodeToggle = tasty(Action, {
 const TreeNodeTogglePlaceholder = tasty({ styles: TOGGLE_BASE_STYLES });
 
 //#endregion
-export { TreeElement, TreeNodeCheckboxWrapper, TreeNodeRow, TreeNodeToggle, TreeNodeTogglePlaceholder, TreeRowItem };
+export { TreeElement, TreeNodeCheckboxWrapper, TreeNodeRow, TreeNodeToggle, TreeNodeTogglePlaceholder, TreeRowItem, TreeScrollContainer };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","names":["Item"],"sources":["../../../../src/components/content/Tree/styled.ts"],"sourcesContent":["import { Styles, tasty } from '@tenphi/tasty';\n\nimport { Action } from '../../actions/Action/Action';\nimport { Item } from '../Item';\n\n/**\n * Tree root.\n *\n * Renders as `role=\"treegrid\"` (set on `gridProps` from `useTree`).\n *\n * Tree-wide modifiers (set on `TreeElement` itself):\n * - `has-height` — paired with `--tree-height` on inline `style`\n *   when the consumer passes a numeric `height` prop.\n */\nexport const TreeElement = tasty({\n  qa: 'Tree',\n  styles: {\n    display: 'flex',\n    flow: 'column',\n    width: '100%',\n    height: { '': 'auto', 'has-height': 'fixed $tree-height' },\n    flexGrow: { '': 1, 'has-height': 0 },\n    flexShrink: { '': 1, 'has-height': 0 },\n    flexBasis: { '': 0, 'has-height': 'auto' },\n    minHeight: 0,\n    overflow: 'auto',\n    scrollbar: 'thin',\n    fill: '#clear',\n    color: '#dark',\n    transition: 'theme',\n    outline: 0,\n    padding: 0,\n    radius: { '': 0, 'shape=card': '1cr' },\n    border: { '': 0, 'shape=card': true },\n  },\n});\n\n/**\n * Per-row wrapper carrying `role=\"row\"`, `rowProps` from\n * `useTreeItem`, and the `--tree-level` CSS custom property used by\n * `TreeRowItem` to compute its left padding.\n *\n * Has no visual styles of its own — the row's appearance lives on\n * the inner `TreeRowItem` (which extends `Item`).\n */\nexport const TreeNodeRow = tasty({\n  qa: 'TreeRow',\n  styles: {\n    display: 'block',\n    outline: 0,\n  },\n});\n\n/**\n * The visible row: an `Item` extension that owns layout (full-width,\n * tree indent) only. Color treatment is delegated to the\n * `default.item` variant (see `DEFAULT_ITEM_STYLES` in\n * `data/item-themes.ts`) so the Tree row matches the canonical Item\n * look out of the box. `hovered` / `focused` / `pressed` mods are\n * propagated from `TreeNode` because react-aria's treegrid uses a\n * roving-tabindex \"virtual focus\" model and never sets those data\n * attributes itself.\n */\nexport const TreeRowItem = tasty(Item, {\n  qa: 'TreeItem',\n  type: 'item',\n  size: 'medium',\n  as: 'div',\n  styles: {\n    /**\n     * `Item` is `inline-grid` by default, which leaves baseline\n     * descender space below the row inside the block-level\n     * `TreeNodeRow` and visually inflates the gap between rows\n     * past the intended `1bw`. Force block-level grid here.\n     */\n    display: 'grid',\n    width: '100%',\n    /**\n     * Per-level indent. `$tree-indent` is a local token that reads\n     * `--tree-level` (set inline on the parent `TreeNodeRow`) with a\n     * `0` fallback. Using `padding` shorthand (instead of\n     * `paddingInlineStart`) so it overrides `Item`'s default\n     * `padding: 0` reliably — a longhand override on a shorthand\n     * loses to it in the cascade when both are emitted from the same\n     * declaration block.\n     */\n    padding: 'left ($tree-indent * 1.5x)',\n    '$tree-indent': '($tree-level, 0)',\n    cursor: {\n      '': 'pointer',\n      disabled: 'not-allowed',\n    },\n  },\n});\n\n/**\n * Wraps the checkbox sitting in `Item`'s `prefix` slot. `Item`'s\n * built-in Prefix padding collapses to `0` whenever there's an icon\n * (which is always true for tree rows because the toggle/placeholder\n * occupies the icon slot). We re-introduce a small inline gap on\n * both sides so the checkbox isn't flush against the chevron and the\n * title.\n */\nexport const TreeNodeCheckboxWrapper = tasty({\n  qa: 'TreeNodeCheckboxWrapper',\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    placeContent: 'center',\n    padding: '0 1x',\n  },\n});\n\nconst TOGGLE_BASE_STYLES: Styles = {\n  display: 'grid',\n  placeItems: 'center',\n  placeContent: 'center',\n  width: '3x',\n  height: '3x',\n  radius: true,\n  transition: 'theme',\n};\n\n/**\n * Chevron toggle button placed in `Item`'s `icon` slot. Spreads\n * `expandButtonProps` from `useTreeItem` (an AriaButtonProps) and\n * stops the press from bubbling to the row's selection handler via\n * React Aria's PressResponder.\n */\nexport const TreeNodeToggle = tasty(Action, {\n  qa: 'TreeNodeToggle',\n  styles: {\n    ...TOGGLE_BASE_STYLES,\n    color: { '': '#dark-02', ':hover': '#dark' },\n    fill: { '': '#clear', ':hover': '#dark.04' },\n  },\n});\n\n/**\n * Non-interactive placeholder that occupies the same footprint as\n * `TreeNodeToggle` so leaf rows visually align with siblings that\n * have a chevron.\n */\nexport const TreeNodeTogglePlaceholder = tasty({\n  styles: TOGGLE_BASE_STYLES,\n});\n"],"mappings":";;;;;;;;;;;;;;;AAcA,MAAa,cAAc,MAAM;CAC/B,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,MAAM;EACN,OAAO;EACP,QAAQ;GAAE,IAAI;GAAQ,cAAc;GAAsB;EAC1D,UAAU;GAAE,IAAI;GAAG,cAAc;GAAG;EACpC,YAAY;GAAE,IAAI;GAAG,cAAc;GAAG;EACtC,WAAW;GAAE,IAAI;GAAG,cAAc;GAAQ;EAC1C,WAAW;EACX,UAAU;EACV,WAAW;EACX,MAAM;EACN,OAAO;EACP,YAAY;EACZ,SAAS;EACT,SAAS;EACT,QAAQ;GAAE,IAAI;GAAG,cAAc;GAAO;EACtC,QAAQ;GAAE,IAAI;GAAG,cAAc;GAAM;EACtC;CACF,CAAC;;;;;;;;;AAUF,MAAa,cAAc,MAAM;CAC/B,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,SAAS;EACV;CACF,CAAC;;;;;;;;;;;AAYF,MAAa,cAAc,MAAMA,OAAM;CACrC,IAAI;CACJ,MAAM;CACN,MAAM;CACN,IAAI;CACJ,QAAQ;EAON,SAAS;EACT,OAAO;EAUP,SAAS;EACT,gBAAgB;EAChB,QAAQ;GACN,IAAI;GACJ,UAAU;GACX;EACF;CACF,CAAC;;;;;;;;;AAUF,MAAa,0BAA0B,MAAM;CAC3C,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,cAAc;EACd,SAAS;EACV;CACF,CAAC;AAEF,MAAM,qBAA6B;CACjC,SAAS;CACT,YAAY;CACZ,cAAc;CACd,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,YAAY;CACb;;;;;;;AAQD,MAAa,iBAAiB,MAAM,QAAQ;CAC1C,IAAI;CACJ,QAAQ;EACN,GAAG;EACH,OAAO;GAAE,IAAI;GAAY,UAAU;GAAS;EAC5C,MAAM;GAAE,IAAI;GAAU,UAAU;GAAY;EAC7C;CACF,CAAC;;;;;;AAOF,MAAa,4BAA4B,MAAM,EAC7C,QAAQ,oBACT,CAAC"}
+{"version":3,"file":"styled.js","names":["Item"],"sources":["../../../../src/components/content/Tree/styled.ts"],"sourcesContent":["import { Styles, tasty } from '@tenphi/tasty';\n\nimport { Action } from '../../actions/Action/Action';\nimport { Item } from '../Item';\n\n/**\n * Tree root.\n *\n * Renders as `role=\"treegrid\"` (set on `gridProps` from `useTree`).\n * This element is the outer flex layout container; scrolling is\n * delegated to the inner `TreeScrollContainer` so the virtualized\n * sizer (a flex item here would be squashed by `flex-shrink: 1`) is\n * placed inside a normal block formatting context.\n *\n * Tree-wide modifiers (set on `TreeElement` itself):\n * - `has-height` — paired with `--tree-height` on inline `style`\n *   when the consumer passes a numeric `height` prop.\n */\nexport const TreeElement = tasty({\n  qa: 'Tree',\n  styles: {\n    display: 'flex',\n    flow: 'column',\n    width: '100%',\n    height: { '': 'auto', 'has-height': 'fixed $tree-height' },\n    flexGrow: { '': 1, 'has-height': 0 },\n    flexShrink: { '': 1, 'has-height': 0 },\n    flexBasis: { '': 0, 'has-height': 'auto' },\n    minHeight: 0,\n    fill: '#clear',\n    color: '#dark',\n    transition: 'theme',\n    outline: 0,\n    padding: 0,\n    radius: { '': 0, 'shape=card': '1cr' },\n    border: { '': 0, 'shape=card': true },\n  },\n});\n\n/**\n * Inner scroll viewport. Block-level on purpose — placing the\n * virtualizer's sizer (`height: ${totalSize}px`) directly inside the\n * flex `TreeElement` lets `flex-shrink: 1` collapse it, which makes\n * the scroll area visibly grow as `@tanstack/react-virtual`\n * re-measures rows during scroll.\n */\nexport const TreeScrollContainer = tasty({\n  qa: 'TreeScrollContainer',\n  styles: {\n    display: 'block',\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: 'auto',\n    width: '0 100% initial',\n    height: 'min 0',\n    overflow: 'auto',\n    scrollbar: 'thin',\n  },\n});\n\n/**\n * Per-row wrapper carrying `role=\"row\"`, `rowProps` from\n * `useTreeItem`, and the `--tree-level` CSS custom property used by\n * `TreeRowItem` to compute its left padding.\n *\n * Has no visual styles of its own — the row's appearance lives on\n * the inner `TreeRowItem` (which extends `Item`).\n */\nexport const TreeNodeRow = tasty({\n  qa: 'TreeRow',\n  styles: {\n    display: 'block',\n    outline: 0,\n  },\n});\n\n/**\n * The visible row: an `Item` extension that owns layout (full-width,\n * tree indent) only. Color treatment is delegated to the\n * `default.item` variant (see `DEFAULT_ITEM_STYLES` in\n * `data/item-themes.ts`) so the Tree row matches the canonical Item\n * look out of the box. `hovered` / `focused` / `pressed` mods are\n * propagated from `TreeNode` because react-aria's treegrid uses a\n * roving-tabindex \"virtual focus\" model and never sets those data\n * attributes itself.\n */\nexport const TreeRowItem = tasty(Item, {\n  qa: 'TreeItem',\n  type: 'item',\n  size: 'medium',\n  as: 'div',\n  styles: {\n    /**\n     * `Item` is `inline-grid` by default, which leaves baseline\n     * descender space below the row inside the block-level\n     * `TreeNodeRow` and visually inflates the gap between rows\n     * past the intended `1bw`. Force block-level grid here.\n     */\n    display: 'grid',\n    width: '100%',\n    /**\n     * Per-level indent. `$tree-indent` is a local token that reads\n     * `--tree-level` (set inline on the parent `TreeNodeRow`) with a\n     * `0` fallback. Using `padding` shorthand (instead of\n     * `paddingInlineStart`) so it overrides `Item`'s default\n     * `padding: 0` reliably — a longhand override on a shorthand\n     * loses to it in the cascade when both are emitted from the same\n     * declaration block.\n     */\n    padding: 'left ($tree-indent * 1.5x)',\n    '$tree-indent': '($tree-level, 0)',\n    cursor: {\n      '': 'pointer',\n      disabled: 'not-allowed',\n    },\n  },\n});\n\n/**\n * Wraps the checkbox sitting in `Item`'s `prefix` slot. `Item`'s\n * built-in Prefix padding collapses to `0` whenever there's an icon\n * (which is always true for tree rows because the toggle/placeholder\n * occupies the icon slot). We re-introduce a small inline gap on\n * both sides so the checkbox isn't flush against the chevron and the\n * title.\n */\nexport const TreeNodeCheckboxWrapper = tasty({\n  qa: 'TreeNodeCheckboxWrapper',\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    placeContent: 'center',\n    padding: '0 1x',\n  },\n});\n\nconst TOGGLE_BASE_STYLES: Styles = {\n  display: 'grid',\n  placeItems: 'center',\n  placeContent: 'center',\n  width: '3x',\n  height: '3x',\n  radius: true,\n  transition: 'theme',\n};\n\n/**\n * Chevron toggle button placed in `Item`'s `icon` slot. Spreads\n * `expandButtonProps` from `useTreeItem` (an AriaButtonProps) and\n * stops the press from bubbling to the row's selection handler via\n * React Aria's PressResponder.\n */\nexport const TreeNodeToggle = tasty(Action, {\n  qa: 'TreeNodeToggle',\n  styles: {\n    ...TOGGLE_BASE_STYLES,\n    color: { '': '#dark-02', ':hover': '#dark' },\n    fill: { '': '#clear', ':hover': '#dark.04' },\n  },\n});\n\n/**\n * Non-interactive placeholder that occupies the same footprint as\n * `TreeNodeToggle` so leaf rows visually align with siblings that\n * have a chevron.\n */\nexport const TreeNodeTogglePlaceholder = tasty({\n  styles: TOGGLE_BASE_STYLES,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA,MAAa,cAAc,MAAM;CAC/B,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,MAAM;EACN,OAAO;EACP,QAAQ;GAAE,IAAI;GAAQ,cAAc;GAAsB;EAC1D,UAAU;GAAE,IAAI;GAAG,cAAc;GAAG;EACpC,YAAY;GAAE,IAAI;GAAG,cAAc;GAAG;EACtC,WAAW;GAAE,IAAI;GAAG,cAAc;GAAQ;EAC1C,WAAW;EACX,MAAM;EACN,OAAO;EACP,YAAY;EACZ,SAAS;EACT,SAAS;EACT,QAAQ;GAAE,IAAI;GAAG,cAAc;GAAO;EACtC,QAAQ;GAAE,IAAI;GAAG,cAAc;GAAM;EACtC;CACF,CAAC;;;;;;;;AASF,MAAa,sBAAsB,MAAM;CACvC,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,UAAU;EACV,YAAY;EACZ,WAAW;EACX,OAAO;EACP,QAAQ;EACR,UAAU;EACV,WAAW;EACZ;CACF,CAAC;;;;;;;;;AAUF,MAAa,cAAc,MAAM;CAC/B,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,SAAS;EACV;CACF,CAAC;;;;;;;;;;;AAYF,MAAa,cAAc,MAAMA,OAAM;CACrC,IAAI;CACJ,MAAM;CACN,MAAM;CACN,IAAI;CACJ,QAAQ;EAON,SAAS;EACT,OAAO;EAUP,SAAS;EACT,gBAAgB;EAChB,QAAQ;GACN,IAAI;GACJ,UAAU;GACX;EACF;CACF,CAAC;;;;;;;;;AAUF,MAAa,0BAA0B,MAAM;CAC3C,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,cAAc;EACd,SAAS;EACV;CACF,CAAC;AAEF,MAAM,qBAA6B;CACjC,SAAS;CACT,YAAY;CACZ,cAAc;CACd,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,YAAY;CACb;;;;;;;AAQD,MAAa,iBAAiB,MAAM,QAAQ;CAC1C,IAAI;CACJ,QAAQ;EACN,GAAG;EACH,OAAO;GAAE,IAAI;GAAY,UAAU;GAAS;EAC5C,MAAM;GAAE,IAAI;GAAU,UAAU;GAAY;EAC7C;CACF,CAAC;;;;;;AAOF,MAAa,4BAA4B,MAAM,EAC7C,QAAQ,oBACT,CAAC"}

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

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

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

@@ -206,23 +206,6 @@ interface CubeTreeProps extends BaseProps, OuterStyleProps {
   ariaLabel?: string;
   /** QA selector. */
   qa?: string;
-  /**
-   * When `true`, activating a non-leaf row toggles its expansion
-   * instead of selecting it. Useful for file-tree UX where only
-   * leaves are selectable. Folder rows remain focusable for keyboard
-   * navigation, and the chevron toggle keeps working independently.
-   *
-   * Activation rules for folder rows:
-   *   - Mouse click → expand / collapse.
-   *   - `Enter` → expand / collapse (always, including in `isCheckable`
-   *     trees — `Enter` is not a checkbox key).
-   *   - `Space` → expand / collapse in non-checkable trees; in
-   *     `isCheckable` trees `Space` toggles the row's checkbox instead.
-   *
-   * Leaf rows are unaffected and continue to select normally.
-   * @default false
-   */
-  expandOnFolderClick?: boolean;
   /**
    * Per-tree default menu items (Menu.Item children) shown on every
    * row that doesn't override via `data.menu`.

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.132.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useMemo, useState } from "react";
 

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.132.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useRef, useState } from "react";
 

package/dist/components/content/highlightText.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.132.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
 import { _Text } from "./Text.js";
 import { jsx } from "react/jsx-runtime";
 

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.132.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
 import { TooltipProvider } from "../overlays/Tooltip/TooltipProvider.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/Checkbox/Checkbox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.132.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { _Text } from "../../content/Text.js";

package/dist/components/fields/Checkbox/CheckboxGroup.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.132.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";

package/dist/components/fields/Checkbox/context.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.132.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
 import { createContext } from "react";
 
 //#region src/components/fields/Checkbox/context.ts

package/dist/components/fields/ComboBox/ComboBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.132.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";

package/dist/components/fields/DatePicker/DateInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.132.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";

package/dist/components/fields/DatePicker/DateInputBase.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.132.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { InvalidIcon } from "../../shared/InvalidIcon.js";

package/dist/components/fields/DatePicker/DatePicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.132.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";

package/dist/components/fields/DatePicker/DatePickerButton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.132.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { CalendarIcon } from "../../../icons/CalendarIcon.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/fields/DatePicker/DatePickerElement.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.132.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
 import { Space } from "../../layout/Space.js";
 import { tasty } from "@tenphi/tasty";
 

package/dist/components/fields/DatePicker/DatePickerInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.132.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { DatePickerSegment } from "./DatePickerSegment.js";
 import { formatSegments } from "./utils.js";

package/dist/components/fields/DatePicker/DatePickerSegment.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.132.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/DatePicker/DateRangePicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.132.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";

package/dist/components/fields/DatePicker/DateRangeSeparatedPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.132.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";

package/dist/components/fields/DatePicker/TimeInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.132.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";

package/dist/components/fields/DatePicker/intl.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.132.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
 //#region src/components/fields/DatePicker/intl.ts
 const dateMessages = {
 	time: "Time",

package/dist/components/fields/DatePicker/parseDate.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.132.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
 import { parseAbsolute } from "@internationalized/date";
 
 //#region src/components/fields/DatePicker/parseDate.ts

package/dist/components/fields/DatePicker/props.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.132.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
 //#region src/components/fields/DatePicker/props.ts
 const DEFAULT_DATE_PROPS = {
 	granularity: "day",

package/dist/components/fields/DatePicker/utils.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.132.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
 import { useImperativeHandle, useRef } from "react";
 import { createDOMRef } from "@react-spectrum/utils";
 import { createFocusManager } from "@react-aria/focus";

package/dist/components/fields/FileInput/FileInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.132.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useProviderProps } from "../../../provider.js";

package/dist/components/fields/FilterListBox/FilterListBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.132.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
@@ -92,7 +92,7 @@ const FilterListBox = forwardRef(function FilterListBox(props, ref) {
 		};
 		return fieldProps;
 	} });
-	let { qa, label, extra, id, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, isLoading, isLoadingItems, searchPlaceholder = "Search...", autoFocus, filter, mods: externalMods, emptyLabel, searchInputStyles, listStyles, optionStyles, sectionStyles, headingStyles, searchInputRef, listRef, message, description, styles, focusOnHover, shouldFocusWrap, labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, onSelectionChange: externalOnSelectionChange, allowsCustomValue = false, showSelectAll, selectAllLabel, header, footer, size = "medium", headerStyles, footerStyles, listBoxStyles, items, children: renderChildren, onEscape, isCheckable, onOptionClick, selectionMode = "single", allValueProps, customValueProps, newCustomValueProps, searchValue: controlledSearchValue, onSearchChange, _internalCollection, form, ...otherProps } = props;
+	let { qa, label, extra, id, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, isLoading, isLoadingItems, searchPlaceholder = "Search...", autoFocus, filter, mods: externalMods, emptyLabel, searchInputStyles, listStyles, optionStyles, sectionStyles, headingStyles, searchInputRef, listRef, message, description, styles, focusOnHover, shouldFocusWrap, labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, onSelectionChange: externalOnSelectionChange, allowsCustomValue = false, showSelectAll, selectAllLabel, header, footer, size = "medium", headerStyles, footerStyles, listBoxStyles, items, children: renderChildren, onEscape, isCheckable, onOptionClick, selectionMode = "single", allValueProps, customValueProps, newCustomValueProps, searchValue: controlledSearchValue, onSearchChange, _internalCollection, isReorderable = false, onReorder, form, ...otherProps } = props;
 	let children = renderChildren;
 	const renderFn = renderChildren;
 	if (items && typeof renderFn === "function") try {
@@ -516,7 +516,7 @@ const FilterListBox = forwardRef(function FilterListBox(props, ref) {
 				disallowEmptySelection: props.disallowEmptySelection,
 				disabledKeys: props.disabledKeys,
 				focusOnHover,
-				shouldUseVirtualFocus: true,
+				shouldUseVirtualFocus: !(isReorderable && !searchValue.trim()),
 				showSelectAll,
 				selectAllLabel,
 				footer,
@@ -529,6 +529,8 @@ const FilterListBox = forwardRef(function FilterListBox(props, ref) {
 				allValueProps,
 				filter: filterFn,
 				emptyLabel: emptyLabel !== void 0 ? emptyLabel : searchValue.trim() ? "No results found" : "No items",
+				isReorderable: isReorderable && !searchValue.trim(),
+				onReorder,
 				onSelectionChange: handleSelectionChange,
 				onEscape,
 				onOptionClick: handleOptionClick,