@fluentui/react-field 9.0.0-alpha.1 → 9.0.0-alpha.10

package/CHANGELOG.md

@@ -1,12 +1,174 @@
 # Change Log - @fluentui/react-field
 
-This log was last generated on Thu, 15 Sep 2022 09:44:25 GMT and should not be manually modified.
+This log was last generated on Mon, 05 Dec 2022 18:25:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.10)
+
+Mon, 05 Dec 2022 18:25:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.9..@fluentui/react-field_v9.0.0-alpha.10)
+
+### Changes
+
+- fix: Field should use aria-describedby instead of aria-errormessage ([PR #25580](https://github.com/microsoft/fluentui/pull/25580) by behowell@microsoft.com)
+- chore: Migrate to new package structure. ([PR #25817](https://github.com/microsoft/fluentui/pull/25817) by tristan.watanabe@gmail.com)
+- Bump @fluentui/react-label to v9.0.12 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+- Bump @fluentui/react-theme to v9.1.3 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+
+## [9.0.0-alpha.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.9)
+
+Thu, 17 Nov 2022 23:05:39 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.8..@fluentui/react-field_v9.0.0-alpha.9)
+
+### Changes
+
+- Bump @fluentui/react-context-selector to v9.1.2 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+- Bump @fluentui/react-label to v9.0.11 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+- Bump @fluentui/react-utilities to v9.2.2 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+
+## [9.0.0-alpha.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.8)
+
+Fri, 11 Nov 2022 14:58:03 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.7..@fluentui/react-field_v9.0.0-alpha.8)
+
+### Changes
+
+- fix: create valid export maps ([PR #25558](https://github.com/microsoft/fluentui/pull/25558) by martinhochel@microsoft.com)
+- chore: Clean up Field tests and story imports in preparation of moving to individual packages ([PR #25594](https://github.com/microsoft/fluentui/pull/25594) by behowell@microsoft.com)
+- chore: Move individual field components into their respective packages, and out of @fluentui/react-field ([PR #25593](https://github.com/microsoft/fluentui/pull/25593) by behowell@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.1.1 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
+- Bump @fluentui/react-label to v9.0.10 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
+- Bump @fluentui/react-theme to v9.1.2 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
+- Bump @fluentui/react-utilities to v9.2.1 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.18 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
+
+## [9.0.0-alpha.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.7)
+
+Wed, 02 Nov 2022 11:57:52 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.6..@fluentui/react-field_v9.0.0-alpha.7)
+
+### Changes
+
+- chore: Update Griffel to latest version ([PR #25412](https://github.com/microsoft/fluentui/pull/25412) by olfedias@microsoft.com)
+- Bump @fluentui/react-checkbox to v9.0.11 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
+- Bump @fluentui/react-combobox to v9.0.0-beta.14 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.0 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
+- Bump @fluentui/react-input to v9.2.4 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
+- Bump @fluentui/react-label to v9.0.9 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
+- Bump @fluentui/react-progress to v9.0.0-alpha.4 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
+- Bump @fluentui/react-radio to v9.0.10 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
+- Bump @fluentui/react-select to v9.0.0-beta.13 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
+- Bump @fluentui/react-slider to v9.0.9 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
+- Bump @fluentui/react-spinbutton to v9.0.7 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
+- Bump @fluentui/react-switch to v9.0.10 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
+- Bump @fluentui/react-textarea to v9.1.4 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
+- Bump @fluentui/react-utilities to v9.2.0 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.17 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
+
+## [9.0.0-alpha.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.6)
+
+Tue, 25 Oct 2022 00:35:32 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.5..@fluentui/react-field_v9.0.0-alpha.6)
+
+### Changes
+
+- feat: Add support for validationState to ProgressField ([PR #25253](https://github.com/microsoft/fluentui/pull/25253) by behowell@microsoft.com)
+- Bump @fluentui/react-checkbox to v9.0.10 ([PR #25363](https://github.com/microsoft/fluentui/pull/25363) by beachball)
+- Bump @fluentui/react-input to v9.2.3 ([PR #25363](https://github.com/microsoft/fluentui/pull/25363) by beachball)
+- Bump @fluentui/react-progress to v9.0.0-alpha.3 ([PR #25363](https://github.com/microsoft/fluentui/pull/25363) by beachball)
+- Bump @fluentui/react-spinbutton to v9.0.6 ([PR #25363](https://github.com/microsoft/fluentui/pull/25363) by beachball)
+
+## [9.0.0-alpha.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.5)
+
+Thu, 20 Oct 2022 08:39:33 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.4..@fluentui/react-field_v9.0.0-alpha.5)
+
+### Changes
+
+- chore: Bump peer deps to support React 18 ([PR #24972](https://github.com/microsoft/fluentui/pull/24972) by mgodbolt@microsoft.com)
+- chore: Update Griffel to latest version ([PR #25212](https://github.com/microsoft/fluentui/pull/25212) by olfedias@microsoft.com)
+- Bump @fluentui/react-checkbox to v9.0.9 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
+- Bump @fluentui/react-combobox to v9.0.0-beta.13 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
+- Bump @fluentui/react-context-selector to v9.0.5 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
+- Bump @fluentui/react-input to v9.2.2 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
+- Bump @fluentui/react-label to v9.0.8 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
+- Bump @fluentui/react-progress to v9.0.0-alpha.2 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
+- Bump @fluentui/react-radio to v9.0.9 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
+- Bump @fluentui/react-select to v9.0.0-beta.12 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
+- Bump @fluentui/react-slider to v9.0.8 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
+- Bump @fluentui/react-spinbutton to v9.0.5 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
+- Bump @fluentui/react-switch to v9.0.9 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
+- Bump @fluentui/react-textarea to v9.1.3 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
+- Bump @fluentui/react-theme to v9.1.1 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
+- Bump @fluentui/react-utilities to v9.1.2 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.16 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
+
+## [9.0.0-alpha.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.4)
+
+Thu, 13 Oct 2022 11:02:50 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.3..@fluentui/react-field_v9.0.0-alpha.4)
+
+### Changes
+
+- Add ProgressField to @fluentui/react-field ([PR #25103](https://github.com/microsoft/fluentui/pull/25103) by ololubek@microsoft.com)
+- fix: CheckboxField to set a generated ID on the input, to match the label's htmlFor ([PR #25079](https://github.com/microsoft/fluentui/pull/25079) by behowell@microsoft.com)
+- chore: Update Griffel to latest version ([PR #25075](https://github.com/microsoft/fluentui/pull/25075) by olfedias@microsoft.com)
+- fix: Field should have block layout, not inline ([PR #25126](https://github.com/microsoft/fluentui/pull/25126) by behowell@microsoft.com)
+- Bump @fluentui/react-checkbox to v9.0.8 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
+- Bump @fluentui/react-combobox to v9.0.0-beta.12 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
+- Bump @fluentui/react-context-selector to v9.0.4 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
+- Bump @fluentui/react-input to v9.2.1 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
+- Bump @fluentui/react-label to v9.0.7 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
+- Bump @fluentui/react-progress to v9.0.0-alpha.1 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
+- Bump @fluentui/react-radio to v9.0.8 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
+- Bump @fluentui/react-select to v9.0.0-beta.11 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
+- Bump @fluentui/react-slider to v9.0.7 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
+- Bump @fluentui/react-spinbutton to v9.0.4 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
+- Bump @fluentui/react-switch to v9.0.8 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
+- Bump @fluentui/react-textarea to v9.1.2 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
+- Bump @fluentui/react-utilities to v9.1.1 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.15 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
+
+## [9.0.0-alpha.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.3)
+
+Mon, 03 Oct 2022 22:24:37 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.2..@fluentui/react-field_v9.0.0-alpha.3)
+
+### Changes
+
+- fix: Remove SwitchField's labelPosition prop, as it has no effect ([PR #24876](https://github.com/microsoft/fluentui/pull/24876) by behowell@microsoft.com)
+- Bump @fluentui/react-checkbox to v9.0.7 ([PR #25055](https://github.com/microsoft/fluentui/pull/25055) by beachball)
+- Bump @fluentui/react-combobox to v9.0.0-beta.11 ([PR #25055](https://github.com/microsoft/fluentui/pull/25055) by beachball)
+- Bump @fluentui/react-input to v9.2.0 ([PR #25055](https://github.com/microsoft/fluentui/pull/25055) by beachball)
+- Bump @fluentui/react-radio to v9.0.7 ([PR #25055](https://github.com/microsoft/fluentui/pull/25055) by beachball)
+- Bump @fluentui/react-slider to v9.0.6 ([PR #25055](https://github.com/microsoft/fluentui/pull/25055) by beachball)
+- Bump @fluentui/react-spinbutton to v9.0.3 ([PR #25055](https://github.com/microsoft/fluentui/pull/25055) by beachball)
+- Bump @fluentui/react-switch to v9.0.7 ([PR #25055](https://github.com/microsoft/fluentui/pull/25055) by beachball)
+- Bump @fluentui/react-textarea to v9.1.1 ([PR #25055](https://github.com/microsoft/fluentui/pull/25055) by beachball)
+
+## [9.0.0-alpha.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.2)
+
+Tue, 20 Sep 2022 20:55:45 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.1..@fluentui/react-field_v9.0.0-alpha.2)
+
+### Changes
+
+- Bump @fluentui/react-checkbox to v9.0.6 ([PR #24869](https://github.com/microsoft/fluentui/pull/24869) by beachball)
+- Bump @fluentui/react-combobox to v9.0.0-beta.10 ([PR #24869](https://github.com/microsoft/fluentui/pull/24869) by beachball)
+- Bump @fluentui/react-input to v9.1.1 ([PR #24869](https://github.com/microsoft/fluentui/pull/24869) by beachball)
+- Bump @fluentui/react-label to v9.0.6 ([PR #24869](https://github.com/microsoft/fluentui/pull/24869) by beachball)
+- Bump @fluentui/react-radio to v9.0.6 ([PR #24869](https://github.com/microsoft/fluentui/pull/24869) by beachball)
+- Bump @fluentui/react-select to v9.0.0-beta.10 ([PR #24869](https://github.com/microsoft/fluentui/pull/24869) by beachball)
+- Bump @fluentui/react-slider to v9.0.5 ([PR #24869](https://github.com/microsoft/fluentui/pull/24869) by beachball)
+- Bump @fluentui/react-spinbutton to v9.0.2 ([PR #24869](https://github.com/microsoft/fluentui/pull/24869) by beachball)
+- Bump @fluentui/react-switch to v9.0.6 ([PR #24869](https://github.com/microsoft/fluentui/pull/24869) by beachball)
+- Bump @fluentui/react-textarea to v9.1.0 ([PR #24869](https://github.com/microsoft/fluentui/pull/24869) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14 ([PR #24869](https://github.com/microsoft/fluentui/pull/24869) by beachball)
+
 ## [9.0.0-alpha.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.1)
 
-Thu, 15 Sep 2022 09:44:25 GMT 
+Thu, 15 Sep 2022 09:49:04 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.0..@fluentui/react-field_v9.0.0-alpha.1)
 
 ### Changes

package/dist/index.d.ts

@@ -1,59 +1,18 @@
 /// <reference types="react" />
 
-import { Checkbox } from '@fluentui/react-checkbox';
-import type { CheckboxProps } from '@fluentui/react-checkbox';
-import { Combobox } from '@fluentui/react-combobox';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
-import { ForwardRefComponent } from '@fluentui/react-utilities';
-import { Input } from '@fluentui/react-input';
 import { Label } from '@fluentui/react-label';
-import { RadioGroup } from '@fluentui/react-radio';
 import * as React_2 from 'react';
-import { Select } from '@fluentui/react-select';
-import { Slider } from '@fluentui/react-slider';
 import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { SlotRenderFunction } from '@fluentui/react-utilities';
 import type { SlotShorthandValue } from '@fluentui/react-utilities';
-import { SpinButton } from '@fluentui/react-spinbutton';
-import { Switch } from '@fluentui/react-switch';
-import { Textarea } from '@fluentui/react-textarea';
-
-export declare const CheckboxField: ForwardRefComponent<CheckboxFieldProps>;
-
-export declare const checkboxFieldClassNames: SlotClassNames<FieldSlots<FieldComponent>>;
-
-export declare type CheckboxFieldProps = Omit<FieldProps<typeof Checkbox>, 'label'> & {
-    /**
-     * The Checkbox's label.
-     */
-    label?: CheckboxProps['label'];
-    /**
-     * The label for the CheckboxField, which appears above or before the Checkbox, depending on the `orientation` prop.
-     * It is recommended to only set the `label` prop, and not `fieldLabel`.
-     */
-    fieldLabel?: FieldProps<typeof Checkbox>['label'];
-};
-
-export declare const ComboboxField: ForwardRefComponent<ComboboxFieldProps>;
-
-export declare const comboboxFieldClassNames: SlotClassNames<FieldSlots<FieldComponent>>;
-
-export declare type ComboboxFieldProps = FieldProps<typeof Combobox>;
-
-/**
- * The minimum requirement for a component used by Field.
- *
- * Note: the use of VoidFunctionComponent means that component is not *required* to have a children prop,
- * but it is still allowed to have a children prop.
- */
-declare type FieldComponent = React_2.VoidFunctionComponent<Pick<React_2.HTMLAttributes<HTMLElement>, 'id' | 'className' | 'style' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-errormessage'>>;
 
 /**
  * Configuration parameters for a Field class, passed to useField_unstable
  */
-export declare type FieldConfig<T extends FieldComponent> = {
+export declare type FieldConfig<T extends FieldControl> = {
     /**
      * The underlying input component that this field is wrapping.
      */
@@ -72,12 +31,26 @@ export declare type FieldConfig<T extends FieldComponent> = {
      * @default htmlFor
      */
     labelConnection?: 'htmlFor' | 'aria-labelledby';
+    /**
+     * Should the aria-invalid attribute be set when validationState="error".
+     *
+     * @default true
+     */
+    ariaInvalidOnError?: boolean;
 };
 
+/**
+ * The minimum requirement for a component used by Field.
+ *
+ * Note: the use of VoidFunctionComponent means that component is not *required* to have a children prop,
+ * but it is still allowed to have a children prop.
+ */
+export declare type FieldControl = React_2.VoidFunctionComponent<Pick<React_2.HTMLAttributes<HTMLElement>, 'id' | 'className' | 'style' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid'>>;
+
 /**
  * Field Props
  */
-export declare type FieldProps<T extends FieldComponent> = ComponentProps<Partial<FieldSlots<T>>, 'control'> & {
+export declare type FieldProps<T extends FieldControl> = ComponentProps<Partial<FieldSlots<T>>, 'control'> & {
     /**
      * The orientation of the label relative to the field component.
      * This only affects the label, and not the validationMessage or hint (which always appear below the field component).
@@ -101,7 +74,11 @@ export declare type FieldProps<T extends FieldComponent> = ComponentProps<Partia
  * This allows Field to forward the required and size props to the label if the underlying component supports them,
  * but doesn't add them to the public API of fields that don't support them.
  */
-declare type FieldPropsWithOptionalComponentProps<T extends FieldComponent> = FieldProps<T> & {
+declare type FieldPropsWithOptionalComponentProps<T extends FieldControl> = FieldProps<T> & {
+    /**
+     * A ref to the underlying control.
+     */
+    ref?: React_2.Ref<HTMLElement>;
     /**
      * Whether the field label should be marked as required.
      */
@@ -117,7 +94,7 @@ declare type FieldPropsWithOptionalComponentProps<T extends FieldComponent> = Fi
 /**
  * Slots added by Field
  */
-export declare type FieldSlots<T extends FieldComponent> = {
+export declare type FieldSlots<T extends FieldControl> = {
     root: NonNullable<Slot<'div'>>;
     /**
      * The underlying component wrapped by this field.
@@ -130,7 +107,7 @@ export declare type FieldSlots<T extends FieldComponent> = {
     /**
      * A message about the validation state. The appearance of the `validationMessage` depends on `validationState`.
      */
-    validationMessage?: Slot<'span'>;
+    validationMessage?: Slot<'div'>;
     /**
      * The icon associated with the `validationMessage`. If the `validationState` prop is set, this will default to an
      * icon corresponding to that state.
@@ -141,46 +118,22 @@ export declare type FieldSlots<T extends FieldComponent> = {
     /**
      * Additional hint text below the field.
      */
-    hint?: Slot<'span'>;
+    hint?: Slot<'div'>;
 };
 
 /**
  * State used in rendering Field
  */
-export declare type FieldState<T extends FieldComponent> = ComponentState<Required<FieldSlots<T>>> & Pick<FieldProps<T>, 'orientation' | 'validationState'> & {
+export declare type FieldState<T extends FieldControl> = ComponentState<Required<FieldSlots<T>>> & Pick<FieldProps<T>, 'orientation' | 'validationState'> & {
     classNames: SlotClassNames<FieldSlots<T>>;
 };
 
-export declare const getFieldClassNames: (name: string) => SlotClassNames<FieldSlots<FieldComponent>>;
-
-export declare const InputField: ForwardRefComponent<InputFieldProps>;
-
-export declare const inputFieldClassNames: SlotClassNames<FieldSlots<FieldComponent>>;
-
-export declare type InputFieldProps = FieldProps<typeof Input>;
-
-export declare const RadioGroupField: ForwardRefComponent<RadioGroupFieldProps>;
-
-export declare const radioGroupFieldClassNames: SlotClassNames<FieldSlots<FieldComponent>>;
-
-export declare type RadioGroupFieldProps = FieldProps<typeof RadioGroup>;
+export declare const getFieldClassNames: (name: string) => SlotClassNames<FieldSlots<FieldControl>>;
 
 /**
  * Render the final JSX of Field
  */
-export declare const renderField_unstable: <T extends FieldComponent>(state: FieldState<T>) => JSX.Element;
-
-export declare const SelectField: ForwardRefComponent<SelectFieldProps>;
-
-export declare const selectFieldClassNames: SlotClassNames<FieldSlots<FieldComponent>>;
-
-export declare type SelectFieldProps = FieldProps<typeof Select>;
-
-export declare const SliderField: ForwardRefComponent<SliderFieldProps>;
-
-export declare const sliderFieldClassNames: SlotClassNames<FieldSlots<FieldComponent>>;
-
-export declare type SliderFieldProps = FieldProps<typeof Slider>;
+export declare const renderField_unstable: <T extends FieldControl>(state: FieldState<T>) => JSX.Element;
 
 declare type SlotComponent<Type extends React_2.ComponentType | React_2.VoidFunctionComponent> = WithSlotShorthandValue<Type extends React_2.ComponentType<infer Props> ? WithSlotRenderFunction<Props extends {
     children?: unknown;
@@ -188,24 +141,6 @@ declare type SlotComponent<Type extends React_2.ComponentType | React_2.VoidFunc
     children?: never;
 }> : never>;
 
-export declare const SpinButtonField: ForwardRefComponent<SpinButtonFieldProps>;
-
-export declare const spinButtonFieldClassNames: SlotClassNames<FieldSlots<FieldComponent>>;
-
-export declare type SpinButtonFieldProps = FieldProps<typeof SpinButton>;
-
-export declare const SwitchField: ForwardRefComponent<SwitchFieldProps>;
-
-export declare const switchFieldClassNames: SlotClassNames<FieldSlots<FieldComponent>>;
-
-export declare type SwitchFieldProps = FieldProps<typeof Switch>;
-
-export declare const TextareaField: ForwardRefComponent<TextareaFieldProps>;
-
-export declare const textareaFieldClassNames: SlotClassNames<FieldSlots<FieldComponent>>;
-
-export declare type TextareaFieldProps = FieldProps<typeof Textarea>;
-
 /**
  * Create the state required to render Field.
  *
@@ -216,12 +151,12 @@ export declare type TextareaFieldProps = FieldProps<typeof Textarea>;
  * @param ref - Ref to the control slot (primary slot)
  * @param params - Configuration parameters for this Field
  */
-export declare const useField_unstable: <T extends FieldComponent>(props: FieldPropsWithOptionalComponentProps<T>, ref: React_2.Ref<HTMLElement>, params: FieldConfig<T>) => FieldState<T>;
+export declare const useField_unstable: <T extends FieldControl>(props: FieldPropsWithOptionalComponentProps<T>, ref: React_2.Ref<HTMLElement>, params: FieldConfig<T>) => FieldState<T>;
 
 /**
  * Apply styling to the Field slots based on the state
  */
-export declare const useFieldStyles_unstable: <T extends FieldComponent>(state: FieldState<T>) => void;
+export declare const useFieldStyles_unstable: <T extends FieldControl>(state: FieldState<T>) => void;
 
 declare type WithSlotRenderFunction<Props extends {
     children?: unknown;

package/lib/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sourceRoot":"../src/","sources":["Field.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './components/Field/index';\n"]}
+{"version":3,"file":"Field.js","sourceRoot":"../src/","sources":["packages/react-components/react-field/src/Field.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './components/Field/index';\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Field.types.js","sourceRoot":"../src/","sources":["components/Field/Field.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot, SlotClassNames } from '@fluentui/react-utilities';\nimport type { SlotComponent } from './SlotComponent.types';\n\n/**\n * The minimum requirement for a component used by Field.\n *\n * Note: the use of VoidFunctionComponent means that component is not *required* to have a children prop,\n * but it is still allowed to have a children prop.\n */\nexport type FieldComponent = React.VoidFunctionComponent<\n  Pick<\n    React.HTMLAttributes<HTMLElement>,\n    'id' | 'className' | 'style' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-errormessage'\n  >\n>;\n\n/**\n * Slots added by Field\n */\nexport type FieldSlots<T extends FieldComponent> = {\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * The underlying component wrapped by this field.\n   */\n  control: SlotComponent<T>;\n\n  /**\n   * The label associated with the field.\n   */\n  label?: Slot<typeof Label>;\n\n  /**\n   * A message about the validation state. The appearance of the `validationMessage` depends on `validationState`.\n   */\n  validationMessage?: Slot<'span'>;\n\n  /**\n   * The icon associated with the `validationMessage`. If the `validationState` prop is set, this will default to an\n   * icon corresponding to that state.\n   *\n   * This will only be displayed if `validationMessage` is set.\n   */\n  validationMessageIcon?: Slot<'span'>;\n\n  /**\n   * Additional hint text below the field.\n   */\n  hint?: Slot<'span'>;\n};\n\n/**\n * Field Props\n */\nexport type FieldProps<T extends FieldComponent> = ComponentProps<Partial<FieldSlots<T>>, 'control'> & {\n  /**\n   * The orientation of the label relative to the field component.\n   * This only affects the label, and not the validationMessage or hint (which always appear below the field component).\n   *\n   * @default vertical\n   */\n  orientation?: 'vertical' | 'horizontal';\n\n  /**\n   * The `validationState` affects the color of the `validationMessage`, the `validationMessageIcon`, and for some\n   * field components, an `validationState=\"error\"` causes the border to become red.\n   *\n   * @default undefined\n   */\n  validationState?: 'error' | 'warning' | 'success';\n};\n\n/**\n * FieldProps plus extra optional props that are supported by useField_unstable, but not required to be part of the\n * API of every Field component.\n *\n * This allows Field to forward the required and size props to the label if the underlying component supports them,\n * but doesn't add them to the public API of fields that don't support them.\n */\nexport type FieldPropsWithOptionalComponentProps<T extends FieldComponent> = FieldProps<T> & {\n  /**\n   * Whether the field label should be marked as required.\n   */\n  required?: boolean;\n\n  /**\n   * Size of the field label.\n   *\n   * Number sizes will be ignored, but are allowed because the HTML `<input>` element has a prop `size?: number`.\n   */\n  size?: 'small' | 'medium' | 'large' | number;\n};\n\n/**\n * Configuration parameters for a Field class, passed to useField_unstable\n */\nexport type FieldConfig<T extends FieldComponent> = {\n  /**\n   * The underlying input component that this field is wrapping.\n   */\n  component: T;\n\n  /**\n   * Class names for this component, created by `getFieldClassNames`.\n   */\n  classNames: SlotClassNames<FieldSlots<T>>;\n\n  /**\n   * How the label be connected to the control.\n   * * htmlFor - Set the Label's htmlFor prop to the component's ID (and generate an ID if not provided).\n   *   This is the preferred method for components that use the underlying <input> tag.\n   * * aria-labelledby - Set the component's aria-labelledby prop to the Label's ID. Use this for components\n   *   that are not directly <input> elements (such as RadioGroup).\n   *\n   * @default htmlFor\n   */\n  labelConnection?: 'htmlFor' | 'aria-labelledby';\n};\n\n/**\n * State used in rendering Field\n */\nexport type FieldState<T extends FieldComponent> = ComponentState<Required<FieldSlots<T>>> &\n  Pick<FieldProps<T>, 'orientation' | 'validationState'> & {\n    classNames: SlotClassNames<FieldSlots<T>>;\n  };\n"]}
+{"version":3,"file":"Field.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-field/src/components/Field/Field.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot, SlotClassNames } from '@fluentui/react-utilities';\nimport type { SlotComponent } from './SlotComponent.types';\n\n/**\n * The minimum requirement for a component used by Field.\n *\n * Note: the use of VoidFunctionComponent means that component is not *required* to have a children prop,\n * but it is still allowed to have a children prop.\n */\nexport type FieldControl = React.VoidFunctionComponent<\n  Pick<\n    React.HTMLAttributes<HTMLElement>,\n    'id' | 'className' | 'style' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid'\n  >\n>;\n\n/**\n * Slots added by Field\n */\nexport type FieldSlots<T extends FieldControl> = {\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * The underlying component wrapped by this field.\n   */\n  control: SlotComponent<T>;\n\n  /**\n   * The label associated with the field.\n   */\n  label?: Slot<typeof Label>;\n\n  /**\n   * A message about the validation state. The appearance of the `validationMessage` depends on `validationState`.\n   */\n  validationMessage?: Slot<'div'>;\n\n  /**\n   * The icon associated with the `validationMessage`. If the `validationState` prop is set, this will default to an\n   * icon corresponding to that state.\n   *\n   * This will only be displayed if `validationMessage` is set.\n   */\n  validationMessageIcon?: Slot<'span'>;\n\n  /**\n   * Additional hint text below the field.\n   */\n  hint?: Slot<'div'>;\n};\n\n/**\n * Field Props\n */\nexport type FieldProps<T extends FieldControl> = ComponentProps<Partial<FieldSlots<T>>, 'control'> & {\n  /**\n   * The orientation of the label relative to the field component.\n   * This only affects the label, and not the validationMessage or hint (which always appear below the field component).\n   *\n   * @default vertical\n   */\n  orientation?: 'vertical' | 'horizontal';\n\n  /**\n   * The `validationState` affects the color of the `validationMessage`, the `validationMessageIcon`, and for some\n   * field components, an `validationState=\"error\"` causes the border to become red.\n   *\n   * @default undefined\n   */\n  validationState?: 'error' | 'warning' | 'success';\n};\n\n/**\n * FieldProps plus extra optional props that are supported by useField_unstable, but not required to be part of the\n * API of every Field component.\n *\n * This allows Field to forward the required and size props to the label if the underlying component supports them,\n * but doesn't add them to the public API of fields that don't support them.\n */\nexport type FieldPropsWithOptionalComponentProps<T extends FieldControl> = FieldProps<T> & {\n  /**\n   * A ref to the underlying control.\n   */\n  ref?: React.Ref<HTMLElement>;\n\n  /**\n   * Whether the field label should be marked as required.\n   */\n  required?: boolean;\n\n  /**\n   * Size of the field label.\n   *\n   * Number sizes will be ignored, but are allowed because the HTML `<input>` element has a prop `size?: number`.\n   */\n  size?: 'small' | 'medium' | 'large' | number;\n};\n\n/**\n * Configuration parameters for a Field class, passed to useField_unstable\n */\nexport type FieldConfig<T extends FieldControl> = {\n  /**\n   * The underlying input component that this field is wrapping.\n   */\n  component: T;\n\n  /**\n   * Class names for this component, created by `getFieldClassNames`.\n   */\n  classNames: SlotClassNames<FieldSlots<T>>;\n\n  /**\n   * How the label be connected to the control.\n   * * htmlFor - Set the Label's htmlFor prop to the component's ID (and generate an ID if not provided).\n   *   This is the preferred method for components that use the underlying <input> tag.\n   * * aria-labelledby - Set the component's aria-labelledby prop to the Label's ID. Use this for components\n   *   that are not directly <input> elements (such as RadioGroup).\n   *\n   * @default htmlFor\n   */\n  labelConnection?: 'htmlFor' | 'aria-labelledby';\n\n  /**\n   * Should the aria-invalid attribute be set when validationState=\"error\".\n   *\n   * @default true\n   */\n  ariaInvalidOnError?: boolean;\n};\n\n/**\n * State used in rendering Field\n */\nexport type FieldState<T extends FieldControl> = ComponentState<Required<FieldSlots<T>>> &\n  Pick<FieldProps<T>, 'orientation' | 'validationState'> & {\n    classNames: SlotClassNames<FieldSlots<T>>;\n  };\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"SlotComponent.types.js","sourceRoot":"../src/","sources":["components/Field/SlotComponent.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { SlotShorthandValue, SlotRenderFunction } from '@fluentui/react-utilities';\n\n//\n// TEMPORARY definition of the SlotComponent type, until it is available from react-utilities\n//\n\nexport type SlotComponent<Type extends React.ComponentType | React.VoidFunctionComponent> = WithSlotShorthandValue<\n  Type extends React.ComponentType<infer Props>\n    ? // If this is a VoidFunctionComponent that doesn't allow children, add { children?: never }\n      WithSlotRenderFunction<Props extends { children?: unknown } ? Props : Props & { children?: never }>\n    : never\n>;\n\n//\n// TEMPORARY copied versions of the non-exported helper types from react-utilities\n//\n\ntype WithSlotShorthandValue<Props extends { children?: unknown }> =\n  | Props\n  | Extract<SlotShorthandValue, Props['children']>;\n\ntype WithSlotRenderFunction<Props extends { children?: unknown }> = Props & {\n  children?: Props['children'] | SlotRenderFunction<Props>;\n};\n"]}
+{"version":3,"file":"SlotComponent.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-field/src/components/Field/SlotComponent.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { SlotShorthandValue, SlotRenderFunction } from '@fluentui/react-utilities';\n\n//\n// TEMPORARY definition of the SlotComponent type, until it is available from react-utilities\n//\n\nexport type SlotComponent<Type extends React.ComponentType | React.VoidFunctionComponent> = WithSlotShorthandValue<\n  Type extends React.ComponentType<infer Props>\n    ? // If this is a VoidFunctionComponent that doesn't allow children, add { children?: never }\n      WithSlotRenderFunction<Props extends { children?: unknown } ? Props : Props & { children?: never }>\n    : never\n>;\n\n//\n// TEMPORARY copied versions of the non-exported helper types from react-utilities\n//\n\ntype WithSlotShorthandValue<Props extends { children?: unknown }> =\n  | Props\n  | Extract<SlotShorthandValue, Props['children']>;\n\ntype WithSlotRenderFunction<Props extends { children?: unknown }> = Props & {\n  children?: Props['children'] | SlotRenderFunction<Props>;\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Field/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './Field.types';\nexport * from './renderField';\nexport * from './useField';\nexport * from './useFieldStyles';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-field/src/components/Field/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './Field.types';\nexport * from './renderField';\nexport * from './useField';\nexport * from './useFieldStyles';\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Field/renderField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,oBAAoB,GAA8B,KAA3B,IAAmD;EACrF,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAA6B,KAA7B,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,KAAN,iBAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADlB,EAGG,KAAK,CAAC,OAAN,iBAAiB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAM,SAAS,CAAC;EAAhB,CAAd,CAHpB,EAIG,KAAK,CAAC,iBAAN,iBACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,iBAAP,EAAwB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAxB,EACG,KAAK,CAAC,qBAAN,iBAA+B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,qBAAP,EAA4B,EAAA,GAAK,SAAS,CAAC;EAAf,CAA5B,CADlC,EAEG,SAAS,CAAC,iBAAV,CAA4B,QAF/B,CALJ,EAUG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAVjB,CADF;AAcD,CAjBM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FieldComponent, FieldSlots, FieldState } from './Field.types';\n\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = <T extends FieldComponent>(state: FieldState<T>) => {\n  const { slots, slotProps } = getSlots<FieldSlots<FieldComponent>>(state as FieldState<FieldComponent>);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.label && <slots.label {...slotProps.label} />}\n      {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}\n      {slots.control && <slots.control {...(slotProps.control as any)} />}\n      {slots.validationMessage && (\n        <slots.validationMessage {...slotProps.validationMessage}>\n          {slots.validationMessageIcon && <slots.validationMessageIcon {...slotProps.validationMessageIcon} />}\n          {slotProps.validationMessage.children}\n        </slots.validationMessage>\n      )}\n      {slots.hint && <slots.hint {...slotProps.hint} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-field/src/components/Field/renderField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,oBAAoB,GAA4B,KAAzB,IAAiD;EACnF,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAA2B,KAA3B,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,KAAN,iBAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADlB,EAGG,KAAK,CAAC,OAAN,iBAAiB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAM,SAAS,CAAC;EAAhB,CAAd,CAHpB,EAIG,KAAK,CAAC,iBAAN,iBACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,iBAAP,EAAwB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAxB,EACG,KAAK,CAAC,qBAAN,iBAA+B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,qBAAP,EAA4B,EAAA,GAAK,SAAS,CAAC;EAAf,CAA5B,CADlC,EAEG,SAAS,CAAC,iBAAV,CAA4B,QAF/B,CALJ,EAUG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAVjB,CADF;AAcD,CAjBM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FieldControl, FieldSlots, FieldState } from './Field.types';\n\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = <T extends FieldControl>(state: FieldState<T>) => {\n  const { slots, slotProps } = getSlots<FieldSlots<FieldControl>>(state as FieldState<FieldControl>);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.label && <slots.label {...slotProps.label} />}\n      {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}\n      {slots.control && <slots.control {...(slotProps.control as any)} />}\n      {slots.validationMessage && (\n        <slots.validationMessage {...slotProps.validationMessage}>\n          {slots.validationMessageIcon && <slots.validationMessageIcon {...slotProps.validationMessageIcon} />}\n          {slotProps.validationMessage.children}\n        </slots.validationMessage>\n      )}\n      {slots.hint && <slots.hint {...slotProps.hint} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Field/useField.js

@@ -7,17 +7,10 @@ const validationMessageIcons = {
   warning: /*#__PURE__*/React.createElement(Warning12Filled, null),
   success: /*#__PURE__*/React.createElement(CheckmarkCircle12Filled, null)
 };
-/**
- * Merge two possibly-undefined IDs for aria-describedby. If both IDs are defined, combines
- * them into a string separated by a space. Otherwise, returns just the defined ID (if any).
- */
-
-const mergeAriaDescribedBy = (a, b) => a && b ? `${a} ${b}` : a || b;
 /**
  * Partition the props used by the Field itself, from the props that are passed to the underlying field component.
  */
 
-
 export const getPartitionedFieldProps = props => {
   const {
     className,
@@ -58,12 +51,18 @@ export const getPartitionedFieldProps = props => {
  */
 
 export const useField_unstable = (props, ref, params) => {
+  var _a, _b, _c;
+
   const [fieldProps, controlProps] = getPartitionedFieldProps(props);
-  const baseId = useId('field-');
   const {
     orientation = 'vertical',
     validationState
   } = fieldProps;
+  const {
+    labelConnection = 'htmlFor',
+    ariaInvalidOnError = true
+  } = params;
+  const baseId = useId('field-');
   const root = resolveShorthand(fieldProps.root, {
     required: true,
     defaultProps: getNativeElementProps('div', fieldProps)
@@ -72,7 +71,7 @@ export const useField_unstable = (props, ref, params) => {
     defaultProps: {
       id: baseId + '__label',
       required: controlProps.required,
-      size: typeof controlProps.size === 'string' ? controlProps.size : undefined // htmlFor is set below
+      size: typeof controlProps.size === 'string' ? controlProps.size : undefined // htmlFor is handled below
 
     }
   });
@@ -91,28 +90,34 @@ export const useField_unstable = (props, ref, params) => {
     defaultProps: {
       children: validationState ? validationMessageIcons[validationState] : undefined
     }
-  });
-  const {
-    labelConnection = 'htmlFor'
-  } = params;
-  const hasError = validationState === 'error';
+  }); // Hook up aria props on the control
+
+  if (label && labelConnection === 'aria-labelledby') {
+    (_a = controlProps['aria-labelledby']) !== null && _a !== void 0 ? _a : controlProps['aria-labelledby'] = label.id;
+  }
+
+  if (validationMessage || hint) {
+    // The control is described by the validation message, or hint, or both
+    // We also preserve and append any aria-describedby supplied by the user
+    // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933
+    controlProps['aria-describedby'] = [validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.id, hint === null || hint === void 0 ? void 0 : hint.id, controlProps['aria-describedby']].filter(Boolean).join(' ');
+  }
+
+  if (validationState === 'error' && ariaInvalidOnError) {
+    (_b = controlProps['aria-invalid']) !== null && _b !== void 0 ? _b : controlProps['aria-invalid'] = true;
+  }
+
   const control = resolveShorthand(fieldProps.control, {
     required: true,
     defaultProps: {
       ref,
-      // Add a default ID only if required for label's htmlFor prop
-      id: label && labelConnection === 'htmlFor' ? baseId + '__control' : undefined,
-      // Add aria-labelledby only if not using the label's htmlFor
-      'aria-labelledby': labelConnection !== 'htmlFor' ? label === null || label === void 0 ? void 0 : label.id : undefined,
-      'aria-describedby': hasError ? hint === null || hint === void 0 ? void 0 : hint.id : mergeAriaDescribedBy(validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.id, hint === null || hint === void 0 ? void 0 : hint.id),
-      'aria-errormessage': hasError ? validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.id : undefined,
-      'aria-invalid': hasError ? true : undefined,
+      id: baseId + '__control',
       ...controlProps
     }
   });
 
-  if (labelConnection === 'htmlFor' && label && !label.htmlFor) {
-    label.htmlFor = control.id;
+  if (label && labelConnection === 'htmlFor') {
+    (_c = label.htmlFor) !== null && _c !== void 0 ? _c : label.htmlFor = control.id;
   }
 
   const state = {
@@ -123,9 +128,9 @@ export const useField_unstable = (props, ref, params) => {
       root: 'div',
       control: params.component,
       label: Label,
-      validationMessage: 'span',
+      validationMessage: 'div',
       validationMessageIcon: 'span',
-      hint: 'span'
+      hint: 'div'
     },
     root,
     control,

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Field/useField.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type {\n  FieldComponent,\n  FieldConfig,\n  FieldProps,\n  FieldPropsWithOptionalComponentProps,\n  FieldState,\n} from './Field.types';\n\nconst validationMessageIcons = {\n  error: <ErrorCircle12Filled />,\n  warning: <Warning12Filled />,\n  success: <CheckmarkCircle12Filled />,\n} as const;\n\n/**\n * Merge two possibly-undefined IDs for aria-describedby. If both IDs are defined, combines\n * them into a string separated by a space. Otherwise, returns just the defined ID (if any).\n */\nconst mergeAriaDescribedBy = (a?: string, b?: string) => (a && b ? `${a} ${b}` : a || b);\n\n/**\n * Partition the props used by the Field itself, from the props that are passed to the underlying field component.\n */\nexport const getPartitionedFieldProps = <Props extends FieldProps<FieldComponent>>(props: Props) => {\n  const {\n    className,\n    control,\n    hint,\n    label,\n    orientation,\n    root,\n    style,\n    validationMessage,\n    validationMessageIcon,\n    validationState,\n    ...restOfProps\n  } = props;\n\n  const fieldProps = {\n    className,\n    control,\n    hint,\n    label,\n    orientation,\n    root,\n    style,\n    validationMessage,\n    validationMessageIcon,\n    validationState,\n  };\n\n  return [fieldProps, restOfProps] as const;\n};\n\n/**\n * Create the state required to render Field.\n *\n * The returned state can be modified with hooks such as useFieldStyles_unstable,\n * before being passed to renderField_unstable.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the control slot (primary slot)\n * @param params - Configuration parameters for this Field\n */\nexport const useField_unstable = <T extends FieldComponent>(\n  props: FieldPropsWithOptionalComponentProps<T>,\n  ref: React.Ref<HTMLElement>,\n  params: FieldConfig<T>,\n): FieldState<T> => {\n  const [fieldProps, controlProps] = getPartitionedFieldProps(props);\n\n  const baseId = useId('field-');\n\n  const { orientation = 'vertical', validationState } = fieldProps;\n\n  const root = resolveShorthand(fieldProps.root, {\n    required: true,\n    defaultProps: getNativeElementProps('div', fieldProps),\n  });\n\n  const label = resolveShorthand(fieldProps.label, {\n    defaultProps: {\n      id: baseId + '__label',\n      required: controlProps.required,\n      size: typeof controlProps.size === 'string' ? controlProps.size : undefined,\n      // htmlFor is set below\n    },\n  });\n\n  const validationMessage = resolveShorthand(fieldProps.validationMessage, {\n    defaultProps: {\n      id: baseId + '__validationMessage',\n    },\n  });\n\n  const hint = resolveShorthand(fieldProps.hint, {\n    defaultProps: {\n      id: baseId + '__hint',\n    },\n  });\n\n  const validationMessageIcon = resolveShorthand(fieldProps.validationMessageIcon, {\n    required: !!validationState,\n    defaultProps: {\n      children: validationState ? validationMessageIcons[validationState] : undefined,\n    },\n  });\n\n  const { labelConnection = 'htmlFor' } = params;\n  const hasError = validationState === 'error';\n\n  const control = resolveShorthand(fieldProps.control, {\n    required: true,\n    defaultProps: {\n      ref,\n      // Add a default ID only if required for label's htmlFor prop\n      id: label && labelConnection === 'htmlFor' ? baseId + '__control' : undefined,\n      // Add aria-labelledby only if not using the label's htmlFor\n      'aria-labelledby': labelConnection !== 'htmlFor' ? label?.id : undefined,\n      'aria-describedby': hasError ? hint?.id : mergeAriaDescribedBy(validationMessage?.id, hint?.id),\n      'aria-errormessage': hasError ? validationMessage?.id : undefined,\n      'aria-invalid': hasError ? true : undefined,\n      ...controlProps,\n    },\n  });\n\n  if (labelConnection === 'htmlFor' && label && !label.htmlFor) {\n    label.htmlFor = control.id;\n  }\n\n  const state: FieldState<FieldComponent> = {\n    orientation,\n    validationState,\n    classNames: params.classNames,\n    components: {\n      root: 'div',\n      control: params.component,\n      label: Label,\n      validationMessage: 'span',\n      validationMessageIcon: 'span',\n      hint: 'span',\n    },\n    root,\n    control,\n    label,\n    validationMessageIcon,\n    validationMessage,\n    hint,\n  };\n\n  return state as FieldState<T>;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-field/src/components/Field/useField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,uBAAT,EAAkC,mBAAlC,EAAuD,eAAvD,QAA8E,uBAA9E;AACA,SAAS,KAAT,QAAsB,uBAAtB;AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,QAA+D,2BAA/D;AAGA,MAAM,sBAAsB,GAAG;EAC7B,KAAK,eAAE,KAAA,CAAA,aAAA,CAAC,mBAAD,EAAoB,IAApB,CADsB;EAE7B,OAAO,eAAE,KAAA,CAAA,aAAA,CAAC,eAAD,EAAgB,IAAhB,CAFoB;EAG7B,OAAO,eAAE,KAAA,CAAA,aAAA,CAAC,uBAAD,EAAwB,IAAxB;AAHoB,CAA/B;AAMA;;AAEG;;AACH,OAAO,MAAM,wBAAwB,GAAI,KAAD,IAA8D;EACpG,MAAM;IACJ,SADI;IAEJ,OAFI;IAGJ,IAHI;IAIJ,KAJI;IAKJ,WALI;IAMJ,IANI;IAOJ,KAPI;IAQJ,iBARI;IASJ,qBATI;IAUJ,eAVI;IAWJ,GAAG;EAXC,IAYF,KAZJ;EAcA,MAAM,UAAU,GAAG;IACjB,SADiB;IAEjB,OAFiB;IAGjB,IAHiB;IAIjB,KAJiB;IAKjB,WALiB;IAMjB,IANiB;IAOjB,KAPiB;IAQjB,iBARiB;IASjB,qBATiB;IAUjB;EAViB,CAAnB;EAaA,OAAO,CAAC,UAAD,EAAa,WAAb,CAAP;AACD,CA7BM;AA+BP;;;;;;;;;AASG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAC/B,KAD+B,EAE/B,GAF+B,EAG/B,MAH+B,KAId;;;EACjB,MAAM,CAAC,UAAD,EAAa,YAAb,IAA6B,wBAAwB,CAAC,KAAD,CAA3D;EACA,MAAM;IAAE,WAAW,GAAG,UAAhB;IAA4B;EAA5B,IAAgD,UAAtD;EACA,MAAM;IAAE,eAAe,GAAG,SAApB;IAA+B,kBAAkB,GAAG;EAApD,IAA6D,MAAnE;EAEA,MAAM,MAAM,GAAG,KAAK,CAAC,QAAD,CAApB;EAEA,MAAM,IAAI,GAAG,gBAAgB,CAAC,UAAU,CAAC,IAAZ,EAAkB;IAC7C,QAAQ,EAAE,IADmC;IAE7C,YAAY,EAAE,qBAAqB,CAAC,KAAD,EAAQ,UAAR;EAFU,CAAlB,CAA7B;EAKA,MAAM,KAAK,GAAG,gBAAgB,CAAC,UAAU,CAAC,KAAZ,EAAmB;IAC/C,YAAY,EAAE;MACZ,EAAE,EAAE,MAAM,GAAG,SADD;MAEZ,QAAQ,EAAE,YAAY,CAAC,QAFX;MAGZ,IAAI,EAAE,OAAO,YAAY,CAAC,IAApB,KAA6B,QAA7B,GAAwC,YAAY,CAAC,IAArD,GAA4D,SAHtD,CAIZ;;IAJY;EADiC,CAAnB,CAA9B;EASA,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,UAAU,CAAC,iBAAZ,EAA+B;IACvE,YAAY,EAAE;MACZ,EAAE,EAAE,MAAM,GAAG;IADD;EADyD,CAA/B,CAA1C;EAMA,MAAM,IAAI,GAAG,gBAAgB,CAAC,UAAU,CAAC,IAAZ,EAAkB;IAC7C,YAAY,EAAE;MACZ,EAAE,EAAE,MAAM,GAAG;IADD;EAD+B,CAAlB,CAA7B;EAMA,MAAM,qBAAqB,GAAG,gBAAgB,CAAC,UAAU,CAAC,qBAAZ,EAAmC;IAC/E,QAAQ,EAAE,CAAC,CAAC,eADmE;IAE/E,YAAY,EAAE;MACZ,QAAQ,EAAE,eAAe,GAAG,sBAAsB,CAAC,eAAD,CAAzB,GAA6C;IAD1D;EAFiE,CAAnC,CAA9C,CAjCiB,CAwCjB;;EACA,IAAI,KAAK,IAAI,eAAe,KAAK,iBAAjC,EAAoD;IAClD,CAAA,EAAA,GAAA,YAAY,CAAC,iBAAD,CAAZ,MAA8B,IAA9B,IAA8B,EAAA,KAAA,KAAA,CAA9B,GAA8B,EAA9B,GAAA,YAAY,CAAC,iBAAD,CAAZ,GAAoC,KAAK,CAAC,EAA1C;EACD;;EAED,IAAI,iBAAiB,IAAI,IAAzB,EAA+B;IAC7B;IACA;IACA;IACA,YAAY,CAAC,kBAAD,CAAZ,GAAmC,CAAC,iBAAiB,KAAA,IAAjB,IAAA,iBAAiB,KAAA,KAAA,CAAjB,GAAiB,KAAA,CAAjB,GAAA,iBAAiB,CAAE,EAApB,EAAwB,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAI,KAAA,CAAJ,GAAA,IAAI,CAAE,EAA9B,EAAkC,YAAY,CAAC,kBAAD,CAA9C,EAChC,MADgC,CACzB,OADyB,EAEhC,IAFgC,CAE3B,GAF2B,CAAnC;EAGD;;EAED,IAAI,eAAe,KAAK,OAApB,IAA+B,kBAAnC,EAAuD;IACrD,CAAA,EAAA,GAAA,YAAY,CAAC,cAAD,CAAZ,MAA2B,IAA3B,IAA2B,EAAA,KAAA,KAAA,CAA3B,GAA2B,EAA3B,GAAA,YAAY,CAAC,cAAD,CAAZ,GAAiC,IAAjC;EACD;;EAED,MAAM,OAAO,GAAG,gBAAgB,CAAC,UAAU,CAAC,OAAZ,EAAqB;IACnD,QAAQ,EAAE,IADyC;IAEnD,YAAY,EAAE;MACZ,GADY;MAEZ,EAAE,EAAE,MAAM,GAAG,WAFD;MAGZ,GAAG;IAHS;EAFqC,CAArB,CAAhC;;EASA,IAAI,KAAK,IAAI,eAAe,KAAK,SAAjC,EAA4C;IAC1C,CAAA,EAAA,GAAA,KAAK,CAAC,OAAN,MAAa,IAAb,IAAa,EAAA,KAAA,KAAA,CAAb,GAAa,EAAb,GAAA,KAAK,CAAC,OAAN,GAAkB,OAAO,CAAC,EAA1B;EACD;;EAED,MAAM,KAAK,GAA6B;IACtC,WADsC;IAEtC,eAFsC;IAGtC,UAAU,EAAE,MAAM,CAAC,UAHmB;IAItC,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,OAAO,EAAE,MAAM,CAAC,SAFN;MAGV,KAAK,EAAE,KAHG;MAIV,iBAAiB,EAAE,KAJT;MAKV,qBAAqB,EAAE,MALb;MAMV,IAAI,EAAE;IANI,CAJ0B;IAYtC,IAZsC;IAatC,OAbsC;IActC,KAdsC;IAetC,qBAfsC;IAgBtC,iBAhBsC;IAiBtC;EAjBsC,CAAxC;EAoBA,OAAO,KAAP;AACD,CAhGM","sourcesContent":["import * as React from 'react';\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { FieldConfig, FieldControl, FieldPropsWithOptionalComponentProps, FieldState } from './Field.types';\n\nconst validationMessageIcons = {\n  error: <ErrorCircle12Filled />,\n  warning: <Warning12Filled />,\n  success: <CheckmarkCircle12Filled />,\n} as const;\n\n/**\n * Partition the props used by the Field itself, from the props that are passed to the underlying field component.\n */\nexport const getPartitionedFieldProps = (props: FieldPropsWithOptionalComponentProps<FieldControl>) => {\n  const {\n    className,\n    control,\n    hint,\n    label,\n    orientation,\n    root,\n    style,\n    validationMessage,\n    validationMessageIcon,\n    validationState,\n    ...restOfProps\n  } = props;\n\n  const fieldProps = {\n    className,\n    control,\n    hint,\n    label,\n    orientation,\n    root,\n    style,\n    validationMessage,\n    validationMessageIcon,\n    validationState,\n  };\n\n  return [fieldProps, restOfProps] as const;\n};\n\n/**\n * Create the state required to render Field.\n *\n * The returned state can be modified with hooks such as useFieldStyles_unstable,\n * before being passed to renderField_unstable.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the control slot (primary slot)\n * @param params - Configuration parameters for this Field\n */\nexport const useField_unstable = <T extends FieldControl>(\n  props: FieldPropsWithOptionalComponentProps<T>,\n  ref: React.Ref<HTMLElement>,\n  params: FieldConfig<T>,\n): FieldState<T> => {\n  const [fieldProps, controlProps] = getPartitionedFieldProps(props);\n  const { orientation = 'vertical', validationState } = fieldProps;\n  const { labelConnection = 'htmlFor', ariaInvalidOnError = true } = params;\n\n  const baseId = useId('field-');\n\n  const root = resolveShorthand(fieldProps.root, {\n    required: true,\n    defaultProps: getNativeElementProps('div', fieldProps),\n  });\n\n  const label = resolveShorthand(fieldProps.label, {\n    defaultProps: {\n      id: baseId + '__label',\n      required: controlProps.required,\n      size: typeof controlProps.size === 'string' ? controlProps.size : undefined,\n      // htmlFor is handled below\n    },\n  });\n\n  const validationMessage = resolveShorthand(fieldProps.validationMessage, {\n    defaultProps: {\n      id: baseId + '__validationMessage',\n    },\n  });\n\n  const hint = resolveShorthand(fieldProps.hint, {\n    defaultProps: {\n      id: baseId + '__hint',\n    },\n  });\n\n  const validationMessageIcon = resolveShorthand(fieldProps.validationMessageIcon, {\n    required: !!validationState,\n    defaultProps: {\n      children: validationState ? validationMessageIcons[validationState] : undefined,\n    },\n  });\n\n  // Hook up aria props on the control\n  if (label && labelConnection === 'aria-labelledby') {\n    controlProps['aria-labelledby'] ??= label.id;\n  }\n\n  if (validationMessage || hint) {\n    // The control is described by the validation message, or hint, or both\n    // We also preserve and append any aria-describedby supplied by the user\n    // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933\n    controlProps['aria-describedby'] = [validationMessage?.id, hint?.id, controlProps['aria-describedby']]\n      .filter(Boolean)\n      .join(' ');\n  }\n\n  if (validationState === 'error' && ariaInvalidOnError) {\n    controlProps['aria-invalid'] ??= true;\n  }\n\n  const control = resolveShorthand(fieldProps.control, {\n    required: true,\n    defaultProps: {\n      ref,\n      id: baseId + '__control',\n      ...controlProps,\n    },\n  });\n\n  if (label && labelConnection === 'htmlFor') {\n    label.htmlFor ??= control.id;\n  }\n\n  const state: FieldState<FieldControl> = {\n    orientation,\n    validationState,\n    classNames: params.classNames,\n    components: {\n      root: 'div',\n      control: params.component,\n      label: Label,\n      validationMessage: 'div',\n      validationMessageIcon: 'span',\n      hint: 'div',\n    },\n    root,\n    control,\n    label,\n    validationMessageIcon,\n    validationMessage,\n    hint,\n  };\n\n  return state as FieldState<T>;\n};\n"],"sourceRoot":"../src/"}