@sanity/ui 3.0.0-static.34 → 3.0.0-static.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/_visual-editing.d.cts +853 -2
- package/dist/_visual-editing.d.ts +853 -2
- package/dist/css/index.d.cts +1128 -787
- package/dist/css/index.d.ts +1128 -787
- package/dist/index.d.cts +2390 -995
- package/dist/index.d.ts +2390 -995
- package/dist/theme.d.cts +446 -314
- package/dist/theme.d.ts +446 -314
- package/package.json +1 -1
- package/dist/portalProvider-DgNIVviV.d.ts +0 -575
|
@@ -1,2 +1,853 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
1
|
+
import type {AlignItems} from '@sanity/ui/css'
|
|
2
|
+
import {BoxStyleProps} from '@sanity/ui/css'
|
|
3
|
+
import type {ButtonStyleProps} from '@sanity/ui/css'
|
|
4
|
+
import {CardStyleProps} from '@sanity/ui/css'
|
|
5
|
+
import type {CardTone} from '@sanity/ui/theme'
|
|
6
|
+
import type {ColorScheme} from '@sanity/ui/theme'
|
|
7
|
+
import type {ComponentClass} from 'react'
|
|
8
|
+
import type {ComponentProps} from 'react'
|
|
9
|
+
import type {DisplayStyleProps} from '@sanity/ui/css'
|
|
10
|
+
import type {ElementTone} from '@sanity/ui/theme'
|
|
11
|
+
import {ElementType as ElementType_2} from 'react'
|
|
12
|
+
import type {ExoticComponent} from 'react'
|
|
13
|
+
import type {FlexDirection} from '@sanity/ui/css'
|
|
14
|
+
import type {FlexWrap} from '@sanity/ui/css'
|
|
15
|
+
import type {FontTextSize} from '@sanity/ui/theme'
|
|
16
|
+
import type {FontWeight} from '@sanity/ui/theme'
|
|
17
|
+
import {ForwardedRef} from 'react'
|
|
18
|
+
import type {FunctionComponent} from 'react'
|
|
19
|
+
import type {GapStyleProps} from '@sanity/ui/css'
|
|
20
|
+
import {HTMLAttributes} from 'react'
|
|
21
|
+
import {InputStyleProps} from '@sanity/ui/css'
|
|
22
|
+
import type {JSX} from 'react'
|
|
23
|
+
import type {JustifyContent} from '@sanity/ui/css'
|
|
24
|
+
import {MaxWidth} from '@sanity/ui/css'
|
|
25
|
+
import {PaddingStyleProps} from '@sanity/ui/css'
|
|
26
|
+
import {RadiusStyleProps} from '@sanity/ui/css'
|
|
27
|
+
import {ReactElement} from 'react'
|
|
28
|
+
import {ReactNode} from 'react'
|
|
29
|
+
import type {ReactPortal} from 'react'
|
|
30
|
+
import {Ref} from 'react'
|
|
31
|
+
import {RefAttributes} from 'react'
|
|
32
|
+
import {ResponsiveProp} from '@sanity/ui/css'
|
|
33
|
+
import {ShadowStyleProps} from '@sanity/ui/css'
|
|
34
|
+
import type {Space} from '@sanity/ui/theme'
|
|
35
|
+
import {TextOverflowStyleProps} from '@sanity/ui/css'
|
|
36
|
+
import {TextStyleProps} from '@sanity/ui/css'
|
|
37
|
+
import type {Width} from '@sanity/ui/css'
|
|
38
|
+
|
|
39
|
+
/**
|
|
40
|
+
* Assign properties from `U` to `T`, excluding properties that already exist in `T`.
|
|
41
|
+
*
|
|
42
|
+
* @public
|
|
43
|
+
*/
|
|
44
|
+
declare type Assign<T extends {}, U extends {}> = Omit<T, keyof U> & U
|
|
45
|
+
|
|
46
|
+
/**
|
|
47
|
+
* The `Box` component is a basic layout wrapper component which provides utility properties
|
|
48
|
+
* for flex, margins and padding.
|
|
49
|
+
*
|
|
50
|
+
* @public
|
|
51
|
+
*/
|
|
52
|
+
export declare function Box<E extends BoxElementType = typeof DEFAULT_BOX_ELEMENT>(
|
|
53
|
+
props: BoxProps<E>,
|
|
54
|
+
): React.JSX.Element
|
|
55
|
+
|
|
56
|
+
/** @public */
|
|
57
|
+
declare type BoxElementType =
|
|
58
|
+
| 'a'
|
|
59
|
+
| 'article'
|
|
60
|
+
| 'aside'
|
|
61
|
+
| 'blockquote'
|
|
62
|
+
| 'body'
|
|
63
|
+
| 'button'
|
|
64
|
+
| 'details'
|
|
65
|
+
| 'div'
|
|
66
|
+
| 'header'
|
|
67
|
+
| 'fieldset'
|
|
68
|
+
| 'figure'
|
|
69
|
+
| 'figcaption'
|
|
70
|
+
| 'footer'
|
|
71
|
+
| 'form'
|
|
72
|
+
| 'html'
|
|
73
|
+
| 'iframe'
|
|
74
|
+
| 'kbd'
|
|
75
|
+
| 'label'
|
|
76
|
+
| 'legend'
|
|
77
|
+
| 'li'
|
|
78
|
+
| 'main'
|
|
79
|
+
| 'nav'
|
|
80
|
+
| 'ol'
|
|
81
|
+
| 'pre'
|
|
82
|
+
| 'section'
|
|
83
|
+
| 'span'
|
|
84
|
+
| 'summary'
|
|
85
|
+
| 'ul'
|
|
86
|
+
| ComponentType
|
|
87
|
+
|
|
88
|
+
/** @public */
|
|
89
|
+
declare type BoxOwnProps = BoxStyleProps
|
|
90
|
+
|
|
91
|
+
/** @public */
|
|
92
|
+
export declare type BoxProps<E extends BoxElementType = BoxElementType> = Props<BoxOwnProps, E>
|
|
93
|
+
|
|
94
|
+
/** @public */
|
|
95
|
+
export declare function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEMENT>(
|
|
96
|
+
props: ButtonProps<E>,
|
|
97
|
+
): React.JSX.Element
|
|
98
|
+
|
|
99
|
+
/** @public */
|
|
100
|
+
declare type ButtonElementType = 'a' | 'button' | 'label' | ComponentType
|
|
101
|
+
|
|
102
|
+
/** @public */
|
|
103
|
+
declare type ButtonOwnProps = ButtonStyleProps &
|
|
104
|
+
DisplayStyleProps &
|
|
105
|
+
GapStyleProps &
|
|
106
|
+
PaddingStyleProps & {
|
|
107
|
+
'align'?: BoxStyleProps['alignItems']
|
|
108
|
+
'data-ui'?: string
|
|
109
|
+
'disabled'?: boolean
|
|
110
|
+
'fontSize'?: ResponsiveProp<FontTextSize>
|
|
111
|
+
'icon'?: ElementType_2 | ReactNode
|
|
112
|
+
'iconRight'?: ElementType_2 | ReactNode
|
|
113
|
+
'justify'?: BoxStyleProps['justifyContent']
|
|
114
|
+
/** @beta Do not use in production, as this might change.*/
|
|
115
|
+
'loading'?: boolean
|
|
116
|
+
'selected'?: boolean
|
|
117
|
+
'textAlign'?: ButtonTextAlign
|
|
118
|
+
'muted'?: boolean
|
|
119
|
+
'target'?: string
|
|
120
|
+
'text'?: ReactNode
|
|
121
|
+
'textOverflow'?: TextOwnProps['textOverflow']
|
|
122
|
+
'textWeight'?: TextOwnProps['weight']
|
|
123
|
+
'width'?: ResponsiveProp<Width>
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
/** @public */
|
|
127
|
+
export declare type ButtonProps<E extends ButtonElementType = ButtonElementType> = Props<
|
|
128
|
+
ButtonOwnProps,
|
|
129
|
+
E
|
|
130
|
+
>
|
|
131
|
+
|
|
132
|
+
/** @public */
|
|
133
|
+
declare type ButtonTextAlign = 'left' | 'right' | 'center'
|
|
134
|
+
|
|
135
|
+
/**
|
|
136
|
+
* The `Card` component acts much like a `Box`, but with a background and foreground color.
|
|
137
|
+
* Components within a `Card` inherit its colors.
|
|
138
|
+
*
|
|
139
|
+
* @public
|
|
140
|
+
*/
|
|
141
|
+
export declare function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(
|
|
142
|
+
props: CardProps<E>,
|
|
143
|
+
): React.JSX.Element
|
|
144
|
+
|
|
145
|
+
/** @public */
|
|
146
|
+
declare type CardElementType = BoxElementType
|
|
147
|
+
|
|
148
|
+
/** @public */
|
|
149
|
+
declare interface CardOwnProps extends BoxOwnProps, CardStyleProps {
|
|
150
|
+
/**
|
|
151
|
+
* Do not use in production.
|
|
152
|
+
* @beta
|
|
153
|
+
*/
|
|
154
|
+
__unstable_checkered?: boolean
|
|
155
|
+
/**
|
|
156
|
+
* Do not use in production.
|
|
157
|
+
* @beta
|
|
158
|
+
*/
|
|
159
|
+
__unstable_focusRing?: boolean
|
|
160
|
+
disabled?: boolean
|
|
161
|
+
pressed?: boolean
|
|
162
|
+
selected?: boolean
|
|
163
|
+
target?: string
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
/** @public */
|
|
167
|
+
export declare type CardProps<E extends CardElementType = CardElementType> = Props<CardOwnProps, E>
|
|
168
|
+
|
|
169
|
+
/** @public */
|
|
170
|
+
declare type ComponentType<P = any> = FunctionComponent<P> | ComponentClass<P> | ExoticComponent<P>
|
|
171
|
+
|
|
172
|
+
/** @public */
|
|
173
|
+
declare const DEFAULT_BOX_ELEMENT = 'div'
|
|
174
|
+
|
|
175
|
+
/** @public */
|
|
176
|
+
declare const DEFAULT_BUTTON_ELEMENT = 'button'
|
|
177
|
+
|
|
178
|
+
/** @public */
|
|
179
|
+
declare const DEFAULT_CARD_ELEMENT = 'div'
|
|
180
|
+
|
|
181
|
+
/** @public */
|
|
182
|
+
declare const DEFAULT_FLEX_ELEMENT = 'div'
|
|
183
|
+
|
|
184
|
+
/** @public */
|
|
185
|
+
declare const DEFAULT_GRID_ELEMENT = 'div'
|
|
186
|
+
|
|
187
|
+
/** @public */
|
|
188
|
+
declare const DEFAULT_HOTKEYS_ELEMENT = 'kbd'
|
|
189
|
+
|
|
190
|
+
/** @public */
|
|
191
|
+
declare const DEFAULT_MENU_DIVIDER_ELEMENT = 'hr'
|
|
192
|
+
|
|
193
|
+
/** @public */
|
|
194
|
+
declare const DEFAULT_MENU_ELEMENT = 'div'
|
|
195
|
+
|
|
196
|
+
/** @public */
|
|
197
|
+
declare const DEFAULT_MENU_GROUP_ELEMENT = 'button'
|
|
198
|
+
|
|
199
|
+
/** @public */
|
|
200
|
+
declare const DEFAULT_MENU_ITEM_ELEMENT = 'button'
|
|
201
|
+
|
|
202
|
+
/** @public */
|
|
203
|
+
declare const DEFAULT_POPOVER_ELEMENT = 'div'
|
|
204
|
+
|
|
205
|
+
/** @public */
|
|
206
|
+
declare const DEFAULT_SPINNER_ELEMENT = 'div'
|
|
207
|
+
|
|
208
|
+
/** @public */
|
|
209
|
+
declare const DEFAULT_STACK_ELEMENT = 'div'
|
|
210
|
+
|
|
211
|
+
/** @public */
|
|
212
|
+
declare const DEFAULT_TAB_ELEMENT = 'button'
|
|
213
|
+
|
|
214
|
+
/** @public */
|
|
215
|
+
declare const DEFAULT_TAB_LIST_ELEMENT = 'div'
|
|
216
|
+
|
|
217
|
+
/** @public */
|
|
218
|
+
declare const DEFAULT_TEXT_ELEMENT = 'div'
|
|
219
|
+
|
|
220
|
+
/** @public */
|
|
221
|
+
declare const DEFAULT_TEXT_INPUT_ELEMENT = 'input'
|
|
222
|
+
|
|
223
|
+
/** @public */
|
|
224
|
+
declare const DEFAULT_TOOLTIP_ELEMENT = 'div'
|
|
225
|
+
|
|
226
|
+
/** @public */
|
|
227
|
+
declare type Delay =
|
|
228
|
+
| number
|
|
229
|
+
| Partial<{
|
|
230
|
+
open: number
|
|
231
|
+
close: number
|
|
232
|
+
}>
|
|
233
|
+
|
|
234
|
+
/** @public */
|
|
235
|
+
declare type ElementType<P> = TagType | ComponentType<P>
|
|
236
|
+
|
|
237
|
+
/** @public */
|
|
238
|
+
declare type EmptyProps = {}
|
|
239
|
+
|
|
240
|
+
/**
|
|
241
|
+
* The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
|
|
242
|
+
*
|
|
243
|
+
* @public
|
|
244
|
+
*/
|
|
245
|
+
export declare function Flex<E extends FlexElementType = typeof DEFAULT_FLEX_ELEMENT>(
|
|
246
|
+
props: FlexProps<E>,
|
|
247
|
+
): React.JSX.Element
|
|
248
|
+
|
|
249
|
+
/** @public */
|
|
250
|
+
declare type FlexElementType = BoxElementType
|
|
251
|
+
|
|
252
|
+
/** @public */
|
|
253
|
+
declare type FlexOwnProps = Omit<
|
|
254
|
+
BoxOwnProps,
|
|
255
|
+
'align' | 'display' | 'flexDirection' | 'flexWrap'
|
|
256
|
+
> & {
|
|
257
|
+
align?: ResponsiveProp<AlignItems>
|
|
258
|
+
direction?: ResponsiveProp<FlexDirection>
|
|
259
|
+
justify?: ResponsiveProp<JustifyContent>
|
|
260
|
+
wrap?: ResponsiveProp<FlexWrap>
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
/** @public */
|
|
264
|
+
export declare type FlexProps<E extends FlexElementType = FlexElementType> = Props<FlexOwnProps, E>
|
|
265
|
+
|
|
266
|
+
/**
|
|
267
|
+
* The `Grid` component is for building 2-dimensional layers (based on CSS grid).
|
|
268
|
+
*
|
|
269
|
+
* @public
|
|
270
|
+
*/
|
|
271
|
+
export declare function Grid<E extends GridElementType = typeof DEFAULT_GRID_ELEMENT>(
|
|
272
|
+
props: GridProps<E>,
|
|
273
|
+
): React.JSX.Element
|
|
274
|
+
|
|
275
|
+
/** @public */
|
|
276
|
+
declare type GridElementType = BoxElementType
|
|
277
|
+
|
|
278
|
+
/** @public */
|
|
279
|
+
declare type GridOwnProps = Omit<BoxOwnProps, 'display'>
|
|
280
|
+
|
|
281
|
+
/** @public */
|
|
282
|
+
export declare type GridProps<E extends GridElementType = GridElementType> = Props<GridOwnProps, E>
|
|
283
|
+
|
|
284
|
+
/**
|
|
285
|
+
* Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
|
|
286
|
+
*
|
|
287
|
+
* @public
|
|
288
|
+
*/
|
|
289
|
+
export declare function Hotkeys<E extends HotkeysElementType = typeof DEFAULT_HOTKEYS_ELEMENT>(
|
|
290
|
+
props: HotkeysProps<E>,
|
|
291
|
+
): React.JSX.Element | undefined
|
|
292
|
+
|
|
293
|
+
/** @public */
|
|
294
|
+
declare type HotkeysElementType = 'kbd' | ComponentType
|
|
295
|
+
|
|
296
|
+
/** @public */
|
|
297
|
+
declare interface HotkeysOwnProps extends GapStyleProps, RadiusStyleProps {
|
|
298
|
+
fontSize?: ResponsiveProp<FontTextSize>
|
|
299
|
+
padding?: ResponsiveProp<Space>
|
|
300
|
+
keys?: string[]
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
/** @public */
|
|
304
|
+
export declare type HotkeysProps<E extends HotkeysElementType = HotkeysElementType> = Props<
|
|
305
|
+
HotkeysOwnProps,
|
|
306
|
+
E
|
|
307
|
+
>
|
|
308
|
+
|
|
309
|
+
/**
|
|
310
|
+
* @internal
|
|
311
|
+
*/
|
|
312
|
+
export declare function isHTMLAnchorElement(element: unknown): element is HTMLAnchorElement
|
|
313
|
+
|
|
314
|
+
/**
|
|
315
|
+
* @internal
|
|
316
|
+
*/
|
|
317
|
+
export declare function isHTMLElement(node: unknown): node is HTMLElement
|
|
318
|
+
|
|
319
|
+
/** @public */
|
|
320
|
+
declare type LayerOwnProps = CardOwnProps & {
|
|
321
|
+
/** A callback that fires when the layer becomes the top layer when it was not the top layer before. */
|
|
322
|
+
onActivate?: (props: {activeElement: HTMLElement | null}) => void
|
|
323
|
+
zOffset?: ResponsiveProp<number>
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
/** @public */
|
|
327
|
+
export declare function LayerProvider(props: LayerProviderProps): React.JSX.Element
|
|
328
|
+
|
|
329
|
+
/** @public */
|
|
330
|
+
declare interface LayerProviderProps {
|
|
331
|
+
children?: ReactNode
|
|
332
|
+
zOffset?: ResponsiveProp<number>
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
/**
|
|
336
|
+
* The `Menu` component is a building block for application menus.
|
|
337
|
+
*
|
|
338
|
+
* @public
|
|
339
|
+
*/
|
|
340
|
+
export declare function Menu<E extends MenuElementType = typeof DEFAULT_MENU_ELEMENT>(
|
|
341
|
+
props: MenuProps<E>,
|
|
342
|
+
): React.JSX.Element
|
|
343
|
+
|
|
344
|
+
/** @public */
|
|
345
|
+
export declare function MenuDivider<
|
|
346
|
+
E extends MenuDividerElementType = typeof DEFAULT_MENU_DIVIDER_ELEMENT,
|
|
347
|
+
>(props: MenuDividerProps<E>): React.JSX.Element
|
|
348
|
+
|
|
349
|
+
/** @public */
|
|
350
|
+
declare type MenuDividerElementType = 'div' | 'hr' | 'span' | ComponentType
|
|
351
|
+
|
|
352
|
+
/** @public */
|
|
353
|
+
declare type MenuDividerOwnProps = {}
|
|
354
|
+
|
|
355
|
+
/** @public */
|
|
356
|
+
declare type MenuDividerProps<E extends MenuDividerElementType = MenuDividerElementType> = Props<
|
|
357
|
+
MenuDividerOwnProps,
|
|
358
|
+
E
|
|
359
|
+
>
|
|
360
|
+
|
|
361
|
+
/** @public */
|
|
362
|
+
declare type MenuElementType = 'div' | 'span' | ComponentType
|
|
363
|
+
|
|
364
|
+
/** @public */
|
|
365
|
+
export declare function MenuGroup<
|
|
366
|
+
E extends MenuGroupElementType = typeof DEFAULT_MENU_GROUP_ELEMENT,
|
|
367
|
+
>(props: MenuGroupProps<E>): React.JSX.Element
|
|
368
|
+
|
|
369
|
+
/** @public */
|
|
370
|
+
declare type MenuGroupElementType = 'button' | ComponentType
|
|
371
|
+
|
|
372
|
+
/** @public */
|
|
373
|
+
declare type MenuGroupOwnProps = RadiusStyleProps & {
|
|
374
|
+
disabled?: boolean
|
|
375
|
+
fontSize?: ResponsiveProp<FontTextSize>
|
|
376
|
+
gap?: ResponsiveProp<Space>
|
|
377
|
+
icon?: ElementType_2 | ReactNode
|
|
378
|
+
menu?: Omit<
|
|
379
|
+
MenuProps<typeof DEFAULT_MENU_ELEMENT>,
|
|
380
|
+
| 'onClickOutside'
|
|
381
|
+
| 'onEscape'
|
|
382
|
+
| 'onItemClick'
|
|
383
|
+
| 'onKeyDown'
|
|
384
|
+
| 'onMouseEnter'
|
|
385
|
+
| 'registerElement'
|
|
386
|
+
| 'shouldFocus'
|
|
387
|
+
| 'onBlurCapture'
|
|
388
|
+
>
|
|
389
|
+
padding?: ResponsiveProp<Space>
|
|
390
|
+
popover?: Omit<PopoverProps, 'content' | 'open'>
|
|
391
|
+
text?: ReactNode
|
|
392
|
+
tone?: ElementTone
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
/** @public */
|
|
396
|
+
export declare type MenuGroupProps<E extends MenuGroupElementType = MenuGroupElementType> = Props<
|
|
397
|
+
MenuGroupOwnProps,
|
|
398
|
+
E
|
|
399
|
+
>
|
|
400
|
+
|
|
401
|
+
/** @public */
|
|
402
|
+
export declare function MenuItem<E extends MenuItemElementType = typeof DEFAULT_MENU_ITEM_ELEMENT>(
|
|
403
|
+
props: MenuItemProps<E>,
|
|
404
|
+
): React.JSX.Element
|
|
405
|
+
|
|
406
|
+
/** @public */
|
|
407
|
+
declare type MenuItemElementType = 'button' | 'a' | ComponentType
|
|
408
|
+
|
|
409
|
+
/** @public */
|
|
410
|
+
declare type MenuItemOwnProps = GapStyleProps &
|
|
411
|
+
PaddingStyleProps &
|
|
412
|
+
RadiusStyleProps & {
|
|
413
|
+
disabled?: boolean
|
|
414
|
+
fontSize?: ResponsiveProp<FontTextSize>
|
|
415
|
+
hotkeys?: string[]
|
|
416
|
+
icon?: ElementType_2 | ReactNode
|
|
417
|
+
iconRight?: ElementType_2 | ReactNode
|
|
418
|
+
pressed?: boolean
|
|
419
|
+
selected?: boolean
|
|
420
|
+
text?: ReactNode
|
|
421
|
+
tone?: ElementTone
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
/** @public */
|
|
425
|
+
export declare type MenuItemProps<E extends MenuItemElementType = MenuItemElementType> = Omit<
|
|
426
|
+
Props<MenuItemOwnProps, E>,
|
|
427
|
+
'role'
|
|
428
|
+
>
|
|
429
|
+
|
|
430
|
+
/** @public */
|
|
431
|
+
declare type MenuOwnProps = PaddingStyleProps & {
|
|
432
|
+
'gap'?: ResponsiveProp<Space>
|
|
433
|
+
'onClickOutside'?: (event: MouseEvent) => void
|
|
434
|
+
'onEscape'?: () => void
|
|
435
|
+
'onItemClick'?: () => void
|
|
436
|
+
'onItemSelect'?: (index: number) => void
|
|
437
|
+
'originElement'?: HTMLElement | null
|
|
438
|
+
'registerElement'?: (el: HTMLElement) => () => void
|
|
439
|
+
'shouldFocus'?: 'first' | 'last' | null
|
|
440
|
+
'aria-labelledby'?: string
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
/** @public */
|
|
444
|
+
export declare type MenuProps<E extends MenuElementType = MenuElementType> = Props<MenuOwnProps, E>
|
|
445
|
+
|
|
446
|
+
/**
|
|
447
|
+
* Placement of floating UI elements.
|
|
448
|
+
*
|
|
449
|
+
* @public
|
|
450
|
+
*/
|
|
451
|
+
declare type Placement =
|
|
452
|
+
| 'top'
|
|
453
|
+
| 'top-start'
|
|
454
|
+
| 'top-end'
|
|
455
|
+
| 'right'
|
|
456
|
+
| 'right-start'
|
|
457
|
+
| 'right-end'
|
|
458
|
+
| 'bottom'
|
|
459
|
+
| 'bottom-start'
|
|
460
|
+
| 'bottom-end'
|
|
461
|
+
| 'left'
|
|
462
|
+
| 'left-start'
|
|
463
|
+
| 'left-end'
|
|
464
|
+
|
|
465
|
+
/**
|
|
466
|
+
* The `Popover` component is used to display some content on top of another.
|
|
467
|
+
*
|
|
468
|
+
* @public
|
|
469
|
+
*/
|
|
470
|
+
export declare function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_ELEMENT>(
|
|
471
|
+
props: PopoverProps<E>,
|
|
472
|
+
): React.JSX.Element
|
|
473
|
+
|
|
474
|
+
/** @public */
|
|
475
|
+
declare type PopoverElementType = 'div' | ComponentType
|
|
476
|
+
|
|
477
|
+
/**
|
|
478
|
+
* @beta
|
|
479
|
+
*/
|
|
480
|
+
export declare type PopoverMargins = [number, number, number, number]
|
|
481
|
+
|
|
482
|
+
/** @public */
|
|
483
|
+
declare type PopoverOwnProps = Omit<LayerOwnProps, 'maxWidth'> & {
|
|
484
|
+
/** @beta */
|
|
485
|
+
__unstable_margins?: PopoverMargins
|
|
486
|
+
/**
|
|
487
|
+
* Whether the popover should animate in and out.
|
|
488
|
+
*
|
|
489
|
+
* @beta
|
|
490
|
+
* @defaultValue false
|
|
491
|
+
*/
|
|
492
|
+
animate?: boolean
|
|
493
|
+
arrow?: boolean
|
|
494
|
+
children?: ReactElement<{
|
|
495
|
+
ref: ForwardedRef<HTMLElement>
|
|
496
|
+
}>
|
|
497
|
+
/**
|
|
498
|
+
* When `true`, prevent overflow within the current boundary:
|
|
499
|
+
* - by flipping on its side axis
|
|
500
|
+
* - by resizing
|
|
501
|
+
*
|
|
502
|
+
* Note that:
|
|
503
|
+
* - setting `preventOverflow` to `true` also prevents overflow on its side axis
|
|
504
|
+
* - setting `matchReferenceWidth` to `true` also causes the popover to resize
|
|
505
|
+
*
|
|
506
|
+
* @defaultValue false
|
|
507
|
+
*/
|
|
508
|
+
constrainSize?: boolean
|
|
509
|
+
content?: ReactNode
|
|
510
|
+
disabled?: boolean
|
|
511
|
+
fallbackPlacements?: Placement[]
|
|
512
|
+
floatingBoundary?: HTMLElement | null
|
|
513
|
+
/**
|
|
514
|
+
* When `true`, set the maximum width to match the reference element, and also prevent overflow within
|
|
515
|
+
* the current boundary by resizing.
|
|
516
|
+
*
|
|
517
|
+
* Note that setting `constrainSize` to `true` also causes the popover to resize
|
|
518
|
+
*
|
|
519
|
+
* @defaultValue false
|
|
520
|
+
*/
|
|
521
|
+
matchReferenceWidth?: boolean
|
|
522
|
+
/**
|
|
523
|
+
* When true, blocks all pointer interaction with elements beneath the popover until closed.
|
|
524
|
+
*
|
|
525
|
+
* @beta
|
|
526
|
+
* @defaultValue false
|
|
527
|
+
*/
|
|
528
|
+
modal?: boolean
|
|
529
|
+
open?: boolean
|
|
530
|
+
placement?: Placement
|
|
531
|
+
/**
|
|
532
|
+
* When 'flip' (default), the placement is determined from the initial placement and the
|
|
533
|
+
* fallback placements in order. Whichever fits in the viewport first.
|
|
534
|
+
*
|
|
535
|
+
* When 'autoPlacement', the initial placement and all fallback placements are evaluated
|
|
536
|
+
* and the placement with the most viewport space available.
|
|
537
|
+
*
|
|
538
|
+
* Option is only relevant if either `constrainSize` or `preventOverflow` is `true`
|
|
539
|
+
*/
|
|
540
|
+
placementStrategy?: 'flip' | 'autoPlacement'
|
|
541
|
+
/** Whether or not to render the popover in a portal element. */
|
|
542
|
+
portal?: boolean | string
|
|
543
|
+
preventOverflow?: boolean
|
|
544
|
+
referenceBoundary?: HTMLElement | null
|
|
545
|
+
/**
|
|
546
|
+
* When defined, the popover will be positioned relative to this element.
|
|
547
|
+
* The children of the popover won't be rendered.
|
|
548
|
+
*/
|
|
549
|
+
referenceElement?: HTMLElement | null
|
|
550
|
+
/** @beta */
|
|
551
|
+
updateRef?: Ref<PopoverUpdateCallback | undefined>
|
|
552
|
+
width?: ResponsiveProp<MaxWidth>
|
|
553
|
+
}
|
|
554
|
+
|
|
555
|
+
/** @public */
|
|
556
|
+
export declare type PopoverProps<E extends PopoverElementType = PopoverElementType> = Props<
|
|
557
|
+
PopoverOwnProps,
|
|
558
|
+
E
|
|
559
|
+
>
|
|
560
|
+
|
|
561
|
+
/** @beta */
|
|
562
|
+
declare type PopoverUpdateCallback = () => void
|
|
563
|
+
|
|
564
|
+
/** @public */
|
|
565
|
+
export declare function Portal(props: PortalProps): ReactPortal | null
|
|
566
|
+
|
|
567
|
+
/** @public */
|
|
568
|
+
export declare interface PortalProps {
|
|
569
|
+
children: ReactNode
|
|
570
|
+
/**
|
|
571
|
+
* @beta This API might change. DO NOT USE IN PRODUCTION.
|
|
572
|
+
*/
|
|
573
|
+
__unstable_name?: string
|
|
574
|
+
}
|
|
575
|
+
|
|
576
|
+
/** @public */
|
|
577
|
+
export declare function PortalProvider(props: PortalProviderProps): React.JSX.Element
|
|
578
|
+
|
|
579
|
+
/** @public */
|
|
580
|
+
export declare interface PortalProviderProps {
|
|
581
|
+
children: ReactNode
|
|
582
|
+
element?: HTMLElement | null
|
|
583
|
+
/**
|
|
584
|
+
* @beta
|
|
585
|
+
*/
|
|
586
|
+
__unstable_elements?: Record<string, HTMLElement | null | undefined>
|
|
587
|
+
}
|
|
588
|
+
|
|
589
|
+
/** @public */
|
|
590
|
+
declare type Props<P extends EmptyProps, E extends ElementType<P>> = Assign<
|
|
591
|
+
E extends TagType ? JSX.IntrinsicElements[E] : ComponentProps<E>,
|
|
592
|
+
P & {
|
|
593
|
+
as?: E
|
|
594
|
+
}
|
|
595
|
+
>
|
|
596
|
+
|
|
597
|
+
/**
|
|
598
|
+
* Indicate that something is loading for an indeterminate amount of time.
|
|
599
|
+
*
|
|
600
|
+
* @public
|
|
601
|
+
*/
|
|
602
|
+
export declare function Spinner<E extends SpinnerElementType = typeof DEFAULT_SPINNER_ELEMENT>(
|
|
603
|
+
props: SpinnerProps<E>,
|
|
604
|
+
): React.JSX.Element
|
|
605
|
+
|
|
606
|
+
/** @public */
|
|
607
|
+
declare type SpinnerElementType = 'div' | 'span' | ComponentType
|
|
608
|
+
|
|
609
|
+
/** @public */
|
|
610
|
+
declare type SpinnerOwnProps = {
|
|
611
|
+
muted?: boolean
|
|
612
|
+
size?: ResponsiveProp<FontTextSize>
|
|
613
|
+
}
|
|
614
|
+
|
|
615
|
+
/** @public */
|
|
616
|
+
export declare type SpinnerProps<E extends SpinnerElementType = SpinnerElementType> = Props<
|
|
617
|
+
SpinnerOwnProps,
|
|
618
|
+
E
|
|
619
|
+
>
|
|
620
|
+
|
|
621
|
+
/**
|
|
622
|
+
* The `Stack` component is used to place elements on top of each other.
|
|
623
|
+
*
|
|
624
|
+
* @public
|
|
625
|
+
*/
|
|
626
|
+
export declare function Stack<E extends StackElementType = typeof DEFAULT_STACK_ELEMENT>(
|
|
627
|
+
props: StackProps<E>,
|
|
628
|
+
): React.JSX.Element
|
|
629
|
+
|
|
630
|
+
/** @public */
|
|
631
|
+
declare type StackElementType = BoxElementType
|
|
632
|
+
|
|
633
|
+
/** @public */
|
|
634
|
+
declare type StackOwnProps = Omit<
|
|
635
|
+
BoxOwnProps,
|
|
636
|
+
| 'align'
|
|
637
|
+
| 'alignItems'
|
|
638
|
+
| 'columns'
|
|
639
|
+
| 'gridTemplateColumns'
|
|
640
|
+
| 'direction'
|
|
641
|
+
| 'display'
|
|
642
|
+
| 'flexDirection'
|
|
643
|
+
| 'flexWrap'
|
|
644
|
+
| 'gapX'
|
|
645
|
+
| 'gapY'
|
|
646
|
+
| 'justify'
|
|
647
|
+
| 'justifyContent'
|
|
648
|
+
| 'rows'
|
|
649
|
+
| 'gridTemplateRows'
|
|
650
|
+
>
|
|
651
|
+
|
|
652
|
+
/** @public */
|
|
653
|
+
export declare type StackProps<E extends StackElementType = StackElementType> = Props<
|
|
654
|
+
StackOwnProps,
|
|
655
|
+
E
|
|
656
|
+
>
|
|
657
|
+
|
|
658
|
+
/** @public */
|
|
659
|
+
export declare function Tab<E extends TabElementType = typeof DEFAULT_TAB_ELEMENT>(
|
|
660
|
+
props: TabProps<E>,
|
|
661
|
+
): React.JSX.Element
|
|
662
|
+
|
|
663
|
+
/** @public */
|
|
664
|
+
declare type TabElementType = 'button' | ComponentType
|
|
665
|
+
|
|
666
|
+
/** @public */
|
|
667
|
+
export declare function TabList<E extends TabListElementType = typeof DEFAULT_TAB_LIST_ELEMENT>(
|
|
668
|
+
props: TabListProps<E>,
|
|
669
|
+
): React.JSX.Element
|
|
670
|
+
|
|
671
|
+
/** @public */
|
|
672
|
+
declare type TabListChild = ReactElement<Props<TabProps, 'button'>> | null | undefined | false
|
|
673
|
+
|
|
674
|
+
/** @public */
|
|
675
|
+
declare type TabListElementType = 'div' | 'span' | ComponentType
|
|
676
|
+
|
|
677
|
+
/** @public */
|
|
678
|
+
declare type TabListOwnProps = Omit<FlexOwnProps, 'as' | 'height'> & {
|
|
679
|
+
children: TabListChild[]
|
|
680
|
+
}
|
|
681
|
+
|
|
682
|
+
/** @public */
|
|
683
|
+
export declare type TabListProps<E extends TabListElementType = TabListElementType> = Props<
|
|
684
|
+
TabListOwnProps,
|
|
685
|
+
E
|
|
686
|
+
>
|
|
687
|
+
|
|
688
|
+
/** @public */
|
|
689
|
+
declare type TabOwnProps = {
|
|
690
|
+
/**
|
|
691
|
+
* The `id` of the corresponding `TabPanel` component.
|
|
692
|
+
*/
|
|
693
|
+
'aria-controls': string
|
|
694
|
+
'id': string
|
|
695
|
+
'icon'?: ElementType_2 | ReactNode
|
|
696
|
+
'focused'?: boolean
|
|
697
|
+
'fontSize'?: ResponsiveProp<FontTextSize>
|
|
698
|
+
'label'?: ReactNode
|
|
699
|
+
'padding'?: ResponsiveProp<Space>
|
|
700
|
+
'selected'?: boolean
|
|
701
|
+
'tone'?: ElementTone
|
|
702
|
+
}
|
|
703
|
+
|
|
704
|
+
/** @public */
|
|
705
|
+
export declare type TabProps<E extends TabElementType = TabElementType> = Props<TabOwnProps, E>
|
|
706
|
+
|
|
707
|
+
/** @public */
|
|
708
|
+
declare type TagType = keyof JSX.IntrinsicElements
|
|
709
|
+
|
|
710
|
+
/**
|
|
711
|
+
* The `Text` component is an agile, themed typographic element.
|
|
712
|
+
*
|
|
713
|
+
* @public
|
|
714
|
+
*/
|
|
715
|
+
declare function Text_2<E extends TextElementType = typeof DEFAULT_TEXT_ELEMENT>(
|
|
716
|
+
props: TextProps<E>,
|
|
717
|
+
): React.JSX.Element
|
|
718
|
+
export {Text_2 as Text}
|
|
719
|
+
|
|
720
|
+
/** @public */
|
|
721
|
+
declare type TextElementType =
|
|
722
|
+
| 'div'
|
|
723
|
+
| 'h1'
|
|
724
|
+
| 'h2'
|
|
725
|
+
| 'h3'
|
|
726
|
+
| 'h4'
|
|
727
|
+
| 'h5'
|
|
728
|
+
| 'h6'
|
|
729
|
+
| 'label'
|
|
730
|
+
| 'li'
|
|
731
|
+
| 'p'
|
|
732
|
+
| 'span'
|
|
733
|
+
| ComponentType
|
|
734
|
+
|
|
735
|
+
/**
|
|
736
|
+
* Single line text input.
|
|
737
|
+
*
|
|
738
|
+
* @public
|
|
739
|
+
*/
|
|
740
|
+
export declare function TextInput<
|
|
741
|
+
E extends TextInputElementType = typeof DEFAULT_TEXT_INPUT_ELEMENT,
|
|
742
|
+
>(props: TextInputProps<E>): React.JSX.Element
|
|
743
|
+
|
|
744
|
+
/** @public */
|
|
745
|
+
declare type TextInputClearButtonProps = Omit<
|
|
746
|
+
ButtonProps<'button'>,
|
|
747
|
+
'as' | 'onClick' | 'onMouseDown'
|
|
748
|
+
>
|
|
749
|
+
|
|
750
|
+
/** @public */
|
|
751
|
+
declare type TextInputElementType = 'input' | ComponentType
|
|
752
|
+
|
|
753
|
+
/** @public */
|
|
754
|
+
declare type TextInputOwnProps = InputStyleProps & {
|
|
755
|
+
/**
|
|
756
|
+
* @beta
|
|
757
|
+
*/
|
|
758
|
+
__unstable_disableFocusRing?: boolean
|
|
759
|
+
/**
|
|
760
|
+
* @beta
|
|
761
|
+
*/
|
|
762
|
+
clearButton?: boolean | TextInputClearButtonProps
|
|
763
|
+
customValidity?: string
|
|
764
|
+
icon?: ElementType_2 | ReactNode
|
|
765
|
+
iconRight?: ElementType_2 | ReactNode
|
|
766
|
+
/**
|
|
767
|
+
* @beta
|
|
768
|
+
*/
|
|
769
|
+
onClear?: () => void
|
|
770
|
+
prefix?: ReactNode
|
|
771
|
+
suffix?: ReactNode
|
|
772
|
+
weight?: FontWeight
|
|
773
|
+
}
|
|
774
|
+
|
|
775
|
+
/** @public */
|
|
776
|
+
export declare type TextInputProps<E extends TextInputElementType = TextInputElementType> = Props<
|
|
777
|
+
TextInputOwnProps,
|
|
778
|
+
E
|
|
779
|
+
>
|
|
780
|
+
|
|
781
|
+
/** @public */
|
|
782
|
+
declare type TextOwnProps = TextStyleProps & TextOverflowStyleProps
|
|
783
|
+
|
|
784
|
+
/** @public */
|
|
785
|
+
export declare type TextProps<E extends TextElementType = TextElementType> = Props<TextOwnProps, E>
|
|
786
|
+
|
|
787
|
+
/**
|
|
788
|
+
* Tooltips display information when hovering, focusing or tapping.
|
|
789
|
+
*
|
|
790
|
+
* @public
|
|
791
|
+
*/
|
|
792
|
+
export declare function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_ELEMENT>(
|
|
793
|
+
props: TooltipProps<E>,
|
|
794
|
+
): React.JSX.Element
|
|
795
|
+
|
|
796
|
+
/** @public */
|
|
797
|
+
declare type TooltipElementType = 'div' | 'span' | ComponentType
|
|
798
|
+
|
|
799
|
+
/** @public */
|
|
800
|
+
declare type TooltipOwnProps = LayerOwnProps &
|
|
801
|
+
RadiusStyleProps &
|
|
802
|
+
ShadowStyleProps & {
|
|
803
|
+
/**
|
|
804
|
+
* Whether the tooltip should animate in and out.
|
|
805
|
+
*
|
|
806
|
+
* @beta
|
|
807
|
+
* @defaultValue false
|
|
808
|
+
*/
|
|
809
|
+
animate?: boolean
|
|
810
|
+
arrow?: boolean
|
|
811
|
+
boundaryElement?: HTMLElement | null
|
|
812
|
+
children?: ReactElement<HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>>
|
|
813
|
+
content?: ReactNode
|
|
814
|
+
/**
|
|
815
|
+
* Adds a delay to open or close the tooltip.
|
|
816
|
+
*
|
|
817
|
+
* If only a `number` is passed, it will be used for both opening and closing.
|
|
818
|
+
*
|
|
819
|
+
* If an object `{open: number; close:number}` is passed, it can be used to set different delays for each action.
|
|
820
|
+
*
|
|
821
|
+
* @public
|
|
822
|
+
* @defaultValue 0
|
|
823
|
+
*/
|
|
824
|
+
delay?: Delay
|
|
825
|
+
disabled?: boolean
|
|
826
|
+
fallbackPlacements?: Placement[]
|
|
827
|
+
placement?: Placement
|
|
828
|
+
/** Whether or not to render the tooltip in a portal element. */
|
|
829
|
+
portal?: boolean | string
|
|
830
|
+
scheme?: ColorScheme
|
|
831
|
+
tone?: CardTone
|
|
832
|
+
}
|
|
833
|
+
|
|
834
|
+
/** @public */
|
|
835
|
+
export declare type TooltipProps<E extends TooltipElementType = TooltipElementType> = Props<
|
|
836
|
+
TooltipOwnProps,
|
|
837
|
+
E
|
|
838
|
+
>
|
|
839
|
+
|
|
840
|
+
/**
|
|
841
|
+
* Returns true if a dark color scheme is preferred, false if a light color scheme is preferred or the preference is not known.
|
|
842
|
+
*
|
|
843
|
+
* @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)
|
|
844
|
+
*
|
|
845
|
+
* If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
|
|
846
|
+
* 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
|
|
847
|
+
* @example https://gist.github.com/stipsan/13c0cccf8dfc34f4b44bb1b984baf7df
|
|
848
|
+
*
|
|
849
|
+
* @public
|
|
850
|
+
*/
|
|
851
|
+
export declare function usePrefersDark(getServerSnapshot?: () => boolean): boolean
|
|
852
|
+
|
|
853
|
+
export {}
|