@fluentui/react-field 0.0.0-nightly-20230404-0419.1 → 0.0.0-nightly-20230406-0417.1

package/CHANGELOG.json

@@ -2,9 +2,9 @@
   "name": "@fluentui/react-field",
   "entries": [
     {
-      "date": "Tue, 04 Apr 2023 04:25:20 GMT",
-      "tag": "@fluentui/react-field_v0.0.0-nightly-20230404-0419.1",
-      "version": "0.0.0-nightly-20230404-0419.1",
+      "date": "Thu, 06 Apr 2023 04:23:46 GMT",
+      "tag": "@fluentui/react-field_v0.0.0-nightly-20230406-0417.1",
+      "version": "0.0.0-nightly-20230406-0417.1",
       "comments": {
         "prerelease": [
           {
@@ -16,32 +16,59 @@
           {
             "author": "beachball",
             "package": "@fluentui/react-field",
-            "comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20230404-0419.1",
-            "commit": "75e35c8f53b490d241fffe70f831b72eaa66a5ab"
+            "comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20230406-0417.1",
+            "commit": "6b7f70ea7424a1cdc3c140ad7ce9da2f04850be3"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-field",
-            "comment": "Bump @fluentui/react-label to v0.0.0-nightly-20230404-0419.1",
-            "commit": "75e35c8f53b490d241fffe70f831b72eaa66a5ab"
+            "comment": "Bump @fluentui/react-label to v0.0.0-nightly-20230406-0417.1",
+            "commit": "6b7f70ea7424a1cdc3c140ad7ce9da2f04850be3"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-field",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230404-0419.1",
-            "commit": "75e35c8f53b490d241fffe70f831b72eaa66a5ab"
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230406-0417.1",
+            "commit": "6b7f70ea7424a1cdc3c140ad7ce9da2f04850be3"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-field",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230404-0419.1",
-            "commit": "75e35c8f53b490d241fffe70f831b72eaa66a5ab"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230406-0417.1",
+            "commit": "6b7f70ea7424a1cdc3c140ad7ce9da2f04850be3"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-field",
-            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230404-0419.1",
-            "commit": "75e35c8f53b490d241fffe70f831b72eaa66a5ab"
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230406-0417.1",
+            "commit": "6b7f70ea7424a1cdc3c140ad7ce9da2f04850be3"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 04 Apr 2023 18:44:50 GMT",
+      "tag": "@fluentui/react-field_v9.0.0-alpha.29",
+      "version": "9.0.0-alpha.29",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-field",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.16",
+            "commit": "6778d76bbbad7e1975c151c797f28c2708cde2ce"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-field",
+            "comment": "Bump @fluentui/react-label to v9.1.7",
+            "commit": "6778d76bbbad7e1975c151c797f28c2708cde2ce"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-field",
+            "comment": "Bump @fluentui/react-utilities to v9.7.3",
+            "commit": "6778d76bbbad7e1975c151c797f28c2708cde2ce"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,22 +1,33 @@
 # Change Log - @fluentui/react-field
 
-This log was last generated on Tue, 04 Apr 2023 04:25:20 GMT and should not be manually modified.
+This log was last generated on Thu, 06 Apr 2023 04:23:46 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20230404-0419.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v0.0.0-nightly-20230404-0419.1)
+## [0.0.0-nightly-20230406-0417.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v0.0.0-nightly-20230406-0417.1)
 
-Tue, 04 Apr 2023 04:25:20 GMT 
-[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)
+Thu, 06 Apr 2023 04:23:46 GMT 
+[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)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/react-context-selector to v0.0.0-nightly-20230404-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/75e35c8f53b490d241fffe70f831b72eaa66a5ab) by beachball)
-- Bump @fluentui/react-label to v0.0.0-nightly-20230404-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/75e35c8f53b490d241fffe70f831b72eaa66a5ab) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20230404-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/75e35c8f53b490d241fffe70f831b72eaa66a5ab) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20230404-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/75e35c8f53b490d241fffe70f831b72eaa66a5ab) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230404-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/75e35c8f53b490d241fffe70f831b72eaa66a5ab) by beachball)
+- Bump @fluentui/react-context-selector to v0.0.0-nightly-20230406-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/6b7f70ea7424a1cdc3c140ad7ce9da2f04850be3) by beachball)
+- Bump @fluentui/react-label to v0.0.0-nightly-20230406-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/6b7f70ea7424a1cdc3c140ad7ce9da2f04850be3) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20230406-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/6b7f70ea7424a1cdc3c140ad7ce9da2f04850be3) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20230406-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/6b7f70ea7424a1cdc3c140ad7ce9da2f04850be3) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230406-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/6b7f70ea7424a1cdc3c140ad7ce9da2f04850be3) by beachball)
+
+## [9.0.0-alpha.29](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.29)
+
+Tue, 04 Apr 2023 18:44:50 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.27..@fluentui/react-field_v9.0.0-alpha.29)
+
+### Changes
+
+- Bump @fluentui/react-context-selector to v9.1.16 ([PR #27434](https://github.com/microsoft/fluentui/pull/27434) by beachball)
+- Bump @fluentui/react-label to v9.1.7 ([PR #27434](https://github.com/microsoft/fluentui/pull/27434) by beachball)
+- Bump @fluentui/react-utilities to v9.7.3 ([PR #27434](https://github.com/microsoft/fluentui/pull/27434) by beachball)
 
 ## [9.0.0-alpha.27](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.27)
 

package/dist/index.d.ts

@@ -19,12 +19,60 @@ export declare type DeprecatedFieldProps<ControlProps> = ControlProps & {
 
 export declare const Field: ForwardRefComponent<FieldProps>;
 
+export declare const fieldClassNames: SlotClassNames<FieldSlots>;
+
+export declare const FieldContextProvider: React_2.Provider<Readonly<Pick<FieldState, "orientation" | "required" | "size" | "validationState" | "generatedControlId"> & {
+    labelFor?: string | undefined;
+    labelId?: string | undefined;
+    validationMessageId?: string | undefined;
+    hintId?: string | undefined;
+}> | undefined>;
+
+export declare type FieldContextValue = Readonly<Pick<FieldState, 'generatedControlId' | 'orientation' | 'required' | 'size' | 'validationState'> & {
+    /** The label's for prop. Undefined if there is no label. */
+    labelFor?: string;
+    /** The label's id prop. Undefined if there is no label. */
+    labelId?: string;
+    /** The validationMessage's id prop. Undefined if there is no validationMessage. */
+    validationMessageId?: string;
+    /** The hint's id prop. Undefined if there is no hint. */
+    hintId?: string;
+}>;
+
+export declare type FieldContextValues = {
+    field: FieldContextValue;
+};
+
 /**
- * The props added to the Field's child element.
+ * The props added to the control inside the Field.
  */
-declare type FieldChildProps = Pick<React_2.HTMLAttributes<HTMLElement>, 'id' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-required'>;
+export declare type FieldControlProps = Pick<React_2.HTMLAttributes<HTMLElement>, 'id' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-required'>;
 
-export declare const fieldClassNames: SlotClassNames<FieldSlots>;
+/**
+ * Options for `useFieldControlProps_unstable`.
+ */
+export declare type FieldControlPropsOptions = {
+    /**
+     * Skips setting `aria-labelledby` on the control if the `label.htmlFor` refers to the control.
+     *
+     * This should be used with controls that can be the target of a label's `for` prop:
+     * `<button>`, `<input>`, `<progress>`, `<select>`, `<textarea>`.
+     */
+    supportsLabelFor?: boolean;
+    /**
+     * Sets `required` instead of `aria-required` when the Field is marked required.
+     *
+     * This should be used with controls that support the `required` prop:
+     * `<input>` (except `range` or `color`), `<select>`, `<textarea>`.
+     */
+    supportsRequired?: boolean;
+    /**
+     * Sets the size prop on the control to match the Field's size: `'small' | 'medium' | 'large'`.
+     *
+     * This should be used with controls that have a custom size prop that matches the Field's size prop.
+     */
+    supportsSize?: boolean;
+};
 
 /**
  * Field Props
@@ -34,13 +82,15 @@ export declare type FieldProps = Omit<ComponentProps<FieldSlots>, 'children'> &
      * The Field's child can be a single form control, or a render function that takes the props that should be spread on
      * a form control.
      *
-     * All form controls in this library can be used directly as children (such as `<Input>` or `<RadioGroup>`), as well
-     * as intrinsic form controls like `<input>` or `<textarea>`. Custom controls can also be used as long as they
-     * accept FieldChildProps and spread them on the appropriate element.
+     * All form controls in this library can be used directly as children (such as `<Input>` or `<RadioGroup>`).
      *
-     * For more complex scenarios, a render function can be used to pass the FieldChildProps to the appropriate control.
+     * For other controls, there are two options:
+     * 1. The child of Field can be a render function that is given the props that should be spread on the control.
+     *    `<Field>{(props) => <MyInput {...props} />}</Field>`
+     * 2. The control itself can merge props from field with useFieldControlProps_unstable().
+     *    `props = useFieldControlProps_unstable(props);`
      */
-    children?: React_2.ReactElement<FieldChildProps> | null | ((props: FieldChildProps) => React_2.ReactNode);
+    children?: React_2.ReactNode | ((props: FieldControlProps) => React_2.ReactNode);
     /**
      * The orientation of the label relative to the field component.
      * 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 = {
 /**
  * State used in rendering Field
  */
-export declare type FieldState = ComponentState<Required<FieldSlots>> & Required<Pick<FieldProps, 'orientation' | 'validationState'>>;
+export declare type FieldState = ComponentState<Required<FieldSlots>> & Required<Pick<FieldProps, 'orientation' | 'required' | 'size' | 'validationState'>> & Pick<FieldProps, 'children'> & {
+    /**
+     * The ID generated for the control inside the field, and the default value of label.htmlFor prop.
+     */
+    generatedControlId: string;
+};
 
 /**
  * @deprecated Only for use to make deprecated [Control]Field shim components.
@@ -134,7 +189,7 @@ export declare function makeDeprecatedField<ControlProps>(Control: React_2.Compo
 /**
  * Render the final JSX of Field
  */
-export declare const renderField_unstable: (state: FieldState) => JSX.Element;
+export declare const renderField_unstable: (state: FieldState, contextValues?: FieldContextValues | undefined) => JSX.Element;
 
 /**
  * Create the state required to render Field.
@@ -147,6 +202,36 @@ export declare const renderField_unstable: (state: FieldState) => JSX.Element;
  */
 export declare const useField_unstable: (props: FieldProps, ref: React_2.Ref<HTMLDivElement>) => FieldState;
 
+export declare const useFieldContext_unstable: () => Readonly<Pick<FieldState, "orientation" | "required" | "size" | "validationState" | "generatedControlId"> & {
+    labelFor?: string | undefined;
+    labelId?: string | undefined;
+    validationMessageId?: string | undefined;
+    hintId?: string | undefined;
+}> | undefined;
+
+/**
+ * Get the context values used when rendering Field.
+ */
+export declare const useFieldContextValues_unstable: (state: FieldState) => FieldContextValues;
+
+/**
+ * Gets the control props from the field context, if this inside a `<Field>`.
+ *
+ * When called with no arguments, returns the FieldControlProps that should be applied to the control.
+ *
+ * @returns A FieldControlProps object if inside a `<Field>`, otherwise undefined.
+ */
+export declare function useFieldControlProps_unstable(): FieldControlProps | undefined;
+
+/**
+ * Copies and merges the FieldControlProps with the given props, if this inside a `<Field>`.
+ *
+ * @param props - The existing props for the control. These will be merged with the control props from the field context.
+ * @param options - Option to include the size prop.
+ * @returns Merged props if inside a `<Field>`, otherwise the original props, or undefined if no props given.
+ */
+export declare function useFieldControlProps_unstable<Props extends FieldControlProps>(props: Props, options?: FieldControlPropsOptions): Props;
+
 /**
  * Apply styling to the Field slots based on the state
  */

package/lib/components/Field/Field.js

@@ -2,10 +2,12 @@ import * as React from 'react';
 import { renderField_unstable } from './renderField';
 import { useField_unstable } from './useField';
 import { useFieldStyles_unstable } from './useFieldStyles';
+import { useFieldContextValues_unstable } from '../../contexts/index';
 export const Field = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useField_unstable(props, ref);
   useFieldStyles_unstable(state);
-  return renderField_unstable(state);
+  const context = useFieldContextValues_unstable(state);
+  return renderField_unstable(state, context);
 });
 Field.displayName = 'Field';
 //# sourceMappingURL=Field.js.map

package/lib/components/Field/Field.js.map

@@ -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"}
+{"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"}

package/lib/components/Field/Field.types.js.map

@@ -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"}
+{"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"}

package/lib/components/Field/renderField.js

@@ -1,13 +1,22 @@
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
+import { FieldContextProvider, getFieldControlProps } from '../../contexts/index';
 /**
  * Render the final JSX of Field
  */
-export const renderField_unstable = state => {
+export const renderField_unstable = (state, contextValues) => {
   const {
     slots,
     slotProps
   } = getSlots(state);
-  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));
+  let {
+    children
+  } = state;
+  if (typeof children === 'function') {
+    children = children(getFieldControlProps(contextValues === null || contextValues === void 0 ? void 0 : contextValues.field) || {});
+  }
+  return /*#__PURE__*/React.createElement(FieldContextProvider, {
+    value: contextValues === null || contextValues === void 0 ? void 0 : contextValues.field
+  }, /*#__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)));
 };
 //# sourceMappingURL=renderField.js.map

package/lib/components/Field/renderField.js.map

@@ -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"}
+{"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"}

package/lib/components/Field/useField.js

@@ -1,6 +1,3 @@
-var _controlProps, _arialabelledby,
-  // Assign the child a generated ID if doesn't already have an ID
-  _controlProps1, _controlProps2, _ariainvalid, _controlProps3, _ariarequired;
 import * as React from 'react';
 import { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';
 import { Label } from '@fluentui/react-label';
@@ -24,17 +21,19 @@ export const useField_unstable = (props, ref) => {
   const {
     children,
     orientation = 'vertical',
-    required,
+    required = false,
     validationState = props.validationMessage ? 'error' : 'none',
-    size
+    size = 'medium'
   } = props;
   const baseId = useId('field-');
+  const generatedControlId = baseId + '__control';
   const root = getNativeElementProps('div', {
     ...props,
     ref
   }, /*excludedPropNames:*/['children']);
   const label = resolveShorthand(props.label, {
     defaultProps: {
+      htmlFor: generatedControlId,
       id: baseId + '__label',
       required,
       size
@@ -58,39 +57,12 @@ export const useField_unstable = (props, ref) => {
       children: defaultIcon
     }
   });
-  const controlProps = /*#__PURE__*/ /*#__PURE__*/React.isValidElement(children) ? {
-    ...children.props
-  } : {};
-  if (label) {
-    var _;
-    (_ = (_controlProps = controlProps)[_arialabelledby = 'aria-labelledby']) !== null && _ !== void 0 ? _ : _controlProps[_arialabelledby] = label.id;
-    if (!label.htmlFor) {
-      var _id;
-      (_id = (_controlProps1 = controlProps).id) !== null && _id !== void 0 ? _id : _controlProps1.id = baseId + '__control';
-      label.htmlFor = controlProps.id;
-    }
-  }
-  if (validationMessage || hint) {
-    // The control is described by the validation message, or hint, or both
-    // We also preserve and append any aria-describedby supplied by the user
-    // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933
-    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(' ');
-  }
-  if (validationState === 'error') {
-    var _1;
-    (_1 = (_controlProps2 = controlProps)[_ariainvalid = 'aria-invalid']) !== null && _1 !== void 0 ? _1 : _controlProps2[_ariainvalid] = true;
-  }
-  if (required) {
-    var _2;
-    (_2 = (_controlProps3 = controlProps)[_ariarequired = 'aria-required']) !== null && _2 !== void 0 ? _2 : _controlProps3[_ariarequired] = true;
-  }
-  if ( /*#__PURE__*/React.isValidElement(children)) {
-    root.children = /*#__PURE__*/React.cloneElement(children, controlProps);
-  } else if (typeof children === 'function') {
-    root.children = children(controlProps);
-  }
   return {
+    children,
+    generatedControlId,
     orientation,
+    required,
+    size,
     validationState,
     components: {
       root: 'div',

package/lib/components/Field/useField.js.map

@@ -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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"}
+{"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"}

package/lib/contexts/FieldContext.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+const FieldContext = /*#__PURE__*/React.createContext(undefined);
+export const FieldContextProvider = FieldContext.Provider;
+export const useFieldContext_unstable = () => React.useContext(FieldContext);
+//# sourceMappingURL=FieldContext.js.map

package/lib/contexts/FieldContext.js.map

@@ -0,0 +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"}

package/lib/contexts/index.js

@@ -0,0 +1,4 @@
+export * from './FieldContext';
+export * from './useFieldContextValues';
+export * from './useFieldControlProps';
+//# sourceMappingURL=index.js.map

package/lib/contexts/index.js.map

@@ -0,0 +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"}

package/lib/contexts/useFieldContextValues.js

@@ -0,0 +1,33 @@
+import * as React from 'react';
+/**
+ * Get the context values used when rendering Field.
+ */
+export const useFieldContextValues_unstable = state => {
+  var _state_label, _state_label1, _state_validationMessage, _state_hint;
+  const {
+    generatedControlId,
+    orientation,
+    required,
+    size,
+    validationState
+  } = state;
+  const labelFor = (_state_label = state.label) === null || _state_label === void 0 ? void 0 : _state_label.htmlFor;
+  const labelId = (_state_label1 = state.label) === null || _state_label1 === void 0 ? void 0 : _state_label1.id;
+  const validationMessageId = (_state_validationMessage = state.validationMessage) === null || _state_validationMessage === void 0 ? void 0 : _state_validationMessage.id;
+  const hintId = (_state_hint = state.hint) === null || _state_hint === void 0 ? void 0 : _state_hint.id;
+  const field = React.useMemo(() => ({
+    generatedControlId,
+    hintId,
+    labelFor,
+    labelId,
+    orientation,
+    required,
+    size,
+    validationMessageId,
+    validationState
+  }), [generatedControlId, hintId, labelFor, labelId, orientation, required, size, validationMessageId, validationState]);
+  return {
+    field
+  };
+};
+//# sourceMappingURL=useFieldContextValues.js.map

package/lib/contexts/useFieldContextValues.js.map

@@ -0,0 +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"}

package/lib/contexts/useFieldControlProps.js

@@ -0,0 +1,65 @@
+var _props, _props1, _arialabelledby, _props2, _ariainvalid, _props3, _props4, _ariarequired, _props5;
+import { useFieldContext_unstable } from './FieldContext';
+export function useFieldControlProps_unstable(props, options) {
+  return getFieldControlProps(useFieldContext_unstable(), props, options);
+}
+/**
+ * @internal
+ * Implementation of useFieldControlProps_unstable.
+ * Split out so it can be used directly in renderField_unstable.
+ */
+export function getFieldControlProps(context, props, options) {
+  if (!context) {
+    return props;
+  }
+  // Create a copy of props so we don't modify the original
+  props = {
+    ...props
+  };
+  const {
+    generatedControlId,
+    hintId,
+    labelFor,
+    labelId,
+    required,
+    validationMessageId,
+    validationState
+  } = context;
+  if (generatedControlId) {
+    var _id;
+    (_id = (_props = props).id) !== null && _id !== void 0 ? _id : _props.id = generatedControlId;
+  }
+  // Set aria-labelledby if the control doesn't support label.htmlFor, or if the label's htmlFor doesn't refer
+  // to this control (i.e. the user set this control's id prop without also setting the Field's label.htmlFor).
+  if (labelId && (!(options === null || options === void 0 ? void 0 : options.supportsLabelFor) || labelFor !== props.id)) {
+    var _;
+    (_ = (_props1 = props)[_arialabelledby = 'aria-labelledby']) !== null && _ !== void 0 ? _ : _props1[_arialabelledby] = labelId;
+  }
+  // The control is described by the validation message, or hint, or both.
+  // We also preserve and append any aria-describedby from props.
+  // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933
+  if (validationMessageId || hintId) {
+    // NOTE: Not using ??= since we're merging and overriding the user-provided value.
+    props['aria-describedby'] = [validationMessageId, hintId, props === null || props === void 0 ? void 0 : props['aria-describedby']].filter(Boolean).join(' ');
+  }
+  if (validationState === 'error') {
+    var _1;
+    (_1 = (_props2 = props)[_ariainvalid = 'aria-invalid']) !== null && _1 !== void 0 ? _1 : _props2[_ariainvalid] = true;
+  }
+  if (required) {
+    if (options === null || options === void 0 ? void 0 : options.supportsRequired) {
+      var _required;
+      (_required = (_props3 = props).required) !== null && _required !== void 0 ? _required : _props3.required = true;
+    } else {
+      var _2;
+      (_2 = (_props4 = props)[_ariarequired = 'aria-required']) !== null && _2 !== void 0 ? _2 : _props4[_ariarequired] = true;
+    }
+  }
+  // Include the size prop if this control supports it
+  if (options === null || options === void 0 ? void 0 : options.supportsSize) {
+    var _size;
+    (_size = (_props5 = props).size) !== null && _size !== void 0 ? _size : _props5.size = context.size;
+  }
+  return props;
+}
+//# sourceMappingURL=useFieldControlProps.js.map

package/lib/contexts/useFieldControlProps.js.map

@@ -0,0 +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

@@ -1,4 +1,5 @@
 export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field';
+export { FieldContextProvider, useFieldContext_unstable, useFieldContextValues_unstable, useFieldControlProps_unstable } from './contexts/index';
 // eslint-disable-next-line deprecation/deprecation
 export { getDeprecatedFieldClassNames, makeDeprecatedField } from './util/makeDeprecatedField';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -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"}
+{"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"}

package/lib-commonjs/components/Field/Field.js

@@ -11,10 +11,12 @@ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _renderField = require("./renderField");
 const _useField = require("./useField");
 const _useFieldStyles = require("./useFieldStyles");
+const _index = require("../../contexts/index");
 const Field = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useField.useField_unstable)(props, ref);
     (0, _useFieldStyles.useFieldStyles_unstable)(state);
-    return (0, _renderField.renderField_unstable)(state);
+    const context = (0, _index.useFieldContextValues_unstable)(state);
+    return (0, _renderField.renderField_unstable)(state, context);
 });
 Field.displayName = 'Field'; //# sourceMappingURL=Field.js.map
 

package/lib-commonjs/components/Field/Field.js.map

@@ -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"}
+{"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"}

package/lib-commonjs/components/Field/renderField.js

@@ -9,9 +9,16 @@ Object.defineProperty(exports, "renderField_unstable", {
 const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _reactUtilities = require("@fluentui/react-utilities");
-const renderField_unstable = (state)=>{
+const _index = require("../../contexts/index");
+const renderField_unstable = (state, contextValues)=>{
     const { slots , slotProps  } = (0, _reactUtilities.getSlots)(state);
-    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));
+    let { children  } = state;
+    if (typeof children === 'function') {
+        children = children((0, _index.getFieldControlProps)(contextValues === null || contextValues === void 0 ? void 0 : contextValues.field) || {});
+    }
+    return /*#__PURE__*/ _react.createElement(_index.FieldContextProvider, {
+        value: contextValues === null || contextValues === void 0 ? void 0 : contextValues.field
+    }, /*#__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)));
 }; //# sourceMappingURL=renderField.js.map
 
 //# sourceMappingURL=renderField.js.map

package/lib-commonjs/components/Field/renderField.js.map

@@ -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"}
+{"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"}

package/lib-commonjs/components/Field/useField.js

@@ -11,8 +11,6 @@ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _reactIcons = require("@fluentui/react-icons");
 const _reactLabel = require("@fluentui/react-label");
 const _reactUtilities = require("@fluentui/react-utilities");
-var _controlProps, _arialabelledby, // Assign the child a generated ID if doesn't already have an ID
-_controlProps1, _controlProps2, _ariainvalid, _controlProps3, _ariarequired;
 const validationMessageIcons = {
     error: /*#__PURE__*/ _react.createElement(_reactIcons.ErrorCircle12Filled, null),
     warning: /*#__PURE__*/ _react.createElement(_reactIcons.Warning12Filled, null),
@@ -20,8 +18,9 @@ const validationMessageIcons = {
     none: undefined
 };
 const useField_unstable = (props, ref)=>{
-    const { children , orientation ='vertical' , required , validationState =props.validationMessage ? 'error' : 'none' , size  } = props;
+    const { children , orientation ='vertical' , required =false , validationState =props.validationMessage ? 'error' : 'none' , size ='medium'  } = props;
     const baseId = (0, _reactUtilities.useId)('field-');
+    const generatedControlId = baseId + '__control';
     const root = (0, _reactUtilities.getNativeElementProps)('div', {
         ...props,
         ref
@@ -30,6 +29,7 @@ const useField_unstable = (props, ref)=>{
     ]);
     const label = (0, _reactUtilities.resolveShorthand)(props.label, {
         defaultProps: {
+            htmlFor: generatedControlId,
             id: baseId + '__label',
             required,
             size
@@ -53,43 +53,12 @@ const useField_unstable = (props, ref)=>{
             children: defaultIcon
         }
     });
-    const controlProps = /*#__PURE__*/ /*#__PURE__*/ _react.isValidElement(children) ? {
-        ...children.props
-    } : {};
-    if (label) {
-        var _;
-        (_ = (_controlProps = controlProps)[_arialabelledby = 'aria-labelledby']) !== null && _ !== void 0 ? _ : _controlProps[_arialabelledby] = label.id;
-        if (!label.htmlFor) {
-            var _id;
-            (_id = (_controlProps1 = controlProps).id) !== null && _id !== void 0 ? _id : _controlProps1.id = baseId + '__control';
-            label.htmlFor = controlProps.id;
-        }
-    }
-    if (validationMessage || hint) {
-        // The control is described by the validation message, or hint, or both
-        // We also preserve and append any aria-describedby supplied by the user
-        // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933
-        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(' ');
-    }
-    if (validationState === 'error') {
-        var _1;
-        (_1 = (_controlProps2 = controlProps)[_ariainvalid = 'aria-invalid']) !== null && _1 !== void 0 ? _1 : _controlProps2[_ariainvalid] = true;
-    }
-    if (required) {
-        var _2;
-        (_2 = (_controlProps3 = controlProps)[_ariarequired = 'aria-required']) !== null && _2 !== void 0 ? _2 : _controlProps3[_ariarequired] = true;
-    }
-    if (/*#__PURE__*/ _react.isValidElement(children)) {
-        root.children = /*#__PURE__*/ _react.cloneElement(children, controlProps);
-    } else if (typeof children === 'function') {
-        root.children = children(controlProps);
-    }
     return {
+        children,
+        generatedControlId,
         orientation,
+        required,
+        size,
         validationState,
         components: {
             root: 'div',

package/lib-commonjs/components/Field/useField.js.map

@@ -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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"}
+{"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"}

package/lib-commonjs/contexts/FieldContext.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    FieldContextProvider: ()=>FieldContextProvider,
+    useFieldContext_unstable: ()=>useFieldContext_unstable
+});
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const FieldContext = /*#__PURE__*/ _react.createContext(undefined);
+const FieldContextProvider = FieldContext.Provider;
+const useFieldContext_unstable = ()=>_react.useContext(FieldContext); //# sourceMappingURL=FieldContext.js.map
+
+//# sourceMappingURL=FieldContext.js.map

package/lib-commonjs/contexts/FieldContext.js.map

@@ -0,0 +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"}

package/lib-commonjs/contexts/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
+_exportStar(require("./FieldContext"), exports);
+_exportStar(require("./useFieldContextValues"), exports);
+_exportStar(require("./useFieldControlProps"), exports);
+ //# sourceMappingURL=index.js.map
+
+//# sourceMappingURL=index.js.map

package/lib-commonjs/contexts/index.js.map

@@ -0,0 +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"}

package/lib-commonjs/contexts/useFieldContextValues.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useFieldContextValues_unstable", {
+    enumerable: true,
+    get: ()=>useFieldContextValues_unstable
+});
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const useFieldContextValues_unstable = (state)=>{
+    var _state_label, _state_label1, _state_validationMessage, _state_hint;
+    const { generatedControlId , orientation , required , size , validationState  } = state;
+    const labelFor = (_state_label = state.label) === null || _state_label === void 0 ? void 0 : _state_label.htmlFor;
+    const labelId = (_state_label1 = state.label) === null || _state_label1 === void 0 ? void 0 : _state_label1.id;
+    const validationMessageId = (_state_validationMessage = state.validationMessage) === null || _state_validationMessage === void 0 ? void 0 : _state_validationMessage.id;
+    const hintId = (_state_hint = state.hint) === null || _state_hint === void 0 ? void 0 : _state_hint.id;
+    const field = _react.useMemo(()=>({
+            generatedControlId,
+            hintId,
+            labelFor,
+            labelId,
+            orientation,
+            required,
+            size,
+            validationMessageId,
+            validationState
+        }), [
+        generatedControlId,
+        hintId,
+        labelFor,
+        labelId,
+        orientation,
+        required,
+        size,
+        validationMessageId,
+        validationState
+    ]);
+    return {
+        field
+    };
+}; //# sourceMappingURL=useFieldContextValues.js.map
+
+//# sourceMappingURL=useFieldContextValues.js.map

package/lib-commonjs/contexts/useFieldContextValues.js.map

@@ -0,0 +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"}

package/lib-commonjs/contexts/useFieldControlProps.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useFieldControlProps_unstable: ()=>useFieldControlProps_unstable,
+    getFieldControlProps: ()=>getFieldControlProps
+});
+const _fieldContext = require("./FieldContext");
+var _props, _props1, _arialabelledby, _props2, _ariainvalid, _props3, _props4, _ariarequired, _props5;
+function useFieldControlProps_unstable(props, options) {
+    return getFieldControlProps((0, _fieldContext.useFieldContext_unstable)(), props, options);
+}
+function getFieldControlProps(context, props, options) {
+    if (!context) {
+        return props;
+    }
+    // Create a copy of props so we don't modify the original
+    props = {
+        ...props
+    };
+    const { generatedControlId , hintId , labelFor , labelId , required , validationMessageId , validationState  } = context;
+    if (generatedControlId) {
+        var _id;
+        (_id = (_props = props).id) !== null && _id !== void 0 ? _id : _props.id = generatedControlId;
+    }
+    // Set aria-labelledby if the control doesn't support label.htmlFor, or if the label's htmlFor doesn't refer
+    // to this control (i.e. the user set this control's id prop without also setting the Field's label.htmlFor).
+    if (labelId && (!(options === null || options === void 0 ? void 0 : options.supportsLabelFor) || labelFor !== props.id)) {
+        var _;
+        (_ = (_props1 = props)[_arialabelledby = 'aria-labelledby']) !== null && _ !== void 0 ? _ : _props1[_arialabelledby] = labelId;
+    }
+    // The control is described by the validation message, or hint, or both.
+    // We also preserve and append any aria-describedby from props.
+    // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933
+    if (validationMessageId || hintId) {
+        // NOTE: Not using ??= since we're merging and overriding the user-provided value.
+        props['aria-describedby'] = [
+            validationMessageId,
+            hintId,
+            props === null || props === void 0 ? void 0 : props['aria-describedby']
+        ].filter(Boolean).join(' ');
+    }
+    if (validationState === 'error') {
+        var _1;
+        (_1 = (_props2 = props)[_ariainvalid = 'aria-invalid']) !== null && _1 !== void 0 ? _1 : _props2[_ariainvalid] = true;
+    }
+    if (required) {
+        if (options === null || options === void 0 ? void 0 : options.supportsRequired) {
+            var _required;
+            (_required = (_props3 = props).required) !== null && _required !== void 0 ? _required : _props3.required = true;
+        } else {
+            var _2;
+            (_2 = (_props4 = props)[_ariarequired = 'aria-required']) !== null && _2 !== void 0 ? _2 : _props4[_ariarequired] = true;
+        }
+    }
+    // Include the size prop if this control supports it
+    if (options === null || options === void 0 ? void 0 : options.supportsSize) {
+        var _size;
+        (_size = (_props5 = props).size) !== null && _size !== void 0 ? _size : _props5.size = context.size;
+    }
+    return props;
+} //# sourceMappingURL=useFieldControlProps.js.map
+
+//# sourceMappingURL=useFieldControlProps.js.map

package/lib-commonjs/contexts/useFieldControlProps.js.map

@@ -0,0 +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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"}

package/lib-commonjs/index.js

@@ -14,10 +14,15 @@ _export(exports, {
     renderField_unstable: ()=>_field.renderField_unstable,
     useFieldStyles_unstable: ()=>_field.useFieldStyles_unstable,
     useField_unstable: ()=>_field.useField_unstable,
+    FieldContextProvider: ()=>_index.FieldContextProvider,
+    useFieldContext_unstable: ()=>_index.useFieldContext_unstable,
+    useFieldContextValues_unstable: ()=>_index.useFieldContextValues_unstable,
+    useFieldControlProps_unstable: ()=>_index.useFieldControlProps_unstable,
     getDeprecatedFieldClassNames: ()=>_makeDeprecatedField.getDeprecatedFieldClassNames,
     makeDeprecatedField: ()=>_makeDeprecatedField.makeDeprecatedField
 });
 const _field = require("./Field");
+const _index = require("./contexts/index");
 const _makeDeprecatedField = require("./util/makeDeprecatedField");
  //# sourceMappingURL=index.js.map
 

package/lib-commonjs/index.js.map

@@ -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"}
+{"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

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-field",
-  "version": "0.0.0-nightly-20230404-0419.1",
+  "version": "0.0.0-nightly-20230406-0417.1",
   "description": "Fluent UI Field components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -27,16 +27,16 @@
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20230404-0419.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20230406-0417.1",
     "@fluentui/scripts-api-extractor": "*",
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-context-selector": "0.0.0-nightly-20230404-0419.1",
+    "@fluentui/react-context-selector": "0.0.0-nightly-20230406-0417.1",
     "@fluentui/react-icons": "^2.0.196",
-    "@fluentui/react-label": "0.0.0-nightly-20230404-0419.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20230404-0419.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20230404-0419.1",
+    "@fluentui/react-label": "0.0.0-nightly-20230406-0417.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20230406-0417.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20230406-0417.1",
     "@griffel/react": "^1.5.2",
     "@swc/helpers": "^0.4.14"
   },