@vellira-ui/core 2.31.0 → 2.33.0

package/dist/useDropdown.d.ts

@@ -6,10 +6,11 @@ export interface UseDropdownParams<TItem extends NavigableItem> {
     disabled?: boolean;
     onOpenChange?: (open: boolean) => void;
     onSelect?: (value: string) => void;
-    getItemValue: (item: TItem) => string;
+    getItemValue: (item: TItem, index: number) => string;
     getItemText?: (item: TItem) => string;
+    loop?: boolean;
 }
-export declare const useDropdown: <TItem extends NavigableItem>({ items, open, defaultOpen, disabled, onOpenChange, onSelect, getItemValue, getItemText, }: UseDropdownParams<TItem>) => {
+export declare const useDropdown: <TItem extends NavigableItem>({ items, open, defaultOpen, disabled, onOpenChange, onSelect, getItemValue, getItemText, loop, }: UseDropdownParams<TItem>) => {
     activeIndex: number;
     setActiveIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
     isOpen: boolean;

package/dist/useDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDropdown.d.ts","sourceRoot":"","sources":["../src/useDropdown.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,uBAAuB,EAC5B,KAAK,aAAa,EAEnB,MAAM,4BAA4B,CAAC;AAEpC,MAAM,WAAW,iBAAiB,CAAC,KAAK,SAAS,aAAa;IAC5D,KAAK,EAAE,KAAK,EAAE,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,MAAM,CAAC;IACtC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,MAAM,CAAC;CACvC;AAED,eAAO,MAAM,WAAW,GAAI,KAAK,SAAS,aAAa,EAAE,4FAStD,iBAAiB,CAAC,KAAK,CAAC;;;;;wBA6CZ,OAAO,iBAAiB,MAAM;;;;uBAsClC,KAAK;mBAAL,KAAK;;;;;CA+Cf,CAAC"}
+{"version":3,"file":"useDropdown.d.ts","sourceRoot":"","sources":["../src/useDropdown.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,uBAAuB,EAC5B,KAAK,aAAa,EAEnB,MAAM,4BAA4B,CAAC;AAEpC,MAAM,WAAW,iBAAiB,CAAC,KAAK,SAAS,aAAa;IAC5D,KAAK,EAAE,KAAK,EAAE,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACrD,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,MAAM,CAAC;IACtC,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,WAAW,GAAI,KAAK,SAAS,aAAa,EAAE,kGAUtD,iBAAiB,CAAC,KAAK,CAAC;;;;;wBA6CZ,OAAO,iBAAiB,MAAM;;;;uBAsClC,KAAK;mBAAL,KAAK;;;;;CAgDf,CAAC"}

package/dist/useDropdown.js

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useKeyboardNavigation, } from './useKeyboardNavigation.js';
-export const useDropdown = ({ items, open, defaultOpen = false, disabled = false, onOpenChange, onSelect, getItemValue, getItemText, }) => {
+export const useDropdown = ({ items, open, defaultOpen = false, disabled = false, onOpenChange, onSelect, getItemValue, getItemText, loop = true, }) => {
     const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
     const [activeIndex, setActiveIndex] = useState(-1);
     const isControlled = open !== undefined;
@@ -58,9 +58,9 @@ export const useDropdown = ({ items, open, defaultOpen = false, disabled = false
     const selectItem = useCallback((item) => {
         if (item.disabled)
             return;
-        onSelect?.(getItemValue(item));
+        onSelect?.(getItemValue(item, items.indexOf(item)));
         closeDropdown();
-    }, [closeDropdown, getItemValue, onSelect]);
+    }, [closeDropdown, getItemValue, items, onSelect]);
     const selectActiveItem = useCallback(() => {
         const item = items[activeIndex];
         if (!item)
@@ -78,6 +78,7 @@ export const useDropdown = ({ items, open, defaultOpen = false, disabled = false
         onSelect: selectActiveItem,
         onClose: closeDropdown,
         getItemText,
+        loop,
     });
     return {
         activeIndex,

package/dist/useKeyboardNavigation.d.ts

@@ -17,8 +17,9 @@ export interface UseKeyboardNavigationParams<TItem extends NavigableItem> {
     onSelect?: () => void;
     onClose?: () => void;
     getItemText?: (item: TItem) => string;
+    loop?: boolean;
 }
-export declare const useKeyboardNavigation: <TItem extends NavigableItem>({ activeIndex, setActiveIndex, items, isOpen, onOpen, onSelect, onClose, getItemText, }: UseKeyboardNavigationParams<TItem>) => {
+export declare const useKeyboardNavigation: <TItem extends NavigableItem>({ activeIndex, setActiveIndex, items, isOpen, onOpen, onSelect, onClose, getItemText, loop, }: 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,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,CAAC,KAAK,EAAE,uBAAuB,KAAK,IAAI,CAAC;IACjD,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;CA6FlC,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,CAAC,KAAK,EAAE,uBAAuB,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,MAAM,CAAC;IACtC,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,qBAAqB,GAAI,KAAK,SAAS,aAAa,EAAE,+FAUhE,2BAA2B,CAAC,KAAK,CAAC;uBAiFzB,uBAAuB;CA6FlC,CAAC"}

package/dist/useKeyboardNavigation.js

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef } from 'react';
-export const useKeyboardNavigation = ({ activeIndex, setActiveIndex, items, isOpen, onOpen, onSelect, onClose, getItemText, }) => {
+export const useKeyboardNavigation = ({ activeIndex, setActiveIndex, items, isOpen, onOpen, onSelect, onClose, getItemText, loop = true, }) => {
     const searchRef = useRef({
         value: '',
         timeoutId: undefined,
@@ -14,13 +14,17 @@ export const useKeyboardNavigation = ({ activeIndex, setActiveIndex, items, isOp
             return current;
         let index = current;
         for (let i = 0; i < items.length; i++) {
-            index = (index + direction + items.length) % items.length;
+            const nextIndex = index + direction;
+            if (!loop && (nextIndex < 0 || nextIndex >= items.length)) {
+                return current;
+            }
+            index = (nextIndex + items.length) % items.length;
             if (!items[index]?.disabled) {
                 return index;
             }
         }
         return current;
-    }, [items]);
+    }, [items, loop]);
     const getFirstEnabledIndex = useCallback(() => items.findIndex((item) => !item.disabled), [items]);
     const getLastEnabledIndex = useCallback(() => {
         for (let i = items.length - 1; i >= 0; i--) {

package/dist/useSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSelect.d.ts","sourceRoot":"","sources":["../src/useSelect.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,aAAa,EAEnB,MAAM,4BAA4B,CAAC;AAEpC,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;AAEjD,MAAM,WAAW,eAAe,CAAC,OAAO,SAAS,gBAAgB;IAC/D,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC7C,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,eAAO,MAAM,SAAS,GAAI,OAAO,SAAS,gBAAgB,EAAE,6IAazD,eAAe,CAAC,OAAO,CAAC;;;;;;;;;;;;;;;6BAmEX,MAAM;wBAAN,MAAM;;;CAsFrB,CAAC"}
+{"version":3,"file":"useSelect.d.ts","sourceRoot":"","sources":["../src/useSelect.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,aAAa,EAEnB,MAAM,4BAA4B,CAAC;AAEpC,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;AAEjD,MAAM,WAAW,eAAe,CAAC,OAAO,SAAS,gBAAgB;IAC/D,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC7C,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,eAAO,MAAM,SAAS,GAAI,OAAO,SAAS,gBAAgB,EAAE,6IAazD,eAAe,CAAC,OAAO,CAAC;;;;;;;;;;;;;;;6BAiFX,MAAM;wBAAN,MAAM;;;CAuFrB,CAAC"}

package/dist/useSelect.js

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useControllableState } from './useControllableState.js';
 import { useKeyboardNavigation, } from './useKeyboardNavigation.js';
 export const useSelect = ({ value, defaultValue, onValueChange, onChange, options, multiple = false, maxSelected, closeOnSelect = !multiple, disabled = false, open, defaultOpen = false, onOpenChange, }) => {
@@ -44,6 +44,17 @@ export const useSelect = ({ value, defaultValue, onValueChange, onChange, option
         }
         openDropdown();
     }, [closeDropdown, disabled, isOpen, openDropdown]);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        setActiveIndex((currentIndex) => {
+            const currentOption = options[currentIndex];
+            if (currentOption && !currentOption.disabled) {
+                return currentIndex;
+            }
+            return getInitialActiveIndex();
+        });
+    }, [getInitialActiveIndex, isOpen, options]);
     const selectValue = useCallback((nextValue) => {
         if (nextValue === '') {
             setSelectedValue(multiple ? [] : '');
@@ -70,6 +81,7 @@ export const useSelect = ({ value, defaultValue, onValueChange, onChange, option
             return;
         }
         setSelectedValue(nextValue);
+        setActiveIndex(options.indexOf(nextOption));
         closeDropdown();
     }, [
         closeDropdown,

package/package.json

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