@base-ui-components/react/cjs/tabs/root/TabsRootContext.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 { TextDirection } from '../../direction-provider/DirectionContext.js';
import { type TabMetadata } from '../tab/useTabsTab.js';
import type { TabActivationDirection, TabValue } from './TabsRoot.js';
export interface TabsRootContext {
    /**
     * The currently selected tab's value.
     */
    value: TabValue;
    /**
     * Callback for setting new value.
     */
    onValueChange: (value: TabValue, activationDirection: TabActivationDirection, event: Event) => void;
    /**
     * Sets ArrowLeft and ArrowRight behavior based on text direction.
     * @default 'ltr'
     */
    direction: TextDirection;
    /**
     * The component orientation (layout flow direction).
     */
    orientation: 'horizontal' | 'vertical';
    /**
     * Gets the element of the Tab with the given value.
     * @param {any | undefined} value Value to find the tab for.
     */
    getTabElementBySelectedValue: (selectedValue: TabValue | undefined) => HTMLElement | null;
    /**
     * Gets the `id` attribute of the Tab that corresponds to the given TabPanel value or index.
     * @param (any | undefined) panelValue Value to find the Tab for.
     * @param (number) index The index of the TabPanel to look for.
     */
    getTabIdByPanelValueOrIndex: (panelValue: TabValue | undefined, index: number) => string | undefined;
    /**
     * Gets the `id` attribute of the TabPanel that corresponds to the given Tab value or index.
     * @param (any | undefined) tabValue Value to find the Tab for.
     * @param (number) index The index of the Tab to look for.
     */
    getTabPanelIdByTabValueOrIndex: (tabValue: any, index: number) => string | undefined;
    setTabMap: (map: Map<Node, (TabMetadata & {
        index?: number | null;
    }) | null>) => void;
    /**
     * The position of the active tab relative to the previously active tab.
     */
    tabActivationDirection: TabActivationDirection;
}
/**
 * @ignore - internal component.
 */
declare const TabsRootContext: React.Context<TabsRootContext | undefined>;
export declare function useTabsRootContext(): TabsRootContext;
export { TabsRootContext };