@fluentui/react-field 9.0.0-alpha.16 → 9.0.0-alpha.17

package/CHANGELOG.json

@@ -2,7 +2,40 @@
   "name": "@fluentui/react-field",
   "entries": [
     {
-      "date": "Mon, 23 Jan 2023 16:41:42 GMT",
+      "date": "Thu, 26 Jan 2023 13:27:46 GMT",
+      "tag": "@fluentui/react-field_v9.0.0-alpha.17",
+      "version": "9.0.0-alpha.17",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-field",
+            "commit": "d6e98c0b5390c5c7e03601537b2026307e01a8d4",
+            "comment": "Implement Field component to replace InputField, ComboboxField, etc."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-field",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.6",
+            "commit": "403e1370f1effca7d3db131eda381abf31cf66b1"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-field",
+            "comment": "Bump @fluentui/react-label to v9.0.18",
+            "commit": "403e1370f1effca7d3db131eda381abf31cf66b1"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-field",
+            "comment": "Bump @fluentui/react-utilities to v9.5.0",
+            "commit": "403e1370f1effca7d3db131eda381abf31cf66b1"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 23 Jan 2023 16:43:09 GMT",
       "tag": "@fluentui/react-field_v9.0.0-alpha.16",
       "version": "9.0.0-alpha.16",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,24 @@
 # Change Log - @fluentui/react-field
 
-This log was last generated on Mon, 23 Jan 2023 16:41:42 GMT and should not be manually modified.
+This log was last generated on Thu, 26 Jan 2023 13:27:46 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.17)
+
+Thu, 26 Jan 2023 13:27:46 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:41:42 GMT 
+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

package/dist/index.d.ts

@@ -2,55 +2,45 @@
 
 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;
-    /**
-     * Class names for this component, created by `getFieldClassNames`.
-     */
-    classNames: SlotClassNames<FieldSlots<T>>;
-    /**
-     * 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).
-     *
-     * @default htmlFor
-     */
-    labelConnection?: 'htmlFor' | 'aria-labelledby';
-    /**
-     * Should the aria-invalid attribute be set when validationState="error".
-     *
-     * @default true
-     */
-    ariaInvalidOnError?: boolean;
-};
+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>;
 
 /**
- * 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.
+ * The props added to the Field's child element.
  */
-export declare type FieldControl = React_2.VoidFunctionComponent<Pick<React_2.HTMLAttributes<HTMLElement>, 'id' | 'className' | 'style' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid'>>;
+declare type FieldChildProps = Pick<React_2.HTMLAttributes<HTMLElement>, 'id' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-required'>;
+
+export declare const fieldClassNames: SlotClassNames<FieldSlots>;
 
 /**
  * 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>`), as well
+     * as intrinsic form controls like `<input>` or `<textarea>`. Custom controls can also be used as long as they
+     * accept FieldChildProps and spread them on the appropriate element.
+     *
+     * For more complex scenarios, a render function can be used to pass the FieldChildProps to the appropriate control.
+     */
+    children?: React_2.ReactElement<FieldChildProps> | null | ((props: FieldChildProps) => 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,47 +49,30 @@ 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 color of the `validationMessage`, the `validationMessageIcon`
      *
-     * @default undefined
+     * Setting `validationState` to `error` will also set `aria-invalid` to `true` on the Field's child,
+     * `role="alert"` on the `validationMessage`, and for some field components, causes the border to become red.
      */
     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> & {
     /**
-     * A ref to the underlying control.
-     */
-    ref?: React_2.Ref<HTMLElement>;
-    /**
-     * 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.
      */
@@ -124,22 +97,34 @@ 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>> & Pick<FieldProps, 'orientation' | 'validationState'>;
+
+/**
+ * @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) => JSX.Element;
 
 /**
  * Create the state required to render Field.
@@ -148,24 +133,13 @@ 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;
 
 /**
  * Apply styling to the Field slots based on the state
  */
-export declare const useFieldStyles_unstable: <T extends FieldControl>(state: FieldState<T>) => void;
-
-declare type WithSlotRenderFunction<Props extends {
-    children?: unknown;
-}> = Props & {
-    children?: Props['children'] | SlotRenderFunction<Props>;
-};
-
-declare type WithSlotShorthandValue<Props extends {
-    children?: unknown;
-}> = Props | Extract<SlotShorthandValue, Props['children']>;
+export declare const useFieldStyles_unstable: (state: FieldState) => void;
 
 export { }

package/lib/components/Field/Field.js

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

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

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,SAASC,oBAAoB,QAAQ,eAAe;AACpD,SAASC,iBAAiB,QAAQ,YAAY;AAC9C,SAASC,uBAAuB,QAAQ,kBAAkB;AAE1D,OAAO,MAAMC,KAAK,gBAAoCJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpF,MAAMC,KAAK,GAAGN,iBAAiB,CAACI,KAAK,EAAEC,GAAG,CAAC;EAC3CJ,uBAAuB,CAACK,KAAK,CAAC;EAC9B,OAAOP,oBAAoB,CAACO,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFJ,KAAK,CAACK,WAAW,GAAG,OAAO","names":["React","renderField_unstable","useField_unstable","useFieldStyles_unstable","Field","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-field/src/components/Field/Field.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from './Field.types';\nimport { renderField_unstable } from './renderField';\nimport { useField_unstable } from './useField';\nimport { useFieldStyles_unstable } from './useFieldStyles';\n\nexport const Field: ForwardRefComponent<FieldProps> = React.forwardRef((props, ref) => {\n  const state = useField_unstable(props, ref);\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nField.displayName = 'Field';\n"]}

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

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

package/lib/components/Field/index.js

@@ -1,4 +1,5 @@
 export * from './Field.types';
+export * from './Field';
 export * from './renderField';
 export * from './useField';
 export * from './useFieldStyles';

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

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

package/lib/components/Field/renderField.js

@@ -12,9 +12,7 @@ export const renderField_unstable = state => {
     ...slotProps.root
   }, slots.label && /*#__PURE__*/React.createElement(slots.label, {
     ...slotProps.label
-  }), slots.control && /*#__PURE__*/React.createElement(slots.control, {
-    ...slotProps.control
-  }), slots.validationMessage && /*#__PURE__*/React.createElement(slots.validationMessage, {
+  }), slotProps.root.children, slots.validationMessage && /*#__PURE__*/React.createElement(slots.validationMessage, {
     ...slotProps.validationMessage
   }, slots.validationMessageIcon && /*#__PURE__*/React.createElement(slots.validationMessageIcon, {
     ...slotProps.validationMessageIcon

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,oBAAoB,GAA4BC,KAAoB,IAAI;EACnF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAA2BE,KAAiC,CAAC;EAElG,oBACEH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,GAC3BF,KAAK,CAACG,KAAK,iBAAIP,oBAACI,KAAK,CAACG,KAAK;IAAA,GAAKF,SAAS,CAACE;EAAK,EAAI,EAEnDH,KAAK,CAACI,OAAO,iBAAIR,oBAACI,KAAK,CAACI,OAAO;IAAA,GAAMH,SAAS,CAACG;EAAe,EAAI,EAClEJ,KAAK,CAACK,iBAAiB,iBACtBT,oBAACI,KAAK,CAACK,iBAAiB;IAAA,GAAKJ,SAAS,CAACI;EAAiB,GACrDL,KAAK,CAACM,qBAAqB,iBAAIV,oBAACI,KAAK,CAACM,qBAAqB;IAAA,GAAKL,SAAS,CAACK;EAAqB,EAAI,EACnGL,SAAS,CAACI,iBAAiB,CAACE,QAAQ,CAExC,EACAP,KAAK,CAACQ,IAAI,iBAAIZ,oBAACI,KAAK,CAACQ,IAAI;IAAA,GAAKP,SAAS,CAACO;EAAI,EAAI,CACtC;AAEjB,CAAC","names":["React","getSlots","renderField_unstable","state","slots","slotProps","root","label","control","validationMessage","validationMessageIcon","children","hint"],"sourceRoot":"../src/","sources":["packages/react-components/react-field/src/components/Field/renderField.tsx"],"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"]}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,oBAAoB,GAAIC,KAAiB,IAAI;EACxD,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAaE,KAAK,CAAC;EAExD,oBACEH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,GAC3BF,KAAK,CAACG,KAAK,iBAAIP,oBAACI,KAAK,CAACG,KAAK;IAAA,GAAKF,SAAS,CAACE;EAAK,EAAI,EACnDF,SAAS,CAACC,IAAI,CAACE,QAAQ,EACvBJ,KAAK,CAACK,iBAAiB,iBACtBT,oBAACI,KAAK,CAACK,iBAAiB;IAAA,GAAKJ,SAAS,CAACI;EAAiB,GACrDL,KAAK,CAACM,qBAAqB,iBAAIV,oBAACI,KAAK,CAACM,qBAAqB;IAAA,GAAKL,SAAS,CAACK;EAAqB,EAAI,EACnGL,SAAS,CAACI,iBAAiB,CAACD,QAAQ,CAExC,EACAJ,KAAK,CAACO,IAAI,iBAAIX,oBAACI,KAAK,CAACO,IAAI;IAAA,GAAKN,SAAS,CAACM;EAAI,EAAI,CACtC;AAEjB,CAAC","names":["React","getSlots","renderField_unstable","state","slots","slotProps","root","label","children","validationMessage","validationMessageIcon","hint"],"sourceRoot":"../src/","sources":["packages/react-components/react-field/src/components/Field/renderField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FieldSlots, FieldState } from './Field.types';\n\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = (state: FieldState) => {\n  const { slots, slotProps } = getSlots<FieldSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.label && <slots.label {...slotProps.label} />}\n      {slotProps.root.children}\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/components/Field/useField.js

@@ -7,37 +7,6 @@ const validationMessageIcons = {
   warning: /*#__PURE__*/React.createElement(Warning12Filled, null),
   success: /*#__PURE__*/React.createElement(CheckmarkCircle12Filled, null)
 };
-/**
- * Partition the props used by the Field itself, from the props that are passed to the underlying field component.
- */
-export const getPartitionedFieldProps = props => {
-  const {
-    className,
-    control,
-    hint,
-    label,
-    orientation,
-    root,
-    style,
-    validationMessage,
-    validationMessageIcon,
-    validationState,
-    ...restOfProps
-  } = props;
-  const fieldProps = {
-    className,
-    control,
-    hint,
-    label,
-    orientation,
-    root,
-    style,
-    validationMessage,
-    validationMessageIcon,
-    validationState
-  };
-  return [fieldProps, restOfProps];
-};
 /**
  * Create the state required to render Field.
  *
@@ -45,54 +14,58 @@ export const getPartitionedFieldProps = props => {
  * 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 const useField_unstable = (props, ref, params) => {
-  var _a, _b, _c;
-  const [fieldProps, controlProps] = getPartitionedFieldProps(props);
+export const useField_unstable = (props, ref) => {
+  var _a, _b, _c, _d;
   const {
+    children,
     orientation = 'vertical',
-    validationState
-  } = fieldProps;
-  const {
-    labelConnection = 'htmlFor',
-    ariaInvalidOnError = true
-  } = params;
+    required,
+    validationState,
+    size
+  } = props;
   const baseId = useId('field-');
-  const root = resolveShorthand(fieldProps.root, {
-    required: true,
-    defaultProps: getNativeElementProps('div', fieldProps)
-  });
-  const label = resolveShorthand(fieldProps.label, {
+  const root = getNativeElementProps('div', {
+    ...props,
+    ref
+  }, /*excludedPropNames:*/['children']);
+  const label = resolveShorthand(props.label, {
     defaultProps: {
       id: baseId + '__label',
-      required: controlProps.required,
-      size: typeof controlProps.size === 'string' ? controlProps.size : undefined
+      required,
+      size
       // htmlFor is handled below
     }
   });
 
-  const validationMessage = resolveShorthand(fieldProps.validationMessage, {
+  const validationMessage = resolveShorthand(props.validationMessage, {
     defaultProps: {
       id: baseId + '__validationMessage',
       role: validationState === 'error' ? 'alert' : undefined
     }
   });
-  const hint = resolveShorthand(fieldProps.hint, {
+  const hint = resolveShorthand(props.hint, {
     defaultProps: {
       id: baseId + '__hint'
     }
   });
-  const validationMessageIcon = resolveShorthand(fieldProps.validationMessageIcon, {
+  const validationMessageIcon = resolveShorthand(props.validationMessageIcon, {
     required: !!validationState,
     defaultProps: {
       children: validationState ? validationMessageIcons[validationState] : undefined
     }
   });
-  // Hook up aria props on the control
-  if (label && labelConnection === 'aria-labelledby') {
+  const controlProps = /*#__PURE__*/React.isValidElement(children) ? {
+    ...children.props
+  } : {};
+  if (label) {
     (_a = controlProps['aria-labelledby']) !== null && _a !== void 0 ? _a : controlProps['aria-labelledby'] = label.id;
+    if (!label.htmlFor) {
+      // Assign the child a generated ID if doesn't already have an ID
+      (_b = controlProps.id) !== null && _b !== void 0 ? _b : controlProps.id = baseId + '__control';
+      label.htmlFor = controlProps.id;
+    }
   }
   if (validationMessage || hint) {
     // The control is described by the validation message, or hint, or both
@@ -100,39 +73,32 @@ export const useField_unstable = (props, ref, params) => {
     // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933
     controlProps['aria-describedby'] = [validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.id, hint === null || hint === void 0 ? void 0 : hint.id, controlProps['aria-describedby']].filter(Boolean).join(' ');
   }
-  if (validationState === 'error' && ariaInvalidOnError) {
-    (_b = controlProps['aria-invalid']) !== null && _b !== void 0 ? _b : controlProps['aria-invalid'] = true;
+  if (validationState === 'error') {
+    (_c = controlProps['aria-invalid']) !== null && _c !== void 0 ? _c : controlProps['aria-invalid'] = true;
   }
-  const control = resolveShorthand(fieldProps.control, {
-    required: true,
-    defaultProps: {
-      ref,
-      id: baseId + '__control',
-      ...controlProps
-    }
-  });
-  if (label && labelConnection === 'htmlFor') {
-    (_c = label.htmlFor) !== null && _c !== void 0 ? _c : label.htmlFor = control.id;
+  if (required) {
+    (_d = controlProps['aria-required']) !== null && _d !== void 0 ? _d : controlProps['aria-required'] = true;
+  }
+  if ( /*#__PURE__*/React.isValidElement(children)) {
+    root.children = /*#__PURE__*/React.cloneElement(children, controlProps);
+  } else if (typeof children === 'function') {
+    root.children = children(controlProps);
   }
-  const state = {
+  return {
     orientation,
     validationState,
-    classNames: params.classNames,
     components: {
       root: 'div',
-      control: params.component,
       label: Label,
       validationMessage: 'div',
       validationMessageIcon: 'span',
       hint: 'div'
     },
     root,
-    control,
     label,
     validationMessageIcon,
     validationMessage,
     hint
   };
-  return state;
 };
 //# sourceMappingURL=useField.js.map

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

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["React","CheckmarkCircle12Filled","ErrorCircle12Filled","Warning12Filled","Label","getNativeElementProps","resolveShorthand","useId","validationMessageIcons","error","warning","success","getPartitionedFieldProps","props","className","control","hint","label","orientation","root","style","validationMessage","validationMessageIcon","validationState","restOfProps","fieldProps","useField_unstable","ref","params","controlProps","labelConnection","ariaInvalidOnError","baseId","required","defaultProps","id","size","undefined","role","children","filter","Boolean","join","htmlFor","state","classNames","components","component"],"sourceRoot":"../src/","sources":["packages/react-components/react-field/src/components/Field/useField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { FieldConfig, FieldControl, FieldPropsWithOptionalComponentProps, FieldState } from './Field.types';\n\nconst validationMessageIcons = {\n  error: <ErrorCircle12Filled />,\n  warning: <Warning12Filled />,\n  success: <CheckmarkCircle12Filled />,\n} as const;\n\n/**\n * Partition the props used by the Field itself, from the props that are passed to the underlying field component.\n */\nexport const getPartitionedFieldProps = (props: FieldPropsWithOptionalComponentProps<FieldControl>) => {\n  const {\n    className,\n    control,\n    hint,\n    label,\n    orientation,\n    root,\n    style,\n    validationMessage,\n    validationMessageIcon,\n    validationState,\n    ...restOfProps\n  } = props;\n\n  const fieldProps = {\n    className,\n    control,\n    hint,\n    label,\n    orientation,\n    root,\n    style,\n    validationMessage,\n    validationMessageIcon,\n    validationState,\n  };\n\n  return [fieldProps, restOfProps] as const;\n};\n\n/**\n * Create the state required to render Field.\n *\n * The returned state can be modified with hooks such as useFieldStyles_unstable,\n * before being passed to renderField_unstable.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the control slot (primary slot)\n * @param params - Configuration parameters for this Field\n */\nexport const useField_unstable = <T extends FieldControl>(\n  props: FieldPropsWithOptionalComponentProps<T>,\n  ref: React.Ref<HTMLElement>,\n  params: FieldConfig<T>,\n): FieldState<T> => {\n  const [fieldProps, controlProps] = getPartitionedFieldProps(props);\n  const { orientation = 'vertical', validationState } = fieldProps;\n  const { labelConnection = 'htmlFor', ariaInvalidOnError = true } = params;\n\n  const baseId = useId('field-');\n\n  const root = resolveShorthand(fieldProps.root, {\n    required: true,\n    defaultProps: getNativeElementProps('div', fieldProps),\n  });\n\n  const label = resolveShorthand(fieldProps.label, {\n    defaultProps: {\n      id: baseId + '__label',\n      required: controlProps.required,\n      size: typeof controlProps.size === 'string' ? controlProps.size : undefined,\n      // htmlFor is handled below\n    },\n  });\n\n  const validationMessage = resolveShorthand(fieldProps.validationMessage, {\n    defaultProps: {\n      id: baseId + '__validationMessage',\n      role: validationState === 'error' ? 'alert' : undefined,\n    },\n  });\n\n  const hint = resolveShorthand(fieldProps.hint, {\n    defaultProps: {\n      id: baseId + '__hint',\n    },\n  });\n\n  const validationMessageIcon = resolveShorthand(fieldProps.validationMessageIcon, {\n    required: !!validationState,\n    defaultProps: {\n      children: validationState ? validationMessageIcons[validationState] : undefined,\n    },\n  });\n\n  // Hook up aria props on the control\n  if (label && labelConnection === 'aria-labelledby') {\n    controlProps['aria-labelledby'] ??= label.id;\n  }\n\n  if (validationMessage || hint) {\n    // The control is described by the validation message, or hint, or both\n    // We also preserve and append any aria-describedby supplied by the user\n    // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933\n    controlProps['aria-describedby'] = [validationMessage?.id, hint?.id, controlProps['aria-describedby']]\n      .filter(Boolean)\n      .join(' ');\n  }\n\n  if (validationState === 'error' && ariaInvalidOnError) {\n    controlProps['aria-invalid'] ??= true;\n  }\n\n  const control = resolveShorthand(fieldProps.control, {\n    required: true,\n    defaultProps: {\n      ref,\n      id: baseId + '__control',\n      ...controlProps,\n    },\n  });\n\n  if (label && labelConnection === 'htmlFor') {\n    label.htmlFor ??= control.id;\n  }\n\n  const state: FieldState<FieldControl> = {\n    orientation,\n    validationState,\n    classNames: params.classNames,\n    components: {\n      root: 'div',\n      control: params.component,\n      label: Label,\n      validationMessage: 'div',\n      validationMessageIcon: 'span',\n      hint: 'div',\n    },\n    root,\n    control,\n    label,\n    validationMessageIcon,\n    validationMessage,\n    hint,\n  };\n\n  return state as FieldState<T>;\n};\n"]}
+{"version":3,"mappings":"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","names":["React","CheckmarkCircle12Filled","ErrorCircle12Filled","Warning12Filled","Label","getNativeElementProps","resolveShorthand","useId","validationMessageIcons","error","warning","success","useField_unstable","props","ref","children","orientation","required","validationState","size","baseId","root","label","defaultProps","id","validationMessage","role","undefined","hint","validationMessageIcon","controlProps","isValidElement","htmlFor","filter","Boolean","join","cloneElement","components"],"sourceRoot":"../src/","sources":["packages/react-components/react-field/src/components/Field/useField.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { FieldChildProps, FieldProps, FieldState } from './Field.types';\n\nconst validationMessageIcons = {\n  error: <ErrorCircle12Filled />,\n  warning: <Warning12Filled />,\n  success: <CheckmarkCircle12Filled />,\n} as const;\n\n/**\n * Create the state required to render Field.\n *\n * The returned state can be modified with hooks such as useFieldStyles_unstable,\n * before being passed to renderField_unstable.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the root\n */\nexport const useField_unstable = (props: FieldProps, ref: React.Ref<HTMLDivElement>): FieldState => {\n  const { children, orientation = 'vertical', required, validationState, size } = props;\n\n  const baseId = useId('field-');\n\n  const root = getNativeElementProps('div', { ...props, ref }, /*excludedPropNames:*/ ['children']);\n\n  const label = resolveShorthand(props.label, {\n    defaultProps: {\n      id: baseId + '__label',\n      required,\n      size,\n      // htmlFor is handled below\n    },\n  });\n\n  const validationMessage = resolveShorthand(props.validationMessage, {\n    defaultProps: {\n      id: baseId + '__validationMessage',\n      role: validationState === 'error' ? 'alert' : undefined,\n    },\n  });\n\n  const hint = resolveShorthand(props.hint, {\n    defaultProps: {\n      id: baseId + '__hint',\n    },\n  });\n\n  const validationMessageIcon = resolveShorthand(props.validationMessageIcon, {\n    required: !!validationState,\n    defaultProps: {\n      children: validationState ? validationMessageIcons[validationState] : undefined,\n    },\n  });\n\n  const controlProps: FieldChildProps = React.isValidElement(children) ? { ...children.props } : {};\n\n  if (label) {\n    controlProps['aria-labelledby'] ??= label.id;\n\n    if (!label.htmlFor) {\n      // Assign the child a generated ID if doesn't already have an ID\n      controlProps.id ??= baseId + '__control';\n      label.htmlFor = controlProps.id;\n    }\n  }\n\n  if (validationMessage || hint) {\n    // The control is described by the validation message, or hint, or both\n    // We also preserve and append any aria-describedby supplied by the user\n    // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933\n    controlProps['aria-describedby'] = [validationMessage?.id, hint?.id, controlProps['aria-describedby']]\n      .filter(Boolean)\n      .join(' ');\n  }\n\n  if (validationState === 'error') {\n    controlProps['aria-invalid'] ??= true;\n  }\n\n  if (required) {\n    controlProps['aria-required'] ??= true;\n  }\n\n  if (React.isValidElement(children)) {\n    root.children = React.cloneElement(children, controlProps);\n  } else if (typeof children === 'function') {\n    root.children = children(controlProps);\n  }\n\n  return {\n    orientation,\n    validationState,\n    components: {\n      root: 'div',\n      label: Label,\n      validationMessage: 'div',\n      validationMessageIcon: 'span',\n      hint: 'div',\n    },\n    root,\n    label,\n    validationMessageIcon,\n    validationMessage,\n    hint,\n  };\n};\n"]}