@cube-dev/ui-kit 0.181.0 → 0.183.0

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  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 } from '../../../icons/CloseIcon';\nimport { DirectionIcon } from '../../../icons/DirectionIcon';\nimport { LoadingIcon } from '../../../icons/LoadingIcon';\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 {\n  getValidationIcon,\n  getValidationMods,\n  useFieldProps,\n  wrapWithField,\n} from '../../form';\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<string | null | undefined> {\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  /** 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  isRequired?: 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      isRequired,\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        // `ComboBox` builds its own trigger rather than going through a\n        // react-aria field hook, so nothing else would announce that the field\n        // is mandatory — the label marker alone is not exposed to assistive\n        // technology.\n        aria-required={isRequired || undefined}\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 = 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    isInvalid,\n    isValid,\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 { isInputValid: 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 {\n        isInputValid: true,\n        singleMatchKey: exactMatch.key,\n        filteredCount,\n      };\n    }\n\n    // If exactly one filtered result, consider it valid\n    if (filteredCount === 1) {\n      return {\n        isInputValid: true,\n        singleMatchKey: filteredItems[0].key,\n        filteredCount,\n      };\n    }\n\n    return { isInputValid: 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 { isInputValid, singleMatchKey } = checkInputValidity();\n\n      // If there's exactly one filtered result, auto-select it\n      if (\n        isInputValid &&\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 (!isInputValid) {\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 validationIcon = getValidationIcon({ isInvalid, isValid });\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  const lastSyncedSelectedKey = useRef<Key | null | undefined>(undefined);\n  const selectionClearedByTyping = useRef(false);\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        selectionClearedByTyping.current = true;\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  useEffect(() => {\n    const preserveTypedInput = selectionClearedByTyping.current;\n    selectionClearedByTyping.current = false;\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    // Acknowledging the selection cleared by this edit must not erase the\n    // text that caused it. Later external clears still reset the input.\n    if (preserveTypedInput && effectiveSelectedKey == null) return;\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  }, [\n    isControlledKey,\n    isControlledInput,\n    effectiveSelectedKey,\n    effectiveInputValue,\n    getItemLabel,\n  ]);\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      ...getValidationMods({ isInvalid, isValid }),\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      isValid,\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        isRequired={isRequired}\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        {isLoading ? <LoadingIcon data-element=\"InputIcon\" /> : validationIcon}\n        {suffixPosition === 'after' ? suffix : null}\n        {showClearButton && (\n          <Item.Action\n            icon={<CloseIcon />}\n            size={size}\n            // No `theme` — the default `current` type inherits the input's own\n            // text color, which is already validation-tinted, so the button\n            // matches the text beside it exactly instead of using the fixed\n            // `danger.clear` palette.\n            qa=\"ComboBoxClearButton\"\n            data-no-trigger={hideTrigger ? '' : undefined}\n            data-popover-dismiss=\"\"\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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"}
+{"version":3,"file":"ComboBox.js","names":["FocusableRef","Key","BASE_STYLES","BasePropsWithoutChildren","BaseStyleProps","COLOR_STYLES","ColorStyleProps","OUTER_STYLES","OuterStyleProps","Styles","tasty","React","ForwardedRef","forwardRef","ReactElement","ReactNode","RefObject","useCallback","useEffect","useMemo","useRef","useState","useFilter","useKeyboard","Section","BaseSection","useListState","useEvent","useI18n","CloseIcon","DirectionIcon","LoadingIcon","FieldBaseProps","generateRandomId","useCombinedRefs","useLayoutEffect","useFocus","usePopoverSync","extractStyles","CollectionItem","Item","getValidationIcon","getValidationMods","useFieldProps","wrapWithField","filterCollectionNodes","getEdgeVisibleKey","getNextVisibleKey","ListBoxPopover","markKeyboardFocus","useCompositeFocus","DEFAULT_INPUT_STYLES","INPUT_WRAPPER_STYLES","FilterFn","textValue","inputValue","PopoverTriggerAction","ComboBoxWrapperElement","qa","styles","InputElement","as","CubeComboBoxProps","selectedKey","defaultSelectedKey","onSelectionChange","key","defaultInputValue","onInputChange","value","placeholder","autoFocus","autoComplete","onFocus","onBlur","onKeyDown","e","KeyboardEvent","HTMLInputElement","popoverTrigger","items","Iterable","T","children","item","filter","allowsCustomValue","shouldCommitOnBlur","clearOnBlur","isClearable","onClear","icon","prefix","suffix","hideTrigger","size","inputRef","wrapperRef","HTMLDivElement","listBoxRef","popoverRef","triggerRef","HTMLButtonElement","inputStyles","triggerStyles","listBoxStyles","overlayStyles","optionStyles","sectionStyles","headingStyles","isDisabled","isLoading","disabledKeys","shouldFlip","direction","overlayOffset","containerPadding","isReadOnly","suffixPosition","sortSelectedToTop","onOpenChange","isOpen","PROP_STYLES","UseComboBoxStateProps","comboBoxId","HTMLElement","UseComboBoxStateReturn","effectiveSelectedKey","effectiveInputValue","isPopoverOpen","setIsPopoverOpen","open","setInternalSelectedKey","setInternalInputValue","isControlledKey","isControlledInput","useComboBoxState","t0","$","_c","internalSelectedKey","internalInputValue","undefined","t1","Symbol","for","t2","menuId","onClose","containerRef","t3","UseComboBoxFilteringProps","UseComboBoxFilteringReturn","filterFn","nodes","isFilterActive","setIsFilterActive","active","useComboBoxFiltering","sensitivity","contains","_temp","textFilterFn","term","trim","t4","UseComboBoxKeyboardProps","listStateRef","hasResults","selection","onClearValue","onOpenPopover","onClosePopover","useComboBoxKeyboard","preventDefault","listState","current","isArrowDown","nextKey","selectionManager","setFocusedKey","listState_0","keyToSelect","focusedKey","select","focus","trimmed","listState_1","targetKey","keyboardProps","ComboBoxInputProps","id","isRequired","mods","Record","focusProps","onChange","ChangeEvent","FocusEvent","ComboBoxInput","ref","combinedRef","ComboBox","props","valuePropsMapper","val","t","label","extra","labelStyles","necessityIndicator","isInvalid","isValid","message","description","labelSuffix","renderChildren","externalOnSelectionChange","sortSelectedToTopProp","form","otherProps","sortSelectedToTopExplicit","cachedItemsOrder","selectionWhenClosed","getSortedItems","console","warn","itemsArray","Array","isArray","from","selectedItem","find","String","sorted","sortedItems","renderFn","map","idx","rendered","it","isValidElement","cloneElement","localCollectionState","selectionMode","isFocused","checkInputValidity","isInputValid","singleMatchKey","filteredCount","filteredNodes","collection","filteredItems","node","type","childNodes","child","push","length","exactMatch","toLowerCase","handleCompositeBlur","getItemLabel","trimmedInput","nextValue","compositeFocusProps","validationIcon","focusInitAttemptsRef","getItem","handleSelectionChange","setTimeout","lastSyncedSelectedKey","selectionClearedByTyping","handleInputChange","target","hasInitialized","setHasInitialized","preserveTypedInput","expectedLabel","handleInputFocus","handleInputBlur","hasValue","showClearButton","resultArray","flatMap","clearValue","disabled","hovered","focused","loading","clearable","comboBoxWidth","offsetWidth","shouldShowPopover","Boolean","ensureInitialFocus","lastFocusSourceRef","collectFirstKey","has","currentFocusedKey","needsRefocus","focusedItemExists","keyToFocus","tick","requestAnimationFrame","comboBoxField","zIndex","pressed","willOpen","_","propsWithoutChildren","Omit","Object","defineProperty","enumerable","configurable"],"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  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 } from '../../../icons/CloseIcon';\nimport { DirectionIcon } from '../../../icons/DirectionIcon';\nimport { LoadingIcon } from '../../../icons/LoadingIcon';\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 {\n  getValidationIcon,\n  getValidationMods,\n  useFieldProps,\n  wrapWithField,\n} from '../../form';\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<string | null | undefined> {\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  /** 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  isRequired?: 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      isRequired,\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        // `ComboBox` builds its own trigger rather than going through a\n        // react-aria field hook, so nothing else would announce that the field\n        // is mandatory — the label marker alone is not exposed to assistive\n        // technology.\n        aria-required={isRequired || undefined}\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 = 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    isInvalid,\n    isValid,\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 { isInputValid: 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 {\n        isInputValid: true,\n        singleMatchKey: exactMatch.key,\n        filteredCount,\n      };\n    }\n\n    // If exactly one filtered result, consider it valid\n    if (filteredCount === 1) {\n      return {\n        isInputValid: true,\n        singleMatchKey: filteredItems[0].key,\n        filteredCount,\n      };\n    }\n\n    return { isInputValid: 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 { isInputValid, singleMatchKey } = checkInputValidity();\n\n      // If there's exactly one filtered result, auto-select it\n      if (\n        isInputValid &&\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 (!isInputValid) {\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 validationIcon = getValidationIcon({ isInvalid, isValid });\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  const lastSyncedSelectedKey = useRef<Key | null | undefined>(undefined);\n  const selectionClearedByTyping = useRef(false);\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        selectionClearedByTyping.current = true;\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  useEffect(() => {\n    const preserveTypedInput = selectionClearedByTyping.current;\n    selectionClearedByTyping.current = false;\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    // Acknowledging the selection cleared by this edit must not erase the\n    // text that caused it. Later external clears still reset the input.\n    if (preserveTypedInput && effectiveSelectedKey == null) return;\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  }, [\n    isControlledKey,\n    isControlledInput,\n    effectiveSelectedKey,\n    effectiveInputValue,\n    getItemLabel,\n  ]);\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      ...getValidationMods({ isInvalid, isValid }),\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      isValid,\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        isRequired={isRequired}\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        {isLoading ? <LoadingIcon data-element=\"InputIcon\" /> : validationIcon}\n        {suffixPosition === 'after' ? suffix : null}\n        {showClearButton && (\n          <Item.Action\n            icon={<CloseIcon />}\n            size={size}\n            // No `theme` — the default `current` type inherits the input's own\n            // text color, which is already validation-tinted, so the button\n            // matches the text beside it exactly instead of using the fixed\n            // `danger.clear` palette.\n            qa=\"ComboBoxClearButton\"\n            data-no-trigger={hideTrigger ? '' : undefined}\n            data-popover-dismiss=\"\"\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,MAAMyD,yBAAyB/C,MAAM;CACnCgD,IAAI;CACJC,QAAQP;CACT,CAAC;AAEF,MAAMQ,eAAelD,MAAM;CACzBmD,IAAI;CACJF,QAAQR;CACT,CAAC;AA6HF,MAAMuE,cAAc;CAAC,GAAGxH;CAAa,GAAGK;CAAc,GAAGF;CAAa;AA0BtE,SAAAmI,iBAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAA0B,MAAA,EAAA5E,aAAAC,oBAAAT,YAAAY,mBAAAyD,YAAAvB,YAAAD,eAAAqC;CAUxB,MAAA,CAAAG,qBAAAR,0BAAsD/G,SACpD2C,sBAAA,KACD;CACD,MAAA,CAAA6E,oBAAAR,yBAAoDhH,SAClD8C,qBAAA,GACD;CAED,MAAAmE,kBAAwBvE,gBAAgB+E;CACxC,MAAAP,oBAA0BhF,eAAeuF;CAEzC,MAAAf,uBAA6BO,kBAAAvE,cAAA6E;CAG7B,MAAAZ,sBAA4BO,oBAAAhF,aAAAsF;CAK5B,MAAA,CAAAZ,eAAAC,oBAA0C7G,SAAS,MAAM;CAAC,IAAA0H;AAAA,KAAAL,EAAA,OAAAM,OAAAC,IAAA,4BAAA,EAAA;AAK/CF,aAAMb,iBAAiB,MAAM;AAAAQ,IAAA,KAAAK;OAAAA,MAAAL,EAAA;CAAA,IAAAQ;AAAA,KAAAR,EAAA,OAAAd,cAAAc,EAAA,OAAAT,iBAAAS,EAAA,OAAAtC,cAAAsC,EAAA,OAAArC,YAAA;AAHzB6C,OAAA;GAAAC,QACLvB;GAAUH,QACVQ;GAAamB,SACZL;GAA6B1C;GAAAgD,cAExBjD;GACf;AAAAsC,IAAA,KAAAd;AAAAc,IAAA,KAAAT;AAAAS,IAAA,KAAAtC;AAAAsC,IAAA,KAAArC;AAAAqC,IAAA,KAAAQ;OAAAA,MAAAR,EAAA;AANDrG,gBAAe6G,GAMb;CAAA,IAAAI;AAAA,KAAAZ,EAAA,OAAAV,uBAAAU,EAAA,OAAAX,wBAAAW,EAAA,OAAAH,qBAAAG,EAAA,OAAAJ,mBAAAI,EAAA,QAAAT,eAAA;AAEKqB,OAAA;GAAAvB;GAAAC;GAAAC;GAAAC;GAAAE;GAAAC;GAAAC;GAAAC;GASN;AAAAG,IAAA,KAAAV;AAAAU,IAAA,KAAAX;AAAAW,IAAA,KAAAH;AAAAG,IAAA,KAAAJ;AAAAI,IAAA,MAAAT;AAAAS,IAAA,MAAAY;OAAAA,MAAAZ,EAAA;AAAA,QATMY;;AA0BT,SAAAQ,qBAAArB,IAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAA8B,MAAA,EAAAX,qBAAA3C,WAAAoD;CAI5B,MAAA,CAAAkB,gBAAAC,qBAA4CvI,SAAS,MAAM;CAAC,IAAA0H;AAAA,KAAAL,EAAA,OAAAM,OAAAC,IAAA,4BAAA,EAAA;AAE7BF,OAAA,EAAAgB,aAAe,QAAQ;AAAArB,IAAA,KAAAK;OAAAA,MAAAL,EAAA;CAAtD,MAAA,EAAAsB,aAAqB1I,UAAUyH,GAAwB;CAAC,IAAAG;AAAA,KAAAR,EAAA,OAAAsB,YAAAtB,EAAA,OAAArD,QAAA;AAG/C6D,OAAA7D,WAAW,QAAX4E,QAAgC5E,UAAA2E;AAAkBtB,IAAA,KAAAsB;AAAAtB,IAAA,KAAArD;AAAAqD,IAAA,KAAAQ;OAAAA,MAAAR,EAAA;CAD3D,MAAAwB,eACShB;CAEP,IAAAI;AAAA,KAAAZ,EAAA,OAAAV,uBAAAU,EAAA,OAAAiB,kBAAAjB,EAAA,OAAAwB,cAAA;AAIAZ,QAAAI,UAAA;GACE,MAAAS,OAAanC,oBAAmBoC,MAAO;AAGvC,OAAI,CAACT,kBAAD,CAAoBQ,KAAI,QACnBT;AACR,UAEM7G,sBAAsB6G,OAAOS,MAAMD,aAAa;;AACxDxB,IAAA,KAAAV;AAAAU,IAAA,KAAAiB;AAAAjB,IAAA,KAAAwB;AAAAxB,IAAA,KAAAY;OAAAA,MAAAZ,EAAA;CAVH,MAAAe,WAAiBH;CAYf,IAAAe;AAAA,KAAA3B,EAAA,OAAAe,YAAAf,EAAA,OAAAiB,gBAAA;AAEKU,OAAA;GAAAZ;GAAAE;GAAAC;GAIN;AAAAlB,IAAA,KAAAe;AAAAf,IAAA,KAAAiB;AAAAjB,IAAA,MAAA2B;OAAAA,MAAA3B,EAAA;AAAA,QAJM2B;;AA5BT,SAAAJ,QAAA;AAAA,QASoC;;AA6CpC,SAAAY,oBAAApC,IAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAA6B,MAAA,EAAAV,eAAAsC,cAAAC,YAAAlF,mBAAA0C,qBAAAvC,aAAAxB,mBAAAyG,cAAAC,eAAAC,gBAAA5E,UAAA4D,mBAAAjF,cAAA8D;CAcF,IAAAM;AAAA,KAAAL,EAAA,OAAApD,qBAAAoD,EAAA,OAAAV,uBAAAU,EAAA,OAAA8B,cAAA9B,EAAA,OAAA1C,YAAA0C,EAAA,OAAAjD,eAAAiD,EAAA,OAAAT,iBAAAS,EAAA,OAAA6B,gBAAA7B,EAAA,OAAAgC,gBAAAhC,EAAA,OAAAkC,kBAAAlC,EAAA,OAAA/D,aAAA+D,EAAA,QAAAiC,iBAAAjC,EAAA,QAAAzE,qBAAAyE,EAAA,QAAAkB,mBAAA;AACab,OAAA,EAAApE,YACzBC,MAAA;AAETD,eAAYC,EAA2C;AAEvD,OAAIA,EAACV,QAAS,eAAeU,EAACV,QAAS,WAAS;AAC9CU,MAACkG,gBAAiB;AAGlB,QAAI,CAAC7C,eAAa;AAEhB,SAAI,CAACuC,WACHZ,mBAAkB,MAAM;AAE1Be,oBAAe;AAAA;;IAIjB,MAAAI,YAAkBR,aAAYS;AAC9B,QAAI,CAACD,UAAS;IAGd,MAAAG,UAAgBnI,kBAAkBgI,WADdnG,EAACV,QAAS,cACe,IAAA,GAAqB;AAElE,QAAIgH,WAAW,MAAI;AACjBjI,uBAAkB8H,UAAU;AAC5BA,eAASI,iBAAiBC,cAAeF,QAAQ;;cAE1CtG,EAACV,QAAS,SAAO;AAE1B,QAAI+D,eAAa;KACf,MAAAoD,cAAkBd,aAAYS;AAC9B,SAAID,aAAS;MACX,MAAAO,cAAoBP,YAASI,iBAAiBI;AAE9C,UAAID,eAAe,MAAI;AACrB1G,SAACkG,gBAAiB;AAClBC,mBAASI,iBAAiBK,OAAQF,aAAa1G,EAAE;AAEjDgG,uBAAgB;AAChB5E,gBAAQgF,SAAeS,OAAE;AAAA;;;;AAO/B,QAAI,CAACjB,YAAU;AACb,SAAIlF,mBAAiB;MACnB,MAAAjB,QAAc2D,oBAAmBoC,MAAO;AAGxCnG,wBACGI,SAA6B,KAC/B;AAID,UAAI4D,iBAAA,CAAkB5D,MACpBO,GAACkG,gBAAiB;YACnB;AAEDlG,QAACkG,gBAAiB;AAClB7G,wBAAkB,KAAK;;AACxB;;AAOH,SADiB+D,uBAAA,IAAyBoC,MAAQ,KAClC,IAAE;AAChBxF,OAACkG,gBAAiB;AAClB7G,uBAAkB,KAAK;AAAA;;cAGhBW,EAACV,QAAS,UACnB;QAAI+D,eAAa;AACfrD,OAACkG,gBAAiB;AAClBF,qBAAgB;AAChB5E,cAAQgF,SAAeS,OAAE;eAChBzD,uBAAAvC,aAAkC;AAC3Cb,OAACkG,gBAAiB;AAClBJ,mBAAc;;cAEP9F,EAACV,QAAS,UAAUU,EAACV,QAAS,OACvC;QAAI+D,eAAa;AACfrD,OAACkG,gBAAiB;KAElB,MAAAa,cAAkBpB,aAAYS;AAC9B,SAAI,CAACD,YAAS;KAEd,MAAAa,YAAkB9I,kBAChBiI,aACAnG,EAACV,QAAS,SAAV,UAAA,OACD;AAED,SAAI0H,aAAa,MAAI;AACnB3I,wBAAkB8H,YAAU;AAC5BA,kBAASI,iBAAiBC,cAAeQ,UAAU;;;;KAK5D;AAAAlD,IAAA,KAAApD;AAAAoD,IAAA,KAAAV;AAAAU,IAAA,KAAA8B;AAAA9B,IAAA,KAAA1C;AAAA0C,IAAA,KAAAjD;AAAAiD,IAAA,KAAAT;AAAAS,IAAA,KAAA6B;AAAA7B,IAAA,KAAAgC;AAAAhC,IAAA,KAAAkC;AAAAlC,IAAA,KAAA/D;AAAA+D,IAAA,MAAAiC;AAAAjC,IAAA,MAAAzE;AAAAyE,IAAA,MAAAkB;AAAAlB,IAAA,MAAAK;OAAAA,MAAAL,EAAA;CAxGD,MAAA,EAAAmD,kBAA0BtK,YAAYwH,GAwGpC;CAAC,IAAAG;AAAA,KAAAR,EAAA,QAAAmD,eAAA;AAEI3C,OAAA,EAAA2C,eAAiB;AAAAnD,IAAA,MAAAmD;AAAAnD,IAAA,MAAAQ;OAAAA,MAAAR,EAAA;AAAA,QAAjBQ;;AA8BT,MAAMqD,gBAAgB1L,WACpB,SAAS0L,cACP,EACE7I,IACAsC,UACA+F,IACA1H,OACAC,aACAwC,YACAO,YACA2E,YACAzH,WACAC,cACAuB,MACAkG,MACA1F,aACAsF,eACAM,YACAC,UACA3H,SACAwD,eACAuC,YACA5C,YACA2C,gBAEFiC,KACA;AAGA,QACE,oBAAC;EACC,KAJgBtK,gBAAgBsK,KAAKxG,SAAS;EAK1CtC;EACAqI;EACJ,MAAK;EACE1H;EACMC;EACDwC;EACZ,UAAUO;EACC9C;EACGC;EACd,kBAAgBD,YAAY,KAAKuE;EACvBsD;EACD3H;EACT,QAAQ0H,WAAWzH;EACnB,GAAImH;EACJ,QAAQtF;EACF0F;EACN,aAAWlG;EACX,mBAAgB;EAChB,MAAK;EAKL,iBAAeiG,cAAclD;EAC7B,iBAAeb,iBAAiBuC;EAChC,iBAAc;EACd,iBACEvC,iBAAiBuC,aACb,mBAAmB5C,eACnBkB;EAEN,yBACEb,iBACAuC,cACAD,aAAaS,SAASG,iBAAiBI,cAAc,OACjD,eAAehB,aAAaS,SAASG,iBAAiBI,eACtDzC;GAEN;EAGP;AAKD,MAAa4D,WAAW7L,WAAW,SAAS6L,SAC1CC,OACAH,KACA;AACAG,SAAQhK,cAAcgK,OAAO,EAC3BC,mBAAmB,EAAEvI,OAAO+H,eAAe;AACzC,SAAO;GAELrI,aAAaM,SAAS;GACtBJ,kBAAkB4I,KAAoB;AAEpCT,aAASS,IAAI;;GAEhB;IAEJ,CAAC;CAEF,MAAM,EAAEC,MAAMlL,SAAS;CAEvB,IAAI,EACF8B,IACAqJ,OACAC,OACAC,aACAjB,YACAkB,oBACAC,WACAC,SACArB,IACApG,MACAC,QACAkB,YACAvC,WACAC,eAAe,OACfyB,YACAD,UACAK,YACAD,YACAD,YACAY,WACAR,aACAI,cACAH,eACAC,eACAC,eACAb,QACAC,aACAuH,SACAC,aACAvH,OAAO,UACPmB,YAAY,UACZD,aAAa,MACblC,iBAAiB,SACjBuC,iBAAiB,UACjBjC,QACA1B,QACA4J,aACAxJ,aACAC,oBACAT,YACAY,mBACAC,eACAqB,aACAC,SACApB,aACAgB,mBACAC,qBAAqB,MACrBC,aACAR,OACAG,UAAUqI,gBACV5G,eACAC,eACAQ,YACAF,gBAAgB,GAChBC,mBAAmB,GACnBnD,mBAAmBwJ,2BACnBlG,mBAAmBmG,uBACnBlG,cACA/C,SACAC,QACAC,WACAgJ,MACA,GAAGC,eACDjB;CAGJ,MAAM/E,aAAazG,cAAcc,kBAAkB,EAAE,EAAE,CAAC;AAKxDgE,cAAa/D,gBAAgB+D,WAAW;AACxCG,cAAalE,gBAAgBkE,WAAW;CAGxC,MAAM,EACJ2B,sBACAC,qBACAC,eACAC,kBACAE,wBACAC,uBACAC,iBACAC,sBACEC,iBAAiB;EACnBzE;EACAC;EACAT;EACAY;EACAyD;EACAvB,YAAYJ;EACAG;EACb,CAAC;CAGF,MAAMyH,4BAA4BH,0BAA0B5E;CAE5D,MAAMvB,oBAAoBmG,0BAA0B1I,QAAQ,OAAO;CAGnE,MAAM8I,mBAAmB1M,OAAmB,KAAK;CACjD,MAAM2M,sBAAsB3M,OAAsB,KAAK;AAEvDuC,UAASrB,cAAcsL,YAAYlG,aAAa/D,OAAO;AAEvD6I,OAAMtK,gBAAgBsK,IAAI;AAC1BxG,YAAW9D,gBAAgB8D,SAAS;AACpCK,cAAanE,gBAAgBmE,WAAW;AACxCF,cAAajE,gBAAgBiE,WAAW;CAyDxC,MAAMwI,cAtDiB1N,kBAAgC;AACrD,MAAI,CAAC+D,MAAO,QAAOA;AAEnB,MAAI,CAACuC,kBAAmB,QAAOvC;AAG/B,MAAI8I,iBAAiB9C,QACnB,QAAO8C,iBAAiB9C;AAI1B,MAAI6C,6BAA6B,CAAC7I,OAAO;AACvCiJ,WAAQC,KACN,+GAED;AACD,UAAOlJ;;EAGT,MAAMjB,gBAAckE,gBAChBF,uBACAgG,oBAAoB/C;AAExB,MAAI,CAACjH,cAAa,QAAOiB;EAEzB,MAAMmJ,aAAaC,MAAMC,QAAQrJ,MAAM,GAAGA,QAAQoJ,MAAME,KAAKtJ,MAAM;EACnE,MAAMuJ,eAAeJ,WAAWK,MAAMpJ,SAAS;GAC7C,MAAMlB,MAAOkB,MAAclB,OAAQkB,MAAc2G;AACjD,UAAO7H,OAAO,QAAQuK,OAAOvK,IAAI,KAAKuK,OAAO1K,cAAY;IACzD;AAEF,MAAI,CAACwK,aAAc,QAAOvJ;EAE1B,MAAM0J,SAAS,CACbH,cACA,GAAGJ,WAAW9I,QAAQD,WAAS;GAC7B,MAAMlB,QAAOkB,QAAclB,OAAQkB,QAAc2G;AACjD,UAAO7H,SAAO,QAAQuK,OAAOvK,MAAI,KAAKuK,OAAO1K,cAAY;IACzD,CACH;AAED,MAAIkE,cACF6F,kBAAiB9C,UAAU0D;AAG7B,SAAOA;IACN;EACD1J;EACAuC;EACAsG;EACA9F;EACAE;EACD,CAAC,EAEkC;CAIpC,IAAI9C,WAAsBqI;CAE1B,MAAMoB,WAAWpB;AAEjB,KAAImB,eAAe,OAAOC,aAAa,WACrC,KAAI;AAEFzJ,aADmBiJ,MAAME,KAAKK,YAA6B,CACrCE,KAAKzJ,QAAM0J,QAAQ;GACvC,MAAMC,WAAYH,SAAoCxJ,OAAK;AAC3D,OACEzE,MAAMsO,eAAeF,SAAS,IAC7BA,SAA0B7K,OAAO,KAElC,QAAOvD,MAAMuO,aAAaH,UAA0B,EAClD7K,KAAM6K,UAAkB7K,OAAOkB,QAAMlB,OAAO4K,KAC7C,CAAC;AAGJ,UAAOC;IACP;SACI;AAMV7N,iBAAgB;AACd4M,mBAAiB9C,UAAU;IAC1B,CAAChG,MAAM,CAAC;AAGX9D,iBAAgB;AACd,MAAI,CAAC+G,eAAe;AAClB8F,uBAAoB/C,UAClBjD,wBAAwB,OAAO0G,OAAO1G,qBAAqB,GAAG;AAChE+F,oBAAiB9C,UAAU;;IAE5B,CAAC/C,eAAeF,qBAAqB,CAAC;AAGzC7G,iBAAgB;AACdsG,iBAAeS,cAAc;IAC5B,CAACA,cAAc,CAAC;CAGnB,MAAM,EAAEwB,UAAUE,gBAAgBC,sBAAsBE,qBAAqB;EAC3E9B;EACA3C;EACD,CAAC;CAIF,MAAM8J,uBAAuBzN,aAAa;EACxCyD;EACAH,OAAO2J;EACPS,eAAe;EAChB,CAAC;CAEF,MAAM,EAAEC,WAAWlD,eAAe/J,WAAS,EAAE0E,YAAY,CAAC;CAG1D,MAAMwI,qBAAqBrO,kBAAkB;AAC3C,MAAI,CAAC+G,oBAAoBoC,MAAM,CAC7B,QAAO;GAAEmF,cAAc;GAAOC,gBAAgB;GAAMC,eAAe;GAAG;EAIxE,MAAMC,gBAAgBjG,SAAS0F,qBAAqBQ,WAAW;EAC/D,MAAMC,gBAAwD,EAAE;AAGhE,OAAK,MAAMC,QAAQH,cACjB,KAAIG,KAAKC,SAAS,aAAaD,KAAKE,YAClC;QAAK,MAAMC,SAASH,KAAKE,WACvB,KAAIC,MAAMF,SAAS,OACjBF,eAAcK,KAAK;IACjB/L,KAAK8L,MAAM9L;IACXZ,WAAW0M,MAAM1M,aAAa;IAC/B,CAAC;aAGGuM,KAAKC,SAAS,OACvBF,eAAcK,KAAK;GACjB/L,KAAK2L,KAAK3L;GACVZ,WAAWuM,KAAKvM,aAAa;GAC9B,CAAC;EAIN,MAAMmM,gBAAgBG,cAAcM;EAGpC,MAAMC,aAAaP,cAAcpB,MAC9BpJ,WACCA,OAAK9B,UAAU8M,aAAa,KAC5BpI,oBAAoBoC,MAAM,CAACgG,aAC/B,CAAC;AAED,MAAID,WACF,QAAO;GACLZ,cAAc;GACdC,gBAAgBW,WAAWjM;GAC3BuL;GACD;AAIH,MAAIA,kBAAkB,EACpB,QAAO;GACLF,cAAc;GACdC,gBAAgBI,cAAc,GAAG1L;GACjCuL;GACD;AAGH,SAAO;GAAEF,cAAc;GAAOC,gBAAgB;GAAMC;GAAe;IAClE;EAACzH;EAAqByB;EAAU0F,qBAAqBQ;EAAW,CAAC;CAGpE,MAAMU,sBAAsB1O,eAAe;AAIzC,MAAI2D,mBAAmB;AAErB,OACEC,sBACAyC,uBACAD,wBAAwB,MACxB;AACA0F,gCAA4BzF,oBAA8B;AAC1D,QAAI,CAACM,gBACHF,wBAAuBJ,oBAA2B;AAEpDtD,cAAU;AACVkF,sBAAkB,MAAM;AACxB;;AAIF,OAAI,CAAC6E,OAAOzG,oBAAoB,CAACoC,MAAM,EAAE;AACvCqD,gCAA4B,KAAK;AACjC,QAAI,CAACnF,gBACHF,wBAAuB,KAAK;AAE9B,QAAI,CAACG,kBACHF,uBAAsB,GAAG;AAE3BjE,oBAAgB,GAAG;AACnBM,cAAU;AACVkF,sBAAkB,MAAM;AACxB;;;AAKJ,MAAI,CAACtE,mBAAmB;GACtB,MAAM,EAAEiK,cAAcC,mBAAmBF,oBAAoB;AAG7D,OACEC,gBACAC,kBAAkB,QAClBA,mBAAmBzH,sBACnB;IACA,MAAMgF,UAAQuD,aAAad,eAAe;AAE1C,QAAI,CAAClH,gBACHF,wBAAuBoH,eAAe;AAExC,QAAI,CAACjH,kBACHF,uBAAsB0E,QAAM;AAE9B3I,oBAAgB2I,QAAM;AACtBU,gCAA4B+B,eAAgC;AAC5D9K,cAAU;AACVkF,sBAAkB,MAAM;AACxB;;AAIF,OAAI,CAAC2F,cAAc;IACjB,MAAMgB,eAAevI,oBAAoBoC,MAAM;AAG/C,QAAI5E,eAAe,CAAC+K,cAAc;AAChC9C,iCAA4B,KAAK;AACjC,SAAI,CAACnF,gBACHF,wBAAuB,KAAK;AAE9B,SAAI,CAACG,kBACHF,uBAAsB,GAAG;AAE3BjE,qBAAgB,GAAG;AACnBM,eAAU;AACVkF,uBAAkB,MAAM;AACxB;;IAIF,MAAM4G,YACJzI,wBAAwB,OACpBuI,aAAavI,qBAAqB,GAClC;AAEN,QAAI,CAACQ,kBACHF,uBAAsBmI,UAAU;AAElCpM,oBAAgBoM,UAAU;AAC1B9L,cAAU;AACVkF,sBAAkB,MAAM;AACxB;;;EAKJ,MAAM4G,cACJzI,wBAAwB,OAAOuI,aAAavI,qBAAqB,GAAG;AAEtE,MAAI,CAACQ,kBACHF,uBAAsBmI,YAAU;AAElCpM,kBAAgBoM,YAAU;AAC1B9L,YAAU;AACVkF,oBAAkB,MAAM;GACxB;CAGF,MAAM,EAAE6G,wBAAwBvN,kBAAkB;EAChD+C;EACAG;EACA3B;EACAC,QAAQ2L;EACRvJ;EACD,CAAC;CAEF,IAAI4J,iBAAiBjO,kBAAkB;EAAE0K;EAAWC;EAAS,CAAC;CAG9D,MAAM7C,eAAenJ,OAAY,KAAK;CACtC,MAAMuP,uBAAuBvP,OAAO,EAAE;CAGtC,MAAMkP,eAAerP,aAClBiD,UAAqB;AAEpB,UADaiL,sBAAsBQ,YAAYiB,QAAQ1M,MAAI,GAC9CZ,aAAamL,OAAOvK,MAAI;IAEvC,CAACiL,sBAAsBQ,WACzB,CAAC;CAGD,MAAMkB,wBAAwBlP,UAAU8I,cAAkC;EAExE,MAAMvG,QAAMkK,MAAMC,QAAQ5D,UAAU,GAAGA,UAAU,KAAKA;AAGtD,MAAI,CAACnC,gBACHF,wBAAuBlE,SAAO,KAAK;AAIrC,MAAIA,SAAO,MAAM;AACf0F,qBAAkB,MAAM;GAExB,MAAMmD,UAAQuD,aAAapM,MAAI;AAE/B,OAAI,CAACqE,kBACHF,uBAAsB0E,QAAM;AAE9B3I,mBAAgB2I,QAAM;SACjB;AAEL,OAAI,CAACxE,kBACHF,uBAAsB,GAAG;AAE3BjE,mBAAgB,GAAG;AACnBwF,qBAAkB,MAAM;;AAG1B6D,8BAA4BvJ,MAAqB;AAGjDgE,mBAAiB,MAAM;AAGvB4I,mBAAiB;AACf9K,YAASgF,SAASS,OAAO;KACxB,EAAE;GACL;CAEF,MAAMsF,wBAAwB3P,OAA+B0H,OAAU;CACvE,MAAMkI,2BAA2B5P,OAAO,MAAM;CAG9C,MAAM6P,oBAAoBtP,UACvBiD,MAA2C;EAC1C,MAAMP,UAAQO,EAAEsM,OAAO7M;AAGvB,MAAI,CAACkE,kBACHF,uBAAsBhE,QAAM;AAE9BD,kBAAgBC,QAAM;AAGtBuF,oBADgBvF,QAAM+F,MAAM,CACF8F,SAAS,EAAE;AAIrC,MAAI5K,qBAAqByC,wBAAwB,MAAM;AACrDiJ,4BAAyBhG,UAAU;AACnC,OAAI,CAAC1C,gBACHF,wBAAuB,KAAK;AAE9BqF,+BAA4B,KAAK;;AAInC,MAAI1I,mBAAmB,YAAYV,WAAS,CAAC4D,cAC3CC,kBAAiB,KAAK;GAG3B;CAGD,MAAM,CAACiJ,gBAAgBC,qBAAqB/P,SAAS,MAAM;AAE3DH,iBAAgB;AAEd,MAAIiQ,kBAAkB5I,kBAAmB;AAGzC,MAAIpE,sBAAsB2E,QAAW;AACnCT,yBAAsBlE,kBAAkB;AACxCiN,qBAAkB,KAAK;AACvB;;AAIF,MAAIpN,oBAAoB;AAGtBqE,yBAFciI,aAAatM,mBAAmB,CAElB;AAC5BoN,qBAAkB,KAAK;;IAExB;EACDD;EACA5I;EACApE;EACAH;EACAsM;EACAnL;EACD,CAAC;AAGFjE,iBAAgB;EACd,MAAMmQ,qBAAqBL,yBAAyBhG;AACpDgG,2BAAyBhG,UAAU;AAEnC,MAAI,CAAC1C,mBAAmBC,kBAAmB;AAG3C,MACEwI,sBAAsB/F,YAAYlC,UAClCiI,sBAAsB/F,YAAYjD,qBAElC;AAGFgJ,wBAAsB/F,UAAUjD;AAIhC,MAAIsJ,sBAAsBtJ,wBAAwB,KAAM;AAOxDM,wBAHEN,wBAAwB,OAAOuI,aAAavI,qBAAqB,GAAG,GAGlC;IACnC;EACDO;EACAC;EACAR;EACAC;EACAsI;EACD,CAAC;CAGF,MAAMiB,mBAAmB5P,UAAUiD,QAA0C;AAE3EuH,aAAW1H,UAAUG,IAAS;AAE9B,MAAIG,mBAAmB,WAAW,CAACkD,cACjCC,kBAAiB,KAAK;GAExB;CAGF,MAAMsJ,kBAAkB7P,UAAUiD,QAA0C;AAC1EuH,aAAWzH,SAASE,IAAS;GAC7B;CAMF,IAAI8M,kBAAkBjM,gBAHPH,oBACX0C,wBAAwB,KACxBD,wBAAwB,SACqB,CAACjB,cAAc,CAACO;CAGjE,MAAMmD,aAAarJ,cAAc;AAC/B,MAAI,CAACgE,SAAU,QAAO;AACtB,MAAI,CAACiJ,MAAMC,QAAQlJ,SAAS,IAAIA,aAAa,KAAM,QAAO;AAG1D,MAAIgK,sBAAsBQ,YAAY;GACpC,MAAMD,kBAAgBjG,SAAS0F,qBAAqBQ,WAAW;AAQ/D,UAPoBvB,MAAME,KAAKoB,gBAAc,CAACkC,SAAS/B,WAAc;AACnE,QAAIA,OAAKC,SAAS,aAAaD,OAAKE,WAClC,QAAO,CAAC,GAAGF,OAAKE,WAAW;AAG7B,WAAO,CAACF,OAAK;KACb,CACiBK,SAAS;;AAI9B,SAAO9B,MAAMC,QAAQlJ,SAAS,GAAGA,SAAS+K,SAAS,IAAI;IACtD;EAAC/K;EAAUgK,sBAAsBQ;EAAYlG;EAAS,CAAC;CAG1D,IAAIoI,aAAalQ,eAAe;AAE9B,MAAI,CAAC4G,kBACHF,uBAAsB,GAAG;AAE3BjE,kBAAgB,GAAG;AAGnB,MAAI,CAACkE,gBACHF,wBAAuB,KAAK;AAE9BqF,8BAA4B,KAAK;AAGjC,MAAIxF,cACFC,kBAAiB,MAAM;AAIzBlC,WAASgF,SAASS,OAAO;AAEzB/F,aAAW;GACX;CAGF,MAAM,EAAEmG,kBAAkBhB,oBAAoB;EAC5C5C;EACAsC;EACAC;EACAlF;EACA0C;EACAvC;EACAxB,mBAAmB4M;EACnBnG,cAAcmH;EACdlH,qBAAqBzC,iBAAiB,KAAK;EAC3C0C,sBAAsB1C,iBAAiB,MAAM;EAC7ClC;EACA4D;EACAjF;EACD,CAAC;AAEF,KAAIgB,MAAM;AACRA,SAAO,oBAAC;GAAI,gBAAa;aAAaA;IAAW;AAEjD,MAAIC,OACFA,UACE,8CACGD,MACAC,UAEJ;MAEDA,UAASD;;CAIb,IAAIsG,OAAO9K,eACF;EACL,GAAGuB,kBAAkB;GAAEyK;GAAWC;GAAS,CAAC;EAC5C0E,UAAUhL;EACViL,SAAS;EACTC,SAAS3C;EACT4C,SAASlL;EACTnB,QAAQ,CAAC,CAACA;EACVC,QAAQ;EACRqM,WAAWR;EACZ,GACD;EACEvE;EACAC;EACAtG;EACAuI;EACAtI;EACAnB;EACA8L;EAEJ,CAAC;CAED,MAAMS,gBAAgBlM,YAAY+E,SAASoH;CAE3C,MAAMC,oBAAoBC,QAAQrK,iBAAiBuC,WAAW;AAG9DtJ,iBAAgB;AACd,MAAI+G,iBAAiB,CAACuC,WACpBtC,kBAAiB,MAAM;IAExB,CAACD,eAAeuC,WAAW,CAAC;CAE/B,MAAM+H,qBAAqBtR,kBAAkB;AAC3C,MAAI,CAACoR,kBAAmB;EAExB,MAAMtH,YAAYR,aAAaS;AAC/B,MAAI,CAACD,UAAW;EAEhB,MAAM,EAAEI,kBAAkBwE,YAAY3I,cAAcwL,uBAClDzH;AACF,MAAI,CAACI,oBAAoB,CAACwE,WAAY;EAEtC,MAAM8C,wBAAoC;AACxC,QAAK,MAAM5C,UAAQF,WACjB,KAAIE,OAAKC,SAAS,QAChB;QAAI,CAAC9I,cAAc0L,IAAI7C,OAAK3L,IAAI,CAAE,QAAO2L,OAAK3L;cACrC2L,OAAKE,YACd;SAAK,MAAMC,WAASH,OAAKE,WACvB,KAAIC,QAAMF,SAAS,UAAU,CAAC9I,cAAc0L,IAAI1C,QAAM9L,IAAI,CACxD,QAAO8L,QAAM9L;;AAKrB,UAAO;;AAGT,MAAIsO,mBAAoBA,oBAAmBxH,UAAU;EAGrD,MAAM2H,oBAAoBxH,iBAAiBI;EAC3C,IAAIqH,eAAe;AAEnB,MAAID,qBAAqB,KAEvBC,gBAAe;WAIX,EADsBjD,WAAWiB,QAAQ+B,kBAAkB,IAAI,MAGjEC,gBAAe;AAInB,MAAIA,cAAc;GAChB,IAAIE,aAAyB;AAG7B,OACE/K,wBAAwB,QACxB4H,WAAWiB,QAAQ7I,qBAAqB,IAAI,KAE5C+K,cAAa/K;OAGb+K,cAAaL,iBAAiB;AAGhC,OAAIK,cAAc,KAChB3H,kBAAiBC,cAAc0H,WAAW;;IAG7C,CAACT,mBAAmBtK,qBAAqB,CAAC;AAE7C5F,yBAAsB;AACpB,MAAI,CAACkQ,kBAAmB;AACxB1B,uBAAqB3F,UAAU;EAE/B,MAAM+H,aAAa;AACjB,OAAI,CAACV,kBAAmB;AACxBE,uBAAoB;AACpB5B,wBAAqB3F,WAAW;AAEhC,OACE2F,qBAAqB3F,UAAU,KAC/BT,aAAaS,SAASG,kBAAkBI,cAAc,KAEtDyH,uBAAsBD,KAAK;;AAI/BC,8BAA4BA,sBAAsBD,KAAK,CAAC;IACvD,CAACV,mBAAmBE,mBAAmB,CAAC;CAE3C,MAAMU,gBACJ,qBAAC;EACC,KAAKhN;EACCgG;EACEtI;EACR,OAAO,EACLuP,QAAQ7D,YAAY,IAAI,WACzB;EACD,aAAWtJ;EACX,GAAI0K;;GAEH7K,SAAS,oBAAC;IAAI,gBAAa;cAAUA;KAAa,GAAG;GACtD,oBAAC;IACC,IAAIlC,MAAM;IACAsC;IACN+F;IACJ,OAAO/D;IACM1D;IACDwC;IACAO;IACA2E;IACDzH;IACGC;IACRuB;IACAkG;IACO1F;IACEsF;IACf,YAAY;KAAE,GAAGM;KAAYzH,QAAQ8M;KAAiB;IACvCvJ;IACHuC;IACA5C;IACE2C;IACd,UAAU0G;IACV,SAASM;KAAiB;GAE5B,qBAAC;IAAI,gBAAa;;KACfjK,mBAAmB,WAAWzB,SAAS;KACvCkB,YAAY,oBAAC,eAAY,gBAAa,cAAc,GAAG2J;KACvDpJ,mBAAmB,UAAUzB,SAAS;KACtC6L,mBACC,oBAAC,gBAAK;MACJ,MAAM,oBAAC,cAAY;MACb3L;MAKN,IAAG;MACH,mBAAiBD,cAAc,KAAKgD;MACpC,wBAAqB;MACrB,cAAYgE,EAAE,uBAAuB,cAAc;MACnD,SAAS+E;OAEZ;KACA,CAAC/L,cACA,oBAAC,gBAAK;MACJ,KAAKO;MACL;MACA,MAAM,oBAAC,iBAAc,IAAI4B,gBAAgB,OAAO,SAAU;MAC1D,IAAG;MACH,MAAM;OACJkL,SAASlL;OACT6J,UAAUhL;OACVmL,SAASlL;OACV;MACD,aAAWhB;MACCe;MACZ,QAAQN;MACR,iBAAeyB;MACf,iBAAc;MACd,cAAY6E,EAAE,wBAAwB,eAAe;MACrD,eAAe;AACb,WAAI,CAAChG,YAAY;QACf,MAAMsM,WAAW,CAACnL;AAClBC,yBAAiBkL,SAAS;AAC1B,YAAIA,UAAU;AACZpN,kBAASgF,SAASS,OAAO;AAEzB,aAAI,CAACjB,WACHZ,mBAAkB,MAAM;;;;OAKhC,GACA;;KACD;GACL,oBAAC;IACC,QAAQyI;IACR,YAAYpM;IACAG;IACAD;IACDe;IACCD;IACGE;IACGC;IACH+K;IACf,WAAW,mBAAmBvK;IACflB;IACAD;IACDE;IACCC;IACAC;IACf,aAAakB;IACDjB;IACZ,cAAc6F,MAAM3F;IACpB,OAAO2H;IACOpE;IACPwC;IACP,WAAYJ,MAAc;IACL8D;IACrB,QAAQhH;IACF1D;IACN,mBAAmB8K;IACnB,eAAe3I,iBAAiB,MAAM;IAErC/C;KACa;;GAEnB;CAED,MAAM,EAAEA,UAAUkO,GAAG,GAAGC,yBAAyB3G;AAEjD,QAAO/J,cACLqQ,eACAzG,KACA8G,qBACD;EACD;AAIF5G,SAASlK,OAAOA;AAEhBkK,SAASlL,UAAUC;AAEnB+R,OAAOC,eAAe/G,UAAU,iBAAiB;CAC/CrI,OAAO;CACPqP,YAAY;CACZC,cAAc;CACf,CAAC"}

package/dist/components/fields/CommandTextArea/CommandTextArea.d.ts

@@ -55,11 +55,31 @@ interface CubeCommandTextAreaProps<T> extends Omit<CubeTextInputBaseProps, 'chil
   /**
    * Fired when the user picks a command (Enter/Tab/click). The option's
    * `textValue` is also inserted into the textarea regardless.
+   *
+   * `start` / `end` locate that insertion in the value handed to `onChange`, so
+   * a consumer can anchor its own record to the picked item rather than
+   * re-deriving the offset by searching the new value for the inserted text —
+   * a search that cannot tell two occurrences apart when one option's text is a
+   * prefix of another's.
    */
   onCommand?: (key: Key$1, item: {
-    textValue: string;
+    textValue: string; /** Index in the new value where the inserted text starts. */
+    start: number; /** Index where it ends, excluding any inserted trailing space. */
+    end: number;
     [k: string]: any;
   }) => void;
+  /**
+   * Fired when the command popover opens or closes. Lets a consumer with its own
+   * `Enter` behaviour tell "pick the focused option" from "submit" without
+   * reading `aria-expanded` off the DOM.
+   */
+  onOpenChange?: (isOpen: boolean) => void;
+  /**
+   * Fired when the active trigger token changes, with the component's own
+   * caret-aware scan result — `null` once the caret leaves a token. Saves a
+   * consumer running a second, approximate scan of the same value.
+   */
+  onActiveTokenChange?: (token: ActiveToken | null) => void;
   /** Insert a trailing space after the chosen command. Defaults to true. */
   insertSpaceAfter?: boolean;
   /** Keys of disabled options. */

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | 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";
@@ -70,7 +70,7 @@ function CommandTextArea(props, ref) {
 			value: value?.toString() ?? ""
 		})
 	});
-	let { qa, autoSize = false, isDisabled = false, isReadOnly = false, isRequired = false, onChange, maxRows = 10, rows = 3, labelProps: userLabelProps, inputProps: userInputProps, inputRef: propsInputRef, value, defaultValue, placeholder, items, children: renderChildren, triggers = DEFAULT_TRIGGERS, filter, onCommand, insertSpaceAfter = true, disabledKeys, direction = "top", shouldFlip = true, overlayOffset = 8, containerPadding = 8, overlayStyles, listBoxStyles, optionStyles, sectionStyles, headingStyles, wrapperRef: propsWrapperRef, popoverRef: propsPopoverRef, listBoxRef: propsListBoxRef, listStateRef: propsListStateRef, onKeyDown, onFocus, onBlur, ...otherProps } = props;
+	let { qa, autoSize = false, isDisabled = false, isReadOnly = false, isRequired = false, onChange, maxRows = 10, rows = 3, labelProps: userLabelProps, inputProps: userInputProps, inputRef: propsInputRef, value, defaultValue, placeholder, items, children: renderChildren, triggers = DEFAULT_TRIGGERS, filter, onCommand, onOpenChange, onActiveTokenChange, insertSpaceAfter = true, disabledKeys, direction = "top", shouldFlip = true, overlayOffset = 8, containerPadding = 8, overlayStyles, listBoxStyles, optionStyles, sectionStyles, headingStyles, wrapperRef: propsWrapperRef, popoverRef: propsPopoverRef, listBoxRef: propsListBoxRef, listStateRef: propsListStateRef, onKeyDown, onFocus, onBlur, ...otherProps } = props;
 	rows = Math.max(rows, 1);
 	maxRows = Math.max(maxRows, rows);
 	const localInputRef = useRef(null);
@@ -139,6 +139,19 @@ function CommandTextArea(props, ref) {
 		setDismissedToken((prev) => prev != null && activeToken?.token !== prev ? null : prev);
 	}, [activeToken?.token]);
 	const shouldShowPopover = !!activeToken && activeToken.token !== dismissedToken && filteredCount > 0;
+	const notifiedOpenRef = useRef(false);
+	useEffect(() => {
+		if (notifiedOpenRef.current === shouldShowPopover) return;
+		notifiedOpenRef.current = shouldShowPopover;
+		onOpenChange?.(shouldShowPopover);
+	}, [shouldShowPopover, onOpenChange]);
+	const activeTokenSignature = activeToken ? `${activeToken.trigger.char}\u0000${activeToken.token}\u0000${activeToken.start}\u0000${activeToken.end}` : null;
+	const notifiedTokenRef = useRef(null);
+	useEffect(() => {
+		if (notifiedTokenRef.current === activeTokenSignature) return;
+		notifiedTokenRef.current = activeTokenSignature;
+		onActiveTokenChange?.(activeToken ?? null);
+	}, [activeTokenSignature, onActiveTokenChange]);
 	const { anchorRef: caretAnchorRef, positionApiRef } = useCaretAnchor({
 		inputRef,
 		wrapperRef,
@@ -189,9 +202,11 @@ function CommandTextArea(props, ref) {
 		const textValue = getItemTextValue(key);
 		const token = activeToken;
 		const el = inputRef.current;
+		let start = Math.min(caret, effectiveValue.length);
 		if (token) {
 			const next = effectiveValue.slice(0, token.start) + textValue + (insertSpaceAfter ? " " : "") + effectiveValue.slice(token.end);
 			const caretPos = token.start + textValue.length + (insertSpaceAfter ? 1 : 0);
+			start = token.start;
 			pendingCaretRef.current = caretPos;
 			handleChange(next);
 			if (el) {
@@ -201,16 +216,20 @@ function CommandTextArea(props, ref) {
 				} catch {}
 			}
 		} else if (el) {
-			const start = el.selectionStart ?? effectiveValue.length;
-			const end = el.selectionEnd ?? effectiveValue.length;
-			const next = effectiveValue.slice(0, start) + textValue + (insertSpaceAfter ? " " : "") + effectiveValue.slice(end);
-			pendingCaretRef.current = start + textValue.length + (insertSpaceAfter ? 1 : 0);
+			const selectionStart = el.selectionStart ?? effectiveValue.length;
+			const selectionEnd = el.selectionEnd ?? effectiveValue.length;
+			const next = effectiveValue.slice(0, selectionStart) + textValue + (insertSpaceAfter ? " " : "") + effectiveValue.slice(selectionEnd);
+			const caretPos = selectionStart + textValue.length + (insertSpaceAfter ? 1 : 0);
+			start = selectionStart;
+			pendingCaretRef.current = caretPos;
 			handleChange(next);
 		}
 		setDismissedToken(null);
 		onCommand?.(key, {
 			textValue,
-			...(listState?.collection)?.getItem(key)?.props ?? {}
+			...(listState?.collection)?.getItem(key)?.props ?? {},
+			start,
+			end: start + textValue.length
 		});
 	});
 	const onKeyDownHandler = useCallback((e) => {