@cube-dev/ui-kit 0.83.3 → 0.84.0

package/es/components/content/HotKeys/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.84.0
  * Released under the MIT license.
  */
 

package/es/components/content/ItemBase/ItemBase.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.84.0
  * Released under the MIT license.
  */
 

package/es/components/content/ItemBase/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.84.0
  * Released under the MIT license.
  */
 

package/es/components/content/List/SectionHeading.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.84.0
  * Released under the MIT license.
  */
 

package/es/components/content/List/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.84.0
  * Released under the MIT license.
  */
 

package/es/components/content/Paragraph.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.84.0
  * Released under the MIT license.
  */
 

package/es/components/content/Placeholder/Placeholder.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.84.0
  * Released under the MIT license.
  */
 

package/es/components/content/PrismCode/PrismCode.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.84.0
  * Released under the MIT license.
  */
 

package/es/components/content/PrismCode/prismSetup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.84.0
  * Released under the MIT license.
  */
 

package/es/components/content/PrismDiffCode/PrismDiffCode.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.84.0
  * Released under the MIT license.
  */
 

package/es/components/content/Result/Result.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.84.0
  * Released under the MIT license.
  */
 

package/es/components/content/Skeleton/Skeleton.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.84.0
  * Released under the MIT license.
  */
 

package/es/components/content/Tag/Tag.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.84.0
  * Released under the MIT license.
  */
 

package/es/components/content/Text.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.84.0
  * Released under the MIT license.
  */
 

package/es/components/content/Title.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.84.0
  * Released under the MIT license.
  */
 

package/es/components/fields/Checkbox/Checkbox.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.84.0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.84.0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.84.0
  * Released under the MIT license.
  */
 

package/es/components/fields/Checkbox/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.84.0
  * Released under the MIT license.
  */
 

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

@@ -1,14 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.83.3
+ * @cube-dev/ui-kit v0.84.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { cloneElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { useFilter, useKeyboard, useOverlay, useOverlayPosition, } from 'react-aria';
-import { Section as BaseSection } from 'react-stately';
+import { Section as BaseSection, useListState } from 'react-stately';
 import { useEvent } from '../../../_internal';
 import { CloseIcon, DirectionIcon, LoadingIcon } from '../../../icons';
 import { useProviderProps } from '../../../provider';
@@ -118,65 +118,37 @@ function useComboBoxState({ selectedKey, defaultSelectedKey, inputValue, default
         isControlledInput,
     };
 }
-function useComboBoxFiltering({ children, effectiveInputValue, filter, }) {
+function useComboBoxFiltering({ 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(() => {
+    // Create a filter function for collection nodes
+    const filterFn = useCallback((nodes) => {
         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);
+        // Don't filter if not active or no search term
+        if (!isFilterActive || !term) {
+            return nodes;
+        }
+        // Filter nodes based on their textValue and preserve section structure
+        return [...nodes]
+            .map((node) => {
+            if (node.type === 'section' && node.childNodes) {
+                const filteredChildren = [...node.childNodes].filter((child) => textFilterFn(child.textValue || '', term));
+                if (filteredChildren.length === 0) {
+                    return null;
                 }
-            });
-            return filteredNodes;
-        };
-        return filterChildren(children);
-    }, [isFilterActive, children, effectiveInputValue, textFilterFn]);
+                return {
+                    ...node,
+                    childNodes: filteredChildren,
+                    hasChildNodes: true,
+                };
+            }
+            return textFilterFn(node.textValue || '', term) ? node : null;
+        })
+            .filter(Boolean);
+    }, [isFilterActive, effectiveInputValue, textFilterFn]);
     return {
-        filteredChildren,
+        filterFn,
         isFilterActive,
         setIsFilterActive,
     };
@@ -293,6 +265,22 @@ function useComboBoxKeyboard({ isPopoverOpen, listStateRef, hasResults, allowsCu
                 }
             }
             else if (e.key === 'Enter') {
+                // If popover is open, try to select the focused item first
+                if (isPopoverOpen) {
+                    const listState = listStateRef.current;
+                    if (listState) {
+                        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();
+                            inputRef.current?.focus();
+                            return;
+                        }
+                    }
+                }
+                // If no results, handle empty input or custom values
                 if (!hasResults) {
                     e.preventDefault();
                     if (allowsCustomValue) {
@@ -304,18 +292,12 @@ function useComboBoxKeyboard({ isPopoverOpen, listStateRef, hasResults, allowsCu
                     }
                     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();
-                        inputRef.current?.focus();
-                    }
+                // Clear selection if input is empty and popover is closed (or no focused item)
+                const trimmed = (effectiveInputValue || '').trim();
+                if (trimmed === '') {
+                    e.preventDefault();
+                    onSelectionChange(null);
+                    return;
                 }
             }
             else if (e.key === 'Escape') {
@@ -376,7 +358,7 @@ const ComboBoxInput = forwardRef(function ComboBoxInput({ qa, inputRef, id, valu
             ? `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, compositeFocusProps, }) {
+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, compositeFocusProps, filter, }) {
     // Overlay positioning
     const { overlayProps: overlayPositionProps, placement, updatePosition, } = useOverlayPosition({
         targetRef: triggerRef,
@@ -414,7 +396,7 @@ function ComboBoxOverlay({ isOpen, triggerRef, popoverRef, listBoxRef, direction
     }, [isOpen, updatePosition]);
     // Extract primary placement direction for consistent styling
     const placementDirection = placement?.split(' ')[0] || direction;
-    const overlayContent = (_jsx(DisplayTransition, { exposeUnmounted: true, isShown: isOpen, children: ({ phase, isShown, ref: transitionRef }) => (_jsx(ComboBoxOverlayElement, { ...mergeProps(overlayPositionProps, overlayBehaviorProps, compositeFocusProps), ref: (value) => {
+    const overlayContent = (_jsx(DisplayTransition, { isShown: isOpen, children: ({ phase, isShown, ref: transitionRef }) => (_jsx(ComboBoxOverlayElement, { ...mergeProps(overlayPositionProps, overlayBehaviorProps, compositeFocusProps), ref: (value) => {
                 transitionRef(value);
                 popoverRef.current = value;
             }, "data-placement": placementDirection, "data-phase": phase, mods: {
@@ -423,7 +405,7 @@ function ComboBoxOverlay({ isOpen, triggerRef, popoverRef, listBoxRef, direction
             }, styles: overlayStyles, style: {
                 '--min-width': 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: {
+            }, 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, filter: filter, styles: listBoxStyles, optionStyles: optionStyles, sectionStyles: sectionStyles, headingStyles: headingStyles, stateRef: listStateRef, mods: {
                     popover: true,
                 }, onSelectionChange: onSelectionChange, children: children }) })) }));
     return _jsx(Portal, { children: overlayContent });
@@ -553,63 +535,152 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
         }
     }, [isPopoverOpen, effectiveSelectedKey]);
     // Filtering hook
-    const { filteredChildren, isFilterActive, setIsFilterActive } = useComboBoxFiltering({
-        children,
+    const { filterFn, isFilterActive, setIsFilterActive } = useComboBoxFiltering({
         effectiveInputValue,
         filter,
     });
-    // Freeze filtered children during close animation to prevent visual jumps
-    const frozenFilteredChildrenRef = useRef(null);
-    useEffect(() => {
-        // Update frozen children only when popover is open
-        if (isPopoverOpen) {
-            frozenFilteredChildrenRef.current = filteredChildren;
-        }
-    }, [isPopoverOpen, filteredChildren]);
-    // Use frozen children during close animation, fresh children when open
-    const displayedFilteredChildren = isPopoverOpen
-        ? filteredChildren
-        : frozenFilteredChildrenRef.current ?? filteredChildren;
+    // Create local collection state for reading item data (labels, etc.)
+    // This allows us to read item labels even before the popover opens
+    const localCollectionState = useListState({
+        children,
+        items: sortedItems,
+        selectionMode: 'none', // Don't manage selection in this state
+    });
     const { isFocused, focusProps } = useFocus({ isDisabled });
+    // Helper to check if current input value is valid
+    const checkInputValidity = useCallback(() => {
+        if (!effectiveInputValue.trim()) {
+            return { isValid: false, singleMatchKey: null, filteredCount: 0 };
+        }
+        // Get filtered collection based on current input
+        const filteredNodes = filterFn(localCollectionState.collection);
+        const filteredItems = [];
+        // Flatten filtered nodes (handle sections)
+        for (const node of filteredNodes) {
+            if (node.type === 'section' && node.childNodes) {
+                for (const child of node.childNodes) {
+                    if (child.type === 'item') {
+                        filteredItems.push({
+                            key: child.key,
+                            textValue: child.textValue || '',
+                        });
+                    }
+                }
+            }
+            else if (node.type === 'item') {
+                filteredItems.push({
+                    key: node.key,
+                    textValue: node.textValue || '',
+                });
+            }
+        }
+        const filteredCount = filteredItems.length;
+        // Check for exact match
+        const exactMatch = filteredItems.find((item) => item.textValue.toLowerCase() ===
+            effectiveInputValue.trim().toLowerCase());
+        if (exactMatch) {
+            return { isValid: true, singleMatchKey: exactMatch.key, filteredCount };
+        }
+        // If exactly one filtered result, consider it valid
+        if (filteredCount === 1) {
+            return {
+                isValid: true,
+                singleMatchKey: filteredItems[0].key,
+                filteredCount,
+            };
+        }
+        return { isValid: false, singleMatchKey: null, filteredCount };
+    }, [effectiveInputValue, filterFn, localCollectionState.collection]);
     // Composite blur handler - fires when focus leaves the entire component
     const handleCompositeBlur = useEvent(() => {
-        // Always disable filter on blur
-        setIsFilterActive(false);
-        // In allowsCustomValue mode with shouldCommitOnBlur, commit the input value
-        if (allowsCustomValue &&
-            shouldCommitOnBlur &&
-            effectiveInputValue &&
-            effectiveSelectedKey == null) {
-            externalOnSelectionChange?.(effectiveInputValue);
-            if (!isControlledKey) {
-                setInternalSelectedKey(effectiveInputValue);
+        // NOTE: Do NOT disable filter yet; we need it active for validity check
+        // In allowsCustomValue mode
+        if (allowsCustomValue) {
+            // Commit the input value if it's non-empty and nothing is selected
+            if (shouldCommitOnBlur &&
+                effectiveInputValue &&
+                effectiveSelectedKey == null) {
+                externalOnSelectionChange?.(effectiveInputValue);
+                if (!isControlledKey) {
+                    setInternalSelectedKey(effectiveInputValue);
+                }
+                onBlur?.();
+                setIsFilterActive(false);
+                return;
+            }
+            // Clear selection if input is empty
+            if (!String(effectiveInputValue).trim()) {
+                externalOnSelectionChange?.(null);
+                if (!isControlledKey) {
+                    setInternalSelectedKey(null);
+                }
+                if (!isControlledInput) {
+                    setInternalInputValue('');
+                }
+                onInputChange?.('');
+                onBlur?.();
+                setIsFilterActive(false);
+                return;
             }
-            // Call user's onBlur callback
-            onBlur?.();
-            return;
         }
-        // In clearOnBlur mode (only for non-custom-value mode), clear selection and input
-        if (clearOnBlur && !allowsCustomValue) {
-            externalOnSelectionChange?.(null);
-            if (!isControlledKey) {
-                setInternalSelectedKey(null);
+        // In non-custom-value mode, validate input and handle accordingly
+        if (!allowsCustomValue) {
+            const { isValid, singleMatchKey } = checkInputValidity();
+            // If there's exactly one filtered result, auto-select it
+            if (isValid &&
+                singleMatchKey != null &&
+                singleMatchKey !== effectiveSelectedKey) {
+                const label = getItemLabel(singleMatchKey);
+                if (!isControlledKey) {
+                    setInternalSelectedKey(singleMatchKey);
+                }
+                if (!isControlledInput) {
+                    setInternalInputValue(label);
+                }
+                onInputChange?.(label);
+                externalOnSelectionChange?.(singleMatchKey);
+                onBlur?.();
+                setIsFilterActive(false);
+                return;
             }
-            if (!isControlledInput) {
-                setInternalInputValue('');
+            // If input is invalid (no exact match, not a single result)
+            if (!isValid) {
+                const trimmedInput = effectiveInputValue.trim();
+                // Clear if clearOnBlur is set or input is empty
+                if (clearOnBlur || !trimmedInput) {
+                    externalOnSelectionChange?.(null);
+                    if (!isControlledKey) {
+                        setInternalSelectedKey(null);
+                    }
+                    if (!isControlledInput) {
+                        setInternalInputValue('');
+                    }
+                    onInputChange?.('');
+                    onBlur?.();
+                    setIsFilterActive(false);
+                    return;
+                }
+                // Reset input to current selected value (or empty if none)
+                const nextValue = effectiveSelectedKey != null
+                    ? getItemLabel(effectiveSelectedKey)
+                    : '';
+                if (!isControlledInput) {
+                    setInternalInputValue(nextValue);
+                }
+                onInputChange?.(nextValue);
+                onBlur?.();
+                setIsFilterActive(false);
+                return;
             }
-            onInputChange?.('');
-            // Call user's onBlur callback
-            onBlur?.();
-            return;
         }
-        // Reset input to show current selection (or empty if none)
+        // Fallback: Reset input to show current selection (or empty if none)
         const nextValue = effectiveSelectedKey != null ? getItemLabel(effectiveSelectedKey) : '';
         if (!isControlledInput) {
             setInternalInputValue(nextValue);
         }
         onInputChange?.(nextValue);
-        // Call user's onBlur callback
         onBlur?.();
+        setIsFilterActive(false);
     });
     // Composite focus hook - handles focus tracking across wrapper and portaled popover
     const { compositeFocusProps } = useCompositeFocus({
@@ -625,11 +696,11 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
     // Ref to access internal ListBox state
     const listStateRef = useRef(null);
     const focusInitAttemptsRef = useRef(0);
-    // Helper to get label from collection item
+    // Helper to get label from local collection
     const getItemLabel = useCallback((key) => {
-        const item = listStateRef.current?.collection?.getItem(key);
+        const item = localCollectionState?.collection?.getItem(key);
         return item?.textValue || String(key);
-    }, []);
+    }, [localCollectionState?.collection]);
     // Selection change handler
     const handleSelectionChange = useEvent((selection) => {
         // Extract single key from selection (we only support single selection)
@@ -700,9 +771,6 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
         }
         // Priority 2: fall back to defaultSelectedKey's label
         if (defaultSelectedKey) {
-            // Wait for collection to be ready
-            if (!listStateRef.current?.collection)
-                return;
             const label = getItemLabel(defaultSelectedKey);
             setInternalInputValue(label);
             setHasInitialized(true);
@@ -716,13 +784,17 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
         children,
     ]);
     // Sync input value with controlled selectedKey
+    const lastSyncedSelectedKey = useRef(undefined);
     useEffect(() => {
         // Only run when selectedKey is controlled but inputValue is uncontrolled
         if (!isControlledKey || isControlledInput)
             return;
-        // Wait for collection to be ready
-        if (!listStateRef.current?.collection)
+        // Skip if the key hasn't actually changed (prevents unnecessary resets when collection rebuilds)
+        if (lastSyncedSelectedKey.current !== undefined &&
+            lastSyncedSelectedKey.current === effectiveSelectedKey) {
             return;
+        }
+        lastSyncedSelectedKey.current = effectiveSelectedKey;
         // Get the expected label for the current selection
         const expectedLabel = effectiveSelectedKey != null ? getItemLabel(effectiveSelectedKey) : '';
         // Update the input value to match the selected key's label
@@ -745,10 +817,26 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
         ? effectiveInputValue !== ''
         : effectiveSelectedKey != null;
     let showClearButton = isClearable && hasValue && !isDisabled && !isReadOnly;
-    const hasResults = Boolean(displayedFilteredChildren &&
-        (Array.isArray(displayedFilteredChildren)
-            ? displayedFilteredChildren.length > 0
-            : displayedFilteredChildren !== null));
+    // Check if there are any results after filtering
+    const hasResults = useMemo(() => {
+        if (!children)
+            return false;
+        if (!Array.isArray(children) && children === null)
+            return false;
+        // If we have a collection, check if filtering will produce any results
+        if (localCollectionState?.collection) {
+            const filteredNodes = filterFn(localCollectionState.collection);
+            const resultArray = Array.from(filteredNodes).flatMap((node) => {
+                if (node.type === 'section' && node.childNodes) {
+                    return [...node.childNodes];
+                }
+                return [node];
+            });
+            return resultArray.length > 0;
+        }
+        // Fallback: check if children exists
+        return Array.isArray(children) ? children.length > 0 : true;
+    }, [children, localCollectionState?.collection, filterFn]);
     // Clear function
     let clearValue = useEvent(() => {
         // Clear input
@@ -889,7 +977,7 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
                                     }
                                 }
                             }
-                        } })) : 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: sortedItems, listStateRef: listStateRef, label: label, ariaLabel: props['aria-label'], compositeFocusProps: compositeFocusProps, onSelectionChange: handleSelectionChange, onClose: () => setIsPopoverOpen(false), children: displayedFilteredChildren })] }));
+                        } })) : 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: sortedItems, listStateRef: listStateRef, label: label, ariaLabel: props['aria-label'], compositeFocusProps: compositeFocusProps, filter: filterFn, onSelectionChange: handleSelectionChange, onClose: () => setIsPopoverOpen(false), children: children })] }));
     const { children: _, ...propsWithoutChildren } = props;
     const finalProps = {
         ...propsWithoutChildren,