@fluentui/react-field 0.0.0-nightly-20221007-1528.1 → 0.0.0-nightly-20221010-0422.1
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.json +33 -33
- package/CHANGELOG.md +19 -19
- package/lib/components/Field/useField.js +37 -30
- package/lib/components/Field/useField.js.map +1 -1
- package/lib-commonjs/components/Field/useField.js +37 -30
- package/lib-commonjs/components/Field/useField.js.map +1 -1
- package/package.json +16 -16
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui/react-field",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-field_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Mon, 10 Oct 2022 04:26:59 GMT",
|
|
6
|
+
"tag": "@fluentui/react-field_v0.0.0-nightly-20221010-0422.1",
|
|
7
|
+
"version": "0.0.0-nightly-20221010-0422.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,92 +16,92 @@
|
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui/react-field",
|
|
19
|
-
"comment": "Bump @fluentui/react-checkbox to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui/react-checkbox to v0.0.0-nightly-20221010-0422.1",
|
|
20
|
+
"commit": "4f03babaf9fdbceb0702f3d7134294ab86d90c80"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui/react-field",
|
|
25
|
-
"comment": "Bump @fluentui/react-combobox to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui/react-combobox to v0.0.0-nightly-20221010-0422.1",
|
|
26
|
+
"commit": "4f03babaf9fdbceb0702f3d7134294ab86d90c80"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui/react-field",
|
|
31
|
-
"comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20221010-0422.1",
|
|
32
|
+
"commit": "4f03babaf9fdbceb0702f3d7134294ab86d90c80"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"author": "beachball",
|
|
36
36
|
"package": "@fluentui/react-field",
|
|
37
|
-
"comment": "Bump @fluentui/react-input to v0.0.0-nightly-
|
|
38
|
-
"commit": "
|
|
37
|
+
"comment": "Bump @fluentui/react-input to v0.0.0-nightly-20221010-0422.1",
|
|
38
|
+
"commit": "4f03babaf9fdbceb0702f3d7134294ab86d90c80"
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
41
|
"author": "beachball",
|
|
42
42
|
"package": "@fluentui/react-field",
|
|
43
|
-
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-
|
|
44
|
-
"commit": "
|
|
43
|
+
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-20221010-0422.1",
|
|
44
|
+
"commit": "4f03babaf9fdbceb0702f3d7134294ab86d90c80"
|
|
45
45
|
},
|
|
46
46
|
{
|
|
47
47
|
"author": "beachball",
|
|
48
48
|
"package": "@fluentui/react-field",
|
|
49
|
-
"comment": "Bump @fluentui/react-progress to v0.0.0-nightly-
|
|
50
|
-
"commit": "
|
|
49
|
+
"comment": "Bump @fluentui/react-progress to v0.0.0-nightly-20221010-0422.1",
|
|
50
|
+
"commit": "4f03babaf9fdbceb0702f3d7134294ab86d90c80"
|
|
51
51
|
},
|
|
52
52
|
{
|
|
53
53
|
"author": "beachball",
|
|
54
54
|
"package": "@fluentui/react-field",
|
|
55
|
-
"comment": "Bump @fluentui/react-radio to v0.0.0-nightly-
|
|
56
|
-
"commit": "
|
|
55
|
+
"comment": "Bump @fluentui/react-radio to v0.0.0-nightly-20221010-0422.1",
|
|
56
|
+
"commit": "4f03babaf9fdbceb0702f3d7134294ab86d90c80"
|
|
57
57
|
},
|
|
58
58
|
{
|
|
59
59
|
"author": "beachball",
|
|
60
60
|
"package": "@fluentui/react-field",
|
|
61
|
-
"comment": "Bump @fluentui/react-select to v0.0.0-nightly-
|
|
62
|
-
"commit": "
|
|
61
|
+
"comment": "Bump @fluentui/react-select to v0.0.0-nightly-20221010-0422.1",
|
|
62
|
+
"commit": "4f03babaf9fdbceb0702f3d7134294ab86d90c80"
|
|
63
63
|
},
|
|
64
64
|
{
|
|
65
65
|
"author": "beachball",
|
|
66
66
|
"package": "@fluentui/react-field",
|
|
67
|
-
"comment": "Bump @fluentui/react-slider to v0.0.0-nightly-
|
|
68
|
-
"commit": "
|
|
67
|
+
"comment": "Bump @fluentui/react-slider to v0.0.0-nightly-20221010-0422.1",
|
|
68
|
+
"commit": "4f03babaf9fdbceb0702f3d7134294ab86d90c80"
|
|
69
69
|
},
|
|
70
70
|
{
|
|
71
71
|
"author": "beachball",
|
|
72
72
|
"package": "@fluentui/react-field",
|
|
73
|
-
"comment": "Bump @fluentui/react-spinbutton to v0.0.0-nightly-
|
|
74
|
-
"commit": "
|
|
73
|
+
"comment": "Bump @fluentui/react-spinbutton to v0.0.0-nightly-20221010-0422.1",
|
|
74
|
+
"commit": "4f03babaf9fdbceb0702f3d7134294ab86d90c80"
|
|
75
75
|
},
|
|
76
76
|
{
|
|
77
77
|
"author": "beachball",
|
|
78
78
|
"package": "@fluentui/react-field",
|
|
79
|
-
"comment": "Bump @fluentui/react-switch to v0.0.0-nightly-
|
|
80
|
-
"commit": "
|
|
79
|
+
"comment": "Bump @fluentui/react-switch to v0.0.0-nightly-20221010-0422.1",
|
|
80
|
+
"commit": "4f03babaf9fdbceb0702f3d7134294ab86d90c80"
|
|
81
81
|
},
|
|
82
82
|
{
|
|
83
83
|
"author": "beachball",
|
|
84
84
|
"package": "@fluentui/react-field",
|
|
85
|
-
"comment": "Bump @fluentui/react-textarea to v0.0.0-nightly-
|
|
86
|
-
"commit": "
|
|
85
|
+
"comment": "Bump @fluentui/react-textarea to v0.0.0-nightly-20221010-0422.1",
|
|
86
|
+
"commit": "4f03babaf9fdbceb0702f3d7134294ab86d90c80"
|
|
87
87
|
},
|
|
88
88
|
{
|
|
89
89
|
"author": "beachball",
|
|
90
90
|
"package": "@fluentui/react-field",
|
|
91
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
92
|
-
"commit": "
|
|
91
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221010-0422.1",
|
|
92
|
+
"commit": "4f03babaf9fdbceb0702f3d7134294ab86d90c80"
|
|
93
93
|
},
|
|
94
94
|
{
|
|
95
95
|
"author": "beachball",
|
|
96
96
|
"package": "@fluentui/react-field",
|
|
97
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
98
|
-
"commit": "
|
|
97
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221010-0422.1",
|
|
98
|
+
"commit": "4f03babaf9fdbceb0702f3d7134294ab86d90c80"
|
|
99
99
|
},
|
|
100
100
|
{
|
|
101
101
|
"author": "beachball",
|
|
102
102
|
"package": "@fluentui/react-field",
|
|
103
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
104
|
-
"commit": "
|
|
103
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221010-0422.1",
|
|
104
|
+
"commit": "4f03babaf9fdbceb0702f3d7134294ab86d90c80"
|
|
105
105
|
}
|
|
106
106
|
]
|
|
107
107
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,32 +1,32 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-field
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 10 Oct 2022 04:26:59 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20221010-0422.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v0.0.0-nightly-20221010-0422.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.3..@fluentui/react-field_v0.0.0-nightly-
|
|
9
|
+
Mon, 10 Oct 2022 04:26:59 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.3..@fluentui/react-field_v0.0.0-nightly-20221010-0422.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-checkbox to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-combobox to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-context-selector to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-input to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-label to v0.0.0-nightly-
|
|
20
|
-
- Bump @fluentui/react-progress to v0.0.0-nightly-
|
|
21
|
-
- Bump @fluentui/react-radio to v0.0.0-nightly-
|
|
22
|
-
- Bump @fluentui/react-select to v0.0.0-nightly-
|
|
23
|
-
- Bump @fluentui/react-slider to v0.0.0-nightly-
|
|
24
|
-
- Bump @fluentui/react-spinbutton to v0.0.0-nightly-
|
|
25
|
-
- Bump @fluentui/react-switch to v0.0.0-nightly-
|
|
26
|
-
- Bump @fluentui/react-textarea to v0.0.0-nightly-
|
|
27
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
28
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
29
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-checkbox to v0.0.0-nightly-20221010-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/4f03babaf9fdbceb0702f3d7134294ab86d90c80) by beachball)
|
|
16
|
+
- Bump @fluentui/react-combobox to v0.0.0-nightly-20221010-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/4f03babaf9fdbceb0702f3d7134294ab86d90c80) by beachball)
|
|
17
|
+
- Bump @fluentui/react-context-selector to v0.0.0-nightly-20221010-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/4f03babaf9fdbceb0702f3d7134294ab86d90c80) by beachball)
|
|
18
|
+
- Bump @fluentui/react-input to v0.0.0-nightly-20221010-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/4f03babaf9fdbceb0702f3d7134294ab86d90c80) by beachball)
|
|
19
|
+
- Bump @fluentui/react-label to v0.0.0-nightly-20221010-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/4f03babaf9fdbceb0702f3d7134294ab86d90c80) by beachball)
|
|
20
|
+
- Bump @fluentui/react-progress to v0.0.0-nightly-20221010-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/4f03babaf9fdbceb0702f3d7134294ab86d90c80) by beachball)
|
|
21
|
+
- Bump @fluentui/react-radio to v0.0.0-nightly-20221010-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/4f03babaf9fdbceb0702f3d7134294ab86d90c80) by beachball)
|
|
22
|
+
- Bump @fluentui/react-select to v0.0.0-nightly-20221010-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/4f03babaf9fdbceb0702f3d7134294ab86d90c80) by beachball)
|
|
23
|
+
- Bump @fluentui/react-slider to v0.0.0-nightly-20221010-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/4f03babaf9fdbceb0702f3d7134294ab86d90c80) by beachball)
|
|
24
|
+
- Bump @fluentui/react-spinbutton to v0.0.0-nightly-20221010-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/4f03babaf9fdbceb0702f3d7134294ab86d90c80) by beachball)
|
|
25
|
+
- Bump @fluentui/react-switch to v0.0.0-nightly-20221010-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/4f03babaf9fdbceb0702f3d7134294ab86d90c80) by beachball)
|
|
26
|
+
- Bump @fluentui/react-textarea to v0.0.0-nightly-20221010-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/4f03babaf9fdbceb0702f3d7134294ab86d90c80) by beachball)
|
|
27
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20221010-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/4f03babaf9fdbceb0702f3d7134294ab86d90c80) by beachball)
|
|
28
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20221010-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/4f03babaf9fdbceb0702f3d7134294ab86d90c80) by beachball)
|
|
29
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221010-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/4f03babaf9fdbceb0702f3d7134294ab86d90c80) by beachball)
|
|
30
30
|
|
|
31
31
|
## [9.0.0-alpha.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.3)
|
|
32
32
|
|
|
@@ -7,17 +7,10 @@ const validationMessageIcons = {
|
|
|
7
7
|
warning: /*#__PURE__*/React.createElement(Warning12Filled, null),
|
|
8
8
|
success: /*#__PURE__*/React.createElement(CheckmarkCircle12Filled, null)
|
|
9
9
|
};
|
|
10
|
-
/**
|
|
11
|
-
* Merge two possibly-undefined IDs for aria-describedby. If both IDs are defined, combines
|
|
12
|
-
* them into a string separated by a space. Otherwise, returns just the defined ID (if any).
|
|
13
|
-
*/
|
|
14
|
-
|
|
15
|
-
const mergeAriaDescribedBy = (a, b) => a && b ? `${a} ${b}` : a || b;
|
|
16
10
|
/**
|
|
17
11
|
* Partition the props used by the Field itself, from the props that are passed to the underlying field component.
|
|
18
12
|
*/
|
|
19
13
|
|
|
20
|
-
|
|
21
14
|
export const getPartitionedFieldProps = props => {
|
|
22
15
|
const {
|
|
23
16
|
className,
|
|
@@ -58,22 +51,35 @@ export const getPartitionedFieldProps = props => {
|
|
|
58
51
|
*/
|
|
59
52
|
|
|
60
53
|
export const useField_unstable = (props, ref, params) => {
|
|
54
|
+
var _a, _b, _c, _d, _e;
|
|
55
|
+
|
|
61
56
|
const [fieldProps, controlProps] = getPartitionedFieldProps(props);
|
|
62
|
-
const baseId = useId('field-');
|
|
63
57
|
const {
|
|
64
58
|
orientation = 'vertical',
|
|
65
59
|
validationState
|
|
66
60
|
} = fieldProps;
|
|
61
|
+
const {
|
|
62
|
+
labelConnection = 'htmlFor'
|
|
63
|
+
} = params;
|
|
64
|
+
const baseId = useId('field-');
|
|
67
65
|
const root = resolveShorthand(fieldProps.root, {
|
|
68
66
|
required: true,
|
|
69
67
|
defaultProps: getNativeElementProps('div', fieldProps)
|
|
70
68
|
});
|
|
69
|
+
const control = resolveShorthand(fieldProps.control, {
|
|
70
|
+
required: true,
|
|
71
|
+
defaultProps: {
|
|
72
|
+
ref,
|
|
73
|
+
id: baseId + '__control',
|
|
74
|
+
...controlProps
|
|
75
|
+
}
|
|
76
|
+
});
|
|
71
77
|
const label = resolveShorthand(fieldProps.label, {
|
|
72
78
|
defaultProps: {
|
|
73
79
|
id: baseId + '__label',
|
|
74
80
|
required: controlProps.required,
|
|
75
|
-
size: typeof controlProps.size === 'string' ? controlProps.size : undefined
|
|
76
|
-
|
|
81
|
+
size: typeof controlProps.size === 'string' ? controlProps.size : undefined,
|
|
82
|
+
htmlFor: labelConnection === 'htmlFor' ? control.id : undefined
|
|
77
83
|
}
|
|
78
84
|
});
|
|
79
85
|
const validationMessage = resolveShorthand(fieldProps.validationMessage, {
|
|
@@ -91,28 +97,29 @@ export const useField_unstable = (props, ref, params) => {
|
|
|
91
97
|
defaultProps: {
|
|
92
98
|
children: validationState ? validationMessageIcons[validationState] : undefined
|
|
93
99
|
}
|
|
94
|
-
});
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
// Add aria-labelledby only if not using the label's htmlFor
|
|
106
|
-
'aria-labelledby': labelConnection !== 'htmlFor' ? label === null || label === void 0 ? void 0 : label.id : undefined,
|
|
107
|
-
'aria-describedby': hasError ? hint === null || hint === void 0 ? void 0 : hint.id : mergeAriaDescribedBy(validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.id, hint === null || hint === void 0 ? void 0 : hint.id),
|
|
108
|
-
'aria-errormessage': hasError ? validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.id : undefined,
|
|
109
|
-
'aria-invalid': hasError ? true : undefined,
|
|
110
|
-
...controlProps
|
|
100
|
+
}); // Hook up aria props on the control
|
|
101
|
+
|
|
102
|
+
if (label && labelConnection === 'aria-labelledby') {
|
|
103
|
+
(_a = control['aria-labelledby']) !== null && _a !== void 0 ? _a : control['aria-labelledby'] = label.id;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
if (validationState === 'error') {
|
|
107
|
+
(_b = control['aria-invalid']) !== null && _b !== void 0 ? _b : control['aria-invalid'] = true;
|
|
108
|
+
|
|
109
|
+
if (validationMessage) {
|
|
110
|
+
(_c = control['aria-errormessage']) !== null && _c !== void 0 ? _c : control['aria-errormessage'] = validationMessage.id;
|
|
111
111
|
}
|
|
112
|
-
});
|
|
113
112
|
|
|
114
|
-
|
|
115
|
-
|
|
113
|
+
if (hint) {
|
|
114
|
+
(_d = control['aria-describedby']) !== null && _d !== void 0 ? _d : control['aria-describedby'] = hint.id;
|
|
115
|
+
}
|
|
116
|
+
} else {
|
|
117
|
+
// If the state is not an error, then the control is described by the validation message, or hint, or both
|
|
118
|
+
const describedby = validationMessage || hint;
|
|
119
|
+
|
|
120
|
+
if (describedby) {
|
|
121
|
+
(_e = control['aria-describedby']) !== null && _e !== void 0 ? _e : control['aria-describedby'] = validationMessage && hint ? `${validationMessage.id} ${hint.id}` : describedby.id;
|
|
122
|
+
}
|
|
116
123
|
}
|
|
117
124
|
|
|
118
125
|
const state = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Field/useField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,uBAAT,EAAkC,mBAAlC,EAAuD,eAAvD,QAA8E,uBAA9E;AACA,SAAS,KAAT,QAAsB,uBAAtB;AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,QAA+D,2BAA/D;AASA,MAAM,sBAAsB,GAAG;EAC7B,KAAK,eAAE,KAAA,CAAA,aAAA,CAAC,mBAAD,EAAoB,IAApB,CADsB;EAE7B,OAAO,eAAE,KAAA,CAAA,aAAA,CAAC,eAAD,EAAgB,IAAhB,CAFoB;EAG7B,OAAO,eAAE,KAAA,CAAA,aAAA,CAAC,uBAAD,EAAwB,IAAxB;AAHoB,CAA/B;AAMA
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Field/useField.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type {\n FieldComponent,\n FieldConfig,\n FieldProps,\n FieldPropsWithOptionalComponentProps,\n FieldState,\n} from './Field.types';\n\nconst validationMessageIcons = {\n error: <ErrorCircle12Filled />,\n warning: <Warning12Filled />,\n success: <CheckmarkCircle12Filled />,\n} as const;\n\n/**\n * Partition the props used by the Field itself, from the props that are passed to the underlying field component.\n */\nexport const getPartitionedFieldProps = <Props extends FieldProps<FieldComponent>>(props: Props) => {\n const {\n className,\n control,\n hint,\n label,\n orientation,\n root,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n ...restOfProps\n } = props;\n\n const fieldProps = {\n className,\n control,\n hint,\n label,\n orientation,\n root,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n };\n\n return [fieldProps, restOfProps] as const;\n};\n\n/**\n * Create the state required to render Field.\n *\n * The returned state can be modified with hooks such as useFieldStyles_unstable,\n * before being passed to renderField_unstable.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the control slot (primary slot)\n * @param params - Configuration parameters for this Field\n */\nexport const useField_unstable = <T extends FieldComponent>(\n props: FieldPropsWithOptionalComponentProps<T>,\n ref: React.Ref<HTMLElement>,\n params: FieldConfig<T>,\n): FieldState<T> => {\n const [fieldProps, controlProps] = getPartitionedFieldProps(props);\n const { orientation = 'vertical', validationState } = fieldProps;\n const { labelConnection = 'htmlFor' } = params;\n\n const baseId = useId('field-');\n\n const root = resolveShorthand(fieldProps.root, {\n required: true,\n defaultProps: getNativeElementProps('div', fieldProps),\n });\n\n const control = resolveShorthand(fieldProps.control, {\n required: true,\n defaultProps: {\n ref,\n id: baseId + '__control',\n ...controlProps,\n },\n });\n\n const label = resolveShorthand(fieldProps.label, {\n defaultProps: {\n id: baseId + '__label',\n required: controlProps.required,\n size: typeof controlProps.size === 'string' ? controlProps.size : undefined,\n htmlFor: labelConnection === 'htmlFor' ? control.id : undefined,\n },\n });\n\n const validationMessage = resolveShorthand(fieldProps.validationMessage, {\n defaultProps: {\n id: baseId + '__validationMessage',\n },\n });\n\n const hint = resolveShorthand(fieldProps.hint, {\n defaultProps: {\n id: baseId + '__hint',\n },\n });\n\n const validationMessageIcon = resolveShorthand(fieldProps.validationMessageIcon, {\n required: !!validationState,\n defaultProps: {\n children: validationState ? validationMessageIcons[validationState] : undefined,\n },\n });\n\n // Hook up aria props on the control\n if (label && labelConnection === 'aria-labelledby') {\n control['aria-labelledby'] ??= label.id;\n }\n\n if (validationState === 'error') {\n control['aria-invalid'] ??= true;\n if (validationMessage) {\n control['aria-errormessage'] ??= validationMessage.id;\n }\n if (hint) {\n control['aria-describedby'] ??= hint.id;\n }\n } else {\n // If the state is not an error, then the control is described by the validation message, or hint, or both\n const describedby = validationMessage || hint;\n if (describedby) {\n control['aria-describedby'] ??= validationMessage && hint ? `${validationMessage.id} ${hint.id}` : describedby.id;\n }\n }\n\n const state: FieldState<FieldComponent> = {\n orientation,\n validationState,\n classNames: params.classNames,\n components: {\n root: 'div',\n control: params.component,\n label: Label,\n validationMessage: 'span',\n validationMessageIcon: 'span',\n hint: 'span',\n },\n root,\n control,\n label,\n validationMessageIcon,\n validationMessage,\n hint,\n };\n\n return state as FieldState<T>;\n};\n"],"sourceRoot":""}
|
|
@@ -18,17 +18,10 @@ const validationMessageIcons = {
|
|
|
18
18
|
warning: /*#__PURE__*/React.createElement(react_icons_1.Warning12Filled, null),
|
|
19
19
|
success: /*#__PURE__*/React.createElement(react_icons_1.CheckmarkCircle12Filled, null)
|
|
20
20
|
};
|
|
21
|
-
/**
|
|
22
|
-
* Merge two possibly-undefined IDs for aria-describedby. If both IDs are defined, combines
|
|
23
|
-
* them into a string separated by a space. Otherwise, returns just the defined ID (if any).
|
|
24
|
-
*/
|
|
25
|
-
|
|
26
|
-
const mergeAriaDescribedBy = (a, b) => a && b ? `${a} ${b}` : a || b;
|
|
27
21
|
/**
|
|
28
22
|
* Partition the props used by the Field itself, from the props that are passed to the underlying field component.
|
|
29
23
|
*/
|
|
30
24
|
|
|
31
|
-
|
|
32
25
|
const getPartitionedFieldProps = props => {
|
|
33
26
|
const {
|
|
34
27
|
className,
|
|
@@ -71,22 +64,35 @@ exports.getPartitionedFieldProps = getPartitionedFieldProps;
|
|
|
71
64
|
*/
|
|
72
65
|
|
|
73
66
|
const useField_unstable = (props, ref, params) => {
|
|
67
|
+
var _a, _b, _c, _d, _e;
|
|
68
|
+
|
|
74
69
|
const [fieldProps, controlProps] = exports.getPartitionedFieldProps(props);
|
|
75
|
-
const baseId = react_utilities_1.useId('field-');
|
|
76
70
|
const {
|
|
77
71
|
orientation = 'vertical',
|
|
78
72
|
validationState
|
|
79
73
|
} = fieldProps;
|
|
74
|
+
const {
|
|
75
|
+
labelConnection = 'htmlFor'
|
|
76
|
+
} = params;
|
|
77
|
+
const baseId = react_utilities_1.useId('field-');
|
|
80
78
|
const root = react_utilities_1.resolveShorthand(fieldProps.root, {
|
|
81
79
|
required: true,
|
|
82
80
|
defaultProps: react_utilities_1.getNativeElementProps('div', fieldProps)
|
|
83
81
|
});
|
|
82
|
+
const control = react_utilities_1.resolveShorthand(fieldProps.control, {
|
|
83
|
+
required: true,
|
|
84
|
+
defaultProps: {
|
|
85
|
+
ref,
|
|
86
|
+
id: baseId + '__control',
|
|
87
|
+
...controlProps
|
|
88
|
+
}
|
|
89
|
+
});
|
|
84
90
|
const label = react_utilities_1.resolveShorthand(fieldProps.label, {
|
|
85
91
|
defaultProps: {
|
|
86
92
|
id: baseId + '__label',
|
|
87
93
|
required: controlProps.required,
|
|
88
|
-
size: typeof controlProps.size === 'string' ? controlProps.size : undefined
|
|
89
|
-
|
|
94
|
+
size: typeof controlProps.size === 'string' ? controlProps.size : undefined,
|
|
95
|
+
htmlFor: labelConnection === 'htmlFor' ? control.id : undefined
|
|
90
96
|
}
|
|
91
97
|
});
|
|
92
98
|
const validationMessage = react_utilities_1.resolveShorthand(fieldProps.validationMessage, {
|
|
@@ -104,28 +110,29 @@ const useField_unstable = (props, ref, params) => {
|
|
|
104
110
|
defaultProps: {
|
|
105
111
|
children: validationState ? validationMessageIcons[validationState] : undefined
|
|
106
112
|
}
|
|
107
|
-
});
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
// Add aria-labelledby only if not using the label's htmlFor
|
|
119
|
-
'aria-labelledby': labelConnection !== 'htmlFor' ? label === null || label === void 0 ? void 0 : label.id : undefined,
|
|
120
|
-
'aria-describedby': hasError ? hint === null || hint === void 0 ? void 0 : hint.id : mergeAriaDescribedBy(validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.id, hint === null || hint === void 0 ? void 0 : hint.id),
|
|
121
|
-
'aria-errormessage': hasError ? validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.id : undefined,
|
|
122
|
-
'aria-invalid': hasError ? true : undefined,
|
|
123
|
-
...controlProps
|
|
113
|
+
}); // Hook up aria props on the control
|
|
114
|
+
|
|
115
|
+
if (label && labelConnection === 'aria-labelledby') {
|
|
116
|
+
(_a = control['aria-labelledby']) !== null && _a !== void 0 ? _a : control['aria-labelledby'] = label.id;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
if (validationState === 'error') {
|
|
120
|
+
(_b = control['aria-invalid']) !== null && _b !== void 0 ? _b : control['aria-invalid'] = true;
|
|
121
|
+
|
|
122
|
+
if (validationMessage) {
|
|
123
|
+
(_c = control['aria-errormessage']) !== null && _c !== void 0 ? _c : control['aria-errormessage'] = validationMessage.id;
|
|
124
124
|
}
|
|
125
|
-
});
|
|
126
125
|
|
|
127
|
-
|
|
128
|
-
|
|
126
|
+
if (hint) {
|
|
127
|
+
(_d = control['aria-describedby']) !== null && _d !== void 0 ? _d : control['aria-describedby'] = hint.id;
|
|
128
|
+
}
|
|
129
|
+
} else {
|
|
130
|
+
// If the state is not an error, then the control is described by the validation message, or hint, or both
|
|
131
|
+
const describedby = validationMessage || hint;
|
|
132
|
+
|
|
133
|
+
if (describedby) {
|
|
134
|
+
(_e = control['aria-describedby']) !== null && _e !== void 0 ? _e : control['aria-describedby'] = validationMessage && hint ? `${validationMessage.id} ${hint.id}` : describedby.id;
|
|
135
|
+
}
|
|
129
136
|
}
|
|
130
137
|
|
|
131
138
|
const state = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Field/useField.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AASA,MAAM,sBAAsB,GAAG;EAC7B,KAAK,eAAE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,mBAAD,EAAoB,IAApB,CADsB;EAE7B,OAAO,eAAE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,eAAD,EAAgB,IAAhB,CAFoB;EAG7B,OAAO,eAAE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,uBAAD,EAAwB,IAAxB;AAHoB,CAA/B;AAMA
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Field/useField.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AASA,MAAM,sBAAsB,GAAG;EAC7B,KAAK,eAAE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,mBAAD,EAAoB,IAApB,CADsB;EAE7B,OAAO,eAAE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,eAAD,EAAgB,IAAhB,CAFoB;EAG7B,OAAO,eAAE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,uBAAD,EAAwB,IAAxB;AAHoB,CAA/B;AAMA;;AAEG;;AACI,MAAM,wBAAwB,GAA8C,KAA3C,IAA2D;EACjG,MAAM;IACJ,SADI;IAEJ,OAFI;IAGJ,IAHI;IAIJ,KAJI;IAKJ,WALI;IAMJ,IANI;IAOJ,KAPI;IAQJ,iBARI;IASJ,qBATI;IAUJ,eAVI;IAWJ,GAAG;EAXC,IAYF,KAZJ;EAcA,MAAM,UAAU,GAAG;IACjB,SADiB;IAEjB,OAFiB;IAGjB,IAHiB;IAIjB,KAJiB;IAKjB,WALiB;IAMjB,IANiB;IAOjB,KAPiB;IAQjB,iBARiB;IASjB,qBATiB;IAUjB;EAViB,CAAnB;EAaA,OAAO,CAAC,UAAD,EAAa,WAAb,CAAP;AACD,CA7BM;;AAAM,OAAA,CAAA,wBAAA,GAAwB,wBAAxB;AA+Bb;;;;;;;;;AASG;;AACI,MAAM,iBAAiB,GAAG,CAC/B,KAD+B,EAE/B,GAF+B,EAG/B,MAH+B,KAId;;;EACjB,MAAM,CAAC,UAAD,EAAa,YAAb,IAA6B,OAAA,CAAA,wBAAA,CAAyB,KAAzB,CAAnC;EACA,MAAM;IAAE,WAAW,GAAG,UAAhB;IAA4B;EAA5B,IAAgD,UAAtD;EACA,MAAM;IAAE,eAAe,GAAG;EAApB,IAAkC,MAAxC;EAEA,MAAM,MAAM,GAAG,iBAAA,CAAA,KAAA,CAAM,QAAN,CAAf;EAEA,MAAM,IAAI,GAAG,iBAAA,CAAA,gBAAA,CAAiB,UAAU,CAAC,IAA5B,EAAkC;IAC7C,QAAQ,EAAE,IADmC;IAE7C,YAAY,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B,UAA7B;EAF+B,CAAlC,CAAb;EAKA,MAAM,OAAO,GAAG,iBAAA,CAAA,gBAAA,CAAiB,UAAU,CAAC,OAA5B,EAAqC;IACnD,QAAQ,EAAE,IADyC;IAEnD,YAAY,EAAE;MACZ,GADY;MAEZ,EAAE,EAAE,MAAM,GAAG,WAFD;MAGZ,GAAG;IAHS;EAFqC,CAArC,CAAhB;EASA,MAAM,KAAK,GAAG,iBAAA,CAAA,gBAAA,CAAiB,UAAU,CAAC,KAA5B,EAAmC;IAC/C,YAAY,EAAE;MACZ,EAAE,EAAE,MAAM,GAAG,SADD;MAEZ,QAAQ,EAAE,YAAY,CAAC,QAFX;MAGZ,IAAI,EAAE,OAAO,YAAY,CAAC,IAApB,KAA6B,QAA7B,GAAwC,YAAY,CAAC,IAArD,GAA4D,SAHtD;MAIZ,OAAO,EAAE,eAAe,KAAK,SAApB,GAAgC,OAAO,CAAC,EAAxC,GAA6C;IAJ1C;EADiC,CAAnC,CAAd;EASA,MAAM,iBAAiB,GAAG,iBAAA,CAAA,gBAAA,CAAiB,UAAU,CAAC,iBAA5B,EAA+C;IACvE,YAAY,EAAE;MACZ,EAAE,EAAE,MAAM,GAAG;IADD;EADyD,CAA/C,CAA1B;EAMA,MAAM,IAAI,GAAG,iBAAA,CAAA,gBAAA,CAAiB,UAAU,CAAC,IAA5B,EAAkC;IAC7C,YAAY,EAAE;MACZ,EAAE,EAAE,MAAM,GAAG;IADD;EAD+B,CAAlC,CAAb;EAMA,MAAM,qBAAqB,GAAG,iBAAA,CAAA,gBAAA,CAAiB,UAAU,CAAC,qBAA5B,EAAmD;IAC/E,QAAQ,EAAE,CAAC,CAAC,eADmE;IAE/E,YAAY,EAAE;MACZ,QAAQ,EAAE,eAAe,GAAG,sBAAsB,CAAC,eAAD,CAAzB,GAA6C;IAD1D;EAFiE,CAAnD,CAA9B,CA1CiB,CAiDjB;;EACA,IAAI,KAAK,IAAI,eAAe,KAAK,iBAAjC,EAAoD;IAClD,CAAA,EAAA,GAAA,OAAO,CAAC,iBAAD,CAAP,MAAyB,IAAzB,IAAyB,EAAA,KAAA,KAAA,CAAzB,GAAyB,EAAzB,GAAA,OAAO,CAAC,iBAAD,CAAP,GAA+B,KAAK,CAAC,EAArC;EACD;;EAED,IAAI,eAAe,KAAK,OAAxB,EAAiC;IAC/B,CAAA,EAAA,GAAA,OAAO,CAAC,cAAD,CAAP,MAAsB,IAAtB,IAAsB,EAAA,KAAA,KAAA,CAAtB,GAAsB,EAAtB,GAAA,OAAO,CAAC,cAAD,CAAP,GAA4B,IAA5B;;IACA,IAAI,iBAAJ,EAAuB;MACrB,CAAA,EAAA,GAAA,OAAO,CAAC,mBAAD,CAAP,MAA2B,IAA3B,IAA2B,EAAA,KAAA,KAAA,CAA3B,GAA2B,EAA3B,GAAA,OAAO,CAAC,mBAAD,CAAP,GAAiC,iBAAiB,CAAC,EAAnD;IACD;;IACD,IAAI,IAAJ,EAAU;MACR,CAAA,EAAA,GAAA,OAAO,CAAC,kBAAD,CAAP,MAA0B,IAA1B,IAA0B,EAAA,KAAA,KAAA,CAA1B,GAA0B,EAA1B,GAAA,OAAO,CAAC,kBAAD,CAAP,GAAgC,IAAI,CAAC,EAArC;IACD;EACF,CARD,MAQO;IACL;IACA,MAAM,WAAW,GAAG,iBAAiB,IAAI,IAAzC;;IACA,IAAI,WAAJ,EAAiB;MACf,CAAA,EAAA,GAAA,OAAO,CAAC,kBAAD,CAAP,MAA0B,IAA1B,IAA0B,EAAA,KAAA,KAAA,CAA1B,GAA0B,EAA1B,GAAA,OAAO,CAAC,kBAAD,CAAP,GAAgC,iBAAiB,IAAI,IAArB,GAA4B,GAAG,iBAAiB,CAAC,EAAE,IAAI,IAAI,CAAC,EAAE,EAA9D,GAAmE,WAAW,CAAC,EAA/G;IACD;EACF;;EAED,MAAM,KAAK,GAA+B;IACxC,WADwC;IAExC,eAFwC;IAGxC,UAAU,EAAE,MAAM,CAAC,UAHqB;IAIxC,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,OAAO,EAAE,MAAM,CAAC,SAFN;MAGV,KAAK,EAAE,aAAA,CAAA,KAHG;MAIV,iBAAiB,EAAE,MAJT;MAKV,qBAAqB,EAAE,MALb;MAMV,IAAI,EAAE;IANI,CAJ4B;IAYxC,IAZwC;IAaxC,OAbwC;IAcxC,KAdwC;IAexC,qBAfwC;IAgBxC,iBAhBwC;IAiBxC;EAjBwC,CAA1C;EAoBA,OAAO,KAAP;AACD,CA/FM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourcesContent":["import * as React from 'react';\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type {\n FieldComponent,\n FieldConfig,\n FieldProps,\n FieldPropsWithOptionalComponentProps,\n FieldState,\n} from './Field.types';\n\nconst validationMessageIcons = {\n error: <ErrorCircle12Filled />,\n warning: <Warning12Filled />,\n success: <CheckmarkCircle12Filled />,\n} as const;\n\n/**\n * Partition the props used by the Field itself, from the props that are passed to the underlying field component.\n */\nexport const getPartitionedFieldProps = <Props extends FieldProps<FieldComponent>>(props: Props) => {\n const {\n className,\n control,\n hint,\n label,\n orientation,\n root,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n ...restOfProps\n } = props;\n\n const fieldProps = {\n className,\n control,\n hint,\n label,\n orientation,\n root,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n };\n\n return [fieldProps, restOfProps] as const;\n};\n\n/**\n * Create the state required to render Field.\n *\n * The returned state can be modified with hooks such as useFieldStyles_unstable,\n * before being passed to renderField_unstable.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the control slot (primary slot)\n * @param params - Configuration parameters for this Field\n */\nexport const useField_unstable = <T extends FieldComponent>(\n props: FieldPropsWithOptionalComponentProps<T>,\n ref: React.Ref<HTMLElement>,\n params: FieldConfig<T>,\n): FieldState<T> => {\n const [fieldProps, controlProps] = getPartitionedFieldProps(props);\n const { orientation = 'vertical', validationState } = fieldProps;\n const { labelConnection = 'htmlFor' } = params;\n\n const baseId = useId('field-');\n\n const root = resolveShorthand(fieldProps.root, {\n required: true,\n defaultProps: getNativeElementProps('div', fieldProps),\n });\n\n const control = resolveShorthand(fieldProps.control, {\n required: true,\n defaultProps: {\n ref,\n id: baseId + '__control',\n ...controlProps,\n },\n });\n\n const label = resolveShorthand(fieldProps.label, {\n defaultProps: {\n id: baseId + '__label',\n required: controlProps.required,\n size: typeof controlProps.size === 'string' ? controlProps.size : undefined,\n htmlFor: labelConnection === 'htmlFor' ? control.id : undefined,\n },\n });\n\n const validationMessage = resolveShorthand(fieldProps.validationMessage, {\n defaultProps: {\n id: baseId + '__validationMessage',\n },\n });\n\n const hint = resolveShorthand(fieldProps.hint, {\n defaultProps: {\n id: baseId + '__hint',\n },\n });\n\n const validationMessageIcon = resolveShorthand(fieldProps.validationMessageIcon, {\n required: !!validationState,\n defaultProps: {\n children: validationState ? validationMessageIcons[validationState] : undefined,\n },\n });\n\n // Hook up aria props on the control\n if (label && labelConnection === 'aria-labelledby') {\n control['aria-labelledby'] ??= label.id;\n }\n\n if (validationState === 'error') {\n control['aria-invalid'] ??= true;\n if (validationMessage) {\n control['aria-errormessage'] ??= validationMessage.id;\n }\n if (hint) {\n control['aria-describedby'] ??= hint.id;\n }\n } else {\n // If the state is not an error, then the control is described by the validation message, or hint, or both\n const describedby = validationMessage || hint;\n if (describedby) {\n control['aria-describedby'] ??= validationMessage && hint ? `${validationMessage.id} ${hint.id}` : describedby.id;\n }\n }\n\n const state: FieldState<FieldComponent> = {\n orientation,\n validationState,\n classNames: params.classNames,\n components: {\n root: 'div',\n control: params.component,\n label: Label,\n validationMessage: 'span',\n validationMessageIcon: 'span',\n hint: 'span',\n },\n root,\n control,\n label,\n validationMessageIcon,\n validationMessage,\n hint,\n };\n\n return state as FieldState<T>;\n};\n"],"sourceRoot":""}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-field",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20221010-0422.1",
|
|
4
4
|
"description": "Fluent UI Field components",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -27,25 +27,25 @@
|
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@fluentui/eslint-plugin": "*",
|
|
29
29
|
"@fluentui/react-conformance": "*",
|
|
30
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
30
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20221010-0422.1",
|
|
31
31
|
"@fluentui/scripts": "^1.0.0"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@fluentui/react-checkbox": "
|
|
35
|
-
"@fluentui/react-combobox": "
|
|
36
|
-
"@fluentui/react-context-selector": "
|
|
34
|
+
"@fluentui/react-checkbox": "0.0.0-nightly-20221010-0422.1",
|
|
35
|
+
"@fluentui/react-combobox": "0.0.0-nightly-20221010-0422.1",
|
|
36
|
+
"@fluentui/react-context-selector": "0.0.0-nightly-20221010-0422.1",
|
|
37
37
|
"@fluentui/react-icons": "^2.0.175",
|
|
38
|
-
"@fluentui/react-input": "
|
|
39
|
-
"@fluentui/react-label": "
|
|
40
|
-
"@fluentui/react-progress": "0.0.0-nightly-
|
|
41
|
-
"@fluentui/react-radio": "
|
|
42
|
-
"@fluentui/react-select": "0.0.0-nightly-
|
|
43
|
-
"@fluentui/react-slider": "
|
|
44
|
-
"@fluentui/react-spinbutton": "
|
|
45
|
-
"@fluentui/react-switch": "
|
|
46
|
-
"@fluentui/react-textarea": "
|
|
47
|
-
"@fluentui/react-theme": "
|
|
48
|
-
"@fluentui/react-utilities": "
|
|
38
|
+
"@fluentui/react-input": "0.0.0-nightly-20221010-0422.1",
|
|
39
|
+
"@fluentui/react-label": "0.0.0-nightly-20221010-0422.1",
|
|
40
|
+
"@fluentui/react-progress": "0.0.0-nightly-20221010-0422.1",
|
|
41
|
+
"@fluentui/react-radio": "0.0.0-nightly-20221010-0422.1",
|
|
42
|
+
"@fluentui/react-select": "0.0.0-nightly-20221010-0422.1",
|
|
43
|
+
"@fluentui/react-slider": "0.0.0-nightly-20221010-0422.1",
|
|
44
|
+
"@fluentui/react-spinbutton": "0.0.0-nightly-20221010-0422.1",
|
|
45
|
+
"@fluentui/react-switch": "0.0.0-nightly-20221010-0422.1",
|
|
46
|
+
"@fluentui/react-textarea": "0.0.0-nightly-20221010-0422.1",
|
|
47
|
+
"@fluentui/react-theme": "0.0.0-nightly-20221010-0422.1",
|
|
48
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20221010-0422.1",
|
|
49
49
|
"@griffel/react": "^1.3.0",
|
|
50
50
|
"tslib": "^2.1.0"
|
|
51
51
|
},
|