@fluentui/react-field 9.4.16 → 9.5.0

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @fluentui/react-field
 
-This log was last generated on Wed, 11 Mar 2026 09:20:36 GMT and should not be manually modified.
+This log was last generated on Wed, 01 Apr 2026 15:50:20 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.5.0)
+
+Wed, 01 Apr 2026 15:50:20 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.4.16..@fluentui/react-field_v9.5.0)
+
+### Minor changes
+
+- feat: add base hooks for Field ([PR #35827](https://github.com/microsoft/fluentui/pull/35827) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-label to v9.4.0 ([PR #35912](https://github.com/microsoft/fluentui/pull/35912) by beachball)
+
 ## [9.4.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.4.16)
 
-Wed, 11 Mar 2026 09:20:36 GMT 
+Wed, 11 Mar 2026 09:22:20 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.4.15..@fluentui/react-field_v9.4.16)
 
 ### Patches

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

@@ -1 +1 @@
-{"version":3,"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, with `role=\"alert\"` so it is\n   *     announced by screen readers.\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"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/Field/Field.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, DistributiveOmit, 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, with `role=\"alert\"` so it is\n   *     announced by screen readers.\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 FieldBaseProps = DistributiveOmit<FieldProps, 'orientation' | 'size'>;\n\nexport type FieldBaseState = DistributiveOmit<FieldState, 'orientation' | 'size'>;\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"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/Field/index.js

@@ -1,4 +1,4 @@
 export { Field } from './Field';
 export { renderField_unstable } from './renderField';
-export { useField_unstable } from './useField';
+export { useField_unstable, useFieldBase_unstable } from './useField';
 export { fieldClassNames, useFieldStyles_unstable } from './useFieldStyles.styles';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Field/index.ts"],"sourcesContent":["export type {\n  FieldContextValue,\n  FieldContextValues,\n  FieldControlProps,\n  FieldProps,\n  FieldSlots,\n  FieldState,\n} from './Field.types';\nexport { Field } from './Field';\nexport { renderField_unstable } from './renderField';\nexport { useField_unstable } from './useField';\nexport { fieldClassNames, useFieldStyles_unstable } from './useFieldStyles.styles';\n"],"names":["Field","renderField_unstable","useField_unstable","fieldClassNames","useFieldStyles_unstable"],"mappings":"AAQA,SAASA,KAAK,QAAQ,UAAU;AAChC,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,eAAe,EAAEC,uBAAuB,QAAQ,0BAA0B"}
+{"version":3,"sources":["../src/components/Field/index.ts"],"sourcesContent":["export type {\n  FieldBaseProps,\n  FieldBaseState,\n  FieldContextValue,\n  FieldContextValues,\n  FieldControlProps,\n  FieldProps,\n  FieldSlots,\n  FieldState,\n} from './Field.types';\nexport { Field } from './Field';\nexport { renderField_unstable } from './renderField';\nexport { useField_unstable, useFieldBase_unstable } from './useField';\nexport { fieldClassNames, useFieldStyles_unstable } from './useFieldStyles.styles';\n"],"names":["Field","renderField_unstable","useField_unstable","useFieldBase_unstable","fieldClassNames","useFieldStyles_unstable"],"mappings":"AAUA,SAASA,KAAK,QAAQ,UAAU;AAChC,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,iBAAiB,EAAEC,qBAAqB,QAAQ,aAAa;AACtE,SAASC,eAAe,EAAEC,uBAAuB,QAAQ,0BAA0B"}

package/lib/components/Field/useField.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { CheckmarkCircle12Filled, DiamondDismiss12Filled, Warning12Filled } from '@fluentui/react-icons';
 import { Label } from '@fluentui/react-label';
@@ -17,7 +18,42 @@ const validationMessageIcons = {
  * @param props - Props passed to this field
  * @param ref - Ref to the root
  */ export const useField_unstable = (props, ref)=>{
-    const { children, orientation = 'vertical', required = false, validationState = props.validationMessage ? 'error' : 'none', size = 'medium' } = props;
+    const { orientation = 'vertical', size = 'medium', ...fieldProps } = props;
+    const state = useFieldBase_unstable(fieldProps, ref);
+    const defaultIcon = validationMessageIcons[state.validationState];
+    return {
+        ...state,
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        components: {
+            ...state.components,
+            label: Label
+        },
+        label: slot.optional(props.label, {
+            defaultProps: {
+                size,
+                ...state.label
+            },
+            elementType: Label
+        }),
+        validationMessageIcon: slot.optional(props.validationMessageIcon, {
+            renderByDefault: !!defaultIcon,
+            defaultProps: {
+                children: defaultIcon
+            },
+            elementType: 'span'
+        }),
+        orientation,
+        size
+    };
+};
+/**
+ * Base hook for Field component, which manages state related to validation, ARIA attributes,
+ * ID generation, and slot structure without design props.
+ *
+ * @param props - Props passed to this field
+ * @param ref - Ref to the root
+ */ export const useFieldBase_unstable = (props, ref)=>{
+    const { children, required = false, validationState = props.validationMessage ? 'error' : 'none' } = props;
     const baseId = useId('field-');
     const generatedControlId = baseId + '__control';
     const root = slot.always(getIntrinsicElementProps('div', {
@@ -32,10 +68,9 @@ const validationMessageIcons = {
         defaultProps: {
             htmlFor: generatedControlId,
             id: baseId + '__label',
-            required,
-            size
+            required
         },
-        elementType: Label
+        elementType: 'label'
     });
     const validationMessage = slot.optional(props.validationMessage, {
         defaultProps: {
@@ -50,24 +85,18 @@ const validationMessageIcons = {
         },
         elementType: 'div'
     });
-    const defaultIcon = validationMessageIcons[validationState];
     const validationMessageIcon = slot.optional(props.validationMessageIcon, {
-        renderByDefault: !!defaultIcon,
-        defaultProps: {
-            children: defaultIcon
-        },
+        renderByDefault: false,
         elementType: 'span'
     });
     return {
         children,
         generatedControlId,
-        orientation,
         required,
-        size,
         validationState,
         components: {
             root: 'div',
-            label: Label,
+            label: 'label',
             validationMessage: 'div',
             validationMessageIcon: 'span',
             hint: 'div'

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Field/useField.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { CheckmarkCircle12Filled, DiamondDismiss12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { FieldProps, FieldState } from './Field.types';\n\nconst validationMessageIcons = {\n  error: <DiamondDismiss12Filled />,\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 = slot.always(getIntrinsicElementProps('div', { ...props, ref }, /*excludedPropNames:*/ ['children']), {\n    elementType: 'div',\n  });\n  const label = slot.optional(props.label, {\n    defaultProps: { htmlFor: generatedControlId, id: baseId + '__label', required, size },\n    elementType: Label,\n  });\n  const validationMessage = slot.optional(props.validationMessage, {\n    defaultProps: {\n      id: baseId + '__validationMessage',\n      role: validationState === 'error' || validationState === 'warning' ? 'alert' : undefined,\n    },\n    elementType: 'div',\n  });\n  const hint = slot.optional(props.hint, { defaultProps: { id: baseId + '__hint' }, elementType: 'div' });\n  const defaultIcon = validationMessageIcons[validationState];\n  const validationMessageIcon = slot.optional(props.validationMessageIcon, {\n    renderByDefault: !!defaultIcon,\n    defaultProps: { children: defaultIcon },\n    elementType: 'span',\n  });\n\n  return {\n    children,\n    generatedControlId,\n    orientation,\n    required,\n    size,\n    validationState,\n    components: { root: 'div', label: Label, validationMessage: 'div', validationMessageIcon: 'span', hint: 'div' },\n    root,\n    label,\n    validationMessageIcon,\n    validationMessage,\n    hint,\n  };\n};\n"],"names":["React","CheckmarkCircle12Filled","DiamondDismiss12Filled","Warning12Filled","Label","getIntrinsicElementProps","useId","slot","validationMessageIcons","error","warning","success","none","undefined","useField_unstable","props","ref","children","orientation","required","validationState","validationMessage","size","baseId","generatedControlId","root","always","elementType","label","optional","defaultProps","htmlFor","id","role","hint","defaultIcon","validationMessageIcon","renderByDefault","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,EAAEC,sBAAsB,EAAEC,eAAe,QAAQ,wBAAwB;AACzG,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAGlF,MAAMC,yBAAyB;IAC7BC,qBAAO,oBAACP;IACRQ,uBAAS,oBAACP;IACVQ,uBAAS,oBAACV;IACVW,MAAMC;AACR;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC;IACnD,MAAM,EACJC,QAAQ,EACRC,cAAc,UAAU,EACxBC,WAAW,KAAK,EAChBC,kBAAkBL,MAAMM,iBAAiB,GAAG,UAAU,MAAM,EAC5DC,OAAO,QAAQ,EAChB,GAAGP;IAEJ,MAAMQ,SAASjB,MAAM;IACrB,MAAMkB,qBAAqBD,SAAS;IAEpC,MAAME,OAAOlB,KAAKmB,MAAM,CAACrB,yBAAyB,OAAO;QAAE,GAAGU,KAAK;QAAEC;IAAI,GAAG,oBAAoB,GAAG;QAAC;KAAW,GAAG;QAChHW,aAAa;IACf;IACA,MAAMC,QAAQrB,KAAKsB,QAAQ,CAACd,MAAMa,KAAK,EAAE;QACvCE,cAAc;YAAEC,SAASP;YAAoBQ,IAAIT,SAAS;YAAWJ;YAAUG;QAAK;QACpFK,aAAavB;IACf;IACA,MAAMiB,oBAAoBd,KAAKsB,QAAQ,CAACd,MAAMM,iBAAiB,EAAE;QAC/DS,cAAc;YACZE,IAAIT,SAAS;YACbU,MAAMb,oBAAoB,WAAWA,oBAAoB,YAAY,UAAUP;QACjF;QACAc,aAAa;IACf;IACA,MAAMO,OAAO3B,KAAKsB,QAAQ,CAACd,MAAMmB,IAAI,EAAE;QAAEJ,cAAc;YAAEE,IAAIT,SAAS;QAAS;QAAGI,aAAa;IAAM;IACrG,MAAMQ,cAAc3B,sBAAsB,CAACY,gBAAgB;IAC3D,MAAMgB,wBAAwB7B,KAAKsB,QAAQ,CAACd,MAAMqB,qBAAqB,EAAE;QACvEC,iBAAiB,CAAC,CAACF;QACnBL,cAAc;YAAEb,UAAUkB;QAAY;QACtCR,aAAa;IACf;IAEA,OAAO;QACLV;QACAO;QACAN;QACAC;QACAG;QACAF;QACAkB,YAAY;YAAEb,MAAM;YAAOG,OAAOxB;YAAOiB,mBAAmB;YAAOe,uBAAuB;YAAQF,MAAM;QAAM;QAC9GT;QACAG;QACAQ;QACAf;QACAa;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/Field/useField.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { CheckmarkCircle12Filled, DiamondDismiss12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { FieldBaseProps, FieldBaseState, FieldProps, FieldState } from './Field.types';\n\nconst validationMessageIcons = {\n  error: <DiamondDismiss12Filled />,\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 { orientation = 'vertical', size = 'medium', ...fieldProps } = props;\n  const state = useFieldBase_unstable(fieldProps, ref);\n\n  const defaultIcon = validationMessageIcons[state.validationState];\n\n  return {\n    ...state,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    components: { ...state.components, label: Label },\n    label: slot.optional(props.label, {\n      defaultProps: { size, ...state.label },\n      elementType: Label,\n    }),\n    validationMessageIcon: slot.optional(props.validationMessageIcon, {\n      renderByDefault: !!defaultIcon,\n      defaultProps: { children: defaultIcon },\n      elementType: 'span',\n    }),\n    orientation,\n    size,\n  };\n};\n\n/**\n * Base hook for Field component, which manages state related to validation, ARIA attributes,\n * ID generation, and slot structure without design props.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the root\n */\nexport const useFieldBase_unstable = (props: FieldBaseProps, ref: React.Ref<HTMLDivElement>): FieldBaseState => {\n  const { children, required = false, validationState = props.validationMessage ? 'error' : 'none' } = props;\n\n  const baseId = useId('field-');\n  const generatedControlId = baseId + '__control';\n\n  const root = slot.always(getIntrinsicElementProps('div', { ...props, ref }, /*excludedPropNames:*/ ['children']), {\n    elementType: 'div',\n  });\n  const label = slot.optional(props.label, {\n    defaultProps: { htmlFor: generatedControlId, id: baseId + '__label', required },\n    elementType: 'label',\n  });\n  const validationMessage = slot.optional(props.validationMessage, {\n    defaultProps: {\n      id: baseId + '__validationMessage',\n      role: validationState === 'error' || validationState === 'warning' ? 'alert' : undefined,\n    },\n    elementType: 'div',\n  });\n  const hint = slot.optional(props.hint, { defaultProps: { id: baseId + '__hint' }, elementType: 'div' });\n  const validationMessageIcon = slot.optional(props.validationMessageIcon, {\n    renderByDefault: false,\n    elementType: 'span',\n  });\n\n  return {\n    children,\n    generatedControlId,\n    required,\n    validationState,\n    components: { root: 'div', label: 'label', validationMessage: 'div', validationMessageIcon: 'span', hint: 'div' },\n    root,\n    label,\n    validationMessageIcon,\n    validationMessage,\n    hint,\n  };\n};\n"],"names":["React","CheckmarkCircle12Filled","DiamondDismiss12Filled","Warning12Filled","Label","getIntrinsicElementProps","useId","slot","validationMessageIcons","error","warning","success","none","undefined","useField_unstable","props","ref","orientation","size","fieldProps","state","useFieldBase_unstable","defaultIcon","validationState","components","label","optional","defaultProps","elementType","validationMessageIcon","renderByDefault","children","required","validationMessage","baseId","generatedControlId","root","always","htmlFor","id","role","hint"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,EAAEC,sBAAsB,EAAEC,eAAe,QAAQ,wBAAwB;AACzG,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAGlF,MAAMC,yBAAyB;IAC7BC,qBAAO,oBAACP;IACRQ,uBAAS,oBAACP;IACVQ,uBAAS,oBAACV;IACVW,MAAMC;AACR;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC;IACnD,MAAM,EAAEC,cAAc,UAAU,EAAEC,OAAO,QAAQ,EAAE,GAAGC,YAAY,GAAGJ;IACrE,MAAMK,QAAQC,sBAAsBF,YAAYH;IAEhD,MAAMM,cAAcd,sBAAsB,CAACY,MAAMG,eAAe,CAAC;IAEjE,OAAO;QACL,GAAGH,KAAK;QACR,4DAA4D;QAC5DI,YAAY;YAAE,GAAGJ,MAAMI,UAAU;YAAEC,OAAOrB;QAAM;QAChDqB,OAAOlB,KAAKmB,QAAQ,CAACX,MAAMU,KAAK,EAAE;YAChCE,cAAc;gBAAET;gBAAM,GAAGE,MAAMK,KAAK;YAAC;YACrCG,aAAaxB;QACf;QACAyB,uBAAuBtB,KAAKmB,QAAQ,CAACX,MAAMc,qBAAqB,EAAE;YAChEC,iBAAiB,CAAC,CAACR;YACnBK,cAAc;gBAAEI,UAAUT;YAAY;YACtCM,aAAa;QACf;QACAX;QACAC;IACF;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMG,wBAAwB,CAACN,OAAuBC;IAC3D,MAAM,EAAEe,QAAQ,EAAEC,WAAW,KAAK,EAAET,kBAAkBR,MAAMkB,iBAAiB,GAAG,UAAU,MAAM,EAAE,GAAGlB;IAErG,MAAMmB,SAAS5B,MAAM;IACrB,MAAM6B,qBAAqBD,SAAS;IAEpC,MAAME,OAAO7B,KAAK8B,MAAM,CAAChC,yBAAyB,OAAO;QAAE,GAAGU,KAAK;QAAEC;IAAI,GAAG,oBAAoB,GAAG;QAAC;KAAW,GAAG;QAChHY,aAAa;IACf;IACA,MAAMH,QAAQlB,KAAKmB,QAAQ,CAACX,MAAMU,KAAK,EAAE;QACvCE,cAAc;YAAEW,SAASH;YAAoBI,IAAIL,SAAS;YAAWF;QAAS;QAC9EJ,aAAa;IACf;IACA,MAAMK,oBAAoB1B,KAAKmB,QAAQ,CAACX,MAAMkB,iBAAiB,EAAE;QAC/DN,cAAc;YACZY,IAAIL,SAAS;YACbM,MAAMjB,oBAAoB,WAAWA,oBAAoB,YAAY,UAAUV;QACjF;QACAe,aAAa;IACf;IACA,MAAMa,OAAOlC,KAAKmB,QAAQ,CAACX,MAAM0B,IAAI,EAAE;QAAEd,cAAc;YAAEY,IAAIL,SAAS;QAAS;QAAGN,aAAa;IAAM;IACrG,MAAMC,wBAAwBtB,KAAKmB,QAAQ,CAACX,MAAMc,qBAAqB,EAAE;QACvEC,iBAAiB;QACjBF,aAAa;IACf;IAEA,OAAO;QACLG;QACAI;QACAH;QACAT;QACAC,YAAY;YAAEY,MAAM;YAAOX,OAAO;YAASQ,mBAAmB;YAAOJ,uBAAuB;YAAQY,MAAM;QAAM;QAChHL;QACAX;QACAI;QACAI;QACAQ;IACF;AACF,EAAE"}

package/lib/contexts/useFieldControlProps.js

@@ -4,9 +4,10 @@ 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.
+ *
+ * @internal
  */ export function getFieldControlProps(context, props, options) {
     if (!context) {
         return props;

package/lib/contexts/useFieldControlProps.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/useFieldControlProps.ts"],"sourcesContent":["'use client';\n\nimport 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"],"names":["useFieldContext_unstable","useFieldControlProps_unstable","props","options","getFieldControlProps","context","generatedControlId","hintId","labelFor","labelId","required","validationMessageId","validationState","id","supportsLabelFor","filter","Boolean","join","supportsRequired","supportsSize","size"],"mappings":"AAAA;AAGA,SAASA,wBAAwB,QAAQ,iBAAiB;AAkD1D,OAAO,SAASC,8BACdC,KAAa,EACbC,OAAkC;IAElC,OAAOC,qBAAqBJ,4BAA4BE,OAAOC;AACjE;AAEA;;;;CAIC,GACD,OAAO,SAASC,qBACdC,OAAsC,EACtCH,KAAa,EACbC,OAAkC;IAElC,IAAI,CAACE,SAAS;QACZ,OAAOH;IACT;IAEA,yDAAyD;IACzDA,QAAQ;QAAE,GAAGA,KAAK;IAAC;IAEnB,MAAM,EAAEI,kBAAkB,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,mBAAmB,EAAEC,eAAe,EAAE,GAAGP;IAE1G,IAAIC,oBAAoB;YACtBJ;;QAAAA,QAAAA,SAAAA,OAAMW,uCAANX,OAAMW,KAAOP;IACf;IAEA,4GAA4G;IAC5G,6GAA6G;IAC7G,IAAIG,WAAY,CAAA,EAACN,oBAAAA,8BAAAA,QAASW,gBAAgB,KAAIN,aAAaN,MAAMW,EAAE,AAAD,GAAI;YACpEX,SAAM;;QAANA,MAAAA,UAAAA,MAAK,CAAC,kBAAA,kBAAkB,iCAAxBA,OAAK,CAAC,gBAAkB,GAAKO;IAC/B;IAEA,wEAAwE;IACxE,+DAA+D;IAC/D,yFAAyF;IACzF,IAAIE,uBAAuBJ,QAAQ;QACjC,kFAAkF;QAClFL,KAAK,CAAC,mBAAmB,GAAG;YAACS;YAAqBJ;YAAQL,kBAAAA,4BAAAA,KAAO,CAAC,mBAAmB;SAAC,CAACa,MAAM,CAACC,SAASC,IAAI,CAAC;IAC9G;IAEA,IAAIL,oBAAoB,SAAS;YAC/BV,SAAM;;QAANA,OAAAA,UAAAA,MAAK,CAAC,eAAA,eAAe,mCAArBA,OAAK,CAAC,aAAe,GAAK;IAC5B;IAEA,IAAIQ,UAAU;QACZ,IAAIP,oBAAAA,8BAAAA,QAASe,gBAAgB,EAAE;gBAC5BhB;;YAAD,cAACA,UAAAA,OAAiCQ,yDAAjCR,QAAiCQ,WAAa;QACjD,OAAO;gBACLR,SAAM;;YAANA,OAAAA,UAAAA,MAAK,CAAC,gBAAA,gBAAgB,mCAAtBA,OAAK,CAAC,cAAgB,GAAK;QAC7B;IACF;IAEA,oDAAoD;IACpD,IAAIC,oBAAAA,8BAAAA,QAASgB,YAAY,EAAE;YACxBjB;;QAAD,UAACA,UAAAA,OAA+CkB,6CAA/ClB,QAA+CkB,OAASf,QAAQe,IAAI;IACvE;IAEA,OAAOlB;AACT"}
+{"version":3,"sources":["../src/contexts/useFieldControlProps.ts"],"sourcesContent":["'use client';\n\nimport 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 * Implementation of useFieldControlProps_unstable.\n * Split out so it can be used directly in renderField_unstable.\n *\n * @internal\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"],"names":["useFieldContext_unstable","useFieldControlProps_unstable","props","options","getFieldControlProps","context","generatedControlId","hintId","labelFor","labelId","required","validationMessageId","validationState","id","supportsLabelFor","filter","Boolean","join","supportsRequired","supportsSize","size"],"mappings":"AAAA;AAGA,SAASA,wBAAwB,QAAQ,iBAAiB;AAkD1D,OAAO,SAASC,8BACdC,KAAa,EACbC,OAAkC;IAElC,OAAOC,qBAAqBJ,4BAA4BE,OAAOC;AACjE;AAEA;;;;;CAKC,GACD,OAAO,SAASC,qBACdC,OAAsC,EACtCH,KAAa,EACbC,OAAkC;IAElC,IAAI,CAACE,SAAS;QACZ,OAAOH;IACT;IAEA,yDAAyD;IACzDA,QAAQ;QAAE,GAAGA,KAAK;IAAC;IAEnB,MAAM,EAAEI,kBAAkB,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,mBAAmB,EAAEC,eAAe,EAAE,GAAGP;IAE1G,IAAIC,oBAAoB;YACtBJ;;QAAAA,QAAAA,SAAAA,OAAMW,uCAANX,OAAMW,KAAOP;IACf;IAEA,4GAA4G;IAC5G,6GAA6G;IAC7G,IAAIG,WAAY,CAAA,EAACN,oBAAAA,8BAAAA,QAASW,gBAAgB,KAAIN,aAAaN,MAAMW,EAAE,AAAD,GAAI;YACpEX,SAAM;;QAANA,MAAAA,UAAAA,MAAK,CAAC,kBAAA,kBAAkB,iCAAxBA,OAAK,CAAC,gBAAkB,GAAKO;IAC/B;IAEA,wEAAwE;IACxE,+DAA+D;IAC/D,yFAAyF;IACzF,IAAIE,uBAAuBJ,QAAQ;QACjC,kFAAkF;QAClFL,KAAK,CAAC,mBAAmB,GAAG;YAACS;YAAqBJ;YAAQL,kBAAAA,4BAAAA,KAAO,CAAC,mBAAmB;SAAC,CAACa,MAAM,CAACC,SAASC,IAAI,CAAC;IAC9G;IAEA,IAAIL,oBAAoB,SAAS;YAC/BV,SAAM;;QAANA,OAAAA,UAAAA,MAAK,CAAC,eAAA,eAAe,mCAArBA,OAAK,CAAC,aAAe,GAAK;IAC5B;IAEA,IAAIQ,UAAU;QACZ,IAAIP,oBAAAA,8BAAAA,QAASe,gBAAgB,EAAE;gBAC5BhB;;YAAD,cAACA,UAAAA,OAAiCQ,yDAAjCR,QAAiCQ,WAAa;QACjD,OAAO;gBACLR,SAAM;;YAANA,OAAAA,UAAAA,MAAK,CAAC,gBAAA,gBAAgB,mCAAtBA,OAAK,CAAC,cAAgB,GAAK;QAC7B;IACF;IAEA,oDAAoD;IACpD,IAAIC,oBAAAA,8BAAAA,QAASgB,YAAY,EAAE;YACxBjB;;QAAD,UAACA,UAAAA,OAA+CkB,6CAA/ClB,QAA+CkB,OAASf,QAAQe,IAAI;IACvE;IAEA,OAAOlB;AACT"}

package/lib/index.js

@@ -1,2 +1,5 @@
 export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field';
 export { FieldContextProvider, useFieldContext_unstable, useFieldContextValues_unstable, useFieldControlProps_unstable } from './contexts/index';
+ // Experimental APIs - will be uncommented in the experimental release branch
+ // export { useFieldBase_unstable } from './Field';
+ // export type { FieldBaseProps, FieldBaseState } from './Field';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"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"],"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","FieldContextProvider","useFieldContext_unstable","useFieldContextValues_unstable","useFieldControlProps_unstable"],"mappings":"AAAA,SAASA,KAAK,EAAEC,eAAe,EAAEC,oBAAoB,EAAEC,uBAAuB,EAAEC,iBAAiB,QAAQ,UAAU;AASnH,SACEC,oBAAoB,EACpBC,wBAAwB,EACxBC,8BAA8B,EAC9BC,6BAA6B,QACxB,mBAAmB"}
+{"version":3,"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// Experimental APIs - will be uncommented in the experimental release branch\n// export { useFieldBase_unstable } from './Field';\n// export type { FieldBaseProps, FieldBaseState } from './Field';\n"],"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","FieldContextProvider","useFieldContext_unstable","useFieldContextValues_unstable","useFieldControlProps_unstable"],"mappings":"AAAA,SAASA,KAAK,EAAEC,eAAe,EAAEC,oBAAoB,EAAEC,uBAAuB,EAAEC,iBAAiB,QAAQ,UAAU;AASnH,SACEC,oBAAoB,EACpBC,wBAAwB,EACxBC,8BAA8B,EAC9BC,6BAA6B,QACxB,mBAAmB;CAG1B,6EAA6E;CAC7E,mDAAmD;CACnD,iEAAiE"}

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

@@ -1 +1 @@
-{"version":3,"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, with `role=\"alert\"` so it is\n   *     announced by screen readers.\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"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
+{"version":3,"sources":["../src/components/Field/Field.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, DistributiveOmit, 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, with `role=\"alert\"` so it is\n   *     announced by screen readers.\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 FieldBaseProps = DistributiveOmit<FieldProps, 'orientation' | 'size'>;\n\nexport type FieldBaseState = DistributiveOmit<FieldState, 'orientation' | 'size'>;\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"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

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

@@ -18,6 +18,9 @@ _export(exports, {
     renderField_unstable: function() {
         return _renderField.renderField_unstable;
     },
+    useFieldBase_unstable: function() {
+        return _useField.useFieldBase_unstable;
+    },
     useFieldStyles_unstable: function() {
         return _useFieldStylesstyles.useFieldStyles_unstable;
     },

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Field/index.ts"],"sourcesContent":["export type {\n  FieldContextValue,\n  FieldContextValues,\n  FieldControlProps,\n  FieldProps,\n  FieldSlots,\n  FieldState,\n} from './Field.types';\nexport { Field } from './Field';\nexport { renderField_unstable } from './renderField';\nexport { useField_unstable } from './useField';\nexport { fieldClassNames, useFieldStyles_unstable } from './useFieldStyles.styles';\n"],"names":["Field","renderField_unstable","useField_unstable","fieldClassNames","useFieldStyles_unstable"],"mappings":";;;;;;;;;;;;eAQSA,YAAK;;;eAGLG,qCAAe;;;eAFfF,iCAAoB;;;eAEHG,6CAAuB;;;eADxCF,2BAAiB;;;uBAFJ,UAAU;6BACK,gBAAgB;0BACnB,aAAa;sCACU,0BAA0B"}
+{"version":3,"sources":["../src/components/Field/index.ts"],"sourcesContent":["export type {\n  FieldBaseProps,\n  FieldBaseState,\n  FieldContextValue,\n  FieldContextValues,\n  FieldControlProps,\n  FieldProps,\n  FieldSlots,\n  FieldState,\n} from './Field.types';\nexport { Field } from './Field';\nexport { renderField_unstable } from './renderField';\nexport { useField_unstable, useFieldBase_unstable } from './useField';\nexport { fieldClassNames, useFieldStyles_unstable } from './useFieldStyles.styles';\n"],"names":["Field","renderField_unstable","useField_unstable","useFieldBase_unstable","fieldClassNames","useFieldStyles_unstable"],"mappings":";;;;;;;;;;;;eAUSA,YAAK;;;eAGLI,qCAAe;;;eAFfH,iCAAoB;;;eACDE,+BAAqB;;;eACvBE,6CAAuB;;;eADxCH,2BAAiB;;;uBAFJ,UAAU;6BACK,gBAAgB;0BACI,aAAa;sCACb,0BAA0B"}

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

@@ -1,10 +1,19 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useField_unstable", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useFieldBase_unstable: function() {
+        return useFieldBase_unstable;
+    },
+    useField_unstable: function() {
         return useField_unstable;
     }
 });
@@ -20,7 +29,36 @@ const validationMessageIcons = {
     none: undefined
 };
 const useField_unstable = (props, ref)=>{
-    const { children, orientation = 'vertical', required = false, validationState = props.validationMessage ? 'error' : 'none', size = 'medium' } = props;
+    const { orientation = 'vertical', size = 'medium', ...fieldProps } = props;
+    const state = useFieldBase_unstable(fieldProps, ref);
+    const defaultIcon = validationMessageIcons[state.validationState];
+    return {
+        ...state,
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        components: {
+            ...state.components,
+            label: _reactlabel.Label
+        },
+        label: _reactutilities.slot.optional(props.label, {
+            defaultProps: {
+                size,
+                ...state.label
+            },
+            elementType: _reactlabel.Label
+        }),
+        validationMessageIcon: _reactutilities.slot.optional(props.validationMessageIcon, {
+            renderByDefault: !!defaultIcon,
+            defaultProps: {
+                children: defaultIcon
+            },
+            elementType: 'span'
+        }),
+        orientation,
+        size
+    };
+};
+const useFieldBase_unstable = (props, ref)=>{
+    const { children, required = false, validationState = props.validationMessage ? 'error' : 'none' } = props;
     const baseId = (0, _reactutilities.useId)('field-');
     const generatedControlId = baseId + '__control';
     const root = _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
@@ -35,10 +73,9 @@ const useField_unstable = (props, ref)=>{
         defaultProps: {
             htmlFor: generatedControlId,
             id: baseId + '__label',
-            required,
-            size
+            required
         },
-        elementType: _reactlabel.Label
+        elementType: 'label'
     });
     const validationMessage = _reactutilities.slot.optional(props.validationMessage, {
         defaultProps: {
@@ -53,24 +90,18 @@ const useField_unstable = (props, ref)=>{
         },
         elementType: 'div'
     });
-    const defaultIcon = validationMessageIcons[validationState];
     const validationMessageIcon = _reactutilities.slot.optional(props.validationMessageIcon, {
-        renderByDefault: !!defaultIcon,
-        defaultProps: {
-            children: defaultIcon
-        },
+        renderByDefault: false,
         elementType: 'span'
     });
     return {
         children,
         generatedControlId,
-        orientation,
         required,
-        size,
         validationState,
         components: {
             root: 'div',
-            label: _reactlabel.Label,
+            label: 'label',
             validationMessage: 'div',
             validationMessageIcon: 'span',
             hint: 'div'

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Field/useField.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { CheckmarkCircle12Filled, DiamondDismiss12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { FieldProps, FieldState } from './Field.types';\n\nconst validationMessageIcons = {\n  error: <DiamondDismiss12Filled />,\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 = slot.always(getIntrinsicElementProps('div', { ...props, ref }, /*excludedPropNames:*/ ['children']), {\n    elementType: 'div',\n  });\n  const label = slot.optional(props.label, {\n    defaultProps: { htmlFor: generatedControlId, id: baseId + '__label', required, size },\n    elementType: Label,\n  });\n  const validationMessage = slot.optional(props.validationMessage, {\n    defaultProps: {\n      id: baseId + '__validationMessage',\n      role: validationState === 'error' || validationState === 'warning' ? 'alert' : undefined,\n    },\n    elementType: 'div',\n  });\n  const hint = slot.optional(props.hint, { defaultProps: { id: baseId + '__hint' }, elementType: 'div' });\n  const defaultIcon = validationMessageIcons[validationState];\n  const validationMessageIcon = slot.optional(props.validationMessageIcon, {\n    renderByDefault: !!defaultIcon,\n    defaultProps: { children: defaultIcon },\n    elementType: 'span',\n  });\n\n  return {\n    children,\n    generatedControlId,\n    orientation,\n    required,\n    size,\n    validationState,\n    components: { root: 'div', label: Label, validationMessage: 'div', validationMessageIcon: 'span', hint: 'div' },\n    root,\n    label,\n    validationMessageIcon,\n    validationMessage,\n    hint,\n  };\n};\n"],"names":["React","CheckmarkCircle12Filled","DiamondDismiss12Filled","Warning12Filled","Label","getIntrinsicElementProps","useId","slot","validationMessageIcons","error","warning","success","none","undefined","useField_unstable","props","ref","children","orientation","required","validationState","validationMessage","size","baseId","generatedControlId","root","always","elementType","label","optional","defaultProps","htmlFor","id","role","hint","defaultIcon","validationMessageIcon","renderByDefault","components"],"mappings":";;;;+BAuBac;;;;;;;iEAvBU,QAAQ;4BAEkD,wBAAwB;4BACnF,wBAAwB;gCACQ,4BAA4B;AAGlF,MAAMN,yBAAyB;IAC7BC,OAAAA,WAAAA,GAAO,OAAA,aAAA,CAACP,kCAAAA,EAAAA;IACRQ,SAAAA,WAAAA,GAAS,OAAA,aAAA,CAACP,2BAAAA,EAAAA;IACVQ,SAAAA,WAAAA,GAAS,OAAA,aAAA,CAACV,mCAAAA,EAAAA;IACVW,MAAMC;AACR;AAWO,0BAA0B,CAACE,OAAmBC;IACnD,MAAM,EACJC,QAAQ,EACRC,cAAc,UAAU,EACxBC,WAAW,KAAK,EAChBC,kBAAkBL,MAAMM,iBAAiB,GAAG,UAAU,MAAM,EAC5DC,OAAO,QAAQ,EAChB,GAAGP;IAEJ,MAAMQ,aAASjB,qBAAAA,EAAM;IACrB,MAAMkB,qBAAqBD,SAAS;IAEpC,MAAME,OAAOlB,oBAAAA,CAAKmB,MAAM,KAACrB,wCAAAA,EAAyB,OAAO;QAAE,GAAGU,KAAK;QAAEC;IAAI,GAAG,oBAAoB,GAAG;QAAC;KAAW,GAAG;QAChHW,aAAa;IACf;IACA,MAAMC,QAAQrB,oBAAAA,CAAKsB,QAAQ,CAACd,MAAMa,KAAK,EAAE;QACvCE,cAAc;YAAEC,SAASP;YAAoBQ,IAAIT,SAAS;YAAWJ;YAAUG;QAAK;QACpFK,aAAavB,iBAAAA;IACf;IACA,MAAMiB,oBAAoBd,oBAAAA,CAAKsB,QAAQ,CAACd,MAAMM,iBAAiB,EAAE;QAC/DS,cAAc;YACZE,IAAIT,SAAS;YACbU,MAAMb,oBAAoB,WAAWA,oBAAoB,YAAY,UAAUP;QACjF;QACAc,aAAa;IACf;IACA,MAAMO,OAAO3B,oBAAAA,CAAKsB,QAAQ,CAACd,MAAMmB,IAAI,EAAE;QAAEJ,cAAc;YAAEE,IAAIT,SAAS;QAAS;QAAGI,aAAa;IAAM;IACrG,MAAMQ,cAAc3B,sBAAsB,CAACY,gBAAgB;IAC3D,MAAMgB,wBAAwB7B,oBAAAA,CAAKsB,QAAQ,CAACd,MAAMqB,qBAAqB,EAAE;QACvEC,iBAAiB,CAAC,CAACF;QACnBL,cAAc;YAAEb,UAAUkB;QAAY;QACtCR,aAAa;IACf;IAEA,OAAO;QACLV;QACAO;QACAN;QACAC;QACAG;QACAF;QACAkB,YAAY;YAAEb,MAAM;YAAOG,OAAOxB,iBAAAA;YAAOiB,mBAAmB;YAAOe,uBAAuB;YAAQF,MAAM;QAAM;QAC9GT;QACAG;QACAQ;QACAf;QACAa;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/Field/useField.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { CheckmarkCircle12Filled, DiamondDismiss12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { FieldBaseProps, FieldBaseState, FieldProps, FieldState } from './Field.types';\n\nconst validationMessageIcons = {\n  error: <DiamondDismiss12Filled />,\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 { orientation = 'vertical', size = 'medium', ...fieldProps } = props;\n  const state = useFieldBase_unstable(fieldProps, ref);\n\n  const defaultIcon = validationMessageIcons[state.validationState];\n\n  return {\n    ...state,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    components: { ...state.components, label: Label },\n    label: slot.optional(props.label, {\n      defaultProps: { size, ...state.label },\n      elementType: Label,\n    }),\n    validationMessageIcon: slot.optional(props.validationMessageIcon, {\n      renderByDefault: !!defaultIcon,\n      defaultProps: { children: defaultIcon },\n      elementType: 'span',\n    }),\n    orientation,\n    size,\n  };\n};\n\n/**\n * Base hook for Field component, which manages state related to validation, ARIA attributes,\n * ID generation, and slot structure without design props.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the root\n */\nexport const useFieldBase_unstable = (props: FieldBaseProps, ref: React.Ref<HTMLDivElement>): FieldBaseState => {\n  const { children, required = false, validationState = props.validationMessage ? 'error' : 'none' } = props;\n\n  const baseId = useId('field-');\n  const generatedControlId = baseId + '__control';\n\n  const root = slot.always(getIntrinsicElementProps('div', { ...props, ref }, /*excludedPropNames:*/ ['children']), {\n    elementType: 'div',\n  });\n  const label = slot.optional(props.label, {\n    defaultProps: { htmlFor: generatedControlId, id: baseId + '__label', required },\n    elementType: 'label',\n  });\n  const validationMessage = slot.optional(props.validationMessage, {\n    defaultProps: {\n      id: baseId + '__validationMessage',\n      role: validationState === 'error' || validationState === 'warning' ? 'alert' : undefined,\n    },\n    elementType: 'div',\n  });\n  const hint = slot.optional(props.hint, { defaultProps: { id: baseId + '__hint' }, elementType: 'div' });\n  const validationMessageIcon = slot.optional(props.validationMessageIcon, {\n    renderByDefault: false,\n    elementType: 'span',\n  });\n\n  return {\n    children,\n    generatedControlId,\n    required,\n    validationState,\n    components: { root: 'div', label: 'label', validationMessage: 'div', validationMessageIcon: 'span', hint: 'div' },\n    root,\n    label,\n    validationMessageIcon,\n    validationMessage,\n    hint,\n  };\n};\n"],"names":["React","CheckmarkCircle12Filled","DiamondDismiss12Filled","Warning12Filled","Label","getIntrinsicElementProps","useId","slot","validationMessageIcons","error","warning","success","none","undefined","useField_unstable","props","ref","orientation","size","fieldProps","state","useFieldBase_unstable","defaultIcon","validationState","components","label","optional","defaultProps","elementType","validationMessageIcon","renderByDefault","children","required","validationMessage","baseId","generatedControlId","root","always","htmlFor","id","role","hint"],"mappings":"AAAA;;;;;;;;;;;;yBAwDaqB;eAAAA;;qBA/BAP;eAAAA;;;;iEAvBU,QAAQ;4BAEkD,wBAAwB;4BACnF,wBAAwB;gCACQ,4BAA4B;AAGlF,MAAMN,yBAAyB;IAC7BC,OAAAA,WAAAA,GAAO,OAAA,aAAA,CAACP,kCAAAA,EAAAA;IACRQ,SAAAA,WAAAA,GAAS,OAAA,aAAA,CAACP,2BAAAA,EAAAA;IACVQ,SAAAA,WAAAA,GAAS,OAAA,aAAA,CAACV,mCAAAA,EAAAA;IACVW,MAAMC;AACR;AAWO,0BAA0B,CAACE,OAAmBC;IACnD,MAAM,EAAEC,cAAc,UAAU,EAAEC,OAAO,QAAQ,EAAE,GAAGC,YAAY,GAAGJ;IACrE,MAAMK,QAAQC,sBAAsBF,YAAYH;IAEhD,MAAMM,cAAcd,sBAAsB,CAACY,MAAMG,eAAe,CAAC;IAEjE,OAAO;QACL,GAAGH,KAAK;QACR,4DAA4D;QAC5DI,YAAY;YAAE,GAAGJ,MAAMI,UAAU;YAAEC,OAAOrB,iBAAAA;QAAM;QAChDqB,OAAOlB,oBAAAA,CAAKmB,QAAQ,CAACX,MAAMU,KAAK,EAAE;YAChCE,cAAc;gBAAET;gBAAM,GAAGE,MAAMK,KAAK;YAAC;YACrCG,aAAaxB,iBAAAA;QACf;QACAyB,uBAAuBtB,oBAAAA,CAAKmB,QAAQ,CAACX,MAAMc,qBAAqB,EAAE;YAChEC,iBAAiB,CAAC,CAACR;YACnBK,cAAc;gBAAEI,UAAUT;YAAY;YACtCM,aAAa;QACf;QACAX;QACAC;IACF;AACF,EAAE;AASK,8BAA8B,CAACH,OAAuBC;IAC3D,MAAM,EAAEe,QAAQ,EAAEC,WAAW,KAAK,EAAET,kBAAkBR,MAAMkB,iBAAiB,GAAG,UAAU,MAAM,EAAE,GAAGlB;IAErG,MAAMmB,aAAS5B,qBAAAA,EAAM;IACrB,MAAM6B,qBAAqBD,SAAS;IAEpC,MAAME,OAAO7B,oBAAAA,CAAK8B,MAAM,KAAChC,wCAAAA,EAAyB,OAAO;QAAE,GAAGU,KAAK;QAAEC;IAAI,GAAG,oBAAoB,GAAG;QAAC;KAAW,GAAG;QAChHY,aAAa;IACf;IACA,MAAMH,QAAQlB,oBAAAA,CAAKmB,QAAQ,CAACX,MAAMU,KAAK,EAAE;QACvCE,cAAc;YAAEW,SAASH;YAAoBI,IAAIL,SAAS;YAAWF;QAAS;QAC9EJ,aAAa;IACf;IACA,MAAMK,oBAAoB1B,oBAAAA,CAAKmB,QAAQ,CAACX,MAAMkB,iBAAiB,EAAE;QAC/DN,cAAc;YACZY,IAAIL,SAAS;YACbM,MAAMjB,oBAAoB,WAAWA,oBAAoB,YAAY,UAAUV;QACjF;QACAe,aAAa;IACf;IACA,MAAMa,OAAOlC,oBAAAA,CAAKmB,QAAQ,CAACX,MAAM0B,IAAI,EAAE;QAAEd,cAAc;YAAEY,IAAIL,SAAS;QAAS;QAAGN,aAAa;IAAM;IACrG,MAAMC,wBAAwBtB,oBAAAA,CAAKmB,QAAQ,CAACX,MAAMc,qBAAqB,EAAE;QACvEC,iBAAiB;QACjBF,aAAa;IACf;IAEA,OAAO;QACLG;QACAI;QACAH;QACAT;QACAC,YAAY;YAAEY,MAAM;YAAOX,OAAO;YAASQ,mBAAmB;YAAOJ,uBAAuB;YAAQY,MAAM;QAAM;QAChHL;QACAX;QACAI;QACAI;QACAQ;IACF;AACF,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/useFieldControlProps.ts"],"sourcesContent":["'use client';\n\nimport 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"],"names":["useFieldContext_unstable","useFieldControlProps_unstable","props","options","getFieldControlProps","context","generatedControlId","hintId","labelFor","labelId","required","validationMessageId","validationState","id","supportsLabelFor","filter","Boolean","join","supportsRequired","supportsSize","size"],"mappings":"AAAA;;;;;;;;;;;;IAiEgBI,oBAAAA;;;iCAZAH;;;;8BAlDyB,iBAAiB;AAkDnD,SAASA,8BACdC,KAAa,EACbC,OAAkC;IAElC,OAAOC,yBAAqBJ,sCAAAA,KAA4BE,OAAOC;AACjE;AAOO,8BACLE,OAAsC,EACtCH,KAAa,EACbC,OAAkC;IAElC,IAAI,CAACE,SAAS;QACZ,OAAOH;IACT;IAEA,yDAAyD;IACzDA,QAAQ;QAAE,GAAGA,KAAK;IAAC;IAEnB,MAAM,EAAEI,kBAAkB,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,mBAAmB,EAAEC,eAAe,EAAE,GAAGP;IAE1G,IAAIC,oBAAoB;YACtBJ;;QAAAA,CAAAA,MAAAA,CAAAA,SAAAA,KAAAA,EAAMW,EAAAA,MAAAA,QAAAA,QAAAA,KAAAA,IAAAA,MAANX,OAAMW,EAAAA,GAAOP;IACf;IAEA,4GAA4G;IAC5G,6GAA6G;IAC7G,IAAIG,WAAY,EAACN,aAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAASW,gBAAAA,AAAgB,KAAIN,aAAaN,MAAMW,EAAAA,AAAC,GAAI;YACpEX,SAAM;;QAANA,CAAAA,IAAAA,CAAAA,UAAAA,KAAAA,CAAK,CAAC,kBAAA,kBAAA,AAAkB,MAAA,QAAA,MAAA,KAAA,IAAA,IAAxBA,OAAK,CAAC,gBAAkB,GAAKO;IAC/B;IAEA,wEAAwE;IACxE,+DAA+D;IAC/D,yFAAyF;IACzF,IAAIE,uBAAuBJ,QAAQ;QACjC,kFAAkF;QAClFL,KAAK,CAAC,mBAAmB,GAAG;YAACS;YAAqBJ;YAAQL,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,KAAO,CAAC,mBAAmB;SAAC,CAACa,MAAM,CAACC,SAASC,IAAI,CAAC;IAC9G;IAEA,IAAIL,oBAAoB,SAAS;YAC/BV,SAAM;;QAANA,CAAAA,KAAAA,CAAAA,UAAAA,KAAAA,CAAK,CAAC,eAAA,eAAA,AAAe,MAAA,QAAA,OAAA,KAAA,IAAA,KAArBA,OAAK,CAAC,aAAe,GAAK;IAC5B;IAEA,IAAIQ,UAAU;QACZ,IAAIP,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAASe,gBAAgB,EAAE;gBAC5BhB;;YAAD,CAAA,YAAA,CAACA,UAAAA,KAAAA,EAAiCQ,QAAAA,MAAAA,QAAAA,cAAAA,KAAAA,IAAAA,YAAjCR,QAAiCQ,QAAAA,GAAa;QACjD,OAAO;gBACLR,SAAM;;YAANA,CAAAA,KAAAA,WAAAA,KAAAA,CAAK,CAAC,gBAAA,gBAAA,AAAgB,MAAA,QAAA,OAAA,KAAA,IAAA,KAAtBA,OAAK,CAAC,cAAgB,GAAK;QAC7B;IACF;IAEA,oDAAoD;IACpD,IAAIC,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAASgB,YAAY,EAAE;YACxBjB;;QAAD,CAAA,QAAA,CAACA,UAAAA,KAAAA,EAA+CkB,IAAAA,MAAAA,QAAAA,UAAAA,KAAAA,IAAAA,QAA/ClB,QAA+CkB,IAAAA,GAASf,QAAQe,IAAI;IACvE;IAEA,OAAOlB;AACT"}
+{"version":3,"sources":["../src/contexts/useFieldControlProps.ts"],"sourcesContent":["'use client';\n\nimport 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 * Implementation of useFieldControlProps_unstable.\n * Split out so it can be used directly in renderField_unstable.\n *\n * @internal\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"],"names":["useFieldContext_unstable","useFieldControlProps_unstable","props","options","getFieldControlProps","context","generatedControlId","hintId","labelFor","labelId","required","validationMessageId","validationState","id","supportsLabelFor","filter","Boolean","join","supportsRequired","supportsSize","size"],"mappings":"AAAA;;;;;;;;;;;;IAkEgBI,oBAAAA;;;iCAbAH;;;;8BAlDyB,iBAAiB;AAkDnD,SAASA,8BACdC,KAAa,EACbC,OAAkC;IAElC,OAAOC,yBAAqBJ,sCAAAA,KAA4BE,OAAOC;AACjE;AAQO,8BACLE,OAAsC,EACtCH,KAAa,EACbC,OAAkC;IAElC,IAAI,CAACE,SAAS;QACZ,OAAOH;IACT;IAEA,yDAAyD;IACzDA,QAAQ;QAAE,GAAGA,KAAK;IAAC;IAEnB,MAAM,EAAEI,kBAAkB,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,mBAAmB,EAAEC,eAAe,EAAE,GAAGP;IAE1G,IAAIC,oBAAoB;YACtBJ;;QAAAA,CAAAA,MAAAA,CAAAA,SAAAA,KAAAA,EAAMW,EAAAA,MAAAA,QAAAA,QAAAA,KAAAA,IAAAA,MAANX,OAAMW,EAAAA,GAAOP;IACf;IAEA,4GAA4G;IAC5G,6GAA6G;IAC7G,IAAIG,WAAY,EAACN,aAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAASW,gBAAAA,AAAgB,KAAIN,aAAaN,MAAMW,EAAAA,AAAC,GAAI;YACpEX,SAAM;;QAANA,CAAAA,IAAAA,CAAAA,UAAAA,KAAAA,CAAK,CAAC,kBAAA,kBAAA,AAAkB,MAAA,QAAA,MAAA,KAAA,IAAA,IAAxBA,OAAK,CAAC,gBAAkB,GAAKO;IAC/B;IAEA,wEAAwE;IACxE,+DAA+D;IAC/D,yFAAyF;IACzF,IAAIE,uBAAuBJ,QAAQ;QACjC,kFAAkF;QAClFL,KAAK,CAAC,mBAAmB,GAAG;YAACS;YAAqBJ;YAAQL,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,KAAO,CAAC,mBAAmB;SAAC,CAACa,MAAM,CAACC,SAASC,IAAI,CAAC;IAC9G;IAEA,IAAIL,oBAAoB,SAAS;YAC/BV,SAAM;;QAANA,CAAAA,KAAAA,CAAAA,UAAAA,KAAAA,CAAK,CAAC,eAAA,eAAA,AAAe,MAAA,QAAA,OAAA,KAAA,IAAA,KAArBA,OAAK,CAAC,aAAe,GAAK;IAC5B;IAEA,IAAIQ,UAAU;QACZ,IAAIP,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAASe,gBAAgB,EAAE;gBAC5BhB;;YAAD,CAAA,YAAA,CAACA,UAAAA,KAAAA,EAAiCQ,QAAAA,MAAAA,QAAAA,cAAAA,KAAAA,IAAAA,YAAjCR,QAAiCQ,QAAAA,GAAa;QACjD,OAAO;gBACLR,SAAM;;YAANA,CAAAA,KAAAA,WAAAA,KAAAA,CAAK,CAAC,gBAAA,gBAAA,AAAgB,MAAA,QAAA,OAAA,KAAA,IAAA,KAAtBA,OAAK,CAAC,cAAgB,GAAK;QAC7B;IACF;IAEA,oDAAoD;IACpD,IAAIC,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAASgB,YAAY,EAAE;YACxBjB;;QAAD,CAAA,QAAA,CAACA,UAAAA,KAAAA,EAA+CkB,IAAAA,MAAAA,QAAAA,UAAAA,KAAAA,IAAAA,QAA/ClB,QAA+CkB,IAAAA,GAASf,QAAQe,IAAI;IACvE;IAEA,OAAOlB;AACT"}

package/lib-commonjs/index.js

@@ -39,3 +39,6 @@ _export(exports, {
 });
 const _Field = require("./Field");
 const _index = require("./contexts/index");
+ // Experimental APIs - will be uncommented in the experimental release branch
+ // export { useFieldBase_unstable } from './Field';
+ // export type { FieldBaseProps, FieldBaseState } from './Field';

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"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"],"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","FieldContextProvider","useFieldContext_unstable","useFieldContextValues_unstable","useFieldControlProps_unstable"],"mappings":";;;;;;;;;;;IAASA;2BAAK;;IAUZK;0CAAoB;;;eAVNJ,sBAAe;;;eAAEC,2BAAoB;;;eAYnDK,qCAA8B;;;eAD9BD,+BAAwB;;;eAExBE,oCAA6B;;;eAbwBL,8BAAuB;;;eAAEC,wBAAiB;;;uBAAQ,UAAU;uBAc5G,mBAAmB"}
+{"version":3,"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// Experimental APIs - will be uncommented in the experimental release branch\n// export { useFieldBase_unstable } from './Field';\n// export type { FieldBaseProps, FieldBaseState } from './Field';\n"],"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","FieldContextProvider","useFieldContext_unstable","useFieldContextValues_unstable","useFieldControlProps_unstable"],"mappings":";;;;;;;;;;;IAASA;2BAAK;;;eAUZK,2BAAoB;;;eAVNJ,sBAAe;;;eAAEC,2BAAoB;;kCAYrB;eAA9BK;;;eADAD,+BAAwB;;;eAExBE,oCAA6B;;;eAbwBL,8BAAuB;;qBAAmB;eAAjBC;;;uBAAyB,UAAU;uBAc5G,mBAAmB;CAG1B,6EAA6E;CAC7E,mDAAmD;CACnD,iEAAiE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-field",
-  "version": "9.4.16",
+  "version": "9.5.0",
   "description": "Fluent UI Field components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -15,7 +15,7 @@
     "@fluentui/react-context-selector": "^9.2.15",
     "@fluentui/react-icons": "^2.0.245",
     "@fluentui/react-jsx-runtime": "^9.4.1",
-    "@fluentui/react-label": "^9.3.15",
+    "@fluentui/react-label": "^9.4.0",
     "@fluentui/react-shared-contexts": "^9.26.2",
     "@fluentui/react-theme": "^9.2.1",
     "@fluentui/react-utilities": "^9.26.2",