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

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

@@ -3,7 +3,7 @@
 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");
@@ -13,38 +13,6 @@ const validationMessageIcons = {
   warning: /*#__PURE__*/React.createElement(react_icons_1.Warning12Filled, null),
   success: /*#__PURE__*/React.createElement(react_icons_1.CheckmarkCircle12Filled, null)
 };
-/**
- * Partition the props used by the Field itself, from the props that are passed to the underlying field component.
- */
-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.
  *
@@ -52,53 +20,58 @@ 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) => {
-  var _a, _b, _c;
-  const [fieldProps, controlProps] = exports.getPartitionedFieldProps(props);
+const useField_unstable = (props, ref) => {
+  var _a, _b, _c, _d;
   const {
+    children,
     orientation = 'vertical',
-    validationState
-  } = fieldProps;
-  const {
-    labelConnection = 'htmlFor',
-    ariaInvalidOnError = true
-  } = params;
+    required,
+    validationState,
+    size
+  } = props;
   const baseId = react_utilities_1.useId('field-');
-  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, {
+  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
+      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, {
+  const validationMessageIcon = react_utilities_1.resolveShorthand(props.validationMessageIcon, {
     required: !!validationState,
     defaultProps: {
       children: validationState ? validationMessageIcons[validationState] : undefined
     }
   });
-  // Hook up aria props on the control
-  if (label && labelConnection === 'aria-labelledby') {
+  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 (validationMessage || hint) {
     // The control is described by the validation message, or hint, or both
@@ -106,40 +79,33 @@ const useField_unstable = (props, ref, params) => {
     // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933
     controlProps['aria-describedby'] = [validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.id, hint === null || hint === void 0 ? void 0 : hint.id, controlProps['aria-describedby']].filter(Boolean).join(' ');
   }
-  if (validationState === 'error' && ariaInvalidOnError) {
-    (_b = controlProps['aria-invalid']) !== null && _b !== void 0 ? _b : controlProps['aria-invalid'] = true;
+  if (validationState === 'error') {
+    (_c = controlProps['aria-invalid']) !== null && _c !== void 0 ? _c : controlProps['aria-invalid'] = true;
   }
-  const control = react_utilities_1.resolveShorthand(fieldProps.control, {
-    required: true,
-    defaultProps: {
-      ref,
-      id: baseId + '__control',
-      ...controlProps
-    }
-  });
-  if (label && labelConnection === 'htmlFor') {
-    (_c = label.htmlFor) !== null && _c !== void 0 ? _c : label.htmlFor = control.id;
+  if (required) {
+    (_d = controlProps['aria-required']) !== null && _d !== void 0 ? _d : controlProps['aria-required'] = true;
+  }
+  if (React.isValidElement(children)) {
+    root.children = React.cloneElement(children, controlProps);
+  } else if (typeof children === 'function') {
+    root.children = children(controlProps);
   }
-  const state = {
+  return {
     orientation,
     validationState,
-    classNames: params.classNames,
     components: {
       root: 'div',
-      control: params.component,
       label: react_label_1.Label,
       validationMessage: 'div',
       validationMessageIcon: '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,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAGA,MAAMA,sBAAsB,GAAG;EAC7BC,KAAK,eAAEC,oBAACC,iCAAmB,OAAG;EAC9BC,OAAO,eAAEF,oBAACC,6BAAe,OAAG;EAC5BE,OAAO,eAAEH,oBAACC,qCAAuB;CACzB;AAEV;;;AAGO,MAAMG,wBAAwB,GAAIC,KAAyD,IAAI;EACpG,MAAM;IACJC,SAAS;IACTC,OAAO;IACPC,IAAI;IACJC,KAAK;IACLC,WAAW;IACXC,IAAI;IACJC,KAAK;IACLC,iBAAiB;IACjBC,qBAAqB;IACrBC,eAAe;IACf,GAAGC;EAAW,CACf,GAAGX,KAAK;EAET,MAAMY,UAAU,GAAG;IACjBX,SAAS;IACTC,OAAO;IACPC,IAAI;IACJC,KAAK;IACLC,WAAW;IACXC,IAAI;IACJC,KAAK;IACLC,iBAAiB;IACjBC,qBAAqB;IACrBC;GACD;EAED,OAAO,CAACE,UAAU,EAAED,WAAW,CAAU;AAC3C,CAAC;AA7BYE,gCAAwB;AA+BrC;;;;;;;;;;AAUO,MAAMC,iBAAiB,GAAG,CAC/Bd,KAA8C,EAC9Ce,GAA2B,EAC3BC,MAAsB,KACL;;EACjB,MAAM,CAACJ,UAAU,EAAEK,YAAY,CAAC,GAAGJ,gCAAwB,CAACb,KAAK,CAAC;EAClE,MAAM;IAAEK,WAAW,GAAG,UAAU;IAAEK;EAAe,CAAE,GAAGE,UAAU;EAChE,MAAM;IAAEM,eAAe,GAAG,SAAS;IAAEC,kBAAkB,GAAG;EAAI,CAAE,GAAGH,MAAM;EAEzE,MAAMI,MAAM,GAAGC,uBAAK,CAAC,QAAQ,CAAC;EAE9B,MAAMf,IAAI,GAAGe,kCAAgB,CAACT,UAAU,CAACN,IAAI,EAAE;IAC7CgB,QAAQ,EAAE,IAAI;IACdC,YAAY,EAAEF,uCAAqB,CAAC,KAAK,EAAET,UAAU;GACtD,CAAC;EAEF,MAAMR,KAAK,GAAGiB,kCAAgB,CAACT,UAAU,CAACR,KAAK,EAAE;IAC/CmB,YAAY,EAAE;MACZC,EAAE,EAAEJ,MAAM,GAAG,SAAS;MACtBE,QAAQ,EAAEL,YAAY,CAACK,QAAQ;MAC/BG,IAAI,EAAE,OAAOR,YAAY,CAACQ,IAAI,KAAK,QAAQ,GAAGR,YAAY,CAACQ,IAAI,GAAGC;MAClE;;GAEH,CAAC;;EAEF,MAAMlB,iBAAiB,GAAGa,kCAAgB,CAACT,UAAU,CAACJ,iBAAiB,EAAE;IACvEe,YAAY,EAAE;MACZC,EAAE,EAAEJ,MAAM,GAAG;;GAEhB,CAAC;EAEF,MAAMjB,IAAI,GAAGkB,kCAAgB,CAACT,UAAU,CAACT,IAAI,EAAE;IAC7CoB,YAAY,EAAE;MACZC,EAAE,EAAEJ,MAAM,GAAG;;GAEhB,CAAC;EAEF,MAAMX,qBAAqB,GAAGY,kCAAgB,CAACT,UAAU,CAACH,qBAAqB,EAAE;IAC/Ea,QAAQ,EAAE,CAAC,CAACZ,eAAe;IAC3Ba,YAAY,EAAE;MACZI,QAAQ,EAAEjB,eAAe,GAAGjB,sBAAsB,CAACiB,eAAe,CAAC,GAAGgB;;GAEzE,CAAC;EAEF;EACA,IAAItB,KAAK,IAAIc,eAAe,KAAK,iBAAiB,EAAE;IAClD,kBAAY,CAAC,iBAAiB,oCAA9BD,YAAY,CAAC,iBAAiB,IAAMb,KAAK,CAACoB,EAAE;;EAG9C,IAAIhB,iBAAiB,IAAIL,IAAI,EAAE;IAC7B;IACA;IACA;IACAc,YAAY,CAAC,kBAAkB,CAAC,GAAG,CAACT,iBAAiB,aAAjBA,iBAAiB,uBAAjBA,iBAAiB,CAAEgB,EAAE,EAAErB,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEqB,EAAE,EAAEP,YAAY,CAAC,kBAAkB,CAAC,CAAC,CACnGW,MAAM,CAACC,OAAO,CAAC,CACfC,IAAI,CAAC,GAAG,CAAC;;EAGd,IAAIpB,eAAe,KAAK,OAAO,IAAIS,kBAAkB,EAAE;IACrD,kBAAY,CAAC,cAAc,oCAA3BF,YAAY,CAAC,cAAc,IAAM,IAAI;;EAGvC,MAAMf,OAAO,GAAGmB,kCAAgB,CAACT,UAAU,CAACV,OAAO,EAAE;IACnDoB,QAAQ,EAAE,IAAI;IACdC,YAAY,EAAE;MACZR,GAAG;MACHS,EAAE,EAAEJ,MAAM,GAAG,WAAW;MACxB,GAAGH;;GAEN,CAAC;EAEF,IAAIb,KAAK,IAAIc,eAAe,KAAK,SAAS,EAAE;IAC1C,WAAK,CAACa,OAAO,mCAAb3B,KAAK,CAAC2B,OAAO,GAAK7B,OAAO,CAACsB,EAAE;;EAG9B,MAAMQ,KAAK,GAA6B;IACtC3B,WAAW;IACXK,eAAe;IACfuB,UAAU,EAAEjB,MAAM,CAACiB,UAAU;IAC7BC,UAAU,EAAE;MACV5B,IAAI,EAAE,KAAK;MACXJ,OAAO,EAAEc,MAAM,CAACmB,SAAS;MACzB/B,KAAK,EAAEgC,mBAAK;MACZ5B,iBAAiB,EAAE,KAAK;MACxBC,qBAAqB,EAAE,MAAM;MAC7BN,IAAI,EAAE;KACP;IACDG,IAAI;IACJJ,OAAO;IACPE,KAAK;IACLK,qBAAqB;IACrBD,iBAAiB;IACjBL;GACD;EAED,OAAO6B,KAAsB;AAC/B,CAAC;AAhGYnB,yBAAiB","names":["validationMessageIcons","error","React","react_icons_1","warning","success","getPartitionedFieldProps","props","className","control","hint","label","orientation","root","style","validationMessage","validationMessageIcon","validationState","restOfProps","fieldProps","exports","useField_unstable","ref","params","controlProps","labelConnection","ariaInvalidOnError","baseId","react_utilities_1","required","defaultProps","id","size","undefined","children","filter","Boolean","join","htmlFor","state","classNames","components","component","react_label_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-field/src/components/Field/useField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { FieldConfig, FieldControl, FieldPropsWithOptionalComponentProps, FieldState } from './Field.types';\n\nconst validationMessageIcons = {\n  error: <ErrorCircle12Filled />,\n  warning: <Warning12Filled />,\n  success: <CheckmarkCircle12Filled />,\n} as const;\n\n/**\n * Partition the props used by the Field itself, from the props that are passed to the underlying field component.\n */\nexport const getPartitionedFieldProps = (props: FieldPropsWithOptionalComponentProps<FieldControl>) => {\n  const {\n    className,\n    control,\n    hint,\n    label,\n    orientation,\n    root,\n    style,\n    validationMessage,\n    validationMessageIcon,\n    validationState,\n    ...restOfProps\n  } = props;\n\n  const fieldProps = {\n    className,\n    control,\n    hint,\n    label,\n    orientation,\n    root,\n    style,\n    validationMessage,\n    validationMessageIcon,\n    validationState,\n  };\n\n  return [fieldProps, restOfProps] as const;\n};\n\n/**\n * Create the state required to render Field.\n *\n * The returned state can be modified with hooks such as useFieldStyles_unstable,\n * before being passed to renderField_unstable.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the control slot (primary slot)\n * @param params - Configuration parameters for this Field\n */\nexport const useField_unstable = <T extends FieldControl>(\n  props: FieldPropsWithOptionalComponentProps<T>,\n  ref: React.Ref<HTMLElement>,\n  params: FieldConfig<T>,\n): FieldState<T> => {\n  const [fieldProps, controlProps] = getPartitionedFieldProps(props);\n  const { orientation = 'vertical', validationState } = fieldProps;\n  const { labelConnection = 'htmlFor', ariaInvalidOnError = true } = params;\n\n  const baseId = useId('field-');\n\n  const root = resolveShorthand(fieldProps.root, {\n    required: true,\n    defaultProps: getNativeElementProps('div', fieldProps),\n  });\n\n  const label = resolveShorthand(fieldProps.label, {\n    defaultProps: {\n      id: baseId + '__label',\n      required: controlProps.required,\n      size: typeof controlProps.size === 'string' ? controlProps.size : undefined,\n      // htmlFor is handled below\n    },\n  });\n\n  const validationMessage = resolveShorthand(fieldProps.validationMessage, {\n    defaultProps: {\n      id: baseId + '__validationMessage',\n    },\n  });\n\n  const hint = resolveShorthand(fieldProps.hint, {\n    defaultProps: {\n      id: baseId + '__hint',\n    },\n  });\n\n  const validationMessageIcon = resolveShorthand(fieldProps.validationMessageIcon, {\n    required: !!validationState,\n    defaultProps: {\n      children: validationState ? validationMessageIcons[validationState] : undefined,\n    },\n  });\n\n  // Hook up aria props on the control\n  if (label && labelConnection === 'aria-labelledby') {\n    controlProps['aria-labelledby'] ??= label.id;\n  }\n\n  if (validationMessage || hint) {\n    // The control is described by the validation message, or hint, or both\n    // We also preserve and append any aria-describedby supplied by the user\n    // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933\n    controlProps['aria-describedby'] = [validationMessage?.id, hint?.id, controlProps['aria-describedby']]\n      .filter(Boolean)\n      .join(' ');\n  }\n\n  if (validationState === 'error' && ariaInvalidOnError) {\n    controlProps['aria-invalid'] ??= true;\n  }\n\n  const control = resolveShorthand(fieldProps.control, {\n    required: true,\n    defaultProps: {\n      ref,\n      id: baseId + '__control',\n      ...controlProps,\n    },\n  });\n\n  if (label && labelConnection === 'htmlFor') {\n    label.htmlFor ??= control.id;\n  }\n\n  const state: FieldState<FieldControl> = {\n    orientation,\n    validationState,\n    classNames: params.classNames,\n    components: {\n      root: 'div',\n      control: params.component,\n      label: Label,\n      validationMessage: 'div',\n      validationMessageIcon: 'span',\n      hint: 'div',\n    },\n    root,\n    control,\n    label,\n    validationMessageIcon,\n    validationMessage,\n    hint,\n  };\n\n  return state as FieldState<T>;\n};\n"]}
+{"version":3,"mappings":"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","names":["validationMessageIcons","error","React","react_icons_1","warning","success","useField_unstable","props","ref","children","orientation","required","validationState","size","baseId","react_utilities_1","root","label","defaultProps","id","validationMessage","role","undefined","hint","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} as const;\n\n/**\n * Create the state required to render Field.\n *\n * The returned state can be modified with hooks such as useFieldStyles_unstable,\n * before being passed to renderField_unstable.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the root\n */\nexport const useField_unstable = (props: FieldProps, ref: React.Ref<HTMLDivElement>): FieldState => {\n  const { children, orientation = 'vertical', required, validationState, size } = props;\n\n  const baseId = useId('field-');\n\n  const root = getNativeElementProps('div', { ...props, ref }, /*excludedPropNames:*/ ['children']);\n\n  const label = resolveShorthand(props.label, {\n    defaultProps: {\n      id: baseId + '__label',\n      required,\n      size,\n      // htmlFor is handled below\n    },\n  });\n\n  const validationMessage = resolveShorthand(props.validationMessage, {\n    defaultProps: {\n      id: baseId + '__validationMessage',\n      role: validationState === 'error' ? 'alert' : undefined,\n    },\n  });\n\n  const hint = resolveShorthand(props.hint, {\n    defaultProps: {\n      id: baseId + '__hint',\n    },\n  });\n\n  const validationMessageIcon = resolveShorthand(props.validationMessageIcon, {\n    required: !!validationState,\n    defaultProps: {\n      children: validationState ? validationMessageIcons[validationState] : undefined,\n    },\n  });\n\n  const controlProps: FieldChildProps = React.isValidElement(children) ? { ...children.props } : {};\n\n  if (label) {\n    controlProps['aria-labelledby'] ??= label.id;\n\n    if (!label.htmlFor) {\n      // Assign the child a generated ID if doesn't already have an ID\n      controlProps.id ??= baseId + '__control';\n      label.htmlFor = controlProps.id;\n    }\n  }\n\n  if (validationMessage || hint) {\n    // The control is described by the validation message, or hint, or both\n    // We also preserve and append any aria-describedby supplied by the user\n    // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933\n    controlProps['aria-describedby'] = [validationMessage?.id, hint?.id, controlProps['aria-describedby']]\n      .filter(Boolean)\n      .join(' ');\n  }\n\n  if (validationState === 'error') {\n    controlProps['aria-invalid'] ??= true;\n  }\n\n  if (required) {\n    controlProps['aria-required'] ??= true;\n  }\n\n  if (React.isValidElement(children)) {\n    root.children = React.cloneElement(children, controlProps);\n  } else if (typeof children === 'function') {\n    root.children = children(controlProps);\n  }\n\n  return {\n    orientation,\n    validationState,\n    components: {\n      root: 'div',\n      label: Label,\n      validationMessage: 'div',\n      validationMessageIcon: 'span',\n      hint: 'div',\n    },\n    root,\n    label,\n    validationMessageIcon,\n    validationMessage,\n    hint,\n  };\n};\n"]}

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

@@ -3,95 +3,72 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useFieldStyles_unstable = exports.getFieldClassNames = void 0;
+exports.useFieldStyles_unstable = exports.fieldClassNames = void 0;
 const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
 const react_1 = /*#__PURE__*/require("@griffel/react");
-const getFieldClassNames = name => ({
-  root: `fui-${name}`,
-  control: `fui-${name}__control`,
-  label: `fui-${name}__label`,
-  validationMessage: `fui-${name}__validationMessage`,
-  validationMessageIcon: `fui-${name}__validationMessageIcon`,
-  hint: `fui-${name}__hint`
-});
-exports.getFieldClassNames = getFieldClassNames;
+exports.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
+const iconSize = '12px';
 /**
  * Styles for the root slot
  */
 const useRootStyles = /*#__PURE__*/react_1.__styles({
   base: {
-    mc9l5x: "f13qh94s",
-    Bxotwcr: "f14np9u9",
-    Budl1dq: "fjxzuw",
-    zoa1oz: "f6nraym",
-    B7hvi0a: "f1m2n5bn"
+    mc9l5x: "f13qh94s"
   },
   horizontal: {
-    Budl1dq: "fwibhjm",
-    zoa1oz: "f7bqb3c"
-  },
-  label: {
-    Br312pm: "f150pcdf",
-    Bw0ie65: "fwm4whi",
-    Ijaq50: "f1tty21m",
-    nk6f5a: "f19648ye"
-  },
-  control: {
-    Br312pm: "f1bfa6ju",
-    Bw0ie65: "fl3lap4"
+    Budl1dq: "f2wwaib",
+    wkccdc: "f1645dqt"
   },
-  validationIcon: {
-    Br312pm: "ftfzah7",
-    Bw0ie65: "f1fih8f9"
-  },
-  validationMessage: {
-    Br312pm: "f1n69xcw",
-    Bw0ie65: "f1hw1m5m"
-  },
-  hint: {
-    Br312pm: "fbug73u",
-    Bw0ie65: "fbtgo1w"
+  horizontalNoLabel: {
+    uwmqm3: ["f15jqgz8", "fggqkej"],
+    Budl1dq: "f1c2z91y"
   }
 }, {
-  d: [".f13qh94s{display:grid;}", ".f14np9u9{grid-auto-flow:row;}", ".fjxzuw{grid-template-columns:auto 1fr;}", ".f6nraym{grid-template-areas:\"label label\" \"control control\" \"validationIcon validationMessage\" \"hint hint\";}", ".f1m2n5bn{justify-items:start;}", ".fwibhjm{grid-template-columns:33% auto 1fr;}", ".f7bqb3c{grid-template-areas:\"label control control\" \"label validationIcon validationMessage\" \"label hint hint\" \"label . .\";}", ".f150pcdf{grid-column-start:label;}", ".fwm4whi{grid-column-end:label;}", ".f1tty21m{grid-row-start:label;}", ".f19648ye{grid-row-end:label;}", ".f1bfa6ju{grid-column-start:control;}", ".fl3lap4{grid-column-end:control;}", ".ftfzah7{grid-column-start:validationIcon;}", ".f1fih8f9{grid-column-end:validationIcon;}", ".f1n69xcw{grid-column-start:validationMessage;}", ".f1hw1m5m{grid-column-end:validationMessage;}", ".fbug73u{grid-column-start:hint;}", ".fbtgo1w{grid-column-end:hint;}"]
+  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;}"]
 });
 const useLabelStyles = /*#__PURE__*/react_1.__styles({
   base: {
-    B6of3ja: "fg30ohd",
+    z8tnut: "fclwglc",
+    Byoj8tv: "fywfov9"
+  },
+  large: {
+    z8tnut: "f1sl3k7w",
+    Byoj8tv: "f1brlhvm"
+  },
+  vertical: {
     jrapky: "fyacil5"
   },
+  verticalLarge: {
+    jrapky: "f8l5zjj"
+  },
   horizontal: {
     t21cq0: ["fkujibs", "f199hnxi"],
-    qb2dma: "f9h729m",
-    Bdqf98w: "fhb5wj7"
+    Ijaq50: "f16hsg94",
+    nk6f5a: "f1nzqi2z"
   }
 }, {
-  d: [".fg30ohd{margin-top:var(--spacingVerticalXXS);}", ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".fhb5wj7{justify-self:stretch;}"]
+  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;}"]
 });
+const useSecondaryTextBaseClassName = /*#__PURE__*/react_1.__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);}"]);
 const useSecondaryTextStyles = /*#__PURE__*/react_1.__styles({
-  base: {
-    B6of3ja: "fg30ohd",
-    sj55zd: "f11d4kpn",
-    Bahqtrf: "fk6fouc",
-    Be2twd7: "fy9rknc",
-    Bhrd7zp: "figsok6",
-    Bg96gwp: "fwrc4pm"
-  },
   error: {
     sj55zd: "f1hcrxcs"
+  },
+  withIcon: {
+    uwmqm3: ["frawy03", "fg4c52"]
   }
 }, {
-  d: [".fg30ohd{margin-top:var(--spacingVerticalXXS);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}"]
+  d: [".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".frawy03{padding-left:calc(12px + var(--spacingHorizontalXS));}", ".fg4c52{padding-right:calc(12px + var(--spacingHorizontalXS));}"]
 });
+const useValidationMessageIconBaseClassName = /*#__PURE__*/react_1.__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;}"]);
 const useValidationMessageIconStyles = /*#__PURE__*/react_1.__styles({
-  base: {
-    mc9l5x: "ftgm304",
-    qb2dma: "f9h729m",
-    Be2twd7: "f1ugzwwg",
-    Bg96gwp: "fp4gqsa",
-    t21cq0: ["fm0x6gh", "fbyavb5"],
-    B6of3ja: "fww94b8"
-  },
   error: {
     sj55zd: "f1hcrxcs"
   },
@@ -102,34 +79,34 @@ const useValidationMessageIconStyles = /*#__PURE__*/react_1.__styles({
     sj55zd: "ffmvakt"
   }
 }, {
-  d: [".ftgm304{display:block;}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".f1ugzwwg{font-size:12px;}", ".fp4gqsa{line-height:12px;}", ".fm0x6gh{margin-right:var(--spacingHorizontalXS);}", ".fbyavb5{margin-left:var(--spacingHorizontalXS);}", ".fww94b8{margin-top:var(--spacingVerticalXS);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}"]
+  d: [".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}"]
 });
 /**
  * Apply styling to the Field slots based on the state
  */
 const useFieldStyles_unstable = state => {
-  const classNames = state.classNames;
-  const validationState = state.validationState;
+  const {
+    validationState
+  } = state;
   const horizontal = state.orientation === 'horizontal';
   const rootStyles = useRootStyles();
-  state.root.className = react_1.mergeClasses(classNames.root, rootStyles.base, horizontal && rootStyles.horizontal, state.root.className);
-  if (state.control) {
-    state.control.className = react_1.mergeClasses(classNames.control, rootStyles.control, state.control.className);
-  }
+  state.root.className = react_1.mergeClasses(exports.fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);
   const labelStyles = useLabelStyles();
   if (state.label) {
-    state.label.className = react_1.mergeClasses(classNames.label, rootStyles.label, labelStyles.base, state.label.className);
+    state.label.className = react_1.mergeClasses(exports.fieldClassNames.label, labelStyles.base, horizontal && labelStyles.horizontal, !horizontal && labelStyles.vertical, state.label.size === 'large' && labelStyles.large, !horizontal && state.label.size === 'large' && labelStyles.verticalLarge, state.label.className);
   }
+  const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
   const validationMessageIconStyles = useValidationMessageIconStyles();
   if (state.validationMessageIcon) {
-    state.validationMessageIcon.className = react_1.mergeClasses(classNames.validationMessageIcon, rootStyles.validationIcon, validationMessageIconStyles.base, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
+    state.validationMessageIcon.className = react_1.mergeClasses(exports.fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
   }
+  const secondaryTextBaseClassName = useSecondaryTextBaseClassName();
   const secondaryTextStyles = useSecondaryTextStyles();
   if (state.validationMessage) {
-    state.validationMessage.className = react_1.mergeClasses(classNames.validationMessage, rootStyles.validationMessage, secondaryTextStyles.base, validationState === 'error' && secondaryTextStyles.error, state.validationMessage.className);
+    state.validationMessage.className = react_1.mergeClasses(exports.fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);
   }
   if (state.hint) {
-    state.hint.className = react_1.mergeClasses(classNames.hint, secondaryTextStyles.base, rootStyles.hint, state.hint.className);
+    state.hint.className = react_1.mergeClasses(exports.fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);
   }
 };
 exports.useFieldStyles_unstable = useFieldStyles_unstable;

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

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["getFieldClassNames","name","root","control","label","validationMessage","validationMessageIcon","hint","exports","useRootStyles","react_1","useLabelStyles","useSecondaryTextStyles","useValidationMessageIconStyles","useFieldStyles_unstable","state","classNames","validationState","horizontal","orientation","rootStyles","className","base","labelStyles","validationMessageIconStyles","validationIcon","secondaryTextStyles","error"],"sourceRoot":"../src/","sources":["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 { makeStyles, mergeClasses } from '@griffel/react';\nimport type { FieldControl, FieldProps, FieldSlots, FieldState } from './Field.types';\n\nexport const getFieldClassNames = (name: string): SlotClassNames<FieldSlots<FieldControl>> => ({\n  root: `fui-${name}`,\n  control: `fui-${name}__control`,\n  label: `fui-${name}__label`,\n  validationMessage: `fui-${name}__validationMessage`,\n  validationMessageIcon: `fui-${name}__validationMessageIcon`,\n  hint: `fui-${name}__hint`,\n});\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'grid',\n    gridAutoFlow: 'row',\n    gridTemplateColumns: 'auto 1fr',\n    gridTemplateAreas: `\n      \"label label\"\n      \"control control\"\n      \"validationIcon validationMessage\"\n      \"hint hint\"\n    `,\n    justifyItems: 'start',\n  },\n\n  horizontal: {\n    gridTemplateColumns: '33% auto 1fr',\n    gridTemplateAreas: `\n      \"label control control\"\n      \"label validationIcon validationMessage\"\n      \"label hint hint\"\n      \"label . .\"\n    `,\n  },\n\n  label: {\n    gridColumnStart: 'label',\n    gridColumnEnd: 'label',\n    gridRowStart: 'label',\n    gridRowEnd: 'label',\n  },\n\n  control: {\n    gridColumnStart: 'control',\n    gridColumnEnd: 'control',\n  },\n\n  validationIcon: {\n    gridColumnStart: 'validationIcon',\n    gridColumnEnd: 'validationIcon',\n  },\n\n  validationMessage: {\n    gridColumnStart: 'validationMessage',\n    gridColumnEnd: 'validationMessage',\n  },\n\n  hint: {\n    gridColumnStart: 'hint',\n    gridColumnEnd: 'hint',\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  base: {\n    marginTop: tokens.spacingVerticalXXS,\n    marginBottom: tokens.spacingVerticalXXS,\n  },\n\n  horizontal: {\n    marginRight: tokens.spacingHorizontalM,\n    alignSelf: 'start',\n    justifySelf: 'stretch',\n  },\n});\n\nconst useSecondaryTextStyles = makeStyles({\n  base: {\n    marginTop: tokens.spacingVerticalXXS,\n    color: tokens.colorNeutralForeground3,\n    ...typographyStyles.caption1,\n  },\n\n  error: {\n    color: tokens.colorPaletteRedForeground1,\n  },\n});\n\nconst useValidationMessageIconStyles = makeStyles({\n  base: {\n    display: 'block',\n    alignSelf: 'start',\n    fontSize: '12px',\n    lineHeight: '12px',\n    marginRight: tokens.spacingHorizontalXS,\n    marginTop: tokens.spacingVerticalXS,\n  },\n\n  error: {\n    color: tokens.colorPaletteRedForeground1,\n  },\n  warning: {\n    color: tokens.colorPaletteDarkOrangeForeground1,\n  },\n  success: {\n    color: tokens.colorPaletteGreenForeground1,\n  },\n});\n\n/**\n * Apply styling to the Field slots based on the state\n */\nexport const useFieldStyles_unstable = <T extends FieldControl>(state: FieldState<T>) => {\n  const classNames = state.classNames;\n  const validationState: FieldProps<FieldControl>['validationState'] = state.validationState;\n  const horizontal = state.orientation === 'horizontal';\n\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(\n    classNames.root,\n    rootStyles.base,\n    horizontal && rootStyles.horizontal,\n    state.root.className,\n  );\n\n  if (state.control) {\n    state.control.className = mergeClasses(classNames.control, rootStyles.control, state.control.className);\n  }\n\n  const labelStyles = useLabelStyles();\n  if (state.label) {\n    state.label.className = mergeClasses(classNames.label, rootStyles.label, labelStyles.base, state.label.className);\n  }\n\n  const validationMessageIconStyles = useValidationMessageIconStyles();\n  if (state.validationMessageIcon) {\n    state.validationMessageIcon.className = mergeClasses(\n      classNames.validationMessageIcon,\n      rootStyles.validationIcon,\n      validationMessageIconStyles.base,\n      !!validationState && validationMessageIconStyles[validationState],\n      state.validationMessageIcon.className,\n    );\n  }\n\n  const secondaryTextStyles = useSecondaryTextStyles();\n  if (state.validationMessage) {\n    state.validationMessage.className = mergeClasses(\n      classNames.validationMessage,\n      rootStyles.validationMessage,\n      secondaryTextStyles.base,\n      validationState === 'error' && secondaryTextStyles.error,\n      state.validationMessage.className,\n    );\n  }\n\n  if (state.hint) {\n    state.hint.className = mergeClasses(\n      classNames.hint,\n      secondaryTextStyles.base,\n      rootStyles.hint,\n      state.hint.className,\n    );\n  }\n};\n"]}
+{"version":3,"mappings":"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","names":["exports","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","react_1","useLabelStyles","useSecondaryTextBaseClassName","useSecondaryTextStyles","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","useFieldStyles_unstable","state","validationState","horizontal","orientation","rootStyles","className","base","horizontalNoLabel","labelStyles","vertical","size","large","verticalLarge","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles","error","withIcon"],"sourceRoot":"../src/","sources":["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 && 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-commonjs/index.js

@@ -3,12 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useField_unstable = exports.useFieldStyles_unstable = exports.renderField_unstable = exports.getFieldClassNames = void 0;
+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, "getFieldClassNames", {
+Object.defineProperty(exports, "Field", {
   enumerable: true,
   get: function () {
-    return Field_1.getFieldClassNames;
+    return Field_1.Field;
+  }
+});
+Object.defineProperty(exports, "fieldClassNames", {
+  enumerable: true,
+  get: function () {
+    return Field_1.fieldClassNames;
   }
 });
 Object.defineProperty(exports, "renderField_unstable", {
@@ -29,4 +35,18 @@ Object.defineProperty(exports, "useField_unstable", {
     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;
+  }
+});
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AAASA;EAAAC;EAAAC;IAAA,iCAAkB;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,mCAAoB;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,sCAAuB;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,gCAAiB;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"../src/","sources":["packages/react-components/react-field/src/index.ts"],"sourcesContent":["export { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field';\nexport type { FieldConfig, FieldControl, FieldProps, FieldSlots, FieldState } from './Field';\n"]}
+{"version":3,"mappings":";;;;;;AAAA;AAASA;EAAAC;EAAAC;IAAA,oBAAK;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,8BAAe;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,mCAAoB;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,sCAAuB;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,gCAAiB;EAAA;AAAA;AAGjG;AACA;AAASF;EAAAC;EAAAC;IAAA,yDAA4B;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,gDAAmB;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"../src/","sources":["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"]}

package/lib-commonjs/util/makeDeprecatedField.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDeprecatedFieldClassNames = exports.makeDeprecatedField = void 0;
+/* eslint-disable deprecation/deprecation */
+const React = /*#__PURE__*/require("react");
+const Field_1 = /*#__PURE__*/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,
+    ...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;
+}
+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;
+//# sourceMappingURL=makeDeprecatedField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;AAqBA;;;AAGA,SAASA,wBAAwB,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;IACf,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,mBAAmB,CACjCC,OAA0C,EAC1CC,UAGI,EAAE;EAEN,MAAM;IAAEC,QAAQ,GAAGjB,KAAK,IAAIA,KAAK;IAAEkB,WAAW,GAAG,GAAGH,OAAO,CAACG,WAAW;EAAO,CAAE,GAAGF,OAAO;EAE1F,MAAMG,eAAe,GAAGC,KAAK,CAACC,UAAU,CAAC,CAACrB,KAAK,EAAEsB,GAAG,KAAI;IACtD,MAAM,CAACC,UAAU,EAAEC,YAAY,CAAC,GAAGzB,wBAAwB,CAACkB,QAAQ,CAACjB,KAAK,CAAC,CAAC;IAC5E,OACEoB,oBAACK,aAAK;MAAA,GAAKF;IAAU,GAEnBH,oBAACL,OAAO;MAAA,GAAMS,YAAoB;MAAEF,GAAG,EAAEA;IAAU,EAAI,CACjD;EAEZ,CAAC,CAA4D;EAE7DH,eAAe,CAACD,WAAW,GAAGA,WAAW;EAEzC,OAAOC,eAAe;AACxB;AAtBAO;AAwBA;;;;AAIO,MAAMC,4BAA4B,GAAIC,oBAA4B,KAAM;EAC7E,GAAGH,uBAAe;EAClBvB,OAAO,EAAE0B;CACV,CAAC;AAHWF,oCAA4B","names":["getPartitionedFieldProps","props","className","control","hint","label","orientation","required","root","size","style","validationMessage","validationMessageIcon","validationState","restOfProps","makeDeprecatedField","Control","options","mapProps","displayName","DeprecatedField","React","forwardRef","ref","fieldProps","controlProps","Field_1","exports","getDeprecatedFieldClassNames","controlRootClassName"],"sourceRoot":"../src/","sources":["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,\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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-field",
-  "version": "9.0.0-alpha.15",
+  "version": "9.0.0-alpha.17",
   "description": "Fluent UI Field components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -13,6 +13,7 @@
   "license": "MIT",
   "scripts": {
     "build": "just-scripts build",
+    "bundle-size": "bundle-size measure",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
     "just": "just-scripts",
@@ -31,11 +32,11 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-context-selector": "^9.1.5",
+    "@fluentui/react-context-selector": "^9.1.6",
     "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-label": "^9.0.17",
+    "@fluentui/react-label": "^9.0.18",
     "@fluentui/react-theme": "^9.1.5",
-    "@fluentui/react-utilities": "^9.4.0",
+    "@fluentui/react-utilities": "^9.5.0",
     "@griffel/react": "^1.5.2",
     "tslib": "^2.1.0"
   },