@fluentui/react-field 9.0.0-alpha.25 → 9.0.0-alpha.27

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

@@ -1 +1 @@
-{"version":3,"names":["react_theme_1","require","react_1","exports","fieldClassNames","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","__styles","base","mc9l5x","horizontal","Budl1dq","wkccdc","horizontalNoLabel","uwmqm3","d","useLabelStyles","z8tnut","Byoj8tv","large","vertical","jrapky","verticalLarge","t21cq0","Ijaq50","nk6f5a","useSecondaryTextBaseClassName","__resetStyles","useSecondaryTextStyles","error","sj55zd","withIcon","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","warning","success","useFieldStyles_unstable","state","validationState","orientation","rootStyles","className","mergeClasses","labelStyles","size","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"sources":["../src/packages/react-components/react-field/src/components/Field/useFieldStyles.ts"],"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"],"mappings":"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"}
+{"version":3,"sources":["../../../lib/components/Field/useFieldStyles.js"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { __resetStyles, __styles, mergeClasses } from '@griffel/react';\nexport const fieldClassNames = {\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// Size of the icon in the validation message\nconst iconSize = '12px';\n/**\n * Styles for the root slot\n */\nconst useRootStyles = /*#__PURE__*/__styles({\n  base: {\n    mc9l5x: \"f13qh94s\"\n  },\n  horizontal: {\n    Budl1dq: \"f2wwaib\",\n    wkccdc: \"f1645dqt\"\n  },\n  horizontalNoLabel: {\n    uwmqm3: [\"f15jqgz8\", \"fggqkej\"],\n    Budl1dq: \"f1c2z91y\"\n  }\n}, {\n  d: [\".f13qh94s{display:grid;}\", \".f2wwaib{grid-template-columns:33% 1fr;}\", \".f1645dqt{grid-template-rows:auto auto auto 1fr;}\", \".f15jqgz8{padding-left:33%;}\", \".fggqkej{padding-right:33%;}\", \".f1c2z91y{grid-template-columns:1fr;}\"]\n});\nconst useLabelStyles = /*#__PURE__*/__styles({\n  base: {\n    z8tnut: \"fclwglc\",\n    Byoj8tv: \"fywfov9\"\n  },\n  large: {\n    z8tnut: \"f1sl3k7w\",\n    Byoj8tv: \"f1brlhvm\"\n  },\n  vertical: {\n    jrapky: \"fyacil5\"\n  },\n  verticalLarge: {\n    jrapky: \"f8l5zjj\"\n  },\n  horizontal: {\n    t21cq0: [\"fkujibs\", \"f199hnxi\"],\n    Ijaq50: \"f16hsg94\",\n    nk6f5a: \"f1nzqi2z\"\n  }\n}, {\n  d: [\".fclwglc{padding-top:var(--spacingVerticalXXS);}\", \".fywfov9{padding-bottom:var(--spacingVerticalXXS);}\", \".f1sl3k7w{padding-top:1px;}\", \".f1brlhvm{padding-bottom:1px;}\", \".fyacil5{margin-bottom:var(--spacingVerticalXXS);}\", \".f8l5zjj{margin-bottom:var(--spacingVerticalXS);}\", \".fkujibs{margin-right:var(--spacingHorizontalM);}\", \".f199hnxi{margin-left:var(--spacingHorizontalM);}\", \".f16hsg94{grid-row-start:1;}\", \".f1nzqi2z{grid-row-end:-1;}\"]\n});\nconst useSecondaryTextBaseClassName = /*#__PURE__*/__resetStyles(\"r5c4z9l\", null, [\".r5c4z9l{margin-top:var(--spacingVerticalXXS);color:var(--colorNeutralForeground3);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}\"]);\nconst useSecondaryTextStyles = /*#__PURE__*/__styles({\n  error: {\n    sj55zd: \"f1hcrxcs\"\n  },\n  withIcon: {\n    uwmqm3: [\"frawy03\", \"fg4c52\"]\n  }\n}, {\n  d: [\".f1hcrxcs{color:var(--colorPaletteRedForeground1);}\", \".frawy03{padding-left:calc(12px + var(--spacingHorizontalXS));}\", \".fg4c52{padding-right:calc(12px + var(--spacingHorizontalXS));}\"]\n});\nconst useValidationMessageIconBaseClassName = /*#__PURE__*/__resetStyles(\"ra7h1uk\", \"r1rh6bd7\", [\".ra7h1uk{display:inline-block;font-size:12px;margin-left:calc(-12px - var(--spacingHorizontalXS));margin-right:var(--spacingHorizontalXS);line-height:0;vertical-align:-1px;}\", \".r1rh6bd7{display:inline-block;font-size:12px;margin-right:calc(-12px - var(--spacingHorizontalXS));margin-left:var(--spacingHorizontalXS);line-height:0;vertical-align:-1px;}\"]);\nconst useValidationMessageIconStyles = /*#__PURE__*/__styles({\n  error: {\n    sj55zd: \"f1hcrxcs\"\n  },\n  warning: {\n    sj55zd: \"f1k5f75o\"\n  },\n  success: {\n    sj55zd: \"ffmvakt\"\n  }\n}, {\n  d: [\".f1hcrxcs{color:var(--colorPaletteRedForeground1);}\", \".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}\", \".ffmvakt{color:var(--colorPaletteGreenForeground1);}\"]\n});\n/**\n * Apply styling to the Field slots based on the state\n */\nexport const useFieldStyles_unstable = state => {\n  const {\n    validationState\n  } = state;\n  const horizontal = state.orientation === 'horizontal';\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);\n  const labelStyles = useLabelStyles();\n  if (state.label) {\n    state.label.className = mergeClasses(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);\n  }\n  const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();\n  const validationMessageIconStyles = useValidationMessageIconStyles();\n  if (state.validationMessageIcon) {\n    state.validationMessageIcon.className = mergeClasses(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== 'none' && validationMessageIconStyles[validationState], state.validationMessageIcon.className);\n  }\n  const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n  const secondaryTextStyles = useSecondaryTextStyles();\n  if (state.validationMessage) {\n    state.validationMessage.className = mergeClasses(fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);\n  }\n  if (state.hint) {\n    state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);\n  }\n};\n//# sourceMappingURL=useFieldStyles.js.map"],"names":["fieldClassNames","useFieldStyles_unstable","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","__styles","base","mc9l5x","horizontal","Budl1dq","wkccdc","horizontalNoLabel","uwmqm3","d","useLabelStyles","z8tnut","Byoj8tv","large","vertical","jrapky","verticalLarge","t21cq0","Ijaq50","nk6f5a","useSecondaryTextBaseClassName","__resetStyles","useSecondaryTextStyles","error","sj55zd","withIcon","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","warning","success","state","validationState","orientation","rootStyles","className","mergeClasses","labelStyles","size","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"mappings":"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"}

package/lib-commonjs/index.js

@@ -1,52 +1,24 @@
 "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;
-var Field_1 = /*#__PURE__*/require("./Field");
-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;
-  }
-});
-// eslint-disable-next-line deprecation/deprecation
-var makeDeprecatedField_1 = /*#__PURE__*/require("./util/makeDeprecatedField");
-Object.defineProperty(exports, "getDeprecatedFieldClassNames", {
-  enumerable: true,
-  get: function () {
-    return makeDeprecatedField_1.getDeprecatedFieldClassNames;
-  }
-});
-Object.defineProperty(exports, "makeDeprecatedField", {
-  enumerable: true,
-  get: function () {
-    return makeDeprecatedField_1.makeDeprecatedField;
-  }
-});
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Field: ()=>_field.Field,
+    fieldClassNames: ()=>_field.fieldClassNames,
+    renderField_unstable: ()=>_field.renderField_unstable,
+    useFieldStyles_unstable: ()=>_field.useFieldStyles_unstable,
+    useField_unstable: ()=>_field.useField_unstable,
+    getDeprecatedFieldClassNames: ()=>_makeDeprecatedField.getDeprecatedFieldClassNames,
+    makeDeprecatedField: ()=>_makeDeprecatedField.makeDeprecatedField
+});
+const _field = require("./Field");
+const _makeDeprecatedField = require("./util/makeDeprecatedField");
+ //# sourceMappingURL=index.js.map
+
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Field_1","require","Object","defineProperty","exports","enumerable","get","Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","makeDeprecatedField_1","getDeprecatedFieldClassNames","makeDeprecatedField"],"sources":["../src/packages/react-components/react-field/src/index.ts"],"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"],"mappings":";;;;;;AAAA,IAAAA,OAAA,gBAAAC,OAAA;AAASC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,OAAA,CAAAO,KAAK;EAAA;AAAA;AAAEL,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,OAAA,CAAAQ,eAAe;EAAA;AAAA;AAAEN,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,OAAA,CAAAS,oBAAoB;EAAA;AAAA;AAAEP,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,OAAA,CAAAU,uBAAuB;EAAA;AAAA;AAAER,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,OAAA,CAAAW,iBAAiB;EAAA;AAAA;AAGjG;AACA,IAAAC,qBAAA,gBAAAX,OAAA;AAASC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAM,qBAAA,CAAAC,4BAA4B;EAAA;AAAA;AAAEX,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAM,qBAAA,CAAAE,mBAAmB;EAAA;AAAA"}
+{"version":3,"sources":["../lib/index.js"],"sourcesContent":["export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field';\n// eslint-disable-next-line deprecation/deprecation\nexport { getDeprecatedFieldClassNames, makeDeprecatedField } from './util/makeDeprecatedField';\n//# sourceMappingURL=index.js.map"],"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","getDeprecatedFieldClassNames","makeDeprecatedField"],"mappings":";;;;;;;;;;;IAASA,KAAK,MAALA,YAAK;IAAEC,eAAe,MAAfA,sBAAe;IAAEC,oBAAoB,MAApBA,2BAAoB;IAAEC,uBAAuB,MAAvBA,8BAAuB;IAAEC,iBAAiB,MAAjBA,wBAAiB;IAExFC,4BAA4B,MAA5BA,iDAA4B;IAAEC,mBAAmB,MAAnBA,wCAAmB;;uBAF+C;qCAEvC;CAClE,iCAAiC"}

package/lib-commonjs/util/makeDeprecatedField.js

@@ -1,79 +1,61 @@
-"use strict";
-
+/* eslint-disable deprecation/deprecation */ "use strict";
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    makeDeprecatedField: ()=>makeDeprecatedField,
+    getDeprecatedFieldClassNames: ()=>getDeprecatedFieldClassNames
 });
-exports.getDeprecatedFieldClassNames = exports.makeDeprecatedField = void 0;
-/* eslint-disable deprecation/deprecation */
-const React = /*#__PURE__*/require("react");
-const Field_1 = /*#__PURE__*/require("../Field");
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _field = require("../Field");
 /**
  * Partition the props used by the Field itself, from the props that are passed to the underlying field component.
- */
-function getPartitionedFieldProps(props) {
-  const {
-    className,
-    control,
-    hint,
-    label,
-    orientation,
-    required,
-    root,
-    size,
-    style,
-    validationMessage,
-    validationMessageIcon,
-    validationState = 'none',
-    ...restOfProps
-  } = props;
-  return [{
-    className,
-    hint,
-    label,
-    orientation,
-    required,
-    size,
-    style,
-    validationMessage,
-    validationMessageIcon,
-    validationState,
-    ...root
-  }, {
-    required,
-    size,
-    ...restOfProps,
-    ...control
-  }];
+ */ function getPartitionedFieldProps(props) {
+    const { className , control , hint , label , orientation , required , root , size , style , validationMessage , validationMessageIcon , validationState ='none' , ...restOfProps } = props;
+    return [
+        {
+            className,
+            hint,
+            label,
+            orientation,
+            required,
+            size,
+            style,
+            validationMessage,
+            validationMessageIcon,
+            validationState,
+            ...root
+        },
+        {
+            required,
+            size,
+            ...restOfProps,
+            ...control
+        }
+    ];
 }
-/**
- * @deprecated Only for use to make deprecated [Control]Field shim components.
- * @internal
- */
 function makeDeprecatedField(Control, options = {}) {
-  const {
-    mapProps = props => props,
-    displayName = `${Control.displayName}Field`
-  } = options;
-  const DeprecatedField = React.forwardRef((props, ref) => {
-    const [fieldProps, controlProps] = getPartitionedFieldProps(mapProps(props));
-    return React.createElement(Field_1.Field, {
-      ...fieldProps
-    }, React.createElement(Control, {
-      ...controlProps,
-      ref: ref
-    }));
-  });
-  DeprecatedField.displayName = displayName;
-  return DeprecatedField;
+    const { mapProps =(props)=>props , displayName =`${Control.displayName}Field`  } = options;
+    const DeprecatedField = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+        const [fieldProps, controlProps] = getPartitionedFieldProps(mapProps(props));
+        return /*#__PURE__*/ _react.createElement(_field.Field, fieldProps, /*#__PURE__*/ _react.createElement(Control, {
+            ...controlProps,
+            ref: ref
+        }));
+    });
+    DeprecatedField.displayName = displayName;
+    return DeprecatedField;
 }
-exports.makeDeprecatedField = makeDeprecatedField;
-/**
- * @deprecated Only for use to make deprecated [Control]Field shim components.
- * @internal
- */
-const getDeprecatedFieldClassNames = controlRootClassName => ({
-  ...Field_1.fieldClassNames,
-  control: controlRootClassName
-});
-exports.getDeprecatedFieldClassNames = getDeprecatedFieldClassNames;
+const getDeprecatedFieldClassNames = (controlRootClassName)=>({
+        ..._field.fieldClassNames,
+        control: controlRootClassName
+    }); //# sourceMappingURL=makeDeprecatedField.js.map
+
 //# sourceMappingURL=makeDeprecatedField.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","require","Field_1","getPartitionedFieldProps","props","className","control","hint","label","orientation","required","root","size","style","validationMessage","validationMessageIcon","validationState","restOfProps","makeDeprecatedField","Control","options","mapProps","displayName","DeprecatedField","forwardRef","ref","fieldProps","controlProps","createElement","Field","exports","getDeprecatedFieldClassNames","controlRootClassName","fieldClassNames"],"sources":["../src/packages/react-components/react-field/src/util/makeDeprecatedField.tsx"],"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"],"mappings":";;;;;;AAAA;AACA,MAAAA,KAAA,gBAAAC,OAAA;AAGA,MAAAC,OAAA,gBAAAD,OAAA;AAqBA;;;AAGA,SAASE,wBAAwBA,CAC/BC,KAAiF;EAEjF,MAAM;IACJC,SAAS;IACTC,OAAO;IACPC,IAAI;IACJC,KAAK;IACLC,WAAW;IACXC,QAAQ;IACRC,IAAI;IACJC,IAAI;IACJC,KAAK;IACLC,iBAAiB;IACjBC,qBAAqB;IACrBC,eAAe,GAAG,MAAM;IACxB,GAAGC;EAAW,CACf,GAAGb,KAAK;EAET,OAAO,CACL;IACEC,SAAS;IACTE,IAAI;IACJC,KAAK;IACLC,WAAW;IACXC,QAAQ;IACRE,IAAI;IACJC,KAAK;IACLC,iBAAiB;IACjBC,qBAAqB;IACrBC,eAAe;IACf,GAAGL;GACJ,EACD;IACED,QAAQ;IACRE,IAAI;IACJ,GAAGK,WAAW;IACd,GAAGX;GACJ,CACF;AACH;AAEA;;;;AAIA,SAAgBY,mBAAmBA,CACjCC,OAA0C,EAC1CC,OAAA,GAGI,EAAE;EAEN,MAAM;IAAEC,QAAQ,GAAGjB,KAAK,IAAIA,KAAK;IAAEkB,WAAW,GAAG,GAAGH,OAAO,CAACG,WAAW;EAAO,CAAE,GAAGF,OAAO;EAE1F,MAAMG,eAAe,GAAGvB,KAAK,CAACwB,UAAU,CAAC,CAACpB,KAAK,EAAEqB,GAAG,KAAI;IACtD,MAAM,CAACC,UAAU,EAAEC,YAAY,CAAC,GAAGxB,wBAAwB,CAACkB,QAAQ,CAACjB,KAAK,CAAC,CAAC;IAC5E,OACEJ,KAAA,CAAA4B,aAAA,CAAC1B,OAAA,CAAA2B,KAAK;MAAA,GAAKH;IAAU,GAEnB1B,KAAA,CAAA4B,aAAA,CAACT,OAAO;MAAA,GAAMQ,YAAoB;MAAEF,GAAG,EAAEA;IAAU,EAAI,CACjD;EAEZ,CAAC,CAA4D;EAE7DF,eAAe,CAACD,WAAW,GAAGA,WAAW;EAEzC,OAAOC,eAAe;AACxB;AAtBAO,OAAA,CAAAZ,mBAAA,GAAAA,mBAAA;AAwBA;;;;AAIO,MAAMa,4BAA4B,GAAIC,oBAA4B,KAAM;EAC7E,GAAG9B,OAAA,CAAA+B,eAAe;EAClB3B,OAAO,EAAE0B;CACV,CAAC;AAHWF,OAAA,CAAAC,4BAA4B,GAAAA,4BAAA"}
+{"version":3,"sources":["../../lib/util/makeDeprecatedField.js"],"sourcesContent":["/* eslint-disable deprecation/deprecation */import * as React from 'react';\nimport { Field, fieldClassNames } from '../Field';\n/**\n * Partition the props used by the Field itself, from the props that are passed to the underlying field component.\n */\nfunction getPartitionedFieldProps(props) {\n  const {\n    className,\n    control,\n    hint,\n    label,\n    orientation,\n    required,\n    root,\n    size,\n    style,\n    validationMessage,\n    validationMessageIcon,\n    validationState = 'none',\n    ...restOfProps\n  } = props;\n  return [{\n    className,\n    hint,\n    label,\n    orientation,\n    required,\n    size,\n    style,\n    validationMessage,\n    validationMessageIcon,\n    validationState,\n    ...root\n  }, {\n    required,\n    size,\n    ...restOfProps,\n    ...control\n  }];\n}\n/**\n * @deprecated Only for use to make deprecated [Control]Field shim components.\n * @internal\n */\nexport function makeDeprecatedField(Control, options = {}) {\n  const {\n    mapProps = props => props,\n    displayName = `${Control.displayName}Field`\n  } = options;\n  const DeprecatedField = /*#__PURE__*/React.forwardRef((props, ref) => {\n    const [fieldProps, controlProps] = getPartitionedFieldProps(mapProps(props));\n    return /*#__PURE__*/React.createElement(Field, fieldProps, /*#__PURE__*/React.createElement(Control, {\n      ...controlProps,\n      ref: ref\n    }));\n  });\n  DeprecatedField.displayName = displayName;\n  return DeprecatedField;\n}\n/**\n * @deprecated Only for use to make deprecated [Control]Field shim components.\n * @internal\n */\nexport const getDeprecatedFieldClassNames = controlRootClassName => ({\n  ...fieldClassNames,\n  control: controlRootClassName\n});\n//# sourceMappingURL=makeDeprecatedField.js.map"],"names":["makeDeprecatedField","getDeprecatedFieldClassNames","getPartitionedFieldProps","props","className","control","hint","label","orientation","required","root","size","style","validationMessage","validationMessageIcon","validationState","restOfProps","Control","options","mapProps","displayName","DeprecatedField","React","forwardRef","ref","fieldProps","controlProps","createElement","Field","controlRootClassName","fieldClassNames"],"mappings":"AAAA,0CAA0C;;;;;;;;;;;IA4C1BA,mBAAmB,MAAnBA;IAmBHC,4BAA4B,MAA5BA;;;6DA/DsD;uBAC5B;AACvC;;CAEC,GACD,SAASC,yBAAyBC,KAAK,EAAE;IACvC,MAAM,EACJC,UAAS,EACTC,QAAO,EACPC,KAAI,EACJC,MAAK,EACLC,YAAW,EACXC,SAAQ,EACRC,KAAI,EACJC,KAAI,EACJC,MAAK,EACLC,kBAAiB,EACjBC,sBAAqB,EACrBC,iBAAkB,OAAM,EACxB,GAAGC,aACJ,GAAGb;IACJ,OAAO;QAAC;YACNC;YACAE;YACAC;YACAC;YACAC;YACAE;YACAC;YACAC;YACAC;YACAC;YACA,GAAGL,IAAI;QACT;QAAG;YACDD;YACAE;YACA,GAAGK,WAAW;YACd,GAAGX,OAAO;QACZ;KAAE;AACJ;AAKO,SAASL,oBAAoBiB,OAAO,EAAEC,UAAU,CAAC,CAAC,EAAE;IACzD,MAAM,EACJC,UAAWhB,CAAAA,QAASA,MAAK,EACzBiB,aAAc,CAAC,EAAEH,QAAQG,WAAW,CAAC,KAAK,CAAC,CAAA,EAC5C,GAAGF;IACJ,MAAMG,kBAAkB,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACpB,OAAOqB,MAAQ;QACpE,MAAM,CAACC,YAAYC,aAAa,GAAGxB,yBAAyBiB,SAAShB;QACrE,OAAO,WAAW,GAAEmB,OAAMK,aAAa,CAACC,YAAK,EAAEH,YAAY,WAAW,GAAEH,OAAMK,aAAa,CAACV,SAAS;YACnG,GAAGS,YAAY;YACfF,KAAKA;QACP;IACF;IACAH,gBAAgBD,WAAW,GAAGA;IAC9B,OAAOC;AACT;AAKO,MAAMpB,+BAA+B4B,CAAAA,uBAAyB,CAAA;QACnE,GAAGC,sBAAe;QAClBzB,SAASwB;IACX,CAAA,GACA,+CAA+C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-field",
-  "version": "9.0.0-alpha.25",
+  "version": "9.0.0-alpha.27",
   "description": "Fluent UI Field components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -22,23 +22,23 @@
     "storybook": "start-storybook",
     "test": "jest --passWithNoTests",
     "type-check": "tsc -b tsconfig.json",
-    "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
+    "generate-api": "just-scripts generate-api"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.19",
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.20",
     "@fluentui/scripts-api-extractor": "*",
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-context-selector": "^9.1.13",
-    "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-label": "^9.1.3",
-    "@fluentui/react-theme": "^9.1.6",
-    "@fluentui/react-utilities": "^9.7.0",
+    "@fluentui/react-context-selector": "^9.1.15",
+    "@fluentui/react-icons": "^2.0.196",
+    "@fluentui/react-label": "^9.1.5",
+    "@fluentui/react-theme": "^9.1.7",
+    "@fluentui/react-utilities": "^9.7.2",
     "@griffel/react": "^1.5.2",
-    "tslib": "^2.1.0"
+    "@swc/helpers": "^0.4.14"
   },
   "peerDependencies": {
     "@types/react": ">=16.8.0 <19.0.0",
@@ -56,6 +56,7 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "node": "./lib-commonjs/index.js",
       "import": "./lib/index.js",
       "require": "./lib-commonjs/index.js"
     },

package/lib-amd/Field.js

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

package/lib-amd/Field.js.map

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

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

@@ -1,12 +0,0 @@
-define(["require", "exports", "react", "./renderField", "./useField", "./useFieldStyles"], function (require, exports, React, renderField_1, useField_1, useFieldStyles_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.Field = void 0;
-    exports.Field = React.forwardRef(function (props, ref) {
-        var 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-amd/components/Field/Field.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/Field.tsx"],"names":[],"mappings":";;;;IAOa,QAAA,KAAK,GAAoC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAChF,IAAM,KAAK,GAAG,4BAAiB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAC5C,wCAAuB,CAAC,KAAK,CAAC,CAAC;QAC/B,OAAO,kCAAoB,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,aAAK,CAAC,WAAW,GAAG,OAAO,CAAC","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-amd/components/Field/Field.types.js

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"Field.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/Field.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * The props added to the Field's child element.\n */\nexport type FieldChildProps = Pick<\n  React.HTMLAttributes<HTMLElement>,\n  'id' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-required'\n>;\n\n/**\n * Slots of the Field component\n */\nexport type FieldSlots = {\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * The label associated with the field.\n   */\n  label?: Slot<typeof Label>;\n\n  /**\n   * A message about the validation state. By default, this is an error message, but it can be a success, warning,\n   * or custom message by setting `validationState`.\n   */\n  validationMessage?: Slot<'div'>;\n\n  /**\n   * The icon associated with the `validationMessage`. This will only be displayed if `validationMessage` is set.\n   *\n   * The default depends on `validationState`:\n   * * error: `<ErrorCircle12Filled />`\n   * * warning: `<Warning12Filled />`\n   * * success: `<CheckmarkCircle12Filled />`\n   * * none: `null`\n   */\n  validationMessageIcon?: Slot<'span'>;\n\n  /**\n   * Additional hint text below the field.\n   */\n  hint?: Slot<'div'>;\n};\n\n/**\n * Field Props\n */\nexport type FieldProps = Omit<ComponentProps<FieldSlots>, 'children'> & {\n  /**\n   * The Field's child can be a single form control, or a render function that takes the props that should be spread on\n   * a form control.\n   *\n   * All form controls in this library can be used directly as children (such as `<Input>` or `<RadioGroup>`), as well\n   * as intrinsic form controls like `<input>` or `<textarea>`. Custom controls can also be used as long as they\n   * accept FieldChildProps and spread them on the appropriate element.\n   *\n   * For more complex scenarios, a render function can be used to pass the FieldChildProps to the appropriate control.\n   */\n  children?: React.ReactElement<FieldChildProps> | null | ((props: FieldChildProps) => React.ReactNode);\n\n  /**\n   * The orientation of the label relative to the field component.\n   * This only affects the label, and not the validationMessage or hint (which always appear below the field component).\n   *\n   * @default vertical\n   */\n  orientation?: 'vertical' | 'horizontal';\n\n  /**\n   * The `validationState` affects the display of the `validationMessage` and `validationMessageIcon`.\n   *\n   * * error: (default) The validation message has a red error icon and red text, with `role=\"alert\"` so it is\n   *     announced by screen readers. Additionally, the control inside the field has `aria-invalid` set, which adds a\n   *     red border to some field components (such as `Input`).\n   * * success: The validation message has a green checkmark icon and gray text.\n   * * warning: The validation message has a yellow exclamation icon and gray text.\n   * * none: The validation message has no icon and gray text.\n   *\n   * @default error when validationMessage is set; none otherwise.\n   */\n  validationState?: 'error' | 'warning' | 'success' | 'none';\n\n  /**\n   * Marks the Field as required. If `true`, an asterisk will be appended to the label, and `aria-required` will be set\n   * on the Field's child.\n   */\n  required?: boolean;\n\n  /**\n   * The size of the Field's label.\n   *\n   * @default medium\n   */\n  size?: 'small' | 'medium' | 'large';\n};\n\n/**\n * State used in rendering Field\n */\nexport type FieldState = ComponentState<Required<FieldSlots>> &\n  Required<Pick<FieldProps, 'orientation' | 'validationState'>>;\n"]}

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

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

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

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

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"renderField.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/renderField.tsx"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,oBAAoB,GAAG,UAAC,KAAiB;QAC9C,IAAA,KAAuB,0BAAQ,CAAa,KAAK,CAAC,EAAhD,KAAK,WAAA,EAAE,SAAS,eAAgC,CAAC;QAEzD,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,KAAK,CAAC,KAAK,IAAI,oBAAC,KAAK,CAAC,KAAK,uBAAK,SAAS,CAAC,KAAK,EAAI;YACnD,SAAS,CAAC,IAAI,CAAC,QAAQ;YACvB,KAAK,CAAC,iBAAiB,IAAI,CAC1B,oBAAC,KAAK,CAAC,iBAAiB,uBAAK,SAAS,CAAC,iBAAiB;gBACrD,KAAK,CAAC,qBAAqB,IAAI,oBAAC,KAAK,CAAC,qBAAqB,uBAAK,SAAS,CAAC,qBAAqB,EAAI;gBACnG,SAAS,CAAC,iBAAiB,CAAC,QAAQ,CACb,CAC3B;YACA,KAAK,CAAC,IAAI,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CACtC,CACd,CAAC;IACJ,CAAC,CAAC;IAhBW,QAAA,oBAAoB,wBAgB/B","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-amd/components/Field/useField.js

@@ -1,99 +0,0 @@
-define(["require", "exports", "tslib", "react", "@fluentui/react-icons", "@fluentui/react-label", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_icons_1, react_label_1, react_utilities_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.useField_unstable = 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),
-        none: undefined,
-    };
-    /**
-     * Create the state required to render Field.
-     *
-     * The returned state can be modified with hooks such as useFieldStyles_unstable,
-     * before being passed to renderField_unstable.
-     *
-     * @param props - Props passed to this field
-     * @param ref - Ref to the root
-     */
-    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, _f = props.validationState, validationState = _f === void 0 ? props.validationMessage ? 'error' : 'none' : _f, size = props.size;
-        var baseId = react_utilities_1.useId('field-');
-        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: required,
-                size: size,
-                // htmlFor is handled below
-            },
-        });
-        var validationMessage = react_utilities_1.resolveShorthand(props.validationMessage, {
-            defaultProps: {
-                id: baseId + '__validationMessage',
-                role: validationState === 'error' ? 'alert' : undefined,
-            },
-        });
-        var hint = react_utilities_1.resolveShorthand(props.hint, {
-            defaultProps: {
-                id: baseId + '__hint',
-            },
-        });
-        var defaultIcon = validationMessageIcons[validationState];
-        var validationMessageIcon = react_utilities_1.resolveShorthand(props.validationMessageIcon, {
-            required: !!defaultIcon,
-            defaultProps: {
-                children: defaultIcon,
-            },
-        });
-        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
-            // 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: orientation,
-            validationState: validationState,
-            components: {
-                root: 'div',
-                label: react_label_1.Label,
-                validationMessage: 'div',
-                validationMessageIcon: 'span',
-                hint: 'div',
-            },
-            root: root,
-            label: label,
-            validationMessageIcon: validationMessageIcon,
-            validationMessage: validationMessage,
-            hint: hint,
-        };
-    };
-    exports.useField_unstable = useField_unstable;
-});
-//# sourceMappingURL=useField.js.map

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

@@ -1 +0,0 @@
-{"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"]}