@visa/nova-react/use-tabs/index.d.ts

Visa Product Design System Nova React library. Compatible with React ^19.

/**
 *              © 2025-2026 Visa
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *         http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 **/
import { type KeyboardEvent, type RefObject } from 'react';
import { type FocusableHTMLElement } from '../types';
export type UseTabsOptions<HTMLElementType extends FocusableHTMLElement = HTMLButtonElement> = {
    /** Arrow key navigation direction, 'horizontal', 'vertical', 'both', 'none' */
    arrowKeyNavigation?: 'both' | 'horizontal' | 'none' | 'vertical' | null;
    /** Auto select tab on keyboard navigation */
    autoSelect?: boolean;
    /** Default selected tab */
    defaultSelected?: number;
    /** Selected tab index change handler for controlled state, must also pass selected state */
    onSelectedIndexChange?: (index: number) => void;
    /** Ref for the tab elements */
    ref?: RefObject<(HTMLElementType | null)[]>;
    /** Selected tab index for controlled state, must also pass onSelectedChange */
    selectedIndex?: number;
};
/**
 * @docs {@link https://design.visa.com/components/tabs/?code_library=react | See Docs}
 * @description This hook allows us to set the <defaultSelected> value, which indicates that we are selecting that item by default.
 * @related nav, tabs
 * @vgar TODO
 * @wcag TODO
 */
export declare const useTabs: {
    <HTMLElementType extends FocusableHTMLElement = HTMLButtonElement>(useTabsOptions?: UseTabsOptions<HTMLElementType>): {
        /** Get tab index for tab key navigation */
        getTabIndex: (index: number, disabled?: boolean) => 0 | -1;
        /** Function that handles selected state of tabs */
        onIndexChange: (index: number, disabled?: boolean) => void;
        /** Function that handles on key down for navigation */
        onKeyNavigation: (e: KeyboardEvent) => void;
        /** Ref object to use if ref isn't supplied in props */
        ref: RefObject<(HTMLElementType | null)[]>;
        /** Index of the selected tab  */
        selectedIndex: number;
    };
    displayName: string;
};
export default useTabs;