npm - @fluentui/react-field - Versions diffs - 9.5.1 → 9.5.2 - Mend

@fluentui/react-field 9.5.1 → 9.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,21 +1,33 @@
 # 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 Tue, 26 May 2026 09:34:20 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.5.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.5.2)
+Tue, 26 May 2026 09:34:20 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 CHANGED Viewed

@@ -99,22 +99,27 @@ export const useFieldStyles_unstable = state => {
   } = 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 CHANGED Viewed

	@@ -1 +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":"AAAA,YAAY;;AACZ,SAASA,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAAAC,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,OAAO,MAAMC,eAAe,GAAG;EAC3BC,IAAI,EAAE,WAAW;EACjBC,KAAK,EAAE,kBAAkB;EACzBC,iBAAiB,EAAE,8BAA8B;EACjDC,qBAAqB,EAAE,kCAAkC;EACzDC,IAAI,EAAE;AACV,CAAC;AACD;AACA,MAAMC,QAAQ,GAAG,MAAM;AACvB;AACA;AACA;AAAI,MAAMC,aAAa,gBAAGT,QAAA;EAAAU,IAAA;IAAAC,MAAA;EAAA;EAAAC,UAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,iBAAA;IAAAC,MAAA;IAAAH,OAAA;EAAA;AAAA;EAAAI,CAAA;AAAA,CAgBzB,CAAC;AACF,MAAMC,cAAc,gBAAGlB,QAAA;EAAAU,IAAA;IAAAS,OAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,aAAA;IAAAH,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAZ,UAAA;IAAAU,MAAA;IAAAC,OAAA;IAAAG,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,eAAA;IAAAP,MAAA;IAAAC,OAAA;EAAA;EAAAO,eAAA;IAAAR,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAN,CAAA;AAAA,CAgCtB,CAAC;AACF,MAAMc,6BAA6B,gBAAGhC,aAAA,uPAIrC,CAAC;AACF,MAAMiC,sBAAsB,gBAAGhC,QAAA;EAAAiC,KAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAnB,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAQ9B,CAAC;AACF,MAAMmB,qCAAqC,gBAAGrC,aAAA,2XAU7C,CAAC;AACF,MAAMsC,8BAA8B,gBAAGrC,QAAA;EAAAiC,KAAA;IAAAC,MAAA;EAAA;EAAAI,OAAA;IAAAJ,MAAA;EAAA;EAAAK,OAAA;IAAAL,MAAA;EAAA;AAAA;EAAAjB,CAAA;AAAA,CAUtC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMuB,uBAAuB,GAAIC,KAAK,IAAG;EAChD,aAAa;;EACb,MAAM;IAAEC,eAAe;IAAEC;EAAK,CAAC,GAAGF,KAAK;EACvC,MAAM7B,UAAU,GAAG6B,KAAK,CAACG,WAAW,KAAK,YAAY;EACrD,MAAMC,UAAU,GAAGpC,aAAa,CAAC,CAAC;~~EAClCgC~~,KAAK,CAACtC,IAAI,CAAC2C,SAAS,GAAG7C,YAAY,CAACC,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;EACjM,MAAMC,WAAW,GAAG7B,cAAc,CAAC,CAAC;EACpC,IAAIuB,KAAK,CAACrC,KAAK,EAAE;~~IACbqC~~,KAAK,CAACrC,KAAK,CAAC0C,SAAS,GAAG7C,YAAY,CAACC,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;EAC/W;EACA,MAAME,kCAAkC,GAAGZ,qCAAqC,CAAC,CAAC;EAClF,MAAMa,2BAA2B,GAAGZ,8BAA8B,CAAC,CAAC;EACpE,IAAII,KAAK,CAACnC,qBAAqB,EAAE;~~IAC7BmC~~,KAAK,CAACnC,qBAAqB,CAACwC,SAAS,GAAG7C,YAAY,CAACC,eAAe,CAACI,qBAAqB,EAAE0C,kCAAkC,EAAEN,eAAe,KAAK,MAAM,IAAIO,2BAA2B,CAACP,eAAe,CAAC,EAAED,KAAK,CAACnC,qBAAqB,CAACwC,SAAS,CAAC;EACtP;EACA,MAAMI,0BAA0B,GAAGnB,6BAA6B,CAAC,CAAC;EAClE,MAAMoB,mBAAmB,GAAGnB,sBAAsB,CAAC,CAAC;EACpD,IAAIS,KAAK,CAACpC,iBAAiB,EAAE;~~IACzBoC~~,KAAK,CAACpC,iBAAiB,CAACyC,SAAS,GAAG7C,YAAY,CAACC,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;EAC/Q;EACA,IAAIL,KAAK,CAAClC,IAAI,EAAE;~~IACZkC~~,KAAK,CAAClC,IAAI,CAACuC,SAAS,GAAG7C,YAAY,CAACC,eAAe,CAACK,IAAI,EAAE2C,0BAA0B,EAAET,KAAK,CAAClC,IAAI,CAACuC,SAAS,CAAC;EAC/G;EACA,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}
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 // 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 CHANGED Viewed

@@ -105,22 +105,27 @@ const useValidationMessageIconStyles = makeStyles({
     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 CHANGED Viewed

	@@ -1 +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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"}
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 // 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 CHANGED Viewed

@@ -155,22 +155,27 @@ const useFieldStyles_unstable = (state)=>{
     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 CHANGED Viewed

	@@ -1 +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":"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"}
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 // 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 CHANGED Viewed

@@ -121,22 +121,27 @@ const useFieldStyles_unstable = (state)=>{
     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 CHANGED Viewed

	@@ -1 +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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"}
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 // 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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-field",
-  "version": "9.5.1",
+  "version": "9.5.2",
   "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.17",
     "@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.3",
+    "@fluentui/react-label": "^9.4.2",
     "@fluentui/react-shared-contexts": "^9.26.2",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-utilities": "^9.26.3",
+    "@fluentui/react-utilities": "^9.26.4",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },