@fluentui/react-field 9.0.0-alpha.9 → 9.0.0-beta.1

package/CHANGELOG.md

@@ -1,12 +1,240 @@
 # Change Log - @fluentui/react-field
 
-This log was last generated on Thu, 17 Nov 2022 23:02:36 GMT and should not be manually modified.
+This log was last generated on Thu, 06 Apr 2023 23:59:47 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-beta.1)
+
+Thu, 06 Apr 2023 23:59:47 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.29..@fluentui/react-field_v9.0.0-beta.1)
+
+### Changes
+
+- feat: Add FieldContext to pass props to controls inside Field ([PR #27399](https://github.com/microsoft/fluentui/pull/27399) by behowell@microsoft.com)
+- chore: Bump react-field version to beta ([PR #27458](https://github.com/microsoft/fluentui/pull/27458) by behowell@microsoft.com)
+
+## [9.0.0-alpha.29](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.29)
+
+Tue, 04 Apr 2023 18:44:50 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.27..@fluentui/react-field_v9.0.0-alpha.29)
+
+### Changes
+
+- Bump @fluentui/react-context-selector to v9.1.16 ([PR #27434](https://github.com/microsoft/fluentui/pull/27434) by beachball)
+- Bump @fluentui/react-label to v9.1.7 ([PR #27434](https://github.com/microsoft/fluentui/pull/27434) by beachball)
+- Bump @fluentui/react-utilities to v9.7.3 ([PR #27434](https://github.com/microsoft/fluentui/pull/27434) by beachball)
+
+## [9.0.0-alpha.27](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.27)
+
+Tue, 21 Mar 2023 21:23:34 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.26..@fluentui/react-field_v9.0.0-alpha.27)
+
+### Changes
+
+- chore: Bumping version of @fluentui/react-icons to ^2.0.196. ([PR #27100](https://github.com/microsoft/fluentui/pull/27100) by makotom@microsoft.com)
+- chore: migrate to swc transpilation approach. ([PR #27250](https://github.com/microsoft/fluentui/pull/27250) by tristan.watanabe@gmail.com)
+- fix: add node field to package.json exports map. ([PR #27154](https://github.com/microsoft/fluentui/pull/27154) by tristan.watanabe@gmail.com)
+- Bump @fluentui/react-context-selector to v9.1.15 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+- Bump @fluentui/react-label to v9.1.5 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+- Bump @fluentui/react-theme to v9.1.7 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+- Bump @fluentui/react-utilities to v9.7.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.20 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+
+## [9.0.0-alpha.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.26)
+
+Thu, 16 Mar 2023 14:36:59 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.25..@fluentui/react-field_v9.0.0-alpha.26)
+
+### Changes
+
+- Bump @fluentui/react-context-selector to v9.1.14 ([PR #27229](https://github.com/microsoft/fluentui/pull/27229) by beachball)
+- Bump @fluentui/react-label to v9.1.4 ([PR #27229](https://github.com/microsoft/fluentui/pull/27229) by beachball)
+- Bump @fluentui/react-utilities to v9.7.1 ([PR #27229](https://github.com/microsoft/fluentui/pull/27229) by beachball)
+
+## [9.0.0-alpha.25](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.25)
+
+Wed, 15 Mar 2023 10:19:53 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.24..@fluentui/react-field_v9.0.0-alpha.25)
+
+### Changes
+
+- Bump @fluentui/react-label to v9.1.3 ([PR #27213](https://github.com/microsoft/fluentui/pull/27213) by beachball)
+- Bump @fluentui/react-theme to v9.1.6 ([PR #27213](https://github.com/microsoft/fluentui/pull/27213) by beachball)
+
+## [9.0.0-alpha.24](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.24)
+
+Mon, 13 Mar 2023 08:58:26 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.23..@fluentui/react-field_v9.0.0-alpha.24)
+
+### Changes
+
+- Bump @fluentui/react-context-selector to v9.1.13 ([PR #27161](https://github.com/microsoft/fluentui/pull/27161) by beachball)
+- Bump @fluentui/react-label to v9.1.2 ([PR #27161](https://github.com/microsoft/fluentui/pull/27161) by beachball)
+- Bump @fluentui/react-utilities to v9.7.0 ([PR #27161](https://github.com/microsoft/fluentui/pull/27161) by beachball)
+
+## [9.0.0-alpha.23](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.23)
+
+Fri, 10 Mar 2023 07:14:01 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.22..@fluentui/react-field_v9.0.0-alpha.23)
+
+### Changes
+
+- Bump @fluentui/react-context-selector to v9.1.12 ([PR #27157](https://github.com/microsoft/fluentui/pull/27157) by beachball)
+- Bump @fluentui/react-label to v9.1.1 ([PR #27157](https://github.com/microsoft/fluentui/pull/27157) by beachball)
+- Bump @fluentui/react-utilities to v9.6.2 ([PR #27157](https://github.com/microsoft/fluentui/pull/27157) by beachball)
+
+## [9.0.0-alpha.22](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.22)
+
+Wed, 08 Mar 2023 17:42:51 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.21..@fluentui/react-field_v9.0.0-alpha.22)
+
+### Changes
+
+- Bump @fluentui/react-context-selector to v9.1.11 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+- Bump @fluentui/react-label to v9.1.0 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+- Bump @fluentui/react-utilities to v9.6.1 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+
+## [9.0.0-alpha.21](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.21)
+
+Wed, 15 Feb 2023 11:44:52 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.20..@fluentui/react-field_v9.0.0-alpha.21)
+
+### Changes
+
+- Bump @fluentui/react-context-selector to v9.1.10 ([PR #26845](https://github.com/microsoft/fluentui/pull/26845) by beachball)
+- Bump @fluentui/react-label to v9.0.22 ([PR #26845](https://github.com/microsoft/fluentui/pull/26845) by beachball)
+- Bump @fluentui/react-utilities to v9.6.0 ([PR #26845](https://github.com/microsoft/fluentui/pull/26845) by beachball)
+
+## [9.0.0-alpha.20](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.20)
+
+Mon, 13 Feb 2023 23:43:14 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.19..@fluentui/react-field_v9.0.0-alpha.20)
+
+### Changes
+
+- Bump @fluentui/react-context-selector to v9.1.9 ([PR #26814](https://github.com/microsoft/fluentui/pull/26814) by beachball)
+- Bump @fluentui/react-label to v9.0.21 ([PR #26814](https://github.com/microsoft/fluentui/pull/26814) by beachball)
+- Bump @fluentui/react-utilities to v9.5.3 ([PR #26814](https://github.com/microsoft/fluentui/pull/26814) by beachball)
+
+## [9.0.0-alpha.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.19)
+
+Fri, 10 Feb 2023 08:49:59 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.18..@fluentui/react-field_v9.0.0-alpha.19)
+
+### Changes
+
+- Bump @fluentui/react-context-selector to v9.1.8 ([commit](https://github.com/microsoft/fluentui/commit/cc62f050f8231e8f21a2cf7dddf33003e0ba3931) by beachball)
+- Bump @fluentui/react-label to v9.0.20 ([commit](https://github.com/microsoft/fluentui/commit/cc62f050f8231e8f21a2cf7dddf33003e0ba3931) by beachball)
+- Bump @fluentui/react-utilities to v9.5.2 ([commit](https://github.com/microsoft/fluentui/commit/cc62f050f8231e8f21a2cf7dddf33003e0ba3931) by beachball)
+
+## [9.0.0-alpha.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.18)
+
+Tue, 31 Jan 2023 19:53:56 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.17..@fluentui/react-field_v9.0.0-alpha.18)
+
+### Changes
+
+- chore: Change the default value of validationState to error when a validationMessage is set. ([PR #26523](https://github.com/microsoft/fluentui/pull/26523) by behowell@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.1.7 ([PR #26557](https://github.com/microsoft/fluentui/pull/26557) by beachball)
+- Bump @fluentui/react-label to v9.0.19 ([PR #26557](https://github.com/microsoft/fluentui/pull/26557) by beachball)
+- Bump @fluentui/react-utilities to v9.5.1 ([PR #26557](https://github.com/microsoft/fluentui/pull/26557) by beachball)
+
+## [9.0.0-alpha.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.17)
+
+Thu, 26 Jan 2023 13:30:56 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.16..@fluentui/react-field_v9.0.0-alpha.17)
+
+### Changes
+
+- Implement Field component to replace InputField, ComboboxField, etc. ([PR #26430](https://github.com/microsoft/fluentui/pull/26430) by behowell@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.1.6 ([PR #26496](https://github.com/microsoft/fluentui/pull/26496) by beachball)
+- Bump @fluentui/react-label to v9.0.18 ([PR #26496](https://github.com/microsoft/fluentui/pull/26496) by beachball)
+- Bump @fluentui/react-utilities to v9.5.0 ([PR #26496](https://github.com/microsoft/fluentui/pull/26496) by beachball)
+
+## [9.0.0-alpha.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.16)
+
+Mon, 23 Jan 2023 16:43:09 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.15..@fluentui/react-field_v9.0.0-alpha.16)
+
+### Changes
+
+- chore: Simplify Field layout styles ([PR #26352](https://github.com/microsoft/fluentui/pull/26352) by behowell@microsoft.com)
+- fix: Stretch Field components to full width ([PR #26412](https://github.com/microsoft/fluentui/pull/26412) by behowell@microsoft.com)
+- fix: Update Field label padding to match spec ([PR #26413](https://github.com/microsoft/fluentui/pull/26413) by behowell@microsoft.com)
+- fix: Field sets role="alert" on its error message so it is announced by screen readers ([PR #26414](https://github.com/microsoft/fluentui/pull/26414) by behowell@microsoft.com)
+
+## [9.0.0-alpha.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.15)
+
+Mon, 16 Jan 2023 08:39:01 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.14..@fluentui/react-field_v9.0.0-alpha.15)
+
+### Changes
+
+- fix: Field styles do not wrap SVG status icon in inline parent to avoid layout bugs ([PR #26150](https://github.com/microsoft/fluentui/pull/26150) by sarah.higley@microsoft.com)
+- Bump @fluentui/react-label to v9.0.17 ([commit](https://github.com/microsoft/fluentui/commit/a870d8360e47f3ea03358c4e75e89e08a74845d7) by beachball)
+
+## [9.0.0-alpha.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.14)
+
+Mon, 09 Jan 2023 14:35:02 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.13..@fluentui/react-field_v9.0.0-alpha.14)
+
+### Changes
+
+- Bump @fluentui/react-context-selector to v9.1.5 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
+- Bump @fluentui/react-label to v9.0.16 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
+- Bump @fluentui/react-utilities to v9.4.0 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
+
+## [9.0.0-alpha.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.13)
+
+Wed, 04 Jan 2023 01:40:06 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.12..@fluentui/react-field_v9.0.0-alpha.13)
+
+### Changes
+
+- chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.1.4 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+- Bump @fluentui/react-label to v9.0.15 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+- Bump @fluentui/react-utilities to v9.3.1 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+
+## [9.0.0-alpha.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.12)
+
+Wed, 21 Dec 2022 10:20:33 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.11..@fluentui/react-field_v9.0.0-alpha.12)
+
+### Changes
+
+- Bump @fluentui/react-label to v9.0.14 ([commit](https://github.com/microsoft/fluentui/commit/66bf89f634cad4a275e957d7a2214c7e73ff8c2e) by beachball)
+- Bump @fluentui/react-theme to v9.1.5 ([commit](https://github.com/microsoft/fluentui/commit/66bf89f634cad4a275e957d7a2214c7e73ff8c2e) by beachball)
+
+## [9.0.0-alpha.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.11)
+
+Tue, 20 Dec 2022 14:59:25 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.10..@fluentui/react-field_v9.0.0-alpha.11)
+
+### Changes
+
+- Bump @fluentui/react-context-selector to v9.1.3 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+- Bump @fluentui/react-label to v9.0.13 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+- Bump @fluentui/react-theme to v9.1.4 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+- Bump @fluentui/react-utilities to v9.3.0 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+
+## [9.0.0-alpha.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.10)
+
+Mon, 05 Dec 2022 18:29:23 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:02:36 GMT 
+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

package/README.md

@@ -1,5 +1,70 @@
 # @fluentui/react-field
 
-**React Field components for [Fluent UI React](https://react.fluentui.dev/)**
+**React Field component for [Fluent UI React](https://react.fluentui.dev/)**
 
 These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
+
+## Description
+
+Field adds a label, validation message, and hint text to a control. Any single form control can be used as the child of the Field.
+
+## Usage
+
+To import Field:
+
+```js
+import { Field } from '@fluentui/react-components/unstable';
+```
+
+### Examples
+
+Works with many form controls, for example:
+
+```jsx
+<>
+  <Field label="Name">
+    <Input />
+  </Field>
+  <Field label="Description">
+    <Textarea />
+  </Field>
+  <Field label="Size">
+    <RadioGroup>
+      <Radio label="Small" />
+      <Radio label="Medium" />
+      <Radio label="Large" />
+    </RadioGroup>
+  </Field>
+</>
+```
+
+Display hint text:
+
+```jsx
+<Field label="Password" hint="Must be at least 8 characters long.">
+  <Input type="password" />
+</Field>
+```
+
+Display an error message:
+
+```jsx
+<Field label="Re-enter password" validationMessage="Passwords do not match.">
+  <Input type="password" />
+</Field>
+```
+
+See [Fluent UI Storybook](https://react.fluentui.dev/) for more detailed usage examples.
+
+Alternatively, run Storybook locally with:
+
+1. `yarn start`
+2. Select `react-field` from the list.
+
+### Specification
+
+See [SPEC.md](./SPEC.md).
+
+### Migration Guide
+
+If you're upgrading to Fluent UI v9 see [MIGRATION.md](./MIGRATION.md) for guidance on updating the Field component.

package/dist/index.d.ts

@@ -2,55 +2,95 @@
 
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
+import { ForwardRefComponent } from '@fluentui/react-utilities';
 import { 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';
-import type { SlotRenderFunction } from '@fluentui/react-utilities';
-import type { SlotShorthandValue } from '@fluentui/react-utilities';
 
 /**
- * Configuration parameters for a Field class, passed to useField_unstable
+ * @deprecated Only for use to make deprecated [Control]Field shim components.
+ * @internal
  */
-export declare type FieldConfig<T extends FieldControl> = {
-    /**
-     * The underlying input component that this field is wrapping.
-     */
-    component: T;
+export declare type DeprecatedFieldProps<ControlProps> = ControlProps & {
+    root?: FieldProps;
+    control?: ControlProps;
+} & Pick<FieldProps, 'className' | 'hint' | 'label' | 'orientation' | 'style' | 'validationMessage' | 'validationMessageIcon' | 'validationState'>;
+
+export declare const Field: ForwardRefComponent<FieldProps>;
+
+export declare const fieldClassNames: SlotClassNames<FieldSlots>;
+
+export declare const FieldContextProvider: React_2.Provider<Readonly<Pick<FieldState, "orientation" | "required" | "size" | "validationState" | "generatedControlId"> & {
+    labelFor?: string | undefined;
+    labelId?: string | undefined;
+    validationMessageId?: string | undefined;
+    hintId?: string | undefined;
+}> | undefined>;
+
+export declare type FieldContextValue = Readonly<Pick<FieldState, 'generatedControlId' | 'orientation' | 'required' | 'size' | 'validationState'> & {
+    /** The label's for prop. Undefined if there is no label. */
+    labelFor?: string;
+    /** The label's id prop. Undefined if there is no label. */
+    labelId?: string;
+    /** The validationMessage's id prop. Undefined if there is no validationMessage. */
+    validationMessageId?: string;
+    /** The hint's id prop. Undefined if there is no hint. */
+    hintId?: string;
+}>;
+
+export declare type FieldContextValues = {
+    field: FieldContextValue;
+};
+
+/**
+ * The props added to the control inside the Field.
+ */
+export declare type FieldControlProps = Pick<React_2.HTMLAttributes<HTMLElement>, 'id' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-required'>;
+
+/**
+ * Options for `useFieldControlProps_unstable`.
+ */
+export declare type FieldControlPropsOptions = {
     /**
-     * Class names for this component, created by `getFieldClassNames`.
+     * Skips setting `aria-labelledby` on the control if the `label.htmlFor` refers to the control.
+     *
+     * This should be used with controls that can be the target of a label's `for` prop:
+     * `<button>`, `<input>`, `<progress>`, `<select>`, `<textarea>`.
      */
-    classNames: SlotClassNames<FieldSlots<T>>;
+    supportsLabelFor?: boolean;
     /**
-     * How the label be connected to the control.
-     * * htmlFor - Set the Label's htmlFor prop to the component's ID (and generate an ID if not provided).
-     *   This is the preferred method for components that use the underlying <input> tag.
-     * * aria-labelledby - Set the component's aria-labelledby prop to the Label's ID. Use this for components
-     *   that are not directly <input> elements (such as RadioGroup).
+     * Sets `required` instead of `aria-required` when the Field is marked required.
      *
-     * @default htmlFor
+     * This should be used with controls that support the `required` prop:
+     * `<input>` (except `range` or `color`), `<select>`, `<textarea>`.
      */
-    labelConnection?: 'htmlFor' | 'aria-labelledby';
+    supportsRequired?: boolean;
     /**
-     * Should the aria-invalid and aria-errormessage attributes be set when validationState="error".
+     * Sets the size prop on the control to match the Field's size: `'small' | 'medium' | 'large'`.
      *
-     * @default true
+     * This should be used with controls that have a custom size prop that matches the Field's size prop.
      */
-    ariaInvalidOnError?: boolean;
+    supportsSize?: 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' | 'aria-errormessage'>>;
-
 /**
  * Field Props
  */
-export declare type FieldProps<T extends FieldControl> = ComponentProps<Partial<FieldSlots<T>>, 'control'> & {
+export declare type FieldProps = Omit<ComponentProps<FieldSlots>, 'children'> & {
+    /**
+     * The Field's child can be a single form control, or a render function that takes the props that should be spread on
+     * a form control.
+     *
+     * All form controls in this library can be used directly as children (such as `<Input>` or `<RadioGroup>`).
+     *
+     * For other controls, there are two options:
+     * 1. The child of Field can be a render function that is given the props that should be spread on the control.
+     *    `<Field>{(props) => <MyInput {...props} />}</Field>`
+     * 2. The control itself can merge props from field with useFieldControlProps_unstable().
+     *    `props = useFieldControlProps_unstable(props);`
+     */
+    children?: React_2.ReactNode | ((props: FieldControlProps) => React_2.ReactNode);
     /**
      * The orientation of the label relative to the field component.
      * This only affects the label, and not the validationMessage or hint (which always appear below the field component).
@@ -59,56 +99,53 @@ export declare type FieldProps<T extends FieldControl> = ComponentProps<Partial<
      */
     orientation?: 'vertical' | 'horizontal';
     /**
-     * The `validationState` affects the color of the `validationMessage`, the `validationMessageIcon`, and for some
-     * field components, an `validationState="error"` causes the border to become red.
+     * The `validationState` affects the display of the `validationMessage` and `validationMessageIcon`.
+     *
+     * * error: (default) The validation message has a red error icon and red text, with `role="alert"` so it is
+     *     announced by screen readers. Additionally, the control inside the field has `aria-invalid` set, which adds a
+     *     red border to some field components (such as `Input`).
+     * * success: The validation message has a green checkmark icon and gray text.
+     * * warning: The validation message has a yellow exclamation icon and gray text.
+     * * none: The validation message has no icon and gray text.
      *
-     * @default undefined
+     * @default error when validationMessage is set; none otherwise.
      */
-    validationState?: 'error' | 'warning' | 'success';
-};
-
-/**
- * FieldProps plus extra optional props that are supported by useField_unstable, but not required to be part of the
- * API of every Field component.
- *
- * 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 FieldControl> = FieldProps<T> & {
+    validationState?: 'error' | 'warning' | 'success' | 'none';
     /**
-     * Whether the field label should be marked as required.
+     * Marks the Field as required. If `true`, an asterisk will be appended to the label, and `aria-required` will be set
+     * on the Field's child.
      */
     required?: boolean;
     /**
-     * Size of the field label.
+     * The size of the Field's label.
      *
-     * Number sizes will be ignored, but are allowed because the HTML `<input>` element has a prop `size?: number`.
+     * @default medium
      */
-    size?: 'small' | 'medium' | 'large' | number;
+    size?: 'small' | 'medium' | 'large';
 };
 
 /**
- * Slots added by Field
+ * Slots of the Field component
  */
-export declare type FieldSlots<T extends FieldControl> = {
+export declare type FieldSlots = {
     root: NonNullable<Slot<'div'>>;
-    /**
-     * The underlying component wrapped by this field.
-     */
-    control: SlotComponent<T>;
     /**
      * The label associated with the field.
      */
     label?: Slot<typeof Label>;
     /**
-     * A message about the validation state. The appearance of the `validationMessage` depends on `validationState`.
+     * A message about the validation state. By default, this is an error message, but it can be a success, warning,
+     * or custom message by setting `validationState`.
      */
     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.
+     * The icon associated with the `validationMessage`. This will only be displayed if `validationMessage` is set.
      *
-     * This will only be displayed if `validationMessage` is set.
+     * The default depends on `validationState`:
+     * * error: `<ErrorCircle12Filled />`
+     * * warning: `<Warning12Filled />`
+     * * success: `<CheckmarkCircle12Filled />`
+     * * none: `null`
      */
     validationMessageIcon?: Slot<'span'>;
     /**
@@ -120,22 +157,39 @@ export declare type FieldSlots<T extends FieldControl> = {
 /**
  * State used in rendering Field
  */
-export declare type FieldState<T extends FieldControl> = ComponentState<Required<FieldSlots<T>>> & Pick<FieldProps<T>, 'orientation' | 'validationState'> & {
-    classNames: SlotClassNames<FieldSlots<T>>;
+export declare type FieldState = ComponentState<Required<FieldSlots>> & Required<Pick<FieldProps, 'orientation' | 'required' | 'size' | 'validationState'>> & Pick<FieldProps, 'children'> & {
+    /**
+     * The ID generated for the control inside the field, and the default value of label.htmlFor prop.
+     */
+    generatedControlId: string;
+};
+
+/**
+ * @deprecated Only for use to make deprecated [Control]Field shim components.
+ * @internal
+ */
+export declare const getDeprecatedFieldClassNames: (controlRootClassName: string) => {
+    control: string;
+    root: string;
+    label: string;
+    validationMessage: string;
+    validationMessageIcon: string;
+    hint: string;
 };
 
-export declare const getFieldClassNames: (name: string) => SlotClassNames<FieldSlots<FieldControl>>;
+/**
+ * @deprecated Only for use to make deprecated [Control]Field shim components.
+ * @internal
+ */
+export declare function makeDeprecatedField<ControlProps>(Control: React_2.ComponentType<ControlProps>, options?: {
+    mapProps?: (props: DeprecatedFieldProps<ControlProps>) => DeprecatedFieldProps<ControlProps>;
+    displayName?: string;
+}): ForwardRefComponent<DeprecatedFieldProps<ControlProps>>;
 
 /**
  * Render the final JSX of Field
  */
-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;
-} ? Props : Props & {
-    children?: never;
-}> : never>;
+export declare const renderField_unstable: (state: FieldState, contextValues?: FieldContextValues | undefined) => JSX.Element;
 
 /**
  * Create the state required to render Field.
@@ -144,24 +198,43 @@ declare type SlotComponent<Type extends React_2.ComponentType | React_2.VoidFunc
  * before being passed to renderField_unstable.
  *
  * @param props - Props passed to this field
- * @param ref - Ref to the control slot (primary slot)
- * @param params - Configuration parameters for this Field
+ * @param ref - Ref to the root
  */
-export declare const useField_unstable: <T extends FieldControl>(props: FieldPropsWithOptionalComponentProps<T>, ref: React_2.Ref<HTMLElement>, params: FieldConfig<T>) => FieldState<T>;
+export declare const useField_unstable: (props: FieldProps, ref: React_2.Ref<HTMLDivElement>) => FieldState;
+
+export declare const useFieldContext_unstable: () => Readonly<Pick<FieldState, "orientation" | "required" | "size" | "validationState" | "generatedControlId"> & {
+    labelFor?: string | undefined;
+    labelId?: string | undefined;
+    validationMessageId?: string | undefined;
+    hintId?: string | undefined;
+}> | undefined;
 
 /**
- * Apply styling to the Field slots based on the state
+ * Get the context values used when rendering Field.
  */
-export declare const useFieldStyles_unstable: <T extends FieldControl>(state: FieldState<T>) => void;
+export declare const useFieldContextValues_unstable: (state: FieldState) => FieldContextValues;
 
-declare type WithSlotRenderFunction<Props extends {
-    children?: unknown;
-}> = Props & {
-    children?: Props['children'] | SlotRenderFunction<Props>;
-};
+/**
+ * Gets the control props from the field context, if this inside a `<Field>`.
+ *
+ * When called with no arguments, returns the FieldControlProps that should be applied to the control.
+ *
+ * @returns A FieldControlProps object if inside a `<Field>`, otherwise undefined.
+ */
+export declare function useFieldControlProps_unstable(): FieldControlProps | undefined;
 
-declare type WithSlotShorthandValue<Props extends {
-    children?: unknown;
-}> = Props | Extract<SlotShorthandValue, Props['children']>;
+/**
+ * Copies and merges the FieldControlProps with the given props, if this inside a `<Field>`.
+ *
+ * @param props - The existing props for the control. These will be merged with the control props from the field context.
+ * @param options - Option to include the size prop.
+ * @returns Merged props if inside a `<Field>`, otherwise the original props, or undefined if no props given.
+ */
+export declare function useFieldControlProps_unstable<Props extends FieldControlProps>(props: Props, options?: FieldControlPropsOptions): Props;
+
+/**
+ * Apply styling to the Field slots based on the state
+ */
+export declare const useFieldStyles_unstable: (state: FieldState) => void;
 
 export { }

package/lib/Field.js.map

@@ -1 +1 @@
-{"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"]}
+{"version":3,"names":[],"sources":["../src/Field.ts"],"sourcesContent":["export * from './components/Field/index';\n"],"mappings":"AAAA,cAAc"}

package/lib/components/Field/Field.js

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