@fluentui/react-field 0.0.0-nightly-20221228-0425.1 → 0.0.0-nightly-20221230-0421.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +13 -13
- package/CHANGELOG.md +9 -9
- 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 +0 -14
- 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 +0 -19
- 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,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui/react-field",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-field_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Fri, 30 Dec 2022 04:28:37 GMT",
|
|
6
|
+
"tag": "@fluentui/react-field_v0.0.0-nightly-20221230-0421.1",
|
|
7
|
+
"version": "0.0.0-nightly-20221230-0421.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,32 +16,32 @@
|
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui/react-field",
|
|
19
|
-
"comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20221230-0421.1",
|
|
20
|
+
"commit": "a38762f3d85d92ff20fe07b067fe74c91defe343"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui/react-field",
|
|
25
|
-
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-20221230-0421.1",
|
|
26
|
+
"commit": "a38762f3d85d92ff20fe07b067fe74c91defe343"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui/react-field",
|
|
31
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221230-0421.1",
|
|
32
|
+
"commit": "a38762f3d85d92ff20fe07b067fe74c91defe343"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"author": "beachball",
|
|
36
36
|
"package": "@fluentui/react-field",
|
|
37
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
38
|
-
"commit": "
|
|
37
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221230-0421.1",
|
|
38
|
+
"commit": "a38762f3d85d92ff20fe07b067fe74c91defe343"
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
41
|
"author": "beachball",
|
|
42
42
|
"package": "@fluentui/react-field",
|
|
43
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
44
|
-
"commit": "
|
|
43
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221230-0421.1",
|
|
44
|
+
"commit": "a38762f3d85d92ff20fe07b067fe74c91defe343"
|
|
45
45
|
}
|
|
46
46
|
]
|
|
47
47
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-field
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 30 Dec 2022 04:28:37 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20221230-0421.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v0.0.0-nightly-20221230-0421.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.12..@fluentui/react-field_v0.0.0-nightly-
|
|
9
|
+
Fri, 30 Dec 2022 04:28:37 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.12..@fluentui/react-field_v0.0.0-nightly-20221230-0421.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-context-selector to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-label to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-context-selector to v0.0.0-nightly-20221230-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/a38762f3d85d92ff20fe07b067fe74c91defe343) by beachball)
|
|
16
|
+
- Bump @fluentui/react-label to v0.0.0-nightly-20221230-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/a38762f3d85d92ff20fe07b067fe74c91defe343) by beachball)
|
|
17
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20221230-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/a38762f3d85d92ff20fe07b067fe74c91defe343) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20221230-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/a38762f3d85d92ff20fe07b067fe74c91defe343) by beachball)
|
|
19
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221230-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/a38762f3d85d92ff20fe07b067fe74c91defe343) by beachball)
|
|
20
20
|
|
|
21
21
|
## [9.0.0-alpha.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.12)
|
|
22
22
|
|
|
@@ -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":"","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":"","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,7 +11,6 @@ export const getFieldClassNames = name => ({
|
|
|
11
11
|
/**
|
|
12
12
|
* Styles for the root slot
|
|
13
13
|
*/
|
|
14
|
-
|
|
15
14
|
const useRootStyles = /*#__PURE__*/__styles({
|
|
16
15
|
"base": {
|
|
17
16
|
"mc9l5x": "f13qh94s",
|
|
@@ -28,7 +27,6 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
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
31
|
"base": {
|
|
34
32
|
"B6of3ja": "fg30ohd",
|
|
@@ -44,7 +42,6 @@ const useLabelStyles = /*#__PURE__*/__styles({
|
|
|
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
46
|
"base": {
|
|
50
47
|
"B6of3ja": "fg30ohd",
|
|
@@ -60,7 +57,6 @@ const useSecondaryTextStyles = /*#__PURE__*/__styles({
|
|
|
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
61
|
"base": {
|
|
66
62
|
"Be2twd7": "f1ugzwwg",
|
|
@@ -83,37 +79,27 @@ const useValidationMessageIconStyles = /*#__PURE__*/__styles({
|
|
|
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":"","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":"","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":"","sources":[],"sourcesContent":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"","names":[],"sourceRoot":"","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":"","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":"","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":"","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,12 +14,10 @@ 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
22
|
"base": {
|
|
28
23
|
"mc9l5x": "f13qh94s",
|
|
@@ -39,7 +34,6 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
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
38
|
"base": {
|
|
45
39
|
"B6of3ja": "fg30ohd",
|
|
@@ -55,7 +49,6 @@ const useLabelStyles = /*#__PURE__*/react_1.__styles({
|
|
|
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
53
|
"base": {
|
|
61
54
|
"B6of3ja": "fg30ohd",
|
|
@@ -71,7 +64,6 @@ const useSecondaryTextStyles = /*#__PURE__*/react_1.__styles({
|
|
|
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
68
|
"base": {
|
|
77
69
|
"Be2twd7": "f1ugzwwg",
|
|
@@ -94,41 +86,30 @@ const useValidationMessageIconStyles = /*#__PURE__*/react_1.__styles({
|
|
|
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":"","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":"","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": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20221230-0421.1",
|
|
4
4
|
"description": "Fluent UI Field components",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -26,15 +26,15 @@
|
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"@fluentui/eslint-plugin": "*",
|
|
28
28
|
"@fluentui/react-conformance": "*",
|
|
29
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
30
|
-
"@fluentui/scripts": "
|
|
29
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20221230-0421.1",
|
|
30
|
+
"@fluentui/scripts": "*"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@fluentui/react-context-selector": "0.0.0-nightly-
|
|
33
|
+
"@fluentui/react-context-selector": "0.0.0-nightly-20221230-0421.1",
|
|
34
34
|
"@fluentui/react-icons": "^2.0.175",
|
|
35
|
-
"@fluentui/react-label": "0.0.0-nightly-
|
|
36
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
37
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
35
|
+
"@fluentui/react-label": "0.0.0-nightly-20221230-0421.1",
|
|
36
|
+
"@fluentui/react-theme": "0.0.0-nightly-20221230-0421.1",
|
|
37
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20221230-0421.1",
|
|
38
38
|
"@griffel/react": "^1.4.2",
|
|
39
39
|
"tslib": "^2.1.0"
|
|
40
40
|
},
|