@fluentui/react-field 9.5.1 → 9.5.3

package/CHANGELOG.md

@@ -1,21 +1,46 @@
 # Change Log - @fluentui/react-field
 
-This log was last generated on Thu, 23 Apr 2026 11:59:22 GMT and should not be manually modified.
+This log was last generated on Wed, 24 Jun 2026 11:03:32 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.5.3)
+
+Wed, 24 Jun 2026 11:03:32 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.5.2..@fluentui/react-field_v9.5.3)
+
+### Patches
+
+- fix: remove redundant use no memo directives, and add justification to valid ones ([PR #36224](https://github.com/microsoft/fluentui/pull/36224) by martinhochel@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.2.18 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.4 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-label to v9.4.3 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-utilities to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+
+## [9.5.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.5.2)
+
+Tue, 26 May 2026 09:39:58 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.5.1..@fluentui/react-field_v9.5.2)
+
+### Patches
+
+- Bump @fluentui/react-context-selector to v9.2.17 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-label to v9.4.2 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+
 ## [9.5.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.5.1)
 
-Thu, 23 Apr 2026 11:59:22 GMT 
+Thu, 23 Apr 2026 14:21:16 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.5.0..@fluentui/react-field_v9.5.1)
 
 ### Patches
 
 - fix: add missing base hook export ([PR #35972](https://github.com/microsoft/fluentui/pull/35972) by dmytrokirpa@microsoft.com)
-- Bump @fluentui/react-context-selector to v9.2.16 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-label to v9.4.1 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.16 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-label to v9.4.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
 
 ## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.5.0)
 

package/lib/components/Field/useFieldStyles.styles.js

@@ -91,30 +91,33 @@ const useValidationMessageIconStyles = /*#__PURE__*/__styles({
  * Apply styling to the Field slots based on the state
  */
 export const useFieldStyles_unstable = state => {
-  'use no memo';
-
   const {
     validationState,
     size
   } = state;
   const horizontal = state.orientation === 'horizontal';
   const rootStyles = useRootStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);
   const labelStyles = useLabelStyles();
   if (state.label) {
+    // eslint-disable-next-line react-hooks/immutability
     state.label.className = mergeClasses(fieldClassNames.label, labelStyles.base, horizontal && labelStyles.horizontal, horizontal && size === 'small' && labelStyles.horizontalSmall, horizontal && size === 'large' && labelStyles.horizontalLarge, !horizontal && labelStyles.vertical, !horizontal && size === 'large' && labelStyles.verticalLarge, state.label.className);
   }
   const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
   const validationMessageIconStyles = useValidationMessageIconStyles();
   if (state.validationMessageIcon) {
+    // eslint-disable-next-line react-hooks/immutability
     state.validationMessageIcon.className = mergeClasses(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== 'none' && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
   }
   const secondaryTextBaseClassName = useSecondaryTextBaseClassName();
   const secondaryTextStyles = useSecondaryTextStyles();
   if (state.validationMessage) {
+    // eslint-disable-next-line react-hooks/immutability
     state.validationMessage.className = mergeClasses(fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);
   }
   if (state.hint) {
+    // eslint-disable-next-line react-hooks/immutability
     state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);
   }
   return state;

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

@@ -1 +1 @@
-{"version":3,"names":["tokens","typographyStyles","__resetStyles","__styles","mergeClasses","fieldClassNames","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","base","mc9l5x","horizontal","Budl1dq","wkccdc","horizontalNoLabel","uwmqm3","d","useLabelStyles","B2u0y6b","Bxyxcbc","vertical","z8tnut","Byoj8tv","jrapky","verticalLarge","t21cq0","Ijaq50","nk6f5a","horizontalSmall","horizontalLarge","useSecondaryTextBaseClassName","useSecondaryTextStyles","error","sj55zd","withIcon","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","warning","success","useFieldStyles_unstable","state","validationState","size","orientation","rootStyles","className","labelStyles","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"sources":["useFieldStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, 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 */ const useRootStyles = makeStyles({\n    base: {\n        display: 'grid'\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    // 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});\nconst useLabelStyles = makeStyles({\n    base: {\n        maxWidth: 'max-content',\n        maxHeight: 'max-content'\n    },\n    vertical: {\n        paddingTop: tokens.spacingVerticalXXS,\n        paddingBottom: tokens.spacingVerticalXXS,\n        marginBottom: tokens.spacingVerticalXXS\n    },\n    verticalLarge: {\n        paddingTop: '1px',\n        paddingBottom: '1px',\n        marginBottom: tokens.spacingVerticalXS\n    },\n    horizontal: {\n        paddingTop: tokens.spacingVerticalSNudge,\n        paddingBottom: tokens.spacingVerticalSNudge,\n        marginRight: tokens.spacingHorizontalM,\n        gridRowStart: '1',\n        gridRowEnd: '-1'\n    },\n    horizontalSmall: {\n        paddingTop: tokens.spacingVerticalXS,\n        paddingBottom: tokens.spacingVerticalXS\n    },\n    horizontalLarge: {\n        // To align the label text with the Input text, it should be centered within the 40px height of the Input.\n        // This is (40px - lineHeightBase400) / 2 = 9px. Hardcoded since there is no 9px padding token.\n        paddingTop: '9px',\n        paddingBottom: '9px'\n    }\n});\nconst useSecondaryTextBaseClassName = makeResetStyles({\n    marginTop: tokens.spacingVerticalXXS,\n    color: tokens.colorNeutralForeground3,\n    ...typographyStyles.caption1\n});\nconst useSecondaryTextStyles = makeStyles({\n    error: {\n        color: tokens.colorPaletteRedForeground1\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});\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});\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 * Apply styling to the Field slots based on the state\n */ export const useFieldStyles_unstable = (state)=>{\n    'use no memo';\n    const { validationState, size } = 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 && size === 'small' && labelStyles.horizontalSmall, horizontal && size === 'large' && labelStyles.horizontalLarge, !horizontal && labelStyles.vertical, !horizontal && 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    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["tokens","typographyStyles","__resetStyles","__styles","mergeClasses","fieldClassNames","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","base","mc9l5x","horizontal","Budl1dq","wkccdc","horizontalNoLabel","uwmqm3","d","useLabelStyles","B2u0y6b","Bxyxcbc","vertical","z8tnut","Byoj8tv","jrapky","verticalLarge","t21cq0","Ijaq50","nk6f5a","horizontalSmall","horizontalLarge","useSecondaryTextBaseClassName","useSecondaryTextStyles","error","sj55zd","withIcon","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","warning","success","useFieldStyles_unstable","state","validationState","size","orientation","rootStyles","className","labelStyles","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"sources":["useFieldStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, 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 */ const useRootStyles = makeStyles({\n    base: {\n        display: 'grid'\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    // 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});\nconst useLabelStyles = makeStyles({\n    base: {\n        maxWidth: 'max-content',\n        maxHeight: 'max-content'\n    },\n    vertical: {\n        paddingTop: tokens.spacingVerticalXXS,\n        paddingBottom: tokens.spacingVerticalXXS,\n        marginBottom: tokens.spacingVerticalXXS\n    },\n    verticalLarge: {\n        paddingTop: '1px',\n        paddingBottom: '1px',\n        marginBottom: tokens.spacingVerticalXS\n    },\n    horizontal: {\n        paddingTop: tokens.spacingVerticalSNudge,\n        paddingBottom: tokens.spacingVerticalSNudge,\n        marginRight: tokens.spacingHorizontalM,\n        gridRowStart: '1',\n        gridRowEnd: '-1'\n    },\n    horizontalSmall: {\n        paddingTop: tokens.spacingVerticalXS,\n        paddingBottom: tokens.spacingVerticalXS\n    },\n    horizontalLarge: {\n        // To align the label text with the Input text, it should be centered within the 40px height of the Input.\n        // This is (40px - lineHeightBase400) / 2 = 9px. Hardcoded since there is no 9px padding token.\n        paddingTop: '9px',\n        paddingBottom: '9px'\n    }\n});\nconst useSecondaryTextBaseClassName = makeResetStyles({\n    marginTop: tokens.spacingVerticalXXS,\n    color: tokens.colorNeutralForeground3,\n    ...typographyStyles.caption1\n});\nconst useSecondaryTextStyles = makeStyles({\n    error: {\n        color: tokens.colorPaletteRedForeground1\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});\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});\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 * Apply styling to the Field slots based on the state\n */ export const useFieldStyles_unstable = (state)=>{\n    const { validationState, size } = state;\n    const horizontal = state.orientation === 'horizontal';\n    const rootStyles = useRootStyles();\n    // eslint-disable-next-line react-hooks/immutability\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        // eslint-disable-next-line react-hooks/immutability\n        state.label.className = mergeClasses(fieldClassNames.label, labelStyles.base, horizontal && labelStyles.horizontal, horizontal && size === 'small' && labelStyles.horizontalSmall, horizontal && size === 'large' && labelStyles.horizontalLarge, !horizontal && labelStyles.vertical, !horizontal && size === 'large' && labelStyles.verticalLarge, state.label.className);\n    }\n    const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();\n    const validationMessageIconStyles = useValidationMessageIconStyles();\n    if (state.validationMessageIcon) {\n        // eslint-disable-next-line react-hooks/immutability\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        // eslint-disable-next-line react-hooks/immutability\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        // eslint-disable-next-line react-hooks/immutability\n        state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/Field/useFieldStyles.styles.raw.js

@@ -101,26 +101,30 @@ const useValidationMessageIconStyles = makeStyles({
 /**
  * Apply styling to the Field slots based on the state
  */ export const useFieldStyles_unstable = (state)=>{
-    'use no memo';
     const { validationState, size } = state;
     const horizontal = state.orientation === 'horizontal';
     const rootStyles = useRootStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);
     const labelStyles = useLabelStyles();
     if (state.label) {
+        // eslint-disable-next-line react-hooks/immutability
         state.label.className = mergeClasses(fieldClassNames.label, labelStyles.base, horizontal && labelStyles.horizontal, horizontal && size === 'small' && labelStyles.horizontalSmall, horizontal && size === 'large' && labelStyles.horizontalLarge, !horizontal && labelStyles.vertical, !horizontal && size === 'large' && labelStyles.verticalLarge, state.label.className);
     }
     const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
     const validationMessageIconStyles = useValidationMessageIconStyles();
     if (state.validationMessageIcon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.validationMessageIcon.className = mergeClasses(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== 'none' && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
     }
     const secondaryTextBaseClassName = useSecondaryTextBaseClassName();
     const secondaryTextStyles = useSecondaryTextStyles();
     if (state.validationMessage) {
+        // eslint-disable-next-line react-hooks/immutability
         state.validationMessage.className = mergeClasses(fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);
     }
     if (state.hint) {
+        // eslint-disable-next-line react-hooks/immutability
         state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);
     }
     return state;

package/lib/components/Field/useFieldStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Field/useFieldStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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    maxWidth: 'max-content',\n    maxHeight: 'max-content',\n  },\n\n  vertical: {\n    paddingTop: tokens.spacingVerticalXXS,\n    paddingBottom: tokens.spacingVerticalXXS,\n    marginBottom: tokens.spacingVerticalXXS,\n  },\n\n  verticalLarge: {\n    paddingTop: '1px',\n    paddingBottom: '1px',\n    marginBottom: tokens.spacingVerticalXS,\n  },\n\n  horizontal: {\n    paddingTop: tokens.spacingVerticalSNudge,\n    paddingBottom: tokens.spacingVerticalSNudge,\n    marginRight: tokens.spacingHorizontalM,\n    gridRowStart: '1',\n    gridRowEnd: '-1',\n  },\n\n  horizontalSmall: {\n    paddingTop: tokens.spacingVerticalXS,\n    paddingBottom: tokens.spacingVerticalXS,\n  },\n\n  horizontalLarge: {\n    // To align the label text with the Input text, it should be centered within the 40px height of the Input.\n    // This is (40px - lineHeightBase400) / 2 = 9px. Hardcoded since there is no 9px padding token.\n    paddingTop: '9px',\n    paddingBottom: '9px',\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): FieldState => {\n  'use no memo';\n\n  const { validationState, size } = 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 && size === 'small' && labelStyles.horizontalSmall,\n      horizontal && size === 'large' && labelStyles.horizontalLarge,\n      !horizontal && labelStyles.vertical,\n      !horizontal && 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  return state;\n};\n"],"names":["tokens","typographyStyles","makeResetStyles","makeStyles","mergeClasses","fieldClassNames","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","base","display","horizontal","gridTemplateColumns","gridTemplateRows","horizontalNoLabel","paddingLeft","useLabelStyles","maxWidth","maxHeight","vertical","paddingTop","spacingVerticalXXS","paddingBottom","marginBottom","verticalLarge","spacingVerticalXS","spacingVerticalSNudge","marginRight","spacingHorizontalM","gridRowStart","gridRowEnd","horizontalSmall","horizontalLarge","useSecondaryTextBaseClassName","marginTop","color","colorNeutralForeground3","caption1","useSecondaryTextStyles","error","colorPaletteRedForeground1","withIcon","spacingHorizontalXS","useValidationMessageIconBaseClassName","fontSize","marginLeft","lineHeight","verticalAlign","useValidationMessageIconStyles","warning","colorPaletteDarkOrangeForeground1","success","colorPaletteGreenForeground1","useFieldStyles_unstable","state","validationState","size","orientation","rootStyles","className","labelStyles","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"mappings":"AAAA;AAEA,SAASA,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAEjE,SAASC,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,OAAO,MAAMC,kBAA8C;IACzDC,MAAM,CAAC,SAAS,CAAC;IACjBC,OAAO,CAAC,gBAAgB,CAAC;IACzBC,mBAAmB,CAAC,4BAA4B,CAAC;IACjDC,uBAAuB,CAAC,gCAAgC,CAAC;IACzDC,MAAM,CAAC,eAAe,CAAC;AACzB,EAAE;AAEF,6CAA6C;AAC7C,MAAMC,WAAW;AAEjB;;CAEC,GACD,MAAMC,gBAAgBT,WAAW;IAC/BU,MAAM;QACJC,SAAS;IACX;IAEA,8FAA8F;IAC9F,wFAAwF;IACxFC,YAAY;QACVC,qBAAqB;QACrBC,kBAAkB;IACpB;IAEA,iFAAiF;IACjF,gHAAgH;IAChHC,mBAAmB;QACjBC,aAAa;QACbH,qBAAqB;IACvB;AACF;AAEA,MAAMI,iBAAiBjB,WAAW;IAChCU,MAAM;QACJQ,UAAU;QACVC,WAAW;IACb;IAEAC,UAAU;QACRC,YAAYxB,OAAOyB,kBAAkB;QACrCC,eAAe1B,OAAOyB,kBAAkB;QACxCE,cAAc3B,OAAOyB,kBAAkB;IACzC;IAEAG,eAAe;QACbJ,YAAY;QACZE,eAAe;QACfC,cAAc3B,OAAO6B,iBAAiB;IACxC;IAEAd,YAAY;QACVS,YAAYxB,OAAO8B,qBAAqB;QACxCJ,eAAe1B,OAAO8B,qBAAqB;QAC3CC,aAAa/B,OAAOgC,kBAAkB;QACtCC,cAAc;QACdC,YAAY;IACd;IAEAC,iBAAiB;QACfX,YAAYxB,OAAO6B,iBAAiB;QACpCH,eAAe1B,OAAO6B,iBAAiB;IACzC;IAEAO,iBAAiB;QACf,0GAA0G;QAC1G,+FAA+F;QAC/FZ,YAAY;QACZE,eAAe;IACjB;AACF;AAEA,MAAMW,gCAAgCnC,gBAAgB;IACpDoC,WAAWtC,OAAOyB,kBAAkB;IACpCc,OAAOvC,OAAOwC,uBAAuB;IACrC,GAAGvC,iBAAiBwC,QAAQ;AAC9B;AAEA,MAAMC,yBAAyBvC,WAAW;IACxCwC,OAAO;QACLJ,OAAOvC,OAAO4C,0BAA0B;IAC1C;IAEAC,UAAU;QACR,kGAAkG;QAClG1B,aAAa,CAAC,KAAK,EAAER,SAAS,GAAG,EAAEX,OAAO8C,mBAAmB,CAAC,CAAC,CAAC;IAClE;AACF;AAEA,MAAMC,wCAAwC7C,gBAAgB;IAC5DY,SAAS;IACTkC,UAAUrC;IACV,mGAAmG;IACnGsC,YAAY,CAAC,MAAM,EAAEtC,SAAS,GAAG,EAAEX,OAAO8C,mBAAmB,CAAC,CAAC,CAAC;IAChEf,aAAa/B,OAAO8C,mBAAmB;IACvC,0FAA0F;IAC1FI,YAAY;IACZ,uGAAuG;IACvGC,eAAe;AACjB;AAEA,MAAMC,iCAAiCjD,WAAW;IAChDwC,OAAO;QACLJ,OAAOvC,OAAO4C,0BAA0B;IAC1C;IACAS,SAAS;QACPd,OAAOvC,OAAOsD,iCAAiC;IACjD;IACAC,SAAS;QACPhB,OAAOvC,OAAOwD,4BAA4B;IAC5C;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC;IACtC;IAEA,MAAM,EAAEC,eAAe,EAAEC,IAAI,EAAE,GAAGF;IAClC,MAAM3C,aAAa2C,MAAMG,WAAW,KAAK;IAEzC,MAAMC,aAAalD;IACnB8C,MAAMpD,IAAI,CAACyD,SAAS,GAAG3D,aACrBC,gBAAgBC,IAAI,EACpBwD,WAAWjD,IAAI,EACfE,cAAc+C,WAAW/C,UAAU,EACnCA,cAAc,CAAC2C,MAAMnD,KAAK,IAAIuD,WAAW5C,iBAAiB,EAC1DwC,MAAMpD,IAAI,CAACyD,SAAS;IAGtB,MAAMC,cAAc5C;IACpB,IAAIsC,MAAMnD,KAAK,EAAE;QACfmD,MAAMnD,KAAK,CAACwD,SAAS,GAAG3D,aACtBC,gBAAgBE,KAAK,EACrByD,YAAYnD,IAAI,EAChBE,cAAciD,YAAYjD,UAAU,EACpCA,cAAc6C,SAAS,WAAWI,YAAY7B,eAAe,EAC7DpB,cAAc6C,SAAS,WAAWI,YAAY5B,eAAe,EAC7D,CAACrB,cAAciD,YAAYzC,QAAQ,EACnC,CAACR,cAAc6C,SAAS,WAAWI,YAAYpC,aAAa,EAC5D8B,MAAMnD,KAAK,CAACwD,SAAS;IAEzB;IAEA,MAAME,qCAAqClB;IAC3C,MAAMmB,8BAA8Bd;IACpC,IAAIM,MAAMjD,qBAAqB,EAAE;QAC/BiD,MAAMjD,qBAAqB,CAACsD,SAAS,GAAG3D,aACtCC,gBAAgBI,qBAAqB,EACrCwD,oCACAN,oBAAoB,UAAUO,2BAA2B,CAACP,gBAAgB,EAC1ED,MAAMjD,qBAAqB,CAACsD,SAAS;IAEzC;IAEA,MAAMI,6BAA6B9B;IACnC,MAAM+B,sBAAsB1B;IAC5B,IAAIgB,MAAMlD,iBAAiB,EAAE;QAC3BkD,MAAMlD,iBAAiB,CAACuD,SAAS,GAAG3D,aAClCC,gBAAgBG,iBAAiB,EACjC2D,4BACAR,oBAAoB,WAAWS,oBAAoBzB,KAAK,EACxD,CAAC,CAACe,MAAMjD,qBAAqB,IAAI2D,oBAAoBvB,QAAQ,EAC7Da,MAAMlD,iBAAiB,CAACuD,SAAS;IAErC;IAEA,IAAIL,MAAMhD,IAAI,EAAE;QACdgD,MAAMhD,IAAI,CAACqD,SAAS,GAAG3D,aAAaC,gBAAgBK,IAAI,EAAEyD,4BAA4BT,MAAMhD,IAAI,CAACqD,SAAS;IAC5G;IAEA,OAAOL;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Field/useFieldStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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    maxWidth: 'max-content',\n    maxHeight: 'max-content',\n  },\n\n  vertical: {\n    paddingTop: tokens.spacingVerticalXXS,\n    paddingBottom: tokens.spacingVerticalXXS,\n    marginBottom: tokens.spacingVerticalXXS,\n  },\n\n  verticalLarge: {\n    paddingTop: '1px',\n    paddingBottom: '1px',\n    marginBottom: tokens.spacingVerticalXS,\n  },\n\n  horizontal: {\n    paddingTop: tokens.spacingVerticalSNudge,\n    paddingBottom: tokens.spacingVerticalSNudge,\n    marginRight: tokens.spacingHorizontalM,\n    gridRowStart: '1',\n    gridRowEnd: '-1',\n  },\n\n  horizontalSmall: {\n    paddingTop: tokens.spacingVerticalXS,\n    paddingBottom: tokens.spacingVerticalXS,\n  },\n\n  horizontalLarge: {\n    // To align the label text with the Input text, it should be centered within the 40px height of the Input.\n    // This is (40px - lineHeightBase400) / 2 = 9px. Hardcoded since there is no 9px padding token.\n    paddingTop: '9px',\n    paddingBottom: '9px',\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): FieldState => {\n  const { validationState, size } = state;\n  const horizontal = state.orientation === 'horizontal';\n\n  const rootStyles = useRootStyles();\n  // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\n    state.label.className = mergeClasses(\n      fieldClassNames.label,\n      labelStyles.base,\n      horizontal && labelStyles.horizontal,\n      horizontal && size === 'small' && labelStyles.horizontalSmall,\n      horizontal && size === 'large' && labelStyles.horizontalLarge,\n      !horizontal && labelStyles.vertical,\n      !horizontal && size === 'large' && labelStyles.verticalLarge,\n      state.label.className,\n    );\n  }\n\n  const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();\n  const validationMessageIconStyles = useValidationMessageIconStyles();\n  if (state.validationMessageIcon) {\n    // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\n    state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);\n  }\n\n  return state;\n};\n"],"names":["tokens","typographyStyles","makeResetStyles","makeStyles","mergeClasses","fieldClassNames","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","base","display","horizontal","gridTemplateColumns","gridTemplateRows","horizontalNoLabel","paddingLeft","useLabelStyles","maxWidth","maxHeight","vertical","paddingTop","spacingVerticalXXS","paddingBottom","marginBottom","verticalLarge","spacingVerticalXS","spacingVerticalSNudge","marginRight","spacingHorizontalM","gridRowStart","gridRowEnd","horizontalSmall","horizontalLarge","useSecondaryTextBaseClassName","marginTop","color","colorNeutralForeground3","caption1","useSecondaryTextStyles","error","colorPaletteRedForeground1","withIcon","spacingHorizontalXS","useValidationMessageIconBaseClassName","fontSize","marginLeft","lineHeight","verticalAlign","useValidationMessageIconStyles","warning","colorPaletteDarkOrangeForeground1","success","colorPaletteGreenForeground1","useFieldStyles_unstable","state","validationState","size","orientation","rootStyles","className","labelStyles","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"mappings":"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"}

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

@@ -151,26 +151,30 @@ const useValidationMessageIconStyles = /*#__PURE__*/ (0, _react.__styles)({
     ]
 });
 const useFieldStyles_unstable = (state)=>{
-    'use no memo';
     const { validationState, size } = state;
     const horizontal = state.orientation === 'horizontal';
     const rootStyles = useRootStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);
     const labelStyles = useLabelStyles();
     if (state.label) {
+        // eslint-disable-next-line react-hooks/immutability
         state.label.className = (0, _react.mergeClasses)(fieldClassNames.label, labelStyles.base, horizontal && labelStyles.horizontal, horizontal && size === 'small' && labelStyles.horizontalSmall, horizontal && size === 'large' && labelStyles.horizontalLarge, !horizontal && labelStyles.vertical, !horizontal && size === 'large' && labelStyles.verticalLarge, state.label.className);
     }
     const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
     const validationMessageIconStyles = useValidationMessageIconStyles();
     if (state.validationMessageIcon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.validationMessageIcon.className = (0, _react.mergeClasses)(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== 'none' && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
     }
     const secondaryTextBaseClassName = useSecondaryTextBaseClassName();
     const secondaryTextStyles = useSecondaryTextStyles();
     if (state.validationMessage) {
+        // eslint-disable-next-line react-hooks/immutability
         state.validationMessage.className = (0, _react.mergeClasses)(fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);
     }
     if (state.hint) {
+        // eslint-disable-next-line react-hooks/immutability
         state.hint.className = (0, _react.mergeClasses)(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);
     }
     return state;

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

@@ -1 +1 @@
-{"version":3,"sources":["useFieldStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, 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 */ const useRootStyles = makeStyles({\n    base: {\n        display: 'grid'\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    // 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});\nconst useLabelStyles = makeStyles({\n    base: {\n        maxWidth: 'max-content',\n        maxHeight: 'max-content'\n    },\n    vertical: {\n        paddingTop: tokens.spacingVerticalXXS,\n        paddingBottom: tokens.spacingVerticalXXS,\n        marginBottom: tokens.spacingVerticalXXS\n    },\n    verticalLarge: {\n        paddingTop: '1px',\n        paddingBottom: '1px',\n        marginBottom: tokens.spacingVerticalXS\n    },\n    horizontal: {\n        paddingTop: tokens.spacingVerticalSNudge,\n        paddingBottom: tokens.spacingVerticalSNudge,\n        marginRight: tokens.spacingHorizontalM,\n        gridRowStart: '1',\n        gridRowEnd: '-1'\n    },\n    horizontalSmall: {\n        paddingTop: tokens.spacingVerticalXS,\n        paddingBottom: tokens.spacingVerticalXS\n    },\n    horizontalLarge: {\n        // To align the label text with the Input text, it should be centered within the 40px height of the Input.\n        // This is (40px - lineHeightBase400) / 2 = 9px. Hardcoded since there is no 9px padding token.\n        paddingTop: '9px',\n        paddingBottom: '9px'\n    }\n});\nconst useSecondaryTextBaseClassName = makeResetStyles({\n    marginTop: tokens.spacingVerticalXXS,\n    color: tokens.colorNeutralForeground3,\n    ...typographyStyles.caption1\n});\nconst useSecondaryTextStyles = makeStyles({\n    error: {\n        color: tokens.colorPaletteRedForeground1\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});\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});\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 * Apply styling to the Field slots based on the state\n */ export const useFieldStyles_unstable = (state)=>{\n    'use no memo';\n    const { validationState, size } = 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 && size === 'small' && labelStyles.horizontalSmall, horizontal && size === 'large' && labelStyles.horizontalLarge, !horizontal && labelStyles.vertical, !horizontal && 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    return state;\n};\n"],"names":["tokens","typographyStyles","__resetStyles","__styles","mergeClasses","fieldClassNames","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","base","mc9l5x","horizontal","Budl1dq","wkccdc","horizontalNoLabel","uwmqm3","d","useLabelStyles","B2u0y6b","Bxyxcbc","vertical","z8tnut","Byoj8tv","jrapky","verticalLarge","t21cq0","Ijaq50","nk6f5a","horizontalSmall","horizontalLarge","useSecondaryTextBaseClassName","useSecondaryTextStyles","error","sj55zd","withIcon","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","warning","success","useFieldStyles_unstable","state","validationState","size","orientation","rootStyles","className","labelStyles","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCK,eAAe;;;2BAmGY;eAAvBsC;;;uBApGyC,gBAAgB;AACnE,wBAAwB;IAC3BrC,IAAI,EAAE,CAAA,SAAA,CAAW;IACjBC,KAAK,EAAE,CAAA,gBAAA,CAAkB;IACzBC,iBAAiB,EAAE,CAAA,4BAAA,CAA8B;IACjDC,qBAAqB,EAAE,CAAA,gCAAA,CAAkC;IACzDC,IAAI,EAAE,CAAA,eAAA,CAAA;AACV,CAAC;AACD,6CAAA;AACA,MAAMC,QAAQ,GAAG,MAAM;AACvB;;CAEA,GAAI,MAAMC,aAAa,GAAA,WAAA,OAAGT,eAAA,EAAA;IAAAU,IAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,UAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,iBAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAH,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAI,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAgBzB,CAAC;AACF,MAAMC,cAAc,GAAA,WAAA,OAAGlB,eAAA,EAAA;IAAAU,IAAA,EAAA;QAAAS,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,aAAA,EAAA;QAAAH,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAZ,UAAA,EAAA;QAAAU,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAG,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,eAAA,EAAA;QAAAP,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAO,eAAA,EAAA;QAAAR,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAN,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAgCtB,CAAC;AACF,MAAMc,6BAA6B,GAAA,WAAA,OAAGhC,oBAAA,EAAA,WAAA,MAAA;IAAA;CAIrC,CAAC;AACF,MAAMiC,sBAAsB,GAAA,WAAA,OAAGhC,eAAA,EAAA;IAAAiC,KAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAnB,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAQ9B,CAAC;AACF,MAAMmB,qCAAqC,GAAA,WAAA,OAAGrC,oBAAA,EAAA,WAAA,YAAA;IAAA;IAAA;CAU7C,CAAC;AACF,MAAMsC,8BAA8B,GAAA,WAAA,OAAGrC,eAAA,EAAA;IAAAiC,KAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAI,OAAA,EAAA;QAAAJ,MAAA,EAAA;IAAA;IAAAK,OAAA,EAAA;QAAAL,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAjB,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAUtC,CAAC;AAGS,iCAAiCwB,KAAK,IAAG;IAChD,aAAa;IACb,MAAM,EAAEC,eAAe,EAAEC,IAAAA,EAAM,GAAGF,KAAK;IACvC,MAAM7B,UAAU,GAAG6B,KAAK,CAACG,WAAW,KAAK,YAAY;IACrD,MAAMC,UAAU,GAAGpC,aAAa,CAAC,CAAC;IAClCgC,KAAK,CAACtC,IAAI,CAAC2C,SAAS,OAAG7C,mBAAY,EAACC,eAAe,CAACC,IAAI,EAAE0C,UAAU,CAACnC,IAAI,EAAEE,UAAU,IAAIiC,UAAU,CAACjC,UAAU,EAAEA,UAAU,IAAI,CAAC6B,KAAK,CAACrC,KAAK,IAAIyC,UAAU,CAAC9B,iBAAiB,EAAE0B,KAAK,CAACtC,IAAI,CAAC2C,SAAS,CAAC;IACjM,MAAMC,WAAW,GAAG7B,cAAc,CAAC,CAAC;IACpC,IAAIuB,KAAK,CAACrC,KAAK,EAAE;QACbqC,KAAK,CAACrC,KAAK,CAAC0C,SAAS,OAAG7C,mBAAY,EAACC,eAAe,CAACE,KAAK,EAAE2C,WAAW,CAACrC,IAAI,EAAEE,UAAU,IAAImC,WAAW,CAACnC,UAAU,EAAEA,UAAU,IAAI+B,IAAI,KAAK,OAAO,IAAII,WAAW,CAAClB,eAAe,EAAEjB,UAAU,IAAI+B,IAAI,KAAK,OAAO,IAAII,WAAW,CAACjB,eAAe,EAAE,CAAClB,UAAU,IAAImC,WAAW,CAAC1B,QAAQ,EAAE,CAACT,UAAU,IAAI+B,IAAI,KAAK,OAAO,IAAII,WAAW,CAACtB,aAAa,EAAEgB,KAAK,CAACrC,KAAK,CAAC0C,SAAS,CAAC;IAC/W;IACA,MAAME,kCAAkC,GAAGZ,qCAAqC,CAAC,CAAC;IAClF,MAAMa,2BAA2B,GAAGZ,8BAA8B,CAAC,CAAC;IACpE,IAAII,KAAK,CAACnC,qBAAqB,EAAE;QAC7BmC,KAAK,CAACnC,qBAAqB,CAACwC,SAAS,OAAG7C,mBAAY,EAACC,eAAe,CAACI,qBAAqB,EAAE0C,kCAAkC,EAAEN,eAAe,KAAK,MAAM,IAAIO,2BAA2B,CAACP,eAAe,CAAC,EAAED,KAAK,CAACnC,qBAAqB,CAACwC,SAAS,CAAC;IACtP;IACA,MAAMI,0BAA0B,GAAGnB,6BAA6B,CAAC,CAAC;IAClE,MAAMoB,mBAAmB,GAAGnB,sBAAsB,CAAC,CAAC;IACpD,IAAIS,KAAK,CAACpC,iBAAiB,EAAE;QACzBoC,KAAK,CAACpC,iBAAiB,CAACyC,SAAS,OAAG7C,mBAAY,EAACC,eAAe,CAACG,iBAAiB,EAAE6C,0BAA0B,EAAER,eAAe,KAAK,OAAO,IAAIS,mBAAmB,CAAClB,KAAK,EAAE,CAAC,CAACQ,KAAK,CAACnC,qBAAqB,IAAI6C,mBAAmB,CAAChB,QAAQ,EAAEM,KAAK,CAACpC,iBAAiB,CAACyC,SAAS,CAAC;IAC/Q;IACA,IAAIL,KAAK,CAAClC,IAAI,EAAE;QACZkC,KAAK,CAAClC,IAAI,CAACuC,SAAS,OAAG7C,mBAAY,EAACC,eAAe,CAACK,IAAI,EAAE2C,0BAA0B,EAAET,KAAK,CAAClC,IAAI,CAACuC,SAAS,CAAC;IAC/G;IACA,OAAOL,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useFieldStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, 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 */ const useRootStyles = makeStyles({\n    base: {\n        display: 'grid'\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    // 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});\nconst useLabelStyles = makeStyles({\n    base: {\n        maxWidth: 'max-content',\n        maxHeight: 'max-content'\n    },\n    vertical: {\n        paddingTop: tokens.spacingVerticalXXS,\n        paddingBottom: tokens.spacingVerticalXXS,\n        marginBottom: tokens.spacingVerticalXXS\n    },\n    verticalLarge: {\n        paddingTop: '1px',\n        paddingBottom: '1px',\n        marginBottom: tokens.spacingVerticalXS\n    },\n    horizontal: {\n        paddingTop: tokens.spacingVerticalSNudge,\n        paddingBottom: tokens.spacingVerticalSNudge,\n        marginRight: tokens.spacingHorizontalM,\n        gridRowStart: '1',\n        gridRowEnd: '-1'\n    },\n    horizontalSmall: {\n        paddingTop: tokens.spacingVerticalXS,\n        paddingBottom: tokens.spacingVerticalXS\n    },\n    horizontalLarge: {\n        // To align the label text with the Input text, it should be centered within the 40px height of the Input.\n        // This is (40px - lineHeightBase400) / 2 = 9px. Hardcoded since there is no 9px padding token.\n        paddingTop: '9px',\n        paddingBottom: '9px'\n    }\n});\nconst useSecondaryTextBaseClassName = makeResetStyles({\n    marginTop: tokens.spacingVerticalXXS,\n    color: tokens.colorNeutralForeground3,\n    ...typographyStyles.caption1\n});\nconst useSecondaryTextStyles = makeStyles({\n    error: {\n        color: tokens.colorPaletteRedForeground1\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});\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});\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 * Apply styling to the Field slots based on the state\n */ export const useFieldStyles_unstable = (state)=>{\n    const { validationState, size } = state;\n    const horizontal = state.orientation === 'horizontal';\n    const rootStyles = useRootStyles();\n    // eslint-disable-next-line react-hooks/immutability\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        // eslint-disable-next-line react-hooks/immutability\n        state.label.className = mergeClasses(fieldClassNames.label, labelStyles.base, horizontal && labelStyles.horizontal, horizontal && size === 'small' && labelStyles.horizontalSmall, horizontal && size === 'large' && labelStyles.horizontalLarge, !horizontal && labelStyles.vertical, !horizontal && size === 'large' && labelStyles.verticalLarge, state.label.className);\n    }\n    const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();\n    const validationMessageIconStyles = useValidationMessageIconStyles();\n    if (state.validationMessageIcon) {\n        // eslint-disable-next-line react-hooks/immutability\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        // eslint-disable-next-line react-hooks/immutability\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        // eslint-disable-next-line react-hooks/immutability\n        state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);\n    }\n    return state;\n};\n"],"names":["tokens","typographyStyles","__resetStyles","__styles","mergeClasses","fieldClassNames","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","base","mc9l5x","horizontal","Budl1dq","wkccdc","horizontalNoLabel","uwmqm3","d","useLabelStyles","B2u0y6b","Bxyxcbc","vertical","z8tnut","Byoj8tv","jrapky","verticalLarge","t21cq0","Ijaq50","nk6f5a","horizontalSmall","horizontalLarge","useSecondaryTextBaseClassName","useSecondaryTextStyles","error","sj55zd","withIcon","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","warning","success","useFieldStyles_unstable","state","validationState","size","orientation","rootStyles","className","labelStyles","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"mappings":"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"}

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

@@ -117,26 +117,30 @@ const useValidationMessageIconStyles = (0, _react.makeStyles)({
     }
 });
 const useFieldStyles_unstable = (state)=>{
-    'use no memo';
     const { validationState, size } = state;
     const horizontal = state.orientation === 'horizontal';
     const rootStyles = useRootStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);
     const labelStyles = useLabelStyles();
     if (state.label) {
+        // eslint-disable-next-line react-hooks/immutability
         state.label.className = (0, _react.mergeClasses)(fieldClassNames.label, labelStyles.base, horizontal && labelStyles.horizontal, horizontal && size === 'small' && labelStyles.horizontalSmall, horizontal && size === 'large' && labelStyles.horizontalLarge, !horizontal && labelStyles.vertical, !horizontal && size === 'large' && labelStyles.verticalLarge, state.label.className);
     }
     const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
     const validationMessageIconStyles = useValidationMessageIconStyles();
     if (state.validationMessageIcon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.validationMessageIcon.className = (0, _react.mergeClasses)(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== 'none' && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
     }
     const secondaryTextBaseClassName = useSecondaryTextBaseClassName();
     const secondaryTextStyles = useSecondaryTextStyles();
     if (state.validationMessage) {
+        // eslint-disable-next-line react-hooks/immutability
         state.validationMessage.className = (0, _react.mergeClasses)(fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);
     }
     if (state.hint) {
+        // eslint-disable-next-line react-hooks/immutability
         state.hint.className = (0, _react.mergeClasses)(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);
     }
     return state;

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Field/useFieldStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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    maxWidth: 'max-content',\n    maxHeight: 'max-content',\n  },\n\n  vertical: {\n    paddingTop: tokens.spacingVerticalXXS,\n    paddingBottom: tokens.spacingVerticalXXS,\n    marginBottom: tokens.spacingVerticalXXS,\n  },\n\n  verticalLarge: {\n    paddingTop: '1px',\n    paddingBottom: '1px',\n    marginBottom: tokens.spacingVerticalXS,\n  },\n\n  horizontal: {\n    paddingTop: tokens.spacingVerticalSNudge,\n    paddingBottom: tokens.spacingVerticalSNudge,\n    marginRight: tokens.spacingHorizontalM,\n    gridRowStart: '1',\n    gridRowEnd: '-1',\n  },\n\n  horizontalSmall: {\n    paddingTop: tokens.spacingVerticalXS,\n    paddingBottom: tokens.spacingVerticalXS,\n  },\n\n  horizontalLarge: {\n    // To align the label text with the Input text, it should be centered within the 40px height of the Input.\n    // This is (40px - lineHeightBase400) / 2 = 9px. Hardcoded since there is no 9px padding token.\n    paddingTop: '9px',\n    paddingBottom: '9px',\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): FieldState => {\n  'use no memo';\n\n  const { validationState, size } = 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 && size === 'small' && labelStyles.horizontalSmall,\n      horizontal && size === 'large' && labelStyles.horizontalLarge,\n      !horizontal && labelStyles.vertical,\n      !horizontal && 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  return state;\n};\n"],"names":["tokens","typographyStyles","makeResetStyles","makeStyles","mergeClasses","fieldClassNames","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","base","display","horizontal","gridTemplateColumns","gridTemplateRows","horizontalNoLabel","paddingLeft","useLabelStyles","maxWidth","maxHeight","vertical","paddingTop","spacingVerticalXXS","paddingBottom","marginBottom","verticalLarge","spacingVerticalXS","spacingVerticalSNudge","marginRight","spacingHorizontalM","gridRowStart","gridRowEnd","horizontalSmall","horizontalLarge","useSecondaryTextBaseClassName","marginTop","color","colorNeutralForeground3","caption1","useSecondaryTextStyles","error","colorPaletteRedForeground1","withIcon","spacingHorizontalXS","useValidationMessageIconBaseClassName","fontSize","marginLeft","lineHeight","verticalAlign","useValidationMessageIconStyles","warning","colorPaletteDarkOrangeForeground1","success","colorPaletteGreenForeground1","useFieldStyles_unstable","state","validationState","size","orientation","rootStyles","className","labelStyles","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Field/useFieldStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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    maxWidth: 'max-content',\n    maxHeight: 'max-content',\n  },\n\n  vertical: {\n    paddingTop: tokens.spacingVerticalXXS,\n    paddingBottom: tokens.spacingVerticalXXS,\n    marginBottom: tokens.spacingVerticalXXS,\n  },\n\n  verticalLarge: {\n    paddingTop: '1px',\n    paddingBottom: '1px',\n    marginBottom: tokens.spacingVerticalXS,\n  },\n\n  horizontal: {\n    paddingTop: tokens.spacingVerticalSNudge,\n    paddingBottom: tokens.spacingVerticalSNudge,\n    marginRight: tokens.spacingHorizontalM,\n    gridRowStart: '1',\n    gridRowEnd: '-1',\n  },\n\n  horizontalSmall: {\n    paddingTop: tokens.spacingVerticalXS,\n    paddingBottom: tokens.spacingVerticalXS,\n  },\n\n  horizontalLarge: {\n    // To align the label text with the Input text, it should be centered within the 40px height of the Input.\n    // This is (40px - lineHeightBase400) / 2 = 9px. Hardcoded since there is no 9px padding token.\n    paddingTop: '9px',\n    paddingBottom: '9px',\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): FieldState => {\n  const { validationState, size } = state;\n  const horizontal = state.orientation === 'horizontal';\n\n  const rootStyles = useRootStyles();\n  // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\n    state.label.className = mergeClasses(\n      fieldClassNames.label,\n      labelStyles.base,\n      horizontal && labelStyles.horizontal,\n      horizontal && size === 'small' && labelStyles.horizontalSmall,\n      horizontal && size === 'large' && labelStyles.horizontalLarge,\n      !horizontal && labelStyles.vertical,\n      !horizontal && size === 'large' && labelStyles.verticalLarge,\n      state.label.className,\n    );\n  }\n\n  const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();\n  const validationMessageIconStyles = useValidationMessageIconStyles();\n  if (state.validationMessageIcon) {\n    // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\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    // eslint-disable-next-line react-hooks/immutability\n    state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);\n  }\n\n  return state;\n};\n"],"names":["tokens","typographyStyles","makeResetStyles","makeStyles","mergeClasses","fieldClassNames","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","base","display","horizontal","gridTemplateColumns","gridTemplateRows","horizontalNoLabel","paddingLeft","useLabelStyles","maxWidth","maxHeight","vertical","paddingTop","spacingVerticalXXS","paddingBottom","marginBottom","verticalLarge","spacingVerticalXS","spacingVerticalSNudge","marginRight","spacingHorizontalM","gridRowStart","gridRowEnd","horizontalSmall","horizontalLarge","useSecondaryTextBaseClassName","marginTop","color","colorNeutralForeground3","caption1","useSecondaryTextStyles","error","colorPaletteRedForeground1","withIcon","spacingHorizontalXS","useValidationMessageIconBaseClassName","fontSize","marginLeft","lineHeight","verticalAlign","useValidationMessageIconStyles","warning","colorPaletteDarkOrangeForeground1","success","colorPaletteGreenForeground1","useFieldStyles_unstable","state","validationState","size","orientation","rootStyles","className","labelStyles","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-field",
-  "version": "9.5.1",
+  "version": "9.5.3",
   "description": "Fluent UI Field components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,13 +12,13 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui/react-context-selector": "^9.2.16",
+    "@fluentui/react-context-selector": "^9.2.18",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "^9.4.2",
-    "@fluentui/react-label": "^9.4.1",
+    "@fluentui/react-jsx-runtime": "^9.4.4",
+    "@fluentui/react-label": "^9.4.3",
     "@fluentui/react-shared-contexts": "^9.26.2",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-utilities": "^9.26.3",
+    "@fluentui/react-utilities": "^9.26.5",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },