UNPKG

3.54 kBTypeScriptView Raw
1import * as React from "react";
2import { AbstractPureComponent2 } from "../../common";
3import { Props } from "../../common/props";
4import { Tab, TabId } from "./tab";
5export declare const Expander: React.FC;
6export declare type TabsProps = ITabsProps;
7/** @deprecated use TabsProps */
8export interface ITabsProps extends Props {
9 /**
10 * Whether the selected tab indicator should animate its movement.
11 *
12 * @default true
13 */
14 animate?: boolean;
15 /** Tab elements. */
16 children?: React.ReactNode;
17 /**
18 * Initial selected tab `id`, for uncontrolled usage.
19 * Note that this prop refers only to `<Tab>` children; other types of elements are ignored.
20 *
21 * @default first tab
22 */
23 defaultSelectedTabId?: TabId;
24 /**
25 * Unique identifier for this `Tabs` container. This will be combined with the `id` of each
26 * `Tab` child to generate ARIA accessibility attributes. IDs are required and should be
27 * unique on the page to support server-side rendering.
28 */
29 id: TabId;
30 /**
31 * If set to `true`, the tab titles will display with larger styling.
32 * This will apply large styles only to the tabs at this level, not to nested tabs.
33 *
34 * @default false
35 */
36 large?: boolean;
37 /**
38 * Whether inactive tab panels should be removed from the DOM and unmounted in React.
39 * This can be a performance enhancement when rendering many complex panels, but requires
40 * careful support for unmounting and remounting.
41 *
42 * @default false
43 */
44 renderActiveTabPanelOnly?: boolean;
45 /**
46 * Selected tab `id`, for controlled usage.
47 * Providing this prop will put the component in controlled mode.
48 * Unknown ids will result in empty selection (no errors).
49 */
50 selectedTabId?: TabId;
51 /**
52 * Whether to show tabs stacked vertically on the left side.
53 *
54 * @default false
55 */
56 vertical?: boolean;
57 /**
58 * A callback function that is invoked when a tab in the tab list is clicked.
59 */
60 onChange?(newTabId: TabId, prevTabId: TabId | undefined, event: React.MouseEvent<HTMLElement>): void;
61}
62export interface ITabsState {
63 indicatorWrapperStyle?: React.CSSProperties;
64 selectedTabId?: TabId;
65}
66export declare class Tabs extends AbstractPureComponent2<TabsProps, ITabsState> {
67 /** Insert a `Tabs.Expander` between any two children to right-align all subsequent children. */
68 static Expander: React.FC<{}>;
69 static Tab: typeof Tab;
70 static defaultProps: Partial<TabsProps>;
71 static displayName: string;
72 static getDerivedStateFromProps({ selectedTabId }: TabsProps): {
73 selectedTabId: TabId;
74 } | null;
75 private tablistElement;
76 private refHandlers;
77 constructor(props: TabsProps);
78 render(): JSX.Element;
79 componentDidMount(): void;
80 componentDidUpdate(prevProps: TabsProps, prevState: ITabsState): void;
81 private getInitialSelectedTabId;
82 private getKeyCodeDirection;
83 private getTabChildrenProps;
84 /** Filters children to only `<Tab>`s */
85 private getTabChildren;
86 /** Queries root HTML element for all tabs with optional filter selector */
87 private getTabElements;
88 private handleKeyDown;
89 private handleKeyPress;
90 private handleTabClick;
91 /**
92 * Calculate the new height, width, and position of the tab indicator.
93 * Store the CSS values so the transition animation can start.
94 */
95 private moveSelectionIndicator;
96 private renderTabPanel;
97 private renderTabTitle;
98}