@fluentui/react-field 9.4.16 → 9.5.1

package/CHANGELOG.md

@@ -1,12 +1,35 @@
 # 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 Thu, 23 Apr 2026 11:59:22 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.5.1)
+
+Thu, 23 Apr 2026 11:59:22 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.5.0..@fluentui/react-field_v9.5.1)
+
+### Patches
+
+- fix: add missing base hook export ([PR #35972](https://github.com/microsoft/fluentui/pull/35972) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.2.16 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-label to v9.4.1 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+
+## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.5.0)
+
+Wed, 01 Apr 2026 15:52:40 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/dist/index.d.ts

@@ -1,14 +1,19 @@
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
+import type { DistributiveOmit } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
-import { Label } from '@fluentui/react-label';
+import type { Label } from '@fluentui/react-label';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
 export declare const Field: ForwardRefComponent<FieldProps>;
 
+export declare type FieldBaseProps = DistributiveOmit<FieldProps, 'orientation' | 'size'>;
+
+export declare type FieldBaseState = DistributiveOmit<FieldState, 'orientation' | 'size'>;
+
 export declare const fieldClassNames: SlotClassNames<FieldSlots>;
 
 export declare const FieldContextProvider: React_2.Provider<Readonly<Pick<FieldState, "required" | "size" | "orientation" | "validationState" | "generatedControlId"> & {
@@ -158,7 +163,7 @@ export declare type FieldState = ComponentState<Required<FieldSlots>> & Required
 /**
  * Render the final JSX of Field
  */
-export declare const renderField_unstable: (state: FieldState, contextValues: FieldContextValues) => JSXElement;
+export declare const renderField_unstable: (state: FieldBaseState, contextValues: FieldContextValues) => JSXElement;
 
 /**
  * Create the state required to render Field.
@@ -171,6 +176,15 @@ export declare const renderField_unstable: (state: FieldState, contextValues: Fi
  */
 export declare const useField_unstable: (props: FieldProps, ref: React_2.Ref<HTMLDivElement>) => FieldState;
 
+/**
+ * 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 declare const useFieldBase_unstable: (props: FieldBaseProps, ref: React_2.Ref<HTMLDivElement>) => FieldBaseState;
+
 export declare const useFieldContext_unstable: () => FieldContextValue | undefined;
 
 /**

package/lib/Field.js

@@ -1 +1 @@
-export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './components/Field/index';
+export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable, useFieldBase_unstable } from './components/Field/index';

package/lib/Field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Field.ts"],"sourcesContent":["export type {\n  FieldContextValue,\n  FieldContextValues,\n  FieldControlProps,\n  FieldProps,\n  FieldSlots,\n  FieldState,\n} from './components/Field/index';\nexport {\n  Field,\n  fieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n} from './components/Field/index';\n"],"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable"],"mappings":"AAQA,SACEA,KAAK,EACLC,eAAe,EACfC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,QACZ,2BAA2B"}
+{"version":3,"sources":["../src/Field.ts"],"sourcesContent":["export type {\n  FieldContextValue,\n  FieldContextValues,\n  FieldControlProps,\n  FieldProps,\n  FieldSlots,\n  FieldState,\n  FieldBaseProps,\n  FieldBaseState,\n} from './components/Field/index';\nexport {\n  Field,\n  fieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n  useFieldBase_unstable,\n} from './components/Field/index';\n"],"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","useFieldBase_unstable"],"mappings":"AAUA,SACEA,KAAK,EACLC,eAAe,EACfC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,EACjBC,qBAAqB,QAChB,2BAA2B"}

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

@@ -1 +1 @@
-import * as React from 'react';
+export { };

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 type * as React from 'react';\nimport type { 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":[],"mappings":"AAkIA,WAEE"}

package/lib/components/Field/index.js

@@ -1,4 +1,5 @@
 export { Field } from './Field';
 export { renderField_unstable } from './renderField';
 export { useField_unstable } from './useField';
+export { useFieldBase_unstable } from './useFieldBase';
 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 } from './useField';\nexport { useFieldBase_unstable } from './useFieldBase';\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,QAAQ,aAAa;AAC/C,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,eAAe,EAAEC,uBAAuB,QAAQ,0BAA0B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Field/renderField.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } 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): JSXElement => {\n  assertSlots<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      <state.root>\n        {state.label && <state.label />}\n        {children}\n        {state.validationMessage && (\n          <state.validationMessage>\n            {state.validationMessageIcon && <state.validationMessageIcon />}\n            {state.validationMessage.children}\n          </state.validationMessage>\n        )}\n\n        {state.hint && <state.hint />}\n      </state.root>\n    </FieldContextProvider>\n  );\n};\n"],"names":["assertSlots","FieldContextProvider","getFieldControlProps","renderField_unstable","state","contextValues","children","field","value","root","label","validationMessage","validationMessageIcon","hint"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,oBAAoB,EAAEC,oBAAoB,QAAQ,uBAAuB;AAGlF;;CAEC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAmBC;IACtDL,YAAwBI;IAExB,IAAI,EAAEE,QAAQ,EAAE,GAAGF;IACnB,IAAI,OAAOE,aAAa,YAAY;QAClCA,WAAWA,SAASJ,qBAAqBG,cAAcE,KAAK,KAAK,CAAC;IACpE;IAEA,qBACE,KAACN;QAAqBO,KAAK,EAAEH,0BAAAA,oCAAAA,cAAeE,KAAK;kBAC/C,cAAA,MAACH,MAAMK,IAAI;;gBACRL,MAAMM,KAAK,kBAAI,KAACN,MAAMM,KAAK;gBAC3BJ;gBACAF,MAAMO,iBAAiB,kBACtB,MAACP,MAAMO,iBAAiB;;wBACrBP,MAAMQ,qBAAqB,kBAAI,KAACR,MAAMQ,qBAAqB;wBAC3DR,MAAMO,iBAAiB,CAACL,QAAQ;;;gBAIpCF,MAAMS,IAAI,kBAAI,KAACT,MAAMS,IAAI;;;;AAIlC,EAAE"}
+{"version":3,"sources":["../src/components/Field/renderField.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { FieldContextProvider, getFieldControlProps } from '../../contexts/index';\nimport type { FieldContextValues, FieldSlots, FieldBaseState } from './Field.types';\n\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = (state: FieldBaseState, contextValues: FieldContextValues): JSXElement => {\n  assertSlots<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      <state.root>\n        {state.label && <state.label />}\n        {children}\n        {state.validationMessage && (\n          <state.validationMessage>\n            {state.validationMessageIcon && <state.validationMessageIcon />}\n            {state.validationMessage.children}\n          </state.validationMessage>\n        )}\n\n        {state.hint && <state.hint />}\n      </state.root>\n    </FieldContextProvider>\n  );\n};\n"],"names":["assertSlots","FieldContextProvider","getFieldControlProps","renderField_unstable","state","contextValues","children","field","value","root","label","validationMessage","validationMessageIcon","hint"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,oBAAoB,EAAEC,oBAAoB,QAAQ,uBAAuB;AAGlF;;CAEC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAuBC;IAC1DL,YAAwBI;IAExB,IAAI,EAAEE,QAAQ,EAAE,GAAGF;IACnB,IAAI,OAAOE,aAAa,YAAY;QAClCA,WAAWA,SAASJ,qBAAqBG,cAAcE,KAAK,KAAK,CAAC;IACpE;IAEA,qBACE,KAACN;QAAqBO,KAAK,EAAEH,0BAAAA,oCAAAA,cAAeE,KAAK;kBAC/C,cAAA,MAACH,MAAMK,IAAI;;gBACRL,MAAMM,KAAK,kBAAI,KAACN,MAAMM,KAAK;gBAC3BJ;gBACAF,MAAMO,iBAAiB,kBACtB,MAACP,MAAMO,iBAAiB;;wBACrBP,MAAMQ,qBAAqB,kBAAI,KAACR,MAAMQ,qBAAqB;wBAC3DR,MAAMO,iBAAiB,CAACL,QAAQ;;;gBAIpCF,MAAMS,IAAI,kBAAI,KAACT,MAAMS,IAAI;;;;AAIlC,EAAE"}

package/lib/components/Field/useField.js

@@ -1,7 +1,9 @@
+'use client';
 import * as React from 'react';
 import { CheckmarkCircle12Filled, DiamondDismiss12Filled, Warning12Filled } from '@fluentui/react-icons';
 import { Label } from '@fluentui/react-label';
-import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
+import { slot } from '@fluentui/react-utilities';
+import { useFieldBase_unstable } from './useFieldBase';
 const validationMessageIcons = {
     error: /*#__PURE__*/ React.createElement(DiamondDismiss12Filled, null),
     warning: /*#__PURE__*/ React.createElement(Warning12Filled, null),
@@ -17,65 +19,31 @@ 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 baseId = useId('field-');
-    const generatedControlId = baseId + '__control';
-    const root = slot.always(getIntrinsicElementProps('div', {
-        ...props,
-        ref
-    }, /*excludedPropNames:*/ [
-        'children'
-    ]), {
-        elementType: 'div'
-    });
-    const label = slot.optional(props.label, {
-        defaultProps: {
-            htmlFor: generatedControlId,
-            id: baseId + '__label',
-            required,
-            size
-        },
-        elementType: Label
-    });
-    const validationMessage = slot.optional(props.validationMessage, {
-        defaultProps: {
-            id: baseId + '__validationMessage',
-            role: validationState === 'error' || validationState === 'warning' ? 'alert' : undefined
-        },
-        elementType: 'div'
-    });
-    const hint = slot.optional(props.hint, {
-        defaultProps: {
-            id: baseId + '__hint'
-        },
-        elementType: 'div'
-    });
-    const defaultIcon = validationMessageIcons[validationState];
-    const validationMessageIcon = slot.optional(props.validationMessageIcon, {
-        renderByDefault: !!defaultIcon,
-        defaultProps: {
-            children: defaultIcon
-        },
-        elementType: 'span'
-    });
+    const { orientation = 'vertical', size = 'medium', ...fieldProps } = props;
+    const state = useFieldBase_unstable(fieldProps, ref);
+    const defaultIcon = validationMessageIcons[state.validationState];
     return {
-        children,
-        generatedControlId,
-        orientation,
-        required,
-        size,
-        validationState,
+        ...state,
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
         components: {
-            root: 'div',
-            label: Label,
-            validationMessage: 'div',
-            validationMessageIcon: 'span',
-            hint: 'div'
+            ...state.components,
+            label: Label
         },
-        root,
-        label,
-        validationMessageIcon,
-        validationMessage,
-        hint
+        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
     };
 };

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 { slot } from '@fluentui/react-utilities';\nimport type { FieldProps, FieldState } from './Field.types';\nimport { useFieldBase_unstable } from './useFieldBase';\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"],"names":["React","CheckmarkCircle12Filled","DiamondDismiss12Filled","Warning12Filled","Label","slot","useFieldBase_unstable","validationMessageIcons","error","warning","success","none","undefined","useField_unstable","props","ref","orientation","size","fieldProps","state","defaultIcon","validationState","components","label","optional","defaultProps","elementType","validationMessageIcon","renderByDefault","children"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,EAAEC,sBAAsB,EAAEC,eAAe,QAAQ,wBAAwB;AACzG,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,IAAI,QAAQ,4BAA4B;AAEjD,SAASC,qBAAqB,QAAQ,iBAAiB;AAEvD,MAAMC,yBAAyB;IAC7BC,qBAAO,oBAACN;IACRO,uBAAS,oBAACN;IACVO,uBAAS,oBAACT;IACVU,MAAMC;AACR;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC;IACnD,MAAM,EAAEC,cAAc,UAAU,EAAEC,OAAO,QAAQ,EAAE,GAAGC,YAAY,GAAGJ;IACrE,MAAMK,QAAQb,sBAAsBY,YAAYH;IAEhD,MAAMK,cAAcb,sBAAsB,CAACY,MAAME,eAAe,CAAC;IAEjE,OAAO;QACL,GAAGF,KAAK;QACR,4DAA4D;QAC5DG,YAAY;YAAE,GAAGH,MAAMG,UAAU;YAAEC,OAAOnB;QAAM;QAChDmB,OAAOlB,KAAKmB,QAAQ,CAACV,MAAMS,KAAK,EAAE;YAChCE,cAAc;gBAAER;gBAAM,GAAGE,MAAMI,KAAK;YAAC;YACrCG,aAAatB;QACf;QACAuB,uBAAuBtB,KAAKmB,QAAQ,CAACV,MAAMa,qBAAqB,EAAE;YAChEC,iBAAiB,CAAC,CAACR;YACnBK,cAAc;gBAAEI,UAAUT;YAAY;YACtCM,aAAa;QACf;QACAV;QACAC;IACF;AACF,EAAE"}

package/lib/components/Field/useFieldBase.js

@@ -0,0 +1,63 @@
+import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
+/**
+ * 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', {
+        ...props,
+        ref
+    }, /*excludedPropNames:*/ [
+        'children'
+    ]), {
+        elementType: 'div'
+    });
+    const label = slot.optional(props.label, {
+        defaultProps: {
+            htmlFor: generatedControlId,
+            id: baseId + '__label',
+            required
+        },
+        elementType: 'label'
+    });
+    const validationMessage = slot.optional(props.validationMessage, {
+        defaultProps: {
+            id: baseId + '__validationMessage',
+            role: validationState === 'error' || validationState === 'warning' ? 'alert' : undefined
+        },
+        elementType: 'div'
+    });
+    const hint = slot.optional(props.hint, {
+        defaultProps: {
+            id: baseId + '__hint'
+        },
+        elementType: 'div'
+    });
+    const validationMessageIcon = slot.optional(props.validationMessageIcon, {
+        renderByDefault: false,
+        elementType: 'span'
+    });
+    return {
+        children,
+        generatedControlId,
+        required,
+        validationState,
+        components: {
+            root: 'div',
+            label: 'label',
+            validationMessage: 'div',
+            validationMessageIcon: 'span',
+            hint: 'div'
+        },
+        root,
+        label,
+        validationMessageIcon,
+        validationMessage,
+        hint
+    };
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Field/useFieldBase.tsx"],"sourcesContent":["import type * as React from 'react';\n\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { FieldBaseProps, FieldBaseState } from './Field.types';\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":["getIntrinsicElementProps","useId","slot","useFieldBase_unstable","props","ref","children","required","validationState","validationMessage","baseId","generatedControlId","root","always","elementType","label","optional","defaultProps","htmlFor","id","role","undefined","hint","validationMessageIcon","renderByDefault","components"],"mappings":"AAEA,SAASA,wBAAwB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAGlF;;;;;;CAMC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAuBC;IAC3D,MAAM,EAAEC,QAAQ,EAAEC,WAAW,KAAK,EAAEC,kBAAkBJ,MAAMK,iBAAiB,GAAG,UAAU,MAAM,EAAE,GAAGL;IAErG,MAAMM,SAAST,MAAM;IACrB,MAAMU,qBAAqBD,SAAS;IAEpC,MAAME,OAAOV,KAAKW,MAAM,CAACb,yBAAyB,OAAO;QAAE,GAAGI,KAAK;QAAEC;IAAI,GAAG,oBAAoB,GAAG;QAAC;KAAW,GAAG;QAChHS,aAAa;IACf;IACA,MAAMC,QAAQb,KAAKc,QAAQ,CAACZ,MAAMW,KAAK,EAAE;QACvCE,cAAc;YAAEC,SAASP;YAAoBQ,IAAIT,SAAS;YAAWH;QAAS;QAC9EO,aAAa;IACf;IACA,MAAML,oBAAoBP,KAAKc,QAAQ,CAACZ,MAAMK,iBAAiB,EAAE;QAC/DQ,cAAc;YACZE,IAAIT,SAAS;YACbU,MAAMZ,oBAAoB,WAAWA,oBAAoB,YAAY,UAAUa;QACjF;QACAP,aAAa;IACf;IACA,MAAMQ,OAAOpB,KAAKc,QAAQ,CAACZ,MAAMkB,IAAI,EAAE;QAAEL,cAAc;YAAEE,IAAIT,SAAS;QAAS;QAAGI,aAAa;IAAM;IACrG,MAAMS,wBAAwBrB,KAAKc,QAAQ,CAACZ,MAAMmB,qBAAqB,EAAE;QACvEC,iBAAiB;QACjBV,aAAa;IACf;IAEA,OAAO;QACLR;QACAK;QACAJ;QACAC;QACAiB,YAAY;YAAEb,MAAM;YAAOG,OAAO;YAASN,mBAAmB;YAAOc,uBAAuB;YAAQD,MAAM;QAAM;QAChHV;QACAG;QACAQ;QACAd;QACAa;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 { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable, useFieldBase_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 {\n  Field,\n  fieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n  useFieldBase_unstable,\n} from './Field';\nexport type {\n  FieldContextValue,\n  FieldContextValues,\n  FieldControlProps,\n  FieldProps,\n  FieldSlots,\n  FieldState,\n  FieldBaseProps,\n  FieldBaseState,\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","useFieldBase_unstable","FieldContextProvider","useFieldContext_unstable","useFieldContextValues_unstable","useFieldControlProps_unstable"],"mappings":"AAAA,SACEA,KAAK,EACLC,eAAe,EACfC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,EACjBC,qBAAqB,QAChB,UAAU;AAWjB,SACEC,oBAAoB,EACpBC,wBAAwB,EACxBC,8BAA8B,EAC9BC,6BAA6B,QACxB,mBAAmB;CAG1B,6EAA6E;CAC7E,mDAAmD;CACnD,iEAAiE"}

package/lib-commonjs/Field.js

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

package/lib-commonjs/Field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Field.ts"],"sourcesContent":["export type {\n  FieldContextValue,\n  FieldContextValues,\n  FieldControlProps,\n  FieldProps,\n  FieldSlots,\n  FieldState,\n} from './components/Field/index';\nexport {\n  Field,\n  fieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n} from './components/Field/index';\n"],"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable"],"mappings":";;;;;;;;;;;;eASEA,YAAK;;;eACLC,sBAAe;;;eACfC,2BAAoB;;;eACpBC,8BAAuB;;;eACvBC,wBAAiB;;;uBACZ,2BAA2B"}
+{"version":3,"sources":["../src/Field.ts"],"sourcesContent":["export type {\n  FieldContextValue,\n  FieldContextValues,\n  FieldControlProps,\n  FieldProps,\n  FieldSlots,\n  FieldState,\n  FieldBaseProps,\n  FieldBaseState,\n} from './components/Field/index';\nexport {\n  Field,\n  fieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n  useFieldBase_unstable,\n} from './components/Field/index';\n"],"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","useFieldBase_unstable"],"mappings":";;;;;;;;;;;;eAWEA,YAAK;;;eACLC,sBAAe;;;eACfC,2BAAoB;;;eAGpBG,4BAAqB;;;eAFrBF,8BAAuB;;;eACvBC,wBAAiB;;;uBAEZ,2BAA2B"}

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

@@ -2,5 +2,3 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

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 type * as React from 'react';\nimport type { 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":[],"mappings":""}

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

@@ -18,6 +18,9 @@ _export(exports, {
     renderField_unstable: function() {
         return _renderField.renderField_unstable;
     },
+    useFieldBase_unstable: function() {
+        return _useFieldBase.useFieldBase_unstable;
+    },
     useFieldStyles_unstable: function() {
         return _useFieldStylesstyles.useFieldStyles_unstable;
     },
@@ -28,4 +31,5 @@ _export(exports, {
 const _Field = require("./Field");
 const _renderField = require("./renderField");
 const _useField = require("./useField");
+const _useFieldBase = require("./useFieldBase");
 const _useFieldStylesstyles = require("./useFieldStyles.styles");

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 } from './useField';\nexport { useFieldBase_unstable } from './useFieldBase';\nexport { fieldClassNames, useFieldStyles_unstable } from './useFieldStyles.styles';\n"],"names":["Field","renderField_unstable","useField_unstable","useFieldBase_unstable","fieldClassNames","useFieldStyles_unstable"],"mappings":";;;;;;;;;;;;eAUSA,YAAK;;;eAILI,qCAAe;;;eAHfH,iCAAoB;;;eAEpBE,mCAAqB;;;eACJE,6CAAuB;;;eAFxCH,2BAAiB;;;uBAFJ,UAAU;6BACK,gBAAgB;0BACnB,aAAa;8BACT,iBAAiB;sCACE,0BAA0B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Field/renderField.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } 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): JSXElement => {\n  assertSlots<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      <state.root>\n        {state.label && <state.label />}\n        {children}\n        {state.validationMessage && (\n          <state.validationMessage>\n            {state.validationMessageIcon && <state.validationMessageIcon />}\n            {state.validationMessage.children}\n          </state.validationMessage>\n        )}\n\n        {state.hint && <state.hint />}\n      </state.root>\n    </FieldContextProvider>\n  );\n};\n"],"names":["assertSlots","FieldContextProvider","getFieldControlProps","renderField_unstable","state","contextValues","children","field","value","root","label","validationMessage","validationMessageIcon","hint"],"mappings":";;;;+BAWaG;;;;;;4BAVb,iCAAiD;gCAErB,4BAA4B;uBAEG,uBAAuB;AAM3E,6BAA6B,CAACC,OAAmBC;QACtDL,2BAAAA,EAAwBI;IAExB,IAAI,EAAEE,QAAQ,EAAE,GAAGF;IACnB,IAAI,OAAOE,aAAa,YAAY;QAClCA,WAAWA,aAASJ,2BAAAA,EAAqBG,cAAcE,KAAK,KAAK,CAAC;IACpE;IAEA,OAAA,WAAA,OACE,eAAA,EAACN,2BAAAA,EAAAA;QAAqBO,KAAK,EAAEH,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAeE,KAAK;kBAC/C,WAAA,OAAA,gBAAA,EAACH,MAAMK,IAAI,EAAA;;gBACRL,MAAMM,KAAK,IAAA,WAAA,GAAI,mBAAA,EAACN,MAAMM,KAAK,EAAA,CAAA;gBAC3BJ;gBACAF,MAAMO,iBAAiB,IAAA,WAAA,OACtB,gBAAA,EAACP,MAAMO,iBAAiB,EAAA;;wBACrBP,MAAMQ,qBAAqB,IAAA,WAAA,OAAI,eAAA,EAACR,MAAMQ,qBAAqB,EAAA,CAAA;wBAC3DR,MAAMO,iBAAiB,CAACL,QAAQ;;;gBAIpCF,MAAMS,IAAI,IAAA,WAAA,OAAI,eAAA,EAACT,MAAMS,IAAI,EAAA,CAAA;;;;AAIlC,EAAE"}
+{"version":3,"sources":["../src/components/Field/renderField.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { FieldContextProvider, getFieldControlProps } from '../../contexts/index';\nimport type { FieldContextValues, FieldSlots, FieldBaseState } from './Field.types';\n\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = (state: FieldBaseState, contextValues: FieldContextValues): JSXElement => {\n  assertSlots<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      <state.root>\n        {state.label && <state.label />}\n        {children}\n        {state.validationMessage && (\n          <state.validationMessage>\n            {state.validationMessageIcon && <state.validationMessageIcon />}\n            {state.validationMessage.children}\n          </state.validationMessage>\n        )}\n\n        {state.hint && <state.hint />}\n      </state.root>\n    </FieldContextProvider>\n  );\n};\n"],"names":["assertSlots","FieldContextProvider","getFieldControlProps","renderField_unstable","state","contextValues","children","field","value","root","label","validationMessage","validationMessageIcon","hint"],"mappings":";;;;+BAWaG;;;;;;4BAVb,iCAAiD;gCAErB,4BAA4B;uBAEG,uBAAuB;AAM3E,6BAA6B,CAACC,OAAuBC;QAC1DL,2BAAAA,EAAwBI;IAExB,IAAI,EAAEE,QAAQ,EAAE,GAAGF;IACnB,IAAI,OAAOE,aAAa,YAAY;QAClCA,WAAWA,aAASJ,2BAAAA,EAAqBG,cAAcE,KAAK,KAAK,CAAC;IACpE;IAEA,OAAA,WAAA,OACE,eAAA,EAACN,2BAAAA,EAAAA;QAAqBO,KAAK,EAAEH,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAeE,KAAK;kBAC/C,WAAA,OAAA,gBAAA,EAACH,MAAMK,IAAI,EAAA;;gBACRL,MAAMM,KAAK,IAAA,WAAA,GAAI,mBAAA,EAACN,MAAMM,KAAK,EAAA,CAAA;gBAC3BJ;gBACAF,MAAMO,iBAAiB,IAAA,WAAA,OACtB,gBAAA,EAACP,MAAMO,iBAAiB,EAAA;;wBACrBP,MAAMQ,qBAAqB,IAAA,WAAA,OAAI,eAAA,EAACR,MAAMQ,qBAAqB,EAAA,CAAA;wBAC3DR,MAAMO,iBAAiB,CAACL,QAAQ;;;gBAIpCF,MAAMS,IAAI,IAAA,WAAA,OAAI,eAAA,EAACT,MAAMS,IAAI,EAAA,CAAA;;;;AAIlC,EAAE"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -13,6 +14,7 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reacticons = require("@fluentui/react-icons");
 const _reactlabel = require("@fluentui/react-label");
 const _reactutilities = require("@fluentui/react-utilities");
+const _useFieldBase = require("./useFieldBase");
 const validationMessageIcons = {
     error: /*#__PURE__*/ _react.createElement(_reacticons.DiamondDismiss12Filled, null),
     warning: /*#__PURE__*/ _react.createElement(_reacticons.Warning12Filled, null),
@@ -20,65 +22,31 @@ const validationMessageIcons = {
     none: undefined
 };
 const useField_unstable = (props, ref)=>{
-    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 = _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
-        ...props,
-        ref
-    }, /*excludedPropNames:*/ [
-        'children'
-    ]), {
-        elementType: 'div'
-    });
-    const label = _reactutilities.slot.optional(props.label, {
-        defaultProps: {
-            htmlFor: generatedControlId,
-            id: baseId + '__label',
-            required,
-            size
-        },
-        elementType: _reactlabel.Label
-    });
-    const validationMessage = _reactutilities.slot.optional(props.validationMessage, {
-        defaultProps: {
-            id: baseId + '__validationMessage',
-            role: validationState === 'error' || validationState === 'warning' ? 'alert' : undefined
-        },
-        elementType: 'div'
-    });
-    const hint = _reactutilities.slot.optional(props.hint, {
-        defaultProps: {
-            id: baseId + '__hint'
-        },
-        elementType: 'div'
-    });
-    const defaultIcon = validationMessageIcons[validationState];
-    const validationMessageIcon = _reactutilities.slot.optional(props.validationMessageIcon, {
-        renderByDefault: !!defaultIcon,
-        defaultProps: {
-            children: defaultIcon
-        },
-        elementType: 'span'
-    });
+    const { orientation = 'vertical', size = 'medium', ...fieldProps } = props;
+    const state = (0, _useFieldBase.useFieldBase_unstable)(fieldProps, ref);
+    const defaultIcon = validationMessageIcons[state.validationState];
     return {
-        children,
-        generatedControlId,
-        orientation,
-        required,
-        size,
-        validationState,
+        ...state,
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
         components: {
-            root: 'div',
-            label: _reactlabel.Label,
-            validationMessage: 'div',
-            validationMessageIcon: 'span',
-            hint: 'div'
+            ...state.components,
+            label: _reactlabel.Label
         },
-        root,
-        label,
-        validationMessageIcon,
-        validationMessage,
-        hint
+        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
     };
 };

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 { slot } from '@fluentui/react-utilities';\nimport type { FieldProps, FieldState } from './Field.types';\nimport { useFieldBase_unstable } from './useFieldBase';\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"],"names":["React","CheckmarkCircle12Filled","DiamondDismiss12Filled","Warning12Filled","Label","slot","useFieldBase_unstable","validationMessageIcons","error","warning","success","none","undefined","useField_unstable","props","ref","orientation","size","fieldProps","state","defaultIcon","validationState","components","label","optional","defaultProps","elementType","validationMessageIcon","renderByDefault","children"],"mappings":"AAAA;;;;;+BA0Baa;;;;;;;iEAxBU,QAAQ;4BAEkD,wBAAwB;4BACnF,wBAAwB;gCACzB,4BAA4B;8BAEX,iBAAiB;AAEvD,MAAMN,yBAAyB;IAC7BC,OAAAA,WAAAA,GAAO,OAAA,aAAA,CAACN,kCAAAA,EAAAA;IACRO,SAAAA,WAAAA,GAAS,OAAA,aAAA,CAACN,2BAAAA,EAAAA;IACVO,SAAAA,WAAAA,GAAS,OAAA,aAAA,CAACT,mCAAAA,EAAAA;IACVU,MAAMC;AACR;AAWO,0BAA0B,CAACE,OAAmBC;IACnD,MAAM,EAAEC,cAAc,UAAU,EAAEC,OAAO,QAAQ,EAAE,GAAGC,YAAY,GAAGJ;IACrE,MAAMK,YAAQb,mCAAAA,EAAsBY,YAAYH;IAEhD,MAAMK,cAAcb,sBAAsB,CAACY,MAAME,eAAe,CAAC;IAEjE,OAAO;QACL,GAAGF,KAAK;QACR,4DAA4D;QAC5DG,YAAY;YAAE,GAAGH,MAAMG,UAAU;YAAEC,OAAOnB,iBAAAA;QAAM;QAChDmB,OAAOlB,oBAAAA,CAAKmB,QAAQ,CAACV,MAAMS,KAAK,EAAE;YAChCE,cAAc;gBAAER;gBAAM,GAAGE,MAAMI,KAAK;YAAC;YACrCG,aAAatB,iBAAAA;QACf;QACAuB,uBAAuBtB,oBAAAA,CAAKmB,QAAQ,CAACV,MAAMa,qBAAqB,EAAE;YAChEC,iBAAiB,CAAC,CAACR;YACnBK,cAAc;gBAAEI,UAAUT;YAAY;YACtCM,aAAa;QACf;QACAV;QACAC;IACF;AACF,EAAE"}

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

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useFieldBase_unstable", {
+    enumerable: true,
+    get: function() {
+        return useFieldBase_unstable;
+    }
+});
+const _reactutilities = require("@fluentui/react-utilities");
+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', {
+        ...props,
+        ref
+    }, /*excludedPropNames:*/ [
+        'children'
+    ]), {
+        elementType: 'div'
+    });
+    const label = _reactutilities.slot.optional(props.label, {
+        defaultProps: {
+            htmlFor: generatedControlId,
+            id: baseId + '__label',
+            required
+        },
+        elementType: 'label'
+    });
+    const validationMessage = _reactutilities.slot.optional(props.validationMessage, {
+        defaultProps: {
+            id: baseId + '__validationMessage',
+            role: validationState === 'error' || validationState === 'warning' ? 'alert' : undefined
+        },
+        elementType: 'div'
+    });
+    const hint = _reactutilities.slot.optional(props.hint, {
+        defaultProps: {
+            id: baseId + '__hint'
+        },
+        elementType: 'div'
+    });
+    const validationMessageIcon = _reactutilities.slot.optional(props.validationMessageIcon, {
+        renderByDefault: false,
+        elementType: 'span'
+    });
+    return {
+        children,
+        generatedControlId,
+        required,
+        validationState,
+        components: {
+            root: 'div',
+            label: 'label',
+            validationMessage: 'div',
+            validationMessageIcon: 'span',
+            hint: 'div'
+        },
+        root,
+        label,
+        validationMessageIcon,
+        validationMessage,
+        hint
+    };
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Field/useFieldBase.tsx"],"sourcesContent":["import type * as React from 'react';\n\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { FieldBaseProps, FieldBaseState } from './Field.types';\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":["getIntrinsicElementProps","useId","slot","useFieldBase_unstable","props","ref","children","required","validationState","validationMessage","baseId","generatedControlId","root","always","elementType","label","optional","defaultProps","htmlFor","id","role","undefined","hint","validationMessageIcon","renderByDefault","components"],"mappings":";;;;+BAYaG;;;;;;gCAVyC,4BAA4B;AAU3E,8BAA8B,CAACC,OAAuBC;IAC3D,MAAM,EAAEC,QAAQ,EAAEC,WAAW,KAAK,EAAEC,kBAAkBJ,MAAMK,iBAAiB,GAAG,UAAU,MAAM,EAAE,GAAGL;IAErG,MAAMM,aAAST,qBAAAA,EAAM;IACrB,MAAMU,qBAAqBD,SAAS;IAEpC,MAAME,OAAOV,oBAAAA,CAAKW,MAAM,KAACb,wCAAAA,EAAyB,OAAO;QAAE,GAAGI,KAAK;QAAEC;IAAI,GAAG,oBAAoB,GAAG;QAAC;KAAW,GAAG;QAChHS,aAAa;IACf;IACA,MAAMC,QAAQb,oBAAAA,CAAKc,QAAQ,CAACZ,MAAMW,KAAK,EAAE;QACvCE,cAAc;YAAEC,SAASP;YAAoBQ,IAAIT,SAAS;YAAWH;QAAS;QAC9EO,aAAa;IACf;IACA,MAAML,oBAAoBP,oBAAAA,CAAKc,QAAQ,CAACZ,MAAMK,iBAAiB,EAAE;QAC/DQ,cAAc;YACZE,IAAIT,SAAS;YACbU,MAAMZ,oBAAoB,WAAWA,oBAAoB,YAAY,UAAUa;QACjF;QACAP,aAAa;IACf;IACA,MAAMQ,OAAOpB,oBAAAA,CAAKc,QAAQ,CAACZ,MAAMkB,IAAI,EAAE;QAAEL,cAAc;YAAEE,IAAIT,SAAS;QAAS;QAAGI,aAAa;IAAM;IACrG,MAAMS,wBAAwBrB,oBAAAA,CAAKc,QAAQ,CAACZ,MAAMmB,qBAAqB,EAAE;QACvEC,iBAAiB;QACjBV,aAAa;IACf;IAEA,OAAO;QACLR;QACAK;QACAJ;QACAC;QACAiB,YAAY;YAAEb,MAAM;YAAOG,OAAO;YAASN,mBAAmB;YAAOc,uBAAuB;YAAQD,MAAM;QAAM;QAChHV;QACAG;QACAQ;QACAd;QACAa;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

@@ -21,6 +21,9 @@ _export(exports, {
     renderField_unstable: function() {
         return _Field.renderField_unstable;
     },
+    useFieldBase_unstable: function() {
+        return _Field.useFieldBase_unstable;
+    },
     useFieldContextValues_unstable: function() {
         return _index.useFieldContextValues_unstable;
     },
@@ -39,3 +42,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 {\n  Field,\n  fieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n  useFieldBase_unstable,\n} from './Field';\nexport type {\n  FieldContextValue,\n  FieldContextValues,\n  FieldControlProps,\n  FieldProps,\n  FieldSlots,\n  FieldState,\n  FieldBaseProps,\n  FieldBaseState,\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","useFieldBase_unstable","FieldContextProvider","useFieldContext_unstable","useFieldContextValues_unstable","useFieldControlProps_unstable"],"mappings":";;;;;;;;;;;IACEA;2BAAK;;;eAkBLM,2BAAoB;;;eAjBpBL,sBAAe;;;eACfC,2BAAoB;;;eAGpBG,4BAAqB;;IAerBG;oDAA8B;;;eAD9BD,+BAAwB;;IAExBE,6BAA6B;;;;eAlB7BN,8BAAuB;;;eACvBC,wBAAiB;;;uBAEZ,UAAU;uBAgBV,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.1",
   "description": "Fluent UI Field components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,13 +12,13 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui/react-context-selector": "^9.2.15",
+    "@fluentui/react-context-selector": "^9.2.16",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "^9.4.1",
-    "@fluentui/react-label": "^9.3.15",
+    "@fluentui/react-jsx-runtime": "^9.4.2",
+    "@fluentui/react-label": "^9.4.1",
     "@fluentui/react-shared-contexts": "^9.26.2",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-utilities": "^9.26.2",
+    "@fluentui/react-utilities": "^9.26.3",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },