@fluentui/react-field 0.0.0-nightly-20230317-1454.1 → 0.0.0-nightly-20230322-0439.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/.swcrc +2 -11
- package/CHANGELOG.json +70 -13
- package/CHANGELOG.md +25 -9
- package/lib/Field.js +1 -1
- package/lib/components/Field/Field.js +5 -5
- package/lib/components/Field/Field.types.js +1 -1
- package/lib/components/Field/index.js +5 -5
- package/lib/components/Field/renderField.js +2 -2
- package/lib/components/Field/useField.js +28 -24
- package/lib/components/Field/useField.js.map +1 -1
- package/lib/components/Field/useFieldStyles.js +7 -7
- package/lib/index.js +2 -2
- package/lib/util/makeDeprecatedField.js +3 -3
- package/lib-commonjs/Field.js.map +1 -1
- package/lib-commonjs/components/Field/Field.js +1 -1
- package/lib-commonjs/components/Field/Field.js.map +1 -1
- package/lib-commonjs/components/Field/Field.types.js.map +1 -1
- package/lib-commonjs/components/Field/index.js.map +1 -1
- package/lib-commonjs/components/Field/renderField.js.map +1 -1
- package/lib-commonjs/components/Field/useField.js +27 -23
- package/lib-commonjs/components/Field/useField.js.map +1 -1
- package/lib-commonjs/components/Field/useFieldStyles.js +5 -5
- package/lib-commonjs/components/Field/useFieldStyles.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/util/makeDeprecatedField.js +1 -1
- package/lib-commonjs/util/makeDeprecatedField.js.map +1 -1
- package/package.json +8 -7
package/.swcrc
CHANGED
|
@@ -1,15 +1,5 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/swcrc",
|
|
3
|
-
"env": {
|
|
4
|
-
"targets": {
|
|
5
|
-
"chrome": "84",
|
|
6
|
-
"edge": "84",
|
|
7
|
-
"firefox": "75",
|
|
8
|
-
"opera": "73",
|
|
9
|
-
"safari": "14.1"
|
|
10
|
-
},
|
|
11
|
-
"bugfixes": true
|
|
12
|
-
},
|
|
13
3
|
"exclude": [
|
|
14
4
|
"/testing",
|
|
15
5
|
"/**/*.cy.ts",
|
|
@@ -32,7 +22,8 @@
|
|
|
32
22
|
"runtime": "classic",
|
|
33
23
|
"useSpread": true
|
|
34
24
|
}
|
|
35
|
-
}
|
|
25
|
+
},
|
|
26
|
+
"target": "es2019"
|
|
36
27
|
},
|
|
37
28
|
"minify": false,
|
|
38
29
|
"sourceMaps": true
|
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": "Wed, 22 Mar 2023 04:46:43 GMT",
|
|
6
|
+
"tag": "@fluentui/react-field_v0.0.0-nightly-20230322-0439.1",
|
|
7
|
+
"version": "0.0.0-nightly-20230322-0439.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,32 +16,89 @@
|
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui/react-field",
|
|
19
|
-
"comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20230322-0439.1",
|
|
20
|
+
"commit": "49dde84493fc2c3e96abac5ce918169c9668ba66"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui/react-field",
|
|
25
|
-
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-20230322-0439.1",
|
|
26
|
+
"commit": "49dde84493fc2c3e96abac5ce918169c9668ba66"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui/react-field",
|
|
31
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230322-0439.1",
|
|
32
|
+
"commit": "49dde84493fc2c3e96abac5ce918169c9668ba66"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"author": "beachball",
|
|
36
36
|
"package": "@fluentui/react-field",
|
|
37
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
38
|
-
"commit": "
|
|
37
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230322-0439.1",
|
|
38
|
+
"commit": "49dde84493fc2c3e96abac5ce918169c9668ba66"
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
41
|
"author": "beachball",
|
|
42
42
|
"package": "@fluentui/react-field",
|
|
43
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
44
|
-
"commit": "
|
|
43
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230322-0439.1",
|
|
44
|
+
"commit": "49dde84493fc2c3e96abac5ce918169c9668ba66"
|
|
45
|
+
}
|
|
46
|
+
]
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"date": "Tue, 21 Mar 2023 21:23:34 GMT",
|
|
51
|
+
"tag": "@fluentui/react-field_v9.0.0-alpha.27",
|
|
52
|
+
"version": "9.0.0-alpha.27",
|
|
53
|
+
"comments": {
|
|
54
|
+
"prerelease": [
|
|
55
|
+
{
|
|
56
|
+
"author": "makotom@microsoft.com",
|
|
57
|
+
"package": "@fluentui/react-field",
|
|
58
|
+
"commit": "7fde5c94869ff9841b142b7ff1d0a3df0ab58f74",
|
|
59
|
+
"comment": "chore: Bumping version of @fluentui/react-icons to ^2.0.196."
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"author": "tristan.watanabe@gmail.com",
|
|
63
|
+
"package": "@fluentui/react-field",
|
|
64
|
+
"commit": "2fac1a139149bd13b76b1306207bc988dca9c72c",
|
|
65
|
+
"comment": "chore: migrate to swc transpilation approach."
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"author": "tristan.watanabe@gmail.com",
|
|
69
|
+
"package": "@fluentui/react-field",
|
|
70
|
+
"commit": "ead1c6d4c2ac3f3596b62b8cbc07b0a03041f11f",
|
|
71
|
+
"comment": "fix: add node field to package.json exports map."
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"author": "beachball",
|
|
75
|
+
"package": "@fluentui/react-field",
|
|
76
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.15",
|
|
77
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"author": "beachball",
|
|
81
|
+
"package": "@fluentui/react-field",
|
|
82
|
+
"comment": "Bump @fluentui/react-label to v9.1.5",
|
|
83
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"author": "beachball",
|
|
87
|
+
"package": "@fluentui/react-field",
|
|
88
|
+
"comment": "Bump @fluentui/react-theme to v9.1.7",
|
|
89
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"author": "beachball",
|
|
93
|
+
"package": "@fluentui/react-field",
|
|
94
|
+
"comment": "Bump @fluentui/react-utilities to v9.7.2",
|
|
95
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"author": "beachball",
|
|
99
|
+
"package": "@fluentui/react-field",
|
|
100
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.20",
|
|
101
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
|
45
102
|
}
|
|
46
103
|
]
|
|
47
104
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,22 +1,38 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-field
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 22 Mar 2023 04:46:43 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-20230322-0439.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v0.0.0-nightly-20230322-0439.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.
|
|
9
|
+
Wed, 22 Mar 2023 04:46:43 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.27..@fluentui/react-field_v0.0.0-nightly-20230322-0439.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-context-selector to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-label to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-context-selector to v0.0.0-nightly-20230322-0439.1 ([commit](https://github.com/microsoft/fluentui/commit/49dde84493fc2c3e96abac5ce918169c9668ba66) by beachball)
|
|
16
|
+
- Bump @fluentui/react-label to v0.0.0-nightly-20230322-0439.1 ([commit](https://github.com/microsoft/fluentui/commit/49dde84493fc2c3e96abac5ce918169c9668ba66) by beachball)
|
|
17
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20230322-0439.1 ([commit](https://github.com/microsoft/fluentui/commit/49dde84493fc2c3e96abac5ce918169c9668ba66) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20230322-0439.1 ([commit](https://github.com/microsoft/fluentui/commit/49dde84493fc2c3e96abac5ce918169c9668ba66) by beachball)
|
|
19
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230322-0439.1 ([commit](https://github.com/microsoft/fluentui/commit/49dde84493fc2c3e96abac5ce918169c9668ba66) by beachball)
|
|
20
|
+
|
|
21
|
+
## [9.0.0-alpha.27](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.27)
|
|
22
|
+
|
|
23
|
+
Tue, 21 Mar 2023 21:23:34 GMT
|
|
24
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.26..@fluentui/react-field_v9.0.0-alpha.27)
|
|
25
|
+
|
|
26
|
+
### Changes
|
|
27
|
+
|
|
28
|
+
- chore: Bumping version of @fluentui/react-icons to ^2.0.196. ([PR #27100](https://github.com/microsoft/fluentui/pull/27100) by makotom@microsoft.com)
|
|
29
|
+
- chore: migrate to swc transpilation approach. ([PR #27250](https://github.com/microsoft/fluentui/pull/27250) by tristan.watanabe@gmail.com)
|
|
30
|
+
- fix: add node field to package.json exports map. ([PR #27154](https://github.com/microsoft/fluentui/pull/27154) by tristan.watanabe@gmail.com)
|
|
31
|
+
- Bump @fluentui/react-context-selector to v9.1.15 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
|
32
|
+
- Bump @fluentui/react-label to v9.1.5 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
|
33
|
+
- Bump @fluentui/react-theme to v9.1.7 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
|
34
|
+
- Bump @fluentui/react-utilities to v9.7.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
|
35
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.20 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
|
20
36
|
|
|
21
37
|
## [9.0.0-alpha.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.26)
|
|
22
38
|
|
package/lib/Field.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from
|
|
1
|
+
export * from './components/Field/index';
|
|
2
2
|
//# sourceMappingURL=Field.js.map
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
import { renderField_unstable } from
|
|
3
|
-
import { useField_unstable } from
|
|
4
|
-
import { useFieldStyles_unstable } from
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { renderField_unstable } from './renderField';
|
|
3
|
+
import { useField_unstable } from './useField';
|
|
4
|
+
import { useFieldStyles_unstable } from './useFieldStyles';
|
|
5
5
|
export const Field = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
6
6
|
const state = useField_unstable(props, ref);
|
|
7
7
|
useFieldStyles_unstable(state);
|
|
8
8
|
return renderField_unstable(state);
|
|
9
9
|
});
|
|
10
|
-
Field.displayName =
|
|
10
|
+
Field.displayName = 'Field';
|
|
11
11
|
//# sourceMappingURL=Field.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import * as React from
|
|
1
|
+
import * as React from 'react';
|
|
2
2
|
//# sourceMappingURL=Field.types.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export * from
|
|
2
|
-
export * from
|
|
3
|
-
export * from
|
|
4
|
-
export * from
|
|
5
|
-
export * from
|
|
1
|
+
export * from './Field.types';
|
|
2
|
+
export * from './Field';
|
|
3
|
+
export * from './renderField';
|
|
4
|
+
export * from './useField';
|
|
5
|
+
export * from './useFieldStyles';
|
|
6
6
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
var _controlProps, _arialabelledby,
|
|
2
2
|
// Assign the child a generated ID if doesn't already have an ID
|
|
3
3
|
_controlProps1, _controlProps2, _ariainvalid, _controlProps3, _ariarequired;
|
|
4
|
-
import * as React from
|
|
5
|
-
import { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from
|
|
6
|
-
import { Label } from
|
|
7
|
-
import { getNativeElementProps, resolveShorthand, useId } from
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';
|
|
6
|
+
import { Label } from '@fluentui/react-label';
|
|
7
|
+
import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';
|
|
8
8
|
const validationMessageIcons = {
|
|
9
9
|
error: /*#__PURE__*/React.createElement(ErrorCircle12Filled, null),
|
|
10
10
|
warning: /*#__PURE__*/React.createElement(Warning12Filled, null),
|
|
@@ -23,32 +23,32 @@ const validationMessageIcons = {
|
|
|
23
23
|
export const useField_unstable = (props, ref) => {
|
|
24
24
|
const {
|
|
25
25
|
children,
|
|
26
|
-
orientation =
|
|
26
|
+
orientation = 'vertical',
|
|
27
27
|
required,
|
|
28
|
-
validationState = props.validationMessage ?
|
|
28
|
+
validationState = props.validationMessage ? 'error' : 'none',
|
|
29
29
|
size
|
|
30
30
|
} = props;
|
|
31
|
-
const baseId = useId(
|
|
32
|
-
const root = getNativeElementProps(
|
|
31
|
+
const baseId = useId('field-');
|
|
32
|
+
const root = getNativeElementProps('div', {
|
|
33
33
|
...props,
|
|
34
34
|
ref
|
|
35
|
-
}, /*excludedPropNames:*/[
|
|
35
|
+
}, /*excludedPropNames:*/['children']);
|
|
36
36
|
const label = resolveShorthand(props.label, {
|
|
37
37
|
defaultProps: {
|
|
38
|
-
id: baseId +
|
|
38
|
+
id: baseId + '__label',
|
|
39
39
|
required,
|
|
40
40
|
size
|
|
41
41
|
}
|
|
42
42
|
});
|
|
43
43
|
const validationMessage = resolveShorthand(props.validationMessage, {
|
|
44
44
|
defaultProps: {
|
|
45
|
-
id: baseId +
|
|
46
|
-
role: validationState ===
|
|
45
|
+
id: baseId + '__validationMessage',
|
|
46
|
+
role: validationState === 'error' ? 'alert' : undefined
|
|
47
47
|
}
|
|
48
48
|
});
|
|
49
49
|
const hint = resolveShorthand(props.hint, {
|
|
50
50
|
defaultProps: {
|
|
51
|
-
id: baseId +
|
|
51
|
+
id: baseId + '__hint'
|
|
52
52
|
}
|
|
53
53
|
});
|
|
54
54
|
const defaultIcon = validationMessageIcons[validationState];
|
|
@@ -62,9 +62,11 @@ export const useField_unstable = (props, ref) => {
|
|
|
62
62
|
...children.props
|
|
63
63
|
} : {};
|
|
64
64
|
if (label) {
|
|
65
|
-
|
|
65
|
+
var _;
|
|
66
|
+
(_ = (_controlProps = controlProps)[_arialabelledby = 'aria-labelledby']) !== null && _ !== void 0 ? _ : _controlProps[_arialabelledby] = label.id;
|
|
66
67
|
if (!label.htmlFor) {
|
|
67
|
-
|
|
68
|
+
var _id;
|
|
69
|
+
(_id = (_controlProps1 = controlProps).id) !== null && _id !== void 0 ? _id : _controlProps1.id = baseId + '__control';
|
|
68
70
|
label.htmlFor = controlProps.id;
|
|
69
71
|
}
|
|
70
72
|
}
|
|
@@ -72,28 +74,30 @@ export const useField_unstable = (props, ref) => {
|
|
|
72
74
|
// The control is described by the validation message, or hint, or both
|
|
73
75
|
// We also preserve and append any aria-describedby supplied by the user
|
|
74
76
|
// For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933
|
|
75
|
-
controlProps[
|
|
77
|
+
controlProps['aria-describedby'] = [validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.id, hint === null || hint === void 0 ? void 0 : hint.id, controlProps['aria-describedby']].filter(Boolean).join(' ');
|
|
76
78
|
}
|
|
77
|
-
if (validationState ===
|
|
78
|
-
|
|
79
|
+
if (validationState === 'error') {
|
|
80
|
+
var _1;
|
|
81
|
+
(_1 = (_controlProps2 = controlProps)[_ariainvalid = 'aria-invalid']) !== null && _1 !== void 0 ? _1 : _controlProps2[_ariainvalid] = true;
|
|
79
82
|
}
|
|
80
83
|
if (required) {
|
|
81
|
-
|
|
84
|
+
var _2;
|
|
85
|
+
(_2 = (_controlProps3 = controlProps)[_ariarequired = 'aria-required']) !== null && _2 !== void 0 ? _2 : _controlProps3[_ariarequired] = true;
|
|
82
86
|
}
|
|
83
87
|
if ( /*#__PURE__*/React.isValidElement(children)) {
|
|
84
88
|
root.children = /*#__PURE__*/React.cloneElement(children, controlProps);
|
|
85
|
-
} else if (typeof children ===
|
|
89
|
+
} else if (typeof children === 'function') {
|
|
86
90
|
root.children = children(controlProps);
|
|
87
91
|
}
|
|
88
92
|
return {
|
|
89
93
|
orientation,
|
|
90
94
|
validationState,
|
|
91
95
|
components: {
|
|
92
|
-
root:
|
|
96
|
+
root: 'div',
|
|
93
97
|
label: Label,
|
|
94
|
-
validationMessage:
|
|
95
|
-
validationMessageIcon:
|
|
96
|
-
hint:
|
|
98
|
+
validationMessage: 'div',
|
|
99
|
+
validationMessageIcon: 'span',
|
|
100
|
+
hint: 'div'
|
|
97
101
|
},
|
|
98
102
|
root,
|
|
99
103
|
label,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_controlProps","_arialabelledby","_controlProps1","_controlProps2","_ariainvalid","_controlProps3","_ariarequired","React","CheckmarkCircle12Filled","ErrorCircle12Filled","Warning12Filled","Label","getNativeElementProps","resolveShorthand","useId","validationMessageIcons","error","createElement","warning","success","none","undefined","useField_unstable","props","ref","children","orientation","required","validationState","validationMessage","size","baseId","root","label","defaultProps","id","role","hint","defaultIcon","validationMessageIcon","controlProps","isValidElement","htmlFor","filter","Boolean","join","cloneElement","components"],"sources":["../../../src/components/Field/useField.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { FieldChildProps, FieldProps, FieldState } from './Field.types';\n\nconst validationMessageIcons = {\n error: <ErrorCircle12Filled />,\n warning: <Warning12Filled />,\n success: <CheckmarkCircle12Filled />,\n none: undefined,\n} as const;\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 root\n */\nexport const useField_unstable = (props: FieldProps, ref: React.Ref<HTMLDivElement>): FieldState => {\n const {\n children,\n orientation = 'vertical',\n required,\n validationState = props.validationMessage ? 'error' : 'none',\n size,\n } = props;\n\n const baseId = useId('field-');\n\n const root = getNativeElementProps('div', { ...props, ref }, /*excludedPropNames:*/ ['children']);\n\n const label = resolveShorthand(props.label, {\n defaultProps: {\n id: baseId + '__label',\n required,\n size,\n // htmlFor is handled below\n },\n });\n\n const validationMessage = resolveShorthand(props.validationMessage, {\n defaultProps: {\n id: baseId + '__validationMessage',\n role: validationState === 'error' ? 'alert' : undefined,\n },\n });\n\n const hint = resolveShorthand(props.hint, {\n defaultProps: {\n id: baseId + '__hint',\n },\n });\n\n const defaultIcon = validationMessageIcons[validationState];\n const validationMessageIcon = resolveShorthand(props.validationMessageIcon, {\n required: !!defaultIcon,\n defaultProps: {\n children: defaultIcon,\n },\n });\n\n const controlProps: FieldChildProps = React.isValidElement(children) ? { ...children.props } : {};\n\n if (label) {\n controlProps['aria-labelledby'] ??= label.id;\n\n if (!label.htmlFor) {\n // Assign the child a generated ID if doesn't already have an ID\n controlProps.id ??= baseId + '__control';\n label.htmlFor = controlProps.id;\n }\n }\n\n if (validationMessage || hint) {\n // The control is described by the validation message, or hint, or both\n // We also preserve and append any aria-describedby supplied by the user\n // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933\n controlProps['aria-describedby'] = [validationMessage?.id, hint?.id, controlProps['aria-describedby']]\n .filter(Boolean)\n .join(' ');\n }\n\n if (validationState === 'error') {\n controlProps['aria-invalid'] ??= true;\n }\n\n if (required) {\n controlProps['aria-required'] ??= true;\n }\n\n if (React.isValidElement(children)) {\n root.children = React.cloneElement(children, controlProps);\n } else if (typeof children === 'function') {\n root.children = children(controlProps);\n }\n\n return {\n orientation,\n validationState,\n components: {\n root: 'div',\n label: Label,\n validationMessage: 'div',\n validationMessageIcon: 'span',\n hint: 'div',\n },\n root,\n label,\n validationMessageIcon,\n validationMessage,\n hint,\n };\n};\n"],"mappings":"IAqEIA,aAAA,EAAaC,eAAA;EAGX;EACAC,cAAA,EAeFC,cAAA,EAAaC,YAAA,EAIbC,cAAA,EAAaC,aAAA;AA5FjB,YAAYC,KAAA,MAAW;AAEvB,SAASC,uBAAuB,EAAEC,mBAAmB,EAAEC,eAAe,QAAQ;AAC9E,SAASC,KAAK,QAAQ;AACtB,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ;AAG/D,MAAMC,sBAAA,GAAyB;EAC7BC,KAAA,eAAOT,KAAA,CAAAU,aAAA,CAACR,mBAAA;EACRS,OAAA,eAASX,KAAA,CAAAU,aAAA,CAACP,eAAA;EACVS,OAAA,eAASZ,KAAA,CAAAU,aAAA,CAACT,uBAAA;EACVY,IAAA,EAAMC;AACR;AAEA;;;;;;;;;AASA,OAAO,MAAMC,iBAAA,GAAoBA,CAACC,KAAA,EAAmBC,GAAA,KAA+C;EAClG,MAAM;IACJC,QAAA;IACAC,WAAA,GAAc;IACdC,QAAA;IACAC,eAAA,GAAkBL,KAAA,CAAMM,iBAAiB,GAAG,UAAU,MAAM;IAC5DC;EAAI,CACL,GAAGP,KAAA;EAEJ,MAAMQ,MAAA,GAASjB,KAAA,CAAM;EAErB,MAAMkB,IAAA,GAAOpB,qBAAA,CAAsB,OAAO;IAAE,GAAGW,KAAK;IAAEC;EAAI,GAAG,sBAAuB,CAAC,WAAW;EAEhG,MAAMS,KAAA,GAAQpB,gBAAA,CAAiBU,KAAA,CAAMU,KAAK,EAAE;IAC1CC,YAAA,EAAc;MACZC,EAAA,EAAIJ,MAAA,GAAS;MACbJ,QAAA;MACAG;IAEF;EACF;EAEA,MAAMD,iBAAA,GAAoBhB,gBAAA,CAAiBU,KAAA,CAAMM,iBAAiB,EAAE;IAClEK,YAAA,EAAc;MACZC,EAAA,EAAIJ,MAAA,GAAS;MACbK,IAAA,EAAMR,eAAA,KAAoB,UAAU,UAAUP;IAChD;EACF;EAEA,MAAMgB,IAAA,GAAOxB,gBAAA,CAAiBU,KAAA,CAAMc,IAAI,EAAE;IACxCH,YAAA,EAAc;MACZC,EAAA,EAAIJ,MAAA,GAAS;IACf;EACF;EAEA,MAAMO,WAAA,GAAcvB,sBAAsB,CAACa,eAAA,CAAgB;EAC3D,MAAMW,qBAAA,GAAwB1B,gBAAA,CAAiBU,KAAA,CAAMgB,qBAAqB,EAAE;IAC1EZ,QAAA,EAAU,CAAC,CAACW,WAAA;IACZJ,YAAA,EAAc;MACZT,QAAA,EAAUa;IACZ;EACF;EAEA,MAAME,YAAA,gBAAgC,cAAAjC,KAAA,CAAMkC,cAAc,CAAChB,QAAA,IAAY;IAAE,GAAGA,QAAA,CAASF;EAAM,IAAI,CAAC,CAAC;EAEjG,IAAIU,KAAA,EAAO
|
|
1
|
+
{"version":3,"names":["_controlProps","_arialabelledby","_controlProps1","_controlProps2","_ariainvalid","_controlProps3","_ariarequired","React","CheckmarkCircle12Filled","ErrorCircle12Filled","Warning12Filled","Label","getNativeElementProps","resolveShorthand","useId","validationMessageIcons","error","createElement","warning","success","none","undefined","useField_unstable","props","ref","children","orientation","required","validationState","validationMessage","size","baseId","root","label","defaultProps","id","role","hint","defaultIcon","validationMessageIcon","controlProps","isValidElement","_","htmlFor","_id","filter","Boolean","join","_1","_2","cloneElement","components"],"sources":["../../../src/components/Field/useField.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { FieldChildProps, FieldProps, FieldState } from './Field.types';\n\nconst validationMessageIcons = {\n error: <ErrorCircle12Filled />,\n warning: <Warning12Filled />,\n success: <CheckmarkCircle12Filled />,\n none: undefined,\n} as const;\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 root\n */\nexport const useField_unstable = (props: FieldProps, ref: React.Ref<HTMLDivElement>): FieldState => {\n const {\n children,\n orientation = 'vertical',\n required,\n validationState = props.validationMessage ? 'error' : 'none',\n size,\n } = props;\n\n const baseId = useId('field-');\n\n const root = getNativeElementProps('div', { ...props, ref }, /*excludedPropNames:*/ ['children']);\n\n const label = resolveShorthand(props.label, {\n defaultProps: {\n id: baseId + '__label',\n required,\n size,\n // htmlFor is handled below\n },\n });\n\n const validationMessage = resolveShorthand(props.validationMessage, {\n defaultProps: {\n id: baseId + '__validationMessage',\n role: validationState === 'error' ? 'alert' : undefined,\n },\n });\n\n const hint = resolveShorthand(props.hint, {\n defaultProps: {\n id: baseId + '__hint',\n },\n });\n\n const defaultIcon = validationMessageIcons[validationState];\n const validationMessageIcon = resolveShorthand(props.validationMessageIcon, {\n required: !!defaultIcon,\n defaultProps: {\n children: defaultIcon,\n },\n });\n\n const controlProps: FieldChildProps = React.isValidElement(children) ? { ...children.props } : {};\n\n if (label) {\n controlProps['aria-labelledby'] ??= label.id;\n\n if (!label.htmlFor) {\n // Assign the child a generated ID if doesn't already have an ID\n controlProps.id ??= baseId + '__control';\n label.htmlFor = controlProps.id;\n }\n }\n\n if (validationMessage || hint) {\n // The control is described by the validation message, or hint, or both\n // We also preserve and append any aria-describedby supplied by the user\n // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933\n controlProps['aria-describedby'] = [validationMessage?.id, hint?.id, controlProps['aria-describedby']]\n .filter(Boolean)\n .join(' ');\n }\n\n if (validationState === 'error') {\n controlProps['aria-invalid'] ??= true;\n }\n\n if (required) {\n controlProps['aria-required'] ??= true;\n }\n\n if (React.isValidElement(children)) {\n root.children = React.cloneElement(children, controlProps);\n } else if (typeof children === 'function') {\n root.children = children(controlProps);\n }\n\n return {\n orientation,\n validationState,\n components: {\n root: 'div',\n label: Label,\n validationMessage: 'div',\n validationMessageIcon: 'span',\n hint: 'div',\n },\n root,\n label,\n validationMessageIcon,\n validationMessage,\n hint,\n };\n};\n"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { tokens, typographyStyles } from
|
|
2
|
-
import { __resetStyles, __styles, mergeClasses } from
|
|
1
|
+
import { tokens, typographyStyles } from '@fluentui/react-theme';
|
|
2
|
+
import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
|
|
3
3
|
export const fieldClassNames = {
|
|
4
4
|
root: `fui-Field`,
|
|
5
5
|
label: `fui-Field__label`,
|
|
@@ -8,7 +8,7 @@ export const fieldClassNames = {
|
|
|
8
8
|
hint: `fui-Field__hint`
|
|
9
9
|
};
|
|
10
10
|
// Size of the icon in the validation message
|
|
11
|
-
const iconSize =
|
|
11
|
+
const iconSize = '12px';
|
|
12
12
|
/**
|
|
13
13
|
* Styles for the root slot
|
|
14
14
|
*/
|
|
@@ -82,22 +82,22 @@ export const useFieldStyles_unstable = state => {
|
|
|
82
82
|
const {
|
|
83
83
|
validationState
|
|
84
84
|
} = state;
|
|
85
|
-
const horizontal = state.orientation ===
|
|
85
|
+
const horizontal = state.orientation === 'horizontal';
|
|
86
86
|
const rootStyles = useRootStyles();
|
|
87
87
|
state.root.className = mergeClasses(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);
|
|
88
88
|
const labelStyles = useLabelStyles();
|
|
89
89
|
if (state.label) {
|
|
90
|
-
state.label.className = mergeClasses(fieldClassNames.label, labelStyles.base, horizontal && labelStyles.horizontal, !horizontal && labelStyles.vertical, state.label.size ===
|
|
90
|
+
state.label.className = mergeClasses(fieldClassNames.label, labelStyles.base, horizontal && labelStyles.horizontal, !horizontal && labelStyles.vertical, state.label.size === 'large' && labelStyles.large, !horizontal && state.label.size === 'large' && labelStyles.verticalLarge, state.label.className);
|
|
91
91
|
}
|
|
92
92
|
const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
|
|
93
93
|
const validationMessageIconStyles = useValidationMessageIconStyles();
|
|
94
94
|
if (state.validationMessageIcon) {
|
|
95
|
-
state.validationMessageIcon.className = mergeClasses(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !==
|
|
95
|
+
state.validationMessageIcon.className = mergeClasses(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== 'none' && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
|
|
96
96
|
}
|
|
97
97
|
const secondaryTextBaseClassName = useSecondaryTextBaseClassName();
|
|
98
98
|
const secondaryTextStyles = useSecondaryTextStyles();
|
|
99
99
|
if (state.validationMessage) {
|
|
100
|
-
state.validationMessage.className = mergeClasses(fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState ===
|
|
100
|
+
state.validationMessage.className = mergeClasses(fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);
|
|
101
101
|
}
|
|
102
102
|
if (state.hint) {
|
|
103
103
|
state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);
|
package/lib/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from
|
|
1
|
+
export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field';
|
|
2
2
|
// eslint-disable-next-line deprecation/deprecation
|
|
3
|
-
export { getDeprecatedFieldClassNames, makeDeprecatedField } from
|
|
3
|
+
export { getDeprecatedFieldClassNames, makeDeprecatedField } from './util/makeDeprecatedField';
|
|
4
4
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/* eslint-disable deprecation/deprecation */import * as React from
|
|
2
|
-
import { Field, fieldClassNames } from
|
|
1
|
+
/* eslint-disable deprecation/deprecation */import * as React from 'react';
|
|
2
|
+
import { Field, fieldClassNames } from '../Field';
|
|
3
3
|
/**
|
|
4
4
|
* Partition the props used by the Field itself, from the props that are passed to the underlying field component.
|
|
5
5
|
*/
|
|
@@ -16,7 +16,7 @@ function getPartitionedFieldProps(props) {
|
|
|
16
16
|
style,
|
|
17
17
|
validationMessage,
|
|
18
18
|
validationMessageIcon,
|
|
19
|
-
validationState =
|
|
19
|
+
validationState = 'none',
|
|
20
20
|
...restOfProps
|
|
21
21
|
} = props;
|
|
22
22
|
return [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../lib/Field.js"],"sourcesContent":["export * from
|
|
1
|
+
{"version":3,"sources":["../lib/Field.js"],"sourcesContent":["export * from './components/Field/index';\n//# sourceMappingURL=Field.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,iCAAiC"}
|
|
@@ -16,6 +16,6 @@ const Field = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
|
16
16
|
(0, _useFieldStyles.useFieldStyles_unstable)(state);
|
|
17
17
|
return (0, _renderField.renderField_unstable)(state);
|
|
18
18
|
});
|
|
19
|
-
Field.displayName =
|
|
19
|
+
Field.displayName = 'Field'; //# sourceMappingURL=Field.js.map
|
|
20
20
|
|
|
21
21
|
//# sourceMappingURL=Field.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/Field/Field.js"],"sourcesContent":["import * as React from
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/Field/Field.js"],"sourcesContent":["import * as React from 'react';\nimport { renderField_unstable } from './renderField';\nimport { useField_unstable } from './useField';\nimport { useFieldStyles_unstable } from './useFieldStyles';\nexport const Field = /*#__PURE__*/React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref);\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\nField.displayName = 'Field';\n//# sourceMappingURL=Field.js.map"],"names":["Field","React","forwardRef","props","ref","state","useField_unstable","useFieldStyles_unstable","renderField_unstable","displayName"],"mappings":";;;;+BAIaA;;aAAAA;;;6DAJU;6BACc;0BACH;gCACM;AACjC,MAAMA,QAAQ,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACjE,MAAMC,QAAQC,IAAAA,2BAAiB,EAACH,OAAOC;IACvCG,IAAAA,uCAAuB,EAACF;IACxB,OAAOG,IAAAA,iCAAoB,EAACH;AAC9B;AACAL,MAAMS,WAAW,GAAG,SACpB,iCAAiC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/Field/Field.types.js"],"sourcesContent":["import * as React from
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/Field/Field.types.js"],"sourcesContent":["import * as React from 'react';\n//# sourceMappingURL=Field.types.js.map"],"names":[],"mappings":";;;;;6DAAuB;CACvB,uCAAuC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/Field/index.js"],"sourcesContent":["export * from
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/Field/index.js"],"sourcesContent":["export * from './Field.types';\nexport * from './Field';\nexport * from './renderField';\nexport * from './useField';\nexport * from './useFieldStyles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/Field/renderField.js"],"sourcesContent":["import * as React from
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/Field/renderField.js"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = state => {\n const {\n slots,\n slotProps\n } = getSlots(state);\n return /*#__PURE__*/React.createElement(slots.root, slotProps.root, slots.label && /*#__PURE__*/React.createElement(slots.label, slotProps.label), slotProps.root.children, slots.validationMessage && /*#__PURE__*/React.createElement(slots.validationMessage, slotProps.validationMessage, slots.validationMessageIcon && /*#__PURE__*/React.createElement(slots.validationMessageIcon, slotProps.validationMessageIcon), slotProps.validationMessage.children), slots.hint && /*#__PURE__*/React.createElement(slots.hint, slotProps.hint));\n};\n//# sourceMappingURL=renderField.js.map"],"names":["renderField_unstable","state","slots","slotProps","getSlots","React","createElement","root","label","children","validationMessage","validationMessageIcon","hint"],"mappings":";;;;+BAKaA;;aAAAA;;;6DALU;gCACE;AAIlB,MAAMA,uBAAuBC,CAAAA,QAAS;IAC3C,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,wBAAQ,EAACH;IACb,OAAO,WAAW,GAAEI,OAAMC,aAAa,CAACJ,MAAMK,IAAI,EAAEJ,UAAUI,IAAI,EAAEL,MAAMM,KAAK,IAAI,WAAW,GAAEH,OAAMC,aAAa,CAACJ,MAAMM,KAAK,EAAEL,UAAUK,KAAK,GAAGL,UAAUI,IAAI,CAACE,QAAQ,EAAEP,MAAMQ,iBAAiB,IAAI,WAAW,GAAEL,OAAMC,aAAa,CAACJ,MAAMQ,iBAAiB,EAAEP,UAAUO,iBAAiB,EAAER,MAAMS,qBAAqB,IAAI,WAAW,GAAEN,OAAMC,aAAa,CAACJ,MAAMS,qBAAqB,EAAER,UAAUQ,qBAAqB,GAAGR,UAAUO,iBAAiB,CAACD,QAAQ,GAAGP,MAAMU,IAAI,IAAI,WAAW,GAAEP,OAAMC,aAAa,CAACJ,MAAMU,IAAI,EAAET,UAAUS,IAAI;AAC/gB,GACA,uCAAuC"}
|
|
@@ -20,30 +20,30 @@ const validationMessageIcons = {
|
|
|
20
20
|
none: undefined
|
|
21
21
|
};
|
|
22
22
|
const useField_unstable = (props, ref)=>{
|
|
23
|
-
const { children , orientation =
|
|
24
|
-
const baseId = (0, _reactUtilities.useId)(
|
|
25
|
-
const root = (0, _reactUtilities.getNativeElementProps)(
|
|
23
|
+
const { children , orientation ='vertical' , required , validationState =props.validationMessage ? 'error' : 'none' , size } = props;
|
|
24
|
+
const baseId = (0, _reactUtilities.useId)('field-');
|
|
25
|
+
const root = (0, _reactUtilities.getNativeElementProps)('div', {
|
|
26
26
|
...props,
|
|
27
27
|
ref
|
|
28
28
|
}, /*excludedPropNames:*/ [
|
|
29
|
-
|
|
29
|
+
'children'
|
|
30
30
|
]);
|
|
31
31
|
const label = (0, _reactUtilities.resolveShorthand)(props.label, {
|
|
32
32
|
defaultProps: {
|
|
33
|
-
id: baseId +
|
|
33
|
+
id: baseId + '__label',
|
|
34
34
|
required,
|
|
35
35
|
size
|
|
36
36
|
}
|
|
37
37
|
});
|
|
38
38
|
const validationMessage = (0, _reactUtilities.resolveShorthand)(props.validationMessage, {
|
|
39
39
|
defaultProps: {
|
|
40
|
-
id: baseId +
|
|
41
|
-
role: validationState ===
|
|
40
|
+
id: baseId + '__validationMessage',
|
|
41
|
+
role: validationState === 'error' ? 'alert' : undefined
|
|
42
42
|
}
|
|
43
43
|
});
|
|
44
44
|
const hint = (0, _reactUtilities.resolveShorthand)(props.hint, {
|
|
45
45
|
defaultProps: {
|
|
46
|
-
id: baseId +
|
|
46
|
+
id: baseId + '__hint'
|
|
47
47
|
}
|
|
48
48
|
});
|
|
49
49
|
const defaultIcon = validationMessageIcons[validationState];
|
|
@@ -57,9 +57,11 @@ const useField_unstable = (props, ref)=>{
|
|
|
57
57
|
...children.props
|
|
58
58
|
} : {};
|
|
59
59
|
if (label) {
|
|
60
|
-
|
|
60
|
+
var _;
|
|
61
|
+
(_ = (_controlProps = controlProps)[_arialabelledby = 'aria-labelledby']) !== null && _ !== void 0 ? _ : _controlProps[_arialabelledby] = label.id;
|
|
61
62
|
if (!label.htmlFor) {
|
|
62
|
-
|
|
63
|
+
var _id;
|
|
64
|
+
(_id = (_controlProps1 = controlProps).id) !== null && _id !== void 0 ? _id : _controlProps1.id = baseId + '__control';
|
|
63
65
|
label.htmlFor = controlProps.id;
|
|
64
66
|
}
|
|
65
67
|
}
|
|
@@ -67,32 +69,34 @@ const useField_unstable = (props, ref)=>{
|
|
|
67
69
|
// The control is described by the validation message, or hint, or both
|
|
68
70
|
// We also preserve and append any aria-describedby supplied by the user
|
|
69
71
|
// For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933
|
|
70
|
-
controlProps[
|
|
71
|
-
validationMessage
|
|
72
|
-
hint
|
|
73
|
-
controlProps[
|
|
74
|
-
].filter(Boolean).join(
|
|
72
|
+
controlProps['aria-describedby'] = [
|
|
73
|
+
validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.id,
|
|
74
|
+
hint === null || hint === void 0 ? void 0 : hint.id,
|
|
75
|
+
controlProps['aria-describedby']
|
|
76
|
+
].filter(Boolean).join(' ');
|
|
75
77
|
}
|
|
76
|
-
if (validationState ===
|
|
77
|
-
|
|
78
|
+
if (validationState === 'error') {
|
|
79
|
+
var _1;
|
|
80
|
+
(_1 = (_controlProps2 = controlProps)[_ariainvalid = 'aria-invalid']) !== null && _1 !== void 0 ? _1 : _controlProps2[_ariainvalid] = true;
|
|
78
81
|
}
|
|
79
82
|
if (required) {
|
|
80
|
-
|
|
83
|
+
var _2;
|
|
84
|
+
(_2 = (_controlProps3 = controlProps)[_ariarequired = 'aria-required']) !== null && _2 !== void 0 ? _2 : _controlProps3[_ariarequired] = true;
|
|
81
85
|
}
|
|
82
86
|
if (/*#__PURE__*/ _react.isValidElement(children)) {
|
|
83
87
|
root.children = /*#__PURE__*/ _react.cloneElement(children, controlProps);
|
|
84
|
-
} else if (typeof children ===
|
|
88
|
+
} else if (typeof children === 'function') {
|
|
85
89
|
root.children = children(controlProps);
|
|
86
90
|
}
|
|
87
91
|
return {
|
|
88
92
|
orientation,
|
|
89
93
|
validationState,
|
|
90
94
|
components: {
|
|
91
|
-
root:
|
|
95
|
+
root: 'div',
|
|
92
96
|
label: _reactLabel.Label,
|
|
93
|
-
validationMessage:
|
|
94
|
-
validationMessageIcon:
|
|
95
|
-
hint:
|
|
97
|
+
validationMessage: 'div',
|
|
98
|
+
validationMessageIcon: 'span',
|
|
99
|
+
hint: 'div'
|
|
96
100
|
},
|
|
97
101
|
root,
|
|
98
102
|
label,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/Field/useField.js"],"sourcesContent":["var _controlProps, _arialabelledby,\n // Assign the child a generated ID if doesn't already have an ID\n _controlProps1, _controlProps2, _ariainvalid, _controlProps3, _ariarequired;\nimport * as React from
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/Field/useField.js"],"sourcesContent":["var _controlProps, _arialabelledby,\n // Assign the child a generated ID if doesn't already have an ID\n _controlProps1, _controlProps2, _ariainvalid, _controlProps3, _ariarequired;\nimport * 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';\nconst validationMessageIcons = {\n error: /*#__PURE__*/React.createElement(ErrorCircle12Filled, null),\n warning: /*#__PURE__*/React.createElement(Warning12Filled, null),\n success: /*#__PURE__*/React.createElement(CheckmarkCircle12Filled, null),\n none: undefined\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 root\n */\nexport const useField_unstable = (props, ref) => {\n const {\n children,\n orientation = 'vertical',\n required,\n validationState = props.validationMessage ? 'error' : 'none',\n size\n } = props;\n const baseId = useId('field-');\n const root = getNativeElementProps('div', {\n ...props,\n ref\n }, /*excludedPropNames:*/['children']);\n const label = resolveShorthand(props.label, {\n defaultProps: {\n id: baseId + '__label',\n required,\n size\n }\n });\n const validationMessage = resolveShorthand(props.validationMessage, {\n defaultProps: {\n id: baseId + '__validationMessage',\n role: validationState === 'error' ? 'alert' : undefined\n }\n });\n const hint = resolveShorthand(props.hint, {\n defaultProps: {\n id: baseId + '__hint'\n }\n });\n const defaultIcon = validationMessageIcons[validationState];\n const validationMessageIcon = resolveShorthand(props.validationMessageIcon, {\n required: !!defaultIcon,\n defaultProps: {\n children: defaultIcon\n }\n });\n const controlProps = /*#__PURE__*/ /*#__PURE__*/React.isValidElement(children) ? {\n ...children.props\n } : {};\n if (label) {\n var _;\n (_ = (_controlProps = controlProps)[_arialabelledby = 'aria-labelledby']) !== null && _ !== void 0 ? _ : _controlProps[_arialabelledby] = label.id;\n if (!label.htmlFor) {\n var _id;\n (_id = (_controlProps1 = controlProps).id) !== null && _id !== void 0 ? _id : _controlProps1.id = baseId + '__control';\n label.htmlFor = controlProps.id;\n }\n }\n if (validationMessage || hint) {\n // The control is described by the validation message, or hint, or both\n // We also preserve and append any aria-describedby supplied by the user\n // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933\n controlProps['aria-describedby'] = [validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.id, hint === null || hint === void 0 ? void 0 : hint.id, controlProps['aria-describedby']].filter(Boolean).join(' ');\n }\n if (validationState === 'error') {\n var _1;\n (_1 = (_controlProps2 = controlProps)[_ariainvalid = 'aria-invalid']) !== null && _1 !== void 0 ? _1 : _controlProps2[_ariainvalid] = true;\n }\n if (required) {\n var _2;\n (_2 = (_controlProps3 = controlProps)[_ariarequired = 'aria-required']) !== null && _2 !== void 0 ? _2 : _controlProps3[_ariarequired] = true;\n }\n if ( /*#__PURE__*/React.isValidElement(children)) {\n root.children = /*#__PURE__*/React.cloneElement(children, controlProps);\n } else if (typeof children === 'function') {\n root.children = children(controlProps);\n }\n return {\n orientation,\n validationState,\n components: {\n root: 'div',\n label: Label,\n validationMessage: 'div',\n validationMessageIcon: 'span',\n hint: 'div'\n },\n root,\n label,\n validationMessageIcon,\n validationMessage,\n hint\n };\n};\n//# sourceMappingURL=useField.js.map"],"names":["useField_unstable","_controlProps","_arialabelledby","_controlProps1","_controlProps2","_ariainvalid","_controlProps3","_ariarequired","validationMessageIcons","error","React","createElement","ErrorCircle12Filled","warning","Warning12Filled","success","CheckmarkCircle12Filled","none","undefined","props","ref","children","orientation","required","validationState","validationMessage","size","baseId","useId","root","getNativeElementProps","label","resolveShorthand","defaultProps","id","role","hint","defaultIcon","validationMessageIcon","controlProps","isValidElement","_","htmlFor","_id","filter","Boolean","join","_1","_2","cloneElement","components","Label"],"mappings":"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"}
|
|
@@ -21,7 +21,7 @@ const fieldClassNames = {
|
|
|
21
21
|
hint: `fui-Field__hint`
|
|
22
22
|
};
|
|
23
23
|
// Size of the icon in the validation message
|
|
24
|
-
const iconSize =
|
|
24
|
+
const iconSize = '12px';
|
|
25
25
|
/**
|
|
26
26
|
* Styles for the root slot
|
|
27
27
|
*/ const useRootStyles = /*#__PURE__*/ (0, _react["__styles"])({
|
|
@@ -129,22 +129,22 @@ const useValidationMessageIconStyles = /*#__PURE__*/ (0, _react["__styles"])({
|
|
|
129
129
|
});
|
|
130
130
|
const useFieldStyles_unstable = (state)=>{
|
|
131
131
|
const { validationState } = state;
|
|
132
|
-
const horizontal = state.orientation ===
|
|
132
|
+
const horizontal = state.orientation === 'horizontal';
|
|
133
133
|
const rootStyles = useRootStyles();
|
|
134
134
|
state.root.className = (0, _react.mergeClasses)(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);
|
|
135
135
|
const labelStyles = useLabelStyles();
|
|
136
136
|
if (state.label) {
|
|
137
|
-
state.label.className = (0, _react.mergeClasses)(fieldClassNames.label, labelStyles.base, horizontal && labelStyles.horizontal, !horizontal && labelStyles.vertical, state.label.size ===
|
|
137
|
+
state.label.className = (0, _react.mergeClasses)(fieldClassNames.label, labelStyles.base, horizontal && labelStyles.horizontal, !horizontal && labelStyles.vertical, state.label.size === 'large' && labelStyles.large, !horizontal && state.label.size === 'large' && labelStyles.verticalLarge, state.label.className);
|
|
138
138
|
}
|
|
139
139
|
const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
|
|
140
140
|
const validationMessageIconStyles = useValidationMessageIconStyles();
|
|
141
141
|
if (state.validationMessageIcon) {
|
|
142
|
-
state.validationMessageIcon.className = (0, _react.mergeClasses)(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !==
|
|
142
|
+
state.validationMessageIcon.className = (0, _react.mergeClasses)(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== 'none' && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
|
|
143
143
|
}
|
|
144
144
|
const secondaryTextBaseClassName = useSecondaryTextBaseClassName();
|
|
145
145
|
const secondaryTextStyles = useSecondaryTextStyles();
|
|
146
146
|
if (state.validationMessage) {
|
|
147
|
-
state.validationMessage.className = (0, _react.mergeClasses)(fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState ===
|
|
147
|
+
state.validationMessage.className = (0, _react.mergeClasses)(fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);
|
|
148
148
|
}
|
|
149
149
|
if (state.hint) {
|
|
150
150
|
state.hint.className = (0, _react.mergeClasses)(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/Field/useFieldStyles.js"],"sourcesContent":["import { tokens, typographyStyles } from
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/Field/useFieldStyles.js"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { __resetStyles, __styles, mergeClasses } from '@griffel/react';\nexport const fieldClassNames = {\n root: `fui-Field`,\n label: `fui-Field__label`,\n validationMessage: `fui-Field__validationMessage`,\n validationMessageIcon: `fui-Field__validationMessageIcon`,\n hint: `fui-Field__hint`\n};\n// Size of the icon in the validation message\nconst iconSize = '12px';\n/**\n * Styles for the root slot\n */\nconst useRootStyles = /*#__PURE__*/__styles({\n base: {\n mc9l5x: \"f13qh94s\"\n },\n horizontal: {\n Budl1dq: \"f2wwaib\",\n wkccdc: \"f1645dqt\"\n },\n horizontalNoLabel: {\n uwmqm3: [\"f15jqgz8\", \"fggqkej\"],\n Budl1dq: \"f1c2z91y\"\n }\n}, {\n d: [\".f13qh94s{display:grid;}\", \".f2wwaib{grid-template-columns:33% 1fr;}\", \".f1645dqt{grid-template-rows:auto auto auto 1fr;}\", \".f15jqgz8{padding-left:33%;}\", \".fggqkej{padding-right:33%;}\", \".f1c2z91y{grid-template-columns:1fr;}\"]\n});\nconst useLabelStyles = /*#__PURE__*/__styles({\n base: {\n z8tnut: \"fclwglc\",\n Byoj8tv: \"fywfov9\"\n },\n large: {\n z8tnut: \"f1sl3k7w\",\n Byoj8tv: \"f1brlhvm\"\n },\n vertical: {\n jrapky: \"fyacil5\"\n },\n verticalLarge: {\n jrapky: \"f8l5zjj\"\n },\n horizontal: {\n t21cq0: [\"fkujibs\", \"f199hnxi\"],\n Ijaq50: \"f16hsg94\",\n nk6f5a: \"f1nzqi2z\"\n }\n}, {\n d: [\".fclwglc{padding-top:var(--spacingVerticalXXS);}\", \".fywfov9{padding-bottom:var(--spacingVerticalXXS);}\", \".f1sl3k7w{padding-top:1px;}\", \".f1brlhvm{padding-bottom:1px;}\", \".fyacil5{margin-bottom:var(--spacingVerticalXXS);}\", \".f8l5zjj{margin-bottom:var(--spacingVerticalXS);}\", \".fkujibs{margin-right:var(--spacingHorizontalM);}\", \".f199hnxi{margin-left:var(--spacingHorizontalM);}\", \".f16hsg94{grid-row-start:1;}\", \".f1nzqi2z{grid-row-end:-1;}\"]\n});\nconst useSecondaryTextBaseClassName = /*#__PURE__*/__resetStyles(\"r5c4z9l\", null, [\".r5c4z9l{margin-top:var(--spacingVerticalXXS);color:var(--colorNeutralForeground3);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}\"]);\nconst useSecondaryTextStyles = /*#__PURE__*/__styles({\n error: {\n sj55zd: \"f1hcrxcs\"\n },\n withIcon: {\n uwmqm3: [\"frawy03\", \"fg4c52\"]\n }\n}, {\n d: [\".f1hcrxcs{color:var(--colorPaletteRedForeground1);}\", \".frawy03{padding-left:calc(12px + var(--spacingHorizontalXS));}\", \".fg4c52{padding-right:calc(12px + var(--spacingHorizontalXS));}\"]\n});\nconst useValidationMessageIconBaseClassName = /*#__PURE__*/__resetStyles(\"ra7h1uk\", \"r1rh6bd7\", [\".ra7h1uk{display:inline-block;font-size:12px;margin-left:calc(-12px - var(--spacingHorizontalXS));margin-right:var(--spacingHorizontalXS);line-height:0;vertical-align:-1px;}\", \".r1rh6bd7{display:inline-block;font-size:12px;margin-right:calc(-12px - var(--spacingHorizontalXS));margin-left:var(--spacingHorizontalXS);line-height:0;vertical-align:-1px;}\"]);\nconst useValidationMessageIconStyles = /*#__PURE__*/__styles({\n error: {\n sj55zd: \"f1hcrxcs\"\n },\n warning: {\n sj55zd: \"f1k5f75o\"\n },\n success: {\n sj55zd: \"ffmvakt\"\n }\n}, {\n d: [\".f1hcrxcs{color:var(--colorPaletteRedForeground1);}\", \".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}\", \".ffmvakt{color:var(--colorPaletteGreenForeground1);}\"]\n});\n/**\n * Apply styling to the Field slots based on the state\n */\nexport const useFieldStyles_unstable = state => {\n const {\n validationState\n } = state;\n const horizontal = state.orientation === 'horizontal';\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(fieldClassNames.label, labelStyles.base, horizontal && labelStyles.horizontal, !horizontal && labelStyles.vertical, state.label.size === 'large' && labelStyles.large, !horizontal && state.label.size === 'large' && labelStyles.verticalLarge, state.label.className);\n }\n const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();\n const validationMessageIconStyles = useValidationMessageIconStyles();\n if (state.validationMessageIcon) {\n state.validationMessageIcon.className = mergeClasses(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== 'none' && validationMessageIconStyles[validationState], state.validationMessageIcon.className);\n }\n const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n const secondaryTextStyles = useSecondaryTextStyles();\n if (state.validationMessage) {\n state.validationMessage.className = mergeClasses(fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);\n }\n if (state.hint) {\n state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);\n }\n};\n//# sourceMappingURL=useFieldStyles.js.map"],"names":["fieldClassNames","useFieldStyles_unstable","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","__styles","base","mc9l5x","horizontal","Budl1dq","wkccdc","horizontalNoLabel","uwmqm3","d","useLabelStyles","z8tnut","Byoj8tv","large","vertical","jrapky","verticalLarge","t21cq0","Ijaq50","nk6f5a","useSecondaryTextBaseClassName","__resetStyles","useSecondaryTextStyles","error","sj55zd","withIcon","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","warning","success","state","validationState","orientation","rootStyles","className","mergeClasses","labelStyles","size","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../lib/index.js"],"sourcesContent":["export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from
|
|
1
|
+
{"version":3,"sources":["../lib/index.js"],"sourcesContent":["export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field';\n// eslint-disable-next-line deprecation/deprecation\nexport { getDeprecatedFieldClassNames, makeDeprecatedField } from './util/makeDeprecatedField';\n//# sourceMappingURL=index.js.map"],"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","getDeprecatedFieldClassNames","makeDeprecatedField"],"mappings":";;;;;;;;;;;IAASA,KAAK,MAALA,YAAK;IAAEC,eAAe,MAAfA,sBAAe;IAAEC,oBAAoB,MAApBA,2BAAoB;IAAEC,uBAAuB,MAAvBA,8BAAuB;IAAEC,iBAAiB,MAAjBA,wBAAiB;IAExFC,4BAA4B,MAA5BA,iDAA4B;IAAEC,mBAAmB,MAAnBA,wCAAmB;;uBAF+C;qCAEvC;CAClE,iCAAiC"}
|
|
@@ -18,7 +18,7 @@ const _field = require("../Field");
|
|
|
18
18
|
/**
|
|
19
19
|
* Partition the props used by the Field itself, from the props that are passed to the underlying field component.
|
|
20
20
|
*/ function getPartitionedFieldProps(props) {
|
|
21
|
-
const { className , control , hint , label , orientation , required , root , size , style , validationMessage , validationMessageIcon , validationState =
|
|
21
|
+
const { className , control , hint , label , orientation , required , root , size , style , validationMessage , validationMessageIcon , validationState ='none' , ...restOfProps } = props;
|
|
22
22
|
return [
|
|
23
23
|
{
|
|
24
24
|
className,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../lib/util/makeDeprecatedField.js"],"sourcesContent":["/* eslint-disable deprecation/deprecation */import * as React from
|
|
1
|
+
{"version":3,"sources":["../../lib/util/makeDeprecatedField.js"],"sourcesContent":["/* eslint-disable deprecation/deprecation */import * as React from 'react';\nimport { Field, fieldClassNames } from '../Field';\n/**\n * Partition the props used by the Field itself, from the props that are passed to the underlying field component.\n */\nfunction getPartitionedFieldProps(props) {\n const {\n className,\n control,\n hint,\n label,\n orientation,\n required,\n root,\n size,\n style,\n validationMessage,\n validationMessageIcon,\n validationState = 'none',\n ...restOfProps\n } = props;\n return [{\n className,\n hint,\n label,\n orientation,\n required,\n size,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n ...root\n }, {\n required,\n size,\n ...restOfProps,\n ...control\n }];\n}\n/**\n * @deprecated Only for use to make deprecated [Control]Field shim components.\n * @internal\n */\nexport function makeDeprecatedField(Control, options = {}) {\n const {\n mapProps = props => props,\n displayName = `${Control.displayName}Field`\n } = options;\n const DeprecatedField = /*#__PURE__*/React.forwardRef((props, ref) => {\n const [fieldProps, controlProps] = getPartitionedFieldProps(mapProps(props));\n return /*#__PURE__*/React.createElement(Field, fieldProps, /*#__PURE__*/React.createElement(Control, {\n ...controlProps,\n ref: ref\n }));\n });\n DeprecatedField.displayName = displayName;\n return DeprecatedField;\n}\n/**\n * @deprecated Only for use to make deprecated [Control]Field shim components.\n * @internal\n */\nexport const getDeprecatedFieldClassNames = controlRootClassName => ({\n ...fieldClassNames,\n control: controlRootClassName\n});\n//# sourceMappingURL=makeDeprecatedField.js.map"],"names":["makeDeprecatedField","getDeprecatedFieldClassNames","getPartitionedFieldProps","props","className","control","hint","label","orientation","required","root","size","style","validationMessage","validationMessageIcon","validationState","restOfProps","Control","options","mapProps","displayName","DeprecatedField","React","forwardRef","ref","fieldProps","controlProps","createElement","Field","controlRootClassName","fieldClassNames"],"mappings":"AAAA,0CAA0C;;;;;;;;;;;IA4C1BA,mBAAmB,MAAnBA;IAmBHC,4BAA4B,MAA5BA;;;6DA/DsD;uBAC5B;AACvC;;CAEC,GACD,SAASC,yBAAyBC,KAAK,EAAE;IACvC,MAAM,EACJC,UAAS,EACTC,QAAO,EACPC,KAAI,EACJC,MAAK,EACLC,YAAW,EACXC,SAAQ,EACRC,KAAI,EACJC,KAAI,EACJC,MAAK,EACLC,kBAAiB,EACjBC,sBAAqB,EACrBC,iBAAkB,OAAM,EACxB,GAAGC,aACJ,GAAGb;IACJ,OAAO;QAAC;YACNC;YACAE;YACAC;YACAC;YACAC;YACAE;YACAC;YACAC;YACAC;YACAC;YACA,GAAGL,IAAI;QACT;QAAG;YACDD;YACAE;YACA,GAAGK,WAAW;YACd,GAAGX,OAAO;QACZ;KAAE;AACJ;AAKO,SAASL,oBAAoBiB,OAAO,EAAEC,UAAU,CAAC,CAAC,EAAE;IACzD,MAAM,EACJC,UAAWhB,CAAAA,QAASA,MAAK,EACzBiB,aAAc,CAAC,EAAEH,QAAQG,WAAW,CAAC,KAAK,CAAC,CAAA,EAC5C,GAAGF;IACJ,MAAMG,kBAAkB,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACpB,OAAOqB,MAAQ;QACpE,MAAM,CAACC,YAAYC,aAAa,GAAGxB,yBAAyBiB,SAAShB;QACrE,OAAO,WAAW,GAAEmB,OAAMK,aAAa,CAACC,YAAK,EAAEH,YAAY,WAAW,GAAEH,OAAMK,aAAa,CAACV,SAAS;YACnG,GAAGS,YAAY;YACfF,KAAKA;QACP;IACF;IACAH,gBAAgBD,WAAW,GAAGA;IAC9B,OAAOC;AACT;AAKO,MAAMpB,+BAA+B4B,CAAAA,uBAAyB,CAAA;QACnE,GAAGC,sBAAe;QAClBzB,SAASwB;IACX,CAAA,GACA,+CAA+C"}
|
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-20230322-0439.1",
|
|
4
4
|
"description": "Fluent UI Field components",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -27,16 +27,16 @@
|
|
|
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-20230322-0439.1",
|
|
31
31
|
"@fluentui/scripts-api-extractor": "*",
|
|
32
32
|
"@fluentui/scripts-tasks": "*"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@fluentui/react-context-selector": "0.0.0-nightly-
|
|
36
|
-
"@fluentui/react-icons": "^2.0.
|
|
37
|
-
"@fluentui/react-label": "0.0.0-nightly-
|
|
38
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
39
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
35
|
+
"@fluentui/react-context-selector": "0.0.0-nightly-20230322-0439.1",
|
|
36
|
+
"@fluentui/react-icons": "^2.0.196",
|
|
37
|
+
"@fluentui/react-label": "0.0.0-nightly-20230322-0439.1",
|
|
38
|
+
"@fluentui/react-theme": "0.0.0-nightly-20230322-0439.1",
|
|
39
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20230322-0439.1",
|
|
40
40
|
"@griffel/react": "^1.5.2",
|
|
41
41
|
"@swc/helpers": "^0.4.14"
|
|
42
42
|
},
|
|
@@ -50,6 +50,7 @@
|
|
|
50
50
|
"exports": {
|
|
51
51
|
".": {
|
|
52
52
|
"types": "./dist/index.d.ts",
|
|
53
|
+
"node": "./lib-commonjs/index.js",
|
|
53
54
|
"import": "./lib/index.js",
|
|
54
55
|
"require": "./lib-commonjs/index.js"
|
|
55
56
|
},
|