@base-ui-components/react/esm/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 { TabsTab } from "../tab/TabsTab.js";
import type { TabsRoot } from "./TabsRoot.js";
export interface TabsRootContext {
  /**
   * The currently active tab's value.
   */
  value: TabsTab.Value;
  /**
   * Callback for setting new value.
   */
  onValueChange: (value: TabsTab.Value, eventDetails: TabsRoot.ChangeEventDetails) => void;
  /**
   * The component orientation (layout flow direction).
   */
  orientation: 'horizontal' | 'vertical';
  /**
   * Gets the element of the Tab with the given value.
   */
  getTabElementBySelectedValue: (selectedValue: TabsTab.Value | 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: TabsTab.Value | 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, (TabsTab.Metadata & {
    index?: number | null;
  }) | null>) => void;
  /**
   * The position of the active tab relative to the previously active tab.
   */
  tabActivationDirection: TabsTab.ActivationDirection;
}
/**
 * @internal
 */
export declare const TabsRootContext: React.Context<TabsRootContext | undefined>;
export declare function useTabsRootContext(): TabsRootContext;