/** * © 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 = { /** 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 value, which indicates that we are selecting that item by default. * @related nav, tabs * @vgar TODO * @wcag TODO */ export declare const useTabs: { (useTabsOptions?: UseTabsOptions): { /** 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;