@fluentui/react-field 9.0.0-alpha.13 → 9.0.0-alpha.15
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +57 -1
- package/CHANGELOG.md +23 -2
- package/lib/components/Field/renderField.js +3 -3
- package/lib/components/Field/renderField.js.map +1 -1
- package/lib/components/Field/useFieldStyles.js +37 -16
- package/lib/components/Field/useFieldStyles.js.map +1 -1
- package/lib-amd/components/Field/renderField.js +2 -3
- package/lib-amd/components/Field/renderField.js.map +1 -1
- package/lib-amd/components/Field/useFieldStyles.js +33 -12
- package/lib-amd/components/Field/useFieldStyles.js.map +1 -1
- package/lib-commonjs/components/Field/renderField.js +3 -3
- package/lib-commonjs/components/Field/renderField.js.map +1 -1
- package/lib-commonjs/components/Field/useFieldStyles.js +37 -16
- package/lib-commonjs/components/Field/useFieldStyles.js.map +1 -1
- package/package.json +6 -5
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,63 @@
|
|
|
2
2
|
"name": "@fluentui/react-field",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Mon, 16 Jan 2023 08:35:37 GMT",
|
|
6
|
+
"tag": "@fluentui/react-field_v9.0.0-alpha.15",
|
|
7
|
+
"version": "9.0.0-alpha.15",
|
|
8
|
+
"comments": {
|
|
9
|
+
"none": [
|
|
10
|
+
{
|
|
11
|
+
"author": "martinhochel@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-field",
|
|
13
|
+
"commit": "64bb45980d68de1219c6b36a7db5363f0a9cff9f",
|
|
14
|
+
"comment": "chore: migrate to packaged scripts"
|
|
15
|
+
}
|
|
16
|
+
],
|
|
17
|
+
"prerelease": [
|
|
18
|
+
{
|
|
19
|
+
"author": "sarah.higley@microsoft.com",
|
|
20
|
+
"package": "@fluentui/react-field",
|
|
21
|
+
"commit": "5b35bf93f6634324e8651ec29640353edd11178b",
|
|
22
|
+
"comment": "fix: Field styles do not wrap SVG status icon in inline parent to avoid layout bugs"
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"author": "beachball",
|
|
26
|
+
"package": "@fluentui/react-field",
|
|
27
|
+
"comment": "Bump @fluentui/react-label to v9.0.17",
|
|
28
|
+
"commit": "a870d8360e47f3ea03358c4e75e89e08a74845d7"
|
|
29
|
+
}
|
|
30
|
+
]
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"date": "Mon, 09 Jan 2023 14:35:02 GMT",
|
|
35
|
+
"tag": "@fluentui/react-field_v9.0.0-alpha.14",
|
|
36
|
+
"version": "9.0.0-alpha.14",
|
|
37
|
+
"comments": {
|
|
38
|
+
"prerelease": [
|
|
39
|
+
{
|
|
40
|
+
"author": "beachball",
|
|
41
|
+
"package": "@fluentui/react-field",
|
|
42
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.5",
|
|
43
|
+
"commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"author": "beachball",
|
|
47
|
+
"package": "@fluentui/react-field",
|
|
48
|
+
"comment": "Bump @fluentui/react-label to v9.0.16",
|
|
49
|
+
"commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"author": "beachball",
|
|
53
|
+
"package": "@fluentui/react-field",
|
|
54
|
+
"comment": "Bump @fluentui/react-utilities to v9.4.0",
|
|
55
|
+
"commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
|
|
56
|
+
}
|
|
57
|
+
]
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"date": "Wed, 04 Jan 2023 01:40:06 GMT",
|
|
6
62
|
"tag": "@fluentui/react-field_v9.0.0-alpha.13",
|
|
7
63
|
"version": "9.0.0-alpha.13",
|
|
8
64
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,33 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-field
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 16 Jan 2023 08:35:37 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-alpha.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.15)
|
|
8
|
+
|
|
9
|
+
Mon, 16 Jan 2023 08:35:37 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.14..@fluentui/react-field_v9.0.0-alpha.15)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- fix: Field styles do not wrap SVG status icon in inline parent to avoid layout bugs ([PR #26150](https://github.com/microsoft/fluentui/pull/26150) by sarah.higley@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-label to v9.0.17 ([commit](https://github.com/microsoft/fluentui/commit/a870d8360e47f3ea03358c4e75e89e08a74845d7) by beachball)
|
|
16
|
+
|
|
17
|
+
## [9.0.0-alpha.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.14)
|
|
18
|
+
|
|
19
|
+
Mon, 09 Jan 2023 14:35:02 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.13..@fluentui/react-field_v9.0.0-alpha.14)
|
|
21
|
+
|
|
22
|
+
### Changes
|
|
23
|
+
|
|
24
|
+
- Bump @fluentui/react-context-selector to v9.1.5 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
|
|
25
|
+
- Bump @fluentui/react-label to v9.0.16 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
|
|
26
|
+
- Bump @fluentui/react-utilities to v9.4.0 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
|
|
27
|
+
|
|
7
28
|
## [9.0.0-alpha.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.13)
|
|
8
29
|
|
|
9
|
-
Wed, 04 Jan 2023 01:
|
|
30
|
+
Wed, 04 Jan 2023 01:40:06 GMT
|
|
10
31
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.12..@fluentui/react-field_v9.0.0-alpha.13)
|
|
11
32
|
|
|
12
33
|
### Changes
|
|
@@ -14,11 +14,11 @@ export const renderField_unstable = state => {
|
|
|
14
14
|
...slotProps.label
|
|
15
15
|
}), slots.control && /*#__PURE__*/React.createElement(slots.control, {
|
|
16
16
|
...slotProps.control
|
|
17
|
+
}), slots.validationMessage && slots.validationMessageIcon && /*#__PURE__*/React.createElement(slots.validationMessageIcon, {
|
|
18
|
+
...slotProps.validationMessageIcon
|
|
17
19
|
}), slots.validationMessage && /*#__PURE__*/React.createElement(slots.validationMessage, {
|
|
18
20
|
...slotProps.validationMessage
|
|
19
|
-
}, slots.
|
|
20
|
-
...slotProps.validationMessageIcon
|
|
21
|
-
}), slotProps.validationMessage.children), slots.hint && /*#__PURE__*/React.createElement(slots.hint, {
|
|
21
|
+
}), slots.hint && /*#__PURE__*/React.createElement(slots.hint, {
|
|
22
22
|
...slotProps.hint
|
|
23
23
|
}));
|
|
24
24
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,oBAAoB,GAA4BC,KAAoB,IAAI;EACnF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAA2BE,KAAiC,CAAC;EAElG,oBACEH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,GAC3BF,KAAK,CAACG,KAAK,iBAAIP,oBAACI,KAAK,CAACG,KAAK;IAAA,GAAKF,SAAS,CAACE;EAAK,EAAI,EAEnDH,KAAK,CAACI,OAAO,iBAAIR,oBAACI,KAAK,CAACI,OAAO;IAAA,GAAMH,SAAS,CAACG;EAAe,EAAI,EAClEJ,KAAK,CAACK,iBAAiB,
|
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,oBAAoB,GAA4BC,KAAoB,IAAI;EACnF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAA2BE,KAAiC,CAAC;EAElG,oBACEH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,GAC3BF,KAAK,CAACG,KAAK,iBAAIP,oBAACI,KAAK,CAACG,KAAK;IAAA,GAAKF,SAAS,CAACE;EAAK,EAAI,EAEnDH,KAAK,CAACI,OAAO,iBAAIR,oBAACI,KAAK,CAACI,OAAO;IAAA,GAAMH,SAAS,CAACG;EAAe,EAAI,EAClEJ,KAAK,CAACK,iBAAiB,IAAIL,KAAK,CAACM,qBAAqB,iBACrDV,oBAACI,KAAK,CAACM,qBAAqB;IAAA,GAAKL,SAAS,CAACK;EAAqB,EACjE,EACAN,KAAK,CAACK,iBAAiB,iBAAIT,oBAACI,KAAK,CAACK,iBAAiB;IAAA,GAAKJ,SAAS,CAACI;EAAiB,EAAI,EACvFL,KAAK,CAACO,IAAI,iBAAIX,oBAACI,KAAK,CAACO,IAAI;IAAA,GAAKN,SAAS,CAACM;EAAI,EAAI,CACtC;AAEjB,CAAC","names":["React","getSlots","renderField_unstable","state","slots","slotProps","root","label","control","validationMessage","validationMessageIcon","hint"],"sourceRoot":"../src/","sources":["packages/react-components/react-field/src/components/Field/renderField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FieldControl, FieldSlots, FieldState } from './Field.types';\n\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = <T extends FieldControl>(state: FieldState<T>) => {\n const { slots, slotProps } = getSlots<FieldSlots<FieldControl>>(state as FieldState<FieldControl>);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.label && <slots.label {...slotProps.label} />}\n {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}\n {slots.control && <slots.control {...(slotProps.control as any)} />}\n {slots.validationMessage && slots.validationMessageIcon && (\n <slots.validationMessageIcon {...slotProps.validationMessageIcon} />\n )}\n {slots.validationMessage && <slots.validationMessage {...slotProps.validationMessage} />}\n {slots.hint && <slots.hint {...slotProps.hint} />}\n </slots.root>\n );\n};\n"]}
|
|
@@ -15,17 +15,38 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
15
15
|
base: {
|
|
16
16
|
mc9l5x: "f13qh94s",
|
|
17
17
|
Bxotwcr: "f14np9u9",
|
|
18
|
+
Budl1dq: "fjxzuw",
|
|
19
|
+
zoa1oz: "f6nraym",
|
|
18
20
|
B7hvi0a: "f1m2n5bn"
|
|
19
21
|
},
|
|
20
22
|
horizontal: {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
+
Budl1dq: "fwibhjm",
|
|
24
|
+
zoa1oz: "f7bqb3c"
|
|
23
25
|
},
|
|
24
|
-
|
|
25
|
-
Br312pm: "
|
|
26
|
+
label: {
|
|
27
|
+
Br312pm: "f150pcdf",
|
|
28
|
+
Bw0ie65: "fwm4whi",
|
|
29
|
+
Ijaq50: "f1tty21m",
|
|
30
|
+
nk6f5a: "f19648ye"
|
|
31
|
+
},
|
|
32
|
+
control: {
|
|
33
|
+
Br312pm: "f1bfa6ju",
|
|
34
|
+
Bw0ie65: "fl3lap4"
|
|
35
|
+
},
|
|
36
|
+
validationIcon: {
|
|
37
|
+
Br312pm: "ftfzah7",
|
|
38
|
+
Bw0ie65: "f1fih8f9"
|
|
39
|
+
},
|
|
40
|
+
validationMessage: {
|
|
41
|
+
Br312pm: "f1n69xcw",
|
|
42
|
+
Bw0ie65: "f1hw1m5m"
|
|
43
|
+
},
|
|
44
|
+
hint: {
|
|
45
|
+
Br312pm: "fbug73u",
|
|
46
|
+
Bw0ie65: "fbtgo1w"
|
|
26
47
|
}
|
|
27
48
|
}, {
|
|
28
|
-
d: [".f13qh94s{display:grid;}", ".f14np9u9{grid-auto-flow:row;}", ".f1m2n5bn{justify-items:start;}", ".
|
|
49
|
+
d: [".f13qh94s{display:grid;}", ".f14np9u9{grid-auto-flow:row;}", ".fjxzuw{grid-template-columns:auto 1fr;}", ".f6nraym{grid-template-areas:\"label label\" \"control control\" \"validationIcon validationMessage\" \"hint hint\";}", ".f1m2n5bn{justify-items:start;}", ".fwibhjm{grid-template-columns:33% auto 1fr;}", ".f7bqb3c{grid-template-areas:\"label control control\" \"label validationIcon validationMessage\" \"label hint hint\" \"label . .\";}", ".f150pcdf{grid-column-start:label;}", ".fwm4whi{grid-column-end:label;}", ".f1tty21m{grid-row-start:label;}", ".f19648ye{grid-row-end:label;}", ".f1bfa6ju{grid-column-start:control;}", ".fl3lap4{grid-column-end:control;}", ".ftfzah7{grid-column-start:validationIcon;}", ".f1fih8f9{grid-column-end:validationIcon;}", ".f1n69xcw{grid-column-start:validationMessage;}", ".f1hw1m5m{grid-column-end:validationMessage;}", ".fbug73u{grid-column-start:hint;}", ".fbtgo1w{grid-column-end:hint;}"]
|
|
29
50
|
});
|
|
30
51
|
const useLabelStyles = /*#__PURE__*/__styles({
|
|
31
52
|
base: {
|
|
@@ -33,14 +54,12 @@ const useLabelStyles = /*#__PURE__*/__styles({
|
|
|
33
54
|
jrapky: "fyacil5"
|
|
34
55
|
},
|
|
35
56
|
horizontal: {
|
|
36
|
-
Ijaq50: "f16hsg94",
|
|
37
|
-
nk6f5a: "f1nzqi2z",
|
|
38
57
|
t21cq0: ["fkujibs", "f199hnxi"],
|
|
39
58
|
qb2dma: "f9h729m",
|
|
40
59
|
Bdqf98w: "fhb5wj7"
|
|
41
60
|
}
|
|
42
61
|
}, {
|
|
43
|
-
d: [".fg30ohd{margin-top:var(--spacingVerticalXXS);}", ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}", ".
|
|
62
|
+
d: [".fg30ohd{margin-top:var(--spacingVerticalXXS);}", ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".fhb5wj7{justify-self:stretch;}"]
|
|
44
63
|
});
|
|
45
64
|
const useSecondaryTextStyles = /*#__PURE__*/__styles({
|
|
46
65
|
base: {
|
|
@@ -59,10 +78,12 @@ const useSecondaryTextStyles = /*#__PURE__*/__styles({
|
|
|
59
78
|
});
|
|
60
79
|
const useValidationMessageIconStyles = /*#__PURE__*/__styles({
|
|
61
80
|
base: {
|
|
81
|
+
mc9l5x: "ftgm304",
|
|
82
|
+
qb2dma: "f9h729m",
|
|
62
83
|
Be2twd7: "f1ugzwwg",
|
|
63
84
|
Bg96gwp: "fp4gqsa",
|
|
64
|
-
|
|
65
|
-
|
|
85
|
+
t21cq0: ["fm0x6gh", "fbyavb5"],
|
|
86
|
+
B6of3ja: "fww94b8"
|
|
66
87
|
},
|
|
67
88
|
error: {
|
|
68
89
|
sj55zd: "f1hcrxcs"
|
|
@@ -74,7 +95,7 @@ const useValidationMessageIconStyles = /*#__PURE__*/__styles({
|
|
|
74
95
|
sj55zd: "ffmvakt"
|
|
75
96
|
}
|
|
76
97
|
}, {
|
|
77
|
-
d: [".f1ugzwwg{font-size:12px;}", ".fp4gqsa{line-height:12px;}", ".
|
|
98
|
+
d: [".ftgm304{display:block;}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".f1ugzwwg{font-size:12px;}", ".fp4gqsa{line-height:12px;}", ".fm0x6gh{margin-right:var(--spacingHorizontalXS);}", ".fbyavb5{margin-left:var(--spacingHorizontalXS);}", ".fww94b8{margin-top:var(--spacingVerticalXS);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}"]
|
|
78
99
|
});
|
|
79
100
|
/**
|
|
80
101
|
* Apply styling to the Field slots based on the state
|
|
@@ -86,22 +107,22 @@ export const useFieldStyles_unstable = state => {
|
|
|
86
107
|
const rootStyles = useRootStyles();
|
|
87
108
|
state.root.className = mergeClasses(classNames.root, rootStyles.base, horizontal && rootStyles.horizontal, state.root.className);
|
|
88
109
|
if (state.control) {
|
|
89
|
-
state.control.className = mergeClasses(classNames.control,
|
|
110
|
+
state.control.className = mergeClasses(classNames.control, rootStyles.control, state.control.className);
|
|
90
111
|
}
|
|
91
112
|
const labelStyles = useLabelStyles();
|
|
92
113
|
if (state.label) {
|
|
93
|
-
state.label.className = mergeClasses(classNames.label,
|
|
114
|
+
state.label.className = mergeClasses(classNames.label, rootStyles.label, labelStyles.base, state.label.className);
|
|
94
115
|
}
|
|
95
116
|
const validationMessageIconStyles = useValidationMessageIconStyles();
|
|
96
117
|
if (state.validationMessageIcon) {
|
|
97
|
-
state.validationMessageIcon.className = mergeClasses(classNames.validationMessageIcon, validationMessageIconStyles.base, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
|
|
118
|
+
state.validationMessageIcon.className = mergeClasses(classNames.validationMessageIcon, rootStyles.validationIcon, validationMessageIconStyles.base, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
|
|
98
119
|
}
|
|
99
120
|
const secondaryTextStyles = useSecondaryTextStyles();
|
|
100
121
|
if (state.validationMessage) {
|
|
101
|
-
state.validationMessage.className = mergeClasses(classNames.validationMessage,
|
|
122
|
+
state.validationMessage.className = mergeClasses(classNames.validationMessage, rootStyles.validationMessage, secondaryTextStyles.base, validationState === 'error' && secondaryTextStyles.error, state.validationMessage.className);
|
|
102
123
|
}
|
|
103
124
|
if (state.hint) {
|
|
104
|
-
state.hint.className = mergeClasses(classNames.hint, secondaryTextStyles.base,
|
|
125
|
+
state.hint.className = mergeClasses(classNames.hint, secondaryTextStyles.base, rootStyles.hint, state.hint.className);
|
|
105
126
|
}
|
|
106
127
|
};
|
|
107
128
|
//# sourceMappingURL=useFieldStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,SAASA,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAEhE,mBAAqBC,YAAY,QAAQ,gBAAgB;AAGzD,OAAO,MAAMC,kBAAkB,GAAIC,IAAY,KAAgD;EAC7FC,IAAI,EAAE,OAAOD,IAAI,EAAE;EACnBE,OAAO,EAAE,OAAOF,IAAI,WAAW;EAC/BG,KAAK,EAAE,OAAOH,IAAI,SAAS;EAC3BI,iBAAiB,EAAE,OAAOJ,IAAI,qBAAqB;EACnDK,qBAAqB,EAAE,OAAOL,IAAI,yBAAyB;EAC3DM,IAAI,EAAE,OAAON,IAAI;CAClB,CAAC;AAEF;;;AAGA,MAAMO,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,
|
|
1
|
+
{"version":3,"mappings":"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","names":["tokens","typographyStyles","mergeClasses","getFieldClassNames","name","root","control","label","validationMessage","validationMessageIcon","hint","useRootStyles","useLabelStyles","useSecondaryTextStyles","useValidationMessageIconStyles","useFieldStyles_unstable","state","classNames","validationState","horizontal","orientation","rootStyles","className","base","labelStyles","validationMessageIconStyles","validationIcon","secondaryTextStyles","error"],"sourceRoot":"../src/","sources":["packages/react-components/react-field/src/components/Field/useFieldStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { FieldControl, FieldProps, FieldSlots, FieldState } from './Field.types';\n\nexport const getFieldClassNames = (name: string): SlotClassNames<FieldSlots<FieldControl>> => ({\n root: `fui-${name}`,\n control: `fui-${name}__control`,\n label: `fui-${name}__label`,\n validationMessage: `fui-${name}__validationMessage`,\n validationMessageIcon: `fui-${name}__validationMessageIcon`,\n hint: `fui-${name}__hint`,\n});\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'grid',\n gridAutoFlow: 'row',\n gridTemplateColumns: 'auto 1fr',\n gridTemplateAreas: `\n \"label label\"\n \"control control\"\n \"validationIcon validationMessage\"\n \"hint hint\"\n `,\n justifyItems: 'start',\n },\n\n horizontal: {\n gridTemplateColumns: '33% auto 1fr',\n gridTemplateAreas: `\n \"label control control\"\n \"label validationIcon validationMessage\"\n \"label hint hint\"\n \"label . .\"\n `,\n },\n\n label: {\n gridColumnStart: 'label',\n gridColumnEnd: 'label',\n gridRowStart: 'label',\n gridRowEnd: 'label',\n },\n\n control: {\n gridColumnStart: 'control',\n gridColumnEnd: 'control',\n },\n\n validationIcon: {\n gridColumnStart: 'validationIcon',\n gridColumnEnd: 'validationIcon',\n },\n\n validationMessage: {\n gridColumnStart: 'validationMessage',\n gridColumnEnd: 'validationMessage',\n },\n\n hint: {\n gridColumnStart: 'hint',\n gridColumnEnd: 'hint',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n marginTop: tokens.spacingVerticalXXS,\n marginBottom: tokens.spacingVerticalXXS,\n },\n\n horizontal: {\n marginRight: tokens.spacingHorizontalM,\n alignSelf: 'start',\n justifySelf: 'stretch',\n },\n});\n\nconst useSecondaryTextStyles = makeStyles({\n base: {\n marginTop: tokens.spacingVerticalXXS,\n color: tokens.colorNeutralForeground3,\n ...typographyStyles.caption1,\n },\n\n error: {\n color: tokens.colorPaletteRedForeground1,\n },\n});\n\nconst useValidationMessageIconStyles = makeStyles({\n base: {\n display: 'block',\n alignSelf: 'start',\n fontSize: '12px',\n lineHeight: '12px',\n marginRight: tokens.spacingHorizontalXS,\n marginTop: tokens.spacingVerticalXS,\n },\n\n error: {\n color: tokens.colorPaletteRedForeground1,\n },\n warning: {\n color: tokens.colorPaletteDarkOrangeForeground1,\n },\n success: {\n color: tokens.colorPaletteGreenForeground1,\n },\n});\n\n/**\n * Apply styling to the Field slots based on the state\n */\nexport const useFieldStyles_unstable = <T extends FieldControl>(state: FieldState<T>) => {\n const classNames = state.classNames;\n const validationState: FieldProps<FieldControl>['validationState'] = state.validationState;\n const horizontal = state.orientation === 'horizontal';\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n classNames.root,\n rootStyles.base,\n horizontal && rootStyles.horizontal,\n state.root.className,\n );\n\n if (state.control) {\n state.control.className = mergeClasses(classNames.control, rootStyles.control, state.control.className);\n }\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(classNames.label, rootStyles.label, labelStyles.base, state.label.className);\n }\n\n const validationMessageIconStyles = useValidationMessageIconStyles();\n if (state.validationMessageIcon) {\n state.validationMessageIcon.className = mergeClasses(\n classNames.validationMessageIcon,\n rootStyles.validationIcon,\n validationMessageIconStyles.base,\n !!validationState && validationMessageIconStyles[validationState],\n state.validationMessageIcon.className,\n );\n }\n\n const secondaryTextStyles = useSecondaryTextStyles();\n if (state.validationMessage) {\n state.validationMessage.className = mergeClasses(\n classNames.validationMessage,\n rootStyles.validationMessage,\n secondaryTextStyles.base,\n validationState === 'error' && secondaryTextStyles.error,\n state.validationMessage.className,\n );\n }\n\n if (state.hint) {\n state.hint.className = mergeClasses(\n classNames.hint,\n secondaryTextStyles.base,\n rootStyles.hint,\n state.hint.className,\n );\n }\n};\n"]}
|
|
@@ -10,9 +10,8 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], fu
|
|
|
10
10
|
return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
|
|
11
11
|
slots.label && React.createElement(slots.label, tslib_1.__assign({}, slotProps.label)),
|
|
12
12
|
slots.control && React.createElement(slots.control, tslib_1.__assign({}, slotProps.control)),
|
|
13
|
-
slots.validationMessage && (React.createElement(slots.
|
|
14
|
-
|
|
15
|
-
slotProps.validationMessage.children)),
|
|
13
|
+
slots.validationMessage && slots.validationMessageIcon && (React.createElement(slots.validationMessageIcon, tslib_1.__assign({}, slotProps.validationMessageIcon))),
|
|
14
|
+
slots.validationMessage && React.createElement(slots.validationMessage, tslib_1.__assign({}, slotProps.validationMessage)),
|
|
16
15
|
slots.hint && React.createElement(slots.hint, tslib_1.__assign({}, slotProps.hint))));
|
|
17
16
|
};
|
|
18
17
|
exports.renderField_unstable = renderField_unstable;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"renderField.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/renderField.tsx"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,oBAAoB,GAAG,UAAyB,KAAoB;QACzE,IAAA,KAAuB,0BAAQ,CAA2B,KAAiC,CAAC,EAA1F,KAAK,WAAA,EAAE,SAAS,eAA0E,CAAC;QAEnG,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,KAAK,CAAC,KAAK,IAAI,oBAAC,KAAK,CAAC,KAAK,uBAAK,SAAS,CAAC,KAAK,EAAI;YAEnD,KAAK,CAAC,OAAO,IAAI,oBAAC,KAAK,CAAC,OAAO,uBAAM,SAAS,CAAC,OAAe,EAAI;YAClE,KAAK,CAAC,iBAAiB,IAAI,
|
|
1
|
+
{"version":3,"file":"renderField.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/renderField.tsx"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,oBAAoB,GAAG,UAAyB,KAAoB;QACzE,IAAA,KAAuB,0BAAQ,CAA2B,KAAiC,CAAC,EAA1F,KAAK,WAAA,EAAE,SAAS,eAA0E,CAAC;QAEnG,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,KAAK,CAAC,KAAK,IAAI,oBAAC,KAAK,CAAC,KAAK,uBAAK,SAAS,CAAC,KAAK,EAAI;YAEnD,KAAK,CAAC,OAAO,IAAI,oBAAC,KAAK,CAAC,OAAO,uBAAM,SAAS,CAAC,OAAe,EAAI;YAClE,KAAK,CAAC,iBAAiB,IAAI,KAAK,CAAC,qBAAqB,IAAI,CACzD,oBAAC,KAAK,CAAC,qBAAqB,uBAAK,SAAS,CAAC,qBAAqB,EAAI,CACrE;YACA,KAAK,CAAC,iBAAiB,IAAI,oBAAC,KAAK,CAAC,iBAAiB,uBAAK,SAAS,CAAC,iBAAiB,EAAI;YACvF,KAAK,CAAC,IAAI,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CACtC,CACd,CAAC;IACJ,CAAC,CAAC;IAfW,QAAA,oBAAoB,wBAe/B","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FieldControl, FieldSlots, FieldState } from './Field.types';\n\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = <T extends FieldControl>(state: FieldState<T>) => {\n const { slots, slotProps } = getSlots<FieldSlots<FieldControl>>(state as FieldState<FieldControl>);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.label && <slots.label {...slotProps.label} />}\n {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}\n {slots.control && <slots.control {...(slotProps.control as any)} />}\n {slots.validationMessage && slots.validationMessageIcon && (\n <slots.validationMessageIcon {...slotProps.validationMessageIcon} />\n )}\n {slots.validationMessage && <slots.validationMessage {...slotProps.validationMessage} />}\n {slots.hint && <slots.hint {...slotProps.hint} />}\n </slots.root>\n );\n};\n"]}
|
|
@@ -18,14 +18,35 @@ define(["require", "exports", "tslib", "@fluentui/react-theme", "@griffel/react"
|
|
|
18
18
|
base: {
|
|
19
19
|
display: 'grid',
|
|
20
20
|
gridAutoFlow: 'row',
|
|
21
|
+
gridTemplateColumns: 'auto 1fr',
|
|
22
|
+
gridTemplateAreas: "\n \"label label\"\n \"control control\"\n \"validationIcon validationMessage\"\n \"hint hint\"\n ",
|
|
21
23
|
justifyItems: 'start',
|
|
22
24
|
},
|
|
23
25
|
horizontal: {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
+
gridTemplateColumns: '33% auto 1fr',
|
|
27
|
+
gridTemplateAreas: "\n \"label control control\"\n \"label validationIcon validationMessage\"\n \"label hint hint\"\n \"label . .\"\n ",
|
|
26
28
|
},
|
|
27
|
-
|
|
28
|
-
gridColumnStart: '
|
|
29
|
+
label: {
|
|
30
|
+
gridColumnStart: 'label',
|
|
31
|
+
gridColumnEnd: 'label',
|
|
32
|
+
gridRowStart: 'label',
|
|
33
|
+
gridRowEnd: 'label',
|
|
34
|
+
},
|
|
35
|
+
control: {
|
|
36
|
+
gridColumnStart: 'control',
|
|
37
|
+
gridColumnEnd: 'control',
|
|
38
|
+
},
|
|
39
|
+
validationIcon: {
|
|
40
|
+
gridColumnStart: 'validationIcon',
|
|
41
|
+
gridColumnEnd: 'validationIcon',
|
|
42
|
+
},
|
|
43
|
+
validationMessage: {
|
|
44
|
+
gridColumnStart: 'validationMessage',
|
|
45
|
+
gridColumnEnd: 'validationMessage',
|
|
46
|
+
},
|
|
47
|
+
hint: {
|
|
48
|
+
gridColumnStart: 'hint',
|
|
49
|
+
gridColumnEnd: 'hint',
|
|
29
50
|
},
|
|
30
51
|
});
|
|
31
52
|
var useLabelStyles = react_1.makeStyles({
|
|
@@ -34,8 +55,6 @@ define(["require", "exports", "tslib", "@fluentui/react-theme", "@griffel/react"
|
|
|
34
55
|
marginBottom: react_theme_1.tokens.spacingVerticalXXS,
|
|
35
56
|
},
|
|
36
57
|
horizontal: {
|
|
37
|
-
gridRowStart: '1',
|
|
38
|
-
gridRowEnd: '-1',
|
|
39
58
|
marginRight: react_theme_1.tokens.spacingHorizontalM,
|
|
40
59
|
alignSelf: 'start',
|
|
41
60
|
justifySelf: 'stretch',
|
|
@@ -49,10 +68,12 @@ define(["require", "exports", "tslib", "@fluentui/react-theme", "@griffel/react"
|
|
|
49
68
|
});
|
|
50
69
|
var useValidationMessageIconStyles = react_1.makeStyles({
|
|
51
70
|
base: {
|
|
71
|
+
display: 'block',
|
|
72
|
+
alignSelf: 'start',
|
|
52
73
|
fontSize: '12px',
|
|
53
74
|
lineHeight: '12px',
|
|
54
|
-
verticalAlign: 'middle',
|
|
55
75
|
marginRight: react_theme_1.tokens.spacingHorizontalXS,
|
|
76
|
+
marginTop: react_theme_1.tokens.spacingVerticalXS,
|
|
56
77
|
},
|
|
57
78
|
error: {
|
|
58
79
|
color: react_theme_1.tokens.colorPaletteRedForeground1,
|
|
@@ -74,22 +95,22 @@ define(["require", "exports", "tslib", "@fluentui/react-theme", "@griffel/react"
|
|
|
74
95
|
var rootStyles = useRootStyles();
|
|
75
96
|
state.root.className = react_1.mergeClasses(classNames.root, rootStyles.base, horizontal && rootStyles.horizontal, state.root.className);
|
|
76
97
|
if (state.control) {
|
|
77
|
-
state.control.className = react_1.mergeClasses(classNames.control,
|
|
98
|
+
state.control.className = react_1.mergeClasses(classNames.control, rootStyles.control, state.control.className);
|
|
78
99
|
}
|
|
79
100
|
var labelStyles = useLabelStyles();
|
|
80
101
|
if (state.label) {
|
|
81
|
-
state.label.className = react_1.mergeClasses(classNames.label,
|
|
102
|
+
state.label.className = react_1.mergeClasses(classNames.label, rootStyles.label, labelStyles.base, state.label.className);
|
|
82
103
|
}
|
|
83
104
|
var validationMessageIconStyles = useValidationMessageIconStyles();
|
|
84
105
|
if (state.validationMessageIcon) {
|
|
85
|
-
state.validationMessageIcon.className = react_1.mergeClasses(classNames.validationMessageIcon, validationMessageIconStyles.base, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
|
|
106
|
+
state.validationMessageIcon.className = react_1.mergeClasses(classNames.validationMessageIcon, rootStyles.validationIcon, validationMessageIconStyles.base, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
|
|
86
107
|
}
|
|
87
108
|
var secondaryTextStyles = useSecondaryTextStyles();
|
|
88
109
|
if (state.validationMessage) {
|
|
89
|
-
state.validationMessage.className = react_1.mergeClasses(classNames.validationMessage,
|
|
110
|
+
state.validationMessage.className = react_1.mergeClasses(classNames.validationMessage, rootStyles.validationMessage, secondaryTextStyles.base, validationState === 'error' && secondaryTextStyles.error, state.validationMessage.className);
|
|
90
111
|
}
|
|
91
112
|
if (state.hint) {
|
|
92
|
-
state.hint.className = react_1.mergeClasses(classNames.hint, secondaryTextStyles.base,
|
|
113
|
+
state.hint.className = react_1.mergeClasses(classNames.hint, secondaryTextStyles.base, rootStyles.hint, state.hint.className);
|
|
93
114
|
}
|
|
94
115
|
};
|
|
95
116
|
exports.useFieldStyles_unstable = useFieldStyles_unstable;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFieldStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/useFieldStyles.ts"],"names":[],"mappings":";;;;IAKO,IAAM,kBAAkB,GAAG,UAAC,IAAY,IAA+C,OAAA,CAAC;QAC7F,IAAI,EAAE,SAAO,IAAM;QACnB,OAAO,EAAE,SAAO,IAAI,cAAW;QAC/B,KAAK,EAAE,SAAO,IAAI,YAAS;QAC3B,iBAAiB,EAAE,SAAO,IAAI,wBAAqB;QACnD,qBAAqB,EAAE,SAAO,IAAI,4BAAyB;QAC3D,IAAI,EAAE,SAAO,IAAI,WAAQ;KAC1B,CAAC,EAP4F,CAO5F,CAAC;IAPU,QAAA,kBAAkB,sBAO5B;IAEH;;OAEG;IACH,IAAM,aAAa,GAAG,kBAAU,CAAC;QAC/B,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM;YACf,YAAY,EAAE,KAAK;YACnB,YAAY,EAAE,OAAO;SACtB;QAED,UAAU,EAAE;YACV,gBAAgB,EAAE,
|
|
1
|
+
{"version":3,"file":"useFieldStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/useFieldStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { FieldControl, FieldProps, FieldSlots, FieldState } from './Field.types';\n\nexport const getFieldClassNames = (name: string): SlotClassNames<FieldSlots<FieldControl>> => ({\n root: `fui-${name}`,\n control: `fui-${name}__control`,\n label: `fui-${name}__label`,\n validationMessage: `fui-${name}__validationMessage`,\n validationMessageIcon: `fui-${name}__validationMessageIcon`,\n hint: `fui-${name}__hint`,\n});\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'grid',\n gridAutoFlow: 'row',\n gridTemplateColumns: 'auto 1fr',\n gridTemplateAreas: `\n \"label label\"\n \"control control\"\n \"validationIcon validationMessage\"\n \"hint hint\"\n `,\n justifyItems: 'start',\n },\n\n horizontal: {\n gridTemplateColumns: '33% auto 1fr',\n gridTemplateAreas: `\n \"label control control\"\n \"label validationIcon validationMessage\"\n \"label hint hint\"\n \"label . .\"\n `,\n },\n\n label: {\n gridColumnStart: 'label',\n gridColumnEnd: 'label',\n gridRowStart: 'label',\n gridRowEnd: 'label',\n },\n\n control: {\n gridColumnStart: 'control',\n gridColumnEnd: 'control',\n },\n\n validationIcon: {\n gridColumnStart: 'validationIcon',\n gridColumnEnd: 'validationIcon',\n },\n\n validationMessage: {\n gridColumnStart: 'validationMessage',\n gridColumnEnd: 'validationMessage',\n },\n\n hint: {\n gridColumnStart: 'hint',\n gridColumnEnd: 'hint',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n marginTop: tokens.spacingVerticalXXS,\n marginBottom: tokens.spacingVerticalXXS,\n },\n\n horizontal: {\n marginRight: tokens.spacingHorizontalM,\n alignSelf: 'start',\n justifySelf: 'stretch',\n },\n});\n\nconst useSecondaryTextStyles = makeStyles({\n base: {\n marginTop: tokens.spacingVerticalXXS,\n color: tokens.colorNeutralForeground3,\n ...typographyStyles.caption1,\n },\n\n error: {\n color: tokens.colorPaletteRedForeground1,\n },\n});\n\nconst useValidationMessageIconStyles = makeStyles({\n base: {\n display: 'block',\n alignSelf: 'start',\n fontSize: '12px',\n lineHeight: '12px',\n marginRight: tokens.spacingHorizontalXS,\n marginTop: tokens.spacingVerticalXS,\n },\n\n error: {\n color: tokens.colorPaletteRedForeground1,\n },\n warning: {\n color: tokens.colorPaletteDarkOrangeForeground1,\n },\n success: {\n color: tokens.colorPaletteGreenForeground1,\n },\n});\n\n/**\n * Apply styling to the Field slots based on the state\n */\nexport const useFieldStyles_unstable = <T extends FieldControl>(state: FieldState<T>) => {\n const classNames = state.classNames;\n const validationState: FieldProps<FieldControl>['validationState'] = state.validationState;\n const horizontal = state.orientation === 'horizontal';\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n classNames.root,\n rootStyles.base,\n horizontal && rootStyles.horizontal,\n state.root.className,\n );\n\n if (state.control) {\n state.control.className = mergeClasses(classNames.control, rootStyles.control, state.control.className);\n }\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(classNames.label, rootStyles.label, labelStyles.base, state.label.className);\n }\n\n const validationMessageIconStyles = useValidationMessageIconStyles();\n if (state.validationMessageIcon) {\n state.validationMessageIcon.className = mergeClasses(\n classNames.validationMessageIcon,\n rootStyles.validationIcon,\n validationMessageIconStyles.base,\n !!validationState && validationMessageIconStyles[validationState],\n state.validationMessageIcon.className,\n );\n }\n\n const secondaryTextStyles = useSecondaryTextStyles();\n if (state.validationMessage) {\n state.validationMessage.className = mergeClasses(\n classNames.validationMessage,\n rootStyles.validationMessage,\n secondaryTextStyles.base,\n validationState === 'error' && secondaryTextStyles.error,\n state.validationMessage.className,\n );\n }\n\n if (state.hint) {\n state.hint.className = mergeClasses(\n classNames.hint,\n secondaryTextStyles.base,\n rootStyles.hint,\n state.hint.className,\n );\n }\n};\n"]}
|
|
@@ -20,11 +20,11 @@ const renderField_unstable = state => {
|
|
|
20
20
|
...slotProps.label
|
|
21
21
|
}), slots.control && React.createElement(slots.control, {
|
|
22
22
|
...slotProps.control
|
|
23
|
+
}), slots.validationMessage && slots.validationMessageIcon && React.createElement(slots.validationMessageIcon, {
|
|
24
|
+
...slotProps.validationMessageIcon
|
|
23
25
|
}), slots.validationMessage && React.createElement(slots.validationMessage, {
|
|
24
26
|
...slotProps.validationMessage
|
|
25
|
-
}, slots.
|
|
26
|
-
...slotProps.validationMessageIcon
|
|
27
|
-
}), slotProps.validationMessage.children), slots.hint && React.createElement(slots.hint, {
|
|
27
|
+
}), slots.hint && React.createElement(slots.hint, {
|
|
28
28
|
...slotProps.hint
|
|
29
29
|
}));
|
|
30
30
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,oBAAoB,GAA4BC,KAAoB,IAAI;EACnF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAA2BH,KAAiC,CAAC;EAElG,OACEI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BJ,KAAK,CAACK,KAAK,IAAIF,oBAACH,KAAK,CAACK,KAAK;IAAA,GAAKJ,SAAS,CAACI;EAAK,EAAI,EAEnDL,KAAK,CAACM,OAAO,IAAIH,oBAACH,KAAK,CAACM,OAAO;IAAA,GAAML,SAAS,CAACK;EAAe,EAAI,EAClEN,KAAK,CAACO,iBAAiB,
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,oBAAoB,GAA4BC,KAAoB,IAAI;EACnF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAA2BH,KAAiC,CAAC;EAElG,OACEI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BJ,KAAK,CAACK,KAAK,IAAIF,oBAACH,KAAK,CAACK,KAAK;IAAA,GAAKJ,SAAS,CAACI;EAAK,EAAI,EAEnDL,KAAK,CAACM,OAAO,IAAIH,oBAACH,KAAK,CAACM,OAAO;IAAA,GAAML,SAAS,CAACK;EAAe,EAAI,EAClEN,KAAK,CAACO,iBAAiB,IAAIP,KAAK,CAACQ,qBAAqB,IACrDL,oBAACH,KAAK,CAACQ,qBAAqB;IAAA,GAAKP,SAAS,CAACO;EAAqB,EACjE,EACAR,KAAK,CAACO,iBAAiB,IAAIJ,oBAACH,KAAK,CAACO,iBAAiB;IAAA,GAAKN,SAAS,CAACM;EAAiB,EAAI,EACvFP,KAAK,CAACS,IAAI,IAAIN,oBAACH,KAAK,CAACS,IAAI;IAAA,GAAKR,SAAS,CAACQ;EAAI,EAAI,CACtC;AAEjB,CAAC;AAfYC,4BAAoB","names":["renderField_unstable","state","slots","slotProps","react_utilities_1","React","root","label","control","validationMessage","validationMessageIcon","hint","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-field/src/components/Field/renderField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FieldControl, FieldSlots, FieldState } from './Field.types';\n\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = <T extends FieldControl>(state: FieldState<T>) => {\n const { slots, slotProps } = getSlots<FieldSlots<FieldControl>>(state as FieldState<FieldControl>);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.label && <slots.label {...slotProps.label} />}\n {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}\n {slots.control && <slots.control {...(slotProps.control as any)} />}\n {slots.validationMessage && slots.validationMessageIcon && (\n <slots.validationMessageIcon {...slotProps.validationMessageIcon} />\n )}\n {slots.validationMessage && <slots.validationMessage {...slotProps.validationMessage} />}\n {slots.hint && <slots.hint {...slotProps.hint} />}\n </slots.root>\n );\n};\n"]}
|
|
@@ -22,17 +22,38 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
22
22
|
base: {
|
|
23
23
|
mc9l5x: "f13qh94s",
|
|
24
24
|
Bxotwcr: "f14np9u9",
|
|
25
|
+
Budl1dq: "fjxzuw",
|
|
26
|
+
zoa1oz: "f6nraym",
|
|
25
27
|
B7hvi0a: "f1m2n5bn"
|
|
26
28
|
},
|
|
27
29
|
horizontal: {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
+
Budl1dq: "fwibhjm",
|
|
31
|
+
zoa1oz: "f7bqb3c"
|
|
30
32
|
},
|
|
31
|
-
|
|
32
|
-
Br312pm: "
|
|
33
|
+
label: {
|
|
34
|
+
Br312pm: "f150pcdf",
|
|
35
|
+
Bw0ie65: "fwm4whi",
|
|
36
|
+
Ijaq50: "f1tty21m",
|
|
37
|
+
nk6f5a: "f19648ye"
|
|
38
|
+
},
|
|
39
|
+
control: {
|
|
40
|
+
Br312pm: "f1bfa6ju",
|
|
41
|
+
Bw0ie65: "fl3lap4"
|
|
42
|
+
},
|
|
43
|
+
validationIcon: {
|
|
44
|
+
Br312pm: "ftfzah7",
|
|
45
|
+
Bw0ie65: "f1fih8f9"
|
|
46
|
+
},
|
|
47
|
+
validationMessage: {
|
|
48
|
+
Br312pm: "f1n69xcw",
|
|
49
|
+
Bw0ie65: "f1hw1m5m"
|
|
50
|
+
},
|
|
51
|
+
hint: {
|
|
52
|
+
Br312pm: "fbug73u",
|
|
53
|
+
Bw0ie65: "fbtgo1w"
|
|
33
54
|
}
|
|
34
55
|
}, {
|
|
35
|
-
d: [".f13qh94s{display:grid;}", ".f14np9u9{grid-auto-flow:row;}", ".f1m2n5bn{justify-items:start;}", ".
|
|
56
|
+
d: [".f13qh94s{display:grid;}", ".f14np9u9{grid-auto-flow:row;}", ".fjxzuw{grid-template-columns:auto 1fr;}", ".f6nraym{grid-template-areas:\"label label\" \"control control\" \"validationIcon validationMessage\" \"hint hint\";}", ".f1m2n5bn{justify-items:start;}", ".fwibhjm{grid-template-columns:33% auto 1fr;}", ".f7bqb3c{grid-template-areas:\"label control control\" \"label validationIcon validationMessage\" \"label hint hint\" \"label . .\";}", ".f150pcdf{grid-column-start:label;}", ".fwm4whi{grid-column-end:label;}", ".f1tty21m{grid-row-start:label;}", ".f19648ye{grid-row-end:label;}", ".f1bfa6ju{grid-column-start:control;}", ".fl3lap4{grid-column-end:control;}", ".ftfzah7{grid-column-start:validationIcon;}", ".f1fih8f9{grid-column-end:validationIcon;}", ".f1n69xcw{grid-column-start:validationMessage;}", ".f1hw1m5m{grid-column-end:validationMessage;}", ".fbug73u{grid-column-start:hint;}", ".fbtgo1w{grid-column-end:hint;}"]
|
|
36
57
|
});
|
|
37
58
|
const useLabelStyles = /*#__PURE__*/react_1.__styles({
|
|
38
59
|
base: {
|
|
@@ -40,14 +61,12 @@ const useLabelStyles = /*#__PURE__*/react_1.__styles({
|
|
|
40
61
|
jrapky: "fyacil5"
|
|
41
62
|
},
|
|
42
63
|
horizontal: {
|
|
43
|
-
Ijaq50: "f16hsg94",
|
|
44
|
-
nk6f5a: "f1nzqi2z",
|
|
45
64
|
t21cq0: ["fkujibs", "f199hnxi"],
|
|
46
65
|
qb2dma: "f9h729m",
|
|
47
66
|
Bdqf98w: "fhb5wj7"
|
|
48
67
|
}
|
|
49
68
|
}, {
|
|
50
|
-
d: [".fg30ohd{margin-top:var(--spacingVerticalXXS);}", ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}", ".
|
|
69
|
+
d: [".fg30ohd{margin-top:var(--spacingVerticalXXS);}", ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".fhb5wj7{justify-self:stretch;}"]
|
|
51
70
|
});
|
|
52
71
|
const useSecondaryTextStyles = /*#__PURE__*/react_1.__styles({
|
|
53
72
|
base: {
|
|
@@ -66,10 +85,12 @@ const useSecondaryTextStyles = /*#__PURE__*/react_1.__styles({
|
|
|
66
85
|
});
|
|
67
86
|
const useValidationMessageIconStyles = /*#__PURE__*/react_1.__styles({
|
|
68
87
|
base: {
|
|
88
|
+
mc9l5x: "ftgm304",
|
|
89
|
+
qb2dma: "f9h729m",
|
|
69
90
|
Be2twd7: "f1ugzwwg",
|
|
70
91
|
Bg96gwp: "fp4gqsa",
|
|
71
|
-
|
|
72
|
-
|
|
92
|
+
t21cq0: ["fm0x6gh", "fbyavb5"],
|
|
93
|
+
B6of3ja: "fww94b8"
|
|
73
94
|
},
|
|
74
95
|
error: {
|
|
75
96
|
sj55zd: "f1hcrxcs"
|
|
@@ -81,7 +102,7 @@ const useValidationMessageIconStyles = /*#__PURE__*/react_1.__styles({
|
|
|
81
102
|
sj55zd: "ffmvakt"
|
|
82
103
|
}
|
|
83
104
|
}, {
|
|
84
|
-
d: [".f1ugzwwg{font-size:12px;}", ".fp4gqsa{line-height:12px;}", ".
|
|
105
|
+
d: [".ftgm304{display:block;}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".f1ugzwwg{font-size:12px;}", ".fp4gqsa{line-height:12px;}", ".fm0x6gh{margin-right:var(--spacingHorizontalXS);}", ".fbyavb5{margin-left:var(--spacingHorizontalXS);}", ".fww94b8{margin-top:var(--spacingVerticalXS);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}"]
|
|
85
106
|
});
|
|
86
107
|
/**
|
|
87
108
|
* Apply styling to the Field slots based on the state
|
|
@@ -93,22 +114,22 @@ const useFieldStyles_unstable = state => {
|
|
|
93
114
|
const rootStyles = useRootStyles();
|
|
94
115
|
state.root.className = react_1.mergeClasses(classNames.root, rootStyles.base, horizontal && rootStyles.horizontal, state.root.className);
|
|
95
116
|
if (state.control) {
|
|
96
|
-
state.control.className = react_1.mergeClasses(classNames.control,
|
|
117
|
+
state.control.className = react_1.mergeClasses(classNames.control, rootStyles.control, state.control.className);
|
|
97
118
|
}
|
|
98
119
|
const labelStyles = useLabelStyles();
|
|
99
120
|
if (state.label) {
|
|
100
|
-
state.label.className = react_1.mergeClasses(classNames.label,
|
|
121
|
+
state.label.className = react_1.mergeClasses(classNames.label, rootStyles.label, labelStyles.base, state.label.className);
|
|
101
122
|
}
|
|
102
123
|
const validationMessageIconStyles = useValidationMessageIconStyles();
|
|
103
124
|
if (state.validationMessageIcon) {
|
|
104
|
-
state.validationMessageIcon.className = react_1.mergeClasses(classNames.validationMessageIcon, validationMessageIconStyles.base, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
|
|
125
|
+
state.validationMessageIcon.className = react_1.mergeClasses(classNames.validationMessageIcon, rootStyles.validationIcon, validationMessageIconStyles.base, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
|
|
105
126
|
}
|
|
106
127
|
const secondaryTextStyles = useSecondaryTextStyles();
|
|
107
128
|
if (state.validationMessage) {
|
|
108
|
-
state.validationMessage.className = react_1.mergeClasses(classNames.validationMessage,
|
|
129
|
+
state.validationMessage.className = react_1.mergeClasses(classNames.validationMessage, rootStyles.validationMessage, secondaryTextStyles.base, validationState === 'error' && secondaryTextStyles.error, state.validationMessage.className);
|
|
109
130
|
}
|
|
110
131
|
if (state.hint) {
|
|
111
|
-
state.hint.className = react_1.mergeClasses(classNames.hint, secondaryTextStyles.base,
|
|
132
|
+
state.hint.className = react_1.mergeClasses(classNames.hint, secondaryTextStyles.base, rootStyles.hint, state.hint.className);
|
|
112
133
|
}
|
|
113
134
|
};
|
|
114
135
|
exports.useFieldStyles_unstable = useFieldStyles_unstable;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":";;;;;;AAAA;AAEA;AAGO,MAAMA,kBAAkB,GAAIC,IAAY,KAAgD;EAC7FC,IAAI,EAAE,OAAOD,IAAI,EAAE;EACnBE,OAAO,EAAE,OAAOF,IAAI,WAAW;EAC/BG,KAAK,EAAE,OAAOH,IAAI,SAAS;EAC3BI,iBAAiB,EAAE,OAAOJ,IAAI,qBAAqB;EACnDK,qBAAqB,EAAE,OAAOL,IAAI,yBAAyB;EAC3DM,IAAI,EAAE,OAAON,IAAI;CAClB,CAAC;AAPWO,0BAAkB;AAS/B;;;AAGA,MAAMC,aAAa,gBAAGC,gBAAU;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,
|
|
1
|
+
{"version":3,"mappings":"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","names":["getFieldClassNames","name","root","control","label","validationMessage","validationMessageIcon","hint","exports","useRootStyles","react_1","useLabelStyles","useSecondaryTextStyles","useValidationMessageIconStyles","useFieldStyles_unstable","state","classNames","validationState","horizontal","orientation","rootStyles","className","base","labelStyles","validationMessageIconStyles","validationIcon","secondaryTextStyles","error"],"sourceRoot":"../src/","sources":["packages/react-components/react-field/src/components/Field/useFieldStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { FieldControl, FieldProps, FieldSlots, FieldState } from './Field.types';\n\nexport const getFieldClassNames = (name: string): SlotClassNames<FieldSlots<FieldControl>> => ({\n root: `fui-${name}`,\n control: `fui-${name}__control`,\n label: `fui-${name}__label`,\n validationMessage: `fui-${name}__validationMessage`,\n validationMessageIcon: `fui-${name}__validationMessageIcon`,\n hint: `fui-${name}__hint`,\n});\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'grid',\n gridAutoFlow: 'row',\n gridTemplateColumns: 'auto 1fr',\n gridTemplateAreas: `\n \"label label\"\n \"control control\"\n \"validationIcon validationMessage\"\n \"hint hint\"\n `,\n justifyItems: 'start',\n },\n\n horizontal: {\n gridTemplateColumns: '33% auto 1fr',\n gridTemplateAreas: `\n \"label control control\"\n \"label validationIcon validationMessage\"\n \"label hint hint\"\n \"label . .\"\n `,\n },\n\n label: {\n gridColumnStart: 'label',\n gridColumnEnd: 'label',\n gridRowStart: 'label',\n gridRowEnd: 'label',\n },\n\n control: {\n gridColumnStart: 'control',\n gridColumnEnd: 'control',\n },\n\n validationIcon: {\n gridColumnStart: 'validationIcon',\n gridColumnEnd: 'validationIcon',\n },\n\n validationMessage: {\n gridColumnStart: 'validationMessage',\n gridColumnEnd: 'validationMessage',\n },\n\n hint: {\n gridColumnStart: 'hint',\n gridColumnEnd: 'hint',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n marginTop: tokens.spacingVerticalXXS,\n marginBottom: tokens.spacingVerticalXXS,\n },\n\n horizontal: {\n marginRight: tokens.spacingHorizontalM,\n alignSelf: 'start',\n justifySelf: 'stretch',\n },\n});\n\nconst useSecondaryTextStyles = makeStyles({\n base: {\n marginTop: tokens.spacingVerticalXXS,\n color: tokens.colorNeutralForeground3,\n ...typographyStyles.caption1,\n },\n\n error: {\n color: tokens.colorPaletteRedForeground1,\n },\n});\n\nconst useValidationMessageIconStyles = makeStyles({\n base: {\n display: 'block',\n alignSelf: 'start',\n fontSize: '12px',\n lineHeight: '12px',\n marginRight: tokens.spacingHorizontalXS,\n marginTop: tokens.spacingVerticalXS,\n },\n\n error: {\n color: tokens.colorPaletteRedForeground1,\n },\n warning: {\n color: tokens.colorPaletteDarkOrangeForeground1,\n },\n success: {\n color: tokens.colorPaletteGreenForeground1,\n },\n});\n\n/**\n * Apply styling to the Field slots based on the state\n */\nexport const useFieldStyles_unstable = <T extends FieldControl>(state: FieldState<T>) => {\n const classNames = state.classNames;\n const validationState: FieldProps<FieldControl>['validationState'] = state.validationState;\n const horizontal = state.orientation === 'horizontal';\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n classNames.root,\n rootStyles.base,\n horizontal && rootStyles.horizontal,\n state.root.className,\n );\n\n if (state.control) {\n state.control.className = mergeClasses(classNames.control, rootStyles.control, state.control.className);\n }\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(classNames.label, rootStyles.label, labelStyles.base, state.label.className);\n }\n\n const validationMessageIconStyles = useValidationMessageIconStyles();\n if (state.validationMessageIcon) {\n state.validationMessageIcon.className = mergeClasses(\n classNames.validationMessageIcon,\n rootStyles.validationIcon,\n validationMessageIconStyles.base,\n !!validationState && validationMessageIconStyles[validationState],\n state.validationMessageIcon.className,\n );\n }\n\n const secondaryTextStyles = useSecondaryTextStyles();\n if (state.validationMessage) {\n state.validationMessage.className = mergeClasses(\n classNames.validationMessage,\n rootStyles.validationMessage,\n secondaryTextStyles.base,\n validationState === 'error' && secondaryTextStyles.error,\n state.validationMessage.className,\n );\n }\n\n if (state.hint) {\n state.hint.className = mergeClasses(\n classNames.hint,\n secondaryTextStyles.base,\n rootStyles.hint,\n state.hint.className,\n );\n }\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-field",
|
|
3
|
-
"version": "9.0.0-alpha.
|
|
3
|
+
"version": "9.0.0-alpha.15",
|
|
4
4
|
"description": "Fluent UI Field components",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -27,14 +27,15 @@
|
|
|
27
27
|
"@fluentui/eslint-plugin": "*",
|
|
28
28
|
"@fluentui/react-conformance": "*",
|
|
29
29
|
"@fluentui/react-conformance-griffel": "9.0.0-beta.19",
|
|
30
|
-
"@fluentui/scripts": "*"
|
|
30
|
+
"@fluentui/scripts-api-extractor": "*",
|
|
31
|
+
"@fluentui/scripts-tasks": "*"
|
|
31
32
|
},
|
|
32
33
|
"dependencies": {
|
|
33
|
-
"@fluentui/react-context-selector": "^9.1.
|
|
34
|
+
"@fluentui/react-context-selector": "^9.1.5",
|
|
34
35
|
"@fluentui/react-icons": "^2.0.175",
|
|
35
|
-
"@fluentui/react-label": "^9.0.
|
|
36
|
+
"@fluentui/react-label": "^9.0.17",
|
|
36
37
|
"@fluentui/react-theme": "^9.1.5",
|
|
37
|
-
"@fluentui/react-utilities": "^9.
|
|
38
|
+
"@fluentui/react-utilities": "^9.4.0",
|
|
38
39
|
"@griffel/react": "^1.5.2",
|
|
39
40
|
"tslib": "^2.1.0"
|
|
40
41
|
},
|