@vellira-ui/core 2.23.0 → 2.25.0

package/dist/useKeyboardNavigation.d.ts

@@ -3,6 +3,9 @@ export interface NavigableItem {
 }
 export interface KeyboardNavigationEvent {
     key: string;
+    altKey?: boolean;
+    ctrlKey?: boolean;
+    metaKey?: boolean;
     preventDefault: () => void;
 }
 export interface UseKeyboardNavigationParams<TItem extends NavigableItem> {
@@ -13,8 +16,9 @@ export interface UseKeyboardNavigationParams<TItem extends NavigableItem> {
     onOpen: () => void;
     onSelect?: () => void;
     onClose?: () => void;
+    getItemText?: (item: TItem) => string;
 }
-export declare const useKeyboardNavigation: <TItem extends NavigableItem>({ activeIndex, setActiveIndex, items, isOpen, onOpen, onSelect, onClose, }: UseKeyboardNavigationParams<TItem>) => {
+export declare const useKeyboardNavigation: <TItem extends NavigableItem>({ activeIndex, setActiveIndex, items, isOpen, onOpen, onSelect, onClose, getItemText, }: UseKeyboardNavigationParams<TItem>) => {
     onKeyDown: (event: KeyboardNavigationEvent) => void;
 };
 //# sourceMappingURL=useKeyboardNavigation.d.ts.map

package/dist/useKeyboardNavigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useKeyboardNavigation.d.ts","sourceRoot":"","sources":["../src/useKeyboardNavigation.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,uBAAuB;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,MAAM,WAAW,2BAA2B,CAAC,KAAK,SAAS,aAAa;IACtE,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,KAAK,EAAE,KAAK,EAAE,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,qBAAqB,GAAI,KAAK,SAAS,aAAa,EAAE,4EAQhE,2BAA2B,CAAC,KAAK,CAAC;uBAqBzB,uBAAuB;CAqElC,CAAC"}
+{"version":3,"file":"useKeyboardNavigation.d.ts","sourceRoot":"","sources":["../src/useKeyboardNavigation.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,uBAAuB;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,MAAM,WAAW,2BAA2B,CAAC,KAAK,SAAS,aAAa;IACtE,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,KAAK,EAAE,KAAK,EAAE,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,MAAM,CAAC;CACvC;AAED,eAAO,MAAM,qBAAqB,GAAI,KAAK,SAAS,aAAa,EAAE,yFAShE,2BAA2B,CAAC,KAAK,CAAC;uBA2EzB,uBAAuB;CA8FlC,CAAC"}

package/dist/useKeyboardNavigation.js

@@ -1,5 +1,14 @@
-import { useCallback } from 'react';
-export const useKeyboardNavigation = ({ activeIndex, setActiveIndex, items, isOpen, onOpen, onSelect, onClose, }) => {
+import { useCallback, useEffect, useRef } from 'react';
+export const useKeyboardNavigation = ({ activeIndex, setActiveIndex, items, isOpen, onOpen, onSelect, onClose, getItemText, }) => {
+    const searchRef = useRef({
+        value: '',
+        timeoutId: undefined,
+    });
+    useEffect(() => () => {
+        if (searchRef.current.timeoutId) {
+            clearTimeout(searchRef.current.timeoutId);
+        }
+    }, []);
     const getNextEnabledIndex = useCallback((current, direction) => {
         if (!items.length)
             return current;
@@ -12,6 +21,31 @@ export const useKeyboardNavigation = ({ activeIndex, setActiveIndex, items, isOp
         }
         return current;
     }, [items]);
+    const getFirstEnabledIndex = useCallback(() => items.findIndex((item) => !item.disabled), [items]);
+    const getLastEnabledIndex = useCallback(() => {
+        for (let i = items.length - 1; i >= 0; i--) {
+            if (!items[i].disabled) {
+                return i;
+            }
+        }
+        return -1;
+    }, [items]);
+    const getTypeaheadIndex = useCallback((query) => {
+        if (!getItemText || !query)
+            return -1;
+        const normalizedQuery = query.toLocaleLowerCase();
+        const startIndex = activeIndex >= 0 ? activeIndex + 1 : 0;
+        for (let offset = 0; offset < items.length; offset++) {
+            const index = (startIndex + offset) % items.length;
+            const item = items[index];
+            if (item &&
+                !item.disabled &&
+                getItemText(item).toLocaleLowerCase().startsWith(normalizedQuery)) {
+                return index;
+            }
+        }
+        return -1;
+    }, [activeIndex, getItemText, items]);
     const onKeyDown = useCallback((event) => {
         if (!isOpen) {
             if (event.key === ' ' ||
@@ -43,20 +77,35 @@ export const useKeyboardNavigation = ({ activeIndex, setActiveIndex, items, isOp
                 break;
             case 'Home':
                 event.preventDefault();
-                setActiveIndex(items.findIndex((item) => !item.disabled));
+                setActiveIndex(getFirstEnabledIndex());
                 break;
             case 'End':
                 event.preventDefault();
-                for (let i = items.length - 1; i >= 0; i--) {
-                    if (!items[i].disabled) {
-                        setActiveIndex(i);
-                        break;
-                    }
-                }
+                setActiveIndex(getLastEnabledIndex());
                 break;
             case 'Tab':
                 onClose?.();
                 break;
+            default:
+                if (event.key.length === 1 &&
+                    !event.altKey &&
+                    !event.ctrlKey &&
+                    !event.metaKey) {
+                    event.preventDefault();
+                    if (searchRef.current.timeoutId) {
+                        clearTimeout(searchRef.current.timeoutId);
+                    }
+                    searchRef.current.value += event.key;
+                    searchRef.current.timeoutId = setTimeout(() => {
+                        searchRef.current.value = '';
+                        searchRef.current.timeoutId = undefined;
+                    }, 700);
+                    const nextIndex = getTypeaheadIndex(searchRef.current.value);
+                    if (nextIndex >= 0) {
+                        setActiveIndex(nextIndex);
+                    }
+                }
+                break;
         }
     }, [
         activeIndex,
@@ -67,6 +116,9 @@ export const useKeyboardNavigation = ({ activeIndex, setActiveIndex, items, isOp
         onClose,
         setActiveIndex,
         getNextEnabledIndex,
+        getFirstEnabledIndex,
+        getLastEnabledIndex,
+        getTypeaheadIndex,
     ]);
     return { onKeyDown };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vellira-ui/core",
-  "version": "2.23.0",
+  "version": "2.25.0",
   "description": "Shared logic and hooks for Vellira Design System",
   "author": "Roman Bakurov",
   "license": "MIT",