@fluentui/react-field 9.0.0-alpha.2 → 9.0.0-alpha.20

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

@@ -0,0 +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';\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  none: undefined,\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 {\n    children,\n    orientation = 'vertical',\n    required,\n    validationState = props.validationMessage ? 'error' : 'none',\n    size,\n  } = 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 defaultIcon = validationMessageIcons[validationState];\n  const validationMessageIcon = resolveShorthand(props.validationMessageIcon, {\n    required: !!defaultIcon,\n    defaultProps: {\n      children: defaultIcon,\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

@@ -0,0 +1,115 @@
+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.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',
+        },
+        // 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% 1fr',
+            gridTemplateRows: 'auto auto auto 1fr',
+        },
+        // 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: {
+            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,
+            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({
+        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({
+        error: {
+            color: react_theme_1.tokens.colorPaletteRedForeground1,
+        },
+        warning: {
+            color: react_theme_1.tokens.colorPaletteDarkOrangeForeground1,
+        },
+        success: {
+            color: react_theme_1.tokens.colorPaletteGreenForeground1,
+        },
+    });
+    /**
+     * Apply styling to the Field slots based on the state
+     */
+    var useFieldStyles_unstable = function (state) {
+        var validationState = state.validationState;
+        var horizontal = state.orientation === 'horizontal';
+        var rootStyles = useRootStyles();
+        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(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(exports.fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== 'none' && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
+        }
+        var secondaryTextBaseClassName = useSecondaryTextBaseClassName();
+        var secondaryTextStyles = useSecondaryTextStyles();
+        if (state.validationMessage) {
+            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(exports.fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);
+        }
+    };
+    exports.useFieldStyles_unstable = useFieldStyles_unstable;
+});
+//# sourceMappingURL=useFieldStyles.js.map

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

@@ -0,0 +1 @@
+{"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 !== 'none' && 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

@@ -0,0 +1,13 @@
+define(["require", "exports", "./Field", "./util/makeDeprecatedField"], function (require, exports, Field_1, makeDeprecatedField_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    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

@@ -0,0 +1 @@
+{"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, _a = props.validationState, validationState = _a === void 0 ? 'none' : _a, 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,KAEE,KAAK,gBAFiB,EAAxB,eAAe,mBAAG,MAAM,KAAA,EACrB,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 = 'none',\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/Field.js

@@ -3,8 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./components/Field/index"), exports);
 //# sourceMappingURL=Field.js.map

package/lib-commonjs/Field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Field.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,0BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Field/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-field/src/Field.ts"],"sourcesContent":["export * from './components/Field/index';\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/Field.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
+{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}

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

@@ -3,14 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 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);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Field/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Field.types';\nexport * from './renderField';\nexport * from './useField';\nexport * from './useFieldStyles';\n"],"sourceRoot":"../src/"}
+{"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

@@ -4,28 +4,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderField_unstable = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Render the final JSX of Field
  */
-
-
 const renderField_unstable = state => {
   const {
     slots,
     slotProps
   } = react_utilities_1.getSlots(state);
-  return React.createElement(slots.root, { ...slotProps.root
-  }, slots.label && React.createElement(slots.label, { ...slotProps.label
-  }), slots.control && React.createElement(slots.control, { ...slotProps.control
-  }), slots.validationMessage && React.createElement(slots.validationMessage, { ...slotProps.validationMessage
-  }, slots.validationMessageIcon && React.createElement(slots.validationMessageIcon, { ...slotProps.validationMessageIcon
-  }), slotProps.validationMessage.children), slots.hint && React.createElement(slots.hint, { ...slotProps.hint
+  return React.createElement(slots.root, {
+    ...slotProps.root
+  }, slots.label && React.createElement(slots.label, {
+    ...slotProps.label
+  }), slotProps.root.children, slots.validationMessage && React.createElement(slots.validationMessage, {
+    ...slotProps.validationMessage
+  }, slots.validationMessageIcon && React.createElement(slots.validationMessageIcon, {
+    ...slotProps.validationMessageIcon
+  }), slotProps.validationMessage.children), slots.hint && React.createElement(slots.hint, {
+    ...slotProps.hint
   }));
 };
-
 exports.renderField_unstable = renderField_unstable;
 //# sourceMappingURL=renderField.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Field/renderField.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,oBAAoB,GAA8B,KAA3B,IAAmD;EACrF,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAqC,KAArC,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,KAAN,IAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADlB,EAGG,KAAK,CAAC,OAAN,IAAiB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAM,SAAS,CAAC;EAAhB,CAAd,CAHpB,EAIG,KAAK,CAAC,iBAAN,IACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,iBAAP,EAAwB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAxB,EACG,KAAK,CAAC,qBAAN,IAA+B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,qBAAP,EAA4B,EAAA,GAAK,SAAS,CAAC;EAAf,CAA5B,CADlC,EAEG,SAAS,CAAC,iBAAV,CAA4B,QAF/B,CALJ,EAUG,KAAK,CAAC,IAAN,IAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAVjB,CADF;AAcD,CAjBM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FieldComponent, FieldSlots, FieldState } from './Field.types';\n\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = <T extends FieldComponent>(state: FieldState<T>) => {\n  const { slots, slotProps } = getSlots<FieldSlots<FieldComponent>>(state as FieldState<FieldComponent>);\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"],"sourceRoot":"../src/"}
+{"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"]}

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

@@ -3,62 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useField_unstable = exports.getPartitionedFieldProps = void 0;
-
+exports.useField_unstable = void 0;
 const React = /*#__PURE__*/require("react");
-
 const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
-
 const react_label_1 = /*#__PURE__*/require("@fluentui/react-label");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 const validationMessageIcons = {
   error: /*#__PURE__*/React.createElement(react_icons_1.ErrorCircle12Filled, null),
   warning: /*#__PURE__*/React.createElement(react_icons_1.Warning12Filled, null),
-  success: /*#__PURE__*/React.createElement(react_icons_1.CheckmarkCircle12Filled, null)
+  success: /*#__PURE__*/React.createElement(react_icons_1.CheckmarkCircle12Filled, null),
+  none: undefined
 };
-/**
- * Merge two possibly-undefined IDs for aria-describedby. If both IDs are defined, combines
- * them into a string separated by a space. Otherwise, returns just the defined ID (if any).
- */
-
-const mergeAriaDescribedBy = (a, b) => a && b ? `${a} ${b}` : a || b;
-/**
- * Partition the props used by the Field itself, from the props that are passed to the underlying field component.
- */
-
-
-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];
-};
-
-exports.getPartitionedFieldProps = getPartitionedFieldProps;
 /**
  * Create the state required to render Field.
  *
@@ -66,89 +21,93 @@ exports.getPartitionedFieldProps = getPartitionedFieldProps;
  * 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
  */
-
-const useField_unstable = (props, ref, params) => {
-  const [fieldProps, controlProps] = exports.getPartitionedFieldProps(props);
-  const baseId = react_utilities_1.useId('field-');
+const useField_unstable = (props, ref) => {
+  var _a, _b, _c, _d;
   const {
+    children,
     orientation = 'vertical',
-    validationState
-  } = fieldProps;
-  const root = react_utilities_1.resolveShorthand(fieldProps.root, {
-    required: true,
-    defaultProps: react_utilities_1.getNativeElementProps('div', fieldProps)
-  });
-  const label = react_utilities_1.resolveShorthand(fieldProps.label, {
+    required,
+    validationState = props.validationMessage ? 'error' : 'none',
+    size
+  } = props;
+  const baseId = react_utilities_1.useId('field-');
+  const root = react_utilities_1.getNativeElementProps('div', {
+    ...props,
+    ref
+  }, /*excludedPropNames:*/['children']);
+  const label = react_utilities_1.resolveShorthand(props.label, {
     defaultProps: {
       id: baseId + '__label',
-      required: controlProps.required,
-      size: typeof controlProps.size === 'string' ? controlProps.size : undefined // htmlFor is set below
-
+      required,
+      size
+      // htmlFor is handled below
     }
   });
-  const validationMessage = react_utilities_1.resolveShorthand(fieldProps.validationMessage, {
+
+  const validationMessage = react_utilities_1.resolveShorthand(props.validationMessage, {
     defaultProps: {
-      id: baseId + '__validationMessage'
+      id: baseId + '__validationMessage',
+      role: validationState === 'error' ? 'alert' : undefined
     }
   });
-  const hint = react_utilities_1.resolveShorthand(fieldProps.hint, {
+  const hint = react_utilities_1.resolveShorthand(props.hint, {
     defaultProps: {
       id: baseId + '__hint'
     }
   });
-  const validationMessageIcon = react_utilities_1.resolveShorthand(fieldProps.validationMessageIcon, {
-    required: !!validationState,
+  const defaultIcon = validationMessageIcons[validationState];
+  const validationMessageIcon = react_utilities_1.resolveShorthand(props.validationMessageIcon, {
+    required: !!defaultIcon,
     defaultProps: {
-      children: validationState ? validationMessageIcons[validationState] : undefined
+      children: defaultIcon
     }
   });
-  const {
-    labelConnection = 'htmlFor'
-  } = params;
-  const hasError = validationState === 'error';
-  const control = react_utilities_1.resolveShorthand(fieldProps.control, {
-    required: true,
-    defaultProps: {
-      ref,
-      // Add a default ID only if required for label's htmlFor prop
-      id: label && labelConnection === 'htmlFor' ? baseId + '__control' : undefined,
-      // Add aria-labelledby only if not using the label's htmlFor
-      'aria-labelledby': labelConnection !== 'htmlFor' ? label === null || label === void 0 ? void 0 : label.id : undefined,
-      'aria-describedby': hasError ? hint === null || hint === void 0 ? void 0 : hint.id : mergeAriaDescribedBy(validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.id, hint === null || hint === void 0 ? void 0 : hint.id),
-      'aria-errormessage': hasError ? validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.id : undefined,
-      'aria-invalid': hasError ? true : undefined,
-      ...controlProps
+  const controlProps = 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 (labelConnection === 'htmlFor' && label && !label.htmlFor) {
-    label.htmlFor = control.id;
   }
-
-  const state = {
+  if (validationMessage || hint) {
+    // The control is described by the validation message, or hint, or both
+    // We also preserve and append any aria-describedby supplied by the user
+    // 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') {
+    (_c = controlProps['aria-invalid']) !== null && _c !== void 0 ? _c : controlProps['aria-invalid'] = true;
+  }
+  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);
+  }
+  return {
     orientation,
     validationState,
-    classNames: params.classNames,
     components: {
       root: 'div',
-      control: params.component,
       label: react_label_1.Label,
-      validationMessage: 'span',
+      validationMessage: 'div',
       validationMessageIcon: 'span',
-      hint: 'span'
+      hint: 'div'
     },
     root,
-    control,
     label,
     validationMessageIcon,
     validationMessage,
     hint
   };
-  return state;
 };
-
 exports.useField_unstable = useField_unstable;
 //# sourceMappingURL=useField.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["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 {\n  FieldComponent,\n  FieldConfig,\n  FieldProps,\n  FieldPropsWithOptionalComponentProps,\n  FieldState,\n} from './Field.types';\n\nconst validationMessageIcons = {\n  error: <ErrorCircle12Filled />,\n  warning: <Warning12Filled />,\n  success: <CheckmarkCircle12Filled />,\n} as const;\n\n/**\n * Merge two possibly-undefined IDs for aria-describedby. If both IDs are defined, combines\n * them into a string separated by a space. Otherwise, returns just the defined ID (if any).\n */\nconst mergeAriaDescribedBy = (a?: string, b?: string) => (a && b ? `${a} ${b}` : a || b);\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 extends FieldProps<FieldComponent>>(props: Props) => {\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 FieldComponent>(\n  props: FieldPropsWithOptionalComponentProps<T>,\n  ref: React.Ref<HTMLElement>,\n  params: FieldConfig<T>,\n): FieldState<T> => {\n  const [fieldProps, controlProps] = getPartitionedFieldProps(props);\n\n  const baseId = useId('field-');\n\n  const { orientation = 'vertical', validationState } = fieldProps;\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 set 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  const { labelConnection = 'htmlFor' } = params;\n  const hasError = validationState === 'error';\n\n  const control = resolveShorthand(fieldProps.control, {\n    required: true,\n    defaultProps: {\n      ref,\n      // Add a default ID only if required for label's htmlFor prop\n      id: label && labelConnection === 'htmlFor' ? baseId + '__control' : undefined,\n      // Add aria-labelledby only if not using the label's htmlFor\n      'aria-labelledby': labelConnection !== 'htmlFor' ? label?.id : undefined,\n      'aria-describedby': hasError ? hint?.id : mergeAriaDescribedBy(validationMessage?.id, hint?.id),\n      'aria-errormessage': hasError ? validationMessage?.id : undefined,\n      'aria-invalid': hasError ? true : undefined,\n      ...controlProps,\n    },\n  });\n\n  if (labelConnection === 'htmlFor' && label && !label.htmlFor) {\n    label.htmlFor = control.id;\n  }\n\n  const state: FieldState<FieldComponent> = {\n    orientation,\n    validationState,\n    classNames: params.classNames,\n    components: {\n      root: 'div',\n      control: params.component,\n      label: Label,\n      validationMessage: 'span',\n      validationMessageIcon: 'span',\n      hint: 'span',\n    },\n    root,\n    control,\n    label,\n    validationMessageIcon,\n    validationMessage,\n    hint,\n  };\n\n  return state as FieldState<T>;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"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","names":["validationMessageIcons","error","React","react_icons_1","warning","success","none","undefined","useField_unstable","props","ref","children","orientation","required","validationState","validationMessage","size","baseId","react_utilities_1","root","label","defaultProps","id","role","hint","defaultIcon","validationMessageIcon","controlProps","isValidElement","htmlFor","filter","Boolean","join","cloneElement","components","react_label_1","exports"],"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  none: undefined,\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 {\n    children,\n    orientation = 'vertical',\n    required,\n    validationState = props.validationMessage ? 'error' : 'none',\n    size,\n  } = 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 defaultIcon = validationMessageIcons[validationState];\n  const validationMessageIcon = resolveShorthand(props.validationMessageIcon, {\n    required: !!defaultIcon,\n    defaultProps: {\n      children: defaultIcon,\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"]}