@vellira-ui/core 2.25.0 → 2.26.0

package/dist/index.d.ts

@@ -1,4 +1,8 @@
 export * from './useControllableState.js';
+export * from './useDropdown.js';
 export * from './useKeyboardNavigation.js';
+export * from './useModal.js';
+export * from './useSelect.js';
+export * from './useTabs.js';
 export * from './useTabsKeyboard.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC"}

package/dist/index.js

@@ -1,3 +1,7 @@
 export * from './useControllableState.js';
+export * from './useDropdown.js';
 export * from './useKeyboardNavigation.js';
+export * from './useModal.js';
+export * from './useSelect.js';
+export * from './useTabs.js';
 export * from './useTabsKeyboard.js';

package/dist/useDropdown.d.ts

@@ -1 +1,28 @@
+import { type KeyboardNavigationEvent, type NavigableItem } from './useKeyboardNavigation.js';
+export interface UseDropdownParams<TItem extends NavigableItem> {
+    items: TItem[];
+    open?: boolean;
+    defaultOpen?: boolean;
+    disabled?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onSelect?: (value: string) => void;
+    getItemValue: (item: TItem) => string;
+    getItemText?: (item: TItem) => string;
+}
+export declare const useDropdown: <TItem extends NavigableItem>({ items, open, defaultOpen, disabled, onOpenChange, onSelect, getItemValue, getItemText, }: UseDropdownParams<TItem>) => {
+    activeIndex: number;
+    setActiveIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
+    isOpen: boolean;
+    open: boolean;
+    setOpen: (nextOpen: boolean, initialIndex?: number) => void;
+    openDropdown: (initialIndex?: number) => void;
+    closeDropdown: () => void;
+    toggleDropdown: () => void;
+    selectItem: (item: TItem) => void;
+    select: (item: TItem) => void;
+    selectActiveItem: () => void;
+    onKeyDown: (event: KeyboardNavigationEvent) => void;
+    getFirstEnabledIndex: () => number;
+    getLastEnabledIndex: () => number;
+};
 //# sourceMappingURL=useDropdown.d.ts.map

package/dist/useDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDropdown.d.ts","sourceRoot":"","sources":["../src/useDropdown.ts"],"names":[],"mappings":""}
+{"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"}

package/dist/useDropdown.js

@@ -1 +1,98 @@
-"use strict";
+import { useCallback, useEffect, useState } from 'react';
+import { useKeyboardNavigation, } from './useKeyboardNavigation.js';
+export const useDropdown = ({ items, open, defaultOpen = false, disabled = false, onOpenChange, onSelect, getItemValue, getItemText, }) => {
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const isControlled = open !== undefined;
+    const isOpen = open ?? uncontrolledOpen;
+    const getFirstEnabledIndex = useCallback(() => items.findIndex((item) => !item.disabled), [items]);
+    const getLastEnabledIndex = useCallback(() => {
+        for (let index = items.length - 1; index >= 0; index--) {
+            if (!items[index]?.disabled) {
+                return index;
+            }
+        }
+        return -1;
+    }, [items]);
+    const syncActiveIndex = useCallback((nextOpen, initialIndex) => {
+        if (nextOpen) {
+            setActiveIndex((currentIndex) => {
+                if (currentIndex >= 0 && !items[currentIndex]?.disabled) {
+                    return currentIndex;
+                }
+                return initialIndex ?? getFirstEnabledIndex();
+            });
+            return;
+        }
+        setActiveIndex(-1);
+    }, [getFirstEnabledIndex, items]);
+    useEffect(() => {
+        syncActiveIndex(isOpen);
+    }, [isOpen, syncActiveIndex]);
+    const setOpen = useCallback((nextOpen, initialIndex) => {
+        if (!isControlled) {
+            setUncontrolledOpen(nextOpen);
+        }
+        onOpenChange?.(nextOpen);
+        syncActiveIndex(nextOpen, initialIndex);
+    }, [isControlled, onOpenChange, syncActiveIndex]);
+    const openDropdown = useCallback((initialIndex = getFirstEnabledIndex()) => {
+        if (disabled)
+            return;
+        setOpen(true, initialIndex);
+    }, [disabled, getFirstEnabledIndex, setOpen]);
+    const closeDropdown = useCallback(() => {
+        if (!isOpen)
+            return;
+        setOpen(false);
+    }, [isOpen, setOpen]);
+    const toggleDropdown = useCallback(() => {
+        if (disabled)
+            return;
+        if (isOpen) {
+            setOpen(false);
+            return;
+        }
+        openDropdown();
+    }, [disabled, isOpen, openDropdown, setOpen]);
+    const selectItem = useCallback((item) => {
+        if (item.disabled)
+            return;
+        onSelect?.(getItemValue(item));
+        closeDropdown();
+    }, [closeDropdown, getItemValue, onSelect]);
+    const selectActiveItem = useCallback(() => {
+        const item = items[activeIndex];
+        if (!item)
+            return;
+        selectItem(item);
+    }, [activeIndex, items, selectItem]);
+    const { onKeyDown } = useKeyboardNavigation({
+        activeIndex,
+        setActiveIndex,
+        items,
+        isOpen,
+        onOpen: (event) => {
+            openDropdown(event.key === 'ArrowUp' ? getLastEnabledIndex() : getFirstEnabledIndex());
+        },
+        onSelect: selectActiveItem,
+        onClose: closeDropdown,
+        getItemText,
+    });
+    return {
+        activeIndex,
+        setActiveIndex,
+        isOpen,
+        open: isOpen,
+        setOpen,
+        openDropdown,
+        closeDropdown,
+        toggleDropdown,
+        selectItem,
+        select: selectItem,
+        selectActiveItem,
+        onKeyDown,
+        getFirstEnabledIndex,
+        getLastEnabledIndex,
+    };
+};

package/dist/useKeyboardNavigation.d.ts

@@ -13,7 +13,7 @@ export interface UseKeyboardNavigationParams<TItem extends NavigableItem> {
     setActiveIndex: (index: number) => void;
     items: TItem[];
     isOpen: boolean;
-    onOpen: () => void;
+    onOpen: (event: KeyboardNavigationEvent) => void;
     onSelect?: () => void;
     onClose?: () => void;
     getItemText?: (item: TItem) => string;

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,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"}
+{"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"}

package/dist/useKeyboardNavigation.js

@@ -53,7 +53,7 @@ export const useKeyboardNavigation = ({ activeIndex, setActiveIndex, items, isOp
                 event.key === 'ArrowDown' ||
                 event.key === 'ArrowUp') {
                 event.preventDefault();
-                onOpen();
+                onOpen(event);
             }
             return;
         }
@@ -109,7 +109,6 @@ export const useKeyboardNavigation = ({ activeIndex, setActiveIndex, items, isOp
         }
     }, [
         activeIndex,
-        items,
         isOpen,
         onOpen,
         onSelect,

package/dist/useModal.d.ts

@@ -1 +1,18 @@
+export interface UseModalParams {
+    isOpen: boolean;
+    onClose: () => void;
+    closeOnBackdrop?: boolean;
+    closeOnClick?: boolean;
+    closeOnEsc?: boolean;
+}
+export declare const useModal: ({ isOpen, onClose, closeOnBackdrop, closeOnClick, closeOnEsc, }: UseModalParams) => {
+    isOpen: boolean;
+    open: boolean;
+    shouldRender: boolean;
+    onClose: () => void;
+    closeOnBackdrop: boolean | undefined;
+    closeOnEsc: boolean;
+    titleId: string;
+    descriptionId: string;
+};
 //# sourceMappingURL=useModal.d.ts.map

package/dist/useModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useModal.d.ts","sourceRoot":"","sources":["../src/useModal.ts"],"names":[],"mappings":""}
+{"version":3,"file":"useModal.d.ts","sourceRoot":"","sources":["../src/useModal.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,QAAQ,GAAI,iEAMtB,cAAc;;;;mBAZA,IAAI;;;;;CA2BpB,CAAC"}

package/dist/useModal.js

@@ -1 +1,16 @@
-"use strict";
+import { useId } from 'react';
+export const useModal = ({ isOpen, onClose, closeOnBackdrop, closeOnClick, closeOnEsc = true, }) => {
+    const titleId = useId();
+    const descriptionId = useId();
+    const resolvedCloseOnBackdrop = closeOnBackdrop ?? closeOnClick;
+    return {
+        isOpen,
+        open: isOpen,
+        shouldRender: isOpen,
+        onClose,
+        closeOnBackdrop: resolvedCloseOnBackdrop,
+        closeOnEsc,
+        titleId,
+        descriptionId,
+    };
+};

package/dist/useSelect.d.ts

@@ -1 +1,34 @@
+import { type NavigableItem } from './useKeyboardNavigation.js';
+export interface SelectOptionLike extends NavigableItem {
+    label: string;
+    value: string;
+}
+export interface UseSelectParams<TOption extends SelectOptionLike> {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    options: TOption[];
+    disabled?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+export declare const useSelect: <TOption extends SelectOptionLike>({ value, defaultValue, onChange, options, disabled, open, defaultOpen, onOpenChange, }: UseSelectParams<TOption>) => {
+    selectedValue: string;
+    setSelectedValue: (next: string) => void;
+    selectedOption: TOption | undefined;
+    isOpen: boolean;
+    open: boolean;
+    setIsOpen: (next: boolean) => void;
+    activeIndex: number;
+    setActiveIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
+    getInitialActiveIndex: () => number;
+    openDropdown: () => void;
+    closeDropdown: () => void;
+    toggleDropdown: () => void;
+    selectValue: (nextValue: string) => void;
+    select: (nextValue: string) => void;
+    selectActiveOption: () => void;
+    onKeyDown: (event: import("./useKeyboardNavigation.js").KeyboardNavigationEvent) => void;
+};
 //# sourceMappingURL=useSelect.d.ts.map

package/dist/useSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSelect.d.ts","sourceRoot":"","sources":["../src/useSelect.ts"],"names":[],"mappings":""}
+{"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,WAAW,eAAe,CAAC,OAAO,SAAS,gBAAgB;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,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,wFASzD,eAAe,CAAC,OAAO,CAAC;;;;;;;;;;;;;6BAoDX,MAAM;wBAAN,MAAM;;;CAgDrB,CAAC"}

package/dist/useSelect.js

@@ -1 +1,82 @@
-"use strict";
+import { useCallback, useMemo, useState } from 'react';
+import { useControllableState } from './useControllableState.js';
+import { useKeyboardNavigation, } from './useKeyboardNavigation.js';
+export const useSelect = ({ value, defaultValue, onChange, options, disabled = false, open, defaultOpen = false, onOpenChange, }) => {
+    const [selectedValue, setSelectedValue] = useControllableState({
+        value,
+        defaultValue: defaultValue ?? '',
+        onChange,
+    });
+    const [isOpen, setIsOpen] = useControllableState({
+        value: open,
+        defaultValue: defaultOpen,
+        onChange: onOpenChange,
+    });
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const selectedOption = useMemo(() => options.find((option) => option.value === selectedValue), [options, selectedValue]);
+    const getInitialActiveIndex = useCallback(() => {
+        const selectedIndex = options.findIndex((option) => option.value === selectedValue && !option.disabled);
+        if (selectedIndex >= 0)
+            return selectedIndex;
+        return options.findIndex((option) => !option.disabled);
+    }, [options, selectedValue]);
+    const openDropdown = useCallback(() => {
+        if (disabled)
+            return;
+        setActiveIndex(getInitialActiveIndex());
+        setIsOpen(true);
+    }, [disabled, getInitialActiveIndex, setIsOpen]);
+    const closeDropdown = useCallback(() => {
+        setIsOpen(false);
+    }, [setIsOpen]);
+    const toggleDropdown = useCallback(() => {
+        if (disabled)
+            return;
+        if (isOpen) {
+            closeDropdown();
+            return;
+        }
+        openDropdown();
+    }, [closeDropdown, disabled, isOpen, openDropdown]);
+    const selectValue = useCallback((nextValue) => {
+        const nextOption = options.find((option) => option.value === nextValue);
+        if (!nextOption || nextOption.disabled)
+            return;
+        setSelectedValue(nextValue);
+        closeDropdown();
+    }, [closeDropdown, options, setSelectedValue]);
+    const selectActiveOption = useCallback(() => {
+        const activeOption = options[activeIndex];
+        if (!activeOption)
+            return;
+        selectValue(activeOption.value);
+    }, [activeIndex, options, selectValue]);
+    const { onKeyDown } = useKeyboardNavigation({
+        activeIndex,
+        setActiveIndex,
+        items: options,
+        isOpen,
+        onOpen: openDropdown,
+        onClose: closeDropdown,
+        onSelect: selectActiveOption,
+        getItemText: (option) => option.label,
+    });
+    return {
+        selectedValue,
+        setSelectedValue,
+        selectedOption,
+        isOpen,
+        open: isOpen,
+        setIsOpen,
+        activeIndex,
+        setActiveIndex,
+        getInitialActiveIndex,
+        openDropdown,
+        closeDropdown,
+        toggleDropdown,
+        selectValue,
+        select: selectValue,
+        selectActiveOption,
+        onKeyDown,
+    };
+};

package/dist/useTabs.d.ts

@@ -1 +1,11 @@
+export interface UseTabsParams {
+    activeIndex?: number;
+    defaultActiveIndex?: number;
+    onChange?: (index: number) => void;
+    orientation?: 'horizontal' | 'vertical';
+}
+export declare const useTabs: ({ activeIndex: controlledActiveIndex, defaultActiveIndex, onChange, }: UseTabsParams) => {
+    activeIndex: number;
+    setActiveIndex: (next: number) => void;
+};
 //# sourceMappingURL=useTabs.d.ts.map

package/dist/useTabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTabs.d.ts","sourceRoot":"","sources":["../src/useTabs.ts"],"names":[],"mappings":""}
+{"version":3,"file":"useTabs.d.ts","sourceRoot":"","sources":["../src/useTabs.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,aAAa;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC;AAED,eAAO,MAAM,OAAO,GAAI,uEAIrB,aAAa;;;CAWf,CAAC"}

package/dist/useTabs.js

@@ -1 +1,12 @@
-"use strict";
+import { useControllableState } from './useControllableState.js';
+export const useTabs = ({ activeIndex: controlledActiveIndex, defaultActiveIndex = 0, onChange, }) => {
+    const [activeIndex, setActiveIndex] = useControllableState({
+        value: controlledActiveIndex,
+        defaultValue: defaultActiveIndex,
+        onChange,
+    });
+    return {
+        activeIndex,
+        setActiveIndex,
+    };
+};

package/dist/useTabsKeyboard.d.ts

@@ -5,7 +5,6 @@ export interface TabsKeyboardEvent {
 }
 export interface TabKeyboardItem {
     disabled?: boolean;
-    focus?: () => void;
     props?: {
         disabled?: boolean;
     };
@@ -15,8 +14,9 @@ export interface UseTabsKeyboardParams<TItem extends TabKeyboardItem> {
     setActiveIndex: (index: number) => void;
     tabRefs: MutableRefObject<(TItem | null)[]>;
     orientation: 'horizontal' | 'vertical';
+    onNavigate?: (index: number) => void;
 }
-export declare const useTabsKeyboard: <TItem extends TabKeyboardItem>({ activeIndex, setActiveIndex, tabRefs, orientation, }: UseTabsKeyboardParams<TItem>) => {
+export declare const useTabsKeyboard: <TItem extends TabKeyboardItem>({ activeIndex, setActiveIndex, tabRefs, orientation, onNavigate, }: UseTabsKeyboardParams<TItem>) => {
     onKeyDown: (event: TabsKeyboardEvent) => void;
 };
 //# sourceMappingURL=useTabsKeyboard.d.ts.map

package/dist/useTabsKeyboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTabsKeyboard.d.ts","sourceRoot":"","sources":["../src/useTabsKeyboard.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAE9C,MAAM,WAAW,iBAAiB;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,KAAK,CAAC,EAAE;QACN,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC;CACH;AAED,MAAM,WAAW,qBAAqB,CAAC,KAAK,SAAS,eAAe;IAClE,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,gBAAgB,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC;IAC5C,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;CACxC;AAED,eAAO,MAAM,eAAe,GAAI,KAAK,SAAS,eAAe,EAAE,wDAK5D,qBAAqB,CAAC,KAAK,CAAC;uBAEnB,iBAAiB;CAiG5B,CAAC"}
+{"version":3,"file":"useTabsKeyboard.d.ts","sourceRoot":"","sources":["../src/useTabsKeyboard.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAE9C,MAAM,WAAW,iBAAiB;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE;QACN,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC;CACH;AAED,MAAM,WAAW,qBAAqB,CAAC,KAAK,SAAS,eAAe;IAClE,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,gBAAgB,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC;IAC5C,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;IACvC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,eAAe,GAAI,KAAK,SAAS,eAAe,EAAE,oEAM5D,qBAAqB,CAAC,KAAK,CAAC;uBAEnB,iBAAiB;CAiG5B,CAAC"}

package/dist/useTabsKeyboard.js

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-export const useTabsKeyboard = ({ activeIndex, setActiveIndex, tabRefs, orientation = 'horizontal', }) => {
+export const useTabsKeyboard = ({ activeIndex, setActiveIndex, tabRefs, orientation = 'horizontal', onNavigate, }) => {
     const onKeyDown = useCallback((event) => {
         const isTabDisabled = (tab) => {
             return Boolean(tab?.disabled || tab?.props?.disabled);
@@ -72,8 +72,8 @@ export const useTabsKeyboard = ({ activeIndex, setActiveIndex, tabRefs, orientat
         }
         if (nextIndex !== activeIndex) {
             setActiveIndex(nextIndex);
-            tabRefs.current[nextIndex]?.focus?.();
+            onNavigate?.(nextIndex);
         }
-    }, [activeIndex, orientation, setActiveIndex, tabRefs]);
+    }, [activeIndex, onNavigate, orientation, setActiveIndex, tabRefs]);
     return { onKeyDown };
 };

package/package.json

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