@fluentui/react-field 0.0.0-nightly-20230120-0420.1 → 0.0.0-nightly-20230124-0417.1

Sign up to get free protection for your applications and to get access to all the features.
package/CHANGELOG.json CHANGED
@@ -2,9 +2,9 @@
2
2
  "name": "@fluentui/react-field",
3
3
  "entries": [
4
4
  {
5
- "date": "Fri, 20 Jan 2023 04:28:45 GMT",
6
- "tag": "@fluentui/react-field_v0.0.0-nightly-20230120-0420.1",
7
- "version": "0.0.0-nightly-20230120-0420.1",
5
+ "date": "Tue, 24 Jan 2023 04:24:30 GMT",
6
+ "tag": "@fluentui/react-field_v0.0.0-nightly-20230124-0417.1",
7
+ "version": "0.0.0-nightly-20230124-0417.1",
8
8
  "comments": {
9
9
  "prerelease": [
10
10
  {
@@ -16,32 +16,65 @@
16
16
  {
17
17
  "author": "beachball",
18
18
  "package": "@fluentui/react-field",
19
- "comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20230120-0420.1",
20
- "commit": "b5182ae219cc5dcdd1843ea7c46c2bcfcd78a12a"
19
+ "comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20230124-0417.1",
20
+ "commit": "4cf654be7855d4f0bbdced68a0e6dd59dbb97e1f"
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-20230120-0420.1",
26
- "commit": "b5182ae219cc5dcdd1843ea7c46c2bcfcd78a12a"
25
+ "comment": "Bump @fluentui/react-label to v0.0.0-nightly-20230124-0417.1",
26
+ "commit": "4cf654be7855d4f0bbdced68a0e6dd59dbb97e1f"
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-20230120-0420.1",
32
- "commit": "b5182ae219cc5dcdd1843ea7c46c2bcfcd78a12a"
31
+ "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230124-0417.1",
32
+ "commit": "4cf654be7855d4f0bbdced68a0e6dd59dbb97e1f"
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-20230120-0420.1",
38
- "commit": "b5182ae219cc5dcdd1843ea7c46c2bcfcd78a12a"
37
+ "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230124-0417.1",
38
+ "commit": "4cf654be7855d4f0bbdced68a0e6dd59dbb97e1f"
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-20230120-0420.1",
44
- "commit": "b5182ae219cc5dcdd1843ea7c46c2bcfcd78a12a"
43
+ "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230124-0417.1",
44
+ "commit": "4cf654be7855d4f0bbdced68a0e6dd59dbb97e1f"
45
+ }
46
+ ]
47
+ }
48
+ },
49
+ {
50
+ "date": "Mon, 23 Jan 2023 16:43:09 GMT",
51
+ "tag": "@fluentui/react-field_v9.0.0-alpha.16",
52
+ "version": "9.0.0-alpha.16",
53
+ "comments": {
54
+ "prerelease": [
55
+ {
56
+ "author": "behowell@microsoft.com",
57
+ "package": "@fluentui/react-field",
58
+ "commit": "1f145044a1ef3707e0724d75f9b70e7d2af69375",
59
+ "comment": "chore: Simplify Field layout styles"
60
+ },
61
+ {
62
+ "author": "behowell@microsoft.com",
63
+ "package": "@fluentui/react-field",
64
+ "commit": "b04b2f0c02f2ccd7960905a886ce27f2321fee72",
65
+ "comment": "fix: Stretch Field components to full width"
66
+ },
67
+ {
68
+ "author": "behowell@microsoft.com",
69
+ "package": "@fluentui/react-field",
70
+ "commit": "48a6fc95e6eb7530c162390fb70db7fac88b15ab",
71
+ "comment": "fix: Update Field label padding to match spec"
72
+ },
73
+ {
74
+ "author": "behowell@microsoft.com",
75
+ "package": "@fluentui/react-field",
76
+ "commit": "014041b7447b02856ae50638de71bdb829b0a759",
77
+ "comment": "fix: Field sets role=\"alert\" on its error message so it is announced by screen readers"
45
78
  }
46
79
  ]
47
80
  }
package/CHANGELOG.md CHANGED
@@ -1,22 +1,34 @@
1
1
  # Change Log - @fluentui/react-field
2
2
 
3
- This log was last generated on Fri, 20 Jan 2023 04:28:45 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 24 Jan 2023 04:24:30 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20230120-0420.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v0.0.0-nightly-20230120-0420.1)
7
+ ## [0.0.0-nightly-20230124-0417.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v0.0.0-nightly-20230124-0417.1)
8
8
 
9
- Fri, 20 Jan 2023 04:28:45 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.15..@fluentui/react-field_v0.0.0-nightly-20230120-0420.1)
9
+ Tue, 24 Jan 2023 04:24:30 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.16..@fluentui/react-field_v0.0.0-nightly-20230124-0417.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-20230120-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/b5182ae219cc5dcdd1843ea7c46c2bcfcd78a12a) by beachball)
16
- - Bump @fluentui/react-label to v0.0.0-nightly-20230120-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/b5182ae219cc5dcdd1843ea7c46c2bcfcd78a12a) by beachball)
17
- - Bump @fluentui/react-theme to v0.0.0-nightly-20230120-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/b5182ae219cc5dcdd1843ea7c46c2bcfcd78a12a) by beachball)
18
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20230120-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/b5182ae219cc5dcdd1843ea7c46c2bcfcd78a12a) by beachball)
19
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230120-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/b5182ae219cc5dcdd1843ea7c46c2bcfcd78a12a) by beachball)
15
+ - Bump @fluentui/react-context-selector to v0.0.0-nightly-20230124-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/4cf654be7855d4f0bbdced68a0e6dd59dbb97e1f) by beachball)
16
+ - Bump @fluentui/react-label to v0.0.0-nightly-20230124-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/4cf654be7855d4f0bbdced68a0e6dd59dbb97e1f) by beachball)
17
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20230124-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/4cf654be7855d4f0bbdced68a0e6dd59dbb97e1f) by beachball)
18
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20230124-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/4cf654be7855d4f0bbdced68a0e6dd59dbb97e1f) by beachball)
19
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230124-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/4cf654be7855d4f0bbdced68a0e6dd59dbb97e1f) by beachball)
20
+
21
+ ## [9.0.0-alpha.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.16)
22
+
23
+ Mon, 23 Jan 2023 16:43:09 GMT
24
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.15..@fluentui/react-field_v9.0.0-alpha.16)
25
+
26
+ ### Changes
27
+
28
+ - chore: Simplify Field layout styles ([PR #26352](https://github.com/microsoft/fluentui/pull/26352) by behowell@microsoft.com)
29
+ - fix: Stretch Field components to full width ([PR #26412](https://github.com/microsoft/fluentui/pull/26412) by behowell@microsoft.com)
30
+ - fix: Update Field label padding to match spec ([PR #26413](https://github.com/microsoft/fluentui/pull/26413) by behowell@microsoft.com)
31
+ - fix: Field sets role="alert" on its error message so it is announced by screen readers ([PR #26414](https://github.com/microsoft/fluentui/pull/26414) by behowell@microsoft.com)
20
32
 
21
33
  ## [9.0.0-alpha.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.15)
22
34
 
@@ -75,7 +75,8 @@ export const useField_unstable = (props, ref, params) => {
75
75
 
76
76
  const validationMessage = resolveShorthand(fieldProps.validationMessage, {
77
77
  defaultProps: {
78
- id: baseId + '__validationMessage'
78
+ id: baseId + '__validationMessage',
79
+ role: validationState === 'error' ? 'alert' : undefined
79
80
  }
80
81
  });
81
82
  const hint = resolveShorthand(fieldProps.hint, {
@@ -1 +1 @@
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"]}
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","role","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 role: validationState === 'error' ? 'alert' : undefined,\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"]}
@@ -82,7 +82,8 @@ const useField_unstable = (props, ref, params) => {
82
82
 
83
83
  const validationMessage = react_utilities_1.resolveShorthand(fieldProps.validationMessage, {
84
84
  defaultProps: {
85
- id: baseId + '__validationMessage'
85
+ id: baseId + '__validationMessage',
86
+ role: validationState === 'error' ? 'alert' : undefined
86
87
  }
87
88
  });
88
89
  const hint = react_utilities_1.resolveShorthand(fieldProps.hint, {
@@ -1 +1 @@
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"]}
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","role","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 role: validationState === 'error' ? 'alert' : undefined,\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"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-field",
3
- "version": "0.0.0-nightly-20230120-0420.1",
3
+ "version": "0.0.0-nightly-20230124-0417.1",
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": "0.0.0-nightly-20230120-0420.1",
29
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20230124-0417.1",
30
30
  "@fluentui/scripts-api-extractor": "*",
31
31
  "@fluentui/scripts-tasks": "*"
32
32
  },
33
33
  "dependencies": {
34
- "@fluentui/react-context-selector": "0.0.0-nightly-20230120-0420.1",
34
+ "@fluentui/react-context-selector": "0.0.0-nightly-20230124-0417.1",
35
35
  "@fluentui/react-icons": "^2.0.175",
36
- "@fluentui/react-label": "0.0.0-nightly-20230120-0420.1",
37
- "@fluentui/react-theme": "0.0.0-nightly-20230120-0420.1",
38
- "@fluentui/react-utilities": "0.0.0-nightly-20230120-0420.1",
36
+ "@fluentui/react-label": "0.0.0-nightly-20230124-0417.1",
37
+ "@fluentui/react-theme": "0.0.0-nightly-20230124-0417.1",
38
+ "@fluentui/react-utilities": "0.0.0-nightly-20230124-0417.1",
39
39
  "@griffel/react": "^1.5.2",
40
40
  "tslib": "^2.1.0"
41
41
  },