@cube-dev/ui-kit 0.64.1 → 0.65.0

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

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

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

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

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

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

package/es/components/fields/DatePicker/DateInputBase.js

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

package/es/components/fields/DatePicker/DatePicker.js

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

package/es/components/fields/DatePicker/DatePickerButton.js

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

package/es/components/fields/DatePicker/DatePickerElement.js

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

package/es/components/fields/DatePicker/DatePickerInput.js

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

package/es/components/fields/DatePicker/DatePickerSegment.js

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

package/es/components/fields/DatePicker/DateRangePicker.js

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

package/es/components/fields/DatePicker/DateRangeSeparatedPicker.js

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

package/es/components/fields/DatePicker/TimeInput.js

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

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

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

package/es/components/fields/DatePicker/intl.js

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

package/es/components/fields/DatePicker/parseDate.js

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

package/es/components/fields/DatePicker/props.js

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

package/es/components/fields/DatePicker/types.js

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

package/es/components/fields/DatePicker/utils.js

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

package/es/components/fields/FileInput/FileInput.js

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

package/es/components/fields/Input/Input.js

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

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

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

package/es/components/fields/ListBox/ListBox.js

@@ -1,19 +1,20 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.64.1
+ * @cube-dev/ui-kit v0.65.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, cloneElement, forwardRef, isValidElement, useEffect, useMemo, useRef, useState, } from 'react';
-import { useFilter, useListBox, useListBoxSection, useOption, } from 'react-aria';
+import { forwardRef, useCallback, useMemo, useRef, useState, } from 'react';
+import { useFilter, useKeyboard, useListBox, useListBoxSection, useOption, } from 'react-aria';
 import { Section as BaseSection, Item, useListState } from 'react-stately';
 import { LoadingIcon, SearchIcon } from '../../../icons';
 import { useProviderProps } from '../../../provider';
 import { BASE_STYLES, COLOR_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
 import { mergeProps, modAttrs, useCombinedRefs } from '../../../utils/react';
 import { useFocus } from '../../../utils/react/interactions';
+import { Block } from '../../Block';
 import { useFieldProps, useFormProps, wrapWithField } from '../../form';
 import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES, } from '../TextInput/TextInputBase';
 const ListBoxWrapperElement = tasty({
@@ -182,74 +183,51 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
             return fieldProps;
         },
     });
-    let { qa, label, extra, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, isLoading, isSearchable = false, searchPlaceholder = 'Search...', autoFocus, filter, searchInputStyles, listStyles, optionStyles, sectionStyles, headingStyles, searchInputRef, listRef, message, description, styles, labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, onSelectionChange, ...otherProps } = props;
+    let { qa, label, extra, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, isLoading, isSearchable = false, searchPlaceholder = 'Search...', autoFocus, filter, emptyLabel, searchInputStyles, listStyles, optionStyles, sectionStyles, headingStyles, searchInputRef, listRef, message, description, styles, labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, onSelectionChange, ...otherProps } = props;
     const [searchValue, setSearchValue] = useState('');
     const { contains } = useFilter({ sensitivity: 'base' });
-    // Create filtered children based on search
-    const filteredChildren = useMemo(() => {
-        if (!isSearchable || !searchValue.trim() || !props.children) {
-            return props.children;
+    // Choose the text filter function: user-provided `filter` prop (if any)
+    // or the default `contains` helper from `useFilter`.
+    const textFilterFn = useMemo(() => filter || contains, [filter, contains]);
+    // Collection-level filter function expected by `useListState`.
+    // It converts the text filter (textValue, searchValue) ⟶ boolean
+    // into the shape `(nodes) => Iterable<Node<T>>`.
+    // The current `searchValue` is captured in the closure – every re-render
+    // produces a new function so React Stately updates the collection when the
+    // search term changes.
+    const collectionFilter = useCallback((nodes) => {
+        const term = searchValue.trim();
+        // If there is no search term, return nodes untouched to avoid
+        // unnecessary object allocations.
+        if (!term) {
+            return nodes;
         }
-        const filterFn = filter || contains;
-        // Returns `true` if the given element's text value matches the search.
-        const filterChild = (child) => {
-            if (!isValidElement(child))
-                return false;
-            const { textValue, children } = child.props;
-            // Prefer an explicit textValue prop (React Aria's Item), then children, then key.
-            let candidate = '';
-            if (typeof textValue === 'string') {
-                candidate = textValue;
-            }
-            else if (typeof children === 'string') {
-                candidate = children;
-            }
-            else if (Array.isArray(children)) {
-                candidate = children.join(' ');
-            }
-            else if (child.key != null) {
-                candidate = String(child.key);
+        // Recursive helper to filter sections and items.
+        const filterNodes = (iter) => {
+            const result = [];
+            for (const node of iter) {
+                if (node.type === 'section') {
+                    const filteredChildren = filterNodes(node.childNodes);
+                    if (filteredChildren.length) {
+                        // Preserve the original node but replace `childNodes` with the
+                        // filtered iterable so that React-Stately can still traverse it.
+                        result.push({
+                            ...node,
+                            childNodes: filteredChildren,
+                        });
+                    }
+                }
+                else {
+                    const text = node.textValue ?? String(node.rendered ?? '');
+                    if (textFilterFn(text, term)) {
+                        result.push(node);
+                    }
+                }
             }
-            return filterFn(candidate, searchValue);
-        };
-        // Filters a Section element and returns a cloned element with only the matching children.
-        const filterSection = (section) => {
-            if (!isValidElement(section))
-                return null;
-            const childrenArray = Children.toArray(section.props.children);
-            const filteredSectionChildren = childrenArray.filter(filterChild);
-            if (filteredSectionChildren.length === 0)
-                return null;
-            return cloneElement(section, { children: filteredSectionChildren });
+            return result;
         };
-        const childrenArray = Children.toArray(props.children);
-        const result = childrenArray
-            .map((child) => {
-            if (isValidElement(child) &&
-                (child.type === BaseSection || child.props?.title)) {
-                return filterSection(child);
-            }
-            return filterChild(child) ? child : null;
-        })
-            .filter(Boolean);
-        return result.length === 0 ? null : result;
-    }, [isSearchable, searchValue, props.children, filter, contains]);
-    // Create filtered items based on search
-    const filteredItems = useMemo(() => {
-        if (!isSearchable || !searchValue.trim()) {
-            return props.items;
-        }
-        const filterFn = filter || contains;
-        if (props.items) {
-            return Array.from(props.items).filter((item) => {
-                const textValue = typeof item === 'string'
-                    ? item
-                    : item?.textValue || item?.name || String(item);
-                return filterFn(textValue, searchValue);
-            });
-        }
-        return undefined;
-    }, [isSearchable, searchValue, props.items, filter, contains]);
+        return filterNodes(nodes);
+    }, [searchValue, textFilterFn]);
     // Wrap onSelectionChange to prevent selection when disabled and handle React Aria's Set format
     const externalSelectionHandler = onSelectionChange || props.onChange;
     const wrappedOnSelectionChange = useMemo(() => {
@@ -281,8 +259,7 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
     // Prepare props for useListState with correct selection props
     const listStateProps = {
         ...props,
-        items: filteredItems,
-        children: filteredChildren,
+        filter: collectionFilter,
         onSelectionChange: wrappedOnSelectionChange,
         isDisabled,
         selectionMode: props.selectionMode || 'single',
@@ -304,36 +281,21 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
         delete listStateProps.defaultSelectedKey;
     }
     else {
+        // For single-selection we convert the scalar key props that our public
+        // API exposes into the Set-based props that React Stately expects.
         if (selectedKey !== undefined) {
-            listStateProps.selectedKey = selectedKey;
+            listStateProps.selectedKeys =
+                selectedKey == null ? new Set() : new Set([selectedKey]);
         }
         if (defaultSelectedKey !== undefined) {
-            // useListState expects a Set for uncontrolled selections, even in single-selection mode
-            // so convert the provided key into a Set. Passing an empty Set means no default selection.
             listStateProps.defaultSelectedKeys =
                 defaultSelectedKey == null ? new Set() : new Set([defaultSelectedKey]);
         }
-        // Remove set-based props if any
-        delete listStateProps.selectedKeys;
+        // Remove the single-value props so we don't pass unsupported keys through.
+        delete listStateProps.selectedKey;
         delete listStateProps.defaultSelectedKey;
     }
     const listState = useListState(listStateProps);
-    // Manually sync controlled selection if needed
-    useEffect(() => {
-        if (selectedKey !== undefined) {
-            const currentSelection = listState.selectionManager.selectedKeys;
-            const expectedSelection = selectedKey !== null ? new Set([selectedKey]) : new Set();
-            // Check if the current selection matches the expected selection
-            const currentKeys = Array.from(currentSelection);
-            const expectedKeys = Array.from(expectedSelection);
-            const selectionChanged = currentKeys.length !== expectedKeys.length ||
-                currentKeys.some((key) => !expectedSelection.has(key)) ||
-                expectedKeys.some((key) => !currentSelection.has(key));
-            if (selectionChanged) {
-                listState.selectionManager.setSelectedKeys(expectedSelection);
-            }
-        }
-    }, [selectedKey, listState.selectionManager]);
     styles = extractStyles(otherProps, PROP_STYLES, styles);
     ref = useCombinedRefs(ref);
     searchInputRef = useCombinedRefs(searchInputRef);
@@ -347,6 +309,78 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
     }, listState, listRef);
     const { isFocused, focusProps } = useFocus({ isDisabled });
     const isInvalid = validationState === 'invalid';
+    // Keyboard navigation handler for search input
+    const { keyboardProps } = useKeyboard({
+        onKeyDown: (e) => {
+            if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                e.preventDefault();
+                const isArrowDown = e.key === 'ArrowDown';
+                const { selectionManager, collection } = listState;
+                const currentKey = selectionManager.focusedKey;
+                // Helper function to find next selectable item (skip section headers and disabled items)
+                const findNextSelectableKey = (startKey, direction) => {
+                    let nextKey = startKey;
+                    const keyGetter = direction === 'forward'
+                        ? collection.getKeyAfter.bind(collection)
+                        : collection.getKeyBefore.bind(collection);
+                    while (nextKey != null) {
+                        const item = collection.getItem(nextKey);
+                        // Use SelectionManager's canSelectItem method for proper validation
+                        if (item &&
+                            item.type !== 'section' &&
+                            selectionManager.canSelectItem(nextKey)) {
+                            return nextKey;
+                        }
+                        nextKey = keyGetter(nextKey);
+                    }
+                    return null;
+                };
+                // Helper function to find first/last selectable item
+                const findFirstLastSelectableKey = (direction) => {
+                    const allKeys = Array.from(collection.getKeys());
+                    const keysToCheck = direction === 'forward' ? allKeys : allKeys.reverse();
+                    for (const key of keysToCheck) {
+                        const item = collection.getItem(key);
+                        if (item &&
+                            item.type !== 'section' &&
+                            selectionManager.canSelectItem(key)) {
+                            return key;
+                        }
+                    }
+                    return null;
+                };
+                let nextKey = null;
+                const direction = isArrowDown ? 'forward' : 'backward';
+                if (currentKey == null) {
+                    // No current focus, find first/last selectable item
+                    nextKey = findFirstLastSelectableKey(direction);
+                }
+                else {
+                    // Find next selectable item from current position
+                    const candidateKey = direction === 'forward'
+                        ? collection.getKeyAfter(currentKey)
+                        : collection.getKeyBefore(currentKey);
+                    nextKey = findNextSelectableKey(candidateKey, direction);
+                    // If no next key found and focus wrapping is enabled, wrap to first/last selectable item
+                    if (nextKey == null) {
+                        nextKey = findFirstLastSelectableKey(direction);
+                    }
+                }
+                if (nextKey != null) {
+                    selectionManager.setFocusedKey(nextKey);
+                }
+            }
+            else if (e.key === 'Enter' || (e.key === ' ' && !searchValue.trim())) {
+                const focusedKey = listState.selectionManager.focusedKey;
+                if (focusedKey != null) {
+                    e.preventDefault();
+                    // Use the SelectionManager's select method which handles all selection logic
+                    // including single vs multiple selection modes and modifier keys
+                    listState.selectionManager.select(focusedKey, e);
+                }
+            }
+        },
+    });
     const mods = useMemo(() => ({
         invalid: isInvalid,
         valid: validationState === 'valid',
@@ -362,74 +396,13 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
         isLoading,
         isSearchable,
     ]);
-    const searchInput = isSearchable ? (_jsxs(SearchWrapperElement, { mods: mods, "data-size": "small", children: [_jsx(SearchInputElement, { ref: searchInputRef, "data-is-prefix": true, type: "search", placeholder: searchPlaceholder, value: searchValue, disabled: isDisabled, autoFocus: autoFocus && isSearchable, "data-autofocus": autoFocus && isSearchable ? '' : undefined, styles: searchInputStyles, "data-size": "small", "aria-controls": listBoxProps.id, "aria-activedescendant": listState.selectionManager.focusedKey != null
+    const searchInput = isSearchable ? (_jsxs(SearchWrapperElement, { mods: mods, "data-size": "small", children: [_jsx(SearchInputElement, { ref: searchInputRef, "data-is-prefix": true, type: "search", placeholder: searchPlaceholder, value: searchValue, disabled: isDisabled, autoFocus: autoFocus && isSearchable, "data-autofocus": autoFocus ? '' : undefined, styles: searchInputStyles, "data-size": "small", "aria-controls": listBoxProps.id, "aria-activedescendant": listState.selectionManager.focusedKey != null
                     ? `${listBoxProps.id}-option-${listState.selectionManager.focusedKey}`
-                    : undefined, onChange: (e) => setSearchValue(e.target.value), onKeyDown: (e) => {
-                    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
-                        e.preventDefault();
-                        const isArrowDown = e.key === 'ArrowDown';
-                        const keyGetter = isArrowDown
-                            ? listState.collection.getKeyAfter.bind(listState.collection)
-                            : listState.collection.getKeyBefore.bind(listState.collection);
-                        // Helper function to find next selectable item (skip section headers)
-                        const findNextSelectableKey = (startKey) => {
-                            let nextKey = startKey;
-                            // Keep looking for a selectable item (not a section header)
-                            while (nextKey != null) {
-                                const item = listState.collection.getItem(nextKey);
-                                if (item && item.type !== 'section') {
-                                    return nextKey;
-                                }
-                                nextKey = keyGetter(nextKey);
-                            }
-                            return null;
-                        };
-                        // Helper function to find first/last selectable item
-                        const findFirstLastSelectableKey = () => {
-                            const allKeys = Array.from(listState.collection.getKeys());
-                            const keysToCheck = isArrowDown ? allKeys : allKeys.reverse();
-                            for (const key of keysToCheck) {
-                                const item = listState.collection.getItem(key);
-                                if (item && item.type !== 'section') {
-                                    return key;
-                                }
-                            }
-                            return null;
-                        };
-                        let nextKey;
-                        const currentKey = listState.selectionManager.focusedKey;
-                        if (currentKey == null) {
-                            // No current focus, find first/last selectable item
-                            nextKey = findFirstLastSelectableKey();
-                        }
-                        else {
-                            // Find next selectable item from current position
-                            const candidateKey = keyGetter(currentKey);
-                            nextKey = findNextSelectableKey(candidateKey);
-                            // If no next key found, wrap to first/last selectable item
-                            if (nextKey == null) {
-                                nextKey = findFirstLastSelectableKey();
-                            }
-                        }
-                        if (nextKey != null) {
-                            listState.selectionManager.setFocusedKey(nextKey);
-                        }
-                    }
-                    else if (e.key === 'Enter' ||
-                        (e.key === ' ' && props.selectionMode === 'multiple')) {
-                        const focusedKey = listState.selectionManager.focusedKey;
-                        if (focusedKey != null) {
-                            e.preventDefault();
-                            if (props.selectionMode === 'multiple') {
-                                listState.selectionManager.toggleSelection(focusedKey);
-                            }
-                            else {
-                                listState.selectionManager.select(focusedKey);
-                            }
-                        }
-                    }
-                }, ...modAttrs(mods) }), _jsx("div", { "data-element": "Prefix", children: _jsx("div", { "data-element": "InputIcon", children: isLoading ? _jsx(LoadingIcon, {}) : _jsx(SearchIcon, {}) }) })] })) : null;
-    const listBoxField = (_jsxs(ListBoxWrapperElement, { ref: ref, qa: qa || 'ListBox', ...modAttrs(mods), styles: styles, ...focusProps, children: [searchInput, _jsx(ListElement, { ...listBoxProps, ref: listRef, styles: listStyles, "aria-disabled": isDisabled || undefined, children: (() => {
+                    : undefined, onChange: (e) => {
+                    const value = e.target.value;
+                    setSearchValue(value);
+                }, ...keyboardProps, ...modAttrs(mods) }), _jsx("div", { "data-element": "Prefix", children: _jsx("div", { "data-element": "InputIcon", children: isLoading ? _jsx(LoadingIcon, {}) : _jsx(SearchIcon, {}) }) })] })) : null;
+    const listBoxField = (_jsxs(ListBoxWrapperElement, { ref: ref, qa: qa || 'ListBox', ...modAttrs(mods), styles: styles, ...focusProps, children: [searchInput, _jsx(ListElement, { ...listBoxProps, ref: listRef, styles: listStyles, "aria-disabled": isDisabled || undefined, ...(!isSearchable ? keyboardProps : {}), children: (() => {
                     const renderedItems = [];
                     let isFirstSection = true;
                     for (const item of listState.collection) {
@@ -444,6 +417,12 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
                             renderedItems.push(_jsx(Option, { item: item, state: listState, styles: optionStyles, isParentDisabled: isDisabled, validationState: validationState }, item.key));
                         }
                     }
+                    // Show "No results found" message when there are no items after filtration
+                    if (renderedItems.length === 0 &&
+                        isSearchable &&
+                        searchValue.trim()) {
+                        return (_jsx("li", { children: _jsx(Block, { preset: "t4", color: "#dark-03", children: emptyLabel !== undefined ? emptyLabel : 'No results found' }) }));
+                    }
                     return renderedItems;
                 })() })] }));
     return wrapWithField(listBoxField, ref, mergeProps({ ...props, styles: undefined }, {}));
@@ -452,7 +431,8 @@ function Option({ item, state, styles, isParentDisabled, validationState }) {
     const ref = useRef(null);
     const isDisabled = isParentDisabled || state.disabledKeys.has(item.key);
     const isSelected = state.selectionManager.isSelected(item.key);
-    const { optionProps, isPressed, isFocused: optionFocused, } = useOption({
+    const isFocused = state.selectionManager.focusedKey === item.key;
+    const { optionProps, isPressed } = useOption({
         key: item.key,
         isDisabled,
         isSelected,
@@ -462,7 +442,7 @@ function Option({ item, state, styles, isParentDisabled, validationState }) {
     const description = item?.props?.description;
     return (_jsxs(OptionElement, { ...optionProps, ref: ref, mods: {
             selected: isSelected,
-            focused: optionFocused,
+            focused: isFocused,
             disabled: isDisabled,
             pressed: isPressed,
             valid: isSelected && validationState === 'valid',

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

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

package/es/components/fields/NumberInput/NumberInput.js

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

package/es/components/fields/NumberInput/StepButton.js

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

package/es/components/fields/PasswordInput/PasswordInput.js

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

package/es/components/fields/RadioGroup/Radio.js

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