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