@sanity/ui 3.1.11 → 3.1.12-canary.0
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/_chunks-dts/useTheme.d.mts +1431 -0
- package/dist/_chunks-dts/useTheme.d.mts.map +1 -0
- package/dist/_chunks-dts/useTheme.d.ts +1431 -0
- package/dist/_chunks-dts/useTheme.d.ts.map +1 -0
- package/dist/_visual-editing.d.mts +2 -1007
- package/dist/_visual-editing.d.ts +2 -1007
- package/dist/index.d.mts +464 -2655
- package/dist/index.d.mts.map +1 -0
- package/dist/index.d.ts +464 -2655
- package/dist/index.d.ts.map +1 -0
- package/dist/theme.d.mts +925 -1222
- package/dist/theme.d.mts.map +1 -0
- package/dist/theme.d.ts +925 -1222
- package/dist/theme.d.ts.map +1 -0
- package/package.json +39 -53
|
@@ -0,0 +1,1431 @@
|
|
|
1
|
+
import { BaseTheme, HSL, PartialThemeColorBuilderOpts, RGB, RootTheme, Theme, ThemeAvatar, ThemeBoxShadow, ThemeColor, ThemeColorAvatarColorKey, ThemeColorBase, ThemeColorBuilderOpts, ThemeColorButton, ThemeColorButtonModeKey, ThemeColorButtonState, ThemeColorButtonStates, ThemeColorButtonTones, ThemeColorCard, ThemeColorCardState, ThemeColorCardToneKey, ThemeColorGenericState, ThemeColorInput, ThemeColorInputState, ThemeColorInputStates, ThemeColorMuted, ThemeColorMutedTone, ThemeColorName, ThemeColorScheme, ThemeColorSchemeKey, ThemeColorSchemes, ThemeColorSelectable, ThemeColorSelectableState, ThemeColorSelectableStates, ThemeColorSolid, ThemeColorSolidTone, ThemeColorSpot, ThemeColorSpotKey, ThemeColorStateToneKey, ThemeColorSyntax, ThemeColorToneKey, ThemeColorToneKey as ThemeColorToneKey$1, ThemeFont, ThemeFontKey, ThemeFontSize, ThemeFontWeight, ThemeFontWeightKey, ThemeFonts, ThemeInput, ThemeLayer, ThemeShadow, ThemeStyles, Theme_v2, createColorTheme, hexToRgb, hslToRgb, multiply, parseColor, rgbToHex, rgbToHsl, rgba, screen } from "@sanity/ui/theme";
|
|
2
|
+
import * as react141 from "react";
|
|
3
|
+
import { Component, HTMLProps, PropsWithChildren, Ref } from "react";
|
|
4
|
+
import * as styled_components0 from "styled-components";
|
|
5
|
+
import * as styled_components_dist_types0 from "styled-components/dist/types";
|
|
6
|
+
/**
|
|
7
|
+
* @public
|
|
8
|
+
* @deprecated Use `BaseTheme` from `@sanity/ui/theme` instead.
|
|
9
|
+
*/
|
|
10
|
+
type BaseTheme$1 = BaseTheme;
|
|
11
|
+
/**
|
|
12
|
+
* @public
|
|
13
|
+
* @deprecated Use `ThemeBoxShadow` from `@sanity/ui/theme` instead.
|
|
14
|
+
*/
|
|
15
|
+
type BoxShadow = ThemeBoxShadow;
|
|
16
|
+
/**
|
|
17
|
+
* @public
|
|
18
|
+
* @deprecated Use `HSL` from `@sanity/ui/theme` instead.
|
|
19
|
+
*/
|
|
20
|
+
type HSL$1 = HSL;
|
|
21
|
+
/**
|
|
22
|
+
* @public
|
|
23
|
+
* @deprecated Use `RGB` from `@sanity/ui/theme` instead.
|
|
24
|
+
*/
|
|
25
|
+
type RGB$1 = RGB;
|
|
26
|
+
/**
|
|
27
|
+
* @public
|
|
28
|
+
* @deprecated Use `RootTheme` from `@sanity/ui/theme` instead.
|
|
29
|
+
*/
|
|
30
|
+
type RootTheme$1 = RootTheme;
|
|
31
|
+
/**
|
|
32
|
+
* @public
|
|
33
|
+
* @deprecated Use `ThemeStyles` from `@sanity/ui/theme` instead.
|
|
34
|
+
*/
|
|
35
|
+
type Styles = ThemeStyles;
|
|
36
|
+
/**
|
|
37
|
+
* @public
|
|
38
|
+
* @deprecated Use `Theme` from `@sanity/ui/theme` instead.
|
|
39
|
+
*/
|
|
40
|
+
type Theme$1 = Theme;
|
|
41
|
+
/**
|
|
42
|
+
* @public
|
|
43
|
+
* @deprecated Use `ThemeColorButtonModeKey` from `@sanity/ui/theme` instead.
|
|
44
|
+
*/
|
|
45
|
+
type ThemeColorButtonModeKey$1 = ThemeColorButtonModeKey;
|
|
46
|
+
/**
|
|
47
|
+
* @public
|
|
48
|
+
* @deprecated Use `ThemeColorSchemeKey` from `@sanity/ui/theme` instead.
|
|
49
|
+
*/
|
|
50
|
+
type ThemeColorSchemeKey$1 = ThemeColorSchemeKey;
|
|
51
|
+
/**
|
|
52
|
+
* @public
|
|
53
|
+
* @deprecated Use `ThemeColorSyntax` from `@sanity/ui/theme` instead.
|
|
54
|
+
*/
|
|
55
|
+
type ThemeColorSyntax$1 = ThemeColorSyntax;
|
|
56
|
+
/**
|
|
57
|
+
* @public
|
|
58
|
+
* @deprecated Use `ThemeFont` from `@sanity/ui/theme` instead.
|
|
59
|
+
*/
|
|
60
|
+
type ThemeFont$1 = ThemeFont;
|
|
61
|
+
/**
|
|
62
|
+
* @public
|
|
63
|
+
* @deprecated Use `ThemeFontKey` from `@sanity/ui/theme` instead.
|
|
64
|
+
*/
|
|
65
|
+
type ThemeFontKey$1 = ThemeFontKey;
|
|
66
|
+
/**
|
|
67
|
+
* @public
|
|
68
|
+
* @deprecated Use `ThemeFontSize` from `@sanity/ui/theme` instead.
|
|
69
|
+
*/
|
|
70
|
+
type ThemeFontSize$1 = ThemeFontSize;
|
|
71
|
+
/**
|
|
72
|
+
* @public
|
|
73
|
+
* @deprecated Use `ThemeFontWeight` from `@sanity/ui/theme` instead.
|
|
74
|
+
*/
|
|
75
|
+
type ThemeFontWeight$1 = ThemeFontWeight;
|
|
76
|
+
/**
|
|
77
|
+
* @public
|
|
78
|
+
* @deprecated Use `ThemeFontWeightKey` from `@sanity/ui/theme` instead.
|
|
79
|
+
*/
|
|
80
|
+
type ThemeFontWeightKey$1 = ThemeFontWeightKey;
|
|
81
|
+
/**
|
|
82
|
+
* @public
|
|
83
|
+
* @deprecated Use `ThemeFonts` from `@sanity/ui/theme` instead.
|
|
84
|
+
*/
|
|
85
|
+
type ThemeFonts$1 = ThemeFonts;
|
|
86
|
+
/**
|
|
87
|
+
* @public
|
|
88
|
+
* @deprecated Use `ThemeLayer` from `@sanity/ui/theme` instead.
|
|
89
|
+
*/
|
|
90
|
+
type ThemeLayer$1 = ThemeLayer;
|
|
91
|
+
/**
|
|
92
|
+
* @public
|
|
93
|
+
* @deprecated Use `ThemeShadow` from `@sanity/ui/theme` instead.
|
|
94
|
+
*/
|
|
95
|
+
type ThemeShadow$1 = ThemeShadow;
|
|
96
|
+
/**
|
|
97
|
+
* @public
|
|
98
|
+
* @deprecated Use `createColorTheme` from `@sanity/ui/theme` instead.
|
|
99
|
+
*/
|
|
100
|
+
declare const createColorTheme$1: typeof createColorTheme;
|
|
101
|
+
/**
|
|
102
|
+
* @public
|
|
103
|
+
* @deprecated Use `hexToRgb` from `@sanity/ui/theme` instead.
|
|
104
|
+
*/
|
|
105
|
+
declare const hexToRgb$1: typeof hexToRgb;
|
|
106
|
+
/**
|
|
107
|
+
* @public
|
|
108
|
+
* @deprecated Use `hslToRgb` from `@sanity/ui/theme` instead.
|
|
109
|
+
*/
|
|
110
|
+
declare const hslToRgb$1: typeof hslToRgb;
|
|
111
|
+
/**
|
|
112
|
+
* @public
|
|
113
|
+
* @deprecated Use `multiply` from `@sanity/ui/theme` instead.
|
|
114
|
+
*/
|
|
115
|
+
declare const multiply$1: typeof multiply;
|
|
116
|
+
/**
|
|
117
|
+
* @public
|
|
118
|
+
* @deprecated Use `parseColor` from `@sanity/ui/theme` instead.
|
|
119
|
+
*/
|
|
120
|
+
declare const parseColor$1: typeof parseColor;
|
|
121
|
+
/**
|
|
122
|
+
* @public
|
|
123
|
+
* @deprecated Use `rgbToHex` from `@sanity/ui/theme` instead.
|
|
124
|
+
*/
|
|
125
|
+
declare const rgbToHex$1: typeof rgbToHex;
|
|
126
|
+
/**
|
|
127
|
+
* @public
|
|
128
|
+
* @deprecated Use `rgbToHsl` from `@sanity/ui/theme` instead.
|
|
129
|
+
*/
|
|
130
|
+
declare const rgbToHsl$1: typeof rgbToHsl;
|
|
131
|
+
/**
|
|
132
|
+
* @public
|
|
133
|
+
* @deprecated Use `rgba` from `@sanity/ui/theme` instead.
|
|
134
|
+
*/
|
|
135
|
+
declare const rgba$1: typeof rgba;
|
|
136
|
+
/**
|
|
137
|
+
* @public
|
|
138
|
+
* @deprecated Use `screen` from `@sanity/ui/theme` instead.
|
|
139
|
+
*/
|
|
140
|
+
declare const screen$1: typeof screen;
|
|
141
|
+
/**
|
|
142
|
+
* @public
|
|
143
|
+
* @deprecated Use `buildTheme` from `@sanity/ui/theme` instead.
|
|
144
|
+
*/
|
|
145
|
+
declare const studioTheme: BaseTheme;
|
|
146
|
+
/**
|
|
147
|
+
* @public
|
|
148
|
+
*/
|
|
149
|
+
type AvatarPosition = 'top' | 'bottom' | 'inside';
|
|
150
|
+
/**
|
|
151
|
+
* @public
|
|
152
|
+
*/
|
|
153
|
+
type AvatarSize = 0 | 1 | 2 | 3;
|
|
154
|
+
/**
|
|
155
|
+
* @public
|
|
156
|
+
*/
|
|
157
|
+
type AvatarStatus = 'online' | 'editing' | 'inactive';
|
|
158
|
+
/**
|
|
159
|
+
* @public
|
|
160
|
+
* @deprecated No longer used
|
|
161
|
+
*/
|
|
162
|
+
type BadgeMode = 'default' | 'outline';
|
|
163
|
+
/**
|
|
164
|
+
* @public
|
|
165
|
+
*/
|
|
166
|
+
type BadgeTone = ThemeColorStateToneKey;
|
|
167
|
+
/**
|
|
168
|
+
* @public
|
|
169
|
+
*/
|
|
170
|
+
type BoxSizing = 'content' | 'border';
|
|
171
|
+
/**
|
|
172
|
+
* @public
|
|
173
|
+
*/
|
|
174
|
+
type BoxDisplay = 'none' | 'block' | 'grid' | 'flex' | 'inline-block';
|
|
175
|
+
/**
|
|
176
|
+
* @public
|
|
177
|
+
*/
|
|
178
|
+
type BoxHeight = 'stretch' | 'fill';
|
|
179
|
+
/**
|
|
180
|
+
* @public
|
|
181
|
+
*/
|
|
182
|
+
type BoxOverflow = 'visible' | 'hidden' | 'auto';
|
|
183
|
+
/**
|
|
184
|
+
* @public
|
|
185
|
+
*/
|
|
186
|
+
type ButtonMode = ThemeColorButtonModeKey;
|
|
187
|
+
/**
|
|
188
|
+
* @public
|
|
189
|
+
*/
|
|
190
|
+
type ButtonTextAlign = 'left' | 'right' | 'center';
|
|
191
|
+
/**
|
|
192
|
+
* @public
|
|
193
|
+
*/
|
|
194
|
+
type ButtonTone = ThemeColorStateToneKey;
|
|
195
|
+
/**
|
|
196
|
+
* @public
|
|
197
|
+
*/
|
|
198
|
+
type ButtonWidth = 'fill';
|
|
199
|
+
/**
|
|
200
|
+
* @public
|
|
201
|
+
*/
|
|
202
|
+
type CardTone = ThemeColorCardToneKey | 'inherit';
|
|
203
|
+
/**
|
|
204
|
+
* @public
|
|
205
|
+
*/
|
|
206
|
+
type DialogPosition = 'absolute' | 'fixed';
|
|
207
|
+
/**
|
|
208
|
+
* @public
|
|
209
|
+
*/
|
|
210
|
+
type FlexAlign = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
|
|
211
|
+
/**
|
|
212
|
+
* @public
|
|
213
|
+
*/
|
|
214
|
+
type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
|
|
215
|
+
/**
|
|
216
|
+
* @public
|
|
217
|
+
*/
|
|
218
|
+
type FlexJustify = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
|
|
219
|
+
/**
|
|
220
|
+
* @public
|
|
221
|
+
*/
|
|
222
|
+
type FlexValue = number | 'none' | 'auto' | 'initial';
|
|
223
|
+
/**
|
|
224
|
+
* @public
|
|
225
|
+
*/
|
|
226
|
+
type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap';
|
|
227
|
+
/**
|
|
228
|
+
* @public
|
|
229
|
+
*/
|
|
230
|
+
type GridAutoRows = 'auto' | 'min' | 'max' | 'fr';
|
|
231
|
+
/**
|
|
232
|
+
* @public
|
|
233
|
+
*/
|
|
234
|
+
type GridAutoCols = 'auto' | 'min' | 'max' | 'fr';
|
|
235
|
+
/**
|
|
236
|
+
* @public
|
|
237
|
+
*/
|
|
238
|
+
type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dense';
|
|
239
|
+
/**
|
|
240
|
+
* @public
|
|
241
|
+
*/
|
|
242
|
+
type GridItemColumn = 'auto' | 'full' | number;
|
|
243
|
+
/**
|
|
244
|
+
* @public
|
|
245
|
+
*/
|
|
246
|
+
type GridItemColumnStart = 'auto' | number;
|
|
247
|
+
/**
|
|
248
|
+
* @public
|
|
249
|
+
*/
|
|
250
|
+
type GridItemColumnEnd = 'auto' | number;
|
|
251
|
+
/**
|
|
252
|
+
* @public
|
|
253
|
+
*/
|
|
254
|
+
type GridItemRow = 'auto' | 'full' | number;
|
|
255
|
+
/**
|
|
256
|
+
* @public
|
|
257
|
+
*/
|
|
258
|
+
type GridItemRowStart = 'auto' | number;
|
|
259
|
+
/**
|
|
260
|
+
* @public
|
|
261
|
+
*/
|
|
262
|
+
type GridItemRowEnd = 'auto' | number;
|
|
263
|
+
/**
|
|
264
|
+
* Placement of floating UI elements.
|
|
265
|
+
*
|
|
266
|
+
* @public
|
|
267
|
+
*/
|
|
268
|
+
type Placement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
|
|
269
|
+
/**
|
|
270
|
+
* @beta
|
|
271
|
+
*/
|
|
272
|
+
type PopoverMargins = [number, number, number, number];
|
|
273
|
+
/**
|
|
274
|
+
* @public
|
|
275
|
+
*/
|
|
276
|
+
type Radius = number | 'full';
|
|
277
|
+
/**
|
|
278
|
+
* @public
|
|
279
|
+
*/
|
|
280
|
+
type SelectableTone = ThemeColorStateToneKey;
|
|
281
|
+
/**
|
|
282
|
+
* @public
|
|
283
|
+
*/
|
|
284
|
+
type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial';
|
|
285
|
+
/**
|
|
286
|
+
* @public
|
|
287
|
+
*/
|
|
288
|
+
interface HotkeysProps {
|
|
289
|
+
fontSize?: number | number[];
|
|
290
|
+
padding?: number | number[];
|
|
291
|
+
radius?: Radius | Radius[];
|
|
292
|
+
space?: number | number[];
|
|
293
|
+
keys?: string[];
|
|
294
|
+
}
|
|
295
|
+
/**
|
|
296
|
+
* Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
|
|
297
|
+
*
|
|
298
|
+
* @public
|
|
299
|
+
*/
|
|
300
|
+
declare const Hotkeys: react141.ForwardRefExoticComponent<HotkeysProps & Omit<react141.HTMLProps<HTMLElement>, "ref" | "as" | "size"> & react141.RefAttributes<HTMLElement>>;
|
|
301
|
+
/**
|
|
302
|
+
* @public
|
|
303
|
+
*/
|
|
304
|
+
interface ResponsiveBorderProps {
|
|
305
|
+
border?: boolean | boolean[];
|
|
306
|
+
borderTop?: boolean | boolean[];
|
|
307
|
+
borderRight?: boolean | boolean[];
|
|
308
|
+
borderBottom?: boolean | boolean[];
|
|
309
|
+
borderLeft?: boolean | boolean[];
|
|
310
|
+
}
|
|
311
|
+
/**
|
|
312
|
+
* @public
|
|
313
|
+
*/
|
|
314
|
+
interface ResponsiveBoxProps {
|
|
315
|
+
display?: BoxDisplay | BoxDisplay[];
|
|
316
|
+
height?: BoxHeight | BoxHeight[];
|
|
317
|
+
overflow?: BoxOverflow | BoxOverflow[];
|
|
318
|
+
sizing?: BoxSizing | BoxSizing[];
|
|
319
|
+
}
|
|
320
|
+
/**
|
|
321
|
+
* @public
|
|
322
|
+
*/
|
|
323
|
+
interface ResponsiveFlexProps {
|
|
324
|
+
align?: FlexAlign | FlexAlign[];
|
|
325
|
+
direction?: FlexDirection | FlexDirection[];
|
|
326
|
+
justify?: FlexJustify | FlexJustify[];
|
|
327
|
+
wrap?: FlexWrap | FlexWrap[];
|
|
328
|
+
}
|
|
329
|
+
/**
|
|
330
|
+
* @public
|
|
331
|
+
*/
|
|
332
|
+
interface ResponsiveFlexItemProps {
|
|
333
|
+
/** Sets the flex CSS attribute. The property is responsive. */
|
|
334
|
+
flex?: FlexValue | FlexValue[];
|
|
335
|
+
}
|
|
336
|
+
/**
|
|
337
|
+
* @public
|
|
338
|
+
*/
|
|
339
|
+
interface ResponsiveGridProps {
|
|
340
|
+
autoRows?: GridAutoRows | GridAutoRows[];
|
|
341
|
+
autoCols?: GridAutoCols | GridAutoCols[];
|
|
342
|
+
autoFlow?: GridAutoFlow | GridAutoFlow[];
|
|
343
|
+
columns?: number | number[];
|
|
344
|
+
gap?: number | number[];
|
|
345
|
+
gapX?: number | number[];
|
|
346
|
+
gapY?: number | number[];
|
|
347
|
+
rows?: number | number[];
|
|
348
|
+
}
|
|
349
|
+
/**
|
|
350
|
+
* @public
|
|
351
|
+
*/
|
|
352
|
+
interface ResponsiveGridItemProps {
|
|
353
|
+
column?: GridItemColumn | GridItemColumn[];
|
|
354
|
+
columnStart?: GridItemColumnStart | GridItemColumnStart[];
|
|
355
|
+
columnEnd?: GridItemColumnEnd | GridItemColumnEnd[];
|
|
356
|
+
row?: GridItemRow | GridItemRow[];
|
|
357
|
+
rowStart?: GridItemRowStart | GridItemRowStart[];
|
|
358
|
+
rowEnd?: GridItemRowEnd | GridItemRowEnd[];
|
|
359
|
+
}
|
|
360
|
+
/**
|
|
361
|
+
* @public
|
|
362
|
+
*/
|
|
363
|
+
interface ResponsiveMarginProps {
|
|
364
|
+
/** Applies margins to all sides. The property is responsive. */
|
|
365
|
+
margin?: number | number[];
|
|
366
|
+
/** Applies margins to the left and right sides. The property is responsive. */
|
|
367
|
+
marginX?: number | number[];
|
|
368
|
+
/** Applies margins to the top and bottom sides. The property is responsive. */
|
|
369
|
+
marginY?: number | number[];
|
|
370
|
+
marginTop?: number | number[];
|
|
371
|
+
marginRight?: number | number[];
|
|
372
|
+
marginBottom?: number | number[];
|
|
373
|
+
marginLeft?: number | number[];
|
|
374
|
+
}
|
|
375
|
+
/**
|
|
376
|
+
* @public
|
|
377
|
+
*/
|
|
378
|
+
interface ResponsivePaddingProps {
|
|
379
|
+
padding?: number | number[];
|
|
380
|
+
paddingX?: number | number[];
|
|
381
|
+
paddingY?: number | number[];
|
|
382
|
+
paddingTop?: number | number[];
|
|
383
|
+
paddingRight?: number | number[];
|
|
384
|
+
paddingBottom?: number | number[];
|
|
385
|
+
paddingLeft?: number | number[];
|
|
386
|
+
}
|
|
387
|
+
/**
|
|
388
|
+
* @public
|
|
389
|
+
*/
|
|
390
|
+
interface ResponsiveRadiusProps {
|
|
391
|
+
radius?: Radius | Radius[];
|
|
392
|
+
}
|
|
393
|
+
/**
|
|
394
|
+
* @public
|
|
395
|
+
*/
|
|
396
|
+
interface ResponsiveShadowProps {
|
|
397
|
+
shadow?: number | number[];
|
|
398
|
+
}
|
|
399
|
+
/**
|
|
400
|
+
* @public
|
|
401
|
+
*/
|
|
402
|
+
interface ResponsiveWidthProps {
|
|
403
|
+
width?: number | 'auto' | (number | 'auto')[];
|
|
404
|
+
}
|
|
405
|
+
/**
|
|
406
|
+
* @public
|
|
407
|
+
*/
|
|
408
|
+
type Delay = number | Partial<{
|
|
409
|
+
open: number;
|
|
410
|
+
close: number;
|
|
411
|
+
}>;
|
|
412
|
+
/**
|
|
413
|
+
* @public
|
|
414
|
+
*/
|
|
415
|
+
interface MenuProps extends ResponsivePaddingProps {
|
|
416
|
+
/**
|
|
417
|
+
* @deprecated Use `shouldFocus="first"` instead.
|
|
418
|
+
*/
|
|
419
|
+
'focusFirst'?: boolean;
|
|
420
|
+
/**
|
|
421
|
+
* @deprecated Use `shouldFocus="last"` instead.
|
|
422
|
+
*/
|
|
423
|
+
'focusLast'?: boolean;
|
|
424
|
+
'onClickOutside'?: (event: MouseEvent) => void;
|
|
425
|
+
'onEscape'?: () => void;
|
|
426
|
+
'onItemClick'?: () => void;
|
|
427
|
+
'onItemSelect'?: (index: number) => void;
|
|
428
|
+
'originElement'?: HTMLElement | null;
|
|
429
|
+
'registerElement'?: (el: HTMLElement) => () => void;
|
|
430
|
+
'shouldFocus'?: 'first' | 'last' | null;
|
|
431
|
+
'space'?: number | number[];
|
|
432
|
+
'aria-labelledby'?: string;
|
|
433
|
+
'onBlurCapture'?: (event: FocusEvent) => void;
|
|
434
|
+
}
|
|
435
|
+
/**
|
|
436
|
+
* The `Menu` component is a building block for application menus.
|
|
437
|
+
*
|
|
438
|
+
* @public
|
|
439
|
+
*/
|
|
440
|
+
declare const Menu: react141.ForwardRefExoticComponent<Omit<MenuProps & Omit<react141.HTMLProps<HTMLDivElement>, "as" | "height" | "role" | "tabIndex">, "ref"> & react141.RefAttributes<HTMLDivElement>>;
|
|
441
|
+
/**
|
|
442
|
+
* @public
|
|
443
|
+
*/
|
|
444
|
+
declare const MenuDivider: styled_components_dist_types0.IStyledComponentBase<"web", styled_components0.FastOmit<react141.DetailedHTMLProps<react141.HTMLAttributes<HTMLHRElement>, HTMLHRElement>, never>> & string;
|
|
445
|
+
/**
|
|
446
|
+
* @public
|
|
447
|
+
*/
|
|
448
|
+
interface AvatarProps {
|
|
449
|
+
/** @beta */
|
|
450
|
+
__unstable_hideInnerStroke?: boolean;
|
|
451
|
+
animateArrowFrom?: AvatarPosition;
|
|
452
|
+
arrowPosition?: AvatarPosition;
|
|
453
|
+
as?: React.ElementType | keyof React.JSX.IntrinsicElements;
|
|
454
|
+
color?: ThemeColorAvatarColorKey;
|
|
455
|
+
initials?: string;
|
|
456
|
+
onImageLoadError?: (event: Error) => void;
|
|
457
|
+
size?: AvatarSize | AvatarSize[];
|
|
458
|
+
src?: string;
|
|
459
|
+
/**
|
|
460
|
+
* The status of the entity this Avatar represents.
|
|
461
|
+
* @alpha
|
|
462
|
+
*/
|
|
463
|
+
status?: AvatarStatus;
|
|
464
|
+
title?: string;
|
|
465
|
+
}
|
|
466
|
+
/**
|
|
467
|
+
* Avatars are used to represent people and other agents (e.g. bots).
|
|
468
|
+
*
|
|
469
|
+
* @public
|
|
470
|
+
*/
|
|
471
|
+
declare const Avatar: react141.ForwardRefExoticComponent<AvatarProps & Omit<react141.HTMLProps<HTMLDivElement>, "ref" | "as"> & react141.RefAttributes<HTMLDivElement>>;
|
|
472
|
+
/**
|
|
473
|
+
* @public
|
|
474
|
+
*/
|
|
475
|
+
interface AvatarCounterProps {
|
|
476
|
+
count: number;
|
|
477
|
+
size?: AvatarSize | AvatarSize[];
|
|
478
|
+
/** @deprecated No longer supported. */
|
|
479
|
+
tone?: 'navbar';
|
|
480
|
+
}
|
|
481
|
+
/**
|
|
482
|
+
* @public
|
|
483
|
+
*/
|
|
484
|
+
declare const AvatarCounter: react141.ForwardRefExoticComponent<AvatarCounterProps & react141.RefAttributes<HTMLDivElement>>;
|
|
485
|
+
/**
|
|
486
|
+
* @public
|
|
487
|
+
*/
|
|
488
|
+
interface AvatarStackProps {
|
|
489
|
+
children: React.ReactNode;
|
|
490
|
+
maxLength?: number;
|
|
491
|
+
size?: AvatarSize | AvatarSize[];
|
|
492
|
+
/** @deprecated No longer supported. */
|
|
493
|
+
tone?: 'navbar';
|
|
494
|
+
}
|
|
495
|
+
/**
|
|
496
|
+
* @public
|
|
497
|
+
*/
|
|
498
|
+
declare const AvatarStack: react141.ForwardRefExoticComponent<AvatarStackProps & Omit<react141.HTMLProps<HTMLDivElement>, "ref" | "as"> & react141.RefAttributes<HTMLDivElement>>;
|
|
499
|
+
/**
|
|
500
|
+
* @internal
|
|
501
|
+
*/
|
|
502
|
+
interface AvatarRootStyleProps {
|
|
503
|
+
$color: ThemeColorAvatarColorKey;
|
|
504
|
+
}
|
|
505
|
+
/**
|
|
506
|
+
* @internal
|
|
507
|
+
*/
|
|
508
|
+
interface ResponsiveAvatarSizeStyleProps {
|
|
509
|
+
$size: AvatarSize[];
|
|
510
|
+
}
|
|
511
|
+
/**
|
|
512
|
+
* @public
|
|
513
|
+
*/
|
|
514
|
+
interface BoxProps extends ResponsiveFlexItemProps, ResponsiveBoxProps, ResponsiveGridItemProps, ResponsiveMarginProps, ResponsivePaddingProps {
|
|
515
|
+
as?: React.ElementType | keyof React.JSX.IntrinsicElements;
|
|
516
|
+
forwardedAs?: React.ElementType | keyof React.JSX.IntrinsicElements;
|
|
517
|
+
}
|
|
518
|
+
/**
|
|
519
|
+
* The `Box` component is a basic layout wrapper component which provides utility properties
|
|
520
|
+
* for flex, margins and padding.
|
|
521
|
+
*
|
|
522
|
+
* @public
|
|
523
|
+
*/
|
|
524
|
+
declare const Box: react141.ForwardRefExoticComponent<Omit<BoxProps & Omit<react141.HTMLProps<HTMLDivElement>, "as" | "height">, "ref"> & react141.RefAttributes<HTMLDivElement>>;
|
|
525
|
+
/**
|
|
526
|
+
* @public
|
|
527
|
+
*/
|
|
528
|
+
interface BadgeProps extends BoxProps, ResponsiveRadiusProps {
|
|
529
|
+
as?: React.ElementType | keyof React.JSX.IntrinsicElements;
|
|
530
|
+
fontSize?: number | number[];
|
|
531
|
+
/** @deprecated No longer used. */
|
|
532
|
+
mode?: BadgeMode;
|
|
533
|
+
tone?: BadgeTone;
|
|
534
|
+
}
|
|
535
|
+
/**
|
|
536
|
+
* Badges are used to tag resources.
|
|
537
|
+
*
|
|
538
|
+
* @public
|
|
539
|
+
*/
|
|
540
|
+
declare const Badge: react141.ForwardRefExoticComponent<Omit<BadgeProps & react141.HTMLProps<HTMLDivElement>, "ref"> & react141.RefAttributes<unknown>>;
|
|
541
|
+
/**
|
|
542
|
+
* @public
|
|
543
|
+
*/
|
|
544
|
+
interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
|
|
545
|
+
as?: React.ElementType | keyof React.JSX.IntrinsicElements;
|
|
546
|
+
fontSize?: number | number[];
|
|
547
|
+
mode?: ButtonMode;
|
|
548
|
+
icon?: React.ElementType | React.ReactNode;
|
|
549
|
+
iconRight?: React.ElementType | React.ReactNode;
|
|
550
|
+
justify?: FlexJustify | FlexJustify[];
|
|
551
|
+
/**
|
|
552
|
+
* @beta Do not use in production, as this might change.
|
|
553
|
+
*/
|
|
554
|
+
loading?: boolean;
|
|
555
|
+
selected?: boolean;
|
|
556
|
+
space?: number | number[];
|
|
557
|
+
muted?: boolean;
|
|
558
|
+
text?: React.ReactNode;
|
|
559
|
+
textAlign?: ButtonTextAlign;
|
|
560
|
+
textWeight?: ThemeFontWeightKey;
|
|
561
|
+
tone?: ButtonTone;
|
|
562
|
+
type?: 'button' | 'reset' | 'submit';
|
|
563
|
+
width?: ButtonWidth;
|
|
564
|
+
}
|
|
565
|
+
/**
|
|
566
|
+
* @public
|
|
567
|
+
*/
|
|
568
|
+
declare const Button: react141.ForwardRefExoticComponent<Omit<ButtonProps & Omit<react141.HTMLProps<HTMLButtonElement>, "as" | "width">, "ref"> & react141.RefAttributes<HTMLButtonElement>>;
|
|
569
|
+
/**
|
|
570
|
+
* @public
|
|
571
|
+
*/
|
|
572
|
+
interface CardProps extends BoxProps, ResponsiveBorderProps, ResponsiveRadiusProps, ResponsiveShadowProps {
|
|
573
|
+
/**
|
|
574
|
+
* Do not use in production.
|
|
575
|
+
* @beta
|
|
576
|
+
*/
|
|
577
|
+
__unstable_checkered?: boolean;
|
|
578
|
+
/**
|
|
579
|
+
* Do not use in production.
|
|
580
|
+
* @beta
|
|
581
|
+
*/
|
|
582
|
+
__unstable_focusRing?: boolean;
|
|
583
|
+
muted?: boolean;
|
|
584
|
+
pressed?: boolean;
|
|
585
|
+
scheme?: ThemeColorSchemeKey;
|
|
586
|
+
tone?: CardTone;
|
|
587
|
+
}
|
|
588
|
+
/**
|
|
589
|
+
* The `Card` component acts much like a `Box`, but with a background and foreground color.
|
|
590
|
+
* Components within a `Card` inherit its colors.
|
|
591
|
+
*
|
|
592
|
+
* @public
|
|
593
|
+
*/
|
|
594
|
+
declare const Card: react141.ForwardRefExoticComponent<Omit<CardProps & Omit<react141.HTMLProps<HTMLDivElement>, "as" | "height">, "ref"> & react141.RefAttributes<HTMLDivElement>>;
|
|
595
|
+
/**
|
|
596
|
+
* @internal
|
|
597
|
+
*/
|
|
598
|
+
interface CardStyleProps {
|
|
599
|
+
$checkered: boolean;
|
|
600
|
+
$focusRing: boolean;
|
|
601
|
+
$muted: boolean;
|
|
602
|
+
$tone: ThemeColorToneKey;
|
|
603
|
+
}
|
|
604
|
+
/**
|
|
605
|
+
* @public
|
|
606
|
+
*/
|
|
607
|
+
interface CheckboxProps {
|
|
608
|
+
indeterminate?: boolean;
|
|
609
|
+
customValidity?: string;
|
|
610
|
+
}
|
|
611
|
+
/**
|
|
612
|
+
* Checkboxes allow the user to select one or more items from a set.
|
|
613
|
+
*
|
|
614
|
+
* @public
|
|
615
|
+
*/
|
|
616
|
+
declare const Checkbox: react141.ForwardRefExoticComponent<Omit<Omit<react141.HTMLProps<HTMLInputElement>, "as" | "type"> & CheckboxProps, "ref"> & react141.RefAttributes<HTMLInputElement>>;
|
|
617
|
+
/**
|
|
618
|
+
* @public
|
|
619
|
+
*/
|
|
620
|
+
interface CodeProps {
|
|
621
|
+
as?: React.ElementType | keyof React.JSX.IntrinsicElements;
|
|
622
|
+
/** Define the language to use for syntax highlighting. */
|
|
623
|
+
language?: string;
|
|
624
|
+
size?: number | number[];
|
|
625
|
+
weight?: string;
|
|
626
|
+
}
|
|
627
|
+
/**
|
|
628
|
+
* @public
|
|
629
|
+
*/
|
|
630
|
+
declare const Code: react141.ForwardRefExoticComponent<Omit<CodeProps & Omit<react141.HTMLProps<HTMLElement>, "as" | "size">, "ref"> & react141.RefAttributes<HTMLElement>>;
|
|
631
|
+
/**
|
|
632
|
+
* @public
|
|
633
|
+
*/
|
|
634
|
+
interface ContainerProps extends BoxProps, ResponsiveWidthProps {}
|
|
635
|
+
/**
|
|
636
|
+
* The `Container` component wraps content layout in a defined set of widths.
|
|
637
|
+
*
|
|
638
|
+
* @public
|
|
639
|
+
*/
|
|
640
|
+
declare const Container: react141.ForwardRefExoticComponent<Omit<ContainerProps & Omit<react141.HTMLProps<HTMLDivElement>, "as" | "height" | "width">, "ref"> & react141.RefAttributes<HTMLDivElement>>;
|
|
641
|
+
/**
|
|
642
|
+
* @internal
|
|
643
|
+
*/
|
|
644
|
+
interface ResponsiveWidthStyleProps {
|
|
645
|
+
$width: (number | 'auto')[];
|
|
646
|
+
}
|
|
647
|
+
/**
|
|
648
|
+
* @public
|
|
649
|
+
*/
|
|
650
|
+
interface FlexProps extends Omit<BoxProps, 'display'>, ResponsiveFlexProps, ResponsiveFlexItemProps {
|
|
651
|
+
gap?: number | number[];
|
|
652
|
+
}
|
|
653
|
+
/**
|
|
654
|
+
* The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
|
|
655
|
+
*
|
|
656
|
+
* @public
|
|
657
|
+
*/
|
|
658
|
+
declare const Flex: react141.ForwardRefExoticComponent<Omit<FlexProps & Omit<react141.HTMLProps<HTMLDivElement>, "as" | "wrap">, "ref"> & react141.RefAttributes<HTMLDivElement>>;
|
|
659
|
+
/**
|
|
660
|
+
* @public
|
|
661
|
+
*/
|
|
662
|
+
interface GridProps extends Omit<BoxProps, 'display'>, ResponsiveGridProps {}
|
|
663
|
+
/**
|
|
664
|
+
* The `Grid` component is for building 2-dimensional layers (based on CSS grid).
|
|
665
|
+
*
|
|
666
|
+
* @public
|
|
667
|
+
*/
|
|
668
|
+
declare const Grid: react141.ForwardRefExoticComponent<Omit<GridProps & Omit<react141.HTMLProps<HTMLDivElement>, "as" | "height" | "rows">, "ref"> & react141.RefAttributes<HTMLDivElement>>;
|
|
669
|
+
/**
|
|
670
|
+
* @public
|
|
671
|
+
*/
|
|
672
|
+
interface HeadingProps {
|
|
673
|
+
accent?: boolean;
|
|
674
|
+
align?: TextAlign | TextAlign[];
|
|
675
|
+
as?: React.ElementType | keyof React.JSX.IntrinsicElements;
|
|
676
|
+
muted?: boolean;
|
|
677
|
+
size?: number | number[];
|
|
678
|
+
/**
|
|
679
|
+
* Controls how overflowing text is treated.
|
|
680
|
+
* Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
|
|
681
|
+
* @beta
|
|
682
|
+
*/
|
|
683
|
+
textOverflow?: 'ellipsis';
|
|
684
|
+
weight?: ThemeFontWeightKey;
|
|
685
|
+
}
|
|
686
|
+
/**
|
|
687
|
+
* Typographic headings.
|
|
688
|
+
*
|
|
689
|
+
* @public
|
|
690
|
+
*/
|
|
691
|
+
declare const Heading: react141.ForwardRefExoticComponent<Omit<HeadingProps & Omit<react141.HTMLProps<HTMLElement>, "as" | "size">, "ref"> & react141.RefAttributes<HTMLElement>>;
|
|
692
|
+
/**
|
|
693
|
+
* @public
|
|
694
|
+
*/
|
|
695
|
+
interface InlineProps extends Omit<BoxProps, 'display'> {
|
|
696
|
+
/** The spacing between children. */
|
|
697
|
+
space?: number | number[];
|
|
698
|
+
}
|
|
699
|
+
/**
|
|
700
|
+
* The `Inline` component is a layout utility for aligning and spacing items horizontally.
|
|
701
|
+
*
|
|
702
|
+
* @public
|
|
703
|
+
*/
|
|
704
|
+
declare const Inline: react141.ForwardRefExoticComponent<Omit<InlineProps & react141.HTMLProps<HTMLDivElement>, "ref"> & react141.RefAttributes<unknown>>;
|
|
705
|
+
/**
|
|
706
|
+
* @public
|
|
707
|
+
*/
|
|
708
|
+
interface KBDProps {
|
|
709
|
+
as?: React.ElementType | keyof React.JSX.IntrinsicElements;
|
|
710
|
+
fontSize?: number | number[];
|
|
711
|
+
padding?: number | number[];
|
|
712
|
+
radius?: Radius | Radius[];
|
|
713
|
+
}
|
|
714
|
+
/**
|
|
715
|
+
* Used to define some text as keyboard input.
|
|
716
|
+
*
|
|
717
|
+
* @public
|
|
718
|
+
*/
|
|
719
|
+
declare const KBD: react141.ForwardRefExoticComponent<KBDProps & Omit<react141.HTMLProps<HTMLElement>, "ref" | "as" | "size"> & react141.RefAttributes<HTMLDivElement>>;
|
|
720
|
+
/**
|
|
721
|
+
* @public
|
|
722
|
+
*/
|
|
723
|
+
interface LabelProps {
|
|
724
|
+
accent?: boolean;
|
|
725
|
+
align?: TextAlign | TextAlign[];
|
|
726
|
+
as?: React.ElementType | keyof React.JSX.IntrinsicElements;
|
|
727
|
+
muted?: boolean;
|
|
728
|
+
size?: number | number[];
|
|
729
|
+
/**
|
|
730
|
+
* Controls how overflowing text is treated.
|
|
731
|
+
* Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
|
|
732
|
+
* @beta
|
|
733
|
+
*/
|
|
734
|
+
textOverflow?: 'ellipsis';
|
|
735
|
+
weight?: ThemeFontWeightKey;
|
|
736
|
+
}
|
|
737
|
+
/**
|
|
738
|
+
* Typographic labels.
|
|
739
|
+
*
|
|
740
|
+
* @public
|
|
741
|
+
*/
|
|
742
|
+
declare const Label: react141.ForwardRefExoticComponent<Omit<LabelProps & Omit<react141.HTMLProps<HTMLDivElement>, "as" | "size">, "ref"> & react141.RefAttributes<HTMLDivElement>>;
|
|
743
|
+
/** @internal */
|
|
744
|
+
declare const Arrow: react141.ForwardRefExoticComponent<Omit<{
|
|
745
|
+
width: number;
|
|
746
|
+
height: number;
|
|
747
|
+
radius?: number;
|
|
748
|
+
} & Omit<HTMLProps<HTMLDivElement>, "height" | "width">, "ref"> & react141.RefAttributes<HTMLDivElement>>;
|
|
749
|
+
/**
|
|
750
|
+
* @public
|
|
751
|
+
*/
|
|
752
|
+
interface BoundaryElementProviderProps {
|
|
753
|
+
children: React.ReactNode;
|
|
754
|
+
element: HTMLElement | null;
|
|
755
|
+
}
|
|
756
|
+
/**
|
|
757
|
+
* @public
|
|
758
|
+
*/
|
|
759
|
+
declare function BoundaryElementProvider(props: BoundaryElementProviderProps): React.JSX.Element;
|
|
760
|
+
declare namespace BoundaryElementProvider {
|
|
761
|
+
var displayName: string;
|
|
762
|
+
}
|
|
763
|
+
/**
|
|
764
|
+
* @public
|
|
765
|
+
*/
|
|
766
|
+
interface BoundaryElementContextValue {
|
|
767
|
+
version: 0.0;
|
|
768
|
+
element: HTMLElement | null;
|
|
769
|
+
}
|
|
770
|
+
/**
|
|
771
|
+
* @public
|
|
772
|
+
*/
|
|
773
|
+
declare function useBoundaryElement(): BoundaryElementContextValue;
|
|
774
|
+
/**
|
|
775
|
+
* @internal
|
|
776
|
+
* @deprecated this component will be removed in the next major release
|
|
777
|
+
*/
|
|
778
|
+
declare function ConditionalWrapper({
|
|
779
|
+
children,
|
|
780
|
+
condition,
|
|
781
|
+
wrapper
|
|
782
|
+
}: {
|
|
783
|
+
children: React.ReactNode;
|
|
784
|
+
condition: boolean;
|
|
785
|
+
wrapper: (children: React.ReactNode) => React.ReactNode;
|
|
786
|
+
}): React.ReactNode;
|
|
787
|
+
declare namespace ConditionalWrapper {
|
|
788
|
+
var displayName: string;
|
|
789
|
+
}
|
|
790
|
+
/**
|
|
791
|
+
* DO NOT USE IN PRODUCTION.
|
|
792
|
+
* @beta
|
|
793
|
+
*/
|
|
794
|
+
interface MediaQueryProps {
|
|
795
|
+
as?: React.ElementType | keyof React.JSX.IntrinsicElements;
|
|
796
|
+
media?: number[];
|
|
797
|
+
}
|
|
798
|
+
/**
|
|
799
|
+
* DO NOT USE IN PRODUCTION.
|
|
800
|
+
* @beta
|
|
801
|
+
*/
|
|
802
|
+
declare const ElementQuery: react141.ForwardRefExoticComponent<Omit<MediaQueryProps & Omit<react141.HTMLProps<HTMLDivElement>, "as" | "media">, "ref"> & react141.RefAttributes<HTMLDivElement>>;
|
|
803
|
+
/**
|
|
804
|
+
* DO NOT USE IN PRODUCTION
|
|
805
|
+
* @beta
|
|
806
|
+
*/
|
|
807
|
+
type ErrorBoundaryProps = PropsWithChildren<{
|
|
808
|
+
onCatch: (params: {
|
|
809
|
+
error: Error;
|
|
810
|
+
info: React.ErrorInfo;
|
|
811
|
+
}) => void;
|
|
812
|
+
}>;
|
|
813
|
+
/**
|
|
814
|
+
* DO NOT USE IN PRODUCTION
|
|
815
|
+
* @beta
|
|
816
|
+
*/
|
|
817
|
+
interface ErrorBoundaryState {
|
|
818
|
+
error: Error | null;
|
|
819
|
+
}
|
|
820
|
+
/**
|
|
821
|
+
* DO NOT USE IN PRODUCTION
|
|
822
|
+
* @beta
|
|
823
|
+
*/
|
|
824
|
+
declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
|
|
825
|
+
state: ErrorBoundaryState;
|
|
826
|
+
static getDerivedStateFromError(error: Error): ErrorBoundaryState;
|
|
827
|
+
componentDidCatch(error: Error, info: React.ErrorInfo): void;
|
|
828
|
+
render(): React.ReactNode;
|
|
829
|
+
}
|
|
830
|
+
/**
|
|
831
|
+
* @public
|
|
832
|
+
*/
|
|
833
|
+
interface LayerProps {
|
|
834
|
+
as?: React.ElementType | keyof React.JSX.IntrinsicElements;
|
|
835
|
+
/** A callback that fires when the layer becomes the top layer when it was not the top layer before. */
|
|
836
|
+
onActivate?: (props: {
|
|
837
|
+
activeElement: HTMLElement | null;
|
|
838
|
+
}) => void;
|
|
839
|
+
zOffset?: number | number[];
|
|
840
|
+
}
|
|
841
|
+
/**
|
|
842
|
+
* @public
|
|
843
|
+
*/
|
|
844
|
+
declare const Layer: react141.ForwardRefExoticComponent<Omit<LayerProps & Omit<react141.HTMLProps<HTMLDivElement>, "as">, "ref"> & react141.RefAttributes<HTMLDivElement>>;
|
|
845
|
+
/**
|
|
846
|
+
* @public
|
|
847
|
+
*/
|
|
848
|
+
interface LayerProviderProps {
|
|
849
|
+
children?: React.ReactNode;
|
|
850
|
+
zOffset?: number | number[];
|
|
851
|
+
}
|
|
852
|
+
/**
|
|
853
|
+
* @public
|
|
854
|
+
*/
|
|
855
|
+
declare function LayerProvider(props: LayerProviderProps): React.JSX.Element;
|
|
856
|
+
declare namespace LayerProvider {
|
|
857
|
+
var displayName: string;
|
|
858
|
+
}
|
|
859
|
+
/** @public */
|
|
860
|
+
interface LayerContextValue {
|
|
861
|
+
version: 0.0;
|
|
862
|
+
isTopLayer: boolean;
|
|
863
|
+
level?: number;
|
|
864
|
+
registerChild: (childLevel?: number) => () => void;
|
|
865
|
+
size: number;
|
|
866
|
+
zIndex: number;
|
|
867
|
+
}
|
|
868
|
+
/**
|
|
869
|
+
* @public
|
|
870
|
+
*/
|
|
871
|
+
declare function useLayer(): LayerContextValue;
|
|
872
|
+
/**
|
|
873
|
+
* @public
|
|
874
|
+
*/
|
|
875
|
+
interface PortalProps {
|
|
876
|
+
children: React.ReactNode;
|
|
877
|
+
/**
|
|
878
|
+
* @beta This API might change. DO NOT USE IN PRODUCTION.
|
|
879
|
+
*/
|
|
880
|
+
__unstable_name?: string;
|
|
881
|
+
}
|
|
882
|
+
/**
|
|
883
|
+
* @public
|
|
884
|
+
*/
|
|
885
|
+
declare function Portal(props: PortalProps): React.ReactPortal | null;
|
|
886
|
+
declare namespace Portal {
|
|
887
|
+
var displayName: string;
|
|
888
|
+
}
|
|
889
|
+
/**
|
|
890
|
+
* @public
|
|
891
|
+
*/
|
|
892
|
+
interface PortalProviderProps {
|
|
893
|
+
/**
|
|
894
|
+
* @deprecated Use `<BoundaryElementProvider element={...} />` instead
|
|
895
|
+
*/
|
|
896
|
+
boundaryElement?: HTMLElement | null;
|
|
897
|
+
children: React.ReactNode;
|
|
898
|
+
element?: HTMLElement | null;
|
|
899
|
+
/**
|
|
900
|
+
* @beta
|
|
901
|
+
*/
|
|
902
|
+
__unstable_elements?: Record<string, HTMLElement | null | undefined>;
|
|
903
|
+
}
|
|
904
|
+
/**
|
|
905
|
+
* @public
|
|
906
|
+
*/
|
|
907
|
+
declare function PortalProvider(props: PortalProviderProps): React.JSX.Element;
|
|
908
|
+
declare namespace PortalProvider {
|
|
909
|
+
var displayName: string;
|
|
910
|
+
}
|
|
911
|
+
/**
|
|
912
|
+
* @public
|
|
913
|
+
*/
|
|
914
|
+
interface PortalContextValue {
|
|
915
|
+
version: 0.0;
|
|
916
|
+
boundaryElement: HTMLElement | null;
|
|
917
|
+
element: HTMLElement | null;
|
|
918
|
+
elements?: Record<string, HTMLElement | null | undefined>;
|
|
919
|
+
}
|
|
920
|
+
/**
|
|
921
|
+
* @public
|
|
922
|
+
*/
|
|
923
|
+
declare function usePortal(): PortalContextValue;
|
|
924
|
+
/**
|
|
925
|
+
* @public
|
|
926
|
+
*/
|
|
927
|
+
interface SrOnlyProps {
|
|
928
|
+
as?: React.ElementType | keyof React.JSX.IntrinsicElements;
|
|
929
|
+
children?: React.ReactNode;
|
|
930
|
+
}
|
|
931
|
+
/**
|
|
932
|
+
* @public
|
|
933
|
+
*/
|
|
934
|
+
declare const SrOnly: react141.ForwardRefExoticComponent<Omit<SrOnlyProps & Omit<react141.HTMLProps<HTMLDivElement>, "as" | "aria-hidden">, "ref"> & react141.RefAttributes<HTMLDivElement>>;
|
|
935
|
+
/**
|
|
936
|
+
* @beta
|
|
937
|
+
*/
|
|
938
|
+
interface VirtualListChangeOpts {
|
|
939
|
+
fromIndex: number;
|
|
940
|
+
gap: number;
|
|
941
|
+
itemHeight: number;
|
|
942
|
+
scrollHeight: number;
|
|
943
|
+
scrollTop: number;
|
|
944
|
+
toIndex: number;
|
|
945
|
+
}
|
|
946
|
+
/**
|
|
947
|
+
* @beta
|
|
948
|
+
*/
|
|
949
|
+
interface VirtualListProps<Item = any> {
|
|
950
|
+
as?: React.ElementType | keyof React.JSX.IntrinsicElements;
|
|
951
|
+
gap?: number;
|
|
952
|
+
getItemKey?: (item: Item, itemIndex: number) => string;
|
|
953
|
+
items?: Item[];
|
|
954
|
+
onChange?: (opts: VirtualListChangeOpts) => void;
|
|
955
|
+
renderItem?: (item: Item) => React.ReactNode;
|
|
956
|
+
}
|
|
957
|
+
/**
|
|
958
|
+
* @beta
|
|
959
|
+
*/
|
|
960
|
+
declare const VirtualList: react141.ForwardRefExoticComponent<VirtualListProps<any> & StackProps & Omit<react141.HTMLProps<HTMLDivElement>, "ref" | "as" | "children" | "onChange"> & react141.RefAttributes<HTMLDivElement>>;
|
|
961
|
+
/** @beta */
|
|
962
|
+
type PopoverUpdateCallback = () => void;
|
|
963
|
+
/** @public */
|
|
964
|
+
type PopoverWidth = number | 'auto';
|
|
965
|
+
/** @public */
|
|
966
|
+
interface PopoverProps extends Omit<LayerProps, 'as'>, ResponsiveRadiusProps, ResponsiveShadowProps {
|
|
967
|
+
/** @beta */
|
|
968
|
+
__unstable_margins?: PopoverMargins;
|
|
969
|
+
/**
|
|
970
|
+
* Whether the popover should animate in and out.
|
|
971
|
+
*
|
|
972
|
+
* @beta
|
|
973
|
+
* @defaultValue false
|
|
974
|
+
*/
|
|
975
|
+
animate?: boolean;
|
|
976
|
+
arrow?: boolean;
|
|
977
|
+
/** @deprecated Use `floatingBoundary` and/or `referenceBoundary` instead */
|
|
978
|
+
boundaryElement?: HTMLElement | null;
|
|
979
|
+
children?: React.JSX.Element;
|
|
980
|
+
/**
|
|
981
|
+
* When `true`, prevent overflow within the current boundary:
|
|
982
|
+
* - by flipping on its side axis
|
|
983
|
+
* - by resizing
|
|
984
|
+
/*
|
|
985
|
+
* Note that:
|
|
986
|
+
* - setting `preventOverflow` to `true` also prevents overflow on its side axis
|
|
987
|
+
* - setting `matchReferenceWidth` to `true` also causes the popover to resize
|
|
988
|
+
*
|
|
989
|
+
* @defaultValue false
|
|
990
|
+
*/
|
|
991
|
+
constrainSize?: boolean;
|
|
992
|
+
content?: React.ReactNode;
|
|
993
|
+
disabled?: boolean;
|
|
994
|
+
fallbackPlacements?: Placement[];
|
|
995
|
+
floatingBoundary?: HTMLElement | null;
|
|
996
|
+
/**
|
|
997
|
+
* When `true`, set the maximum width to match the reference element, and also prevent overflow within
|
|
998
|
+
* the current boundary by resizing.
|
|
999
|
+
*
|
|
1000
|
+
* Note that setting `constrainSize` to `true` also causes the popover to resize
|
|
1001
|
+
*
|
|
1002
|
+
* @defaultValue false
|
|
1003
|
+
*/
|
|
1004
|
+
matchReferenceWidth?: boolean;
|
|
1005
|
+
/**
|
|
1006
|
+
* When true, blocks all pointer interaction with elements beneath the popover until closed.
|
|
1007
|
+
*
|
|
1008
|
+
* @beta
|
|
1009
|
+
* @defaultValue false
|
|
1010
|
+
*/
|
|
1011
|
+
modal?: boolean;
|
|
1012
|
+
open?: boolean;
|
|
1013
|
+
overflow?: BoxOverflow;
|
|
1014
|
+
padding?: number | number[];
|
|
1015
|
+
placement?: Placement;
|
|
1016
|
+
/**
|
|
1017
|
+
* When 'flip' (default), the placement is determined from the initial placement and the
|
|
1018
|
+
* fallback placements in order. Whichever fits in the viewport first.
|
|
1019
|
+
*
|
|
1020
|
+
* When 'autoPlacement', the initial placement and all fallback placements are evaluated
|
|
1021
|
+
* and the placement with the most viewport space available.
|
|
1022
|
+
*
|
|
1023
|
+
* Option is only relevant if either `constrainSize` or `preventOverflow` is `true`
|
|
1024
|
+
*/
|
|
1025
|
+
placementStrategy?: 'flip' | 'autoPlacement';
|
|
1026
|
+
/** Whether or not to render the popover in a portal element. */
|
|
1027
|
+
portal?: boolean | string;
|
|
1028
|
+
preventOverflow?: boolean;
|
|
1029
|
+
referenceBoundary?: HTMLElement | null;
|
|
1030
|
+
/**
|
|
1031
|
+
* When defined, the popover will be positioned relative to this element.
|
|
1032
|
+
* The children of the popover won't be rendered.
|
|
1033
|
+
*/
|
|
1034
|
+
referenceElement?: HTMLElement | null;
|
|
1035
|
+
scheme?: ThemeColorSchemeKey;
|
|
1036
|
+
tone?: CardTone;
|
|
1037
|
+
/** @beta */
|
|
1038
|
+
updateRef?: Ref<PopoverUpdateCallback | undefined>;
|
|
1039
|
+
width?: PopoverWidth | PopoverWidth[];
|
|
1040
|
+
}
|
|
1041
|
+
/**
|
|
1042
|
+
* The `Popover` component is used to display some content on top of another.
|
|
1043
|
+
*
|
|
1044
|
+
* @public
|
|
1045
|
+
*/
|
|
1046
|
+
declare const Popover: react141.ForwardRefExoticComponent<Omit<PopoverProps & Omit<react141.HTMLProps<HTMLDivElement>, "as" | "width" | "content" | "children">, "ref"> & react141.RefAttributes<HTMLDivElement>>;
|
|
1047
|
+
/**
|
|
1048
|
+
* @public
|
|
1049
|
+
*/
|
|
1050
|
+
interface RadioProps {
|
|
1051
|
+
customValidity?: string;
|
|
1052
|
+
}
|
|
1053
|
+
/**
|
|
1054
|
+
* The `Radio` component allows the user to select one option from a set.
|
|
1055
|
+
*
|
|
1056
|
+
* @public
|
|
1057
|
+
*/
|
|
1058
|
+
declare const Radio: react141.ForwardRefExoticComponent<Omit<Omit<react141.HTMLProps<HTMLInputElement>, "as" | "type"> & RadioProps, "ref"> & react141.RefAttributes<HTMLInputElement>>;
|
|
1059
|
+
/**
|
|
1060
|
+
* @public
|
|
1061
|
+
*/
|
|
1062
|
+
interface SelectProps {
|
|
1063
|
+
fontSize?: number | number[];
|
|
1064
|
+
padding?: number | number[];
|
|
1065
|
+
radius?: Radius | Radius[];
|
|
1066
|
+
space?: number | number[];
|
|
1067
|
+
customValidity?: string;
|
|
1068
|
+
}
|
|
1069
|
+
/**
|
|
1070
|
+
* The `Select` component provides control of options.
|
|
1071
|
+
*
|
|
1072
|
+
* @public
|
|
1073
|
+
*/
|
|
1074
|
+
declare const Select: react141.ForwardRefExoticComponent<Omit<SelectProps & Omit<react141.HTMLProps<HTMLSelectElement>, "as">, "ref"> & react141.RefAttributes<HTMLSelectElement>>;
|
|
1075
|
+
/**
|
|
1076
|
+
* @public
|
|
1077
|
+
*/
|
|
1078
|
+
interface SpinnerProps {
|
|
1079
|
+
muted?: boolean;
|
|
1080
|
+
size?: number | number[];
|
|
1081
|
+
}
|
|
1082
|
+
/**
|
|
1083
|
+
* Indicate that something is loading for an indeterminate amount of time.
|
|
1084
|
+
*
|
|
1085
|
+
* @public
|
|
1086
|
+
*/
|
|
1087
|
+
declare const Spinner: react141.ForwardRefExoticComponent<Omit<SpinnerProps & Omit<react141.HTMLProps<HTMLDivElement>, "as" | "size">, "ref"> & react141.RefAttributes<HTMLDivElement>>;
|
|
1088
|
+
/**
|
|
1089
|
+
* @public
|
|
1090
|
+
*/
|
|
1091
|
+
interface StackProps extends BoxProps {
|
|
1092
|
+
as?: React.ElementType | keyof React.JSX.IntrinsicElements;
|
|
1093
|
+
space?: number | number[];
|
|
1094
|
+
}
|
|
1095
|
+
/**
|
|
1096
|
+
* The `Stack` component is used to place elements on top of each other.
|
|
1097
|
+
*
|
|
1098
|
+
* @public
|
|
1099
|
+
*/
|
|
1100
|
+
declare const Stack: react141.ForwardRefExoticComponent<StackProps & Omit<react141.HTMLProps<HTMLDivElement>, "ref" | "as"> & react141.RefAttributes<HTMLDivElement>>;
|
|
1101
|
+
/**
|
|
1102
|
+
* @public
|
|
1103
|
+
*/
|
|
1104
|
+
interface SwitchProps {
|
|
1105
|
+
indeterminate?: boolean;
|
|
1106
|
+
}
|
|
1107
|
+
/**
|
|
1108
|
+
* The `Switch` component allows the user to toggle a setting on and off.
|
|
1109
|
+
*
|
|
1110
|
+
* Extends all properties of an `<input type="checkbox" />` element, except type.
|
|
1111
|
+
*
|
|
1112
|
+
* @public
|
|
1113
|
+
*/
|
|
1114
|
+
declare const Switch: react141.ForwardRefExoticComponent<Omit<Omit<react141.HTMLProps<HTMLInputElement>, "as" | "type"> & SwitchProps, "ref"> & react141.RefAttributes<HTMLInputElement>>;
|
|
1115
|
+
/**
|
|
1116
|
+
* @public
|
|
1117
|
+
*/
|
|
1118
|
+
interface TextProps {
|
|
1119
|
+
accent?: boolean;
|
|
1120
|
+
align?: TextAlign | TextAlign[];
|
|
1121
|
+
as?: React.ElementType | keyof React.JSX.IntrinsicElements;
|
|
1122
|
+
/** When `true` the text color will be muted. */
|
|
1123
|
+
muted?: boolean;
|
|
1124
|
+
size?: number | number[];
|
|
1125
|
+
/**
|
|
1126
|
+
* Controls how overflowing text is treated.
|
|
1127
|
+
* Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
|
|
1128
|
+
* @beta
|
|
1129
|
+
*/
|
|
1130
|
+
textOverflow?: 'ellipsis';
|
|
1131
|
+
weight?: ThemeFontWeightKey;
|
|
1132
|
+
}
|
|
1133
|
+
/**
|
|
1134
|
+
* The `Text` component is an agile, themed typographic element.
|
|
1135
|
+
*
|
|
1136
|
+
* @public
|
|
1137
|
+
*/
|
|
1138
|
+
declare const Text: react141.ForwardRefExoticComponent<Omit<TextProps & Omit<react141.HTMLProps<HTMLDivElement>, "as" | "size">, "ref"> & react141.RefAttributes<HTMLDivElement>>;
|
|
1139
|
+
/**
|
|
1140
|
+
* @public
|
|
1141
|
+
*/
|
|
1142
|
+
interface TextAreaProps extends ResponsiveRadiusProps {
|
|
1143
|
+
/**
|
|
1144
|
+
* @beta
|
|
1145
|
+
*/
|
|
1146
|
+
__unstable_disableFocusRing?: boolean;
|
|
1147
|
+
border?: boolean;
|
|
1148
|
+
customValidity?: string;
|
|
1149
|
+
fontSize?: number | number[];
|
|
1150
|
+
padding?: number | number[];
|
|
1151
|
+
weight?: ThemeFontWeightKey;
|
|
1152
|
+
}
|
|
1153
|
+
/**
|
|
1154
|
+
* A multiline text input.
|
|
1155
|
+
*
|
|
1156
|
+
|
|
1157
|
+
* @public
|
|
1158
|
+
*/
|
|
1159
|
+
declare const TextArea: react141.ForwardRefExoticComponent<Omit<TextAreaProps & Omit<react141.HTMLProps<HTMLTextAreaElement>, "as">, "ref"> & react141.RefAttributes<HTMLTextAreaElement>>;
|
|
1160
|
+
/**
|
|
1161
|
+
* @public
|
|
1162
|
+
*/
|
|
1163
|
+
type TextInputClearButtonProps = Omit<ButtonProps, 'as'> & Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'onClick' | 'onMouseDown' | 'ref'>;
|
|
1164
|
+
/**
|
|
1165
|
+
* @public
|
|
1166
|
+
*/
|
|
1167
|
+
type TextInputType = 'search' | 'date' | 'datetime-local' | 'email' | 'url' | 'month' | 'number' | 'password' | 'tel' | 'time' | 'text' | 'week' | 'color';
|
|
1168
|
+
/**
|
|
1169
|
+
* @public
|
|
1170
|
+
*/
|
|
1171
|
+
interface TextInputProps {
|
|
1172
|
+
/**
|
|
1173
|
+
* @beta
|
|
1174
|
+
*/
|
|
1175
|
+
__unstable_disableFocusRing?: boolean;
|
|
1176
|
+
border?: boolean;
|
|
1177
|
+
/**
|
|
1178
|
+
* @beta
|
|
1179
|
+
*/
|
|
1180
|
+
clearButton?: boolean | TextInputClearButtonProps;
|
|
1181
|
+
customValidity?: string;
|
|
1182
|
+
fontSize?: number | number[];
|
|
1183
|
+
icon?: React.ElementType | React.ReactNode;
|
|
1184
|
+
iconRight?: React.ElementType | React.ReactNode;
|
|
1185
|
+
/**
|
|
1186
|
+
* @beta
|
|
1187
|
+
*/
|
|
1188
|
+
onClear?: () => void;
|
|
1189
|
+
padding?: number | number[];
|
|
1190
|
+
prefix?: React.ReactNode;
|
|
1191
|
+
radius?: Radius | Radius[];
|
|
1192
|
+
space?: number | number[];
|
|
1193
|
+
suffix?: React.ReactNode;
|
|
1194
|
+
type?: TextInputType;
|
|
1195
|
+
weight?: ThemeFontWeightKey;
|
|
1196
|
+
}
|
|
1197
|
+
/**
|
|
1198
|
+
* Single line text input.
|
|
1199
|
+
*
|
|
1200
|
+
* @public
|
|
1201
|
+
*/
|
|
1202
|
+
declare const TextInput: react141.ForwardRefExoticComponent<Omit<TextInputProps & Omit<react141.HTMLProps<HTMLInputElement>, "as" | "type" | "prefix">, "ref"> & react141.RefAttributes<HTMLInputElement>>;
|
|
1203
|
+
/**
|
|
1204
|
+
* @public
|
|
1205
|
+
*/
|
|
1206
|
+
interface TooltipProps extends Omit<LayerProps, 'as'> {
|
|
1207
|
+
/** @deprecated Use `fallbackPlacements` instead. */
|
|
1208
|
+
allowedAutoPlacements?: Placement[];
|
|
1209
|
+
arrow?: boolean;
|
|
1210
|
+
boundaryElement?: HTMLElement | null;
|
|
1211
|
+
children?: React.JSX.Element;
|
|
1212
|
+
content?: React.ReactNode;
|
|
1213
|
+
disabled?: boolean;
|
|
1214
|
+
fallbackPlacements?: Placement[];
|
|
1215
|
+
padding?: number | number[];
|
|
1216
|
+
placement?: Placement;
|
|
1217
|
+
/** Whether or not to render the tooltip in a portal element. */
|
|
1218
|
+
portal?: boolean | string;
|
|
1219
|
+
radius?: number | number[];
|
|
1220
|
+
scheme?: ThemeColorSchemeKey;
|
|
1221
|
+
shadow?: number | number[];
|
|
1222
|
+
/**
|
|
1223
|
+
* Adds a delay to open or close the tooltip.
|
|
1224
|
+
*
|
|
1225
|
+
* If only a `number` is passed, it will be used for both opening and closing.
|
|
1226
|
+
*
|
|
1227
|
+
* If an object `{open: number; close:number}` is passed, it can be used to set different delays for each action.
|
|
1228
|
+
*
|
|
1229
|
+
* @public
|
|
1230
|
+
* @defaultValue 0
|
|
1231
|
+
*/
|
|
1232
|
+
delay?: Delay;
|
|
1233
|
+
/**
|
|
1234
|
+
* Whether the tooltip should animate in and out.
|
|
1235
|
+
*
|
|
1236
|
+
* @beta
|
|
1237
|
+
* @defaultValue false
|
|
1238
|
+
*/
|
|
1239
|
+
animate?: boolean;
|
|
1240
|
+
}
|
|
1241
|
+
/**
|
|
1242
|
+
* Tooltips display information when hovering, focusing or tapping.
|
|
1243
|
+
*
|
|
1244
|
+
* @public
|
|
1245
|
+
*/
|
|
1246
|
+
declare const Tooltip: react141.ForwardRefExoticComponent<Omit<TooltipProps & Omit<react141.HTMLProps<HTMLDivElement>, "as" | "content" | "children">, "ref"> & react141.RefAttributes<HTMLDivElement>>;
|
|
1247
|
+
/**
|
|
1248
|
+
* @beta
|
|
1249
|
+
*/
|
|
1250
|
+
interface TooltipDelayGroupContextValue {
|
|
1251
|
+
setIsGroupActive: (nextState: React.SetStateAction<boolean>, delay?: number | undefined) => void;
|
|
1252
|
+
setOpenTooltipId: (nextId: string | null, delay?: number | undefined) => void;
|
|
1253
|
+
openDelay: number;
|
|
1254
|
+
closeDelay: number;
|
|
1255
|
+
openTooltipId: string | null;
|
|
1256
|
+
}
|
|
1257
|
+
/**
|
|
1258
|
+
* @beta
|
|
1259
|
+
*/
|
|
1260
|
+
declare const TooltipDelayGroupContext: react141.Context<TooltipDelayGroupContextValue | null>;
|
|
1261
|
+
/**
|
|
1262
|
+
* @public
|
|
1263
|
+
* */
|
|
1264
|
+
interface TooltipDelayGroupProviderProps {
|
|
1265
|
+
children?: React.ReactNode;
|
|
1266
|
+
/**
|
|
1267
|
+
* Handles the delays to open or close a tooltip inside a group
|
|
1268
|
+
*
|
|
1269
|
+
* If only a `number` is passed, it will be used for both opening and closing.
|
|
1270
|
+
*
|
|
1271
|
+
* If an object `{open: number; close:number}` is passed, it can be used to set different delays for each action.
|
|
1272
|
+
*
|
|
1273
|
+
* @public
|
|
1274
|
+
*/
|
|
1275
|
+
delay: Delay;
|
|
1276
|
+
}
|
|
1277
|
+
/**
|
|
1278
|
+
* @public
|
|
1279
|
+
* Provides context for a group of tooltip elements that should share a delay
|
|
1280
|
+
* which temporarily becomes 1 ms after the first floating element of the group opens.
|
|
1281
|
+
*/
|
|
1282
|
+
declare function TooltipDelayGroupProvider(props: TooltipDelayGroupProviderProps): React.JSX.Element;
|
|
1283
|
+
declare namespace TooltipDelayGroupProvider {
|
|
1284
|
+
var displayName: string;
|
|
1285
|
+
}
|
|
1286
|
+
/**
|
|
1287
|
+
* @beta
|
|
1288
|
+
*/
|
|
1289
|
+
declare function useTooltipDelayGroup(): TooltipDelayGroupContextValue | null;
|
|
1290
|
+
/**
|
|
1291
|
+
* @public
|
|
1292
|
+
*/
|
|
1293
|
+
interface MenuGroupProps {
|
|
1294
|
+
as?: React.ElementType | keyof React.JSX.IntrinsicElements;
|
|
1295
|
+
fontSize?: number | number[];
|
|
1296
|
+
icon?: React.ElementType | React.ReactNode;
|
|
1297
|
+
menu?: Omit<MenuProps, 'onClickOutside' | 'onEscape' | 'onItemClick' | 'onKeyDown' | 'onMouseEnter' | 'registerElement' | 'shouldFocus' | 'onBlurCapture'>;
|
|
1298
|
+
padding?: number | number[];
|
|
1299
|
+
popover?: Omit<PopoverProps, 'content' | 'open'>;
|
|
1300
|
+
radius?: Radius | Radius[];
|
|
1301
|
+
space?: number | number[];
|
|
1302
|
+
text: React.ReactNode;
|
|
1303
|
+
tone?: SelectableTone;
|
|
1304
|
+
}
|
|
1305
|
+
/**
|
|
1306
|
+
* @public
|
|
1307
|
+
*/
|
|
1308
|
+
declare function MenuGroup(props: Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'popover' | 'ref' | 'tabIndex'> & MenuGroupProps): React.JSX.Element;
|
|
1309
|
+
declare namespace MenuGroup {
|
|
1310
|
+
var displayName: string;
|
|
1311
|
+
}
|
|
1312
|
+
/**
|
|
1313
|
+
* @public
|
|
1314
|
+
*/
|
|
1315
|
+
interface MenuItemProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
|
|
1316
|
+
as?: React.ElementType | keyof React.JSX.IntrinsicElements;
|
|
1317
|
+
fontSize?: number | number[];
|
|
1318
|
+
hotkeys?: string[];
|
|
1319
|
+
icon?: React.ElementType | React.ReactNode;
|
|
1320
|
+
iconRight?: React.ElementType | React.ReactNode;
|
|
1321
|
+
pressed?: boolean;
|
|
1322
|
+
selected?: boolean;
|
|
1323
|
+
space?: number | number[];
|
|
1324
|
+
text?: React.ReactNode;
|
|
1325
|
+
tone?: SelectableTone;
|
|
1326
|
+
}
|
|
1327
|
+
/**
|
|
1328
|
+
* @public
|
|
1329
|
+
*/
|
|
1330
|
+
declare const MenuItem: react141.ForwardRefExoticComponent<MenuItemProps & Omit<react141.HTMLProps<HTMLDivElement>, "ref" | "as" | "height" | "tabIndex" | "selected"> & react141.RefAttributes<HTMLDivElement>>;
|
|
1331
|
+
/**
|
|
1332
|
+
* @public
|
|
1333
|
+
*/
|
|
1334
|
+
interface TabProps {
|
|
1335
|
+
/**
|
|
1336
|
+
* The `id` of the correlating `TabPanel` component.
|
|
1337
|
+
*/
|
|
1338
|
+
'aria-controls': string;
|
|
1339
|
+
'id': string;
|
|
1340
|
+
'icon'?: React.ElementType | React.ReactNode;
|
|
1341
|
+
'focused'?: boolean;
|
|
1342
|
+
'fontSize'?: number | number[];
|
|
1343
|
+
'label'?: React.ReactNode;
|
|
1344
|
+
'padding'?: number | number[];
|
|
1345
|
+
'selected'?: boolean;
|
|
1346
|
+
'tone'?: ButtonTone;
|
|
1347
|
+
}
|
|
1348
|
+
/**
|
|
1349
|
+
* @public
|
|
1350
|
+
*/
|
|
1351
|
+
declare const Tab: react141.ForwardRefExoticComponent<Omit<TabProps & Omit<react141.HTMLProps<HTMLButtonElement>, "as" | "label" | "type" | "width" | "id" | "aria-controls">, "ref"> & react141.RefAttributes<HTMLButtonElement>>;
|
|
1352
|
+
/**
|
|
1353
|
+
* @public
|
|
1354
|
+
*/
|
|
1355
|
+
interface TabListProps extends Omit<InlineProps, 'as' | 'height'> {
|
|
1356
|
+
children: Array<React.JSX.Element | null | undefined | false>;
|
|
1357
|
+
}
|
|
1358
|
+
/**
|
|
1359
|
+
* @public
|
|
1360
|
+
*/
|
|
1361
|
+
declare const TabList: react141.ForwardRefExoticComponent<Omit<TabListProps & Omit<react141.HTMLProps<HTMLDivElement>, "as" | "height">, "ref"> & react141.RefAttributes<unknown>>;
|
|
1362
|
+
/**
|
|
1363
|
+
* @internal
|
|
1364
|
+
*/
|
|
1365
|
+
declare function _isEnterToClickElement(element: HTMLElement): boolean;
|
|
1366
|
+
/**
|
|
1367
|
+
* @internal
|
|
1368
|
+
*/
|
|
1369
|
+
declare function isHTMLElement(node: unknown): node is HTMLElement;
|
|
1370
|
+
/**
|
|
1371
|
+
* @internal
|
|
1372
|
+
*/
|
|
1373
|
+
declare function isHTMLAnchorElement(element: unknown): element is HTMLAnchorElement;
|
|
1374
|
+
/**
|
|
1375
|
+
* @internal
|
|
1376
|
+
*/
|
|
1377
|
+
declare function isHTMLInputElement(element: unknown): element is HTMLInputElement;
|
|
1378
|
+
/**
|
|
1379
|
+
* @internal
|
|
1380
|
+
*/
|
|
1381
|
+
declare function isHTMLButtonElement(element: unknown): element is HTMLButtonElement;
|
|
1382
|
+
/**
|
|
1383
|
+
* @internal
|
|
1384
|
+
*/
|
|
1385
|
+
declare function isHTMLSelectElement(element: unknown): element is HTMLSelectElement;
|
|
1386
|
+
/**
|
|
1387
|
+
* @internal
|
|
1388
|
+
*/
|
|
1389
|
+
declare function isHTMLTextAreaElement(element: unknown): element is HTMLTextAreaElement;
|
|
1390
|
+
/**
|
|
1391
|
+
* @internal
|
|
1392
|
+
*/
|
|
1393
|
+
declare function containsOrEqualsElement(element: HTMLElement, node: Node): boolean;
|
|
1394
|
+
/**
|
|
1395
|
+
* Returns true if a dark color scheme is preferred, false if a light color scheme is preferred or the preference is not known.
|
|
1396
|
+
*
|
|
1397
|
+
* @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://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
|
|
1398
|
+
*
|
|
1399
|
+
* If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
|
|
1400
|
+
* 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
|
|
1401
|
+
* @example https://gist.github.com/stipsan/13c0cccf8dfc34f4b44bb1b984baf7df
|
|
1402
|
+
*
|
|
1403
|
+
* @public
|
|
1404
|
+
*/
|
|
1405
|
+
declare function usePrefersDark(getServerSnapshot?: () => boolean): boolean;
|
|
1406
|
+
/**
|
|
1407
|
+
* @public
|
|
1408
|
+
*/
|
|
1409
|
+
interface ThemeProviderProps {
|
|
1410
|
+
children?: React.ReactNode;
|
|
1411
|
+
scheme?: ThemeColorSchemeKey;
|
|
1412
|
+
theme?: RootTheme;
|
|
1413
|
+
tone?: ThemeColorCardToneKey;
|
|
1414
|
+
}
|
|
1415
|
+
/**
|
|
1416
|
+
* @public
|
|
1417
|
+
*/
|
|
1418
|
+
declare function ThemeProvider(props: ThemeProviderProps): React.JSX.Element;
|
|
1419
|
+
declare namespace ThemeProvider {
|
|
1420
|
+
var displayName: string;
|
|
1421
|
+
}
|
|
1422
|
+
/**
|
|
1423
|
+
* @public
|
|
1424
|
+
*/
|
|
1425
|
+
declare function useTheme(): Theme;
|
|
1426
|
+
/**
|
|
1427
|
+
* @public
|
|
1428
|
+
*/
|
|
1429
|
+
declare function useTheme_v2(): Theme_v2;
|
|
1430
|
+
export { VirtualListProps as $, BadgeMode as $n, hslToRgb$1 as $r, AvatarRootStyleProps as $t, TextInputClearButtonProps as A, GridItemColumnEnd as An, ThemeColorScheme as Ar, InlineProps as At, StackProps as B, FlexJustify as Bn, ThemeColorSyntax$1 as Br, Code as Bt, TooltipDelayGroupProvider as C, HotkeysProps as Cn, ThemeColorGenericState as Cr, BoundaryElementProviderProps as Ct, Tooltip as D, PopoverMargins as Dn, ThemeColorMuted as Dr, KBD as Dt, TooltipDelayGroupContextValue as E, Radius as En, ThemeColorInputStates as Er, LabelProps as Et, Text as F, GridAutoCols as Fn, ThemeColorSelectableStates as Fr, Flex as Ft, Radio as G, ButtonMode as Gn, ThemeFontWeight$1 as Gr, Card as Gt, SpinnerProps as H, FlexWrap as Hn, ThemeFont$1 as Hr, Checkbox as Ht, TextProps as I, GridAutoFlow as In, ThemeColorSolid as Ir, FlexProps as It, PopoverProps as J, ButtonWidth as Jn, ThemeInput as Jr, ButtonProps as Jt, RadioProps as K, ButtonTextAlign as Kn, ThemeFontWeightKey$1 as Kr, CardProps as Kt, Switch as L, GridAutoRows as Ln, ThemeColorSolidTone as Lr, ResponsiveWidthStyleProps as Lt, TextInputType as M, GridItemRow as Mn, ThemeColorSchemes as Mr, HeadingProps as Mt, TextArea as N, GridItemRowEnd as Nn, ThemeColorSelectable as Nr, Grid as Nt, TooltipProps as O, Placement as On, ThemeColorMutedTone as Or, KBDProps as Ot, TextAreaProps as P, GridItemRowStart as Pn, ThemeColorSelectableState as Pr, GridProps as Pt, VirtualListChangeOpts as Q, BoxSizing as Qn, hexToRgb$1 as Qr, BoxProps as Qt, SwitchProps as R, FlexAlign as Rn, ThemeColorSpot as Rr, Container as Rt, useTooltipDelayGroup as S, Hotkeys as Sn, ThemeColorCardState as Sr, BoundaryElementProvider as St, TooltipDelayGroupContext as T, SelectableTone as Tn, ThemeColorInputState as Tr, Label as Tt, Select as U, DialogPosition as Un, ThemeFontKey$1 as Ur, CheckboxProps as Ut, Spinner as V, FlexValue as Vn, ThemeColorToneKey$1 as Vr, CodeProps as Vt, SelectProps as W, CardTone as Wn, ThemeFontSize$1 as Wr, CardStyleProps as Wt, PopoverWidth as X, BoxHeight as Xn, ThemeShadow$1 as Xr, BadgeProps as Xt, PopoverUpdateCallback as Y, BoxDisplay as Yn, ThemeLayer$1 as Yr, Badge as Yt, VirtualList as Z, BoxOverflow as Zn, createColorTheme$1 as Zr, Box as Zt, TabProps as _, ResponsiveMarginProps as _n, ThemeColorButtonModeKey$1 as _r, ElementQuery as _t, usePrefersDark as a, screen$1 as ai, Avatar as an, BoxShadow as ar, PortalProviderProps as at, MenuGroup as b, ResponsiveShadowProps as bn, ThemeColorButtonTones as br, useBoundaryElement as bt, isHTMLAnchorElement as c, Menu as cn, RGB$1 as cr, useLayer as ct, isHTMLInputElement as d, ResponsiveBorderProps as dn, Theme$1 as dr, LayerProviderProps as dt, multiply$1 as ei, ResponsiveAvatarSizeStyleProps as en, BadgeTone as er, SrOnly as et, isHTMLSelectElement as f, ResponsiveBoxProps as fn, ThemeAvatar as fr, Layer as ft, Tab as g, ResponsiveGridProps as gn, ThemeColorButton as gr, ErrorBoundaryState as gt, TabListProps as h, ResponsiveGridItemProps as hn, ThemeColorBuilderOpts as hr, ErrorBoundaryProps as ht, ThemeProviderProps as i, rgba$1 as ii, AvatarCounterProps as in, BaseTheme$1 as ir, PortalProvider as it, TextInputProps as j, GridItemColumnStart as jn, ThemeColorSchemeKey$1 as jr, Heading as jt, TextInput as k, GridItemColumn as kn, ThemeColorName as kr, Inline as kt, isHTMLButtonElement as l, MenuProps as ln, RootTheme$1 as lr, LayerContextValue as lt, TabList as m, ResponsiveFlexProps as mn, ThemeColorBase as mr, ErrorBoundary as mt, useTheme_v2 as n, rgbToHex$1 as ni, AvatarStackProps as nn, AvatarSize as nr, usePortal as nt, _isEnterToClickElement as o, studioTheme as oi, AvatarProps as on, HSL$1 as or, Portal as ot, isHTMLTextAreaElement as p, ResponsiveFlexItemProps as pn, ThemeColor as pr, LayerProps as pt, Popover as q, ButtonTone as qn, ThemeFonts$1 as qr, Button as qt, ThemeProvider as r, rgbToHsl$1 as ri, AvatarCounter as rn, AvatarStatus as rr, PortalContextValue as rt, containsOrEqualsElement as s, MenuDivider as sn, PartialThemeColorBuilderOpts as sr, PortalProps as st, useTheme as t, parseColor$1 as ti, AvatarStack as tn, AvatarPosition as tr, SrOnlyProps as tt, isHTMLElement as u, Delay as un, Styles as ur, LayerProvider as ut, MenuItem as v, ResponsivePaddingProps as vn, ThemeColorButtonState as vr, MediaQueryProps as vt, TooltipDelayGroupProviderProps as w, TextAlign as wn, ThemeColorInput as wr, Arrow as wt, MenuGroupProps as x, ResponsiveWidthProps as xn, ThemeColorCard as xr, BoundaryElementContextValue as xt, MenuItemProps as y, ResponsiveRadiusProps as yn, ThemeColorButtonStates as yr, ConditionalWrapper as yt, Stack as z, FlexDirection as zn, ThemeColorSpotKey as zr, ContainerProps as zt };
|
|
1431
|
+
//# sourceMappingURL=useTheme.d.mts.map
|