@cube-dev/ui-kit 0.0.0-canary-b0df357 → 0.0.0-canary-876c009

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b0df357
+ * @cube-dev/ui-kit v0.0.0-canary-876c009
  * 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.0.0-canary-b0df357
+ * @cube-dev/ui-kit v0.0.0-canary-876c009
  * 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.0.0-canary-b0df357
+ * @cube-dev/ui-kit v0.0.0-canary-876c009
  * 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.0.0-canary-b0df357
+ * @cube-dev/ui-kit v0.0.0-canary-876c009
  * 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.0.0-canary-b0df357
+ * @cube-dev/ui-kit v0.0.0-canary-876c009
  * 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.0.0-canary-b0df357
+ * @cube-dev/ui-kit v0.0.0-canary-876c009
  * 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.0.0-canary-b0df357
+ * @cube-dev/ui-kit v0.0.0-canary-876c009
  * 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.0.0-canary-b0df357
+ * @cube-dev/ui-kit v0.0.0-canary-876c009
  * 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.0.0-canary-b0df357
+ * @cube-dev/ui-kit v0.0.0-canary-876c009
  * 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.0.0-canary-b0df357
+ * @cube-dev/ui-kit v0.0.0-canary-876c009
  * 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.0.0-canary-b0df357
+ * @cube-dev/ui-kit v0.0.0-canary-876c009
  * 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.0.0-canary-b0df357
+ * @cube-dev/ui-kit v0.0.0-canary-876c009
  * 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.0.0-canary-b0df357
+ * @cube-dev/ui-kit v0.0.0-canary-876c009
  * 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.0.0-canary-b0df357
+ * @cube-dev/ui-kit v0.0.0-canary-876c009
  * 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.0.0-canary-b0df357
+ * @cube-dev/ui-kit v0.0.0-canary-876c009
  * 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.0.0-canary-b0df357
+ * @cube-dev/ui-kit v0.0.0-canary-876c009
  * 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.0.0-canary-b0df357
+ * @cube-dev/ui-kit v0.0.0-canary-876c009
  * 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.0.0-canary-b0df357
+ * @cube-dev/ui-kit v0.0.0-canary-876c009
  * 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.0.0-canary-b0df357
+ * @cube-dev/ui-kit v0.0.0-canary-876c009
  * 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, useListState } from 'react-stately';
+import { Section as BaseSection } from 'react-stately';
 import { useEvent } from '../../../_internal';
 import { CloseIcon, DirectionIcon, LoadingIcon } from '../../../icons';
 import { useProviderProps } from '../../../provider';
@@ -118,37 +118,65 @@ function useComboBoxState({ selectedKey, defaultSelectedKey, inputValue, default
         isControlledInput,
     };
 }
-function useComboBoxFiltering({ effectiveInputValue, filter, }) {
+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]);
-    // Create a filter function for collection nodes
-    const filterFn = useCallback((nodes) => {
+    // Filter children based on input value
+    const filteredChildren = useMemo(() => {
         const term = effectiveInputValue.trim();
-        // 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;
+        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;
                 }
-                return {
-                    ...node,
-                    childNodes: filteredChildren,
-                    hasChildNodes: true,
-                };
-            }
-            return textFilterFn(node.textValue || '', term) ? node : null;
-        })
-            .filter(Boolean);
-    }, [isFilterActive, effectiveInputValue, textFilterFn]);
+                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 {
-        filterFn,
+        filteredChildren,
         isFilterActive,
         setIsFilterActive,
     };
@@ -265,22 +293,6 @@ 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) {
@@ -292,12 +304,18 @@ function useComboBoxKeyboard({ isPopoverOpen, listStateRef, hasResults, allowsCu
                     }
                     return;
                 }
-                // 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;
+                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();
+                    }
                 }
             }
             else if (e.key === 'Escape') {
@@ -358,7 +376,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, filter, }) {
+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, }) {
     // Overlay positioning
     const { overlayProps: overlayPositionProps, placement, updatePosition, } = useOverlayPosition({
         targetRef: triggerRef,
@@ -396,7 +414,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, { isShown: isOpen, children: ({ phase, isShown, ref: transitionRef }) => (_jsx(ComboBoxOverlayElement, { ...mergeProps(overlayPositionProps, overlayBehaviorProps, compositeFocusProps), ref: (value) => {
+    const overlayContent = (_jsx(DisplayTransition, { exposeUnmounted: true, 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: {
@@ -405,7 +423,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, filter: filter, 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, styles: listBoxStyles, optionStyles: optionStyles, sectionStyles: sectionStyles, headingStyles: headingStyles, stateRef: listStateRef, mods: {
                     popover: true,
                 }, onSelectionChange: onSelectionChange, children: children }) })) }));
     return _jsx(Portal, { children: overlayContent });
@@ -535,152 +553,63 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
         }
     }, [isPopoverOpen, effectiveSelectedKey]);
     // Filtering hook
-    const { filterFn, isFilterActive, setIsFilterActive } = useComboBoxFiltering({
+    const { filteredChildren, isFilterActive, setIsFilterActive } = useComboBoxFiltering({
+        children,
         effectiveInputValue,
         filter,
     });
-    // 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,
-            };
+    // 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;
         }
-        return { isValid: false, singleMatchKey: null, filteredCount };
-    }, [effectiveInputValue, filterFn, localCollectionState.collection]);
+    }, [isPopoverOpen, filteredChildren]);
+    // Use frozen children during close animation, fresh children when open
+    const displayedFilteredChildren = isPopoverOpen
+        ? filteredChildren
+        : frozenFilteredChildrenRef.current ?? filteredChildren;
+    const { isFocused, focusProps } = useFocus({ isDisabled });
     // Composite blur handler - fires when focus leaves the entire component
     const handleCompositeBlur = useEvent(() => {
-        // 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;
+        // 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);
             }
+            // Call user's onBlur callback
+            onBlur?.();
+            return;
         }
-        // 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;
+        // In clearOnBlur mode (only for non-custom-value mode), clear selection and input
+        if (clearOnBlur && !allowsCustomValue) {
+            externalOnSelectionChange?.(null);
+            if (!isControlledKey) {
+                setInternalSelectedKey(null);
             }
-            // 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;
+            if (!isControlledInput) {
+                setInternalInputValue('');
             }
+            onInputChange?.('');
+            // Call user's onBlur callback
+            onBlur?.();
+            return;
         }
-        // Fallback: Reset input to show current selection (or empty if none)
+        // 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({
@@ -696,11 +625,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 local collection
+    // Helper to get label from collection item
     const getItemLabel = useCallback((key) => {
-        const item = localCollectionState?.collection?.getItem(key);
+        const item = listStateRef.current?.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)
@@ -771,6 +700,9 @@ 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);
@@ -784,17 +716,13 @@ 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;
-        // Skip if the key hasn't actually changed (prevents unnecessary resets when collection rebuilds)
-        if (lastSyncedSelectedKey.current !== undefined &&
-            lastSyncedSelectedKey.current === effectiveSelectedKey) {
+        // Wait for collection to be ready
+        if (!listStateRef.current?.collection)
             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
@@ -817,26 +745,10 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
         ? effectiveInputValue !== ''
         : effectiveSelectedKey != null;
     let showClearButton = isClearable && hasValue && !isDisabled && !isReadOnly;
-    // 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]);
+    const hasResults = Boolean(displayedFilteredChildren &&
+        (Array.isArray(displayedFilteredChildren)
+            ? displayedFilteredChildren.length > 0
+            : displayedFilteredChildren !== null));
     // Clear function
     let clearValue = useEvent(() => {
         // Clear input
@@ -977,7 +889,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, filter: filterFn, onSelectionChange: handleSelectionChange, onClose: () => setIsPopoverOpen(false), children: children })] }));
+                        } })) : 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 })] }));
     const { children: _, ...propsWithoutChildren } = props;
     const finalProps = {
         ...propsWithoutChildren,

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b0df357
+ * @cube-dev/ui-kit v0.0.0-canary-876c009
  * Released under the MIT license.
  */