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

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

@@ -1,32 +1,12 @@
 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;
+    exports.useField_unstable = 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.
      *
@@ -34,46 +14,46 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-icons", "@fluen
      * 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
      */
-    var useField_unstable = function (props, ref, params) {
-        var _a, _b, _c;
-        var _d = exports.getPartitionedFieldProps(props), fieldProps = _d[0], controlProps = _d[1];
-        var _e = fieldProps.orientation, orientation = _e === void 0 ? 'vertical' : _e, validationState = fieldProps.validationState;
-        var _f = params.labelConnection, labelConnection = _f === void 0 ? 'htmlFor' : _f, _g = params.ariaInvalidOnError, ariaInvalidOnError = _g === void 0 ? true : _g;
+    var useField_unstable = function (props, ref) {
+        var _a, _b, _c, _d;
+        var children = props.children, _e = props.orientation, orientation = _e === void 0 ? 'vertical' : _e, required = props.required, validationState = props.validationState, size = props.size;
         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 label = react_utilities_1.resolveShorthand(fieldProps.label, {
+        var root = react_utilities_1.getNativeElementProps('div', tslib_1.__assign(tslib_1.__assign({}, props), { ref: ref }), /*excludedPropNames:*/ ['children']);
+        var label = react_utilities_1.resolveShorthand(props.label, {
             defaultProps: {
                 id: baseId + '__label',
-                required: controlProps.required,
-                size: typeof controlProps.size === 'string' ? controlProps.size : undefined,
+                required: required,
+                size: size,
                 // htmlFor is handled below
             },
         });
-        var validationMessage = react_utilities_1.resolveShorthand(fieldProps.validationMessage, {
+        var validationMessage = react_utilities_1.resolveShorthand(props.validationMessage, {
             defaultProps: {
                 id: baseId + '__validationMessage',
+                role: validationState === 'error' ? 'alert' : undefined,
             },
         });
-        var hint = react_utilities_1.resolveShorthand(fieldProps.hint, {
+        var hint = react_utilities_1.resolveShorthand(props.hint, {
             defaultProps: {
                 id: baseId + '__hint',
             },
         });
-        var validationMessageIcon = react_utilities_1.resolveShorthand(fieldProps.validationMessageIcon, {
+        var validationMessageIcon = react_utilities_1.resolveShorthand(props.validationMessageIcon, {
             required: !!validationState,
             defaultProps: {
                 children: validationState ? validationMessageIcons[validationState] : undefined,
             },
         });
-        // Hook up aria props on the control
-        if (label && labelConnection === 'aria-labelledby') {
+        var controlProps = React.isValidElement(children) ? tslib_1.__assign({}, 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
@@ -83,36 +63,34 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-icons", "@fluen
                 .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);
         }
-        var control = react_utilities_1.resolveShorthand(fieldProps.control, {
-            required: true,
-            defaultProps: tslib_1.__assign({ ref: 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 (React.isValidElement(children)) {
+            root.children = React.cloneElement(children, controlProps);
+        }
+        else if (typeof children === 'function') {
+            root.children = children(controlProps);
         }
-        var state = {
+        return {
             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;
 });

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

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

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

@@ -1,80 +1,79 @@
 define(["require", "exports", "tslib", "@fluentui/react-theme", "@griffel/react"], function (require, exports, tslib_1, react_theme_1, react_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.useFieldStyles_unstable = exports.getFieldClassNames = void 0;
-    var getFieldClassNames = function (name) { return ({
-        root: "fui-" + name,
-        control: "fui-" + name + "__control",
-        label: "fui-" + name + "__label",
-        validationMessage: "fui-" + name + "__validationMessage",
-        validationMessageIcon: "fui-" + name + "__validationMessageIcon",
-        hint: "fui-" + name + "__hint",
-    }); };
-    exports.getFieldClassNames = getFieldClassNames;
+    exports.useFieldStyles_unstable = exports.fieldClassNames = void 0;
+    exports.fieldClassNames = {
+        root: "fui-Field",
+        label: "fui-Field__label",
+        validationMessage: "fui-Field__validationMessage",
+        validationMessageIcon: "fui-Field__validationMessageIcon",
+        hint: "fui-Field__hint",
+    };
+    // Size of the icon in the validation message
+    var iconSize = '12px';
     /**
      * Styles for the root slot
      */
     var useRootStyles = react_1.makeStyles({
         base: {
             display: 'grid',
-            gridAutoFlow: 'row',
-            gridTemplateColumns: 'auto 1fr',
-            gridTemplateAreas: "\n      \"label label\"\n      \"control control\"\n      \"validationIcon validationMessage\"\n      \"hint hint\"\n    ",
-            justifyItems: 'start',
         },
+        // In horizontal layout, the field is a grid with the label taking up the entire first column.
+        // The last row is slack space in case the label is taller than the rest of the content.
         horizontal: {
-            gridTemplateColumns: '33% auto 1fr',
-            gridTemplateAreas: "\n      \"label control control\"\n      \"label validationIcon validationMessage\"\n      \"label hint hint\"\n      \"label . .\"\n    ",
-        },
-        label: {
-            gridColumnStart: 'label',
-            gridColumnEnd: 'label',
-            gridRowStart: 'label',
-            gridRowEnd: 'label',
-        },
-        control: {
-            gridColumnStart: 'control',
-            gridColumnEnd: 'control',
-        },
-        validationIcon: {
-            gridColumnStart: 'validationIcon',
-            gridColumnEnd: 'validationIcon',
+            gridTemplateColumns: '33% 1fr',
+            gridTemplateRows: 'auto auto auto 1fr',
         },
-        validationMessage: {
-            gridColumnStart: 'validationMessage',
-            gridColumnEnd: 'validationMessage',
-        },
-        hint: {
-            gridColumnStart: 'hint',
-            gridColumnEnd: 'hint',
+        // In horizontal layout without a label, replace the label's column with padding.
+        // This lets grid auto-flow properly place the other children, and keeps fields with and without labels aligned.
+        horizontalNoLabel: {
+            paddingLeft: '33%',
+            gridTemplateColumns: '1fr',
         },
     });
     var useLabelStyles = react_1.makeStyles({
         base: {
-            marginTop: react_theme_1.tokens.spacingVerticalXXS,
+            paddingTop: react_theme_1.tokens.spacingVerticalXXS,
+            paddingBottom: react_theme_1.tokens.spacingVerticalXXS,
+        },
+        large: {
+            paddingTop: '1px',
+            paddingBottom: '1px',
+        },
+        vertical: {
             marginBottom: react_theme_1.tokens.spacingVerticalXXS,
         },
+        verticalLarge: {
+            marginBottom: react_theme_1.tokens.spacingVerticalXS,
+        },
         horizontal: {
             marginRight: react_theme_1.tokens.spacingHorizontalM,
-            alignSelf: 'start',
-            justifySelf: 'stretch',
+            gridRowStart: '1',
+            gridRowEnd: '-1',
         },
     });
+    var useSecondaryTextBaseClassName = react_1.makeResetStyles(tslib_1.__assign({ marginTop: react_theme_1.tokens.spacingVerticalXXS, color: react_theme_1.tokens.colorNeutralForeground3 }, react_theme_1.typographyStyles.caption1));
     var useSecondaryTextStyles = react_1.makeStyles({
-        base: tslib_1.__assign({ marginTop: react_theme_1.tokens.spacingVerticalXXS, color: react_theme_1.tokens.colorNeutralForeground3 }, react_theme_1.typographyStyles.caption1),
         error: {
             color: react_theme_1.tokens.colorPaletteRedForeground1,
         },
+        withIcon: {
+            // Add a gutter for the icon, to allow multiple lines of text to line up to the right of the icon.
+            paddingLeft: "calc(" + iconSize + " + " + react_theme_1.tokens.spacingHorizontalXS + ")",
+        },
+    });
+    var useValidationMessageIconBaseClassName = react_1.makeResetStyles({
+        display: 'inline-block',
+        fontSize: iconSize,
+        // Negative left margin puts the icon in the gutter of the validation message div's withIcon style.
+        marginLeft: "calc(-" + iconSize + " - " + react_theme_1.tokens.spacingHorizontalXS + ")",
+        marginRight: react_theme_1.tokens.spacingHorizontalXS,
+        // Line height of 0 prevents the verticalAlign from affecting the line height of the text.
+        lineHeight: '0',
+        // Negative verticalAlign shifts the inline icon down to align with the text (effectively top padding).
+        verticalAlign: '-1px',
     });
     var useValidationMessageIconStyles = react_1.makeStyles({
-        base: {
-            display: 'block',
-            alignSelf: 'start',
-            fontSize: '12px',
-            lineHeight: '12px',
-            marginRight: react_theme_1.tokens.spacingHorizontalXS,
-            marginTop: react_theme_1.tokens.spacingVerticalXS,
-        },
         error: {
             color: react_theme_1.tokens.colorPaletteRedForeground1,
         },
@@ -89,28 +88,26 @@ define(["require", "exports", "tslib", "@fluentui/react-theme", "@griffel/react"
      * Apply styling to the Field slots based on the state
      */
     var useFieldStyles_unstable = function (state) {
-        var classNames = state.classNames;
         var validationState = state.validationState;
         var horizontal = state.orientation === 'horizontal';
         var rootStyles = useRootStyles();
-        state.root.className = react_1.mergeClasses(classNames.root, rootStyles.base, horizontal && rootStyles.horizontal, state.root.className);
-        if (state.control) {
-            state.control.className = react_1.mergeClasses(classNames.control, rootStyles.control, state.control.className);
-        }
+        state.root.className = react_1.mergeClasses(exports.fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);
         var labelStyles = useLabelStyles();
         if (state.label) {
-            state.label.className = react_1.mergeClasses(classNames.label, rootStyles.label, labelStyles.base, state.label.className);
+            state.label.className = react_1.mergeClasses(exports.fieldClassNames.label, labelStyles.base, horizontal && labelStyles.horizontal, !horizontal && labelStyles.vertical, state.label.size === 'large' && labelStyles.large, !horizontal && state.label.size === 'large' && labelStyles.verticalLarge, state.label.className);
         }
+        var validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
         var validationMessageIconStyles = useValidationMessageIconStyles();
         if (state.validationMessageIcon) {
-            state.validationMessageIcon.className = react_1.mergeClasses(classNames.validationMessageIcon, rootStyles.validationIcon, validationMessageIconStyles.base, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
+            state.validationMessageIcon.className = react_1.mergeClasses(exports.fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
         }
+        var secondaryTextBaseClassName = useSecondaryTextBaseClassName();
         var secondaryTextStyles = useSecondaryTextStyles();
         if (state.validationMessage) {
-            state.validationMessage.className = react_1.mergeClasses(classNames.validationMessage, rootStyles.validationMessage, secondaryTextStyles.base, validationState === 'error' && secondaryTextStyles.error, state.validationMessage.className);
+            state.validationMessage.className = react_1.mergeClasses(exports.fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);
         }
         if (state.hint) {
-            state.hint.className = react_1.mergeClasses(classNames.hint, secondaryTextStyles.base, rootStyles.hint, state.hint.className);
+            state.hint.className = react_1.mergeClasses(exports.fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);
         }
     };
     exports.useFieldStyles_unstable = useFieldStyles_unstable;

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

@@ -1 +1 @@
-{"version":3,"file":"useFieldStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/useFieldStyles.ts"],"names":[],"mappings":";;;;IAKO,IAAM,kBAAkB,GAAG,UAAC,IAAY,IAA+C,OAAA,CAAC;QAC7F,IAAI,EAAE,SAAO,IAAM;QACnB,OAAO,EAAE,SAAO,IAAI,cAAW;QAC/B,KAAK,EAAE,SAAO,IAAI,YAAS;QAC3B,iBAAiB,EAAE,SAAO,IAAI,wBAAqB;QACnD,qBAAqB,EAAE,SAAO,IAAI,4BAAyB;QAC3D,IAAI,EAAE,SAAO,IAAI,WAAQ;KAC1B,CAAC,EAP4F,CAO5F,CAAC;IAPU,QAAA,kBAAkB,sBAO5B;IAEH;;OAEG;IACH,IAAM,aAAa,GAAG,kBAAU,CAAC;QAC/B,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM;YACf,YAAY,EAAE,KAAK;YACnB,mBAAmB,EAAE,UAAU;YAC/B,iBAAiB,EAAE,2HAKlB;YACD,YAAY,EAAE,OAAO;SACtB;QAED,UAAU,EAAE;YACV,mBAAmB,EAAE,cAAc;YACnC,iBAAiB,EAAE,2IAKlB;SACF;QAED,KAAK,EAAE;YACL,eAAe,EAAE,OAAO;YACxB,aAAa,EAAE,OAAO;YACtB,YAAY,EAAE,OAAO;YACrB,UAAU,EAAE,OAAO;SACpB;QAED,OAAO,EAAE;YACP,eAAe,EAAE,SAAS;YAC1B,aAAa,EAAE,SAAS;SACzB;QAED,cAAc,EAAE;YACd,eAAe,EAAE,gBAAgB;YACjC,aAAa,EAAE,gBAAgB;SAChC;QAED,iBAAiB,EAAE;YACjB,eAAe,EAAE,mBAAmB;YACpC,aAAa,EAAE,mBAAmB;SACnC;QAED,IAAI,EAAE;YACJ,eAAe,EAAE,MAAM;YACvB,aAAa,EAAE,MAAM;SACtB;KACF,CAAC,CAAC;IAEH,IAAM,cAAc,GAAG,kBAAU,CAAC;QAChC,IAAI,EAAE;YACJ,SAAS,EAAE,oBAAM,CAAC,kBAAkB;YACpC,YAAY,EAAE,oBAAM,CAAC,kBAAkB;SACxC;QAED,UAAU,EAAE;YACV,WAAW,EAAE,oBAAM,CAAC,kBAAkB;YACtC,SAAS,EAAE,OAAO;YAClB,WAAW,EAAE,SAAS;SACvB;KACF,CAAC,CAAC;IAEH,IAAM,sBAAsB,GAAG,kBAAU,CAAC;QACxC,IAAI,qBACF,SAAS,EAAE,oBAAM,CAAC,kBAAkB,EACpC,KAAK,EAAE,oBAAM,CAAC,uBAAuB,IAClC,8BAAgB,CAAC,QAAQ,CAC7B;QAED,KAAK,EAAE;YACL,KAAK,EAAE,oBAAM,CAAC,0BAA0B;SACzC;KACF,CAAC,CAAC;IAEH,IAAM,8BAA8B,GAAG,kBAAU,CAAC;QAChD,IAAI,EAAE;YACJ,OAAO,EAAE,OAAO;YAChB,SAAS,EAAE,OAAO;YAClB,QAAQ,EAAE,MAAM;YAChB,UAAU,EAAE,MAAM;YAClB,WAAW,EAAE,oBAAM,CAAC,mBAAmB;YACvC,SAAS,EAAE,oBAAM,CAAC,iBAAiB;SACpC;QAED,KAAK,EAAE;YACL,KAAK,EAAE,oBAAM,CAAC,0BAA0B;SACzC;QACD,OAAO,EAAE;YACP,KAAK,EAAE,oBAAM,CAAC,iCAAiC;SAChD;QACD,OAAO,EAAE;YACP,KAAK,EAAE,oBAAM,CAAC,4BAA4B;SAC3C;KACF,CAAC,CAAC;IAEH;;OAEG;IACI,IAAM,uBAAuB,GAAG,UAAyB,KAAoB;QAClF,IAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC;QACpC,IAAM,eAAe,GAAgD,KAAK,CAAC,eAAe,CAAC;QAC3F,IAAM,UAAU,GAAG,KAAK,CAAC,WAAW,KAAK,YAAY,CAAC;QAEtD,IAAM,UAAU,GAAG,aAAa,EAAE,CAAC;QACnC,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CACjC,UAAU,CAAC,IAAI,EACf,UAAU,CAAC,IAAI,EACf,UAAU,IAAI,UAAU,CAAC,UAAU,EACnC,KAAK,CAAC,IAAI,CAAC,SAAS,CACrB,CAAC;QAEF,IAAI,KAAK,CAAC,OAAO,EAAE;YACjB,KAAK,CAAC,OAAO,CAAC,SAAS,GAAG,oBAAY,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;SACzG;QAED,IAAM,WAAW,GAAG,cAAc,EAAE,CAAC;QACrC,IAAI,KAAK,CAAC,KAAK,EAAE;YACf,KAAK,CAAC,KAAK,CAAC,SAAS,GAAG,oBAAY,CAAC,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;SACnH;QAED,IAAM,2BAA2B,GAAG,8BAA8B,EAAE,CAAC;QACrE,IAAI,KAAK,CAAC,qBAAqB,EAAE;YAC/B,KAAK,CAAC,qBAAqB,CAAC,SAAS,GAAG,oBAAY,CAClD,UAAU,CAAC,qBAAqB,EAChC,UAAU,CAAC,cAAc,EACzB,2BAA2B,CAAC,IAAI,EAChC,CAAC,CAAC,eAAe,IAAI,2BAA2B,CAAC,eAAe,CAAC,EACjE,KAAK,CAAC,qBAAqB,CAAC,SAAS,CACtC,CAAC;SACH;QAED,IAAM,mBAAmB,GAAG,sBAAsB,EAAE,CAAC;QACrD,IAAI,KAAK,CAAC,iBAAiB,EAAE;YAC3B,KAAK,CAAC,iBAAiB,CAAC,SAAS,GAAG,oBAAY,CAC9C,UAAU,CAAC,iBAAiB,EAC5B,UAAU,CAAC,iBAAiB,EAC5B,mBAAmB,CAAC,IAAI,EACxB,eAAe,KAAK,OAAO,IAAI,mBAAmB,CAAC,KAAK,EACxD,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAClC,CAAC;SACH;QAED,IAAI,KAAK,CAAC,IAAI,EAAE;YACd,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CACjC,UAAU,CAAC,IAAI,EACf,mBAAmB,CAAC,IAAI,EACxB,UAAU,CAAC,IAAI,EACf,KAAK,CAAC,IAAI,CAAC,SAAS,CACrB,CAAC;SACH;IACH,CAAC,CAAC;IApDW,QAAA,uBAAuB,2BAoDlC","sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { FieldControl, FieldProps, FieldSlots, FieldState } from './Field.types';\n\nexport const getFieldClassNames = (name: string): SlotClassNames<FieldSlots<FieldControl>> => ({\n  root: `fui-${name}`,\n  control: `fui-${name}__control`,\n  label: `fui-${name}__label`,\n  validationMessage: `fui-${name}__validationMessage`,\n  validationMessageIcon: `fui-${name}__validationMessageIcon`,\n  hint: `fui-${name}__hint`,\n});\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'grid',\n    gridAutoFlow: 'row',\n    gridTemplateColumns: 'auto 1fr',\n    gridTemplateAreas: `\n      \"label label\"\n      \"control control\"\n      \"validationIcon validationMessage\"\n      \"hint hint\"\n    `,\n    justifyItems: 'start',\n  },\n\n  horizontal: {\n    gridTemplateColumns: '33% auto 1fr',\n    gridTemplateAreas: `\n      \"label control control\"\n      \"label validationIcon validationMessage\"\n      \"label hint hint\"\n      \"label . .\"\n    `,\n  },\n\n  label: {\n    gridColumnStart: 'label',\n    gridColumnEnd: 'label',\n    gridRowStart: 'label',\n    gridRowEnd: 'label',\n  },\n\n  control: {\n    gridColumnStart: 'control',\n    gridColumnEnd: 'control',\n  },\n\n  validationIcon: {\n    gridColumnStart: 'validationIcon',\n    gridColumnEnd: 'validationIcon',\n  },\n\n  validationMessage: {\n    gridColumnStart: 'validationMessage',\n    gridColumnEnd: 'validationMessage',\n  },\n\n  hint: {\n    gridColumnStart: 'hint',\n    gridColumnEnd: 'hint',\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  base: {\n    marginTop: tokens.spacingVerticalXXS,\n    marginBottom: tokens.spacingVerticalXXS,\n  },\n\n  horizontal: {\n    marginRight: tokens.spacingHorizontalM,\n    alignSelf: 'start',\n    justifySelf: 'stretch',\n  },\n});\n\nconst useSecondaryTextStyles = makeStyles({\n  base: {\n    marginTop: tokens.spacingVerticalXXS,\n    color: tokens.colorNeutralForeground3,\n    ...typographyStyles.caption1,\n  },\n\n  error: {\n    color: tokens.colorPaletteRedForeground1,\n  },\n});\n\nconst useValidationMessageIconStyles = makeStyles({\n  base: {\n    display: 'block',\n    alignSelf: 'start',\n    fontSize: '12px',\n    lineHeight: '12px',\n    marginRight: tokens.spacingHorizontalXS,\n    marginTop: tokens.spacingVerticalXS,\n  },\n\n  error: {\n    color: tokens.colorPaletteRedForeground1,\n  },\n  warning: {\n    color: tokens.colorPaletteDarkOrangeForeground1,\n  },\n  success: {\n    color: tokens.colorPaletteGreenForeground1,\n  },\n});\n\n/**\n * Apply styling to the Field slots based on the state\n */\nexport const useFieldStyles_unstable = <T extends FieldControl>(state: FieldState<T>) => {\n  const classNames = state.classNames;\n  const validationState: FieldProps<FieldControl>['validationState'] = state.validationState;\n  const horizontal = state.orientation === 'horizontal';\n\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(\n    classNames.root,\n    rootStyles.base,\n    horizontal && rootStyles.horizontal,\n    state.root.className,\n  );\n\n  if (state.control) {\n    state.control.className = mergeClasses(classNames.control, rootStyles.control, state.control.className);\n  }\n\n  const labelStyles = useLabelStyles();\n  if (state.label) {\n    state.label.className = mergeClasses(classNames.label, rootStyles.label, labelStyles.base, state.label.className);\n  }\n\n  const validationMessageIconStyles = useValidationMessageIconStyles();\n  if (state.validationMessageIcon) {\n    state.validationMessageIcon.className = mergeClasses(\n      classNames.validationMessageIcon,\n      rootStyles.validationIcon,\n      validationMessageIconStyles.base,\n      !!validationState && validationMessageIconStyles[validationState],\n      state.validationMessageIcon.className,\n    );\n  }\n\n  const secondaryTextStyles = useSecondaryTextStyles();\n  if (state.validationMessage) {\n    state.validationMessage.className = mergeClasses(\n      classNames.validationMessage,\n      rootStyles.validationMessage,\n      secondaryTextStyles.base,\n      validationState === 'error' && secondaryTextStyles.error,\n      state.validationMessage.className,\n    );\n  }\n\n  if (state.hint) {\n    state.hint.className = mergeClasses(\n      classNames.hint,\n      secondaryTextStyles.base,\n      rootStyles.hint,\n      state.hint.className,\n    );\n  }\n};\n"]}
+{"version":3,"file":"useFieldStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/useFieldStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { FieldSlots, FieldState } from './Field.types';\n\nexport const fieldClassNames: SlotClassNames<FieldSlots> = {\n  root: `fui-Field`,\n  label: `fui-Field__label`,\n  validationMessage: `fui-Field__validationMessage`,\n  validationMessageIcon: `fui-Field__validationMessageIcon`,\n  hint: `fui-Field__hint`,\n};\n\n// Size of the icon in the validation message\nconst iconSize = '12px';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'grid',\n  },\n\n  // In horizontal layout, the field is a grid with the label taking up the entire first column.\n  // The last row is slack space in case the label is taller than the rest of the content.\n  horizontal: {\n    gridTemplateColumns: '33% 1fr',\n    gridTemplateRows: 'auto auto auto 1fr',\n  },\n\n  // In horizontal layout without a label, replace the label's column with padding.\n  // This lets grid auto-flow properly place the other children, and keeps fields with and without labels aligned.\n  horizontalNoLabel: {\n    paddingLeft: '33%',\n    gridTemplateColumns: '1fr',\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  base: {\n    paddingTop: tokens.spacingVerticalXXS,\n    paddingBottom: tokens.spacingVerticalXXS,\n  },\n\n  large: {\n    paddingTop: '1px',\n    paddingBottom: '1px',\n  },\n\n  vertical: {\n    marginBottom: tokens.spacingVerticalXXS,\n  },\n\n  verticalLarge: {\n    marginBottom: tokens.spacingVerticalXS,\n  },\n\n  horizontal: {\n    marginRight: tokens.spacingHorizontalM,\n    gridRowStart: '1',\n    gridRowEnd: '-1',\n  },\n});\n\nconst useSecondaryTextBaseClassName = makeResetStyles({\n  marginTop: tokens.spacingVerticalXXS,\n  color: tokens.colorNeutralForeground3,\n  ...typographyStyles.caption1,\n});\n\nconst useSecondaryTextStyles = makeStyles({\n  error: {\n    color: tokens.colorPaletteRedForeground1,\n  },\n\n  withIcon: {\n    // Add a gutter for the icon, to allow multiple lines of text to line up to the right of the icon.\n    paddingLeft: `calc(${iconSize} + ${tokens.spacingHorizontalXS})`,\n  },\n});\n\nconst useValidationMessageIconBaseClassName = makeResetStyles({\n  display: 'inline-block',\n  fontSize: iconSize,\n  // Negative left margin puts the icon in the gutter of the validation message div's withIcon style.\n  marginLeft: `calc(-${iconSize} - ${tokens.spacingHorizontalXS})`,\n  marginRight: tokens.spacingHorizontalXS,\n  // Line height of 0 prevents the verticalAlign from affecting the line height of the text.\n  lineHeight: '0',\n  // Negative verticalAlign shifts the inline icon down to align with the text (effectively top padding).\n  verticalAlign: '-1px',\n});\n\nconst useValidationMessageIconStyles = makeStyles({\n  error: {\n    color: tokens.colorPaletteRedForeground1,\n  },\n  warning: {\n    color: tokens.colorPaletteDarkOrangeForeground1,\n  },\n  success: {\n    color: tokens.colorPaletteGreenForeground1,\n  },\n});\n\n/**\n * Apply styling to the Field slots based on the state\n */\nexport const useFieldStyles_unstable = (state: FieldState) => {\n  const { validationState } = state;\n  const horizontal = state.orientation === 'horizontal';\n\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(\n    fieldClassNames.root,\n    rootStyles.base,\n    horizontal && rootStyles.horizontal,\n    horizontal && !state.label && rootStyles.horizontalNoLabel,\n    state.root.className,\n  );\n\n  const labelStyles = useLabelStyles();\n  if (state.label) {\n    state.label.className = mergeClasses(\n      fieldClassNames.label,\n      labelStyles.base,\n      horizontal && labelStyles.horizontal,\n      !horizontal && labelStyles.vertical,\n      state.label.size === 'large' && labelStyles.large,\n      !horizontal && state.label.size === 'large' && labelStyles.verticalLarge,\n      state.label.className,\n    );\n  }\n\n  const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();\n  const validationMessageIconStyles = useValidationMessageIconStyles();\n  if (state.validationMessageIcon) {\n    state.validationMessageIcon.className = mergeClasses(\n      fieldClassNames.validationMessageIcon,\n      validationMessageIconBaseClassName,\n      !!validationState && validationMessageIconStyles[validationState],\n      state.validationMessageIcon.className,\n    );\n  }\n\n  const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n  const secondaryTextStyles = useSecondaryTextStyles();\n  if (state.validationMessage) {\n    state.validationMessage.className = mergeClasses(\n      fieldClassNames.validationMessage,\n      secondaryTextBaseClassName,\n      validationState === 'error' && secondaryTextStyles.error,\n      !!state.validationMessageIcon && secondaryTextStyles.withIcon,\n      state.validationMessage.className,\n    );\n  }\n\n  if (state.hint) {\n    state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);\n  }\n};\n"]}

package/lib-amd/index.js

@@ -1,10 +1,13 @@
-define(["require", "exports", "./Field"], function (require, exports, Field_1) {
+define(["require", "exports", "./Field", "./util/makeDeprecatedField"], function (require, exports, Field_1, makeDeprecatedField_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.useField_unstable = exports.useFieldStyles_unstable = exports.renderField_unstable = exports.getFieldClassNames = void 0;
-    Object.defineProperty(exports, "getFieldClassNames", { enumerable: true, get: function () { return Field_1.getFieldClassNames; } });
+    exports.makeDeprecatedField = exports.getDeprecatedFieldClassNames = exports.useField_unstable = exports.useFieldStyles_unstable = exports.renderField_unstable = exports.fieldClassNames = exports.Field = void 0;
+    Object.defineProperty(exports, "Field", { enumerable: true, get: function () { return Field_1.Field; } });
+    Object.defineProperty(exports, "fieldClassNames", { enumerable: true, get: function () { return Field_1.fieldClassNames; } });
     Object.defineProperty(exports, "renderField_unstable", { enumerable: true, get: function () { return Field_1.renderField_unstable; } });
     Object.defineProperty(exports, "useFieldStyles_unstable", { enumerable: true, get: function () { return Field_1.useFieldStyles_unstable; } });
     Object.defineProperty(exports, "useField_unstable", { enumerable: true, get: function () { return Field_1.useField_unstable; } });
+    Object.defineProperty(exports, "getDeprecatedFieldClassNames", { enumerable: true, get: function () { return makeDeprecatedField_1.getDeprecatedFieldClassNames; } });
+    Object.defineProperty(exports, "makeDeprecatedField", { enumerable: true, get: function () { return makeDeprecatedField_1.makeDeprecatedField; } });
 });
 //# sourceMappingURL=index.js.map

package/lib-amd/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-field/src/index.ts"],"names":[],"mappings":";;;;IAAS,2GAAA,kBAAkB,OAAA;IAAE,6GAAA,oBAAoB,OAAA;IAAE,gHAAA,uBAAuB,OAAA;IAAE,0GAAA,iBAAiB,OAAA","sourcesContent":["export { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field';\nexport type { FieldConfig, FieldControl, FieldProps, FieldSlots, FieldState } from './Field';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-field/src/index.ts"],"names":[],"mappings":";;;;IAAS,8FAAA,KAAK,OAAA;IAAE,wGAAA,eAAe,OAAA;IAAE,6GAAA,oBAAoB,OAAA;IAAE,gHAAA,uBAAuB,OAAA;IAAE,0GAAA,iBAAiB,OAAA;IAIxF,mIAAA,4BAA4B,OAAA;IAAE,0HAAA,mBAAmB,OAAA","sourcesContent":["export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field';\nexport type { FieldProps, FieldSlots, FieldState } from './Field';\n\n// eslint-disable-next-line deprecation/deprecation\nexport { getDeprecatedFieldClassNames, makeDeprecatedField } from './util/makeDeprecatedField';\n// eslint-disable-next-line deprecation/deprecation\nexport type { DeprecatedFieldProps } from './util/makeDeprecatedField';\n"]}

package/lib-amd/util/makeDeprecatedField.js

@@ -0,0 +1,38 @@
+define(["require", "exports", "tslib", "react", "../Field"], function (require, exports, tslib_1, React, Field_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.getDeprecatedFieldClassNames = exports.makeDeprecatedField = void 0;
+    /**
+     * Partition the props used by the Field itself, from the props that are passed to the underlying field component.
+     */
+    function getPartitionedFieldProps(props) {
+        var className = props.className, control = props.control, hint = props.hint, label = props.label, orientation = props.orientation, required = props.required, root = props.root, size = props.size, style = props.style, validationMessage = props.validationMessage, validationMessageIcon = props.validationMessageIcon, validationState = props.validationState, restOfProps = tslib_1.__rest(props, ["className", "control", "hint", "label", "orientation", "required", "root", "size", "style", "validationMessage", "validationMessageIcon", "validationState"]);
+        return [
+            tslib_1.__assign({ className: className, hint: hint, label: label, orientation: orientation, required: required, size: size, style: style, validationMessage: validationMessage, validationMessageIcon: validationMessageIcon, validationState: validationState }, root),
+            tslib_1.__assign(tslib_1.__assign({ required: required, size: size }, restOfProps), control),
+        ];
+    }
+    /**
+     * @deprecated Only for use to make deprecated [Control]Field shim components.
+     * @internal
+     */
+    function makeDeprecatedField(Control, options) {
+        if (options === void 0) { options = {}; }
+        var _a = options.mapProps, mapProps = _a === void 0 ? function (props) { return props; } : _a, _b = options.displayName, displayName = _b === void 0 ? Control.displayName + "Field" : _b;
+        var DeprecatedField = React.forwardRef(function (props, ref) {
+            var _a = getPartitionedFieldProps(mapProps(props)), fieldProps = _a[0], controlProps = _a[1];
+            return (React.createElement(Field_1.Field, tslib_1.__assign({}, fieldProps),
+                React.createElement(Control, tslib_1.__assign({}, controlProps, { ref: ref }))));
+        });
+        DeprecatedField.displayName = displayName;
+        return DeprecatedField;
+    }
+    exports.makeDeprecatedField = makeDeprecatedField;
+    /**
+     * @deprecated Only for use to make deprecated [Control]Field shim components.
+     * @internal
+     */
+    var getDeprecatedFieldClassNames = function (controlRootClassName) { return (tslib_1.__assign(tslib_1.__assign({}, Field_1.fieldClassNames), { control: controlRootClassName })); };
+    exports.getDeprecatedFieldClassNames = getDeprecatedFieldClassNames;
+});
+//# sourceMappingURL=makeDeprecatedField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"makeDeprecatedField.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-field/src/util/makeDeprecatedField.tsx"],"names":[],"mappings":";;;;IAyBA;;OAEG;IACH,SAAS,wBAAwB,CAC/B,KAAiF;QAG/E,IAAA,SAAS,GAaP,KAAK,UAbE,EACT,OAAO,GAYL,KAAK,QAZA,EACP,IAAI,GAWF,KAAK,KAXH,EACJ,KAAK,GAUH,KAAK,MAVF,EACL,WAAW,GAST,KAAK,YATI,EACX,QAAQ,GAQN,KAAK,SARC,EACR,IAAI,GAOF,KAAK,KAPH,EACJ,IAAI,GAMF,KAAK,KANH,EACJ,KAAK,GAKH,KAAK,MALF,EACL,iBAAiB,GAIf,KAAK,kBAJU,EACjB,qBAAqB,GAGnB,KAAK,sBAHc,EACrB,eAAe,GAEb,KAAK,gBAFQ,EACZ,WAAW,kBACZ,KAAK,EAdH,8JAcL,CADe,CACN;QAEV,OAAO;+BAEH,SAAS,WAAA,EACT,IAAI,MAAA,EACJ,KAAK,OAAA,EACL,WAAW,aAAA,EACX,QAAQ,UAAA,EACR,IAAI,MAAA,EACJ,KAAK,OAAA,EACL,iBAAiB,mBAAA,EACjB,qBAAqB,uBAAA,EACrB,eAAe,iBAAA,IACZ,IAAI;gDAGP,QAAQ,UAAA,EACR,IAAI,MAAA,IACD,WAAW,GACX,OAAO;SAEb,CAAC;IACJ,CAAC;IAED;;;OAGG;IACH,SAAgB,mBAAmB,CACjC,OAA0C,EAC1C,OAGM;QAHN,wBAAA,EAAA,YAGM;QAEE,IAAA,KAA2E,OAAO,SAAzD,EAAzB,QAAQ,mBAAG,UAAA,KAAK,IAAI,OAAA,KAAK,EAAL,CAAK,KAAA,EAAE,KAAgD,OAAO,YAAZ,EAA3C,WAAW,mBAAM,OAAO,CAAC,WAAW,UAAO,KAAA,CAAa;QAE3F,IAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;YAC5C,IAAA,KAA6B,wBAAwB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAArE,UAAU,QAAA,EAAE,YAAY,QAA6C,CAAC;YAC7E,OAAO,CACL,oBAAC,aAAK,uBAAK,UAAU;gBAEnB,oBAAC,OAAO,uBAAM,YAAoB,IAAE,GAAG,EAAE,GAAU,IAAI,CACjD,CACT,CAAC;QACJ,CAAC,CAA4D,CAAC;QAE9D,eAAe,CAAC,WAAW,GAAG,WAAW,CAAC;QAE1C,OAAO,eAAe,CAAC;IACzB,CAAC;IAtBD,kDAsBC;IAED;;;OAGG;IACI,IAAM,4BAA4B,GAAG,UAAC,oBAA4B,IAAK,OAAA,uCACzE,uBAAe,KAClB,OAAO,EAAE,oBAAoB,IAC7B,EAH4E,CAG5E,CAAC;IAHU,QAAA,4BAA4B,gCAGtC","sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport * as React from 'react';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from '../Field';\nimport { Field, fieldClassNames } from '../Field';\n\n/**\n * @deprecated Only for use to make deprecated [Control]Field shim components.\n * @internal\n */\nexport type DeprecatedFieldProps<ControlProps> = ControlProps & {\n  root?: FieldProps;\n  control?: ControlProps;\n} & Pick<\n    FieldProps,\n    | 'className'\n    | 'hint'\n    | 'label'\n    | 'orientation'\n    | 'style'\n    | 'validationMessage'\n    | 'validationMessageIcon'\n    | 'validationState'\n  >;\n\n/**\n * Partition the props used by the Field itself, from the props that are passed to the underlying field component.\n */\nfunction getPartitionedFieldProps<ControlProps>(\n  props: DeprecatedFieldProps<ControlProps> & Pick<FieldProps, 'required' | 'size'>,\n) {\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,\n    ...restOfProps\n  } = props;\n\n  return [\n    {\n      className,\n      hint,\n      label,\n      orientation,\n      required,\n      size,\n      style,\n      validationMessage,\n      validationMessageIcon,\n      validationState,\n      ...root,\n    },\n    {\n      required,\n      size,\n      ...restOfProps,\n      ...control,\n    },\n  ];\n}\n\n/**\n * @deprecated Only for use to make deprecated [Control]Field shim components.\n * @internal\n */\nexport function makeDeprecatedField<ControlProps>(\n  Control: React.ComponentType<ControlProps>,\n  options: {\n    mapProps?: (props: DeprecatedFieldProps<ControlProps>) => DeprecatedFieldProps<ControlProps>;\n    displayName?: string;\n  } = {},\n) {\n  const { mapProps = props => props, displayName = `${Control.displayName}Field` } = options;\n\n  const DeprecatedField = React.forwardRef((props, ref) => {\n    const [fieldProps, controlProps] = getPartitionedFieldProps(mapProps(props));\n    return (\n      <Field {...fieldProps}>\n        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}\n        <Control {...(controlProps as any)} ref={ref as any} />\n      </Field>\n    );\n  }) as ForwardRefComponent<DeprecatedFieldProps<ControlProps>>;\n\n  DeprecatedField.displayName = displayName;\n\n  return DeprecatedField;\n}\n\n/**\n * @deprecated Only for use to make deprecated [Control]Field shim components.\n * @internal\n */\nexport const getDeprecatedFieldClassNames = (controlRootClassName: string) => ({\n  ...fieldClassNames,\n  control: controlRootClassName,\n});\n"]}

package/lib-commonjs/components/Field/Field.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Field = void 0;
+const React = /*#__PURE__*/require("react");
+const renderField_1 = /*#__PURE__*/require("./renderField");
+const useField_1 = /*#__PURE__*/require("./useField");
+const useFieldStyles_1 = /*#__PURE__*/require("./useFieldStyles");
+exports.Field = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useField_1.useField_unstable(props, ref);
+  useFieldStyles_1.useFieldStyles_unstable(state);
+  return renderField_1.renderField_unstable(state);
+});
+exports.Field.displayName = 'Field';
+//# sourceMappingURL=Field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AAAA;AAGA;AACA;AACA;AAEaA,aAAK,gBAAoCC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpF,MAAMC,KAAK,GAAGC,4BAAiB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAC3CG,wCAAuB,CAACF,KAAK,CAAC;EAC9B,OAAOG,kCAAoB,CAACH,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFL,aAAK,CAACS,WAAW,GAAG,OAAO","names":["exports","React","forwardRef","props","ref","state","useField_1","useFieldStyles_1","renderField_1","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-commonjs/components/Field/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 const tslib_1 = /*#__PURE__*/require("tslib");
 tslib_1.__exportStar(require("./Field.types"), exports);
+tslib_1.__exportStar(require("./Field"), exports);
 tslib_1.__exportStar(require("./renderField"), exports);
 tslib_1.__exportStar(require("./useField"), exports);
 tslib_1.__exportStar(require("./useFieldStyles"), exports);

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-field/src/components/Field/index.ts"],"sourcesContent":["export * from './Field.types';\nexport * from './renderField';\nexport * from './useField';\nexport * from './useFieldStyles';\n"]}
+{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-field/src/components/Field/index.ts"],"sourcesContent":["export * from './Field.types';\nexport * from './Field';\nexport * from './renderField';\nexport * from './useField';\nexport * from './useFieldStyles';\n"]}

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

@@ -18,13 +18,11 @@ const renderField_unstable = state => {
     ...slotProps.root
   }, slots.label && React.createElement(slots.label, {
     ...slotProps.label
-  }), slots.control && React.createElement(slots.control, {
-    ...slotProps.control
-  }), slots.validationMessage && slots.validationMessageIcon && React.createElement(slots.validationMessageIcon, {
-    ...slotProps.validationMessageIcon
-  }), slots.validationMessage && React.createElement(slots.validationMessage, {
+  }), slotProps.root.children, slots.validationMessage && React.createElement(slots.validationMessage, {
     ...slotProps.validationMessage
-  }), slots.hint && React.createElement(slots.hint, {
+  }, slots.validationMessageIcon && React.createElement(slots.validationMessageIcon, {
+    ...slotProps.validationMessageIcon
+  }), slotProps.validationMessage.children), slots.hint && React.createElement(slots.hint, {
     ...slotProps.hint
   }));
 };

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,oBAAoB,GAA4BC,KAAoB,IAAI;EACnF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAA2BH,KAAiC,CAAC;EAElG,OACEI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BJ,KAAK,CAACK,KAAK,IAAIF,oBAACH,KAAK,CAACK,KAAK;IAAA,GAAKJ,SAAS,CAACI;EAAK,EAAI,EAEnDL,KAAK,CAACM,OAAO,IAAIH,oBAACH,KAAK,CAACM,OAAO;IAAA,GAAML,SAAS,CAACK;EAAe,EAAI,EAClEN,KAAK,CAACO,iBAAiB,IAAIP,KAAK,CAACQ,qBAAqB,IACrDL,oBAACH,KAAK,CAACQ,qBAAqB;IAAA,GAAKP,SAAS,CAACO;EAAqB,EACjE,EACAR,KAAK,CAACO,iBAAiB,IAAIJ,oBAACH,KAAK,CAACO,iBAAiB;IAAA,GAAKN,SAAS,CAACM;EAAiB,EAAI,EACvFP,KAAK,CAACS,IAAI,IAAIN,oBAACH,KAAK,CAACS,IAAI;IAAA,GAAKR,SAAS,CAACQ;EAAI,EAAI,CACtC;AAEjB,CAAC;AAfYC,4BAAoB","names":["renderField_unstable","state","slots","slotProps","react_utilities_1","React","root","label","control","validationMessage","validationMessageIcon","hint","exports"],"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 && slots.validationMessageIcon && (\n        <slots.validationMessageIcon {...slotProps.validationMessageIcon} />\n      )}\n      {slots.validationMessage && <slots.validationMessage {...slotProps.validationMessage} />}\n      {slots.hint && <slots.hint {...slotProps.hint} />}\n    </slots.root>\n  );\n};\n"]}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,oBAAoB,GAAIC,KAAiB,IAAI;EACxD,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAaH,KAAK,CAAC;EAExD,OACEI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BJ,KAAK,CAACK,KAAK,IAAIF,oBAACH,KAAK,CAACK,KAAK;IAAA,GAAKJ,SAAS,CAACI;EAAK,EAAI,EACnDJ,SAAS,CAACG,IAAI,CAACE,QAAQ,EACvBN,KAAK,CAACO,iBAAiB,IACtBJ,oBAACH,KAAK,CAACO,iBAAiB;IAAA,GAAKN,SAAS,CAACM;EAAiB,GACrDP,KAAK,CAACQ,qBAAqB,IAAIL,oBAACH,KAAK,CAACQ,qBAAqB;IAAA,GAAKP,SAAS,CAACO;EAAqB,EAAI,EACnGP,SAAS,CAACM,iBAAiB,CAACD,QAAQ,CAExC,EACAN,KAAK,CAACS,IAAI,IAAIN,oBAACH,KAAK,CAACS,IAAI;IAAA,GAAKR,SAAS,CAACQ;EAAI,EAAI,CACtC;AAEjB,CAAC;AAhBYC,4BAAoB","names":["renderField_unstable","state","slots","slotProps","react_utilities_1","React","root","label","children","validationMessage","validationMessageIcon","hint","exports"],"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"]}