npm - @fluentui/react-field - Versions diffs - 9.4.5 → 9.4.6 - Mend

@fluentui/react-field 9.4.5 → 9.4.6

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 (26) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,26 @@
 # Change Log - @fluentui/react-field
-This log was last generated on Mon, 08 Sep 2025 12:41:36 GMT and should not be manually modified.
+This log was last generated on Thu, 02 Oct 2025 15:07:10 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.4.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.4.6)
+Thu, 02 Oct 2025 15:07:10 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.4.5..@fluentui/react-field_v9.4.6)
+### Patches
+- feat: enforce usage of use client directive for files with client-only features ([PR #35173](https://github.com/microsoft/fluentui/pull/35173) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.2.8 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.2.1 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-label to v9.3.6 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.2 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-utilities to v9.25.0 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
 ## [9.4.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.4.5)
-Mon, 08 Sep 2025 12:41:36 GMT
+Mon, 08 Sep 2025 12:50:57 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.4.4..@fluentui/react-field_v9.4.5)
 ### Patches

package/lib/components/Field/Field.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { renderField_unstable } from './renderField';
 import { useField_unstable } from './useField';

package/lib/components/Field/Field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Field/Field.tsx"],"sourcesContent":["~~import~~ * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from './Field.types';\nimport { renderField_unstable } from './renderField';\nimport { useField_unstable } from './useField';\nimport { useFieldStyles_unstable } from './useFieldStyles.styles';\nimport { useFieldContextValues_unstable } from '../../contexts/index';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nexport const Field: ForwardRefComponent<FieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref);\n useFieldStyles_unstable(state);\n useCustomStyleHook_unstable('useFieldStyles_unstable')(state);\n const context = useFieldContextValues_unstable(state);\n return renderField_unstable(state, context);\n});\n\nField.displayName = 'Field';\n"],"names":["React","renderField_unstable","useField_unstable","useFieldStyles_unstable","useFieldContextValues_unstable","useCustomStyleHook_unstable","Field","forwardRef","props","ref","state","context","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,8BAA8B,QAAQ,uBAAuB;AACtE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,OAAO,MAAMC,sBAAyCN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,QAAQR,kBAAkBM,OAAOC;IACvCN,wBAAwBO;IACxBL,4BAA4B,2BAA2BK;IACvD,MAAMC,UAAUP,+BAA+BM;IAC/C,OAAOT,qBAAqBS,OAAOC;AACrC,GAAG;AAEHL,MAAMM,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/Field/Field.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from './Field.types';\nimport { renderField_unstable } from './renderField';\nimport { useField_unstable } from './useField';\nimport { useFieldStyles_unstable } from './useFieldStyles.styles';\nimport { useFieldContextValues_unstable } from '../../contexts/index';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nexport const Field: ForwardRefComponent<FieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref);\n useFieldStyles_unstable(state);\n useCustomStyleHook_unstable('useFieldStyles_unstable')(state);\n const context = useFieldContextValues_unstable(state);\n return renderField_unstable(state, context);\n});\n\nField.displayName = 'Field';\n"],"names":["React","renderField_unstable","useField_unstable","useFieldStyles_unstable","useFieldContextValues_unstable","useCustomStyleHook_unstable","Field","forwardRef","props","ref","state","context","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,8BAA8B,QAAQ,uBAAuB;AACtE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,OAAO,MAAMC,sBAAyCN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,QAAQR,kBAAkBM,OAAOC;IACvCN,wBAAwBO;IACxBL,4BAA4B,2BAA2BK;IACvD,MAAMC,UAAUP,+BAA+BM;IAC/C,OAAOT,qBAAqBS,OAAOC;AACrC,GAAG;AAEHL,MAAMM,WAAW,GAAG"}

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

@@ -1,3 +1,5 @@
+'use client';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
 export const fieldClassNames = {

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","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":["~~import~~ { 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 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, 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":[]}
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","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 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, 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":[]}

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

@@ -1,3 +1,4 @@
+'use client';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
 export const fieldClassNames = {

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Field/useFieldStyles.styles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { FieldSlots, FieldState } from './Field.types';\n\nexport const fieldClassNames: SlotClassNames<FieldSlots> = {\n root: `fui-Field`,\n label: `fui-Field__label`,\n validationMessage: `fui-Field__validationMessage`,\n validationMessageIcon: `fui-Field__validationMessageIcon`,\n hint: `fui-Field__hint`,\n};\n\n// Size of the icon in the validation message\nconst iconSize = '12px';\n\n/*\n Styles for the root slot\n /\nconst useRootStyles = makeStyles({\n base: {\n display: 'grid',\n },\n\n // In horizontal layout, the field is a grid with the label taking up the entire first column.\n // The last row is slack space in case the label is taller than the rest of the content.\n horizontal: {\n gridTemplateColumns: '33% 1fr',\n gridTemplateRows: 'auto auto auto 1fr',\n },\n\n // In horizontal layout without a label, replace the label's column with padding.\n // This lets grid auto-flow properly place the other children, and keeps fields with and without labels aligned.\n horizontalNoLabel: {\n paddingLeft: '33%',\n gridTemplateColumns: '1fr',\n },\n});\n\nconst useLabelStyles = makeStyles({\n 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 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","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 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 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","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;IAChCkB,UAAU;QACRC,YAAYtB,OAAOuB,kBAAkB;QACrCC,eAAexB,OAAOuB,kBAAkB;QACxCE,cAAczB,OAAOuB,kBAAkB;IACzC;IAEAG,eAAe;QACbJ,YAAY;QACZE,eAAe;QACfC,cAAczB,OAAO2B,iBAAiB;IACxC;IAEAZ,YAAY;QACVO,YAAYtB,OAAO4B,qBAAqB;QACxCJ,eAAexB,OAAO4B,qBAAqB;QAC3CC,aAAa7B,OAAO8B,kBAAkB;QACtCC,cAAc;QACdC,YAAY;IACd;IAEAC,iBAAiB;QACfX,YAAYtB,OAAO2B,iBAAiB;QACpCH,eAAexB,OAAO2B,iBAAiB;IACzC;IAEAO,iBAAiB;QACf,0GAA0G;QAC1G,+FAA+F;QAC/FZ,YAAY;QACZE,eAAe;IACjB;AACF;AAEA,MAAMW,gCAAgCjC,gBAAgB;IACpDkC,WAAWpC,OAAOuB,kBAAkB;IACpCc,OAAOrC,OAAOsC,uBAAuB;IACrC,GAAGrC,iBAAiBsC,QAAQ;AAC9B;AAEA,MAAMC,yBAAyBrC,WAAW;IACxCsC,OAAO;QACLJ,OAAOrC,OAAO0C,0BAA0B;IAC1C;IAEAC,UAAU;QACR,kGAAkG;QAClGxB,aAAa,CAAC,KAAK,EAAER,SAAS,GAAG,EAAEX,OAAO4C,mBAAmB,CAAC,CAAC,CAAC;IAClE;AACF;AAEA,MAAMC,wCAAwC3C,gBAAgB;IAC5DY,SAAS;IACTgC,UAAUnC;IACV,mGAAmG;IACnGoC,YAAY,CAAC,MAAM,EAAEpC,SAAS,GAAG,EAAEX,OAAO4C,mBAAmB,CAAC,CAAC,CAAC;IAChEf,aAAa7B,OAAO4C,mBAAmB;IACvC,0FAA0F;IAC1FI,YAAY;IACZ,uGAAuG;IACvGC,eAAe;AACjB;AAEA,MAAMC,iCAAiC/C,WAAW;IAChDsC,OAAO;QACLJ,OAAOrC,OAAO0C,0BAA0B;IAC1C;IACAS,SAAS;QACPd,OAAOrC,OAAOoD,iCAAiC;IACjD;IACAC,SAAS;QACPhB,OAAOrC,OAAOsD,4BAA4B;IAC5C;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC;IACtC;IAEA,MAAM,EAAEC,eAAe,EAAEC,IAAI,EAAE,GAAGF;IAClC,MAAMzC,aAAayC,MAAMG,WAAW,KAAK;IAEzC,MAAMC,aAAahD;IACnB4C,MAAMlD,IAAI,CAACuD,SAAS,GAAGzD,aACrBC,gBAAgBC,IAAI,EACpBsD,WAAW/C,IAAI,EACfE,cAAc6C,WAAW7C,UAAU,EACnCA,cAAc,CAACyC,MAAMjD,KAAK,IAAIqD,WAAW1C,iBAAiB,EAC1DsC,MAAMlD,IAAI,CAACuD,SAAS;IAGtB,MAAMC,cAAc1C;IACpB,IAAIoC,MAAMjD,KAAK,EAAE;QACfiD,MAAMjD,KAAK,CAACsD,SAAS,GAAGzD,aACtBC,gBAAgBE,KAAK,EACrBQ,cAAc+C,YAAY/C,UAAU,EACpCA,cAAc2C,SAAS,WAAWI,YAAY7B,eAAe,EAC7DlB,cAAc2C,SAAS,WAAWI,YAAY5B,eAAe,EAC7D,CAACnB,cAAc+C,YAAYzC,QAAQ,EACnC,CAACN,cAAc2C,SAAS,WAAWI,YAAYpC,aAAa,EAC5D8B,MAAMjD,KAAK,CAACsD,SAAS;IAEzB;IAEA,MAAME,qCAAqClB;IAC3C,MAAMmB,8BAA8Bd;IACpC,IAAIM,MAAM/C,qBAAqB,EAAE;QAC/B+C,MAAM/C,qBAAqB,CAACoD,SAAS,GAAGzD,aACtCC,gBAAgBI,qBAAqB,EACrCsD,oCACAN,oBAAoB,UAAUO,2BAA2B,CAACP,gBAAgB,EAC1ED,MAAM/C,qBAAqB,CAACoD,SAAS;IAEzC;IAEA,MAAMI,6BAA6B9B;IACnC,MAAM+B,sBAAsB1B;IAC5B,IAAIgB,MAAMhD,iBAAiB,EAAE;QAC3BgD,MAAMhD,iBAAiB,CAACqD,SAAS,GAAGzD,aAClCC,gBAAgBG,iBAAiB,EACjCyD,4BACAR,oBAAoB,WAAWS,oBAAoBzB,KAAK,EACxD,CAAC,CAACe,MAAM/C,qBAAqB,IAAIyD,oBAAoBvB,QAAQ,EAC7Da,MAAMhD,iBAAiB,CAACqD,SAAS;IAErC;IAEA,IAAIL,MAAM9C,IAAI,EAAE;QACd8C,MAAM9C,IAAI,CAACmD,SAAS,GAAGzD,aAAaC,gBAAgBK,IAAI,EAAEuD,4BAA4BT,MAAM9C,IAAI,CAACmD,SAAS;IAC5G;IAEA,OAAOL;AACT,EAAE"}

package/lib/contexts/FieldContext.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 const FieldContext = React.createContext(undefined);
 export const FieldContextProvider = FieldContext.Provider;

package/lib/contexts/FieldContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/contexts/FieldContext.ts"],"sourcesContent":["~~import~~ * as React from 'react';\n\nimport type { FieldContextValue } from '../Field';\n\nconst FieldContext = React.createContext<FieldContextValue \| undefined>(undefined);\n\nexport const FieldContextProvider = FieldContext.Provider;\n\nexport const useFieldContext_unstable = (): FieldContextValue \| undefined => React.useContext(FieldContext);\n"],"names":["React","FieldContext","createContext","undefined","FieldContextProvider","Provider","useFieldContext_unstable","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B,MAAMC,eAAeD,MAAME,aAAa,CAAgCC;AAExE,OAAO,MAAMC,uBAAuBH,aAAaI,QAAQ,CAAC;AAE1D,OAAO,MAAMC,2BAA2B,IAAqCN,MAAMO,UAAU,CAACN,cAAc"}
1	+ {"version":3,"sources":["../src/contexts/FieldContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type { FieldContextValue } from '../Field';\n\nconst FieldContext = React.createContext<FieldContextValue \| undefined>(undefined);\n\nexport const FieldContextProvider = FieldContext.Provider;\n\nexport const useFieldContext_unstable = (): FieldContextValue \| undefined => React.useContext(FieldContext);\n"],"names":["React","FieldContext","createContext","undefined","FieldContextProvider","Provider","useFieldContext_unstable","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAI/B,MAAMC,eAAeD,MAAME,aAAa,CAAgCC;AAExE,OAAO,MAAMC,uBAAuBH,aAAaI,QAAQ,CAAC;AAE1D,OAAO,MAAMC,2BAA2B,IAAqCN,MAAMO,UAAU,CAACN,cAAc"}

package/lib/contexts/useFieldContextValues.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 /**
  * Get the context values used when rendering Field.

package/lib/contexts/useFieldContextValues.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/contexts/useFieldContextValues.ts"],"sourcesContent":["~~import~~ * as React from 'react';\n\nimport type { FieldContextValue, FieldContextValues, FieldState } from '../Field';\n\n/*\n Get the context values used when rendering Field.\n */\nexport const useFieldContextValues_unstable = (state: FieldState): FieldContextValues => {\n const { generatedControlId, orientation, required, size, validationState } = state;\n const labelFor = state.label?.htmlFor;\n const labelId = state.label?.id;\n const validationMessageId = state.validationMessage?.id;\n const hintId = state.hint?.id;\n\n const field: FieldContextValue = React.useMemo(\n () => ({\n generatedControlId,\n hintId,\n labelFor,\n labelId,\n orientation,\n required,\n size,\n validationMessageId,\n validationState,\n }),\n [generatedControlId, hintId, labelFor, labelId, orientation, required, size, validationMessageId, validationState],\n );\n\n return { field };\n};\n"],"names":["React","useFieldContextValues_unstable","state","generatedControlId","orientation","required","size","validationState","labelFor","label","htmlFor","labelId","id","validationMessageId","validationMessage","hintId","hint","field","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;QAE5BA,cACDA,eACYA,0BACbA;IAJf,MAAM,EAAEC,kBAAkB,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,eAAe,EAAE,GAAGL;IAC7E,MAAMM,YAAWN,eAAAA,MAAMO,KAAK,cAAXP,mCAAAA,aAAaQ,OAAO;IACrC,MAAMC,WAAUT,gBAAAA,MAAMO,KAAK,cAAXP,oCAAAA,cAAaU,EAAE;IAC/B,MAAMC,uBAAsBX,2BAAAA,MAAMY,iBAAiB,cAAvBZ,+CAAAA,yBAAyBU,EAAE;IACvD,MAAMG,UAASb,cAAAA,MAAMc,IAAI,cAAVd,kCAAAA,YAAYU,EAAE;IAE7B,MAAMK,QAA2BjB,MAAMkB,OAAO,CAC5C,IAAO,CAAA;YACLf;YACAY;YACAP;YACAG;YACAP;YACAC;YACAC;YACAO;YACAN;QACF,CAAA,GACA;QAACJ;QAAoBY;QAAQP;QAAUG;QAASP;QAAaC;QAAUC;QAAMO;QAAqBN;KAAgB;IAGpH,OAAO;QAAEU;IAAM;AACjB,EAAE"}
1	+ {"version":3,"sources":["../src/contexts/useFieldContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type { FieldContextValue, FieldContextValues, FieldState } from '../Field';\n\n/*\n Get the context values used when rendering Field.\n */\nexport const useFieldContextValues_unstable = (state: FieldState): FieldContextValues => {\n const { generatedControlId, orientation, required, size, validationState } = state;\n const labelFor = state.label?.htmlFor;\n const labelId = state.label?.id;\n const validationMessageId = state.validationMessage?.id;\n const hintId = state.hint?.id;\n\n const field: FieldContextValue = React.useMemo(\n () => ({\n generatedControlId,\n hintId,\n labelFor,\n labelId,\n orientation,\n required,\n size,\n validationMessageId,\n validationState,\n }),\n [generatedControlId, hintId, labelFor, labelId, orientation, required, size, validationMessageId, validationState],\n );\n\n return { field };\n};\n"],"names":["React","useFieldContextValues_unstable","state","generatedControlId","orientation","required","size","validationState","labelFor","label","htmlFor","labelId","id","validationMessageId","validationMessage","hintId","hint","field","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAI/B;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;QAE5BA,cACDA,eACYA,0BACbA;IAJf,MAAM,EAAEC,kBAAkB,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,eAAe,EAAE,GAAGL;IAC7E,MAAMM,YAAWN,eAAAA,MAAMO,KAAK,cAAXP,mCAAAA,aAAaQ,OAAO;IACrC,MAAMC,WAAUT,gBAAAA,MAAMO,KAAK,cAAXP,oCAAAA,cAAaU,EAAE;IAC/B,MAAMC,uBAAsBX,2BAAAA,MAAMY,iBAAiB,cAAvBZ,+CAAAA,yBAAyBU,EAAE;IACvD,MAAMG,UAASb,cAAAA,MAAMc,IAAI,cAAVd,kCAAAA,YAAYU,EAAE;IAE7B,MAAMK,QAA2BjB,MAAMkB,OAAO,CAC5C,IAAO,CAAA;YACLf;YACAY;YACAP;YACAG;YACAP;YACAC;YACAC;YACAO;YACAN;QACF,CAAA,GACA;QAACJ;QAAoBY;QAAQP;QAAUG;QAASP;QAAaC;QAAUC;QAAMO;QAAqBN;KAAgB;IAGpH,OAAO;QAAEU;IAAM;AACjB,EAAE"}

package/lib/contexts/useFieldControlProps.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import { useFieldContext_unstable } from './FieldContext';
 export function useFieldControlProps_unstable(props, options) {
     return getFieldControlProps(useFieldContext_unstable(), props, options);

package/lib/contexts/useFieldControlProps.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/contexts/useFieldControlProps.ts"],"sourcesContent":["~~import~~ type { FieldContextValue, FieldControlProps } from '../Field';\nimport { useFieldContext_unstable } from './FieldContext';\n\n/*\n Options for `useFieldControlProps_unstable`.\n /\nexport type FieldControlPropsOptions = {\n /\n Skips setting `aria-labelledby` on the control if the `label.htmlFor` refers to the control.\n \n This should be used with controls that can be the target of a label's `for` prop:\n * `<button>`, `<input>`, `<progress>`, `<select>`, `<textarea>`.\n /\n supportsLabelFor?: boolean;\n\n /\n Sets `required` instead of `aria-required` when the Field is marked required.\n \n This should be used with controls that support the `required` prop:\n * `<input>` (except `range` or `color`), `<select>`, `<textarea>`.\n /\n supportsRequired?: boolean;\n\n /\n Sets the size prop on the control to match the Field's size: `'small' \| 'medium' \| 'large'`.\n \n This should be used with controls that have a custom size prop that matches the Field's size prop.\n /\n supportsSize?: boolean;\n};\n\n/\n Gets the control props from the field context, if this inside a `<Field>`.\n \n When called with no arguments, returns the FieldControlProps that should be applied to the control.\n \n @returns A FieldControlProps object if inside a `<Field>`, otherwise undefined.\n /\nexport function useFieldControlProps_unstable(): FieldControlProps \| undefined;\n\n/\n Copies and merges the FieldControlProps with the given props, if this inside a `<Field>`.\n \n @param props - The existing props for the control. These will be merged with the control props from the field context.\n * @param options - Option to include the size prop.\n * @returns Merged props if inside a `<Field>`, otherwise the original props, or undefined if no props given.\n /\nexport function useFieldControlProps_unstable<Props extends FieldControlProps>(\n props: Props,\n options?: FieldControlPropsOptions,\n): Props;\nexport function useFieldControlProps_unstable<Props extends FieldControlProps>(\n props?: Props,\n options?: FieldControlPropsOptions,\n): Props \| undefined {\n return getFieldControlProps(useFieldContext_unstable(), props, options);\n}\n\n/\n @internal\n * Implementation of useFieldControlProps_unstable.\n * Split out so it can be used directly in renderField_unstable.\n */\nexport function getFieldControlProps<Props extends FieldControlProps>(\n context: FieldContextValue \| undefined,\n props?: Props,\n options?: FieldControlPropsOptions,\n): Props \| undefined {\n if (!context) {\n return props;\n }\n\n // Create a copy of props so we don't modify the original\n props = { ...props } as Props;\n\n const { generatedControlId, hintId, labelFor, labelId, required, validationMessageId, validationState } = context;\n\n if (generatedControlId) {\n props.id ??= generatedControlId;\n }\n\n // Set aria-labelledby if the control doesn't support label.htmlFor, or if the label's htmlFor doesn't refer\n // to this control (i.e. the user set this control's id prop without also setting the Field's label.htmlFor).\n if (labelId && (!options?.supportsLabelFor \|\| labelFor !== props.id)) {\n props['aria-labelledby'] ??= labelId;\n }\n\n // The control is described by the validation message, or hint, or both.\n // We also preserve and append any aria-describedby from props.\n // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933\n if (validationMessageId \|\| hintId) {\n // NOTE: Not using ??= since we're merging and overriding the user-provided value.\n props['aria-describedby'] = [validationMessageId, hintId, props?.['aria-describedby']].filter(Boolean).join(' ');\n }\n\n if (validationState === 'error') {\n props['aria-invalid'] ??= true;\n }\n\n if (required) {\n if (options?.supportsRequired) {\n (props as { required?: boolean }).required ??= true;\n } else {\n props['aria-required'] ??= true;\n }\n }\n\n // Include the size prop if this control supports it\n if (options?.supportsSize) {\n (props as { size?: FieldContextValue['size'] }).size ??= context.size;\n }\n\n return props;\n}\n"],"names":["useFieldContext_unstable","useFieldControlProps_unstable","props","options","getFieldControlProps","context","generatedControlId","hintId","labelFor","labelId","required","validationMessageId","validationState","id","supportsLabelFor","filter","Boolean","join","supportsRequired","supportsSize","size"],"mappings":"~~AACA~~,SAASA,wBAAwB,QAAQ,iBAAiB;AAkD1D,OAAO,SAASC,8BACdC,KAAa,EACbC,OAAkC;IAElC,OAAOC,qBAAqBJ,4BAA4BE,OAAOC;AACjE;AAEA;;;;CAIC,GACD,OAAO,SAASC,qBACdC,OAAsC,EACtCH,KAAa,EACbC,OAAkC;IAElC,IAAI,CAACE,SAAS;QACZ,OAAOH;IACT;IAEA,yDAAyD;IACzDA,QAAQ;QAAE,GAAGA,KAAK;IAAC;IAEnB,MAAM,EAAEI,kBAAkB,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,mBAAmB,EAAEC,eAAe,EAAE,GAAGP;IAE1G,IAAIC,oBAAoB;YACtBJ;;QAAAA,QAAAA,SAAAA,OAAMW,uCAANX,OAAMW,KAAOP;IACf;IAEA,4GAA4G;IAC5G,6GAA6G;IAC7G,IAAIG,WAAY,CAAA,EAACN,oBAAAA,8BAAAA,QAASW,gBAAgB,KAAIN,aAAaN,MAAMW,EAAE,AAAD,GAAI;YACpEX,SAAM;;QAANA,MAAAA,UAAAA,MAAK,CAAC,kBAAA,kBAAkB,iCAAxBA,OAAK,CAAC,gBAAkB,GAAKO;IAC/B;IAEA,wEAAwE;IACxE,+DAA+D;IAC/D,yFAAyF;IACzF,IAAIE,uBAAuBJ,QAAQ;QACjC,kFAAkF;QAClFL,KAAK,CAAC,mBAAmB,GAAG;YAACS;YAAqBJ;YAAQL,kBAAAA,4BAAAA,KAAO,CAAC,mBAAmB;SAAC,CAACa,MAAM,CAACC,SAASC,IAAI,CAAC;IAC9G;IAEA,IAAIL,oBAAoB,SAAS;YAC/BV,SAAM;;QAANA,OAAAA,UAAAA,MAAK,CAAC,eAAA,eAAe,mCAArBA,OAAK,CAAC,aAAe,GAAK;IAC5B;IAEA,IAAIQ,UAAU;QACZ,IAAIP,oBAAAA,8BAAAA,QAASe,gBAAgB,EAAE;gBAC5BhB;;YAAD,cAACA,UAAAA,OAAiCQ,yDAAjCR,QAAiCQ,WAAa;QACjD,OAAO;gBACLR,SAAM;;YAANA,OAAAA,UAAAA,MAAK,CAAC,gBAAA,gBAAgB,mCAAtBA,OAAK,CAAC,cAAgB,GAAK;QAC7B;IACF;IAEA,oDAAoD;IACpD,IAAIC,oBAAAA,8BAAAA,QAASgB,YAAY,EAAE;YACxBjB;;QAAD,UAACA,UAAAA,OAA+CkB,6CAA/ClB,QAA+CkB,OAASf,QAAQe,IAAI;IACvE;IAEA,OAAOlB;AACT"}
1	+ {"version":3,"sources":["../src/contexts/useFieldControlProps.ts"],"sourcesContent":["'use client';\n\nimport type { FieldContextValue, FieldControlProps } from '../Field';\nimport { useFieldContext_unstable } from './FieldContext';\n\n/*\n Options for `useFieldControlProps_unstable`.\n /\nexport type FieldControlPropsOptions = {\n /\n Skips setting `aria-labelledby` on the control if the `label.htmlFor` refers to the control.\n \n This should be used with controls that can be the target of a label's `for` prop:\n * `<button>`, `<input>`, `<progress>`, `<select>`, `<textarea>`.\n /\n supportsLabelFor?: boolean;\n\n /\n Sets `required` instead of `aria-required` when the Field is marked required.\n \n This should be used with controls that support the `required` prop:\n * `<input>` (except `range` or `color`), `<select>`, `<textarea>`.\n /\n supportsRequired?: boolean;\n\n /\n Sets the size prop on the control to match the Field's size: `'small' \| 'medium' \| 'large'`.\n \n This should be used with controls that have a custom size prop that matches the Field's size prop.\n /\n supportsSize?: boolean;\n};\n\n/\n Gets the control props from the field context, if this inside a `<Field>`.\n \n When called with no arguments, returns the FieldControlProps that should be applied to the control.\n \n @returns A FieldControlProps object if inside a `<Field>`, otherwise undefined.\n /\nexport function useFieldControlProps_unstable(): FieldControlProps \| undefined;\n\n/\n Copies and merges the FieldControlProps with the given props, if this inside a `<Field>`.\n \n @param props - The existing props for the control. These will be merged with the control props from the field context.\n * @param options - Option to include the size prop.\n * @returns Merged props if inside a `<Field>`, otherwise the original props, or undefined if no props given.\n /\nexport function useFieldControlProps_unstable<Props extends FieldControlProps>(\n props: Props,\n options?: FieldControlPropsOptions,\n): Props;\nexport function useFieldControlProps_unstable<Props extends FieldControlProps>(\n props?: Props,\n options?: FieldControlPropsOptions,\n): Props \| undefined {\n return getFieldControlProps(useFieldContext_unstable(), props, options);\n}\n\n/\n @internal\n * Implementation of useFieldControlProps_unstable.\n * Split out so it can be used directly in renderField_unstable.\n */\nexport function getFieldControlProps<Props extends FieldControlProps>(\n context: FieldContextValue \| undefined,\n props?: Props,\n options?: FieldControlPropsOptions,\n): Props \| undefined {\n if (!context) {\n return props;\n }\n\n // Create a copy of props so we don't modify the original\n props = { ...props } as Props;\n\n const { generatedControlId, hintId, labelFor, labelId, required, validationMessageId, validationState } = context;\n\n if (generatedControlId) {\n props.id ??= generatedControlId;\n }\n\n // Set aria-labelledby if the control doesn't support label.htmlFor, or if the label's htmlFor doesn't refer\n // to this control (i.e. the user set this control's id prop without also setting the Field's label.htmlFor).\n if (labelId && (!options?.supportsLabelFor \|\| labelFor !== props.id)) {\n props['aria-labelledby'] ??= labelId;\n }\n\n // The control is described by the validation message, or hint, or both.\n // We also preserve and append any aria-describedby from props.\n // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933\n if (validationMessageId \|\| hintId) {\n // NOTE: Not using ??= since we're merging and overriding the user-provided value.\n props['aria-describedby'] = [validationMessageId, hintId, props?.['aria-describedby']].filter(Boolean).join(' ');\n }\n\n if (validationState === 'error') {\n props['aria-invalid'] ??= true;\n }\n\n if (required) {\n if (options?.supportsRequired) {\n (props as { required?: boolean }).required ??= true;\n } else {\n props['aria-required'] ??= true;\n }\n }\n\n // Include the size prop if this control supports it\n if (options?.supportsSize) {\n (props as { size?: FieldContextValue['size'] }).size ??= context.size;\n }\n\n return props;\n}\n"],"names":["useFieldContext_unstable","useFieldControlProps_unstable","props","options","getFieldControlProps","context","generatedControlId","hintId","labelFor","labelId","required","validationMessageId","validationState","id","supportsLabelFor","filter","Boolean","join","supportsRequired","supportsSize","size"],"mappings":"AAAA;AAGA,SAASA,wBAAwB,QAAQ,iBAAiB;AAkD1D,OAAO,SAASC,8BACdC,KAAa,EACbC,OAAkC;IAElC,OAAOC,qBAAqBJ,4BAA4BE,OAAOC;AACjE;AAEA;;;;CAIC,GACD,OAAO,SAASC,qBACdC,OAAsC,EACtCH,KAAa,EACbC,OAAkC;IAElC,IAAI,CAACE,SAAS;QACZ,OAAOH;IACT;IAEA,yDAAyD;IACzDA,QAAQ;QAAE,GAAGA,KAAK;IAAC;IAEnB,MAAM,EAAEI,kBAAkB,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,mBAAmB,EAAEC,eAAe,EAAE,GAAGP;IAE1G,IAAIC,oBAAoB;YACtBJ;;QAAAA,QAAAA,SAAAA,OAAMW,uCAANX,OAAMW,KAAOP;IACf;IAEA,4GAA4G;IAC5G,6GAA6G;IAC7G,IAAIG,WAAY,CAAA,EAACN,oBAAAA,8BAAAA,QAASW,gBAAgB,KAAIN,aAAaN,MAAMW,EAAE,AAAD,GAAI;YACpEX,SAAM;;QAANA,MAAAA,UAAAA,MAAK,CAAC,kBAAA,kBAAkB,iCAAxBA,OAAK,CAAC,gBAAkB,GAAKO;IAC/B;IAEA,wEAAwE;IACxE,+DAA+D;IAC/D,yFAAyF;IACzF,IAAIE,uBAAuBJ,QAAQ;QACjC,kFAAkF;QAClFL,KAAK,CAAC,mBAAmB,GAAG;YAACS;YAAqBJ;YAAQL,kBAAAA,4BAAAA,KAAO,CAAC,mBAAmB;SAAC,CAACa,MAAM,CAACC,SAASC,IAAI,CAAC;IAC9G;IAEA,IAAIL,oBAAoB,SAAS;YAC/BV,SAAM;;QAANA,OAAAA,UAAAA,MAAK,CAAC,eAAA,eAAe,mCAArBA,OAAK,CAAC,aAAe,GAAK;IAC5B;IAEA,IAAIQ,UAAU;QACZ,IAAIP,oBAAAA,8BAAAA,QAASe,gBAAgB,EAAE;gBAC5BhB;;YAAD,cAACA,UAAAA,OAAiCQ,yDAAjCR,QAAiCQ,WAAa;QACjD,OAAO;gBACLR,SAAM;;YAANA,OAAAA,UAAAA,MAAK,CAAC,gBAAA,gBAAgB,mCAAtBA,OAAK,CAAC,cAAgB,GAAK;QAC7B;IACF;IAEA,oDAAoD;IACpD,IAAIC,oBAAAA,8BAAAA,QAASgB,YAAY,EAAE;YACxBjB;;QAAD,UAACA,UAAAA,OAA+CkB,6CAA/ClB,QAA+CkB,OAASf,QAAQe,IAAI;IACvE;IAEA,OAAOlB;AACT"}

package/lib-commonjs/components/Field/Field.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/Field/Field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Field/Field.tsx"],"sourcesContent":["~~import~~ * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from './Field.types';\nimport { renderField_unstable } from './renderField';\nimport { useField_unstable } from './useField';\nimport { useFieldStyles_unstable } from './useFieldStyles.styles';\nimport { useFieldContextValues_unstable } from '../../contexts/index';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nexport const Field: ForwardRefComponent<FieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref);\n useFieldStyles_unstable(state);\n useCustomStyleHook_unstable('useFieldStyles_unstable')(state);\n const context = useFieldContextValues_unstable(state);\n return renderField_unstable(state, context);\n});\n\nField.displayName = 'Field';\n"],"names":["React","renderField_unstable","useField_unstable","useFieldStyles_unstable","useFieldContextValues_unstable","useCustomStyleHook_unstable","Field","forwardRef","props","ref","state","context","displayName"],"mappings":"~~;;;;+BASaM;;;;;;;iEATU~~,QAAQ;6BAGM,gBAAgB;0BACnB,aAAa;sCACP,0BAA0B;uBACnB,uBAAuB;qCAC1B,kCAAkC;AAEvE,~~cAAMA~~,WAAAA,GAAyCN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,YAAQR,2BAAAA,EAAkBM,OAAOC;QACvCN,6CAAAA,EAAwBO;QACxBL,gDAAAA,EAA4B,2BAA2BK;IACvD,MAAMC,cAAUP,qCAAAA,EAA+BM;IAC/C,WAAOT,iCAAAA,EAAqBS,OAAOC;AACrC,GAAG;AAEHL,MAAMM,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/Field/Field.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from './Field.types';\nimport { renderField_unstable } from './renderField';\nimport { useField_unstable } from './useField';\nimport { useFieldStyles_unstable } from './useFieldStyles.styles';\nimport { useFieldContextValues_unstable } from '../../contexts/index';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nexport const Field: ForwardRefComponent<FieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref);\n useFieldStyles_unstable(state);\n useCustomStyleHook_unstable('useFieldStyles_unstable')(state);\n const context = useFieldContextValues_unstable(state);\n return renderField_unstable(state, context);\n});\n\nField.displayName = 'Field';\n"],"names":["React","renderField_unstable","useField_unstable","useFieldStyles_unstable","useFieldContextValues_unstable","useCustomStyleHook_unstable","Field","forwardRef","props","ref","state","context","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BAGM,gBAAgB;0BACnB,aAAa;sCACP,0BAA0B;uBACnB,uBAAuB;qCAC1B,kCAAkC;AAEvE,MAAMM,QAAAA,WAAAA,GAAyCN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,YAAQR,2BAAAA,EAAkBM,OAAOC;QACvCN,6CAAAA,EAAwBO;QACxBL,gDAAAA,EAA4B,2BAA2BK;IACvD,MAAMC,cAAUP,qCAAAA,EAA+BM;IAC/C,WAAOT,iCAAAA,EAAqBS,OAAOC;AACrC,GAAG;AAEHL,MAAMM,WAAW,GAAG"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useFieldStyles.styles.js"],"sourcesContent":["~~import~~ { 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 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, 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","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":"~~;;;;;;;;;;;IAEaK~~,eAAe;;;2BA+FY~~;eAAvBoC;;;uBAhGyC~~,gBAAgB;AACnE,wBAAwB;~~IAC3BnC~~,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;IAAAmB,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;IAAAV,UAAA,EAAA;QAAAQ,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;IAAAJ,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CA4BtB,CAAC;AACF,MAAMY,6BAA6B,GAAA,WAAA,OAAG9B,oBAAA,EAAA,WAAA,MAAA;IAAA;CAIrC,CAAC;AACF,MAAM+B,sBAAsB,GAAA,WAAA,OAAG9B,eAAA,EAAA;IAAA+B,KAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAjB,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAQ9B,CAAC;AACF,MAAMiB,qCAAqC,GAAA,WAAA,OAAGnC,oBAAA,EAAA,WAAA,YAAA;IAAA;IAAA;CAU7C,CAAC;AACF,MAAMoC,8BAA8B,GAAA,WAAA,OAAGnC,eAAA,EAAA;IAAA+B,KAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAI,OAAA,EAAA;QAAAJ,MAAA,EAAA;IAAA;IAAAK,OAAA,EAAA;QAAAL,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAf,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAUtC,CAAC;AAGS,~~iCAAiCsB~~,KAAK,IAAG;IAChD,aAAa;IACb,MAAM,EAAEC,eAAe,EAAEC,IAAAA,EAAM,GAAGF,KAAK;IACvC,MAAM3B,UAAU,GAAG2B,KAAK,CAACG,WAAW,KAAK,YAAY;IACrD,MAAMC,UAAU,GAAGlC,aAAa,CAAC,CAAC;IAClC8B,KAAK,CAACpC,IAAI,CAACyC,SAAS,OAAG3C,mBAAY,EAACC,eAAe,CAACC,IAAI,EAAEwC,UAAU,CAACjC,IAAI,EAAEE,UAAU,IAAI+B,UAAU,CAAC/B,UAAU,EAAEA,UAAU,IAAI,CAAC2B,KAAK,CAACnC,KAAK,IAAIuC,UAAU,CAAC5B,iBAAiB,EAAEwB,KAAK,CAACpC,IAAI,CAACyC,SAAS,CAAC;IACjM,MAAMC,WAAW,GAAG3B,cAAc,CAAC,CAAC;IACpC,IAAIqB,KAAK,CAACnC,KAAK,EAAE;QACbmC,KAAK,CAACnC,KAAK,CAACwC,SAAS,~~OAAG3C~~,~~mBAAY~~,EAACC,eAAe,CAACE,KAAK,EAAEQ,UAAU,IAAIiC,WAAW,CAACjC,UAAU,EAAEA,UAAU,IAAI6B,IAAI,KAAK,OAAO,IAAII,WAAW,CAAClB,eAAe,EAAEf,UAAU,IAAI6B,IAAI,KAAK,OAAO,IAAII,WAAW,CAACjB,eAAe,EAAE,CAAChB,UAAU,IAAIiC,WAAW,CAAC1B,QAAQ,EAAE,CAACP,UAAU,IAAI6B,IAAI,KAAK,OAAO,IAAII,WAAW,CAACtB,aAAa,EAAEgB,KAAK,CAACnC,KAAK,CAACwC,SAAS,CAAC;IAC7V;IACA,MAAME,kCAAkC,GAAGZ,qCAAqC,CAAC,CAAC;IAClF,MAAMa,2BAA2B,GAAGZ,8BAA8B,CAAC,CAAC;IACpE,IAAII,KAAK,CAACjC,qBAAqB,EAAE;QAC7BiC,KAAK,CAACjC,qBAAqB,CAACsC,SAAS,OAAG3C,mBAAY,EAACC,eAAe,CAACI,qBAAqB,EAAEwC,kCAAkC,EAAEN,eAAe,KAAK,MAAM,IAAIO,2BAA2B,CAACP,eAAe,CAAC,EAAED,KAAK,CAACjC,qBAAqB,CAACsC,SAAS,CAAC;IACtP;IACA,MAAMI,0BAA0B,GAAGnB,6BAA6B,CAAC,CAAC;IAClE,MAAMoB,mBAAmB,GAAGnB,sBAAsB,CAAC,CAAC;IACpD,IAAIS,KAAK,CAAClC,iBAAiB,EAAE;QACzBkC,KAAK,CAAClC,iBAAiB,CAACuC,SAAS,OAAG3C,mBAAY,EAACC,eAAe,CAACG,iBAAiB,EAAE2C,0BAA0B,EAAER,eAAe,KAAK,OAAO,IAAIS,mBAAmB,CAAClB,KAAK,EAAE,CAAC,CAACQ,KAAK,CAACjC,qBAAqB,IAAI2C,mBAAmB,CAAChB,QAAQ,EAAEM,KAAK,CAAClC,iBAAiB,CAACuC,SAAS,CAAC;IAC/Q;IACA,IAAIL,KAAK,CAAChC,IAAI,EAAE;QACZgC,KAAK,CAAChC,IAAI,CAACqC,SAAS,OAAG3C,mBAAY,EAACC,eAAe,CAACK,IAAI,EAAEyC,0BAA0B,EAAET,KAAK,CAAChC,IAAI,CAACqC,SAAS,CAAC;IAC/G;IACA,OAAOL,KAAK;AAChB,CAAC"}
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 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, 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","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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { FieldSlots, FieldState } from './Field.types';\n\nexport const fieldClassNames: SlotClassNames<FieldSlots> = {\n root: `fui-Field`,\n label: `fui-Field__label`,\n validationMessage: `fui-Field__validationMessage`,\n validationMessageIcon: `fui-Field__validationMessageIcon`,\n hint: `fui-Field__hint`,\n};\n\n// Size of the icon in the validation message\nconst iconSize = '12px';\n\n/*\n Styles for the root slot\n /\nconst useRootStyles = makeStyles({\n base: {\n display: 'grid',\n },\n\n // In horizontal layout, the field is a grid with the label taking up the entire first column.\n // The last row is slack space in case the label is taller than the rest of the content.\n horizontal: {\n gridTemplateColumns: '33% 1fr',\n gridTemplateRows: 'auto auto auto 1fr',\n },\n\n // In horizontal layout without a label, replace the label's column with padding.\n // This lets grid auto-flow properly place the other children, and keeps fields with and without labels aligned.\n horizontalNoLabel: {\n paddingLeft: '33%',\n gridTemplateColumns: '1fr',\n },\n});\n\nconst useLabelStyles = makeStyles({\n 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 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","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 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 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","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/contexts/FieldContext.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/contexts/FieldContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/contexts/FieldContext.ts"],"sourcesContent":["~~import~~ * as React from 'react';\n\nimport type { FieldContextValue } from '../Field';\n\nconst FieldContext = React.createContext<FieldContextValue \| undefined>(undefined);\n\nexport const FieldContextProvider = FieldContext.Provider;\n\nexport const useFieldContext_unstable = (): FieldContextValue \| undefined => React.useContext(FieldContext);\n"],"names":["React","FieldContext","createContext","undefined","FieldContextProvider","Provider","useFieldContext_unstable","useContext"],"mappings":"~~;;;;;;;;;;;wBAMaI~~;;;4BAEAE;;;;;iEARU,QAAQ;AAI/B,MAAML,6BAAeD,OAAME,aAAa,CAAgCC;AAEjE,MAAMC,uBAAuBH,aAAaI,QAAQ,CAAC;AAEnD,MAAMC,2BAA2B,IAAqCN,OAAMO,UAAU,CAACN,cAAc"}
1	+ {"version":3,"sources":["../src/contexts/FieldContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type { FieldContextValue } from '../Field';\n\nconst FieldContext = React.createContext<FieldContextValue \| undefined>(undefined);\n\nexport const FieldContextProvider = FieldContext.Provider;\n\nexport const useFieldContext_unstable = (): FieldContextValue \| undefined => React.useContext(FieldContext);\n"],"names":["React","FieldContext","createContext","undefined","FieldContextProvider","Provider","useFieldContext_unstable","useContext"],"mappings":"AAAA;;;;;;;;;;;;wBAQaI;;;4BAEAE;;;;;iEARU,QAAQ;AAI/B,MAAML,6BAAeD,OAAME,aAAa,CAAgCC;AAEjE,MAAMC,uBAAuBH,aAAaI,QAAQ,CAAC;AAEnD,MAAMC,2BAA2B,IAAqCN,OAAMO,UAAU,CAACN,cAAc"}

package/lib-commonjs/contexts/useFieldContextValues.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/contexts/useFieldContextValues.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/contexts/useFieldContextValues.ts"],"sourcesContent":["~~import~~ * as React from 'react';\n\nimport type { FieldContextValue, FieldContextValues, FieldState } from '../Field';\n\n/*\n Get the context values used when rendering Field.\n */\nexport const useFieldContextValues_unstable = (state: FieldState): FieldContextValues => {\n const { generatedControlId, orientation, required, size, validationState } = state;\n const labelFor = state.label?.htmlFor;\n const labelId = state.label?.id;\n const validationMessageId = state.validationMessage?.id;\n const hintId = state.hint?.id;\n\n const field: FieldContextValue = React.useMemo(\n () => ({\n generatedControlId,\n hintId,\n labelFor,\n labelId,\n orientation,\n required,\n size,\n validationMessageId,\n validationState,\n }),\n [generatedControlId, hintId, labelFor, labelId, orientation, required, size, validationMessageId, validationState],\n );\n\n return { field };\n};\n"],"names":["React","useFieldContextValues_unstable","state","generatedControlId","orientation","required","size","validationState","labelFor","label","htmlFor","labelId","id","validationMessageId","validationMessage","hintId","hint","field","useMemo"],"mappings":"~~;;;;+BAOaC~~;;;;;;;iEAPU,QAAQ;AAOxB,uCAAuC,CAACC;QAE5BA,cACDA,eACYA,0BACbA;IAJf,MAAM,EAAEC,kBAAkB,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,eAAe,EAAE,GAAGL;IAC7E,MAAMM,WAAAA,CAAWN,eAAAA,MAAMO,KAAAA,AAAK,MAAA,QAAXP,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAaQ,OAAO;IACrC,MAAMC,UAAAA,CAAUT,gBAAAA,MAAMO,KAAAA,AAAK,MAAA,QAAXP,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAaU,EAAE;IAC/B,MAAMC,sBAAAA,CAAsBX,2BAAAA,MAAMY,iBAAAA,AAAiB,MAAA,QAAvBZ,6BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,yBAAyBU,EAAE;IACvD,MAAMG,SAAAA,CAASb,cAAAA,MAAMc,IAAAA,AAAI,MAAA,QAAVd,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAYU,EAAE;IAE7B,MAAMK,QAA2BjB,OAAMkB,OAAO,CAC5C,IAAO,CAAA;YACLf;YACAY;YACAP;YACAG;YACAP;YACAC;YACAC;YACAO;YACAN;SACF,CAAA,EACA;QAACJ;QAAoBY;QAAQP;QAAUG;QAASP;QAAaC;QAAUC;QAAMO;QAAqBN;KAAgB;IAGpH,OAAO;QAAEU;IAAM;AACjB,EAAE"}
1	+ {"version":3,"sources":["../src/contexts/useFieldContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type { FieldContextValue, FieldContextValues, FieldState } from '../Field';\n\n/*\n Get the context values used when rendering Field.\n */\nexport const useFieldContextValues_unstable = (state: FieldState): FieldContextValues => {\n const { generatedControlId, orientation, required, size, validationState } = state;\n const labelFor = state.label?.htmlFor;\n const labelId = state.label?.id;\n const validationMessageId = state.validationMessage?.id;\n const hintId = state.hint?.id;\n\n const field: FieldContextValue = React.useMemo(\n () => ({\n generatedControlId,\n hintId,\n labelFor,\n labelId,\n orientation,\n required,\n size,\n validationMessageId,\n validationState,\n }),\n [generatedControlId, hintId, labelFor, labelId, orientation, required, size, validationMessageId, validationState],\n );\n\n return { field };\n};\n"],"names":["React","useFieldContextValues_unstable","state","generatedControlId","orientation","required","size","validationState","labelFor","label","htmlFor","labelId","id","validationMessageId","validationMessage","hintId","hint","field","useMemo"],"mappings":"AAAA;;;;;+BASaC;;;;;;;iEAPU,QAAQ;AAOxB,uCAAuC,CAACC;QAE5BA,cACDA,eACYA,0BACbA;IAJf,MAAM,EAAEC,kBAAkB,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,eAAe,EAAE,GAAGL;IAC7E,MAAMM,WAAAA,CAAWN,eAAAA,MAAMO,KAAAA,AAAK,MAAA,QAAXP,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAaQ,OAAO;IACrC,MAAMC,UAAAA,CAAUT,gBAAAA,MAAMO,KAAAA,AAAK,MAAA,QAAXP,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAaU,EAAE;IAC/B,MAAMC,sBAAAA,CAAsBX,2BAAAA,MAAMY,iBAAAA,AAAiB,MAAA,QAAvBZ,6BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,yBAAyBU,EAAE;IACvD,MAAMG,SAAAA,CAASb,cAAAA,MAAMc,IAAAA,AAAI,MAAA,QAAVd,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAYU,EAAE;IAE7B,MAAMK,QAA2BjB,OAAMkB,OAAO,CAC5C,IAAO,CAAA;YACLf;YACAY;YACAP;YACAG;YACAP;YACAC;YACAC;YACAO;YACAN;SACF,CAAA,EACA;QAACJ;QAAoBY;QAAQP;QAAUG;QAASP;QAAaC;QAAUC;QAAMO;QAAqBN;KAAgB;IAGpH,OAAO;QAAEU;IAAM;AACjB,EAAE"}

package/lib-commonjs/contexts/useFieldControlProps.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/contexts/useFieldControlProps.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/contexts/useFieldControlProps.ts"],"sourcesContent":["~~import~~ type { FieldContextValue, FieldControlProps } from '../Field';\nimport { useFieldContext_unstable } from './FieldContext';\n\n/*\n Options for `useFieldControlProps_unstable`.\n /\nexport type FieldControlPropsOptions = {\n /\n Skips setting `aria-labelledby` on the control if the `label.htmlFor` refers to the control.\n \n This should be used with controls that can be the target of a label's `for` prop:\n * `<button>`, `<input>`, `<progress>`, `<select>`, `<textarea>`.\n /\n supportsLabelFor?: boolean;\n\n /\n Sets `required` instead of `aria-required` when the Field is marked required.\n \n This should be used with controls that support the `required` prop:\n * `<input>` (except `range` or `color`), `<select>`, `<textarea>`.\n /\n supportsRequired?: boolean;\n\n /\n Sets the size prop on the control to match the Field's size: `'small' \| 'medium' \| 'large'`.\n \n This should be used with controls that have a custom size prop that matches the Field's size prop.\n /\n supportsSize?: boolean;\n};\n\n/\n Gets the control props from the field context, if this inside a `<Field>`.\n \n When called with no arguments, returns the FieldControlProps that should be applied to the control.\n \n @returns A FieldControlProps object if inside a `<Field>`, otherwise undefined.\n /\nexport function useFieldControlProps_unstable(): FieldControlProps \| undefined;\n\n/\n Copies and merges the FieldControlProps with the given props, if this inside a `<Field>`.\n \n @param props - The existing props for the control. These will be merged with the control props from the field context.\n * @param options - Option to include the size prop.\n * @returns Merged props if inside a `<Field>`, otherwise the original props, or undefined if no props given.\n /\nexport function useFieldControlProps_unstable<Props extends FieldControlProps>(\n props: Props,\n options?: FieldControlPropsOptions,\n): Props;\nexport function useFieldControlProps_unstable<Props extends FieldControlProps>(\n props?: Props,\n options?: FieldControlPropsOptions,\n): Props \| undefined {\n return getFieldControlProps(useFieldContext_unstable(), props, options);\n}\n\n/\n @internal\n * Implementation of useFieldControlProps_unstable.\n * Split out so it can be used directly in renderField_unstable.\n */\nexport function getFieldControlProps<Props extends FieldControlProps>(\n context: FieldContextValue \| undefined,\n props?: Props,\n options?: FieldControlPropsOptions,\n): Props \| undefined {\n if (!context) {\n return props;\n }\n\n // Create a copy of props so we don't modify the original\n props = { ...props } as Props;\n\n const { generatedControlId, hintId, labelFor, labelId, required, validationMessageId, validationState } = context;\n\n if (generatedControlId) {\n props.id ??= generatedControlId;\n }\n\n // Set aria-labelledby if the control doesn't support label.htmlFor, or if the label's htmlFor doesn't refer\n // to this control (i.e. the user set this control's id prop without also setting the Field's label.htmlFor).\n if (labelId && (!options?.supportsLabelFor \|\| labelFor !== props.id)) {\n props['aria-labelledby'] ??= labelId;\n }\n\n // The control is described by the validation message, or hint, or both.\n // We also preserve and append any aria-describedby from props.\n // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933\n if (validationMessageId \|\| hintId) {\n // NOTE: Not using ??= since we're merging and overriding the user-provided value.\n props['aria-describedby'] = [validationMessageId, hintId, props?.['aria-describedby']].filter(Boolean).join(' ');\n }\n\n if (validationState === 'error') {\n props['aria-invalid'] ??= true;\n }\n\n if (required) {\n if (options?.supportsRequired) {\n (props as { required?: boolean }).required ??= true;\n } else {\n props['aria-required'] ??= true;\n }\n }\n\n // Include the size prop if this control supports it\n if (options?.supportsSize) {\n (props as { size?: FieldContextValue['size'] }).size ??= context.size;\n }\n\n return props;\n}\n"],"names":["useFieldContext_unstable","useFieldControlProps_unstable","props","options","getFieldControlProps","context","generatedControlId","hintId","labelFor","labelId","required","validationMessageId","validationState","id","supportsLabelFor","filter","Boolean","join","supportsRequired","supportsSize","size"],"mappings":"~~;;;;;;;;;;;IA+DgBI~~,oBAAAA;;;~~IAZAH,6BAAAA~~;;;;8BAlDyB,iBAAiB;AAkDnD,~~uCACLC~~,KAAa,EACbC,OAAkC;IAElC,OAAOC,yBAAqBJ,sCAAAA,KAA4BE,OAAOC;AACjE;AAOO,8BACLE,OAAsC,EACtCH,KAAa,EACbC,OAAkC;IAElC,IAAI,CAACE,SAAS;QACZ,OAAOH;IACT;IAEA,yDAAyD;IACzDA,QAAQ;QAAE,GAAGA,KAAK;IAAC;IAEnB,MAAM,EAAEI,kBAAkB,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,mBAAmB,EAAEC,eAAe,EAAE,GAAGP;IAE1G,IAAIC,oBAAoB;YACtBJ;;QAAAA,CAAAA,MAAAA,CAAAA,SAAAA,KAAAA,EAAMW,EAAAA,MAAAA,QAAAA,QAAAA,KAAAA,IAAAA,MAANX,OAAMW,EAAAA,GAAOP;IACf;IAEA,4GAA4G;IAC5G,6GAA6G;IAC7G,IAAIG,WAAY,~~CAAA,~~EAACN,~~YAAAA~~,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAASW,gBAAAA,AAAgB,KAAIN,aAAaN,MAAMW,EAAAA,AAAC,GAAI;YACpEX,SAAM;;QAANA,CAAAA,IAAAA,CAAAA,UAAAA,KAAAA,CAAK,CAAC,kBAAA,kBAAA,AAAkB,MAAA,QAAA,MAAA,KAAA,IAAA,IAAxBA,OAAK,CAAC,gBAAkB,GAAKO;IAC/B;IAEA,wEAAwE;IACxE,+DAA+D;IAC/D,yFAAyF;IACzF,IAAIE,uBAAuBJ,QAAQ;QACjC,kFAAkF;QAClFL,KAAK,CAAC,mBAAmB,GAAG;YAACS;YAAqBJ;YAAQL,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,KAAO,CAAC,mBAAmB;SAAC,CAACa,MAAM,CAACC,SAASC,IAAI,CAAC;IAC9G;IAEA,IAAIL,oBAAoB,SAAS;YAC/BV,SAAM;;QAANA,CAAAA,KAAAA,CAAAA,UAAAA,KAAAA,CAAK,CAAC,eAAA,eAAA,AAAe,MAAA,QAAA,OAAA,KAAA,IAAA,KAArBA,OAAK,CAAC,aAAe,GAAK;IAC5B;IAEA,IAAIQ,UAAU;QACZ,IAAIP,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAASe,gBAAgB,EAAE;gBAC5BhB;;YAAD,CAAA,YAAA,CAACA,UAAAA,KAAAA,EAAiCQ,QAAAA,MAAAA,QAAAA,cAAAA,KAAAA,IAAAA,YAAjCR,QAAiCQ,QAAAA,GAAa;QACjD,OAAO;gBACLR,SAAM;;YAANA,CAAAA,KAAAA,~~CAAAA~~,~~UAAAA,~~KAAAA,CAAK,CAAC,gBAAA,gBAAA,AAAgB,MAAA,QAAA,OAAA,KAAA,IAAA,KAAtBA,OAAK,CAAC,cAAgB,GAAK;QAC7B;IACF;IAEA,oDAAoD;IACpD,IAAIC,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAASgB,YAAY,EAAE;YACxBjB;;QAAD,CAAA,QAAA,CAACA,UAAAA,KAAAA,EAA+CkB,IAAAA,MAAAA,QAAAA,UAAAA,KAAAA,IAAAA,QAA/ClB,QAA+CkB,IAAAA,GAASf,QAAQe,IAAI;IACvE;IAEA,OAAOlB;AACT"}
1	+ {"version":3,"sources":["../src/contexts/useFieldControlProps.ts"],"sourcesContent":["'use client';\n\nimport type { FieldContextValue, FieldControlProps } from '../Field';\nimport { useFieldContext_unstable } from './FieldContext';\n\n/*\n Options for `useFieldControlProps_unstable`.\n /\nexport type FieldControlPropsOptions = {\n /\n Skips setting `aria-labelledby` on the control if the `label.htmlFor` refers to the control.\n \n This should be used with controls that can be the target of a label's `for` prop:\n * `<button>`, `<input>`, `<progress>`, `<select>`, `<textarea>`.\n /\n supportsLabelFor?: boolean;\n\n /\n Sets `required` instead of `aria-required` when the Field is marked required.\n \n This should be used with controls that support the `required` prop:\n * `<input>` (except `range` or `color`), `<select>`, `<textarea>`.\n /\n supportsRequired?: boolean;\n\n /\n Sets the size prop on the control to match the Field's size: `'small' \| 'medium' \| 'large'`.\n \n This should be used with controls that have a custom size prop that matches the Field's size prop.\n /\n supportsSize?: boolean;\n};\n\n/\n Gets the control props from the field context, if this inside a `<Field>`.\n \n When called with no arguments, returns the FieldControlProps that should be applied to the control.\n \n @returns A FieldControlProps object if inside a `<Field>`, otherwise undefined.\n /\nexport function useFieldControlProps_unstable(): FieldControlProps \| undefined;\n\n/\n Copies and merges the FieldControlProps with the given props, if this inside a `<Field>`.\n \n @param props - The existing props for the control. These will be merged with the control props from the field context.\n * @param options - Option to include the size prop.\n * @returns Merged props if inside a `<Field>`, otherwise the original props, or undefined if no props given.\n /\nexport function useFieldControlProps_unstable<Props extends FieldControlProps>(\n props: Props,\n options?: FieldControlPropsOptions,\n): Props;\nexport function useFieldControlProps_unstable<Props extends FieldControlProps>(\n props?: Props,\n options?: FieldControlPropsOptions,\n): Props \| undefined {\n return getFieldControlProps(useFieldContext_unstable(), props, options);\n}\n\n/\n @internal\n * Implementation of useFieldControlProps_unstable.\n * Split out so it can be used directly in renderField_unstable.\n */\nexport function getFieldControlProps<Props extends FieldControlProps>(\n context: FieldContextValue \| undefined,\n props?: Props,\n options?: FieldControlPropsOptions,\n): Props \| undefined {\n if (!context) {\n return props;\n }\n\n // Create a copy of props so we don't modify the original\n props = { ...props } as Props;\n\n const { generatedControlId, hintId, labelFor, labelId, required, validationMessageId, validationState } = context;\n\n if (generatedControlId) {\n props.id ??= generatedControlId;\n }\n\n // Set aria-labelledby if the control doesn't support label.htmlFor, or if the label's htmlFor doesn't refer\n // to this control (i.e. the user set this control's id prop without also setting the Field's label.htmlFor).\n if (labelId && (!options?.supportsLabelFor \|\| labelFor !== props.id)) {\n props['aria-labelledby'] ??= labelId;\n }\n\n // The control is described by the validation message, or hint, or both.\n // We also preserve and append any aria-describedby from props.\n // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933\n if (validationMessageId \|\| hintId) {\n // NOTE: Not using ??= since we're merging and overriding the user-provided value.\n props['aria-describedby'] = [validationMessageId, hintId, props?.['aria-describedby']].filter(Boolean).join(' ');\n }\n\n if (validationState === 'error') {\n props['aria-invalid'] ??= true;\n }\n\n if (required) {\n if (options?.supportsRequired) {\n (props as { required?: boolean }).required ??= true;\n } else {\n props['aria-required'] ??= true;\n }\n }\n\n // Include the size prop if this control supports it\n if (options?.supportsSize) {\n (props as { size?: FieldContextValue['size'] }).size ??= context.size;\n }\n\n return props;\n}\n"],"names":["useFieldContext_unstable","useFieldControlProps_unstable","props","options","getFieldControlProps","context","generatedControlId","hintId","labelFor","labelId","required","validationMessageId","validationState","id","supportsLabelFor","filter","Boolean","join","supportsRequired","supportsSize","size"],"mappings":"AAAA;;;;;;;;;;;;IAiEgBI,oBAAAA;;;iCAZAH;;;;8BAlDyB,iBAAiB;AAkDnD,SAASA,8BACdC,KAAa,EACbC,OAAkC;IAElC,OAAOC,yBAAqBJ,sCAAAA,KAA4BE,OAAOC;AACjE;AAOO,8BACLE,OAAsC,EACtCH,KAAa,EACbC,OAAkC;IAElC,IAAI,CAACE,SAAS;QACZ,OAAOH;IACT;IAEA,yDAAyD;IACzDA,QAAQ;QAAE,GAAGA,KAAK;IAAC;IAEnB,MAAM,EAAEI,kBAAkB,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,mBAAmB,EAAEC,eAAe,EAAE,GAAGP;IAE1G,IAAIC,oBAAoB;YACtBJ;;QAAAA,CAAAA,MAAAA,CAAAA,SAAAA,KAAAA,EAAMW,EAAAA,MAAAA,QAAAA,QAAAA,KAAAA,IAAAA,MAANX,OAAMW,EAAAA,GAAOP;IACf;IAEA,4GAA4G;IAC5G,6GAA6G;IAC7G,IAAIG,WAAY,EAACN,aAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAASW,gBAAAA,AAAgB,KAAIN,aAAaN,MAAMW,EAAAA,AAAC,GAAI;YACpEX,SAAM;;QAANA,CAAAA,IAAAA,CAAAA,UAAAA,KAAAA,CAAK,CAAC,kBAAA,kBAAA,AAAkB,MAAA,QAAA,MAAA,KAAA,IAAA,IAAxBA,OAAK,CAAC,gBAAkB,GAAKO;IAC/B;IAEA,wEAAwE;IACxE,+DAA+D;IAC/D,yFAAyF;IACzF,IAAIE,uBAAuBJ,QAAQ;QACjC,kFAAkF;QAClFL,KAAK,CAAC,mBAAmB,GAAG;YAACS;YAAqBJ;YAAQL,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,KAAO,CAAC,mBAAmB;SAAC,CAACa,MAAM,CAACC,SAASC,IAAI,CAAC;IAC9G;IAEA,IAAIL,oBAAoB,SAAS;YAC/BV,SAAM;;QAANA,CAAAA,KAAAA,CAAAA,UAAAA,KAAAA,CAAK,CAAC,eAAA,eAAA,AAAe,MAAA,QAAA,OAAA,KAAA,IAAA,KAArBA,OAAK,CAAC,aAAe,GAAK;IAC5B;IAEA,IAAIQ,UAAU;QACZ,IAAIP,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAASe,gBAAgB,EAAE;gBAC5BhB;;YAAD,CAAA,YAAA,CAACA,UAAAA,KAAAA,EAAiCQ,QAAAA,MAAAA,QAAAA,cAAAA,KAAAA,IAAAA,YAAjCR,QAAiCQ,QAAAA,GAAa;QACjD,OAAO;gBACLR,SAAM;;YAANA,CAAAA,KAAAA,WAAAA,KAAAA,CAAK,CAAC,gBAAA,gBAAA,AAAgB,MAAA,QAAA,OAAA,KAAA,IAAA,KAAtBA,OAAK,CAAC,cAAgB,GAAK;QAC7B;IACF;IAEA,oDAAoD;IACpD,IAAIC,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAASgB,YAAY,EAAE;YACxBjB;;QAAD,CAAA,QAAA,CAACA,UAAAA,KAAAA,EAA+CkB,IAAAA,MAAAA,QAAAA,UAAAA,KAAAA,IAAAA,QAA/ClB,QAA+CkB,IAAAA,GAASf,QAAQe,IAAI;IACvE;IAEA,OAAOlB;AACT"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-field",
-  "version": "9.4.5",
+  "version": "9.4.6",
   "description": "Fluent UI Field components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -19,13 +19,13 @@
     "@fluentui/scripts-api-extractor": "*"
   },
   "dependencies": {
-    "@fluentui/react-context-selector": "^9.2.7",
+    "@fluentui/react-context-selector": "^9.2.8",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "^9.2.0",
-    "@fluentui/react-label": "^9.3.5",
-    "@fluentui/react-shared-contexts": "^9.25.1",
+    "@fluentui/react-jsx-runtime": "^9.2.1",
+    "@fluentui/react-label": "^9.3.6",
+    "@fluentui/react-shared-contexts": "^9.25.2",
     "@fluentui/react-theme": "^9.2.0",
-    "@fluentui/react-utilities": "^9.24.1",
+    "@fluentui/react-utilities": "^9.25.0",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },