@fluentui/web-components 3.0.0-rc.12 → 3.0.0-rc.14
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/CHANGELOG.md +20 -2
- package/custom-elements.json +968 -164
- package/dist/esm/accordion/accordion.d.ts +5 -0
- package/dist/esm/accordion/accordion.js +28 -27
- package/dist/esm/accordion/accordion.js.map +1 -1
- package/dist/esm/dropdown/dropdown.base.d.ts +5 -0
- package/dist/esm/dropdown/dropdown.base.js +23 -10
- package/dist/esm/dropdown/dropdown.base.js.map +1 -1
- package/dist/esm/dropdown/dropdown.styles.js +1 -0
- package/dist/esm/dropdown/dropdown.styles.js.map +1 -1
- package/dist/esm/index.d.ts +2 -2
- package/dist/esm/index.js +2 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/menu/menu.d.ts +25 -16
- package/dist/esm/menu/menu.js +61 -67
- package/dist/esm/menu/menu.js.map +1 -1
- package/dist/esm/menu-list/index.d.ts +1 -0
- package/dist/esm/menu-list/index.js +1 -0
- package/dist/esm/menu-list/index.js.map +1 -1
- package/dist/esm/menu-list/menu-list.base.d.ts +76 -0
- package/dist/esm/menu-list/menu-list.base.js +251 -0
- package/dist/esm/menu-list/menu-list.base.js.map +1 -0
- package/dist/esm/menu-list/menu-list.d.ts +3 -70
- package/dist/esm/menu-list/menu-list.js +3 -244
- package/dist/esm/menu-list/menu-list.js.map +1 -1
- package/dist/esm/radio-group/index.d.ts +1 -0
- package/dist/esm/radio-group/index.js +1 -0
- package/dist/esm/radio-group/index.js.map +1 -1
- package/dist/esm/radio-group/radio-group.base.d.ts +285 -0
- package/dist/esm/radio-group/radio-group.base.js +497 -0
- package/dist/esm/radio-group/radio-group.base.js.map +1 -0
- package/dist/esm/radio-group/radio-group.d.ts +4 -280
- package/dist/esm/radio-group/radio-group.js +4 -491
- package/dist/esm/radio-group/radio-group.js.map +1 -1
- package/dist/esm/tablist/tablist.base.js +3 -3
- package/dist/esm/tablist/tablist.base.js.map +1 -1
- package/dist/esm/utils/request-idle-callback.d.ts +15 -0
- package/dist/esm/utils/request-idle-callback.js +8 -2
- package/dist/esm/utils/request-idle-callback.js.map +1 -1
- package/dist/web-components.d.ts +1970 -1932
- package/dist/web-components.js +165 -124
- package/dist/web-components.min.js +114 -114
- package/package.json +1 -1
|
@@ -1,289 +1,13 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { Radio } from '../radio/radio.js';
|
|
3
|
-
import { RadioGroupOrientation } from './radio-group.options.js';
|
|
1
|
+
import { BaseRadioGroup } from './radio-group.base.js';
|
|
4
2
|
/**
|
|
5
3
|
* A Radio Group Custom HTML Element.
|
|
6
4
|
* Implements the {@link https://w3c.github.io/aria/#radiogroup | ARIA `radiogroup` role}.
|
|
7
5
|
*
|
|
8
6
|
* @tag fluent-radio-group
|
|
9
7
|
*
|
|
10
|
-
* @public
|
|
11
|
-
*
|
|
12
8
|
* @slot - The default slot for the radio group
|
|
9
|
+
*
|
|
10
|
+
* @public
|
|
13
11
|
*/
|
|
14
|
-
export declare class RadioGroup extends
|
|
15
|
-
/**
|
|
16
|
-
* The index of the checked radio, scoped to the enabled radios.
|
|
17
|
-
*
|
|
18
|
-
* @internal
|
|
19
|
-
*/
|
|
20
|
-
protected checkedIndex: number;
|
|
21
|
-
/**
|
|
22
|
-
* Sets the checked state of the nearest enabled radio when the `checkedIndex` changes.
|
|
23
|
-
*
|
|
24
|
-
* @param prev - the previous index
|
|
25
|
-
* @param next - the current index
|
|
26
|
-
* @internal
|
|
27
|
-
*/
|
|
28
|
-
protected checkedIndexChanged(prev: number | undefined, next: number): void;
|
|
29
|
-
/**
|
|
30
|
-
* Indicates that the value has been changed by the user.
|
|
31
|
-
*/
|
|
32
|
-
private dirtyState;
|
|
33
|
-
/**
|
|
34
|
-
* Disables the radio group and child radios.
|
|
35
|
-
*
|
|
36
|
-
* @public
|
|
37
|
-
* @remarks
|
|
38
|
-
* HTML Attribute: `disabled`
|
|
39
|
-
*/
|
|
40
|
-
disabled: boolean;
|
|
41
|
-
/**
|
|
42
|
-
* Sets the `disabled` attribute on all child radios when the `disabled` property changes.
|
|
43
|
-
*
|
|
44
|
-
* @param prev - the previous disabled value
|
|
45
|
-
* @param next - the current disabled value
|
|
46
|
-
* @internal
|
|
47
|
-
*/
|
|
48
|
-
protected disabledChanged(prev?: boolean, next?: boolean): void;
|
|
49
|
-
/**
|
|
50
|
-
* The value of the checked radio.
|
|
51
|
-
*
|
|
52
|
-
* @public
|
|
53
|
-
* @remarks
|
|
54
|
-
* HTML Attribute: `value`
|
|
55
|
-
*/
|
|
56
|
-
initialValue?: string;
|
|
57
|
-
/**
|
|
58
|
-
* Sets the matching radio to checked when the value changes. If no radio matches the value, no radio will be checked.
|
|
59
|
-
*
|
|
60
|
-
* @param prev - the previous value
|
|
61
|
-
* @param next - the current value
|
|
62
|
-
*/
|
|
63
|
-
initialValueChanged(prev: string | undefined, next: string | undefined): void;
|
|
64
|
-
/**
|
|
65
|
-
* The name of the radio group.
|
|
66
|
-
*
|
|
67
|
-
* @public
|
|
68
|
-
* @remarks
|
|
69
|
-
* HTML Attribute: `name`
|
|
70
|
-
*/
|
|
71
|
-
name: string;
|
|
72
|
-
/**
|
|
73
|
-
* Sets the `name` attribute on all child radios when the `name` property changes.
|
|
74
|
-
*
|
|
75
|
-
* @internal
|
|
76
|
-
*/
|
|
77
|
-
protected nameChanged(prev: string | undefined, next: string | undefined): void;
|
|
78
|
-
/**
|
|
79
|
-
* The orientation of the group.
|
|
80
|
-
*
|
|
81
|
-
* @public
|
|
82
|
-
* @remarks
|
|
83
|
-
* HTML Attribute: `orientation`
|
|
84
|
-
*/
|
|
85
|
-
orientation?: RadioGroupOrientation;
|
|
86
|
-
/**
|
|
87
|
-
* Sets the ariaOrientation attribute when the orientation changes.
|
|
88
|
-
*
|
|
89
|
-
* @param prev - the previous orientation
|
|
90
|
-
* @param next - the current orientation
|
|
91
|
-
* @internal
|
|
92
|
-
*/
|
|
93
|
-
orientationChanged(prev: RadioGroupOrientation | undefined, next: RadioGroupOrientation | undefined): void;
|
|
94
|
-
/**
|
|
95
|
-
* The collection of all child radios.
|
|
96
|
-
*
|
|
97
|
-
* @public
|
|
98
|
-
*/
|
|
99
|
-
radios: Radio[];
|
|
100
|
-
/**
|
|
101
|
-
* Updates the enabled radios collection when properties on the child radios change.
|
|
102
|
-
*
|
|
103
|
-
* @param prev - the previous radios
|
|
104
|
-
* @param next - the current radios
|
|
105
|
-
*/
|
|
106
|
-
radiosChanged(prev: Radio[] | undefined, next: Radio[] | undefined): void;
|
|
107
|
-
/**
|
|
108
|
-
* Indicates whether the radio group is required.
|
|
109
|
-
*
|
|
110
|
-
* @public
|
|
111
|
-
* @remarks
|
|
112
|
-
* HTML Attribute: `required`
|
|
113
|
-
*/
|
|
114
|
-
required: boolean;
|
|
115
|
-
/**
|
|
116
|
-
*
|
|
117
|
-
* @param prev - the previous required value
|
|
118
|
-
* @param next - the current required value
|
|
119
|
-
*/
|
|
120
|
-
requiredChanged(prev: boolean, next: boolean): void;
|
|
121
|
-
/**
|
|
122
|
-
* The collection of radios that are slotted into the default slot.
|
|
123
|
-
*
|
|
124
|
-
* @internal
|
|
125
|
-
*/
|
|
126
|
-
slottedRadios: Radio[];
|
|
127
|
-
/**
|
|
128
|
-
* Updates the radios collection when the slotted radios change.
|
|
129
|
-
*
|
|
130
|
-
* @param prev - the previous slotted radios
|
|
131
|
-
* @param next - the current slotted radios
|
|
132
|
-
*/
|
|
133
|
-
slottedRadiosChanged(prev: Radio[] | undefined, next: Radio[]): void;
|
|
134
|
-
/**
|
|
135
|
-
* The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
|
|
136
|
-
*
|
|
137
|
-
* @internal
|
|
138
|
-
*/
|
|
139
|
-
elementInternals: ElementInternals;
|
|
140
|
-
/**
|
|
141
|
-
* A collection of child radios that are not disabled.
|
|
142
|
-
*
|
|
143
|
-
* @internal
|
|
144
|
-
*/
|
|
145
|
-
get enabledRadios(): Radio[];
|
|
146
|
-
/**
|
|
147
|
-
* The form-associated flag.
|
|
148
|
-
* @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
|
|
149
|
-
*
|
|
150
|
-
* @public
|
|
151
|
-
*/
|
|
152
|
-
static formAssociated: boolean;
|
|
153
|
-
/**
|
|
154
|
-
* The fallback validation message, taken from a native checkbox `<input>` element.
|
|
155
|
-
*
|
|
156
|
-
* @internal
|
|
157
|
-
*/
|
|
158
|
-
private _validationFallbackMessage;
|
|
159
|
-
/**
|
|
160
|
-
* The validation message. Uses the browser's default validation message for native checkboxes if not otherwise
|
|
161
|
-
* specified (e.g., via `setCustomValidity`).
|
|
162
|
-
*
|
|
163
|
-
* @internal
|
|
164
|
-
*/
|
|
165
|
-
get validationMessage(): string;
|
|
166
|
-
/**
|
|
167
|
-
* The element's validity state.
|
|
168
|
-
*
|
|
169
|
-
* @public
|
|
170
|
-
* @remarks
|
|
171
|
-
* Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validity | `ElementInternals.validity`} property.
|
|
172
|
-
*/
|
|
173
|
-
get validity(): ValidityState;
|
|
174
|
-
/**
|
|
175
|
-
* The current value of the checked radio.
|
|
176
|
-
*
|
|
177
|
-
* @public
|
|
178
|
-
*/
|
|
179
|
-
get value(): string | null;
|
|
180
|
-
set value(next: string | null);
|
|
181
|
-
/**
|
|
182
|
-
* Sets the checked state of all radios when any radio emits a `change` event.
|
|
183
|
-
*
|
|
184
|
-
* @param e - the change event
|
|
185
|
-
*/
|
|
186
|
-
changeHandler(e: Event): boolean | void;
|
|
187
|
-
/**
|
|
188
|
-
* Checks the radio at the specified index.
|
|
189
|
-
*
|
|
190
|
-
* @param index - the index of the radio to check
|
|
191
|
-
* @internal
|
|
192
|
-
*/
|
|
193
|
-
checkRadio(index?: number, shouldEmit?: boolean): void;
|
|
194
|
-
/**
|
|
195
|
-
* Checks the validity of the element and returns the result.
|
|
196
|
-
*
|
|
197
|
-
* @public
|
|
198
|
-
* @remarks
|
|
199
|
-
* Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/checkValidity | `HTMLInputElement.checkValidity()`} method.
|
|
200
|
-
*/
|
|
201
|
-
checkValidity(): boolean;
|
|
202
|
-
/**
|
|
203
|
-
* Handles click events for the radio group.
|
|
204
|
-
*
|
|
205
|
-
* @param e - the click event
|
|
206
|
-
* @internal
|
|
207
|
-
*/
|
|
208
|
-
clickHandler(e: MouseEvent): boolean | void;
|
|
209
|
-
constructor();
|
|
210
|
-
/**
|
|
211
|
-
* Focuses the checked radio or the first enabled radio.
|
|
212
|
-
*
|
|
213
|
-
* @internal
|
|
214
|
-
*/
|
|
215
|
-
focus(): void;
|
|
216
|
-
/**
|
|
217
|
-
* Enables tabbing through the radio group when the group receives focus.
|
|
218
|
-
*
|
|
219
|
-
* @param e - the focus event
|
|
220
|
-
* @internal
|
|
221
|
-
*/
|
|
222
|
-
focusinHandler(e: FocusEvent): boolean | void;
|
|
223
|
-
/**
|
|
224
|
-
* Sets the tabindex of the radios based on the checked state when the radio group loses focus.
|
|
225
|
-
*
|
|
226
|
-
* @param e - the focusout event
|
|
227
|
-
* @internal
|
|
228
|
-
*/
|
|
229
|
-
focusoutHandler(e: FocusEvent): boolean | void;
|
|
230
|
-
formResetCallback(): void;
|
|
231
|
-
private getEnabledIndexInBounds;
|
|
232
|
-
/**
|
|
233
|
-
* Handles keydown events for the radio group.
|
|
234
|
-
*
|
|
235
|
-
* @param e - the keyboard event
|
|
236
|
-
* @internal
|
|
237
|
-
*/
|
|
238
|
-
keydownHandler(e: KeyboardEvent): boolean | void;
|
|
239
|
-
/**
|
|
240
|
-
*
|
|
241
|
-
* @param e - the disabled event
|
|
242
|
-
*/
|
|
243
|
-
disabledRadioHandler(e: CustomEvent): void;
|
|
244
|
-
/**
|
|
245
|
-
* Reports the validity of the element.
|
|
246
|
-
*
|
|
247
|
-
* @public
|
|
248
|
-
* @remarks
|
|
249
|
-
* Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/reportValidity | `HTMLInputElement.reportValidity()`} method.
|
|
250
|
-
*/
|
|
251
|
-
reportValidity(): boolean;
|
|
252
|
-
/**
|
|
253
|
-
* Resets the `tabIndex` for all child radios when the radio group loses focus.
|
|
254
|
-
*
|
|
255
|
-
* @internal
|
|
256
|
-
*/
|
|
257
|
-
private restrictFocus;
|
|
258
|
-
/**
|
|
259
|
-
* Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
|
|
260
|
-
*
|
|
261
|
-
* @internal
|
|
262
|
-
*/
|
|
263
|
-
setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
|
|
264
|
-
/**
|
|
265
|
-
* Sets the validity of the element.
|
|
266
|
-
*
|
|
267
|
-
* @param flags - Validity flags to set.
|
|
268
|
-
* @param message - Optional message to supply. If not provided, the element's `validationMessage` will be used.
|
|
269
|
-
* @param anchor - Optional anchor to use for the validation message.
|
|
270
|
-
*
|
|
271
|
-
* @internal
|
|
272
|
-
* @remarks
|
|
273
|
-
* RadioGroup validation is reported through the individual Radio elements rather than the RadioGroup itself.
|
|
274
|
-
* This is necessary because:
|
|
275
|
-
* 1. Each Radio is form-associated (extends BaseCheckbox which has `formAssociated = true`)
|
|
276
|
-
* 2. Browser validation UIs and screen readers announce validation against individual form controls
|
|
277
|
-
* 3. For groups like RadioGroup, the browser needs to report the error on a specific member of the group
|
|
278
|
-
* 4. We anchor the error to the first Radio so it receives focus and announcement
|
|
279
|
-
*
|
|
280
|
-
* When the group is invalid (required but no selection):
|
|
281
|
-
* - Only the first Radio gets the invalid state with the validation message
|
|
282
|
-
* - Other Radios are kept valid since selecting any of them would satisfy the requirement
|
|
283
|
-
*
|
|
284
|
-
* When the group becomes valid (user selects any Radio):
|
|
285
|
-
* - All Radios are cleared back to valid state
|
|
286
|
-
* - This allows form submission to proceed
|
|
287
|
-
*/
|
|
288
|
-
setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
|
|
12
|
+
export declare class RadioGroup extends BaseRadioGroup {
|
|
289
13
|
}
|