@base-ui-components/react/cjs/tabs/tab/useTabsTab.d.ts

Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.

import * as React from 'react';
import type { TabsRootContext } from '../root/TabsRootContext.js';
import type { useTabsList } from '../list/useTabsList.js';
import type { TabsList } from '../list/TabsList.js';
export interface TabMetadata {
    disabled: boolean;
    id: string | undefined;
    value: any | undefined;
}
declare function useTabsTab(parameters: useTabsTab.Parameters): useTabsTab.ReturnValue;
declare namespace useTabsTab {
    interface Parameters extends Pick<TabsRootContext, 'getTabPanelIdByTabValueOrIndex'>, Pick<TabsList.Props, 'activateOnFocus'>, Pick<useTabsList.ReturnValue, 'onTabActivation'> {
        /**
         * The value of the tab.
         * It's used to associate the tab with a tab panel(s) with the same value.
         * If the value is not provided, it falls back to the position index.
         */
        value?: any;
        /**
         * Callback fired when the tab is clicked.
         */
        onClick?: React.MouseEventHandler;
        /**
         * Whether the component should ignore user interaction.
         */
        disabled?: boolean;
        highlightedTabIndex: number;
        /**
         * The id of the tab.
         * If not provided, it will be automatically generated.
         */
        id?: string;
        selectedTabValue: TabsRootContext['value'];
        setHighlightedTabIndex: (index: number) => void;
        /**
         * Ref to the root slot's DOM element.
         */
        rootRef?: React.Ref<Element>;
    }
    interface ReturnValue {
        /**
         * Resolver for the Tab component's props.
         * @param externalProps additional props for Tabs.Tab
         * @returns props that should be spread on Tabs.Tab
         */
        getRootProps: (externalProps?: React.ComponentPropsWithRef<'button'>) => React.ComponentPropsWithRef<'button'>;
        /**
         * 0-based index of the tab in the list of tabs.
         */
        index: number;
        /**
         * Ref to the root slot's DOM element.
         */
        rootRef: React.RefCallback<Element> | null;
        /**
         * Whether the tab is currently selected.
         */
        selected: boolean;
    }
}
export { useTabsTab };