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

package/lib-commonjs/util/makeDeprecatedField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../lib/util/makeDeprecatedField.js"],"sourcesContent":["/* eslint-disable deprecation/deprecation */import * as React from 'react';\nimport { Field, fieldClassNames } from '../Field';\n/**\n * Partition the props used by the Field itself, from the props that are passed to the underlying field component.\n */\nfunction getPartitionedFieldProps(props) {\n  const {\n    className,\n    control,\n    hint,\n    label,\n    orientation,\n    required,\n    root,\n    size,\n    style,\n    validationMessage,\n    validationMessageIcon,\n    validationState = 'none',\n    ...restOfProps\n  } = props;\n  return [{\n    className,\n    hint,\n    label,\n    orientation,\n    required,\n    size,\n    style,\n    validationMessage,\n    validationMessageIcon,\n    validationState,\n    ...root\n  }, {\n    required,\n    size,\n    ...restOfProps,\n    ...control\n  }];\n}\n/**\n * @deprecated Only for use to make deprecated [Control]Field shim components.\n * @internal\n */\nexport function makeDeprecatedField(Control, options = {}) {\n  const {\n    mapProps = props => props,\n    displayName = `${Control.displayName}Field`\n  } = options;\n  const DeprecatedField = /*#__PURE__*/React.forwardRef((props, ref) => {\n    const [fieldProps, controlProps] = getPartitionedFieldProps(mapProps(props));\n    return /*#__PURE__*/React.createElement(Field, fieldProps, /*#__PURE__*/React.createElement(Control, {\n      ...controlProps,\n      ref: ref\n    }));\n  });\n  DeprecatedField.displayName = displayName;\n  return DeprecatedField;\n}\n/**\n * @deprecated Only for use to make deprecated [Control]Field shim components.\n * @internal\n */\nexport const getDeprecatedFieldClassNames = controlRootClassName => ({\n  ...fieldClassNames,\n  control: controlRootClassName\n});\n//# sourceMappingURL=makeDeprecatedField.js.map"],"names":["makeDeprecatedField","getDeprecatedFieldClassNames","getPartitionedFieldProps","props","className","control","hint","label","orientation","required","root","size","style","validationMessage","validationMessageIcon","validationState","restOfProps","Control","options","mapProps","displayName","DeprecatedField","React","forwardRef","ref","fieldProps","controlProps","createElement","Field","controlRootClassName","fieldClassNames"],"mappings":"AAAA,0CAA0C;;;;;;;;;;;IA4C1BA,mBAAmB,MAAnBA;IAmBHC,4BAA4B,MAA5BA;;;6DA/DsD;uBAC5B;AACvC;;CAEC,GACD,SAASC,yBAAyBC,KAAK,EAAE;IACvC,MAAM,EACJC,UAAS,EACTC,QAAO,EACPC,KAAI,EACJC,MAAK,EACLC,YAAW,EACXC,SAAQ,EACRC,KAAI,EACJC,KAAI,EACJC,MAAK,EACLC,kBAAiB,EACjBC,sBAAqB,EACrBC,iBAAkB,OAAM,EACxB,GAAGC,aACJ,GAAGb;IACJ,OAAO;QAAC;YACNC;YACAE;YACAC;YACAC;YACAC;YACAE;YACAC;YACAC;YACAC;YACAC;YACA,GAAGL,IAAI;QACT;QAAG;YACDD;YACAE;YACA,GAAGK,WAAW;YACd,GAAGX,OAAO;QACZ;KAAE;AACJ;AAKO,SAASL,oBAAoBiB,OAAO,EAAEC,UAAU,CAAC,CAAC,EAAE;IACzD,MAAM,EACJC,UAAWhB,CAAAA,QAASA,MAAK,EACzBiB,aAAc,CAAC,EAAEH,QAAQG,WAAW,CAAC,KAAK,CAAC,CAAA,EAC5C,GAAGF;IACJ,MAAMG,kBAAkB,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACpB,OAAOqB,MAAQ;QACpE,MAAM,CAACC,YAAYC,aAAa,GAAGxB,yBAAyBiB,SAAShB;QACrE,OAAO,WAAW,GAAEmB,OAAMK,aAAa,CAACC,YAAK,EAAEH,YAAY,WAAW,GAAEH,OAAMK,aAAa,CAACV,SAAS;YACnG,GAAGS,YAAY;YACfF,KAAKA;QACP;IACF;IACAH,gBAAgBD,WAAW,GAAGA;IAC9B,OAAOC;AACT;AAKO,MAAMpB,+BAA+B4B,CAAAA,uBAAyB,CAAA;QACnE,GAAGC,sBAAe;QAClBzB,SAASwB;IACX,CAAA,GACA,+CAA+C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-field",
-  "version": "9.0.0-alpha.9",
+  "version": "9.0.0-beta.1",
   "description": "Fluent UI Field components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -13,6 +13,7 @@
   "license": "MIT",
   "scripts": {
     "build": "just-scripts build",
+    "bundle-size": "bundle-size measure",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
     "just": "just-scripts",
@@ -21,22 +22,23 @@
     "storybook": "start-storybook",
     "test": "jest --passWithNoTests",
     "type-check": "tsc -b tsconfig.json",
-    "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
+    "generate-api": "just-scripts generate-api"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.18",
-    "@fluentui/scripts": "^1.0.0"
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.20",
+    "@fluentui/scripts-api-extractor": "*",
+    "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-context-selector": "^9.1.2",
-    "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-label": "^9.0.11",
-    "@fluentui/react-theme": "^9.1.2",
-    "@fluentui/react-utilities": "^9.2.2",
-    "@griffel/react": "^1.4.2",
-    "tslib": "^2.1.0"
+    "@fluentui/react-context-selector": "^9.1.16",
+    "@fluentui/react-icons": "^2.0.196",
+    "@fluentui/react-label": "^9.1.7",
+    "@fluentui/react-theme": "^9.1.7",
+    "@fluentui/react-utilities": "^9.7.3",
+    "@griffel/react": "^1.5.2",
+    "@swc/helpers": "^0.4.14"
   },
   "peerDependencies": {
     "@types/react": ">=16.8.0 <19.0.0",
@@ -54,6 +56,7 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "node": "./lib-commonjs/index.js",
       "import": "./lib/index.js",
       "require": "./lib-commonjs/index.js"
     },

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`
-
-- The `label` prop will go to the Field and NOT the Switch
-- The Switch's `labelPosition` prop is therefore not supported, and is omitted from SwitchField.
-
-## 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/components/Field/SlotComponent.types.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=SlotComponent.types.js.map

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

@@ -1 +0,0 @@
-{"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-amd/Field.js

@@ -1,6 +0,0 @@
-define(["require", "exports", "tslib", "./components/Field/index"], function (require, exports, tslib_1, index_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    tslib_1.__exportStar(index_1, exports);
-});
-//# sourceMappingURL=Field.js.map

package/lib-amd/Field.js.map

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

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

@@ -1,5 +0,0 @@
-define(["require", "exports"], function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-});
-//# sourceMappingURL=Field.types.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Field.types.js","sourceRoot":"","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' | 'aria-errormessage'\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   * 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 and aria-errormessage attributes 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-amd/components/Field/SlotComponent.types.js

@@ -1,5 +0,0 @@
-define(["require", "exports"], function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-});
-//# sourceMappingURL=SlotComponent.types.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"SlotComponent.types.js","sourceRoot":"","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-amd/components/Field/index.js

@@ -1,9 +0,0 @@
-define(["require", "exports", "tslib", "./Field.types", "./renderField", "./useField", "./useFieldStyles"], function (require, exports, tslib_1, Field_types_1, renderField_1, useField_1, useFieldStyles_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    tslib_1.__exportStar(Field_types_1, exports);
-    tslib_1.__exportStar(renderField_1, exports);
-    tslib_1.__exportStar(useField_1, exports);
-    tslib_1.__exportStar(useFieldStyles_1, exports);
-});
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/index.ts"],"names":[],"mappings":";;;IAAA,6CAA8B;IAC9B,6CAA8B;IAC9B,0CAA2B;IAC3B,gDAAiC","sourcesContent":["export * from './Field.types';\nexport * from './renderField';\nexport * from './useField';\nexport * from './useFieldStyles';\n"]}

package/lib-amd/components/Field/renderField.js

@@ -1,20 +0,0 @@
-define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_utilities_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.renderField_unstable = void 0;
-    /**
-     * Render the final JSX of Field
-     */
-    var renderField_unstable = function (state) {
-        var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
-        return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
-            slots.label && React.createElement(slots.label, tslib_1.__assign({}, slotProps.label)),
-            slots.control && React.createElement(slots.control, tslib_1.__assign({}, slotProps.control)),
-            slots.validationMessage && (React.createElement(slots.validationMessage, tslib_1.__assign({}, slotProps.validationMessage),
-                slots.validationMessageIcon && React.createElement(slots.validationMessageIcon, tslib_1.__assign({}, slotProps.validationMessageIcon)),
-                slotProps.validationMessage.children)),
-            slots.hint && React.createElement(slots.hint, tslib_1.__assign({}, slotProps.hint))));
-    };
-    exports.renderField_unstable = renderField_unstable;
-});
-//# sourceMappingURL=renderField.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"renderField.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/renderField.tsx"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,oBAAoB,GAAG,UAAyB,KAAoB;QACzE,IAAA,KAAuB,0BAAQ,CAA2B,KAAiC,CAAC,EAA1F,KAAK,WAAA,EAAE,SAAS,eAA0E,CAAC;QAEnG,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,KAAK,CAAC,KAAK,IAAI,oBAAC,KAAK,CAAC,KAAK,uBAAK,SAAS,CAAC,KAAK,EAAI;YAEnD,KAAK,CAAC,OAAO,IAAI,oBAAC,KAAK,CAAC,OAAO,uBAAM,SAAS,CAAC,OAAe,EAAI;YAClE,KAAK,CAAC,iBAAiB,IAAI,CAC1B,oBAAC,KAAK,CAAC,iBAAiB,uBAAK,SAAS,CAAC,iBAAiB;gBACrD,KAAK,CAAC,qBAAqB,IAAI,oBAAC,KAAK,CAAC,qBAAqB,uBAAK,SAAS,CAAC,qBAAqB,EAAI;gBACnG,SAAS,CAAC,iBAAiB,CAAC,QAAQ,CACb,CAC3B;YACA,KAAK,CAAC,IAAI,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CACtC,CACd,CAAC;IACJ,CAAC,CAAC;IAjBW,QAAA,oBAAoB,wBAiB/B","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"]}

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

@@ -1,121 +0,0 @@
-define(["require", "exports", "tslib", "react", "@fluentui/react-icons", "@fluentui/react-label", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_icons_1, react_label_1, react_utilities_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.useField_unstable = exports.getPartitionedFieldProps = void 0;
-    var validationMessageIcons = {
-        error: React.createElement(react_icons_1.ErrorCircle12Filled, null),
-        warning: React.createElement(react_icons_1.Warning12Filled, null),
-        success: React.createElement(react_icons_1.CheckmarkCircle12Filled, null),
-    };
-    /**
-     * Partition the props used by the Field itself, from the props that are passed to the underlying field component.
-     */
-    var getPartitionedFieldProps = function (props) {
-        var className = props.className, control = props.control, hint = props.hint, label = props.label, orientation = props.orientation, root = props.root, style = props.style, validationMessage = props.validationMessage, validationMessageIcon = props.validationMessageIcon, validationState = props.validationState, restOfProps = tslib_1.__rest(props, ["className", "control", "hint", "label", "orientation", "root", "style", "validationMessage", "validationMessageIcon", "validationState"]);
-        var fieldProps = {
-            className: className,
-            control: control,
-            hint: hint,
-            label: label,
-            orientation: orientation,
-            root: root,
-            style: style,
-            validationMessage: validationMessage,
-            validationMessageIcon: validationMessageIcon,
-            validationState: validationState,
-        };
-        return [fieldProps, restOfProps];
-    };
-    exports.getPartitionedFieldProps = getPartitionedFieldProps;
-    /**
-     * Create the state required to render Field.
-     *
-     * The returned state can be modified with hooks such as useFieldStyles_unstable,
-     * 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
-     */
-    var useField_unstable = function (props, ref, params) {
-        var _a, _b, _c, _d, _e;
-        var _f = exports.getPartitionedFieldProps(props), fieldProps = _f[0], controlProps = _f[1];
-        var _g = fieldProps.orientation, orientation = _g === void 0 ? 'vertical' : _g, validationState = fieldProps.validationState;
-        var _h = params.labelConnection, labelConnection = _h === void 0 ? 'htmlFor' : _h, _j = params.ariaInvalidOnError, ariaInvalidOnError = _j === void 0 ? true : _j;
-        var baseId = react_utilities_1.useId('field-');
-        var root = react_utilities_1.resolveShorthand(fieldProps.root, {
-            required: true,
-            defaultProps: react_utilities_1.getNativeElementProps('div', fieldProps),
-        });
-        var control = react_utilities_1.resolveShorthand(fieldProps.control, {
-            required: true,
-            defaultProps: tslib_1.__assign({ ref: ref, id: baseId + '__control' }, controlProps),
-        });
-        var label = react_utilities_1.resolveShorthand(fieldProps.label, {
-            defaultProps: {
-                id: baseId + '__label',
-                required: controlProps.required,
-                size: typeof controlProps.size === 'string' ? controlProps.size : undefined,
-                htmlFor: labelConnection === 'htmlFor' ? control.id : undefined,
-            },
-        });
-        var validationMessage = react_utilities_1.resolveShorthand(fieldProps.validationMessage, {
-            defaultProps: {
-                id: baseId + '__validationMessage',
-            },
-        });
-        var hint = react_utilities_1.resolveShorthand(fieldProps.hint, {
-            defaultProps: {
-                id: baseId + '__hint',
-            },
-        });
-        var validationMessageIcon = react_utilities_1.resolveShorthand(fieldProps.validationMessageIcon, {
-            required: !!validationState,
-            defaultProps: {
-                children: validationState ? validationMessageIcons[validationState] : undefined,
-            },
-        });
-        // Hook up aria props on the control
-        if (label && labelConnection === 'aria-labelledby') {
-            (_a = control['aria-labelledby']) !== null && _a !== void 0 ? _a : (control['aria-labelledby'] = label.id);
-        }
-        if (validationState === 'error' && ariaInvalidOnError) {
-            (_b = control['aria-invalid']) !== null && _b !== void 0 ? _b : (control['aria-invalid'] = true);
-            if (validationMessage) {
-                (_c = control['aria-errormessage']) !== null && _c !== void 0 ? _c : (control['aria-errormessage'] = validationMessage.id);
-            }
-            if (hint) {
-                (_d = control['aria-describedby']) !== null && _d !== void 0 ? _d : (control['aria-describedby'] = hint.id);
-            }
-        }
-        else {
-            // If the state is not an error, then the control is described by the validation message, or hint, or both
-            var describedby = validationMessage || hint;
-            if (describedby) {
-                (_e = control['aria-describedby']) !== null && _e !== void 0 ? _e : (control['aria-describedby'] = validationMessage && hint ? validationMessage.id + " " + hint.id : describedby.id);
-            }
-        }
-        var state = {
-            orientation: orientation,
-            validationState: validationState,
-            classNames: params.classNames,
-            components: {
-                root: 'div',
-                control: params.component,
-                label: react_label_1.Label,
-                validationMessage: 'div',
-                validationMessageIcon: 'span',
-                hint: 'div',
-            },
-            root: root,
-            control: control,
-            label: label,
-            validationMessageIcon: validationMessageIcon,
-            validationMessage: validationMessage,
-            hint: hint,
-        };
-        return state;
-    };
-    exports.useField_unstable = useField_unstable;
-});
-//# sourceMappingURL=useField.js.map