@amsterdam/design-system-react 0.13.1 → 0.14.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/README.md +1 -1
- package/dist/index.cjs.js +2363 -2030
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +1178 -851
- package/dist/index.esm.js +2364 -2032
- package/dist/index.esm.js.map +1 -1
- package/package.json +14 -14
package/dist/index.d.ts
CHANGED
|
@@ -1,11 +1,152 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { PropsWithChildren, HTMLAttributes,
|
|
2
|
+
import { PropsWithChildren, HTMLAttributes, BlockquoteHTMLAttributes, AnchorHTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, DialogHTMLAttributes, MouseEvent, SVGProps, ForwardRefExoticComponent, RefAttributes, ImgHTMLAttributes, LabelHTMLAttributes, OlHTMLAttributes, LiHTMLAttributes, OptgroupHTMLAttributes, OptionHTMLAttributes, SelectHTMLAttributes, TableHTMLAttributes, TextareaHTMLAttributes } from 'react';
|
|
3
|
+
|
|
4
|
+
type HeadingProps = {
|
|
5
|
+
/** Changes the text colour for readability on a dark background. */
|
|
6
|
+
inverseColor?: boolean;
|
|
7
|
+
/** The hierarchical level within the document. */
|
|
8
|
+
level?: 1 | 2 | 3 | 4;
|
|
9
|
+
/** Uses larger or smaller text without changing its position in the heading hierarchy. */
|
|
10
|
+
size?: 'level-1' | 'level-2' | 'level-3' | 'level-4' | 'level-5' | 'level-6';
|
|
11
|
+
} & PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>;
|
|
12
|
+
declare const Heading: react.ForwardRefExoticComponent<{
|
|
13
|
+
/** Changes the text colour for readability on a dark background. */
|
|
14
|
+
inverseColor?: boolean;
|
|
15
|
+
/** The hierarchical level within the document. */
|
|
16
|
+
level?: 1 | 2 | 3 | 4;
|
|
17
|
+
/** Uses larger or smaller text without changing its position in the heading hierarchy. */
|
|
18
|
+
size?: "level-1" | "level-2" | "level-3" | "level-4" | "level-5" | "level-6";
|
|
19
|
+
} & HTMLAttributes<HTMLHeadingElement> & {
|
|
20
|
+
children?: react.ReactNode | undefined;
|
|
21
|
+
} & react.RefAttributes<HTMLHeadingElement>>;
|
|
22
|
+
|
|
23
|
+
type AccordionProps = {
|
|
24
|
+
/** The hierarchical level of the Accordion Section heading(s) within the document. */
|
|
25
|
+
headingLevel: HeadingProps['level'];
|
|
26
|
+
/** The HTML element to use for each Accordion Section. */
|
|
27
|
+
sectionAs?: 'div' | 'section';
|
|
28
|
+
} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
|
|
29
|
+
declare const Accordion: react.ForwardRefExoticComponent<{
|
|
30
|
+
/** The hierarchical level of the Accordion Section heading(s) within the document. */
|
|
31
|
+
headingLevel: HeadingProps["level"];
|
|
32
|
+
/** The HTML element to use for each Accordion Section. */
|
|
33
|
+
sectionAs?: "div" | "section";
|
|
34
|
+
} & HTMLAttributes<HTMLDivElement> & {
|
|
35
|
+
children?: react.ReactNode | undefined;
|
|
36
|
+
} & react.RefAttributes<HTMLDivElement>> & {
|
|
37
|
+
Section: react.ForwardRefExoticComponent<{
|
|
38
|
+
label: string;
|
|
39
|
+
expanded?: boolean;
|
|
40
|
+
} & HTMLAttributes<HTMLElement> & {
|
|
41
|
+
children?: react.ReactNode | undefined;
|
|
42
|
+
} & react.RefAttributes<HTMLDivElement>>;
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
type AccordionSectionProps = {
|
|
46
|
+
/** The heading text. */
|
|
47
|
+
label: string;
|
|
48
|
+
/** Whether the content is displayed initially. */
|
|
49
|
+
expanded?: boolean;
|
|
50
|
+
} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
|
|
3
51
|
|
|
4
52
|
type ActionGroupProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
|
|
5
53
|
declare const ActionGroup: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
|
|
6
54
|
children?: react.ReactNode | undefined;
|
|
7
55
|
} & react.RefAttributes<HTMLDivElement>>;
|
|
8
56
|
|
|
57
|
+
type AlertProps = {
|
|
58
|
+
/** Whether the user can dismiss the Alert. Adds a button to its top right. */
|
|
59
|
+
closeable?: boolean;
|
|
60
|
+
/** The label for the button that dismisses the Alert. */
|
|
61
|
+
closeButtonLabel?: string;
|
|
62
|
+
/** The text for the Heading. */
|
|
63
|
+
heading?: string;
|
|
64
|
+
/**
|
|
65
|
+
* The hierarchical level of the Heading within the document.
|
|
66
|
+
* Note: this intentionally does not change the font size.
|
|
67
|
+
*/
|
|
68
|
+
headingLevel?: HeadingProps['level'];
|
|
69
|
+
/** A function to run when dismissing. */
|
|
70
|
+
onClose?: () => void;
|
|
71
|
+
/** The significance of the message conveyed. */
|
|
72
|
+
severity?: 'error' | 'info' | 'success' | 'warning';
|
|
73
|
+
} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
|
|
74
|
+
declare const Alert: react.ForwardRefExoticComponent<{
|
|
75
|
+
/** Whether the user can dismiss the Alert. Adds a button to its top right. */
|
|
76
|
+
closeable?: boolean;
|
|
77
|
+
/** The label for the button that dismisses the Alert. */
|
|
78
|
+
closeButtonLabel?: string;
|
|
79
|
+
/** The text for the Heading. */
|
|
80
|
+
heading?: string;
|
|
81
|
+
/**
|
|
82
|
+
* The hierarchical level of the Heading within the document.
|
|
83
|
+
* Note: this intentionally does not change the font size.
|
|
84
|
+
*/
|
|
85
|
+
headingLevel?: HeadingProps["level"];
|
|
86
|
+
/** A function to run when dismissing. */
|
|
87
|
+
onClose?: () => void;
|
|
88
|
+
/** The significance of the message conveyed. */
|
|
89
|
+
severity?: "error" | "info" | "success" | "warning";
|
|
90
|
+
} & HTMLAttributes<HTMLDivElement> & {
|
|
91
|
+
children?: react.ReactNode | undefined;
|
|
92
|
+
} & react.RefAttributes<HTMLDivElement>>;
|
|
93
|
+
|
|
94
|
+
declare const avatarColors: readonly ["black", "blue", "dark-green", "green", "grey-1", "grey-2", "grey-3", "light-blue", "magenta", "orange", "purple", "red", "white", "yellow"];
|
|
95
|
+
type AvatarColor = (typeof avatarColors)[number];
|
|
96
|
+
type AvatarProps = {
|
|
97
|
+
/** The background colour. */
|
|
98
|
+
color?: AvatarColor;
|
|
99
|
+
/** The url for the user’s image. Its center will be displayed. Should be square and scaled down. */
|
|
100
|
+
imageSrc?: string;
|
|
101
|
+
/** The text content. Should be the user’s initials. The first two characters will be displayed. */
|
|
102
|
+
label: string;
|
|
103
|
+
} & HTMLAttributes<HTMLSpanElement>;
|
|
104
|
+
declare const Avatar: react.ForwardRefExoticComponent<{
|
|
105
|
+
/** The background colour. */
|
|
106
|
+
color?: AvatarColor;
|
|
107
|
+
/** The url for the user’s image. Its center will be displayed. Should be square and scaled down. */
|
|
108
|
+
imageSrc?: string;
|
|
109
|
+
/** The text content. Should be the user’s initials. The first two characters will be displayed. */
|
|
110
|
+
label: string;
|
|
111
|
+
} & HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
|
|
112
|
+
|
|
113
|
+
declare const badgeColors: readonly ["black", "blue", "dark-green", "green", "grey-1", "grey-2", "grey-3", "light-blue", "magenta", "orange", "purple", "red", "white", "yellow"];
|
|
114
|
+
type BadgeColor = (typeof badgeColors)[number];
|
|
115
|
+
type BadgeProps = {
|
|
116
|
+
/** The background colour. */
|
|
117
|
+
color?: BadgeColor;
|
|
118
|
+
/** The text content. */
|
|
119
|
+
label: string | number;
|
|
120
|
+
} & HTMLAttributes<HTMLElement>;
|
|
121
|
+
declare const Badge: react.ForwardRefExoticComponent<{
|
|
122
|
+
/** The background colour. */
|
|
123
|
+
color?: BadgeColor;
|
|
124
|
+
/** The text content. */
|
|
125
|
+
label: string | number;
|
|
126
|
+
} & HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>>;
|
|
127
|
+
|
|
128
|
+
type BlockquoteProps = {
|
|
129
|
+
/** Changes the text colour for readability on a dark background. */
|
|
130
|
+
inverseColor?: boolean;
|
|
131
|
+
} & PropsWithChildren<BlockquoteHTMLAttributes<HTMLQuoteElement>>;
|
|
132
|
+
declare const Blockquote: react.ForwardRefExoticComponent<{
|
|
133
|
+
/** Changes the text colour for readability on a dark background. */
|
|
134
|
+
inverseColor?: boolean;
|
|
135
|
+
} & BlockquoteHTMLAttributes<HTMLQuoteElement> & {
|
|
136
|
+
children?: react.ReactNode | undefined;
|
|
137
|
+
} & react.RefAttributes<HTMLQuoteElement>>;
|
|
138
|
+
|
|
139
|
+
type BreadcrumbLinkProps = AnchorHTMLAttributes<HTMLAnchorElement>;
|
|
140
|
+
|
|
141
|
+
type BreadcrumbProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
|
|
142
|
+
declare const Breadcrumb: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
|
|
143
|
+
children?: react.ReactNode | undefined;
|
|
144
|
+
} & react.RefAttributes<HTMLElement>> & {
|
|
145
|
+
Link: react.ForwardRefExoticComponent<BreadcrumbLinkProps & react.RefAttributes<HTMLAnchorElement>>;
|
|
146
|
+
};
|
|
147
|
+
|
|
148
|
+
declare const gridCellTags: readonly ["article", "aside", "div", "footer", "header", "main", "nav", "section"];
|
|
149
|
+
type GridCellTag = (typeof gridCellTags)[number];
|
|
9
150
|
type GridCellSpanAllProp = {
|
|
10
151
|
/** Lets the cell span the full width of all grid variants. */
|
|
11
152
|
span: 'all';
|
|
@@ -18,8 +159,8 @@ type GridCellSpanAndStartProps = {
|
|
|
18
159
|
start?: GridColumnNumber | GridColumnNumbers;
|
|
19
160
|
};
|
|
20
161
|
type GridCellProps = {
|
|
21
|
-
/** The HTML
|
|
22
|
-
as?:
|
|
162
|
+
/** The HTML tag to use. */
|
|
163
|
+
as?: GridCellTag;
|
|
23
164
|
} & (GridCellSpanAllProp | GridCellSpanAndStartProps) & PropsWithChildren<HTMLAttributes<HTMLElement>>;
|
|
24
165
|
|
|
25
166
|
type GridColumnNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
@@ -29,6 +170,8 @@ type GridColumnNumbers = {
|
|
|
29
170
|
wide: GridColumnNumber;
|
|
30
171
|
};
|
|
31
172
|
type GridPaddingSize = 'small' | 'medium' | 'large';
|
|
173
|
+
declare const gridTags: readonly ["article", "aside", "div", "footer", "header", "main", "nav", "section"];
|
|
174
|
+
type GridTag = (typeof gridTags)[number];
|
|
32
175
|
type GridPaddingVerticalProp = {
|
|
33
176
|
paddingBottom?: never;
|
|
34
177
|
paddingTop?: never;
|
|
@@ -43,10 +186,12 @@ type GridPaddingTopAndBottomProps = {
|
|
|
43
186
|
paddingVertical?: never;
|
|
44
187
|
};
|
|
45
188
|
type GridProps = {
|
|
189
|
+
/** The HTML tag to use. */
|
|
190
|
+
as?: GridTag;
|
|
46
191
|
/** The amount of space between rows. */
|
|
47
192
|
gapVertical?: 'none' | 'small' | 'large';
|
|
48
193
|
} & (GridPaddingVerticalProp | GridPaddingTopAndBottomProps) & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
|
|
49
|
-
declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<
|
|
194
|
+
declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<any>> & {
|
|
50
195
|
Cell: react.ForwardRefExoticComponent<GridCellProps & react.RefAttributes<unknown>>;
|
|
51
196
|
};
|
|
52
197
|
|
|
@@ -85,108 +230,326 @@ type BreakoutRowNumbers = {
|
|
|
85
230
|
};
|
|
86
231
|
type BreakoutProps = GridProps;
|
|
87
232
|
declare const Breakout: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<HTMLDivElement>> & {
|
|
88
|
-
Cell: react.ForwardRefExoticComponent<BreakoutCellProps & react.RefAttributes<
|
|
233
|
+
Cell: react.ForwardRefExoticComponent<BreakoutCellProps & react.RefAttributes<any>>;
|
|
89
234
|
};
|
|
90
235
|
|
|
91
|
-
type
|
|
92
|
-
/**
|
|
93
|
-
|
|
94
|
-
/**
|
|
95
|
-
|
|
236
|
+
type IconProps = {
|
|
237
|
+
/** Changes the icon colour for readability on a dark background. */
|
|
238
|
+
inverseColor?: boolean;
|
|
239
|
+
/** The size of the icon. Corresponds with the text levels. */
|
|
240
|
+
size?: 'level-3' | 'level-4' | 'level-5' | 'level-6';
|
|
241
|
+
/** Whether the icon container should be made square. */
|
|
242
|
+
square?: boolean;
|
|
243
|
+
/** The component rendering the icon’s markup. */
|
|
244
|
+
svg: Function | ReactNode;
|
|
245
|
+
} & HTMLAttributes<HTMLSpanElement>;
|
|
246
|
+
declare const Icon: react.ForwardRefExoticComponent<{
|
|
247
|
+
/** Changes the icon colour for readability on a dark background. */
|
|
248
|
+
inverseColor?: boolean;
|
|
249
|
+
/** The size of the icon. Corresponds with the text levels. */
|
|
250
|
+
size?: "level-3" | "level-4" | "level-5" | "level-6";
|
|
251
|
+
/** Whether the icon container should be made square. */
|
|
252
|
+
square?: boolean;
|
|
253
|
+
/** The component rendering the icon’s markup. */
|
|
254
|
+
svg: Function | ReactNode;
|
|
255
|
+
} & HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLElement>>;
|
|
256
|
+
|
|
257
|
+
type IconBeforeProp = {
|
|
258
|
+
/** Shows the icon before the label. Requires a value for `icon`. Cannot be used together with `iconOnly`. */
|
|
259
|
+
iconBefore?: boolean;
|
|
260
|
+
iconOnly?: never;
|
|
96
261
|
};
|
|
97
|
-
type
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
262
|
+
type IconOnlyProp = {
|
|
263
|
+
iconBefore?: never;
|
|
264
|
+
/** Shows the icon without the label. Requires a value for `icon`. Cannot be used together with `iconBefore`. */
|
|
265
|
+
iconOnly?: boolean;
|
|
266
|
+
};
|
|
267
|
+
type IconButtonProps$1 = {
|
|
268
|
+
/** Adds an icon to the button, showing it after the label. */
|
|
269
|
+
icon: IconProps['svg'];
|
|
270
|
+
} & (IconBeforeProp | IconOnlyProp);
|
|
271
|
+
type TextButtonProps = {
|
|
272
|
+
icon?: never;
|
|
273
|
+
iconBefore?: never;
|
|
274
|
+
iconOnly?: never;
|
|
275
|
+
};
|
|
276
|
+
type ButtonProps = {
|
|
277
|
+
/** The level of prominence. Use a primary button only once per page or section. */
|
|
278
|
+
variant?: 'primary' | 'secondary' | 'tertiary';
|
|
279
|
+
} & (IconButtonProps$1 | TextButtonProps) & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>;
|
|
280
|
+
declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
|
|
101
281
|
|
|
102
|
-
type
|
|
103
|
-
|
|
104
|
-
/** The dimensions. */
|
|
105
|
-
ratio?: Ratio;
|
|
106
|
-
} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
|
|
107
|
-
declare const AspectRatio: react.ForwardRefExoticComponent<{
|
|
108
|
-
/** The dimensions. */
|
|
109
|
-
ratio?: Ratio;
|
|
110
|
-
} & HTMLAttributes<HTMLDivElement> & {
|
|
282
|
+
type CardProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
|
|
283
|
+
declare const Card: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
|
|
111
284
|
children?: react.ReactNode | undefined;
|
|
112
|
-
} & react.RefAttributes<
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
cover?: boolean;
|
|
117
|
-
} & ImgHTMLAttributes<HTMLImageElement>;
|
|
118
|
-
declare const Image: react.ForwardRefExoticComponent<{
|
|
119
|
-
/** Whether to display the image exactly as large as its container. This will clip the image if necessary. */
|
|
120
|
-
cover?: boolean;
|
|
121
|
-
} & ImgHTMLAttributes<HTMLImageElement> & react.RefAttributes<HTMLImageElement>>;
|
|
122
|
-
|
|
123
|
-
type ImageSliderImageProps = ImageProps & {
|
|
124
|
-
/** Specify the aspect ratio to use for the images. */
|
|
125
|
-
aspectRatio: Ratio;
|
|
126
|
-
};
|
|
127
|
-
type ImageSliderProps = {
|
|
128
|
-
/** Display buttons to navigate to the previous or next image. */
|
|
129
|
-
controls?: boolean;
|
|
130
|
-
/** Label for the image if you need to translate the alt text. */
|
|
131
|
-
imageLabel?: string;
|
|
132
|
-
/** The set of images to display. */
|
|
133
|
-
images: ImageSliderImageProps[];
|
|
134
|
-
/** The label for the ‘next’ button */
|
|
135
|
-
nextLabel?: string;
|
|
136
|
-
/** The label for the ‘previous’ button */
|
|
137
|
-
previousLabel?: string;
|
|
138
|
-
} & HTMLAttributes<HTMLDivElement>;
|
|
139
|
-
declare const ImageSlider: react.ForwardRefExoticComponent<{
|
|
140
|
-
/** Display buttons to navigate to the previous or next image. */
|
|
141
|
-
controls?: boolean;
|
|
142
|
-
/** Label for the image if you need to translate the alt text. */
|
|
143
|
-
imageLabel?: string;
|
|
144
|
-
/** The set of images to display. */
|
|
145
|
-
images: ImageSliderImageProps[];
|
|
146
|
-
/** The label for the ‘next’ button */
|
|
147
|
-
nextLabel?: string;
|
|
148
|
-
/** The label for the ‘previous’ button */
|
|
149
|
-
previousLabel?: string;
|
|
150
|
-
} & HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>> & {
|
|
151
|
-
Item: react.ForwardRefExoticComponent<{
|
|
152
|
-
slideId: number;
|
|
153
|
-
} & HTMLAttributes<HTMLDivElement> & {
|
|
285
|
+
} & react.RefAttributes<HTMLElement>> & {
|
|
286
|
+
HeadingGroup: react.ForwardRefExoticComponent<{
|
|
287
|
+
tagline: string;
|
|
288
|
+
} & HTMLAttributes<HTMLElement> & {
|
|
154
289
|
children?: react.ReactNode | undefined;
|
|
155
|
-
} & react.RefAttributes<
|
|
290
|
+
} & react.RefAttributes<HTMLElement>>;
|
|
291
|
+
Link: react.ForwardRefExoticComponent<react.AnchorHTMLAttributes<HTMLAnchorElement> & {
|
|
292
|
+
children?: react.ReactNode | undefined;
|
|
293
|
+
} & react.RefAttributes<HTMLAnchorElement>>;
|
|
156
294
|
};
|
|
157
295
|
|
|
158
|
-
type
|
|
159
|
-
/**
|
|
160
|
-
|
|
161
|
-
} & PropsWithChildren<HTMLAttributes<
|
|
296
|
+
type CardHeadingGroupProps = {
|
|
297
|
+
/** A short phrase of text, e.g. to categorise the card. Displayed above the card heading. */
|
|
298
|
+
tagline: string;
|
|
299
|
+
} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
|
|
162
300
|
|
|
163
|
-
type
|
|
164
|
-
/** Whether the value fails a validation rule. */
|
|
165
|
-
invalid?: boolean;
|
|
166
|
-
} & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'autoCapitalize' | 'autoCorrect' | 'spellCheck' | 'type'>;
|
|
167
|
-
declare const PasswordInput: react.ForwardRefExoticComponent<{
|
|
168
|
-
/** Whether the value fails a validation rule. */
|
|
169
|
-
invalid?: boolean;
|
|
170
|
-
} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "autoCapitalize" | "autoCorrect" | "spellCheck" | "type"> & react.RefAttributes<HTMLInputElement>>;
|
|
301
|
+
type CardLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
|
|
171
302
|
|
|
172
|
-
type
|
|
173
|
-
/**
|
|
174
|
-
|
|
175
|
-
/** The
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
303
|
+
type CharacterCountProps = HTMLAttributes<HTMLDivElement> & {
|
|
304
|
+
/** The current length of the field’s value. */
|
|
305
|
+
length: number;
|
|
306
|
+
/** The maximum length of the field’s value. */
|
|
307
|
+
maxLength: number;
|
|
308
|
+
};
|
|
309
|
+
declare const CharacterCount: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
|
|
310
|
+
/** The current length of the field’s value. */
|
|
311
|
+
length: number;
|
|
312
|
+
/** The maximum length of the field’s value. */
|
|
313
|
+
maxLength: number;
|
|
314
|
+
} & react.RefAttributes<HTMLDivElement>>;
|
|
315
|
+
|
|
316
|
+
type CheckboxProps = {
|
|
317
|
+
/** Whether the value fails a validation rule. */
|
|
318
|
+
invalid?: boolean;
|
|
319
|
+
/** Allows being neither checked nor unchecked. */
|
|
320
|
+
indeterminate?: boolean;
|
|
321
|
+
} & PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>>;
|
|
322
|
+
declare const Checkbox: react.ForwardRefExoticComponent<{
|
|
323
|
+
/** Whether the value fails a validation rule. */
|
|
324
|
+
invalid?: boolean;
|
|
325
|
+
/** Allows being neither checked nor unchecked. */
|
|
326
|
+
indeterminate?: boolean;
|
|
327
|
+
} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
|
|
328
|
+
children?: react.ReactNode | undefined;
|
|
329
|
+
} & react.RefAttributes<HTMLInputElement>>;
|
|
330
|
+
|
|
331
|
+
declare const aspectRatioOptions: readonly ["x-tall", "tall", "square", "wide", "x-wide", "2x-wide"];
|
|
332
|
+
type AspectRatioProps = {
|
|
333
|
+
/** The aspect ratio to display media content in. */
|
|
334
|
+
aspectRatio?: (typeof aspectRatioOptions)[number];
|
|
335
|
+
};
|
|
336
|
+
declare const crossAlignOptions: readonly ["start", "center", "baseline", "end"];
|
|
337
|
+
type CrossAlign = (typeof crossAlignOptions)[number];
|
|
338
|
+
declare const crossAlignOptionsForColumn: ("start" | "center" | "end")[];
|
|
339
|
+
type CrossAlignForColumn = (typeof crossAlignOptionsForColumn)[number];
|
|
340
|
+
declare const mainAlignOptions: readonly ["center", "end", "between", "around", "evenly"];
|
|
341
|
+
type MainAlign = (typeof mainAlignOptions)[number];
|
|
342
|
+
|
|
343
|
+
declare const columnGapSizes: readonly ["none", "extra-small", "small", "large", "extra-large"];
|
|
344
|
+
type ColumnGap = (typeof columnGapSizes)[number];
|
|
345
|
+
type ColumnTag = 'article' | 'div' | 'section';
|
|
346
|
+
type ColumnProps = {
|
|
347
|
+
/**
|
|
348
|
+
* The vertical alignment of the items in the column.
|
|
349
|
+
* @default start
|
|
350
|
+
*/
|
|
351
|
+
align?: MainAlign;
|
|
352
|
+
/**
|
|
353
|
+
* The horizontal alignment of the items in the column.
|
|
354
|
+
* @default stretch
|
|
355
|
+
*/
|
|
356
|
+
alignHorizontal?: CrossAlignForColumn;
|
|
357
|
+
/**
|
|
358
|
+
* The HTML element to use.
|
|
359
|
+
* @default div
|
|
360
|
+
*/
|
|
361
|
+
as?: ColumnTag;
|
|
362
|
+
/**
|
|
363
|
+
* The amount of space between items.
|
|
364
|
+
* @default medium
|
|
365
|
+
*/
|
|
366
|
+
gap?: ColumnGap;
|
|
367
|
+
} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
|
|
368
|
+
declare const Column: react.ForwardRefExoticComponent<{
|
|
369
|
+
/**
|
|
370
|
+
* The vertical alignment of the items in the column.
|
|
371
|
+
* @default start
|
|
372
|
+
*/
|
|
373
|
+
align?: MainAlign;
|
|
374
|
+
/**
|
|
375
|
+
* The horizontal alignment of the items in the column.
|
|
376
|
+
* @default stretch
|
|
377
|
+
*/
|
|
378
|
+
alignHorizontal?: CrossAlignForColumn;
|
|
379
|
+
/**
|
|
380
|
+
* The HTML element to use.
|
|
381
|
+
* @default div
|
|
382
|
+
*/
|
|
383
|
+
as?: ColumnTag;
|
|
384
|
+
/**
|
|
385
|
+
* The amount of space between items.
|
|
386
|
+
* @default medium
|
|
387
|
+
*/
|
|
388
|
+
gap?: ColumnGap;
|
|
389
|
+
} & HTMLAttributes<HTMLElement> & {
|
|
390
|
+
children?: react.ReactNode | undefined;
|
|
391
|
+
} & react.RefAttributes<unknown>>;
|
|
392
|
+
|
|
393
|
+
declare const dateInputTypes: readonly ["date", "datetime-local"];
|
|
394
|
+
type DateInputType = (typeof dateInputTypes)[number];
|
|
395
|
+
type DateInputProps = {
|
|
396
|
+
/** Whether the value fails a validation rule. */
|
|
397
|
+
invalid?: boolean;
|
|
398
|
+
/** The kind of data that the user should provide. */
|
|
399
|
+
type?: DateInputType;
|
|
400
|
+
} & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>;
|
|
401
|
+
declare const DateInput: react.ForwardRefExoticComponent<{
|
|
402
|
+
/** Whether the value fails a validation rule. */
|
|
403
|
+
invalid?: boolean;
|
|
404
|
+
/** The kind of data that the user should provide. */
|
|
405
|
+
type?: DateInputType;
|
|
406
|
+
} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & react.RefAttributes<HTMLInputElement>>;
|
|
407
|
+
|
|
408
|
+
declare const descriptionListTermsWidths: readonly ["sm", "md", "lg"];
|
|
409
|
+
type DescriptionListTermsWidth = (typeof descriptionListTermsWidths)[number];
|
|
410
|
+
type DescriptionListProps = {
|
|
181
411
|
/** Changes the text colour for readability on a dark background. */
|
|
182
412
|
inverseColor?: boolean;
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
413
|
+
termsWidth?: DescriptionListTermsWidth;
|
|
414
|
+
} & PropsWithChildren<HTMLAttributes<HTMLDListElement>>;
|
|
415
|
+
declare const DescriptionList: react.ForwardRefExoticComponent<{
|
|
416
|
+
/** Changes the text colour for readability on a dark background. */
|
|
417
|
+
inverseColor?: boolean;
|
|
418
|
+
termsWidth?: DescriptionListTermsWidth;
|
|
419
|
+
} & HTMLAttributes<HTMLDListElement> & {
|
|
188
420
|
children?: react.ReactNode | undefined;
|
|
189
|
-
} & react.RefAttributes<
|
|
421
|
+
} & react.RefAttributes<HTMLDListElement>> & {
|
|
422
|
+
Description: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
|
|
423
|
+
children?: react.ReactNode | undefined;
|
|
424
|
+
} & react.RefAttributes<HTMLElement>>;
|
|
425
|
+
Section: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
|
|
426
|
+
children?: react.ReactNode | undefined;
|
|
427
|
+
} & react.RefAttributes<HTMLDivElement>>;
|
|
428
|
+
Term: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
|
|
429
|
+
children?: react.ReactNode | undefined;
|
|
430
|
+
} & react.RefAttributes<HTMLElement>>;
|
|
431
|
+
};
|
|
432
|
+
|
|
433
|
+
type DescriptionListTermProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
|
|
434
|
+
|
|
435
|
+
type DescriptionListDescriptionProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
|
|
436
|
+
|
|
437
|
+
type DialogProps = {
|
|
438
|
+
/** The label for the button that dismisses the Dialog. */
|
|
439
|
+
closeButtonLabel?: string;
|
|
440
|
+
/** Content for the footer, often one Button or an Action Group containing more of them. */
|
|
441
|
+
footer?: ReactNode;
|
|
442
|
+
/** The text for the Heading. */
|
|
443
|
+
heading: string;
|
|
444
|
+
} & PropsWithChildren<DialogHTMLAttributes<HTMLDialogElement>>;
|
|
445
|
+
declare const Dialog: react.ForwardRefExoticComponent<{
|
|
446
|
+
/** The label for the button that dismisses the Dialog. */
|
|
447
|
+
closeButtonLabel?: string;
|
|
448
|
+
/** Content for the footer, often one Button or an Action Group containing more of them. */
|
|
449
|
+
footer?: ReactNode;
|
|
450
|
+
/** The text for the Heading. */
|
|
451
|
+
heading: string;
|
|
452
|
+
} & DialogHTMLAttributes<HTMLDialogElement> & {
|
|
453
|
+
children?: ReactNode | undefined;
|
|
454
|
+
} & react.RefAttributes<HTMLDialogElement>> & {
|
|
455
|
+
close: (event: MouseEvent<HTMLButtonElement>) => void | undefined;
|
|
456
|
+
open: (id: string) => void;
|
|
457
|
+
};
|
|
458
|
+
|
|
459
|
+
type ErrorMessageProps = {
|
|
460
|
+
/** An icon to display instead of the default icon. */
|
|
461
|
+
icon?: Function;
|
|
462
|
+
/** An accessible phrase that screen readers announce before the error message. Should translate to something like ‘input error’. */
|
|
463
|
+
prefix?: string;
|
|
464
|
+
} & PropsWithChildren<HTMLAttributes<HTMLParagraphElement>>;
|
|
465
|
+
declare const ErrorMessage: react.ForwardRefExoticComponent<{
|
|
466
|
+
/** An icon to display instead of the default icon. */
|
|
467
|
+
icon?: Function;
|
|
468
|
+
/** An accessible phrase that screen readers announce before the error message. Should translate to something like ‘input error’. */
|
|
469
|
+
prefix?: string;
|
|
470
|
+
} & HTMLAttributes<HTMLParagraphElement> & {
|
|
471
|
+
children?: react.ReactNode | undefined;
|
|
472
|
+
} & react.RefAttributes<HTMLParagraphElement>>;
|
|
473
|
+
|
|
474
|
+
type FieldProps = {
|
|
475
|
+
/** Whether the field has an input with a validation error */
|
|
476
|
+
invalid?: boolean;
|
|
477
|
+
} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
|
|
478
|
+
declare const Field: react.ForwardRefExoticComponent<{
|
|
479
|
+
/** Whether the field has an input with a validation error */
|
|
480
|
+
invalid?: boolean;
|
|
481
|
+
} & HTMLAttributes<HTMLDivElement> & {
|
|
482
|
+
children?: react.ReactNode | undefined;
|
|
483
|
+
} & react.RefAttributes<HTMLDivElement>>;
|
|
484
|
+
|
|
485
|
+
type HintAndOptionalProps = {
|
|
486
|
+
/** Show a custom hint text. */
|
|
487
|
+
hint?: string;
|
|
488
|
+
/** Appends the text '(niet verplicht)' to the label or legend if no hint is provided. Use when the associated inputs are optional. */
|
|
489
|
+
optional?: boolean;
|
|
490
|
+
};
|
|
491
|
+
type HintProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & HintAndOptionalProps;
|
|
492
|
+
declare const Hint: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
|
|
493
|
+
children?: react.ReactNode | undefined;
|
|
494
|
+
} & HintAndOptionalProps & react.RefAttributes<HTMLElement>>;
|
|
495
|
+
|
|
496
|
+
type FieldSetProps = PropsWithChildren<HTMLAttributes<HTMLFieldSetElement>> & {
|
|
497
|
+
/** Whether the field set has an input with a validation error */
|
|
498
|
+
invalid?: boolean;
|
|
499
|
+
/** The text for the caption. */
|
|
500
|
+
legend: string;
|
|
501
|
+
} & HintProps;
|
|
502
|
+
declare const FieldSet: react.ForwardRefExoticComponent<HTMLAttributes<HTMLFieldSetElement> & {
|
|
503
|
+
children?: react.ReactNode | undefined;
|
|
504
|
+
} & {
|
|
505
|
+
/** Whether the field set has an input with a validation error */
|
|
506
|
+
invalid?: boolean;
|
|
507
|
+
/** The text for the caption. */
|
|
508
|
+
legend: string;
|
|
509
|
+
} & HTMLAttributes<HTMLElement> & {
|
|
510
|
+
hint?: string;
|
|
511
|
+
optional?: boolean;
|
|
512
|
+
} & react.RefAttributes<HTMLFieldSetElement>>;
|
|
513
|
+
|
|
514
|
+
type FigureProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
|
|
515
|
+
declare const Figure: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
|
|
516
|
+
children?: react.ReactNode | undefined;
|
|
517
|
+
} & react.RefAttributes<HTMLElement>> & {
|
|
518
|
+
Caption: react.ForwardRefExoticComponent<{
|
|
519
|
+
inverseColor?: boolean;
|
|
520
|
+
} & HTMLAttributes<HTMLElement> & {
|
|
521
|
+
children?: react.ReactNode | undefined;
|
|
522
|
+
} & react.RefAttributes<HTMLElement>>;
|
|
523
|
+
};
|
|
524
|
+
|
|
525
|
+
type FileInputProps = InputHTMLAttributes<HTMLInputElement>;
|
|
526
|
+
declare const FileInput: react.ForwardRefExoticComponent<FileInputProps & react.RefAttributes<HTMLInputElement>>;
|
|
527
|
+
|
|
528
|
+
type FileListProps = {} & PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
|
|
529
|
+
declare const FileList: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
|
|
530
|
+
children?: react.ReactNode | undefined;
|
|
531
|
+
} & react.RefAttributes<HTMLOListElement>> & {
|
|
532
|
+
Item: react.ForwardRefExoticComponent<{
|
|
533
|
+
file: File;
|
|
534
|
+
onDelete?: () => void;
|
|
535
|
+
} & HTMLAttributes<HTMLLIElement> & react.RefAttributes<HTMLLIElement>>;
|
|
536
|
+
};
|
|
537
|
+
|
|
538
|
+
type FooterProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
|
|
539
|
+
declare const Footer: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
|
|
540
|
+
children?: react.ReactNode | undefined;
|
|
541
|
+
} & react.RefAttributes<HTMLElement>> & {
|
|
542
|
+
Bottom: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
|
|
543
|
+
children?: react.ReactNode | undefined;
|
|
544
|
+
} & react.RefAttributes<HTMLDivElement>>;
|
|
545
|
+
Top: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
|
|
546
|
+
children?: react.ReactNode | undefined;
|
|
547
|
+
} & react.RefAttributes<HTMLDivElement>>;
|
|
548
|
+
};
|
|
549
|
+
|
|
550
|
+
type FooterBottomProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
|
|
551
|
+
|
|
552
|
+
type FooterTopProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
|
|
190
553
|
|
|
191
554
|
type FormError = {
|
|
192
555
|
id: string;
|
|
@@ -251,369 +614,165 @@ declare const FormErrorList: react.ForwardRefExoticComponent<{
|
|
|
251
614
|
headingLevel?: HeadingProps["level"];
|
|
252
615
|
} & HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
|
|
253
616
|
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
* The hierarchical level of the Heading within the document.
|
|
259
|
-
* Note: this intentionally does not change the font size.
|
|
260
|
-
*/
|
|
261
|
-
headingLevel?: HeadingProps['level'];
|
|
262
|
-
} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
|
|
263
|
-
declare const TableOfContents: react.ForwardRefExoticComponent<{
|
|
264
|
-
/** The text for the Heading. */
|
|
265
|
-
heading?: string;
|
|
266
|
-
/**
|
|
267
|
-
* The hierarchical level of the Heading within the document.
|
|
268
|
-
* Note: this intentionally does not change the font size.
|
|
269
|
-
*/
|
|
270
|
-
headingLevel?: HeadingProps["level"];
|
|
271
|
-
} & HTMLAttributes<HTMLElement> & {
|
|
272
|
-
children?: react.ReactNode | undefined;
|
|
273
|
-
} & react.RefAttributes<HTMLElement>> & {
|
|
274
|
-
Link: react.ForwardRefExoticComponent<{
|
|
275
|
-
label: string;
|
|
276
|
-
} & react.AnchorHTMLAttributes<HTMLAnchorElement> & react.RefAttributes<HTMLAnchorElement>>;
|
|
277
|
-
List: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
|
|
278
|
-
children?: react.ReactNode | undefined;
|
|
279
|
-
} & react.RefAttributes<HTMLUListElement>>;
|
|
280
|
-
};
|
|
281
|
-
|
|
282
|
-
type TableOfContentsLinkProps = {
|
|
283
|
-
/** The text for the link. */
|
|
284
|
-
label: string;
|
|
285
|
-
} & AnchorHTMLAttributes<HTMLAnchorElement>;
|
|
286
|
-
|
|
287
|
-
type TableOfContentsListProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
|
|
288
|
-
|
|
289
|
-
type ErrorMessageProps = {
|
|
290
|
-
/** An accessible phrase that screen readers announce before the error message. Should translate to something like ‘input error’. */
|
|
291
|
-
prefix?: string;
|
|
292
|
-
} & PropsWithChildren<HTMLAttributes<HTMLParagraphElement>>;
|
|
293
|
-
declare const ErrorMessage: react.ForwardRefExoticComponent<{
|
|
294
|
-
/** An accessible phrase that screen readers announce before the error message. Should translate to something like ‘input error’. */
|
|
295
|
-
prefix?: string;
|
|
296
|
-
} & HTMLAttributes<HTMLParagraphElement> & {
|
|
297
|
-
children?: react.ReactNode | undefined;
|
|
298
|
-
} & react.RefAttributes<HTMLParagraphElement>>;
|
|
299
|
-
|
|
300
|
-
type FileInputProps = InputHTMLAttributes<HTMLInputElement>;
|
|
301
|
-
declare const FileInput: react.ForwardRefExoticComponent<FileInputProps & react.RefAttributes<HTMLInputElement>>;
|
|
302
|
-
|
|
303
|
-
type FieldProps = {
|
|
304
|
-
/** Whether the field has an input with a validation error */
|
|
305
|
-
invalid?: boolean;
|
|
306
|
-
} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
|
|
307
|
-
declare const Field: react.ForwardRefExoticComponent<{
|
|
308
|
-
/** Whether the field has an input with a validation error */
|
|
309
|
-
invalid?: boolean;
|
|
310
|
-
} & HTMLAttributes<HTMLDivElement> & {
|
|
311
|
-
children?: react.ReactNode | undefined;
|
|
312
|
-
} & react.RefAttributes<HTMLDivElement>>;
|
|
313
|
-
|
|
314
|
-
type SelectOptionGroupProps = OptgroupHTMLAttributes<HTMLOptGroupElement>;
|
|
617
|
+
/**
|
|
618
|
+
* @license EUPL-1.2+
|
|
619
|
+
* Copyright Gemeente Amsterdam
|
|
620
|
+
*/
|
|
315
621
|
|
|
316
|
-
type
|
|
622
|
+
type LogoBrand = 'amsterdam' | 'ggd-amsterdam' | 'museum-weesp' | 'stadsarchief' | 'stadsbank-van-lening' | 'vga-verzekeringen';
|
|
623
|
+
type LogoProps = {
|
|
624
|
+
/** The name of the brand for which to display the logo. */
|
|
625
|
+
brand?: LogoBrand;
|
|
626
|
+
} & SVGProps<SVGSVGElement>;
|
|
627
|
+
declare const Logo: ForwardRefExoticComponent<Omit<LogoProps, "ref"> & RefAttributes<SVGSVGElement>>;
|
|
317
628
|
|
|
318
|
-
type
|
|
319
|
-
/**
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
/**
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
629
|
+
type HeaderProps = {
|
|
630
|
+
/** The name of the application. */
|
|
631
|
+
brandName?: string;
|
|
632
|
+
/** The name of the brand for which to display the logo. */
|
|
633
|
+
logoBrand?: LogoBrand;
|
|
634
|
+
/** The url for the link on the logo. */
|
|
635
|
+
logoLink?: string;
|
|
636
|
+
/** The accessible text for the link on the logo. */
|
|
637
|
+
logoLinkTitle?: string;
|
|
638
|
+
/** A slot for the menu items. Use Header.MenuLink here. */
|
|
639
|
+
menuItems?: ReactNode;
|
|
640
|
+
/** The text for the menu button. */
|
|
641
|
+
menuButtonText?: string;
|
|
642
|
+
/** The accessible label for the navigation section. */
|
|
643
|
+
navigationLabel?: string;
|
|
644
|
+
/** Whether the menu button is visible on wide screens. */
|
|
645
|
+
noMenuButtonOnWideWindow?: boolean;
|
|
646
|
+
} & HTMLAttributes<HTMLElement>;
|
|
647
|
+
declare const Header: react.ForwardRefExoticComponent<{
|
|
648
|
+
/** The name of the application. */
|
|
649
|
+
brandName?: string;
|
|
650
|
+
/** The name of the brand for which to display the logo. */
|
|
651
|
+
logoBrand?: LogoBrand;
|
|
652
|
+
/** The url for the link on the logo. */
|
|
653
|
+
logoLink?: string;
|
|
654
|
+
/** The accessible text for the link on the logo. */
|
|
655
|
+
logoLinkTitle?: string;
|
|
656
|
+
/** A slot for the menu items. Use Header.MenuLink here. */
|
|
657
|
+
menuItems?: ReactNode;
|
|
658
|
+
/** The text for the menu button. */
|
|
659
|
+
menuButtonText?: string;
|
|
660
|
+
/** The accessible label for the navigation section. */
|
|
661
|
+
navigationLabel?: string;
|
|
662
|
+
/** Whether the menu button is visible on wide screens. */
|
|
663
|
+
noMenuButtonOnWideWindow?: boolean;
|
|
664
|
+
} & HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>> & {
|
|
665
|
+
GridCellNarrowWindowOnly: react.ForwardRefExoticComponent<GridCellProps & react.RefAttributes<HTMLElement>>;
|
|
666
|
+
MenuLink: react.ForwardRefExoticComponent<{
|
|
667
|
+
fixed?: boolean;
|
|
668
|
+
} & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
|
|
669
|
+
children?: ReactNode | undefined;
|
|
670
|
+
} & react.RefAttributes<HTMLAnchorElement>>;
|
|
334
671
|
};
|
|
335
672
|
|
|
336
|
-
type
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
} & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>;
|
|
340
|
-
declare const TimeInput: react.ForwardRefExoticComponent<{
|
|
341
|
-
/** Whether the value fails a validation rule. */
|
|
342
|
-
invalid?: boolean;
|
|
343
|
-
} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & react.RefAttributes<HTMLInputElement>>;
|
|
344
|
-
|
|
345
|
-
declare const dateInputTypes: readonly ["date", "datetime-local"];
|
|
346
|
-
type DateInputType = (typeof dateInputTypes)[number];
|
|
347
|
-
type DateInputProps = {
|
|
348
|
-
/** Whether the value fails a validation rule. */
|
|
349
|
-
invalid?: boolean;
|
|
350
|
-
/** The kind of data that the user should provide. */
|
|
351
|
-
type?: DateInputType;
|
|
352
|
-
} & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>;
|
|
353
|
-
declare const DateInput: react.ForwardRefExoticComponent<{
|
|
354
|
-
/** Whether the value fails a validation rule. */
|
|
355
|
-
invalid?: boolean;
|
|
356
|
-
/** The kind of data that the user should provide. */
|
|
357
|
-
type?: DateInputType;
|
|
358
|
-
} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & react.RefAttributes<HTMLInputElement>>;
|
|
673
|
+
type HeaderMenuLinkProps = {
|
|
674
|
+
fixed?: boolean;
|
|
675
|
+
} & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
|
|
359
676
|
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
type AvatarProps = {
|
|
363
|
-
/** The background colour. */
|
|
364
|
-
color?: AvatarColor;
|
|
365
|
-
/** The url for the user’s image. Its center will be displayed. Should be square and scaled down. */
|
|
366
|
-
imageSrc?: string;
|
|
367
|
-
/** The text content. Should be the user’s initials. The first two characters will be displayed. */
|
|
368
|
-
label: string;
|
|
369
|
-
} & HTMLAttributes<HTMLSpanElement>;
|
|
370
|
-
declare const Avatar: react.ForwardRefExoticComponent<{
|
|
371
|
-
/** The background colour. */
|
|
372
|
-
color?: AvatarColor;
|
|
373
|
-
/** The url for the user’s image. Its center will be displayed. Should be square and scaled down. */
|
|
374
|
-
imageSrc?: string;
|
|
375
|
-
/** The text content. Should be the user’s initials. The first two characters will be displayed. */
|
|
677
|
+
type IconButtonProps = {
|
|
678
|
+
/** The accessible text for the button. Will be announced by screen readers. Should describe the button’s action. */
|
|
376
679
|
label: string;
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
type CharacterCountProps = HTMLAttributes<HTMLDivElement> & {
|
|
380
|
-
/** The current length of the field’s value. */
|
|
381
|
-
length: number;
|
|
382
|
-
/** The maximum length of the field’s value. */
|
|
383
|
-
maxLength: number;
|
|
384
|
-
};
|
|
385
|
-
declare const CharacterCount: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
|
|
386
|
-
/** The current length of the field’s value. */
|
|
387
|
-
length: number;
|
|
388
|
-
/** The maximum length of the field’s value. */
|
|
389
|
-
maxLength: number;
|
|
390
|
-
} & react.RefAttributes<HTMLDivElement>>;
|
|
391
|
-
|
|
392
|
-
declare const descriptionListTermsWidths: readonly ["sm", "md", "lg"];
|
|
393
|
-
type DescriptionListTermsWidth = (typeof descriptionListTermsWidths)[number];
|
|
394
|
-
type DescriptionListProps = {
|
|
680
|
+
/** Changes the text colour for readability on a light (but not white) background. */
|
|
681
|
+
contrastColor?: boolean;
|
|
395
682
|
/** Changes the text colour for readability on a dark background. */
|
|
396
683
|
inverseColor?: boolean;
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
684
|
+
/** The size of the icon. Corresponds with the text levels. */
|
|
685
|
+
size?: 'level-3' | 'level-4' | 'level-5' | 'level-6';
|
|
686
|
+
/** The component rendering the icon’s markup. */
|
|
687
|
+
svg?: Function;
|
|
688
|
+
} & ButtonHTMLAttributes<HTMLButtonElement>;
|
|
689
|
+
declare const IconButton: react.ForwardRefExoticComponent<{
|
|
690
|
+
/** The accessible text for the button. Will be announced by screen readers. Should describe the button’s action. */
|
|
691
|
+
label: string;
|
|
692
|
+
/** Changes the text colour for readability on a light (but not white) background. */
|
|
693
|
+
contrastColor?: boolean;
|
|
400
694
|
/** Changes the text colour for readability on a dark background. */
|
|
401
695
|
inverseColor?: boolean;
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
children?: react.ReactNode | undefined;
|
|
408
|
-
} & react.RefAttributes<HTMLElement>>;
|
|
409
|
-
Description: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
|
|
410
|
-
children?: react.ReactNode | undefined;
|
|
411
|
-
} & react.RefAttributes<HTMLElement>>;
|
|
412
|
-
};
|
|
413
|
-
|
|
414
|
-
type DescriptionListTermProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
|
|
415
|
-
|
|
416
|
-
type DescriptionListDescriptionProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
|
|
417
|
-
|
|
418
|
-
declare const crossAlignOptions: readonly ["start", "center", "baseline", "end"];
|
|
419
|
-
type CrossAlign = (typeof crossAlignOptions)[number];
|
|
420
|
-
declare const crossAlignOptionsForColumn: ("start" | "center" | "end")[];
|
|
421
|
-
type CrossAlignForColumn = (typeof crossAlignOptionsForColumn)[number];
|
|
422
|
-
declare const mainAlignOptions: readonly ["center", "end", "between", "around", "evenly"];
|
|
423
|
-
type MainAlign = (typeof mainAlignOptions)[number];
|
|
424
|
-
|
|
425
|
-
declare const rowGapSizes: readonly ["none", "extra-small", "small", "large", "extra-large"];
|
|
426
|
-
type RowGap = (typeof rowGapSizes)[number];
|
|
427
|
-
type RowTag = 'article' | 'div' | 'section';
|
|
428
|
-
type RowProps = {
|
|
429
|
-
/**
|
|
430
|
-
* The horizontal alignment of the items in the row.
|
|
431
|
-
* @default start
|
|
432
|
-
*/
|
|
433
|
-
align?: MainAlign;
|
|
434
|
-
/**
|
|
435
|
-
* The vertical alignment of the items in the row.
|
|
436
|
-
* @default stretch
|
|
437
|
-
*/
|
|
438
|
-
alignVertical?: CrossAlign;
|
|
439
|
-
/**
|
|
440
|
-
* The HTML element to use.
|
|
441
|
-
* @default div
|
|
442
|
-
*/
|
|
443
|
-
as?: RowTag;
|
|
444
|
-
/**
|
|
445
|
-
* The amount of space between items.
|
|
446
|
-
* @default medium
|
|
447
|
-
*/
|
|
448
|
-
gap?: RowGap;
|
|
449
|
-
/**
|
|
450
|
-
* Whether items of the row can wrap onto multiple lines.
|
|
451
|
-
* @default false
|
|
452
|
-
*/
|
|
453
|
-
wrap?: boolean;
|
|
454
|
-
} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
|
|
455
|
-
declare const Row: react.ForwardRefExoticComponent<{
|
|
456
|
-
/**
|
|
457
|
-
* The horizontal alignment of the items in the row.
|
|
458
|
-
* @default start
|
|
459
|
-
*/
|
|
460
|
-
align?: MainAlign;
|
|
461
|
-
/**
|
|
462
|
-
* The vertical alignment of the items in the row.
|
|
463
|
-
* @default stretch
|
|
464
|
-
*/
|
|
465
|
-
alignVertical?: CrossAlign;
|
|
466
|
-
/**
|
|
467
|
-
* The HTML element to use.
|
|
468
|
-
* @default div
|
|
469
|
-
*/
|
|
470
|
-
as?: RowTag;
|
|
471
|
-
/**
|
|
472
|
-
* The amount of space between items.
|
|
473
|
-
* @default medium
|
|
474
|
-
*/
|
|
475
|
-
gap?: RowGap;
|
|
476
|
-
/**
|
|
477
|
-
* Whether items of the row can wrap onto multiple lines.
|
|
478
|
-
* @default false
|
|
479
|
-
*/
|
|
480
|
-
wrap?: boolean;
|
|
481
|
-
} & HTMLAttributes<HTMLElement> & {
|
|
482
|
-
children?: react.ReactNode | undefined;
|
|
483
|
-
} & react.RefAttributes<unknown>>;
|
|
484
|
-
|
|
485
|
-
type RadioProps = {
|
|
486
|
-
/** An icon to display instead of the default icon. */
|
|
487
|
-
icon?: ReactNode;
|
|
488
|
-
/** Whether the value fails a validation rule. */
|
|
489
|
-
invalid?: boolean;
|
|
490
|
-
} & PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>>;
|
|
491
|
-
declare const Radio: react.ForwardRefExoticComponent<{
|
|
492
|
-
/** An icon to display instead of the default icon. */
|
|
493
|
-
icon?: ReactNode;
|
|
494
|
-
/** Whether the value fails a validation rule. */
|
|
495
|
-
invalid?: boolean;
|
|
496
|
-
} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
|
|
497
|
-
children?: ReactNode | undefined;
|
|
498
|
-
} & react.RefAttributes<HTMLInputElement>>;
|
|
499
|
-
|
|
500
|
-
type TabsProps = {
|
|
501
|
-
/** The number of the active tab. Corresponds to its `tab` value. */
|
|
502
|
-
activeTab?: number;
|
|
503
|
-
} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
|
|
504
|
-
declare const Tabs: react.ForwardRefExoticComponent<{
|
|
505
|
-
/** The number of the active tab. Corresponds to its `tab` value. */
|
|
506
|
-
activeTab?: number;
|
|
507
|
-
} & HTMLAttributes<HTMLDivElement> & {
|
|
508
|
-
children?: ReactNode | undefined;
|
|
509
|
-
} & react.RefAttributes<HTMLDivElement>> & {
|
|
510
|
-
Button: react.ForwardRefExoticComponent<{
|
|
511
|
-
tab: number;
|
|
512
|
-
} & react.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
513
|
-
children?: ReactNode | undefined;
|
|
514
|
-
} & react.RefAttributes<HTMLButtonElement>>;
|
|
515
|
-
List: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
|
|
516
|
-
children?: ReactNode | undefined;
|
|
517
|
-
} & react.RefAttributes<HTMLDivElement>>;
|
|
518
|
-
Panel: react.ForwardRefExoticComponent<{
|
|
519
|
-
tab: number;
|
|
520
|
-
} & HTMLAttributes<HTMLDivElement> & {
|
|
521
|
-
children?: ReactNode | undefined;
|
|
522
|
-
} & react.RefAttributes<HTMLDivElement>>;
|
|
523
|
-
};
|
|
524
|
-
|
|
525
|
-
type TabsPanelProps = {
|
|
526
|
-
/** The identifier of the corresponding Tab. */
|
|
527
|
-
tab: number;
|
|
528
|
-
} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
|
|
529
|
-
|
|
530
|
-
type TabsListProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
|
|
531
|
-
|
|
532
|
-
type TabsButtonProps = {
|
|
533
|
-
/** An identifier. */
|
|
534
|
-
tab: number;
|
|
535
|
-
} & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>;
|
|
536
|
-
|
|
537
|
-
type TextAreaProps = {
|
|
538
|
-
/** Whether the value fails a validation rule. */
|
|
539
|
-
invalid?: boolean;
|
|
540
|
-
/** Allows the user to resize the text box. The default is resizing in both directions. */
|
|
541
|
-
resize?: 'none' | 'horizontal' | 'vertical';
|
|
542
|
-
} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'aria-invalid'>;
|
|
543
|
-
declare const TextArea: react.ForwardRefExoticComponent<{
|
|
544
|
-
/** Whether the value fails a validation rule. */
|
|
545
|
-
invalid?: boolean;
|
|
546
|
-
/** Allows the user to resize the text box. The default is resizing in both directions. */
|
|
547
|
-
resize?: "none" | "horizontal" | "vertical";
|
|
548
|
-
} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "aria-invalid"> & react.RefAttributes<HTMLTextAreaElement>>;
|
|
696
|
+
/** The size of the icon. Corresponds with the text levels. */
|
|
697
|
+
size?: "level-3" | "level-4" | "level-5" | "level-6";
|
|
698
|
+
/** The component rendering the icon’s markup. */
|
|
699
|
+
svg?: Function;
|
|
700
|
+
} & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
|
|
549
701
|
|
|
550
|
-
|
|
551
|
-
type ColumnGap = (typeof columnGapSizes)[number];
|
|
552
|
-
type ColumnTag = 'article' | 'div' | 'section';
|
|
553
|
-
type ColumnProps = {
|
|
554
|
-
/**
|
|
555
|
-
* The vertical alignment of the items in the column.
|
|
556
|
-
* @default start
|
|
557
|
-
*/
|
|
558
|
-
align?: MainAlign;
|
|
559
|
-
/**
|
|
560
|
-
* The horizontal alignment of the items in the column.
|
|
561
|
-
* @default stretch
|
|
562
|
-
*/
|
|
563
|
-
alignHorizontal?: CrossAlignForColumn;
|
|
564
|
-
/**
|
|
565
|
-
* The HTML element to use.
|
|
566
|
-
* @default div
|
|
567
|
-
*/
|
|
568
|
-
as?: ColumnTag;
|
|
569
|
-
/**
|
|
570
|
-
* The amount of space between items.
|
|
571
|
-
* @default medium
|
|
572
|
-
*/
|
|
573
|
-
gap?: ColumnGap;
|
|
574
|
-
} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
|
|
575
|
-
declare const Column: react.ForwardRefExoticComponent<{
|
|
576
|
-
/**
|
|
577
|
-
* The vertical alignment of the items in the column.
|
|
578
|
-
* @default start
|
|
579
|
-
*/
|
|
580
|
-
align?: MainAlign;
|
|
581
|
-
/**
|
|
582
|
-
* The horizontal alignment of the items in the column.
|
|
583
|
-
* @default stretch
|
|
584
|
-
*/
|
|
585
|
-
alignHorizontal?: CrossAlignForColumn;
|
|
586
|
-
/**
|
|
587
|
-
* The HTML element to use.
|
|
588
|
-
* @default div
|
|
589
|
-
*/
|
|
590
|
-
as?: ColumnTag;
|
|
702
|
+
type ImageProps = {
|
|
591
703
|
/**
|
|
592
|
-
*
|
|
593
|
-
* @default medium
|
|
704
|
+
* A textual description of the content of the image.
|
|
594
705
|
*/
|
|
595
|
-
|
|
596
|
-
} &
|
|
597
|
-
|
|
598
|
-
|
|
706
|
+
alt: string;
|
|
707
|
+
} & AspectRatioProps & ImgHTMLAttributes<HTMLImageElement>;
|
|
708
|
+
declare const Image: react.ForwardRefExoticComponent<{
|
|
709
|
+
/**
|
|
710
|
+
* A textual description of the content of the image.
|
|
711
|
+
*/
|
|
712
|
+
alt: string;
|
|
713
|
+
} & AspectRatioProps & ImgHTMLAttributes<HTMLImageElement> & react.RefAttributes<HTMLImageElement>>;
|
|
599
714
|
|
|
600
|
-
type
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
715
|
+
type ImageSliderImageProps = ImageProps;
|
|
716
|
+
type ImageSliderProps = {
|
|
717
|
+
/** Display buttons to navigate to the previous or next image. */
|
|
718
|
+
controls?: boolean;
|
|
719
|
+
/** Label for the image if you need to translate the alt text. */
|
|
720
|
+
imageLabel?: string;
|
|
721
|
+
/** The set of images to display. */
|
|
722
|
+
images: ImageSliderImageProps[];
|
|
723
|
+
/** The label for the ‘next’ button */
|
|
724
|
+
nextLabel?: string;
|
|
725
|
+
/** The label for the ‘previous’ button */
|
|
726
|
+
previousLabel?: string;
|
|
727
|
+
} & HTMLAttributes<HTMLDivElement>;
|
|
728
|
+
declare const ImageSlider: react.ForwardRefExoticComponent<{
|
|
729
|
+
/** Display buttons to navigate to the previous or next image. */
|
|
730
|
+
controls?: boolean;
|
|
731
|
+
/** Label for the image if you need to translate the alt text. */
|
|
732
|
+
imageLabel?: string;
|
|
733
|
+
/** The set of images to display. */
|
|
734
|
+
images: ImageSliderImageProps[];
|
|
735
|
+
/** The label for the ‘next’ button */
|
|
736
|
+
nextLabel?: string;
|
|
737
|
+
/** The label for the ‘previous’ button */
|
|
738
|
+
previousLabel?: string;
|
|
739
|
+
} & HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>> & {
|
|
740
|
+
Item: react.ForwardRefExoticComponent<{
|
|
741
|
+
slideId: number;
|
|
742
|
+
} & HTMLAttributes<HTMLDivElement> & {
|
|
743
|
+
children?: react.ReactNode | undefined;
|
|
744
|
+
} & react.RefAttributes<HTMLDivElement>>;
|
|
745
|
+
};
|
|
746
|
+
|
|
747
|
+
type ImageSliderItemProps = {
|
|
748
|
+
/** The identifier of the item. Must match the key or order of the slides (starting at 0). */
|
|
749
|
+
slideId: number;
|
|
750
|
+
} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
|
|
751
|
+
|
|
752
|
+
declare const Label: react.ForwardRefExoticComponent<LabelHTMLAttributes<HTMLLabelElement> & {
|
|
607
753
|
children?: react.ReactNode | undefined;
|
|
608
|
-
} & {
|
|
609
|
-
/** Whether the field set has an input with a validation error */
|
|
610
|
-
invalid?: boolean;
|
|
611
|
-
/** The text for the caption. */
|
|
612
|
-
legend: string;
|
|
613
|
-
} & HTMLAttributes<HTMLElement> & {
|
|
754
|
+
} & react.HTMLAttributes<HTMLElement> & {
|
|
614
755
|
hint?: string;
|
|
615
756
|
optional?: boolean;
|
|
616
|
-
} & react.RefAttributes<
|
|
757
|
+
} & react.RefAttributes<HTMLLabelElement>>;
|
|
758
|
+
|
|
759
|
+
type LinkVariant = 'standalone' | 'inline';
|
|
760
|
+
type LinkProps = {
|
|
761
|
+
/** Changes the text colour for readability on a light background. */
|
|
762
|
+
contrastColor?: boolean;
|
|
763
|
+
/** Changes the text colour for readability on a dark background. */
|
|
764
|
+
inverseColor?: boolean;
|
|
765
|
+
/** Whether the link is inline or stands alone. */
|
|
766
|
+
variant?: LinkVariant;
|
|
767
|
+
} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'>;
|
|
768
|
+
declare const Link: react.ForwardRefExoticComponent<{
|
|
769
|
+
/** Changes the text colour for readability on a light background. */
|
|
770
|
+
contrastColor?: boolean;
|
|
771
|
+
/** Changes the text colour for readability on a dark background. */
|
|
772
|
+
inverseColor?: boolean;
|
|
773
|
+
/** Whether the link is inline or stands alone. */
|
|
774
|
+
variant?: LinkVariant;
|
|
775
|
+
} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "placeholder"> & react.RefAttributes<HTMLAnchorElement>>;
|
|
617
776
|
|
|
618
777
|
type LinkListProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
|
|
619
778
|
declare const LinkList: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
|
|
@@ -640,47 +799,10 @@ type LinkListLinkProps = {
|
|
|
640
799
|
size?: 'small' | 'large';
|
|
641
800
|
} & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
|
|
642
801
|
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
type BadgeProps = {
|
|
646
|
-
/** The background colour. */
|
|
647
|
-
color?: BadgeColor;
|
|
648
|
-
/** The text content. */
|
|
649
|
-
label: string | number;
|
|
650
|
-
} & HTMLAttributes<HTMLElement>;
|
|
651
|
-
declare const Badge: react.ForwardRefExoticComponent<{
|
|
652
|
-
/** The background colour. */
|
|
653
|
-
color?: BadgeColor;
|
|
654
|
-
/** The text content. */
|
|
655
|
-
label: string | number;
|
|
656
|
-
} & HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>>;
|
|
657
|
-
|
|
658
|
-
type TableProps = PropsWithChildren<TableHTMLAttributes<HTMLTableElement>>;
|
|
659
|
-
declare const Table: react.ForwardRefExoticComponent<TableHTMLAttributes<HTMLTableElement> & {
|
|
802
|
+
type MarkProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
|
|
803
|
+
declare const Mark: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
|
|
660
804
|
children?: react.ReactNode | undefined;
|
|
661
|
-
} & react.RefAttributes<
|
|
662
|
-
Body: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableSectionElement> & {
|
|
663
|
-
children?: react.ReactNode | undefined;
|
|
664
|
-
} & react.RefAttributes<HTMLTableSectionElement>>;
|
|
665
|
-
Caption: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableCaptionElement> & {
|
|
666
|
-
children?: react.ReactNode | undefined;
|
|
667
|
-
} & react.RefAttributes<HTMLTableCaptionElement>>;
|
|
668
|
-
Cell: react.ForwardRefExoticComponent<react.TdHTMLAttributes<HTMLTableCellElement> & {
|
|
669
|
-
children?: react.ReactNode | undefined;
|
|
670
|
-
} & react.RefAttributes<HTMLTableCellElement>>;
|
|
671
|
-
Footer: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableSectionElement> & {
|
|
672
|
-
children?: react.ReactNode | undefined;
|
|
673
|
-
} & react.RefAttributes<HTMLTableSectionElement>>;
|
|
674
|
-
Header: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableSectionElement> & {
|
|
675
|
-
children?: react.ReactNode | undefined;
|
|
676
|
-
} & react.RefAttributes<HTMLTableSectionElement>>;
|
|
677
|
-
HeaderCell: react.ForwardRefExoticComponent<react.ThHTMLAttributes<HTMLTableCellElement> & {
|
|
678
|
-
children?: react.ReactNode | undefined;
|
|
679
|
-
} & react.RefAttributes<HTMLTableCellElement>>;
|
|
680
|
-
Row: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableRowElement> & {
|
|
681
|
-
children?: react.ReactNode | undefined;
|
|
682
|
-
} & react.RefAttributes<HTMLTableRowElement>>;
|
|
683
|
-
};
|
|
805
|
+
} & react.RefAttributes<HTMLElement>>;
|
|
684
806
|
|
|
685
807
|
type MegaMenuProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
|
|
686
808
|
declare const MegaMenu: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
|
|
@@ -693,137 +815,72 @@ declare const MegaMenu: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivEl
|
|
|
693
815
|
|
|
694
816
|
type MegaMenuListCategoryProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
|
|
695
817
|
|
|
696
|
-
type
|
|
697
|
-
/** The accessible text for the button. Will be announced by screen readers. Should describe the button’s action. */
|
|
698
|
-
label: string;
|
|
699
|
-
/** Changes the text colour for readability on a light (but not white) background. */
|
|
700
|
-
contrastColor?: boolean;
|
|
818
|
+
type OrderedListProps = {
|
|
701
819
|
/** Changes the text colour for readability on a dark background. */
|
|
702
820
|
inverseColor?: boolean;
|
|
703
|
-
/**
|
|
704
|
-
|
|
705
|
-
/** The
|
|
706
|
-
|
|
707
|
-
} &
|
|
708
|
-
declare const
|
|
709
|
-
/** The accessible text for the button. Will be announced by screen readers. Should describe the button’s action. */
|
|
710
|
-
label: string;
|
|
711
|
-
/** Changes the text colour for readability on a light (but not white) background. */
|
|
712
|
-
contrastColor?: boolean;
|
|
821
|
+
/** Whether the list items show a marker. */
|
|
822
|
+
markers?: boolean;
|
|
823
|
+
/** The size of the text. */
|
|
824
|
+
size?: 'small';
|
|
825
|
+
} & PropsWithChildren<OlHTMLAttributes<HTMLOListElement>>;
|
|
826
|
+
declare const OrderedList: react.ForwardRefExoticComponent<{
|
|
713
827
|
/** Changes the text colour for readability on a dark background. */
|
|
714
828
|
inverseColor?: boolean;
|
|
715
|
-
/**
|
|
716
|
-
|
|
717
|
-
/** The
|
|
718
|
-
|
|
719
|
-
} &
|
|
720
|
-
|
|
721
|
-
type SkipLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
|
|
722
|
-
declare const SkipLink: react.ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
|
|
829
|
+
/** Whether the list items show a marker. */
|
|
830
|
+
markers?: boolean;
|
|
831
|
+
/** The size of the text. */
|
|
832
|
+
size?: "small";
|
|
833
|
+
} & OlHTMLAttributes<HTMLOListElement> & {
|
|
723
834
|
children?: react.ReactNode | undefined;
|
|
724
|
-
} & react.RefAttributes<
|
|
835
|
+
} & react.RefAttributes<HTMLOListElement>> & {
|
|
836
|
+
Item: react.ForwardRefExoticComponent<react.LiHTMLAttributes<HTMLLIElement> & {
|
|
837
|
+
children?: react.ReactNode | undefined;
|
|
838
|
+
} & react.RefAttributes<HTMLLIElement>>;
|
|
839
|
+
};
|
|
840
|
+
|
|
841
|
+
type OrderedListItemProps = PropsWithChildren<LiHTMLAttributes<HTMLLIElement>>;
|
|
725
842
|
|
|
726
843
|
type OverlapProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
|
|
727
844
|
declare const Overlap: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
|
|
728
845
|
children?: react.ReactNode | undefined;
|
|
729
846
|
} & react.RefAttributes<HTMLDivElement>>;
|
|
730
847
|
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
brand?: LogoBrand;
|
|
740
|
-
} & SVGProps<SVGSVGElement>;
|
|
741
|
-
declare const Logo: ForwardRefExoticComponent<Omit<LogoProps, "ref"> & RefAttributes<SVGSVGElement>>;
|
|
742
|
-
|
|
743
|
-
type HeaderProps = {
|
|
744
|
-
/** The name of the application. */
|
|
745
|
-
appName?: string;
|
|
746
|
-
/** The list of menu links. Use a Page Menu here. */
|
|
747
|
-
links?: ReactNode;
|
|
748
|
-
/** The name of the brand for which to display the logo. */
|
|
749
|
-
logoBrand?: LogoBrand;
|
|
750
|
-
/** The url for the link on the logo. */
|
|
751
|
-
logoLink?: string;
|
|
752
|
-
/** The accessible text for the link on the logo. */
|
|
753
|
-
logoLinkTitle?: string;
|
|
754
|
-
/** A button to toggle the visibility of a Mega Menu. */
|
|
755
|
-
menu?: ReactNode;
|
|
756
|
-
} & HTMLAttributes<HTMLElement>;
|
|
757
|
-
declare const Header: react.ForwardRefExoticComponent<{
|
|
758
|
-
/** The name of the application. */
|
|
759
|
-
appName?: string;
|
|
760
|
-
/** The list of menu links. Use a Page Menu here. */
|
|
761
|
-
links?: ReactNode;
|
|
762
|
-
/** The name of the brand for which to display the logo. */
|
|
763
|
-
logoBrand?: LogoBrand;
|
|
764
|
-
/** The url for the link on the logo. */
|
|
765
|
-
logoLink?: string;
|
|
766
|
-
/** The accessible text for the link on the logo. */
|
|
767
|
-
logoLinkTitle?: string;
|
|
768
|
-
/** A button to toggle the visibility of a Mega Menu. */
|
|
769
|
-
menu?: ReactNode;
|
|
770
|
-
} & HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>>;
|
|
771
|
-
|
|
772
|
-
type MarkProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
|
|
773
|
-
declare const Mark: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
|
|
774
|
-
children?: react.ReactNode | undefined;
|
|
775
|
-
} & react.RefAttributes<HTMLElement>>;
|
|
776
|
-
|
|
777
|
-
declare const textInputTypes: readonly ["email", "tel", "text", "url"];
|
|
778
|
-
type TextInputType = (typeof textInputTypes)[number];
|
|
779
|
-
type TextInputProps = {
|
|
780
|
-
/** Whether the value fails a validation rule. */
|
|
781
|
-
invalid?: boolean;
|
|
782
|
-
/** The kind of data that the user should provide. */
|
|
783
|
-
type?: TextInputType;
|
|
784
|
-
} & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid'>;
|
|
785
|
-
declare const TextInput: react.ForwardRefExoticComponent<{
|
|
786
|
-
/** Whether the value fails a validation rule. */
|
|
787
|
-
invalid?: boolean;
|
|
788
|
-
/** The kind of data that the user should provide. */
|
|
789
|
-
type?: TextInputType;
|
|
790
|
-
} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid"> & react.RefAttributes<HTMLInputElement>>;
|
|
791
|
-
|
|
792
|
-
type SearchFieldProps = PropsWithChildren<HTMLAttributes<HTMLFormElement>>;
|
|
793
|
-
declare const SearchField: react.ForwardRefExoticComponent<HTMLAttributes<HTMLFormElement> & {
|
|
848
|
+
type PageHeadingProps = {
|
|
849
|
+
/** Changes the text colour for readability on a dark background. */
|
|
850
|
+
inverseColor?: boolean;
|
|
851
|
+
} & PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>;
|
|
852
|
+
declare const PageHeading: react.ForwardRefExoticComponent<{
|
|
853
|
+
/** Changes the text colour for readability on a dark background. */
|
|
854
|
+
inverseColor?: boolean;
|
|
855
|
+
} & HTMLAttributes<HTMLHeadingElement> & {
|
|
794
856
|
children?: react.ReactNode | undefined;
|
|
795
|
-
} & react.RefAttributes<
|
|
796
|
-
Button: react.ForwardRefExoticComponent<{
|
|
797
|
-
label?: string;
|
|
798
|
-
} & HTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
|
|
799
|
-
Input: react.ForwardRefExoticComponent<{
|
|
800
|
-
invalid?: boolean;
|
|
801
|
-
label?: string;
|
|
802
|
-
} & react.InputHTMLAttributes<HTMLInputElement> & react.RefAttributes<HTMLInputElement>>;
|
|
803
|
-
};
|
|
857
|
+
} & react.RefAttributes<HTMLHeadingElement>>;
|
|
804
858
|
|
|
805
|
-
type
|
|
806
|
-
/**
|
|
807
|
-
|
|
808
|
-
/**
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
/**
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
open: (id: string) => void;
|
|
859
|
+
type PageMenuProps = {
|
|
860
|
+
/** Whether the items align to the end margin. Set to `true` if the Page Menu itself does so. */
|
|
861
|
+
alignEnd?: boolean;
|
|
862
|
+
/** Whether menu items should wrap if they don’t fit on a single row. */
|
|
863
|
+
wrap?: boolean;
|
|
864
|
+
} & PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
|
|
865
|
+
declare const PageMenu: react.ForwardRefExoticComponent<{
|
|
866
|
+
/** Whether the items align to the end margin. Set to `true` if the Page Menu itself does so. */
|
|
867
|
+
alignEnd?: boolean;
|
|
868
|
+
/** Whether menu items should wrap if they don’t fit on a single row. */
|
|
869
|
+
wrap?: boolean;
|
|
870
|
+
} & HTMLAttributes<HTMLUListElement> & {
|
|
871
|
+
children?: react.ReactNode | undefined;
|
|
872
|
+
} & react.RefAttributes<HTMLUListElement>> & {
|
|
873
|
+
Link: react.ForwardRefExoticComponent<{
|
|
874
|
+
icon?: Function;
|
|
875
|
+
} & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
|
|
876
|
+
children?: react.ReactNode | undefined;
|
|
877
|
+
} & react.RefAttributes<HTMLAnchorElement>>;
|
|
825
878
|
};
|
|
826
879
|
|
|
880
|
+
type PageMenuLinkProps = {
|
|
881
|
+
icon?: Function;
|
|
882
|
+
} & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
|
|
883
|
+
|
|
827
884
|
type PaginationProps = {
|
|
828
885
|
/** The maximum amount of pages shown. Minimum value: 5. */
|
|
829
886
|
maxVisiblePages?: number;
|
|
@@ -865,6 +922,105 @@ declare const Pagination: react.ForwardRefExoticComponent<{
|
|
|
865
922
|
visuallyHiddenLabel?: string;
|
|
866
923
|
} & HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>>;
|
|
867
924
|
|
|
925
|
+
type ParagraphProps = {
|
|
926
|
+
/** Changes the text colour for readability on a dark background. */
|
|
927
|
+
inverseColor?: boolean;
|
|
928
|
+
/** The size of the text. */
|
|
929
|
+
size?: 'small' | 'large';
|
|
930
|
+
} & PropsWithChildren<HTMLAttributes<HTMLParagraphElement>>;
|
|
931
|
+
declare const Paragraph: react.ForwardRefExoticComponent<{
|
|
932
|
+
/** Changes the text colour for readability on a dark background. */
|
|
933
|
+
inverseColor?: boolean;
|
|
934
|
+
/** The size of the text. */
|
|
935
|
+
size?: "small" | "large";
|
|
936
|
+
} & HTMLAttributes<HTMLParagraphElement> & {
|
|
937
|
+
children?: react.ReactNode | undefined;
|
|
938
|
+
} & react.RefAttributes<HTMLParagraphElement>>;
|
|
939
|
+
|
|
940
|
+
type PasswordInputProps = {
|
|
941
|
+
/** Whether the value fails a validation rule. */
|
|
942
|
+
invalid?: boolean;
|
|
943
|
+
} & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'autoCapitalize' | 'autoCorrect' | 'spellCheck' | 'type'>;
|
|
944
|
+
declare const PasswordInput: react.ForwardRefExoticComponent<{
|
|
945
|
+
/** Whether the value fails a validation rule. */
|
|
946
|
+
invalid?: boolean;
|
|
947
|
+
} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "autoCapitalize" | "autoCorrect" | "spellCheck" | "type"> & react.RefAttributes<HTMLInputElement>>;
|
|
948
|
+
|
|
949
|
+
type RadioProps = {
|
|
950
|
+
/** An icon to display instead of the default icon. */
|
|
951
|
+
icon?: ReactNode;
|
|
952
|
+
/** Whether the value fails a validation rule. */
|
|
953
|
+
invalid?: boolean;
|
|
954
|
+
} & PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>>;
|
|
955
|
+
declare const Radio: react.ForwardRefExoticComponent<{
|
|
956
|
+
/** An icon to display instead of the default icon. */
|
|
957
|
+
icon?: ReactNode;
|
|
958
|
+
/** Whether the value fails a validation rule. */
|
|
959
|
+
invalid?: boolean;
|
|
960
|
+
} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
|
|
961
|
+
children?: ReactNode | undefined;
|
|
962
|
+
} & react.RefAttributes<HTMLInputElement>>;
|
|
963
|
+
|
|
964
|
+
declare const rowGapSizes: readonly ["none", "extra-small", "small", "large", "extra-large"];
|
|
965
|
+
type RowGap = (typeof rowGapSizes)[number];
|
|
966
|
+
type RowTag = 'article' | 'div' | 'section';
|
|
967
|
+
type RowProps = {
|
|
968
|
+
/**
|
|
969
|
+
* The horizontal alignment of the items in the row.
|
|
970
|
+
* @default start
|
|
971
|
+
*/
|
|
972
|
+
align?: MainAlign;
|
|
973
|
+
/**
|
|
974
|
+
* The vertical alignment of the items in the row.
|
|
975
|
+
* @default stretch
|
|
976
|
+
*/
|
|
977
|
+
alignVertical?: CrossAlign;
|
|
978
|
+
/**
|
|
979
|
+
* The HTML element to use.
|
|
980
|
+
* @default div
|
|
981
|
+
*/
|
|
982
|
+
as?: RowTag;
|
|
983
|
+
/**
|
|
984
|
+
* The amount of space between items.
|
|
985
|
+
* @default medium
|
|
986
|
+
*/
|
|
987
|
+
gap?: RowGap;
|
|
988
|
+
/**
|
|
989
|
+
* Whether items of the row can wrap onto multiple lines.
|
|
990
|
+
* @default false
|
|
991
|
+
*/
|
|
992
|
+
wrap?: boolean;
|
|
993
|
+
} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
|
|
994
|
+
declare const Row: react.ForwardRefExoticComponent<{
|
|
995
|
+
/**
|
|
996
|
+
* The horizontal alignment of the items in the row.
|
|
997
|
+
* @default start
|
|
998
|
+
*/
|
|
999
|
+
align?: MainAlign;
|
|
1000
|
+
/**
|
|
1001
|
+
* The vertical alignment of the items in the row.
|
|
1002
|
+
* @default stretch
|
|
1003
|
+
*/
|
|
1004
|
+
alignVertical?: CrossAlign;
|
|
1005
|
+
/**
|
|
1006
|
+
* The HTML element to use.
|
|
1007
|
+
* @default div
|
|
1008
|
+
*/
|
|
1009
|
+
as?: RowTag;
|
|
1010
|
+
/**
|
|
1011
|
+
* The amount of space between items.
|
|
1012
|
+
* @default medium
|
|
1013
|
+
*/
|
|
1014
|
+
gap?: RowGap;
|
|
1015
|
+
/**
|
|
1016
|
+
* Whether items of the row can wrap onto multiple lines.
|
|
1017
|
+
* @default false
|
|
1018
|
+
*/
|
|
1019
|
+
wrap?: boolean;
|
|
1020
|
+
} & HTMLAttributes<HTMLElement> & {
|
|
1021
|
+
children?: react.ReactNode | undefined;
|
|
1022
|
+
} & react.RefAttributes<unknown>>;
|
|
1023
|
+
|
|
868
1024
|
type ScreenMaxWidth = 'wide' | 'x-wide';
|
|
869
1025
|
type ScreenProps = {
|
|
870
1026
|
/** Whether the screen should stretch to the full height of the viewport. */
|
|
@@ -881,13 +1037,324 @@ declare const Screen: react.ForwardRefExoticComponent<{
|
|
|
881
1037
|
children?: react.ReactNode | undefined;
|
|
882
1038
|
} & react.RefAttributes<HTMLDivElement>>;
|
|
883
1039
|
|
|
884
|
-
type
|
|
885
|
-
declare const
|
|
1040
|
+
type SearchFieldProps = PropsWithChildren<HTMLAttributes<HTMLFormElement>>;
|
|
1041
|
+
declare const SearchField: react.ForwardRefExoticComponent<HTMLAttributes<HTMLFormElement> & {
|
|
886
1042
|
children?: react.ReactNode | undefined;
|
|
887
|
-
} & react.RefAttributes<
|
|
1043
|
+
} & react.RefAttributes<HTMLFormElement>> & {
|
|
1044
|
+
Button: react.ForwardRefExoticComponent<{
|
|
1045
|
+
children?: react.ReactNode;
|
|
1046
|
+
className?: string | undefined | undefined;
|
|
1047
|
+
defaultChecked?: boolean | undefined | undefined;
|
|
1048
|
+
defaultValue?: string | number | readonly string[] | undefined;
|
|
1049
|
+
suppressContentEditableWarning?: boolean | undefined | undefined;
|
|
1050
|
+
suppressHydrationWarning?: boolean | undefined | undefined;
|
|
1051
|
+
accessKey?: string | undefined | undefined;
|
|
1052
|
+
autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
|
|
1053
|
+
autoFocus?: boolean | undefined | undefined;
|
|
1054
|
+
contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
|
|
1055
|
+
contextMenu?: string | undefined | undefined;
|
|
1056
|
+
dir?: string | undefined | undefined;
|
|
1057
|
+
draggable?: (boolean | "true" | "false") | undefined;
|
|
1058
|
+
enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
|
|
1059
|
+
hidden?: boolean | undefined | undefined;
|
|
1060
|
+
id?: string | undefined | undefined;
|
|
1061
|
+
lang?: string | undefined | undefined;
|
|
1062
|
+
nonce?: string | undefined | undefined;
|
|
1063
|
+
slot?: string | undefined | undefined;
|
|
1064
|
+
spellCheck?: (boolean | "true" | "false") | undefined;
|
|
1065
|
+
style?: react.CSSProperties | undefined;
|
|
1066
|
+
tabIndex?: number | undefined | undefined;
|
|
1067
|
+
title?: string | undefined | undefined;
|
|
1068
|
+
translate?: "yes" | "no" | undefined | undefined;
|
|
1069
|
+
radioGroup?: string | undefined | undefined;
|
|
1070
|
+
role?: react.AriaRole | undefined;
|
|
1071
|
+
about?: string | undefined | undefined;
|
|
1072
|
+
content?: string | undefined | undefined;
|
|
1073
|
+
datatype?: string | undefined | undefined;
|
|
1074
|
+
inlist?: any;
|
|
1075
|
+
prefix?: string | undefined | undefined;
|
|
1076
|
+
property?: string | undefined | undefined;
|
|
1077
|
+
rel?: string | undefined | undefined;
|
|
1078
|
+
resource?: string | undefined | undefined;
|
|
1079
|
+
rev?: string | undefined | undefined;
|
|
1080
|
+
typeof?: string | undefined | undefined;
|
|
1081
|
+
vocab?: string | undefined | undefined;
|
|
1082
|
+
autoCorrect?: string | undefined | undefined;
|
|
1083
|
+
autoSave?: string | undefined | undefined;
|
|
1084
|
+
color?: string | undefined | undefined;
|
|
1085
|
+
itemProp?: string | undefined | undefined;
|
|
1086
|
+
itemScope?: boolean | undefined | undefined;
|
|
1087
|
+
itemType?: string | undefined | undefined;
|
|
1088
|
+
itemID?: string | undefined | undefined;
|
|
1089
|
+
itemRef?: string | undefined | undefined;
|
|
1090
|
+
results?: number | undefined | undefined;
|
|
1091
|
+
security?: string | undefined | undefined;
|
|
1092
|
+
unselectable?: "on" | "off" | undefined | undefined;
|
|
1093
|
+
inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
|
|
1094
|
+
is?: string | undefined | undefined;
|
|
1095
|
+
"aria-activedescendant"?: string | undefined | undefined;
|
|
1096
|
+
"aria-atomic"?: (boolean | "true" | "false") | undefined;
|
|
1097
|
+
"aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
|
|
1098
|
+
"aria-braillelabel"?: string | undefined | undefined;
|
|
1099
|
+
"aria-brailleroledescription"?: string | undefined | undefined;
|
|
1100
|
+
"aria-busy"?: (boolean | "true" | "false") | undefined;
|
|
1101
|
+
"aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
|
|
1102
|
+
"aria-colcount"?: number | undefined | undefined;
|
|
1103
|
+
"aria-colindex"?: number | undefined | undefined;
|
|
1104
|
+
"aria-colindextext"?: string | undefined | undefined;
|
|
1105
|
+
"aria-colspan"?: number | undefined | undefined;
|
|
1106
|
+
"aria-controls"?: string | undefined | undefined;
|
|
1107
|
+
"aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
|
|
1108
|
+
"aria-describedby"?: string | undefined | undefined;
|
|
1109
|
+
"aria-description"?: string | undefined | undefined;
|
|
1110
|
+
"aria-details"?: string | undefined | undefined;
|
|
1111
|
+
"aria-disabled"?: (boolean | "true" | "false") | undefined;
|
|
1112
|
+
"aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
|
|
1113
|
+
"aria-errormessage"?: string | undefined | undefined;
|
|
1114
|
+
"aria-expanded"?: (boolean | "true" | "false") | undefined;
|
|
1115
|
+
"aria-flowto"?: string | undefined | undefined;
|
|
1116
|
+
"aria-grabbed"?: (boolean | "true" | "false") | undefined;
|
|
1117
|
+
"aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
|
|
1118
|
+
"aria-hidden"?: (boolean | "true" | "false") | undefined;
|
|
1119
|
+
"aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
|
|
1120
|
+
"aria-keyshortcuts"?: string | undefined | undefined;
|
|
1121
|
+
"aria-label"?: string | undefined | undefined;
|
|
1122
|
+
"aria-labelledby"?: string | undefined | undefined;
|
|
1123
|
+
"aria-level"?: number | undefined | undefined;
|
|
1124
|
+
"aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
|
|
1125
|
+
"aria-modal"?: (boolean | "true" | "false") | undefined;
|
|
1126
|
+
"aria-multiline"?: (boolean | "true" | "false") | undefined;
|
|
1127
|
+
"aria-multiselectable"?: (boolean | "true" | "false") | undefined;
|
|
1128
|
+
"aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
|
|
1129
|
+
"aria-owns"?: string | undefined | undefined;
|
|
1130
|
+
"aria-placeholder"?: string | undefined | undefined;
|
|
1131
|
+
"aria-posinset"?: number | undefined | undefined;
|
|
1132
|
+
"aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
|
|
1133
|
+
"aria-readonly"?: (boolean | "true" | "false") | undefined;
|
|
1134
|
+
"aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
|
|
1135
|
+
"aria-required"?: (boolean | "true" | "false") | undefined;
|
|
1136
|
+
"aria-roledescription"?: string | undefined | undefined;
|
|
1137
|
+
"aria-rowcount"?: number | undefined | undefined;
|
|
1138
|
+
"aria-rowindex"?: number | undefined | undefined;
|
|
1139
|
+
"aria-rowindextext"?: string | undefined | undefined;
|
|
1140
|
+
"aria-rowspan"?: number | undefined | undefined;
|
|
1141
|
+
"aria-selected"?: (boolean | "true" | "false") | undefined;
|
|
1142
|
+
"aria-setsize"?: number | undefined | undefined;
|
|
1143
|
+
"aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
|
|
1144
|
+
"aria-valuemax"?: number | undefined | undefined;
|
|
1145
|
+
"aria-valuemin"?: number | undefined | undefined;
|
|
1146
|
+
"aria-valuenow"?: number | undefined | undefined;
|
|
1147
|
+
"aria-valuetext"?: string | undefined | undefined;
|
|
1148
|
+
dangerouslySetInnerHTML?: {
|
|
1149
|
+
__html: string | TrustedHTML;
|
|
1150
|
+
} | undefined | undefined;
|
|
1151
|
+
onCopy?: react.ClipboardEventHandler<HTMLButtonElement> | undefined;
|
|
1152
|
+
onCopyCapture?: react.ClipboardEventHandler<HTMLButtonElement> | undefined;
|
|
1153
|
+
onCut?: react.ClipboardEventHandler<HTMLButtonElement> | undefined;
|
|
1154
|
+
onCutCapture?: react.ClipboardEventHandler<HTMLButtonElement> | undefined;
|
|
1155
|
+
onPaste?: react.ClipboardEventHandler<HTMLButtonElement> | undefined;
|
|
1156
|
+
onPasteCapture?: react.ClipboardEventHandler<HTMLButtonElement> | undefined;
|
|
1157
|
+
onCompositionEnd?: react.CompositionEventHandler<HTMLButtonElement> | undefined;
|
|
1158
|
+
onCompositionEndCapture?: react.CompositionEventHandler<HTMLButtonElement> | undefined;
|
|
1159
|
+
onCompositionStart?: react.CompositionEventHandler<HTMLButtonElement> | undefined;
|
|
1160
|
+
onCompositionStartCapture?: react.CompositionEventHandler<HTMLButtonElement> | undefined;
|
|
1161
|
+
onCompositionUpdate?: react.CompositionEventHandler<HTMLButtonElement> | undefined;
|
|
1162
|
+
onCompositionUpdateCapture?: react.CompositionEventHandler<HTMLButtonElement> | undefined;
|
|
1163
|
+
onFocus?: react.FocusEventHandler<HTMLButtonElement> | undefined;
|
|
1164
|
+
onFocusCapture?: react.FocusEventHandler<HTMLButtonElement> | undefined;
|
|
1165
|
+
onBlur?: react.FocusEventHandler<HTMLButtonElement> | undefined;
|
|
1166
|
+
onBlurCapture?: react.FocusEventHandler<HTMLButtonElement> | undefined;
|
|
1167
|
+
onChange?: react.FormEventHandler<HTMLButtonElement> | undefined;
|
|
1168
|
+
onChangeCapture?: react.FormEventHandler<HTMLButtonElement> | undefined;
|
|
1169
|
+
onBeforeInput?: react.FormEventHandler<HTMLButtonElement> | undefined;
|
|
1170
|
+
onBeforeInputCapture?: react.FormEventHandler<HTMLButtonElement> | undefined;
|
|
1171
|
+
onInput?: react.FormEventHandler<HTMLButtonElement> | undefined;
|
|
1172
|
+
onInputCapture?: react.FormEventHandler<HTMLButtonElement> | undefined;
|
|
1173
|
+
onReset?: react.FormEventHandler<HTMLButtonElement> | undefined;
|
|
1174
|
+
onResetCapture?: react.FormEventHandler<HTMLButtonElement> | undefined;
|
|
1175
|
+
onSubmit?: react.FormEventHandler<HTMLButtonElement> | undefined;
|
|
1176
|
+
onSubmitCapture?: react.FormEventHandler<HTMLButtonElement> | undefined;
|
|
1177
|
+
onInvalid?: react.FormEventHandler<HTMLButtonElement> | undefined;
|
|
1178
|
+
onInvalidCapture?: react.FormEventHandler<HTMLButtonElement> | undefined;
|
|
1179
|
+
onLoad?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1180
|
+
onLoadCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1181
|
+
onError?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1182
|
+
onErrorCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1183
|
+
onKeyDown?: react.KeyboardEventHandler<HTMLButtonElement> | undefined;
|
|
1184
|
+
onKeyDownCapture?: react.KeyboardEventHandler<HTMLButtonElement> | undefined;
|
|
1185
|
+
onKeyPress?: react.KeyboardEventHandler<HTMLButtonElement> | undefined;
|
|
1186
|
+
onKeyPressCapture?: react.KeyboardEventHandler<HTMLButtonElement> | undefined;
|
|
1187
|
+
onKeyUp?: react.KeyboardEventHandler<HTMLButtonElement> | undefined;
|
|
1188
|
+
onKeyUpCapture?: react.KeyboardEventHandler<HTMLButtonElement> | undefined;
|
|
1189
|
+
onAbort?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1190
|
+
onAbortCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1191
|
+
onCanPlay?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1192
|
+
onCanPlayCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1193
|
+
onCanPlayThrough?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1194
|
+
onCanPlayThroughCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1195
|
+
onDurationChange?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1196
|
+
onDurationChangeCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1197
|
+
onEmptied?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1198
|
+
onEmptiedCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1199
|
+
onEncrypted?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1200
|
+
onEncryptedCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1201
|
+
onEnded?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1202
|
+
onEndedCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1203
|
+
onLoadedData?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1204
|
+
onLoadedDataCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1205
|
+
onLoadedMetadata?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1206
|
+
onLoadedMetadataCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1207
|
+
onLoadStart?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1208
|
+
onLoadStartCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1209
|
+
onPause?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1210
|
+
onPauseCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1211
|
+
onPlay?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1212
|
+
onPlayCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1213
|
+
onPlaying?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1214
|
+
onPlayingCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1215
|
+
onProgress?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1216
|
+
onProgressCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1217
|
+
onRateChange?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1218
|
+
onRateChangeCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1219
|
+
onResize?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1220
|
+
onResizeCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1221
|
+
onSeeked?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1222
|
+
onSeekedCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1223
|
+
onSeeking?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1224
|
+
onSeekingCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1225
|
+
onStalled?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1226
|
+
onStalledCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1227
|
+
onSuspend?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1228
|
+
onSuspendCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1229
|
+
onTimeUpdate?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1230
|
+
onTimeUpdateCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1231
|
+
onVolumeChange?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1232
|
+
onVolumeChangeCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1233
|
+
onWaiting?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1234
|
+
onWaitingCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1235
|
+
onAuxClick?: react.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
1236
|
+
onAuxClickCapture?: react.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
1237
|
+
onClick?: react.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
1238
|
+
onClickCapture?: react.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
1239
|
+
onContextMenu?: react.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
1240
|
+
onContextMenuCapture?: react.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
1241
|
+
onDoubleClick?: react.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
1242
|
+
onDoubleClickCapture?: react.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
1243
|
+
onDrag?: react.DragEventHandler<HTMLButtonElement> | undefined;
|
|
1244
|
+
onDragCapture?: react.DragEventHandler<HTMLButtonElement> | undefined;
|
|
1245
|
+
onDragEnd?: react.DragEventHandler<HTMLButtonElement> | undefined;
|
|
1246
|
+
onDragEndCapture?: react.DragEventHandler<HTMLButtonElement> | undefined;
|
|
1247
|
+
onDragEnter?: react.DragEventHandler<HTMLButtonElement> | undefined;
|
|
1248
|
+
onDragEnterCapture?: react.DragEventHandler<HTMLButtonElement> | undefined;
|
|
1249
|
+
onDragExit?: react.DragEventHandler<HTMLButtonElement> | undefined;
|
|
1250
|
+
onDragExitCapture?: react.DragEventHandler<HTMLButtonElement> | undefined;
|
|
1251
|
+
onDragLeave?: react.DragEventHandler<HTMLButtonElement> | undefined;
|
|
1252
|
+
onDragLeaveCapture?: react.DragEventHandler<HTMLButtonElement> | undefined;
|
|
1253
|
+
onDragOver?: react.DragEventHandler<HTMLButtonElement> | undefined;
|
|
1254
|
+
onDragOverCapture?: react.DragEventHandler<HTMLButtonElement> | undefined;
|
|
1255
|
+
onDragStart?: react.DragEventHandler<HTMLButtonElement> | undefined;
|
|
1256
|
+
onDragStartCapture?: react.DragEventHandler<HTMLButtonElement> | undefined;
|
|
1257
|
+
onDrop?: react.DragEventHandler<HTMLButtonElement> | undefined;
|
|
1258
|
+
onDropCapture?: react.DragEventHandler<HTMLButtonElement> | undefined;
|
|
1259
|
+
onMouseDown?: react.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
1260
|
+
onMouseDownCapture?: react.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
1261
|
+
onMouseEnter?: react.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
1262
|
+
onMouseLeave?: react.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
1263
|
+
onMouseMove?: react.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
1264
|
+
onMouseMoveCapture?: react.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
1265
|
+
onMouseOut?: react.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
1266
|
+
onMouseOutCapture?: react.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
1267
|
+
onMouseOver?: react.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
1268
|
+
onMouseOverCapture?: react.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
1269
|
+
onMouseUp?: react.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
1270
|
+
onMouseUpCapture?: react.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
1271
|
+
onSelect?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1272
|
+
onSelectCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
|
|
1273
|
+
onTouchCancel?: react.TouchEventHandler<HTMLButtonElement> | undefined;
|
|
1274
|
+
onTouchCancelCapture?: react.TouchEventHandler<HTMLButtonElement> | undefined;
|
|
1275
|
+
onTouchEnd?: react.TouchEventHandler<HTMLButtonElement> | undefined;
|
|
1276
|
+
onTouchEndCapture?: react.TouchEventHandler<HTMLButtonElement> | undefined;
|
|
1277
|
+
onTouchMove?: react.TouchEventHandler<HTMLButtonElement> | undefined;
|
|
1278
|
+
onTouchMoveCapture?: react.TouchEventHandler<HTMLButtonElement> | undefined;
|
|
1279
|
+
onTouchStart?: react.TouchEventHandler<HTMLButtonElement> | undefined;
|
|
1280
|
+
onTouchStartCapture?: react.TouchEventHandler<HTMLButtonElement> | undefined;
|
|
1281
|
+
onPointerDown?: react.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
1282
|
+
onPointerDownCapture?: react.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
1283
|
+
onPointerMove?: react.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
1284
|
+
onPointerMoveCapture?: react.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
1285
|
+
onPointerUp?: react.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
1286
|
+
onPointerUpCapture?: react.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
1287
|
+
onPointerCancel?: react.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
1288
|
+
onPointerCancelCapture?: react.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
1289
|
+
onPointerEnter?: react.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
1290
|
+
onPointerLeave?: react.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
1291
|
+
onPointerOver?: react.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
1292
|
+
onPointerOverCapture?: react.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
1293
|
+
onPointerOut?: react.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
1294
|
+
onPointerOutCapture?: react.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
1295
|
+
onGotPointerCapture?: react.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
1296
|
+
onGotPointerCaptureCapture?: react.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
1297
|
+
onLostPointerCapture?: react.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
1298
|
+
onLostPointerCaptureCapture?: react.PointerEventHandler<HTMLButtonElement> | undefined;
|
|
1299
|
+
onScroll?: react.UIEventHandler<HTMLButtonElement> | undefined;
|
|
1300
|
+
onScrollCapture?: react.UIEventHandler<HTMLButtonElement> | undefined;
|
|
1301
|
+
onWheel?: react.WheelEventHandler<HTMLButtonElement> | undefined;
|
|
1302
|
+
onWheelCapture?: react.WheelEventHandler<HTMLButtonElement> | undefined;
|
|
1303
|
+
onAnimationStart?: react.AnimationEventHandler<HTMLButtonElement> | undefined;
|
|
1304
|
+
onAnimationStartCapture?: react.AnimationEventHandler<HTMLButtonElement> | undefined;
|
|
1305
|
+
onAnimationEnd?: react.AnimationEventHandler<HTMLButtonElement> | undefined;
|
|
1306
|
+
onAnimationEndCapture?: react.AnimationEventHandler<HTMLButtonElement> | undefined;
|
|
1307
|
+
onAnimationIteration?: react.AnimationEventHandler<HTMLButtonElement> | undefined;
|
|
1308
|
+
onAnimationIterationCapture?: react.AnimationEventHandler<HTMLButtonElement> | undefined;
|
|
1309
|
+
onTransitionEnd?: react.TransitionEventHandler<HTMLButtonElement> | undefined;
|
|
1310
|
+
onTransitionEndCapture?: react.TransitionEventHandler<HTMLButtonElement> | undefined;
|
|
1311
|
+
disabled?: boolean | undefined | undefined;
|
|
1312
|
+
form?: string | undefined | undefined;
|
|
1313
|
+
formAction?: string | undefined;
|
|
1314
|
+
formEncType?: string | undefined | undefined;
|
|
1315
|
+
formMethod?: string | undefined | undefined;
|
|
1316
|
+
formNoValidate?: boolean | undefined | undefined;
|
|
1317
|
+
formTarget?: string | undefined | undefined;
|
|
1318
|
+
name?: string | undefined | undefined;
|
|
1319
|
+
type?: "submit" | "reset" | "button" | undefined | undefined;
|
|
1320
|
+
value?: string | number | readonly string[] | undefined;
|
|
1321
|
+
} & react.RefAttributes<HTMLButtonElement>>;
|
|
1322
|
+
Input: react.ForwardRefExoticComponent<{
|
|
1323
|
+
invalid?: boolean;
|
|
1324
|
+
label?: string;
|
|
1325
|
+
} & react.InputHTMLAttributes<HTMLInputElement> & react.RefAttributes<HTMLInputElement>>;
|
|
1326
|
+
};
|
|
888
1327
|
|
|
889
|
-
|
|
890
|
-
|
|
1328
|
+
type SelectOptionGroupProps = OptgroupHTMLAttributes<HTMLOptGroupElement>;
|
|
1329
|
+
|
|
1330
|
+
type SelectOptionProps = OptionHTMLAttributes<HTMLOptionElement>;
|
|
1331
|
+
|
|
1332
|
+
type SelectProps = {
|
|
1333
|
+
/** Whether the value fails a validation rule. */
|
|
1334
|
+
invalid?: boolean;
|
|
1335
|
+
} & PropsWithChildren<Omit<SelectHTMLAttributes<HTMLSelectElement>, 'aria-invalid'>>;
|
|
1336
|
+
declare const Select: react.ForwardRefExoticComponent<{
|
|
1337
|
+
/** Whether the value fails a validation rule. */
|
|
1338
|
+
invalid?: boolean;
|
|
1339
|
+
} & Omit<SelectHTMLAttributes<HTMLSelectElement>, "aria-invalid"> & {
|
|
1340
|
+
children?: react.ReactNode | undefined;
|
|
1341
|
+
} & react.RefAttributes<HTMLSelectElement>> & {
|
|
1342
|
+
Option: react.ForwardRefExoticComponent<SelectOptionProps & {
|
|
1343
|
+
children?: react.ReactNode | undefined;
|
|
1344
|
+
} & react.RefAttributes<HTMLOptionElement>>;
|
|
1345
|
+
Group: react.ForwardRefExoticComponent<SelectOptionGroupProps & {
|
|
1346
|
+
children?: react.ReactNode | undefined;
|
|
1347
|
+
} & react.RefAttributes<HTMLOptGroupElement>>;
|
|
1348
|
+
};
|
|
1349
|
+
|
|
1350
|
+
type SkipLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
|
|
1351
|
+
declare const SkipLink: react.ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
|
|
1352
|
+
children?: react.ReactNode | undefined;
|
|
1353
|
+
} & react.RefAttributes<HTMLAnchorElement>>;
|
|
1354
|
+
|
|
1355
|
+
declare const defaultColor = "purple";
|
|
1356
|
+
declare const spotlightColors: readonly ["blue", "dark-green", "green", "magenta", "orange", "yellow"];
|
|
1357
|
+
type SpotlightColor = (typeof spotlightColors)[number] | typeof defaultColor;
|
|
891
1358
|
type SpotlightProps = {
|
|
892
1359
|
/** The HTML element to use. */
|
|
893
1360
|
as?: 'article' | 'aside' | 'div' | 'footer' | 'section';
|
|
@@ -903,32 +1370,39 @@ declare const Spotlight: react.ForwardRefExoticComponent<{
|
|
|
903
1370
|
children?: react.ReactNode | undefined;
|
|
904
1371
|
} & react.RefAttributes<unknown>>;
|
|
905
1372
|
|
|
906
|
-
type
|
|
907
|
-
declare const
|
|
1373
|
+
type SwitchProps = PropsWithChildren<InputHTMLAttributes<HTMLInputElement>>;
|
|
1374
|
+
declare const Switch: react.ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
|
|
908
1375
|
children?: react.ReactNode | undefined;
|
|
909
|
-
} & react.RefAttributes<
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
1376
|
+
} & react.RefAttributes<HTMLInputElement>>;
|
|
1377
|
+
|
|
1378
|
+
type TableProps = PropsWithChildren<TableHTMLAttributes<HTMLTableElement>>;
|
|
1379
|
+
declare const Table: react.ForwardRefExoticComponent<TableHTMLAttributes<HTMLTableElement> & {
|
|
1380
|
+
children?: react.ReactNode | undefined;
|
|
1381
|
+
} & react.RefAttributes<HTMLTableElement>> & {
|
|
1382
|
+
Body: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableSectionElement> & {
|
|
913
1383
|
children?: react.ReactNode | undefined;
|
|
914
|
-
} & react.RefAttributes<
|
|
915
|
-
|
|
1384
|
+
} & react.RefAttributes<HTMLTableSectionElement>>;
|
|
1385
|
+
Caption: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableCaptionElement> & {
|
|
916
1386
|
children?: react.ReactNode | undefined;
|
|
917
|
-
} & react.RefAttributes<
|
|
1387
|
+
} & react.RefAttributes<HTMLTableCaptionElement>>;
|
|
1388
|
+
Cell: react.ForwardRefExoticComponent<react.TdHTMLAttributes<HTMLTableCellElement> & {
|
|
1389
|
+
children?: react.ReactNode | undefined;
|
|
1390
|
+
} & react.RefAttributes<HTMLTableCellElement>>;
|
|
1391
|
+
Footer: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableSectionElement> & {
|
|
1392
|
+
children?: react.ReactNode | undefined;
|
|
1393
|
+
} & react.RefAttributes<HTMLTableSectionElement>>;
|
|
1394
|
+
Header: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableSectionElement> & {
|
|
1395
|
+
children?: react.ReactNode | undefined;
|
|
1396
|
+
} & react.RefAttributes<HTMLTableSectionElement>>;
|
|
1397
|
+
HeaderCell: react.ForwardRefExoticComponent<react.ThHTMLAttributes<HTMLTableCellElement> & {
|
|
1398
|
+
children?: react.ReactNode | undefined;
|
|
1399
|
+
} & react.RefAttributes<HTMLTableCellElement>>;
|
|
1400
|
+
Row: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableRowElement> & {
|
|
1401
|
+
children?: react.ReactNode | undefined;
|
|
1402
|
+
} & react.RefAttributes<HTMLTableRowElement>>;
|
|
918
1403
|
};
|
|
919
1404
|
|
|
920
|
-
type
|
|
921
|
-
/** A short phrase of text, e.g. to categorise the card. Displayed above the card heading. */
|
|
922
|
-
tagline: string;
|
|
923
|
-
} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
|
|
924
|
-
|
|
925
|
-
type CardLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
|
|
926
|
-
|
|
927
|
-
type AlertProps = {
|
|
928
|
-
/** Whether the user can dismiss the Alert. Adds a button to its top right. */
|
|
929
|
-
closeable?: boolean;
|
|
930
|
-
/** The label for the button that dismisses the Alert. */
|
|
931
|
-
closeButtonLabel?: string;
|
|
1405
|
+
type TableOfContentsProps = {
|
|
932
1406
|
/** The text for the Heading. */
|
|
933
1407
|
heading?: string;
|
|
934
1408
|
/**
|
|
@@ -936,16 +1410,8 @@ type AlertProps = {
|
|
|
936
1410
|
* Note: this intentionally does not change the font size.
|
|
937
1411
|
*/
|
|
938
1412
|
headingLevel?: HeadingProps['level'];
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
/** The significance of the message conveyed. */
|
|
942
|
-
severity?: 'error' | 'info' | 'success' | 'warning';
|
|
943
|
-
} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
|
|
944
|
-
declare const Alert: react.ForwardRefExoticComponent<{
|
|
945
|
-
/** Whether the user can dismiss the Alert. Adds a button to its top right. */
|
|
946
|
-
closeable?: boolean;
|
|
947
|
-
/** The label for the button that dismisses the Alert. */
|
|
948
|
-
closeButtonLabel?: string;
|
|
1413
|
+
} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
|
|
1414
|
+
declare const TableOfContents: react.ForwardRefExoticComponent<{
|
|
949
1415
|
/** The text for the Heading. */
|
|
950
1416
|
heading?: string;
|
|
951
1417
|
/**
|
|
@@ -953,214 +1419,104 @@ declare const Alert: react.ForwardRefExoticComponent<{
|
|
|
953
1419
|
* Note: this intentionally does not change the font size.
|
|
954
1420
|
*/
|
|
955
1421
|
headingLevel?: HeadingProps["level"];
|
|
956
|
-
|
|
957
|
-
onClose?: () => void;
|
|
958
|
-
/** The significance of the message conveyed. */
|
|
959
|
-
severity?: "error" | "info" | "success" | "warning";
|
|
960
|
-
} & HTMLAttributes<HTMLDivElement> & {
|
|
961
|
-
children?: react.ReactNode | undefined;
|
|
962
|
-
} & react.RefAttributes<HTMLDivElement>>;
|
|
963
|
-
|
|
964
|
-
type FooterProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
|
|
965
|
-
declare const Footer: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
|
|
1422
|
+
} & HTMLAttributes<HTMLElement> & {
|
|
966
1423
|
children?: react.ReactNode | undefined;
|
|
967
1424
|
} & react.RefAttributes<HTMLElement>> & {
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
} & react.RefAttributes<
|
|
971
|
-
|
|
972
|
-
children?: react.ReactNode | undefined;
|
|
973
|
-
} & react.RefAttributes<HTMLDivElement>>;
|
|
974
|
-
};
|
|
975
|
-
|
|
976
|
-
type FooterBottomProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
|
|
977
|
-
|
|
978
|
-
type FooterTopProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
|
|
979
|
-
|
|
980
|
-
type PageMenuProps = {
|
|
981
|
-
/** Whether the items align to the end margin. Set to `true` if the Page Menu itself does so. */
|
|
982
|
-
alignEnd?: boolean;
|
|
983
|
-
/** Whether menu items should wrap if they don’t fit on a single row. */
|
|
984
|
-
wrap?: boolean;
|
|
985
|
-
} & PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
|
|
986
|
-
declare const PageMenu: react.ForwardRefExoticComponent<{
|
|
987
|
-
/** Whether the items align to the end margin. Set to `true` if the Page Menu itself does so. */
|
|
988
|
-
alignEnd?: boolean;
|
|
989
|
-
/** Whether menu items should wrap if they don’t fit on a single row. */
|
|
990
|
-
wrap?: boolean;
|
|
991
|
-
} & HTMLAttributes<HTMLUListElement> & {
|
|
992
|
-
children?: react.ReactNode | undefined;
|
|
993
|
-
} & react.RefAttributes<HTMLUListElement>> & {
|
|
994
|
-
Link: react.ForwardRefExoticComponent<{
|
|
995
|
-
icon?: Function;
|
|
996
|
-
} & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
|
|
1425
|
+
Link: react.ForwardRefExoticComponent<{
|
|
1426
|
+
label: string;
|
|
1427
|
+
} & react.AnchorHTMLAttributes<HTMLAnchorElement> & react.RefAttributes<HTMLAnchorElement>>;
|
|
1428
|
+
List: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
|
|
997
1429
|
children?: react.ReactNode | undefined;
|
|
998
|
-
} & react.RefAttributes<
|
|
1430
|
+
} & react.RefAttributes<HTMLUListElement>>;
|
|
999
1431
|
};
|
|
1000
1432
|
|
|
1001
|
-
type
|
|
1002
|
-
|
|
1003
|
-
} & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
|
|
1004
|
-
|
|
1005
|
-
declare const TopTaskLink: react.ForwardRefExoticComponent<{
|
|
1006
|
-
/** The title. */
|
|
1433
|
+
type TableOfContentsLinkProps = {
|
|
1434
|
+
/** The text for the link. */
|
|
1007
1435
|
label: string;
|
|
1008
|
-
|
|
1009
|
-
description: string;
|
|
1010
|
-
} & AnchorHTMLAttributes<HTMLAnchorElement> & react.RefAttributes<HTMLAnchorElement>>;
|
|
1011
|
-
|
|
1012
|
-
type BlockquoteProps = {
|
|
1013
|
-
/** Changes the text colour for readability on a dark background. */
|
|
1014
|
-
inverseColor?: boolean;
|
|
1015
|
-
} & PropsWithChildren<BlockquoteHTMLAttributes<HTMLQuoteElement>>;
|
|
1016
|
-
declare const Blockquote: react.ForwardRefExoticComponent<{
|
|
1017
|
-
/** Changes the text colour for readability on a dark background. */
|
|
1018
|
-
inverseColor?: boolean;
|
|
1019
|
-
} & BlockquoteHTMLAttributes<HTMLQuoteElement> & {
|
|
1020
|
-
children?: react.ReactNode | undefined;
|
|
1021
|
-
} & react.RefAttributes<HTMLQuoteElement>>;
|
|
1022
|
-
|
|
1023
|
-
type CheckboxProps = {
|
|
1024
|
-
/** Whether the value fails a validation rule. */
|
|
1025
|
-
invalid?: boolean;
|
|
1026
|
-
/** Allows being neither checked nor unchecked. */
|
|
1027
|
-
indeterminate?: boolean;
|
|
1028
|
-
} & PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>>;
|
|
1029
|
-
declare const Checkbox: react.ForwardRefExoticComponent<{
|
|
1030
|
-
/** Whether the value fails a validation rule. */
|
|
1031
|
-
invalid?: boolean;
|
|
1032
|
-
/** Allows being neither checked nor unchecked. */
|
|
1033
|
-
indeterminate?: boolean;
|
|
1034
|
-
} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
|
|
1035
|
-
children?: react.ReactNode | undefined;
|
|
1036
|
-
} & react.RefAttributes<HTMLInputElement>>;
|
|
1436
|
+
} & AnchorHTMLAttributes<HTMLAnchorElement>;
|
|
1037
1437
|
|
|
1038
|
-
type
|
|
1039
|
-
/** Changes the text colour for readability on a dark background. */
|
|
1040
|
-
inverseColor?: boolean;
|
|
1041
|
-
} & PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>;
|
|
1042
|
-
declare const PageHeading: react.ForwardRefExoticComponent<{
|
|
1043
|
-
/** Changes the text colour for readability on a dark background. */
|
|
1044
|
-
inverseColor?: boolean;
|
|
1045
|
-
} & HTMLAttributes<HTMLHeadingElement> & {
|
|
1046
|
-
children?: react.ReactNode | undefined;
|
|
1047
|
-
} & react.RefAttributes<HTMLHeadingElement>>;
|
|
1438
|
+
type TableOfContentsListProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
|
|
1048
1439
|
|
|
1049
|
-
type
|
|
1050
|
-
/**
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
/** The
|
|
1055
|
-
|
|
1056
|
-
} &
|
|
1057
|
-
declare const OrderedList: react.ForwardRefExoticComponent<{
|
|
1058
|
-
/** Changes the text colour for readability on a dark background. */
|
|
1059
|
-
inverseColor?: boolean;
|
|
1060
|
-
/** Whether the list items show a marker. */
|
|
1061
|
-
markers?: boolean;
|
|
1062
|
-
/** The size of the text. */
|
|
1063
|
-
size?: "small";
|
|
1064
|
-
} & OlHTMLAttributes<HTMLOListElement> & {
|
|
1440
|
+
type TabsProps = {
|
|
1441
|
+
/** The number of the active tab. Corresponds to its `tab` value. */
|
|
1442
|
+
activeTab?: number;
|
|
1443
|
+
} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
|
|
1444
|
+
declare const Tabs: react.ForwardRefExoticComponent<{
|
|
1445
|
+
/** The number of the active tab. Corresponds to its `tab` value. */
|
|
1446
|
+
activeTab?: number;
|
|
1447
|
+
} & HTMLAttributes<HTMLDivElement> & {
|
|
1065
1448
|
children?: react.ReactNode | undefined;
|
|
1066
|
-
} & react.RefAttributes<
|
|
1067
|
-
|
|
1449
|
+
} & react.RefAttributes<HTMLDivElement>> & {
|
|
1450
|
+
Button: react.ForwardRefExoticComponent<{
|
|
1451
|
+
tab: number;
|
|
1452
|
+
} & react.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
1068
1453
|
children?: react.ReactNode | undefined;
|
|
1069
|
-
} & react.RefAttributes<
|
|
1454
|
+
} & react.RefAttributes<HTMLButtonElement>>;
|
|
1455
|
+
List: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
|
|
1456
|
+
children?: react.ReactNode | undefined;
|
|
1457
|
+
} & react.RefAttributes<HTMLDivElement>>;
|
|
1458
|
+
Panel: react.ForwardRefExoticComponent<{
|
|
1459
|
+
tab: number;
|
|
1460
|
+
} & HTMLAttributes<HTMLDivElement> & {
|
|
1461
|
+
children?: react.ReactNode | undefined;
|
|
1462
|
+
} & react.RefAttributes<HTMLDivElement>>;
|
|
1070
1463
|
};
|
|
1071
1464
|
|
|
1072
|
-
type
|
|
1073
|
-
|
|
1074
|
-
|
|
1465
|
+
type TabsPanelProps = {
|
|
1466
|
+
/** The identifier of the corresponding Tab. */
|
|
1467
|
+
tab: number;
|
|
1468
|
+
} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
|
|
1075
1469
|
|
|
1076
|
-
type
|
|
1077
|
-
declare const Breadcrumb: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
|
|
1078
|
-
children?: react.ReactNode | undefined;
|
|
1079
|
-
} & react.RefAttributes<HTMLElement>> & {
|
|
1080
|
-
Link: react.ForwardRefExoticComponent<BreadcrumbLinkProps & react.RefAttributes<HTMLAnchorElement>>;
|
|
1081
|
-
};
|
|
1470
|
+
type TabsListProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
|
|
1082
1471
|
|
|
1083
|
-
type
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
/** Changes the text colour for readability on a dark background. */
|
|
1088
|
-
inverseColor?: boolean;
|
|
1089
|
-
/** Whether the link is inline or stands alone. */
|
|
1090
|
-
variant?: LinkVariant;
|
|
1091
|
-
} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'>;
|
|
1092
|
-
declare const Link: react.ForwardRefExoticComponent<{
|
|
1093
|
-
/** Changes the text colour for readability on a light background. */
|
|
1094
|
-
contrastColor?: boolean;
|
|
1095
|
-
/** Changes the text colour for readability on a dark background. */
|
|
1096
|
-
inverseColor?: boolean;
|
|
1097
|
-
/** Whether the link is inline or stands alone. */
|
|
1098
|
-
variant?: LinkVariant;
|
|
1099
|
-
} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "placeholder"> & react.RefAttributes<HTMLAnchorElement>>;
|
|
1472
|
+
type TabsButtonProps = {
|
|
1473
|
+
/** An identifier. */
|
|
1474
|
+
tab: number;
|
|
1475
|
+
} & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>;
|
|
1100
1476
|
|
|
1101
|
-
type
|
|
1102
|
-
/**
|
|
1103
|
-
|
|
1104
|
-
/**
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
/**
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
square?: boolean;
|
|
1114
|
-
/** The component rendering the icon’s markup. */
|
|
1115
|
-
svg: Function;
|
|
1116
|
-
} & HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLElement>>;
|
|
1477
|
+
type TextAreaProps = {
|
|
1478
|
+
/** Whether the value fails a validation rule. */
|
|
1479
|
+
invalid?: boolean;
|
|
1480
|
+
/** Allows the user to resize the text box. The default is resizing in both directions. */
|
|
1481
|
+
resize?: 'none' | 'horizontal' | 'vertical';
|
|
1482
|
+
} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'aria-invalid'>;
|
|
1483
|
+
declare const TextArea: react.ForwardRefExoticComponent<{
|
|
1484
|
+
/** Whether the value fails a validation rule. */
|
|
1485
|
+
invalid?: boolean;
|
|
1486
|
+
/** Allows the user to resize the text box. The default is resizing in both directions. */
|
|
1487
|
+
resize?: "none" | "horizontal" | "vertical";
|
|
1488
|
+
} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "aria-invalid"> & react.RefAttributes<HTMLTextAreaElement>>;
|
|
1117
1489
|
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
/**
|
|
1130
|
-
|
|
1131
|
-
} &
|
|
1132
|
-
type TextButtonProps = {
|
|
1133
|
-
icon?: never;
|
|
1134
|
-
iconBefore?: never;
|
|
1135
|
-
iconOnly?: never;
|
|
1136
|
-
};
|
|
1137
|
-
type ButtonProps = {
|
|
1138
|
-
/** The level of prominence. Use a primary button only once per page or section. */
|
|
1139
|
-
variant?: 'primary' | 'secondary' | 'tertiary';
|
|
1140
|
-
} & (IconButtonProps | TextButtonProps) & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>;
|
|
1141
|
-
declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
|
|
1490
|
+
declare const textInputTypes: readonly ["email", "tel", "text", "url"];
|
|
1491
|
+
type TextInputType = (typeof textInputTypes)[number];
|
|
1492
|
+
type TextInputProps = {
|
|
1493
|
+
/** Whether the value fails a validation rule. */
|
|
1494
|
+
invalid?: boolean;
|
|
1495
|
+
/** The kind of data that the user should provide. */
|
|
1496
|
+
type?: TextInputType;
|
|
1497
|
+
} & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid'>;
|
|
1498
|
+
declare const TextInput: react.ForwardRefExoticComponent<{
|
|
1499
|
+
/** Whether the value fails a validation rule. */
|
|
1500
|
+
invalid?: boolean;
|
|
1501
|
+
/** The kind of data that the user should provide. */
|
|
1502
|
+
type?: TextInputType;
|
|
1503
|
+
} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid"> & react.RefAttributes<HTMLInputElement>>;
|
|
1142
1504
|
|
|
1143
|
-
type
|
|
1144
|
-
/**
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
inverseColor?: boolean;
|
|
1152
|
-
/** The size of the text. */
|
|
1153
|
-
size?: "small" | "large";
|
|
1154
|
-
} & HTMLAttributes<HTMLParagraphElement> & {
|
|
1155
|
-
children?: react.ReactNode | undefined;
|
|
1156
|
-
} & react.RefAttributes<HTMLParagraphElement>>;
|
|
1505
|
+
type TimeInputProps = {
|
|
1506
|
+
/** Whether the value fails a validation rule. */
|
|
1507
|
+
invalid?: boolean;
|
|
1508
|
+
} & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>;
|
|
1509
|
+
declare const TimeInput: react.ForwardRefExoticComponent<{
|
|
1510
|
+
/** Whether the value fails a validation rule. */
|
|
1511
|
+
invalid?: boolean;
|
|
1512
|
+
} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & react.RefAttributes<HTMLInputElement>>;
|
|
1157
1513
|
|
|
1158
|
-
declare const
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
1163
|
-
} & react.RefAttributes<
|
|
1514
|
+
declare const TopTaskLink: react.ForwardRefExoticComponent<{
|
|
1515
|
+
/** The title. */
|
|
1516
|
+
label: string;
|
|
1517
|
+
/** The text content. */
|
|
1518
|
+
description: string;
|
|
1519
|
+
} & AnchorHTMLAttributes<HTMLAnchorElement> & react.RefAttributes<HTMLAnchorElement>>;
|
|
1164
1520
|
|
|
1165
1521
|
type UnorderedListProps = {
|
|
1166
1522
|
/** Changes the text colour for readability on a dark background. */
|
|
@@ -1187,33 +1543,4 @@ declare const UnorderedList: react.ForwardRefExoticComponent<{
|
|
|
1187
1543
|
|
|
1188
1544
|
type UnorderedListItemProps = PropsWithChildren<LiHTMLAttributes<HTMLLIElement>>;
|
|
1189
1545
|
|
|
1190
|
-
type AccordionProps
|
|
1191
|
-
/** The hierarchical level of the Accordion Section heading(s) within the document. */
|
|
1192
|
-
headingLevel: HeadingProps['level'];
|
|
1193
|
-
/** The HTML element to use for each Accordion Section. */
|
|
1194
|
-
sectionAs?: 'div' | 'section';
|
|
1195
|
-
} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
|
|
1196
|
-
declare const Accordion: react.ForwardRefExoticComponent<{
|
|
1197
|
-
/** The hierarchical level of the Accordion Section heading(s) within the document. */
|
|
1198
|
-
headingLevel: HeadingProps["level"];
|
|
1199
|
-
/** The HTML element to use for each Accordion Section. */
|
|
1200
|
-
sectionAs?: "div" | "section";
|
|
1201
|
-
} & HTMLAttributes<HTMLDivElement> & {
|
|
1202
|
-
children?: react.ReactNode | undefined;
|
|
1203
|
-
} & react.RefAttributes<HTMLDivElement>> & {
|
|
1204
|
-
Section: react.ForwardRefExoticComponent<{
|
|
1205
|
-
label: string;
|
|
1206
|
-
expanded?: boolean;
|
|
1207
|
-
} & HTMLAttributes<HTMLElement> & {
|
|
1208
|
-
children?: react.ReactNode | undefined;
|
|
1209
|
-
} & react.RefAttributes<HTMLDivElement>>;
|
|
1210
|
-
};
|
|
1211
|
-
|
|
1212
|
-
type AccordionSectionProps = {
|
|
1213
|
-
/** The heading text. */
|
|
1214
|
-
label: string;
|
|
1215
|
-
/** Whether the content is displayed initially. */
|
|
1216
|
-
expanded?: boolean;
|
|
1217
|
-
} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
|
|
1218
|
-
|
|
1219
|
-
export { Accordion, type AccordionProps, type AccordionSectionProps, ActionGroup, type ActionGroupProps, Alert, type AlertProps, AspectRatio, type AspectRatioProps, Avatar, type AvatarProps, Badge, type BadgeProps, Blockquote, type BlockquoteProps, Breadcrumb, type BreadcrumbLinkProps, type BreadcrumbProps, Breakout, type BreakoutCellProps, type BreakoutProps, Button, type ButtonProps, Card, type CardHeadingGroupProps, type CardLinkProps, type CardProps, CharacterCount, type CharacterCountProps, Checkbox, type CheckboxProps, Column, type ColumnProps, DateInput, type DateInputProps, DescriptionList, type DescriptionListDescriptionProps, type DescriptionListProps, type DescriptionListTermProps, Dialog, type DialogProps, ErrorMessage, type ErrorMessageProps, Field, type FieldProps, FieldSet, type FieldSetProps, FileInput, type FileInputProps, Footer, type FooterBottomProps, type FooterProps, type FooterTopProps, type FormError, FormErrorList, type FormErrorListProps, Grid, type GridCellProps, type GridColumnNumber, type GridColumnNumbers, type GridProps, Header, type HeaderProps, Heading, type HeadingProps, Hint, type HintProps, Icon, IconButton, type IconButtonProps$1 as IconButtonProps, type IconProps, Image, type ImageProps, ImageSlider, type ImageSliderItemProps, type ImageSliderProps, Label, Link, LinkList, type LinkListLinkProps, type LinkListProps, type LinkProps, Logo, type LogoBrand, type LogoProps, Mark, type MarkProps, MegaMenu, type MegaMenuListCategoryProps, type MegaMenuProps, OrderedList, type OrderedListItemProps, type OrderedListProps, Overlap, type OverlapProps, PageHeading, type PageHeadingProps, PageMenu, type PageMenuLinkProps, type PageMenuProps, Pagination, type PaginationProps, Paragraph, type ParagraphProps, PasswordInput, type PasswordInputProps, Radio, type RadioProps, type Ratio, Row, type RowProps, Screen, type ScreenProps, SearchField, type SearchFieldProps, Select, type SelectOptionProps, type SelectProps, SkipLink, type SkipLinkProps, Spotlight, type SpotlightProps, Switch, type SwitchProps, Table, TableOfContents, type TableOfContentsLinkProps, type TableOfContentsListProps, type TableOfContentsProps, type TableProps, Tabs, type TabsButtonProps, type TabsListProps, type TabsPanelProps, type TabsProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, TimeInput, type TimeInputProps, TopTaskLink, UnorderedList, type UnorderedListItemProps, type UnorderedListProps };
|
|
1546
|
+
export { Accordion, type AccordionProps, type AccordionSectionProps, ActionGroup, type ActionGroupProps, Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, Blockquote, type BlockquoteProps, Breadcrumb, type BreadcrumbLinkProps, type BreadcrumbProps, Breakout, type BreakoutCellProps, type BreakoutProps, Button, type ButtonProps, Card, type CardHeadingGroupProps, type CardLinkProps, type CardProps, CharacterCount, type CharacterCountProps, Checkbox, type CheckboxProps, Column, type ColumnProps, DateInput, type DateInputProps, DescriptionList, type DescriptionListDescriptionProps, type DescriptionListProps, type DescriptionListTermProps, Dialog, type DialogProps, ErrorMessage, type ErrorMessageProps, Field, type FieldProps, FieldSet, type FieldSetProps, Figure, type FigureProps, FileInput, type FileInputProps, FileList, type FileListProps, Footer, type FooterBottomProps, type FooterProps, type FooterTopProps, type FormError, FormErrorList, type FormErrorListProps, Grid, type GridCellProps, type GridColumnNumber, type GridColumnNumbers, type GridProps, Header, type HeaderMenuLinkProps, type HeaderProps, Heading, type HeadingProps, Hint, type HintProps, Icon, IconButton, type IconButtonProps, type IconProps, Image, type ImageProps, ImageSlider, type ImageSliderItemProps, type ImageSliderProps, Label, Link, LinkList, type LinkListLinkProps, type LinkListProps, type LinkProps, Logo, type LogoBrand, type LogoProps, Mark, type MarkProps, MegaMenu, type MegaMenuListCategoryProps, type MegaMenuProps, OrderedList, type OrderedListItemProps, type OrderedListProps, Overlap, type OverlapProps, PageHeading, type PageHeadingProps, PageMenu, type PageMenuLinkProps, type PageMenuProps, Pagination, type PaginationProps, Paragraph, type ParagraphProps, PasswordInput, type PasswordInputProps, Radio, type RadioProps, Row, type RowProps, Screen, type ScreenProps, SearchField, type SearchFieldProps, Select, type SelectOptionProps, type SelectProps, SkipLink, type SkipLinkProps, Spotlight, type SpotlightProps, Switch, type SwitchProps, Table, TableOfContents, type TableOfContentsLinkProps, type TableOfContentsListProps, type TableOfContentsProps, type TableProps, Tabs, type TabsButtonProps, type TabsListProps, type TabsPanelProps, type TabsProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, TimeInput, type TimeInputProps, TopTaskLink, UnorderedList, type UnorderedListItemProps, type UnorderedListProps };
|