@fluentui/react-field 0.0.0-nightly-20230404-0419.1 → 0.0.0-nightly-20230406-0417.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.
Files changed (37) hide show
  1. package/CHANGELOG.json +40 -13
  2. package/CHANGELOG.md +20 -9
  3. package/dist/index.d.ts +95 -10
  4. package/lib/components/Field/Field.js +3 -1
  5. package/lib/components/Field/Field.js.map +1 -1
  6. package/lib/components/Field/Field.types.js.map +1 -1
  7. package/lib/components/Field/renderField.js +11 -2
  8. package/lib/components/Field/renderField.js.map +1 -1
  9. package/lib/components/Field/useField.js +8 -36
  10. package/lib/components/Field/useField.js.map +1 -1
  11. package/lib/contexts/FieldContext.js +5 -0
  12. package/lib/contexts/FieldContext.js.map +1 -0
  13. package/lib/contexts/index.js +4 -0
  14. package/lib/contexts/index.js.map +1 -0
  15. package/lib/contexts/useFieldContextValues.js +33 -0
  16. package/lib/contexts/useFieldContextValues.js.map +1 -0
  17. package/lib/contexts/useFieldControlProps.js +65 -0
  18. package/lib/contexts/useFieldControlProps.js.map +1 -0
  19. package/lib/index.js +1 -0
  20. package/lib/index.js.map +1 -1
  21. package/lib-commonjs/components/Field/Field.js +3 -1
  22. package/lib-commonjs/components/Field/Field.js.map +1 -1
  23. package/lib-commonjs/components/Field/renderField.js +9 -2
  24. package/lib-commonjs/components/Field/renderField.js.map +1 -1
  25. package/lib-commonjs/components/Field/useField.js +7 -38
  26. package/lib-commonjs/components/Field/useField.js.map +1 -1
  27. package/lib-commonjs/contexts/FieldContext.js +21 -0
  28. package/lib-commonjs/contexts/FieldContext.js.map +1 -0
  29. package/lib-commonjs/contexts/index.js +11 -0
  30. package/lib-commonjs/contexts/index.js.map +1 -0
  31. package/lib-commonjs/contexts/useFieldContextValues.js +44 -0
  32. package/lib-commonjs/contexts/useFieldContextValues.js.map +1 -0
  33. package/lib-commonjs/contexts/useFieldControlProps.js +71 -0
  34. package/lib-commonjs/contexts/useFieldControlProps.js.map +1 -0
  35. package/lib-commonjs/index.js +5 -0
  36. package/lib-commonjs/index.js.map +1 -1
  37. package/package.json +6 -6
package/CHANGELOG.json CHANGED
@@ -2,9 +2,9 @@
2
2
  "name": "@fluentui/react-field",
3
3
  "entries": [
4
4
  {
5
- "date": "Tue, 04 Apr 2023 04:25:20 GMT",
6
- "tag": "@fluentui/react-field_v0.0.0-nightly-20230404-0419.1",
7
- "version": "0.0.0-nightly-20230404-0419.1",
5
+ "date": "Thu, 06 Apr 2023 04:23:46 GMT",
6
+ "tag": "@fluentui/react-field_v0.0.0-nightly-20230406-0417.1",
7
+ "version": "0.0.0-nightly-20230406-0417.1",
8
8
  "comments": {
9
9
  "prerelease": [
10
10
  {
@@ -16,32 +16,59 @@
16
16
  {
17
17
  "author": "beachball",
18
18
  "package": "@fluentui/react-field",
19
- "comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20230404-0419.1",
20
- "commit": "75e35c8f53b490d241fffe70f831b72eaa66a5ab"
19
+ "comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20230406-0417.1",
20
+ "commit": "6b7f70ea7424a1cdc3c140ad7ce9da2f04850be3"
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-20230404-0419.1",
26
- "commit": "75e35c8f53b490d241fffe70f831b72eaa66a5ab"
25
+ "comment": "Bump @fluentui/react-label to v0.0.0-nightly-20230406-0417.1",
26
+ "commit": "6b7f70ea7424a1cdc3c140ad7ce9da2f04850be3"
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-20230404-0419.1",
32
- "commit": "75e35c8f53b490d241fffe70f831b72eaa66a5ab"
31
+ "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230406-0417.1",
32
+ "commit": "6b7f70ea7424a1cdc3c140ad7ce9da2f04850be3"
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-20230404-0419.1",
38
- "commit": "75e35c8f53b490d241fffe70f831b72eaa66a5ab"
37
+ "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230406-0417.1",
38
+ "commit": "6b7f70ea7424a1cdc3c140ad7ce9da2f04850be3"
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-20230404-0419.1",
44
- "commit": "75e35c8f53b490d241fffe70f831b72eaa66a5ab"
43
+ "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230406-0417.1",
44
+ "commit": "6b7f70ea7424a1cdc3c140ad7ce9da2f04850be3"
45
+ }
46
+ ]
47
+ }
48
+ },
49
+ {
50
+ "date": "Tue, 04 Apr 2023 18:44:50 GMT",
51
+ "tag": "@fluentui/react-field_v9.0.0-alpha.29",
52
+ "version": "9.0.0-alpha.29",
53
+ "comments": {
54
+ "prerelease": [
55
+ {
56
+ "author": "beachball",
57
+ "package": "@fluentui/react-field",
58
+ "comment": "Bump @fluentui/react-context-selector to v9.1.16",
59
+ "commit": "6778d76bbbad7e1975c151c797f28c2708cde2ce"
60
+ },
61
+ {
62
+ "author": "beachball",
63
+ "package": "@fluentui/react-field",
64
+ "comment": "Bump @fluentui/react-label to v9.1.7",
65
+ "commit": "6778d76bbbad7e1975c151c797f28c2708cde2ce"
66
+ },
67
+ {
68
+ "author": "beachball",
69
+ "package": "@fluentui/react-field",
70
+ "comment": "Bump @fluentui/react-utilities to v9.7.3",
71
+ "commit": "6778d76bbbad7e1975c151c797f28c2708cde2ce"
45
72
  }
46
73
  ]
47
74
  }
package/CHANGELOG.md CHANGED
@@ -1,22 +1,33 @@
1
1
  # Change Log - @fluentui/react-field
2
2
 
3
- This log was last generated on Tue, 04 Apr 2023 04:25:20 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 06 Apr 2023 04:23:46 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20230404-0419.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v0.0.0-nightly-20230404-0419.1)
7
+ ## [0.0.0-nightly-20230406-0417.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v0.0.0-nightly-20230406-0417.1)
8
8
 
9
- Tue, 04 Apr 2023 04:25:20 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.27..@fluentui/react-field_v0.0.0-nightly-20230404-0419.1)
9
+ Thu, 06 Apr 2023 04:23:46 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.29..@fluentui/react-field_v0.0.0-nightly-20230406-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-20230404-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/75e35c8f53b490d241fffe70f831b72eaa66a5ab) by beachball)
16
- - Bump @fluentui/react-label to v0.0.0-nightly-20230404-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/75e35c8f53b490d241fffe70f831b72eaa66a5ab) by beachball)
17
- - Bump @fluentui/react-theme to v0.0.0-nightly-20230404-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/75e35c8f53b490d241fffe70f831b72eaa66a5ab) by beachball)
18
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20230404-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/75e35c8f53b490d241fffe70f831b72eaa66a5ab) by beachball)
19
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230404-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/75e35c8f53b490d241fffe70f831b72eaa66a5ab) by beachball)
15
+ - Bump @fluentui/react-context-selector to v0.0.0-nightly-20230406-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/6b7f70ea7424a1cdc3c140ad7ce9da2f04850be3) by beachball)
16
+ - Bump @fluentui/react-label to v0.0.0-nightly-20230406-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/6b7f70ea7424a1cdc3c140ad7ce9da2f04850be3) by beachball)
17
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20230406-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/6b7f70ea7424a1cdc3c140ad7ce9da2f04850be3) by beachball)
18
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20230406-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/6b7f70ea7424a1cdc3c140ad7ce9da2f04850be3) by beachball)
19
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230406-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/6b7f70ea7424a1cdc3c140ad7ce9da2f04850be3) by beachball)
20
+
21
+ ## [9.0.0-alpha.29](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.29)
22
+
23
+ Tue, 04 Apr 2023 18:44:50 GMT
24
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.27..@fluentui/react-field_v9.0.0-alpha.29)
25
+
26
+ ### Changes
27
+
28
+ - Bump @fluentui/react-context-selector to v9.1.16 ([PR #27434](https://github.com/microsoft/fluentui/pull/27434) by beachball)
29
+ - Bump @fluentui/react-label to v9.1.7 ([PR #27434](https://github.com/microsoft/fluentui/pull/27434) by beachball)
30
+ - Bump @fluentui/react-utilities to v9.7.3 ([PR #27434](https://github.com/microsoft/fluentui/pull/27434) by beachball)
20
31
 
21
32
  ## [9.0.0-alpha.27](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.27)
22
33
 
package/dist/index.d.ts CHANGED
@@ -19,12 +19,60 @@ export declare type DeprecatedFieldProps<ControlProps> = ControlProps & {
19
19
 
20
20
  export declare const Field: ForwardRefComponent<FieldProps>;
21
21
 
22
+ export declare const fieldClassNames: SlotClassNames<FieldSlots>;
23
+
24
+ export declare const FieldContextProvider: React_2.Provider<Readonly<Pick<FieldState, "orientation" | "required" | "size" | "validationState" | "generatedControlId"> & {
25
+ labelFor?: string | undefined;
26
+ labelId?: string | undefined;
27
+ validationMessageId?: string | undefined;
28
+ hintId?: string | undefined;
29
+ }> | undefined>;
30
+
31
+ export declare type FieldContextValue = Readonly<Pick<FieldState, 'generatedControlId' | 'orientation' | 'required' | 'size' | 'validationState'> & {
32
+ /** The label's for prop. Undefined if there is no label. */
33
+ labelFor?: string;
34
+ /** The label's id prop. Undefined if there is no label. */
35
+ labelId?: string;
36
+ /** The validationMessage's id prop. Undefined if there is no validationMessage. */
37
+ validationMessageId?: string;
38
+ /** The hint's id prop. Undefined if there is no hint. */
39
+ hintId?: string;
40
+ }>;
41
+
42
+ export declare type FieldContextValues = {
43
+ field: FieldContextValue;
44
+ };
45
+
22
46
  /**
23
- * The props added to the Field's child element.
47
+ * The props added to the control inside the Field.
24
48
  */
25
- declare type FieldChildProps = Pick<React_2.HTMLAttributes<HTMLElement>, 'id' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-required'>;
49
+ export declare type FieldControlProps = Pick<React_2.HTMLAttributes<HTMLElement>, 'id' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-required'>;
26
50
 
27
- export declare const fieldClassNames: SlotClassNames<FieldSlots>;
51
+ /**
52
+ * Options for `useFieldControlProps_unstable`.
53
+ */
54
+ export declare type FieldControlPropsOptions = {
55
+ /**
56
+ * Skips setting `aria-labelledby` on the control if the `label.htmlFor` refers to the control.
57
+ *
58
+ * This should be used with controls that can be the target of a label's `for` prop:
59
+ * `<button>`, `<input>`, `<progress>`, `<select>`, `<textarea>`.
60
+ */
61
+ supportsLabelFor?: boolean;
62
+ /**
63
+ * Sets `required` instead of `aria-required` when the Field is marked required.
64
+ *
65
+ * This should be used with controls that support the `required` prop:
66
+ * `<input>` (except `range` or `color`), `<select>`, `<textarea>`.
67
+ */
68
+ supportsRequired?: boolean;
69
+ /**
70
+ * Sets the size prop on the control to match the Field's size: `'small' | 'medium' | 'large'`.
71
+ *
72
+ * This should be used with controls that have a custom size prop that matches the Field's size prop.
73
+ */
74
+ supportsSize?: boolean;
75
+ };
28
76
 
29
77
  /**
30
78
  * Field Props
@@ -34,13 +82,15 @@ export declare type FieldProps = Omit<ComponentProps<FieldSlots>, 'children'> &
34
82
  * The Field's child can be a single form control, or a render function that takes the props that should be spread on
35
83
  * a form control.
36
84
  *
37
- * All form controls in this library can be used directly as children (such as `<Input>` or `<RadioGroup>`), as well
38
- * as intrinsic form controls like `<input>` or `<textarea>`. Custom controls can also be used as long as they
39
- * accept FieldChildProps and spread them on the appropriate element.
85
+ * All form controls in this library can be used directly as children (such as `<Input>` or `<RadioGroup>`).
40
86
  *
41
- * For more complex scenarios, a render function can be used to pass the FieldChildProps to the appropriate control.
87
+ * For other controls, there are two options:
88
+ * 1. The child of Field can be a render function that is given the props that should be spread on the control.
89
+ * `<Field>{(props) => <MyInput {...props} />}</Field>`
90
+ * 2. The control itself can merge props from field with useFieldControlProps_unstable().
91
+ * `props = useFieldControlProps_unstable(props);`
42
92
  */
43
- children?: React_2.ReactElement<FieldChildProps> | null | ((props: FieldChildProps) => React_2.ReactNode);
93
+ children?: React_2.ReactNode | ((props: FieldControlProps) => React_2.ReactNode);
44
94
  /**
45
95
  * The orientation of the label relative to the field component.
46
96
  * This only affects the label, and not the validationMessage or hint (which always appear below the field component).
@@ -107,7 +157,12 @@ export declare type FieldSlots = {
107
157
  /**
108
158
  * State used in rendering Field
109
159
  */
110
- export declare type FieldState = ComponentState<Required<FieldSlots>> & Required<Pick<FieldProps, 'orientation' | 'validationState'>>;
160
+ export declare type FieldState = ComponentState<Required<FieldSlots>> & Required<Pick<FieldProps, 'orientation' | 'required' | 'size' | 'validationState'>> & Pick<FieldProps, 'children'> & {
161
+ /**
162
+ * The ID generated for the control inside the field, and the default value of label.htmlFor prop.
163
+ */
164
+ generatedControlId: string;
165
+ };
111
166
 
112
167
  /**
113
168
  * @deprecated Only for use to make deprecated [Control]Field shim components.
@@ -134,7 +189,7 @@ export declare function makeDeprecatedField<ControlProps>(Control: React_2.Compo
134
189
  /**
135
190
  * Render the final JSX of Field
136
191
  */
137
- export declare const renderField_unstable: (state: FieldState) => JSX.Element;
192
+ export declare const renderField_unstable: (state: FieldState, contextValues?: FieldContextValues | undefined) => JSX.Element;
138
193
 
139
194
  /**
140
195
  * Create the state required to render Field.
@@ -147,6 +202,36 @@ export declare const renderField_unstable: (state: FieldState) => JSX.Element;
147
202
  */
148
203
  export declare const useField_unstable: (props: FieldProps, ref: React_2.Ref<HTMLDivElement>) => FieldState;
149
204
 
205
+ export declare const useFieldContext_unstable: () => Readonly<Pick<FieldState, "orientation" | "required" | "size" | "validationState" | "generatedControlId"> & {
206
+ labelFor?: string | undefined;
207
+ labelId?: string | undefined;
208
+ validationMessageId?: string | undefined;
209
+ hintId?: string | undefined;
210
+ }> | undefined;
211
+
212
+ /**
213
+ * Get the context values used when rendering Field.
214
+ */
215
+ export declare const useFieldContextValues_unstable: (state: FieldState) => FieldContextValues;
216
+
217
+ /**
218
+ * Gets the control props from the field context, if this inside a `<Field>`.
219
+ *
220
+ * When called with no arguments, returns the FieldControlProps that should be applied to the control.
221
+ *
222
+ * @returns A FieldControlProps object if inside a `<Field>`, otherwise undefined.
223
+ */
224
+ export declare function useFieldControlProps_unstable(): FieldControlProps | undefined;
225
+
226
+ /**
227
+ * Copies and merges the FieldControlProps with the given props, if this inside a `<Field>`.
228
+ *
229
+ * @param props - The existing props for the control. These will be merged with the control props from the field context.
230
+ * @param options - Option to include the size prop.
231
+ * @returns Merged props if inside a `<Field>`, otherwise the original props, or undefined if no props given.
232
+ */
233
+ export declare function useFieldControlProps_unstable<Props extends FieldControlProps>(props: Props, options?: FieldControlPropsOptions): Props;
234
+
150
235
  /**
151
236
  * Apply styling to the Field slots based on the state
152
237
  */
@@ -2,10 +2,12 @@ import * as React from 'react';
2
2
  import { renderField_unstable } from './renderField';
3
3
  import { useField_unstable } from './useField';
4
4
  import { useFieldStyles_unstable } from './useFieldStyles';
5
+ import { useFieldContextValues_unstable } from '../../contexts/index';
5
6
  export const Field = /*#__PURE__*/React.forwardRef((props, ref) => {
6
7
  const state = useField_unstable(props, ref);
7
8
  useFieldStyles_unstable(state);
8
- return renderField_unstable(state);
9
+ const context = useFieldContextValues_unstable(state);
10
+ return renderField_unstable(state, context);
9
11
  });
10
12
  Field.displayName = 'Field';
11
13
  //# sourceMappingURL=Field.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React","renderField_unstable","useField_unstable","useFieldStyles_unstable","Field","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/Field/Field.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from './Field.types';\nimport { renderField_unstable } from './renderField';\nimport { useField_unstable } from './useField';\nimport { useFieldStyles_unstable } from './useFieldStyles';\n\nexport const Field: ForwardRefComponent<FieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref);\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nField.displayName = 'Field';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAGvB,SAASC,oBAAoB,QAAQ;AACrC,SAASC,iBAAiB,QAAQ;AAClC,SAASC,uBAAuB,QAAQ;AAExC,OAAO,MAAMC,KAAA,gBAAyCJ,KAAA,CAAMK,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACrF,MAAMC,KAAA,GAAQN,iBAAA,CAAkBI,KAAA,EAAOC,GAAA;EACvCJ,uBAAA,CAAwBK,KAAA;EACxB,OAAOP,oBAAA,CAAqBO,KAAA;AAC9B;AAEAJ,KAAA,CAAMK,WAAW,GAAG"}
1
+ {"version":3,"names":["React","renderField_unstable","useField_unstable","useFieldStyles_unstable","useFieldContextValues_unstable","Field","forwardRef","props","ref","state","context","displayName"],"sources":["../../../src/components/Field/Field.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from './Field.types';\nimport { renderField_unstable } from './renderField';\nimport { useField_unstable } from './useField';\nimport { useFieldStyles_unstable } from './useFieldStyles';\nimport { useFieldContextValues_unstable } from '../../contexts/index';\n\nexport const Field: ForwardRefComponent<FieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref);\n useFieldStyles_unstable(state);\n const context = useFieldContextValues_unstable(state);\n return renderField_unstable(state, context);\n});\n\nField.displayName = 'Field';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAGvB,SAASC,oBAAoB,QAAQ;AACrC,SAASC,iBAAiB,QAAQ;AAClC,SAASC,uBAAuB,QAAQ;AACxC,SAASC,8BAA8B,QAAQ;AAE/C,OAAO,MAAMC,KAAA,gBAAyCL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACrF,MAAMC,KAAA,GAAQP,iBAAA,CAAkBK,KAAA,EAAOC,GAAA;EACvCL,uBAAA,CAAwBM,KAAA;EACxB,MAAMC,OAAA,GAAUN,8BAAA,CAA+BK,KAAA;EAC/C,OAAOR,oBAAA,CAAqBQ,KAAA,EAAOC,OAAA;AACrC;AAEAL,KAAA,CAAMM,WAAW,GAAG"}
@@ -1 +1 @@
1
- {"version":3,"names":["React"],"sources":["../../../src/components/Field/Field.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * The props added to the Field's child element.\n */\nexport type FieldChildProps = Pick<\n React.HTMLAttributes<HTMLElement>,\n 'id' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-required'\n>;\n\n/**\n * Slots of the Field component\n */\nexport type FieldSlots = {\n root: NonNullable<Slot<'div'>>;\n\n /**\n * The label associated with the field.\n */\n label?: Slot<typeof Label>;\n\n /**\n * A message about the validation state. By default, this is an error message, but it can be a success, warning,\n * or custom message by setting `validationState`.\n */\n validationMessage?: Slot<'div'>;\n\n /**\n * The icon associated with the `validationMessage`. This will only be displayed if `validationMessage` is set.\n *\n * The default depends on `validationState`:\n * * error: `<ErrorCircle12Filled />`\n * * warning: `<Warning12Filled />`\n * * success: `<CheckmarkCircle12Filled />`\n * * none: `null`\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 = Omit<ComponentProps<FieldSlots>, 'children'> & {\n /**\n * The Field's child can be a single form control, or a render function that takes the props that should be spread on\n * a form control.\n *\n * All form controls in this library can be used directly as children (such as `<Input>` or `<RadioGroup>`), as well\n * as intrinsic form controls like `<input>` or `<textarea>`. Custom controls can also be used as long as they\n * accept FieldChildProps and spread them on the appropriate element.\n *\n * For more complex scenarios, a render function can be used to pass the FieldChildProps to the appropriate control.\n */\n children?: React.ReactElement<FieldChildProps> | null | ((props: FieldChildProps) => React.ReactNode);\n\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 display of the `validationMessage` and `validationMessageIcon`.\n *\n * * error: (default) The validation message has a red error icon and red text, with `role=\"alert\"` so it is\n * announced by screen readers. Additionally, the control inside the field has `aria-invalid` set, which adds a\n * red border to some field components (such as `Input`).\n * * success: The validation message has a green checkmark icon and gray text.\n * * warning: The validation message has a yellow exclamation icon and gray text.\n * * none: The validation message has no icon and gray text.\n *\n * @default error when validationMessage is set; none otherwise.\n */\n validationState?: 'error' | 'warning' | 'success' | 'none';\n\n /**\n * Marks the Field as required. If `true`, an asterisk will be appended to the label, and `aria-required` will be set\n * on the Field's child.\n */\n required?: boolean;\n\n /**\n * The size of the Field's label.\n *\n * @default medium\n */\n size?: 'small' | 'medium' | 'large';\n};\n\n/**\n * State used in rendering Field\n */\nexport type FieldState = ComponentState<Required<FieldSlots>> &\n Required<Pick<FieldProps, 'orientation' | 'validationState'>>;\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}
1
+ {"version":3,"names":["React"],"sources":["../../../src/components/Field/Field.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * The props added to the control inside the Field.\n */\nexport type FieldControlProps = Pick<\n React.HTMLAttributes<HTMLElement>,\n 'id' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-required'\n>;\n\n/**\n * Slots of the Field component\n */\nexport type FieldSlots = {\n root: NonNullable<Slot<'div'>>;\n\n /**\n * The label associated with the field.\n */\n label?: Slot<typeof Label>;\n\n /**\n * A message about the validation state. By default, this is an error message, but it can be a success, warning,\n * or custom message by setting `validationState`.\n */\n validationMessage?: Slot<'div'>;\n\n /**\n * The icon associated with the `validationMessage`. This will only be displayed if `validationMessage` is set.\n *\n * The default depends on `validationState`:\n * * error: `<ErrorCircle12Filled />`\n * * warning: `<Warning12Filled />`\n * * success: `<CheckmarkCircle12Filled />`\n * * none: `null`\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 = Omit<ComponentProps<FieldSlots>, 'children'> & {\n /**\n * The Field's child can be a single form control, or a render function that takes the props that should be spread on\n * a form control.\n *\n * All form controls in this library can be used directly as children (such as `<Input>` or `<RadioGroup>`).\n *\n * For other controls, there are two options:\n * 1. The child of Field can be a render function that is given the props that should be spread on the control.\n * `<Field>{(props) => <MyInput {...props} />}</Field>`\n * 2. The control itself can merge props from field with useFieldControlProps_unstable().\n * `props = useFieldControlProps_unstable(props);`\n */\n children?: React.ReactNode | ((props: FieldControlProps) => React.ReactNode);\n\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 display of the `validationMessage` and `validationMessageIcon`.\n *\n * * error: (default) The validation message has a red error icon and red text, with `role=\"alert\"` so it is\n * announced by screen readers. Additionally, the control inside the field has `aria-invalid` set, which adds a\n * red border to some field components (such as `Input`).\n * * success: The validation message has a green checkmark icon and gray text.\n * * warning: The validation message has a yellow exclamation icon and gray text.\n * * none: The validation message has no icon and gray text.\n *\n * @default error when validationMessage is set; none otherwise.\n */\n validationState?: 'error' | 'warning' | 'success' | 'none';\n\n /**\n * Marks the Field as required. If `true`, an asterisk will be appended to the label, and `aria-required` will be set\n * on the Field's child.\n */\n required?: boolean;\n\n /**\n * The size of the Field's label.\n *\n * @default medium\n */\n size?: 'small' | 'medium' | 'large';\n};\n\n/**\n * State used in rendering Field\n */\nexport type FieldState = ComponentState<Required<FieldSlots>> &\n Required<Pick<FieldProps, 'orientation' | 'required' | 'size' | 'validationState'>> &\n Pick<FieldProps, 'children'> & {\n /**\n * The ID generated for the control inside the field, and the default value of label.htmlFor prop.\n */\n generatedControlId: string;\n };\n\nexport type FieldContextValue = Readonly<\n Pick<FieldState, 'generatedControlId' | 'orientation' | 'required' | 'size' | 'validationState'> & {\n /** The label's for prop. Undefined if there is no label. */\n labelFor?: string;\n /** The label's id prop. Undefined if there is no label. */\n labelId?: string;\n /** The validationMessage's id prop. Undefined if there is no validationMessage. */\n validationMessageId?: string;\n /** The hint's id prop. Undefined if there is no hint. */\n hintId?: string;\n }\n>;\n\nexport type FieldContextValues = {\n field: FieldContextValue;\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}
@@ -1,13 +1,22 @@
1
1
  import * as React from 'react';
2
2
  import { getSlots } from '@fluentui/react-utilities';
3
+ import { FieldContextProvider, getFieldControlProps } from '../../contexts/index';
3
4
  /**
4
5
  * Render the final JSX of Field
5
6
  */
6
- export const renderField_unstable = state => {
7
+ export const renderField_unstable = (state, contextValues) => {
7
8
  const {
8
9
  slots,
9
10
  slotProps
10
11
  } = getSlots(state);
11
- return /*#__PURE__*/React.createElement(slots.root, slotProps.root, slots.label && /*#__PURE__*/React.createElement(slots.label, slotProps.label), slotProps.root.children, slots.validationMessage && /*#__PURE__*/React.createElement(slots.validationMessage, slotProps.validationMessage, slots.validationMessageIcon && /*#__PURE__*/React.createElement(slots.validationMessageIcon, slotProps.validationMessageIcon), slotProps.validationMessage.children), slots.hint && /*#__PURE__*/React.createElement(slots.hint, slotProps.hint));
12
+ let {
13
+ children
14
+ } = state;
15
+ if (typeof children === 'function') {
16
+ children = children(getFieldControlProps(contextValues === null || contextValues === void 0 ? void 0 : contextValues.field) || {});
17
+ }
18
+ return /*#__PURE__*/React.createElement(FieldContextProvider, {
19
+ value: contextValues === null || contextValues === void 0 ? void 0 : contextValues.field
20
+ }, /*#__PURE__*/React.createElement(slots.root, slotProps.root, slots.label && /*#__PURE__*/React.createElement(slots.label, slotProps.label), children, slots.validationMessage && /*#__PURE__*/React.createElement(slots.validationMessage, slotProps.validationMessage, slots.validationMessageIcon && /*#__PURE__*/React.createElement(slots.validationMessageIcon, slotProps.validationMessageIcon), slotProps.validationMessage.children), slots.hint && /*#__PURE__*/React.createElement(slots.hint, slotProps.hint)));
12
21
  };
13
22
  //# sourceMappingURL=renderField.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React","getSlots","renderField_unstable","state","slots","slotProps","createElement","root","label","children","validationMessage","validationMessageIcon","hint"],"sources":["../../../src/components/Field/renderField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FieldSlots, FieldState } from './Field.types';\n\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = (state: FieldState) => {\n const { slots, slotProps } = getSlots<FieldSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.label && <slots.label {...slotProps.label} />}\n {slotProps.root.children}\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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AAGzB;;;AAGA,OAAO,MAAMC,oBAAA,GAAwBC,KAAA,IAAsB;EACzD,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,QAAA,CAAqBE,KAAA;EAElD,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI,EAC3BH,KAAA,CAAMI,KAAK,iBAAIR,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMI,KAAK,EAAKH,SAAA,CAAUG,KAAK,GAC/CH,SAAA,CAAUE,IAAI,CAACE,QAAQ,EACvBL,KAAA,CAAMM,iBAAiB,iBACtBV,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMM,iBAAiB,EAAKL,SAAA,CAAUK,iBAAiB,EACrDN,KAAA,CAAMO,qBAAqB,iBAAIX,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMO,qBAAqB,EAAKN,SAAA,CAAUM,qBAAqB,GAC/FN,SAAA,CAAUK,iBAAiB,CAACD,QAAQ,GAGxCL,KAAA,CAAMQ,IAAI,iBAAIZ,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMQ,IAAI,EAAKP,SAAA,CAAUO,IAAI;AAGnD"}
1
+ {"version":3,"names":["React","getSlots","FieldContextProvider","getFieldControlProps","renderField_unstable","state","contextValues","slots","slotProps","children","field","createElement","value","root","label","validationMessage","validationMessageIcon","hint"],"sources":["../../../src/components/Field/renderField.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { getSlots } from '@fluentui/react-utilities';\nimport { FieldContextProvider, getFieldControlProps } from '../../contexts/index';\nimport type { FieldContextValues, FieldSlots, FieldState } from './Field.types';\n\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = (state: FieldState, contextValues?: FieldContextValues) => {\n const { slots, slotProps } = getSlots<FieldSlots>(state);\n\n let { children } = state;\n if (typeof children === 'function') {\n children = children(getFieldControlProps(contextValues?.field) || {});\n }\n\n return (\n <FieldContextProvider value={contextValues?.field}>\n <slots.root {...slotProps.root}>\n {slots.label && <slots.label {...slotProps.label} />}\n {children}\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 </FieldContextProvider>\n );\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAEvB,SAASC,QAAQ,QAAQ;AACzB,SAASC,oBAAoB,EAAEC,oBAAoB,QAAQ;AAG3D;;;AAGA,OAAO,MAAMC,oBAAA,GAAuBA,CAACC,KAAA,EAAmBC,aAAA,KAAuC;EAC7F,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGP,QAAA,CAAqBI,KAAA;EAElD,IAAI;IAAEI;EAAQ,CAAE,GAAGJ,KAAA;EACnB,IAAI,OAAOI,QAAA,KAAa,YAAY;IAClCA,QAAA,GAAWA,QAAA,CAASN,oBAAA,CAAqBG,aAAA,aAAAA,aAAA,uBAAAA,aAAA,CAAeI,KAAK,KAAK,CAAC;EACrE;EAEA,oBACEV,KAAA,CAAAW,aAAA,CAACT,oBAAA;IAAqBU,KAAA,EAAON,aAAA,aAAAA,aAAA,uBAAAA,aAAA,CAAeI;kBAC1CV,KAAA,CAAAW,aAAA,CAACJ,KAAA,CAAMM,IAAI,EAAKL,SAAA,CAAUK,IAAI,EAC3BN,KAAA,CAAMO,KAAK,iBAAId,KAAA,CAAAW,aAAA,CAACJ,KAAA,CAAMO,KAAK,EAAKN,SAAA,CAAUM,KAAK,GAC/CL,QAAA,EACAF,KAAA,CAAMQ,iBAAiB,iBACtBf,KAAA,CAAAW,aAAA,CAACJ,KAAA,CAAMQ,iBAAiB,EAAKP,SAAA,CAAUO,iBAAiB,EACrDR,KAAA,CAAMS,qBAAqB,iBAAIhB,KAAA,CAAAW,aAAA,CAACJ,KAAA,CAAMS,qBAAqB,EAAKR,SAAA,CAAUQ,qBAAqB,GAC/FR,SAAA,CAAUO,iBAAiB,CAACN,QAAQ,GAGxCF,KAAA,CAAMU,IAAI,iBAAIjB,KAAA,CAAAW,aAAA,CAACJ,KAAA,CAAMU,IAAI,EAAKT,SAAA,CAAUS,IAAI;AAIrD"}
@@ -1,6 +1,3 @@
1
- var _controlProps, _arialabelledby,
2
- // Assign the child a generated ID if doesn't already have an ID
3
- _controlProps1, _controlProps2, _ariainvalid, _controlProps3, _ariarequired;
4
1
  import * as React from 'react';
5
2
  import { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';
6
3
  import { Label } from '@fluentui/react-label';
@@ -24,17 +21,19 @@ export const useField_unstable = (props, ref) => {
24
21
  const {
25
22
  children,
26
23
  orientation = 'vertical',
27
- required,
24
+ required = false,
28
25
  validationState = props.validationMessage ? 'error' : 'none',
29
- size
26
+ size = 'medium'
30
27
  } = props;
31
28
  const baseId = useId('field-');
29
+ const generatedControlId = baseId + '__control';
32
30
  const root = getNativeElementProps('div', {
33
31
  ...props,
34
32
  ref
35
33
  }, /*excludedPropNames:*/['children']);
36
34
  const label = resolveShorthand(props.label, {
37
35
  defaultProps: {
36
+ htmlFor: generatedControlId,
38
37
  id: baseId + '__label',
39
38
  required,
40
39
  size
@@ -58,39 +57,12 @@ export const useField_unstable = (props, ref) => {
58
57
  children: defaultIcon
59
58
  }
60
59
  });
61
- const controlProps = /*#__PURE__*/ /*#__PURE__*/React.isValidElement(children) ? {
62
- ...children.props
63
- } : {};
64
- if (label) {
65
- var _;
66
- (_ = (_controlProps = controlProps)[_arialabelledby = 'aria-labelledby']) !== null && _ !== void 0 ? _ : _controlProps[_arialabelledby] = label.id;
67
- if (!label.htmlFor) {
68
- var _id;
69
- (_id = (_controlProps1 = controlProps).id) !== null && _id !== void 0 ? _id : _controlProps1.id = baseId + '__control';
70
- label.htmlFor = controlProps.id;
71
- }
72
- }
73
- if (validationMessage || hint) {
74
- // The control is described by the validation message, or hint, or both
75
- // We also preserve and append any aria-describedby supplied by the user
76
- // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933
77
- 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(' ');
78
- }
79
- if (validationState === 'error') {
80
- var _1;
81
- (_1 = (_controlProps2 = controlProps)[_ariainvalid = 'aria-invalid']) !== null && _1 !== void 0 ? _1 : _controlProps2[_ariainvalid] = true;
82
- }
83
- if (required) {
84
- var _2;
85
- (_2 = (_controlProps3 = controlProps)[_ariarequired = 'aria-required']) !== null && _2 !== void 0 ? _2 : _controlProps3[_ariarequired] = true;
86
- }
87
- if ( /*#__PURE__*/React.isValidElement(children)) {
88
- root.children = /*#__PURE__*/React.cloneElement(children, controlProps);
89
- } else if (typeof children === 'function') {
90
- root.children = children(controlProps);
91
- }
92
60
  return {
61
+ children,
62
+ generatedControlId,
93
63
  orientation,
64
+ required,
65
+ size,
94
66
  validationState,
95
67
  components: {
96
68
  root: 'div',
@@ -1 +1 @@
1
- {"version":3,"names":["_controlProps","_arialabelledby","_controlProps1","_controlProps2","_ariainvalid","_controlProps3","_ariarequired","React","CheckmarkCircle12Filled","ErrorCircle12Filled","Warning12Filled","Label","getNativeElementProps","resolveShorthand","useId","validationMessageIcons","error","createElement","warning","success","none","undefined","useField_unstable","props","ref","children","orientation","required","validationState","validationMessage","size","baseId","root","label","defaultProps","id","role","hint","defaultIcon","validationMessageIcon","controlProps","isValidElement","_","htmlFor","_id","filter","Boolean","join","_1","_2","cloneElement","components"],"sources":["../../../src/components/Field/useField.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { FieldChildProps, FieldProps, FieldState } from './Field.types';\n\nconst validationMessageIcons = {\n error: <ErrorCircle12Filled />,\n warning: <Warning12Filled />,\n success: <CheckmarkCircle12Filled />,\n none: undefined,\n} as const;\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 root\n */\nexport const useField_unstable = (props: FieldProps, ref: React.Ref<HTMLDivElement>): FieldState => {\n const {\n children,\n orientation = 'vertical',\n required,\n validationState = props.validationMessage ? 'error' : 'none',\n size,\n } = props;\n\n const baseId = useId('field-');\n\n const root = getNativeElementProps('div', { ...props, ref }, /*excludedPropNames:*/ ['children']);\n\n const label = resolveShorthand(props.label, {\n defaultProps: {\n id: baseId + '__label',\n required,\n size,\n // htmlFor is handled below\n },\n });\n\n const validationMessage = resolveShorthand(props.validationMessage, {\n defaultProps: {\n id: baseId + '__validationMessage',\n role: validationState === 'error' ? 'alert' : undefined,\n },\n });\n\n const hint = resolveShorthand(props.hint, {\n defaultProps: {\n id: baseId + '__hint',\n },\n });\n\n const defaultIcon = validationMessageIcons[validationState];\n const validationMessageIcon = resolveShorthand(props.validationMessageIcon, {\n required: !!defaultIcon,\n defaultProps: {\n children: defaultIcon,\n },\n });\n\n const controlProps: FieldChildProps = React.isValidElement(children) ? { ...children.props } : {};\n\n if (label) {\n controlProps['aria-labelledby'] ??= label.id;\n\n if (!label.htmlFor) {\n // Assign the child a generated ID if doesn't already have an ID\n controlProps.id ??= baseId + '__control';\n label.htmlFor = controlProps.id;\n }\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') {\n controlProps['aria-invalid'] ??= true;\n }\n\n if (required) {\n controlProps['aria-required'] ??= true;\n }\n\n if (React.isValidElement(children)) {\n root.children = React.cloneElement(children, controlProps);\n } else if (typeof children === 'function') {\n root.children = children(controlProps);\n }\n\n return {\n orientation,\n validationState,\n components: {\n root: 'div',\n label: Label,\n validationMessage: 'div',\n validationMessageIcon: 'span',\n hint: 'div',\n },\n root,\n label,\n validationMessageIcon,\n validationMessage,\n hint,\n };\n};\n"],"mappings":"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"}
1
+ {"version":3,"names":["React","CheckmarkCircle12Filled","ErrorCircle12Filled","Warning12Filled","Label","getNativeElementProps","resolveShorthand","useId","validationMessageIcons","error","createElement","warning","success","none","undefined","useField_unstable","props","ref","children","orientation","required","validationState","validationMessage","size","baseId","generatedControlId","root","label","defaultProps","htmlFor","id","role","hint","defaultIcon","validationMessageIcon","components"],"sources":["../../../src/components/Field/useField.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { FieldProps, FieldState } from './Field.types';\n\nconst validationMessageIcons = {\n error: <ErrorCircle12Filled />,\n warning: <Warning12Filled />,\n success: <CheckmarkCircle12Filled />,\n none: undefined,\n} as const;\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 root\n */\nexport const useField_unstable = (props: FieldProps, ref: React.Ref<HTMLDivElement>): FieldState => {\n const {\n children,\n orientation = 'vertical',\n required = false,\n validationState = props.validationMessage ? 'error' : 'none',\n size = 'medium',\n } = props;\n\n const baseId = useId('field-');\n const generatedControlId = baseId + '__control';\n\n const root = getNativeElementProps('div', { ...props, ref }, /*excludedPropNames:*/ ['children']);\n\n const label = resolveShorthand(props.label, {\n defaultProps: {\n htmlFor: generatedControlId,\n id: baseId + '__label',\n required,\n size,\n },\n });\n\n const validationMessage = resolveShorthand(props.validationMessage, {\n defaultProps: {\n id: baseId + '__validationMessage',\n role: validationState === 'error' ? 'alert' : undefined,\n },\n });\n\n const hint = resolveShorthand(props.hint, {\n defaultProps: {\n id: baseId + '__hint',\n },\n });\n\n const defaultIcon = validationMessageIcons[validationState];\n const validationMessageIcon = resolveShorthand(props.validationMessageIcon, {\n required: !!defaultIcon,\n defaultProps: {\n children: defaultIcon,\n },\n });\n\n return {\n children,\n generatedControlId,\n orientation,\n required,\n size,\n validationState,\n components: {\n root: 'div',\n label: Label,\n validationMessage: 'div',\n validationMessageIcon: 'span',\n hint: 'div',\n },\n root,\n label,\n validationMessageIcon,\n validationMessage,\n hint,\n };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAEvB,SAASC,uBAAuB,EAAEC,mBAAmB,EAAEC,eAAe,QAAQ;AAC9E,SAASC,KAAK,QAAQ;AACtB,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ;AAG/D,MAAMC,sBAAA,GAAyB;EAC7BC,KAAA,eAAOT,KAAA,CAAAU,aAAA,CAACR,mBAAA;EACRS,OAAA,eAASX,KAAA,CAAAU,aAAA,CAACP,eAAA;EACVS,OAAA,eAASZ,KAAA,CAAAU,aAAA,CAACT,uBAAA;EACVY,IAAA,EAAMC;AACR;AAEA;;;;;;;;;AASA,OAAO,MAAMC,iBAAA,GAAoBA,CAACC,KAAA,EAAmBC,GAAA,KAA+C;EAClG,MAAM;IACJC,QAAA;IACAC,WAAA,GAAc;IACdC,QAAA,GAAW,KAAK;IAChBC,eAAA,GAAkBL,KAAA,CAAMM,iBAAiB,GAAG,UAAU,MAAM;IAC5DC,IAAA,GAAO;EAAQ,CAChB,GAAGP,KAAA;EAEJ,MAAMQ,MAAA,GAASjB,KAAA,CAAM;EACrB,MAAMkB,kBAAA,GAAqBD,MAAA,GAAS;EAEpC,MAAME,IAAA,GAAOrB,qBAAA,CAAsB,OAAO;IAAE,GAAGW,KAAK;IAAEC;EAAI,GAAG,sBAAuB,CAAC,WAAW;EAEhG,MAAMU,KAAA,GAAQrB,gBAAA,CAAiBU,KAAA,CAAMW,KAAK,EAAE;IAC1CC,YAAA,EAAc;MACZC,OAAA,EAASJ,kBAAA;MACTK,EAAA,EAAIN,MAAA,GAAS;MACbJ,QAAA;MACAG;IACF;EACF;EAEA,MAAMD,iBAAA,GAAoBhB,gBAAA,CAAiBU,KAAA,CAAMM,iBAAiB,EAAE;IAClEM,YAAA,EAAc;MACZE,EAAA,EAAIN,MAAA,GAAS;MACbO,IAAA,EAAMV,eAAA,KAAoB,UAAU,UAAUP;IAChD;EACF;EAEA,MAAMkB,IAAA,GAAO1B,gBAAA,CAAiBU,KAAA,CAAMgB,IAAI,EAAE;IACxCJ,YAAA,EAAc;MACZE,EAAA,EAAIN,MAAA,GAAS;IACf;EACF;EAEA,MAAMS,WAAA,GAAczB,sBAAsB,CAACa,eAAA,CAAgB;EAC3D,MAAMa,qBAAA,GAAwB5B,gBAAA,CAAiBU,KAAA,CAAMkB,qBAAqB,EAAE;IAC1Ed,QAAA,EAAU,CAAC,CAACa,WAAA;IACZL,YAAA,EAAc;MACZV,QAAA,EAAUe;IACZ;EACF;EAEA,OAAO;IACLf,QAAA;IACAO,kBAAA;IACAN,WAAA;IACAC,QAAA;IACAG,IAAA;IACAF,eAAA;IACAc,UAAA,EAAY;MACVT,IAAA,EAAM;MACNC,KAAA,EAAOvB,KAAA;MACPkB,iBAAA,EAAmB;MACnBY,qBAAA,EAAuB;MACvBF,IAAA,EAAM;IACR;IACAN,IAAA;IACAC,KAAA;IACAO,qBAAA;IACAZ,iBAAA;IACAU;EACF;AACF"}
@@ -0,0 +1,5 @@
1
+ import * as React from 'react';
2
+ const FieldContext = /*#__PURE__*/React.createContext(undefined);
3
+ export const FieldContextProvider = FieldContext.Provider;
4
+ export const useFieldContext_unstable = () => React.useContext(FieldContext);
5
+ //# sourceMappingURL=FieldContext.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["React","FieldContext","createContext","undefined","FieldContextProvider","Provider","useFieldContext_unstable","useContext"],"sources":["../../src/contexts/FieldContext.ts"],"sourcesContent":["import * as React from 'react';\n\nimport type { FieldContextValue } from '../Field';\n\nconst FieldContext = React.createContext<FieldContextValue | undefined>(undefined);\n\nexport const FieldContextProvider = FieldContext.Provider;\n\nexport const useFieldContext_unstable = () => React.useContext(FieldContext);\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAIvB,MAAMC,YAAA,gBAAeD,KAAA,CAAME,aAAa,CAAgCC,SAAA;AAExE,OAAO,MAAMC,oBAAA,GAAuBH,YAAA,CAAaI,QAAQ;AAEzD,OAAO,MAAMC,wBAAA,GAA2BA,CAAA,KAAMN,KAAA,CAAMO,UAAU,CAACN,YAAA"}
@@ -0,0 +1,4 @@
1
+ export * from './FieldContext';
2
+ export * from './useFieldContextValues';
3
+ export * from './useFieldControlProps';
4
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":[],"sources":["../../src/contexts/index.ts"],"sourcesContent":["export * from './FieldContext';\nexport * from './useFieldContextValues';\nexport * from './useFieldControlProps';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc"}
@@ -0,0 +1,33 @@
1
+ import * as React from 'react';
2
+ /**
3
+ * Get the context values used when rendering Field.
4
+ */
5
+ export const useFieldContextValues_unstable = state => {
6
+ var _state_label, _state_label1, _state_validationMessage, _state_hint;
7
+ const {
8
+ generatedControlId,
9
+ orientation,
10
+ required,
11
+ size,
12
+ validationState
13
+ } = state;
14
+ const labelFor = (_state_label = state.label) === null || _state_label === void 0 ? void 0 : _state_label.htmlFor;
15
+ const labelId = (_state_label1 = state.label) === null || _state_label1 === void 0 ? void 0 : _state_label1.id;
16
+ const validationMessageId = (_state_validationMessage = state.validationMessage) === null || _state_validationMessage === void 0 ? void 0 : _state_validationMessage.id;
17
+ const hintId = (_state_hint = state.hint) === null || _state_hint === void 0 ? void 0 : _state_hint.id;
18
+ const field = React.useMemo(() => ({
19
+ generatedControlId,
20
+ hintId,
21
+ labelFor,
22
+ labelId,
23
+ orientation,
24
+ required,
25
+ size,
26
+ validationMessageId,
27
+ validationState
28
+ }), [generatedControlId, hintId, labelFor, labelId, orientation, required, size, validationMessageId, validationState]);
29
+ return {
30
+ field
31
+ };
32
+ };
33
+ //# sourceMappingURL=useFieldContextValues.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["React","useFieldContextValues_unstable","state","_state_label","_state_label1","_state_validationMessage","_state_hint","generatedControlId","orientation","required","size","validationState","labelFor","label","htmlFor","labelId","id","validationMessageId","validationMessage","hintId","hint","field","useMemo"],"sources":["../../src/contexts/useFieldContextValues.ts"],"sourcesContent":["import * as React from 'react';\n\nimport type { FieldContextValue, FieldContextValues, FieldState } from '../Field';\n\n/**\n * Get the context values used when rendering Field.\n */\nexport const useFieldContextValues_unstable = (state: FieldState): FieldContextValues => {\n const { generatedControlId, orientation, required, size, validationState } = state;\n const labelFor = state.label?.htmlFor;\n const labelId = state.label?.id;\n const validationMessageId = state.validationMessage?.id;\n const hintId = state.hint?.id;\n\n const field: FieldContextValue = React.useMemo(\n () => ({\n generatedControlId,\n hintId,\n labelFor,\n labelId,\n orientation,\n required,\n size,\n validationMessageId,\n validationState,\n }),\n [generatedControlId, hintId, labelFor, labelId, orientation, required, size, validationMessageId, validationState],\n );\n\n return { field };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAIvB;;;AAGA,OAAO,MAAMC,8BAAA,GAAkCC,KAAA,IAA0C;MAEtEC,YAAA,EACDC,aAAA,EACYC,wBAAA,EACbC,WAAA;EAJf,MAAM;IAAEC,kBAAA;IAAoBC,WAAA;IAAaC,QAAA;IAAUC,IAAA;IAAMC;EAAe,CAAE,GAAGT,KAAA;EAC7E,MAAMU,QAAA,GAAW,CAAAT,YAAA,GAAAD,KAAA,CAAMW,KAAK,cAAXV,YAAA,uBAAAA,YAAA,CAAaW,OAAO;EACrC,MAAMC,OAAA,GAAU,CAAAX,aAAA,GAAAF,KAAA,CAAMW,KAAK,cAAXT,aAAA,uBAAAA,aAAA,CAAaY,EAAE;EAC/B,MAAMC,mBAAA,GAAsB,CAAAZ,wBAAA,GAAAH,KAAA,CAAMgB,iBAAiB,cAAvBb,wBAAA,uBAAAA,wBAAA,CAAyBW,EAAE;EACvD,MAAMG,MAAA,GAAS,CAAAb,WAAA,GAAAJ,KAAA,CAAMkB,IAAI,cAAVd,WAAA,uBAAAA,WAAA,CAAYU,EAAE;EAE7B,MAAMK,KAAA,GAA2BrB,KAAA,CAAMsB,OAAO,CAC5C,OAAO;IACLf,kBAAA;IACAY,MAAA;IACAP,QAAA;IACAG,OAAA;IACAP,WAAA;IACAC,QAAA;IACAC,IAAA;IACAO,mBAAA;IACAN;EACF,IACA,CAACJ,kBAAA,EAAoBY,MAAA,EAAQP,QAAA,EAAUG,OAAA,EAASP,WAAA,EAAaC,QAAA,EAAUC,IAAA,EAAMO,mBAAA,EAAqBN,eAAA,CAAgB;EAGpH,OAAO;IAAEU;EAAM;AACjB"}
@@ -0,0 +1,65 @@
1
+ var _props, _props1, _arialabelledby, _props2, _ariainvalid, _props3, _props4, _ariarequired, _props5;
2
+ import { useFieldContext_unstable } from './FieldContext';
3
+ export function useFieldControlProps_unstable(props, options) {
4
+ return getFieldControlProps(useFieldContext_unstable(), props, options);
5
+ }
6
+ /**
7
+ * @internal
8
+ * Implementation of useFieldControlProps_unstable.
9
+ * Split out so it can be used directly in renderField_unstable.
10
+ */
11
+ export function getFieldControlProps(context, props, options) {
12
+ if (!context) {
13
+ return props;
14
+ }
15
+ // Create a copy of props so we don't modify the original
16
+ props = {
17
+ ...props
18
+ };
19
+ const {
20
+ generatedControlId,
21
+ hintId,
22
+ labelFor,
23
+ labelId,
24
+ required,
25
+ validationMessageId,
26
+ validationState
27
+ } = context;
28
+ if (generatedControlId) {
29
+ var _id;
30
+ (_id = (_props = props).id) !== null && _id !== void 0 ? _id : _props.id = generatedControlId;
31
+ }
32
+ // Set aria-labelledby if the control doesn't support label.htmlFor, or if the label's htmlFor doesn't refer
33
+ // to this control (i.e. the user set this control's id prop without also setting the Field's label.htmlFor).
34
+ if (labelId && (!(options === null || options === void 0 ? void 0 : options.supportsLabelFor) || labelFor !== props.id)) {
35
+ var _;
36
+ (_ = (_props1 = props)[_arialabelledby = 'aria-labelledby']) !== null && _ !== void 0 ? _ : _props1[_arialabelledby] = labelId;
37
+ }
38
+ // The control is described by the validation message, or hint, or both.
39
+ // We also preserve and append any aria-describedby from props.
40
+ // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933
41
+ if (validationMessageId || hintId) {
42
+ // NOTE: Not using ??= since we're merging and overriding the user-provided value.
43
+ props['aria-describedby'] = [validationMessageId, hintId, props === null || props === void 0 ? void 0 : props['aria-describedby']].filter(Boolean).join(' ');
44
+ }
45
+ if (validationState === 'error') {
46
+ var _1;
47
+ (_1 = (_props2 = props)[_ariainvalid = 'aria-invalid']) !== null && _1 !== void 0 ? _1 : _props2[_ariainvalid] = true;
48
+ }
49
+ if (required) {
50
+ if (options === null || options === void 0 ? void 0 : options.supportsRequired) {
51
+ var _required;
52
+ (_required = (_props3 = props).required) !== null && _required !== void 0 ? _required : _props3.required = true;
53
+ } else {
54
+ var _2;
55
+ (_2 = (_props4 = props)[_ariarequired = 'aria-required']) !== null && _2 !== void 0 ? _2 : _props4[_ariarequired] = true;
56
+ }
57
+ }
58
+ // Include the size prop if this control supports it
59
+ if (options === null || options === void 0 ? void 0 : options.supportsSize) {
60
+ var _size;
61
+ (_size = (_props5 = props).size) !== null && _size !== void 0 ? _size : _props5.size = context.size;
62
+ }
63
+ return props;
64
+ }
65
+ //# sourceMappingURL=useFieldControlProps.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["_props","_props1","_arialabelledby","_props2","_ariainvalid","_props3","_props4","_ariarequired","_props5","useFieldContext_unstable","useFieldControlProps_unstable","props","options","getFieldControlProps","context","generatedControlId","hintId","labelFor","labelId","required","validationMessageId","validationState","_id","id","supportsLabelFor","_","filter","Boolean","join","_1","supportsRequired","_required","_2","supportsSize","_size","size"],"sources":["../../src/contexts/useFieldControlProps.ts"],"sourcesContent":["import type { FieldContextValue, FieldControlProps } from '../Field';\nimport { useFieldContext_unstable } from './FieldContext';\n\n/**\n * Options for `useFieldControlProps_unstable`.\n */\nexport type FieldControlPropsOptions = {\n /**\n * Skips setting `aria-labelledby` on the control if the `label.htmlFor` refers to the control.\n *\n * This should be used with controls that can be the target of a label's `for` prop:\n * `<button>`, `<input>`, `<progress>`, `<select>`, `<textarea>`.\n */\n supportsLabelFor?: boolean;\n\n /**\n * Sets `required` instead of `aria-required` when the Field is marked required.\n *\n * This should be used with controls that support the `required` prop:\n * `<input>` (except `range` or `color`), `<select>`, `<textarea>`.\n */\n supportsRequired?: boolean;\n\n /**\n * Sets the size prop on the control to match the Field's size: `'small' | 'medium' | 'large'`.\n *\n * This should be used with controls that have a custom size prop that matches the Field's size prop.\n */\n supportsSize?: boolean;\n};\n\n/**\n * Gets the control props from the field context, if this inside a `<Field>`.\n *\n * When called with no arguments, returns the FieldControlProps that should be applied to the control.\n *\n * @returns A FieldControlProps object if inside a `<Field>`, otherwise undefined.\n */\nexport function useFieldControlProps_unstable(): FieldControlProps | undefined;\n\n/**\n * Copies and merges the FieldControlProps with the given props, if this inside a `<Field>`.\n *\n * @param props - The existing props for the control. These will be merged with the control props from the field context.\n * @param options - Option to include the size prop.\n * @returns Merged props if inside a `<Field>`, otherwise the original props, or undefined if no props given.\n */\nexport function useFieldControlProps_unstable<Props extends FieldControlProps>(\n props: Props,\n options?: FieldControlPropsOptions,\n): Props;\nexport function useFieldControlProps_unstable<Props extends FieldControlProps>(\n props?: Props,\n options?: FieldControlPropsOptions,\n): Props | undefined {\n return getFieldControlProps(useFieldContext_unstable(), props, options);\n}\n\n/**\n * @internal\n * Implementation of useFieldControlProps_unstable.\n * Split out so it can be used directly in renderField_unstable.\n */\nexport function getFieldControlProps<Props extends FieldControlProps>(\n context: FieldContextValue | undefined,\n props?: Props,\n options?: FieldControlPropsOptions,\n): Props | undefined {\n if (!context) {\n return props;\n }\n\n // Create a copy of props so we don't modify the original\n props = { ...props } as Props;\n\n const { generatedControlId, hintId, labelFor, labelId, required, validationMessageId, validationState } = context;\n\n if (generatedControlId) {\n props.id ??= generatedControlId;\n }\n\n // Set aria-labelledby if the control doesn't support label.htmlFor, or if the label's htmlFor doesn't refer\n // to this control (i.e. the user set this control's id prop without also setting the Field's label.htmlFor).\n if (labelId && (!options?.supportsLabelFor || labelFor !== props.id)) {\n props['aria-labelledby'] ??= labelId;\n }\n\n // The control is described by the validation message, or hint, or both.\n // We also preserve and append any aria-describedby from props.\n // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933\n if (validationMessageId || hintId) {\n // NOTE: Not using ??= since we're merging and overriding the user-provided value.\n props['aria-describedby'] = [validationMessageId, hintId, props?.['aria-describedby']].filter(Boolean).join(' ');\n }\n\n if (validationState === 'error') {\n props['aria-invalid'] ??= true;\n }\n\n if (required) {\n if (options?.supportsRequired) {\n (props as { required?: boolean }).required ??= true;\n } else {\n props['aria-required'] ??= true;\n }\n }\n\n // Include the size prop if this control supports it\n if (options?.supportsSize) {\n (props as { size?: FieldContextValue['size'] }).size ??= context.size;\n }\n\n return props;\n}\n"],"mappings":"IA8EIA,MAAA,EAMAC,OAAA,EAAMC,eAAA,EAYNC,OAAA,EAAMC,YAAA,EAKHC,OAAA,EAEDC,OAAA,EAAMC,aAAA,EAMPC,OAAA;AA5GL,SAASC,wBAAwB,QAAQ;AAkDzC,OAAO,SAASC,8BACdC,KAAa,EACbC,OAAkC,EACf;EACnB,OAAOC,oBAAA,CAAqBJ,wBAAA,IAA4BE,KAAA,EAAOC,OAAA;AACjE;AAEA;;;;;AAKA,OAAO,SAASC,qBACdC,OAAsC,EACtCH,KAAa,EACbC,OAAkC,EACf;EACnB,IAAI,CAACE,OAAA,EAAS;IACZ,OAAOH,KAAA;EACT;EAEA;EACAA,KAAA,GAAQ;IAAE,GAAGA;EAAM;EAEnB,MAAM;IAAEI,kBAAA;IAAoBC,MAAA;IAAQC,QAAA;IAAUC,OAAA;IAASC,QAAA;IAAUC,mBAAA;IAAqBC;EAAe,CAAE,GAAGP,OAAA;EAE1G,IAAIC,kBAAA,EAAoB;;IACtB,CAAAO,GAAA,IAAAtB,MAAA,GAAAW,KAAA,EAAMY,EAAA,cAAAD,GAAA,cAAAA,GAAA,GAANtB,MAAA,CAAMuB,EAAA,GAAOR,kBAAkB;EACjC;EAEA;EACA;EACA,IAAIG,OAAA,KAAY,EAACN,OAAA,aAAAA,OAAA,uBAAAA,OAAA,CAASY,gBAAgB,CAAD,IAAKP,QAAA,KAAaN,KAAA,CAAMY,EAAE,CAAD,EAAI;;IACpE,CAAAE,CAAA,IAAAxB,OAAA,GAAAU,KAAA,EAAMT,eAAA,qBAAkB,cAAAuB,CAAA,cAAAA,CAAA,GAAxBxB,OAAK,CAACC,eAAA,CAAkB,GAAKgB,OAAO;EACtC;EAEA;EACA;EACA;EACA,IAAIE,mBAAA,IAAuBJ,MAAA,EAAQ;IACjC;IACAL,KAAK,CAAC,mBAAmB,GAAG,CAACS,mBAAA,EAAqBJ,MAAA,EAAQL,KAAA,aAAAA,KAAA,uBAAAA,KAAO,CAAC,mBAAmB,CAAC,CAACe,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;EAC9G;EAEA,IAAIP,eAAA,KAAoB,SAAS;;IAC/B,CAAAQ,EAAA,IAAA1B,OAAA,GAAAQ,KAAA,EAAMP,YAAA,kBAAe,cAAAyB,EAAA,cAAAA,EAAA,GAArB1B,OAAK,CAACC,YAAA,CAAe,GAAK,IAAI;EAChC;EAEA,IAAIe,QAAA,EAAU;IACZ,IAAIP,OAAA,aAAAA,OAAA,uBAAAA,OAAA,CAASkB,gBAAgB,EAAE;;MAC7B,CAAAC,SAAA,IAAC1B,OAAA,GAAAM,KAAA,EAAiCQ,QAAA,cAAAY,SAAA,cAAAA,SAAA,GAAjC1B,OAAA,CAAiCc,QAAA,GAAa,IAAI;IACrD,OAAO;;MACL,CAAAa,EAAA,IAAA1B,OAAA,GAAAK,KAAA,EAAMJ,aAAA,mBAAgB,cAAAyB,EAAA,cAAAA,EAAA,GAAtB1B,OAAK,CAACC,aAAA,CAAgB,GAAK,IAAI;IACjC;EACF;EAEA;EACA,IAAIK,OAAA,aAAAA,OAAA,uBAAAA,OAAA,CAASqB,YAAY,EAAE;;IACzB,CAAAC,KAAA,IAAC1B,OAAA,GAAAG,KAAA,EAA+CwB,IAAA,cAAAD,KAAA,cAAAA,KAAA,GAA/C1B,OAAA,CAA+C2B,IAAA,GAASrB,OAAA,CAAQqB,IAAI;EACvE;EAEA,OAAOxB,KAAA;AACT"}
package/lib/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field';
2
+ export { FieldContextProvider, useFieldContext_unstable, useFieldContextValues_unstable, useFieldControlProps_unstable } from './contexts/index';
2
3
  // eslint-disable-next-line deprecation/deprecation
3
4
  export { getDeprecatedFieldClassNames, makeDeprecatedField } from './util/makeDeprecatedField';
4
5
  //# sourceMappingURL=index.js.map
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","getDeprecatedFieldClassNames","makeDeprecatedField"],"sources":["../src/index.ts"],"sourcesContent":["export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field';\nexport type { FieldProps, FieldSlots, FieldState } from './Field';\n\n// eslint-disable-next-line deprecation/deprecation\nexport { getDeprecatedFieldClassNames, makeDeprecatedField } from './util/makeDeprecatedField';\n// eslint-disable-next-line deprecation/deprecation\nexport type { DeprecatedFieldProps } from './util/makeDeprecatedField';\n"],"mappings":"AAAA,SAASA,KAAK,EAAEC,eAAe,EAAEC,oBAAoB,EAAEC,uBAAuB,EAAEC,iBAAiB,QAAQ;AAGzG;AACA,SAASC,4BAA4B,EAAEC,mBAAmB,QAAQ"}
1
+ {"version":3,"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","FieldContextProvider","useFieldContext_unstable","useFieldContextValues_unstable","useFieldControlProps_unstable","getDeprecatedFieldClassNames","makeDeprecatedField"],"sources":["../src/index.ts"],"sourcesContent":["export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field';\nexport type {\n FieldContextValue,\n FieldContextValues,\n FieldControlProps,\n FieldProps,\n FieldSlots,\n FieldState,\n} from './Field';\nexport {\n FieldContextProvider,\n useFieldContext_unstable,\n useFieldContextValues_unstable,\n useFieldControlProps_unstable,\n} from './contexts/index';\nexport type { FieldControlPropsOptions } from './contexts/index';\n\n// eslint-disable-next-line deprecation/deprecation\nexport { getDeprecatedFieldClassNames, makeDeprecatedField } from './util/makeDeprecatedField';\n// eslint-disable-next-line deprecation/deprecation\nexport type { DeprecatedFieldProps } from './util/makeDeprecatedField';\n"],"mappings":"AAAA,SAASA,KAAK,EAAEC,eAAe,EAAEC,oBAAoB,EAAEC,uBAAuB,EAAEC,iBAAiB,QAAQ;AASzG,SACEC,oBAAoB,EACpBC,wBAAwB,EACxBC,8BAA8B,EAC9BC,6BAA6B,QACxB;AAGP;AACA,SAASC,4BAA4B,EAAEC,mBAAmB,QAAQ"}
@@ -11,10 +11,12 @@ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
11
11
  const _renderField = require("./renderField");
12
12
  const _useField = require("./useField");
13
13
  const _useFieldStyles = require("./useFieldStyles");
14
+ const _index = require("../../contexts/index");
14
15
  const Field = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
15
16
  const state = (0, _useField.useField_unstable)(props, ref);
16
17
  (0, _useFieldStyles.useFieldStyles_unstable)(state);
17
- return (0, _renderField.renderField_unstable)(state);
18
+ const context = (0, _index.useFieldContextValues_unstable)(state);
19
+ return (0, _renderField.renderField_unstable)(state, context);
18
20
  });
19
21
  Field.displayName = 'Field'; //# sourceMappingURL=Field.js.map
20
22
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../lib/components/Field/Field.js"],"sourcesContent":["import * as React from 'react';\nimport { renderField_unstable } from './renderField';\nimport { useField_unstable } from './useField';\nimport { useFieldStyles_unstable } from './useFieldStyles';\nexport const Field = /*#__PURE__*/React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref);\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\nField.displayName = 'Field';\n//# sourceMappingURL=Field.js.map"],"names":["Field","React","forwardRef","props","ref","state","useField_unstable","useFieldStyles_unstable","renderField_unstable","displayName"],"mappings":";;;;+BAIaA;;aAAAA;;;6DAJU;6BACc;0BACH;gCACM;AACjC,MAAMA,QAAQ,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACjE,MAAMC,QAAQC,IAAAA,2BAAiB,EAACH,OAAOC;IACvCG,IAAAA,uCAAuB,EAACF;IACxB,OAAOG,IAAAA,iCAAoB,EAACH;AAC9B;AACAL,MAAMS,WAAW,GAAG,SACpB,iCAAiC"}
1
+ {"version":3,"sources":["../../../lib/components/Field/Field.js"],"sourcesContent":["import * as React from 'react';\nimport { renderField_unstable } from './renderField';\nimport { useField_unstable } from './useField';\nimport { useFieldStyles_unstable } from './useFieldStyles';\nimport { useFieldContextValues_unstable } from '../../contexts/index';\nexport const Field = /*#__PURE__*/React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref);\n useFieldStyles_unstable(state);\n const context = useFieldContextValues_unstable(state);\n return renderField_unstable(state, context);\n});\nField.displayName = 'Field';\n//# sourceMappingURL=Field.js.map"],"names":["Field","React","forwardRef","props","ref","state","useField_unstable","useFieldStyles_unstable","context","useFieldContextValues_unstable","renderField_unstable","displayName"],"mappings":";;;;+BAKaA;;aAAAA;;;6DALU;6BACc;0BACH;gCACM;uBACO;AACxC,MAAMA,QAAQ,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACjE,MAAMC,QAAQC,IAAAA,2BAAiB,EAACH,OAAOC;IACvCG,IAAAA,uCAAuB,EAACF;IACxB,MAAMG,UAAUC,IAAAA,qCAA8B,EAACJ;IAC/C,OAAOK,IAAAA,iCAAoB,EAACL,OAAOG;AACrC;AACAR,MAAMW,WAAW,GAAG,SACpB,iCAAiC"}
@@ -9,9 +9,16 @@ Object.defineProperty(exports, "renderField_unstable", {
9
9
  const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
10
10
  const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
11
11
  const _reactUtilities = require("@fluentui/react-utilities");
12
- const renderField_unstable = (state)=>{
12
+ const _index = require("../../contexts/index");
13
+ const renderField_unstable = (state, contextValues)=>{
13
14
  const { slots , slotProps } = (0, _reactUtilities.getSlots)(state);
14
- return /*#__PURE__*/ _react.createElement(slots.root, slotProps.root, slots.label && /*#__PURE__*/ _react.createElement(slots.label, slotProps.label), slotProps.root.children, slots.validationMessage && /*#__PURE__*/ _react.createElement(slots.validationMessage, slotProps.validationMessage, slots.validationMessageIcon && /*#__PURE__*/ _react.createElement(slots.validationMessageIcon, slotProps.validationMessageIcon), slotProps.validationMessage.children), slots.hint && /*#__PURE__*/ _react.createElement(slots.hint, slotProps.hint));
15
+ let { children } = state;
16
+ if (typeof children === 'function') {
17
+ children = children((0, _index.getFieldControlProps)(contextValues === null || contextValues === void 0 ? void 0 : contextValues.field) || {});
18
+ }
19
+ return /*#__PURE__*/ _react.createElement(_index.FieldContextProvider, {
20
+ value: contextValues === null || contextValues === void 0 ? void 0 : contextValues.field
21
+ }, /*#__PURE__*/ _react.createElement(slots.root, slotProps.root, slots.label && /*#__PURE__*/ _react.createElement(slots.label, slotProps.label), children, slots.validationMessage && /*#__PURE__*/ _react.createElement(slots.validationMessage, slotProps.validationMessage, slots.validationMessageIcon && /*#__PURE__*/ _react.createElement(slots.validationMessageIcon, slotProps.validationMessageIcon), slotProps.validationMessage.children), slots.hint && /*#__PURE__*/ _react.createElement(slots.hint, slotProps.hint)));
15
22
  }; //# sourceMappingURL=renderField.js.map
16
23
 
17
24
  //# sourceMappingURL=renderField.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../lib/components/Field/renderField.js"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = state => {\n const {\n slots,\n slotProps\n } = getSlots(state);\n return /*#__PURE__*/React.createElement(slots.root, slotProps.root, slots.label && /*#__PURE__*/React.createElement(slots.label, slotProps.label), slotProps.root.children, slots.validationMessage && /*#__PURE__*/React.createElement(slots.validationMessage, slotProps.validationMessage, slots.validationMessageIcon && /*#__PURE__*/React.createElement(slots.validationMessageIcon, slotProps.validationMessageIcon), slotProps.validationMessage.children), slots.hint && /*#__PURE__*/React.createElement(slots.hint, slotProps.hint));\n};\n//# sourceMappingURL=renderField.js.map"],"names":["renderField_unstable","state","slots","slotProps","getSlots","React","createElement","root","label","children","validationMessage","validationMessageIcon","hint"],"mappings":";;;;+BAKaA;;aAAAA;;;6DALU;gCACE;AAIlB,MAAMA,uBAAuBC,CAAAA,QAAS;IAC3C,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,wBAAQ,EAACH;IACb,OAAO,WAAW,GAAEI,OAAMC,aAAa,CAACJ,MAAMK,IAAI,EAAEJ,UAAUI,IAAI,EAAEL,MAAMM,KAAK,IAAI,WAAW,GAAEH,OAAMC,aAAa,CAACJ,MAAMM,KAAK,EAAEL,UAAUK,KAAK,GAAGL,UAAUI,IAAI,CAACE,QAAQ,EAAEP,MAAMQ,iBAAiB,IAAI,WAAW,GAAEL,OAAMC,aAAa,CAACJ,MAAMQ,iBAAiB,EAAEP,UAAUO,iBAAiB,EAAER,MAAMS,qBAAqB,IAAI,WAAW,GAAEN,OAAMC,aAAa,CAACJ,MAAMS,qBAAqB,EAAER,UAAUQ,qBAAqB,GAAGR,UAAUO,iBAAiB,CAACD,QAAQ,GAAGP,MAAMU,IAAI,IAAI,WAAW,GAAEP,OAAMC,aAAa,CAACJ,MAAMU,IAAI,EAAET,UAAUS,IAAI;AAC/gB,GACA,uCAAuC"}
1
+ {"version":3,"sources":["../../../lib/components/Field/renderField.js"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { FieldContextProvider, getFieldControlProps } from '../../contexts/index';\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = (state, contextValues) => {\n const {\n slots,\n slotProps\n } = getSlots(state);\n let {\n children\n } = state;\n if (typeof children === 'function') {\n children = children(getFieldControlProps(contextValues === null || contextValues === void 0 ? void 0 : contextValues.field) || {});\n }\n return /*#__PURE__*/React.createElement(FieldContextProvider, {\n value: contextValues === null || contextValues === void 0 ? void 0 : contextValues.field\n }, /*#__PURE__*/React.createElement(slots.root, slotProps.root, slots.label && /*#__PURE__*/React.createElement(slots.label, slotProps.label), children, slots.validationMessage && /*#__PURE__*/React.createElement(slots.validationMessage, slotProps.validationMessage, slots.validationMessageIcon && /*#__PURE__*/React.createElement(slots.validationMessageIcon, slotProps.validationMessageIcon), slotProps.validationMessage.children), slots.hint && /*#__PURE__*/React.createElement(slots.hint, slotProps.hint)));\n};\n//# sourceMappingURL=renderField.js.map"],"names":["renderField_unstable","state","contextValues","slots","slotProps","getSlots","children","getFieldControlProps","field","React","createElement","FieldContextProvider","value","root","label","validationMessage","validationMessageIcon","hint"],"mappings":";;;;+BAMaA;;aAAAA;;;6DANU;gCACE;uBACkC;AAIpD,MAAMA,uBAAuB,CAACC,OAAOC,gBAAkB;IAC5D,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,wBAAQ,EAACJ;IACb,IAAI,EACFK,SAAQ,EACT,GAAGL;IACJ,IAAI,OAAOK,aAAa,YAAY;QAClCA,WAAWA,SAASC,IAAAA,2BAAoB,EAACL,kBAAkB,IAAI,IAAIA,kBAAkB,KAAK,IAAI,KAAK,IAAIA,cAAcM,KAAK,KAAK,CAAC;IAClI,CAAC;IACD,OAAO,WAAW,GAAEC,OAAMC,aAAa,CAACC,2BAAoB,EAAE;QAC5DC,OAAOV,kBAAkB,IAAI,IAAIA,kBAAkB,KAAK,IAAI,KAAK,IAAIA,cAAcM,KAAK;IAC1F,GAAG,WAAW,GAAEC,OAAMC,aAAa,CAACP,MAAMU,IAAI,EAAET,UAAUS,IAAI,EAAEV,MAAMW,KAAK,IAAI,WAAW,GAAEL,OAAMC,aAAa,CAACP,MAAMW,KAAK,EAAEV,UAAUU,KAAK,GAAGR,UAAUH,MAAMY,iBAAiB,IAAI,WAAW,GAAEN,OAAMC,aAAa,CAACP,MAAMY,iBAAiB,EAAEX,UAAUW,iBAAiB,EAAEZ,MAAMa,qBAAqB,IAAI,WAAW,GAAEP,OAAMC,aAAa,CAACP,MAAMa,qBAAqB,EAAEZ,UAAUY,qBAAqB,GAAGZ,UAAUW,iBAAiB,CAACT,QAAQ,GAAGH,MAAMc,IAAI,IAAI,WAAW,GAAER,OAAMC,aAAa,CAACP,MAAMc,IAAI,EAAEb,UAAUa,IAAI;AAC5f,GACA,uCAAuC"}
@@ -11,8 +11,6 @@ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
11
11
  const _reactIcons = require("@fluentui/react-icons");
12
12
  const _reactLabel = require("@fluentui/react-label");
13
13
  const _reactUtilities = require("@fluentui/react-utilities");
14
- var _controlProps, _arialabelledby, // Assign the child a generated ID if doesn't already have an ID
15
- _controlProps1, _controlProps2, _ariainvalid, _controlProps3, _ariarequired;
16
14
  const validationMessageIcons = {
17
15
  error: /*#__PURE__*/ _react.createElement(_reactIcons.ErrorCircle12Filled, null),
18
16
  warning: /*#__PURE__*/ _react.createElement(_reactIcons.Warning12Filled, null),
@@ -20,8 +18,9 @@ const validationMessageIcons = {
20
18
  none: undefined
21
19
  };
22
20
  const useField_unstable = (props, ref)=>{
23
- const { children , orientation ='vertical' , required , validationState =props.validationMessage ? 'error' : 'none' , size } = props;
21
+ const { children , orientation ='vertical' , required =false , validationState =props.validationMessage ? 'error' : 'none' , size ='medium' } = props;
24
22
  const baseId = (0, _reactUtilities.useId)('field-');
23
+ const generatedControlId = baseId + '__control';
25
24
  const root = (0, _reactUtilities.getNativeElementProps)('div', {
26
25
  ...props,
27
26
  ref
@@ -30,6 +29,7 @@ const useField_unstable = (props, ref)=>{
30
29
  ]);
31
30
  const label = (0, _reactUtilities.resolveShorthand)(props.label, {
32
31
  defaultProps: {
32
+ htmlFor: generatedControlId,
33
33
  id: baseId + '__label',
34
34
  required,
35
35
  size
@@ -53,43 +53,12 @@ const useField_unstable = (props, ref)=>{
53
53
  children: defaultIcon
54
54
  }
55
55
  });
56
- const controlProps = /*#__PURE__*/ /*#__PURE__*/ _react.isValidElement(children) ? {
57
- ...children.props
58
- } : {};
59
- if (label) {
60
- var _;
61
- (_ = (_controlProps = controlProps)[_arialabelledby = 'aria-labelledby']) !== null && _ !== void 0 ? _ : _controlProps[_arialabelledby] = label.id;
62
- if (!label.htmlFor) {
63
- var _id;
64
- (_id = (_controlProps1 = controlProps).id) !== null && _id !== void 0 ? _id : _controlProps1.id = baseId + '__control';
65
- label.htmlFor = controlProps.id;
66
- }
67
- }
68
- if (validationMessage || hint) {
69
- // The control is described by the validation message, or hint, or both
70
- // We also preserve and append any aria-describedby supplied by the user
71
- // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933
72
- controlProps['aria-describedby'] = [
73
- validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.id,
74
- hint === null || hint === void 0 ? void 0 : hint.id,
75
- controlProps['aria-describedby']
76
- ].filter(Boolean).join(' ');
77
- }
78
- if (validationState === 'error') {
79
- var _1;
80
- (_1 = (_controlProps2 = controlProps)[_ariainvalid = 'aria-invalid']) !== null && _1 !== void 0 ? _1 : _controlProps2[_ariainvalid] = true;
81
- }
82
- if (required) {
83
- var _2;
84
- (_2 = (_controlProps3 = controlProps)[_ariarequired = 'aria-required']) !== null && _2 !== void 0 ? _2 : _controlProps3[_ariarequired] = true;
85
- }
86
- if (/*#__PURE__*/ _react.isValidElement(children)) {
87
- root.children = /*#__PURE__*/ _react.cloneElement(children, controlProps);
88
- } else if (typeof children === 'function') {
89
- root.children = children(controlProps);
90
- }
91
56
  return {
57
+ children,
58
+ generatedControlId,
92
59
  orientation,
60
+ required,
61
+ size,
93
62
  validationState,
94
63
  components: {
95
64
  root: 'div',
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../lib/components/Field/useField.js"],"sourcesContent":["var _controlProps, _arialabelledby,\n // Assign the child a generated ID if doesn't already have an ID\n _controlProps1, _controlProps2, _ariainvalid, _controlProps3, _ariarequired;\nimport * 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';\nconst validationMessageIcons = {\n error: /*#__PURE__*/React.createElement(ErrorCircle12Filled, null),\n warning: /*#__PURE__*/React.createElement(Warning12Filled, null),\n success: /*#__PURE__*/React.createElement(CheckmarkCircle12Filled, null),\n none: undefined\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 root\n */\nexport const useField_unstable = (props, ref) => {\n const {\n children,\n orientation = 'vertical',\n required,\n validationState = props.validationMessage ? 'error' : 'none',\n size\n } = props;\n const baseId = useId('field-');\n const root = getNativeElementProps('div', {\n ...props,\n ref\n }, /*excludedPropNames:*/['children']);\n const label = resolveShorthand(props.label, {\n defaultProps: {\n id: baseId + '__label',\n required,\n size\n }\n });\n const validationMessage = resolveShorthand(props.validationMessage, {\n defaultProps: {\n id: baseId + '__validationMessage',\n role: validationState === 'error' ? 'alert' : undefined\n }\n });\n const hint = resolveShorthand(props.hint, {\n defaultProps: {\n id: baseId + '__hint'\n }\n });\n const defaultIcon = validationMessageIcons[validationState];\n const validationMessageIcon = resolveShorthand(props.validationMessageIcon, {\n required: !!defaultIcon,\n defaultProps: {\n children: defaultIcon\n }\n });\n const controlProps = /*#__PURE__*/ /*#__PURE__*/React.isValidElement(children) ? {\n ...children.props\n } : {};\n if (label) {\n var _;\n (_ = (_controlProps = controlProps)[_arialabelledby = 'aria-labelledby']) !== null && _ !== void 0 ? _ : _controlProps[_arialabelledby] = label.id;\n if (!label.htmlFor) {\n var _id;\n (_id = (_controlProps1 = controlProps).id) !== null && _id !== void 0 ? _id : _controlProps1.id = baseId + '__control';\n label.htmlFor = controlProps.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 === null || validationMessage === void 0 ? void 0 : validationMessage.id, hint === null || hint === void 0 ? void 0 : hint.id, controlProps['aria-describedby']].filter(Boolean).join(' ');\n }\n if (validationState === 'error') {\n var _1;\n (_1 = (_controlProps2 = controlProps)[_ariainvalid = 'aria-invalid']) !== null && _1 !== void 0 ? _1 : _controlProps2[_ariainvalid] = true;\n }\n if (required) {\n var _2;\n (_2 = (_controlProps3 = controlProps)[_ariarequired = 'aria-required']) !== null && _2 !== void 0 ? _2 : _controlProps3[_ariarequired] = true;\n }\n if ( /*#__PURE__*/React.isValidElement(children)) {\n root.children = /*#__PURE__*/React.cloneElement(children, controlProps);\n } else if (typeof children === 'function') {\n root.children = children(controlProps);\n }\n return {\n orientation,\n validationState,\n components: {\n root: 'div',\n label: Label,\n validationMessage: 'div',\n validationMessageIcon: 'span',\n hint: 'div'\n },\n root,\n label,\n validationMessageIcon,\n validationMessage,\n hint\n };\n};\n//# sourceMappingURL=useField.js.map"],"names":["useField_unstable","_controlProps","_arialabelledby","_controlProps1","_controlProps2","_ariainvalid","_controlProps3","_ariarequired","validationMessageIcons","error","React","createElement","ErrorCircle12Filled","warning","Warning12Filled","success","CheckmarkCircle12Filled","none","undefined","props","ref","children","orientation","required","validationState","validationMessage","size","baseId","useId","root","getNativeElementProps","label","resolveShorthand","defaultProps","id","role","hint","defaultIcon","validationMessageIcon","controlProps","isValidElement","_","htmlFor","_id","filter","Boolean","join","_1","_2","cloneElement","components","Label"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../lib/components/Field/useField.js"],"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';\nconst validationMessageIcons = {\n error: /*#__PURE__*/React.createElement(ErrorCircle12Filled, null),\n warning: /*#__PURE__*/React.createElement(Warning12Filled, null),\n success: /*#__PURE__*/React.createElement(CheckmarkCircle12Filled, null),\n none: undefined\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 root\n */\nexport const useField_unstable = (props, ref) => {\n const {\n children,\n orientation = 'vertical',\n required = false,\n validationState = props.validationMessage ? 'error' : 'none',\n size = 'medium'\n } = props;\n const baseId = useId('field-');\n const generatedControlId = baseId + '__control';\n const root = getNativeElementProps('div', {\n ...props,\n ref\n }, /*excludedPropNames:*/['children']);\n const label = resolveShorthand(props.label, {\n defaultProps: {\n htmlFor: generatedControlId,\n id: baseId + '__label',\n required,\n size\n }\n });\n const validationMessage = resolveShorthand(props.validationMessage, {\n defaultProps: {\n id: baseId + '__validationMessage',\n role: validationState === 'error' ? 'alert' : undefined\n }\n });\n const hint = resolveShorthand(props.hint, {\n defaultProps: {\n id: baseId + '__hint'\n }\n });\n const defaultIcon = validationMessageIcons[validationState];\n const validationMessageIcon = resolveShorthand(props.validationMessageIcon, {\n required: !!defaultIcon,\n defaultProps: {\n children: defaultIcon\n }\n });\n return {\n children,\n generatedControlId,\n orientation,\n required,\n size,\n validationState,\n components: {\n root: 'div',\n label: Label,\n validationMessage: 'div',\n validationMessageIcon: 'span',\n hint: 'div'\n },\n root,\n label,\n validationMessageIcon,\n validationMessage,\n hint\n };\n};\n//# sourceMappingURL=useField.js.map"],"names":["useField_unstable","validationMessageIcons","error","React","createElement","ErrorCircle12Filled","warning","Warning12Filled","success","CheckmarkCircle12Filled","none","undefined","props","ref","children","orientation","required","validationState","validationMessage","size","baseId","useId","generatedControlId","root","getNativeElementProps","label","resolveShorthand","defaultProps","htmlFor","id","role","hint","defaultIcon","validationMessageIcon","components","Label"],"mappings":";;;;+BAmBaA;;aAAAA;;;6DAnBU;4BACuD;4BACxD;gCACyC;AAC/D,MAAMC,yBAAyB;IAC7BC,OAAO,WAAW,GAAEC,OAAMC,aAAa,CAACC,+BAAmB,EAAE,IAAI;IACjEC,SAAS,WAAW,GAAEH,OAAMC,aAAa,CAACG,2BAAe,EAAE,IAAI;IAC/DC,SAAS,WAAW,GAAEL,OAAMC,aAAa,CAACK,mCAAuB,EAAE,IAAI;IACvEC,MAAMC;AACR;AAUO,MAAMX,oBAAoB,CAACY,OAAOC,MAAQ;IAC/C,MAAM,EACJC,SAAQ,EACRC,aAAc,WAAU,EACxBC,UAAW,KAAK,CAAA,EAChBC,iBAAkBL,MAAMM,iBAAiB,GAAG,UAAU,MAAM,CAAA,EAC5DC,MAAO,SAAQ,EAChB,GAAGP;IACJ,MAAMQ,SAASC,IAAAA,qBAAK,EAAC;IACrB,MAAMC,qBAAqBF,SAAS;IACpC,MAAMG,OAAOC,IAAAA,qCAAqB,EAAC,OAAO;QACxC,GAAGZ,KAAK;QACRC;IACF,GAAG,oBAAoB,GAAE;QAAC;KAAW;IACrC,MAAMY,QAAQC,IAAAA,gCAAgB,EAACd,MAAMa,KAAK,EAAE;QAC1CE,cAAc;YACZC,SAASN;YACTO,IAAIT,SAAS;YACbJ;YACAG;QACF;IACF;IACA,MAAMD,oBAAoBQ,IAAAA,gCAAgB,EAACd,MAAMM,iBAAiB,EAAE;QAClES,cAAc;YACZE,IAAIT,SAAS;YACbU,MAAMb,oBAAoB,UAAU,UAAUN,SAAS;QACzD;IACF;IACA,MAAMoB,OAAOL,IAAAA,gCAAgB,EAACd,MAAMmB,IAAI,EAAE;QACxCJ,cAAc;YACZE,IAAIT,SAAS;QACf;IACF;IACA,MAAMY,cAAc/B,sBAAsB,CAACgB,gBAAgB;IAC3D,MAAMgB,wBAAwBP,IAAAA,gCAAgB,EAACd,MAAMqB,qBAAqB,EAAE;QAC1EjB,UAAU,CAAC,CAACgB;QACZL,cAAc;YACZb,UAAUkB;QACZ;IACF;IACA,OAAO;QACLlB;QACAQ;QACAP;QACAC;QACAG;QACAF;QACAiB,YAAY;YACVX,MAAM;YACNE,OAAOU,iBAAK;YACZjB,mBAAmB;YACnBe,uBAAuB;YACvBF,MAAM;QACR;QACAR;QACAE;QACAQ;QACAf;QACAa;IACF;AACF,GACA,oCAAoC"}
@@ -0,0 +1,21 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ FieldContextProvider: ()=>FieldContextProvider,
13
+ useFieldContext_unstable: ()=>useFieldContext_unstable
14
+ });
15
+ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
16
+ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
17
+ const FieldContext = /*#__PURE__*/ _react.createContext(undefined);
18
+ const FieldContextProvider = FieldContext.Provider;
19
+ const useFieldContext_unstable = ()=>_react.useContext(FieldContext); //# sourceMappingURL=FieldContext.js.map
20
+
21
+ //# sourceMappingURL=FieldContext.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../lib/contexts/FieldContext.js"],"sourcesContent":["import * as React from 'react';\nconst FieldContext = /*#__PURE__*/React.createContext(undefined);\nexport const FieldContextProvider = FieldContext.Provider;\nexport const useFieldContext_unstable = () => React.useContext(FieldContext);\n//# sourceMappingURL=FieldContext.js.map"],"names":["FieldContextProvider","useFieldContext_unstable","FieldContext","React","createContext","undefined","Provider","useContext"],"mappings":";;;;;;;;;;;IAEaA,oBAAoB,MAApBA;IACAC,wBAAwB,MAAxBA;;;6DAHU;AACvB,MAAMC,eAAe,WAAW,GAAEC,OAAMC,aAAa,CAACC;AAC/C,MAAML,uBAAuBE,aAAaI,QAAQ;AAClD,MAAML,2BAA2B,IAAME,OAAMI,UAAU,CAACL,eAC/D,wCAAwC"}
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
6
+ _exportStar(require("./FieldContext"), exports);
7
+ _exportStar(require("./useFieldContextValues"), exports);
8
+ _exportStar(require("./useFieldControlProps"), exports);
9
+ //# sourceMappingURL=index.js.map
10
+
11
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../lib/contexts/index.js"],"sourcesContent":["export * from './FieldContext';\nexport * from './useFieldContextValues';\nexport * from './useFieldControlProps';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;CACd,iCAAiC"}
@@ -0,0 +1,44 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "useFieldContextValues_unstable", {
6
+ enumerable: true,
7
+ get: ()=>useFieldContextValues_unstable
8
+ });
9
+ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
10
+ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
11
+ const useFieldContextValues_unstable = (state)=>{
12
+ var _state_label, _state_label1, _state_validationMessage, _state_hint;
13
+ const { generatedControlId , orientation , required , size , validationState } = state;
14
+ const labelFor = (_state_label = state.label) === null || _state_label === void 0 ? void 0 : _state_label.htmlFor;
15
+ const labelId = (_state_label1 = state.label) === null || _state_label1 === void 0 ? void 0 : _state_label1.id;
16
+ const validationMessageId = (_state_validationMessage = state.validationMessage) === null || _state_validationMessage === void 0 ? void 0 : _state_validationMessage.id;
17
+ const hintId = (_state_hint = state.hint) === null || _state_hint === void 0 ? void 0 : _state_hint.id;
18
+ const field = _react.useMemo(()=>({
19
+ generatedControlId,
20
+ hintId,
21
+ labelFor,
22
+ labelId,
23
+ orientation,
24
+ required,
25
+ size,
26
+ validationMessageId,
27
+ validationState
28
+ }), [
29
+ generatedControlId,
30
+ hintId,
31
+ labelFor,
32
+ labelId,
33
+ orientation,
34
+ required,
35
+ size,
36
+ validationMessageId,
37
+ validationState
38
+ ]);
39
+ return {
40
+ field
41
+ };
42
+ }; //# sourceMappingURL=useFieldContextValues.js.map
43
+
44
+ //# sourceMappingURL=useFieldContextValues.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../lib/contexts/useFieldContextValues.js"],"sourcesContent":["import * as React from 'react';\n/**\n * Get the context values used when rendering Field.\n */\nexport const useFieldContextValues_unstable = state => {\n var _state_label, _state_label1, _state_validationMessage, _state_hint;\n const {\n generatedControlId,\n orientation,\n required,\n size,\n validationState\n } = state;\n const labelFor = (_state_label = state.label) === null || _state_label === void 0 ? void 0 : _state_label.htmlFor;\n const labelId = (_state_label1 = state.label) === null || _state_label1 === void 0 ? void 0 : _state_label1.id;\n const validationMessageId = (_state_validationMessage = state.validationMessage) === null || _state_validationMessage === void 0 ? void 0 : _state_validationMessage.id;\n const hintId = (_state_hint = state.hint) === null || _state_hint === void 0 ? void 0 : _state_hint.id;\n const field = React.useMemo(() => ({\n generatedControlId,\n hintId,\n labelFor,\n labelId,\n orientation,\n required,\n size,\n validationMessageId,\n validationState\n }), [generatedControlId, hintId, labelFor, labelId, orientation, required, size, validationMessageId, validationState]);\n return {\n field\n };\n};\n//# sourceMappingURL=useFieldContextValues.js.map"],"names":["useFieldContextValues_unstable","state","_state_label","_state_label1","_state_validationMessage","_state_hint","generatedControlId","orientation","required","size","validationState","labelFor","label","htmlFor","labelId","id","validationMessageId","validationMessage","hintId","hint","field","React","useMemo"],"mappings":";;;;+BAIaA;;aAAAA;;;6DAJU;AAIhB,MAAMA,iCAAiCC,CAAAA,QAAS;IACrD,IAAIC,cAAcC,eAAeC,0BAA0BC;IAC3D,MAAM,EACJC,mBAAkB,EAClBC,YAAW,EACXC,SAAQ,EACRC,KAAI,EACJC,gBAAe,EAChB,GAAGT;IACJ,MAAMU,WAAW,AAACT,CAAAA,eAAeD,MAAMW,KAAK,AAAD,MAAO,IAAI,IAAIV,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAaW,OAAO;IACjH,MAAMC,UAAU,AAACX,CAAAA,gBAAgBF,MAAMW,KAAK,AAAD,MAAO,IAAI,IAAIT,kBAAkB,KAAK,IAAI,KAAK,IAAIA,cAAcY,EAAE;IAC9G,MAAMC,sBAAsB,AAACZ,CAAAA,2BAA2BH,MAAMgB,iBAAiB,AAAD,MAAO,IAAI,IAAIb,6BAA6B,KAAK,IAAI,KAAK,IAAIA,yBAAyBW,EAAE;IACvK,MAAMG,SAAS,AAACb,CAAAA,cAAcJ,MAAMkB,IAAI,AAAD,MAAO,IAAI,IAAId,gBAAgB,KAAK,IAAI,KAAK,IAAIA,YAAYU,EAAE;IACtG,MAAMK,QAAQC,OAAMC,OAAO,CAAC,IAAO,CAAA;YACjChB;YACAY;YACAP;YACAG;YACAP;YACAC;YACAC;YACAO;YACAN;QACF,CAAA,GAAI;QAACJ;QAAoBY;QAAQP;QAAUG;QAASP;QAAaC;QAAUC;QAAMO;QAAqBN;KAAgB;IACtH,OAAO;QACLU;IACF;AACF,GACA,iDAAiD"}
@@ -0,0 +1,71 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ useFieldControlProps_unstable: ()=>useFieldControlProps_unstable,
13
+ getFieldControlProps: ()=>getFieldControlProps
14
+ });
15
+ const _fieldContext = require("./FieldContext");
16
+ var _props, _props1, _arialabelledby, _props2, _ariainvalid, _props3, _props4, _ariarequired, _props5;
17
+ function useFieldControlProps_unstable(props, options) {
18
+ return getFieldControlProps((0, _fieldContext.useFieldContext_unstable)(), props, options);
19
+ }
20
+ function getFieldControlProps(context, props, options) {
21
+ if (!context) {
22
+ return props;
23
+ }
24
+ // Create a copy of props so we don't modify the original
25
+ props = {
26
+ ...props
27
+ };
28
+ const { generatedControlId , hintId , labelFor , labelId , required , validationMessageId , validationState } = context;
29
+ if (generatedControlId) {
30
+ var _id;
31
+ (_id = (_props = props).id) !== null && _id !== void 0 ? _id : _props.id = generatedControlId;
32
+ }
33
+ // Set aria-labelledby if the control doesn't support label.htmlFor, or if the label's htmlFor doesn't refer
34
+ // to this control (i.e. the user set this control's id prop without also setting the Field's label.htmlFor).
35
+ if (labelId && (!(options === null || options === void 0 ? void 0 : options.supportsLabelFor) || labelFor !== props.id)) {
36
+ var _;
37
+ (_ = (_props1 = props)[_arialabelledby = 'aria-labelledby']) !== null && _ !== void 0 ? _ : _props1[_arialabelledby] = labelId;
38
+ }
39
+ // The control is described by the validation message, or hint, or both.
40
+ // We also preserve and append any aria-describedby from props.
41
+ // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933
42
+ if (validationMessageId || hintId) {
43
+ // NOTE: Not using ??= since we're merging and overriding the user-provided value.
44
+ props['aria-describedby'] = [
45
+ validationMessageId,
46
+ hintId,
47
+ props === null || props === void 0 ? void 0 : props['aria-describedby']
48
+ ].filter(Boolean).join(' ');
49
+ }
50
+ if (validationState === 'error') {
51
+ var _1;
52
+ (_1 = (_props2 = props)[_ariainvalid = 'aria-invalid']) !== null && _1 !== void 0 ? _1 : _props2[_ariainvalid] = true;
53
+ }
54
+ if (required) {
55
+ if (options === null || options === void 0 ? void 0 : options.supportsRequired) {
56
+ var _required;
57
+ (_required = (_props3 = props).required) !== null && _required !== void 0 ? _required : _props3.required = true;
58
+ } else {
59
+ var _2;
60
+ (_2 = (_props4 = props)[_ariarequired = 'aria-required']) !== null && _2 !== void 0 ? _2 : _props4[_ariarequired] = true;
61
+ }
62
+ }
63
+ // Include the size prop if this control supports it
64
+ if (options === null || options === void 0 ? void 0 : options.supportsSize) {
65
+ var _size;
66
+ (_size = (_props5 = props).size) !== null && _size !== void 0 ? _size : _props5.size = context.size;
67
+ }
68
+ return props;
69
+ } //# sourceMappingURL=useFieldControlProps.js.map
70
+
71
+ //# sourceMappingURL=useFieldControlProps.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../lib/contexts/useFieldControlProps.js"],"sourcesContent":["var _props, _props1, _arialabelledby, _props2, _ariainvalid, _props3, _props4, _ariarequired, _props5;\nimport { useFieldContext_unstable } from './FieldContext';\nexport function useFieldControlProps_unstable(props, options) {\n return getFieldControlProps(useFieldContext_unstable(), props, options);\n}\n/**\n * @internal\n * Implementation of useFieldControlProps_unstable.\n * Split out so it can be used directly in renderField_unstable.\n */\nexport function getFieldControlProps(context, props, options) {\n if (!context) {\n return props;\n }\n // Create a copy of props so we don't modify the original\n props = {\n ...props\n };\n const {\n generatedControlId,\n hintId,\n labelFor,\n labelId,\n required,\n validationMessageId,\n validationState\n } = context;\n if (generatedControlId) {\n var _id;\n (_id = (_props = props).id) !== null && _id !== void 0 ? _id : _props.id = generatedControlId;\n }\n // Set aria-labelledby if the control doesn't support label.htmlFor, or if the label's htmlFor doesn't refer\n // to this control (i.e. the user set this control's id prop without also setting the Field's label.htmlFor).\n if (labelId && (!(options === null || options === void 0 ? void 0 : options.supportsLabelFor) || labelFor !== props.id)) {\n var _;\n (_ = (_props1 = props)[_arialabelledby = 'aria-labelledby']) !== null && _ !== void 0 ? _ : _props1[_arialabelledby] = labelId;\n }\n // The control is described by the validation message, or hint, or both.\n // We also preserve and append any aria-describedby from props.\n // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933\n if (validationMessageId || hintId) {\n // NOTE: Not using ??= since we're merging and overriding the user-provided value.\n props['aria-describedby'] = [validationMessageId, hintId, props === null || props === void 0 ? void 0 : props['aria-describedby']].filter(Boolean).join(' ');\n }\n if (validationState === 'error') {\n var _1;\n (_1 = (_props2 = props)[_ariainvalid = 'aria-invalid']) !== null && _1 !== void 0 ? _1 : _props2[_ariainvalid] = true;\n }\n if (required) {\n if (options === null || options === void 0 ? void 0 : options.supportsRequired) {\n var _required;\n (_required = (_props3 = props).required) !== null && _required !== void 0 ? _required : _props3.required = true;\n } else {\n var _2;\n (_2 = (_props4 = props)[_ariarequired = 'aria-required']) !== null && _2 !== void 0 ? _2 : _props4[_ariarequired] = true;\n }\n }\n // Include the size prop if this control supports it\n if (options === null || options === void 0 ? void 0 : options.supportsSize) {\n var _size;\n (_size = (_props5 = props).size) !== null && _size !== void 0 ? _size : _props5.size = context.size;\n }\n return props;\n}\n//# sourceMappingURL=useFieldControlProps.js.map"],"names":["useFieldControlProps_unstable","getFieldControlProps","_props","_props1","_arialabelledby","_props2","_ariainvalid","_props3","_props4","_ariarequired","_props5","props","options","useFieldContext_unstable","context","generatedControlId","hintId","labelFor","labelId","required","validationMessageId","validationState","_id","id","supportsLabelFor","_","filter","Boolean","join","_1","supportsRequired","_required","_2","supportsSize","_size","size"],"mappings":"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"}
@@ -14,10 +14,15 @@ _export(exports, {
14
14
  renderField_unstable: ()=>_field.renderField_unstable,
15
15
  useFieldStyles_unstable: ()=>_field.useFieldStyles_unstable,
16
16
  useField_unstable: ()=>_field.useField_unstable,
17
+ FieldContextProvider: ()=>_index.FieldContextProvider,
18
+ useFieldContext_unstable: ()=>_index.useFieldContext_unstable,
19
+ useFieldContextValues_unstable: ()=>_index.useFieldContextValues_unstable,
20
+ useFieldControlProps_unstable: ()=>_index.useFieldControlProps_unstable,
17
21
  getDeprecatedFieldClassNames: ()=>_makeDeprecatedField.getDeprecatedFieldClassNames,
18
22
  makeDeprecatedField: ()=>_makeDeprecatedField.makeDeprecatedField
19
23
  });
20
24
  const _field = require("./Field");
25
+ const _index = require("./contexts/index");
21
26
  const _makeDeprecatedField = require("./util/makeDeprecatedField");
22
27
  //# sourceMappingURL=index.js.map
23
28
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../lib/index.js"],"sourcesContent":["export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field';\n// eslint-disable-next-line deprecation/deprecation\nexport { getDeprecatedFieldClassNames, makeDeprecatedField } from './util/makeDeprecatedField';\n//# sourceMappingURL=index.js.map"],"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","getDeprecatedFieldClassNames","makeDeprecatedField"],"mappings":";;;;;;;;;;;IAASA,KAAK,MAALA,YAAK;IAAEC,eAAe,MAAfA,sBAAe;IAAEC,oBAAoB,MAApBA,2BAAoB;IAAEC,uBAAuB,MAAvBA,8BAAuB;IAAEC,iBAAiB,MAAjBA,wBAAiB;IAExFC,4BAA4B,MAA5BA,iDAA4B;IAAEC,mBAAmB,MAAnBA,wCAAmB;;uBAF+C;qCAEvC;CAClE,iCAAiC"}
1
+ {"version":3,"sources":["../lib/index.js"],"sourcesContent":["export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field';\nexport { FieldContextProvider, useFieldContext_unstable, useFieldContextValues_unstable, useFieldControlProps_unstable } from './contexts/index';\n// eslint-disable-next-line deprecation/deprecation\nexport { getDeprecatedFieldClassNames, makeDeprecatedField } from './util/makeDeprecatedField';\n//# sourceMappingURL=index.js.map"],"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","FieldContextProvider","useFieldContext_unstable","useFieldContextValues_unstable","useFieldControlProps_unstable","getDeprecatedFieldClassNames","makeDeprecatedField"],"mappings":";;;;;;;;;;;IAASA,KAAK,MAALA,YAAK;IAAEC,eAAe,MAAfA,sBAAe;IAAEC,oBAAoB,MAApBA,2BAAoB;IAAEC,uBAAuB,MAAvBA,8BAAuB;IAAEC,iBAAiB,MAAjBA,wBAAiB;IACxFC,oBAAoB,MAApBA,2BAAoB;IAAEC,wBAAwB,MAAxBA,+BAAwB;IAAEC,8BAA8B,MAA9BA,qCAA8B;IAAEC,6BAA6B,MAA7BA,oCAA6B;IAE7GC,4BAA4B,MAA5BA,iDAA4B;IAAEC,mBAAmB,MAAnBA,wCAAmB;;uBAH+C;uBACqB;qCAE5D;CAClE,iCAAiC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-field",
3
- "version": "0.0.0-nightly-20230404-0419.1",
3
+ "version": "0.0.0-nightly-20230406-0417.1",
4
4
  "description": "Fluent UI Field components",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -27,16 +27,16 @@
27
27
  "devDependencies": {
28
28
  "@fluentui/eslint-plugin": "*",
29
29
  "@fluentui/react-conformance": "*",
30
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20230404-0419.1",
30
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20230406-0417.1",
31
31
  "@fluentui/scripts-api-extractor": "*",
32
32
  "@fluentui/scripts-tasks": "*"
33
33
  },
34
34
  "dependencies": {
35
- "@fluentui/react-context-selector": "0.0.0-nightly-20230404-0419.1",
35
+ "@fluentui/react-context-selector": "0.0.0-nightly-20230406-0417.1",
36
36
  "@fluentui/react-icons": "^2.0.196",
37
- "@fluentui/react-label": "0.0.0-nightly-20230404-0419.1",
38
- "@fluentui/react-theme": "0.0.0-nightly-20230404-0419.1",
39
- "@fluentui/react-utilities": "0.0.0-nightly-20230404-0419.1",
37
+ "@fluentui/react-label": "0.0.0-nightly-20230406-0417.1",
38
+ "@fluentui/react-theme": "0.0.0-nightly-20230406-0417.1",
39
+ "@fluentui/react-utilities": "0.0.0-nightly-20230406-0417.1",
40
40
  "@griffel/react": "^1.5.2",
41
41
  "@swc/helpers": "^0.4.14"
42
42
  },