@fluentui/react-field 0.0.0-nightly-20240318-0408.1 → 0.0.0-nightly-20240320-0406.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.md +24 -11
- package/lib/components/Field/useFieldStyles.styles.js +18 -11
- package/lib/components/Field/useFieldStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Field/useFieldStyles.styles.js +24 -12
- package/lib-commonjs/components/Field/useFieldStyles.styles.js.map +1 -1
- package/lib-commonjs/contexts/useFieldControlProps.js +3 -3
- package/lib-commonjs/contexts/useFieldControlProps.js.map +1 -1
- package/lib-commonjs/index.js +11 -11
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +8 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,24 +1,37 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-field
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 20 Mar 2024 04:22:52 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-20240320-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v0.0.0-nightly-20240320-0406.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.1.
|
|
9
|
+
Wed, 20 Mar 2024 04:22:52 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.1.58..@fluentui/react-field_v0.0.0-nightly-20240320-0406.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-jsx-runtime to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-label to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
20
|
-
- Bump @fluentui/react-conformance to v0.0.0-nightly-
|
|
21
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-context-selector to v0.0.0-nightly-20240320-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/3333038572dac12f03455ab8bb788ec14f53a32f) by beachball)
|
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240320-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/3333038572dac12f03455ab8bb788ec14f53a32f) by beachball)
|
|
17
|
+
- Bump @fluentui/react-label to v0.0.0-nightly-20240320-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/3333038572dac12f03455ab8bb788ec14f53a32f) by beachball)
|
|
18
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20240320-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/3333038572dac12f03455ab8bb788ec14f53a32f) by beachball)
|
|
19
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20240320-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/3333038572dac12f03455ab8bb788ec14f53a32f) by beachball)
|
|
20
|
+
- Bump @fluentui/react-conformance to v0.0.0-nightly-20240320-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/3333038572dac12f03455ab8bb788ec14f53a32f) by beachball)
|
|
21
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240320-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/3333038572dac12f03455ab8bb788ec14f53a32f) by beachball)
|
|
22
|
+
|
|
23
|
+
## [9.1.58](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.1.58)
|
|
24
|
+
|
|
25
|
+
Mon, 18 Mar 2024 19:50:46 GMT
|
|
26
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.1.57..@fluentui/react-field_v9.1.58)
|
|
27
|
+
|
|
28
|
+
### Patches
|
|
29
|
+
|
|
30
|
+
- Bump @fluentui/react-context-selector to v9.1.56 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
|
|
31
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.34 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
|
|
32
|
+
- Bump @fluentui/react-label to v9.1.66 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
|
|
33
|
+
- Bump @fluentui/react-theme to v9.1.19 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
|
|
34
|
+
- Bump @fluentui/react-utilities to v9.18.5 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
|
|
22
35
|
|
|
23
36
|
## [9.1.57](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.1.57)
|
|
24
37
|
|
|
@@ -28,27 +28,33 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
28
28
|
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;}"]
|
|
29
29
|
});
|
|
30
30
|
const useLabelStyles = /*#__PURE__*/__styles({
|
|
31
|
-
base: {
|
|
32
|
-
z8tnut: "fclwglc",
|
|
33
|
-
Byoj8tv: "fywfov9"
|
|
34
|
-
},
|
|
35
|
-
large: {
|
|
36
|
-
z8tnut: "f1sl3k7w",
|
|
37
|
-
Byoj8tv: "f1brlhvm"
|
|
38
|
-
},
|
|
39
31
|
vertical: {
|
|
32
|
+
z8tnut: "fclwglc",
|
|
33
|
+
Byoj8tv: "fywfov9",
|
|
40
34
|
jrapky: "fyacil5"
|
|
41
35
|
},
|
|
42
36
|
verticalLarge: {
|
|
37
|
+
z8tnut: "f1sl3k7w",
|
|
38
|
+
Byoj8tv: "f1brlhvm",
|
|
43
39
|
jrapky: "f8l5zjj"
|
|
44
40
|
},
|
|
45
41
|
horizontal: {
|
|
42
|
+
z8tnut: "fp2oml8",
|
|
43
|
+
Byoj8tv: "f1tdddsa",
|
|
46
44
|
t21cq0: ["fkujibs", "f199hnxi"],
|
|
47
45
|
Ijaq50: "f16hsg94",
|
|
48
46
|
nk6f5a: "f1nzqi2z"
|
|
47
|
+
},
|
|
48
|
+
horizontalSmall: {
|
|
49
|
+
z8tnut: "f1ywm7hm",
|
|
50
|
+
Byoj8tv: "f14wxoun"
|
|
51
|
+
},
|
|
52
|
+
horizontalLarge: {
|
|
53
|
+
z8tnut: "f1hqyr95",
|
|
54
|
+
Byoj8tv: "fm4hlj0"
|
|
49
55
|
}
|
|
50
56
|
}, {
|
|
51
|
-
d: [".fclwglc{padding-top:var(--spacingVerticalXXS);}", ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}", ".f1sl3k7w{padding-top:1px;}", ".f1brlhvm{padding-bottom:1px;}", ".
|
|
57
|
+
d: [".fclwglc{padding-top:var(--spacingVerticalXXS);}", ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}", ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}", ".f1sl3k7w{padding-top:1px;}", ".f1brlhvm{padding-bottom:1px;}", ".f8l5zjj{margin-bottom:var(--spacingVerticalXS);}", ".fp2oml8{padding-top:var(--spacingVerticalSNudge);}", ".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".f16hsg94{grid-row-start:1;}", ".f1nzqi2z{grid-row-end:-1;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}", ".f1hqyr95{padding-top:9px;}", ".fm4hlj0{padding-bottom:9px;}"]
|
|
52
58
|
});
|
|
53
59
|
const 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);}"]);
|
|
54
60
|
const useSecondaryTextStyles = /*#__PURE__*/__styles({
|
|
@@ -80,14 +86,15 @@ const useValidationMessageIconStyles = /*#__PURE__*/__styles({
|
|
|
80
86
|
*/
|
|
81
87
|
export const useFieldStyles_unstable = state => {
|
|
82
88
|
const {
|
|
83
|
-
validationState
|
|
89
|
+
validationState,
|
|
90
|
+
size
|
|
84
91
|
} = state;
|
|
85
92
|
const horizontal = state.orientation === 'horizontal';
|
|
86
93
|
const rootStyles = useRootStyles();
|
|
87
94
|
state.root.className = mergeClasses(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);
|
|
88
95
|
const labelStyles = useLabelStyles();
|
|
89
96
|
if (state.label) {
|
|
90
|
-
state.label.className = mergeClasses(fieldClassNames.label,
|
|
97
|
+
state.label.className = mergeClasses(fieldClassNames.label, horizontal && labelStyles.horizontal, horizontal && size === 'small' && labelStyles.horizontalSmall, horizontal && size === 'large' && labelStyles.horizontalLarge, !horizontal && labelStyles.vertical, !horizontal && size === 'large' && labelStyles.verticalLarge, state.label.className);
|
|
91
98
|
}
|
|
92
99
|
const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
|
|
93
100
|
const validationMessageIconStyles = useValidationMessageIconStyles();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["tokens","typographyStyles","__resetStyles","__styles","mergeClasses","fieldClassNames","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","base","mc9l5x","horizontal","Budl1dq","wkccdc","horizontalNoLabel","uwmqm3","d","useLabelStyles","
|
|
1
|
+
{"version":3,"names":["tokens","typographyStyles","__resetStyles","__styles","mergeClasses","fieldClassNames","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","base","mc9l5x","horizontal","Budl1dq","wkccdc","horizontalNoLabel","uwmqm3","d","useLabelStyles","vertical","z8tnut","Byoj8tv","jrapky","verticalLarge","t21cq0","Ijaq50","nk6f5a","horizontalSmall","horizontalLarge","useSecondaryTextBaseClassName","useSecondaryTextStyles","error","sj55zd","withIcon","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","warning","success","useFieldStyles_unstable","state","validationState","size","orientation","rootStyles","className","labelStyles","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"sources":["useFieldStyles.styles.js"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, 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 */ const useRootStyles = makeStyles({\n base: {\n display: 'grid'\n },\n // In horizontal layout, the field is a grid with the label taking up the entire first column.\n // The last row is slack space in case the label is taller than the rest of the content.\n horizontal: {\n gridTemplateColumns: '33% 1fr',\n gridTemplateRows: 'auto auto auto 1fr'\n },\n // In horizontal layout without a label, replace the label's column with padding.\n // This lets grid auto-flow properly place the other children, and keeps fields with and without labels aligned.\n horizontalNoLabel: {\n paddingLeft: '33%',\n gridTemplateColumns: '1fr'\n }\n});\nconst useLabelStyles = makeStyles({\n vertical: {\n paddingTop: tokens.spacingVerticalXXS,\n paddingBottom: tokens.spacingVerticalXXS,\n marginBottom: tokens.spacingVerticalXXS\n },\n verticalLarge: {\n paddingTop: '1px',\n paddingBottom: '1px',\n marginBottom: tokens.spacingVerticalXS\n },\n horizontal: {\n paddingTop: tokens.spacingVerticalSNudge,\n paddingBottom: tokens.spacingVerticalSNudge,\n marginRight: tokens.spacingHorizontalM,\n gridRowStart: '1',\n gridRowEnd: '-1'\n },\n horizontalSmall: {\n paddingTop: tokens.spacingVerticalXS,\n paddingBottom: tokens.spacingVerticalXS\n },\n horizontalLarge: {\n // To align the label text with the Input text, it should be centered within the 40px height of the Input.\n // This is (40px - lineHeightBase400) / 2 = 9px. Hardcoded since there is no 9px padding token.\n paddingTop: '9px',\n paddingBottom: '9px'\n }\n});\nconst useSecondaryTextBaseClassName = makeResetStyles({\n marginTop: tokens.spacingVerticalXXS,\n color: tokens.colorNeutralForeground3,\n ...typographyStyles.caption1\n});\nconst useSecondaryTextStyles = makeStyles({\n error: {\n color: tokens.colorPaletteRedForeground1\n },\n withIcon: {\n // Add a gutter for the icon, to allow multiple lines of text to line up to the right of the icon.\n paddingLeft: `calc(${iconSize} + ${tokens.spacingHorizontalXS})`\n }\n});\nconst useValidationMessageIconBaseClassName = makeResetStyles({\n display: 'inline-block',\n fontSize: iconSize,\n // Negative left margin puts the icon in the gutter of the validation message div's withIcon style.\n marginLeft: `calc(-${iconSize} - ${tokens.spacingHorizontalXS})`,\n marginRight: tokens.spacingHorizontalXS,\n // Line height of 0 prevents the verticalAlign from affecting the line height of the text.\n lineHeight: '0',\n // Negative verticalAlign shifts the inline icon down to align with the text (effectively top padding).\n verticalAlign: '-1px'\n});\nconst useValidationMessageIconStyles = makeStyles({\n error: {\n color: tokens.colorPaletteRedForeground1\n },\n warning: {\n color: tokens.colorPaletteDarkOrangeForeground1\n },\n success: {\n color: tokens.colorPaletteGreenForeground1\n }\n});\n/**\n * Apply styling to the Field slots based on the state\n */ export const useFieldStyles_unstable = (state)=>{\n const { validationState, size } = 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, horizontal && labelStyles.horizontal, horizontal && size === 'small' && labelStyles.horizontalSmall, horizontal && size === 'large' && labelStyles.horizontalLarge, !horizontal && labelStyles.vertical, !horizontal && 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 return state;\n};\n"],"mappings":"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"}
|
|
@@ -54,40 +54,52 @@ const iconSize = '12px';
|
|
|
54
54
|
]
|
|
55
55
|
});
|
|
56
56
|
const useLabelStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
57
|
-
base: {
|
|
58
|
-
z8tnut: "fclwglc",
|
|
59
|
-
Byoj8tv: "fywfov9"
|
|
60
|
-
},
|
|
61
|
-
large: {
|
|
62
|
-
z8tnut: "f1sl3k7w",
|
|
63
|
-
Byoj8tv: "f1brlhvm"
|
|
64
|
-
},
|
|
65
57
|
vertical: {
|
|
58
|
+
z8tnut: "fclwglc",
|
|
59
|
+
Byoj8tv: "fywfov9",
|
|
66
60
|
jrapky: "fyacil5"
|
|
67
61
|
},
|
|
68
62
|
verticalLarge: {
|
|
63
|
+
z8tnut: "f1sl3k7w",
|
|
64
|
+
Byoj8tv: "f1brlhvm",
|
|
69
65
|
jrapky: "f8l5zjj"
|
|
70
66
|
},
|
|
71
67
|
horizontal: {
|
|
68
|
+
z8tnut: "fp2oml8",
|
|
69
|
+
Byoj8tv: "f1tdddsa",
|
|
72
70
|
t21cq0: [
|
|
73
71
|
"fkujibs",
|
|
74
72
|
"f199hnxi"
|
|
75
73
|
],
|
|
76
74
|
Ijaq50: "f16hsg94",
|
|
77
75
|
nk6f5a: "f1nzqi2z"
|
|
76
|
+
},
|
|
77
|
+
horizontalSmall: {
|
|
78
|
+
z8tnut: "f1ywm7hm",
|
|
79
|
+
Byoj8tv: "f14wxoun"
|
|
80
|
+
},
|
|
81
|
+
horizontalLarge: {
|
|
82
|
+
z8tnut: "f1hqyr95",
|
|
83
|
+
Byoj8tv: "fm4hlj0"
|
|
78
84
|
}
|
|
79
85
|
}, {
|
|
80
86
|
d: [
|
|
81
87
|
".fclwglc{padding-top:var(--spacingVerticalXXS);}",
|
|
82
88
|
".fywfov9{padding-bottom:var(--spacingVerticalXXS);}",
|
|
89
|
+
".fyacil5{margin-bottom:var(--spacingVerticalXXS);}",
|
|
83
90
|
".f1sl3k7w{padding-top:1px;}",
|
|
84
91
|
".f1brlhvm{padding-bottom:1px;}",
|
|
85
|
-
".fyacil5{margin-bottom:var(--spacingVerticalXXS);}",
|
|
86
92
|
".f8l5zjj{margin-bottom:var(--spacingVerticalXS);}",
|
|
93
|
+
".fp2oml8{padding-top:var(--spacingVerticalSNudge);}",
|
|
94
|
+
".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}",
|
|
87
95
|
".fkujibs{margin-right:var(--spacingHorizontalM);}",
|
|
88
96
|
".f199hnxi{margin-left:var(--spacingHorizontalM);}",
|
|
89
97
|
".f16hsg94{grid-row-start:1;}",
|
|
90
|
-
".f1nzqi2z{grid-row-end:-1;}"
|
|
98
|
+
".f1nzqi2z{grid-row-end:-1;}",
|
|
99
|
+
".f1ywm7hm{padding-top:var(--spacingVerticalXS);}",
|
|
100
|
+
".f14wxoun{padding-bottom:var(--spacingVerticalXS);}",
|
|
101
|
+
".f1hqyr95{padding-top:9px;}",
|
|
102
|
+
".fm4hlj0{padding-bottom:9px;}"
|
|
91
103
|
]
|
|
92
104
|
});
|
|
93
105
|
const useSecondaryTextBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r5c4z9l", null, [
|
|
@@ -132,13 +144,13 @@ const useValidationMessageIconStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
132
144
|
]
|
|
133
145
|
});
|
|
134
146
|
const useFieldStyles_unstable = (state)=>{
|
|
135
|
-
const { validationState } = state;
|
|
147
|
+
const { validationState, size } = state;
|
|
136
148
|
const horizontal = state.orientation === 'horizontal';
|
|
137
149
|
const rootStyles = useRootStyles();
|
|
138
150
|
state.root.className = (0, _react.mergeClasses)(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);
|
|
139
151
|
const labelStyles = useLabelStyles();
|
|
140
152
|
if (state.label) {
|
|
141
|
-
state.label.className = (0, _react.mergeClasses)(fieldClassNames.label,
|
|
153
|
+
state.label.className = (0, _react.mergeClasses)(fieldClassNames.label, horizontal && labelStyles.horizontal, horizontal && size === 'small' && labelStyles.horizontalSmall, horizontal && size === 'large' && labelStyles.horizontalLarge, !horizontal && labelStyles.vertical, !horizontal && size === 'large' && labelStyles.verticalLarge, state.label.className);
|
|
142
154
|
}
|
|
143
155
|
const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
|
|
144
156
|
const validationMessageIconStyles = useValidationMessageIconStyles();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useFieldStyles.styles.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
|
|
1
|
+
{"version":3,"sources":["useFieldStyles.styles.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 vertical: {\n z8tnut: \"fclwglc\",\n Byoj8tv: \"fywfov9\",\n jrapky: \"fyacil5\"\n },\n verticalLarge: {\n z8tnut: \"f1sl3k7w\",\n Byoj8tv: \"f1brlhvm\",\n jrapky: \"f8l5zjj\"\n },\n horizontal: {\n z8tnut: \"fp2oml8\",\n Byoj8tv: \"f1tdddsa\",\n t21cq0: [\"fkujibs\", \"f199hnxi\"],\n Ijaq50: \"f16hsg94\",\n nk6f5a: \"f1nzqi2z\"\n },\n horizontalSmall: {\n z8tnut: \"f1ywm7hm\",\n Byoj8tv: \"f14wxoun\"\n },\n horizontalLarge: {\n z8tnut: \"f1hqyr95\",\n Byoj8tv: \"fm4hlj0\"\n }\n}, {\n d: [\".fclwglc{padding-top:var(--spacingVerticalXXS);}\", \".fywfov9{padding-bottom:var(--spacingVerticalXXS);}\", \".fyacil5{margin-bottom:var(--spacingVerticalXXS);}\", \".f1sl3k7w{padding-top:1px;}\", \".f1brlhvm{padding-bottom:1px;}\", \".f8l5zjj{margin-bottom:var(--spacingVerticalXS);}\", \".fp2oml8{padding-top:var(--spacingVerticalSNudge);}\", \".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}\", \".fkujibs{margin-right:var(--spacingHorizontalM);}\", \".f199hnxi{margin-left:var(--spacingHorizontalM);}\", \".f16hsg94{grid-row-start:1;}\", \".f1nzqi2z{grid-row-end:-1;}\", \".f1ywm7hm{padding-top:var(--spacingVerticalXS);}\", \".f14wxoun{padding-bottom:var(--spacingVerticalXS);}\", \".f1hqyr95{padding-top:9px;}\", \".fm4hlj0{padding-bottom:9px;}\"]\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 size\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, horizontal && labelStyles.horizontal, horizontal && size === 'small' && labelStyles.horizontalSmall, horizontal && size === 'large' && labelStyles.horizontalLarge, !horizontal && labelStyles.vertical, !horizontal && 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 return state;\n};\n//# sourceMappingURL=useFieldStyles.styles.js.map"],"names":["fieldClassNames","useFieldStyles_unstable","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","__styles","base","mc9l5x","horizontal","Budl1dq","wkccdc","horizontalNoLabel","uwmqm3","d","useLabelStyles","vertical","z8tnut","Byoj8tv","jrapky","verticalLarge","t21cq0","Ijaq50","nk6f5a","horizontalSmall","horizontalLarge","useSecondaryTextBaseClassName","__resetStyles","useSecondaryTextStyles","error","sj55zd","withIcon","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","warning","success","state","validationState","size","orientation","rootStyles","className","mergeClasses","labelStyles","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"mappings":"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"}
|
|
@@ -9,11 +9,11 @@ function _export(target, all) {
|
|
|
9
9
|
});
|
|
10
10
|
}
|
|
11
11
|
_export(exports, {
|
|
12
|
-
getFieldControlProps: function() {
|
|
13
|
-
return getFieldControlProps;
|
|
14
|
-
},
|
|
15
12
|
useFieldControlProps_unstable: function() {
|
|
16
13
|
return useFieldControlProps_unstable;
|
|
14
|
+
},
|
|
15
|
+
getFieldControlProps: function() {
|
|
16
|
+
return getFieldControlProps;
|
|
17
17
|
}
|
|
18
18
|
});
|
|
19
19
|
const _FieldContext = require("./FieldContext");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useFieldControlProps.js"],"sourcesContent":["import { useFieldContext_unstable } from './FieldContext';\nexport function useFieldControlProps_unstable(props, options) {\n return getFieldControlProps(useFieldContext_unstable(), props, options);\n}\n/**\n * @internal\n * Implementation of useFieldControlProps_unstable.\n * Split out so it can be used directly in renderField_unstable.\n */ export function getFieldControlProps(context, props, options) {\n if (!context) {\n return props;\n }\n // Create a copy of props so we don't modify the original\n props = {\n ...props\n };\n const { generatedControlId, hintId, labelFor, labelId, required, validationMessageId, validationState } = context;\n if (generatedControlId) {\n var _props;\n var _id;\n (_id = (_props = props).id) !== null && _id !== void 0 ? _id : _props.id = generatedControlId;\n }\n // Set aria-labelledby if the control doesn't support label.htmlFor, or if the label's htmlFor doesn't refer\n // to this control (i.e. the user set this control's id prop without also setting the Field's label.htmlFor).\n if (labelId && (!(options === null || options === void 0 ? void 0 : options.supportsLabelFor) || labelFor !== props.id)) {\n var _props1, _arialabelledby;\n var _;\n (_ = (_props1 = props)[_arialabelledby = 'aria-labelledby']) !== null && _ !== void 0 ? _ : _props1[_arialabelledby] = labelId;\n }\n // The control is described by the validation message, or hint, or both.\n // We also preserve and append any aria-describedby from props.\n // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933\n if (validationMessageId || hintId) {\n // NOTE: Not using ??= since we're merging and overriding the user-provided value.\n props['aria-describedby'] = [\n validationMessageId,\n hintId,\n props === null || props === void 0 ? void 0 : props['aria-describedby']\n ].filter(Boolean).join(' ');\n }\n if (validationState === 'error') {\n var _props2, _ariainvalid;\n var _1;\n (_1 = (_props2 = props)[_ariainvalid = 'aria-invalid']) !== null && _1 !== void 0 ? _1 : _props2[_ariainvalid] = true;\n }\n if (required) {\n if (options === null || options === void 0 ? void 0 : options.supportsRequired) {\n var _props3;\n var _required;\n (_required = (_props3 = props).required) !== null && _required !== void 0 ? _required : _props3.required = true;\n } else {\n var _props4, _ariarequired;\n var _2;\n (_2 = (_props4 = props)[_ariarequired = 'aria-required']) !== null && _2 !== void 0 ? _2 : _props4[_ariarequired] = true;\n }\n }\n // Include the size prop if this control supports it\n if (options === null || options === void 0 ? void 0 : options.supportsSize) {\n var _props5;\n var _size;\n (_size = (_props5 = props).size) !== null && _size !== void 0 ? _size : _props5.size = context.size;\n }\n return props;\n}\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["useFieldControlProps.js"],"sourcesContent":["import { useFieldContext_unstable } from './FieldContext';\nexport function useFieldControlProps_unstable(props, options) {\n return getFieldControlProps(useFieldContext_unstable(), props, options);\n}\n/**\n * @internal\n * Implementation of useFieldControlProps_unstable.\n * Split out so it can be used directly in renderField_unstable.\n */ export function getFieldControlProps(context, props, options) {\n if (!context) {\n return props;\n }\n // Create a copy of props so we don't modify the original\n props = {\n ...props\n };\n const { generatedControlId, hintId, labelFor, labelId, required, validationMessageId, validationState } = context;\n if (generatedControlId) {\n var _props;\n var _id;\n (_id = (_props = props).id) !== null && _id !== void 0 ? _id : _props.id = generatedControlId;\n }\n // Set aria-labelledby if the control doesn't support label.htmlFor, or if the label's htmlFor doesn't refer\n // to this control (i.e. the user set this control's id prop without also setting the Field's label.htmlFor).\n if (labelId && (!(options === null || options === void 0 ? void 0 : options.supportsLabelFor) || labelFor !== props.id)) {\n var _props1, _arialabelledby;\n var _;\n (_ = (_props1 = props)[_arialabelledby = 'aria-labelledby']) !== null && _ !== void 0 ? _ : _props1[_arialabelledby] = labelId;\n }\n // The control is described by the validation message, or hint, or both.\n // We also preserve and append any aria-describedby from props.\n // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933\n if (validationMessageId || hintId) {\n // NOTE: Not using ??= since we're merging and overriding the user-provided value.\n props['aria-describedby'] = [\n validationMessageId,\n hintId,\n props === null || props === void 0 ? void 0 : props['aria-describedby']\n ].filter(Boolean).join(' ');\n }\n if (validationState === 'error') {\n var _props2, _ariainvalid;\n var _1;\n (_1 = (_props2 = props)[_ariainvalid = 'aria-invalid']) !== null && _1 !== void 0 ? _1 : _props2[_ariainvalid] = true;\n }\n if (required) {\n if (options === null || options === void 0 ? void 0 : options.supportsRequired) {\n var _props3;\n var _required;\n (_required = (_props3 = props).required) !== null && _required !== void 0 ? _required : _props3.required = true;\n } else {\n var _props4, _ariarequired;\n var _2;\n (_2 = (_props4 = props)[_ariarequired = 'aria-required']) !== null && _2 !== void 0 ? _2 : _props4[_ariarequired] = true;\n }\n }\n // Include the size prop if this control supports it\n if (options === null || options === void 0 ? void 0 : options.supportsSize) {\n var _props5;\n var _size;\n (_size = (_props5 = props).size) !== null && _size !== void 0 ? _size : _props5.size = context.size;\n }\n return props;\n}\n"],"names":["useFieldControlProps_unstable","getFieldControlProps","props","options","useFieldContext_unstable","context","generatedControlId","hintId","labelFor","labelId","required","validationMessageId","validationState","_props","_id","id","supportsLabelFor","_props1","_arialabelledby","_","filter","Boolean","join","_props2","_ariainvalid","_1","supportsRequired","_props3","_required","_props4","_ariarequired","_2","supportsSize","_props5","_size","size"],"mappings":";;;;;;;;;;;IACgBA,6BAA6B;eAA7BA;;IAOIC,oBAAoB;eAApBA;;;8BARqB;AAClC,SAASD,8BAA8BE,KAAK,EAAEC,OAAO;IACxD,OAAOF,qBAAqBG,IAAAA,sCAAwB,KAAIF,OAAOC;AACnE;AAKW,SAASF,qBAAqBI,OAAO,EAAEH,KAAK,EAAEC,OAAO;IAC5D,IAAI,CAACE,SAAS;QACV,OAAOH;IACX;IACA,yDAAyD;IACzDA,QAAQ;QACJ,GAAGA,KAAK;IACZ;IACA,MAAM,EAAEI,kBAAkB,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,mBAAmB,EAAEC,eAAe,EAAE,GAAGP;IAC1G,IAAIC,oBAAoB;QACpB,IAAIO;QACJ,IAAIC;QACHA,CAAAA,MAAM,AAACD,CAAAA,SAASX,KAAI,EAAGa,EAAE,AAAD,MAAO,QAAQD,QAAQ,KAAK,IAAIA,MAAMD,OAAOE,EAAE,GAAGT;IAC/E;IACA,4GAA4G;IAC5G,6GAA6G;IAC7G,IAAIG,WAAY,CAAA,CAAEN,CAAAA,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQa,gBAAgB,AAAD,KAAMR,aAAaN,MAAMa,EAAE,AAAD,GAAI;QACrH,IAAIE,SAASC;QACb,IAAIC;QACHA,CAAAA,IAAI,AAACF,CAAAA,UAAUf,KAAI,CAAE,CAACgB,kBAAkB,kBAAkB,AAAD,MAAO,QAAQC,MAAM,KAAK,IAAIA,IAAIF,OAAO,CAACC,gBAAgB,GAAGT;IAC3H;IACA,wEAAwE;IACxE,+DAA+D;IAC/D,yFAAyF;IACzF,IAAIE,uBAAuBJ,QAAQ;QAC/B,kFAAkF;QAClFL,KAAK,CAAC,mBAAmB,GAAG;YACxBS;YACAJ;YACAL,UAAU,QAAQA,UAAU,KAAK,IAAI,KAAK,IAAIA,KAAK,CAAC,mBAAmB;SAC1E,CAACkB,MAAM,CAACC,SAASC,IAAI,CAAC;IAC3B;IACA,IAAIV,oBAAoB,SAAS;QAC7B,IAAIW,SAASC;QACb,IAAIC;QACHA,CAAAA,KAAK,AAACF,CAAAA,UAAUrB,KAAI,CAAE,CAACsB,eAAe,eAAe,AAAD,MAAO,QAAQC,OAAO,KAAK,IAAIA,KAAKF,OAAO,CAACC,aAAa,GAAG;IACrH;IACA,IAAId,UAAU;QACV,IAAIP,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQuB,gBAAgB,EAAE;YAC5E,IAAIC;YACJ,IAAIC;YACHA,CAAAA,YAAY,AAACD,CAAAA,UAAUzB,KAAI,EAAGQ,QAAQ,AAAD,MAAO,QAAQkB,cAAc,KAAK,IAAIA,YAAYD,QAAQjB,QAAQ,GAAG;QAC/G,OAAO;YACH,IAAImB,SAASC;YACb,IAAIC;YACHA,CAAAA,KAAK,AAACF,CAAAA,UAAU3B,KAAI,CAAE,CAAC4B,gBAAgB,gBAAgB,AAAD,MAAO,QAAQC,OAAO,KAAK,IAAIA,KAAKF,OAAO,CAACC,cAAc,GAAG;QACxH;IACJ;IACA,oDAAoD;IACpD,IAAI3B,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQ6B,YAAY,EAAE;QACxE,IAAIC;QACJ,IAAIC;QACHA,CAAAA,QAAQ,AAACD,CAAAA,UAAU/B,KAAI,EAAGiC,IAAI,AAAD,MAAO,QAAQD,UAAU,KAAK,IAAIA,QAAQD,QAAQE,IAAI,GAAG9B,QAAQ8B,IAAI;IACvG;IACA,OAAOjC;AACX"}
|
package/lib-commonjs/index.js
CHANGED
|
@@ -12,29 +12,29 @@ _export(exports, {
|
|
|
12
12
|
Field: function() {
|
|
13
13
|
return _Field.Field;
|
|
14
14
|
},
|
|
15
|
-
FieldContextProvider: function() {
|
|
16
|
-
return _index.FieldContextProvider;
|
|
17
|
-
},
|
|
18
15
|
fieldClassNames: function() {
|
|
19
16
|
return _Field.fieldClassNames;
|
|
20
17
|
},
|
|
21
18
|
renderField_unstable: function() {
|
|
22
19
|
return _Field.renderField_unstable;
|
|
23
20
|
},
|
|
24
|
-
|
|
25
|
-
return
|
|
21
|
+
useFieldStyles_unstable: function() {
|
|
22
|
+
return _Field.useFieldStyles_unstable;
|
|
23
|
+
},
|
|
24
|
+
useField_unstable: function() {
|
|
25
|
+
return _Field.useField_unstable;
|
|
26
|
+
},
|
|
27
|
+
FieldContextProvider: function() {
|
|
28
|
+
return _index.FieldContextProvider;
|
|
26
29
|
},
|
|
27
30
|
useFieldContext_unstable: function() {
|
|
28
31
|
return _index.useFieldContext_unstable;
|
|
29
32
|
},
|
|
33
|
+
useFieldContextValues_unstable: function() {
|
|
34
|
+
return _index.useFieldContextValues_unstable;
|
|
35
|
+
},
|
|
30
36
|
useFieldControlProps_unstable: function() {
|
|
31
37
|
return _index.useFieldControlProps_unstable;
|
|
32
|
-
},
|
|
33
|
-
useFieldStyles_unstable: function() {
|
|
34
|
-
return _Field.useFieldStyles_unstable;
|
|
35
|
-
},
|
|
36
|
-
useField_unstable: function() {
|
|
37
|
-
return _Field.useField_unstable;
|
|
38
38
|
}
|
|
39
39
|
});
|
|
40
40
|
const _Field = require("./Field");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.js"],"sourcesContent":["export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field';\nexport { FieldContextProvider, useFieldContext_unstable, useFieldContextValues_unstable, useFieldControlProps_unstable } from './contexts/index';\n"],"names":["Field","
|
|
1
|
+
{"version":3,"sources":["index.js"],"sourcesContent":["export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field';\nexport { FieldContextProvider, useFieldContext_unstable, useFieldContextValues_unstable, useFieldControlProps_unstable } from './contexts/index';\n"],"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","FieldContextProvider","useFieldContext_unstable","useFieldContextValues_unstable","useFieldControlProps_unstable"],"mappings":";;;;;;;;;;;IAASA,KAAK;eAALA,YAAK;;IAAEC,eAAe;eAAfA,sBAAe;;IAAEC,oBAAoB;eAApBA,2BAAoB;;IAAEC,uBAAuB;eAAvBA,8BAAuB;;IAAEC,iBAAiB;eAAjBA,wBAAiB;;IACxFC,oBAAoB;eAApBA,2BAAoB;;IAAEC,wBAAwB;eAAxBA,+BAAwB;;IAAEC,8BAA8B;eAA9BA,qCAA8B;;IAAEC,6BAA6B;eAA7BA,oCAA6B;;;uBADb;uBACqB"}
|
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-20240320-0406.1",
|
|
4
4
|
"description": "Fluent UI Field components",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -27,18 +27,18 @@
|
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
|
30
|
-
"@fluentui/react-conformance": "0.0.0-nightly-
|
|
31
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
30
|
+
"@fluentui/react-conformance": "0.0.0-nightly-20240320-0406.1",
|
|
31
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20240320-0406.1",
|
|
32
32
|
"@fluentui/scripts-api-extractor": "*",
|
|
33
33
|
"@fluentui/scripts-tasks": "*"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@fluentui/react-context-selector": "0.0.0-nightly-
|
|
36
|
+
"@fluentui/react-context-selector": "0.0.0-nightly-20240320-0406.1",
|
|
37
37
|
"@fluentui/react-icons": "^2.0.224",
|
|
38
|
-
"@fluentui/react-jsx-runtime": "0.0.0-nightly-
|
|
39
|
-
"@fluentui/react-label": "0.0.0-nightly-
|
|
40
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
41
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
38
|
+
"@fluentui/react-jsx-runtime": "0.0.0-nightly-20240320-0406.1",
|
|
39
|
+
"@fluentui/react-label": "0.0.0-nightly-20240320-0406.1",
|
|
40
|
+
"@fluentui/react-theme": "0.0.0-nightly-20240320-0406.1",
|
|
41
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20240320-0406.1",
|
|
42
42
|
"@griffel/react": "^1.5.14",
|
|
43
43
|
"@swc/helpers": "^0.5.1"
|
|
44
44
|
},
|