@base-ui-components/react/cjs/tabs/root/useTabsRoot.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 { CompositeMetadata } from '../../composite/list/CompositeList.js';
import type { TabPanelMetadata } from '../panel/useTabsPanel.js';
import type { TabMetadata } from '../tab/useTabsTab.js';
import type { TabActivationDirection, TabValue } from './TabsRoot.js';
declare function useTabsRoot(parameters: useTabsRoot.Parameters): useTabsRoot.ReturnValue;
declare namespace useTabsRoot {
    interface Parameters {
        /**
         * The value of the currently selected `Tab`.
         * If you don't want any selected `Tab`, you can set this prop to `false`.
         */
        value?: TabValue;
        /**
         * The default value. Use when the component is not controlled.
         */
        defaultValue?: TabValue;
        /**
         * Callback invoked when new value is being set.
         */
        onValueChange?: (value: TabValue, event?: Event) => void;
    }
    interface ReturnValue {
        /**
         * Gets the element of the Tab with the given value.
         * @param {any | undefined} value Value to find the tab for.
         */
        getTabElementBySelectedValue: (panelValue: 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 Tab 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 value Value to find the tab panel for.
         */
        getTabPanelIdByTabValueOrIndex: (tabValue: TabValue | undefined, index: number) => string | undefined;
        /**
         * Callback for setting new value.
         */
        onValueChange: (value: TabValue, activationDirection: TabActivationDirection, event: Event) => void;
        setTabMap: (map: Map<Node, CompositeMetadata<TabMetadata> | null>) => void;
        setTabPanelMap: (map: Map<Node, CompositeMetadata<TabPanelMetadata> | null>) => void;
        /**
         * The position of the active tab relative to the previously active tab.
         */
        tabActivationDirection: TabActivationDirection;
        tabMap: Map<Node, CompositeMetadata<TabMetadata> | null>;
        tabPanelRefs: React.RefObject<(HTMLElement | null)[]>;
        /**
         * The currently selected tab's value.
         */
        value: TabValue;
    }
}
export { useTabsRoot, TabMetadata };