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

package/Spec.md

@@ -1,354 +0,0 @@
-# @fluentui/react-field Spec
-
-## Background
-
-Field adds a label, validation text, and hint text to form input components. The existing input components (such as `Input` and `Combobox`) are wrapped to create field versions of them (such as `InputField` and `ComboboxField`).
-
-Epic issue tracking implementation: https://github.com/microsoft/fluentui/issues/19627
-
-## Prior Art
-
-Existing libraries tend to take one of the following approaches to field.
-
-1. Include support for label, error text, etc. in the base input component. Libraries using this approach include:
-   - **FluentUI v8** - [`TextField`](https://developer.microsoft.com/en-us/fluentui#/controls/web/textfield), [`Dropdown`](https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown), [`ChoiceGroup`](https://developer.microsoft.com/en-us/fluentui#/controls/web/choicegroup), etc.
-   - **Spectrum** - [`TextField`](https://react-spectrum.adobe.com/react-spectrum/TextField.html), [`Slider`](https://react-spectrum.adobe.com/react-spectrum/Slider.html), [`RadioGroup`](https://react-spectrum.adobe.com/react-spectrum/RadioGroup.html), etc.
-2. Provide a set of components that are manually constructed into a field. This requires manually hooking up the components using props like `htmlFor` and `aria-describedby`. Libraries using this approach include:
-   - **FluentUI v0** - [`FormField`](https://fluentsite.z22.web.core.windows.net/0.64.0/components/form/props#form-field), [`FormLabel`](https://fluentsite.z22.web.core.windows.net/0.64.0/components/form/props#form-label), [`FormMessage`](https://fluentsite.z22.web.core.windows.net/0.64.0/components/form/props#form-message)
-   - **Ant** - [`Form.Item`](https://ant.design/components/form/#Form.Item) (uses context to do some of the hooking up between the item and the field component).
-3. Provide base components without a label or descriptive text, and then Field versions of those controls. Libraries using this approach include:
-   - **FluentUI v0** - [`Input`](https://fluentsite.z22.web.core.windows.net/0.64.0/components/input/props) and [`FormInput`](https://fluentsite.z22.web.core.windows.net/0.64.0/components/form/props#form-input), for example.
-   - **Evergreen UI** - [`TextInput`](https://evergreen.segment.com/components/text-input) and [`TextInputField`](https://evergreen.segment.com/components/text-input#textinputfield), for example.
-
-The Field implementation in this spec follows pattern (3). There are Field versions of all components that can be used as form inputs. There are several reasons, including:
-
-- **Accessibility**: By combining a base component with the field props into a single component, all of the accessibility props like `htmlFor` and `aria-describedby` are set correctly for "free".
-- **Simplicity**: All props related to the component (such as `label`, `id`, `validationState="error"`, etc.) are on the same component, rather than split between multiple components (like separate `Field` and `Input` components).
-- **Consistency**: All of the Field components share a common set of props for the label, validationState, hint, etc.
-- **Bundle size**: When the label and other field functionality is not needed, it is still possible to use the base components without pulling in unnecessary dependencies (like `Label` and the field styling).
-
-## Sample Code
-
-Each input component has a field version (such as `InputField`, `ComboboxField`, etc.) that includes the features of Field added to that component.
-
-```jsx
-<>
-  <InputField
-    // Field-specific props
-    label="This is the field label"
-    orientation="horizontal"
-    validationState="error"
-    validationMessage="This is error text"
-    // All props and slots of the underlying Input component are supported
-    required
-    size="small"
-    contentBefore="$"
-    contentAfter=".00"
-  />
-  <RadioGroupField label="Radio group field">
-    <Radio value="one" label="Option one" />
-    <Radio value="two" label="Option two" />
-    <Radio value="three" label="Option three" />
-  </RadioGroupField>
-  <ComboboxField label="Combobox field" validationState="success" validationMessage="Success text">
-    <Option value="one">Option one</Option>
-    <Option value="two">Option two</Option>
-    <Option value="three">Option three</Option>
-  </ComboboxField>
-  <SliderField label="Slider field" validationState="warning" validationMessage="Warning text" />
-  <SpinButtonField label="Spin button field" hint="Hint text" />
-</>
-```
-
-These field versions of the components use a common set of Field hooks, and can be defined using very little code.
-
-```ts
-export type InputFieldProps = FieldProps<typeof Input>;
-
-export const InputField: ForwardRefComponent<InputFieldProps> = React.forwardRef((props, ref) => {
-  const state = useField_unstable(props, ref, Input);
-  useFieldStyles_unstable(state);
-  return renderField_unstable(state);
-});
-
-InputField.displayName = 'InputField';
-```
-
-## Components
-
-The following field components will be defined. If more form components are added in the future, they should also include a Field version.
-
-- `CheckboxField`
-- `ComboboxField`
-- `DropdownField`
-- `InputField`
-- `RadioGroupField`
-- `SelectField`
-- `SliderField`
-- `SpinButtonField`
-- `SwitchField`
-- `TextareaField`
-
-## Variants
-
-- **Orientation**: The `orientation` prop affects the layout of the label and field component:
-  - `'vertical'` (default) - label is above the field component
-  - `'horizontal'` - label is to the left of the field component, and is 33% the width of the field (this allows multiple stacked fields to all align their labels)
-- **Validation state**: The `validationState` prop affects the icon and color used by the `validationMessage`:
-  - `'error'` - Red x icon, red text color
-  - `'warning'` - Yellow exclamation icon, neutral color text
-  - `'success'` - Green check icon, neutral color text
-  - `undefined` (default): No validation message icon, neutral color text
-- **Error**: Some control types (like `Input` and `Combobox`) have a prop that makes the border red. This prop will be set `validationState="error"`.
-
-Field also forwards some props from the wrapped component to the label as well:
-
-- **Size**: If the wrapped component supports a `size` prop, it will also be applied to the field's label.
-- **Required**: If set, the Label will get a required asterisk: `*`
-
-## API
-
-### FieldComponent
-
-The `FieldComponent` type defines the minimum set of props that the wrapped component must support. This is used for the generic types as the requirement for the type parameter: `FieldProps<T extends FieldComponent>`
-
-```ts
-/**
- * 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 type FieldComponent = React.VoidFunctionComponent<
-  Pick<
-    React.HTMLAttributes<HTMLElement>,
-    'id' | 'className' | 'style' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-errormessage'
-  >
->;
-```
-
-### Slots
-
-_Note: TypeScript crashes if the `Slot` type is used with a template type parameter. The `SlotComponent` type is a simplified version of that type, which only supports `React.ComponentType`/`React.VoidFunctionComponent`._
-
-```ts
-export type FieldSlots<T extends FieldComponent> = {
-  root: NonNullable<Slot<'div'>>;
-
-  /**
-   * The underlying component wrapped by this field.
-   *
-   * This is the PRIMARY slot: all intrinsic HTML properties will be applied to this slot,
-   * except `className` and `style`, which remain on the root slot.
-   */
-  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`.
-   */
-  validationMessage?: Slot<'span'>;
-
-  /**
-   * The icon associated with the `validationMessage`. If the `validationState` prop is set, this will default to an
-   * icon corresponding to that state.
-   *
-   * This will only be displayed if `validationMessage` is set.
-   */
-  validationMessageIcon?: Slot<'span'>;
-
-  /**
-   * Additional hint text below the field.
-   */
-  hint?: Slot<'span'>;
-};
-```
-
-### Props
-
-```ts
-export type FieldProps<T extends FieldComponent> = 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).
-   *
-   * @default vertical
-   */
-  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.
-   *
-   * @default undefined
-   */
-  validationState?: 'error' | 'warning' | 'success';
-};
-```
-
-Field also reads some props from the underlying component. These are not part of `FieldProps` because they are not added to the components that don't support them. However, they are accepted by `useField`:
-
-```ts
-/**
- * Props that are supported by Field, but not required to be supported by the component that implements field.
- */
-export type OptionalFieldComponentProps = {
-  /**
-   * Whether the field label should be marked as required.
-   */
-  required?: boolean;
-
-  /**
-   * Size of the field label.
-   *
-   * Number sizes will be ignored, but are allowed because the HTML <input> element has a `size` prop of type `number`.
-   */
-  size?: 'small' | 'medium' | 'large' | number;
-};
-```
-
-### State
-
-```ts
-export type FieldState<T extends FieldComponent> = ComponentState<Required<FieldSlots<T>>> &
-  Pick<FieldProps<T>, 'orientation' | 'validationState'> & {
-    classNames: SlotClassNames<FieldSlots<T>>;
-  };
-```
-
-### Label for Checkbox and Switch
-
-The Checkbox and Switch components already have a `label` prop, which conflicts with the Field's `label`.
-
-#### `CheckboxField`
-
-- The `label` prop will go to the Checkbox and NOT the Field
-- New `fieldLabel` prop for the label of the Field
-
-#### `SwitchField`
-
-- New `valueLabel` prop for the label of the Switch
-- The `label` prop will go to the Field and NOT the Switch
-
-## Structure
-
-### Public API
-
-```jsx
-<InputField
-  label="This is the field label"
-  orientation="horizontal"
-  validationState="error"
-  validationMessage="This is a validation message"
-  hint="This is a hint message"
-/>
-```
-
-(similar API for other Field components)
-
-### Slot structure
-
-```jsx
-<slots.root>
-  <slots.label {...slotProps.label} />
-  <slots.control {...slotProps.control} />
-  <slots.validationMessage {...slotProps.validationMessage}>
-    <slots.validationMessageIcon {...slotProps.validationMessageIcon} />
-    {slotProps.validationMessage.children}
-  </slots.validationMessage>
-  <slots.hint {...slotProps.hint} />
-</slots.root>
-```
-
-### DOM structure
-
-```html
-<div className="fui-Field">
-  <label className="fui-Field__label fui-Label">This is the field label</label>
-  <!-- wrapped field component goes here -->
-  <span className="fui-Field__validationMessage">
-    <span className="fui-Field__validationMessageIcon"><svg>...</svg></span>
-    This is a validation message
-  </span>
-  <span className="fui-Field__hint">This is a hint message</span>
-</div>
-```
-
-## Migration
-
-### Migration from v8
-
-Migration from v8 will require picking between the normal and `Field` version of an input control, depending on whether the field-specific features are required: (`label`, `validationState="error"`, `validationMessage`, `hint`)
-
-See individual input components for more detailed migration guides.
-
-| v8 Control    | v9 Base control       | v9 Field control                | Notes                                                                                        |
-| ------------- | --------------------- | ------------------------------- | -------------------------------------------------------------------------------------------- |
-| `Checkbox`    | `Checkbox`            | `CheckboxField`                 | Only use `CheckboxField` if an error message is needed, or if required for layout in a form. |
-| `ChoiceGroup` | `RadioGroup`          | `RadioGroupField`               |                                                                                              |
-| `ComboBox`    | `Combobox`            | `ComboboxField`                 | `errorMessage="..."` is replaced by `validationState="error" validationMessage="..."`        |
-| `Dropdown`    | `Dropdown`            | `DropdownField`                 | `errorMessage="..."` is replaced by `validationState="error" validationMessage="..."`        |
-| `Slider`      | `Slider`              | `SliderField`                   |                                                                                              |
-| `SpinButton`  | `SpinButton`          | `SpinButtonField`               |                                                                                              |
-| `TextField`   | `Input` OR `Textarea` | `InputField` OR `TextareaField` | `errorMessage="..."` is replaced by `validationState="error" validationMessage="..."`        |
-| `Toggle`      | `Switch`              | `SwitchField`                   |                                                                                              |
-
-### Migration from v0
-
-Many components in v0 have `Form___` versions (such as `FormInput`). Those are replaced by the `___Field` equivalent. See the underlying component's migration guides for more detailed migration information.
-
-Component mapping:
-
-- `FormButton` => Not supported
-- `FormCheckbox` => `CheckboxField` OR `SwitchField`
-- `FormDatepicker` => _(Not yet implemented)_
-- `FormDropdown` => `DropdownField`
-- `FormField` => Not supported
-- `FormFieldCustom` => Not supported
-- `FormLabel` => The `label` prop of the field component
-- `FormMessage` => Either the `validationMessage` or `hint` prop of the field component
-- `FormRadioGroup` => `RadioGroupField`
-- `FormSlider` => `SliderField`
-- `FormTextArea` => `TextareaField`
-
-The following props are common to each of the `Form___` components:
-
-- `label` => `label`
-- `message` => either `validationMessage` or `hint`
-- `errorMessage` => `validationMessage` with `validationState="error"`
-
-## Behaviors
-
-### Form validation
-
-Field has no logic to perform input validation. It is expected that the validation will be done externally (possibly using a third party form validation library like Formik).
-
-### Interaction
-
-The Field itself is not interactive. The wrapped component has the same interactions as it does outside of a field.
-
-## Accessibility
-
-- **ARIA pattern**
-  - Field itself does not implement a defined ARIA pattern. It has no role applied to the root element.
-- **Attributes**
-  - The following are applied on the wrapped component:
-    - `aria-labelledby={label.id}`, if the label is present.
-    - `aria-describedby` is set to one of:
-      - `aria-describedby={validationMessage.id}`, if validationMessage is present, and _only if_ `validationState !== 'error'`
-      - `aria-describedby={hint.id}`, if hint is present
-      - `aria-describedby={validationMessage.id + ' ' + hint.id}`, if both conditions above apply
-    - `aria-errormessage={validationMessage.id}`, if validationMessage is present, and _only if_ `validationState === 'error'`
-    - `aria-invalid={true}`, _only if_ `validationState === 'error'`
-  - On the `label` slot:
-    - `htmlFor={control.id}` - the wrapped component's `id` (an ID is generated if not supplied via props).
-- **Live regions** (state change announcements)
-  - TBD: Need to determine if the validation message should be an aria live region.
-- **UI parts appearing on hover or focus**
-  - None.
-- **Focus behavior**
-  - No special focus behavior: no focus trapping or programmatic focus moving.

package/lib/CheckboxField.js

@@ -1,2 +0,0 @@
-export * from './components/CheckboxField/index';
-//# sourceMappingURL=CheckboxField.js.map

package/lib/CheckboxField.js.map

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

package/lib/ComboboxField.js

@@ -1,2 +0,0 @@
-export * from './components/ComboboxField/index';
-//# sourceMappingURL=ComboboxField.js.map

package/lib/ComboboxField.js.map

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

package/lib/InputField.js

@@ -1,2 +0,0 @@
-export * from './components/InputField/index';
-//# sourceMappingURL=InputField.js.map

package/lib/InputField.js.map

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

package/lib/RadioGroupField.js

@@ -1,2 +0,0 @@
-export * from './components/RadioGroupField/index';
-//# sourceMappingURL=RadioGroupField.js.map

package/lib/RadioGroupField.js.map

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

package/lib/SelectField.js

@@ -1,2 +0,0 @@
-export * from './components/SelectField/index';
-//# sourceMappingURL=SelectField.js.map

package/lib/SelectField.js.map

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

package/lib/SliderField.js

@@ -1,2 +0,0 @@
-export * from './components/SliderField/index';
-//# sourceMappingURL=SliderField.js.map

package/lib/SliderField.js.map

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

package/lib/SpinButtonField.js

@@ -1,2 +0,0 @@
-export * from './components/SpinButtonField/index';
-//# sourceMappingURL=SpinButtonField.js.map

package/lib/SpinButtonField.js.map

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

package/lib/SwitchField.js

@@ -1,2 +0,0 @@
-export * from './components/SwitchField/index';
-//# sourceMappingURL=SwitchField.js.map

package/lib/SwitchField.js.map

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

package/lib/TextareaField.js

@@ -1,2 +0,0 @@
-export * from './components/TextareaField/index';
-//# sourceMappingURL=TextareaField.js.map

package/lib/TextareaField.js.map

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

package/lib/components/CheckboxField/CheckboxField.js

@@ -1,32 +0,0 @@
-import * as React from 'react';
-import { Checkbox } from '@fluentui/react-checkbox';
-import { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';
-export const checkboxFieldClassNames = /*#__PURE__*/getFieldClassNames('CheckboxField');
-export const CheckboxField = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    fieldLabel,
-    required,
-    label,
-    control,
-    ...restOfProps
-  } = props;
-  props = {
-    // Use the fieldLabel prop as the Field's label
-    label: fieldLabel,
-    // Use the label prop as the Checkbox's label
-    control: {
-      label,
-      required,
-      ...control
-    },
-    ...restOfProps
-  };
-  const state = useField_unstable(props, ref, {
-    component: Checkbox,
-    classNames: checkboxFieldClassNames
-  });
-  useFieldStyles_unstable(state);
-  return renderField_unstable(state);
-});
-CheckboxField.displayName = 'CheckboxField';
-//# sourceMappingURL=CheckboxField.js.map

package/lib/components/CheckboxField/CheckboxField.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["components/CheckboxField/CheckboxField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,QAAT,QAAyB,0BAAzB;AAGA,SAAS,kBAAT,EAA6B,oBAA7B,EAAmD,uBAAnD,EAA4E,iBAA5E,QAAqG,aAArG;AAeA,OAAO,MAAM,uBAAuB,gBAAG,kBAAkB,CAAC,eAAD,CAAlD;AAEP,OAAO,MAAM,aAAa,gBAA4C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM;IAAE,UAAF;IAAc,QAAd;IAAwB,KAAxB;IAA+B,OAA/B;IAAwC,GAAG;EAA3C,IAA2D,KAAjE;EAEA,KAAK,GAAG;IACN;IACA,KAAK,EAAE,UAFD;IAGN;IACA,OAAO,EAAE;MAAE,KAAF;MAAS,QAAT;MAAmB,GAAG;IAAtB,CAJH;IAKN,GAAG;EALG,CAAR;EAQA,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,EAAa;IAAE,SAAS,EAAE,QAAb;IAAuB,UAAU,EAAE;EAAnC,CAAb,CAA/B;EACA,uBAAuB,CAAC,KAAD,CAAvB;EACA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CAdqE,CAA/D;AAgBP,aAAa,CAAC,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport type { CheckboxProps } from '@fluentui/react-checkbox';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from '../../Field';\nimport { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';\n\nexport type CheckboxFieldProps = Omit<FieldProps<typeof Checkbox>, 'label'> & {\n  /**\n   * The Checkbox's label.\n   */\n  label?: CheckboxProps['label'];\n\n  /**\n   * The label for the CheckboxField, which appears above or before the Checkbox, depending on the `orientation` prop.\n   * It is recommended to only set the `label` prop, and not `fieldLabel`.\n   */\n  fieldLabel?: FieldProps<typeof Checkbox>['label'];\n};\n\nexport const checkboxFieldClassNames = getFieldClassNames('CheckboxField');\n\nexport const CheckboxField: ForwardRefComponent<CheckboxFieldProps> = React.forwardRef((props, ref) => {\n  const { fieldLabel, required, label, control, ...restOfProps } = props;\n\n  props = {\n    // Use the fieldLabel prop as the Field's label\n    label: fieldLabel,\n    // Use the label prop as the Checkbox's label\n    control: { label, required, ...control },\n    ...restOfProps,\n  };\n\n  const state = useField_unstable(props, ref, { component: Checkbox, classNames: checkboxFieldClassNames });\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nCheckboxField.displayName = 'CheckboxField';\n"],"sourceRoot":"../src/"}

package/lib/components/CheckboxField/index.js

@@ -1,2 +0,0 @@
-export * from './CheckboxField';
-//# sourceMappingURL=index.js.map

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

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

package/lib/components/ComboboxField/ComboboxField.js

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import { Combobox } from '@fluentui/react-combobox';
-import { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';
-export const comboboxFieldClassNames = /*#__PURE__*/getFieldClassNames('ComboboxField');
-export const ComboboxField = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useField_unstable(props, ref, {
-    component: Combobox,
-    classNames: comboboxFieldClassNames
-  });
-  useFieldStyles_unstable(state);
-  return renderField_unstable(state);
-});
-ComboboxField.displayName = 'ComboboxField';
-//# sourceMappingURL=ComboboxField.js.map

package/lib/components/ComboboxField/ComboboxField.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["components/ComboboxField/ComboboxField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,0BAAzB;AAGA,SAAS,kBAAT,EAA6B,oBAA7B,EAAmD,uBAAnD,EAA4E,iBAA5E,QAAqG,aAArG;AAIA,OAAO,MAAM,uBAAuB,gBAAG,kBAAkB,CAAC,eAAD,CAAlD;AAEP,OAAO,MAAM,aAAa,gBAA4C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,EAAa;IAAE,SAAS,EAAE,QAAb;IAAuB,UAAU,EAAE;EAAnC,CAAb,CAA/B;EACA,uBAAuB,CAAC,KAAD,CAAvB;EACA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CAJqE,CAA/D;AAMP,aAAa,CAAC,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport { Combobox } from '@fluentui/react-combobox';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from '../../Field';\nimport { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';\n\nexport type ComboboxFieldProps = FieldProps<typeof Combobox>;\n\nexport const comboboxFieldClassNames = getFieldClassNames('ComboboxField');\n\nexport const ComboboxField: ForwardRefComponent<ComboboxFieldProps> = React.forwardRef((props, ref) => {\n  const state = useField_unstable(props, ref, { component: Combobox, classNames: comboboxFieldClassNames });\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nComboboxField.displayName = 'ComboboxField';\n"],"sourceRoot":"../src/"}

package/lib/components/ComboboxField/index.js

@@ -1,2 +0,0 @@
-export * from './ComboboxField';
-//# sourceMappingURL=index.js.map

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

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

package/lib/components/InputField/InputField.js

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import { Input } from '@fluentui/react-input';
-import { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';
-export const inputFieldClassNames = /*#__PURE__*/getFieldClassNames('InputField');
-export const InputField = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useField_unstable(props, ref, {
-    component: Input,
-    classNames: inputFieldClassNames
-  });
-  useFieldStyles_unstable(state);
-  return renderField_unstable(state);
-});
-InputField.displayName = 'InputField';
-//# sourceMappingURL=InputField.js.map

package/lib/components/InputField/InputField.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["components/InputField/InputField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,KAAT,QAAsB,uBAAtB;AAGA,SAAS,kBAAT,EAA6B,oBAA7B,EAAmD,uBAAnD,EAA4E,iBAA5E,QAAqG,aAArG;AAIA,OAAO,MAAM,oBAAoB,gBAAG,kBAAkB,CAAC,YAAD,CAA/C;AAEP,OAAO,MAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9F,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,EAAa;IAAE,SAAS,EAAE,KAAb;IAAoB,UAAU,EAAE;EAAhC,CAAb,CAA/B;EACA,uBAAuB,CAAC,KAAD,CAAvB;EACA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CAJ+D,CAAzD;AAMP,UAAU,CAAC,WAAX,GAAyB,YAAzB","sourcesContent":["import * as React from 'react';\nimport { Input } from '@fluentui/react-input';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from '../../Field';\nimport { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';\n\nexport type InputFieldProps = FieldProps<typeof Input>;\n\nexport const inputFieldClassNames = getFieldClassNames('InputField');\n\nexport const InputField: ForwardRefComponent<InputFieldProps> = React.forwardRef((props, ref) => {\n  const state = useField_unstable(props, ref, { component: Input, classNames: inputFieldClassNames });\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nInputField.displayName = 'InputField';\n"],"sourceRoot":"../src/"}

package/lib/components/InputField/index.js

@@ -1,2 +0,0 @@
-export * from './InputField';
-//# sourceMappingURL=index.js.map

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

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

package/lib/components/RadioGroupField/RadioGroupField.js

@@ -1,15 +0,0 @@
-import * as React from 'react';
-import { RadioGroup } from '@fluentui/react-radio';
-import { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';
-export const radioGroupFieldClassNames = /*#__PURE__*/getFieldClassNames('RadioGroupField');
-export const RadioGroupField = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useField_unstable(props, ref, {
-    component: RadioGroup,
-    classNames: radioGroupFieldClassNames,
-    labelConnection: 'aria-labelledby'
-  });
-  useFieldStyles_unstable(state);
-  return renderField_unstable(state);
-});
-RadioGroupField.displayName = 'RadioGroupField';
-//# sourceMappingURL=RadioGroupField.js.map

package/lib/components/RadioGroupField/RadioGroupField.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["components/RadioGroupField/RadioGroupField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,UAAT,QAA2B,uBAA3B;AAGA,SAAS,kBAAT,EAA6B,oBAA7B,EAAmD,uBAAnD,EAA4E,iBAA5E,QAAqG,aAArG;AAIA,OAAO,MAAM,yBAAyB,gBAAG,kBAAkB,CAAC,iBAAD,CAApD;AAEP,OAAO,MAAM,eAAe,gBAA8C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxG,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,EAAa;IAC1C,SAAS,EAAE,UAD+B;IAE1C,UAAU,EAAE,yBAF8B;IAG1C,eAAe,EAAE;EAHyB,CAAb,CAA/B;EAKA,uBAAuB,CAAC,KAAD,CAAvB;EACA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CARyE,CAAnE;AAUP,eAAe,CAAC,WAAhB,GAA8B,iBAA9B","sourcesContent":["import * as React from 'react';\nimport { RadioGroup } from '@fluentui/react-radio';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from '../../Field';\nimport { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';\n\nexport type RadioGroupFieldProps = FieldProps<typeof RadioGroup>;\n\nexport const radioGroupFieldClassNames = getFieldClassNames('RadioGroupField');\n\nexport const RadioGroupField: ForwardRefComponent<RadioGroupFieldProps> = React.forwardRef((props, ref) => {\n  const state = useField_unstable(props, ref, {\n    component: RadioGroup,\n    classNames: radioGroupFieldClassNames,\n    labelConnection: 'aria-labelledby',\n  });\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nRadioGroupField.displayName = 'RadioGroupField';\n"],"sourceRoot":"../src/"}

package/lib/components/RadioGroupField/index.js

@@ -1,2 +0,0 @@
-export * from './RadioGroupField';
-//# sourceMappingURL=index.js.map

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

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

package/lib/components/SelectField/SelectField.js

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import { Select } from '@fluentui/react-select';
-import { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';
-export const selectFieldClassNames = /*#__PURE__*/getFieldClassNames('SelectField');
-export const SelectField = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useField_unstable(props, ref, {
-    component: Select,
-    classNames: selectFieldClassNames
-  });
-  useFieldStyles_unstable(state);
-  return renderField_unstable(state);
-});
-SelectField.displayName = 'SelectField';
-//# sourceMappingURL=SelectField.js.map

package/lib/components/SelectField/SelectField.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["components/SelectField/SelectField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,MAAT,QAAuB,wBAAvB;AAGA,SAAS,kBAAT,EAA6B,oBAA7B,EAAmD,uBAAnD,EAA4E,iBAA5E,QAAqG,aAArG;AAIA,OAAO,MAAM,qBAAqB,gBAAG,kBAAkB,CAAC,aAAD,CAAhD;AAEP,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChG,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,EAAa;IAAE,SAAS,EAAE,MAAb;IAAqB,UAAU,EAAE;EAAjC,CAAb,CAA/B;EACA,uBAAuB,CAAC,KAAD,CAAvB;EACA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CAJiE,CAA3D;AAMP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { Select } from '@fluentui/react-select';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from '../../Field';\nimport { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';\n\nexport type SelectFieldProps = FieldProps<typeof Select>;\n\nexport const selectFieldClassNames = getFieldClassNames('SelectField');\n\nexport const SelectField: ForwardRefComponent<SelectFieldProps> = React.forwardRef((props, ref) => {\n  const state = useField_unstable(props, ref, { component: Select, classNames: selectFieldClassNames });\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nSelectField.displayName = 'SelectField';\n"],"sourceRoot":"../src/"}

package/lib/components/SelectField/index.js

@@ -1,2 +0,0 @@
-export * from './SelectField';
-//# sourceMappingURL=index.js.map

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

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

package/lib/components/SliderField/SliderField.js

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import { Slider } from '@fluentui/react-slider';
-import { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';
-export const sliderFieldClassNames = /*#__PURE__*/getFieldClassNames('SliderField');
-export const SliderField = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useField_unstable(props, ref, {
-    component: Slider,
-    classNames: sliderFieldClassNames
-  });
-  useFieldStyles_unstable(state);
-  return renderField_unstable(state);
-});
-SliderField.displayName = 'SliderField';
-//# sourceMappingURL=SliderField.js.map

package/lib/components/SliderField/SliderField.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["components/SliderField/SliderField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,MAAT,QAAuB,wBAAvB;AAGA,SAAS,kBAAT,EAA6B,oBAA7B,EAAmD,uBAAnD,EAA4E,iBAA5E,QAAqG,aAArG;AAIA,OAAO,MAAM,qBAAqB,gBAAG,kBAAkB,CAAC,aAAD,CAAhD;AAEP,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChG,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,EAAa;IAAE,SAAS,EAAE,MAAb;IAAqB,UAAU,EAAE;EAAjC,CAAb,CAA/B;EACA,uBAAuB,CAAC,KAAD,CAAvB;EACA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CAJiE,CAA3D;AAMP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { Slider } from '@fluentui/react-slider';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from '../../Field';\nimport { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';\n\nexport type SliderFieldProps = FieldProps<typeof Slider>;\n\nexport const sliderFieldClassNames = getFieldClassNames('SliderField');\n\nexport const SliderField: ForwardRefComponent<SliderFieldProps> = React.forwardRef((props, ref) => {\n  const state = useField_unstable(props, ref, { component: Slider, classNames: sliderFieldClassNames });\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nSliderField.displayName = 'SliderField';\n"],"sourceRoot":"../src/"}

package/lib/components/SliderField/index.js

@@ -1,2 +0,0 @@
-export * from './SliderField';
-//# sourceMappingURL=index.js.map

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

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