@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.
   * @param (any) panelValue Value to find the Tab for.
   */
  getTabIdByPanelValue: (panelValue: TabsTab.Value) => string | undefined;
  /**
   * Gets the `id` attribute of the TabPanel that corresponds to the given Tab value.
   * @param (any) tabValue Value to find the TabPanel for.
   */
  getTabPanelIdByValue: (tabValue: TabsTab.Value) => string | undefined;
  registerMountedTabPanel: (panelValue: TabsTab.Value | number, panelId: string) => void;
  setTabMap: (map: Map<Node, (TabsTab.Metadata & {
    index?: number | null;
  }) | null>) => void;
  unregisterMountedTabPanel: (panelValue: TabsTab.Value | number, panelId: string) => 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;