1 | import * as React from 'react';
|
2 | import { PivotItem } from './PivotItem';
|
3 | import type { IStyle, ITheme } from '@fluentui/style-utilities';
|
4 | import type { IStyleFunctionOrObject } from '@fluentui/utilities';
|
5 | import type { IFocusZoneProps } from '../../FocusZone';
|
6 | /**
|
7 | * {@docCategory Pivot}
|
8 | */
|
9 | export interface IPivot {
|
10 | /**
|
11 | * Sets focus to the first pivot tab.
|
12 | */
|
13 | focus(): void;
|
14 | }
|
15 | /**
|
16 | * {@docCategory Pivot}
|
17 | */
|
18 | export interface IPivotProps extends React.HTMLAttributes<HTMLDivElement>, React.RefAttributes<HTMLDivElement> {
|
19 | /**
|
20 | * Optional callback to access the IPivot interface. Use this instead of ref for accessing
|
21 | * the public methods and properties of the component.
|
22 | */
|
23 | componentRef?: React.RefObject<IPivot>;
|
24 | /**
|
25 | * Call to provide customized styling that will layer on top of the variant rules.
|
26 | */
|
27 | styles?: IStyleFunctionOrObject<IPivotStyleProps, IPivotStyles>;
|
28 | /**
|
29 | * Theme provided by High-Order Component.
|
30 | */
|
31 | theme?: ITheme;
|
32 | /**
|
33 | * Additional css class to apply to the Pivot
|
34 | * @defaultvalue undefined
|
35 | */
|
36 | className?: string;
|
37 | /**
|
38 | * Default selected key for the pivot. Only provide this if the pivot is an uncontrolled component;
|
39 | * otherwise, use the `selectedKey` property.
|
40 | */
|
41 | defaultSelectedKey?: string;
|
42 | /**
|
43 | * Key of the selected pivot item. Updating this will override the Pivot's selected item state.
|
44 | * Only provide this if the pivot is a controlled component where you are maintaining the
|
45 | * current state; otherwise, use `defaultSelectedKey`.
|
46 | */
|
47 | selectedKey?: string | null;
|
48 | /**
|
49 | * Callback for when the selected pivot item is changed.
|
50 | */
|
51 | onLinkClick?: (item?: PivotItem, ev?: React.MouseEvent<HTMLElement>) => void;
|
52 | /**
|
53 | * Link size (normal, large)
|
54 | */
|
55 | linkSize?: PivotLinkSizeType;
|
56 | /**
|
57 | * Link format (links, tabs)
|
58 | */
|
59 | linkFormat?: PivotLinkFormatType;
|
60 | /**
|
61 | * Aria label for the overflow button, used if `overflowBehavior` is "menu".
|
62 | */
|
63 | overflowAriaLabel?: string;
|
64 | /**
|
65 | * Overflow behavior when there is not enough room to display all of the links/tabs
|
66 | * * none: Pivot links will overflow the container and may not be visible
|
67 | * * menu: Display an overflow menu that contains the tabs that don't fit
|
68 | *
|
69 | * @default none
|
70 | */
|
71 | overflowBehavior?: 'none' | 'menu';
|
72 | /**
|
73 | * Whether to skip rendering the tabpanel with the content of the selected tab.
|
74 | * Use this prop if you plan to separately render the tab content
|
75 | * and don't want to leave an empty tabpanel in the page that may confuse Screen Readers.
|
76 | */
|
77 | headersOnly?: boolean;
|
78 | /**
|
79 | * Callback to customize how IDs are generated for each tab header.
|
80 | * Useful if you're rendering content outside and need to connect aria-labelledby.
|
81 | */
|
82 | getTabId?: (itemKey: string, index: number) => string;
|
83 | /**
|
84 | * Props passed to the `FocusZone` component used as the root of `Pivot`.
|
85 | */
|
86 | focusZoneProps?: IFocusZoneProps;
|
87 | }
|
88 | /**
|
89 | * {@docCategory Pivot}
|
90 | */
|
91 | export declare type IPivotStyleProps = Required<Pick<IPivotProps, 'theme'>> & Pick<IPivotProps, 'className'> & {
|
92 | linkSize?: PivotLinkSizeType;
|
93 | linkFormat?: PivotLinkFormatType;
|
94 | };
|
95 | /**
|
96 | * {@docCategory Pivot}
|
97 | */
|
98 | export interface IPivotStyles {
|
99 | /**
|
100 | * Style for the root element.
|
101 | */
|
102 | root: IStyle;
|
103 | link: IStyle;
|
104 | linkIsSelected: IStyle;
|
105 | linkContent: IStyle;
|
106 | text: IStyle;
|
107 | count: IStyle;
|
108 | icon: IStyle;
|
109 | linkInMenu: IStyle;
|
110 | overflowMenuButton: IStyle;
|
111 | itemContainer?: IStyle;
|
112 | }
|
113 | /**
|
114 | * {@docCategory Pivot}
|
115 | * Display mode for the pivot links/tabs
|
116 | */
|
117 | export declare type PivotLinkFormatType = 'links' | 'tabs';
|
118 | /**
|
119 | * {@docCategory Pivot}
|
120 | * Size of the pivot links/tabs
|
121 | */
|
122 | export declare type PivotLinkSizeType = 'normal' | 'large';
|
123 | /**
|
124 | * {@docCategory Pivot}
|
125 | * @deprecated Use strings 'links' or 'tabs' instead of this enum
|
126 | */
|
127 | export declare const enum PivotLinkFormat {
|
128 | /**
|
129 | * Display Pivot Links as links
|
130 | */
|
131 | links = "links",
|
132 | /**
|
133 | * Display Pivot Links as Tabs
|
134 | */
|
135 | tabs = "tabs"
|
136 | }
|
137 | /**
|
138 | * {@docCategory Pivot}
|
139 | * @deprecated Use strings 'normal' or 'large' instead of this enum
|
140 | */
|
141 | export declare const enum PivotLinkSize {
|
142 | /**
|
143 | * Display Link using normal font size
|
144 | */
|
145 | normal = "normal",
|
146 | /**
|
147 | * Display links using large font size
|
148 | */
|
149 | large = "large"
|
150 | }
|