@fluentui/react-field 0.0.0-nightly-20221024-0421.1 → 0.0.0-nightly-20221025-0420.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 CHANGED
@@ -2,9 +2,9 @@
2
2
  "name": "@fluentui/react-field",
3
3
  "entries": [
4
4
  {
5
- "date": "Mon, 24 Oct 2022 04:26:24 GMT",
6
- "tag": "@fluentui/react-field_v0.0.0-nightly-20221024-0421.1",
7
- "version": "0.0.0-nightly-20221024-0421.1",
5
+ "date": "Tue, 25 Oct 2022 04:26:12 GMT",
6
+ "tag": "@fluentui/react-field_v0.0.0-nightly-20221025-0420.1",
7
+ "version": "0.0.0-nightly-20221025-0420.1",
8
8
  "comments": {
9
9
  "prerelease": [
10
10
  {
@@ -16,92 +16,131 @@
16
16
  {
17
17
  "author": "beachball",
18
18
  "package": "@fluentui/react-field",
19
- "comment": "Bump @fluentui/react-checkbox to v0.0.0-nightly-20221024-0421.1",
20
- "commit": "2b4bcb0720021d3340c12a2711e3bc3ca389f757"
19
+ "comment": "Bump @fluentui/react-checkbox to v0.0.0-nightly-20221025-0420.1",
20
+ "commit": "77d655b4fe55decb40dd0a5301d3fd7ebd49fac5"
21
21
  },
22
22
  {
23
23
  "author": "beachball",
24
24
  "package": "@fluentui/react-field",
25
- "comment": "Bump @fluentui/react-combobox to v0.0.0-nightly-20221024-0421.1",
26
- "commit": "2b4bcb0720021d3340c12a2711e3bc3ca389f757"
25
+ "comment": "Bump @fluentui/react-combobox to v0.0.0-nightly-20221025-0420.1",
26
+ "commit": "77d655b4fe55decb40dd0a5301d3fd7ebd49fac5"
27
27
  },
28
28
  {
29
29
  "author": "beachball",
30
30
  "package": "@fluentui/react-field",
31
- "comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20221024-0421.1",
32
- "commit": "2b4bcb0720021d3340c12a2711e3bc3ca389f757"
31
+ "comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20221025-0420.1",
32
+ "commit": "77d655b4fe55decb40dd0a5301d3fd7ebd49fac5"
33
33
  },
34
34
  {
35
35
  "author": "beachball",
36
36
  "package": "@fluentui/react-field",
37
- "comment": "Bump @fluentui/react-input to v0.0.0-nightly-20221024-0421.1",
38
- "commit": "2b4bcb0720021d3340c12a2711e3bc3ca389f757"
37
+ "comment": "Bump @fluentui/react-input to v0.0.0-nightly-20221025-0420.1",
38
+ "commit": "77d655b4fe55decb40dd0a5301d3fd7ebd49fac5"
39
39
  },
40
40
  {
41
41
  "author": "beachball",
42
42
  "package": "@fluentui/react-field",
43
- "comment": "Bump @fluentui/react-label to v0.0.0-nightly-20221024-0421.1",
44
- "commit": "2b4bcb0720021d3340c12a2711e3bc3ca389f757"
43
+ "comment": "Bump @fluentui/react-label to v0.0.0-nightly-20221025-0420.1",
44
+ "commit": "77d655b4fe55decb40dd0a5301d3fd7ebd49fac5"
45
45
  },
46
46
  {
47
47
  "author": "beachball",
48
48
  "package": "@fluentui/react-field",
49
- "comment": "Bump @fluentui/react-progress to v0.0.0-nightly-20221024-0421.1",
50
- "commit": "2b4bcb0720021d3340c12a2711e3bc3ca389f757"
49
+ "comment": "Bump @fluentui/react-progress to v0.0.0-nightly-20221025-0420.1",
50
+ "commit": "77d655b4fe55decb40dd0a5301d3fd7ebd49fac5"
51
51
  },
52
52
  {
53
53
  "author": "beachball",
54
54
  "package": "@fluentui/react-field",
55
- "comment": "Bump @fluentui/react-radio to v0.0.0-nightly-20221024-0421.1",
56
- "commit": "2b4bcb0720021d3340c12a2711e3bc3ca389f757"
55
+ "comment": "Bump @fluentui/react-radio to v0.0.0-nightly-20221025-0420.1",
56
+ "commit": "77d655b4fe55decb40dd0a5301d3fd7ebd49fac5"
57
57
  },
58
58
  {
59
59
  "author": "beachball",
60
60
  "package": "@fluentui/react-field",
61
- "comment": "Bump @fluentui/react-select to v0.0.0-nightly-20221024-0421.1",
62
- "commit": "2b4bcb0720021d3340c12a2711e3bc3ca389f757"
61
+ "comment": "Bump @fluentui/react-select to v0.0.0-nightly-20221025-0420.1",
62
+ "commit": "77d655b4fe55decb40dd0a5301d3fd7ebd49fac5"
63
63
  },
64
64
  {
65
65
  "author": "beachball",
66
66
  "package": "@fluentui/react-field",
67
- "comment": "Bump @fluentui/react-slider to v0.0.0-nightly-20221024-0421.1",
68
- "commit": "2b4bcb0720021d3340c12a2711e3bc3ca389f757"
67
+ "comment": "Bump @fluentui/react-slider to v0.0.0-nightly-20221025-0420.1",
68
+ "commit": "77d655b4fe55decb40dd0a5301d3fd7ebd49fac5"
69
69
  },
70
70
  {
71
71
  "author": "beachball",
72
72
  "package": "@fluentui/react-field",
73
- "comment": "Bump @fluentui/react-spinbutton to v0.0.0-nightly-20221024-0421.1",
74
- "commit": "2b4bcb0720021d3340c12a2711e3bc3ca389f757"
73
+ "comment": "Bump @fluentui/react-spinbutton to v0.0.0-nightly-20221025-0420.1",
74
+ "commit": "77d655b4fe55decb40dd0a5301d3fd7ebd49fac5"
75
75
  },
76
76
  {
77
77
  "author": "beachball",
78
78
  "package": "@fluentui/react-field",
79
- "comment": "Bump @fluentui/react-switch to v0.0.0-nightly-20221024-0421.1",
80
- "commit": "2b4bcb0720021d3340c12a2711e3bc3ca389f757"
79
+ "comment": "Bump @fluentui/react-switch to v0.0.0-nightly-20221025-0420.1",
80
+ "commit": "77d655b4fe55decb40dd0a5301d3fd7ebd49fac5"
81
81
  },
82
82
  {
83
83
  "author": "beachball",
84
84
  "package": "@fluentui/react-field",
85
- "comment": "Bump @fluentui/react-textarea to v0.0.0-nightly-20221024-0421.1",
86
- "commit": "2b4bcb0720021d3340c12a2711e3bc3ca389f757"
85
+ "comment": "Bump @fluentui/react-textarea to v0.0.0-nightly-20221025-0420.1",
86
+ "commit": "77d655b4fe55decb40dd0a5301d3fd7ebd49fac5"
87
87
  },
88
88
  {
89
89
  "author": "beachball",
90
90
  "package": "@fluentui/react-field",
91
- "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221024-0421.1",
92
- "commit": "2b4bcb0720021d3340c12a2711e3bc3ca389f757"
91
+ "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221025-0420.1",
92
+ "commit": "77d655b4fe55decb40dd0a5301d3fd7ebd49fac5"
93
93
  },
94
94
  {
95
95
  "author": "beachball",
96
96
  "package": "@fluentui/react-field",
97
- "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221024-0421.1",
98
- "commit": "2b4bcb0720021d3340c12a2711e3bc3ca389f757"
97
+ "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221025-0420.1",
98
+ "commit": "77d655b4fe55decb40dd0a5301d3fd7ebd49fac5"
99
99
  },
100
100
  {
101
101
  "author": "beachball",
102
102
  "package": "@fluentui/react-field",
103
- "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221024-0421.1",
104
- "commit": "2b4bcb0720021d3340c12a2711e3bc3ca389f757"
103
+ "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221025-0420.1",
104
+ "commit": "77d655b4fe55decb40dd0a5301d3fd7ebd49fac5"
105
+ }
106
+ ]
107
+ }
108
+ },
109
+ {
110
+ "date": "Tue, 25 Oct 2022 00:35:32 GMT",
111
+ "tag": "@fluentui/react-field_v9.0.0-alpha.6",
112
+ "version": "9.0.0-alpha.6",
113
+ "comments": {
114
+ "prerelease": [
115
+ {
116
+ "author": "behowell@microsoft.com",
117
+ "package": "@fluentui/react-field",
118
+ "commit": "f9436f583d3c291921fe7a4531f69551096e758c",
119
+ "comment": "feat: Add support for validationState to ProgressField"
120
+ },
121
+ {
122
+ "author": "beachball",
123
+ "package": "@fluentui/react-field",
124
+ "comment": "Bump @fluentui/react-checkbox to v9.0.10",
125
+ "commit": "eef12b9ae58b64ff68576dc2d865b601e46c85b9"
126
+ },
127
+ {
128
+ "author": "beachball",
129
+ "package": "@fluentui/react-field",
130
+ "comment": "Bump @fluentui/react-input to v9.2.3",
131
+ "commit": "eef12b9ae58b64ff68576dc2d865b601e46c85b9"
132
+ },
133
+ {
134
+ "author": "beachball",
135
+ "package": "@fluentui/react-field",
136
+ "comment": "Bump @fluentui/react-progress to v9.0.0-alpha.3",
137
+ "commit": "eef12b9ae58b64ff68576dc2d865b601e46c85b9"
138
+ },
139
+ {
140
+ "author": "beachball",
141
+ "package": "@fluentui/react-field",
142
+ "comment": "Bump @fluentui/react-spinbutton to v9.0.6",
143
+ "commit": "eef12b9ae58b64ff68576dc2d865b601e46c85b9"
105
144
  }
106
145
  ]
107
146
  }
package/CHANGELOG.md CHANGED
@@ -1,32 +1,45 @@
1
1
  # Change Log - @fluentui/react-field
2
2
 
3
- This log was last generated on Mon, 24 Oct 2022 04:26:24 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 25 Oct 2022 04:26:12 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20221024-0421.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v0.0.0-nightly-20221024-0421.1)
7
+ ## [0.0.0-nightly-20221025-0420.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v0.0.0-nightly-20221025-0420.1)
8
8
 
9
- Mon, 24 Oct 2022 04:26:24 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.5..@fluentui/react-field_v0.0.0-nightly-20221024-0421.1)
9
+ Tue, 25 Oct 2022 04:26:12 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.6..@fluentui/react-field_v0.0.0-nightly-20221025-0420.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-checkbox to v0.0.0-nightly-20221024-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/2b4bcb0720021d3340c12a2711e3bc3ca389f757) by beachball)
16
- - Bump @fluentui/react-combobox to v0.0.0-nightly-20221024-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/2b4bcb0720021d3340c12a2711e3bc3ca389f757) by beachball)
17
- - Bump @fluentui/react-context-selector to v0.0.0-nightly-20221024-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/2b4bcb0720021d3340c12a2711e3bc3ca389f757) by beachball)
18
- - Bump @fluentui/react-input to v0.0.0-nightly-20221024-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/2b4bcb0720021d3340c12a2711e3bc3ca389f757) by beachball)
19
- - Bump @fluentui/react-label to v0.0.0-nightly-20221024-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/2b4bcb0720021d3340c12a2711e3bc3ca389f757) by beachball)
20
- - Bump @fluentui/react-progress to v0.0.0-nightly-20221024-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/2b4bcb0720021d3340c12a2711e3bc3ca389f757) by beachball)
21
- - Bump @fluentui/react-radio to v0.0.0-nightly-20221024-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/2b4bcb0720021d3340c12a2711e3bc3ca389f757) by beachball)
22
- - Bump @fluentui/react-select to v0.0.0-nightly-20221024-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/2b4bcb0720021d3340c12a2711e3bc3ca389f757) by beachball)
23
- - Bump @fluentui/react-slider to v0.0.0-nightly-20221024-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/2b4bcb0720021d3340c12a2711e3bc3ca389f757) by beachball)
24
- - Bump @fluentui/react-spinbutton to v0.0.0-nightly-20221024-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/2b4bcb0720021d3340c12a2711e3bc3ca389f757) by beachball)
25
- - Bump @fluentui/react-switch to v0.0.0-nightly-20221024-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/2b4bcb0720021d3340c12a2711e3bc3ca389f757) by beachball)
26
- - Bump @fluentui/react-textarea to v0.0.0-nightly-20221024-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/2b4bcb0720021d3340c12a2711e3bc3ca389f757) by beachball)
27
- - Bump @fluentui/react-theme to v0.0.0-nightly-20221024-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/2b4bcb0720021d3340c12a2711e3bc3ca389f757) by beachball)
28
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20221024-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/2b4bcb0720021d3340c12a2711e3bc3ca389f757) by beachball)
29
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221024-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/2b4bcb0720021d3340c12a2711e3bc3ca389f757) by beachball)
15
+ - Bump @fluentui/react-checkbox to v0.0.0-nightly-20221025-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/77d655b4fe55decb40dd0a5301d3fd7ebd49fac5) by beachball)
16
+ - Bump @fluentui/react-combobox to v0.0.0-nightly-20221025-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/77d655b4fe55decb40dd0a5301d3fd7ebd49fac5) by beachball)
17
+ - Bump @fluentui/react-context-selector to v0.0.0-nightly-20221025-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/77d655b4fe55decb40dd0a5301d3fd7ebd49fac5) by beachball)
18
+ - Bump @fluentui/react-input to v0.0.0-nightly-20221025-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/77d655b4fe55decb40dd0a5301d3fd7ebd49fac5) by beachball)
19
+ - Bump @fluentui/react-label to v0.0.0-nightly-20221025-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/77d655b4fe55decb40dd0a5301d3fd7ebd49fac5) by beachball)
20
+ - Bump @fluentui/react-progress to v0.0.0-nightly-20221025-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/77d655b4fe55decb40dd0a5301d3fd7ebd49fac5) by beachball)
21
+ - Bump @fluentui/react-radio to v0.0.0-nightly-20221025-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/77d655b4fe55decb40dd0a5301d3fd7ebd49fac5) by beachball)
22
+ - Bump @fluentui/react-select to v0.0.0-nightly-20221025-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/77d655b4fe55decb40dd0a5301d3fd7ebd49fac5) by beachball)
23
+ - Bump @fluentui/react-slider to v0.0.0-nightly-20221025-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/77d655b4fe55decb40dd0a5301d3fd7ebd49fac5) by beachball)
24
+ - Bump @fluentui/react-spinbutton to v0.0.0-nightly-20221025-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/77d655b4fe55decb40dd0a5301d3fd7ebd49fac5) by beachball)
25
+ - Bump @fluentui/react-switch to v0.0.0-nightly-20221025-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/77d655b4fe55decb40dd0a5301d3fd7ebd49fac5) by beachball)
26
+ - Bump @fluentui/react-textarea to v0.0.0-nightly-20221025-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/77d655b4fe55decb40dd0a5301d3fd7ebd49fac5) by beachball)
27
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20221025-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/77d655b4fe55decb40dd0a5301d3fd7ebd49fac5) by beachball)
28
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20221025-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/77d655b4fe55decb40dd0a5301d3fd7ebd49fac5) by beachball)
29
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221025-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/77d655b4fe55decb40dd0a5301d3fd7ebd49fac5) by beachball)
30
+
31
+ ## [9.0.0-alpha.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.6)
32
+
33
+ Tue, 25 Oct 2022 00:35:32 GMT
34
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.5..@fluentui/react-field_v9.0.0-alpha.6)
35
+
36
+ ### Changes
37
+
38
+ - feat: Add support for validationState to ProgressField ([PR #25253](https://github.com/microsoft/fluentui/pull/25253) by behowell@microsoft.com)
39
+ - Bump @fluentui/react-checkbox to v9.0.10 ([PR #25363](https://github.com/microsoft/fluentui/pull/25363) by beachball)
40
+ - Bump @fluentui/react-input to v9.2.3 ([PR #25363](https://github.com/microsoft/fluentui/pull/25363) by beachball)
41
+ - Bump @fluentui/react-progress to v9.0.0-alpha.3 ([PR #25363](https://github.com/microsoft/fluentui/pull/25363) by beachball)
42
+ - Bump @fluentui/react-spinbutton to v9.0.6 ([PR #25363](https://github.com/microsoft/fluentui/pull/25363) by beachball)
30
43
 
31
44
  ## [9.0.0-alpha.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.5)
32
45
 
package/dist/index.d.ts CHANGED
@@ -73,6 +73,12 @@ export declare type FieldConfig<T extends FieldComponent> = {
73
73
  * @default htmlFor
74
74
  */
75
75
  labelConnection?: 'htmlFor' | 'aria-labelledby';
76
+ /**
77
+ * Should the aria-invalid and aria-errormessage attributes be set when validationState="error".
78
+ *
79
+ * @default true
80
+ */
81
+ ariaInvalidOnError?: boolean;
76
82
  };
77
83
 
78
84
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"Field.types.js","sourceRoot":"","sources":["../../../src/components/Field/Field.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot, SlotClassNames } from '@fluentui/react-utilities';\nimport type { SlotComponent } from './SlotComponent.types';\n\n/**\n * The minimum requirement for a component used by Field.\n *\n * Note: the use of VoidFunctionComponent means that component is not *required* to have a children prop,\n * but it is still allowed to have a children prop.\n */\nexport type FieldComponent = React.VoidFunctionComponent<\n Pick<\n React.HTMLAttributes<HTMLElement>,\n 'id' | 'className' | 'style' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-errormessage'\n >\n>;\n\n/**\n * Slots added by Field\n */\nexport type FieldSlots<T extends FieldComponent> = {\n root: NonNullable<Slot<'div'>>;\n\n /**\n * The underlying component wrapped by this field.\n */\n control: SlotComponent<T>;\n\n /**\n * The label associated with the field.\n */\n label?: Slot<typeof Label>;\n\n /**\n * A message about the validation state. The appearance of the `validationMessage` depends on `validationState`.\n */\n validationMessage?: Slot<'div'>;\n\n /**\n * The icon associated with the `validationMessage`. If the `validationState` prop is set, this will default to an\n * icon corresponding to that state.\n *\n * This will only be displayed if `validationMessage` is set.\n */\n validationMessageIcon?: Slot<'span'>;\n\n /**\n * Additional hint text below the field.\n */\n hint?: Slot<'div'>;\n};\n\n/**\n * Field Props\n */\nexport type FieldProps<T extends FieldComponent> = ComponentProps<Partial<FieldSlots<T>>, 'control'> & {\n /**\n * The orientation of the label relative to the field component.\n * This only affects the label, and not the validationMessage or hint (which always appear below the field component).\n *\n * @default vertical\n */\n orientation?: 'vertical' | 'horizontal';\n\n /**\n * The `validationState` affects the color of the `validationMessage`, the `validationMessageIcon`, and for some\n * field components, an `validationState=\"error\"` causes the border to become red.\n *\n * @default undefined\n */\n validationState?: 'error' | 'warning' | 'success';\n};\n\n/**\n * FieldProps plus extra optional props that are supported by useField_unstable, but not required to be part of the\n * API of every Field component.\n *\n * This allows Field to forward the required and size props to the label if the underlying component supports them,\n * but doesn't add them to the public API of fields that don't support them.\n */\nexport type FieldPropsWithOptionalComponentProps<T extends FieldComponent> = FieldProps<T> & {\n /**\n * Whether the field label should be marked as required.\n */\n required?: boolean;\n\n /**\n * Size of the field label.\n *\n * Number sizes will be ignored, but are allowed because the HTML `<input>` element has a prop `size?: number`.\n */\n size?: 'small' | 'medium' | 'large' | number;\n};\n\n/**\n * Configuration parameters for a Field class, passed to useField_unstable\n */\nexport type FieldConfig<T extends FieldComponent> = {\n /**\n * The underlying input component that this field is wrapping.\n */\n component: T;\n\n /**\n * Class names for this component, created by `getFieldClassNames`.\n */\n classNames: SlotClassNames<FieldSlots<T>>;\n\n /**\n * How the label be connected to the control.\n * * htmlFor - Set the Label's htmlFor prop to the component's ID (and generate an ID if not provided).\n * This is the preferred method for components that use the underlying <input> tag.\n * * aria-labelledby - Set the component's aria-labelledby prop to the Label's ID. Use this for components\n * that are not directly <input> elements (such as RadioGroup).\n *\n * @default htmlFor\n */\n labelConnection?: 'htmlFor' | 'aria-labelledby';\n};\n\n/**\n * State used in rendering Field\n */\nexport type FieldState<T extends FieldComponent> = ComponentState<Required<FieldSlots<T>>> &\n Pick<FieldProps<T>, 'orientation' | 'validationState'> & {\n classNames: SlotClassNames<FieldSlots<T>>;\n };\n"]}
1
+ {"version":3,"file":"Field.types.js","sourceRoot":"","sources":["../../../src/components/Field/Field.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot, SlotClassNames } from '@fluentui/react-utilities';\nimport type { SlotComponent } from './SlotComponent.types';\n\n/**\n * The minimum requirement for a component used by Field.\n *\n * Note: the use of VoidFunctionComponent means that component is not *required* to have a children prop,\n * but it is still allowed to have a children prop.\n */\nexport type FieldComponent = React.VoidFunctionComponent<\n Pick<\n React.HTMLAttributes<HTMLElement>,\n 'id' | 'className' | 'style' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-errormessage'\n >\n>;\n\n/**\n * Slots added by Field\n */\nexport type FieldSlots<T extends FieldComponent> = {\n root: NonNullable<Slot<'div'>>;\n\n /**\n * The underlying component wrapped by this field.\n */\n control: SlotComponent<T>;\n\n /**\n * The label associated with the field.\n */\n label?: Slot<typeof Label>;\n\n /**\n * A message about the validation state. The appearance of the `validationMessage` depends on `validationState`.\n */\n validationMessage?: Slot<'div'>;\n\n /**\n * The icon associated with the `validationMessage`. If the `validationState` prop is set, this will default to an\n * icon corresponding to that state.\n *\n * This will only be displayed if `validationMessage` is set.\n */\n validationMessageIcon?: Slot<'span'>;\n\n /**\n * Additional hint text below the field.\n */\n hint?: Slot<'div'>;\n};\n\n/**\n * Field Props\n */\nexport type FieldProps<T extends FieldComponent> = ComponentProps<Partial<FieldSlots<T>>, 'control'> & {\n /**\n * The orientation of the label relative to the field component.\n * This only affects the label, and not the validationMessage or hint (which always appear below the field component).\n *\n * @default vertical\n */\n orientation?: 'vertical' | 'horizontal';\n\n /**\n * The `validationState` affects the color of the `validationMessage`, the `validationMessageIcon`, and for some\n * field components, an `validationState=\"error\"` causes the border to become red.\n *\n * @default undefined\n */\n validationState?: 'error' | 'warning' | 'success';\n};\n\n/**\n * FieldProps plus extra optional props that are supported by useField_unstable, but not required to be part of the\n * API of every Field component.\n *\n * This allows Field to forward the required and size props to the label if the underlying component supports them,\n * but doesn't add them to the public API of fields that don't support them.\n */\nexport type FieldPropsWithOptionalComponentProps<T extends FieldComponent> = FieldProps<T> & {\n /**\n * Whether the field label should be marked as required.\n */\n required?: boolean;\n\n /**\n * Size of the field label.\n *\n * Number sizes will be ignored, but are allowed because the HTML `<input>` element has a prop `size?: number`.\n */\n size?: 'small' | 'medium' | 'large' | number;\n};\n\n/**\n * Configuration parameters for a Field class, passed to useField_unstable\n */\nexport type FieldConfig<T extends FieldComponent> = {\n /**\n * The underlying input component that this field is wrapping.\n */\n component: T;\n\n /**\n * Class names for this component, created by `getFieldClassNames`.\n */\n classNames: SlotClassNames<FieldSlots<T>>;\n\n /**\n * How the label be connected to the control.\n * * htmlFor - Set the Label's htmlFor prop to the component's ID (and generate an ID if not provided).\n * This is the preferred method for components that use the underlying <input> tag.\n * * aria-labelledby - Set the component's aria-labelledby prop to the Label's ID. Use this for components\n * that are not directly <input> elements (such as RadioGroup).\n *\n * @default htmlFor\n */\n labelConnection?: 'htmlFor' | 'aria-labelledby';\n\n /**\n * Should the aria-invalid and aria-errormessage attributes be set when validationState=\"error\".\n *\n * @default true\n */\n ariaInvalidOnError?: boolean;\n};\n\n/**\n * State used in rendering Field\n */\nexport type FieldState<T extends FieldComponent> = ComponentState<Required<FieldSlots<T>>> &\n Pick<FieldProps<T>, 'orientation' | 'validationState'> & {\n classNames: SlotClassNames<FieldSlots<T>>;\n };\n"]}
@@ -59,7 +59,8 @@ export const useField_unstable = (props, ref, params) => {
59
59
  validationState
60
60
  } = fieldProps;
61
61
  const {
62
- labelConnection = 'htmlFor'
62
+ labelConnection = 'htmlFor',
63
+ ariaInvalidOnError = true
63
64
  } = params;
64
65
  const baseId = useId('field-');
65
66
  const root = resolveShorthand(fieldProps.root, {
@@ -103,7 +104,7 @@ export const useField_unstable = (props, ref, params) => {
103
104
  (_a = control['aria-labelledby']) !== null && _a !== void 0 ? _a : control['aria-labelledby'] = label.id;
104
105
  }
105
106
 
106
- if (validationState === 'error') {
107
+ if (validationState === 'error' && ariaInvalidOnError) {
107
108
  (_b = control['aria-invalid']) !== null && _b !== void 0 ? _b : control['aria-invalid'] = true;
108
109
 
109
110
  if (validationMessage) {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Field/useField.tsx"],"names":[],"mappings":"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","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 {\n FieldComponent,\n FieldConfig,\n FieldProps,\n FieldPropsWithOptionalComponentProps,\n FieldState,\n} 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 extends FieldProps<FieldComponent>>(props: Props) => {\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 FieldComponent>(\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' } = 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 control = resolveShorthand(fieldProps.control, {\n required: true,\n defaultProps: {\n ref,\n id: baseId + '__control',\n ...controlProps,\n },\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: labelConnection === 'htmlFor' ? control.id : undefined,\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 control['aria-labelledby'] ??= label.id;\n }\n\n if (validationState === 'error') {\n control['aria-invalid'] ??= true;\n if (validationMessage) {\n control['aria-errormessage'] ??= validationMessage.id;\n }\n if (hint) {\n control['aria-describedby'] ??= hint.id;\n }\n } else {\n // If the state is not an error, then the control is described by the validation message, or hint, or both\n const describedby = validationMessage || hint;\n if (describedby) {\n control['aria-describedby'] ??= validationMessage && hint ? `${validationMessage.id} ${hint.id}` : describedby.id;\n }\n }\n\n const state: FieldState<FieldComponent> = {\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"],"sourceRoot":""}
1
+ {"version":3,"sources":["../../../src/components/Field/useField.tsx"],"names":[],"mappings":"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","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 {\n FieldComponent,\n FieldConfig,\n FieldProps,\n FieldPropsWithOptionalComponentProps,\n FieldState,\n} 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 extends FieldProps<FieldComponent>>(props: Props) => {\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 FieldComponent>(\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 control = resolveShorthand(fieldProps.control, {\n required: true,\n defaultProps: {\n ref,\n id: baseId + '__control',\n ...controlProps,\n },\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: labelConnection === 'htmlFor' ? control.id : undefined,\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 control['aria-labelledby'] ??= label.id;\n }\n\n if (validationState === 'error' && ariaInvalidOnError) {\n control['aria-invalid'] ??= true;\n if (validationMessage) {\n control['aria-errormessage'] ??= validationMessage.id;\n }\n if (hint) {\n control['aria-describedby'] ??= hint.id;\n }\n } else {\n // If the state is not an error, then the control is described by the validation message, or hint, or both\n const describedby = validationMessage || hint;\n if (describedby) {\n control['aria-describedby'] ??= validationMessage && hint ? `${validationMessage.id} ${hint.id}` : describedby.id;\n }\n }\n\n const state: FieldState<FieldComponent> = {\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"],"sourceRoot":""}
@@ -6,8 +6,10 @@ export const ProgressField = /*#__PURE__*/React.forwardRef((props, ref) => {
6
6
  const state = useField_unstable(props, ref, {
7
7
  component: Progress,
8
8
  classNames: progressFieldClassNames,
9
- labelConnection: 'aria-labelledby'
9
+ labelConnection: 'aria-labelledby',
10
+ ariaInvalidOnError: false
10
11
  });
12
+ state.control.validationState = state.validationState;
11
13
  useFieldStyles_unstable(state);
12
14
  return renderField_unstable(state);
13
15
  });
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/ProgressField/ProgressField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,0BAAzB;AAGA,SAAS,kBAAT,EAA6B,oBAA7B,EAAmD,uBAAnD,EAA4E,iBAA5E,QAAqG,aAArG;AAIA,OAAO,MAAM,uBAAuB,gBAAG,kBAAkB,CAAC,eAAD,CAAlD;AAEP,OAAO,MAAM,aAAa,gBAA4C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,EAAa;IAC1C,SAAS,EAAE,QAD+B;IAE1C,UAAU,EAAE,uBAF8B;IAG1C,eAAe,EAAE;EAHyB,CAAb,CAA/B;EAKA,uBAAuB,CAAC,KAAD,CAAvB;EACA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CARqE,CAA/D;AAUP,aAAa,CAAC,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport { Progress } from '@fluentui/react-progress';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from '../../Field';\nimport { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';\n\nexport type ProgressFieldProps = FieldProps<typeof Progress>;\n\nexport const progressFieldClassNames = getFieldClassNames('ProgressField');\n\nexport const ProgressField: ForwardRefComponent<ProgressFieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref, {\n component: Progress,\n classNames: progressFieldClassNames,\n labelConnection: 'aria-labelledby',\n });\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nProgressField.displayName = 'ProgressField';\n"],"sourceRoot":""}
1
+ {"version":3,"sources":["../../../src/components/ProgressField/ProgressField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,0BAAzB;AAGA,SAAS,kBAAT,EAA6B,oBAA7B,EAAmD,uBAAnD,EAA4E,iBAA5E,QAAqG,aAArG;AAIA,OAAO,MAAM,uBAAuB,gBAAG,kBAAkB,CAAC,eAAD,CAAlD;AAEP,OAAO,MAAM,aAAa,gBAA4C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,EAAa;IAC1C,SAAS,EAAE,QAD+B;IAE1C,UAAU,EAAE,uBAF8B;IAG1C,eAAe,EAAE,iBAHyB;IAI1C,kBAAkB,EAAE;EAJsB,CAAb,CAA/B;EAMA,KAAK,CAAC,OAAN,CAAc,eAAd,GAAgC,KAAK,CAAC,eAAtC;EACA,uBAAuB,CAAC,KAAD,CAAvB;EACA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CAVqE,CAA/D;AAYP,aAAa,CAAC,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport { Progress } from '@fluentui/react-progress';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from '../../Field';\nimport { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';\n\nexport type ProgressFieldProps = FieldProps<typeof Progress>;\n\nexport const progressFieldClassNames = getFieldClassNames('ProgressField');\n\nexport const ProgressField: ForwardRefComponent<ProgressFieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref, {\n component: Progress,\n classNames: progressFieldClassNames,\n labelConnection: 'aria-labelledby',\n ariaInvalidOnError: false,\n });\n state.control.validationState = state.validationState;\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nProgressField.displayName = 'ProgressField';\n"],"sourceRoot":""}
@@ -72,7 +72,8 @@ const useField_unstable = (props, ref, params) => {
72
72
  validationState
73
73
  } = fieldProps;
74
74
  const {
75
- labelConnection = 'htmlFor'
75
+ labelConnection = 'htmlFor',
76
+ ariaInvalidOnError = true
76
77
  } = params;
77
78
  const baseId = react_utilities_1.useId('field-');
78
79
  const root = react_utilities_1.resolveShorthand(fieldProps.root, {
@@ -116,7 +117,7 @@ const useField_unstable = (props, ref, params) => {
116
117
  (_a = control['aria-labelledby']) !== null && _a !== void 0 ? _a : control['aria-labelledby'] = label.id;
117
118
  }
118
119
 
119
- if (validationState === 'error') {
120
+ if (validationState === 'error' && ariaInvalidOnError) {
120
121
  (_b = control['aria-invalid']) !== null && _b !== void 0 ? _b : control['aria-invalid'] = true;
121
122
 
122
123
  if (validationMessage) {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Field/useField.tsx"],"names":[],"mappings":"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","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 {\n FieldComponent,\n FieldConfig,\n FieldProps,\n FieldPropsWithOptionalComponentProps,\n FieldState,\n} 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 extends FieldProps<FieldComponent>>(props: Props) => {\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 FieldComponent>(\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' } = 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 control = resolveShorthand(fieldProps.control, {\n required: true,\n defaultProps: {\n ref,\n id: baseId + '__control',\n ...controlProps,\n },\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: labelConnection === 'htmlFor' ? control.id : undefined,\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 control['aria-labelledby'] ??= label.id;\n }\n\n if (validationState === 'error') {\n control['aria-invalid'] ??= true;\n if (validationMessage) {\n control['aria-errormessage'] ??= validationMessage.id;\n }\n if (hint) {\n control['aria-describedby'] ??= hint.id;\n }\n } else {\n // If the state is not an error, then the control is described by the validation message, or hint, or both\n const describedby = validationMessage || hint;\n if (describedby) {\n control['aria-describedby'] ??= validationMessage && hint ? `${validationMessage.id} ${hint.id}` : describedby.id;\n }\n }\n\n const state: FieldState<FieldComponent> = {\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"],"sourceRoot":""}
1
+ {"version":3,"sources":["../../../src/components/Field/useField.tsx"],"names":[],"mappings":"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","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 {\n FieldComponent,\n FieldConfig,\n FieldProps,\n FieldPropsWithOptionalComponentProps,\n FieldState,\n} 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 extends FieldProps<FieldComponent>>(props: Props) => {\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 FieldComponent>(\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 control = resolveShorthand(fieldProps.control, {\n required: true,\n defaultProps: {\n ref,\n id: baseId + '__control',\n ...controlProps,\n },\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: labelConnection === 'htmlFor' ? control.id : undefined,\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 control['aria-labelledby'] ??= label.id;\n }\n\n if (validationState === 'error' && ariaInvalidOnError) {\n control['aria-invalid'] ??= true;\n if (validationMessage) {\n control['aria-errormessage'] ??= validationMessage.id;\n }\n if (hint) {\n control['aria-describedby'] ??= hint.id;\n }\n } else {\n // If the state is not an error, then the control is described by the validation message, or hint, or both\n const describedby = validationMessage || hint;\n if (describedby) {\n control['aria-describedby'] ??= validationMessage && hint ? `${validationMessage.id} ${hint.id}` : describedby.id;\n }\n }\n\n const state: FieldState<FieldComponent> = {\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"],"sourceRoot":""}
@@ -16,8 +16,10 @@ exports.ProgressField = /*#__PURE__*/React.forwardRef((props, ref) => {
16
16
  const state = Field_1.useField_unstable(props, ref, {
17
17
  component: react_progress_1.Progress,
18
18
  classNames: exports.progressFieldClassNames,
19
- labelConnection: 'aria-labelledby'
19
+ labelConnection: 'aria-labelledby',
20
+ ariaInvalidOnError: false
20
21
  });
22
+ state.control.validationState = state.validationState;
21
23
  Field_1.useFieldStyles_unstable(state);
22
24
  return Field_1.renderField_unstable(state);
23
25
  });
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/ProgressField/ProgressField.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;;AAGA,MAAA,OAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AAIa,OAAA,CAAA,uBAAA,gBAA0B,OAAA,CAAA,kBAAA,CAAmB,eAAnB,CAA1B;AAEA,OAAA,CAAA,aAAA,gBAAyD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,KAAK,GAAG,OAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,EAA8B;IAC1C,SAAS,EAAE,gBAAA,CAAA,QAD+B;IAE1C,UAAU,EAAE,OAAA,CAAA,uBAF8B;IAG1C,eAAe,EAAE;EAHyB,CAA9B,CAAd;EAKA,OAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,OAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CARqE,CAAzD;AAUb,OAAA,CAAA,aAAA,CAAc,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport { Progress } from '@fluentui/react-progress';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from '../../Field';\nimport { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';\n\nexport type ProgressFieldProps = FieldProps<typeof Progress>;\n\nexport const progressFieldClassNames = getFieldClassNames('ProgressField');\n\nexport const ProgressField: ForwardRefComponent<ProgressFieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref, {\n component: Progress,\n classNames: progressFieldClassNames,\n labelConnection: 'aria-labelledby',\n });\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nProgressField.displayName = 'ProgressField';\n"],"sourceRoot":""}
1
+ {"version":3,"sources":["../../../src/components/ProgressField/ProgressField.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;;AAGA,MAAA,OAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AAIa,OAAA,CAAA,uBAAA,gBAA0B,OAAA,CAAA,kBAAA,CAAmB,eAAnB,CAA1B;AAEA,OAAA,CAAA,aAAA,gBAAyD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,KAAK,GAAG,OAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,EAA8B;IAC1C,SAAS,EAAE,gBAAA,CAAA,QAD+B;IAE1C,UAAU,EAAE,OAAA,CAAA,uBAF8B;IAG1C,eAAe,EAAE,iBAHyB;IAI1C,kBAAkB,EAAE;EAJsB,CAA9B,CAAd;EAMA,KAAK,CAAC,OAAN,CAAc,eAAd,GAAgC,KAAK,CAAC,eAAtC;EACA,OAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,OAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CAVqE,CAAzD;AAYb,OAAA,CAAA,aAAA,CAAc,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport { Progress } from '@fluentui/react-progress';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from '../../Field';\nimport { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';\n\nexport type ProgressFieldProps = FieldProps<typeof Progress>;\n\nexport const progressFieldClassNames = getFieldClassNames('ProgressField');\n\nexport const ProgressField: ForwardRefComponent<ProgressFieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref, {\n component: Progress,\n classNames: progressFieldClassNames,\n labelConnection: 'aria-labelledby',\n ariaInvalidOnError: false,\n });\n state.control.validationState = state.validationState;\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nProgressField.displayName = 'ProgressField';\n"],"sourceRoot":""}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-field",
3
- "version": "0.0.0-nightly-20221024-0421.1",
3
+ "version": "0.0.0-nightly-20221025-0420.1",
4
4
  "description": "Fluent UI Field components",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -27,25 +27,25 @@
27
27
  "devDependencies": {
28
28
  "@fluentui/eslint-plugin": "*",
29
29
  "@fluentui/react-conformance": "*",
30
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20221024-0421.1",
30
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20221025-0420.1",
31
31
  "@fluentui/scripts": "^1.0.0"
32
32
  },
33
33
  "dependencies": {
34
- "@fluentui/react-checkbox": "0.0.0-nightly-20221024-0421.1",
35
- "@fluentui/react-combobox": "0.0.0-nightly-20221024-0421.1",
36
- "@fluentui/react-context-selector": "0.0.0-nightly-20221024-0421.1",
34
+ "@fluentui/react-checkbox": "0.0.0-nightly-20221025-0420.1",
35
+ "@fluentui/react-combobox": "0.0.0-nightly-20221025-0420.1",
36
+ "@fluentui/react-context-selector": "0.0.0-nightly-20221025-0420.1",
37
37
  "@fluentui/react-icons": "^2.0.175",
38
- "@fluentui/react-input": "0.0.0-nightly-20221024-0421.1",
39
- "@fluentui/react-label": "0.0.0-nightly-20221024-0421.1",
40
- "@fluentui/react-progress": "0.0.0-nightly-20221024-0421.1",
41
- "@fluentui/react-radio": "0.0.0-nightly-20221024-0421.1",
42
- "@fluentui/react-select": "0.0.0-nightly-20221024-0421.1",
43
- "@fluentui/react-slider": "0.0.0-nightly-20221024-0421.1",
44
- "@fluentui/react-spinbutton": "0.0.0-nightly-20221024-0421.1",
45
- "@fluentui/react-switch": "0.0.0-nightly-20221024-0421.1",
46
- "@fluentui/react-textarea": "0.0.0-nightly-20221024-0421.1",
47
- "@fluentui/react-theme": "0.0.0-nightly-20221024-0421.1",
48
- "@fluentui/react-utilities": "0.0.0-nightly-20221024-0421.1",
38
+ "@fluentui/react-input": "0.0.0-nightly-20221025-0420.1",
39
+ "@fluentui/react-label": "0.0.0-nightly-20221025-0420.1",
40
+ "@fluentui/react-progress": "0.0.0-nightly-20221025-0420.1",
41
+ "@fluentui/react-radio": "0.0.0-nightly-20221025-0420.1",
42
+ "@fluentui/react-select": "0.0.0-nightly-20221025-0420.1",
43
+ "@fluentui/react-slider": "0.0.0-nightly-20221025-0420.1",
44
+ "@fluentui/react-spinbutton": "0.0.0-nightly-20221025-0420.1",
45
+ "@fluentui/react-switch": "0.0.0-nightly-20221025-0420.1",
46
+ "@fluentui/react-textarea": "0.0.0-nightly-20221025-0420.1",
47
+ "@fluentui/react-theme": "0.0.0-nightly-20221025-0420.1",
48
+ "@fluentui/react-utilities": "0.0.0-nightly-20221025-0420.1",
49
49
  "@griffel/react": "^1.4.1",
50
50
  "tslib": "^2.1.0"
51
51
  },