@cube-dev/ui-kit 0.0.0-canary-8dfe8a6 → 0.0.0-canary-143cd5a

package/es/components/fields/ComboBox/ComboBox.js

@@ -1,15 +1,15 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8dfe8a6
+ * @cube-dev/ui-kit v0.0.0-canary-143cd5a
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { cloneElement, forwardRef, useEffect, useMemo, } from 'react';
-import { useButton, useComboBox, useFilter, useHover, useOverlayPosition, } from 'react-aria';
-import { Section as BaseSection, useComboBoxState } from 'react-stately';
-import { useEvent } from '../../../_internal/index';
+import React, { Children, cloneElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { useFilter, useKeyboard, useOverlay, useOverlayPosition, } from 'react-aria';
+import { Section as BaseSection, Item } from 'react-stately';
+import { useEvent } from '../../../_internal';
 import { CloseIcon, DownIcon, LoadingIcon } from '../../../icons';
 import { useProviderProps } from '../../../provider';
 import { BASE_STYLES, COLOR_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
@@ -19,12 +19,11 @@ import { useFocus } from '../../../utils/react/interactions';
 import { useEventBus } from '../../../utils/react/useEventBus';
 import { ItemAction } from '../../actions';
 import { useFieldProps, useFormProps, wrapWithField } from '../../form';
-import { Item } from '../../Item';
 import { OverlayWrapper } from '../../overlays/OverlayWrapper';
 import { InvalidIcon } from '../../shared/InvalidIcon';
 import { ValidIcon } from '../../shared/ValidIcon';
-import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES } from '../index';
-import { ListBoxPopup } from '../Select';
+import { ListBox } from '../ListBox/ListBox';
+import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES, } from '../TextInput/TextInputBase';
 const ComboBoxWrapperElement = tasty({
     styles: INPUT_WRAPPER_STYLES,
 });
@@ -62,7 +61,320 @@ const TriggerElement = tasty({
         cursor: 'pointer',
     },
 });
+const ComboBoxOverlayElement = tasty({
+    qa: 'ComboBoxOverlay',
+    styles: {
+        display: 'grid',
+        gridRows: '1sf',
+        width: '30x max-content 50vw',
+        maxHeight: '50vh',
+        overflow: 'auto',
+        background: '#white',
+        radius: '1cr',
+        shadow: '0px .5x 2x #shadow',
+        padding: '0',
+        border: '#dark.08',
+        outline: '#purple-03.0',
+    },
+});
 const PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];
+function useComboBoxState({ selectedKey, defaultSelectedKey, inputValue, comboBoxId, }) {
+    // Get event bus for menu synchronization
+    const { emit, on } = useEventBus();
+    // Internal state for uncontrolled mode
+    const [internalSelectedKey, setInternalSelectedKey] = useState(defaultSelectedKey ?? null);
+    const [internalInputValue, setInternalInputValue] = useState('');
+    const isControlledKey = selectedKey !== undefined;
+    const isControlledInput = inputValue !== undefined;
+    const effectiveSelectedKey = isControlledKey
+        ? selectedKey
+        : internalSelectedKey;
+    const effectiveInputValue = isControlledInput
+        ? inputValue
+        : internalInputValue;
+    // Popover state
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+    // Listen for other menus opening and close this one if needed
+    useEffect(() => {
+        const unsubscribe = on('popover:open', (data) => {
+            if (data.menuId !== comboBoxId && isPopoverOpen) {
+                setIsPopoverOpen(false);
+            }
+        });
+        return unsubscribe;
+    }, [on, comboBoxId, isPopoverOpen]);
+    // Emit event when this combobox opens
+    useEffect(() => {
+        if (isPopoverOpen) {
+            emit('popover:open', { menuId: comboBoxId });
+        }
+    }, [isPopoverOpen, emit, comboBoxId]);
+    return {
+        effectiveSelectedKey,
+        effectiveInputValue,
+        isPopoverOpen,
+        setIsPopoverOpen,
+        setInternalSelectedKey,
+        setInternalInputValue,
+        isControlledKey,
+        isControlledInput,
+    };
+}
+function useComboBoxFiltering({ children, effectiveInputValue, filter, }) {
+    const [isFilterActive, setIsFilterActive] = useState(false);
+    const { contains } = useFilter({ sensitivity: 'base' });
+    const textFilterFn = useMemo(() => (filter === false ? () => true : filter || contains), [filter, contains]);
+    // Filter children based on input value
+    const filteredChildren = useMemo(() => {
+        const term = effectiveInputValue.trim();
+        if (!isFilterActive || !term || !children) {
+            return children;
+        }
+        const nodeMatches = (node) => {
+            if (!node?.props)
+                return false;
+            const textValue = node.props.textValue ||
+                (typeof node.props.children === 'string' ? node.props.children : '') ||
+                String(node.props.children || '');
+            return textFilterFn(textValue, term);
+        };
+        const filterChildren = (childNodes) => {
+            if (!childNodes)
+                return null;
+            const childArray = Array.isArray(childNodes) ? childNodes : [childNodes];
+            const filteredNodes = [];
+            childArray.forEach((child) => {
+                if (!child || typeof child !== 'object') {
+                    return;
+                }
+                if (child.type === BaseSection ||
+                    child.type?.displayName === 'Section') {
+                    const sectionChildren = Array.isArray(child.props.children)
+                        ? child.props.children
+                        : [child.props.children];
+                    const filteredSectionChildren = sectionChildren.filter((sectionChild) => {
+                        return (sectionChild &&
+                            typeof sectionChild === 'object' &&
+                            nodeMatches(sectionChild));
+                    });
+                    if (filteredSectionChildren.length > 0) {
+                        filteredNodes.push(cloneElement(child, {
+                            key: child.key,
+                            children: filteredSectionChildren,
+                        }));
+                    }
+                }
+                else if (child.type === Item) {
+                    if (nodeMatches(child)) {
+                        filteredNodes.push(child);
+                    }
+                }
+                else if (nodeMatches(child)) {
+                    filteredNodes.push(child);
+                }
+            });
+            return filteredNodes;
+        };
+        return filterChildren(children);
+    }, [isFilterActive, children, effectiveInputValue, textFilterFn]);
+    return {
+        filteredChildren,
+        isFilterActive,
+        setIsFilterActive,
+    };
+}
+function useComboBoxKeyboard({ isPopoverOpen, listStateRef, hasResults, allowsCustomValue, effectiveInputValue, isClearable, onSelectionChange, onClearValue, onOpenPopover, onClosePopover, inputRef, }) {
+    const { keyboardProps } = useKeyboard({
+        onKeyDown: (e) => {
+            if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                e.preventDefault();
+                // Open popover if closed
+                if (!isPopoverOpen) {
+                    onOpenPopover();
+                    return;
+                }
+                const listState = listStateRef.current;
+                if (!listState)
+                    return;
+                const { selectionManager, collection, disabledKeys } = listState;
+                // Helper to collect visible item keys (supports sections)
+                const collectVisibleKeys = (nodes, out) => {
+                    for (const node of nodes) {
+                        if (node.type === 'item') {
+                            if (!disabledKeys?.has(node.key)) {
+                                out.push(node.key);
+                            }
+                        }
+                        else if (node.childNodes) {
+                            collectVisibleKeys(node.childNodes, out);
+                        }
+                    }
+                };
+                const visibleKeys = [];
+                collectVisibleKeys(collection, visibleKeys);
+                if (visibleKeys.length === 0)
+                    return;
+                const isArrowDown = e.key === 'ArrowDown';
+                const currentKey = selectionManager.focusedKey;
+                let nextKey = null;
+                if (currentKey == null) {
+                    nextKey = isArrowDown
+                        ? visibleKeys[0]
+                        : visibleKeys[visibleKeys.length - 1];
+                }
+                else {
+                    const currentIndex = visibleKeys.indexOf(currentKey);
+                    if (currentIndex !== -1) {
+                        const newIndex = currentIndex + (isArrowDown ? 1 : -1);
+                        if (newIndex >= 0 && newIndex < visibleKeys.length) {
+                            nextKey = visibleKeys[newIndex];
+                        }
+                    }
+                    else {
+                        nextKey = isArrowDown
+                            ? visibleKeys[0]
+                            : visibleKeys[visibleKeys.length - 1];
+                    }
+                }
+                if (nextKey != null) {
+                    if (listState.lastFocusSourceRef) {
+                        listState.lastFocusSourceRef.current = 'keyboard';
+                    }
+                    selectionManager.setFocusedKey(nextKey);
+                }
+            }
+            else if (e.key === 'Enter') {
+                if (!hasResults) {
+                    e.preventDefault();
+                    if (allowsCustomValue) {
+                        const value = effectiveInputValue;
+                        onSelectionChange(value ?? null);
+                    }
+                    else {
+                        onSelectionChange(null);
+                    }
+                    return;
+                }
+                if (isPopoverOpen) {
+                    const listState = listStateRef.current;
+                    if (!listState)
+                        return;
+                    const keyToSelect = listState.selectionManager.focusedKey;
+                    if (keyToSelect != null) {
+                        e.preventDefault();
+                        listState.selectionManager.select(keyToSelect, e);
+                        // Ensure the popover closes even if selection stays the same
+                        onClosePopover();
+                        setTimeout(() => inputRef.current?.focus(), 0);
+                    }
+                }
+            }
+            else if (e.key === 'Escape') {
+                if (isPopoverOpen) {
+                    e.preventDefault();
+                    onClosePopover();
+                    inputRef.current?.focus();
+                }
+                else if (effectiveInputValue && isClearable) {
+                    e.preventDefault();
+                    onClearValue();
+                }
+            }
+            else if (e.key === 'Home' || e.key === 'End') {
+                if (isPopoverOpen) {
+                    e.preventDefault();
+                    const listState = listStateRef.current;
+                    if (!listState)
+                        return;
+                    const { selectionManager, collection, disabledKeys } = listState;
+                    // Helper to collect visible item keys (supports sections)
+                    const collectVisibleKeys = (nodes, out) => {
+                        for (const node of nodes) {
+                            if (node.type === 'item') {
+                                if (!disabledKeys?.has(node.key)) {
+                                    out.push(node.key);
+                                }
+                            }
+                            else if (node.childNodes) {
+                                collectVisibleKeys(node.childNodes, out);
+                            }
+                        }
+                    };
+                    const visibleKeys = [];
+                    collectVisibleKeys(collection, visibleKeys);
+                    if (visibleKeys.length === 0)
+                        return;
+                    const targetKey = e.key === 'Home'
+                        ? visibleKeys[0]
+                        : visibleKeys[visibleKeys.length - 1];
+                    if (listState.lastFocusSourceRef) {
+                        listState.lastFocusSourceRef.current = 'keyboard';
+                    }
+                    selectionManager.setFocusedKey(targetKey);
+                }
+            }
+        },
+    });
+    return { keyboardProps };
+}
+const ComboBoxInput = forwardRef(function ComboBoxInput({ inputRef, value, placeholder, isDisabled, isReadOnly, autoFocus, size, mods, inputStyles, keyboardProps, focusProps, onChange, onFocus, isPopoverOpen, hasResults, comboBoxId, listStateRef, }, ref) {
+    const combinedRef = useCombinedRefs(ref, inputRef);
+    return (_jsx(InputElement, { ref: combinedRef, qa: "Input", type: "text", value: value, placeholder: placeholder, disabled: isDisabled, readOnly: isReadOnly, autoFocus: autoFocus, "data-autofocus": autoFocus ? '' : undefined, onChange: onChange, onFocus: onFocus, onBlur: focusProps.onBlur, ...keyboardProps, styles: inputStyles, mods: mods, "data-size": size, role: "combobox", "aria-expanded": isPopoverOpen && hasResults, "aria-haspopup": "listbox", "aria-controls": isPopoverOpen && hasResults
+            ? `ComboBoxListBox-${comboBoxId}`
+            : undefined, "aria-activedescendant": isPopoverOpen &&
+            hasResults &&
+            listStateRef.current?.selectionManager.focusedKey != null
+            ? `ListBoxItem-${listStateRef.current?.selectionManager.focusedKey}`
+            : undefined }));
+});
+function ComboBoxOverlay({ isOpen, triggerRef, popoverRef, listBoxRef, direction, shouldFlip, overlayOffset, comboBoxWidth, comboBoxId, overlayStyles, listBoxStyles, optionStyles, sectionStyles, headingStyles, effectiveSelectedKey, isDisabled, disabledKeys, items, children, listStateRef, onSelectionChange, onClose, label, ariaLabel, }) {
+    // Overlay positioning
+    const { overlayProps: overlayPositionProps, placement, updatePosition, } = useOverlayPosition({
+        targetRef: triggerRef,
+        overlayRef: popoverRef,
+        placement: `${direction} start`,
+        shouldFlip,
+        isOpen,
+        offset: overlayOffset,
+    });
+    // Overlay behavior (dismiss on outside click, escape)
+    const { overlayProps: overlayBehaviorProps } = useOverlay({
+        onClose,
+        shouldCloseOnBlur: true,
+        isOpen,
+        isDismissable: true,
+        shouldCloseOnInteractOutside: (el) => {
+            const menuTriggerEl = el.closest('[data-popover-trigger]');
+            if (!menuTriggerEl)
+                return true;
+            if (menuTriggerEl === triggerRef?.current)
+                return true;
+            return false;
+        },
+    }, popoverRef);
+    // Update position when overlay opens
+    useLayoutEffect(() => {
+        if (isOpen) {
+            // Use double RAF to ensure layout is complete before positioning
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    updatePosition?.();
+                });
+            });
+        }
+    }, [isOpen, updatePosition]);
+    if (!isOpen)
+        return null;
+    return (_jsx(OverlayWrapper, { isOpen: true, placement: placement, children: _jsx(ComboBoxOverlayElement, { ...mergeProps(overlayPositionProps, overlayBehaviorProps), ref: popoverRef, styles: overlayStyles, style: {
+                minWidth: comboBoxWidth ? `${comboBoxWidth}px` : undefined,
+                ...overlayPositionProps.style,
+            }, children: _jsx(ListBox, { ref: listBoxRef, focusOnHover: true, disableSelectionToggle: true, id: `ComboBoxListBox-${comboBoxId}`, "aria-label": ariaLabel || (typeof label === 'string' ? label : 'Options'), selectedKey: effectiveSelectedKey, selectionMode: "single", isDisabled: isDisabled, disabledKeys: disabledKeys, shouldUseVirtualFocus: true, items: items, styles: listBoxStyles, optionStyles: optionStyles, sectionStyles: sectionStyles, headingStyles: headingStyles, stateRef: listStateRef, mods: {
+                    popover: true,
+                }, onSelectionChange: onSelectionChange, children: children }) }) }));
+}
+// ============================================================================
+// Main Component: ComboBox
+// ============================================================================
 export const ComboBox = forwardRef(function ComboBox(props, ref) {
     props = useProviderProps(props);
     props = useFormProps(props);
@@ -86,37 +398,16 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
             };
         },
     });
-    let { qa, label, extra, labelStyles, isRequired, necessityIndicator, validationState, icon, prefix, isDisabled, multiLine, autoFocus, wrapperRef, inputRef, triggerRef, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, optionStyles, triggerStyles, listBoxStyles, overlayStyles, wrapperStyles, suffix, hideTrigger, message, description, size = 'medium', autoComplete = 'off', direction = 'bottom', shouldFlip = true, menuTrigger = 'input', suffixPosition = 'before', loadingState, filter, styles, labelSuffix, selectedKey, defaultSelectedKey, isClearable, ...otherProps } = props;
-    let isAsync = loadingState != null;
-    let { contains } = useFilter({ sensitivity: 'base' });
-    let comboBoxStateProps = {
-        ...props,
-        defaultFilter: filter || contains,
-        filter: undefined,
-        allowsEmptyCollection: isAsync,
-        menuTrigger,
-    };
-    let state = useComboBoxState(comboBoxStateProps);
+    let { qa, label, extra, labelStyles, isRequired, necessityIndicator, validationState, icon, prefix, isDisabled, autoFocus, wrapperRef, inputRef, triggerRef, popoverRef, listBoxRef, isLoading, inputStyles, optionStyles, triggerStyles, listBoxStyles, overlayStyles, wrapperStyles, suffix, hideTrigger, message, description, size = 'medium', direction = 'bottom', shouldFlip = true, popoverTrigger = 'input', suffixPosition = 'before', filter, styles, labelSuffix, selectedKey, defaultSelectedKey, inputValue, onInputChange, isClearable, onClear, placeholder, allowsCustomValue, emptyLabel, items, children: renderChildren, customValueProps, newCustomValueProps, sectionStyles, headingStyles, isReadOnly, overlayOffset = 8, onSelectionChange: externalOnSelectionChange, ...otherProps } = props;
     // Generate a unique ID for this combobox instance
     const comboBoxId = useMemo(() => generateRandomId(), []);
-    // Get event bus for menu synchronization
-    const { emit, on } = useEventBus();
-    // Listen for other menus opening and close this one if needed
-    useEffect(() => {
-        const unsubscribe = on('popover:open', (data) => {
-            // If another menu is opening and this combobox is open, close this one
-            if (data.menuId !== comboBoxId && state.isOpen) {
-                state.close();
-            }
-        });
-        return unsubscribe;
-    }, [on, comboBoxId, state]);
-    // Emit event when this combobox opens
-    useEffect(() => {
-        if (state.isOpen) {
-            emit('popover:open', { menuId: comboBoxId });
-        }
-    }, [state.isOpen, emit, comboBoxId]);
+    // State management hook
+    const { effectiveSelectedKey, effectiveInputValue, isPopoverOpen, setIsPopoverOpen, setInternalSelectedKey, setInternalInputValue, isControlledKey, isControlledInput, } = useComboBoxState({
+        selectedKey,
+        defaultSelectedKey,
+        inputValue,
+        comboBoxId,
+    });
     styles = extractStyles(otherProps, PROP_STYLES, styles);
     ref = useCombinedRefs(ref);
     wrapperRef = useCombinedRefs(wrapperRef);
@@ -124,62 +415,171 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
     triggerRef = useCombinedRefs(triggerRef);
     popoverRef = useCombinedRefs(popoverRef);
     listBoxRef = useCombinedRefs(listBoxRef);
-    let { overlayProps, placement, updatePosition } = useOverlayPosition({
-        targetRef: triggerRef,
-        overlayRef: popoverRef,
-        scrollRef: listBoxRef,
-        placement: `${direction} end`,
-        shouldFlip: shouldFlip,
-        isOpen: state.isOpen,
-        onClose: state.close,
-        offset: overlayOffset,
-    });
-    let { labelProps, inputProps, listBoxProps, buttonProps: triggerProps, } = useComboBox({
-        ...comboBoxStateProps,
-        inputRef,
-        buttonRef: triggerRef,
-        listBoxRef,
-        popoverRef,
-        menuTrigger,
-    }, state);
-    let { isFocused, focusProps } = useFocus({ isDisabled });
-    let { hoverProps, isHovered } = useHover({ isDisabled });
-    // Get props for the button based on the trigger props from useComboBox
-    let { buttonProps, isPressed: isTriggerPressed } = useButton(triggerProps, triggerRef);
-    let { hoverProps: triggerHoverProps, isHovered: isTriggerHovered } = useHover({ isDisabled });
-    let { focusProps: triggerFocusProps, isFocused: isTriggerFocused } = useFocus({ isDisabled }, true);
-    useLayoutEffect(() => {
-        if (state.isOpen) {
-            updatePosition();
+    // Preserve the original `children` (may be a render function) before we
+    // potentially overwrite it.
+    let children = renderChildren;
+    const renderFn = renderChildren;
+    if (items && typeof renderFn === 'function') {
+        try {
+            const itemsArray = Array.from(items);
+            children = itemsArray.map((item, idx) => {
+                const rendered = renderFn(item);
+                if (React.isValidElement(rendered) &&
+                    rendered.key == null) {
+                    return React.cloneElement(rendered, {
+                        key: rendered?.key ?? item?.key ?? idx,
+                    });
+                }
+                return rendered;
+            });
+        }
+        catch {
+            // If conversion fails, proceed with the original children
         }
-    }, [state.isOpen, state.collection.size]);
+    }
+    // Filtering hook
+    const { filteredChildren, isFilterActive, setIsFilterActive } = useComboBoxFiltering({
+        children,
+        effectiveInputValue,
+        filter,
+    });
+    const { isFocused, focusProps } = useFocus({ isDisabled });
     let isInvalid = validationState === 'invalid';
     let validationIcon = isInvalid ? InvalidIcon : ValidIcon;
     let validation = cloneElement(validationIcon);
+    // Ref to access internal ListBox state
+    const listStateRef = useRef(null);
+    const focusInitAttemptsRef = useRef(0);
+    // Find item by key to get its label
+    const findItemByKey = useCallback((key) => {
+        let foundItem = null;
+        const traverse = (nodes) => {
+            Children.forEach(nodes, (child) => {
+                if (!child || typeof child !== 'object')
+                    return;
+                if (child.type === Item && String(child.key) === String(key)) {
+                    foundItem = child;
+                }
+                if (child.props?.children) {
+                    traverse(child.props.children);
+                }
+            });
+        };
+        if (children)
+            traverse(children);
+        return foundItem;
+    }, [children]);
+    // Selection change handler
+    const handleSelectionChange = useEvent((selection) => {
+        // Extract single key from selection (we only support single selection)
+        const key = Array.isArray(selection) ? selection[0] : selection;
+        // Update selected key
+        if (!isControlledKey) {
+            setInternalSelectedKey(key ?? null);
+        }
+        // Update input value to show selected item label
+        if (key != null) {
+            setIsFilterActive(false);
+            const selectedItem = findItemByKey(key);
+            const label = selectedItem?.props?.textValue ||
+                (typeof selectedItem?.props?.children === 'string'
+                    ? selectedItem.props.children
+                    : '') ||
+                String(key);
+            if (!isControlledInput) {
+                setInternalInputValue(label);
+            }
+            onInputChange?.(label);
+        }
+        else {
+            // Clear input when selection is cleared
+            if (!isControlledInput) {
+                setInternalInputValue('');
+            }
+            onInputChange?.('');
+            setIsFilterActive(false);
+        }
+        externalOnSelectionChange?.(key);
+        // Close popover after selection
+        setIsPopoverOpen(false);
+        // Focus input
+        setTimeout(() => {
+            inputRef.current?.focus();
+        }, 0);
+    });
+    // Input change handler
+    const handleInputChange = useEvent((e) => {
+        const value = e.target.value;
+        // Update input value
+        if (!isControlledInput) {
+            setInternalInputValue(value);
+        }
+        onInputChange?.(value);
+        const trimmed = value.trim();
+        setIsFilterActive(trimmed.length > 0);
+        // Clear selection when input changes
+        if (effectiveSelectedKey != null) {
+            if (!isControlledKey) {
+                setInternalSelectedKey(null);
+            }
+            externalOnSelectionChange?.(null);
+        }
+        // Open popover based on trigger
+        if (popoverTrigger === 'input' && value && !isPopoverOpen) {
+            setIsPopoverOpen(true);
+        }
+    });
+    // Input focus handler
+    const handleInputFocus = useEvent((e) => {
+        // Call focus props handler if it exists
+        focusProps.onFocus?.(e);
+        if (popoverTrigger === 'focus' && !isPopoverOpen) {
+            setIsPopoverOpen(true);
+        }
+    });
     // Clear button logic
-    let hasValue = props.allowsCustomValue
-        ? state.inputValue !== ''
-        : state.selectedKey != null;
-    let showClearButton = isClearable && hasValue && !isDisabled && !props.isReadOnly;
+    let hasValue = allowsCustomValue
+        ? effectiveInputValue !== ''
+        : effectiveSelectedKey != null;
+    let showClearButton = isClearable && hasValue && !isDisabled && !isReadOnly;
+    const hasResults = Boolean(filteredChildren &&
+        (Array.isArray(filteredChildren)
+            ? filteredChildren.length > 0
+            : filteredChildren !== null));
     // Clear function
     let clearValue = useEvent(() => {
-        // Always clear input value in state so UI resets to placeholder
-        state.setInputValue('');
-        // Notify external input value only when custom value mode is enabled
-        if (props.allowsCustomValue) {
-            props.onInputChange?.('');
+        // Clear input
+        if (!isControlledInput) {
+            setInternalInputValue('');
         }
-        props.onSelectionChange?.(null);
-        state.setSelectedKey(null);
-        // Close the popup if it's open
-        if (state.isOpen) {
-            state.close();
+        onInputChange?.('');
+        // Clear selection
+        if (!isControlledKey) {
+            setInternalSelectedKey(null);
         }
-        // Focus back to the input
+        externalOnSelectionChange?.(null);
+        // Close popover
+        if (isPopoverOpen) {
+            setIsPopoverOpen(false);
+        }
+        // Focus input
         inputRef.current?.focus();
-        props.onClear?.();
+        onClear?.();
+    });
+    // Keyboard navigation hook
+    const { keyboardProps } = useComboBoxKeyboard({
+        isPopoverOpen,
+        listStateRef,
+        hasResults,
+        allowsCustomValue,
+        effectiveInputValue,
+        isClearable,
+        onSelectionChange: handleSelectionChange,
+        onClearValue: clearValue,
+        onOpenPopover: () => setIsPopoverOpen(true),
+        onClosePopover: () => setIsPopoverOpen(false),
+        inputRef,
     });
-    let comboBoxWidth = wrapperRef?.current?.offsetWidth;
     if (icon) {
         icon = _jsx("div", { "data-element": "InputIcon", children: icon });
         if (prefix) {
@@ -193,7 +593,7 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
         invalid: isInvalid,
         valid: validationState === 'valid',
         disabled: isDisabled,
-        hovered: isHovered,
+        hovered: false,
         focused: isFocused,
         loading: isLoading,
         prefix: !!prefix,
@@ -203,84 +603,87 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
         isInvalid,
         validationState,
         isDisabled,
-        isHovered,
         isFocused,
         isLoading,
         prefix,
         showClearButton,
     ]);
-    // If input is not full and the user presses Enter, pick the first option.
-    let onKeyPress = useEvent((e) => {
-        if (!props.onSelectionChange) {
-            return;
+    const comboBoxWidth = wrapperRef?.current?.offsetWidth;
+    const shouldShowPopover = Boolean(isPopoverOpen && hasResults);
+    // Close popover if no results
+    useEffect(() => {
+        if (isPopoverOpen && !hasResults) {
+            setIsPopoverOpen(false);
         }
-        if (e.key === 'Enter') {
-            if (!props.allowsCustomValue) {
-                if (state.isOpen) {
-                    // If there is a selected option then do nothing. It will be selected on Enter anyway.
-                    if (listBoxRef.current?.querySelector('li[aria-selected="true"]')) {
-                        return;
-                    }
-                    const option = [...state.collection][0]?.key;
-                    if (option && selectedKey !== option) {
-                        props.onSelectionChange?.(option);
-                        e.stopPropagation();
-                        e.preventDefault();
-                    }
+    }, [isPopoverOpen, hasResults]);
+    const ensureInitialFocus = useCallback(() => {
+        if (!shouldShowPopover)
+            return;
+        const listState = listStateRef.current;
+        if (!listState)
+            return;
+        const { selectionManager, collection, disabledKeys, lastFocusSourceRef } = listState;
+        if (!selectionManager || !collection)
+            return;
+        const collectFirstKey = () => {
+            for (const node of collection) {
+                if (node.type === 'item') {
+                    if (!disabledKeys?.has(node.key))
+                        return node.key;
                 }
-                else if (inputRef.current?.value &&
-                    ![...state.collection]
-                        .map((i) => i.textValue)
-                        .includes(inputRef.current?.value)) {
-                    // If the input value is not in the collection, we need to prevent the submitting of the form.
-                    // Also, we reset value manually.
-                    e.preventDefault();
-                    props.onSelectionChange?.(null);
+                else if (node.childNodes) {
+                    for (const child of node.childNodes) {
+                        if (child.type === 'item' && !disabledKeys?.has(child.key)) {
+                            return child.key;
+                        }
+                    }
                 }
-                // If a custom value is allowed, we need to check if the input value is in the collection.
             }
-            else if (props.allowsCustomValue) {
-                const inputValue = inputRef?.current?.value;
-                const item = [...state.collection].find((item) => item.textValue.toLowerCase() === inputValue?.toLowerCase());
-                props.onSelectionChange?.(item ? item.key : inputRef?.current?.value ?? '');
-            }
-        }
-    });
-    let onBlur = useEvent((e) => {
-        // If the input value is not in the collection, we need to reset the value.
-        if (!props.allowsCustomValue &&
-            inputRef.current?.value &&
-            ![...state.collection]
-                .map((i) => i.textValue)
-                .includes(inputRef.current?.value)) {
-            props.onSelectionChange?.(null);
+            return null;
+        };
+        if (lastFocusSourceRef)
+            lastFocusSourceRef.current = 'keyboard';
+        if (selectionManager.focusedKey == null) {
+            const keyToFocus = effectiveSelectedKey != null ? effectiveSelectedKey : collectFirstKey();
+            if (keyToFocus != null)
+                selectionManager.setFocusedKey(keyToFocus);
         }
-    });
-    useEffect(() => {
-        inputRef.current?.addEventListener('keydown', onKeyPress, true);
-        inputRef.current?.addEventListener('blur', onBlur, true);
-        return () => {
-            inputRef.current?.removeEventListener('keydown', onKeyPress, true);
-            inputRef.current?.removeEventListener('blur', onBlur, true);
+    }, [shouldShowPopover, effectiveSelectedKey]);
+    useLayoutEffect(() => {
+        if (!shouldShowPopover)
+            return;
+        focusInitAttemptsRef.current = 0;
+        const tick = () => {
+            if (!shouldShowPopover)
+                return;
+            ensureInitialFocus();
+            focusInitAttemptsRef.current += 1;
+            // Try a few frames to wait for collection to mount
+            if (focusInitAttemptsRef.current < 8 &&
+                listStateRef.current?.selectionManager?.focusedKey == null) {
+                requestAnimationFrame(tick);
+            }
         };
-    }, []);
-    let allInputProps = useMemo(() => mergeProps(inputProps, hoverProps, focusProps), [inputProps, hoverProps, focusProps]);
-    let comboBoxField = (_jsxs(ComboBoxWrapperElement, { ref: wrapperRef, qa: qa || 'ComboBox', mods: mods, styles: wrapperStyles, style: {
+        requestAnimationFrame(() => requestAnimationFrame(tick));
+    }, [shouldShowPopover, ensureInitialFocus]);
+    const comboBoxField = (_jsxs(ComboBoxWrapperElement, { ref: wrapperRef, qa: qa || 'ComboBox', mods: mods, styles: wrapperStyles, style: {
             zIndex: isFocused ? 1 : 'initial',
-        }, "data-size": size, children: [prefix ? _jsx("div", { "data-element": "Prefix", children: prefix }) : null, _jsx(InputElement, { ref: inputRef, qa: "Input", autoFocus: autoFocus, "data-autofocus": autoFocus ? '' : undefined, ...allInputProps, autoComplete: autoComplete, styles: inputStyles, mods: mods, "data-size": size }), _jsxs("div", { "data-element": "Suffix", children: [suffixPosition === 'before' ? suffix : null, validationState || isLoading ? (_jsxs(_Fragment, { children: [validationState && !isLoading ? validation : null, isLoading ? _jsx(LoadingIcon, {}) : null] })) : null, suffixPosition === 'after' ? suffix : null, showClearButton && (_jsx(ItemAction, { icon: _jsx(CloseIcon, {}), size: size, theme: validationState === 'invalid' ? 'danger' : undefined, qa: "ComboBoxClearButton", "data-no-trigger": hideTrigger ? '' : undefined, onPress: clearValue })), !hideTrigger ? (_jsx(TriggerElement, { "data-popover-trigger": true, qa: "ComboBoxTrigger", ...mergeProps(buttonProps, triggerFocusProps, triggerHoverProps), ref: triggerRef, mods: {
-                            pressed: isTriggerPressed,
-                            focused: isTriggerFocused,
-                            hovered: isTriggerHovered,
+        }, "data-size": size, children: [prefix ? _jsx("div", { "data-element": "Prefix", children: prefix }) : null, _jsx(ComboBoxInput, { inputRef: inputRef, value: effectiveInputValue, placeholder: placeholder, isDisabled: isDisabled, isReadOnly: isReadOnly, autoFocus: autoFocus, size: size, mods: mods, inputStyles: inputStyles, keyboardProps: keyboardProps, focusProps: focusProps, isPopoverOpen: isPopoverOpen, hasResults: hasResults, comboBoxId: comboBoxId, listStateRef: listStateRef, onChange: handleInputChange, onFocus: handleInputFocus }), _jsxs("div", { "data-element": "Suffix", children: [suffixPosition === 'before' ? suffix : null, validationState || isLoading ? (_jsxs(_Fragment, { children: [validationState && !isLoading ? validation : null, isLoading ? _jsx(LoadingIcon, {}) : null] })) : null, suffixPosition === 'after' ? suffix : null, showClearButton && (_jsx(ItemAction, { icon: _jsx(CloseIcon, {}), size: size, theme: validationState === 'invalid' ? 'danger' : undefined, qa: "ComboBoxClearButton", "data-no-trigger": hideTrigger ? '' : undefined, onPress: clearValue })), !hideTrigger ? (_jsx(ItemAction, { ref: triggerRef, "data-popover-trigger": true, icon: _jsx(DownIcon, {}), qa: "ComboBoxTrigger", mods: {
+                            pressed: isPopoverOpen,
                             disabled: isDisabled,
                             loading: isLoading,
-                        }, "data-size": size, isDisabled: isDisabled, styles: triggerStyles, children: _jsx(DownIcon, {}) })) : null] }), _jsx(OverlayWrapper, { isOpen: state.isOpen && !isDisabled, children: _jsx(ListBoxPopup, { ...listBoxProps, shouldUseVirtualFocus: true, listBoxRef: listBoxRef, popoverRef: popoverRef, overlayProps: overlayProps, placement: placement, state: state, listBoxStyles: listBoxStyles, overlayStyles: overlayStyles, optionStyles: optionStyles, minWidth: comboBoxWidth, triggerRef: triggerRef }) })] }));
-    return wrapWithField(comboBoxField, ref, mergeProps({ ...props, styles }, { labelProps }));
-});
-const ComboBoxSectionComponent = Object.assign(BaseSection, {
-    displayName: 'Section',
+                        }, "data-size": size, isDisabled: isDisabled, styles: triggerStyles, onClick: () => {
+                            if (!isDisabled) {
+                                setIsPopoverOpen(!isPopoverOpen);
+                                if (!isPopoverOpen) {
+                                    inputRef.current?.focus();
+                                }
+                            }
+                        } })) : null] }), _jsx(ComboBoxOverlay, { isOpen: shouldShowPopover, triggerRef: wrapperRef, popoverRef: popoverRef, listBoxRef: listBoxRef, direction: direction, shouldFlip: shouldFlip, overlayOffset: overlayOffset, comboBoxWidth: comboBoxWidth, comboBoxId: comboBoxId, overlayStyles: overlayStyles, listBoxStyles: listBoxStyles, optionStyles: optionStyles, sectionStyles: sectionStyles, headingStyles: headingStyles, effectiveSelectedKey: effectiveSelectedKey, isDisabled: isDisabled, disabledKeys: props.disabledKeys, items: items, listStateRef: listStateRef, label: label, ariaLabel: props['aria-label'], onSelectionChange: handleSelectionChange, onClose: () => setIsPopoverOpen(false), children: filteredChildren })] }));
+    return wrapWithField(comboBoxField, ref, mergeProps({ ...props, styles }, {}));
 });
 ComboBox.Item = Item;
-ComboBox.Section = ComboBoxSectionComponent;
+ComboBox.Section = BaseSection;
 Object.defineProperty(ComboBox, 'cubeInputType', {
     value: 'ComboBox',
     enumerable: false,