@carbon/react/es/components/Tabs/Tabs.d.ts

React components for the Carbon Design System

/**
 * Copyright IBM Corp. 2016, 2025
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
import PropTypes from 'prop-types';
import React, { type ReactNode, type MouseEvent, type KeyboardEvent, type HTMLAttributes, type ComponentType, type HTMLElementType } from 'react';
type DivAttributes = HTMLAttributes<HTMLDivElement>;
/**
 * Tabs
 */
export interface TabsProps {
    /**
     * Provide child elements to be rendered inside the `Tabs`.
     * These elements should render either `TabsList` or `TabsPanels`
     */
    children?: ReactNode;
    /**
     * Specify which content tab should be initially selected when the component
     * is first rendered
     */
    defaultSelectedIndex?: number;
    /**
     * Whether the rendered Tab children should be dismissable.
     */
    dismissable?: boolean;
    /**
     * Provide an optional function which is called
     * whenever the state of the `Tabs` changes
     */
    onChange?(state: {
        selectedIndex: number;
    }): void;
    /**
     * If specifying the `onTabCloseRequest` prop, provide a callback function
     * responsible for removing the tab when close button is pressed on one of the Tab elements
     */
    onTabCloseRequest?(tabIndex: number): void;
    /**
     * Control which content panel is currently selected. This puts the component
     * in a controlled mode and should be used along with `onChange`
     */
    selectedIndex?: number;
}
declare function Tabs({ children, defaultSelectedIndex, onChange, selectedIndex: controlledSelectedIndex, dismissable, onTabCloseRequest, }: TabsProps): import("react/jsx-runtime").JSX.Element;
declare namespace Tabs {
    var propTypes: {
        /**
         * Provide child elements to be rendered inside the `Tabs`.
         * These elements should render either `TabsList` or `TabsPanels`
         */
        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        /**
         * Specify which content tab should be initially selected when the component
         * is first rendered
         */
        defaultSelectedIndex: PropTypes.Requireable<number>;
        /**
         * Whether the render Tab children should be dismissable.
         */
        dismissable: PropTypes.Requireable<boolean>;
        /**
         * Provide an optional function which is called whenever the state of the
         * `Tabs` changes
         */
        onChange: PropTypes.Requireable<(...args: any[]) => any>;
        /**
         * If specifying the `onTabCloseRequest` prop, provide a callback function
         * responsible for removing the tab when close button is pressed on one of the Tab elements
         */
        onTabCloseRequest: (props: any) => Error | undefined;
        /**
         * Control which content panel is currently selected. This puts the component
         * in a controlled mode and should be used along with `onChange`
         */
        selectedIndex: PropTypes.Requireable<number>;
    };
}
export interface TabsVerticalProps {
    /**
     * Provide child elements to be rendered inside the `TabsVertical`.
     * These elements should render either `TabsListVertical` or `TabsPanels`
     */
    children?: ReactNode;
    /**
     * Specify which content tab should be initially selected when the component
     * is first rendered
     */
    defaultSelectedIndex?: number;
    /**
     * Option to set a height style only if using vertical variation
     */
    height?: string;
    /**
     * Provide an optional function which is called
     * whenever the state of the `Tabs` changes
     */
    onChange?(state: {
        selectedIndex: number;
    }): void;
    /**
     * Control which content panel is currently selected. This puts the component
     * in a controlled mode and should be used along with `onChange`
     */
    selectedIndex?: number;
}
declare function TabsVertical({ children, height, defaultSelectedIndex, onChange, selectedIndex: controlledSelectedIndex, ...rest }: TabsVerticalProps): import("react/jsx-runtime").JSX.Element;
declare namespace TabsVertical {
    var propTypes: {
        /**
         * Provide child elements to be rendered inside the `TabsVertical`.
         * These elements should render either `TabsListVertical` or `TabsPanels`
         */
        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        /**
         * Specify which content tab should be initially selected when the component
         * is first rendered
         */
        defaultSelectedIndex: PropTypes.Requireable<number>;
        /**
         * Option to set a height style only if using vertical variation
         */
        height: PropTypes.Requireable<string>;
        /**
         * Provide an optional function which is called whenever the state of the
         * `Tabs` changes
         */
        onChange: PropTypes.Requireable<(...args: any[]) => any>;
        /**
         * Control which content panel is currently selected. This puts the component
         * in a controlled mode and should be used along with `onChange`
         */
        selectedIndex: PropTypes.Requireable<number>;
    };
}
/**
 * TabList
 */
export interface TabListProps extends DivAttributes {
    /**
     * Specify whether the content tab should be activated automatically or
     * manually
     */
    activation?: 'automatic' | 'manual';
    /**
     * Provide an accessible label to be read when a user interacts with this
     * component
     */
    'aria-label'?: string;
    /**
     * Provide child elements to be rendered inside `ContentTabs`.
     * These elements should render a `ContentTab`
     */
    children?: ReactNode;
    /**
     * Specify an optional className to be added to the container node
     */
    className?: string;
    /**
     * Specify whether component is contained type
     */
    contained?: boolean;
    /**
     * Used for tabs within a grid, this makes it so tabs span the full container width and have the same width. Only available on contained tabs with <9 children
     */
    fullWidth?: boolean;
    /**
     * If using `IconTab`, specify the size of the icon being used.
     */
    iconSize?: 'default' | 'lg';
    /**
     * Provide the props that describe the left overflow button
     */
    leftOverflowButtonProps?: HTMLAttributes<HTMLButtonElement>;
    /**
     * Specify whether to use the light component variant
     */
    light?: boolean;
    /**
     * Provide the props that describe the right overflow button
     */
    rightOverflowButtonProps?: HTMLAttributes<HTMLButtonElement>;
    /**
     * Optionally provide a delay (in milliseconds) passed to the lodash
     * debounce of the onScroll handler. This will impact the responsiveness
     * of scroll arrow buttons rendering when scrolling to the first or last tab.
     */
    scrollDebounceWait?: number;
    /**
     * Choose whether to automatically scroll to newly selected tabs
     * on component rerender
     */
    scrollIntoView?: boolean;
}
declare function TabList({ activation, 'aria-label': label, children, className: customClassName, contained, fullWidth, iconSize, leftOverflowButtonProps, light, rightOverflowButtonProps, scrollDebounceWait, scrollIntoView, ...rest }: TabListProps): import("react/jsx-runtime").JSX.Element;
declare namespace TabList {
    var propTypes: {
        /**
         * Specify whether the content tab should be activated automatically or
         * manually
         */
        activation: PropTypes.Requireable<string>;
        /**
         * Provide an accessible label to be read when a user interacts with this
         * component
         */
        'aria-label': PropTypes.Requireable<string>;
        /**
         * Provide child elements to be rendered inside `ContentTabs`.
         * These elements should render a `ContentTab`
         */
        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        /**
         * Specify an optional className to be added to the container node
         */
        className: PropTypes.Requireable<string>;
        /**
         * Specify whether component is contained type
         */
        contained: PropTypes.Requireable<boolean>;
        /**
         * Used for tabs within a grid, this makes it so tabs span the full container width and have the same width. Only available on contained tabs with <9 children
         */
        fullWidth: PropTypes.Requireable<boolean>;
        /**
         * If using `IconTab`, specify the size of the icon being used.
         */
        iconSize: PropTypes.Requireable<string>;
        /**
         * Provide the props that describe the left overflow button
         */
        leftOverflowButtonProps: PropTypes.Requireable<object>;
        /**
         * Specify whether to use the light component variant
         */
        light: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
        /**
         * Provide the props that describe the right overflow button
         */
        rightOverflowButtonProps: PropTypes.Requireable<object>;
        /**
         * Optionally provide a delay (in milliseconds) passed to the lodash
         * debounce of the onScroll handler. This will impact the responsiveness
         * of scroll arrow buttons rendering when scrolling to the first or last tab.
         */
        scrollDebounceWait: PropTypes.Requireable<number>;
        /**
         * Choose whether to automatically scroll
         * to newly selected tabs on component rerender
         */
        scrollIntoView: PropTypes.Requireable<boolean>;
    };
}
/**
 * TabListVertical
 */
export interface TabListVerticalProps extends DivAttributes {
    /**
     * Specify whether the content tab should be activated automatically or
     * manually
     */
    activation?: 'automatic' | 'manual';
    /**
     * Provide an accessible label to be read when a user interacts with this
     * component
     */
    'aria-label'?: string;
    /**
     * Provide child elements to be rendered inside `ContentTabs`.
     * These elements should render a `ContentTab`
     */
    children?: ReactNode;
    /**
     * Specify an optional className to be added to the container node
     */
    className?: string;
    /**
     * Choose whether to automatically scroll to newly selected tabs
     * on component rerender
     */
    scrollIntoView?: boolean;
}
declare function TabListVertical({ activation, 'aria-label': label, children, className: customClassName, scrollIntoView, ...rest }: TabListVerticalProps): import("react/jsx-runtime").JSX.Element;
declare namespace TabListVertical {
    var propTypes: {
        /**
         * Specify whether the content tab should be activated automatically or
         * manually
         */
        activation: PropTypes.Requireable<string>;
        /**
         * Provide an accessible label to be read when a user interacts with this
         * component
         */
        'aria-label': PropTypes.Requireable<string>;
        /**
         * Provide child elements to be rendered inside `ContentTabs`.
         * These elements should render a `ContentTab`
         */
        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        /**
         * Specify an optional className to be added to the container node
         */
        className: PropTypes.Requireable<string>;
    };
}
/**
 * Tab
 */
export interface TabProps extends HTMLAttributes<HTMLElement> {
    /**
     * Provide a custom element to render instead of the default button
     */
    as?: HTMLElementType | ComponentType;
    /**
     * Provide child elements to be rendered inside `Tab`.
     */
    children?: ReactNode;
    /**
     * Specify an optional className to be added to your Tab
     */
    className?: string;
    /**
     * Whether your Tab is disabled.
     */
    disabled?: boolean;
    /**
     * Provide a handler that is invoked when a user clicks on the control
     */
    onClick?(event: MouseEvent): void;
    /**
     * Provide a handler that is invoked on the key down event for the control
     */
    onKeyDown?(event: KeyboardEvent): void;
    /**
     * An optional parameter to allow overriding the anchor rendering.
     * Useful for using Tab along with react-router or other client
     * side router libraries.
     */
    renderButton?(): ReactNode;
    /**
     * A component used to render an icon.
     */
    renderIcon?: React.ElementType;
    /**
     * An optional label to render under the primary tab label.
     * Only useful for contained tabs.
     */
    secondaryLabel?: string;
}
declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLElement>>;
export interface IconTabProps extends DivAttributes {
    /**
     * **Experimental**: Display an empty dot badge on the Tab.
     */
    badgeIndicator?: boolean;
    /**
     * Provide an icon to be rendered inside `IconTab` as the visual label for Tab.
     */
    children?: ReactNode;
    /**
     * Specify an optional className to be added to your Tab
     */
    className?: string;
    /**
     * Specify whether the tooltip for the icon should be open when it first renders
     */
    defaultOpen?: boolean;
    /**
     * Specify the duration in milliseconds to delay before displaying the tooltip for the icon.
     */
    enterDelayMs?: number;
    /**
     * Provide the label to be rendered inside the Tooltip. The label will use
     * `aria-labelledby` and will fully describe the child node that is provided.
     * This means that if you have text in the child node it will not be
     * announced to the screen reader. If using the badgeIndicator then provide a
     * label with describing that there is a new notification.
     */
    label: ReactNode;
    /**
     * Specify the duration in milliseconds to delay before hiding the tooltip
     */
    leaveDelayMs?: number;
}
declare const IconTab: React.ForwardRefExoticComponent<IconTabProps & React.RefAttributes<HTMLDivElement>>;
/**
 * TabPanel
 */
export interface TabPanelProps extends DivAttributes {
    /**
     * Provide child elements to be rendered inside `TabPanel`.
     */
    children?: ReactNode;
    /**
     * Specify an optional className to be added to TabPanel.
     */
    className?: string;
}
declare const TabPanel: React.ForwardRefExoticComponent<TabPanelProps & React.RefAttributes<HTMLDivElement>>;
/**
 * TabPanels
 */
export interface TabPanelsProps {
    /**
     * Provide child elements to be rendered inside `TabPanels`.
     */
    children?: ReactNode;
}
declare function TabPanels({ children }: TabPanelsProps): import("react/jsx-runtime").JSX.Element;
declare namespace TabPanels {
    var propTypes: {
        /**
         * Provide child elements to be rendered inside `TabPanels`.
         */
        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
    };
}
export { Tabs, TabsVertical, Tab, IconTab, TabPanel, TabPanels, TabList, TabListVertical, };