@sanity/ui 3.0.0-static.34 → 3.0.0-static.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/_visual-editing.d.cts +853 -2
- package/dist/_visual-editing.d.ts +853 -2
- package/dist/css/index.d.cts +1128 -787
- package/dist/css/index.d.ts +1128 -787
- package/dist/index.d.cts +2390 -995
- package/dist/index.d.ts +2390 -995
- package/dist/theme.d.cts +446 -314
- package/dist/theme.d.ts +446 -314
- package/package.json +1 -1
- package/dist/portalProvider-DgNIVviV.d.ts +0 -575
package/dist/index.d.ts
CHANGED
|
@@ -1,1117 +1,2512 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
import type {AlignItems} from '@sanity/ui/css'
|
|
2
|
+
import type {AvatarColor} from '@sanity/ui/theme'
|
|
3
|
+
import type {AvatarSize} from '@sanity/ui/theme'
|
|
4
|
+
import {BadgeStyleProps} from '@sanity/ui/css'
|
|
5
|
+
import {BoxStyleProps} from '@sanity/ui/css'
|
|
6
|
+
import {Breakpoint} from '@sanity/ui/css'
|
|
7
|
+
import type {ButtonStyleProps} from '@sanity/ui/css'
|
|
8
|
+
import {CardStyleProps} from '@sanity/ui/css'
|
|
9
|
+
import type {CardTone} from '@sanity/ui/theme'
|
|
10
|
+
import {CodeStyleProps} from '@sanity/ui/css'
|
|
11
|
+
import type {ColorScheme} from '@sanity/ui/theme'
|
|
12
|
+
import {Component} from 'react'
|
|
13
|
+
import type {ComponentClass} from 'react'
|
|
14
|
+
import type {ComponentProps} from 'react'
|
|
15
|
+
import type {ComponentType as ComponentType_2} from 'react'
|
|
16
|
+
import {ContainerStyleProps} from '@sanity/ui/css'
|
|
17
|
+
import type {ContainerWidth} from '@sanity/ui/theme'
|
|
18
|
+
import type {Context} from 'react'
|
|
19
|
+
import type {DisplayStyleProps} from '@sanity/ui/css'
|
|
20
|
+
import type {ElementTone} from '@sanity/ui/theme'
|
|
21
|
+
import {ElementType as ElementType_2} from 'react'
|
|
22
|
+
import {ErrorInfo} from 'react'
|
|
23
|
+
import type {ExoticComponent} from 'react'
|
|
24
|
+
import type {FlexDirection} from '@sanity/ui/css'
|
|
25
|
+
import {FlexStyleProps} from '@sanity/ui/css'
|
|
26
|
+
import type {FlexWrap} from '@sanity/ui/css'
|
|
27
|
+
import type {FontCodeSize} from '@sanity/ui/theme'
|
|
28
|
+
import type {FontHeadingSize} from '@sanity/ui/theme'
|
|
29
|
+
import type {FontLabelSize} from '@sanity/ui/theme'
|
|
30
|
+
import type {FontTextSize} from '@sanity/ui/theme'
|
|
31
|
+
import type {FontWeight} from '@sanity/ui/theme'
|
|
32
|
+
import {ForwardedRef} from 'react'
|
|
33
|
+
import type {FunctionComponent} from 'react'
|
|
34
|
+
import {GapStyleProps} from '@sanity/ui/css'
|
|
35
|
+
import {HeadingStyleProps} from '@sanity/ui/css'
|
|
36
|
+
import {HTMLAttributes} from 'react'
|
|
37
|
+
import {InputStyleProps} from '@sanity/ui/css'
|
|
38
|
+
import type {JSX} from 'react'
|
|
39
|
+
import type {JustifyContent} from '@sanity/ui/css'
|
|
40
|
+
import {LabelStyleProps} from '@sanity/ui/css'
|
|
41
|
+
import {MaxWidth} from '@sanity/ui/css'
|
|
42
|
+
import {MouseEventHandler} from 'react'
|
|
43
|
+
import {PaddingStyleProps} from '@sanity/ui/css'
|
|
44
|
+
import {PropsWithChildren} from 'react'
|
|
45
|
+
import type {Radius} from '@sanity/ui/theme'
|
|
46
|
+
import {RadiusStyleProps} from '@sanity/ui/css'
|
|
47
|
+
import {ReactElement} from 'react'
|
|
48
|
+
import {ReactNode} from 'react'
|
|
49
|
+
import type {ReactPortal} from 'react'
|
|
50
|
+
import {Ref} from 'react'
|
|
51
|
+
import {RefAttributes} from 'react'
|
|
52
|
+
import {ResponsiveProp} from '@sanity/ui/css'
|
|
53
|
+
import {RootStyleProps} from '@sanity/ui/css'
|
|
54
|
+
import {SelectableStyleProps} from '@sanity/ui/css'
|
|
55
|
+
import {SelectStyleProps} from '@sanity/ui/css'
|
|
56
|
+
import {ShadowStyleProps} from '@sanity/ui/css'
|
|
57
|
+
import {SkeletonStyleProps} from '@sanity/ui/css'
|
|
58
|
+
import type {Space} from '@sanity/ui/theme'
|
|
59
|
+
import {TextAreaStyleProps} from '@sanity/ui/css'
|
|
60
|
+
import {TextOverflowStyleProps} from '@sanity/ui/css'
|
|
61
|
+
import {TextStyleProps} from '@sanity/ui/css'
|
|
62
|
+
import type {Width} from '@sanity/ui/css'
|
|
63
|
+
|
|
64
|
+
/** @internal */
|
|
65
|
+
export declare function Arrow<E extends ArrowElementType = typeof DEFAULT_ARROW_ELEMENT>(
|
|
66
|
+
props: ArrowProps<E>,
|
|
67
|
+
): React.JSX.Element
|
|
68
|
+
|
|
69
|
+
/** @internal */
|
|
70
|
+
export declare type ArrowElementType = 'div' | 'span' | ComponentType
|
|
71
|
+
|
|
72
|
+
/** @internal */
|
|
73
|
+
export declare type ArrowOwnProps = {
|
|
74
|
+
width: number
|
|
75
|
+
height: number
|
|
76
|
+
radius?: number
|
|
10
77
|
}
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
78
|
+
|
|
79
|
+
/** @internal */
|
|
80
|
+
export declare type ArrowProps<E extends ArrowElementType = ArrowElementType> = Props<
|
|
81
|
+
ArrowOwnProps,
|
|
82
|
+
E
|
|
83
|
+
>
|
|
84
|
+
|
|
85
|
+
/**
|
|
86
|
+
* Assign properties from `U` to `T`, excluding properties that already exist in `T`.
|
|
87
|
+
*
|
|
88
|
+
* @public
|
|
89
|
+
*/
|
|
90
|
+
export declare type Assign<T extends {}, U extends {}> = Omit<T, keyof U> & U
|
|
91
|
+
|
|
92
|
+
/**
|
|
93
|
+
* @internal
|
|
94
|
+
*/
|
|
95
|
+
export declare function attemptFocus(element: HTMLElement): boolean
|
|
96
|
+
|
|
97
|
+
/**
|
|
98
|
+
* The Autocomplete component is typically used for search components.
|
|
99
|
+
* It consists of a text input for writing a query, and properties for rendering suggestions.
|
|
100
|
+
*
|
|
101
|
+
* @public
|
|
102
|
+
*/
|
|
103
|
+
export declare function Autocomplete<
|
|
104
|
+
E extends AutocompleteElementType = typeof DEFAULT_AUTOCOMPLETE_ELEMENT,
|
|
105
|
+
O extends BaseAutocompleteOption = BaseAutocompleteOption,
|
|
106
|
+
>(props: AutocompleteProps<E, O>): React.JSX.Element
|
|
107
|
+
|
|
108
|
+
/** @public */
|
|
109
|
+
export declare type AutocompleteElementType = 'input' | ComponentType
|
|
110
|
+
|
|
111
|
+
/**
|
|
112
|
+
* @internal
|
|
113
|
+
*/
|
|
114
|
+
export declare interface AutocompleteInputChangeMsg {
|
|
115
|
+
type: 'input/change'
|
|
116
|
+
query: string | null
|
|
20
117
|
}
|
|
118
|
+
|
|
21
119
|
/**
|
|
22
|
-
* @internal
|
|
23
|
-
*/
|
|
24
|
-
interface
|
|
25
|
-
type:
|
|
120
|
+
* @internal
|
|
121
|
+
*/
|
|
122
|
+
export declare interface AutocompleteInputFoocusMsg {
|
|
123
|
+
type: 'input/focus'
|
|
26
124
|
}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
125
|
+
|
|
126
|
+
/**
|
|
127
|
+
* @internal
|
|
128
|
+
*/
|
|
129
|
+
export declare type AutocompleteMsg =
|
|
130
|
+
| AutocompleteRootBlurMsg
|
|
131
|
+
| AutocompleteRootClearMsg
|
|
132
|
+
| AutocompleteRootEscapeMsg
|
|
133
|
+
| AutocompleteRootOpenMsg
|
|
134
|
+
| AutocompleteRootSetActiveValueMsg
|
|
135
|
+
| AutocompleteRootSetListFocusedMsg
|
|
136
|
+
| AutocompleteInputChangeMsg
|
|
137
|
+
| AutocompleteInputFoocusMsg
|
|
138
|
+
| AutocompleteValueChangeMsg
|
|
139
|
+
|
|
140
|
+
/** @public */
|
|
141
|
+
export declare type AutocompleteOpenButtonProps = Omit<ButtonProps<'button'>, 'as'>
|
|
142
|
+
|
|
143
|
+
/** @public */
|
|
144
|
+
export declare type AutocompleteOwnProps<
|
|
145
|
+
O extends BaseAutocompleteOption = BaseAutocompleteOption,
|
|
146
|
+
> = TextInputOwnProps & {
|
|
147
|
+
border?: boolean
|
|
148
|
+
customValidity?: string
|
|
149
|
+
filterOption?: (query: string, option: O) => boolean
|
|
150
|
+
icon?: ElementType_2 | ReactNode
|
|
151
|
+
/** @beta */
|
|
152
|
+
listBox?: BoxOwnProps
|
|
153
|
+
loading?: boolean
|
|
154
|
+
onChange?: (value: string) => void
|
|
155
|
+
onQueryChange?: (query: string | null) => void
|
|
156
|
+
onSelect?: (value: string) => void
|
|
157
|
+
/** @beta */
|
|
158
|
+
openButton?: boolean | AutocompleteOpenButtonProps
|
|
159
|
+
/** @beta */
|
|
160
|
+
openOnFocus?: boolean
|
|
161
|
+
/** The options to render. */
|
|
162
|
+
options?: O[]
|
|
163
|
+
padding?: ResponsiveProp<Space>
|
|
164
|
+
popover?: Omit<Props<PopoverProps, 'div'>, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'>
|
|
165
|
+
prefix?: ReactNode
|
|
166
|
+
radius?: Radius | Radius[]
|
|
167
|
+
/** @beta */
|
|
168
|
+
relatedElements?: HTMLElement[]
|
|
169
|
+
/** The callback function for rendering each option. */
|
|
170
|
+
renderOption?: (option: O) => React.JSX.Element
|
|
171
|
+
/** @beta */
|
|
172
|
+
renderPopover?: (
|
|
173
|
+
props: {
|
|
174
|
+
content: React.JSX.Element | null
|
|
175
|
+
hidden: boolean
|
|
176
|
+
inputElement: HTMLInputElement | null
|
|
177
|
+
onMouseEnter: () => void
|
|
178
|
+
onMouseLeave: () => void
|
|
179
|
+
},
|
|
180
|
+
ref: ForwardedRef<HTMLDivElement>,
|
|
181
|
+
) => ReactNode
|
|
182
|
+
renderValue?: (value: string, option?: O) => string
|
|
183
|
+
suffix?: ReactNode
|
|
184
|
+
value?: string
|
|
32
185
|
}
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
186
|
+
|
|
187
|
+
/** @public */
|
|
188
|
+
export declare type AutocompleteProps<
|
|
189
|
+
E extends AutocompleteElementType = AutocompleteElementType,
|
|
190
|
+
O extends BaseAutocompleteOption = BaseAutocompleteOption,
|
|
191
|
+
> = Props<AutocompleteOwnProps<O>, E>
|
|
192
|
+
|
|
193
|
+
/**
|
|
194
|
+
* @internal
|
|
195
|
+
*/
|
|
196
|
+
export declare interface AutocompleteRootBlurMsg {
|
|
197
|
+
type: 'root/blur'
|
|
38
198
|
}
|
|
199
|
+
|
|
39
200
|
/**
|
|
40
|
-
* @internal
|
|
41
|
-
*/
|
|
42
|
-
interface
|
|
43
|
-
type:
|
|
44
|
-
query: string | null;
|
|
201
|
+
* @internal
|
|
202
|
+
*/
|
|
203
|
+
export declare interface AutocompleteRootClearMsg {
|
|
204
|
+
type: 'root/clear'
|
|
45
205
|
}
|
|
206
|
+
|
|
46
207
|
/**
|
|
47
|
-
* @internal
|
|
48
|
-
*/
|
|
49
|
-
interface
|
|
50
|
-
type:
|
|
51
|
-
value: string;
|
|
52
|
-
listFocused?: boolean;
|
|
208
|
+
* @internal
|
|
209
|
+
*/
|
|
210
|
+
export declare interface AutocompleteRootEscapeMsg {
|
|
211
|
+
type: 'root/escape'
|
|
53
212
|
}
|
|
213
|
+
|
|
54
214
|
/**
|
|
55
|
-
* @internal
|
|
56
|
-
*/
|
|
57
|
-
interface
|
|
58
|
-
type:
|
|
59
|
-
|
|
215
|
+
* @internal
|
|
216
|
+
*/
|
|
217
|
+
export declare interface AutocompleteRootOpenMsg {
|
|
218
|
+
type: 'root/open'
|
|
219
|
+
query: string | null
|
|
60
220
|
}
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
221
|
+
|
|
222
|
+
/**
|
|
223
|
+
* @internal
|
|
224
|
+
*/
|
|
225
|
+
export declare interface AutocompleteRootSetActiveValueMsg {
|
|
226
|
+
type: 'root/setActiveValue'
|
|
227
|
+
value: string
|
|
228
|
+
listFocused?: boolean
|
|
67
229
|
}
|
|
230
|
+
|
|
68
231
|
/**
|
|
69
|
-
* @internal
|
|
70
|
-
*/
|
|
71
|
-
interface
|
|
72
|
-
type:
|
|
232
|
+
* @internal
|
|
233
|
+
*/
|
|
234
|
+
export declare interface AutocompleteRootSetListFocusedMsg {
|
|
235
|
+
type: 'root/setListFocused'
|
|
236
|
+
listFocused: boolean
|
|
73
237
|
}
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
238
|
+
|
|
239
|
+
/**
|
|
240
|
+
* @internal
|
|
241
|
+
*/
|
|
242
|
+
export declare interface AutocompleteState {
|
|
243
|
+
activeValue: string | null
|
|
244
|
+
focused: boolean
|
|
245
|
+
listFocused: boolean
|
|
246
|
+
query: string | null
|
|
247
|
+
value: string | null
|
|
80
248
|
}
|
|
249
|
+
|
|
81
250
|
/**
|
|
82
|
-
* @internal
|
|
83
|
-
*/
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
renderOption?: (option: O) => React.JSX.Element;
|
|
113
|
-
/** @beta */
|
|
114
|
-
renderPopover?: (props: {
|
|
115
|
-
content: React.JSX.Element | null;
|
|
116
|
-
hidden: boolean;
|
|
117
|
-
inputElement: HTMLInputElement | null;
|
|
118
|
-
onMouseEnter: () => void;
|
|
119
|
-
onMouseLeave: () => void;
|
|
120
|
-
}, ref: ForwardedRef<HTMLDivElement>) => ReactNode;
|
|
121
|
-
renderValue?: (value: string, option?: O) => string;
|
|
122
|
-
suffix?: ReactNode;
|
|
123
|
-
value?: string;
|
|
124
|
-
};
|
|
125
|
-
/** @public */
|
|
126
|
-
type AutocompleteElementType = "input" | ComponentType;
|
|
127
|
-
/** @public */
|
|
128
|
-
type AutocompleteProps<E extends AutocompleteElementType = AutocompleteElementType, O extends BaseAutocompleteOption = BaseAutocompleteOption> = Props<AutocompleteOwnProps<O>, E>;
|
|
129
|
-
/**
|
|
130
|
-
* The Autocomplete component is typically used for search components.
|
|
131
|
-
* It consists of a text input for writing a query, and properties for rendering suggestions.
|
|
132
|
-
*
|
|
133
|
-
* @public
|
|
134
|
-
*/
|
|
135
|
-
declare function Autocomplete<E extends AutocompleteElementType = typeof DEFAULT_AUTOCOMPLETE_ELEMENT, O extends BaseAutocompleteOption = BaseAutocompleteOption>(props: AutocompleteProps<E, O>): React.JSX.Element;
|
|
136
|
-
/** @beta */
|
|
137
|
-
declare const DEFAULT_BREADCRUMBS_ELEMENT = "nav";
|
|
138
|
-
/** @beta */
|
|
139
|
-
type BreadcrumbsOwnProps = GapStyleProps & {
|
|
140
|
-
expandButton?: Omit<ButtonProps<"button">, "as" | "onClick" | "selected">;
|
|
141
|
-
maxLength?: number;
|
|
142
|
-
separator?: ReactNode;
|
|
143
|
-
};
|
|
144
|
-
/** @beta */
|
|
145
|
-
type BreadcrumbsElementType = "div" | "nav" | ComponentType;
|
|
146
|
-
/** @beta */
|
|
147
|
-
type BreadcrumbsProps<E extends BreadcrumbsElementType = BreadcrumbsElementType> = Props<BreadcrumbsOwnProps, E>;
|
|
148
|
-
/** @beta */
|
|
149
|
-
declare function Breadcrumbs<E extends BreadcrumbsElementType = typeof DEFAULT_BREADCRUMBS_ELEMENT>(props: BreadcrumbsProps<E>): React.JSX.Element;
|
|
150
|
-
/** @public */
|
|
151
|
-
type DialogPosition = "absolute" | "fixed";
|
|
152
|
-
/** @public */
|
|
153
|
-
declare const DEFAULT_DIALOG_ELEMENT = "div";
|
|
154
|
-
/** @public */
|
|
155
|
-
type DialogOwnProps = ContainerStyleProps & Omit<LayerOwnProps, "width"> & {
|
|
156
|
-
/**
|
|
157
|
-
* @beta
|
|
158
|
-
*/
|
|
159
|
-
__unstable_autoFocus?: boolean;
|
|
160
|
-
/**
|
|
161
|
-
* @beta
|
|
162
|
-
*/
|
|
163
|
-
__unstable_hideCloseButton?: boolean;
|
|
164
|
-
/**
|
|
165
|
-
* Whether the dialog should animate in on mount.
|
|
166
|
-
*
|
|
167
|
-
* @beta
|
|
168
|
-
* @defaultValue false
|
|
169
|
-
*/
|
|
170
|
-
animate?: boolean;
|
|
171
|
-
cardRadius?: ResponsiveProp<Radius>;
|
|
172
|
-
contentRef?: ForwardedRef<HTMLDivElement>;
|
|
173
|
-
footer?: ReactNode;
|
|
174
|
-
header?: ReactNode;
|
|
175
|
-
id: string;
|
|
176
|
-
/** A callback that fires when the dialog becomes the top layer when it was not the top layer before. */
|
|
177
|
-
onActivate?: LayerProps["onActivate"];
|
|
178
|
-
onClickOutside?: () => void;
|
|
179
|
-
onClose?: () => void;
|
|
180
|
-
open?: boolean;
|
|
181
|
-
portal?: string;
|
|
182
|
-
position?: ResponsiveProp<DialogPosition>;
|
|
183
|
-
scheme?: ColorScheme;
|
|
184
|
-
tone?: CardTone | "inherit";
|
|
185
|
-
zOffset?: number | number[];
|
|
186
|
-
};
|
|
187
|
-
/** @public */
|
|
188
|
-
type DialogElementType = "div" | "span" | ComponentType;
|
|
189
|
-
/** @public */
|
|
190
|
-
type DialogProps<E extends DialogElementType = DialogElementType> = Props<DialogOwnProps, E>;
|
|
191
|
-
/**
|
|
192
|
-
* The Dialog component.
|
|
193
|
-
*
|
|
194
|
-
* @public
|
|
195
|
-
*/
|
|
196
|
-
declare function Dialog<E extends DialogElementType = typeof DEFAULT_DIALOG_ELEMENT>(props: DialogProps<E>): React.JSX.Element;
|
|
197
|
-
/**
|
|
198
|
-
* This API might change. DO NOT USE IN PRODUCTION.
|
|
199
|
-
* @beta
|
|
200
|
-
*/
|
|
201
|
-
interface DialogContextValue {
|
|
202
|
-
version: 0.0;
|
|
203
|
-
position?: ResponsiveProp<DialogPosition>;
|
|
204
|
-
zOffset?: ResponsiveProp<number>;
|
|
205
|
-
}
|
|
206
|
-
/**
|
|
207
|
-
* @internal
|
|
208
|
-
*/
|
|
209
|
-
declare const DialogContext: Context<DialogContextValue>;
|
|
210
|
-
/**
|
|
211
|
-
* This API might change. DO NOT USE IN PRODUCTION.
|
|
212
|
-
* @beta
|
|
213
|
-
*/
|
|
214
|
-
interface DialogProviderProps {
|
|
215
|
-
children?: ReactNode;
|
|
216
|
-
position?: ResponsiveProp<DialogPosition>;
|
|
217
|
-
zOffset?: ResponsiveProp<number>;
|
|
218
|
-
}
|
|
219
|
-
/**
|
|
220
|
-
* This API might change. DO NOT USE IN PRODUCTION.
|
|
221
|
-
* @beta
|
|
222
|
-
*/
|
|
223
|
-
declare function DialogProvider(props: DialogProviderProps): React.JSX.Element;
|
|
224
|
-
/**
|
|
225
|
-
* This API might change. DO NOT USE IN PRODUCTION.
|
|
226
|
-
* @beta
|
|
227
|
-
*/
|
|
228
|
-
declare function useDialog(): DialogContextValue;
|
|
229
|
-
/** @public */
|
|
230
|
-
type MenuButtonProps = {
|
|
231
|
-
/**
|
|
232
|
-
* @beta Do not use in production.
|
|
233
|
-
*/
|
|
234
|
-
__unstable_disableRestoreFocusOnClose?: boolean;
|
|
235
|
-
button: ReactElement<ButtonProps>;
|
|
236
|
-
id: string;
|
|
237
|
-
menu?: ReactElement;
|
|
238
|
-
onClose?: () => void;
|
|
239
|
-
onOpen?: () => void;
|
|
240
|
-
popover?: Omit<PopoverProps, "content" | "open">;
|
|
241
|
-
ref?: ForwardedRef<HTMLButtonElement | null>;
|
|
242
|
-
};
|
|
243
|
-
/**
|
|
244
|
-
* The `MenuButton` component follows the WAI-ARIA specification for menu buttons.
|
|
245
|
-
*
|
|
246
|
-
* @public
|
|
247
|
-
*/
|
|
248
|
-
declare function MenuButton(props: MenuButtonProps): React.JSX.Element;
|
|
249
|
-
/** @public */
|
|
250
|
-
declare const DEFAULT_TAB_PANEL_ELEMENT = "div";
|
|
251
|
-
/** @public */
|
|
252
|
-
type TabPanelOwnProps = BoxOwnProps & {
|
|
253
|
-
/**
|
|
254
|
-
* The `id` of the correlating `Tab` component.
|
|
255
|
-
*/
|
|
256
|
-
"aria-labelledby": string;
|
|
257
|
-
"id": string;
|
|
258
|
-
};
|
|
259
|
-
/** @public */
|
|
260
|
-
type TabPanelElementType = "div" | "span" | ComponentType;
|
|
251
|
+
* @internal
|
|
252
|
+
*/
|
|
253
|
+
export declare interface AutocompleteValueChangeMsg {
|
|
254
|
+
type: 'value/change'
|
|
255
|
+
value: string | null
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
/**
|
|
259
|
+
* Avatars are used to represent people and other agents (e.g. bots).
|
|
260
|
+
*
|
|
261
|
+
* @public
|
|
262
|
+
*/
|
|
263
|
+
export declare function Avatar<E extends AvatarElementType = typeof DEFAULT_AVATAR_ELEMENT>(
|
|
264
|
+
props: AvatarProps<E>,
|
|
265
|
+
): React.JSX.Element
|
|
266
|
+
|
|
267
|
+
/** @public */
|
|
268
|
+
export declare function AvatarCounter<
|
|
269
|
+
E extends AvatarCounterElementType = typeof DEFAULT_AVATAR_COUNTER_ELEMENT,
|
|
270
|
+
>(props: AvatarCounterProps<E>): React.JSX.Element
|
|
271
|
+
|
|
272
|
+
/** @public */
|
|
273
|
+
export declare type AvatarCounterElementType = 'button' | 'div' | 'span' | ComponentType
|
|
274
|
+
|
|
275
|
+
/** @public */
|
|
276
|
+
export declare interface AvatarCounterOwnProps {
|
|
277
|
+
count: number
|
|
278
|
+
size?: ResponsiveProp<AvatarSize>
|
|
279
|
+
}
|
|
280
|
+
|
|
261
281
|
/** @public */
|
|
262
|
-
|
|
282
|
+
export declare type AvatarCounterProps<
|
|
283
|
+
E extends AvatarCounterElementType = AvatarCounterElementType,
|
|
284
|
+
> = Props<AvatarCounterOwnProps, E>
|
|
285
|
+
|
|
263
286
|
/** @public */
|
|
264
|
-
declare
|
|
265
|
-
|
|
266
|
-
declare const DEFAULT_TOAST_ELEMENT = "li";
|
|
267
|
-
/** @internal */
|
|
268
|
-
type ToastOwnProps = RadiusStyleProps & {
|
|
269
|
-
closable?: boolean;
|
|
270
|
-
description?: ReactNode;
|
|
271
|
-
onClose?: () => void;
|
|
272
|
-
title?: ReactNode;
|
|
273
|
-
status?: "error" | "warning" | "success" | "info";
|
|
274
|
-
duration?: number;
|
|
275
|
-
};
|
|
276
|
-
/** @internal */
|
|
277
|
-
type ToastElementType = "li" | ComponentType;
|
|
278
|
-
/** @internal */
|
|
279
|
-
type ToastProps<E extends ToastElementType = ToastElementType> = Props<ToastOwnProps, E>;
|
|
280
|
-
/**
|
|
281
|
-
* The `Toast` component gives feedback to users when an action has taken place.
|
|
282
|
-
*
|
|
283
|
-
* Toasts can be closed with a close button, or auto-dismiss when the duration expires.
|
|
284
|
-
*
|
|
285
|
-
* @internal
|
|
286
|
-
*/
|
|
287
|
-
declare function Toast<E extends ToastElementType = typeof DEFAULT_TOAST_ELEMENT>(props: ToastProps<E>): React.JSX.Element;
|
|
288
|
-
/** @internal */
|
|
289
|
-
type ToastLayerOwnProps = GapStyleProps & PaddingStyleProps;
|
|
290
|
-
/** @internal */
|
|
291
|
-
type ToastLayerElementType = "ul" | ComponentType;
|
|
292
|
-
/** @internal */
|
|
293
|
-
type ToastLayerProps<E extends ToastLayerElementType = ToastLayerElementType> = Props<ToastLayerOwnProps, E>;
|
|
294
|
-
/**
|
|
295
|
-
* @internal
|
|
296
|
-
*/
|
|
287
|
+
export declare type AvatarElementType = 'a' | 'button' | 'div' | 'span' | ComponentType
|
|
288
|
+
|
|
297
289
|
/** @public */
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
290
|
+
export declare interface AvatarOwnProps {
|
|
291
|
+
/** @beta */
|
|
292
|
+
__unstable_hideInnerStroke?: boolean
|
|
293
|
+
animateArrowFrom?: AvatarPosition
|
|
294
|
+
arrowPosition?: AvatarPosition
|
|
295
|
+
color?: AvatarColor
|
|
296
|
+
initials?: string
|
|
297
|
+
onImageLoadError?: (event: Error) => void
|
|
298
|
+
size?: ResponsiveProp<AvatarSize>
|
|
299
|
+
src?: string
|
|
300
|
+
title?: string
|
|
301
301
|
}
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
302
|
+
|
|
303
|
+
/** @public */
|
|
304
|
+
export declare type AvatarPosition = 'top' | 'bottom' | 'inside'
|
|
305
|
+
|
|
306
|
+
/** @public */
|
|
307
|
+
export declare type AvatarProps<E extends AvatarElementType = AvatarElementType> = Props<
|
|
308
|
+
AvatarOwnProps,
|
|
309
|
+
E
|
|
310
|
+
>
|
|
311
|
+
|
|
312
|
+
/** @public */
|
|
313
|
+
export declare function AvatarStack<
|
|
314
|
+
E extends AvatarStackElementType = typeof DEFAULT_AVATAR_STACK_ELEMENT,
|
|
315
|
+
>(props: AvatarStackProps<E>): React.JSX.Element
|
|
316
|
+
|
|
317
|
+
/** @public */
|
|
318
|
+
export declare type AvatarStackChild = ReactElement<AvatarProps<'div'>> | null | undefined | false
|
|
319
|
+
|
|
320
|
+
/** @public */
|
|
321
|
+
export declare type AvatarStackElementType = 'div' | 'span' | ComponentType
|
|
322
|
+
|
|
323
|
+
/** @public */
|
|
324
|
+
export declare type AvatarStackOwnProps = Omit<
|
|
325
|
+
BoxOwnProps,
|
|
326
|
+
'align' | 'alignItems' | 'display' | 'justify' | 'justifyContent'
|
|
327
|
+
> & {
|
|
328
|
+
children: AvatarStackChild | AvatarStackChild[]
|
|
329
|
+
maxLength?: number
|
|
330
|
+
size?: ResponsiveProp<AvatarSize>
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
/** @public */
|
|
334
|
+
export declare type AvatarStackProps<E extends AvatarStackElementType = AvatarStackElementType> =
|
|
335
|
+
Props<AvatarStackOwnProps, E>
|
|
336
|
+
|
|
337
|
+
/**
|
|
338
|
+
* Badges are used to tag resources.
|
|
339
|
+
*
|
|
340
|
+
* @public
|
|
341
|
+
*/
|
|
342
|
+
export declare function Badge<E extends BadgeElementType = typeof DEFAULT_BADGE_ELEMENT>(
|
|
343
|
+
props: BadgeProps<E>,
|
|
344
|
+
): React.JSX.Element
|
|
345
|
+
|
|
346
|
+
/** @public */
|
|
347
|
+
export declare type BadgeElementType = 'div' | 'span' | ComponentType
|
|
348
|
+
|
|
349
|
+
/** @public */
|
|
350
|
+
export declare type BadgeOwnProps = BadgeStyleProps &
|
|
351
|
+
FlexStyleProps &
|
|
352
|
+
PaddingStyleProps &
|
|
353
|
+
RadiusStyleProps
|
|
354
|
+
|
|
355
|
+
/** @public */
|
|
356
|
+
export declare type BadgeProps<E extends BadgeElementType = BadgeElementType> = Props<
|
|
357
|
+
BadgeOwnProps,
|
|
358
|
+
E
|
|
359
|
+
>
|
|
360
|
+
|
|
361
|
+
/** @public */
|
|
362
|
+
export declare interface BaseAutocompleteOption {
|
|
363
|
+
value: string
|
|
313
364
|
}
|
|
365
|
+
|
|
314
366
|
/** @public */
|
|
315
|
-
interface
|
|
316
|
-
version: 0.0
|
|
317
|
-
|
|
318
|
-
* Creates or updates a toast notification.
|
|
319
|
-
* If a toast with the same ID already exists, it will be updated.
|
|
320
|
-
* If an ID is not provided, a random one will be generated.
|
|
321
|
-
* The returned ID can be used to programatically update a toast.
|
|
322
|
-
*/
|
|
323
|
-
push: (params: ToastParams) => string;
|
|
367
|
+
export declare interface BoundaryElementContextValue {
|
|
368
|
+
version: 0.0
|
|
369
|
+
element: HTMLElement | null
|
|
324
370
|
}
|
|
371
|
+
|
|
325
372
|
/** @public */
|
|
326
|
-
declare function
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
gap?: ResponsiveProp<Space>;
|
|
335
|
-
};
|
|
336
|
-
/** @beta */
|
|
337
|
-
type TreeElementType = "div" | ComponentType;
|
|
338
|
-
/** @beta */
|
|
339
|
-
type TreeProps<E extends TreeElementType = TreeElementType> = Props<TreeOwnProps, E>;
|
|
340
|
-
/**
|
|
341
|
-
* This API might change. DO NOT USE IN PRODUCTION.
|
|
342
|
-
* @beta
|
|
343
|
-
*/
|
|
344
|
-
declare function Tree<E extends TreeElementType = typeof DEFAULT_TREE_ELEMENT>(props: TreeProps<E>): React.JSX.Element;
|
|
345
|
-
/** @internal */
|
|
346
|
-
declare const DEFAULT_SELECTABLE_ELEMENT = "button";
|
|
347
|
-
/** @internal */
|
|
348
|
-
type SelectableOwnProps = BoxOwnProps & SelectableStyleProps & {
|
|
349
|
-
disabled?: boolean;
|
|
350
|
-
href?: string;
|
|
351
|
-
selected?: boolean;
|
|
352
|
-
tone?: ElementTone;
|
|
353
|
-
type?: "button";
|
|
354
|
-
};
|
|
355
|
-
/** @internal */
|
|
356
|
-
type SelectableElementType = "button" | "a" | ComponentType;
|
|
357
|
-
/** @internal */
|
|
358
|
-
type SelectableProps<E extends SelectableElementType = SelectableElementType> = Props<SelectableOwnProps, E>;
|
|
359
|
-
/** @internal */
|
|
360
|
-
declare function Selectable<E extends SelectableElementType = typeof DEFAULT_SELECTABLE_ELEMENT>(props: SelectableProps<E>): React.JSX.Element;
|
|
361
|
-
/** @beta */
|
|
362
|
-
declare const DEFAULT_TREE_ITEM_ELEMENT = "a";
|
|
363
|
-
/** @beta */
|
|
364
|
-
type TreeItemOwnProps = CardOwnProps & {
|
|
365
|
-
expanded?: boolean;
|
|
366
|
-
fontSize?: ResponsiveProp<FontTextSize>;
|
|
367
|
-
icon?: ElementType$1;
|
|
368
|
-
/**
|
|
369
|
-
* Allows passing a custom element type to the link component
|
|
370
|
-
* @internal
|
|
371
|
-
*/
|
|
372
|
-
linkAs?: SelectableElementType;
|
|
373
|
-
onClick?: MouseEventHandler<HTMLAnchorElement | HTMLLIElement>;
|
|
374
|
-
padding?: ResponsiveProp<Space>;
|
|
375
|
-
space?: ResponsiveProp<Space>;
|
|
376
|
-
text?: ReactNode;
|
|
377
|
-
weight?: FontWeight;
|
|
378
|
-
};
|
|
379
|
-
/** @beta */
|
|
380
|
-
type TreeItemElementType = "a" | "li" | ComponentType;
|
|
381
|
-
/** @beta */
|
|
382
|
-
type TreeItemProps<E extends TreeItemElementType = TreeItemElementType> = Props<TreeItemOwnProps, E>;
|
|
383
|
-
/**
|
|
384
|
-
* This API might change. DO NOT USE IN PRODUCTION.
|
|
385
|
-
* @beta
|
|
386
|
-
*/
|
|
387
|
-
declare function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITEM_ELEMENT>(props: TreeItemProps<E>): React.JSX.Element;
|
|
388
|
-
/**
|
|
389
|
-
* @beta
|
|
390
|
-
*/
|
|
391
|
-
interface TreeState {
|
|
392
|
-
[key: string]: {
|
|
393
|
-
element: HTMLElement;
|
|
394
|
-
expanded: boolean;
|
|
395
|
-
} | undefined;
|
|
396
|
-
}
|
|
397
|
-
/**
|
|
398
|
-
* @beta
|
|
399
|
-
*/
|
|
400
|
-
interface TreeContextValue {
|
|
401
|
-
version: 0.0;
|
|
402
|
-
focusedElement: HTMLElement | null;
|
|
403
|
-
gap: ResponsiveProp<Space>;
|
|
404
|
-
level: number;
|
|
405
|
-
path: string[];
|
|
406
|
-
registerItem: (element: HTMLElement, path: string, expanded: boolean, selected: boolean) => void;
|
|
407
|
-
setExpanded: (path: string, expanded: boolean) => void;
|
|
408
|
-
setFocusedElement: (focusedElement: HTMLElement | null) => void;
|
|
409
|
-
state: TreeState;
|
|
410
|
-
}
|
|
411
|
-
/**
|
|
412
|
-
* @beta
|
|
413
|
-
*/
|
|
414
|
-
declare function useTree(): TreeContextValue;
|
|
415
|
-
/** @beta */
|
|
416
|
-
declare const DEFAULT_VIRTUAL_LIST_ELEMENT = "div";
|
|
417
|
-
/** @beta */
|
|
418
|
-
interface VirtualListChangeOpts {
|
|
419
|
-
fromIndex: number;
|
|
420
|
-
gap: number;
|
|
421
|
-
itemHeight: number;
|
|
422
|
-
scrollHeight: number;
|
|
423
|
-
scrollTop: number;
|
|
424
|
-
toIndex: number;
|
|
373
|
+
export declare function BoundaryElementProvider(
|
|
374
|
+
props: BoundaryElementProviderProps,
|
|
375
|
+
): React.JSX.Element
|
|
376
|
+
|
|
377
|
+
/** @public */
|
|
378
|
+
export declare interface BoundaryElementProviderProps {
|
|
379
|
+
children: ReactNode
|
|
380
|
+
element: HTMLElement | null
|
|
425
381
|
}
|
|
382
|
+
|
|
383
|
+
/**
|
|
384
|
+
* The `Box` component is a basic layout wrapper component which provides utility properties
|
|
385
|
+
* for flex, margins and padding.
|
|
386
|
+
*
|
|
387
|
+
* @public
|
|
388
|
+
*/
|
|
389
|
+
export declare function Box<E extends BoxElementType = typeof DEFAULT_BOX_ELEMENT>(
|
|
390
|
+
props: BoxProps<E>,
|
|
391
|
+
): React.JSX.Element
|
|
392
|
+
|
|
393
|
+
/** @public */
|
|
394
|
+
export declare type BoxElementType =
|
|
395
|
+
| 'a'
|
|
396
|
+
| 'article'
|
|
397
|
+
| 'aside'
|
|
398
|
+
| 'blockquote'
|
|
399
|
+
| 'body'
|
|
400
|
+
| 'button'
|
|
401
|
+
| 'details'
|
|
402
|
+
| 'div'
|
|
403
|
+
| 'header'
|
|
404
|
+
| 'fieldset'
|
|
405
|
+
| 'figure'
|
|
406
|
+
| 'figcaption'
|
|
407
|
+
| 'footer'
|
|
408
|
+
| 'form'
|
|
409
|
+
| 'html'
|
|
410
|
+
| 'iframe'
|
|
411
|
+
| 'kbd'
|
|
412
|
+
| 'label'
|
|
413
|
+
| 'legend'
|
|
414
|
+
| 'li'
|
|
415
|
+
| 'main'
|
|
416
|
+
| 'nav'
|
|
417
|
+
| 'ol'
|
|
418
|
+
| 'pre'
|
|
419
|
+
| 'section'
|
|
420
|
+
| 'span'
|
|
421
|
+
| 'summary'
|
|
422
|
+
| 'ul'
|
|
423
|
+
| ComponentType
|
|
424
|
+
|
|
425
|
+
/** @public */
|
|
426
|
+
export declare type BoxOwnProps = BoxStyleProps
|
|
427
|
+
|
|
428
|
+
/** @public */
|
|
429
|
+
export declare type BoxProps<E extends BoxElementType = BoxElementType> = Props<BoxOwnProps, E>
|
|
430
|
+
|
|
426
431
|
/** @beta */
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
onChange?: (opts: VirtualListChangeOpts) => void;
|
|
432
|
-
renderItem?: (item: Item) => ReactNode;
|
|
433
|
-
};
|
|
434
|
-
/** @beta */
|
|
435
|
-
type VirtualListElementType = "div" | ComponentType;
|
|
432
|
+
export declare function Breadcrumbs<
|
|
433
|
+
E extends BreadcrumbsElementType = typeof DEFAULT_BREADCRUMBS_ELEMENT,
|
|
434
|
+
>(props: BreadcrumbsProps<E>): React.JSX.Element
|
|
435
|
+
|
|
436
436
|
/** @beta */
|
|
437
|
-
|
|
437
|
+
export declare type BreadcrumbsElementType = 'div' | 'nav' | ComponentType
|
|
438
|
+
|
|
438
439
|
/** @beta */
|
|
439
|
-
declare
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
declare function _raf(fn: () => void): () => void;
|
|
444
|
-
/**
|
|
445
|
-
* @internal
|
|
446
|
-
*/
|
|
447
|
-
declare function _raf2(fn: () => void): () => void;
|
|
448
|
-
/**
|
|
449
|
-
* @internal
|
|
450
|
-
*/
|
|
451
|
-
declare function _hasFocus(element: HTMLElement): boolean;
|
|
452
|
-
/**
|
|
453
|
-
* @internal
|
|
454
|
-
*/
|
|
455
|
-
declare function isFocusable(element: HTMLElement): boolean;
|
|
456
|
-
/**
|
|
457
|
-
* @internal
|
|
458
|
-
*/
|
|
459
|
-
declare function attemptFocus(element: HTMLElement): boolean;
|
|
460
|
-
/**
|
|
461
|
-
* @internal
|
|
462
|
-
*/
|
|
463
|
-
declare function focusFirstDescendant(element: HTMLElement): boolean;
|
|
464
|
-
/**
|
|
465
|
-
* @internal
|
|
466
|
-
*/
|
|
467
|
-
declare function focusLastDescendant(element: HTMLElement): boolean;
|
|
468
|
-
/**
|
|
469
|
-
* @internal
|
|
470
|
-
*/
|
|
471
|
-
declare function _getArrayProp<T>(val: T | T[] | undefined, defaultVal?: T[]): T[];
|
|
472
|
-
/**
|
|
473
|
-
* @internal
|
|
474
|
-
*/
|
|
475
|
-
declare function _getResponsiveProp<T>(val: ResponsiveProp<T> | undefined, defaultVal?: Partial<Record<Breakpoint, T>>): Partial<Record<Breakpoint, T>>;
|
|
476
|
-
/**
|
|
477
|
-
* @internal
|
|
478
|
-
*/
|
|
479
|
-
declare function _isScrollable(el: Node): boolean;
|
|
480
|
-
/** @public */
|
|
481
|
-
type ClickOutsideEventListener = (event: MouseEvent) => void;
|
|
482
|
-
/** @public */
|
|
483
|
-
type ClickOutsideEventElements = (HTMLElement | null | (HTMLElement | null)[])[];
|
|
484
|
-
/** @public */
|
|
485
|
-
declare function useClickOutsideEvent(listener: ClickOutsideEventListener | false | undefined, elementsArg?: () => ClickOutsideEventElements, boundaryElement?: () => HTMLElement | null): void;
|
|
486
|
-
/**
|
|
487
|
-
* @beta
|
|
488
|
-
*/
|
|
489
|
-
declare function useCustomValidity(ref: {
|
|
490
|
-
current: null | {
|
|
491
|
-
setCustomValidity: (validity: string) => void;
|
|
492
|
-
};
|
|
493
|
-
}, customValidity: string | undefined): void;
|
|
494
|
-
/**
|
|
495
|
-
* @beta
|
|
496
|
-
*/
|
|
497
|
-
interface ElementRectValue {
|
|
498
|
-
width: number;
|
|
499
|
-
height: number;
|
|
440
|
+
export declare type BreadcrumbsOwnProps = GapStyleProps & {
|
|
441
|
+
expandButton?: Omit<ButtonProps<'button'>, 'as' | 'onClick' | 'selected'>
|
|
442
|
+
maxLength?: number
|
|
443
|
+
separator?: ReactNode
|
|
500
444
|
}
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
/**
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
*
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
* This API might change. DO NOT USE IN PRODUCTION.
|
|
558
|
-
* @beta
|
|
559
|
-
*/
|
|
560
|
-
declare function useMediaIndex(): Breakpoint;
|
|
561
|
-
/**
|
|
562
|
-
* Returns true if motion should be reduced
|
|
563
|
-
*
|
|
564
|
-
* @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-reduced-motion: no-preference)` since it's the most common scheme (https://dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
|
|
565
|
-
*
|
|
566
|
-
* If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
|
|
567
|
-
* Chrome supports reading the `prefers-reduced-motion` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Motion
|
|
568
|
-
* @example https://gist.github.com/stipsan/0c0f839a27842249cada893e9fb7767b
|
|
569
|
-
*
|
|
570
|
-
* @public
|
|
571
|
-
*/
|
|
572
|
-
declare function usePrefersReducedMotion(getServerSnapshot?: () => boolean): boolean;
|
|
573
|
-
/**
|
|
574
|
-
* This API might change. DO NOT USE IN PRODUCTION.
|
|
575
|
-
* @beta
|
|
576
|
-
*/
|
|
577
|
-
declare function useResponsiveProp<T>(val: ResponsiveProp<T> | undefined, defaultVal?: Partial<Record<Breakpoint, T>>): Partial<Record<Breakpoint, T>>;
|
|
578
|
-
/**
|
|
579
|
-
* @internal
|
|
580
|
-
*/
|
|
581
|
-
declare const _ResizeObserver: typeof ResizeObserver;
|
|
582
|
-
/** @internal */
|
|
583
|
-
declare const DEFAULT_ARROW_ELEMENT = "div";
|
|
584
|
-
/** @internal */
|
|
585
|
-
type ArrowOwnProps = {
|
|
586
|
-
width: number;
|
|
587
|
-
height: number;
|
|
588
|
-
radius?: number;
|
|
589
|
-
};
|
|
590
|
-
/** @internal */
|
|
591
|
-
type ArrowElementType = "div" | "span" | ComponentType;
|
|
592
|
-
/** @internal */
|
|
593
|
-
type ArrowProps<E extends ArrowElementType = ArrowElementType> = Props<ArrowOwnProps, E>;
|
|
445
|
+
|
|
446
|
+
/** @beta */
|
|
447
|
+
export declare type BreadcrumbsProps<E extends BreadcrumbsElementType = BreadcrumbsElementType> =
|
|
448
|
+
Props<BreadcrumbsOwnProps, E>
|
|
449
|
+
|
|
450
|
+
/** @public */
|
|
451
|
+
export declare function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEMENT>(
|
|
452
|
+
props: ButtonProps<E>,
|
|
453
|
+
): React.JSX.Element
|
|
454
|
+
|
|
455
|
+
/** @public */
|
|
456
|
+
export declare type ButtonElementType = 'a' | 'button' | 'label' | ComponentType
|
|
457
|
+
|
|
458
|
+
/** @public */
|
|
459
|
+
export declare type ButtonOwnProps = ButtonStyleProps &
|
|
460
|
+
DisplayStyleProps &
|
|
461
|
+
GapStyleProps &
|
|
462
|
+
PaddingStyleProps & {
|
|
463
|
+
'align'?: BoxStyleProps['alignItems']
|
|
464
|
+
'data-ui'?: string
|
|
465
|
+
'disabled'?: boolean
|
|
466
|
+
'fontSize'?: ResponsiveProp<FontTextSize>
|
|
467
|
+
'icon'?: ElementType_2 | ReactNode
|
|
468
|
+
'iconRight'?: ElementType_2 | ReactNode
|
|
469
|
+
'justify'?: BoxStyleProps['justifyContent']
|
|
470
|
+
/** @beta Do not use in production, as this might change.*/
|
|
471
|
+
'loading'?: boolean
|
|
472
|
+
'selected'?: boolean
|
|
473
|
+
'textAlign'?: ButtonTextAlign
|
|
474
|
+
'muted'?: boolean
|
|
475
|
+
'target'?: string
|
|
476
|
+
'text'?: ReactNode
|
|
477
|
+
'textOverflow'?: TextOwnProps['textOverflow']
|
|
478
|
+
'textWeight'?: TextOwnProps['weight']
|
|
479
|
+
'width'?: ResponsiveProp<Width>
|
|
480
|
+
}
|
|
481
|
+
|
|
482
|
+
/** @public */
|
|
483
|
+
export declare type ButtonProps<E extends ButtonElementType = ButtonElementType> = Props<
|
|
484
|
+
ButtonOwnProps,
|
|
485
|
+
E
|
|
486
|
+
>
|
|
487
|
+
|
|
488
|
+
/** @public */
|
|
489
|
+
export declare type ButtonTextAlign = 'left' | 'right' | 'center'
|
|
490
|
+
|
|
491
|
+
/**
|
|
492
|
+
* The `Card` component acts much like a `Box`, but with a background and foreground color.
|
|
493
|
+
* Components within a `Card` inherit its colors.
|
|
494
|
+
*
|
|
495
|
+
* @public
|
|
496
|
+
*/
|
|
497
|
+
export declare function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(
|
|
498
|
+
props: CardProps<E>,
|
|
499
|
+
): React.JSX.Element
|
|
500
|
+
|
|
594
501
|
/** @internal */
|
|
595
|
-
declare
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
initials?: string;
|
|
608
|
-
onImageLoadError?: (event: Error) => void;
|
|
609
|
-
size?: ResponsiveProp<AvatarSize>;
|
|
610
|
-
src?: string;
|
|
611
|
-
title?: string;
|
|
502
|
+
export declare type _CardCompatProviderComponent = ComponentType_2<{
|
|
503
|
+
children?: ReactNode
|
|
504
|
+
tone: CardTone | 'inherit'
|
|
505
|
+
scheme: ColorScheme
|
|
506
|
+
}>
|
|
507
|
+
|
|
508
|
+
/** @public */
|
|
509
|
+
export declare interface CardContextValue {
|
|
510
|
+
tone: CardTone
|
|
511
|
+
scheme: ColorScheme
|
|
512
|
+
/** @internal */
|
|
513
|
+
unstable_CompatProvider?: _CardCompatProviderComponent
|
|
612
514
|
}
|
|
515
|
+
|
|
613
516
|
/** @public */
|
|
614
|
-
type
|
|
615
|
-
|
|
616
|
-
type AvatarProps<E extends AvatarElementType = AvatarElementType> = Props<AvatarOwnProps, E>;
|
|
617
|
-
/**
|
|
618
|
-
* Avatars are used to represent people and other agents (e.g. bots).
|
|
619
|
-
*
|
|
620
|
-
* @public
|
|
621
|
-
*/
|
|
622
|
-
declare function Avatar<E extends AvatarElementType = typeof DEFAULT_AVATAR_ELEMENT>(props: AvatarProps<E>): React.JSX.Element;
|
|
623
|
-
/** @public */
|
|
624
|
-
declare const DEFAULT_AVATAR_COUNTER_ELEMENT = "span";
|
|
517
|
+
export declare type CardElementType = BoxElementType
|
|
518
|
+
|
|
625
519
|
/** @public */
|
|
626
|
-
interface
|
|
627
|
-
|
|
628
|
-
|
|
520
|
+
export declare interface CardOwnProps extends BoxOwnProps, CardStyleProps {
|
|
521
|
+
/**
|
|
522
|
+
* Do not use in production.
|
|
523
|
+
* @beta
|
|
524
|
+
*/
|
|
525
|
+
__unstable_checkered?: boolean
|
|
526
|
+
/**
|
|
527
|
+
* Do not use in production.
|
|
528
|
+
* @beta
|
|
529
|
+
*/
|
|
530
|
+
__unstable_focusRing?: boolean
|
|
531
|
+
disabled?: boolean
|
|
532
|
+
pressed?: boolean
|
|
533
|
+
selected?: boolean
|
|
534
|
+
target?: string
|
|
629
535
|
}
|
|
536
|
+
|
|
630
537
|
/** @public */
|
|
631
|
-
type
|
|
538
|
+
export declare type CardProps<E extends CardElementType = CardElementType> = Props<CardOwnProps, E>
|
|
539
|
+
|
|
632
540
|
/** @public */
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
541
|
+
export declare function CardProvider(props: {
|
|
542
|
+
children?: ReactNode
|
|
543
|
+
tone: CardTone
|
|
544
|
+
scheme: ColorScheme
|
|
545
|
+
/** @internal */
|
|
546
|
+
unstable_CompatProvider?: _CardCompatProviderComponent
|
|
547
|
+
}): React.JSX.Element
|
|
548
|
+
|
|
549
|
+
/**
|
|
550
|
+
* Checkboxes allow the user to select one or more items from a set.
|
|
551
|
+
*
|
|
552
|
+
* @public
|
|
553
|
+
*/
|
|
554
|
+
export declare function Checkbox<E extends CheckboxElementType = typeof DEFAULT_CHECKBOX_ELEMENT>(
|
|
555
|
+
props: CheckboxProps<E>,
|
|
556
|
+
): React.JSX.Element
|
|
557
|
+
|
|
558
|
+
/** @public */
|
|
559
|
+
export declare type CheckboxElementType = 'input' | ComponentType
|
|
560
|
+
|
|
561
|
+
/** @public */
|
|
562
|
+
export declare type CheckboxOwnProps = {
|
|
563
|
+
indeterminate?: boolean
|
|
564
|
+
customValidity?: string
|
|
565
|
+
}
|
|
566
|
+
|
|
648
567
|
/** @public */
|
|
649
|
-
type
|
|
568
|
+
export declare type CheckboxProps<E extends CheckboxElementType = CheckboxElementType> = Props<
|
|
569
|
+
CheckboxOwnProps,
|
|
570
|
+
E
|
|
571
|
+
>
|
|
572
|
+
|
|
650
573
|
/** @public */
|
|
651
|
-
declare
|
|
574
|
+
export declare type ClickOutsideEventElements = (HTMLElement | null | (HTMLElement | null)[])[]
|
|
575
|
+
|
|
652
576
|
/** @public */
|
|
653
|
-
declare
|
|
577
|
+
export declare type ClickOutsideEventListener = (event: MouseEvent) => void
|
|
578
|
+
|
|
654
579
|
/** @public */
|
|
655
|
-
|
|
580
|
+
export declare function Code<E extends CodeElementType = typeof DEFAULT_CODE_ELEMENT>(
|
|
581
|
+
props: CodeProps<E>,
|
|
582
|
+
): React.JSX.Element
|
|
583
|
+
|
|
656
584
|
/** @public */
|
|
657
|
-
type
|
|
585
|
+
export declare type CodeElementType = 'div' | 'pre' | ComponentType
|
|
586
|
+
|
|
658
587
|
/** @public */
|
|
659
|
-
|
|
660
|
-
/**
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
* @public
|
|
664
|
-
*/
|
|
665
|
-
declare function Badge<E extends BadgeElementType = typeof DEFAULT_BADGE_ELEMENT>(props: BadgeProps<E>): React.JSX.Element;
|
|
666
|
-
/** @internal */
|
|
667
|
-
type _CardCompatProviderComponent = ComponentType$1<{
|
|
668
|
-
children?: ReactNode;
|
|
669
|
-
tone: CardTone | "inherit";
|
|
670
|
-
scheme: ColorScheme;
|
|
671
|
-
}>;
|
|
672
|
-
/** @public */
|
|
673
|
-
interface CardContextValue {
|
|
674
|
-
tone: CardTone;
|
|
675
|
-
scheme: ColorScheme;
|
|
676
|
-
/** @internal */
|
|
677
|
-
unstable_CompatProvider?: _CardCompatProviderComponent;
|
|
588
|
+
export declare type CodeOwnProps = CodeStyleProps & {
|
|
589
|
+
/** Define the language to use for syntax highlighting. */
|
|
590
|
+
language?: string
|
|
591
|
+
size?: ResponsiveProp<FontCodeSize>
|
|
678
592
|
}
|
|
593
|
+
|
|
594
|
+
/** @public */
|
|
595
|
+
export declare type CodeProps<E extends CodeElementType = CodeElementType> = Props<CodeOwnProps, E>
|
|
596
|
+
|
|
597
|
+
/**
|
|
598
|
+
* This API might change. DO NOT USE IN PRODUCTION.
|
|
599
|
+
* @beta
|
|
600
|
+
*/
|
|
601
|
+
export declare function CodeSkeleton<
|
|
602
|
+
E extends CodeSkeletonElementType = typeof DEFAULT_CODE_SKELETON_ELEMENT,
|
|
603
|
+
>(props: CodeSkeletonProps<E>): React.JSX.Element
|
|
604
|
+
|
|
605
|
+
/** @beta */
|
|
606
|
+
export declare type CodeSkeletonElementType = SkeletonElementType
|
|
607
|
+
|
|
608
|
+
/** @beta */
|
|
609
|
+
export declare type CodeSkeletonOwnProps = SkeletonOwnProps & {
|
|
610
|
+
size?: ResponsiveProp<FontCodeSize>
|
|
611
|
+
}
|
|
612
|
+
|
|
613
|
+
/**
|
|
614
|
+
* This API might change. DO NOT USE IN PRODUCTION.
|
|
615
|
+
* @beta
|
|
616
|
+
*/
|
|
617
|
+
export declare type CodeSkeletonProps<E extends CodeSkeletonElementType = CodeSkeletonElementType> =
|
|
618
|
+
Props<CodeSkeletonOwnProps, E>
|
|
619
|
+
|
|
620
|
+
/** @public */
|
|
621
|
+
export declare type ComponentType<P = any> =
|
|
622
|
+
| FunctionComponent<P>
|
|
623
|
+
| ComponentClass<P>
|
|
624
|
+
| ExoticComponent<P>
|
|
625
|
+
|
|
626
|
+
/**
|
|
627
|
+
* The `Container` component wraps content layout in a defined set of widths.
|
|
628
|
+
*
|
|
629
|
+
* @public
|
|
630
|
+
*/
|
|
631
|
+
export declare function Container<
|
|
632
|
+
E extends ContainerElementType = typeof DEFAULT_CONTAINER_ELEMENT,
|
|
633
|
+
>(props: ContainerProps<E>): React.JSX.Element
|
|
634
|
+
|
|
635
|
+
/** @public */
|
|
636
|
+
export declare type ContainerElementType = BoxElementType
|
|
637
|
+
|
|
638
|
+
/** @public */
|
|
639
|
+
export declare type ContainerOwnProps = Omit<BoxOwnProps, 'width'> & ContainerStyleProps
|
|
640
|
+
|
|
641
|
+
/** @public */
|
|
642
|
+
export declare type ContainerProps<E extends ContainerElementType = ContainerElementType> = Props<
|
|
643
|
+
ContainerOwnProps,
|
|
644
|
+
E
|
|
645
|
+
>
|
|
646
|
+
|
|
647
|
+
/**
|
|
648
|
+
* @internal
|
|
649
|
+
*/
|
|
650
|
+
export declare function containsOrEqualsElement(element: HTMLElement, node: Node): boolean
|
|
651
|
+
|
|
652
|
+
/** @internal */
|
|
653
|
+
export declare const DEFAULT_ARROW_ELEMENT = 'div'
|
|
654
|
+
|
|
679
655
|
/** @public */
|
|
680
|
-
declare
|
|
681
|
-
|
|
682
|
-
tone: CardTone;
|
|
683
|
-
scheme: ColorScheme;
|
|
684
|
-
/** @internal */
|
|
685
|
-
unstable_CompatProvider?: _CardCompatProviderComponent;
|
|
686
|
-
}): React.JSX.Element;
|
|
687
|
-
/** @public */
|
|
688
|
-
declare function useCard(): CardContextValue;
|
|
689
|
-
/** @public */
|
|
690
|
-
declare const DEFAULT_CHECKBOX_ELEMENT = "input";
|
|
691
|
-
/** @public */
|
|
692
|
-
type CheckboxOwnProps = {
|
|
693
|
-
indeterminate?: boolean;
|
|
694
|
-
customValidity?: string;
|
|
695
|
-
};
|
|
656
|
+
export declare const DEFAULT_AUTOCOMPLETE_ELEMENT = 'input'
|
|
657
|
+
|
|
696
658
|
/** @public */
|
|
697
|
-
|
|
659
|
+
export declare const DEFAULT_AVATAR_COUNTER_ELEMENT = 'span'
|
|
660
|
+
|
|
698
661
|
/** @public */
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
* Checkboxes allow the user to select one or more items from a set.
|
|
702
|
-
*
|
|
703
|
-
* @public
|
|
704
|
-
*/
|
|
705
|
-
declare function Checkbox<E extends CheckboxElementType = typeof DEFAULT_CHECKBOX_ELEMENT>(props: CheckboxProps<E>): React.JSX.Element;
|
|
662
|
+
export declare const DEFAULT_AVATAR_ELEMENT = 'span'
|
|
663
|
+
|
|
706
664
|
/** @public */
|
|
707
|
-
declare const
|
|
665
|
+
export declare const DEFAULT_AVATAR_STACK_ELEMENT = 'span'
|
|
666
|
+
|
|
708
667
|
/** @public */
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
language?: string;
|
|
712
|
-
size?: ResponsiveProp<FontCodeSize>;
|
|
713
|
-
};
|
|
668
|
+
export declare const DEFAULT_BADGE_ELEMENT = 'span'
|
|
669
|
+
|
|
714
670
|
/** @public */
|
|
715
|
-
|
|
671
|
+
export declare const DEFAULT_BOX_ELEMENT = 'div'
|
|
672
|
+
|
|
673
|
+
/** @beta */
|
|
674
|
+
export declare const DEFAULT_BREADCRUMBS_ELEMENT = 'nav'
|
|
675
|
+
|
|
716
676
|
/** @public */
|
|
717
|
-
|
|
677
|
+
export declare const DEFAULT_BUTTON_ELEMENT = 'button'
|
|
678
|
+
|
|
718
679
|
/** @public */
|
|
719
|
-
declare
|
|
680
|
+
export declare const DEFAULT_CARD_ELEMENT = 'div'
|
|
681
|
+
|
|
720
682
|
/** @public */
|
|
721
|
-
declare const
|
|
683
|
+
export declare const DEFAULT_CHECKBOX_ELEMENT = 'input'
|
|
684
|
+
|
|
722
685
|
/** @public */
|
|
723
|
-
|
|
686
|
+
export declare const DEFAULT_CODE_ELEMENT = 'pre'
|
|
687
|
+
|
|
688
|
+
/** @beta */
|
|
689
|
+
export declare const DEFAULT_CODE_SKELETON_ELEMENT = 'div'
|
|
690
|
+
|
|
724
691
|
/** @public */
|
|
725
|
-
|
|
692
|
+
export declare const DEFAULT_CONTAINER_ELEMENT = 'div'
|
|
693
|
+
|
|
726
694
|
/** @public */
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
*/
|
|
733
|
-
declare function Container<E extends ContainerElementType = typeof DEFAULT_CONTAINER_ELEMENT>(props: ContainerProps<E>): React.JSX.Element;
|
|
734
|
-
/**
|
|
735
|
-
* @internal
|
|
736
|
-
*/
|
|
737
|
-
interface ResponsiveWidthStyleProps {
|
|
738
|
-
$width: (number | "auto")[];
|
|
739
|
-
}
|
|
695
|
+
export declare const DEFAULT_DIALOG_ELEMENT = 'div'
|
|
696
|
+
|
|
697
|
+
/** @beta */
|
|
698
|
+
export declare const DEFAULT_ELEMENT_QUERY_ELEMENT = 'div'
|
|
699
|
+
|
|
740
700
|
/** @public */
|
|
741
|
-
declare const
|
|
701
|
+
export declare const DEFAULT_FLEX_ELEMENT = 'div'
|
|
702
|
+
|
|
742
703
|
/** @public */
|
|
743
|
-
|
|
704
|
+
export declare const DEFAULT_GRID_ELEMENT = 'div'
|
|
705
|
+
|
|
744
706
|
/** @public */
|
|
745
|
-
|
|
707
|
+
export declare const DEFAULT_HEADING_ELEMENT = 'div'
|
|
708
|
+
|
|
709
|
+
/** @beta */
|
|
710
|
+
export declare const DEFAULT_HEADING_SKELETON_ELEMENT = 'div'
|
|
711
|
+
|
|
746
712
|
/** @public */
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
* Typographic headings.
|
|
750
|
-
*
|
|
751
|
-
* @public
|
|
752
|
-
*/
|
|
753
|
-
declare function Heading<E extends HeadingElementType = typeof DEFAULT_HEADING_ELEMENT>(props: HeadingProps<E>): React.JSX.Element;
|
|
713
|
+
export declare const DEFAULT_HOTKEYS_ELEMENT = 'kbd'
|
|
714
|
+
|
|
754
715
|
/** @public */
|
|
755
|
-
declare const DEFAULT_INLINE_ELEMENT =
|
|
716
|
+
export declare const DEFAULT_INLINE_ELEMENT = 'div'
|
|
717
|
+
|
|
756
718
|
/** @public */
|
|
757
|
-
|
|
719
|
+
export declare const DEFAULT_KBD_ELEMENT = 'kbd'
|
|
720
|
+
|
|
758
721
|
/** @public */
|
|
759
|
-
|
|
722
|
+
export declare const DEFAULT_LABEL_ELEMENT = 'div'
|
|
723
|
+
|
|
724
|
+
/** @beta */
|
|
725
|
+
export declare const DEFAULT_LABEL_SKELETON_ELEMENT = 'div'
|
|
726
|
+
|
|
760
727
|
/** @public */
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
* The `Inline` component is a layout utility for aligning and spacing items horizontally.
|
|
764
|
-
*
|
|
765
|
-
* @public
|
|
766
|
-
*/
|
|
767
|
-
declare function Inline<E extends InlineElementType = typeof DEFAULT_INLINE_ELEMENT>(props: InlineProps<E>): React.JSX.Element;
|
|
728
|
+
export declare const DEFAULT_LAYER_ELEMENT = 'div'
|
|
729
|
+
|
|
768
730
|
/** @public */
|
|
769
|
-
declare const
|
|
731
|
+
export declare const DEFAULT_MENU_DIVIDER_ELEMENT = 'hr'
|
|
732
|
+
|
|
770
733
|
/** @public */
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
};
|
|
734
|
+
export declare const DEFAULT_MENU_ELEMENT = 'div'
|
|
735
|
+
|
|
774
736
|
/** @public */
|
|
775
|
-
|
|
737
|
+
export declare const DEFAULT_MENU_GROUP_ELEMENT = 'button'
|
|
738
|
+
|
|
776
739
|
/** @public */
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
* Used to define some text as keyboard input.
|
|
780
|
-
*
|
|
781
|
-
* @public
|
|
782
|
-
*/
|
|
783
|
-
declare function KBD<E extends KBDElementType = typeof DEFAULT_KBD_ELEMENT>(props: KBDProps<E>): React.JSX.Element;
|
|
740
|
+
export declare const DEFAULT_MENU_ITEM_ELEMENT = 'button'
|
|
741
|
+
|
|
784
742
|
/** @public */
|
|
785
|
-
declare const
|
|
743
|
+
export declare const DEFAULT_POPOVER_ELEMENT = 'div'
|
|
744
|
+
|
|
786
745
|
/** @public */
|
|
787
|
-
|
|
746
|
+
export declare const DEFAULT_RADIO_ELEMENT = 'input'
|
|
747
|
+
|
|
788
748
|
/** @public */
|
|
789
|
-
|
|
749
|
+
export declare const DEFAULT_ROOT_ELEMENT = 'html'
|
|
750
|
+
|
|
790
751
|
/** @public */
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
*/
|
|
797
|
-
declare
|
|
752
|
+
export declare const DEFAULT_SELECT_ELEMENT = 'select'
|
|
753
|
+
|
|
754
|
+
/** @internal */
|
|
755
|
+
export declare const DEFAULT_SELECTABLE_ELEMENT = 'button'
|
|
756
|
+
|
|
757
|
+
/** @beta */
|
|
758
|
+
export declare const DEFAULT_SKELETON_ELEMENT = 'div'
|
|
759
|
+
|
|
798
760
|
/** @public */
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
isTopLayer: boolean;
|
|
802
|
-
level?: number;
|
|
803
|
-
registerChild: (childLevel?: number) => () => void;
|
|
804
|
-
size: number;
|
|
805
|
-
zIndex: number;
|
|
806
|
-
}
|
|
761
|
+
export declare const DEFAULT_SPINNER_ELEMENT = 'div'
|
|
762
|
+
|
|
807
763
|
/** @public */
|
|
808
|
-
declare
|
|
764
|
+
export declare const DEFAULT_SR_ONLY_ELEMENT = 'span'
|
|
765
|
+
|
|
809
766
|
/** @public */
|
|
810
|
-
declare const
|
|
767
|
+
export declare const DEFAULT_STACK_ELEMENT = 'div'
|
|
768
|
+
|
|
811
769
|
/** @public */
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
};
|
|
770
|
+
export declare const DEFAULT_SWITCH_ELEMENT = 'input'
|
|
771
|
+
|
|
815
772
|
/** @public */
|
|
816
|
-
|
|
773
|
+
export declare const DEFAULT_TAB_ELEMENT = 'button'
|
|
774
|
+
|
|
817
775
|
/** @public */
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
* The `Radio` component allows the user to select one option from a set.
|
|
821
|
-
*
|
|
822
|
-
* @public
|
|
823
|
-
*/
|
|
824
|
-
declare function Radio<E extends RadioElementType = typeof DEFAULT_RADIO_ELEMENT>(props: RadioProps<E>): React.JSX.Element;
|
|
776
|
+
export declare const DEFAULT_TAB_LIST_ELEMENT = 'div'
|
|
777
|
+
|
|
825
778
|
/** @public */
|
|
826
|
-
declare const
|
|
779
|
+
export declare const DEFAULT_TAB_PANEL_ELEMENT = 'div'
|
|
780
|
+
|
|
827
781
|
/** @public */
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
readOnly?: boolean;
|
|
831
|
-
};
|
|
782
|
+
export declare const DEFAULT_TEXT_AREA_ELEMENT = 'textarea'
|
|
783
|
+
|
|
832
784
|
/** @public */
|
|
833
|
-
|
|
785
|
+
export declare const DEFAULT_TEXT_ELEMENT = 'div'
|
|
786
|
+
|
|
834
787
|
/** @public */
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
* The `Select` component provides control of options.
|
|
838
|
-
*
|
|
839
|
-
* @public
|
|
840
|
-
*/
|
|
841
|
-
declare function Select<E extends SelectElementType = typeof DEFAULT_SELECT_ELEMENT>(props: SelectProps<E>): React.JSX.Element;
|
|
788
|
+
export declare const DEFAULT_TEXT_INPUT_ELEMENT = 'input'
|
|
789
|
+
|
|
842
790
|
/** @beta */
|
|
843
|
-
declare const
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
};
|
|
791
|
+
export declare const DEFAULT_TEXT_SKELETON_ELEMENT = 'div'
|
|
792
|
+
|
|
793
|
+
/** @internal */
|
|
794
|
+
export declare const DEFAULT_TOAST_ELEMENT = 'li'
|
|
795
|
+
|
|
796
|
+
/** @public */
|
|
797
|
+
export declare const DEFAULT_TOOLTIP_ELEMENT = 'div'
|
|
798
|
+
|
|
852
799
|
/** @beta */
|
|
853
|
-
|
|
800
|
+
export declare const DEFAULT_TREE_ELEMENT = 'div'
|
|
801
|
+
|
|
854
802
|
/** @beta */
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
* This API might change. DO NOT USE IN PRODUCTION.
|
|
858
|
-
* @beta
|
|
859
|
-
*/
|
|
860
|
-
declare function Skeleton<E extends SkeletonElementType = typeof DEFAULT_SKELETON_ELEMENT>(props: SkeletonProps<E>): React.JSX.Element;
|
|
803
|
+
export declare const DEFAULT_TREE_ITEM_ELEMENT = 'a'
|
|
804
|
+
|
|
861
805
|
/** @beta */
|
|
862
|
-
declare const
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
806
|
+
export declare const DEFAULT_VIRTUAL_LIST_ELEMENT = 'div'
|
|
807
|
+
|
|
808
|
+
/** @public */
|
|
809
|
+
export declare type Delay =
|
|
810
|
+
| number
|
|
811
|
+
| Partial<{
|
|
812
|
+
open: number
|
|
813
|
+
close: number
|
|
814
|
+
}>
|
|
815
|
+
|
|
816
|
+
/**
|
|
817
|
+
* The Dialog component.
|
|
818
|
+
*
|
|
819
|
+
* @public
|
|
820
|
+
*/
|
|
821
|
+
export declare function Dialog<E extends DialogElementType = typeof DEFAULT_DIALOG_ELEMENT>(
|
|
822
|
+
props: DialogProps<E>,
|
|
823
|
+
): React.JSX.Element
|
|
824
|
+
|
|
825
|
+
/**
|
|
826
|
+
* @internal
|
|
827
|
+
*/
|
|
828
|
+
export declare const DialogContext: Context<DialogContextValue>
|
|
829
|
+
|
|
830
|
+
/**
|
|
831
|
+
* This API might change. DO NOT USE IN PRODUCTION.
|
|
832
|
+
* @beta
|
|
833
|
+
*/
|
|
834
|
+
export declare interface DialogContextValue {
|
|
835
|
+
version: 0.0
|
|
836
|
+
position?: ResponsiveProp<DialogPosition>
|
|
837
|
+
zOffset?: ResponsiveProp<number>
|
|
838
|
+
}
|
|
839
|
+
|
|
840
|
+
/** @public */
|
|
841
|
+
export declare type DialogElementType = 'div' | 'span' | ComponentType
|
|
842
|
+
|
|
843
|
+
/** @public */
|
|
844
|
+
export declare type DialogOwnProps = ContainerStyleProps &
|
|
845
|
+
Omit<LayerOwnProps, 'width'> & {
|
|
846
|
+
/**
|
|
847
|
+
* @beta
|
|
848
|
+
*/
|
|
849
|
+
__unstable_autoFocus?: boolean
|
|
850
|
+
/**
|
|
851
|
+
* @beta
|
|
852
|
+
*/
|
|
853
|
+
__unstable_hideCloseButton?: boolean
|
|
854
|
+
/**
|
|
855
|
+
* Whether the dialog should animate in on mount.
|
|
856
|
+
*
|
|
857
|
+
* @beta
|
|
858
|
+
* @defaultValue false
|
|
859
|
+
*/
|
|
860
|
+
animate?: boolean
|
|
861
|
+
cardRadius?: ResponsiveProp<Radius>
|
|
862
|
+
contentRef?: ForwardedRef<HTMLDivElement>
|
|
863
|
+
footer?: ReactNode
|
|
864
|
+
header?: ReactNode
|
|
865
|
+
id: string
|
|
866
|
+
/** A callback that fires when the dialog becomes the top layer when it was not the top layer before. */
|
|
867
|
+
onActivate?: LayerProps['onActivate']
|
|
868
|
+
onClickOutside?: () => void
|
|
869
|
+
onClose?: () => void
|
|
870
|
+
open?: boolean
|
|
871
|
+
portal?: string
|
|
872
|
+
position?: ResponsiveProp<DialogPosition>
|
|
873
|
+
scheme?: ColorScheme
|
|
874
|
+
tone?: CardTone | 'inherit'
|
|
875
|
+
zOffset?: number | number[]
|
|
876
|
+
}
|
|
877
|
+
|
|
878
|
+
/** @public */
|
|
879
|
+
export declare type DialogPosition = 'absolute' | 'fixed'
|
|
880
|
+
|
|
881
|
+
/** @public */
|
|
882
|
+
export declare type DialogProps<E extends DialogElementType = DialogElementType> = Props<
|
|
883
|
+
DialogOwnProps,
|
|
884
|
+
E
|
|
885
|
+
>
|
|
886
|
+
|
|
887
|
+
/**
|
|
888
|
+
* This API might change. DO NOT USE IN PRODUCTION.
|
|
889
|
+
* @beta
|
|
890
|
+
*/
|
|
891
|
+
export declare function DialogProvider(props: DialogProviderProps): React.JSX.Element
|
|
892
|
+
|
|
893
|
+
/**
|
|
894
|
+
* This API might change. DO NOT USE IN PRODUCTION.
|
|
895
|
+
* @beta
|
|
896
|
+
*/
|
|
897
|
+
export declare interface DialogProviderProps {
|
|
898
|
+
children?: ReactNode
|
|
899
|
+
position?: ResponsiveProp<DialogPosition>
|
|
900
|
+
zOffset?: ResponsiveProp<number>
|
|
901
|
+
}
|
|
902
|
+
|
|
903
|
+
/**
|
|
904
|
+
* DO NOT USE IN PRODUCTION.
|
|
905
|
+
* @beta
|
|
906
|
+
*/
|
|
907
|
+
export declare function ElementQuery<
|
|
908
|
+
E extends ElementQueryElementType = typeof DEFAULT_ELEMENT_QUERY_ELEMENT,
|
|
909
|
+
>(props: ElementQueryProps<E>): React.JSX.Element
|
|
910
|
+
|
|
867
911
|
/** @beta */
|
|
868
|
-
type
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
*
|
|
872
|
-
|
|
873
|
-
|
|
912
|
+
export declare type ElementQueryElementType = 'div' | ComponentType
|
|
913
|
+
|
|
914
|
+
/**
|
|
915
|
+
* DO NOT USE IN PRODUCTION.
|
|
916
|
+
* @beta
|
|
917
|
+
*/
|
|
918
|
+
export declare type ElementQueryOwnProps = {
|
|
919
|
+
media?: number[]
|
|
920
|
+
}
|
|
921
|
+
|
|
922
|
+
/**
|
|
923
|
+
* DO NOT USE IN PRODUCTION.
|
|
924
|
+
* @beta
|
|
925
|
+
*/
|
|
926
|
+
export declare type ElementQueryProps<E extends ElementQueryElementType = ElementQueryElementType> =
|
|
927
|
+
Props<ElementQueryOwnProps, E>
|
|
928
|
+
|
|
929
|
+
/**
|
|
930
|
+
* @beta
|
|
931
|
+
*/
|
|
932
|
+
export declare interface ElementRectValue {
|
|
933
|
+
width: number
|
|
934
|
+
height: number
|
|
935
|
+
}
|
|
936
|
+
|
|
874
937
|
/**
|
|
875
|
-
*
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
};
|
|
885
|
-
/** @beta */
|
|
886
|
-
type HeadingSkeletonElementType = SkeletonElementType;
|
|
938
|
+
* @beta
|
|
939
|
+
*/
|
|
940
|
+
export declare interface ElementSize {
|
|
941
|
+
content: ElementRectValue
|
|
942
|
+
border: ElementRectValue
|
|
943
|
+
/** @deprecated INTERNAL ONLY */
|
|
944
|
+
_contentRect: DOMRectReadOnly
|
|
945
|
+
}
|
|
946
|
+
|
|
887
947
|
/**
|
|
888
|
-
*
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
948
|
+
* @internal
|
|
949
|
+
*/
|
|
950
|
+
export declare interface _ElementSizeListener {
|
|
951
|
+
subscribe: (element: HTMLElement, subscriber: _ElementSizeSubscriber) => () => void
|
|
952
|
+
}
|
|
953
|
+
|
|
892
954
|
/**
|
|
893
|
-
*
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
/**
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
955
|
+
* @internal
|
|
956
|
+
*/
|
|
957
|
+
export declare interface _ElementSizeObserver {
|
|
958
|
+
subscribe: (element: HTMLElement, subscriber: _ElementSizeSubscriber) => () => void
|
|
959
|
+
}
|
|
960
|
+
|
|
961
|
+
/**
|
|
962
|
+
* @internal
|
|
963
|
+
*/
|
|
964
|
+
export declare const _elementSizeObserver: _ElementSizeObserver
|
|
965
|
+
|
|
966
|
+
/**
|
|
967
|
+
* @internal
|
|
968
|
+
*/
|
|
969
|
+
export declare type _ElementSizeSubscriber = (elementRect: ElementSize) => void
|
|
970
|
+
|
|
971
|
+
/** @public */
|
|
972
|
+
export declare type ElementType<P> = TagType | ComponentType<P>
|
|
973
|
+
|
|
974
|
+
/** @public */
|
|
975
|
+
export declare type EmptyProps = {}
|
|
976
|
+
|
|
977
|
+
/**
|
|
978
|
+
* DO NOT USE IN PRODUCTION
|
|
979
|
+
* @beta
|
|
980
|
+
*/
|
|
981
|
+
export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
|
|
982
|
+
state: ErrorBoundaryState
|
|
983
|
+
static displayName: string
|
|
984
|
+
static getDerivedStateFromError(error: Error): ErrorBoundaryState
|
|
985
|
+
componentDidCatch(error: Error, info: ErrorInfo): void
|
|
986
|
+
render(): ReactNode
|
|
987
|
+
}
|
|
988
|
+
|
|
989
|
+
/**
|
|
990
|
+
* DO NOT USE IN PRODUCTION
|
|
991
|
+
* @beta
|
|
992
|
+
*/
|
|
993
|
+
export declare type ErrorBoundaryProps = PropsWithChildren<{
|
|
994
|
+
onCatch: (params: {error: Error; info: ErrorInfo}) => void
|
|
995
|
+
}>
|
|
996
|
+
|
|
997
|
+
/**
|
|
998
|
+
* DO NOT USE IN PRODUCTION
|
|
999
|
+
* @beta
|
|
1000
|
+
*/
|
|
1001
|
+
export declare interface ErrorBoundaryState {
|
|
1002
|
+
error: Error | null
|
|
1003
|
+
}
|
|
1004
|
+
|
|
1005
|
+
/**
|
|
1006
|
+
* The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
|
|
1007
|
+
*
|
|
1008
|
+
* @public
|
|
1009
|
+
*/
|
|
1010
|
+
export declare function Flex<E extends FlexElementType = typeof DEFAULT_FLEX_ELEMENT>(
|
|
1011
|
+
props: FlexProps<E>,
|
|
1012
|
+
): React.JSX.Element
|
|
1013
|
+
|
|
1014
|
+
/** @public */
|
|
1015
|
+
export declare type FlexElementType = BoxElementType
|
|
1016
|
+
|
|
1017
|
+
/** @public */
|
|
1018
|
+
export declare type FlexOwnProps = Omit<
|
|
1019
|
+
BoxOwnProps,
|
|
1020
|
+
'align' | 'display' | 'flexDirection' | 'flexWrap'
|
|
1021
|
+
> & {
|
|
1022
|
+
align?: ResponsiveProp<AlignItems>
|
|
1023
|
+
direction?: ResponsiveProp<FlexDirection>
|
|
1024
|
+
justify?: ResponsiveProp<JustifyContent>
|
|
1025
|
+
wrap?: ResponsiveProp<FlexWrap>
|
|
1026
|
+
}
|
|
1027
|
+
|
|
1028
|
+
/** @public */
|
|
1029
|
+
export declare type FlexProps<E extends FlexElementType = FlexElementType> = Props<FlexOwnProps, E>
|
|
1030
|
+
|
|
1031
|
+
/**
|
|
1032
|
+
* @internal
|
|
1033
|
+
*/
|
|
1034
|
+
export declare function focusFirstDescendant(element: HTMLElement): boolean
|
|
1035
|
+
|
|
1036
|
+
/**
|
|
1037
|
+
* @internal
|
|
1038
|
+
*/
|
|
1039
|
+
export declare function focusLastDescendant(element: HTMLElement): boolean
|
|
1040
|
+
|
|
1041
|
+
/**
|
|
1042
|
+
* @internal
|
|
1043
|
+
*/
|
|
1044
|
+
export declare function _getArrayProp<T>(val: T | T[] | undefined, defaultVal?: T[]): T[]
|
|
1045
|
+
|
|
1046
|
+
/**
|
|
1047
|
+
* @internal
|
|
1048
|
+
*/
|
|
1049
|
+
export declare function _getResponsiveProp<T>(
|
|
1050
|
+
val: ResponsiveProp<T> | undefined,
|
|
1051
|
+
defaultVal?: Partial<Record<Breakpoint, T>>,
|
|
1052
|
+
): Partial<Record<Breakpoint, T>>
|
|
1053
|
+
|
|
1054
|
+
/**
|
|
1055
|
+
* The `Grid` component is for building 2-dimensional layers (based on CSS grid).
|
|
1056
|
+
*
|
|
1057
|
+
* @public
|
|
1058
|
+
*/
|
|
1059
|
+
export declare function Grid<E extends GridElementType = typeof DEFAULT_GRID_ELEMENT>(
|
|
1060
|
+
props: GridProps<E>,
|
|
1061
|
+
): React.JSX.Element
|
|
1062
|
+
|
|
1063
|
+
/** @public */
|
|
1064
|
+
export declare type GridElementType = BoxElementType
|
|
1065
|
+
|
|
1066
|
+
/** @public */
|
|
1067
|
+
export declare type GridOwnProps = Omit<BoxOwnProps, 'display'>
|
|
1068
|
+
|
|
1069
|
+
/** @public */
|
|
1070
|
+
export declare type GridProps<E extends GridElementType = GridElementType> = Props<GridOwnProps, E>
|
|
1071
|
+
|
|
1072
|
+
/**
|
|
1073
|
+
* @internal
|
|
1074
|
+
*/
|
|
1075
|
+
export declare function _hasFocus(element: HTMLElement): boolean
|
|
1076
|
+
|
|
1077
|
+
/**
|
|
1078
|
+
* Typographic headings.
|
|
1079
|
+
*
|
|
1080
|
+
* @public
|
|
1081
|
+
*/
|
|
1082
|
+
export declare function Heading<E extends HeadingElementType = typeof DEFAULT_HEADING_ELEMENT>(
|
|
1083
|
+
props: HeadingProps<E>,
|
|
1084
|
+
): React.JSX.Element
|
|
1085
|
+
|
|
1086
|
+
/** @public */
|
|
1087
|
+
export declare type HeadingElementType =
|
|
1088
|
+
| 'div'
|
|
1089
|
+
| 'h1'
|
|
1090
|
+
| 'h2'
|
|
1091
|
+
| 'h3'
|
|
1092
|
+
| 'h4'
|
|
1093
|
+
| 'h5'
|
|
1094
|
+
| 'h6'
|
|
1095
|
+
| 'label'
|
|
1096
|
+
| 'span'
|
|
1097
|
+
| ComponentType
|
|
1098
|
+
|
|
1099
|
+
/** @public */
|
|
1100
|
+
export declare type HeadingOwnProps = HeadingStyleProps & TextOverflowStyleProps
|
|
1101
|
+
|
|
1102
|
+
/** @public */
|
|
1103
|
+
export declare type HeadingProps<E extends HeadingElementType = HeadingElementType> = Props<
|
|
1104
|
+
HeadingOwnProps,
|
|
1105
|
+
E
|
|
1106
|
+
>
|
|
1107
|
+
|
|
1108
|
+
/**
|
|
1109
|
+
* This API might change. DO NOT USE IN PRODUCTION.
|
|
1110
|
+
* @beta
|
|
1111
|
+
*/
|
|
1112
|
+
export declare function HeadingSkeleton<
|
|
1113
|
+
E extends HeadingSkeletonElementType = typeof DEFAULT_HEADING_SKELETON_ELEMENT,
|
|
1114
|
+
>(props: HeadingSkeletonProps<E>): React.JSX.Element
|
|
1115
|
+
|
|
903
1116
|
/** @beta */
|
|
904
|
-
type
|
|
905
|
-
|
|
906
|
-
* This API might change. DO NOT USE IN PRODUCTION.
|
|
907
|
-
* @beta
|
|
908
|
-
*/
|
|
909
|
-
type LabelSkeletonProps<E extends LabelSkeletonElementType = LabelSkeletonElementType> = Props<LabelSkeletonOwnProps, E>;
|
|
910
|
-
/**
|
|
911
|
-
* This API might change. DO NOT USE IN PRODUCTION.
|
|
912
|
-
* @beta
|
|
913
|
-
*/
|
|
914
|
-
declare function LabelSkeleton<E extends LabelSkeletonElementType = typeof DEFAULT_LABEL_SKELETON_ELEMENT>(props: LabelSkeletonProps<E>): React.JSX.Element;
|
|
1117
|
+
export declare type HeadingSkeletonElementType = SkeletonElementType
|
|
1118
|
+
|
|
915
1119
|
/** @beta */
|
|
916
|
-
declare
|
|
1120
|
+
export declare type HeadingSkeletonOwnProps = SkeletonOwnProps & {
|
|
1121
|
+
size?: ResponsiveProp<FontHeadingSize>
|
|
1122
|
+
}
|
|
1123
|
+
|
|
1124
|
+
/**
|
|
1125
|
+
* This API might change. DO NOT USE IN PRODUCTION.
|
|
1126
|
+
* @beta
|
|
1127
|
+
*/
|
|
1128
|
+
export declare type HeadingSkeletonProps<
|
|
1129
|
+
E extends HeadingSkeletonElementType = HeadingSkeletonElementType,
|
|
1130
|
+
> = Props<HeadingSkeletonOwnProps, E>
|
|
1131
|
+
|
|
1132
|
+
/**
|
|
1133
|
+
* Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
|
|
1134
|
+
*
|
|
1135
|
+
* @public
|
|
1136
|
+
*/
|
|
1137
|
+
export declare function Hotkeys<E extends HotkeysElementType = typeof DEFAULT_HOTKEYS_ELEMENT>(
|
|
1138
|
+
props: HotkeysProps<E>,
|
|
1139
|
+
): React.JSX.Element | undefined
|
|
1140
|
+
|
|
1141
|
+
/** @public */
|
|
1142
|
+
export declare type HotkeysElementType = 'kbd' | ComponentType
|
|
1143
|
+
|
|
1144
|
+
/** @public */
|
|
1145
|
+
export declare interface HotkeysOwnProps extends GapStyleProps, RadiusStyleProps {
|
|
1146
|
+
fontSize?: ResponsiveProp<FontTextSize>
|
|
1147
|
+
padding?: ResponsiveProp<Space>
|
|
1148
|
+
keys?: string[]
|
|
1149
|
+
}
|
|
1150
|
+
|
|
1151
|
+
/** @public */
|
|
1152
|
+
export declare type HotkeysProps<E extends HotkeysElementType = HotkeysElementType> = Props<
|
|
1153
|
+
HotkeysOwnProps,
|
|
1154
|
+
E
|
|
1155
|
+
>
|
|
1156
|
+
|
|
1157
|
+
/**
|
|
1158
|
+
* The `Inline` component is a layout utility for aligning and spacing items horizontally.
|
|
1159
|
+
*
|
|
1160
|
+
* @public
|
|
1161
|
+
*/
|
|
1162
|
+
export declare function Inline<E extends InlineElementType = typeof DEFAULT_INLINE_ELEMENT>(
|
|
1163
|
+
props: InlineProps<E>,
|
|
1164
|
+
): React.JSX.Element
|
|
1165
|
+
|
|
1166
|
+
/** @public */
|
|
1167
|
+
export declare type InlineElementType = BoxElementType
|
|
1168
|
+
|
|
1169
|
+
/** @public */
|
|
1170
|
+
export declare type InlineOwnProps = Omit<
|
|
1171
|
+
BoxOwnProps,
|
|
1172
|
+
| 'alignItems'
|
|
1173
|
+
| 'flexDirection'
|
|
1174
|
+
| 'flexWrap'
|
|
1175
|
+
| 'justifyContent'
|
|
1176
|
+
| 'gridAutoColumns'
|
|
1177
|
+
| 'gridAutoFlow'
|
|
1178
|
+
| 'gridAutoRows'
|
|
1179
|
+
| 'gridColumnEnd'
|
|
1180
|
+
| 'gridColumnStart'
|
|
1181
|
+
| 'gridColumn'
|
|
1182
|
+
| 'gridRowEnd'
|
|
1183
|
+
| 'gridRowStart'
|
|
1184
|
+
| 'gridRow'
|
|
1185
|
+
| 'gridTemplateColumns'
|
|
1186
|
+
| 'gridTemplateRows'
|
|
1187
|
+
>
|
|
1188
|
+
|
|
1189
|
+
/** @public */
|
|
1190
|
+
export declare type InlineProps<E extends InlineElementType = InlineElementType> = Props<
|
|
1191
|
+
InlineOwnProps,
|
|
1192
|
+
E
|
|
1193
|
+
>
|
|
1194
|
+
|
|
1195
|
+
/**
|
|
1196
|
+
* @internal
|
|
1197
|
+
*/
|
|
1198
|
+
export declare function _isEnterToClickElement(element: HTMLElement): boolean
|
|
1199
|
+
|
|
1200
|
+
/**
|
|
1201
|
+
* @internal
|
|
1202
|
+
*/
|
|
1203
|
+
export declare function isFocusable(element: HTMLElement): boolean
|
|
1204
|
+
|
|
1205
|
+
/**
|
|
1206
|
+
* @internal
|
|
1207
|
+
*/
|
|
1208
|
+
export declare function isHTMLAnchorElement(element: unknown): element is HTMLAnchorElement
|
|
1209
|
+
|
|
1210
|
+
/**
|
|
1211
|
+
* @internal
|
|
1212
|
+
*/
|
|
1213
|
+
export declare function isHTMLButtonElement(element: unknown): element is HTMLButtonElement
|
|
1214
|
+
|
|
1215
|
+
/**
|
|
1216
|
+
* @internal
|
|
1217
|
+
*/
|
|
1218
|
+
export declare function isHTMLElement(node: unknown): node is HTMLElement
|
|
1219
|
+
|
|
1220
|
+
/**
|
|
1221
|
+
* @internal
|
|
1222
|
+
*/
|
|
1223
|
+
export declare function isHTMLInputElement(element: unknown): element is HTMLInputElement
|
|
1224
|
+
|
|
1225
|
+
/**
|
|
1226
|
+
* @internal
|
|
1227
|
+
*/
|
|
1228
|
+
export declare function isHTMLSelectElement(element: unknown): element is HTMLSelectElement
|
|
1229
|
+
|
|
1230
|
+
/**
|
|
1231
|
+
* @internal
|
|
1232
|
+
*/
|
|
1233
|
+
export declare function isHTMLTextAreaElement(element: unknown): element is HTMLTextAreaElement
|
|
1234
|
+
|
|
1235
|
+
/**
|
|
1236
|
+
* @internal
|
|
1237
|
+
*/
|
|
1238
|
+
export declare function _isScrollable(el: Node): boolean
|
|
1239
|
+
|
|
1240
|
+
/**
|
|
1241
|
+
* Used to define some text as keyboard input.
|
|
1242
|
+
*
|
|
1243
|
+
* @public
|
|
1244
|
+
*/
|
|
1245
|
+
export declare function KBD<E extends KBDElementType = typeof DEFAULT_KBD_ELEMENT>(
|
|
1246
|
+
props: KBDProps<E>,
|
|
1247
|
+
): React.JSX.Element
|
|
1248
|
+
|
|
1249
|
+
/** @public */
|
|
1250
|
+
export declare type KBDElementType = 'kbd' | ComponentType
|
|
1251
|
+
|
|
1252
|
+
/** @public */
|
|
1253
|
+
export declare type KBDOwnProps = BoxOwnProps &
|
|
1254
|
+
RadiusStyleProps & {
|
|
1255
|
+
fontSize?: ResponsiveProp<FontTextSize>
|
|
1256
|
+
}
|
|
1257
|
+
|
|
1258
|
+
/** @public */
|
|
1259
|
+
export declare type KBDProps<E extends KBDElementType = KBDElementType> = Props<KBDOwnProps, E>
|
|
1260
|
+
|
|
1261
|
+
/**
|
|
1262
|
+
* Typographic labels.
|
|
1263
|
+
*
|
|
1264
|
+
* @public
|
|
1265
|
+
*/
|
|
1266
|
+
export declare function Label<E extends LabelElementType = typeof DEFAULT_LABEL_ELEMENT>(
|
|
1267
|
+
props: LabelProps<E>,
|
|
1268
|
+
): React.JSX.Element
|
|
1269
|
+
|
|
1270
|
+
/** @public */
|
|
1271
|
+
export declare type LabelElementType =
|
|
1272
|
+
| 'div'
|
|
1273
|
+
| 'h1'
|
|
1274
|
+
| 'h2'
|
|
1275
|
+
| 'h3'
|
|
1276
|
+
| 'h4'
|
|
1277
|
+
| 'h5'
|
|
1278
|
+
| 'h6'
|
|
1279
|
+
| 'label'
|
|
1280
|
+
| 'li'
|
|
1281
|
+
| 'p'
|
|
1282
|
+
| 'span'
|
|
1283
|
+
| ComponentType
|
|
1284
|
+
|
|
1285
|
+
/** @public */
|
|
1286
|
+
export declare type LabelOwnProps = LabelStyleProps & TextOverflowStyleProps
|
|
1287
|
+
|
|
1288
|
+
/** @public */
|
|
1289
|
+
export declare type LabelProps<E extends LabelElementType = LabelElementType> = Props<
|
|
1290
|
+
LabelOwnProps,
|
|
1291
|
+
E
|
|
1292
|
+
>
|
|
1293
|
+
|
|
1294
|
+
/**
|
|
1295
|
+
* This API might change. DO NOT USE IN PRODUCTION.
|
|
1296
|
+
* @beta
|
|
1297
|
+
*/
|
|
1298
|
+
export declare function LabelSkeleton<
|
|
1299
|
+
E extends LabelSkeletonElementType = typeof DEFAULT_LABEL_SKELETON_ELEMENT,
|
|
1300
|
+
>(props: LabelSkeletonProps<E>): React.JSX.Element
|
|
1301
|
+
|
|
917
1302
|
/** @beta */
|
|
918
|
-
type
|
|
919
|
-
|
|
920
|
-
};
|
|
1303
|
+
export declare type LabelSkeletonElementType = SkeletonElementType
|
|
1304
|
+
|
|
921
1305
|
/** @beta */
|
|
922
|
-
type
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
1306
|
+
export declare type LabelSkeletonOwnProps = SkeletonOwnProps & {
|
|
1307
|
+
size?: ResponsiveProp<FontLabelSize>
|
|
1308
|
+
}
|
|
1309
|
+
|
|
1310
|
+
/**
|
|
1311
|
+
* This API might change. DO NOT USE IN PRODUCTION.
|
|
1312
|
+
* @beta
|
|
1313
|
+
*/
|
|
1314
|
+
export declare type LabelSkeletonProps<
|
|
1315
|
+
E extends LabelSkeletonElementType = LabelSkeletonElementType,
|
|
1316
|
+
> = Props<LabelSkeletonOwnProps, E>
|
|
1317
|
+
|
|
1318
|
+
/** @public */
|
|
1319
|
+
export declare function Layer<E extends LayerElementType = typeof DEFAULT_LAYER_ELEMENT>(
|
|
1320
|
+
props: LayerProps<E>,
|
|
1321
|
+
): React.JSX.Element
|
|
1322
|
+
|
|
1323
|
+
/** @public */
|
|
1324
|
+
export declare interface LayerContextValue {
|
|
1325
|
+
version: 0.0
|
|
1326
|
+
isTopLayer: boolean
|
|
1327
|
+
level?: number
|
|
1328
|
+
registerChild: (childLevel?: number) => () => void
|
|
1329
|
+
size: number
|
|
1330
|
+
zIndex: number
|
|
1331
|
+
}
|
|
1332
|
+
|
|
935
1333
|
/** @public */
|
|
936
|
-
type
|
|
1334
|
+
export declare type LayerElementType = CardElementType
|
|
1335
|
+
|
|
937
1336
|
/** @public */
|
|
938
|
-
type
|
|
1337
|
+
export declare type LayerOwnProps = CardOwnProps & {
|
|
1338
|
+
/** A callback that fires when the layer becomes the top layer when it was not the top layer before. */
|
|
1339
|
+
onActivate?: (props: {activeElement: HTMLElement | null}) => void
|
|
1340
|
+
zOffset?: ResponsiveProp<number>
|
|
1341
|
+
}
|
|
1342
|
+
|
|
939
1343
|
/** @public */
|
|
940
|
-
type
|
|
1344
|
+
export declare type LayerProps<E extends LayerElementType = LayerElementType> = Props<
|
|
1345
|
+
LayerOwnProps,
|
|
1346
|
+
E
|
|
1347
|
+
>
|
|
1348
|
+
|
|
941
1349
|
/** @public */
|
|
942
|
-
declare function
|
|
1350
|
+
export declare function LayerProvider(props: LayerProviderProps): React.JSX.Element
|
|
1351
|
+
|
|
943
1352
|
/** @public */
|
|
944
|
-
declare
|
|
1353
|
+
export declare interface LayerProviderProps {
|
|
1354
|
+
children?: ReactNode
|
|
1355
|
+
zOffset?: ResponsiveProp<number>
|
|
1356
|
+
}
|
|
1357
|
+
|
|
1358
|
+
/**
|
|
1359
|
+
* @internal
|
|
1360
|
+
*/
|
|
1361
|
+
export declare interface _MediaStore {
|
|
1362
|
+
subscribe: (onStoreChange: () => void) => () => void
|
|
1363
|
+
getSnapshot: () => Breakpoint
|
|
1364
|
+
}
|
|
1365
|
+
|
|
1366
|
+
/**
|
|
1367
|
+
* The `Menu` component is a building block for application menus.
|
|
1368
|
+
*
|
|
1369
|
+
* @public
|
|
1370
|
+
*/
|
|
1371
|
+
export declare function Menu<E extends MenuElementType = typeof DEFAULT_MENU_ELEMENT>(
|
|
1372
|
+
props: MenuProps<E>,
|
|
1373
|
+
): React.JSX.Element
|
|
1374
|
+
|
|
1375
|
+
/**
|
|
1376
|
+
* The `MenuButton` component follows the WAI-ARIA specification for menu buttons.
|
|
1377
|
+
*
|
|
1378
|
+
* @public
|
|
1379
|
+
*/
|
|
1380
|
+
export declare function MenuButton(props: MenuButtonProps): React.JSX.Element
|
|
1381
|
+
|
|
1382
|
+
/** @public */
|
|
1383
|
+
export declare type MenuButtonProps = {
|
|
1384
|
+
/**
|
|
1385
|
+
* @beta Do not use in production.
|
|
1386
|
+
*/
|
|
1387
|
+
__unstable_disableRestoreFocusOnClose?: boolean
|
|
1388
|
+
button: ReactElement<ButtonProps>
|
|
1389
|
+
id: string
|
|
1390
|
+
menu?: ReactElement
|
|
1391
|
+
onClose?: () => void
|
|
1392
|
+
onOpen?: () => void
|
|
1393
|
+
popover?: Omit<PopoverProps, 'content' | 'open'>
|
|
1394
|
+
ref?: ForwardedRef<HTMLButtonElement | null>
|
|
1395
|
+
}
|
|
1396
|
+
|
|
1397
|
+
/** @public */
|
|
1398
|
+
export declare function MenuDivider<
|
|
1399
|
+
E extends MenuDividerElementType = typeof DEFAULT_MENU_DIVIDER_ELEMENT,
|
|
1400
|
+
>(props: MenuDividerProps<E>): React.JSX.Element
|
|
1401
|
+
|
|
1402
|
+
/** @public */
|
|
1403
|
+
export declare type MenuDividerElementType = 'div' | 'hr' | 'span' | ComponentType
|
|
1404
|
+
|
|
1405
|
+
/** @public */
|
|
1406
|
+
export declare type MenuDividerOwnProps = {}
|
|
1407
|
+
|
|
1408
|
+
/** @public */
|
|
1409
|
+
export declare type MenuDividerProps<E extends MenuDividerElementType = MenuDividerElementType> =
|
|
1410
|
+
Props<MenuDividerOwnProps, E>
|
|
1411
|
+
|
|
1412
|
+
/** @public */
|
|
1413
|
+
export declare type MenuElementType = 'div' | 'span' | ComponentType
|
|
1414
|
+
|
|
1415
|
+
/** @public */
|
|
1416
|
+
export declare function MenuGroup<
|
|
1417
|
+
E extends MenuGroupElementType = typeof DEFAULT_MENU_GROUP_ELEMENT,
|
|
1418
|
+
>(props: MenuGroupProps<E>): React.JSX.Element
|
|
1419
|
+
|
|
1420
|
+
/** @public */
|
|
1421
|
+
export declare type MenuGroupElementType = 'button' | ComponentType
|
|
1422
|
+
|
|
1423
|
+
/** @public */
|
|
1424
|
+
export declare type MenuGroupOwnProps = RadiusStyleProps & {
|
|
1425
|
+
disabled?: boolean
|
|
1426
|
+
fontSize?: ResponsiveProp<FontTextSize>
|
|
1427
|
+
gap?: ResponsiveProp<Space>
|
|
1428
|
+
icon?: ElementType_2 | ReactNode
|
|
1429
|
+
menu?: Omit<
|
|
1430
|
+
MenuProps<typeof DEFAULT_MENU_ELEMENT>,
|
|
1431
|
+
| 'onClickOutside'
|
|
1432
|
+
| 'onEscape'
|
|
1433
|
+
| 'onItemClick'
|
|
1434
|
+
| 'onKeyDown'
|
|
1435
|
+
| 'onMouseEnter'
|
|
1436
|
+
| 'registerElement'
|
|
1437
|
+
| 'shouldFocus'
|
|
1438
|
+
| 'onBlurCapture'
|
|
1439
|
+
>
|
|
1440
|
+
padding?: ResponsiveProp<Space>
|
|
1441
|
+
popover?: Omit<PopoverProps, 'content' | 'open'>
|
|
1442
|
+
text?: ReactNode
|
|
1443
|
+
tone?: ElementTone
|
|
1444
|
+
}
|
|
1445
|
+
|
|
1446
|
+
/** @public */
|
|
1447
|
+
export declare type MenuGroupProps<E extends MenuGroupElementType = MenuGroupElementType> = Props<
|
|
1448
|
+
MenuGroupOwnProps,
|
|
1449
|
+
E
|
|
1450
|
+
>
|
|
1451
|
+
|
|
1452
|
+
/** @public */
|
|
1453
|
+
export declare function MenuItem<E extends MenuItemElementType = typeof DEFAULT_MENU_ITEM_ELEMENT>(
|
|
1454
|
+
props: MenuItemProps<E>,
|
|
1455
|
+
): React.JSX.Element
|
|
1456
|
+
|
|
1457
|
+
/** @public */
|
|
1458
|
+
export declare type MenuItemElementType = 'button' | 'a' | ComponentType
|
|
1459
|
+
|
|
1460
|
+
/** @public */
|
|
1461
|
+
export declare type MenuItemOwnProps = GapStyleProps &
|
|
1462
|
+
PaddingStyleProps &
|
|
1463
|
+
RadiusStyleProps & {
|
|
1464
|
+
disabled?: boolean
|
|
1465
|
+
fontSize?: ResponsiveProp<FontTextSize>
|
|
1466
|
+
hotkeys?: string[]
|
|
1467
|
+
icon?: ElementType_2 | ReactNode
|
|
1468
|
+
iconRight?: ElementType_2 | ReactNode
|
|
1469
|
+
pressed?: boolean
|
|
1470
|
+
selected?: boolean
|
|
1471
|
+
text?: ReactNode
|
|
1472
|
+
tone?: ElementTone
|
|
1473
|
+
}
|
|
1474
|
+
|
|
1475
|
+
/** @public */
|
|
1476
|
+
export declare type MenuItemProps<E extends MenuItemElementType = MenuItemElementType> = Omit<
|
|
1477
|
+
Props<MenuItemOwnProps, E>,
|
|
1478
|
+
'role'
|
|
1479
|
+
>
|
|
1480
|
+
|
|
1481
|
+
/** @public */
|
|
1482
|
+
export declare type MenuOwnProps = PaddingStyleProps & {
|
|
1483
|
+
'gap'?: ResponsiveProp<Space>
|
|
1484
|
+
'onClickOutside'?: (event: MouseEvent) => void
|
|
1485
|
+
'onEscape'?: () => void
|
|
1486
|
+
'onItemClick'?: () => void
|
|
1487
|
+
'onItemSelect'?: (index: number) => void
|
|
1488
|
+
'originElement'?: HTMLElement | null
|
|
1489
|
+
'registerElement'?: (el: HTMLElement) => () => void
|
|
1490
|
+
'shouldFocus'?: 'first' | 'last' | null
|
|
1491
|
+
'aria-labelledby'?: string
|
|
1492
|
+
}
|
|
1493
|
+
|
|
1494
|
+
/** @public */
|
|
1495
|
+
export declare type MenuProps<E extends MenuElementType = MenuElementType> = Props<MenuOwnProps, E>
|
|
1496
|
+
|
|
1497
|
+
/**
|
|
1498
|
+
* Placement of floating UI elements.
|
|
1499
|
+
*
|
|
1500
|
+
* @public
|
|
1501
|
+
*/
|
|
1502
|
+
export declare type Placement =
|
|
1503
|
+
| 'top'
|
|
1504
|
+
| 'top-start'
|
|
1505
|
+
| 'top-end'
|
|
1506
|
+
| 'right'
|
|
1507
|
+
| 'right-start'
|
|
1508
|
+
| 'right-end'
|
|
1509
|
+
| 'bottom'
|
|
1510
|
+
| 'bottom-start'
|
|
1511
|
+
| 'bottom-end'
|
|
1512
|
+
| 'left'
|
|
1513
|
+
| 'left-start'
|
|
1514
|
+
| 'left-end'
|
|
1515
|
+
|
|
1516
|
+
/**
|
|
1517
|
+
* The `Popover` component is used to display some content on top of another.
|
|
1518
|
+
*
|
|
1519
|
+
* @public
|
|
1520
|
+
*/
|
|
1521
|
+
export declare function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_ELEMENT>(
|
|
1522
|
+
props: PopoverProps<E>,
|
|
1523
|
+
): React.JSX.Element
|
|
1524
|
+
|
|
1525
|
+
/** @public */
|
|
1526
|
+
export declare type PopoverElementType = 'div' | ComponentType
|
|
1527
|
+
|
|
1528
|
+
/**
|
|
1529
|
+
* @beta
|
|
1530
|
+
*/
|
|
1531
|
+
export declare type PopoverMargins = [number, number, number, number]
|
|
1532
|
+
|
|
1533
|
+
/** @public */
|
|
1534
|
+
export declare type PopoverOwnProps = Omit<LayerOwnProps, 'maxWidth'> & {
|
|
1535
|
+
/** @beta */
|
|
1536
|
+
__unstable_margins?: PopoverMargins
|
|
1537
|
+
/**
|
|
1538
|
+
* Whether the popover should animate in and out.
|
|
1539
|
+
*
|
|
1540
|
+
* @beta
|
|
1541
|
+
* @defaultValue false
|
|
1542
|
+
*/
|
|
1543
|
+
animate?: boolean
|
|
1544
|
+
arrow?: boolean
|
|
1545
|
+
children?: ReactElement<{
|
|
1546
|
+
ref: ForwardedRef<HTMLElement>
|
|
1547
|
+
}>
|
|
1548
|
+
/**
|
|
1549
|
+
* When `true`, prevent overflow within the current boundary:
|
|
1550
|
+
* - by flipping on its side axis
|
|
1551
|
+
* - by resizing
|
|
1552
|
+
*
|
|
1553
|
+
* Note that:
|
|
1554
|
+
* - setting `preventOverflow` to `true` also prevents overflow on its side axis
|
|
1555
|
+
* - setting `matchReferenceWidth` to `true` also causes the popover to resize
|
|
1556
|
+
*
|
|
1557
|
+
* @defaultValue false
|
|
1558
|
+
*/
|
|
1559
|
+
constrainSize?: boolean
|
|
1560
|
+
content?: ReactNode
|
|
1561
|
+
disabled?: boolean
|
|
1562
|
+
fallbackPlacements?: Placement[]
|
|
1563
|
+
floatingBoundary?: HTMLElement | null
|
|
1564
|
+
/**
|
|
1565
|
+
* When `true`, set the maximum width to match the reference element, and also prevent overflow within
|
|
1566
|
+
* the current boundary by resizing.
|
|
1567
|
+
*
|
|
1568
|
+
* Note that setting `constrainSize` to `true` also causes the popover to resize
|
|
1569
|
+
*
|
|
1570
|
+
* @defaultValue false
|
|
1571
|
+
*/
|
|
1572
|
+
matchReferenceWidth?: boolean
|
|
1573
|
+
/**
|
|
1574
|
+
* When true, blocks all pointer interaction with elements beneath the popover until closed.
|
|
1575
|
+
*
|
|
1576
|
+
* @beta
|
|
1577
|
+
* @defaultValue false
|
|
1578
|
+
*/
|
|
1579
|
+
modal?: boolean
|
|
1580
|
+
open?: boolean
|
|
1581
|
+
placement?: Placement
|
|
1582
|
+
/**
|
|
1583
|
+
* When 'flip' (default), the placement is determined from the initial placement and the
|
|
1584
|
+
* fallback placements in order. Whichever fits in the viewport first.
|
|
1585
|
+
*
|
|
1586
|
+
* When 'autoPlacement', the initial placement and all fallback placements are evaluated
|
|
1587
|
+
* and the placement with the most viewport space available.
|
|
1588
|
+
*
|
|
1589
|
+
* Option is only relevant if either `constrainSize` or `preventOverflow` is `true`
|
|
1590
|
+
*/
|
|
1591
|
+
placementStrategy?: 'flip' | 'autoPlacement'
|
|
1592
|
+
/** Whether or not to render the popover in a portal element. */
|
|
1593
|
+
portal?: boolean | string
|
|
1594
|
+
preventOverflow?: boolean
|
|
1595
|
+
referenceBoundary?: HTMLElement | null
|
|
1596
|
+
/**
|
|
1597
|
+
* When defined, the popover will be positioned relative to this element.
|
|
1598
|
+
* The children of the popover won't be rendered.
|
|
1599
|
+
*/
|
|
1600
|
+
referenceElement?: HTMLElement | null
|
|
1601
|
+
/** @beta */
|
|
1602
|
+
updateRef?: Ref<PopoverUpdateCallback | undefined>
|
|
1603
|
+
width?: ResponsiveProp<MaxWidth>
|
|
1604
|
+
}
|
|
1605
|
+
|
|
945
1606
|
/** @public */
|
|
946
|
-
type
|
|
947
|
-
|
|
948
|
-
|
|
1607
|
+
export declare type PopoverProps<E extends PopoverElementType = PopoverElementType> = Props<
|
|
1608
|
+
PopoverOwnProps,
|
|
1609
|
+
E
|
|
1610
|
+
>
|
|
1611
|
+
|
|
1612
|
+
/** @beta */
|
|
1613
|
+
export declare type PopoverUpdateCallback = () => void
|
|
1614
|
+
|
|
949
1615
|
/** @public */
|
|
950
|
-
type
|
|
1616
|
+
export declare type PopoverWidth = Exclude<ContainerWidth, 'auto'>
|
|
1617
|
+
|
|
951
1618
|
/** @public */
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
* The `Switch` component allows the user to toggle a setting on and off.
|
|
955
|
-
*
|
|
956
|
-
* Extends all properties of an `<input type="checkbox" />` element, except type.
|
|
957
|
-
*
|
|
958
|
-
* @public
|
|
959
|
-
*/
|
|
960
|
-
declare function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEMENT>(props: SwitchProps<E>): React.JSX.Element;
|
|
1619
|
+
export declare function Portal(props: PortalProps): ReactPortal | null
|
|
1620
|
+
|
|
961
1621
|
/** @public */
|
|
962
|
-
declare
|
|
1622
|
+
export declare interface PortalContextValue {
|
|
1623
|
+
version: 0.0
|
|
1624
|
+
boundaryElement: HTMLElement | null
|
|
1625
|
+
element: HTMLElement | null
|
|
1626
|
+
elements?: Record<string, HTMLElement | null | undefined>
|
|
1627
|
+
}
|
|
1628
|
+
|
|
963
1629
|
/** @public */
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
* @beta
|
|
967
|
-
*/
|
|
968
|
-
__unstable_disableFocusRing?: boolean;
|
|
969
|
-
customValidity?: string;
|
|
970
|
-
};
|
|
971
|
-
/** @public */
|
|
972
|
-
type TextAreaElementType = "textarea" | ComponentType;
|
|
973
|
-
/** @public */
|
|
974
|
-
type TextAreaProps<E extends TextAreaElementType = TextAreaElementType> = Props<TextAreaOwnProps, E>;
|
|
975
|
-
/**
|
|
976
|
-
* A multiline text input.
|
|
977
|
-
*
|
|
978
|
-
* @public
|
|
979
|
-
*/
|
|
980
|
-
declare function TextArea<E extends TextAreaElementType = typeof DEFAULT_TEXT_AREA_ELEMENT>(props: TextAreaProps<E>): React.JSX.Element;
|
|
981
|
-
/**
|
|
982
|
-
* @beta
|
|
983
|
-
*/
|
|
984
|
-
interface TooltipDelayGroupContextValue {
|
|
985
|
-
setIsGroupActive: (nextState: React.SetStateAction<boolean>, delay?: number | undefined) => void;
|
|
986
|
-
setOpenTooltipId: (nextId: string | null, delay?: number | undefined) => void;
|
|
987
|
-
openDelay: number;
|
|
988
|
-
closeDelay: number;
|
|
989
|
-
openTooltipId: string | null;
|
|
990
|
-
}
|
|
991
|
-
/**
|
|
992
|
-
* @beta
|
|
993
|
-
*/
|
|
994
|
-
declare const TooltipDelayGroupContext: Context<TooltipDelayGroupContextValue | null>;
|
|
995
|
-
/**
|
|
996
|
-
* @public
|
|
997
|
-
* */
|
|
998
|
-
interface TooltipDelayGroupProviderProps {
|
|
999
|
-
children?: ReactNode;
|
|
1630
|
+
export declare interface PortalProps {
|
|
1631
|
+
children: ReactNode
|
|
1000
1632
|
/**
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
*
|
|
1005
|
-
* If an object `{open: number; close:number}` is passed, it can be used to set different delays for each action.
|
|
1006
|
-
*
|
|
1007
|
-
* @public
|
|
1008
|
-
*/
|
|
1009
|
-
delay: Delay;
|
|
1633
|
+
* @beta This API might change. DO NOT USE IN PRODUCTION.
|
|
1634
|
+
*/
|
|
1635
|
+
__unstable_name?: string
|
|
1010
1636
|
}
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
*/
|
|
1016
|
-
declare function TooltipDelayGroupProvider(props: TooltipDelayGroupProviderProps): React.JSX.Element;
|
|
1017
|
-
/**
|
|
1018
|
-
* @beta
|
|
1019
|
-
*/
|
|
1020
|
-
declare function useTooltipDelayGroup(): TooltipDelayGroupContextValue | null;
|
|
1637
|
+
|
|
1638
|
+
/** @public */
|
|
1639
|
+
export declare function PortalProvider(props: PortalProviderProps): React.JSX.Element
|
|
1640
|
+
|
|
1021
1641
|
/** @public */
|
|
1022
|
-
interface
|
|
1023
|
-
children: ReactNode
|
|
1024
|
-
element
|
|
1642
|
+
export declare interface PortalProviderProps {
|
|
1643
|
+
children: ReactNode
|
|
1644
|
+
element?: HTMLElement | null
|
|
1645
|
+
/**
|
|
1646
|
+
* @beta
|
|
1647
|
+
*/
|
|
1648
|
+
__unstable_elements?: Record<string, HTMLElement | null | undefined>
|
|
1649
|
+
}
|
|
1650
|
+
|
|
1651
|
+
/** @public */
|
|
1652
|
+
export declare type Props<P extends EmptyProps, E extends ElementType<P>> = Assign<
|
|
1653
|
+
E extends TagType ? JSX.IntrinsicElements[E] : ComponentProps<E>,
|
|
1654
|
+
P & {
|
|
1655
|
+
as?: E
|
|
1656
|
+
}
|
|
1657
|
+
>
|
|
1658
|
+
|
|
1659
|
+
/**
|
|
1660
|
+
* The `Radio` component allows the user to select one option from a set.
|
|
1661
|
+
*
|
|
1662
|
+
* @public
|
|
1663
|
+
*/
|
|
1664
|
+
export declare function Radio<E extends RadioElementType = typeof DEFAULT_RADIO_ELEMENT>(
|
|
1665
|
+
props: RadioProps<E>,
|
|
1666
|
+
): React.JSX.Element
|
|
1667
|
+
|
|
1668
|
+
/** @public */
|
|
1669
|
+
export declare type RadioElementType = 'input' | ComponentType
|
|
1670
|
+
|
|
1671
|
+
/** @public */
|
|
1672
|
+
export declare type RadioOwnProps = {
|
|
1673
|
+
customValidity?: string
|
|
1025
1674
|
}
|
|
1675
|
+
|
|
1676
|
+
/** @public */
|
|
1677
|
+
export declare type RadioProps<E extends RadioElementType = RadioElementType> = Props<
|
|
1678
|
+
RadioOwnProps,
|
|
1679
|
+
E
|
|
1680
|
+
>
|
|
1681
|
+
|
|
1682
|
+
/**
|
|
1683
|
+
* @internal
|
|
1684
|
+
*/
|
|
1685
|
+
export declare function _raf(fn: () => void): () => void
|
|
1686
|
+
|
|
1687
|
+
/**
|
|
1688
|
+
* @internal
|
|
1689
|
+
*/
|
|
1690
|
+
export declare function _raf2(fn: () => void): () => void
|
|
1691
|
+
|
|
1692
|
+
/**
|
|
1693
|
+
* @internal
|
|
1694
|
+
*/
|
|
1695
|
+
export declare const _ResizeObserver: typeof ResizeObserver
|
|
1696
|
+
|
|
1697
|
+
/**
|
|
1698
|
+
* @internal
|
|
1699
|
+
*/
|
|
1700
|
+
export declare interface ResponsiveWidthStyleProps {
|
|
1701
|
+
$width: (number | 'auto')[]
|
|
1702
|
+
}
|
|
1703
|
+
|
|
1704
|
+
/**
|
|
1705
|
+
* The `Root` component.
|
|
1706
|
+
*
|
|
1707
|
+
* @public
|
|
1708
|
+
*/
|
|
1709
|
+
export declare function Root<E extends RootElementType = typeof DEFAULT_ROOT_ELEMENT>(
|
|
1710
|
+
props: RootProps<E>,
|
|
1711
|
+
): React.JSX.Element
|
|
1712
|
+
|
|
1713
|
+
/** @public */
|
|
1714
|
+
export declare type RootElementType = 'html' | 'body' | 'div'
|
|
1715
|
+
|
|
1716
|
+
/** @public */
|
|
1717
|
+
export declare interface RootOwnProps extends BoxOwnProps, RootStyleProps {}
|
|
1718
|
+
|
|
1719
|
+
/** @public */
|
|
1720
|
+
export declare type RootProps<E extends RootElementType = RootElementType> = Props<RootOwnProps, E>
|
|
1721
|
+
|
|
1722
|
+
/** @public */
|
|
1723
|
+
export declare function RootProvider(props: RootProviderProps): React.JSX.Element
|
|
1724
|
+
|
|
1725
|
+
/** @public */
|
|
1726
|
+
export declare interface RootProviderProps {
|
|
1727
|
+
boundaryElement?: HTMLElement | null
|
|
1728
|
+
children?: ReactNode
|
|
1729
|
+
portalElement?: HTMLElement | null
|
|
1730
|
+
scheme?: ColorScheme
|
|
1731
|
+
tone?: CardTone
|
|
1732
|
+
}
|
|
1733
|
+
|
|
1734
|
+
/**
|
|
1735
|
+
* The `Select` component provides control of options.
|
|
1736
|
+
*
|
|
1737
|
+
* @public
|
|
1738
|
+
*/
|
|
1739
|
+
export declare function Select<E extends SelectElementType = typeof DEFAULT_SELECT_ELEMENT>(
|
|
1740
|
+
props: SelectProps<E>,
|
|
1741
|
+
): React.JSX.Element
|
|
1742
|
+
|
|
1743
|
+
/** @internal */
|
|
1744
|
+
export declare function Selectable<
|
|
1745
|
+
E extends SelectableElementType = typeof DEFAULT_SELECTABLE_ELEMENT,
|
|
1746
|
+
>(props: SelectableProps<E>): React.JSX.Element
|
|
1747
|
+
|
|
1748
|
+
/** @internal */
|
|
1749
|
+
export declare type SelectableElementType = 'button' | 'a' | ComponentType
|
|
1750
|
+
|
|
1751
|
+
/** @internal */
|
|
1752
|
+
export declare type SelectableOwnProps = BoxOwnProps &
|
|
1753
|
+
SelectableStyleProps & {
|
|
1754
|
+
disabled?: boolean
|
|
1755
|
+
href?: string
|
|
1756
|
+
selected?: boolean
|
|
1757
|
+
tone?: ElementTone
|
|
1758
|
+
type?: 'button'
|
|
1759
|
+
}
|
|
1760
|
+
|
|
1761
|
+
/** @internal */
|
|
1762
|
+
export declare type SelectableProps<E extends SelectableElementType = SelectableElementType> =
|
|
1763
|
+
Props<SelectableOwnProps, E>
|
|
1764
|
+
|
|
1026
1765
|
/** @public */
|
|
1027
|
-
declare
|
|
1766
|
+
export declare type SelectElementType = 'select' | ComponentType
|
|
1767
|
+
|
|
1028
1768
|
/** @public */
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1769
|
+
export declare type SelectOwnProps = SelectStyleProps & {
|
|
1770
|
+
customValidity?: string
|
|
1771
|
+
readOnly?: boolean
|
|
1032
1772
|
}
|
|
1033
|
-
|
|
1034
|
-
|
|
1773
|
+
|
|
1774
|
+
/** @public */
|
|
1775
|
+
export declare type SelectProps<E extends SelectElementType = SelectElementType> = Props<
|
|
1776
|
+
SelectOwnProps,
|
|
1777
|
+
E
|
|
1778
|
+
>
|
|
1779
|
+
|
|
1780
|
+
/**
|
|
1781
|
+
* This API might change. DO NOT USE IN PRODUCTION.
|
|
1782
|
+
* @beta
|
|
1783
|
+
*/
|
|
1784
|
+
export declare function Skeleton<E extends SkeletonElementType = typeof DEFAULT_SKELETON_ELEMENT>(
|
|
1785
|
+
props: SkeletonProps<E>,
|
|
1786
|
+
): React.JSX.Element
|
|
1787
|
+
|
|
1035
1788
|
/** @beta */
|
|
1036
|
-
declare
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
*
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1789
|
+
export declare type SkeletonElementType = 'div' | 'span' | ComponentType
|
|
1790
|
+
|
|
1791
|
+
/**
|
|
1792
|
+
* This API might change. DO NOT USE IN PRODUCTION.
|
|
1793
|
+
* @beta
|
|
1794
|
+
*/
|
|
1795
|
+
export declare type SkeletonOwnProps = SkeletonStyleProps & {
|
|
1796
|
+
animated?: boolean
|
|
1797
|
+
delay?: number
|
|
1798
|
+
}
|
|
1799
|
+
|
|
1044
1800
|
/** @beta */
|
|
1045
|
-
type
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
*
|
|
1053
|
-
* @
|
|
1054
|
-
*/
|
|
1055
|
-
declare function
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
*/
|
|
1060
|
-
type
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
/**
|
|
1067
|
-
* DO NOT USE IN PRODUCTION
|
|
1068
|
-
* @beta
|
|
1069
|
-
*/
|
|
1070
|
-
interface ErrorBoundaryState {
|
|
1071
|
-
error: Error | null;
|
|
1801
|
+
export declare type SkeletonProps<E extends SkeletonElementType = SkeletonElementType> = Props<
|
|
1802
|
+
SkeletonOwnProps,
|
|
1803
|
+
E
|
|
1804
|
+
>
|
|
1805
|
+
|
|
1806
|
+
/**
|
|
1807
|
+
* Indicate that something is loading for an indeterminate amount of time.
|
|
1808
|
+
*
|
|
1809
|
+
* @public
|
|
1810
|
+
*/
|
|
1811
|
+
export declare function Spinner<E extends SpinnerElementType = typeof DEFAULT_SPINNER_ELEMENT>(
|
|
1812
|
+
props: SpinnerProps<E>,
|
|
1813
|
+
): React.JSX.Element
|
|
1814
|
+
|
|
1815
|
+
/** @public */
|
|
1816
|
+
export declare type SpinnerElementType = 'div' | 'span' | ComponentType
|
|
1817
|
+
|
|
1818
|
+
/** @public */
|
|
1819
|
+
export declare type SpinnerOwnProps = {
|
|
1820
|
+
muted?: boolean
|
|
1821
|
+
size?: ResponsiveProp<FontTextSize>
|
|
1072
1822
|
}
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1823
|
+
|
|
1824
|
+
/** @public */
|
|
1825
|
+
export declare type SpinnerProps<E extends SpinnerElementType = SpinnerElementType> = Props<
|
|
1826
|
+
SpinnerOwnProps,
|
|
1827
|
+
E
|
|
1828
|
+
>
|
|
1829
|
+
|
|
1830
|
+
/** @public */
|
|
1831
|
+
export declare function SrOnly<E extends SrOnlyElementType = typeof DEFAULT_SR_ONLY_ELEMENT>(
|
|
1832
|
+
props: SrOnlyProps<E>,
|
|
1833
|
+
): React.JSX.Element
|
|
1834
|
+
|
|
1835
|
+
/** @public */
|
|
1836
|
+
export declare type SrOnlyElementType = 'span' | ComponentType
|
|
1837
|
+
|
|
1838
|
+
/** @public */
|
|
1839
|
+
export declare type SrOnlyOwnProps = {}
|
|
1840
|
+
|
|
1841
|
+
/** @public */
|
|
1842
|
+
export declare type SrOnlyProps<E extends SrOnlyElementType = SrOnlyElementType> = Props<
|
|
1843
|
+
SrOnlyOwnProps,
|
|
1844
|
+
E
|
|
1845
|
+
>
|
|
1846
|
+
|
|
1847
|
+
/**
|
|
1848
|
+
* The `Stack` component is used to place elements on top of each other.
|
|
1849
|
+
*
|
|
1850
|
+
* @public
|
|
1851
|
+
*/
|
|
1852
|
+
export declare function Stack<E extends StackElementType = typeof DEFAULT_STACK_ELEMENT>(
|
|
1853
|
+
props: StackProps<E>,
|
|
1854
|
+
): React.JSX.Element
|
|
1855
|
+
|
|
1856
|
+
/** @public */
|
|
1857
|
+
export declare type StackElementType = BoxElementType
|
|
1858
|
+
|
|
1859
|
+
/** @public */
|
|
1860
|
+
export declare type StackOwnProps = Omit<
|
|
1861
|
+
BoxOwnProps,
|
|
1862
|
+
| 'align'
|
|
1863
|
+
| 'alignItems'
|
|
1864
|
+
| 'columns'
|
|
1865
|
+
| 'gridTemplateColumns'
|
|
1866
|
+
| 'direction'
|
|
1867
|
+
| 'display'
|
|
1868
|
+
| 'flexDirection'
|
|
1869
|
+
| 'flexWrap'
|
|
1870
|
+
| 'gapX'
|
|
1871
|
+
| 'gapY'
|
|
1872
|
+
| 'justify'
|
|
1873
|
+
| 'justifyContent'
|
|
1874
|
+
| 'rows'
|
|
1875
|
+
| 'gridTemplateRows'
|
|
1876
|
+
>
|
|
1877
|
+
|
|
1878
|
+
/** @public */
|
|
1879
|
+
export declare type StackProps<E extends StackElementType = StackElementType> = Props<
|
|
1880
|
+
StackOwnProps,
|
|
1881
|
+
E
|
|
1882
|
+
>
|
|
1883
|
+
|
|
1884
|
+
/**
|
|
1885
|
+
* The `Switch` component allows the user to toggle a setting on and off.
|
|
1886
|
+
*
|
|
1887
|
+
* Extends all properties of an `<input type="checkbox" />` element, except type.
|
|
1888
|
+
*
|
|
1889
|
+
* @public
|
|
1890
|
+
*/
|
|
1891
|
+
export declare function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEMENT>(
|
|
1892
|
+
props: SwitchProps<E>,
|
|
1893
|
+
): React.JSX.Element
|
|
1894
|
+
|
|
1895
|
+
/** @public */
|
|
1896
|
+
export declare type SwitchElementType = 'input' | ComponentType
|
|
1897
|
+
|
|
1898
|
+
/** @public */
|
|
1899
|
+
export declare type SwitchOwnProps = {
|
|
1900
|
+
indeterminate?: boolean
|
|
1083
1901
|
}
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1902
|
+
|
|
1903
|
+
/** @public */
|
|
1904
|
+
export declare type SwitchProps<E extends SwitchElementType = SwitchElementType> = Props<
|
|
1905
|
+
SwitchOwnProps,
|
|
1906
|
+
E
|
|
1907
|
+
>
|
|
1908
|
+
|
|
1909
|
+
/** @public */
|
|
1910
|
+
export declare function Tab<E extends TabElementType = typeof DEFAULT_TAB_ELEMENT>(
|
|
1911
|
+
props: TabProps<E>,
|
|
1912
|
+
): React.JSX.Element
|
|
1913
|
+
|
|
1914
|
+
/** @public */
|
|
1915
|
+
export declare type TabElementType = 'button' | ComponentType
|
|
1916
|
+
|
|
1917
|
+
/** @public */
|
|
1918
|
+
export declare function TabList<E extends TabListElementType = typeof DEFAULT_TAB_LIST_ELEMENT>(
|
|
1919
|
+
props: TabListProps<E>,
|
|
1920
|
+
): React.JSX.Element
|
|
1921
|
+
|
|
1922
|
+
/** @public */
|
|
1923
|
+
export declare type TabListChild =
|
|
1924
|
+
| ReactElement<Props<TabProps, 'button'>>
|
|
1925
|
+
| null
|
|
1926
|
+
| undefined
|
|
1927
|
+
| false
|
|
1928
|
+
|
|
1929
|
+
/** @public */
|
|
1930
|
+
export declare type TabListElementType = 'div' | 'span' | ComponentType
|
|
1931
|
+
|
|
1932
|
+
/** @public */
|
|
1933
|
+
export declare type TabListOwnProps = Omit<FlexOwnProps, 'as' | 'height'> & {
|
|
1934
|
+
children: TabListChild[]
|
|
1090
1935
|
}
|
|
1936
|
+
|
|
1091
1937
|
/** @public */
|
|
1092
|
-
declare
|
|
1938
|
+
export declare type TabListProps<E extends TabListElementType = TabListElementType> = Props<
|
|
1939
|
+
TabListOwnProps,
|
|
1940
|
+
E
|
|
1941
|
+
>
|
|
1942
|
+
|
|
1093
1943
|
/** @public */
|
|
1094
|
-
declare
|
|
1095
|
-
/**
|
|
1096
|
-
|
|
1944
|
+
export declare type TabOwnProps = {
|
|
1945
|
+
/**
|
|
1946
|
+
* The `id` of the corresponding `TabPanel` component.
|
|
1947
|
+
*/
|
|
1948
|
+
'aria-controls': string
|
|
1949
|
+
'id': string
|
|
1950
|
+
'icon'?: ElementType_2 | ReactNode
|
|
1951
|
+
'focused'?: boolean
|
|
1952
|
+
'fontSize'?: ResponsiveProp<FontTextSize>
|
|
1953
|
+
'label'?: ReactNode
|
|
1954
|
+
'padding'?: ResponsiveProp<Space>
|
|
1955
|
+
'selected'?: boolean
|
|
1956
|
+
'tone'?: ElementTone
|
|
1957
|
+
}
|
|
1958
|
+
|
|
1097
1959
|
/** @public */
|
|
1098
|
-
|
|
1960
|
+
export declare function TabPanel<E extends TabPanelElementType = typeof DEFAULT_TAB_PANEL_ELEMENT>(
|
|
1961
|
+
props: TabPanelProps<E>,
|
|
1962
|
+
): React.JSX.Element
|
|
1963
|
+
|
|
1099
1964
|
/** @public */
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
* The `Root` component.
|
|
1103
|
-
*
|
|
1104
|
-
* @public
|
|
1105
|
-
*/
|
|
1106
|
-
declare function Root<E extends RootElementType = typeof DEFAULT_ROOT_ELEMENT>(props: RootProps<E>): React.JSX.Element;
|
|
1965
|
+
export declare type TabPanelElementType = 'div' | 'span' | ComponentType
|
|
1966
|
+
|
|
1107
1967
|
/** @public */
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1968
|
+
export declare type TabPanelOwnProps = BoxOwnProps & {
|
|
1969
|
+
/**
|
|
1970
|
+
* The `id` of the correlating `Tab` component.
|
|
1971
|
+
*/
|
|
1972
|
+
'aria-labelledby': string
|
|
1973
|
+
'id': string
|
|
1114
1974
|
}
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
export
|
|
1975
|
+
|
|
1976
|
+
/** @public */
|
|
1977
|
+
export declare type TabPanelProps<E extends TabPanelElementType = TabPanelElementType> = Props<
|
|
1978
|
+
TabPanelOwnProps,
|
|
1979
|
+
E
|
|
1980
|
+
>
|
|
1981
|
+
|
|
1982
|
+
/** @public */
|
|
1983
|
+
export declare type TabProps<E extends TabElementType = TabElementType> = Props<TabOwnProps, E>
|
|
1984
|
+
|
|
1985
|
+
/** @public */
|
|
1986
|
+
export declare type TagType = keyof JSX.IntrinsicElements
|
|
1987
|
+
|
|
1988
|
+
/**
|
|
1989
|
+
* The `Text` component is an agile, themed typographic element.
|
|
1990
|
+
*
|
|
1991
|
+
* @public
|
|
1992
|
+
*/
|
|
1993
|
+
declare function Text_2<E extends TextElementType = typeof DEFAULT_TEXT_ELEMENT>(
|
|
1994
|
+
props: TextProps<E>,
|
|
1995
|
+
): React.JSX.Element
|
|
1996
|
+
export {Text_2 as Text}
|
|
1997
|
+
|
|
1998
|
+
/**
|
|
1999
|
+
* A multiline text input.
|
|
2000
|
+
*
|
|
2001
|
+
* @public
|
|
2002
|
+
*/
|
|
2003
|
+
export declare function TextArea<E extends TextAreaElementType = typeof DEFAULT_TEXT_AREA_ELEMENT>(
|
|
2004
|
+
props: TextAreaProps<E>,
|
|
2005
|
+
): React.JSX.Element
|
|
2006
|
+
|
|
2007
|
+
/** @public */
|
|
2008
|
+
export declare type TextAreaElementType = 'textarea' | ComponentType
|
|
2009
|
+
|
|
2010
|
+
/** @public */
|
|
2011
|
+
export declare type TextAreaOwnProps = TextAreaStyleProps & {
|
|
2012
|
+
/**
|
|
2013
|
+
* @beta
|
|
2014
|
+
*/
|
|
2015
|
+
__unstable_disableFocusRing?: boolean
|
|
2016
|
+
customValidity?: string
|
|
2017
|
+
}
|
|
2018
|
+
|
|
2019
|
+
/** @public */
|
|
2020
|
+
export declare type TextAreaProps<E extends TextAreaElementType = TextAreaElementType> = Props<
|
|
2021
|
+
TextAreaOwnProps,
|
|
2022
|
+
E
|
|
2023
|
+
>
|
|
2024
|
+
|
|
2025
|
+
/** @public */
|
|
2026
|
+
export declare type TextElementType =
|
|
2027
|
+
| 'div'
|
|
2028
|
+
| 'h1'
|
|
2029
|
+
| 'h2'
|
|
2030
|
+
| 'h3'
|
|
2031
|
+
| 'h4'
|
|
2032
|
+
| 'h5'
|
|
2033
|
+
| 'h6'
|
|
2034
|
+
| 'label'
|
|
2035
|
+
| 'li'
|
|
2036
|
+
| 'p'
|
|
2037
|
+
| 'span'
|
|
2038
|
+
| ComponentType
|
|
2039
|
+
|
|
2040
|
+
/**
|
|
2041
|
+
* Single line text input.
|
|
2042
|
+
*
|
|
2043
|
+
* @public
|
|
2044
|
+
*/
|
|
2045
|
+
export declare function TextInput<
|
|
2046
|
+
E extends TextInputElementType = typeof DEFAULT_TEXT_INPUT_ELEMENT,
|
|
2047
|
+
>(props: TextInputProps<E>): React.JSX.Element
|
|
2048
|
+
|
|
2049
|
+
/** @public */
|
|
2050
|
+
export declare type TextInputClearButtonProps = Omit<
|
|
2051
|
+
ButtonProps<'button'>,
|
|
2052
|
+
'as' | 'onClick' | 'onMouseDown'
|
|
2053
|
+
>
|
|
2054
|
+
|
|
2055
|
+
/** @public */
|
|
2056
|
+
export declare type TextInputElementType = 'input' | ComponentType
|
|
2057
|
+
|
|
2058
|
+
/** @public */
|
|
2059
|
+
export declare type TextInputOwnProps = InputStyleProps & {
|
|
2060
|
+
/**
|
|
2061
|
+
* @beta
|
|
2062
|
+
*/
|
|
2063
|
+
__unstable_disableFocusRing?: boolean
|
|
2064
|
+
/**
|
|
2065
|
+
* @beta
|
|
2066
|
+
*/
|
|
2067
|
+
clearButton?: boolean | TextInputClearButtonProps
|
|
2068
|
+
customValidity?: string
|
|
2069
|
+
icon?: ElementType_2 | ReactNode
|
|
2070
|
+
iconRight?: ElementType_2 | ReactNode
|
|
2071
|
+
/**
|
|
2072
|
+
* @beta
|
|
2073
|
+
*/
|
|
2074
|
+
onClear?: () => void
|
|
2075
|
+
prefix?: ReactNode
|
|
2076
|
+
suffix?: ReactNode
|
|
2077
|
+
weight?: FontWeight
|
|
2078
|
+
}
|
|
2079
|
+
|
|
2080
|
+
/** @public */
|
|
2081
|
+
export declare type TextInputProps<E extends TextInputElementType = TextInputElementType> = Props<
|
|
2082
|
+
TextInputOwnProps,
|
|
2083
|
+
E
|
|
2084
|
+
>
|
|
2085
|
+
|
|
2086
|
+
/** @public */
|
|
2087
|
+
export declare type TextOwnProps = TextStyleProps & TextOverflowStyleProps
|
|
2088
|
+
|
|
2089
|
+
/** @public */
|
|
2090
|
+
export declare type TextProps<E extends TextElementType = TextElementType> = Props<TextOwnProps, E>
|
|
2091
|
+
|
|
2092
|
+
/**
|
|
2093
|
+
* This API might change. DO NOT USE IN PRODUCTION.
|
|
2094
|
+
* @beta
|
|
2095
|
+
*/
|
|
2096
|
+
export declare function TextSkeleton<
|
|
2097
|
+
E extends TextSkeletonElementType = typeof DEFAULT_TEXT_SKELETON_ELEMENT,
|
|
2098
|
+
>(props: TextSkeletonProps<E>): React.JSX.Element
|
|
2099
|
+
|
|
2100
|
+
/** @beta */
|
|
2101
|
+
export declare type TextSkeletonElementType = SkeletonElementType
|
|
2102
|
+
|
|
2103
|
+
/** @beta */
|
|
2104
|
+
export declare type TextSkeletonOwnProps = SkeletonOwnProps & {
|
|
2105
|
+
size?: ResponsiveProp<FontTextSize>
|
|
2106
|
+
}
|
|
2107
|
+
|
|
2108
|
+
/**
|
|
2109
|
+
* This API might change. DO NOT USE IN PRODUCTION.
|
|
2110
|
+
* @beta
|
|
2111
|
+
*/
|
|
2112
|
+
export declare type TextSkeletonProps<E extends TextSkeletonElementType = TextSkeletonElementType> =
|
|
2113
|
+
Props<TextSkeletonOwnProps, E>
|
|
2114
|
+
|
|
2115
|
+
/**
|
|
2116
|
+
* The `Toast` component gives feedback to users when an action has taken place.
|
|
2117
|
+
*
|
|
2118
|
+
* Toasts can be closed with a close button, or auto-dismiss when the duration expires.
|
|
2119
|
+
*
|
|
2120
|
+
* @internal
|
|
2121
|
+
*/
|
|
2122
|
+
export declare function Toast<E extends ToastElementType = typeof DEFAULT_TOAST_ELEMENT>(
|
|
2123
|
+
props: ToastProps<E>,
|
|
2124
|
+
): React.JSX.Element
|
|
2125
|
+
|
|
2126
|
+
/** @public */
|
|
2127
|
+
export declare interface ToastContextValue {
|
|
2128
|
+
version: 0.0
|
|
2129
|
+
/**
|
|
2130
|
+
* Creates or updates a toast notification.
|
|
2131
|
+
* If a toast with the same ID already exists, it will be updated.
|
|
2132
|
+
* If an ID is not provided, a random one will be generated.
|
|
2133
|
+
* The returned ID can be used to programatically update a toast.
|
|
2134
|
+
*/
|
|
2135
|
+
push: (params: ToastParams) => string
|
|
2136
|
+
}
|
|
2137
|
+
|
|
2138
|
+
/** @internal */
|
|
2139
|
+
export declare type ToastElementType = 'li' | ComponentType
|
|
2140
|
+
|
|
2141
|
+
/** @internal */
|
|
2142
|
+
declare type ToastLayerElementType = 'ul' | ComponentType
|
|
2143
|
+
|
|
2144
|
+
/** @internal */
|
|
2145
|
+
declare type ToastLayerOwnProps = GapStyleProps & PaddingStyleProps
|
|
2146
|
+
|
|
2147
|
+
/** @internal */
|
|
2148
|
+
declare type ToastLayerProps<E extends ToastLayerElementType = ToastLayerElementType> = Props<
|
|
2149
|
+
ToastLayerOwnProps,
|
|
2150
|
+
E
|
|
2151
|
+
>
|
|
2152
|
+
|
|
2153
|
+
/** @internal */
|
|
2154
|
+
export declare type ToastOwnProps = RadiusStyleProps & {
|
|
2155
|
+
closable?: boolean
|
|
2156
|
+
description?: ReactNode
|
|
2157
|
+
onClose?: () => void
|
|
2158
|
+
title?: ReactNode
|
|
2159
|
+
status?: 'error' | 'warning' | 'success' | 'info'
|
|
2160
|
+
duration?: number
|
|
2161
|
+
}
|
|
2162
|
+
|
|
2163
|
+
/** @public */
|
|
2164
|
+
export declare interface ToastParams {
|
|
2165
|
+
closable?: boolean
|
|
2166
|
+
description?: ReactNode
|
|
2167
|
+
duration?: number
|
|
2168
|
+
id?: string
|
|
2169
|
+
onClose?: () => void
|
|
2170
|
+
title?: ReactNode
|
|
2171
|
+
status?: 'error' | 'warning' | 'success' | 'info'
|
|
2172
|
+
}
|
|
2173
|
+
|
|
2174
|
+
/** @internal */
|
|
2175
|
+
export declare type ToastProps<E extends ToastElementType = ToastElementType> = Props<
|
|
2176
|
+
ToastOwnProps,
|
|
2177
|
+
E
|
|
2178
|
+
>
|
|
2179
|
+
|
|
2180
|
+
/** @public */
|
|
2181
|
+
export declare function ToastProvider(props: ToastProviderProps): React.JSX.Element
|
|
2182
|
+
|
|
2183
|
+
/** @public */
|
|
2184
|
+
export declare interface ToastProviderProps extends Omit<ToastLayerProps, 'children'> {
|
|
2185
|
+
children?: React.ReactNode
|
|
2186
|
+
zOffset?: ResponsiveProp<number>
|
|
2187
|
+
}
|
|
2188
|
+
|
|
2189
|
+
/**
|
|
2190
|
+
* Tooltips display information when hovering, focusing or tapping.
|
|
2191
|
+
*
|
|
2192
|
+
* @public
|
|
2193
|
+
*/
|
|
2194
|
+
export declare function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_ELEMENT>(
|
|
2195
|
+
props: TooltipProps<E>,
|
|
2196
|
+
): React.JSX.Element
|
|
2197
|
+
|
|
2198
|
+
/**
|
|
2199
|
+
* @beta
|
|
2200
|
+
*/
|
|
2201
|
+
export declare const TooltipDelayGroupContext: Context<TooltipDelayGroupContextValue | null>
|
|
2202
|
+
|
|
2203
|
+
/**
|
|
2204
|
+
* @beta
|
|
2205
|
+
*/
|
|
2206
|
+
export declare interface TooltipDelayGroupContextValue {
|
|
2207
|
+
setIsGroupActive: (nextState: React.SetStateAction<boolean>, delay?: number | undefined) => void
|
|
2208
|
+
setOpenTooltipId: (nextId: string | null, delay?: number | undefined) => void
|
|
2209
|
+
openDelay: number
|
|
2210
|
+
closeDelay: number
|
|
2211
|
+
openTooltipId: string | null
|
|
2212
|
+
}
|
|
2213
|
+
|
|
2214
|
+
/**
|
|
2215
|
+
* @public
|
|
2216
|
+
* Provides context for a group of tooltip elements that should share a delay
|
|
2217
|
+
* which temporarily becomes 1 ms after the first floating element of the group opens.
|
|
2218
|
+
*/
|
|
2219
|
+
export declare function TooltipDelayGroupProvider(
|
|
2220
|
+
props: TooltipDelayGroupProviderProps,
|
|
2221
|
+
): React.JSX.Element
|
|
2222
|
+
|
|
2223
|
+
/**
|
|
2224
|
+
* @public
|
|
2225
|
+
* */
|
|
2226
|
+
export declare interface TooltipDelayGroupProviderProps {
|
|
2227
|
+
children?: ReactNode
|
|
2228
|
+
/**
|
|
2229
|
+
* Handles the delays to open or close a tooltip inside a group
|
|
2230
|
+
*
|
|
2231
|
+
* If only a `number` is passed, it will be used for both opening and closing.
|
|
2232
|
+
*
|
|
2233
|
+
* If an object `{open: number; close:number}` is passed, it can be used to set different delays for each action.
|
|
2234
|
+
*
|
|
2235
|
+
* @public
|
|
2236
|
+
*/
|
|
2237
|
+
delay: Delay
|
|
2238
|
+
}
|
|
2239
|
+
|
|
2240
|
+
/** @public */
|
|
2241
|
+
export declare type TooltipElementType = 'div' | 'span' | ComponentType
|
|
2242
|
+
|
|
2243
|
+
/** @public */
|
|
2244
|
+
export declare type TooltipOwnProps = LayerOwnProps &
|
|
2245
|
+
RadiusStyleProps &
|
|
2246
|
+
ShadowStyleProps & {
|
|
2247
|
+
/**
|
|
2248
|
+
* Whether the tooltip should animate in and out.
|
|
2249
|
+
*
|
|
2250
|
+
* @beta
|
|
2251
|
+
* @defaultValue false
|
|
2252
|
+
*/
|
|
2253
|
+
animate?: boolean
|
|
2254
|
+
arrow?: boolean
|
|
2255
|
+
boundaryElement?: HTMLElement | null
|
|
2256
|
+
children?: ReactElement<HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>>
|
|
2257
|
+
content?: ReactNode
|
|
2258
|
+
/**
|
|
2259
|
+
* Adds a delay to open or close the tooltip.
|
|
2260
|
+
*
|
|
2261
|
+
* If only a `number` is passed, it will be used for both opening and closing.
|
|
2262
|
+
*
|
|
2263
|
+
* If an object `{open: number; close:number}` is passed, it can be used to set different delays for each action.
|
|
2264
|
+
*
|
|
2265
|
+
* @public
|
|
2266
|
+
* @defaultValue 0
|
|
2267
|
+
*/
|
|
2268
|
+
delay?: Delay
|
|
2269
|
+
disabled?: boolean
|
|
2270
|
+
fallbackPlacements?: Placement[]
|
|
2271
|
+
placement?: Placement
|
|
2272
|
+
/** Whether or not to render the tooltip in a portal element. */
|
|
2273
|
+
portal?: boolean | string
|
|
2274
|
+
scheme?: ColorScheme
|
|
2275
|
+
tone?: CardTone
|
|
2276
|
+
}
|
|
2277
|
+
|
|
2278
|
+
/** @public */
|
|
2279
|
+
export declare type TooltipProps<E extends TooltipElementType = TooltipElementType> = Props<
|
|
2280
|
+
TooltipOwnProps,
|
|
2281
|
+
E
|
|
2282
|
+
>
|
|
2283
|
+
|
|
2284
|
+
/**
|
|
2285
|
+
* This API might change. DO NOT USE IN PRODUCTION.
|
|
2286
|
+
* @beta
|
|
2287
|
+
*/
|
|
2288
|
+
export declare function Tree<E extends TreeElementType = typeof DEFAULT_TREE_ELEMENT>(
|
|
2289
|
+
props: TreeProps<E>,
|
|
2290
|
+
): React.JSX.Element
|
|
2291
|
+
|
|
2292
|
+
/**
|
|
2293
|
+
* @beta
|
|
2294
|
+
*/
|
|
2295
|
+
export declare interface TreeContextValue {
|
|
2296
|
+
version: 0.0
|
|
2297
|
+
focusedElement: HTMLElement | null
|
|
2298
|
+
gap: ResponsiveProp<Space>
|
|
2299
|
+
level: number
|
|
2300
|
+
path: string[]
|
|
2301
|
+
registerItem: (element: HTMLElement, path: string, expanded: boolean, selected: boolean) => void
|
|
2302
|
+
setExpanded: (path: string, expanded: boolean) => void
|
|
2303
|
+
setFocusedElement: (focusedElement: HTMLElement | null) => void
|
|
2304
|
+
state: TreeState
|
|
2305
|
+
}
|
|
2306
|
+
|
|
2307
|
+
/** @beta */
|
|
2308
|
+
export declare type TreeElementType = 'div' | ComponentType
|
|
2309
|
+
|
|
2310
|
+
/**
|
|
2311
|
+
* This API might change. DO NOT USE IN PRODUCTION.
|
|
2312
|
+
* @beta
|
|
2313
|
+
*/
|
|
2314
|
+
export declare function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITEM_ELEMENT>(
|
|
2315
|
+
props: TreeItemProps<E>,
|
|
2316
|
+
): React.JSX.Element
|
|
2317
|
+
|
|
2318
|
+
/** @beta */
|
|
2319
|
+
export declare type TreeItemElementType = 'a' | 'li' | ComponentType
|
|
2320
|
+
|
|
2321
|
+
/** @beta */
|
|
2322
|
+
export declare type TreeItemOwnProps = CardOwnProps & {
|
|
2323
|
+
expanded?: boolean
|
|
2324
|
+
fontSize?: ResponsiveProp<FontTextSize>
|
|
2325
|
+
icon?: ElementType_2
|
|
2326
|
+
/**
|
|
2327
|
+
* Allows passing a custom element type to the link component
|
|
2328
|
+
* @internal
|
|
2329
|
+
*/
|
|
2330
|
+
linkAs?: SelectableElementType
|
|
2331
|
+
onClick?: MouseEventHandler<HTMLAnchorElement | HTMLLIElement>
|
|
2332
|
+
padding?: ResponsiveProp<Space>
|
|
2333
|
+
space?: ResponsiveProp<Space>
|
|
2334
|
+
text?: ReactNode
|
|
2335
|
+
weight?: FontWeight
|
|
2336
|
+
}
|
|
2337
|
+
|
|
2338
|
+
/** @beta */
|
|
2339
|
+
export declare type TreeItemProps<E extends TreeItemElementType = TreeItemElementType> = Props<
|
|
2340
|
+
TreeItemOwnProps,
|
|
2341
|
+
E
|
|
2342
|
+
>
|
|
2343
|
+
|
|
2344
|
+
/**
|
|
2345
|
+
* This API might change. DO NOT USE IN PRODUCTION.
|
|
2346
|
+
* @beta
|
|
2347
|
+
*/
|
|
2348
|
+
export declare type TreeOwnProps = {
|
|
2349
|
+
gap?: ResponsiveProp<Space>
|
|
2350
|
+
}
|
|
2351
|
+
|
|
2352
|
+
/** @beta */
|
|
2353
|
+
export declare type TreeProps<E extends TreeElementType = TreeElementType> = Props<TreeOwnProps, E>
|
|
2354
|
+
|
|
2355
|
+
/**
|
|
2356
|
+
* @beta
|
|
2357
|
+
*/
|
|
2358
|
+
export declare interface TreeState {
|
|
2359
|
+
[key: string]:
|
|
2360
|
+
| {
|
|
2361
|
+
element: HTMLElement
|
|
2362
|
+
expanded: boolean
|
|
2363
|
+
}
|
|
2364
|
+
| undefined
|
|
2365
|
+
}
|
|
2366
|
+
|
|
2367
|
+
/** @public */
|
|
2368
|
+
export declare function useBoundaryElement(): BoundaryElementContextValue
|
|
2369
|
+
|
|
2370
|
+
/** @public */
|
|
2371
|
+
export declare function useCard(): CardContextValue
|
|
2372
|
+
|
|
2373
|
+
/** @public */
|
|
2374
|
+
export declare function useClickOutsideEvent(
|
|
2375
|
+
listener: ClickOutsideEventListener | false | undefined,
|
|
2376
|
+
elementsArg?: () => ClickOutsideEventElements,
|
|
2377
|
+
boundaryElement?: () => HTMLElement | null,
|
|
2378
|
+
): void
|
|
2379
|
+
|
|
2380
|
+
/**
|
|
2381
|
+
* @beta
|
|
2382
|
+
*/
|
|
2383
|
+
export declare function useCustomValidity(
|
|
2384
|
+
ref: {
|
|
2385
|
+
current: null | {
|
|
2386
|
+
setCustomValidity: (validity: string) => void
|
|
2387
|
+
}
|
|
2388
|
+
},
|
|
2389
|
+
customValidity: string | undefined,
|
|
2390
|
+
): void
|
|
2391
|
+
|
|
2392
|
+
/**
|
|
2393
|
+
* This API might change. DO NOT USE IN PRODUCTION.
|
|
2394
|
+
* @beta
|
|
2395
|
+
*/
|
|
2396
|
+
export declare function useDialog(): DialogContextValue
|
|
2397
|
+
|
|
2398
|
+
/**
|
|
2399
|
+
* Subscribe to the size of a DOM element.
|
|
2400
|
+
* @beta
|
|
2401
|
+
*/
|
|
2402
|
+
export declare function useElementSize(element: HTMLElement | null): ElementSize | null
|
|
2403
|
+
|
|
2404
|
+
/**
|
|
2405
|
+
* @beta
|
|
2406
|
+
*/
|
|
2407
|
+
export declare function useGlobalKeyDown(onKeyDown: (event: KeyboardEvent) => void): void
|
|
2408
|
+
|
|
2409
|
+
/** @public */
|
|
2410
|
+
export declare function useLayer(): LayerContextValue
|
|
2411
|
+
|
|
2412
|
+
/**
|
|
2413
|
+
* Efficiently subscribes to `window.matchMedia` queries
|
|
2414
|
+
*
|
|
2415
|
+
* @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Required if the hook is called during SSR (https://dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
|
|
2416
|
+
*
|
|
2417
|
+
* @public
|
|
2418
|
+
*/
|
|
2419
|
+
export declare function useMatchMedia(
|
|
2420
|
+
mediaQueryString: `(${string})`,
|
|
2421
|
+
getServerSnapshot?: () => boolean,
|
|
2422
|
+
): boolean
|
|
2423
|
+
|
|
2424
|
+
/**
|
|
2425
|
+
* This API might change. DO NOT USE IN PRODUCTION.
|
|
2426
|
+
* @beta
|
|
2427
|
+
*/
|
|
2428
|
+
export declare function useMediaIndex(): Breakpoint
|
|
2429
|
+
|
|
2430
|
+
/** @public */
|
|
2431
|
+
export declare function usePortal(): PortalContextValue
|
|
2432
|
+
|
|
2433
|
+
/**
|
|
2434
|
+
* Returns true if a dark color scheme is preferred, false if a light color scheme is preferred or the preference is not known.
|
|
2435
|
+
*
|
|
2436
|
+
* @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-color-scheme: light)` since it's the most common scheme (https://dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
|
|
2437
|
+
*
|
|
2438
|
+
* If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
|
|
2439
|
+
* Chrome supports reading the `prefers-color-scheme` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Color-Scheme
|
|
2440
|
+
* @example https://gist.github.com/stipsan/13c0cccf8dfc34f4b44bb1b984baf7df
|
|
2441
|
+
*
|
|
2442
|
+
* @public
|
|
2443
|
+
*/
|
|
2444
|
+
export declare function usePrefersDark(getServerSnapshot?: () => boolean): boolean
|
|
2445
|
+
|
|
2446
|
+
/**
|
|
2447
|
+
* Returns true if motion should be reduced
|
|
2448
|
+
*
|
|
2449
|
+
* @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-reduced-motion: no-preference)` since it's the most common scheme (https://dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
|
|
2450
|
+
*
|
|
2451
|
+
* If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
|
|
2452
|
+
* Chrome supports reading the `prefers-reduced-motion` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Motion
|
|
2453
|
+
* @example https://gist.github.com/stipsan/0c0f839a27842249cada893e9fb7767b
|
|
2454
|
+
*
|
|
2455
|
+
* @public
|
|
2456
|
+
*/
|
|
2457
|
+
export declare function usePrefersReducedMotion(getServerSnapshot?: () => boolean): boolean
|
|
2458
|
+
|
|
2459
|
+
/**
|
|
2460
|
+
* This API might change. DO NOT USE IN PRODUCTION.
|
|
2461
|
+
* @beta
|
|
2462
|
+
*/
|
|
2463
|
+
export declare function useResponsiveProp<T>(
|
|
2464
|
+
val: ResponsiveProp<T> | undefined,
|
|
2465
|
+
defaultVal?: Partial<Record<Breakpoint, T>>,
|
|
2466
|
+
): Partial<Record<Breakpoint, T>>
|
|
2467
|
+
|
|
2468
|
+
/** @public */
|
|
2469
|
+
export declare function useToast(): ToastContextValue
|
|
2470
|
+
|
|
2471
|
+
/**
|
|
2472
|
+
* @beta
|
|
2473
|
+
*/
|
|
2474
|
+
export declare function useTooltipDelayGroup(): TooltipDelayGroupContextValue | null
|
|
2475
|
+
|
|
2476
|
+
/**
|
|
2477
|
+
* @beta
|
|
2478
|
+
*/
|
|
2479
|
+
export declare function useTree(): TreeContextValue
|
|
2480
|
+
|
|
2481
|
+
/** @beta */
|
|
2482
|
+
export declare function VirtualList<
|
|
2483
|
+
E extends VirtualListElementType = typeof DEFAULT_VIRTUAL_LIST_ELEMENT,
|
|
2484
|
+
>(props: VirtualListProps<E>): React.JSX.Element
|
|
2485
|
+
|
|
2486
|
+
/** @beta */
|
|
2487
|
+
export declare interface VirtualListChangeOpts {
|
|
2488
|
+
fromIndex: number
|
|
2489
|
+
gap: number
|
|
2490
|
+
itemHeight: number
|
|
2491
|
+
scrollHeight: number
|
|
2492
|
+
scrollTop: number
|
|
2493
|
+
toIndex: number
|
|
2494
|
+
}
|
|
2495
|
+
|
|
2496
|
+
/** @beta */
|
|
2497
|
+
export declare type VirtualListElementType = 'div' | ComponentType
|
|
2498
|
+
|
|
2499
|
+
/** @beta */
|
|
2500
|
+
export declare type VirtualListOwnProps<Item = any> = {
|
|
2501
|
+
gap?: Space
|
|
2502
|
+
getItemKey?: (item: Item, itemIndex: number) => string
|
|
2503
|
+
items?: Item[]
|
|
2504
|
+
onChange?: (opts: VirtualListChangeOpts) => void
|
|
2505
|
+
renderItem?: (item: Item) => ReactNode
|
|
2506
|
+
}
|
|
2507
|
+
|
|
2508
|
+
/** @beta */
|
|
2509
|
+
export declare type VirtualListProps<E extends VirtualListElementType = VirtualListElementType> =
|
|
2510
|
+
Props<VirtualListOwnProps, E>
|
|
2511
|
+
|
|
2512
|
+
export {}
|