@fluentui/react-field 9.1.57 → 9.1.59

Sign up to get free protection for your applications and to get access to all the features.
package/CHANGELOG.md CHANGED
@@ -1,12 +1,34 @@
1
1
  # Change Log - @fluentui/react-field
2
2
 
3
- This log was last generated on Fri, 15 Mar 2024 21:37:57 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 25 Mar 2024 11:09:55 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.1.59](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.1.59)
8
+
9
+ Mon, 25 Mar 2024 11:09:55 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.1.58..@fluentui/react-field_v9.1.59)
11
+
12
+ ### Patches
13
+
14
+ - fix: Align horizontal Field labels with control text ([PR #30732](https://github.com/microsoft/fluentui/pull/30732) by behowell@microsoft.com)
15
+
16
+ ## [9.1.58](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.1.58)
17
+
18
+ Mon, 18 Mar 2024 19:50:46 GMT
19
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.1.57..@fluentui/react-field_v9.1.58)
20
+
21
+ ### Patches
22
+
23
+ - Bump @fluentui/react-context-selector to v9.1.56 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
24
+ - Bump @fluentui/react-jsx-runtime to v9.0.34 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
25
+ - Bump @fluentui/react-label to v9.1.66 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
26
+ - Bump @fluentui/react-theme to v9.1.19 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
27
+ - Bump @fluentui/react-utilities to v9.18.5 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
28
+
7
29
  ## [9.1.57](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.1.57)
8
30
 
9
- Fri, 15 Mar 2024 21:37:57 GMT
31
+ Fri, 15 Mar 2024 21:43:49 GMT
10
32
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.1.56..@fluentui/react-field_v9.1.57)
11
33
 
12
34
  ### Patches
@@ -28,27 +28,33 @@ const useRootStyles = /*#__PURE__*/__styles({
28
28
  d: [".f13qh94s{display:grid;}", ".f2wwaib{grid-template-columns:33% 1fr;}", ".f1645dqt{grid-template-rows:auto auto auto 1fr;}", ".f15jqgz8{padding-left:33%;}", ".fggqkej{padding-right:33%;}", ".f1c2z91y{grid-template-columns:1fr;}"]
29
29
  });
30
30
  const useLabelStyles = /*#__PURE__*/__styles({
31
- base: {
32
- z8tnut: "fclwglc",
33
- Byoj8tv: "fywfov9"
34
- },
35
- large: {
36
- z8tnut: "f1sl3k7w",
37
- Byoj8tv: "f1brlhvm"
38
- },
39
31
  vertical: {
32
+ z8tnut: "fclwglc",
33
+ Byoj8tv: "fywfov9",
40
34
  jrapky: "fyacil5"
41
35
  },
42
36
  verticalLarge: {
37
+ z8tnut: "f1sl3k7w",
38
+ Byoj8tv: "f1brlhvm",
43
39
  jrapky: "f8l5zjj"
44
40
  },
45
41
  horizontal: {
42
+ z8tnut: "fp2oml8",
43
+ Byoj8tv: "f1tdddsa",
46
44
  t21cq0: ["fkujibs", "f199hnxi"],
47
45
  Ijaq50: "f16hsg94",
48
46
  nk6f5a: "f1nzqi2z"
47
+ },
48
+ horizontalSmall: {
49
+ z8tnut: "f1ywm7hm",
50
+ Byoj8tv: "f14wxoun"
51
+ },
52
+ horizontalLarge: {
53
+ z8tnut: "f1hqyr95",
54
+ Byoj8tv: "fm4hlj0"
49
55
  }
50
56
  }, {
51
- d: [".fclwglc{padding-top:var(--spacingVerticalXXS);}", ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}", ".f1sl3k7w{padding-top:1px;}", ".f1brlhvm{padding-bottom:1px;}", ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}", ".f8l5zjj{margin-bottom:var(--spacingVerticalXS);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".f16hsg94{grid-row-start:1;}", ".f1nzqi2z{grid-row-end:-1;}"]
57
+ d: [".fclwglc{padding-top:var(--spacingVerticalXXS);}", ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}", ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}", ".f1sl3k7w{padding-top:1px;}", ".f1brlhvm{padding-bottom:1px;}", ".f8l5zjj{margin-bottom:var(--spacingVerticalXS);}", ".fp2oml8{padding-top:var(--spacingVerticalSNudge);}", ".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".f16hsg94{grid-row-start:1;}", ".f1nzqi2z{grid-row-end:-1;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}", ".f1hqyr95{padding-top:9px;}", ".fm4hlj0{padding-bottom:9px;}"]
52
58
  });
53
59
  const useSecondaryTextBaseClassName = /*#__PURE__*/__resetStyles("r5c4z9l", null, [".r5c4z9l{margin-top:var(--spacingVerticalXXS);color:var(--colorNeutralForeground3);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"]);
54
60
  const useSecondaryTextStyles = /*#__PURE__*/__styles({
@@ -80,14 +86,15 @@ const useValidationMessageIconStyles = /*#__PURE__*/__styles({
80
86
  */
81
87
  export const useFieldStyles_unstable = state => {
82
88
  const {
83
- validationState
89
+ validationState,
90
+ size
84
91
  } = state;
85
92
  const horizontal = state.orientation === 'horizontal';
86
93
  const rootStyles = useRootStyles();
87
94
  state.root.className = mergeClasses(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);
88
95
  const labelStyles = useLabelStyles();
89
96
  if (state.label) {
90
- state.label.className = mergeClasses(fieldClassNames.label, labelStyles.base, horizontal && labelStyles.horizontal, !horizontal && labelStyles.vertical, state.label.size === 'large' && labelStyles.large, !horizontal && state.label.size === 'large' && labelStyles.verticalLarge, state.label.className);
97
+ 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);
91
98
  }
92
99
  const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
93
100
  const validationMessageIconStyles = useValidationMessageIconStyles();
@@ -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","z8tnut","Byoj8tv","large","vertical","jrapky","verticalLarge","t21cq0","Ijaq50","nk6f5a","useSecondaryTextBaseClassName","useSecondaryTextStyles","error","sj55zd","withIcon","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","warning","success","useFieldStyles_unstable","state","validationState","orientation","rootStyles","className","labelStyles","size","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 base: {\n paddingTop: tokens.spacingVerticalXXS,\n paddingBottom: tokens.spacingVerticalXXS\n },\n large: {\n paddingTop: '1px',\n paddingBottom: '1px'\n },\n vertical: {\n marginBottom: tokens.spacingVerticalXXS\n },\n verticalLarge: {\n marginBottom: tokens.spacingVerticalXS\n },\n horizontal: {\n marginRight: tokens.spacingHorizontalM,\n gridRowStart: '1',\n gridRowEnd: '-1'\n }\n});\nconst useSecondaryTextBaseClassName = makeResetStyles({\n marginTop: tokens.spacingVerticalXXS,\n color: tokens.colorNeutralForeground3,\n ...typographyStyles.caption1\n});\nconst useSecondaryTextStyles = makeStyles({\n error: {\n color: tokens.colorPaletteRedForeground1\n },\n withIcon: {\n // Add a gutter for the icon, to allow multiple lines of text to line up to the right of the icon.\n paddingLeft: `calc(${iconSize} + ${tokens.spacingHorizontalXS})`\n }\n});\nconst useValidationMessageIconBaseClassName = makeResetStyles({\n display: 'inline-block',\n fontSize: iconSize,\n // Negative left margin puts the icon in the gutter of the validation message div's withIcon style.\n marginLeft: `calc(-${iconSize} - ${tokens.spacingHorizontalXS})`,\n marginRight: tokens.spacingHorizontalXS,\n // Line height of 0 prevents the verticalAlign from affecting the line height of the text.\n lineHeight: '0',\n // Negative verticalAlign shifts the inline icon down to align with the text (effectively top padding).\n verticalAlign: '-1px'\n});\nconst useValidationMessageIconStyles = makeStyles({\n error: {\n color: tokens.colorPaletteRedForeground1\n },\n warning: {\n color: tokens.colorPaletteDarkOrangeForeground1\n },\n success: {\n color: tokens.colorPaletteGreenForeground1\n }\n});\n/**\n * Apply styling to the Field slots based on the state\n */ export const useFieldStyles_unstable = (state)=>{\n const { validationState } = state;\n const horizontal = state.orientation === 'horizontal';\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(fieldClassNames.label, labelStyles.base, horizontal && labelStyles.horizontal, !horizontal && labelStyles.vertical, state.label.size === 'large' && labelStyles.large, !horizontal && state.label.size === 'large' && labelStyles.verticalLarge, state.label.className);\n }\n const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();\n const validationMessageIconStyles = useValidationMessageIconStyles();\n if (state.validationMessageIcon) {\n state.validationMessageIcon.className = mergeClasses(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== 'none' && validationMessageIconStyles[validationState], state.validationMessageIcon.className);\n }\n const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n const secondaryTextStyles = useSecondaryTextStyles();\n if (state.validationMessage) {\n state.validationMessage.className = mergeClasses(fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);\n }\n if (state.hint) {\n state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAASA,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAAAC,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,OAAO,MAAMC,eAAe,GAAG;EAC3BC,IAAI,EAAG,WAAU;EACjBC,KAAK,EAAG,kBAAiB;EACzBC,iBAAiB,EAAG,8BAA6B;EACjDC,qBAAqB,EAAG,kCAAiC;EACzDC,IAAI,EAAG;AACX,CAAC;AACD;AACA,MAAMC,QAAQ,GAAG,MAAM;AACvB;AACA;AACA;AAAI,MAAMC,aAAa,gBAAGT,QAAA;EAAAU,IAAA;IAAAC,MAAA;EAAA;EAAAC,UAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,iBAAA;IAAAC,MAAA;IAAAH,OAAA;EAAA;AAAA;EAAAI,CAAA;AAAA,CAgBzB,CAAC;AACF,MAAMC,cAAc,gBAAGlB,QAAA;EAAAU,IAAA;IAAAS,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAF,MAAA;IAAAC,OAAA;EAAA;EAAAE,QAAA;IAAAC,MAAA;EAAA;EAAAC,aAAA;IAAAD,MAAA;EAAA;EAAAX,UAAA;IAAAa,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAV,CAAA;AAAA,CAoBtB,CAAC;AACF,MAAMW,6BAA6B,gBAAG7B,aAAA,uPAIrC,CAAC;AACF,MAAM8B,sBAAsB,gBAAG7B,QAAA;EAAA8B,KAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAhB,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAQ9B,CAAC;AACF,MAAMgB,qCAAqC,gBAAGlC,aAAA,2XAU7C,CAAC;AACF,MAAMmC,8BAA8B,gBAAGlC,QAAA;EAAA8B,KAAA;IAAAC,MAAA;EAAA;EAAAI,OAAA;IAAAJ,MAAA;EAAA;EAAAK,OAAA;IAAAL,MAAA;EAAA;AAAA;EAAAd,CAAA;AAAA,CAUtC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMoB,uBAAuB,GAAIC,KAAK,IAAG;EAChD,MAAM;IAAEC;EAAgB,CAAC,GAAGD,KAAK;EACjC,MAAM1B,UAAU,GAAG0B,KAAK,CAACE,WAAW,KAAK,YAAY;EACrD,MAAMC,UAAU,GAAGhC,aAAa,CAAC,CAAC;EAClC6B,KAAK,CAACnC,IAAI,CAACuC,SAAS,GAAGzC,YAAY,CAACC,eAAe,CAACC,IAAI,EAAEsC,UAAU,CAAC/B,IAAI,EAAEE,UAAU,IAAI6B,UAAU,CAAC7B,UAAU,EAAEA,UAAU,IAAI,CAAC0B,KAAK,CAAClC,KAAK,IAAIqC,UAAU,CAAC1B,iBAAiB,EAAEuB,KAAK,CAACnC,IAAI,CAACuC,SAAS,CAAC;EACjM,MAAMC,WAAW,GAAGzB,cAAc,CAAC,CAAC;EACpC,IAAIoB,KAAK,CAAClC,KAAK,EAAE;IACbkC,KAAK,CAAClC,KAAK,CAACsC,SAAS,GAAGzC,YAAY,CAACC,eAAe,CAACE,KAAK,EAAEuC,WAAW,CAACjC,IAAI,EAAEE,UAAU,IAAI+B,WAAW,CAAC/B,UAAU,EAAE,CAACA,UAAU,IAAI+B,WAAW,CAACrB,QAAQ,EAAEgB,KAAK,CAAClC,KAAK,CAACwC,IAAI,KAAK,OAAO,IAAID,WAAW,CAACtB,KAAK,EAAE,CAACT,UAAU,IAAI0B,KAAK,CAAClC,KAAK,CAACwC,IAAI,KAAK,OAAO,IAAID,WAAW,CAACnB,aAAa,EAAEc,KAAK,CAAClC,KAAK,CAACsC,SAAS,CAAC;EAChT;EACA,MAAMG,kCAAkC,GAAGZ,qCAAqC,CAAC,CAAC;EAClF,MAAMa,2BAA2B,GAAGZ,8BAA8B,CAAC,CAAC;EACpE,IAAII,KAAK,CAAChC,qBAAqB,EAAE;IAC7BgC,KAAK,CAAChC,qBAAqB,CAACoC,SAAS,GAAGzC,YAAY,CAACC,eAAe,CAACI,qBAAqB,EAAEuC,kCAAkC,EAAEN,eAAe,KAAK,MAAM,IAAIO,2BAA2B,CAACP,eAAe,CAAC,EAAED,KAAK,CAAChC,qBAAqB,CAACoC,SAAS,CAAC;EACtP;EACA,MAAMK,0BAA0B,GAAGnB,6BAA6B,CAAC,CAAC;EAClE,MAAMoB,mBAAmB,GAAGnB,sBAAsB,CAAC,CAAC;EACpD,IAAIS,KAAK,CAACjC,iBAAiB,EAAE;IACzBiC,KAAK,CAACjC,iBAAiB,CAACqC,SAAS,GAAGzC,YAAY,CAACC,eAAe,CAACG,iBAAiB,EAAE0C,0BAA0B,EAAER,eAAe,KAAK,OAAO,IAAIS,mBAAmB,CAAClB,KAAK,EAAE,CAAC,CAACQ,KAAK,CAAChC,qBAAqB,IAAI0C,mBAAmB,CAAChB,QAAQ,EAAEM,KAAK,CAACjC,iBAAiB,CAACqC,SAAS,CAAC;EAC/Q;EACA,IAAIJ,KAAK,CAAC/B,IAAI,EAAE;IACZ+B,KAAK,CAAC/B,IAAI,CAACmC,SAAS,GAAGzC,YAAY,CAACC,eAAe,CAACK,IAAI,EAAEwC,0BAA0B,EAAET,KAAK,CAAC/B,IAAI,CAACmC,SAAS,CAAC;EAC/G;EACA,OAAOJ,KAAK;AAChB,CAAC"}
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 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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"}
@@ -54,40 +54,52 @@ const iconSize = '12px';
54
54
  ]
55
55
  });
56
56
  const useLabelStyles = /*#__PURE__*/ (0, _react.__styles)({
57
- base: {
58
- z8tnut: "fclwglc",
59
- Byoj8tv: "fywfov9"
60
- },
61
- large: {
62
- z8tnut: "f1sl3k7w",
63
- Byoj8tv: "f1brlhvm"
64
- },
65
57
  vertical: {
58
+ z8tnut: "fclwglc",
59
+ Byoj8tv: "fywfov9",
66
60
  jrapky: "fyacil5"
67
61
  },
68
62
  verticalLarge: {
63
+ z8tnut: "f1sl3k7w",
64
+ Byoj8tv: "f1brlhvm",
69
65
  jrapky: "f8l5zjj"
70
66
  },
71
67
  horizontal: {
68
+ z8tnut: "fp2oml8",
69
+ Byoj8tv: "f1tdddsa",
72
70
  t21cq0: [
73
71
  "fkujibs",
74
72
  "f199hnxi"
75
73
  ],
76
74
  Ijaq50: "f16hsg94",
77
75
  nk6f5a: "f1nzqi2z"
76
+ },
77
+ horizontalSmall: {
78
+ z8tnut: "f1ywm7hm",
79
+ Byoj8tv: "f14wxoun"
80
+ },
81
+ horizontalLarge: {
82
+ z8tnut: "f1hqyr95",
83
+ Byoj8tv: "fm4hlj0"
78
84
  }
79
85
  }, {
80
86
  d: [
81
87
  ".fclwglc{padding-top:var(--spacingVerticalXXS);}",
82
88
  ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}",
89
+ ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}",
83
90
  ".f1sl3k7w{padding-top:1px;}",
84
91
  ".f1brlhvm{padding-bottom:1px;}",
85
- ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}",
86
92
  ".f8l5zjj{margin-bottom:var(--spacingVerticalXS);}",
93
+ ".fp2oml8{padding-top:var(--spacingVerticalSNudge);}",
94
+ ".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}",
87
95
  ".fkujibs{margin-right:var(--spacingHorizontalM);}",
88
96
  ".f199hnxi{margin-left:var(--spacingHorizontalM);}",
89
97
  ".f16hsg94{grid-row-start:1;}",
90
- ".f1nzqi2z{grid-row-end:-1;}"
98
+ ".f1nzqi2z{grid-row-end:-1;}",
99
+ ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}",
100
+ ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}",
101
+ ".f1hqyr95{padding-top:9px;}",
102
+ ".fm4hlj0{padding-bottom:9px;}"
91
103
  ]
92
104
  });
93
105
  const useSecondaryTextBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r5c4z9l", null, [
@@ -132,13 +144,13 @@ const useValidationMessageIconStyles = /*#__PURE__*/ (0, _react.__styles)({
132
144
  ]
133
145
  });
134
146
  const useFieldStyles_unstable = (state)=>{
135
- const { validationState } = state;
147
+ const { validationState, size } = state;
136
148
  const horizontal = state.orientation === 'horizontal';
137
149
  const rootStyles = useRootStyles();
138
150
  state.root.className = (0, _react.mergeClasses)(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);
139
151
  const labelStyles = useLabelStyles();
140
152
  if (state.label) {
141
- state.label.className = (0, _react.mergeClasses)(fieldClassNames.label, labelStyles.base, horizontal && labelStyles.horizontal, !horizontal && labelStyles.vertical, state.label.size === 'large' && labelStyles.large, !horizontal && state.label.size === 'large' && labelStyles.verticalLarge, state.label.className);
153
+ state.label.className = (0, _react.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);
142
154
  }
143
155
  const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
144
156
  const validationMessageIconStyles = useValidationMessageIconStyles();
@@ -1 +1 @@
1
- {"version":3,"sources":["useFieldStyles.styles.js"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { __resetStyles, __styles, mergeClasses } from '@griffel/react';\nexport const fieldClassNames = {\n root: `fui-Field`,\n label: `fui-Field__label`,\n validationMessage: `fui-Field__validationMessage`,\n validationMessageIcon: `fui-Field__validationMessageIcon`,\n hint: `fui-Field__hint`\n};\n// Size of the icon in the validation message\nconst iconSize = '12px';\n/**\n * Styles for the root slot\n */\nconst useRootStyles = /*#__PURE__*/__styles({\n base: {\n mc9l5x: \"f13qh94s\"\n },\n horizontal: {\n Budl1dq: \"f2wwaib\",\n wkccdc: \"f1645dqt\"\n },\n horizontalNoLabel: {\n uwmqm3: [\"f15jqgz8\", \"fggqkej\"],\n Budl1dq: \"f1c2z91y\"\n }\n}, {\n d: [\".f13qh94s{display:grid;}\", \".f2wwaib{grid-template-columns:33% 1fr;}\", \".f1645dqt{grid-template-rows:auto auto auto 1fr;}\", \".f15jqgz8{padding-left:33%;}\", \".fggqkej{padding-right:33%;}\", \".f1c2z91y{grid-template-columns:1fr;}\"]\n});\nconst useLabelStyles = /*#__PURE__*/__styles({\n base: {\n z8tnut: \"fclwglc\",\n Byoj8tv: \"fywfov9\"\n },\n large: {\n z8tnut: \"f1sl3k7w\",\n Byoj8tv: \"f1brlhvm\"\n },\n vertical: {\n jrapky: \"fyacil5\"\n },\n verticalLarge: {\n jrapky: \"f8l5zjj\"\n },\n horizontal: {\n t21cq0: [\"fkujibs\", \"f199hnxi\"],\n Ijaq50: \"f16hsg94\",\n nk6f5a: \"f1nzqi2z\"\n }\n}, {\n d: [\".fclwglc{padding-top:var(--spacingVerticalXXS);}\", \".fywfov9{padding-bottom:var(--spacingVerticalXXS);}\", \".f1sl3k7w{padding-top:1px;}\", \".f1brlhvm{padding-bottom:1px;}\", \".fyacil5{margin-bottom:var(--spacingVerticalXXS);}\", \".f8l5zjj{margin-bottom:var(--spacingVerticalXS);}\", \".fkujibs{margin-right:var(--spacingHorizontalM);}\", \".f199hnxi{margin-left:var(--spacingHorizontalM);}\", \".f16hsg94{grid-row-start:1;}\", \".f1nzqi2z{grid-row-end:-1;}\"]\n});\nconst useSecondaryTextBaseClassName = /*#__PURE__*/__resetStyles(\"r5c4z9l\", null, [\".r5c4z9l{margin-top:var(--spacingVerticalXXS);color:var(--colorNeutralForeground3);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}\"]);\nconst useSecondaryTextStyles = /*#__PURE__*/__styles({\n error: {\n sj55zd: \"f1hcrxcs\"\n },\n withIcon: {\n uwmqm3: [\"frawy03\", \"fg4c52\"]\n }\n}, {\n d: [\".f1hcrxcs{color:var(--colorPaletteRedForeground1);}\", \".frawy03{padding-left:calc(12px + var(--spacingHorizontalXS));}\", \".fg4c52{padding-right:calc(12px + var(--spacingHorizontalXS));}\"]\n});\nconst useValidationMessageIconBaseClassName = /*#__PURE__*/__resetStyles(\"ra7h1uk\", \"r1rh6bd7\", [\".ra7h1uk{display:inline-block;font-size:12px;margin-left:calc(-12px - var(--spacingHorizontalXS));margin-right:var(--spacingHorizontalXS);line-height:0;vertical-align:-1px;}\", \".r1rh6bd7{display:inline-block;font-size:12px;margin-right:calc(-12px - var(--spacingHorizontalXS));margin-left:var(--spacingHorizontalXS);line-height:0;vertical-align:-1px;}\"]);\nconst useValidationMessageIconStyles = /*#__PURE__*/__styles({\n error: {\n sj55zd: \"f1hcrxcs\"\n },\n warning: {\n sj55zd: \"f1k5f75o\"\n },\n success: {\n sj55zd: \"ffmvakt\"\n }\n}, {\n d: [\".f1hcrxcs{color:var(--colorPaletteRedForeground1);}\", \".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}\", \".ffmvakt{color:var(--colorPaletteGreenForeground1);}\"]\n});\n/**\n * Apply styling to the Field slots based on the state\n */\nexport const useFieldStyles_unstable = state => {\n const {\n validationState\n } = state;\n const horizontal = state.orientation === 'horizontal';\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(fieldClassNames.label, labelStyles.base, horizontal && labelStyles.horizontal, !horizontal && labelStyles.vertical, state.label.size === 'large' && labelStyles.large, !horizontal && state.label.size === 'large' && labelStyles.verticalLarge, state.label.className);\n }\n const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();\n const validationMessageIconStyles = useValidationMessageIconStyles();\n if (state.validationMessageIcon) {\n state.validationMessageIcon.className = mergeClasses(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== 'none' && validationMessageIconStyles[validationState], state.validationMessageIcon.className);\n }\n const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n const secondaryTextStyles = useSecondaryTextStyles();\n if (state.validationMessage) {\n state.validationMessage.className = mergeClasses(fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);\n }\n if (state.hint) {\n state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);\n }\n return state;\n};\n//# sourceMappingURL=useFieldStyles.styles.js.map"],"names":["fieldClassNames","useFieldStyles_unstable","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","__styles","base","mc9l5x","horizontal","Budl1dq","wkccdc","horizontalNoLabel","uwmqm3","d","useLabelStyles","z8tnut","Byoj8tv","large","vertical","jrapky","verticalLarge","t21cq0","Ijaq50","nk6f5a","useSecondaryTextBaseClassName","__resetStyles","useSecondaryTextStyles","error","sj55zd","withIcon","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","warning","success","state","validationState","orientation","rootStyles","className","mergeClasses","labelStyles","size","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"mappings":"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"}
1
+ {"version":3,"sources":["useFieldStyles.styles.js"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { __resetStyles, __styles, mergeClasses } from '@griffel/react';\nexport const fieldClassNames = {\n root: `fui-Field`,\n label: `fui-Field__label`,\n validationMessage: `fui-Field__validationMessage`,\n validationMessageIcon: `fui-Field__validationMessageIcon`,\n hint: `fui-Field__hint`\n};\n// Size of the icon in the validation message\nconst iconSize = '12px';\n/**\n * Styles for the root slot\n */\nconst useRootStyles = /*#__PURE__*/__styles({\n base: {\n mc9l5x: \"f13qh94s\"\n },\n horizontal: {\n Budl1dq: \"f2wwaib\",\n wkccdc: \"f1645dqt\"\n },\n horizontalNoLabel: {\n uwmqm3: [\"f15jqgz8\", \"fggqkej\"],\n Budl1dq: \"f1c2z91y\"\n }\n}, {\n d: [\".f13qh94s{display:grid;}\", \".f2wwaib{grid-template-columns:33% 1fr;}\", \".f1645dqt{grid-template-rows:auto auto auto 1fr;}\", \".f15jqgz8{padding-left:33%;}\", \".fggqkej{padding-right:33%;}\", \".f1c2z91y{grid-template-columns:1fr;}\"]\n});\nconst useLabelStyles = /*#__PURE__*/__styles({\n vertical: {\n z8tnut: \"fclwglc\",\n Byoj8tv: \"fywfov9\",\n jrapky: \"fyacil5\"\n },\n verticalLarge: {\n z8tnut: \"f1sl3k7w\",\n Byoj8tv: \"f1brlhvm\",\n jrapky: \"f8l5zjj\"\n },\n horizontal: {\n z8tnut: \"fp2oml8\",\n Byoj8tv: \"f1tdddsa\",\n t21cq0: [\"fkujibs\", \"f199hnxi\"],\n Ijaq50: \"f16hsg94\",\n nk6f5a: \"f1nzqi2z\"\n },\n horizontalSmall: {\n z8tnut: \"f1ywm7hm\",\n Byoj8tv: \"f14wxoun\"\n },\n horizontalLarge: {\n z8tnut: \"f1hqyr95\",\n Byoj8tv: \"fm4hlj0\"\n }\n}, {\n d: [\".fclwglc{padding-top:var(--spacingVerticalXXS);}\", \".fywfov9{padding-bottom:var(--spacingVerticalXXS);}\", \".fyacil5{margin-bottom:var(--spacingVerticalXXS);}\", \".f1sl3k7w{padding-top:1px;}\", \".f1brlhvm{padding-bottom:1px;}\", \".f8l5zjj{margin-bottom:var(--spacingVerticalXS);}\", \".fp2oml8{padding-top:var(--spacingVerticalSNudge);}\", \".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}\", \".fkujibs{margin-right:var(--spacingHorizontalM);}\", \".f199hnxi{margin-left:var(--spacingHorizontalM);}\", \".f16hsg94{grid-row-start:1;}\", \".f1nzqi2z{grid-row-end:-1;}\", \".f1ywm7hm{padding-top:var(--spacingVerticalXS);}\", \".f14wxoun{padding-bottom:var(--spacingVerticalXS);}\", \".f1hqyr95{padding-top:9px;}\", \".fm4hlj0{padding-bottom:9px;}\"]\n});\nconst useSecondaryTextBaseClassName = /*#__PURE__*/__resetStyles(\"r5c4z9l\", null, [\".r5c4z9l{margin-top:var(--spacingVerticalXXS);color:var(--colorNeutralForeground3);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}\"]);\nconst useSecondaryTextStyles = /*#__PURE__*/__styles({\n error: {\n sj55zd: \"f1hcrxcs\"\n },\n withIcon: {\n uwmqm3: [\"frawy03\", \"fg4c52\"]\n }\n}, {\n d: [\".f1hcrxcs{color:var(--colorPaletteRedForeground1);}\", \".frawy03{padding-left:calc(12px + var(--spacingHorizontalXS));}\", \".fg4c52{padding-right:calc(12px + var(--spacingHorizontalXS));}\"]\n});\nconst useValidationMessageIconBaseClassName = /*#__PURE__*/__resetStyles(\"ra7h1uk\", \"r1rh6bd7\", [\".ra7h1uk{display:inline-block;font-size:12px;margin-left:calc(-12px - var(--spacingHorizontalXS));margin-right:var(--spacingHorizontalXS);line-height:0;vertical-align:-1px;}\", \".r1rh6bd7{display:inline-block;font-size:12px;margin-right:calc(-12px - var(--spacingHorizontalXS));margin-left:var(--spacingHorizontalXS);line-height:0;vertical-align:-1px;}\"]);\nconst useValidationMessageIconStyles = /*#__PURE__*/__styles({\n error: {\n sj55zd: \"f1hcrxcs\"\n },\n warning: {\n sj55zd: \"f1k5f75o\"\n },\n success: {\n sj55zd: \"ffmvakt\"\n }\n}, {\n d: [\".f1hcrxcs{color:var(--colorPaletteRedForeground1);}\", \".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}\", \".ffmvakt{color:var(--colorPaletteGreenForeground1);}\"]\n});\n/**\n * Apply styling to the Field slots based on the state\n */\nexport const useFieldStyles_unstable = state => {\n const {\n validationState,\n size\n } = state;\n const horizontal = state.orientation === 'horizontal';\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(fieldClassNames.label, 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//# sourceMappingURL=useFieldStyles.styles.js.map"],"names":["fieldClassNames","useFieldStyles_unstable","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","__styles","base","mc9l5x","horizontal","Budl1dq","wkccdc","horizontalNoLabel","uwmqm3","d","useLabelStyles","vertical","z8tnut","Byoj8tv","jrapky","verticalLarge","t21cq0","Ijaq50","nk6f5a","horizontalSmall","horizontalLarge","useSecondaryTextBaseClassName","__resetStyles","useSecondaryTextStyles","error","sj55zd","withIcon","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","warning","success","state","validationState","size","orientation","rootStyles","className","mergeClasses","labelStyles","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"mappings":"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"}
@@ -9,11 +9,11 @@ function _export(target, all) {
9
9
  });
10
10
  }
11
11
  _export(exports, {
12
- getFieldControlProps: function() {
13
- return getFieldControlProps;
14
- },
15
12
  useFieldControlProps_unstable: function() {
16
13
  return useFieldControlProps_unstable;
14
+ },
15
+ getFieldControlProps: function() {
16
+ return getFieldControlProps;
17
17
  }
18
18
  });
19
19
  const _FieldContext = require("./FieldContext");
@@ -1 +1 @@
1
- {"version":3,"sources":["useFieldControlProps.js"],"sourcesContent":["import { useFieldContext_unstable } from './FieldContext';\nexport function useFieldControlProps_unstable(props, options) {\n return getFieldControlProps(useFieldContext_unstable(), props, options);\n}\n/**\n * @internal\n * Implementation of useFieldControlProps_unstable.\n * Split out so it can be used directly in renderField_unstable.\n */ export function getFieldControlProps(context, props, options) {\n if (!context) {\n return props;\n }\n // Create a copy of props so we don't modify the original\n props = {\n ...props\n };\n const { generatedControlId, hintId, labelFor, labelId, required, validationMessageId, validationState } = context;\n if (generatedControlId) {\n var _props;\n var _id;\n (_id = (_props = props).id) !== null && _id !== void 0 ? _id : _props.id = generatedControlId;\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 === null || options === void 0 ? void 0 : options.supportsLabelFor) || labelFor !== props.id)) {\n var _props1, _arialabelledby;\n var _;\n (_ = (_props1 = props)[_arialabelledby = 'aria-labelledby']) !== null && _ !== void 0 ? _ : _props1[_arialabelledby] = labelId;\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'] = [\n validationMessageId,\n hintId,\n props === null || props === void 0 ? void 0 : props['aria-describedby']\n ].filter(Boolean).join(' ');\n }\n if (validationState === 'error') {\n var _props2, _ariainvalid;\n var _1;\n (_1 = (_props2 = props)[_ariainvalid = 'aria-invalid']) !== null && _1 !== void 0 ? _1 : _props2[_ariainvalid] = true;\n }\n if (required) {\n if (options === null || options === void 0 ? void 0 : options.supportsRequired) {\n var _props3;\n var _required;\n (_required = (_props3 = props).required) !== null && _required !== void 0 ? _required : _props3.required = true;\n } else {\n var _props4, _ariarequired;\n var _2;\n (_2 = (_props4 = props)[_ariarequired = 'aria-required']) !== null && _2 !== void 0 ? _2 : _props4[_ariarequired] = true;\n }\n }\n // Include the size prop if this control supports it\n if (options === null || options === void 0 ? void 0 : options.supportsSize) {\n var _props5;\n var _size;\n (_size = (_props5 = props).size) !== null && _size !== void 0 ? _size : _props5.size = context.size;\n }\n return props;\n}\n"],"names":["getFieldControlProps","useFieldControlProps_unstable","props","options","useFieldContext_unstable","context","generatedControlId","hintId","labelFor","labelId","required","validationMessageId","validationState","_props","_id","id","supportsLabelFor","_props1","_arialabelledby","_","filter","Boolean","join","_props2","_ariainvalid","_1","supportsRequired","_props3","_required","_props4","_ariarequired","_2","supportsSize","_props5","_size","size"],"mappings":";;;;;;;;;;;IAQoBA,oBAAoB;eAApBA;;IAPJC,6BAA6B;eAA7BA;;;8BADyB;AAClC,SAASA,8BAA8BC,KAAK,EAAEC,OAAO;IACxD,OAAOH,qBAAqBI,IAAAA,sCAAwB,KAAIF,OAAOC;AACnE;AAKW,SAASH,qBAAqBK,OAAO,EAAEH,KAAK,EAAEC,OAAO;IAC5D,IAAI,CAACE,SAAS;QACV,OAAOH;IACX;IACA,yDAAyD;IACzDA,QAAQ;QACJ,GAAGA,KAAK;IACZ;IACA,MAAM,EAAEI,kBAAkB,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,mBAAmB,EAAEC,eAAe,EAAE,GAAGP;IAC1G,IAAIC,oBAAoB;QACpB,IAAIO;QACJ,IAAIC;QACHA,CAAAA,MAAM,AAACD,CAAAA,SAASX,KAAI,EAAGa,EAAE,AAAD,MAAO,QAAQD,QAAQ,KAAK,IAAIA,MAAMD,OAAOE,EAAE,GAAGT;IAC/E;IACA,4GAA4G;IAC5G,6GAA6G;IAC7G,IAAIG,WAAY,CAAA,CAAEN,CAAAA,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQa,gBAAgB,AAAD,KAAMR,aAAaN,MAAMa,EAAE,AAAD,GAAI;QACrH,IAAIE,SAASC;QACb,IAAIC;QACHA,CAAAA,IAAI,AAACF,CAAAA,UAAUf,KAAI,CAAE,CAACgB,kBAAkB,kBAAkB,AAAD,MAAO,QAAQC,MAAM,KAAK,IAAIA,IAAIF,OAAO,CAACC,gBAAgB,GAAGT;IAC3H;IACA,wEAAwE;IACxE,+DAA+D;IAC/D,yFAAyF;IACzF,IAAIE,uBAAuBJ,QAAQ;QAC/B,kFAAkF;QAClFL,KAAK,CAAC,mBAAmB,GAAG;YACxBS;YACAJ;YACAL,UAAU,QAAQA,UAAU,KAAK,IAAI,KAAK,IAAIA,KAAK,CAAC,mBAAmB;SAC1E,CAACkB,MAAM,CAACC,SAASC,IAAI,CAAC;IAC3B;IACA,IAAIV,oBAAoB,SAAS;QAC7B,IAAIW,SAASC;QACb,IAAIC;QACHA,CAAAA,KAAK,AAACF,CAAAA,UAAUrB,KAAI,CAAE,CAACsB,eAAe,eAAe,AAAD,MAAO,QAAQC,OAAO,KAAK,IAAIA,KAAKF,OAAO,CAACC,aAAa,GAAG;IACrH;IACA,IAAId,UAAU;QACV,IAAIP,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQuB,gBAAgB,EAAE;YAC5E,IAAIC;YACJ,IAAIC;YACHA,CAAAA,YAAY,AAACD,CAAAA,UAAUzB,KAAI,EAAGQ,QAAQ,AAAD,MAAO,QAAQkB,cAAc,KAAK,IAAIA,YAAYD,QAAQjB,QAAQ,GAAG;QAC/G,OAAO;YACH,IAAImB,SAASC;YACb,IAAIC;YACHA,CAAAA,KAAK,AAACF,CAAAA,UAAU3B,KAAI,CAAE,CAAC4B,gBAAgB,gBAAgB,AAAD,MAAO,QAAQC,OAAO,KAAK,IAAIA,KAAKF,OAAO,CAACC,cAAc,GAAG;QACxH;IACJ;IACA,oDAAoD;IACpD,IAAI3B,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQ6B,YAAY,EAAE;QACxE,IAAIC;QACJ,IAAIC;QACHA,CAAAA,QAAQ,AAACD,CAAAA,UAAU/B,KAAI,EAAGiC,IAAI,AAAD,MAAO,QAAQD,UAAU,KAAK,IAAIA,QAAQD,QAAQE,IAAI,GAAG9B,QAAQ8B,IAAI;IACvG;IACA,OAAOjC;AACX"}
1
+ {"version":3,"sources":["useFieldControlProps.js"],"sourcesContent":["import { useFieldContext_unstable } from './FieldContext';\nexport function useFieldControlProps_unstable(props, options) {\n return getFieldControlProps(useFieldContext_unstable(), props, options);\n}\n/**\n * @internal\n * Implementation of useFieldControlProps_unstable.\n * Split out so it can be used directly in renderField_unstable.\n */ export function getFieldControlProps(context, props, options) {\n if (!context) {\n return props;\n }\n // Create a copy of props so we don't modify the original\n props = {\n ...props\n };\n const { generatedControlId, hintId, labelFor, labelId, required, validationMessageId, validationState } = context;\n if (generatedControlId) {\n var _props;\n var _id;\n (_id = (_props = props).id) !== null && _id !== void 0 ? _id : _props.id = generatedControlId;\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 === null || options === void 0 ? void 0 : options.supportsLabelFor) || labelFor !== props.id)) {\n var _props1, _arialabelledby;\n var _;\n (_ = (_props1 = props)[_arialabelledby = 'aria-labelledby']) !== null && _ !== void 0 ? _ : _props1[_arialabelledby] = labelId;\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'] = [\n validationMessageId,\n hintId,\n props === null || props === void 0 ? void 0 : props['aria-describedby']\n ].filter(Boolean).join(' ');\n }\n if (validationState === 'error') {\n var _props2, _ariainvalid;\n var _1;\n (_1 = (_props2 = props)[_ariainvalid = 'aria-invalid']) !== null && _1 !== void 0 ? _1 : _props2[_ariainvalid] = true;\n }\n if (required) {\n if (options === null || options === void 0 ? void 0 : options.supportsRequired) {\n var _props3;\n var _required;\n (_required = (_props3 = props).required) !== null && _required !== void 0 ? _required : _props3.required = true;\n } else {\n var _props4, _ariarequired;\n var _2;\n (_2 = (_props4 = props)[_ariarequired = 'aria-required']) !== null && _2 !== void 0 ? _2 : _props4[_ariarequired] = true;\n }\n }\n // Include the size prop if this control supports it\n if (options === null || options === void 0 ? void 0 : options.supportsSize) {\n var _props5;\n var _size;\n (_size = (_props5 = props).size) !== null && _size !== void 0 ? _size : _props5.size = context.size;\n }\n return props;\n}\n"],"names":["useFieldControlProps_unstable","getFieldControlProps","props","options","useFieldContext_unstable","context","generatedControlId","hintId","labelFor","labelId","required","validationMessageId","validationState","_props","_id","id","supportsLabelFor","_props1","_arialabelledby","_","filter","Boolean","join","_props2","_ariainvalid","_1","supportsRequired","_props3","_required","_props4","_ariarequired","_2","supportsSize","_props5","_size","size"],"mappings":";;;;;;;;;;;IACgBA,6BAA6B;eAA7BA;;IAOIC,oBAAoB;eAApBA;;;8BARqB;AAClC,SAASD,8BAA8BE,KAAK,EAAEC,OAAO;IACxD,OAAOF,qBAAqBG,IAAAA,sCAAwB,KAAIF,OAAOC;AACnE;AAKW,SAASF,qBAAqBI,OAAO,EAAEH,KAAK,EAAEC,OAAO;IAC5D,IAAI,CAACE,SAAS;QACV,OAAOH;IACX;IACA,yDAAyD;IACzDA,QAAQ;QACJ,GAAGA,KAAK;IACZ;IACA,MAAM,EAAEI,kBAAkB,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,mBAAmB,EAAEC,eAAe,EAAE,GAAGP;IAC1G,IAAIC,oBAAoB;QACpB,IAAIO;QACJ,IAAIC;QACHA,CAAAA,MAAM,AAACD,CAAAA,SAASX,KAAI,EAAGa,EAAE,AAAD,MAAO,QAAQD,QAAQ,KAAK,IAAIA,MAAMD,OAAOE,EAAE,GAAGT;IAC/E;IACA,4GAA4G;IAC5G,6GAA6G;IAC7G,IAAIG,WAAY,CAAA,CAAEN,CAAAA,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQa,gBAAgB,AAAD,KAAMR,aAAaN,MAAMa,EAAE,AAAD,GAAI;QACrH,IAAIE,SAASC;QACb,IAAIC;QACHA,CAAAA,IAAI,AAACF,CAAAA,UAAUf,KAAI,CAAE,CAACgB,kBAAkB,kBAAkB,AAAD,MAAO,QAAQC,MAAM,KAAK,IAAIA,IAAIF,OAAO,CAACC,gBAAgB,GAAGT;IAC3H;IACA,wEAAwE;IACxE,+DAA+D;IAC/D,yFAAyF;IACzF,IAAIE,uBAAuBJ,QAAQ;QAC/B,kFAAkF;QAClFL,KAAK,CAAC,mBAAmB,GAAG;YACxBS;YACAJ;YACAL,UAAU,QAAQA,UAAU,KAAK,IAAI,KAAK,IAAIA,KAAK,CAAC,mBAAmB;SAC1E,CAACkB,MAAM,CAACC,SAASC,IAAI,CAAC;IAC3B;IACA,IAAIV,oBAAoB,SAAS;QAC7B,IAAIW,SAASC;QACb,IAAIC;QACHA,CAAAA,KAAK,AAACF,CAAAA,UAAUrB,KAAI,CAAE,CAACsB,eAAe,eAAe,AAAD,MAAO,QAAQC,OAAO,KAAK,IAAIA,KAAKF,OAAO,CAACC,aAAa,GAAG;IACrH;IACA,IAAId,UAAU;QACV,IAAIP,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQuB,gBAAgB,EAAE;YAC5E,IAAIC;YACJ,IAAIC;YACHA,CAAAA,YAAY,AAACD,CAAAA,UAAUzB,KAAI,EAAGQ,QAAQ,AAAD,MAAO,QAAQkB,cAAc,KAAK,IAAIA,YAAYD,QAAQjB,QAAQ,GAAG;QAC/G,OAAO;YACH,IAAImB,SAASC;YACb,IAAIC;YACHA,CAAAA,KAAK,AAACF,CAAAA,UAAU3B,KAAI,CAAE,CAAC4B,gBAAgB,gBAAgB,AAAD,MAAO,QAAQC,OAAO,KAAK,IAAIA,KAAKF,OAAO,CAACC,cAAc,GAAG;QACxH;IACJ;IACA,oDAAoD;IACpD,IAAI3B,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQ6B,YAAY,EAAE;QACxE,IAAIC;QACJ,IAAIC;QACHA,CAAAA,QAAQ,AAACD,CAAAA,UAAU/B,KAAI,EAAGiC,IAAI,AAAD,MAAO,QAAQD,UAAU,KAAK,IAAIA,QAAQD,QAAQE,IAAI,GAAG9B,QAAQ8B,IAAI;IACvG;IACA,OAAOjC;AACX"}
@@ -12,29 +12,29 @@ _export(exports, {
12
12
  Field: function() {
13
13
  return _Field.Field;
14
14
  },
15
- FieldContextProvider: function() {
16
- return _index.FieldContextProvider;
17
- },
18
15
  fieldClassNames: function() {
19
16
  return _Field.fieldClassNames;
20
17
  },
21
18
  renderField_unstable: function() {
22
19
  return _Field.renderField_unstable;
23
20
  },
24
- useFieldContextValues_unstable: function() {
25
- return _index.useFieldContextValues_unstable;
21
+ useFieldStyles_unstable: function() {
22
+ return _Field.useFieldStyles_unstable;
23
+ },
24
+ useField_unstable: function() {
25
+ return _Field.useField_unstable;
26
+ },
27
+ FieldContextProvider: function() {
28
+ return _index.FieldContextProvider;
26
29
  },
27
30
  useFieldContext_unstable: function() {
28
31
  return _index.useFieldContext_unstable;
29
32
  },
33
+ useFieldContextValues_unstable: function() {
34
+ return _index.useFieldContextValues_unstable;
35
+ },
30
36
  useFieldControlProps_unstable: function() {
31
37
  return _index.useFieldControlProps_unstable;
32
- },
33
- useFieldStyles_unstable: function() {
34
- return _Field.useFieldStyles_unstable;
35
- },
36
- useField_unstable: function() {
37
- return _Field.useField_unstable;
38
38
  }
39
39
  });
40
40
  const _Field = require("./Field");
@@ -1 +1 @@
1
- {"version":3,"sources":["index.js"],"sourcesContent":["export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field';\nexport { FieldContextProvider, useFieldContext_unstable, useFieldContextValues_unstable, useFieldControlProps_unstable } from './contexts/index';\n"],"names":["Field","FieldContextProvider","fieldClassNames","renderField_unstable","useFieldContextValues_unstable","useFieldContext_unstable","useFieldControlProps_unstable","useFieldStyles_unstable","useField_unstable"],"mappings":";;;;;;;;;;;IAASA,KAAK;eAALA,YAAK;;IACLC,oBAAoB;eAApBA,2BAAoB;;IADbC,eAAe;eAAfA,sBAAe;;IAAEC,oBAAoB;eAApBA,2BAAoB;;IACIC,8BAA8B;eAA9BA,qCAA8B;;IAAxDC,wBAAwB;eAAxBA,+BAAwB;;IAAkCC,6BAA6B;eAA7BA,oCAA6B;;IAD/DC,uBAAuB;eAAvBA,8BAAuB;;IAAEC,iBAAiB;eAAjBA,wBAAiB;;;uBAAQ;uBACqB"}
1
+ {"version":3,"sources":["index.js"],"sourcesContent":["export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field';\nexport { FieldContextProvider, useFieldContext_unstable, useFieldContextValues_unstable, useFieldControlProps_unstable } from './contexts/index';\n"],"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","FieldContextProvider","useFieldContext_unstable","useFieldContextValues_unstable","useFieldControlProps_unstable"],"mappings":";;;;;;;;;;;IAASA,KAAK;eAALA,YAAK;;IAAEC,eAAe;eAAfA,sBAAe;;IAAEC,oBAAoB;eAApBA,2BAAoB;;IAAEC,uBAAuB;eAAvBA,8BAAuB;;IAAEC,iBAAiB;eAAjBA,wBAAiB;;IACxFC,oBAAoB;eAApBA,2BAAoB;;IAAEC,wBAAwB;eAAxBA,+BAAwB;;IAAEC,8BAA8B;eAA9BA,qCAA8B;;IAAEC,6BAA6B;eAA7BA,oCAA6B;;;uBADb;uBACqB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-field",
3
- "version": "9.1.57",
3
+ "version": "9.1.59",
4
4
  "description": "Fluent UI Field components",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -33,12 +33,12 @@
33
33
  "@fluentui/scripts-tasks": "*"
34
34
  },
35
35
  "dependencies": {
36
- "@fluentui/react-context-selector": "^9.1.55",
36
+ "@fluentui/react-context-selector": "^9.1.56",
37
37
  "@fluentui/react-icons": "^2.0.224",
38
- "@fluentui/react-jsx-runtime": "^9.0.33",
39
- "@fluentui/react-label": "^9.1.65",
40
- "@fluentui/react-theme": "^9.1.18",
41
- "@fluentui/react-utilities": "^9.18.4",
38
+ "@fluentui/react-jsx-runtime": "^9.0.34",
39
+ "@fluentui/react-label": "^9.1.66",
40
+ "@fluentui/react-theme": "^9.1.19",
41
+ "@fluentui/react-utilities": "^9.18.5",
42
42
  "@griffel/react": "^1.5.14",
43
43
  "@swc/helpers": "^0.5.1"
44
44
  },