@cube-dev/ui-kit 0.145.4 → 0.146.1

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

@@ -1,9 +1,10 @@
-/** @license MIT | @cube-dev/ui-kit v0.145.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.146.1 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { LoadingIcon } from "../../../icons/LoadingIcon.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
+import { useI18n } from "../../../i18n/useI18n.js";
 import { DirectionIcon } from "../../../icons/DirectionIcon.js";
 import { MoreIcon } from "../../../icons/MoreIcon.js";
 import { _MenuTrigger } from "../../actions/Menu/MenuTrigger.js";
@@ -25,6 +26,7 @@ function isMenuEmpty(menu) {
 	return Children.toArray(menu).length === 0;
 }
 function TreeNodeInner(props) {
+	const { t } = useI18n();
 	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);
@@ -159,7 +161,7 @@ function TreeNodeInner(props) {
 		children: [/* @__PURE__ */ jsx(ItemAction, {
 			tabIndex: -1,
 			icon: /* @__PURE__ */ jsx(MoreIcon, {}),
-			"aria-label": "Actions",
+			"aria-label": t("tree.actions", "Actions"),
 			...menuTriggerProps
 		}), /* @__PURE__ */ jsx(__Menu, {
 			...menuProps,

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,\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  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 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={handleWrapperClick}\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 { useI18n } from '../../../i18n';\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,\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 { 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  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  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 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={handleWrapperClick}\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={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.145.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.146.1 | 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.145.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.146.1 | 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.145.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.146.1 | 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.145.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.146.1 | 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.145.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.146.1 | 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.145.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.146.1 | 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.145.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.146.1 | 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.145.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.146.1 | 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.145.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.146.1 | 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.145.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.146.1 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
@@ -8,6 +8,7 @@ import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";
 import { LoadingIcon } from "../../../icons/LoadingIcon.js";
 import { useProviderProps } from "../../../provider.js";
 import { _CollectionItem } from "../../CollectionItem.js";
+import { useI18n } from "../../../i18n/useI18n.js";
 import { CloseIcon } from "../../../icons/CloseIcon.js";
 import { DirectionIcon } from "../../../icons/DirectionIcon.js";
 import { generateRandomId } from "../../../utils/random.js";
@@ -194,6 +195,7 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 			}
 		};
 	} });
+	const { t } = useI18n();
 	let { qa, label, extra, labelStyles, isRequired, necessityIndicator, validationState, id, icon, prefix, isDisabled, autoFocus, autoComplete = "off", wrapperRef, inputRef, triggerRef, popoverRef, listBoxRef, isLoading, inputStyles, optionStyles, triggerStyles, listBoxStyles, overlayStyles, suffix, hideTrigger, message, description, size = "medium", direction = "bottom", shouldFlip = true, popoverTrigger = "input", suffixPosition = "before", filter, styles, labelSuffix, selectedKey, defaultSelectedKey, inputValue, defaultInputValue, onInputChange, isClearable, onClear, placeholder, allowsCustomValue, shouldCommitOnBlur = true, clearOnBlur, items, children: renderChildren, sectionStyles, headingStyles, isReadOnly, overlayOffset = 8, containerPadding = 8, onSelectionChange: externalOnSelectionChange, sortSelectedToTop: sortSelectedToTopProp, onOpenChange, onFocus, onBlur, onKeyDown, form, ...otherProps } = props;
 	const comboBoxId = useMemo(() => generateRandomId(), []);
 	wrapperRef = useCombinedRefs(wrapperRef);
@@ -613,7 +615,7 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 						theme: validationState === "invalid" ? "danger" : void 0,
 						qa: "ComboBoxClearButton",
 						"data-no-trigger": hideTrigger ? "" : void 0,
-						"aria-label": "Clear value",
+						"aria-label": t("comboBox.clearValue", "Clear value"),
 						onPress: clearValue
 					}),
 					!hideTrigger ? /* @__PURE__ */ jsx(_CollectionItem.Action, {
@@ -631,7 +633,7 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 						styles: triggerStyles,
 						"aria-expanded": isPopoverOpen,
 						"aria-haspopup": "listbox",
-						"aria-label": "Show options",
+						"aria-label": t("comboBox.showOptions", "Show options"),
 						onPress: () => {
 							if (!isDisabled) {
 								const willOpen = !isPopoverOpen;

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","names":["useFocus","Item","BaseSection"],"sources":["../../../../src/components/fields/ComboBox/ComboBox.tsx"],"sourcesContent":["import { FocusableRef, Key } from '@react-types/shared';\nimport {\n  BASE_STYLES,\n  BasePropsWithoutChildren,\n  BaseStyleProps,\n  COLOR_STYLES,\n  ColorStyleProps,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport React, {\n  cloneElement,\n  ForwardedRef,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useFilter, useKeyboard } from 'react-aria';\nimport { Section as BaseSection, useListState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal';\nimport { CloseIcon, DirectionIcon, LoadingIcon } from '../../../icons';\nimport { useProviderProps } from '../../../provider';\nimport { FieldBaseProps } from '../../../shared';\nimport { generateRandomId } from '../../../utils/random';\nimport { useCombinedRefs, useLayoutEffect } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { usePopoverSync } from '../../../utils/react/usePopoverSync';\nimport { extractStyles } from '../../../utils/styles';\nimport { CollectionItem as Item } from '../../CollectionItem';\nimport { useFieldProps, useFormProps, wrapWithField } from '../../form';\nimport { InvalidIcon } from '../../shared/InvalidIcon';\nimport { ValidIcon } from '../../shared/ValidIcon';\nimport {\n  filterCollectionNodes,\n  getEdgeVisibleKey,\n  getNextVisibleKey,\n  ListBoxPopover,\n  markKeyboardFocus,\n  useCompositeFocus,\n} from '../ListBoxPopover';\nimport {\n  DEFAULT_INPUT_STYLES,\n  INPUT_WRAPPER_STYLES,\n} from '../TextInput/TextInputBase';\n\ntype FilterFn = (textValue: string, inputValue: string) => boolean;\n\nexport type PopoverTriggerAction = 'focus' | 'input' | 'manual';\n\nconst ComboBoxWrapperElement = tasty({\n  qa: 'ComboBoxWrapper',\n  styles: INPUT_WRAPPER_STYLES,\n});\n\nconst InputElement = tasty({\n  as: 'input',\n  styles: DEFAULT_INPUT_STYLES,\n});\n\nexport interface CubeComboBoxProps<T>\n  extends BasePropsWithoutChildren,\n    BaseStyleProps,\n    OuterStyleProps,\n    ColorStyleProps,\n    FieldBaseProps {\n  /** The selected key in controlled mode */\n  selectedKey?: string | null;\n  /** The default selected key in uncontrolled mode */\n  defaultSelectedKey?: string | null;\n  /** Callback fired when selection changes */\n  onSelectionChange?: (key: string | null) => void;\n\n  /** The input value in controlled mode */\n  inputValue?: string;\n  /** The default input value in uncontrolled mode */\n  defaultInputValue?: string;\n  /** Callback fired when input value changes */\n  onInputChange?: (value: string) => void;\n  /** Placeholder text for the input */\n  placeholder?: string;\n  /** Whether the input should have autofocus */\n  autoFocus?: boolean;\n  /** HTML autocomplete attribute for the input */\n  autoComplete?: string;\n  /** Callback fired when focus enters the component (input, trigger, or popover). Does not receive event object. */\n  onFocus?: () => void;\n  /** Callback fired when focus leaves the component entirely. Does not receive event object. */\n  onBlur?: () => void;\n  /** Callback fired when a key is pressed on the input */\n  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n\n  /** Popover trigger behavior: 'focus', 'input', or 'manual'. Defaults to 'input' */\n  popoverTrigger?: PopoverTriggerAction;\n\n  /** Items for the listbox (alternative to children) */\n  items?: Iterable<T>;\n  /** Children for the listbox (static items or render function) */\n  children?: ReactNode | ((item: T) => ReactElement);\n\n  /**\n   * Custom filter function for determining if an option should be included.\n   * Pass `false` to disable internal filtering completely.\n   */\n  filter?: FilterFn | false;\n\n  /** Whether to allow entering custom values that are not in the predefined options */\n  allowsCustomValue?: boolean;\n  /** Whether to commit custom value on blur in allowsCustomValue mode (default: true) */\n  shouldCommitOnBlur?: boolean;\n  /** Whether to clear selection and input on blur (default: false, only applies to non-custom-value mode) */\n  clearOnBlur?: boolean;\n  /** Whether the combobox is clearable using ESC key or clear button */\n  isClearable?: boolean;\n  /** Callback called when the clear button is pressed */\n  onClear?: () => void;\n\n  /** Left input icon */\n  icon?: ReactElement;\n  /** Input decoration before the main input */\n  prefix?: ReactNode;\n  /** Input decoration after the main input */\n  suffix?: ReactNode;\n  /** Whether to hide the trigger button */\n  hideTrigger?: boolean;\n  /** Size of the combobox */\n  size?: 'small' | 'medium' | 'large' | (string & {});\n\n  /** Ref for accessing the input element */\n  inputRef?: RefObject<HTMLInputElement>;\n  /** Ref for accessing the wrapper element */\n  wrapperRef?: RefObject<HTMLDivElement>;\n  /** Ref for accessing the listbox element */\n  listBoxRef?: RefObject<HTMLDivElement>;\n  /** Ref for accessing the popover element */\n  popoverRef?: RefObject<HTMLDivElement>;\n  /** Ref for accessing the trigger button element */\n  triggerRef?: FocusableRef<HTMLButtonElement>;\n\n  /** Custom styles for the input */\n  inputStyles?: Styles;\n  /** Custom styles for the trigger button */\n  triggerStyles?: Styles;\n  /** Custom styles for the listbox */\n  listBoxStyles?: Styles;\n  /** Custom styles for the popover overlay */\n  overlayStyles?: Styles;\n  /** Custom styles for individual options */\n  optionStyles?: Styles;\n  /** Custom styles for sections */\n  sectionStyles?: Styles;\n  /** Custom styles for section headings */\n  headingStyles?: Styles;\n\n  /** Whether the combobox is disabled */\n  isDisabled?: boolean;\n  /** Whether the combobox is in loading state */\n  isLoading?: boolean;\n  /** Validation state of the combobox */\n  validationState?: 'valid' | 'invalid';\n  /** Keys of disabled items */\n  disabledKeys?: Iterable<Key>;\n  /** Whether to flip the popover placement */\n  shouldFlip?: boolean;\n  /** Placement direction for the popover */\n  direction?: 'bottom' | 'top';\n  /** Offset for the popover */\n  overlayOffset?: number;\n  /** Minimum padding in pixels between the popover and viewport edges */\n  containerPadding?: number;\n  /** Whether the combobox is read-only */\n  isReadOnly?: boolean;\n  /** Suffix position goes before or after the validation and loading statuses */\n  suffixPosition?: 'before' | 'after';\n  /**\n   * Sort selected item to the top when the popover opens.\n   * Only works when using the `items` prop (data-driven mode).\n   * Ignored when using JSX children.\n   * @default true when items are provided, false when using JSX children\n   */\n  sortSelectedToTop?: boolean;\n  /** Callback called when the popover open state changes */\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\nconst PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];\n\n// ============================================================================\n// Hook: useComboBoxState\n// ============================================================================\ninterface UseComboBoxStateProps {\n  selectedKey?: string | null;\n  defaultSelectedKey?: string | null;\n  inputValue?: string;\n  defaultInputValue?: string;\n  comboBoxId: string;\n  triggerRef?: RefObject<HTMLElement | null>;\n  popoverRef?: RefObject<HTMLElement | null>;\n}\n\ninterface UseComboBoxStateReturn {\n  effectiveSelectedKey: Key | null;\n  effectiveInputValue: string;\n  isPopoverOpen: boolean;\n  setIsPopoverOpen: (open: boolean) => void;\n  setInternalSelectedKey: (key: Key | null) => void;\n  setInternalInputValue: (value: string) => void;\n  isControlledKey: boolean;\n  isControlledInput: boolean;\n}\n\nfunction useComboBoxState({\n  selectedKey,\n  defaultSelectedKey,\n  inputValue,\n  defaultInputValue,\n  comboBoxId,\n  triggerRef,\n  popoverRef,\n}: UseComboBoxStateProps): UseComboBoxStateReturn {\n  // Internal state for uncontrolled mode\n  const [internalSelectedKey, setInternalSelectedKey] = useState<Key | null>(\n    defaultSelectedKey ?? null,\n  );\n  const [internalInputValue, setInternalInputValue] = useState(\n    defaultInputValue ?? '',\n  );\n\n  const isControlledKey = selectedKey !== undefined;\n  const isControlledInput = inputValue !== undefined;\n\n  const effectiveSelectedKey = isControlledKey\n    ? selectedKey\n    : internalSelectedKey;\n  const effectiveInputValue = isControlledInput\n    ? inputValue\n    : internalInputValue;\n\n  // Popover state\n  const [isPopoverOpen, setIsPopoverOpen] = useState(false);\n\n  usePopoverSync({\n    menuId: comboBoxId,\n    isOpen: isPopoverOpen,\n    onClose: () => setIsPopoverOpen(false),\n    triggerRef,\n    containerRef: popoverRef,\n  });\n\n  return {\n    effectiveSelectedKey,\n    effectiveInputValue,\n    isPopoverOpen,\n    setIsPopoverOpen,\n    setInternalSelectedKey,\n    setInternalInputValue,\n    isControlledKey,\n    isControlledInput,\n  };\n}\n\n// ============================================================================\n// Hook: useComboBoxFiltering\n// ============================================================================\ninterface UseComboBoxFilteringProps {\n  effectiveInputValue: string;\n  filter: FilterFn | false | undefined;\n}\n\ninterface UseComboBoxFilteringReturn {\n  filterFn: (nodes: Iterable<any>) => Iterable<any>;\n  isFilterActive: boolean;\n  setIsFilterActive: (active: boolean) => void;\n}\n\nfunction useComboBoxFiltering({\n  effectiveInputValue,\n  filter,\n}: UseComboBoxFilteringProps): UseComboBoxFilteringReturn {\n  const [isFilterActive, setIsFilterActive] = useState(false);\n\n  const { contains } = useFilter({ sensitivity: 'base' });\n\n  const textFilterFn = useMemo<FilterFn>(\n    () => (filter === false ? () => true : filter || contains),\n    [filter, contains],\n  );\n\n  // Create a filter function for collection nodes\n  const filterFn = useCallback(\n    (nodes: Iterable<any>) => {\n      const term = effectiveInputValue.trim();\n\n      // Don't filter if not active or no search term\n      if (!isFilterActive || !term) {\n        return nodes;\n      }\n\n      return filterCollectionNodes(nodes, term, textFilterFn);\n    },\n    [isFilterActive, effectiveInputValue, textFilterFn],\n  );\n\n  return {\n    filterFn,\n    isFilterActive,\n    setIsFilterActive,\n  };\n}\n\n// ============================================================================\n// Hook: useComboBoxKeyboard\n// ============================================================================\ninterface UseComboBoxKeyboardProps {\n  isPopoverOpen: boolean;\n  listStateRef: RefObject<any>;\n  hasResults: boolean;\n  allowsCustomValue?: boolean;\n  effectiveInputValue: string;\n  isClearable?: boolean;\n  onSelectionChange: (selection: Key | Key[] | null) => void;\n  onClearValue: () => void;\n  onOpenPopover: () => void;\n  onClosePopover: () => void;\n  inputRef: RefObject<HTMLInputElement>;\n  setIsFilterActive: (active: boolean) => void;\n  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n}\n\nfunction useComboBoxKeyboard({\n  isPopoverOpen,\n  listStateRef,\n  hasResults,\n  allowsCustomValue,\n  effectiveInputValue,\n  isClearable,\n  onSelectionChange,\n  onClearValue,\n  onOpenPopover,\n  onClosePopover,\n  inputRef,\n  setIsFilterActive,\n  onKeyDown,\n}: UseComboBoxKeyboardProps) {\n  const { keyboardProps } = useKeyboard({\n    onKeyDown: (e) => {\n      // Call user's handler first\n      onKeyDown?.(e as React.KeyboardEvent<HTMLInputElement>);\n\n      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n        e.preventDefault();\n\n        // Open popover if closed\n        if (!isPopoverOpen) {\n          // If opening with no filtered results, disable filter to show all items\n          if (!hasResults) {\n            setIsFilterActive(false);\n          }\n          onOpenPopover();\n          return;\n        }\n\n        const listState = listStateRef.current;\n        if (!listState) return;\n\n        const isArrowDown = e.key === 'ArrowDown';\n        const nextKey = getNextVisibleKey(listState, isArrowDown ? 1 : -1);\n\n        if (nextKey != null) {\n          markKeyboardFocus(listState);\n          listState.selectionManager.setFocusedKey(nextKey);\n        }\n      } else if (e.key === 'Enter') {\n        // If popover is open, try to select the focused item first\n        if (isPopoverOpen) {\n          const listState = listStateRef.current;\n          if (listState) {\n            const keyToSelect = listState.selectionManager.focusedKey;\n\n            if (keyToSelect != null) {\n              e.preventDefault();\n              listState.selectionManager.select(keyToSelect, e);\n              // Ensure the popover closes even if selection stays the same\n              onClosePopover();\n              inputRef.current?.focus();\n              return;\n            }\n          }\n        }\n\n        // If no results, handle empty input or custom values\n        if (!hasResults) {\n          if (allowsCustomValue) {\n            const value = effectiveInputValue.trim();\n\n            // Commit the custom value\n            onSelectionChange(\n              (value as unknown as Key) ?? (null as unknown as Key),\n            );\n\n            // If popover is closed and we have a value, allow Enter to propagate for form submission\n            // If popover is open OR value is empty, prevent default to avoid premature submission\n            if (isPopoverOpen || !value) {\n              e.preventDefault();\n            }\n          } else {\n            e.preventDefault();\n            onSelectionChange(null);\n          }\n\n          return;\n        }\n\n        // Clear selection if input is empty and popover is closed (or no focused item)\n        const trimmed = (effectiveInputValue || '').trim();\n        if (trimmed === '') {\n          e.preventDefault();\n          onSelectionChange(null);\n          return;\n        }\n      } else if (e.key === 'Escape') {\n        if (isPopoverOpen) {\n          e.preventDefault();\n          onClosePopover();\n          inputRef.current?.focus();\n        } else if (effectiveInputValue && isClearable) {\n          e.preventDefault();\n          onClearValue();\n        }\n      } else if (e.key === 'Home' || e.key === 'End') {\n        if (isPopoverOpen) {\n          e.preventDefault();\n\n          const listState = listStateRef.current;\n          if (!listState) return;\n\n          const targetKey = getEdgeVisibleKey(\n            listState,\n            e.key === 'Home' ? 'first' : 'last',\n          );\n\n          if (targetKey != null) {\n            markKeyboardFocus(listState);\n            listState.selectionManager.setFocusedKey(targetKey);\n          }\n        }\n      }\n    },\n  });\n\n  return { keyboardProps };\n}\n\n// ============================================================================\n// Component: ComboBoxInput\n// ============================================================================\ninterface ComboBoxInputProps {\n  qa?: string;\n  inputRef: RefObject<HTMLInputElement>;\n  id?: string;\n  value: string;\n  placeholder?: string;\n  isDisabled?: boolean;\n  isReadOnly?: boolean;\n  autoFocus?: boolean;\n  autoComplete?: string;\n  size: string;\n  mods: Record<string, any>;\n  inputStyles?: Styles;\n  keyboardProps: any;\n  focusProps: any;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onFocus: (e: React.FocusEvent<HTMLInputElement>) => void;\n  isPopoverOpen: boolean;\n  hasResults: boolean;\n  comboBoxId: string;\n  listStateRef: RefObject<any>;\n}\n\nconst ComboBoxInput = forwardRef<HTMLInputElement, ComboBoxInputProps>(\n  function ComboBoxInput(\n    {\n      qa,\n      inputRef,\n      id,\n      value,\n      placeholder,\n      isDisabled,\n      isReadOnly,\n      autoFocus,\n      autoComplete,\n      size,\n      mods,\n      inputStyles,\n      keyboardProps,\n      focusProps,\n      onChange,\n      onFocus,\n      isPopoverOpen,\n      hasResults,\n      comboBoxId,\n      listStateRef,\n    },\n    ref,\n  ) {\n    const combinedRef = useCombinedRefs(ref, inputRef);\n\n    return (\n      <InputElement\n        ref={combinedRef}\n        qa={qa}\n        id={id}\n        type=\"text\"\n        value={value}\n        placeholder={placeholder}\n        isDisabled={isDisabled}\n        readOnly={isReadOnly}\n        autoFocus={autoFocus}\n        autoComplete={autoComplete}\n        data-autofocus={autoFocus ? '' : undefined}\n        onChange={onChange}\n        onFocus={onFocus}\n        onBlur={focusProps.onBlur}\n        {...keyboardProps}\n        styles={inputStyles}\n        mods={mods}\n        data-size={size}\n        data-input-type=\"combobox\"\n        role=\"combobox\"\n        aria-expanded={isPopoverOpen && hasResults}\n        aria-haspopup=\"listbox\"\n        aria-controls={\n          isPopoverOpen && hasResults\n            ? `ComboBoxListBox-${comboBoxId}`\n            : undefined\n        }\n        aria-activedescendant={\n          isPopoverOpen &&\n          hasResults &&\n          listStateRef.current?.selectionManager.focusedKey != null\n            ? `ListBoxItem-${listStateRef.current?.selectionManager.focusedKey}`\n            : undefined\n        }\n      />\n    );\n  },\n);\n\n// ============================================================================\n// Main Component: ComboBox\n// ============================================================================\nexport const ComboBox = forwardRef(function ComboBox<T extends object>(\n  props: CubeComboBoxProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  props = useFieldProps(props, {\n    valuePropsMapper: ({ value, onChange }) => {\n      return {\n        // Form value maps to selectedKey (the committed value) in both modes\n        selectedKey: value ?? null,\n        onSelectionChange(val: string | null) {\n          // Commit selection changes to the form\n          onChange(val);\n        },\n      };\n    },\n  });\n\n  let {\n    qa,\n    label,\n    extra,\n    labelStyles,\n    isRequired,\n    necessityIndicator,\n    validationState,\n    id,\n    icon,\n    prefix,\n    isDisabled,\n    autoFocus,\n    autoComplete = 'off',\n    wrapperRef,\n    inputRef,\n    triggerRef,\n    popoverRef,\n    listBoxRef,\n    isLoading,\n    inputStyles,\n    optionStyles,\n    triggerStyles,\n    listBoxStyles,\n    overlayStyles,\n    suffix,\n    hideTrigger,\n    message,\n    description,\n    size = 'medium',\n    direction = 'bottom',\n    shouldFlip = true,\n    popoverTrigger = 'input',\n    suffixPosition = 'before',\n    filter,\n    styles,\n    labelSuffix,\n    selectedKey,\n    defaultSelectedKey,\n    inputValue,\n    defaultInputValue,\n    onInputChange,\n    isClearable,\n    onClear,\n    placeholder,\n    allowsCustomValue,\n    shouldCommitOnBlur = true,\n    clearOnBlur,\n    items,\n    children: renderChildren,\n    sectionStyles,\n    headingStyles,\n    isReadOnly,\n    overlayOffset = 8,\n    containerPadding = 8,\n    onSelectionChange: externalOnSelectionChange,\n    sortSelectedToTop: sortSelectedToTopProp,\n    onOpenChange,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    form,\n    ...otherProps\n  } = props;\n\n  // Generate a unique ID for this combobox instance\n  const comboBoxId = useMemo(() => generateRandomId(), []);\n\n  // Hoist the wrapper/popover ref normalization above `useComboBoxState` so\n  // the popover-sync inside it sees stable, attached refs. Other ref combines\n  // happen below alongside the legacy ordering.\n  wrapperRef = useCombinedRefs(wrapperRef);\n  popoverRef = useCombinedRefs(popoverRef);\n\n  // State management hook\n  const {\n    effectiveSelectedKey,\n    effectiveInputValue,\n    isPopoverOpen,\n    setIsPopoverOpen,\n    setInternalSelectedKey,\n    setInternalInputValue,\n    isControlledKey,\n    isControlledInput,\n  } = useComboBoxState({\n    selectedKey,\n    defaultSelectedKey,\n    inputValue,\n    defaultInputValue,\n    comboBoxId,\n    triggerRef: wrapperRef as RefObject<HTMLElement | null>,\n    popoverRef: popoverRef as RefObject<HTMLElement | null>,\n  });\n\n  // Track if sortSelectedToTop was explicitly provided\n  const sortSelectedToTopExplicit = sortSelectedToTopProp !== undefined;\n  // Default to true if items are provided, false otherwise\n  const sortSelectedToTop = sortSelectedToTopProp ?? (items ? true : false);\n\n  // Cache for sorted items array when using `items` prop\n  const cachedItemsOrder = useRef<T[] | null>(null);\n  const selectionWhenClosed = useRef<string | null>(null);\n\n  styles = extractStyles(otherProps, PROP_STYLES, styles);\n\n  ref = useCombinedRefs(ref);\n  inputRef = useCombinedRefs(inputRef);\n  triggerRef = useCombinedRefs(triggerRef);\n  listBoxRef = useCombinedRefs(listBoxRef);\n\n  // Sort items with selected on top if enabled\n  const getSortedItems = useCallback((): typeof items => {\n    if (!items) return items;\n\n    if (!sortSelectedToTop) return items;\n\n    // Reuse cached order if available\n    if (cachedItemsOrder.current) {\n      return cachedItemsOrder.current;\n    }\n\n    // Warn if explicitly requested but not supported\n    if (sortSelectedToTopExplicit && !items) {\n      console.warn(\n        'ComboBox: sortSelectedToTop only works with the items prop. ' +\n          'Sorting will be skipped when using JSX children.',\n      );\n      return items;\n    }\n\n    const selectedKey = isPopoverOpen\n      ? effectiveSelectedKey\n      : selectionWhenClosed.current;\n\n    if (!selectedKey) return items;\n\n    const itemsArray = Array.isArray(items) ? items : Array.from(items);\n    const selectedItem = itemsArray.find((item) => {\n      const key = (item as any)?.key ?? (item as any)?.id;\n      return key != null && String(key) === String(selectedKey);\n    });\n\n    if (!selectedItem) return items;\n\n    const sorted = [\n      selectedItem,\n      ...itemsArray.filter((item) => {\n        const key = (item as any)?.key ?? (item as any)?.id;\n        return key == null || String(key) !== String(selectedKey);\n      }),\n    ] as T[];\n\n    if (isPopoverOpen) {\n      cachedItemsOrder.current = sorted;\n    }\n\n    return sorted;\n  }, [\n    items,\n    sortSelectedToTop,\n    sortSelectedToTopExplicit,\n    effectiveSelectedKey,\n    isPopoverOpen,\n  ]);\n\n  const sortedItems = getSortedItems();\n\n  // Preserve the original `children` (may be a render function) before we\n  // potentially overwrite it.\n  let children: ReactNode = renderChildren as ReactNode;\n\n  const renderFn = renderChildren as unknown;\n\n  if (sortedItems && typeof renderFn === 'function') {\n    try {\n      const itemsArray = Array.from(sortedItems as Iterable<any>);\n      children = itemsArray.map((item, idx) => {\n        const rendered = (renderFn as (it: any) => ReactNode)(item);\n        if (\n          React.isValidElement(rendered) &&\n          (rendered as ReactElement).key == null\n        ) {\n          return React.cloneElement(rendered as ReactElement, {\n            key: (rendered as any)?.key ?? item?.key ?? idx,\n          });\n        }\n\n        return rendered as ReactNode;\n      });\n    } catch {\n      // If conversion fails, proceed with the original children\n    }\n  }\n\n  // Invalidate cached sorting whenever items change\n  useEffect(() => {\n    cachedItemsOrder.current = null;\n  }, [items]);\n\n  // Capture selection when popover closes\n  useEffect(() => {\n    if (!isPopoverOpen) {\n      selectionWhenClosed.current =\n        effectiveSelectedKey != null ? String(effectiveSelectedKey) : null;\n      cachedItemsOrder.current = null;\n    }\n  }, [isPopoverOpen, effectiveSelectedKey]);\n\n  // Call onOpenChange when popover state changes\n  useEffect(() => {\n    onOpenChange?.(isPopoverOpen);\n  }, [isPopoverOpen]);\n\n  // Filtering hook\n  const { filterFn, isFilterActive, setIsFilterActive } = useComboBoxFiltering({\n    effectiveInputValue,\n    filter,\n  });\n\n  // Create local collection state for reading item data (labels, etc.)\n  // This allows us to read item labels even before the popover opens\n  const localCollectionState = useListState({\n    children,\n    items: sortedItems,\n    selectionMode: 'none', // Don't manage selection in this state\n  });\n\n  const { isFocused, focusProps } = useFocus({ isDisabled });\n\n  // Helper to check if current input value is valid\n  const checkInputValidity = useCallback(() => {\n    if (!effectiveInputValue.trim()) {\n      return { isValid: false, singleMatchKey: null, filteredCount: 0 };\n    }\n\n    // Get filtered collection based on current input\n    const filteredNodes = filterFn(localCollectionState.collection);\n    const filteredItems: Array<{ key: Key; textValue: string }> = [];\n\n    // Flatten filtered nodes (handle sections)\n    for (const node of filteredNodes) {\n      if (node.type === 'section' && node.childNodes) {\n        for (const child of node.childNodes) {\n          if (child.type === 'item') {\n            filteredItems.push({\n              key: child.key,\n              textValue: child.textValue || '',\n            });\n          }\n        }\n      } else if (node.type === 'item') {\n        filteredItems.push({\n          key: node.key,\n          textValue: node.textValue || '',\n        });\n      }\n    }\n\n    const filteredCount = filteredItems.length;\n\n    // Check for exact match\n    const exactMatch = filteredItems.find(\n      (item) =>\n        item.textValue.toLowerCase() ===\n        effectiveInputValue.trim().toLowerCase(),\n    );\n\n    if (exactMatch) {\n      return { isValid: true, singleMatchKey: exactMatch.key, filteredCount };\n    }\n\n    // If exactly one filtered result, consider it valid\n    if (filteredCount === 1) {\n      return {\n        isValid: true,\n        singleMatchKey: filteredItems[0].key,\n        filteredCount,\n      };\n    }\n\n    return { isValid: false, singleMatchKey: null, filteredCount };\n  }, [effectiveInputValue, filterFn, localCollectionState.collection]);\n\n  // Composite blur handler - fires when focus leaves the entire component\n  const handleCompositeBlur = useEvent(() => {\n    // NOTE: Do NOT disable filter yet; we need it active for validity check\n\n    // In allowsCustomValue mode\n    if (allowsCustomValue) {\n      // Commit the input value if it's non-empty and nothing is selected\n      if (\n        shouldCommitOnBlur &&\n        effectiveInputValue &&\n        effectiveSelectedKey == null\n      ) {\n        externalOnSelectionChange?.(effectiveInputValue as string);\n        if (!isControlledKey) {\n          setInternalSelectedKey(effectiveInputValue as Key);\n        }\n        onBlur?.();\n        setIsFilterActive(false);\n        return;\n      }\n\n      // Clear selection if input is empty\n      if (!String(effectiveInputValue).trim()) {\n        externalOnSelectionChange?.(null);\n        if (!isControlledKey) {\n          setInternalSelectedKey(null);\n        }\n        if (!isControlledInput) {\n          setInternalInputValue('');\n        }\n        onInputChange?.('');\n        onBlur?.();\n        setIsFilterActive(false);\n        return;\n      }\n    }\n\n    // In non-custom-value mode, validate input and handle accordingly\n    if (!allowsCustomValue) {\n      const { isValid, singleMatchKey } = checkInputValidity();\n\n      // If there's exactly one filtered result, auto-select it\n      if (\n        isValid &&\n        singleMatchKey != null &&\n        singleMatchKey !== effectiveSelectedKey\n      ) {\n        const label = getItemLabel(singleMatchKey);\n\n        if (!isControlledKey) {\n          setInternalSelectedKey(singleMatchKey);\n        }\n        if (!isControlledInput) {\n          setInternalInputValue(label);\n        }\n        onInputChange?.(label);\n        externalOnSelectionChange?.(singleMatchKey as string | null);\n        onBlur?.();\n        setIsFilterActive(false);\n        return;\n      }\n\n      // If input is invalid (no exact match, not a single result)\n      if (!isValid) {\n        const trimmedInput = effectiveInputValue.trim();\n\n        // Clear if clearOnBlur is set or input is empty\n        if (clearOnBlur || !trimmedInput) {\n          externalOnSelectionChange?.(null);\n          if (!isControlledKey) {\n            setInternalSelectedKey(null);\n          }\n          if (!isControlledInput) {\n            setInternalInputValue('');\n          }\n          onInputChange?.('');\n          onBlur?.();\n          setIsFilterActive(false);\n          return;\n        }\n\n        // Reset input to current selected value (or empty if none)\n        const nextValue =\n          effectiveSelectedKey != null\n            ? getItemLabel(effectiveSelectedKey)\n            : '';\n\n        if (!isControlledInput) {\n          setInternalInputValue(nextValue);\n        }\n        onInputChange?.(nextValue);\n        onBlur?.();\n        setIsFilterActive(false);\n        return;\n      }\n    }\n\n    // Fallback: Reset input to show current selection (or empty if none)\n    const nextValue =\n      effectiveSelectedKey != null ? getItemLabel(effectiveSelectedKey) : '';\n\n    if (!isControlledInput) {\n      setInternalInputValue(nextValue);\n    }\n    onInputChange?.(nextValue);\n    onBlur?.();\n    setIsFilterActive(false);\n  });\n\n  // Composite focus hook - handles focus tracking across wrapper and portaled popover\n  const { compositeFocusProps } = useCompositeFocus({\n    wrapperRef,\n    popoverRef,\n    onFocus,\n    onBlur: handleCompositeBlur,\n    isDisabled,\n  });\n\n  let isInvalid = validationState === 'invalid';\n\n  let validationIcon = isInvalid ? InvalidIcon : ValidIcon;\n  let validation = cloneElement(validationIcon);\n\n  // Ref to access internal ListBox state\n  const listStateRef = useRef<any>(null);\n  const focusInitAttemptsRef = useRef(0);\n\n  // Helper to get label from local collection\n  const getItemLabel = useCallback(\n    (key: Key): string => {\n      const item = localCollectionState?.collection?.getItem(key);\n      return item?.textValue || String(key);\n    },\n    [localCollectionState?.collection],\n  );\n\n  // Selection change handler\n  const handleSelectionChange = useEvent((selection: Key | Key[] | null) => {\n    // Extract single key from selection (we only support single selection)\n    const key = Array.isArray(selection) ? selection[0] : selection;\n\n    // Update selected key\n    if (!isControlledKey) {\n      setInternalSelectedKey(key ?? null);\n    }\n\n    // Update input value to show selected item label\n    if (key != null) {\n      setIsFilterActive(false);\n\n      const label = getItemLabel(key);\n\n      if (!isControlledInput) {\n        setInternalInputValue(label);\n      }\n      onInputChange?.(label);\n    } else {\n      // Clear input when selection is cleared\n      if (!isControlledInput) {\n        setInternalInputValue('');\n      }\n      onInputChange?.('');\n      setIsFilterActive(false);\n    }\n\n    externalOnSelectionChange?.(key as string | null);\n\n    // Close popover after selection\n    setIsPopoverOpen(false);\n\n    // Focus input\n    setTimeout(() => {\n      inputRef.current?.focus();\n    }, 0);\n  });\n\n  // Input change handler\n  const handleInputChange = useEvent(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = e.target.value;\n\n      // Update input value\n      if (!isControlledInput) {\n        setInternalInputValue(value);\n      }\n      onInputChange?.(value);\n\n      const trimmed = value.trim();\n      setIsFilterActive(trimmed.length > 0);\n\n      // Only clear selection in allowsCustomValue mode\n      // In normal mode, typing just filters - selection stays until explicitly changed\n      if (allowsCustomValue && effectiveSelectedKey != null) {\n        if (!isControlledKey) {\n          setInternalSelectedKey(null);\n        }\n        externalOnSelectionChange?.(null);\n      }\n\n      // Open popover based on trigger\n      if (popoverTrigger !== 'manual' && value && !isPopoverOpen) {\n        setIsPopoverOpen(true);\n      }\n    },\n  );\n\n  // Initialize input value from defaultInputValue or defaultSelectedKey (uncontrolled mode only, one-time)\n  const [hasInitialized, setHasInitialized] = useState(false);\n\n  useEffect(() => {\n    // Only initialize once, in uncontrolled input mode\n    if (hasInitialized || isControlledInput) return;\n\n    // Priority 1: defaultInputValue takes precedence\n    if (defaultInputValue !== undefined) {\n      setInternalInputValue(defaultInputValue);\n      setHasInitialized(true);\n      return;\n    }\n\n    // Priority 2: fall back to defaultSelectedKey's label\n    if (defaultSelectedKey) {\n      const label = getItemLabel(defaultSelectedKey);\n\n      setInternalInputValue(label);\n      setHasInitialized(true);\n    }\n  }, [\n    hasInitialized,\n    isControlledInput,\n    defaultInputValue,\n    defaultSelectedKey,\n    getItemLabel,\n    children,\n  ]);\n\n  // Sync input value with controlled selectedKey\n  const lastSyncedSelectedKey = useRef<Key | null | undefined>(undefined);\n\n  useEffect(() => {\n    // Only run when selectedKey is controlled but inputValue is uncontrolled\n    if (!isControlledKey || isControlledInput) return;\n\n    // Skip if the key hasn't actually changed (prevents unnecessary resets when collection rebuilds)\n    if (\n      lastSyncedSelectedKey.current !== undefined &&\n      lastSyncedSelectedKey.current === effectiveSelectedKey\n    ) {\n      return;\n    }\n\n    lastSyncedSelectedKey.current = effectiveSelectedKey;\n\n    // Get the expected label for the current selection\n    const expectedLabel =\n      effectiveSelectedKey != null ? getItemLabel(effectiveSelectedKey) : '';\n\n    // Update the input value to match the selected key's label\n    setInternalInputValue(expectedLabel);\n  }, [isControlledKey, isControlledInput, effectiveSelectedKey, getItemLabel]);\n\n  // Input focus handler\n  const handleInputFocus = useEvent((e: React.FocusEvent<HTMLInputElement>) => {\n    // Call focus props handler if it exists\n    focusProps.onFocus?.(e as any);\n\n    if (popoverTrigger === 'focus' && !isPopoverOpen) {\n      setIsPopoverOpen(true);\n    }\n  });\n\n  // Input blur handler - just handles internal focus props\n  const handleInputBlur = useEvent((e: React.FocusEvent<HTMLInputElement>) => {\n    focusProps.onBlur?.(e as any);\n  });\n\n  // Clear button logic\n  let hasValue = allowsCustomValue\n    ? effectiveInputValue !== ''\n    : effectiveSelectedKey != null;\n  let showClearButton = isClearable && hasValue && !isDisabled && !isReadOnly;\n\n  // Check if there are any results after filtering\n  const hasResults = useMemo(() => {\n    if (!children) return false;\n    if (!Array.isArray(children) && children === null) return false;\n\n    // If we have a collection, check if filtering will produce any results\n    if (localCollectionState?.collection) {\n      const filteredNodes = filterFn(localCollectionState.collection);\n      const resultArray = Array.from(filteredNodes).flatMap((node: any) => {\n        if (node.type === 'section' && node.childNodes) {\n          return [...node.childNodes];\n        }\n\n        return [node];\n      });\n      return resultArray.length > 0;\n    }\n\n    // Fallback: check if children exists\n    return Array.isArray(children) ? children.length > 0 : true;\n  }, [children, localCollectionState?.collection, filterFn]);\n\n  // Clear function\n  let clearValue = useEvent(() => {\n    // Clear input\n    if (!isControlledInput) {\n      setInternalInputValue('');\n    }\n    onInputChange?.('');\n\n    // Clear selection\n    if (!isControlledKey) {\n      setInternalSelectedKey(null);\n    }\n    externalOnSelectionChange?.(null);\n\n    // Close popover\n    if (isPopoverOpen) {\n      setIsPopoverOpen(false);\n    }\n\n    // Focus input\n    inputRef.current?.focus();\n\n    onClear?.();\n  });\n\n  // Keyboard navigation hook\n  const { keyboardProps } = useComboBoxKeyboard({\n    isPopoverOpen,\n    listStateRef,\n    hasResults,\n    allowsCustomValue,\n    effectiveInputValue,\n    isClearable,\n    onSelectionChange: handleSelectionChange,\n    onClearValue: clearValue,\n    onOpenPopover: () => setIsPopoverOpen(true),\n    onClosePopover: () => setIsPopoverOpen(false),\n    inputRef,\n    setIsFilterActive,\n    onKeyDown,\n  });\n\n  if (icon) {\n    icon = <div data-element=\"InputIcon\">{icon}</div>;\n\n    if (prefix) {\n      prefix = (\n        <>\n          {icon}\n          {prefix}\n        </>\n      );\n    } else {\n      prefix = icon;\n    }\n  }\n\n  let mods = useMemo(\n    () => ({\n      invalid: isInvalid,\n      valid: validationState === 'valid',\n      disabled: isDisabled,\n      hovered: false,\n      focused: isFocused,\n      loading: isLoading,\n      prefix: !!prefix,\n      suffix: true,\n      clearable: showClearButton,\n    }),\n    [\n      isInvalid,\n      validationState,\n      isDisabled,\n      isFocused,\n      isLoading,\n      prefix,\n      showClearButton,\n    ],\n  );\n\n  const comboBoxWidth = wrapperRef?.current?.offsetWidth;\n\n  const shouldShowPopover = Boolean(isPopoverOpen && hasResults);\n\n  // Close popover if no results\n  useEffect(() => {\n    if (isPopoverOpen && !hasResults) {\n      setIsPopoverOpen(false);\n    }\n  }, [isPopoverOpen, hasResults]);\n\n  const ensureInitialFocus = useCallback(() => {\n    if (!shouldShowPopover) return;\n\n    const listState = listStateRef.current;\n    if (!listState) return;\n\n    const { selectionManager, collection, disabledKeys, lastFocusSourceRef } =\n      listState;\n    if (!selectionManager || !collection) return;\n\n    const collectFirstKey = (): Key | null => {\n      for (const node of collection) {\n        if (node.type === 'item') {\n          if (!disabledKeys?.has(node.key)) return node.key;\n        } else if (node.childNodes) {\n          for (const child of node.childNodes) {\n            if (child.type === 'item' && !disabledKeys?.has(child.key)) {\n              return child.key;\n            }\n          }\n        }\n      }\n      return null;\n    };\n\n    if (lastFocusSourceRef) lastFocusSourceRef.current = 'keyboard';\n\n    // Check if we need to set or update focus\n    const currentFocusedKey = selectionManager.focusedKey;\n    let needsRefocus = false;\n\n    if (currentFocusedKey == null) {\n      // No focus at all - need to set initial focus\n      needsRefocus = true;\n    } else {\n      // Check if currently focused key still exists in the collection\n      const focusedItemExists = collection.getItem(currentFocusedKey) != null;\n      if (!focusedItemExists) {\n        // Focused item was filtered out - need to refocus\n        needsRefocus = true;\n      }\n    }\n\n    if (needsRefocus) {\n      let keyToFocus: Key | null = null;\n\n      // First try to focus on the selected key if it exists in the collection\n      if (\n        effectiveSelectedKey != null &&\n        collection.getItem(effectiveSelectedKey) != null\n      ) {\n        keyToFocus = effectiveSelectedKey;\n      } else {\n        // Fall back to the first key in the collection\n        keyToFocus = collectFirstKey();\n      }\n\n      if (keyToFocus != null) {\n        selectionManager.setFocusedKey(keyToFocus);\n      }\n    }\n  }, [shouldShowPopover, effectiveSelectedKey]);\n\n  useLayoutEffect(() => {\n    if (!shouldShowPopover) return;\n    focusInitAttemptsRef.current = 0;\n\n    const tick = () => {\n      if (!shouldShowPopover) return;\n      ensureInitialFocus();\n      focusInitAttemptsRef.current += 1;\n      // Try a few frames to wait for collection to mount\n      if (\n        focusInitAttemptsRef.current < 8 &&\n        listStateRef.current?.selectionManager?.focusedKey == null\n      ) {\n        requestAnimationFrame(tick);\n      }\n    };\n\n    requestAnimationFrame(() => requestAnimationFrame(tick));\n  }, [shouldShowPopover, ensureInitialFocus]);\n\n  const comboBoxField = (\n    <ComboBoxWrapperElement\n      ref={wrapperRef}\n      mods={mods}\n      styles={styles}\n      style={{\n        zIndex: isFocused ? 1 : 'initial',\n      }}\n      data-size={size}\n      {...compositeFocusProps}\n    >\n      {prefix ? <div data-element=\"Prefix\">{prefix}</div> : null}\n      <ComboBoxInput\n        qa={qa || 'ComboBox'}\n        inputRef={inputRef}\n        id={id}\n        value={effectiveInputValue}\n        placeholder={placeholder}\n        isDisabled={isDisabled}\n        isReadOnly={isReadOnly}\n        autoFocus={autoFocus}\n        autoComplete={autoComplete}\n        size={size}\n        mods={mods}\n        inputStyles={inputStyles}\n        keyboardProps={keyboardProps}\n        focusProps={{ ...focusProps, onBlur: handleInputBlur }}\n        isPopoverOpen={isPopoverOpen}\n        hasResults={hasResults}\n        comboBoxId={comboBoxId}\n        listStateRef={listStateRef}\n        onChange={handleInputChange}\n        onFocus={handleInputFocus}\n      />\n      <div data-element=\"Suffix\">\n        {suffixPosition === 'before' ? suffix : null}\n        {validationState || isLoading ? (\n          <>\n            {validationState && !isLoading ? validation : null}\n            {isLoading ? <LoadingIcon /> : null}\n          </>\n        ) : null}\n        {suffixPosition === 'after' ? suffix : null}\n        {showClearButton && (\n          <Item.Action\n            icon={<CloseIcon />}\n            size={size}\n            theme={validationState === 'invalid' ? 'danger' : undefined}\n            qa=\"ComboBoxClearButton\"\n            data-no-trigger={hideTrigger ? '' : undefined}\n            aria-label=\"Clear value\"\n            onPress={clearValue}\n          />\n        )}\n        {!hideTrigger ? (\n          <Item.Action\n            ref={triggerRef}\n            data-popover-trigger\n            icon={<DirectionIcon to={isPopoverOpen ? 'up' : 'down'} />}\n            qa=\"ComboBoxTrigger\"\n            mods={{\n              pressed: isPopoverOpen,\n              disabled: isDisabled,\n              loading: isLoading,\n            }}\n            data-size={size}\n            isDisabled={isDisabled}\n            styles={triggerStyles}\n            aria-expanded={isPopoverOpen}\n            aria-haspopup=\"listbox\"\n            aria-label=\"Show options\"\n            onPress={() => {\n              if (!isDisabled) {\n                const willOpen = !isPopoverOpen;\n                setIsPopoverOpen(willOpen);\n                if (willOpen) {\n                  inputRef.current?.focus();\n                  // If opening with no filtered results, disable filter to show all items\n                  if (!hasResults) {\n                    setIsFilterActive(false);\n                  }\n                }\n              }\n            }}\n          />\n        ) : null}\n      </div>\n      <ListBoxPopover\n        isOpen={shouldShowPopover}\n        triggerRef={wrapperRef as RefObject<HTMLElement>}\n        popoverRef={popoverRef}\n        listBoxRef={listBoxRef}\n        direction={direction}\n        shouldFlip={shouldFlip}\n        overlayOffset={overlayOffset}\n        containerPadding={containerPadding}\n        comboBoxWidth={comboBoxWidth}\n        listBoxId={`ComboBoxListBox-${comboBoxId}`}\n        overlayStyles={overlayStyles}\n        listBoxStyles={listBoxStyles}\n        optionStyles={optionStyles}\n        sectionStyles={sectionStyles}\n        headingStyles={headingStyles}\n        selectedKey={effectiveSelectedKey}\n        isDisabled={isDisabled}\n        disabledKeys={props.disabledKeys}\n        items={sortedItems}\n        listStateRef={listStateRef}\n        label={label}\n        ariaLabel={(props as any)['aria-label']}\n        compositeFocusProps={compositeFocusProps}\n        filter={filterFn}\n        size={size}\n        onSelectionChange={handleSelectionChange}\n        onClose={() => setIsPopoverOpen(false)}\n      >\n        {children}\n      </ListBoxPopover>\n    </ComboBoxWrapperElement>\n  );\n\n  const { children: _, ...propsWithoutChildren } = props;\n\n  return wrapWithField<Omit<CubeComboBoxProps<T>, 'children'>>(\n    comboBoxField,\n    ref,\n    propsWithoutChildren,\n  );\n}) as unknown as (<T>(\n  props: CubeComboBoxProps<T> & { ref?: ForwardedRef<HTMLDivElement> },\n) => ReactElement) & { Item: typeof Item; Section: typeof BaseSection };\n\nComboBox.Item = Item;\n\nComboBox.Section = BaseSection;\n\nObject.defineProperty(ComboBox, 'cubeInputType', {\n  value: 'ComboBox',\n  enumerable: false,\n  configurable: false,\n});\n"],"mappings":"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"}
+{"version":3,"file":"ComboBox.js","names":["useFocus","Item","BaseSection"],"sources":["../../../../src/components/fields/ComboBox/ComboBox.tsx"],"sourcesContent":["import { FocusableRef, Key } from '@react-types/shared';\nimport {\n  BASE_STYLES,\n  BasePropsWithoutChildren,\n  BaseStyleProps,\n  COLOR_STYLES,\n  ColorStyleProps,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport React, {\n  cloneElement,\n  ForwardedRef,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useFilter, useKeyboard } from 'react-aria';\nimport { Section as BaseSection, useListState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal';\nimport { useI18n } from '../../../i18n';\nimport { CloseIcon, DirectionIcon, LoadingIcon } from '../../../icons';\nimport { useProviderProps } from '../../../provider';\nimport { FieldBaseProps } from '../../../shared';\nimport { generateRandomId } from '../../../utils/random';\nimport { useCombinedRefs, useLayoutEffect } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { usePopoverSync } from '../../../utils/react/usePopoverSync';\nimport { extractStyles } from '../../../utils/styles';\nimport { CollectionItem as Item } from '../../CollectionItem';\nimport { useFieldProps, useFormProps, wrapWithField } from '../../form';\nimport { InvalidIcon } from '../../shared/InvalidIcon';\nimport { ValidIcon } from '../../shared/ValidIcon';\nimport {\n  filterCollectionNodes,\n  getEdgeVisibleKey,\n  getNextVisibleKey,\n  ListBoxPopover,\n  markKeyboardFocus,\n  useCompositeFocus,\n} from '../ListBoxPopover';\nimport {\n  DEFAULT_INPUT_STYLES,\n  INPUT_WRAPPER_STYLES,\n} from '../TextInput/TextInputBase';\n\ntype FilterFn = (textValue: string, inputValue: string) => boolean;\n\nexport type PopoverTriggerAction = 'focus' | 'input' | 'manual';\n\nconst ComboBoxWrapperElement = tasty({\n  qa: 'ComboBoxWrapper',\n  styles: INPUT_WRAPPER_STYLES,\n});\n\nconst InputElement = tasty({\n  as: 'input',\n  styles: DEFAULT_INPUT_STYLES,\n});\n\nexport interface CubeComboBoxProps<T>\n  extends BasePropsWithoutChildren,\n    BaseStyleProps,\n    OuterStyleProps,\n    ColorStyleProps,\n    FieldBaseProps {\n  /** The selected key in controlled mode */\n  selectedKey?: string | null;\n  /** The default selected key in uncontrolled mode */\n  defaultSelectedKey?: string | null;\n  /** Callback fired when selection changes */\n  onSelectionChange?: (key: string | null) => void;\n\n  /** The input value in controlled mode */\n  inputValue?: string;\n  /** The default input value in uncontrolled mode */\n  defaultInputValue?: string;\n  /** Callback fired when input value changes */\n  onInputChange?: (value: string) => void;\n  /** Placeholder text for the input */\n  placeholder?: string;\n  /** Whether the input should have autofocus */\n  autoFocus?: boolean;\n  /** HTML autocomplete attribute for the input */\n  autoComplete?: string;\n  /** Callback fired when focus enters the component (input, trigger, or popover). Does not receive event object. */\n  onFocus?: () => void;\n  /** Callback fired when focus leaves the component entirely. Does not receive event object. */\n  onBlur?: () => void;\n  /** Callback fired when a key is pressed on the input */\n  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n\n  /** Popover trigger behavior: 'focus', 'input', or 'manual'. Defaults to 'input' */\n  popoverTrigger?: PopoverTriggerAction;\n\n  /** Items for the listbox (alternative to children) */\n  items?: Iterable<T>;\n  /** Children for the listbox (static items or render function) */\n  children?: ReactNode | ((item: T) => ReactElement);\n\n  /**\n   * Custom filter function for determining if an option should be included.\n   * Pass `false` to disable internal filtering completely.\n   */\n  filter?: FilterFn | false;\n\n  /** Whether to allow entering custom values that are not in the predefined options */\n  allowsCustomValue?: boolean;\n  /** Whether to commit custom value on blur in allowsCustomValue mode (default: true) */\n  shouldCommitOnBlur?: boolean;\n  /** Whether to clear selection and input on blur (default: false, only applies to non-custom-value mode) */\n  clearOnBlur?: boolean;\n  /** Whether the combobox is clearable using ESC key or clear button */\n  isClearable?: boolean;\n  /** Callback called when the clear button is pressed */\n  onClear?: () => void;\n\n  /** Left input icon */\n  icon?: ReactElement;\n  /** Input decoration before the main input */\n  prefix?: ReactNode;\n  /** Input decoration after the main input */\n  suffix?: ReactNode;\n  /** Whether to hide the trigger button */\n  hideTrigger?: boolean;\n  /** Size of the combobox */\n  size?: 'small' | 'medium' | 'large' | (string & {});\n\n  /** Ref for accessing the input element */\n  inputRef?: RefObject<HTMLInputElement>;\n  /** Ref for accessing the wrapper element */\n  wrapperRef?: RefObject<HTMLDivElement>;\n  /** Ref for accessing the listbox element */\n  listBoxRef?: RefObject<HTMLDivElement>;\n  /** Ref for accessing the popover element */\n  popoverRef?: RefObject<HTMLDivElement>;\n  /** Ref for accessing the trigger button element */\n  triggerRef?: FocusableRef<HTMLButtonElement>;\n\n  /** Custom styles for the input */\n  inputStyles?: Styles;\n  /** Custom styles for the trigger button */\n  triggerStyles?: Styles;\n  /** Custom styles for the listbox */\n  listBoxStyles?: Styles;\n  /** Custom styles for the popover overlay */\n  overlayStyles?: Styles;\n  /** Custom styles for individual options */\n  optionStyles?: Styles;\n  /** Custom styles for sections */\n  sectionStyles?: Styles;\n  /** Custom styles for section headings */\n  headingStyles?: Styles;\n\n  /** Whether the combobox is disabled */\n  isDisabled?: boolean;\n  /** Whether the combobox is in loading state */\n  isLoading?: boolean;\n  /** Validation state of the combobox */\n  validationState?: 'valid' | 'invalid';\n  /** Keys of disabled items */\n  disabledKeys?: Iterable<Key>;\n  /** Whether to flip the popover placement */\n  shouldFlip?: boolean;\n  /** Placement direction for the popover */\n  direction?: 'bottom' | 'top';\n  /** Offset for the popover */\n  overlayOffset?: number;\n  /** Minimum padding in pixels between the popover and viewport edges */\n  containerPadding?: number;\n  /** Whether the combobox is read-only */\n  isReadOnly?: boolean;\n  /** Suffix position goes before or after the validation and loading statuses */\n  suffixPosition?: 'before' | 'after';\n  /**\n   * Sort selected item to the top when the popover opens.\n   * Only works when using the `items` prop (data-driven mode).\n   * Ignored when using JSX children.\n   * @default true when items are provided, false when using JSX children\n   */\n  sortSelectedToTop?: boolean;\n  /** Callback called when the popover open state changes */\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\nconst PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];\n\n// ============================================================================\n// Hook: useComboBoxState\n// ============================================================================\ninterface UseComboBoxStateProps {\n  selectedKey?: string | null;\n  defaultSelectedKey?: string | null;\n  inputValue?: string;\n  defaultInputValue?: string;\n  comboBoxId: string;\n  triggerRef?: RefObject<HTMLElement | null>;\n  popoverRef?: RefObject<HTMLElement | null>;\n}\n\ninterface UseComboBoxStateReturn {\n  effectiveSelectedKey: Key | null;\n  effectiveInputValue: string;\n  isPopoverOpen: boolean;\n  setIsPopoverOpen: (open: boolean) => void;\n  setInternalSelectedKey: (key: Key | null) => void;\n  setInternalInputValue: (value: string) => void;\n  isControlledKey: boolean;\n  isControlledInput: boolean;\n}\n\nfunction useComboBoxState({\n  selectedKey,\n  defaultSelectedKey,\n  inputValue,\n  defaultInputValue,\n  comboBoxId,\n  triggerRef,\n  popoverRef,\n}: UseComboBoxStateProps): UseComboBoxStateReturn {\n  // Internal state for uncontrolled mode\n  const [internalSelectedKey, setInternalSelectedKey] = useState<Key | null>(\n    defaultSelectedKey ?? null,\n  );\n  const [internalInputValue, setInternalInputValue] = useState(\n    defaultInputValue ?? '',\n  );\n\n  const isControlledKey = selectedKey !== undefined;\n  const isControlledInput = inputValue !== undefined;\n\n  const effectiveSelectedKey = isControlledKey\n    ? selectedKey\n    : internalSelectedKey;\n  const effectiveInputValue = isControlledInput\n    ? inputValue\n    : internalInputValue;\n\n  // Popover state\n  const [isPopoverOpen, setIsPopoverOpen] = useState(false);\n\n  usePopoverSync({\n    menuId: comboBoxId,\n    isOpen: isPopoverOpen,\n    onClose: () => setIsPopoverOpen(false),\n    triggerRef,\n    containerRef: popoverRef,\n  });\n\n  return {\n    effectiveSelectedKey,\n    effectiveInputValue,\n    isPopoverOpen,\n    setIsPopoverOpen,\n    setInternalSelectedKey,\n    setInternalInputValue,\n    isControlledKey,\n    isControlledInput,\n  };\n}\n\n// ============================================================================\n// Hook: useComboBoxFiltering\n// ============================================================================\ninterface UseComboBoxFilteringProps {\n  effectiveInputValue: string;\n  filter: FilterFn | false | undefined;\n}\n\ninterface UseComboBoxFilteringReturn {\n  filterFn: (nodes: Iterable<any>) => Iterable<any>;\n  isFilterActive: boolean;\n  setIsFilterActive: (active: boolean) => void;\n}\n\nfunction useComboBoxFiltering({\n  effectiveInputValue,\n  filter,\n}: UseComboBoxFilteringProps): UseComboBoxFilteringReturn {\n  const [isFilterActive, setIsFilterActive] = useState(false);\n\n  const { contains } = useFilter({ sensitivity: 'base' });\n\n  const textFilterFn = useMemo<FilterFn>(\n    () => (filter === false ? () => true : filter || contains),\n    [filter, contains],\n  );\n\n  // Create a filter function for collection nodes\n  const filterFn = useCallback(\n    (nodes: Iterable<any>) => {\n      const term = effectiveInputValue.trim();\n\n      // Don't filter if not active or no search term\n      if (!isFilterActive || !term) {\n        return nodes;\n      }\n\n      return filterCollectionNodes(nodes, term, textFilterFn);\n    },\n    [isFilterActive, effectiveInputValue, textFilterFn],\n  );\n\n  return {\n    filterFn,\n    isFilterActive,\n    setIsFilterActive,\n  };\n}\n\n// ============================================================================\n// Hook: useComboBoxKeyboard\n// ============================================================================\ninterface UseComboBoxKeyboardProps {\n  isPopoverOpen: boolean;\n  listStateRef: RefObject<any>;\n  hasResults: boolean;\n  allowsCustomValue?: boolean;\n  effectiveInputValue: string;\n  isClearable?: boolean;\n  onSelectionChange: (selection: Key | Key[] | null) => void;\n  onClearValue: () => void;\n  onOpenPopover: () => void;\n  onClosePopover: () => void;\n  inputRef: RefObject<HTMLInputElement>;\n  setIsFilterActive: (active: boolean) => void;\n  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n}\n\nfunction useComboBoxKeyboard({\n  isPopoverOpen,\n  listStateRef,\n  hasResults,\n  allowsCustomValue,\n  effectiveInputValue,\n  isClearable,\n  onSelectionChange,\n  onClearValue,\n  onOpenPopover,\n  onClosePopover,\n  inputRef,\n  setIsFilterActive,\n  onKeyDown,\n}: UseComboBoxKeyboardProps) {\n  const { keyboardProps } = useKeyboard({\n    onKeyDown: (e) => {\n      // Call user's handler first\n      onKeyDown?.(e as React.KeyboardEvent<HTMLInputElement>);\n\n      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n        e.preventDefault();\n\n        // Open popover if closed\n        if (!isPopoverOpen) {\n          // If opening with no filtered results, disable filter to show all items\n          if (!hasResults) {\n            setIsFilterActive(false);\n          }\n          onOpenPopover();\n          return;\n        }\n\n        const listState = listStateRef.current;\n        if (!listState) return;\n\n        const isArrowDown = e.key === 'ArrowDown';\n        const nextKey = getNextVisibleKey(listState, isArrowDown ? 1 : -1);\n\n        if (nextKey != null) {\n          markKeyboardFocus(listState);\n          listState.selectionManager.setFocusedKey(nextKey);\n        }\n      } else if (e.key === 'Enter') {\n        // If popover is open, try to select the focused item first\n        if (isPopoverOpen) {\n          const listState = listStateRef.current;\n          if (listState) {\n            const keyToSelect = listState.selectionManager.focusedKey;\n\n            if (keyToSelect != null) {\n              e.preventDefault();\n              listState.selectionManager.select(keyToSelect, e);\n              // Ensure the popover closes even if selection stays the same\n              onClosePopover();\n              inputRef.current?.focus();\n              return;\n            }\n          }\n        }\n\n        // If no results, handle empty input or custom values\n        if (!hasResults) {\n          if (allowsCustomValue) {\n            const value = effectiveInputValue.trim();\n\n            // Commit the custom value\n            onSelectionChange(\n              (value as unknown as Key) ?? (null as unknown as Key),\n            );\n\n            // If popover is closed and we have a value, allow Enter to propagate for form submission\n            // If popover is open OR value is empty, prevent default to avoid premature submission\n            if (isPopoverOpen || !value) {\n              e.preventDefault();\n            }\n          } else {\n            e.preventDefault();\n            onSelectionChange(null);\n          }\n\n          return;\n        }\n\n        // Clear selection if input is empty and popover is closed (or no focused item)\n        const trimmed = (effectiveInputValue || '').trim();\n        if (trimmed === '') {\n          e.preventDefault();\n          onSelectionChange(null);\n          return;\n        }\n      } else if (e.key === 'Escape') {\n        if (isPopoverOpen) {\n          e.preventDefault();\n          onClosePopover();\n          inputRef.current?.focus();\n        } else if (effectiveInputValue && isClearable) {\n          e.preventDefault();\n          onClearValue();\n        }\n      } else if (e.key === 'Home' || e.key === 'End') {\n        if (isPopoverOpen) {\n          e.preventDefault();\n\n          const listState = listStateRef.current;\n          if (!listState) return;\n\n          const targetKey = getEdgeVisibleKey(\n            listState,\n            e.key === 'Home' ? 'first' : 'last',\n          );\n\n          if (targetKey != null) {\n            markKeyboardFocus(listState);\n            listState.selectionManager.setFocusedKey(targetKey);\n          }\n        }\n      }\n    },\n  });\n\n  return { keyboardProps };\n}\n\n// ============================================================================\n// Component: ComboBoxInput\n// ============================================================================\ninterface ComboBoxInputProps {\n  qa?: string;\n  inputRef: RefObject<HTMLInputElement>;\n  id?: string;\n  value: string;\n  placeholder?: string;\n  isDisabled?: boolean;\n  isReadOnly?: boolean;\n  autoFocus?: boolean;\n  autoComplete?: string;\n  size: string;\n  mods: Record<string, any>;\n  inputStyles?: Styles;\n  keyboardProps: any;\n  focusProps: any;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onFocus: (e: React.FocusEvent<HTMLInputElement>) => void;\n  isPopoverOpen: boolean;\n  hasResults: boolean;\n  comboBoxId: string;\n  listStateRef: RefObject<any>;\n}\n\nconst ComboBoxInput = forwardRef<HTMLInputElement, ComboBoxInputProps>(\n  function ComboBoxInput(\n    {\n      qa,\n      inputRef,\n      id,\n      value,\n      placeholder,\n      isDisabled,\n      isReadOnly,\n      autoFocus,\n      autoComplete,\n      size,\n      mods,\n      inputStyles,\n      keyboardProps,\n      focusProps,\n      onChange,\n      onFocus,\n      isPopoverOpen,\n      hasResults,\n      comboBoxId,\n      listStateRef,\n    },\n    ref,\n  ) {\n    const combinedRef = useCombinedRefs(ref, inputRef);\n\n    return (\n      <InputElement\n        ref={combinedRef}\n        qa={qa}\n        id={id}\n        type=\"text\"\n        value={value}\n        placeholder={placeholder}\n        isDisabled={isDisabled}\n        readOnly={isReadOnly}\n        autoFocus={autoFocus}\n        autoComplete={autoComplete}\n        data-autofocus={autoFocus ? '' : undefined}\n        onChange={onChange}\n        onFocus={onFocus}\n        onBlur={focusProps.onBlur}\n        {...keyboardProps}\n        styles={inputStyles}\n        mods={mods}\n        data-size={size}\n        data-input-type=\"combobox\"\n        role=\"combobox\"\n        aria-expanded={isPopoverOpen && hasResults}\n        aria-haspopup=\"listbox\"\n        aria-controls={\n          isPopoverOpen && hasResults\n            ? `ComboBoxListBox-${comboBoxId}`\n            : undefined\n        }\n        aria-activedescendant={\n          isPopoverOpen &&\n          hasResults &&\n          listStateRef.current?.selectionManager.focusedKey != null\n            ? `ListBoxItem-${listStateRef.current?.selectionManager.focusedKey}`\n            : undefined\n        }\n      />\n    );\n  },\n);\n\n// ============================================================================\n// Main Component: ComboBox\n// ============================================================================\nexport const ComboBox = forwardRef(function ComboBox<T extends object>(\n  props: CubeComboBoxProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  props = useFieldProps(props, {\n    valuePropsMapper: ({ value, onChange }) => {\n      return {\n        // Form value maps to selectedKey (the committed value) in both modes\n        selectedKey: value ?? null,\n        onSelectionChange(val: string | null) {\n          // Commit selection changes to the form\n          onChange(val);\n        },\n      };\n    },\n  });\n\n  const { t } = useI18n();\n\n  let {\n    qa,\n    label,\n    extra,\n    labelStyles,\n    isRequired,\n    necessityIndicator,\n    validationState,\n    id,\n    icon,\n    prefix,\n    isDisabled,\n    autoFocus,\n    autoComplete = 'off',\n    wrapperRef,\n    inputRef,\n    triggerRef,\n    popoverRef,\n    listBoxRef,\n    isLoading,\n    inputStyles,\n    optionStyles,\n    triggerStyles,\n    listBoxStyles,\n    overlayStyles,\n    suffix,\n    hideTrigger,\n    message,\n    description,\n    size = 'medium',\n    direction = 'bottom',\n    shouldFlip = true,\n    popoverTrigger = 'input',\n    suffixPosition = 'before',\n    filter,\n    styles,\n    labelSuffix,\n    selectedKey,\n    defaultSelectedKey,\n    inputValue,\n    defaultInputValue,\n    onInputChange,\n    isClearable,\n    onClear,\n    placeholder,\n    allowsCustomValue,\n    shouldCommitOnBlur = true,\n    clearOnBlur,\n    items,\n    children: renderChildren,\n    sectionStyles,\n    headingStyles,\n    isReadOnly,\n    overlayOffset = 8,\n    containerPadding = 8,\n    onSelectionChange: externalOnSelectionChange,\n    sortSelectedToTop: sortSelectedToTopProp,\n    onOpenChange,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    form,\n    ...otherProps\n  } = props;\n\n  // Generate a unique ID for this combobox instance\n  const comboBoxId = useMemo(() => generateRandomId(), []);\n\n  // Hoist the wrapper/popover ref normalization above `useComboBoxState` so\n  // the popover-sync inside it sees stable, attached refs. Other ref combines\n  // happen below alongside the legacy ordering.\n  wrapperRef = useCombinedRefs(wrapperRef);\n  popoverRef = useCombinedRefs(popoverRef);\n\n  // State management hook\n  const {\n    effectiveSelectedKey,\n    effectiveInputValue,\n    isPopoverOpen,\n    setIsPopoverOpen,\n    setInternalSelectedKey,\n    setInternalInputValue,\n    isControlledKey,\n    isControlledInput,\n  } = useComboBoxState({\n    selectedKey,\n    defaultSelectedKey,\n    inputValue,\n    defaultInputValue,\n    comboBoxId,\n    triggerRef: wrapperRef as RefObject<HTMLElement | null>,\n    popoverRef: popoverRef as RefObject<HTMLElement | null>,\n  });\n\n  // Track if sortSelectedToTop was explicitly provided\n  const sortSelectedToTopExplicit = sortSelectedToTopProp !== undefined;\n  // Default to true if items are provided, false otherwise\n  const sortSelectedToTop = sortSelectedToTopProp ?? (items ? true : false);\n\n  // Cache for sorted items array when using `items` prop\n  const cachedItemsOrder = useRef<T[] | null>(null);\n  const selectionWhenClosed = useRef<string | null>(null);\n\n  styles = extractStyles(otherProps, PROP_STYLES, styles);\n\n  ref = useCombinedRefs(ref);\n  inputRef = useCombinedRefs(inputRef);\n  triggerRef = useCombinedRefs(triggerRef);\n  listBoxRef = useCombinedRefs(listBoxRef);\n\n  // Sort items with selected on top if enabled\n  const getSortedItems = useCallback((): typeof items => {\n    if (!items) return items;\n\n    if (!sortSelectedToTop) return items;\n\n    // Reuse cached order if available\n    if (cachedItemsOrder.current) {\n      return cachedItemsOrder.current;\n    }\n\n    // Warn if explicitly requested but not supported\n    if (sortSelectedToTopExplicit && !items) {\n      console.warn(\n        'ComboBox: sortSelectedToTop only works with the items prop. ' +\n          'Sorting will be skipped when using JSX children.',\n      );\n      return items;\n    }\n\n    const selectedKey = isPopoverOpen\n      ? effectiveSelectedKey\n      : selectionWhenClosed.current;\n\n    if (!selectedKey) return items;\n\n    const itemsArray = Array.isArray(items) ? items : Array.from(items);\n    const selectedItem = itemsArray.find((item) => {\n      const key = (item as any)?.key ?? (item as any)?.id;\n      return key != null && String(key) === String(selectedKey);\n    });\n\n    if (!selectedItem) return items;\n\n    const sorted = [\n      selectedItem,\n      ...itemsArray.filter((item) => {\n        const key = (item as any)?.key ?? (item as any)?.id;\n        return key == null || String(key) !== String(selectedKey);\n      }),\n    ] as T[];\n\n    if (isPopoverOpen) {\n      cachedItemsOrder.current = sorted;\n    }\n\n    return sorted;\n  }, [\n    items,\n    sortSelectedToTop,\n    sortSelectedToTopExplicit,\n    effectiveSelectedKey,\n    isPopoverOpen,\n  ]);\n\n  const sortedItems = getSortedItems();\n\n  // Preserve the original `children` (may be a render function) before we\n  // potentially overwrite it.\n  let children: ReactNode = renderChildren as ReactNode;\n\n  const renderFn = renderChildren as unknown;\n\n  if (sortedItems && typeof renderFn === 'function') {\n    try {\n      const itemsArray = Array.from(sortedItems as Iterable<any>);\n      children = itemsArray.map((item, idx) => {\n        const rendered = (renderFn as (it: any) => ReactNode)(item);\n        if (\n          React.isValidElement(rendered) &&\n          (rendered as ReactElement).key == null\n        ) {\n          return React.cloneElement(rendered as ReactElement, {\n            key: (rendered as any)?.key ?? item?.key ?? idx,\n          });\n        }\n\n        return rendered as ReactNode;\n      });\n    } catch {\n      // If conversion fails, proceed with the original children\n    }\n  }\n\n  // Invalidate cached sorting whenever items change\n  useEffect(() => {\n    cachedItemsOrder.current = null;\n  }, [items]);\n\n  // Capture selection when popover closes\n  useEffect(() => {\n    if (!isPopoverOpen) {\n      selectionWhenClosed.current =\n        effectiveSelectedKey != null ? String(effectiveSelectedKey) : null;\n      cachedItemsOrder.current = null;\n    }\n  }, [isPopoverOpen, effectiveSelectedKey]);\n\n  // Call onOpenChange when popover state changes\n  useEffect(() => {\n    onOpenChange?.(isPopoverOpen);\n  }, [isPopoverOpen]);\n\n  // Filtering hook\n  const { filterFn, isFilterActive, setIsFilterActive } = useComboBoxFiltering({\n    effectiveInputValue,\n    filter,\n  });\n\n  // Create local collection state for reading item data (labels, etc.)\n  // This allows us to read item labels even before the popover opens\n  const localCollectionState = useListState({\n    children,\n    items: sortedItems,\n    selectionMode: 'none', // Don't manage selection in this state\n  });\n\n  const { isFocused, focusProps } = useFocus({ isDisabled });\n\n  // Helper to check if current input value is valid\n  const checkInputValidity = useCallback(() => {\n    if (!effectiveInputValue.trim()) {\n      return { isValid: false, singleMatchKey: null, filteredCount: 0 };\n    }\n\n    // Get filtered collection based on current input\n    const filteredNodes = filterFn(localCollectionState.collection);\n    const filteredItems: Array<{ key: Key; textValue: string }> = [];\n\n    // Flatten filtered nodes (handle sections)\n    for (const node of filteredNodes) {\n      if (node.type === 'section' && node.childNodes) {\n        for (const child of node.childNodes) {\n          if (child.type === 'item') {\n            filteredItems.push({\n              key: child.key,\n              textValue: child.textValue || '',\n            });\n          }\n        }\n      } else if (node.type === 'item') {\n        filteredItems.push({\n          key: node.key,\n          textValue: node.textValue || '',\n        });\n      }\n    }\n\n    const filteredCount = filteredItems.length;\n\n    // Check for exact match\n    const exactMatch = filteredItems.find(\n      (item) =>\n        item.textValue.toLowerCase() ===\n        effectiveInputValue.trim().toLowerCase(),\n    );\n\n    if (exactMatch) {\n      return { isValid: true, singleMatchKey: exactMatch.key, filteredCount };\n    }\n\n    // If exactly one filtered result, consider it valid\n    if (filteredCount === 1) {\n      return {\n        isValid: true,\n        singleMatchKey: filteredItems[0].key,\n        filteredCount,\n      };\n    }\n\n    return { isValid: false, singleMatchKey: null, filteredCount };\n  }, [effectiveInputValue, filterFn, localCollectionState.collection]);\n\n  // Composite blur handler - fires when focus leaves the entire component\n  const handleCompositeBlur = useEvent(() => {\n    // NOTE: Do NOT disable filter yet; we need it active for validity check\n\n    // In allowsCustomValue mode\n    if (allowsCustomValue) {\n      // Commit the input value if it's non-empty and nothing is selected\n      if (\n        shouldCommitOnBlur &&\n        effectiveInputValue &&\n        effectiveSelectedKey == null\n      ) {\n        externalOnSelectionChange?.(effectiveInputValue as string);\n        if (!isControlledKey) {\n          setInternalSelectedKey(effectiveInputValue as Key);\n        }\n        onBlur?.();\n        setIsFilterActive(false);\n        return;\n      }\n\n      // Clear selection if input is empty\n      if (!String(effectiveInputValue).trim()) {\n        externalOnSelectionChange?.(null);\n        if (!isControlledKey) {\n          setInternalSelectedKey(null);\n        }\n        if (!isControlledInput) {\n          setInternalInputValue('');\n        }\n        onInputChange?.('');\n        onBlur?.();\n        setIsFilterActive(false);\n        return;\n      }\n    }\n\n    // In non-custom-value mode, validate input and handle accordingly\n    if (!allowsCustomValue) {\n      const { isValid, singleMatchKey } = checkInputValidity();\n\n      // If there's exactly one filtered result, auto-select it\n      if (\n        isValid &&\n        singleMatchKey != null &&\n        singleMatchKey !== effectiveSelectedKey\n      ) {\n        const label = getItemLabel(singleMatchKey);\n\n        if (!isControlledKey) {\n          setInternalSelectedKey(singleMatchKey);\n        }\n        if (!isControlledInput) {\n          setInternalInputValue(label);\n        }\n        onInputChange?.(label);\n        externalOnSelectionChange?.(singleMatchKey as string | null);\n        onBlur?.();\n        setIsFilterActive(false);\n        return;\n      }\n\n      // If input is invalid (no exact match, not a single result)\n      if (!isValid) {\n        const trimmedInput = effectiveInputValue.trim();\n\n        // Clear if clearOnBlur is set or input is empty\n        if (clearOnBlur || !trimmedInput) {\n          externalOnSelectionChange?.(null);\n          if (!isControlledKey) {\n            setInternalSelectedKey(null);\n          }\n          if (!isControlledInput) {\n            setInternalInputValue('');\n          }\n          onInputChange?.('');\n          onBlur?.();\n          setIsFilterActive(false);\n          return;\n        }\n\n        // Reset input to current selected value (or empty if none)\n        const nextValue =\n          effectiveSelectedKey != null\n            ? getItemLabel(effectiveSelectedKey)\n            : '';\n\n        if (!isControlledInput) {\n          setInternalInputValue(nextValue);\n        }\n        onInputChange?.(nextValue);\n        onBlur?.();\n        setIsFilterActive(false);\n        return;\n      }\n    }\n\n    // Fallback: Reset input to show current selection (or empty if none)\n    const nextValue =\n      effectiveSelectedKey != null ? getItemLabel(effectiveSelectedKey) : '';\n\n    if (!isControlledInput) {\n      setInternalInputValue(nextValue);\n    }\n    onInputChange?.(nextValue);\n    onBlur?.();\n    setIsFilterActive(false);\n  });\n\n  // Composite focus hook - handles focus tracking across wrapper and portaled popover\n  const { compositeFocusProps } = useCompositeFocus({\n    wrapperRef,\n    popoverRef,\n    onFocus,\n    onBlur: handleCompositeBlur,\n    isDisabled,\n  });\n\n  let isInvalid = validationState === 'invalid';\n\n  let validationIcon = isInvalid ? InvalidIcon : ValidIcon;\n  let validation = cloneElement(validationIcon);\n\n  // Ref to access internal ListBox state\n  const listStateRef = useRef<any>(null);\n  const focusInitAttemptsRef = useRef(0);\n\n  // Helper to get label from local collection\n  const getItemLabel = useCallback(\n    (key: Key): string => {\n      const item = localCollectionState?.collection?.getItem(key);\n      return item?.textValue || String(key);\n    },\n    [localCollectionState?.collection],\n  );\n\n  // Selection change handler\n  const handleSelectionChange = useEvent((selection: Key | Key[] | null) => {\n    // Extract single key from selection (we only support single selection)\n    const key = Array.isArray(selection) ? selection[0] : selection;\n\n    // Update selected key\n    if (!isControlledKey) {\n      setInternalSelectedKey(key ?? null);\n    }\n\n    // Update input value to show selected item label\n    if (key != null) {\n      setIsFilterActive(false);\n\n      const label = getItemLabel(key);\n\n      if (!isControlledInput) {\n        setInternalInputValue(label);\n      }\n      onInputChange?.(label);\n    } else {\n      // Clear input when selection is cleared\n      if (!isControlledInput) {\n        setInternalInputValue('');\n      }\n      onInputChange?.('');\n      setIsFilterActive(false);\n    }\n\n    externalOnSelectionChange?.(key as string | null);\n\n    // Close popover after selection\n    setIsPopoverOpen(false);\n\n    // Focus input\n    setTimeout(() => {\n      inputRef.current?.focus();\n    }, 0);\n  });\n\n  // Input change handler\n  const handleInputChange = useEvent(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = e.target.value;\n\n      // Update input value\n      if (!isControlledInput) {\n        setInternalInputValue(value);\n      }\n      onInputChange?.(value);\n\n      const trimmed = value.trim();\n      setIsFilterActive(trimmed.length > 0);\n\n      // Only clear selection in allowsCustomValue mode\n      // In normal mode, typing just filters - selection stays until explicitly changed\n      if (allowsCustomValue && effectiveSelectedKey != null) {\n        if (!isControlledKey) {\n          setInternalSelectedKey(null);\n        }\n        externalOnSelectionChange?.(null);\n      }\n\n      // Open popover based on trigger\n      if (popoverTrigger !== 'manual' && value && !isPopoverOpen) {\n        setIsPopoverOpen(true);\n      }\n    },\n  );\n\n  // Initialize input value from defaultInputValue or defaultSelectedKey (uncontrolled mode only, one-time)\n  const [hasInitialized, setHasInitialized] = useState(false);\n\n  useEffect(() => {\n    // Only initialize once, in uncontrolled input mode\n    if (hasInitialized || isControlledInput) return;\n\n    // Priority 1: defaultInputValue takes precedence\n    if (defaultInputValue !== undefined) {\n      setInternalInputValue(defaultInputValue);\n      setHasInitialized(true);\n      return;\n    }\n\n    // Priority 2: fall back to defaultSelectedKey's label\n    if (defaultSelectedKey) {\n      const label = getItemLabel(defaultSelectedKey);\n\n      setInternalInputValue(label);\n      setHasInitialized(true);\n    }\n  }, [\n    hasInitialized,\n    isControlledInput,\n    defaultInputValue,\n    defaultSelectedKey,\n    getItemLabel,\n    children,\n  ]);\n\n  // Sync input value with controlled selectedKey\n  const lastSyncedSelectedKey = useRef<Key | null | undefined>(undefined);\n\n  useEffect(() => {\n    // Only run when selectedKey is controlled but inputValue is uncontrolled\n    if (!isControlledKey || isControlledInput) return;\n\n    // Skip if the key hasn't actually changed (prevents unnecessary resets when collection rebuilds)\n    if (\n      lastSyncedSelectedKey.current !== undefined &&\n      lastSyncedSelectedKey.current === effectiveSelectedKey\n    ) {\n      return;\n    }\n\n    lastSyncedSelectedKey.current = effectiveSelectedKey;\n\n    // Get the expected label for the current selection\n    const expectedLabel =\n      effectiveSelectedKey != null ? getItemLabel(effectiveSelectedKey) : '';\n\n    // Update the input value to match the selected key's label\n    setInternalInputValue(expectedLabel);\n  }, [isControlledKey, isControlledInput, effectiveSelectedKey, getItemLabel]);\n\n  // Input focus handler\n  const handleInputFocus = useEvent((e: React.FocusEvent<HTMLInputElement>) => {\n    // Call focus props handler if it exists\n    focusProps.onFocus?.(e as any);\n\n    if (popoverTrigger === 'focus' && !isPopoverOpen) {\n      setIsPopoverOpen(true);\n    }\n  });\n\n  // Input blur handler - just handles internal focus props\n  const handleInputBlur = useEvent((e: React.FocusEvent<HTMLInputElement>) => {\n    focusProps.onBlur?.(e as any);\n  });\n\n  // Clear button logic\n  let hasValue = allowsCustomValue\n    ? effectiveInputValue !== ''\n    : effectiveSelectedKey != null;\n  let showClearButton = isClearable && hasValue && !isDisabled && !isReadOnly;\n\n  // Check if there are any results after filtering\n  const hasResults = useMemo(() => {\n    if (!children) return false;\n    if (!Array.isArray(children) && children === null) return false;\n\n    // If we have a collection, check if filtering will produce any results\n    if (localCollectionState?.collection) {\n      const filteredNodes = filterFn(localCollectionState.collection);\n      const resultArray = Array.from(filteredNodes).flatMap((node: any) => {\n        if (node.type === 'section' && node.childNodes) {\n          return [...node.childNodes];\n        }\n\n        return [node];\n      });\n      return resultArray.length > 0;\n    }\n\n    // Fallback: check if children exists\n    return Array.isArray(children) ? children.length > 0 : true;\n  }, [children, localCollectionState?.collection, filterFn]);\n\n  // Clear function\n  let clearValue = useEvent(() => {\n    // Clear input\n    if (!isControlledInput) {\n      setInternalInputValue('');\n    }\n    onInputChange?.('');\n\n    // Clear selection\n    if (!isControlledKey) {\n      setInternalSelectedKey(null);\n    }\n    externalOnSelectionChange?.(null);\n\n    // Close popover\n    if (isPopoverOpen) {\n      setIsPopoverOpen(false);\n    }\n\n    // Focus input\n    inputRef.current?.focus();\n\n    onClear?.();\n  });\n\n  // Keyboard navigation hook\n  const { keyboardProps } = useComboBoxKeyboard({\n    isPopoverOpen,\n    listStateRef,\n    hasResults,\n    allowsCustomValue,\n    effectiveInputValue,\n    isClearable,\n    onSelectionChange: handleSelectionChange,\n    onClearValue: clearValue,\n    onOpenPopover: () => setIsPopoverOpen(true),\n    onClosePopover: () => setIsPopoverOpen(false),\n    inputRef,\n    setIsFilterActive,\n    onKeyDown,\n  });\n\n  if (icon) {\n    icon = <div data-element=\"InputIcon\">{icon}</div>;\n\n    if (prefix) {\n      prefix = (\n        <>\n          {icon}\n          {prefix}\n        </>\n      );\n    } else {\n      prefix = icon;\n    }\n  }\n\n  let mods = useMemo(\n    () => ({\n      invalid: isInvalid,\n      valid: validationState === 'valid',\n      disabled: isDisabled,\n      hovered: false,\n      focused: isFocused,\n      loading: isLoading,\n      prefix: !!prefix,\n      suffix: true,\n      clearable: showClearButton,\n    }),\n    [\n      isInvalid,\n      validationState,\n      isDisabled,\n      isFocused,\n      isLoading,\n      prefix,\n      showClearButton,\n    ],\n  );\n\n  const comboBoxWidth = wrapperRef?.current?.offsetWidth;\n\n  const shouldShowPopover = Boolean(isPopoverOpen && hasResults);\n\n  // Close popover if no results\n  useEffect(() => {\n    if (isPopoverOpen && !hasResults) {\n      setIsPopoverOpen(false);\n    }\n  }, [isPopoverOpen, hasResults]);\n\n  const ensureInitialFocus = useCallback(() => {\n    if (!shouldShowPopover) return;\n\n    const listState = listStateRef.current;\n    if (!listState) return;\n\n    const { selectionManager, collection, disabledKeys, lastFocusSourceRef } =\n      listState;\n    if (!selectionManager || !collection) return;\n\n    const collectFirstKey = (): Key | null => {\n      for (const node of collection) {\n        if (node.type === 'item') {\n          if (!disabledKeys?.has(node.key)) return node.key;\n        } else if (node.childNodes) {\n          for (const child of node.childNodes) {\n            if (child.type === 'item' && !disabledKeys?.has(child.key)) {\n              return child.key;\n            }\n          }\n        }\n      }\n      return null;\n    };\n\n    if (lastFocusSourceRef) lastFocusSourceRef.current = 'keyboard';\n\n    // Check if we need to set or update focus\n    const currentFocusedKey = selectionManager.focusedKey;\n    let needsRefocus = false;\n\n    if (currentFocusedKey == null) {\n      // No focus at all - need to set initial focus\n      needsRefocus = true;\n    } else {\n      // Check if currently focused key still exists in the collection\n      const focusedItemExists = collection.getItem(currentFocusedKey) != null;\n      if (!focusedItemExists) {\n        // Focused item was filtered out - need to refocus\n        needsRefocus = true;\n      }\n    }\n\n    if (needsRefocus) {\n      let keyToFocus: Key | null = null;\n\n      // First try to focus on the selected key if it exists in the collection\n      if (\n        effectiveSelectedKey != null &&\n        collection.getItem(effectiveSelectedKey) != null\n      ) {\n        keyToFocus = effectiveSelectedKey;\n      } else {\n        // Fall back to the first key in the collection\n        keyToFocus = collectFirstKey();\n      }\n\n      if (keyToFocus != null) {\n        selectionManager.setFocusedKey(keyToFocus);\n      }\n    }\n  }, [shouldShowPopover, effectiveSelectedKey]);\n\n  useLayoutEffect(() => {\n    if (!shouldShowPopover) return;\n    focusInitAttemptsRef.current = 0;\n\n    const tick = () => {\n      if (!shouldShowPopover) return;\n      ensureInitialFocus();\n      focusInitAttemptsRef.current += 1;\n      // Try a few frames to wait for collection to mount\n      if (\n        focusInitAttemptsRef.current < 8 &&\n        listStateRef.current?.selectionManager?.focusedKey == null\n      ) {\n        requestAnimationFrame(tick);\n      }\n    };\n\n    requestAnimationFrame(() => requestAnimationFrame(tick));\n  }, [shouldShowPopover, ensureInitialFocus]);\n\n  const comboBoxField = (\n    <ComboBoxWrapperElement\n      ref={wrapperRef}\n      mods={mods}\n      styles={styles}\n      style={{\n        zIndex: isFocused ? 1 : 'initial',\n      }}\n      data-size={size}\n      {...compositeFocusProps}\n    >\n      {prefix ? <div data-element=\"Prefix\">{prefix}</div> : null}\n      <ComboBoxInput\n        qa={qa || 'ComboBox'}\n        inputRef={inputRef}\n        id={id}\n        value={effectiveInputValue}\n        placeholder={placeholder}\n        isDisabled={isDisabled}\n        isReadOnly={isReadOnly}\n        autoFocus={autoFocus}\n        autoComplete={autoComplete}\n        size={size}\n        mods={mods}\n        inputStyles={inputStyles}\n        keyboardProps={keyboardProps}\n        focusProps={{ ...focusProps, onBlur: handleInputBlur }}\n        isPopoverOpen={isPopoverOpen}\n        hasResults={hasResults}\n        comboBoxId={comboBoxId}\n        listStateRef={listStateRef}\n        onChange={handleInputChange}\n        onFocus={handleInputFocus}\n      />\n      <div data-element=\"Suffix\">\n        {suffixPosition === 'before' ? suffix : null}\n        {validationState || isLoading ? (\n          <>\n            {validationState && !isLoading ? validation : null}\n            {isLoading ? <LoadingIcon /> : null}\n          </>\n        ) : null}\n        {suffixPosition === 'after' ? suffix : null}\n        {showClearButton && (\n          <Item.Action\n            icon={<CloseIcon />}\n            size={size}\n            theme={validationState === 'invalid' ? 'danger' : undefined}\n            qa=\"ComboBoxClearButton\"\n            data-no-trigger={hideTrigger ? '' : undefined}\n            aria-label={t('comboBox.clearValue', 'Clear value')}\n            onPress={clearValue}\n          />\n        )}\n        {!hideTrigger ? (\n          <Item.Action\n            ref={triggerRef}\n            data-popover-trigger\n            icon={<DirectionIcon to={isPopoverOpen ? 'up' : 'down'} />}\n            qa=\"ComboBoxTrigger\"\n            mods={{\n              pressed: isPopoverOpen,\n              disabled: isDisabled,\n              loading: isLoading,\n            }}\n            data-size={size}\n            isDisabled={isDisabled}\n            styles={triggerStyles}\n            aria-expanded={isPopoverOpen}\n            aria-haspopup=\"listbox\"\n            aria-label={t('comboBox.showOptions', 'Show options')}\n            onPress={() => {\n              if (!isDisabled) {\n                const willOpen = !isPopoverOpen;\n                setIsPopoverOpen(willOpen);\n                if (willOpen) {\n                  inputRef.current?.focus();\n                  // If opening with no filtered results, disable filter to show all items\n                  if (!hasResults) {\n                    setIsFilterActive(false);\n                  }\n                }\n              }\n            }}\n          />\n        ) : null}\n      </div>\n      <ListBoxPopover\n        isOpen={shouldShowPopover}\n        triggerRef={wrapperRef as RefObject<HTMLElement>}\n        popoverRef={popoverRef}\n        listBoxRef={listBoxRef}\n        direction={direction}\n        shouldFlip={shouldFlip}\n        overlayOffset={overlayOffset}\n        containerPadding={containerPadding}\n        comboBoxWidth={comboBoxWidth}\n        listBoxId={`ComboBoxListBox-${comboBoxId}`}\n        overlayStyles={overlayStyles}\n        listBoxStyles={listBoxStyles}\n        optionStyles={optionStyles}\n        sectionStyles={sectionStyles}\n        headingStyles={headingStyles}\n        selectedKey={effectiveSelectedKey}\n        isDisabled={isDisabled}\n        disabledKeys={props.disabledKeys}\n        items={sortedItems}\n        listStateRef={listStateRef}\n        label={label}\n        ariaLabel={(props as any)['aria-label']}\n        compositeFocusProps={compositeFocusProps}\n        filter={filterFn}\n        size={size}\n        onSelectionChange={handleSelectionChange}\n        onClose={() => setIsPopoverOpen(false)}\n      >\n        {children}\n      </ListBoxPopover>\n    </ComboBoxWrapperElement>\n  );\n\n  const { children: _, ...propsWithoutChildren } = props;\n\n  return wrapWithField<Omit<CubeComboBoxProps<T>, 'children'>>(\n    comboBoxField,\n    ref,\n    propsWithoutChildren,\n  );\n}) as unknown as (<T>(\n  props: CubeComboBoxProps<T> & { ref?: ForwardedRef<HTMLDivElement> },\n) => ReactElement) & { Item: typeof Item; Section: typeof BaseSection };\n\nComboBox.Item = Item;\n\nComboBox.Section = BaseSection;\n\nObject.defineProperty(ComboBox, 'cubeInputType', {\n  value: 'ComboBox',\n  enumerable: false,\n  configurable: false,\n});\n"],"mappings":"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"}

package/dist/components/fields/CommandTextArea/CommandTextArea.js

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

package/dist/components/fields/CommandTextArea/caretPosition.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.145.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.146.1 | Cube Dev Team */
 //#region src/components/fields/CommandTextArea/caretPosition.ts
 const MIRROR_STYLES = [
 	"boxSizing",

package/dist/components/fields/CommandTextArea/useCaretAnchor.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.145.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.146.1 | Cube Dev Team */
 import { getCaretRect } from "./caretPosition.js";
 import { useEffect, useLayoutEffect, useRef } from "react";
 

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.145.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.146.1 | 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.145.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.146.1 | 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,7 +1,8 @@
-/** @license MIT | @cube-dev/ui-kit v0.145.4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.146.1 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";
+import { useI18n } from "../../../i18n/useI18n.js";
 import { useFormProps } from "../../form/Form/Form.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
@@ -14,7 +15,6 @@ import { _TimeInput } from "./TimeInput.js";
 import { _Calendar } from "../../other/Calendar/Calendar.js";
 import { DatePickerButton } from "./DatePickerButton.js";
 import { DatePickerInput } from "./DatePickerInput.js";
-import { dateMessages } from "./intl.js";
 import { CONTAINER_STYLES } from "@tenphi/tasty";
 import { forwardRef, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -23,6 +23,7 @@ import { useDatePickerState } from "react-stately";
 
 //#region src/components/fields/DatePicker/DatePicker.tsx
 function DatePicker(props, ref) {
+	const { t } = useI18n();
 	props = useProviderProps(props);
 	props = useFormProps(props);
 	props = useFieldProps(props, { defaultValidationTrigger: "onBlur" });
@@ -82,7 +83,7 @@ function DatePicker(props, ref) {
 				width: "max-content",
 				children: [/* @__PURE__ */ jsx(_Calendar, { ...calendarProps }), showTimeField && /* @__PURE__ */ jsx(_TimeInput, {
 					padding: "1x",
-					label: dateMessages["time"],
+					label: t("datePicker.time", "Time"),
 					value: state.timeValue,
 					placeholderValue: timePlaceholder,
 					granularity: timeGranularity,