@fluentui/react-field 9.0.0-alpha.12 → 9.0.0-alpha.13
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +54 -1
- package/CHANGELOG.md +15 -2
- package/lib/components/Field/renderField.js +12 -7
- package/lib/components/Field/renderField.js.map +1 -1
- package/lib/components/Field/useField.js +5 -12
- package/lib/components/Field/useField.js.map +1 -1
- package/lib/components/Field/useFieldStyles.js +42 -56
- package/lib/components/Field/useFieldStyles.js.map +1 -1
- package/lib-commonjs/Field.js +0 -2
- package/lib-commonjs/Field.js.map +1 -1
- package/lib-commonjs/components/Field/Field.types.js.map +1 -1
- package/lib-commonjs/components/Field/SlotComponent.types.js.map +1 -1
- package/lib-commonjs/components/Field/index.js +0 -5
- package/lib-commonjs/components/Field/index.js.map +1 -1
- package/lib-commonjs/components/Field/renderField.js +12 -11
- package/lib-commonjs/components/Field/renderField.js.map +1 -1
- package/lib-commonjs/components/Field/useField.js +5 -19
- package/lib-commonjs/components/Field/useField.js.map +1 -1
- package/lib-commonjs/components/Field/useFieldStyles.js +42 -61
- package/lib-commonjs/components/Field/useFieldStyles.js.map +1 -1
- package/lib-commonjs/index.js +0 -2
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +7 -7
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,60 @@
|
|
|
2
2
|
"name": "@fluentui/react-field",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Wed,
|
|
5
|
+
"date": "Wed, 04 Jan 2023 01:35:26 GMT",
|
|
6
|
+
"tag": "@fluentui/react-field_v9.0.0-alpha.13",
|
|
7
|
+
"version": "9.0.0-alpha.13",
|
|
8
|
+
"comments": {
|
|
9
|
+
"none": [
|
|
10
|
+
{
|
|
11
|
+
"author": "martinhochel@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-field",
|
|
13
|
+
"commit": "194b0cf0cc27c1c1233aa945f09b3ad29778d8ca",
|
|
14
|
+
"comment": "chore(scripts): use for @fluentui/scripts version within all package.json"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "martinhochel@microsoft.com",
|
|
18
|
+
"package": "@fluentui/react-field",
|
|
19
|
+
"commit": "4ec2b998b294d6d9c3196d3d82893bdd97d0c105",
|
|
20
|
+
"comment": "chore(scripts): move index.ts to to follow sub-folder domain packaging"
|
|
21
|
+
}
|
|
22
|
+
],
|
|
23
|
+
"prerelease": [
|
|
24
|
+
{
|
|
25
|
+
"author": "olfedias@microsoft.com",
|
|
26
|
+
"package": "@fluentui/react-field",
|
|
27
|
+
"commit": "2c38f1e4ae07b2b60df596efe11015a68f166dbf",
|
|
28
|
+
"comment": "chore: Update Griffel to latest version"
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"author": "beachball",
|
|
32
|
+
"package": "@fluentui/react-field",
|
|
33
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.4",
|
|
34
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"author": "beachball",
|
|
38
|
+
"package": "@fluentui/react-field",
|
|
39
|
+
"comment": "Bump @fluentui/react-label to v9.0.15",
|
|
40
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"author": "beachball",
|
|
44
|
+
"package": "@fluentui/react-field",
|
|
45
|
+
"comment": "Bump @fluentui/react-utilities to v9.3.1",
|
|
46
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"author": "beachball",
|
|
50
|
+
"package": "@fluentui/react-field",
|
|
51
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19",
|
|
52
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
|
53
|
+
}
|
|
54
|
+
]
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"date": "Wed, 21 Dec 2022 10:20:33 GMT",
|
|
6
59
|
"tag": "@fluentui/react-field_v9.0.0-alpha.12",
|
|
7
60
|
"version": "9.0.0-alpha.12",
|
|
8
61
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,25 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-field
|
|
2
2
|
|
|
3
|
-
This log was last generated on Wed,
|
|
3
|
+
This log was last generated on Wed, 04 Jan 2023 01:35:26 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-alpha.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.13)
|
|
8
|
+
|
|
9
|
+
Wed, 04 Jan 2023 01:35:26 GMT
|
|
10
|
+
[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
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-context-selector to v9.1.4 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
|
16
|
+
- Bump @fluentui/react-label to v9.0.15 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
|
17
|
+
- Bump @fluentui/react-utilities to v9.3.1 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
|
18
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
|
19
|
+
|
|
7
20
|
## [9.0.0-alpha.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.12)
|
|
8
21
|
|
|
9
|
-
Wed, 21 Dec 2022 10:
|
|
22
|
+
Wed, 21 Dec 2022 10:20:33 GMT
|
|
10
23
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.11..@fluentui/react-field_v9.0.0-alpha.12)
|
|
11
24
|
|
|
12
25
|
### Changes
|
|
@@ -3,18 +3,23 @@ import { getSlots } from '@fluentui/react-utilities';
|
|
|
3
3
|
/**
|
|
4
4
|
* Render the final JSX of Field
|
|
5
5
|
*/
|
|
6
|
-
|
|
7
6
|
export const renderField_unstable = state => {
|
|
8
7
|
const {
|
|
9
8
|
slots,
|
|
10
9
|
slotProps
|
|
11
10
|
} = getSlots(state);
|
|
12
|
-
return /*#__PURE__*/React.createElement(slots.root, {
|
|
13
|
-
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
}, slots.
|
|
17
|
-
|
|
11
|
+
return /*#__PURE__*/React.createElement(slots.root, {
|
|
12
|
+
...slotProps.root
|
|
13
|
+
}, slots.label && /*#__PURE__*/React.createElement(slots.label, {
|
|
14
|
+
...slotProps.label
|
|
15
|
+
}), slots.control && /*#__PURE__*/React.createElement(slots.control, {
|
|
16
|
+
...slotProps.control
|
|
17
|
+
}), slots.validationMessage && /*#__PURE__*/React.createElement(slots.validationMessage, {
|
|
18
|
+
...slotProps.validationMessage
|
|
19
|
+
}, slots.validationMessageIcon && /*#__PURE__*/React.createElement(slots.validationMessageIcon, {
|
|
20
|
+
...slotProps.validationMessageIcon
|
|
21
|
+
}), slotProps.validationMessage.children), slots.hint && /*#__PURE__*/React.createElement(slots.hint, {
|
|
22
|
+
...slotProps.hint
|
|
18
23
|
}));
|
|
19
24
|
};
|
|
20
25
|
//# sourceMappingURL=renderField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
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,iBACtBT,oBAACI,KAAK,CAACK,iBAAiB;IAAA,GAAKJ,SAAS,CAACI;EAAiB,GACrDL,KAAK,CAACM,qBAAqB,iBAAIV,oBAACI,KAAK,CAACM,qBAAqB;IAAA,GAAKL,SAAS,CAACK;EAAqB,EAAI,EACnGL,SAAS,CAACI,iBAAiB,CAACE,QAAQ,CAExC,EACAP,KAAK,CAACQ,IAAI,iBAAIZ,oBAACI,KAAK,CAACQ,IAAI;IAAA,GAAKP,SAAS,CAACO;EAAI,EAAI,CACtC;AAEjB,CAAC","names":["React","getSlots","renderField_unstable","state","slots","slotProps","root","label","control","validationMessage","validationMessageIcon","children","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 && (\n <slots.validationMessage {...slotProps.validationMessage}>\n {slots.validationMessageIcon && <slots.validationMessageIcon {...slotProps.validationMessageIcon} />}\n {slotProps.validationMessage.children}\n </slots.validationMessage>\n )}\n {slots.hint && <slots.hint {...slotProps.hint} />}\n </slots.root>\n );\n};\n"]}
|
|
@@ -10,7 +10,6 @@ const validationMessageIcons = {
|
|
|
10
10
|
/**
|
|
11
11
|
* Partition the props used by the Field itself, from the props that are passed to the underlying field component.
|
|
12
12
|
*/
|
|
13
|
-
|
|
14
13
|
export const getPartitionedFieldProps = props => {
|
|
15
14
|
const {
|
|
16
15
|
className,
|
|
@@ -49,10 +48,8 @@ export const getPartitionedFieldProps = props => {
|
|
|
49
48
|
* @param ref - Ref to the control slot (primary slot)
|
|
50
49
|
* @param params - Configuration parameters for this Field
|
|
51
50
|
*/
|
|
52
|
-
|
|
53
51
|
export const useField_unstable = (props, ref, params) => {
|
|
54
52
|
var _a, _b, _c;
|
|
55
|
-
|
|
56
53
|
const [fieldProps, controlProps] = getPartitionedFieldProps(props);
|
|
57
54
|
const {
|
|
58
55
|
orientation = 'vertical',
|
|
@@ -71,10 +68,11 @@ export const useField_unstable = (props, ref, params) => {
|
|
|
71
68
|
defaultProps: {
|
|
72
69
|
id: baseId + '__label',
|
|
73
70
|
required: controlProps.required,
|
|
74
|
-
size: typeof controlProps.size === 'string' ? controlProps.size : undefined
|
|
75
|
-
|
|
71
|
+
size: typeof controlProps.size === 'string' ? controlProps.size : undefined
|
|
72
|
+
// htmlFor is handled below
|
|
76
73
|
}
|
|
77
74
|
});
|
|
75
|
+
|
|
78
76
|
const validationMessage = resolveShorthand(fieldProps.validationMessage, {
|
|
79
77
|
defaultProps: {
|
|
80
78
|
id: baseId + '__validationMessage'
|
|
@@ -90,23 +88,20 @@ export const useField_unstable = (props, ref, params) => {
|
|
|
90
88
|
defaultProps: {
|
|
91
89
|
children: validationState ? validationMessageIcons[validationState] : undefined
|
|
92
90
|
}
|
|
93
|
-
});
|
|
94
|
-
|
|
91
|
+
});
|
|
92
|
+
// Hook up aria props on the control
|
|
95
93
|
if (label && labelConnection === 'aria-labelledby') {
|
|
96
94
|
(_a = controlProps['aria-labelledby']) !== null && _a !== void 0 ? _a : controlProps['aria-labelledby'] = label.id;
|
|
97
95
|
}
|
|
98
|
-
|
|
99
96
|
if (validationMessage || hint) {
|
|
100
97
|
// The control is described by the validation message, or hint, or both
|
|
101
98
|
// We also preserve and append any aria-describedby supplied by the user
|
|
102
99
|
// For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933
|
|
103
100
|
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(' ');
|
|
104
101
|
}
|
|
105
|
-
|
|
106
102
|
if (validationState === 'error' && ariaInvalidOnError) {
|
|
107
103
|
(_b = controlProps['aria-invalid']) !== null && _b !== void 0 ? _b : controlProps['aria-invalid'] = true;
|
|
108
104
|
}
|
|
109
|
-
|
|
110
105
|
const control = resolveShorthand(fieldProps.control, {
|
|
111
106
|
required: true,
|
|
112
107
|
defaultProps: {
|
|
@@ -115,11 +110,9 @@ export const useField_unstable = (props, ref, params) => {
|
|
|
115
110
|
...controlProps
|
|
116
111
|
}
|
|
117
112
|
});
|
|
118
|
-
|
|
119
113
|
if (label && labelConnection === 'htmlFor') {
|
|
120
114
|
(_c = label.htmlFor) !== null && _c !== void 0 ? _c : label.htmlFor = control.id;
|
|
121
115
|
}
|
|
122
|
-
|
|
123
116
|
const state = {
|
|
124
117
|
orientation,
|
|
125
118
|
validationState,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"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","names":["React","CheckmarkCircle12Filled","ErrorCircle12Filled","Warning12Filled","Label","getNativeElementProps","resolveShorthand","useId","validationMessageIcons","error","warning","success","getPartitionedFieldProps","props","className","control","hint","label","orientation","root","style","validationMessage","validationMessageIcon","validationState","restOfProps","fieldProps","useField_unstable","ref","params","controlProps","labelConnection","ariaInvalidOnError","baseId","required","defaultProps","id","size","undefined","children","filter","Boolean","join","htmlFor","state","classNames","components","component"],"sourceRoot":"../src/","sources":["packages/react-components/react-field/src/components/Field/useField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { FieldConfig, FieldControl, FieldPropsWithOptionalComponentProps, FieldState } from './Field.types';\n\nconst validationMessageIcons = {\n error: <ErrorCircle12Filled />,\n warning: <Warning12Filled />,\n success: <CheckmarkCircle12Filled />,\n} as const;\n\n/**\n * Partition the props used by the Field itself, from the props that are passed to the underlying field component.\n */\nexport const getPartitionedFieldProps = (props: FieldPropsWithOptionalComponentProps<FieldControl>) => {\n const {\n className,\n control,\n hint,\n label,\n orientation,\n root,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n ...restOfProps\n } = props;\n\n const fieldProps = {\n className,\n control,\n hint,\n label,\n orientation,\n root,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n };\n\n return [fieldProps, restOfProps] as const;\n};\n\n/**\n * Create the state required to render Field.\n *\n * The returned state can be modified with hooks such as useFieldStyles_unstable,\n * before being passed to renderField_unstable.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the control slot (primary slot)\n * @param params - Configuration parameters for this Field\n */\nexport const useField_unstable = <T extends FieldControl>(\n props: FieldPropsWithOptionalComponentProps<T>,\n ref: React.Ref<HTMLElement>,\n params: FieldConfig<T>,\n): FieldState<T> => {\n const [fieldProps, controlProps] = getPartitionedFieldProps(props);\n const { orientation = 'vertical', validationState } = fieldProps;\n const { labelConnection = 'htmlFor', ariaInvalidOnError = true } = params;\n\n const baseId = useId('field-');\n\n const root = resolveShorthand(fieldProps.root, {\n required: true,\n defaultProps: getNativeElementProps('div', fieldProps),\n });\n\n const label = resolveShorthand(fieldProps.label, {\n defaultProps: {\n id: baseId + '__label',\n required: controlProps.required,\n size: typeof controlProps.size === 'string' ? controlProps.size : undefined,\n // htmlFor is handled below\n },\n });\n\n const validationMessage = resolveShorthand(fieldProps.validationMessage, {\n defaultProps: {\n id: baseId + '__validationMessage',\n },\n });\n\n const hint = resolveShorthand(fieldProps.hint, {\n defaultProps: {\n id: baseId + '__hint',\n },\n });\n\n const validationMessageIcon = resolveShorthand(fieldProps.validationMessageIcon, {\n required: !!validationState,\n defaultProps: {\n children: validationState ? validationMessageIcons[validationState] : undefined,\n },\n });\n\n // Hook up aria props on the control\n if (label && labelConnection === 'aria-labelledby') {\n controlProps['aria-labelledby'] ??= label.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?.id, hint?.id, controlProps['aria-describedby']]\n .filter(Boolean)\n .join(' ');\n }\n\n if (validationState === 'error' && ariaInvalidOnError) {\n controlProps['aria-invalid'] ??= true;\n }\n\n const control = resolveShorthand(fieldProps.control, {\n required: true,\n defaultProps: {\n ref,\n id: baseId + '__control',\n ...controlProps,\n },\n });\n\n if (label && labelConnection === 'htmlFor') {\n label.htmlFor ??= control.id;\n }\n\n const state: FieldState<FieldControl> = {\n orientation,\n validationState,\n classNames: params.classNames,\n components: {\n root: 'div',\n control: params.component,\n label: Label,\n validationMessage: 'div',\n validationMessageIcon: 'span',\n hint: 'div',\n },\n root,\n control,\n label,\n validationMessageIcon,\n validationMessage,\n hint,\n };\n\n return state as FieldState<T>;\n};\n"]}
|
|
@@ -11,109 +11,95 @@ export const getFieldClassNames = name => ({
|
|
|
11
11
|
/**
|
|
12
12
|
* Styles for the root slot
|
|
13
13
|
*/
|
|
14
|
-
|
|
15
14
|
const useRootStyles = /*#__PURE__*/__styles({
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
15
|
+
base: {
|
|
16
|
+
mc9l5x: "f13qh94s",
|
|
17
|
+
Bxotwcr: "f14np9u9",
|
|
18
|
+
B7hvi0a: "f1m2n5bn"
|
|
20
19
|
},
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
20
|
+
horizontal: {
|
|
21
|
+
wkccdc: "fai812u",
|
|
22
|
+
Budl1dq: "fckz59x"
|
|
24
23
|
},
|
|
25
|
-
|
|
26
|
-
|
|
24
|
+
secondColumn: {
|
|
25
|
+
Br312pm: "fd46tj4"
|
|
27
26
|
}
|
|
28
27
|
}, {
|
|
29
|
-
|
|
28
|
+
d: [".f13qh94s{display:grid;}", ".f14np9u9{grid-auto-flow:row;}", ".f1m2n5bn{justify-items:start;}", ".fai812u{grid-template-rows:auto auto auto auto;}", ".fckz59x{grid-template-columns:1fr 2fr;}", ".fd46tj4{grid-column-start:2;}"]
|
|
30
29
|
});
|
|
31
|
-
|
|
32
30
|
const useLabelStyles = /*#__PURE__*/__styles({
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
31
|
+
base: {
|
|
32
|
+
B6of3ja: "fg30ohd",
|
|
33
|
+
jrapky: "fyacil5"
|
|
36
34
|
},
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
35
|
+
horizontal: {
|
|
36
|
+
Ijaq50: "f16hsg94",
|
|
37
|
+
nk6f5a: "f1nzqi2z",
|
|
38
|
+
t21cq0: ["fkujibs", "f199hnxi"],
|
|
39
|
+
qb2dma: "f9h729m",
|
|
40
|
+
Bdqf98w: "fhb5wj7"
|
|
43
41
|
}
|
|
44
42
|
}, {
|
|
45
|
-
|
|
43
|
+
d: [".fg30ohd{margin-top:var(--spacingVerticalXXS);}", ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}", ".f16hsg94{grid-row-start:1;}", ".f1nzqi2z{grid-row-end:-1;}", ".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;}"]
|
|
46
44
|
});
|
|
47
|
-
|
|
48
45
|
const useSecondaryTextStyles = /*#__PURE__*/__styles({
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
46
|
+
base: {
|
|
47
|
+
B6of3ja: "fg30ohd",
|
|
48
|
+
sj55zd: "f11d4kpn",
|
|
49
|
+
Bahqtrf: "fk6fouc",
|
|
50
|
+
Be2twd7: "fy9rknc",
|
|
51
|
+
Bhrd7zp: "figsok6",
|
|
52
|
+
Bg96gwp: "fwrc4pm"
|
|
56
53
|
},
|
|
57
|
-
|
|
58
|
-
|
|
54
|
+
error: {
|
|
55
|
+
sj55zd: "f1hcrxcs"
|
|
59
56
|
}
|
|
60
57
|
}, {
|
|
61
|
-
|
|
58
|
+
d: [".fg30ohd{margin-top:var(--spacingVerticalXXS);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}"]
|
|
62
59
|
});
|
|
63
|
-
|
|
64
60
|
const useValidationMessageIconStyles = /*#__PURE__*/__styles({
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
61
|
+
base: {
|
|
62
|
+
Be2twd7: "f1ugzwwg",
|
|
63
|
+
Bg96gwp: "fp4gqsa",
|
|
64
|
+
ha4doy: "fmrv4ls",
|
|
65
|
+
t21cq0: ["fm0x6gh", "fbyavb5"]
|
|
70
66
|
},
|
|
71
|
-
|
|
72
|
-
|
|
67
|
+
error: {
|
|
68
|
+
sj55zd: "f1hcrxcs"
|
|
73
69
|
},
|
|
74
|
-
|
|
75
|
-
|
|
70
|
+
warning: {
|
|
71
|
+
sj55zd: "f1k5f75o"
|
|
76
72
|
},
|
|
77
|
-
|
|
78
|
-
|
|
73
|
+
success: {
|
|
74
|
+
sj55zd: "ffmvakt"
|
|
79
75
|
}
|
|
80
76
|
}, {
|
|
81
|
-
|
|
77
|
+
d: [".f1ugzwwg{font-size:12px;}", ".fp4gqsa{line-height:12px;}", ".fmrv4ls{vertical-align:middle;}", ".fm0x6gh{margin-right:var(--spacingHorizontalXS);}", ".fbyavb5{margin-left:var(--spacingHorizontalXS);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}"]
|
|
82
78
|
});
|
|
83
79
|
/**
|
|
84
80
|
* Apply styling to the Field slots based on the state
|
|
85
81
|
*/
|
|
86
|
-
|
|
87
|
-
|
|
88
82
|
export const useFieldStyles_unstable = state => {
|
|
89
83
|
const classNames = state.classNames;
|
|
90
84
|
const validationState = state.validationState;
|
|
91
85
|
const horizontal = state.orientation === 'horizontal';
|
|
92
86
|
const rootStyles = useRootStyles();
|
|
93
87
|
state.root.className = mergeClasses(classNames.root, rootStyles.base, horizontal && rootStyles.horizontal, state.root.className);
|
|
94
|
-
|
|
95
88
|
if (state.control) {
|
|
96
89
|
state.control.className = mergeClasses(classNames.control, horizontal && rootStyles.secondColumn, state.control.className);
|
|
97
90
|
}
|
|
98
|
-
|
|
99
91
|
const labelStyles = useLabelStyles();
|
|
100
|
-
|
|
101
92
|
if (state.label) {
|
|
102
93
|
state.label.className = mergeClasses(classNames.label, labelStyles.base, horizontal && labelStyles.horizontal, state.label.className);
|
|
103
94
|
}
|
|
104
|
-
|
|
105
95
|
const validationMessageIconStyles = useValidationMessageIconStyles();
|
|
106
|
-
|
|
107
96
|
if (state.validationMessageIcon) {
|
|
108
97
|
state.validationMessageIcon.className = mergeClasses(classNames.validationMessageIcon, validationMessageIconStyles.base, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
|
|
109
98
|
}
|
|
110
|
-
|
|
111
99
|
const secondaryTextStyles = useSecondaryTextStyles();
|
|
112
|
-
|
|
113
100
|
if (state.validationMessage) {
|
|
114
101
|
state.validationMessage.className = mergeClasses(classNames.validationMessage, secondaryTextStyles.base, horizontal && rootStyles.secondColumn, validationState === 'error' && secondaryTextStyles.error, state.validationMessage.className);
|
|
115
102
|
}
|
|
116
|
-
|
|
117
103
|
if (state.hint) {
|
|
118
104
|
state.hint.className = mergeClasses(classNames.hint, secondaryTextStyles.base, horizontal && rootStyles.secondColumn, state.hint.className);
|
|
119
105
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
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","secondColumn","labelStyles","validationMessageIconStyles","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 justifyItems: 'start',\n },\n\n horizontal: {\n gridTemplateRows: 'auto auto auto auto',\n gridTemplateColumns: '1fr 2fr',\n },\n\n secondColumn: {\n gridColumnStart: '2',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n marginTop: tokens.spacingVerticalXXS,\n marginBottom: tokens.spacingVerticalXXS,\n },\n\n horizontal: {\n gridRowStart: '1',\n gridRowEnd: '-1',\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 fontSize: '12px',\n lineHeight: '12px',\n verticalAlign: 'middle',\n marginRight: tokens.spacingHorizontalXS,\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(\n classNames.control,\n horizontal && rootStyles.secondColumn,\n state.control.className,\n );\n }\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n classNames.label,\n labelStyles.base,\n horizontal && labelStyles.horizontal,\n state.label.className,\n );\n }\n\n const validationMessageIconStyles = useValidationMessageIconStyles();\n if (state.validationMessageIcon) {\n state.validationMessageIcon.className = mergeClasses(\n classNames.validationMessageIcon,\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 secondaryTextStyles.base,\n horizontal && rootStyles.secondColumn,\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 horizontal && rootStyles.secondColumn,\n state.hint.className,\n );\n }\n};\n"]}
|
package/lib-commonjs/Field.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-field/src/Field.ts"],"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-field/src/Field.ts"],"sourcesContent":["export * from './components/Field/index';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}
|
|
@@ -3,14 +3,9 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
|
|
7
6
|
const tslib_1 = /*#__PURE__*/require("tslib");
|
|
8
|
-
|
|
9
7
|
tslib_1.__exportStar(require("./Field.types"), exports);
|
|
10
|
-
|
|
11
8
|
tslib_1.__exportStar(require("./renderField"), exports);
|
|
12
|
-
|
|
13
9
|
tslib_1.__exportStar(require("./useField"), exports);
|
|
14
|
-
|
|
15
10
|
tslib_1.__exportStar(require("./useFieldStyles"), exports);
|
|
16
11
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-field/src/components/Field/index.ts"],"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-field/src/components/Field/index.ts"],"sourcesContent":["export * from './Field.types';\nexport * from './renderField';\nexport * from './useField';\nexport * from './useFieldStyles';\n"]}
|
|
@@ -4,28 +4,29 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.renderField_unstable = void 0;
|
|
7
|
-
|
|
8
7
|
const React = /*#__PURE__*/require("react");
|
|
9
|
-
|
|
10
8
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
11
9
|
/**
|
|
12
10
|
* Render the final JSX of Field
|
|
13
11
|
*/
|
|
14
|
-
|
|
15
|
-
|
|
16
12
|
const renderField_unstable = state => {
|
|
17
13
|
const {
|
|
18
14
|
slots,
|
|
19
15
|
slotProps
|
|
20
16
|
} = react_utilities_1.getSlots(state);
|
|
21
|
-
return React.createElement(slots.root, {
|
|
22
|
-
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
}, slots.
|
|
26
|
-
|
|
17
|
+
return React.createElement(slots.root, {
|
|
18
|
+
...slotProps.root
|
|
19
|
+
}, slots.label && React.createElement(slots.label, {
|
|
20
|
+
...slotProps.label
|
|
21
|
+
}), slots.control && React.createElement(slots.control, {
|
|
22
|
+
...slotProps.control
|
|
23
|
+
}), slots.validationMessage && React.createElement(slots.validationMessage, {
|
|
24
|
+
...slotProps.validationMessage
|
|
25
|
+
}, slots.validationMessageIcon && React.createElement(slots.validationMessageIcon, {
|
|
26
|
+
...slotProps.validationMessageIcon
|
|
27
|
+
}), slotProps.validationMessage.children), slots.hint && React.createElement(slots.hint, {
|
|
28
|
+
...slotProps.hint
|
|
27
29
|
}));
|
|
28
30
|
};
|
|
29
|
-
|
|
30
31
|
exports.renderField_unstable = renderField_unstable;
|
|
31
32
|
//# sourceMappingURL=renderField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
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,IACtBJ,oBAACH,KAAK,CAACO,iBAAiB;IAAA,GAAKN,SAAS,CAACM;EAAiB,GACrDP,KAAK,CAACQ,qBAAqB,IAAIL,oBAACH,KAAK,CAACQ,qBAAqB;IAAA,GAAKP,SAAS,CAACO;EAAqB,EAAI,EACnGP,SAAS,CAACM,iBAAiB,CAACE,QAAQ,CAExC,EACAT,KAAK,CAACU,IAAI,IAAIP,oBAACH,KAAK,CAACU,IAAI;IAAA,GAAKT,SAAS,CAACS;EAAI,EAAI,CACtC;AAEjB,CAAC;AAjBYC,4BAAoB","names":["renderField_unstable","state","slots","slotProps","react_utilities_1","React","root","label","control","validationMessage","validationMessageIcon","children","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 && (\n <slots.validationMessage {...slotProps.validationMessage}>\n {slots.validationMessageIcon && <slots.validationMessageIcon {...slotProps.validationMessageIcon} />}\n {slotProps.validationMessage.children}\n </slots.validationMessage>\n )}\n {slots.hint && <slots.hint {...slotProps.hint} />}\n </slots.root>\n );\n};\n"]}
|
|
@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.useField_unstable = exports.getPartitionedFieldProps = void 0;
|
|
7
|
-
|
|
8
7
|
const React = /*#__PURE__*/require("react");
|
|
9
|
-
|
|
10
8
|
const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
|
|
11
|
-
|
|
12
9
|
const react_label_1 = /*#__PURE__*/require("@fluentui/react-label");
|
|
13
|
-
|
|
14
10
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
15
|
-
|
|
16
11
|
const validationMessageIcons = {
|
|
17
12
|
error: /*#__PURE__*/React.createElement(react_icons_1.ErrorCircle12Filled, null),
|
|
18
13
|
warning: /*#__PURE__*/React.createElement(react_icons_1.Warning12Filled, null),
|
|
@@ -21,7 +16,6 @@ const validationMessageIcons = {
|
|
|
21
16
|
/**
|
|
22
17
|
* Partition the props used by the Field itself, from the props that are passed to the underlying field component.
|
|
23
18
|
*/
|
|
24
|
-
|
|
25
19
|
const getPartitionedFieldProps = props => {
|
|
26
20
|
const {
|
|
27
21
|
className,
|
|
@@ -50,7 +44,6 @@ const getPartitionedFieldProps = props => {
|
|
|
50
44
|
};
|
|
51
45
|
return [fieldProps, restOfProps];
|
|
52
46
|
};
|
|
53
|
-
|
|
54
47
|
exports.getPartitionedFieldProps = getPartitionedFieldProps;
|
|
55
48
|
/**
|
|
56
49
|
* Create the state required to render Field.
|
|
@@ -62,10 +55,8 @@ exports.getPartitionedFieldProps = getPartitionedFieldProps;
|
|
|
62
55
|
* @param ref - Ref to the control slot (primary slot)
|
|
63
56
|
* @param params - Configuration parameters for this Field
|
|
64
57
|
*/
|
|
65
|
-
|
|
66
58
|
const useField_unstable = (props, ref, params) => {
|
|
67
59
|
var _a, _b, _c;
|
|
68
|
-
|
|
69
60
|
const [fieldProps, controlProps] = exports.getPartitionedFieldProps(props);
|
|
70
61
|
const {
|
|
71
62
|
orientation = 'vertical',
|
|
@@ -84,10 +75,11 @@ const useField_unstable = (props, ref, params) => {
|
|
|
84
75
|
defaultProps: {
|
|
85
76
|
id: baseId + '__label',
|
|
86
77
|
required: controlProps.required,
|
|
87
|
-
size: typeof controlProps.size === 'string' ? controlProps.size : undefined
|
|
88
|
-
|
|
78
|
+
size: typeof controlProps.size === 'string' ? controlProps.size : undefined
|
|
79
|
+
// htmlFor is handled below
|
|
89
80
|
}
|
|
90
81
|
});
|
|
82
|
+
|
|
91
83
|
const validationMessage = react_utilities_1.resolveShorthand(fieldProps.validationMessage, {
|
|
92
84
|
defaultProps: {
|
|
93
85
|
id: baseId + '__validationMessage'
|
|
@@ -103,23 +95,20 @@ const useField_unstable = (props, ref, params) => {
|
|
|
103
95
|
defaultProps: {
|
|
104
96
|
children: validationState ? validationMessageIcons[validationState] : undefined
|
|
105
97
|
}
|
|
106
|
-
});
|
|
107
|
-
|
|
98
|
+
});
|
|
99
|
+
// Hook up aria props on the control
|
|
108
100
|
if (label && labelConnection === 'aria-labelledby') {
|
|
109
101
|
(_a = controlProps['aria-labelledby']) !== null && _a !== void 0 ? _a : controlProps['aria-labelledby'] = label.id;
|
|
110
102
|
}
|
|
111
|
-
|
|
112
103
|
if (validationMessage || hint) {
|
|
113
104
|
// The control is described by the validation message, or hint, or both
|
|
114
105
|
// We also preserve and append any aria-describedby supplied by the user
|
|
115
106
|
// For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933
|
|
116
107
|
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(' ');
|
|
117
108
|
}
|
|
118
|
-
|
|
119
109
|
if (validationState === 'error' && ariaInvalidOnError) {
|
|
120
110
|
(_b = controlProps['aria-invalid']) !== null && _b !== void 0 ? _b : controlProps['aria-invalid'] = true;
|
|
121
111
|
}
|
|
122
|
-
|
|
123
112
|
const control = react_utilities_1.resolveShorthand(fieldProps.control, {
|
|
124
113
|
required: true,
|
|
125
114
|
defaultProps: {
|
|
@@ -128,11 +117,9 @@ const useField_unstable = (props, ref, params) => {
|
|
|
128
117
|
...controlProps
|
|
129
118
|
}
|
|
130
119
|
});
|
|
131
|
-
|
|
132
120
|
if (label && labelConnection === 'htmlFor') {
|
|
133
121
|
(_c = label.htmlFor) !== null && _c !== void 0 ? _c : label.htmlFor = control.id;
|
|
134
122
|
}
|
|
135
|
-
|
|
136
123
|
const state = {
|
|
137
124
|
orientation,
|
|
138
125
|
validationState,
|
|
@@ -154,6 +141,5 @@ const useField_unstable = (props, ref, params) => {
|
|
|
154
141
|
};
|
|
155
142
|
return state;
|
|
156
143
|
};
|
|
157
|
-
|
|
158
144
|
exports.useField_unstable = useField_unstable;
|
|
159
145
|
//# sourceMappingURL=useField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"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","names":["validationMessageIcons","error","React","react_icons_1","warning","success","getPartitionedFieldProps","props","className","control","hint","label","orientation","root","style","validationMessage","validationMessageIcon","validationState","restOfProps","fieldProps","exports","useField_unstable","ref","params","controlProps","labelConnection","ariaInvalidOnError","baseId","react_utilities_1","required","defaultProps","id","size","undefined","children","filter","Boolean","join","htmlFor","state","classNames","components","component","react_label_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-field/src/components/Field/useField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { FieldConfig, FieldControl, FieldPropsWithOptionalComponentProps, FieldState } from './Field.types';\n\nconst validationMessageIcons = {\n error: <ErrorCircle12Filled />,\n warning: <Warning12Filled />,\n success: <CheckmarkCircle12Filled />,\n} as const;\n\n/**\n * Partition the props used by the Field itself, from the props that are passed to the underlying field component.\n */\nexport const getPartitionedFieldProps = (props: FieldPropsWithOptionalComponentProps<FieldControl>) => {\n const {\n className,\n control,\n hint,\n label,\n orientation,\n root,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n ...restOfProps\n } = props;\n\n const fieldProps = {\n className,\n control,\n hint,\n label,\n orientation,\n root,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n };\n\n return [fieldProps, restOfProps] as const;\n};\n\n/**\n * Create the state required to render Field.\n *\n * The returned state can be modified with hooks such as useFieldStyles_unstable,\n * before being passed to renderField_unstable.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the control slot (primary slot)\n * @param params - Configuration parameters for this Field\n */\nexport const useField_unstable = <T extends FieldControl>(\n props: FieldPropsWithOptionalComponentProps<T>,\n ref: React.Ref<HTMLElement>,\n params: FieldConfig<T>,\n): FieldState<T> => {\n const [fieldProps, controlProps] = getPartitionedFieldProps(props);\n const { orientation = 'vertical', validationState } = fieldProps;\n const { labelConnection = 'htmlFor', ariaInvalidOnError = true } = params;\n\n const baseId = useId('field-');\n\n const root = resolveShorthand(fieldProps.root, {\n required: true,\n defaultProps: getNativeElementProps('div', fieldProps),\n });\n\n const label = resolveShorthand(fieldProps.label, {\n defaultProps: {\n id: baseId + '__label',\n required: controlProps.required,\n size: typeof controlProps.size === 'string' ? controlProps.size : undefined,\n // htmlFor is handled below\n },\n });\n\n const validationMessage = resolveShorthand(fieldProps.validationMessage, {\n defaultProps: {\n id: baseId + '__validationMessage',\n },\n });\n\n const hint = resolveShorthand(fieldProps.hint, {\n defaultProps: {\n id: baseId + '__hint',\n },\n });\n\n const validationMessageIcon = resolveShorthand(fieldProps.validationMessageIcon, {\n required: !!validationState,\n defaultProps: {\n children: validationState ? validationMessageIcons[validationState] : undefined,\n },\n });\n\n // Hook up aria props on the control\n if (label && labelConnection === 'aria-labelledby') {\n controlProps['aria-labelledby'] ??= label.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?.id, hint?.id, controlProps['aria-describedby']]\n .filter(Boolean)\n .join(' ');\n }\n\n if (validationState === 'error' && ariaInvalidOnError) {\n controlProps['aria-invalid'] ??= true;\n }\n\n const control = resolveShorthand(fieldProps.control, {\n required: true,\n defaultProps: {\n ref,\n id: baseId + '__control',\n ...controlProps,\n },\n });\n\n if (label && labelConnection === 'htmlFor') {\n label.htmlFor ??= control.id;\n }\n\n const state: FieldState<FieldControl> = {\n orientation,\n validationState,\n classNames: params.classNames,\n components: {\n root: 'div',\n control: params.component,\n label: Label,\n validationMessage: 'div',\n validationMessageIcon: 'span',\n hint: 'div',\n },\n root,\n control,\n label,\n validationMessageIcon,\n validationMessage,\n hint,\n };\n\n return state as FieldState<T>;\n};\n"]}
|
|
@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.useFieldStyles_unstable = exports.getFieldClassNames = void 0;
|
|
7
|
-
|
|
8
7
|
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
|
9
|
-
|
|
10
8
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
11
|
-
|
|
12
9
|
const getFieldClassNames = name => ({
|
|
13
10
|
root: `fui-${name}`,
|
|
14
11
|
control: `fui-${name}__control`,
|
|
@@ -17,118 +14,102 @@ const getFieldClassNames = name => ({
|
|
|
17
14
|
validationMessageIcon: `fui-${name}__validationMessageIcon`,
|
|
18
15
|
hint: `fui-${name}__hint`
|
|
19
16
|
});
|
|
20
|
-
|
|
21
17
|
exports.getFieldClassNames = getFieldClassNames;
|
|
22
18
|
/**
|
|
23
19
|
* Styles for the root slot
|
|
24
20
|
*/
|
|
25
|
-
|
|
26
21
|
const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
22
|
+
base: {
|
|
23
|
+
mc9l5x: "f13qh94s",
|
|
24
|
+
Bxotwcr: "f14np9u9",
|
|
25
|
+
B7hvi0a: "f1m2n5bn"
|
|
31
26
|
},
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
27
|
+
horizontal: {
|
|
28
|
+
wkccdc: "fai812u",
|
|
29
|
+
Budl1dq: "fckz59x"
|
|
35
30
|
},
|
|
36
|
-
|
|
37
|
-
|
|
31
|
+
secondColumn: {
|
|
32
|
+
Br312pm: "fd46tj4"
|
|
38
33
|
}
|
|
39
34
|
}, {
|
|
40
|
-
|
|
35
|
+
d: [".f13qh94s{display:grid;}", ".f14np9u9{grid-auto-flow:row;}", ".f1m2n5bn{justify-items:start;}", ".fai812u{grid-template-rows:auto auto auto auto;}", ".fckz59x{grid-template-columns:1fr 2fr;}", ".fd46tj4{grid-column-start:2;}"]
|
|
41
36
|
});
|
|
42
|
-
|
|
43
37
|
const useLabelStyles = /*#__PURE__*/react_1.__styles({
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
38
|
+
base: {
|
|
39
|
+
B6of3ja: "fg30ohd",
|
|
40
|
+
jrapky: "fyacil5"
|
|
47
41
|
},
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
42
|
+
horizontal: {
|
|
43
|
+
Ijaq50: "f16hsg94",
|
|
44
|
+
nk6f5a: "f1nzqi2z",
|
|
45
|
+
t21cq0: ["fkujibs", "f199hnxi"],
|
|
46
|
+
qb2dma: "f9h729m",
|
|
47
|
+
Bdqf98w: "fhb5wj7"
|
|
54
48
|
}
|
|
55
49
|
}, {
|
|
56
|
-
|
|
50
|
+
d: [".fg30ohd{margin-top:var(--spacingVerticalXXS);}", ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}", ".f16hsg94{grid-row-start:1;}", ".f1nzqi2z{grid-row-end:-1;}", ".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;}"]
|
|
57
51
|
});
|
|
58
|
-
|
|
59
52
|
const useSecondaryTextStyles = /*#__PURE__*/react_1.__styles({
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
53
|
+
base: {
|
|
54
|
+
B6of3ja: "fg30ohd",
|
|
55
|
+
sj55zd: "f11d4kpn",
|
|
56
|
+
Bahqtrf: "fk6fouc",
|
|
57
|
+
Be2twd7: "fy9rknc",
|
|
58
|
+
Bhrd7zp: "figsok6",
|
|
59
|
+
Bg96gwp: "fwrc4pm"
|
|
67
60
|
},
|
|
68
|
-
|
|
69
|
-
|
|
61
|
+
error: {
|
|
62
|
+
sj55zd: "f1hcrxcs"
|
|
70
63
|
}
|
|
71
64
|
}, {
|
|
72
|
-
|
|
65
|
+
d: [".fg30ohd{margin-top:var(--spacingVerticalXXS);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}"]
|
|
73
66
|
});
|
|
74
|
-
|
|
75
67
|
const useValidationMessageIconStyles = /*#__PURE__*/react_1.__styles({
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
68
|
+
base: {
|
|
69
|
+
Be2twd7: "f1ugzwwg",
|
|
70
|
+
Bg96gwp: "fp4gqsa",
|
|
71
|
+
ha4doy: "fmrv4ls",
|
|
72
|
+
t21cq0: ["fm0x6gh", "fbyavb5"]
|
|
81
73
|
},
|
|
82
|
-
|
|
83
|
-
|
|
74
|
+
error: {
|
|
75
|
+
sj55zd: "f1hcrxcs"
|
|
84
76
|
},
|
|
85
|
-
|
|
86
|
-
|
|
77
|
+
warning: {
|
|
78
|
+
sj55zd: "f1k5f75o"
|
|
87
79
|
},
|
|
88
|
-
|
|
89
|
-
|
|
80
|
+
success: {
|
|
81
|
+
sj55zd: "ffmvakt"
|
|
90
82
|
}
|
|
91
83
|
}, {
|
|
92
|
-
|
|
84
|
+
d: [".f1ugzwwg{font-size:12px;}", ".fp4gqsa{line-height:12px;}", ".fmrv4ls{vertical-align:middle;}", ".fm0x6gh{margin-right:var(--spacingHorizontalXS);}", ".fbyavb5{margin-left:var(--spacingHorizontalXS);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}"]
|
|
93
85
|
});
|
|
94
86
|
/**
|
|
95
87
|
* Apply styling to the Field slots based on the state
|
|
96
88
|
*/
|
|
97
|
-
|
|
98
|
-
|
|
99
89
|
const useFieldStyles_unstable = state => {
|
|
100
90
|
const classNames = state.classNames;
|
|
101
91
|
const validationState = state.validationState;
|
|
102
92
|
const horizontal = state.orientation === 'horizontal';
|
|
103
93
|
const rootStyles = useRootStyles();
|
|
104
94
|
state.root.className = react_1.mergeClasses(classNames.root, rootStyles.base, horizontal && rootStyles.horizontal, state.root.className);
|
|
105
|
-
|
|
106
95
|
if (state.control) {
|
|
107
96
|
state.control.className = react_1.mergeClasses(classNames.control, horizontal && rootStyles.secondColumn, state.control.className);
|
|
108
97
|
}
|
|
109
|
-
|
|
110
98
|
const labelStyles = useLabelStyles();
|
|
111
|
-
|
|
112
99
|
if (state.label) {
|
|
113
100
|
state.label.className = react_1.mergeClasses(classNames.label, labelStyles.base, horizontal && labelStyles.horizontal, state.label.className);
|
|
114
101
|
}
|
|
115
|
-
|
|
116
102
|
const validationMessageIconStyles = useValidationMessageIconStyles();
|
|
117
|
-
|
|
118
103
|
if (state.validationMessageIcon) {
|
|
119
104
|
state.validationMessageIcon.className = react_1.mergeClasses(classNames.validationMessageIcon, validationMessageIconStyles.base, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
|
|
120
105
|
}
|
|
121
|
-
|
|
122
106
|
const secondaryTextStyles = useSecondaryTextStyles();
|
|
123
|
-
|
|
124
107
|
if (state.validationMessage) {
|
|
125
108
|
state.validationMessage.className = react_1.mergeClasses(classNames.validationMessage, secondaryTextStyles.base, horizontal && rootStyles.secondColumn, validationState === 'error' && secondaryTextStyles.error, state.validationMessage.className);
|
|
126
109
|
}
|
|
127
|
-
|
|
128
110
|
if (state.hint) {
|
|
129
111
|
state.hint.className = react_1.mergeClasses(classNames.hint, secondaryTextStyles.base, horizontal && rootStyles.secondColumn, state.hint.className);
|
|
130
112
|
}
|
|
131
113
|
};
|
|
132
|
-
|
|
133
114
|
exports.useFieldStyles_unstable = useFieldStyles_unstable;
|
|
134
115
|
//# sourceMappingURL=useFieldStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
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","secondColumn","labelStyles","validationMessageIconStyles","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 justifyItems: 'start',\n },\n\n horizontal: {\n gridTemplateRows: 'auto auto auto auto',\n gridTemplateColumns: '1fr 2fr',\n },\n\n secondColumn: {\n gridColumnStart: '2',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n marginTop: tokens.spacingVerticalXXS,\n marginBottom: tokens.spacingVerticalXXS,\n },\n\n horizontal: {\n gridRowStart: '1',\n gridRowEnd: '-1',\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 fontSize: '12px',\n lineHeight: '12px',\n verticalAlign: 'middle',\n marginRight: tokens.spacingHorizontalXS,\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(\n classNames.control,\n horizontal && rootStyles.secondColumn,\n state.control.className,\n );\n }\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n classNames.label,\n labelStyles.base,\n horizontal && labelStyles.horizontal,\n state.label.className,\n );\n }\n\n const validationMessageIconStyles = useValidationMessageIconStyles();\n if (state.validationMessageIcon) {\n state.validationMessageIcon.className = mergeClasses(\n classNames.validationMessageIcon,\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 secondaryTextStyles.base,\n horizontal && rootStyles.secondColumn,\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 horizontal && rootStyles.secondColumn,\n state.hint.className,\n );\n }\n};\n"]}
|
package/lib-commonjs/index.js
CHANGED
|
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.useField_unstable = exports.useFieldStyles_unstable = exports.renderField_unstable = exports.getFieldClassNames = void 0;
|
|
7
|
-
|
|
8
7
|
var Field_1 = /*#__PURE__*/require("./Field");
|
|
9
|
-
|
|
10
8
|
Object.defineProperty(exports, "getFieldClassNames", {
|
|
11
9
|
enumerable: true,
|
|
12
10
|
get: function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AAASA;EAAAC;EAAAC;IAAA,iCAAkB;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,mCAAoB;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,sCAAuB;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,gCAAiB;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"../src/","sources":["packages/react-components/react-field/src/index.ts"],"sourcesContent":["export { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field';\nexport type { FieldConfig, FieldControl, FieldProps, FieldSlots, FieldState } from './Field';\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.13",
|
|
4
4
|
"description": "Fluent UI Field components",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -26,16 +26,16 @@
|
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"@fluentui/eslint-plugin": "*",
|
|
28
28
|
"@fluentui/react-conformance": "*",
|
|
29
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
|
30
|
-
"@fluentui/scripts": "
|
|
29
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.19",
|
|
30
|
+
"@fluentui/scripts": "*"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@fluentui/react-context-selector": "^9.1.
|
|
33
|
+
"@fluentui/react-context-selector": "^9.1.4",
|
|
34
34
|
"@fluentui/react-icons": "^2.0.175",
|
|
35
|
-
"@fluentui/react-label": "^9.0.
|
|
35
|
+
"@fluentui/react-label": "^9.0.15",
|
|
36
36
|
"@fluentui/react-theme": "^9.1.5",
|
|
37
|
-
"@fluentui/react-utilities": "^9.3.
|
|
38
|
-
"@griffel/react": "^1.
|
|
37
|
+
"@fluentui/react-utilities": "^9.3.1",
|
|
38
|
+
"@griffel/react": "^1.5.2",
|
|
39
39
|
"tslib": "^2.1.0"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|