@baseline-ui/core 0.63.0 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +1 -1
- package/dist/index.d.ts +2164 -1419
- package/dist/index.js +21 -23
- package/dist/index.mjs +21 -23
- package/dist/react-aria.d.ts +218 -155
- package/dist/react-stately.d.ts +24 -1
- package/package.json +7 -7
- package/sbom.json +29 -29
package/dist/react-aria.d.ts
CHANGED
|
@@ -20,62 +20,63 @@ type ValidationError = string | string[];
|
|
|
20
20
|
|
|
21
21
|
interface Validation<T = unknown> {
|
|
22
22
|
/** Whether user input is required on the input before form submission. */
|
|
23
|
-
isRequired?: boolean
|
|
23
|
+
isRequired?: boolean;
|
|
24
24
|
/** Whether the input value is invalid. */
|
|
25
|
-
isInvalid?: boolean
|
|
25
|
+
isInvalid?: boolean;
|
|
26
26
|
/** @deprecated Use `isInvalid` instead. */
|
|
27
|
-
validationState?: ValidationState
|
|
27
|
+
validationState?: ValidationState;
|
|
28
28
|
/**
|
|
29
29
|
* Whether to use native HTML form validation to prevent form submission
|
|
30
30
|
* when the value is missing or invalid, or mark the field as required
|
|
31
31
|
* or invalid via ARIA.
|
|
32
|
+
*
|
|
32
33
|
* @default 'aria'
|
|
33
34
|
*/
|
|
34
|
-
validationBehavior?: 'aria' | 'native'
|
|
35
|
+
validationBehavior?: 'aria' | 'native';
|
|
35
36
|
/**
|
|
36
37
|
* A function that returns an error message if a given value is invalid.
|
|
37
38
|
* Validation errors are displayed to the user when the form is submitted
|
|
38
39
|
* if `validationBehavior="native"`. For realtime validation, use the `isInvalid`
|
|
39
40
|
* prop instead.
|
|
40
41
|
*/
|
|
41
|
-
validate?: (value: T) => ValidationError | true | null | undefined
|
|
42
|
+
validate?: (value: T) => ValidationError | true | null | undefined;
|
|
42
43
|
}
|
|
43
44
|
|
|
44
45
|
interface ValidationResult {
|
|
45
46
|
/** Whether the input value is invalid. */
|
|
46
|
-
isInvalid: boolean
|
|
47
|
+
isInvalid: boolean;
|
|
47
48
|
/** The current error messages for the input if it is invalid, otherwise an empty array. */
|
|
48
|
-
validationErrors: string[]
|
|
49
|
+
validationErrors: string[];
|
|
49
50
|
/** The native validation details for the input. */
|
|
50
|
-
validationDetails: ValidityState
|
|
51
|
+
validationDetails: ValidityState;
|
|
51
52
|
}
|
|
52
53
|
|
|
53
54
|
interface InputBase {
|
|
54
55
|
/** Whether the input is disabled. */
|
|
55
|
-
isDisabled?: boolean
|
|
56
|
+
isDisabled?: boolean;
|
|
56
57
|
/** Whether the input can be selected but not changed by the user. */
|
|
57
|
-
isReadOnly?: boolean
|
|
58
|
+
isReadOnly?: boolean;
|
|
58
59
|
}
|
|
59
60
|
|
|
60
61
|
interface ValueBase<T, C = T> {
|
|
61
62
|
/** The current value (controlled). */
|
|
62
|
-
value?: T
|
|
63
|
+
value?: T;
|
|
63
64
|
/** The default value (uncontrolled). */
|
|
64
|
-
defaultValue?: T
|
|
65
|
+
defaultValue?: T;
|
|
65
66
|
/** Handler that is called when the value changes. */
|
|
66
|
-
onChange?: (value: C) => void
|
|
67
|
+
onChange?: (value: C) => void;
|
|
67
68
|
}
|
|
68
69
|
|
|
69
70
|
interface TextInputBase {
|
|
70
71
|
/** Temporary text that occupies the text input when it is empty. */
|
|
71
|
-
placeholder?: string
|
|
72
|
+
placeholder?: string;
|
|
72
73
|
}
|
|
73
74
|
|
|
74
75
|
interface HelpTextProps {
|
|
75
76
|
/** A description for the field. Provides a hint such as specific requirements for what to choose. */
|
|
76
|
-
description?: ReactNode
|
|
77
|
+
description?: ReactNode;
|
|
77
78
|
/** An error message for the field. */
|
|
78
|
-
errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode)
|
|
79
|
+
errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);
|
|
79
80
|
}
|
|
80
81
|
|
|
81
82
|
/*
|
|
@@ -96,22 +97,23 @@ interface AriaLabelingProps {
|
|
|
96
97
|
/**
|
|
97
98
|
* Defines a string value that labels the current element.
|
|
98
99
|
*/
|
|
99
|
-
'aria-label'?: string
|
|
100
|
+
'aria-label'?: string;
|
|
100
101
|
|
|
101
102
|
/**
|
|
102
103
|
* Identifies the element (or elements) that labels the current element.
|
|
103
104
|
*/
|
|
104
|
-
'aria-labelledby'?: string
|
|
105
|
+
'aria-labelledby'?: string;
|
|
105
106
|
|
|
106
107
|
/**
|
|
107
108
|
* Identifies the element (or elements) that describes the object.
|
|
108
109
|
*/
|
|
109
|
-
'aria-describedby'?: string
|
|
110
|
+
'aria-describedby'?: string;
|
|
110
111
|
|
|
111
112
|
/**
|
|
112
|
-
* Identifies the element (or elements) that provide a detailed, extended description for the
|
|
113
|
+
* Identifies the element (or elements) that provide a detailed, extended description for the
|
|
114
|
+
* object.
|
|
113
115
|
*/
|
|
114
|
-
'aria-details'?: string
|
|
116
|
+
'aria-details'?: string;
|
|
115
117
|
}
|
|
116
118
|
|
|
117
119
|
interface AriaValidationProps {
|
|
@@ -119,16 +121,17 @@ interface AriaValidationProps {
|
|
|
119
121
|
/**
|
|
120
122
|
* Identifies the element that provides an error message for the object.
|
|
121
123
|
*/
|
|
122
|
-
'aria-errormessage'?: string
|
|
124
|
+
'aria-errormessage'?: string;
|
|
123
125
|
}
|
|
124
126
|
|
|
125
127
|
// A set of common DOM props that are allowed on any component
|
|
126
128
|
// Ensure this is synced with DOMPropNames in filterDOMProps
|
|
127
129
|
interface DOMProps {
|
|
128
130
|
/**
|
|
129
|
-
* The element's unique identifier. See
|
|
131
|
+
* The element's unique identifier. See
|
|
132
|
+
* [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
|
|
130
133
|
*/
|
|
131
|
-
id?: string
|
|
134
|
+
id?: string;
|
|
132
135
|
}
|
|
133
136
|
|
|
134
137
|
interface FocusableDOMProps extends DOMProps {
|
|
@@ -138,121 +141,145 @@ interface FocusableDOMProps extends DOMProps {
|
|
|
138
141
|
* be avoided except in rare scenarios where an alternative means of accessing
|
|
139
142
|
* the element or its functionality via the keyboard is available.
|
|
140
143
|
*/
|
|
141
|
-
excludeFromTabOrder?: boolean
|
|
144
|
+
excludeFromTabOrder?: boolean;
|
|
142
145
|
}
|
|
143
146
|
|
|
144
|
-
|
|
145
|
-
interface TextInputDOMEvents {
|
|
147
|
+
interface TextInputDOMEvents<T = HTMLInputElement> {
|
|
146
148
|
// Clipboard events
|
|
147
149
|
/**
|
|
148
|
-
* Handler that is called when the user copies text. See
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
150
|
+
* Handler that is called when the user copies text. See
|
|
151
|
+
* [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy).
|
|
152
|
+
*/
|
|
153
|
+
onCopy?: ClipboardEventHandler<T>;
|
|
154
|
+
|
|
155
|
+
/**
|
|
156
|
+
* Handler that is called when the user cuts text. See
|
|
157
|
+
* [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncut).
|
|
158
|
+
*/
|
|
159
|
+
onCut?: ClipboardEventHandler<T>;
|
|
160
|
+
|
|
161
|
+
/**
|
|
162
|
+
* Handler that is called when the user pastes text. See
|
|
163
|
+
* [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste).
|
|
164
|
+
*/
|
|
165
|
+
onPaste?: ClipboardEventHandler<T>;
|
|
166
|
+
|
|
167
|
+
// Composition events
|
|
168
|
+
/**
|
|
169
|
+
* Handler that is called when a text composition system starts a new text composition session.
|
|
170
|
+
* See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event).
|
|
171
|
+
*/
|
|
172
|
+
onCompositionStart?: CompositionEventHandler<T>;
|
|
173
|
+
|
|
174
|
+
/**
|
|
175
|
+
* Handler that is called when a text composition system completes or cancels the current text
|
|
176
|
+
* composition session. See
|
|
177
|
+
* [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event).
|
|
178
|
+
*/
|
|
179
|
+
onCompositionEnd?: CompositionEventHandler<T>;
|
|
180
|
+
|
|
181
|
+
/**
|
|
182
|
+
* Handler that is called when a new character is received in the current text composition
|
|
183
|
+
* session. See
|
|
184
|
+
* [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event).
|
|
185
|
+
*/
|
|
186
|
+
onCompositionUpdate?: CompositionEventHandler<T>;
|
|
187
|
+
|
|
188
|
+
// Selection events
|
|
189
|
+
/**
|
|
190
|
+
* Handler that is called when text in the input is selected. See
|
|
191
|
+
* [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event).
|
|
192
|
+
*/
|
|
193
|
+
onSelect?: ReactEventHandler<T>;
|
|
194
|
+
|
|
195
|
+
// Input events
|
|
196
|
+
/**
|
|
197
|
+
* Handler that is called when the input value is about to be modified. See
|
|
198
|
+
* [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event).
|
|
199
|
+
*/
|
|
200
|
+
onBeforeInput?: FormEventHandler<T>;
|
|
201
|
+
/**
|
|
202
|
+
* Handler that is called when the input value is modified. See
|
|
203
|
+
* [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event).
|
|
204
|
+
*/
|
|
205
|
+
onInput?: FormEventHandler<T>;
|
|
193
206
|
}
|
|
194
207
|
|
|
195
208
|
interface InputDOMProps {
|
|
196
209
|
/**
|
|
197
|
-
* The name of the input element, used when submitting an HTML form. See
|
|
210
|
+
* The name of the input element, used when submitting an HTML form. See
|
|
211
|
+
* [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
|
|
198
212
|
*/
|
|
199
|
-
name?: string
|
|
213
|
+
name?: string;
|
|
200
214
|
/**
|
|
201
215
|
* The `<form>` element to associate the input with.
|
|
202
216
|
* The value of this attribute must be the id of a `<form>` in the same document.
|
|
203
217
|
* See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).
|
|
204
218
|
*/
|
|
205
|
-
form?: string
|
|
219
|
+
form?: string;
|
|
206
220
|
}
|
|
207
221
|
|
|
208
222
|
// DOM props that apply to all text inputs
|
|
209
223
|
// Ensure this is synced with useTextField
|
|
210
|
-
interface TextInputDOMProps
|
|
224
|
+
interface TextInputDOMProps<T = HTMLInputElement>
|
|
225
|
+
extends DOMProps, InputDOMProps, TextInputDOMEvents<T> {
|
|
211
226
|
/**
|
|
212
|
-
* Describes the type of autocomplete functionality the input should provide if any. See
|
|
227
|
+
* Describes the type of autocomplete functionality the input should provide if any. See
|
|
228
|
+
* [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).
|
|
213
229
|
*/
|
|
214
|
-
autoComplete?: string
|
|
230
|
+
autoComplete?: string;
|
|
215
231
|
|
|
216
232
|
/**
|
|
217
|
-
* The maximum number of characters supported by the input. See
|
|
233
|
+
* The maximum number of characters supported by the input. See
|
|
234
|
+
* [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefmaxlength).
|
|
218
235
|
*/
|
|
219
|
-
maxLength?: number
|
|
236
|
+
maxLength?: number;
|
|
220
237
|
|
|
221
238
|
/**
|
|
222
|
-
* The minimum number of characters required by the input. See
|
|
239
|
+
* The minimum number of characters required by the input. See
|
|
240
|
+
* [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefminlength).
|
|
223
241
|
*/
|
|
224
|
-
minLength?: number
|
|
242
|
+
minLength?: number;
|
|
225
243
|
|
|
226
244
|
/**
|
|
227
|
-
* Regex pattern that the value of the input must match to be valid. See
|
|
245
|
+
* Regex pattern that the value of the input must match to be valid. See
|
|
246
|
+
* [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefpattern).
|
|
228
247
|
*/
|
|
229
|
-
pattern?: string
|
|
248
|
+
pattern?: string;
|
|
230
249
|
|
|
231
250
|
/**
|
|
232
|
-
* Content that appears in the input when it is empty. See
|
|
251
|
+
* Content that appears in the input when it is empty. See
|
|
252
|
+
* [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefplaceholder).
|
|
233
253
|
*/
|
|
234
|
-
placeholder?: string
|
|
254
|
+
placeholder?: string;
|
|
235
255
|
|
|
236
256
|
/**
|
|
237
|
-
* The type of input to render. See
|
|
257
|
+
* The type of input to render. See
|
|
258
|
+
* [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype).
|
|
259
|
+
*
|
|
238
260
|
* @default 'text'
|
|
239
261
|
*/
|
|
240
|
-
type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | (string & {})
|
|
262
|
+
type?: 'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | (string & {});
|
|
241
263
|
|
|
242
264
|
/**
|
|
243
|
-
* Hints at the type of data that might be entered by the user while editing the element or its
|
|
265
|
+
* Hints at the type of data that might be entered by the user while editing the element or its
|
|
266
|
+
* contents. See
|
|
267
|
+
* [MDN](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute).
|
|
244
268
|
*/
|
|
245
|
-
inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
|
|
269
|
+
inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
|
|
246
270
|
|
|
247
271
|
/**
|
|
248
|
-
* An attribute that takes as its value a space-separated string that describes what, if any, type
|
|
272
|
+
* An attribute that takes as its value a space-separated string that describes what, if any, type
|
|
273
|
+
* of autocomplete functionality the input should provide. See
|
|
274
|
+
* [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocomplete).
|
|
249
275
|
*/
|
|
250
|
-
autoCorrect?: string
|
|
276
|
+
autoCorrect?: string;
|
|
251
277
|
|
|
252
278
|
/**
|
|
253
|
-
* An enumerated attribute that defines whether the element may be checked for spelling errors.
|
|
279
|
+
* An enumerated attribute that defines whether the element may be checked for spelling errors.
|
|
280
|
+
* See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck).
|
|
254
281
|
*/
|
|
255
|
-
spellCheck?: string
|
|
282
|
+
spellCheck?: string;
|
|
256
283
|
}
|
|
257
284
|
|
|
258
285
|
/** Any focusable element, including both HTML and SVG elements. */
|
|
@@ -260,11 +287,11 @@ interface FocusableElement extends Element, HTMLOrSVGElement {}
|
|
|
260
287
|
|
|
261
288
|
/** All DOM attributes supported across both HTML and SVG elements. */
|
|
262
289
|
interface DOMAttributes<T = FocusableElement> extends AriaAttributes, DOMAttributes$1<T> {
|
|
263
|
-
id?: string | undefined
|
|
264
|
-
role?: AriaRole | undefined
|
|
265
|
-
tabIndex?: number | undefined
|
|
266
|
-
style?: CSSProperties | undefined
|
|
267
|
-
className?: string | undefined
|
|
290
|
+
id?: string | undefined;
|
|
291
|
+
role?: AriaRole | undefined;
|
|
292
|
+
tabIndex?: number | undefined;
|
|
293
|
+
style?: CSSProperties | undefined;
|
|
294
|
+
className?: string | undefined;
|
|
268
295
|
}
|
|
269
296
|
|
|
270
297
|
/*
|
|
@@ -287,20 +314,20 @@ type DropPosition = 'on' | 'before' | 'after';
|
|
|
287
314
|
|
|
288
315
|
interface ItemDropTarget {
|
|
289
316
|
/** The drop target type. */
|
|
290
|
-
type: 'item'
|
|
317
|
+
type: 'item';
|
|
291
318
|
/** The item key. */
|
|
292
|
-
key: Key
|
|
319
|
+
key: Key;
|
|
293
320
|
/** The drop position relative to the item. */
|
|
294
|
-
dropPosition: DropPosition
|
|
321
|
+
dropPosition: DropPosition;
|
|
295
322
|
}
|
|
296
323
|
|
|
297
324
|
interface DroppableCollectionReorderEvent {
|
|
298
325
|
/** The keys of the items that were reordered. */
|
|
299
|
-
keys: Set<Key
|
|
326
|
+
keys: Set<Key>;
|
|
300
327
|
/** The drop operation that should occur. */
|
|
301
|
-
dropOperation: DropOperation
|
|
328
|
+
dropOperation: DropOperation;
|
|
302
329
|
/** The drop target. */
|
|
303
|
-
target: ItemDropTarget
|
|
330
|
+
target: ItemDropTarget;
|
|
304
331
|
}
|
|
305
332
|
|
|
306
333
|
/*
|
|
@@ -322,10 +349,12 @@ interface DroppableCollectionReorderEvent {
|
|
|
322
349
|
type BaseEvent<T extends SyntheticEvent> = T & {
|
|
323
350
|
/**
|
|
324
351
|
* Use continuePropagation.
|
|
325
|
-
*
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
352
|
+
*
|
|
353
|
+
* @deprecated
|
|
354
|
+
*/
|
|
355
|
+
stopPropagation(): void;
|
|
356
|
+
continuePropagation(): void;
|
|
357
|
+
};
|
|
329
358
|
|
|
330
359
|
type KeyboardEvent = BaseEvent<KeyboardEvent$1<any>>;
|
|
331
360
|
|
|
@@ -333,80 +362,80 @@ type PointerType = 'mouse' | 'pen' | 'touch' | 'keyboard' | 'virtual';
|
|
|
333
362
|
|
|
334
363
|
interface PressEvent {
|
|
335
364
|
/** The type of press event being fired. */
|
|
336
|
-
type: 'pressstart' | 'pressend' | 'pressup' | 'press'
|
|
365
|
+
type: 'pressstart' | 'pressend' | 'pressup' | 'press';
|
|
337
366
|
/** The pointer type that triggered the press event. */
|
|
338
|
-
pointerType: PointerType
|
|
367
|
+
pointerType: PointerType;
|
|
339
368
|
/** The target element of the press event. */
|
|
340
|
-
target: Element
|
|
369
|
+
target: Element;
|
|
341
370
|
/** Whether the shift keyboard modifier was held during the press event. */
|
|
342
|
-
shiftKey: boolean
|
|
371
|
+
shiftKey: boolean;
|
|
343
372
|
/** Whether the ctrl keyboard modifier was held during the press event. */
|
|
344
|
-
ctrlKey: boolean
|
|
373
|
+
ctrlKey: boolean;
|
|
345
374
|
/** Whether the meta keyboard modifier was held during the press event. */
|
|
346
|
-
metaKey: boolean
|
|
375
|
+
metaKey: boolean;
|
|
347
376
|
/** Whether the alt keyboard modifier was held during the press event. */
|
|
348
|
-
altKey: boolean
|
|
377
|
+
altKey: boolean;
|
|
349
378
|
/** X position relative to the target. */
|
|
350
|
-
x: number
|
|
379
|
+
x: number;
|
|
351
380
|
/** Y position relative to the target. */
|
|
352
|
-
y: number
|
|
381
|
+
y: number;
|
|
353
382
|
/**
|
|
354
383
|
* The key that triggered the press event, if it was triggered by a keyboard interaction.
|
|
355
384
|
* This is useful for differentiating between Space and Enter key presses.
|
|
356
385
|
*/
|
|
357
|
-
key?: string
|
|
386
|
+
key?: string;
|
|
358
387
|
/**
|
|
359
388
|
* By default, press events stop propagation to parent elements.
|
|
360
389
|
* In cases where a handler decides not to handle a specific event,
|
|
361
390
|
* it can call `continuePropagation()` to allow a parent to handle it.
|
|
362
391
|
*/
|
|
363
|
-
continuePropagation(): void
|
|
392
|
+
continuePropagation(): void;
|
|
364
393
|
}
|
|
365
394
|
|
|
366
395
|
interface KeyboardEvents {
|
|
367
396
|
/** Handler that is called when a key is pressed. */
|
|
368
|
-
onKeyDown?: (e: KeyboardEvent) => void
|
|
397
|
+
onKeyDown?: (e: KeyboardEvent) => void;
|
|
369
398
|
/** Handler that is called when a key is released. */
|
|
370
|
-
onKeyUp?: (e: KeyboardEvent) => void
|
|
399
|
+
onKeyUp?: (e: KeyboardEvent) => void;
|
|
371
400
|
}
|
|
372
401
|
|
|
373
402
|
interface FocusEvents<Target = Element> {
|
|
374
403
|
/** Handler that is called when the element receives focus. */
|
|
375
|
-
onFocus?: (e: FocusEvent<Target>) => void
|
|
404
|
+
onFocus?: (e: FocusEvent<Target>) => void;
|
|
376
405
|
/** Handler that is called when the element loses focus. */
|
|
377
|
-
onBlur?: (e: FocusEvent<Target>) => void
|
|
406
|
+
onBlur?: (e: FocusEvent<Target>) => void;
|
|
378
407
|
/** Handler that is called when the element's focus status changes. */
|
|
379
|
-
onFocusChange?: (isFocused: boolean) => void
|
|
408
|
+
onFocusChange?: (isFocused: boolean) => void;
|
|
380
409
|
}
|
|
381
410
|
|
|
382
411
|
interface PressEvents {
|
|
383
412
|
/** Handler that is called when the press is released over the target. */
|
|
384
|
-
onPress?: (e: PressEvent) => void
|
|
413
|
+
onPress?: (e: PressEvent) => void;
|
|
385
414
|
/** Handler that is called when a press interaction starts. */
|
|
386
|
-
onPressStart?: (e: PressEvent) => void
|
|
415
|
+
onPressStart?: (e: PressEvent) => void;
|
|
387
416
|
/**
|
|
388
417
|
* Handler that is called when a press interaction ends, either
|
|
389
418
|
* over the target or when the pointer leaves the target.
|
|
390
419
|
*/
|
|
391
|
-
onPressEnd?: (e: PressEvent) => void
|
|
420
|
+
onPressEnd?: (e: PressEvent) => void;
|
|
392
421
|
/** Handler that is called when the press state changes. */
|
|
393
|
-
onPressChange?: (isPressed: boolean) => void
|
|
422
|
+
onPressChange?: (isPressed: boolean) => void;
|
|
394
423
|
/**
|
|
395
424
|
* Handler that is called when a press is released over the target, regardless of
|
|
396
425
|
* whether it started on the target or not.
|
|
397
426
|
*/
|
|
398
|
-
onPressUp?: (e: PressEvent) => void
|
|
427
|
+
onPressUp?: (e: PressEvent) => void;
|
|
399
428
|
/**
|
|
400
429
|
* **Not recommended – use `onPress` instead.** `onClick` is an alias for `onPress`
|
|
401
|
-
* provided for compatibility with other libraries. `onPress` provides
|
|
430
|
+
* provided for compatibility with other libraries. `onPress` provides
|
|
402
431
|
* additional event details for non-mouse interactions.
|
|
403
432
|
*/
|
|
404
|
-
onClick?: (e: MouseEvent<FocusableElement>) => void
|
|
433
|
+
onClick?: (e: MouseEvent<FocusableElement>) => void;
|
|
405
434
|
}
|
|
406
435
|
|
|
407
436
|
interface FocusableProps<Target = Element> extends FocusEvents<Target>, KeyboardEvents {
|
|
408
437
|
/** Whether the element should receive focus on render. */
|
|
409
|
-
autoFocus?: boolean
|
|
438
|
+
autoFocus?: boolean;
|
|
410
439
|
}
|
|
411
440
|
|
|
412
441
|
/*
|
|
@@ -425,7 +454,7 @@ interface FocusableProps<Target = Element> extends FocusEvents<Target>, Keyboard
|
|
|
425
454
|
|
|
426
455
|
interface LabelableProps {
|
|
427
456
|
/** The content to display as the label. */
|
|
428
|
-
label?: ReactNode
|
|
457
|
+
label?: ReactNode;
|
|
429
458
|
}
|
|
430
459
|
|
|
431
460
|
/*
|
|
@@ -479,28 +508,40 @@ type TextFieldHTMLAttributesType = Pick<IntrinsicHTMLAttributes, TextFieldIntrin
|
|
|
479
508
|
type TextFieldInputProps<T extends TextFieldIntrinsicElements> = TextFieldHTMLAttributesType[T];
|
|
480
509
|
interface TextFieldProps<T = HTMLInputElement> extends InputBase, Validation<string>, HelpTextProps, FocusableProps<T>, TextInputBase, ValueBase<string>, LabelableProps {
|
|
481
510
|
}
|
|
482
|
-
interface AriaTextFieldProps<T = HTMLInputElement> extends TextFieldProps<T>, AriaLabelingProps, FocusableDOMProps, TextInputDOMProps
|
|
483
|
-
/**
|
|
511
|
+
interface AriaTextFieldProps<T = HTMLInputElement> extends TextFieldProps<T>, AriaLabelingProps, FocusableDOMProps, TextInputDOMProps<T>, AriaValidationProps {
|
|
512
|
+
/**
|
|
513
|
+
* Identifies the currently active element when DOM focus is on a composite widget, textbox,
|
|
514
|
+
* group, or application.
|
|
515
|
+
*/
|
|
484
516
|
'aria-activedescendant'?: string;
|
|
485
517
|
/**
|
|
486
|
-
* Indicates whether inputting text could trigger display of one or more predictions of the user's
|
|
487
|
-
* presented if they are made.
|
|
518
|
+
* Indicates whether inputting text could trigger display of one or more predictions of the user's
|
|
519
|
+
* intended value for an input and specifies how predictions would be presented if they are made.
|
|
488
520
|
*/
|
|
489
521
|
'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both';
|
|
490
|
-
/**
|
|
522
|
+
/**
|
|
523
|
+
* Indicates the availability and type of interactive popup element, such as menu or dialog, that
|
|
524
|
+
* can be triggered by an element.
|
|
525
|
+
*/
|
|
491
526
|
'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
|
|
492
|
-
/**
|
|
527
|
+
/**
|
|
528
|
+
* Identifies the element (or elements) whose contents or presence are controlled by the current
|
|
529
|
+
* element.
|
|
530
|
+
*/
|
|
493
531
|
'aria-controls'?: string;
|
|
494
532
|
/**
|
|
495
|
-
* An enumerated attribute that defines what action label or icon to preset for the enter key on
|
|
533
|
+
* An enumerated attribute that defines what action label or icon to preset for the enter key on
|
|
534
|
+
* virtual keyboards. See
|
|
535
|
+
* [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint).
|
|
496
536
|
*/
|
|
497
537
|
enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
|
|
498
538
|
}
|
|
499
539
|
interface AriaTextFieldOptions<T extends TextFieldIntrinsicElements> extends AriaTextFieldProps<TextFieldHTMLElementType[T]> {
|
|
500
540
|
/**
|
|
501
|
-
* The HTML element used to render the input, e.g. 'input', or 'textarea'.
|
|
502
|
-
*
|
|
503
|
-
*
|
|
541
|
+
* The HTML element used to render the input, e.g. 'input', or 'textarea'. It determines whether
|
|
542
|
+
* certain HTML attributes will be included in `inputProps`. For example,
|
|
543
|
+
* [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-type).
|
|
544
|
+
*
|
|
504
545
|
* @default 'input'
|
|
505
546
|
*/
|
|
506
547
|
inputElementType?: T;
|
|
@@ -510,7 +551,9 @@ interface AriaTextFieldOptions<T extends TextFieldIntrinsicElements> extends Ari
|
|
|
510
551
|
*/
|
|
511
552
|
autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
|
|
512
553
|
/**
|
|
513
|
-
* An enumerated attribute that defines what action label or icon to preset for the enter key on
|
|
554
|
+
* An enumerated attribute that defines what action label or icon to preset for the enter key on
|
|
555
|
+
* virtual keyboards. See
|
|
556
|
+
* [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint).
|
|
514
557
|
*/
|
|
515
558
|
enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
|
|
516
559
|
}
|
|
@@ -532,6 +575,7 @@ interface TextFieldAria<T extends TextFieldIntrinsicElements = DefaultElementTyp
|
|
|
532
575
|
}
|
|
533
576
|
/**
|
|
534
577
|
* Provides the behavior and accessibility implementation for a text field.
|
|
578
|
+
*
|
|
535
579
|
* @param props - Props for the text field.
|
|
536
580
|
* @param ref - Ref to the HTML input or textarea element.
|
|
537
581
|
*/
|
|
@@ -546,26 +590,40 @@ interface ButtonProps extends PressEvents, FocusableProps {
|
|
|
546
590
|
interface AriaBaseButtonProps extends FocusableDOMProps, AriaLabelingProps {
|
|
547
591
|
/** Indicates whether the element is disabled to users of assistive technology. */
|
|
548
592
|
'aria-disabled'?: boolean | 'true' | 'false';
|
|
549
|
-
/**
|
|
593
|
+
/**
|
|
594
|
+
* Indicates whether the element, or another grouping element it controls, is currently expanded
|
|
595
|
+
* or collapsed.
|
|
596
|
+
*/
|
|
550
597
|
'aria-expanded'?: boolean | 'true' | 'false';
|
|
551
|
-
/**
|
|
598
|
+
/**
|
|
599
|
+
* Indicates the availability and type of interactive popup element, such as menu or dialog, that
|
|
600
|
+
* can be triggered by an element.
|
|
601
|
+
*/
|
|
552
602
|
'aria-haspopup'?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false';
|
|
553
|
-
/**
|
|
603
|
+
/**
|
|
604
|
+
* Identifies the element (or elements) whose contents or presence are controlled by the current
|
|
605
|
+
* element.
|
|
606
|
+
*/
|
|
554
607
|
'aria-controls'?: string;
|
|
555
608
|
/** Indicates the current "pressed" state of toggle buttons. */
|
|
556
609
|
'aria-pressed'?: boolean | 'true' | 'false' | 'mixed';
|
|
557
|
-
/**
|
|
610
|
+
/**
|
|
611
|
+
* Indicates whether this element represents the current item within a container or set of related
|
|
612
|
+
* elements.
|
|
613
|
+
*/
|
|
558
614
|
'aria-current'?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time';
|
|
559
615
|
/**
|
|
560
616
|
* The behavior of the button when used in an HTML form.
|
|
617
|
+
*
|
|
561
618
|
* @default 'button'
|
|
562
619
|
*/
|
|
563
620
|
type?: 'button' | 'submit' | 'reset';
|
|
564
621
|
/**
|
|
565
622
|
* Whether to prevent focus from moving to the button when pressing it.
|
|
566
623
|
*
|
|
567
|
-
* Caution, this can make the button inaccessible and should only be used when alternative
|
|
568
|
-
* such as ComboBox's MenuTrigger or a NumberField's
|
|
624
|
+
* Caution, this can make the button inaccessible and should only be used when alternative
|
|
625
|
+
* keyboard interaction is provided, such as ComboBox's MenuTrigger or a NumberField's
|
|
626
|
+
* increment/decrement control.
|
|
569
627
|
*/
|
|
570
628
|
preventFocusOnPress?: boolean;
|
|
571
629
|
/**
|
|
@@ -595,6 +653,7 @@ interface AriaBaseButtonProps extends FocusableDOMProps, AriaLabelingProps {
|
|
|
595
653
|
interface AriaButtonElementTypeProps<T extends ElementType = 'button'> {
|
|
596
654
|
/**
|
|
597
655
|
* The HTML element or React element used to render the button, e.g. 'div', 'a', or `RouterLink`.
|
|
656
|
+
*
|
|
598
657
|
* @default 'button'
|
|
599
658
|
*/
|
|
600
659
|
elementType?: T | JSXElementConstructor<any>;
|
|
@@ -604,7 +663,10 @@ interface LinkButtonProps<T extends ElementType = 'button'> extends AriaButtonEl
|
|
|
604
663
|
href?: string;
|
|
605
664
|
/** The target window for the link. */
|
|
606
665
|
target?: string;
|
|
607
|
-
/**
|
|
666
|
+
/**
|
|
667
|
+
* The relationship between the linked resource and the current page. See
|
|
668
|
+
* [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
|
|
669
|
+
*/
|
|
608
670
|
rel?: string;
|
|
609
671
|
}
|
|
610
672
|
interface AriaButtonProps<T extends ElementType = 'button'> extends ButtonProps, LinkButtonProps<T>, AriaBaseButtonProps {
|
|
@@ -678,12 +740,13 @@ interface SelectableItemStates {
|
|
|
678
740
|
/** Whether the item is currently focused. */
|
|
679
741
|
isFocused: boolean;
|
|
680
742
|
/**
|
|
681
|
-
* Whether the item is non-interactive, i.e. both selection and actions are disabled and the item
|
|
682
|
-
* not be focused. Dependent on `disabledKeys` and `disabledBehavior`.
|
|
743
|
+
* Whether the item is non-interactive, i.e. both selection and actions are disabled and the item
|
|
744
|
+
* may not be focused. Dependent on `disabledKeys` and `disabledBehavior`.
|
|
683
745
|
*/
|
|
684
746
|
isDisabled: boolean;
|
|
685
747
|
/**
|
|
686
|
-
* Whether the item may be selected, dependent on `selectionMode`, `disabledKeys`, and
|
|
748
|
+
* Whether the item may be selected, dependent on `selectionMode`, `disabledKeys`, and
|
|
749
|
+
* `disabledBehavior`.
|
|
687
750
|
*/
|
|
688
751
|
allowsSelection: boolean;
|
|
689
752
|
/**
|