@cube-dev/ui-kit 0.66.0 → 0.66.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @cube-dev/ui-kit
 
+## 0.66.1
+
+### Patch Changes
+
+- [#722](https://github.com/cube-js/cube-ui-kit/pull/722) [`7eaf393`](https://github.com/cube-js/cube-ui-kit/commit/7eaf393cedb574237afee6579ab21b7abf57f83e) Thanks [@tenphi](https://github.com/tenphi)! - Fix a bug when CommandMenu is unable to be navigated via keys when the search input is filled with any value.
+
 ## 0.66.0
 
 ### Minor Changes

package/es/_internal/hooks/index.js

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

package/es/_internal/hooks/use-chained-callback.js

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

package/es/_internal/hooks/use-debounced-value.js

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

package/es/_internal/hooks/use-deprecation-warning.js

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

package/es/_internal/hooks/use-effect-once.js

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

package/es/_internal/hooks/use-event.js

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

package/es/_internal/hooks/use-is-first-render.js

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

package/es/_internal/hooks/use-sync-ref.js

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

package/es/_internal/hooks/use-timer/index.js

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

package/es/_internal/hooks/use-timer/timer.js

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

package/es/_internal/hooks/use-timer/use-timer.js

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

package/es/_internal/hooks/use-update-effect.js

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

package/es/_internal/hooks/use-warn.js

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

package/es/_internal/index.js

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

package/es/components/Block.js

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

package/es/components/GlobalStyles.js

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

package/es/components/GridProvider.js

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

package/es/components/HiddenInput.js

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

package/es/components/OpenTrasition.js

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

package/es/components/Root.js

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

package/es/components/actions/Action/Action.js

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

package/es/components/actions/Button/Button.js

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

package/es/components/actions/Button/index.js

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

package/es/components/actions/ButtonGroup/ButtonGroup.js

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

package/es/components/actions/CommandMenu/CommandMenu.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.66.0
+ * @cube-dev/ui-kit v0.66.1
  * Released under the MIT license.
  */
 
@@ -148,6 +148,7 @@ function CommandMenuBase(props, ref) {
     const hasSections = collectionItems.some((item) => item.type === 'section');
     // Track focused key for aria-activedescendant
     const [focusedKey, setFocusedKey] = React.useState(null);
+    const focusedKeyRef = useRef(null);
     // Apply filtering to collection items for rendering and empty state checks
     const filteredCollectionItems = useMemo(() => {
         const term = searchValue.trim();
@@ -272,28 +273,31 @@ function CommandMenuBase(props, ref) {
             return () => clearTimeout(timeoutId);
         }
     }, [autoFocus, contextProps.autoFocus]);
+    // Track the previous search value to only run auto-focus when search actually changes
+    const prevSearchValueRef = useRef('');
     // Auto-focus first item when search value changes (but not on initial render)
     React.useEffect(() => {
-        // Only auto-focus when search value changes, not on initial mount
-        if (searchValue.trim() !== '') {
+        const currentSearchValue = searchValue.trim();
+        const prevSearchValue = prevSearchValueRef.current;
+        // Only auto-focus when search value actually changes
+        if (currentSearchValue !== prevSearchValue && currentSearchValue !== '') {
             const firstSelectableKey = findFirstSelectableItem();
             if (firstSelectableKey && hasFilteredItems) {
                 // Focus the first item in the selection manager
                 treeState.selectionManager.setFocusedKey(firstSelectableKey);
                 setFocusedKey(firstSelectableKey);
+                focusedKeyRef.current = firstSelectableKey;
             }
             else {
                 // Clear focus if no items are available
                 treeState.selectionManager.setFocusedKey(null);
                 setFocusedKey(null);
+                focusedKeyRef.current = null;
             }
         }
-    }, [
-        searchValue,
-        findFirstSelectableItem,
-        hasFilteredItems,
-        treeState.selectionManager,
-    ]);
+        // Update the previous search value
+        prevSearchValueRef.current = currentSearchValue;
+    }, [searchValue, findFirstSelectableItem, hasFilteredItems]);
     // Extract styles
     const extractedStyles = useMemo(() => extractStyles(props, CONTAINER_STYLES), [props]);
     // Determine if we should show empty state based on actual filtered collection
@@ -327,74 +331,77 @@ function CommandMenuBase(props, ref) {
                     if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
                         e.preventDefault();
                         const isArrowDown = e.key === 'ArrowDown';
-                        const { selectionManager, collection } = treeState;
-                        const currentKey = selectionManager.focusedKey;
-                        // Helper function to find next selectable key in a direction
-                        const findNextSelectableKey = (startKey, direction) => {
-                            if (startKey == null) {
-                                return null;
-                            }
-                            // First check if the startKey itself is selectable
-                            const startNode = collection.getItem(startKey);
-                            if (startNode &&
-                                startNode.type === 'item' &&
-                                !selectionManager.isDisabled(startKey)) {
-                                return startKey;
-                            }
-                            // If startKey is not selectable, find the next selectable key
-                            let keys = [...collection.getKeys()];
-                            if (direction === 'backward') {
-                                keys = keys.reverse();
-                            }
-                            let startIndex = keys.indexOf(startKey);
-                            if (startIndex === -1) {
-                                return null;
+                        const { selectionManager } = treeState;
+                        // Use the ref to get the current focused key synchronously
+                        const currentKey = focusedKeyRef.current || selectionManager.focusedKey;
+                        // Helper function to get all visible item keys by applying filter to tree state collection
+                        const getVisibleItemKeys = () => {
+                            const keys = [];
+                            const term = searchValue.trim();
+                            // Use the tree state's collection and apply filter manually
+                            for (const item of treeState.collection) {
+                                if (item.type === 'item') {
+                                    const text = item.textValue ?? String(item.rendered ?? '');
+                                    if (enhancedFilter(text, term, item.props)) {
+                                        keys.push(item.key);
+                                    }
+                                }
                             }
-                            for (let i = startIndex + 1; i < keys.length; i++) {
-                                const key = keys[i];
-                                const node = collection.getItem(key);
-                                if (node &&
-                                    node.type === 'item' &&
-                                    !selectionManager.isDisabled(key)) {
+                            return keys;
+                        };
+                        // Helper function to find next selectable key in a direction
+                        const findNextSelectableKey = (currentIndex, direction, visibleKeys) => {
+                            const increment = direction === 'forward' ? 1 : -1;
+                            for (let i = currentIndex + increment; i >= 0 && i < visibleKeys.length; i += increment) {
+                                const key = visibleKeys[i];
+                                if (!selectionManager.isDisabled(key)) {
                                     return key;
                                 }
                             }
                             return null;
                         };
                         // Helper function to find first or last selectable key
-                        const findFirstLastSelectableKey = (direction) => {
-                            const keys = [...collection.getKeys()];
-                            const keysToCheck = direction === 'forward' ? keys : keys.reverse();
+                        const findFirstLastSelectableKey = (direction, visibleKeys) => {
+                            const keysToCheck = direction === 'forward'
+                                ? visibleKeys
+                                : [...visibleKeys].reverse();
                             for (const key of keysToCheck) {
-                                const node = collection.getItem(key);
-                                if (node &&
-                                    node.type === 'item' &&
-                                    !selectionManager.isDisabled(key)) {
+                                if (!selectionManager.isDisabled(key)) {
                                     return key;
                                 }
                             }
                             return null;
                         };
+                        const visibleKeys = getVisibleItemKeys();
+                        if (visibleKeys.length === 0) {
+                            return; // No visible items to navigate
+                        }
                         let nextKey;
                         const direction = isArrowDown ? 'forward' : 'backward';
                         if (currentKey == null) {
                             // No current focus, start from the first/last item
-                            nextKey = findFirstLastSelectableKey(direction);
+                            nextKey = findFirstLastSelectableKey(direction, visibleKeys);
                         }
                         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);
+                            // Find current position in visible keys
+                            const currentIndex = visibleKeys.indexOf(currentKey);
+                            if (currentIndex === -1) {
+                                // Current key not in visible items, start from beginning/end
+                                nextKey = findFirstLastSelectableKey(direction, visibleKeys);
+                            }
+                            else {
+                                // Find next selectable item from current position
+                                nextKey = findNextSelectableKey(currentIndex, direction, visibleKeys);
+                                // If no next key found, wrap to first/last selectable item
+                                if (nextKey == null) {
+                                    nextKey = findFirstLastSelectableKey(direction, visibleKeys);
+                                }
                             }
                         }
                         if (nextKey != null) {
                             selectionManager.setFocusedKey(nextKey);
                             setFocusedKey(nextKey);
+                            focusedKeyRef.current = nextKey; // Update ref immediately
                         }
                     }
                     else if (e.key === 'Enter' ||

package/es/components/actions/CommandMenu/index.js

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

package/es/components/actions/CommandMenu/styled.js

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

package/es/components/actions/Menu/Menu.js

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

package/es/components/actions/Menu/MenuItem.js

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

package/es/components/actions/Menu/MenuSection.js

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

package/es/components/actions/Menu/MenuTrigger.js

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

package/es/components/actions/Menu/context.js

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

package/es/components/actions/Menu/index.js

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

package/es/components/actions/Menu/styled.js

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

package/es/components/actions/index.js

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

package/es/components/actions/use-action.js

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

package/es/components/content/ActiveZone/ActiveZone.js

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

package/es/components/content/Alert/Alert.js

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

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

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

package/es/components/content/Alert/types.js

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

package/es/components/content/Alert/use-alert.js

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

package/es/components/content/Avatar/Avatar.js

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

package/es/components/content/Badge/Badge.js

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

package/es/components/content/Card/Card.js

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

package/es/components/content/Content.js

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

package/es/components/content/CopyPasteBlock/CopyPasteBlock.js

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