@fluentui/react-label 9.4.0 → 9.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +22 -2
- package/dist/index.d.ts +1 -1
- package/lib/components/Label/useLabel.js +0 -1
- package/lib/components/Label/useLabel.js.map +1 -1
- package/lib/components/Label/useLabelStyles.styles.js +2 -0
- package/lib/components/Label/useLabelStyles.styles.js.map +1 -1
- package/lib/components/Label/useLabelStyles.styles.raw.js +2 -0
- package/lib/components/Label/useLabelStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/Label/useLabel.js +0 -2
- package/lib-commonjs/components/Label/useLabel.js.map +1 -1
- package/lib-commonjs/components/Label/useLabelStyles.styles.js +2 -0
- package/lib-commonjs/components/Label/useLabelStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Label/useLabelStyles.styles.raw.js +2 -0
- package/lib-commonjs/components/Label/useLabelStyles.styles.raw.js.map +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,32 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-label
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 26 May 2026 09:33:40 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.4.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.4.2)
|
|
8
|
+
|
|
9
|
+
Tue, 26 May 2026 09:33:40 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.4.1..@fluentui/react-label_v9.4.2)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
15
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
16
|
+
|
|
17
|
+
## [9.4.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.4.1)
|
|
18
|
+
|
|
19
|
+
Thu, 23 Apr 2026 14:21:12 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.4.0..@fluentui/react-label_v9.4.1)
|
|
21
|
+
|
|
22
|
+
### Patches
|
|
23
|
+
|
|
24
|
+
- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
25
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
26
|
+
|
|
7
27
|
## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.4.0)
|
|
8
28
|
|
|
9
|
-
Wed, 01 Apr 2026 15:
|
|
29
|
+
Wed, 01 Apr 2026 15:52:40 GMT
|
|
10
30
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.3.15..@fluentui/react-label_v9.4.0)
|
|
11
31
|
|
|
12
32
|
### Minor changes
|
package/dist/index.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import type { ComponentProps } from '@fluentui/react-utilities';
|
|
|
2
2
|
import type { ComponentState } from '@fluentui/react-utilities';
|
|
3
3
|
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
4
4
|
import type { JSXElement } from '@fluentui/react-utilities';
|
|
5
|
-
import * as React_2 from 'react';
|
|
5
|
+
import type * as React_2 from 'react';
|
|
6
6
|
import type { Slot } from '@fluentui/react-utilities';
|
|
7
7
|
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
8
8
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Label/useLabel.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { LabelBaseProps, LabelBaseState, LabelProps, LabelState } from './Label.types';\n\n/**\n * Create the state required to render Label.\n *\n * The returned state can be modified with hooks such as useLabelStyles_unstable,\n * before being passed to renderLabel_unstable.\n *\n * @param props - props from this instance of Label\n * @param ref - reference to root HTMLElement of Label\n */\nexport const useLabel_unstable = (props: LabelProps, ref: React.Ref<HTMLElement>): LabelState => {\n const { weight = 'regular', size = 'medium', ...baseProps } = props;\n const state = useLabelBase_unstable(baseProps, ref as React.Ref<HTMLLabelElement>);\n\n return {\n weight,\n size,\n ...state,\n };\n};\n\n/**\n * Create the base state required to render Label, without design-specific props (size, weight).\n *\n * @param props - props from this instance of Label\n * @param ref - reference to root HTMLElement of Label\n */\nexport const useLabelBase_unstable = (props: LabelBaseProps, ref: React.Ref<HTMLLabelElement>): LabelBaseState => {\n const { disabled = false, required = false, ...rest } = props;\n return {\n disabled,\n required: slot.optional(required === true ? '*' : required || undefined, {\n defaultProps: { 'aria-hidden': 'true' },\n elementType: 'span',\n }),\n components: { root: 'label', required: 'span' },\n root: slot.always(\n getIntrinsicElementProps('label', {\n ref: ref as React.Ref<HTMLLabelElement>,\n ...rest,\n }),\n { elementType: 'label' },\n ),\n };\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/Label/useLabel.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { LabelBaseProps, LabelBaseState, LabelProps, LabelState } from './Label.types';\n\n/**\n * Create the state required to render Label.\n *\n * The returned state can be modified with hooks such as useLabelStyles_unstable,\n * before being passed to renderLabel_unstable.\n *\n * @param props - props from this instance of Label\n * @param ref - reference to root HTMLElement of Label\n */\nexport const useLabel_unstable = (props: LabelProps, ref: React.Ref<HTMLElement>): LabelState => {\n const { weight = 'regular', size = 'medium', ...baseProps } = props;\n const state = useLabelBase_unstable(baseProps, ref as React.Ref<HTMLLabelElement>);\n\n return {\n weight,\n size,\n ...state,\n };\n};\n\n/**\n * Create the base state required to render Label, without design-specific props (size, weight).\n *\n * @param props - props from this instance of Label\n * @param ref - reference to root HTMLElement of Label\n */\nexport const useLabelBase_unstable = (props: LabelBaseProps, ref: React.Ref<HTMLLabelElement>): LabelBaseState => {\n const { disabled = false, required = false, ...rest } = props;\n return {\n disabled,\n required: slot.optional(required === true ? '*' : required || undefined, {\n defaultProps: { 'aria-hidden': 'true' },\n elementType: 'span',\n }),\n components: { root: 'label', required: 'span' },\n root: slot.always(\n getIntrinsicElementProps('label', {\n ref: ref as React.Ref<HTMLLabelElement>,\n ...rest,\n }),\n { elementType: 'label' },\n ),\n };\n};\n"],"names":["getIntrinsicElementProps","slot","useLabel_unstable","props","ref","weight","size","baseProps","state","useLabelBase_unstable","disabled","required","rest","optional","undefined","defaultProps","elementType","components","root","always"],"mappings":"AAAA;AAGA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC;IACnD,MAAM,EAAEC,SAAS,SAAS,EAAEC,OAAO,QAAQ,EAAE,GAAGC,WAAW,GAAGJ;IAC9D,MAAMK,QAAQC,sBAAsBF,WAAWH;IAE/C,OAAO;QACLC;QACAC;QACA,GAAGE,KAAK;IACV;AACF,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMC,wBAAwB,CAACN,OAAuBC;IAC3D,MAAM,EAAEM,WAAW,KAAK,EAAEC,WAAW,KAAK,EAAE,GAAGC,MAAM,GAAGT;IACxD,OAAO;QACLO;QACAC,UAAUV,KAAKY,QAAQ,CAACF,aAAa,OAAO,MAAMA,YAAYG,WAAW;YACvEC,cAAc;gBAAE,eAAe;YAAO;YACtCC,aAAa;QACf;QACAC,YAAY;YAAEC,MAAM;YAASP,UAAU;QAAO;QAC9CO,MAAMjB,KAAKkB,MAAM,CACfnB,yBAAyB,SAAS;YAChCI,KAAKA;YACL,GAAGQ,IAAI;QACT,IACA;YAAEI,aAAa;QAAQ;IAE3B;AACF,EAAE"}
|
|
@@ -51,8 +51,10 @@ export const useLabelStyles_unstable = state => {
|
|
|
51
51
|
'use no memo';
|
|
52
52
|
|
|
53
53
|
const styles = useStyles();
|
|
54
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
54
55
|
state.root.className = mergeClasses(labelClassNames.root, styles.root, state.disabled && styles.disabled, styles[state.size], state.weight === 'semibold' && styles.semibold, state.root.className);
|
|
55
56
|
if (state.required) {
|
|
57
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
56
58
|
state.required.className = mergeClasses(labelClassNames.required, styles.required, state.disabled && styles.disabled, state.required.className);
|
|
57
59
|
}
|
|
58
60
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","tokens","labelClassNames","root","required","useStyles","Bahqtrf","sj55zd","disabled","B7iucu3","uwmqm3","small","Be2twd7","Bg96gwp","medium","large","Bhrd7zp","semibold","d","m","useLabelStyles_unstable","state","styles","className","size","weight"],"sources":["useLabelStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const labelClassNames = {\n root: 'fui-Label',\n required: 'fui-Label__required'\n};\n/**\n * Styles for the label\n */ const useStyles = makeStyles({\n root: {\n fontFamily: tokens.fontFamilyBase,\n color: tokens.colorNeutralForeground1\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText'\n }\n },\n required: {\n color: tokens.colorPaletteRedForeground3,\n paddingLeft: tokens.spacingHorizontalXS\n },\n small: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200\n },\n medium: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300\n },\n large: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n fontWeight: tokens.fontWeightSemibold\n },\n semibold: {\n fontWeight: tokens.fontWeightSemibold\n }\n});\n/**\n * Apply styling to the Label slots based on the state\n */ export const useLabelStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(labelClassNames.root, styles.root, state.disabled && styles.disabled, styles[state.size], state.weight === 'semibold' && styles.semibold, state.root.className);\n if (state.required) {\n state.required.className = mergeClasses(labelClassNames.required, styles.required, state.disabled && styles.disabled, state.required.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,eAAe,GAAG;EAC3BC,IAAI,EAAE,WAAW;EACjBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,QAAA;EAAAI,IAAA;IAAAG,OAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAD,MAAA;IAAAE,OAAA;EAAA;EAAAL,QAAA;IAAAG,MAAA;IAAAG,MAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAF,OAAA;IAAAC,OAAA;EAAA;EAAAE,KAAA;IAAAH,OAAA;IAAAC,OAAA;IAAAG,OAAA;EAAA;EAAAC,QAAA;IAAAD,OAAA;EAAA;AAAA;EAAAE,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CA+BrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,uBAAuB,GAAIC,KAAK,IAAG;EAChD,aAAa;;EACb,MAAMC,MAAM,GAAGjB,SAAS,CAAC,CAAC;
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","tokens","labelClassNames","root","required","useStyles","Bahqtrf","sj55zd","disabled","B7iucu3","uwmqm3","small","Be2twd7","Bg96gwp","medium","large","Bhrd7zp","semibold","d","m","useLabelStyles_unstable","state","styles","className","size","weight"],"sources":["useLabelStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const labelClassNames = {\n root: 'fui-Label',\n required: 'fui-Label__required'\n};\n/**\n * Styles for the label\n */ const useStyles = makeStyles({\n root: {\n fontFamily: tokens.fontFamilyBase,\n color: tokens.colorNeutralForeground1\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText'\n }\n },\n required: {\n color: tokens.colorPaletteRedForeground3,\n paddingLeft: tokens.spacingHorizontalXS\n },\n small: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200\n },\n medium: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300\n },\n large: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n fontWeight: tokens.fontWeightSemibold\n },\n semibold: {\n fontWeight: tokens.fontWeightSemibold\n }\n});\n/**\n * Apply styling to the Label slots based on the state\n */ export const useLabelStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(labelClassNames.root, styles.root, state.disabled && styles.disabled, styles[state.size], state.weight === 'semibold' && styles.semibold, state.root.className);\n if (state.required) {\n // eslint-disable-next-line react-hooks/immutability\n state.required.className = mergeClasses(labelClassNames.required, styles.required, state.disabled && styles.disabled, state.required.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,eAAe,GAAG;EAC3BC,IAAI,EAAE,WAAW;EACjBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,QAAA;EAAAI,IAAA;IAAAG,OAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAD,MAAA;IAAAE,OAAA;EAAA;EAAAL,QAAA;IAAAG,MAAA;IAAAG,MAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAF,OAAA;IAAAC,OAAA;EAAA;EAAAE,KAAA;IAAAH,OAAA;IAAAC,OAAA;IAAAG,OAAA;EAAA;EAAAC,QAAA;IAAAD,OAAA;EAAA;AAAA;EAAAE,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CA+BrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,uBAAuB,GAAIC,KAAK,IAAG;EAChD,aAAa;;EACb,MAAMC,MAAM,GAAGjB,SAAS,CAAC,CAAC;EAC1B;EACAgB,KAAK,CAAClB,IAAI,CAACoB,SAAS,GAAGvB,YAAY,CAACE,eAAe,CAACC,IAAI,EAAEmB,MAAM,CAACnB,IAAI,EAAEkB,KAAK,CAACb,QAAQ,IAAIc,MAAM,CAACd,QAAQ,EAAEc,MAAM,CAACD,KAAK,CAACG,IAAI,CAAC,EAAEH,KAAK,CAACI,MAAM,KAAK,UAAU,IAAIH,MAAM,CAACL,QAAQ,EAAEI,KAAK,CAAClB,IAAI,CAACoB,SAAS,CAAC;EACnM,IAAIF,KAAK,CAACjB,QAAQ,EAAE;IAChB;IACAiB,KAAK,CAACjB,QAAQ,CAACmB,SAAS,GAAGvB,YAAY,CAACE,eAAe,CAACE,QAAQ,EAAEkB,MAAM,CAAClB,QAAQ,EAAEiB,KAAK,CAACb,QAAQ,IAAIc,MAAM,CAACd,QAAQ,EAAEa,KAAK,CAACjB,QAAQ,CAACmB,SAAS,CAAC;EACnJ;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -44,8 +44,10 @@ export const labelClassNames = {
|
|
|
44
44
|
*/ export const useLabelStyles_unstable = (state)=>{
|
|
45
45
|
'use no memo';
|
|
46
46
|
const styles = useStyles();
|
|
47
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
47
48
|
state.root.className = mergeClasses(labelClassNames.root, styles.root, state.disabled && styles.disabled, styles[state.size], state.weight === 'semibold' && styles.semibold, state.root.className);
|
|
48
49
|
if (state.required) {
|
|
50
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
49
51
|
state.required.className = mergeClasses(labelClassNames.required, styles.required, state.disabled && styles.disabled, state.required.className);
|
|
50
52
|
}
|
|
51
53
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Label/useLabelStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { LabelSlots, LabelState } from './Label.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const labelClassNames: SlotClassNames<LabelSlots> = {\n root: 'fui-Label',\n required: 'fui-Label__required',\n};\n\n/**\n * Styles for the label\n */\nconst useStyles = makeStyles({\n root: {\n fontFamily: tokens.fontFamilyBase,\n color: tokens.colorNeutralForeground1,\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n\n required: {\n color: tokens.colorPaletteRedForeground3,\n paddingLeft: tokens.spacingHorizontalXS,\n },\n\n small: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n },\n\n medium: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n\n large: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n fontWeight: tokens.fontWeightSemibold,\n },\n\n semibold: {\n fontWeight: tokens.fontWeightSemibold,\n },\n});\n\n/**\n * Apply styling to the Label slots based on the state\n */\nexport const useLabelStyles_unstable = (state: LabelState): LabelState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(\n labelClassNames.root,\n styles.root,\n state.disabled && styles.disabled,\n styles[state.size],\n state.weight === 'semibold' && styles.semibold,\n state.root.className,\n );\n\n if (state.required) {\n state.required.className = mergeClasses(\n labelClassNames.required,\n styles.required,\n state.disabled && styles.disabled,\n state.required.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","labelClassNames","root","required","useStyles","fontFamily","fontFamilyBase","color","colorNeutralForeground1","disabled","colorNeutralForegroundDisabled","colorPaletteRedForeground3","paddingLeft","spacingHorizontalXS","small","fontSize","fontSizeBase200","lineHeight","lineHeightBase200","medium","fontSizeBase300","lineHeightBase300","large","fontSizeBase400","lineHeightBase400","fontWeight","fontWeightSemibold","semibold","useLabelStyles_unstable","state","styles","className","size","weight"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,kBAA8C;IACzDC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYN,WAAW;IAC3BI,MAAM;QACJG,YAAYL,OAAOM,cAAc;QACjCC,OAAOP,OAAOQ,uBAAuB;IACvC;IAEAC,UAAU;QACRF,OAAOP,OAAOU,8BAA8B;QAC5C,kCAAkC;YAChCH,OAAO;QACT;IACF;IAEAJ,UAAU;QACRI,OAAOP,OAAOW,0BAA0B;QACxCC,aAAaZ,OAAOa,mBAAmB;IACzC;IAEAC,OAAO;QACLC,UAAUf,OAAOgB,eAAe;QAChCC,YAAYjB,OAAOkB,iBAAiB;IACtC;IAEAC,QAAQ;QACNJ,UAAUf,OAAOoB,eAAe;QAChCH,YAAYjB,OAAOqB,iBAAiB;IACtC;IAEAC,OAAO;QACLP,UAAUf,OAAOuB,eAAe;QAChCN,YAAYjB,OAAOwB,iBAAiB;QACpCC,YAAYzB,OAAO0B,kBAAkB;IACvC;IAEAC,UAAU;QACRF,YAAYzB,OAAO0B,kBAAkB;IACvC;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,0BAA0B,CAACC;IACtC;IAEA,MAAMC,SAAS1B;
|
|
1
|
+
{"version":3,"sources":["../src/components/Label/useLabelStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { LabelSlots, LabelState } from './Label.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const labelClassNames: SlotClassNames<LabelSlots> = {\n root: 'fui-Label',\n required: 'fui-Label__required',\n};\n\n/**\n * Styles for the label\n */\nconst useStyles = makeStyles({\n root: {\n fontFamily: tokens.fontFamilyBase,\n color: tokens.colorNeutralForeground1,\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n\n required: {\n color: tokens.colorPaletteRedForeground3,\n paddingLeft: tokens.spacingHorizontalXS,\n },\n\n small: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n },\n\n medium: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n\n large: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n fontWeight: tokens.fontWeightSemibold,\n },\n\n semibold: {\n fontWeight: tokens.fontWeightSemibold,\n },\n});\n\n/**\n * Apply styling to the Label slots based on the state\n */\nexport const useLabelStyles_unstable = (state: LabelState): LabelState => {\n 'use no memo';\n\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n labelClassNames.root,\n styles.root,\n state.disabled && styles.disabled,\n styles[state.size],\n state.weight === 'semibold' && styles.semibold,\n state.root.className,\n );\n\n if (state.required) {\n // eslint-disable-next-line react-hooks/immutability\n state.required.className = mergeClasses(\n labelClassNames.required,\n styles.required,\n state.disabled && styles.disabled,\n state.required.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","labelClassNames","root","required","useStyles","fontFamily","fontFamilyBase","color","colorNeutralForeground1","disabled","colorNeutralForegroundDisabled","colorPaletteRedForeground3","paddingLeft","spacingHorizontalXS","small","fontSize","fontSizeBase200","lineHeight","lineHeightBase200","medium","fontSizeBase300","lineHeightBase300","large","fontSizeBase400","lineHeightBase400","fontWeight","fontWeightSemibold","semibold","useLabelStyles_unstable","state","styles","className","size","weight"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,kBAA8C;IACzDC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYN,WAAW;IAC3BI,MAAM;QACJG,YAAYL,OAAOM,cAAc;QACjCC,OAAOP,OAAOQ,uBAAuB;IACvC;IAEAC,UAAU;QACRF,OAAOP,OAAOU,8BAA8B;QAC5C,kCAAkC;YAChCH,OAAO;QACT;IACF;IAEAJ,UAAU;QACRI,OAAOP,OAAOW,0BAA0B;QACxCC,aAAaZ,OAAOa,mBAAmB;IACzC;IAEAC,OAAO;QACLC,UAAUf,OAAOgB,eAAe;QAChCC,YAAYjB,OAAOkB,iBAAiB;IACtC;IAEAC,QAAQ;QACNJ,UAAUf,OAAOoB,eAAe;QAChCH,YAAYjB,OAAOqB,iBAAiB;IACtC;IAEAC,OAAO;QACLP,UAAUf,OAAOuB,eAAe;QAChCN,YAAYjB,OAAOwB,iBAAiB;QACpCC,YAAYzB,OAAO0B,kBAAkB;IACvC;IAEAC,UAAU;QACRF,YAAYzB,OAAO0B,kBAAkB;IACvC;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,0BAA0B,CAACC;IACtC;IAEA,MAAMC,SAAS1B;IACf,oDAAoD;IACpDyB,MAAM3B,IAAI,CAAC6B,SAAS,GAAGhC,aACrBE,gBAAgBC,IAAI,EACpB4B,OAAO5B,IAAI,EACX2B,MAAMpB,QAAQ,IAAIqB,OAAOrB,QAAQ,EACjCqB,MAAM,CAACD,MAAMG,IAAI,CAAC,EAClBH,MAAMI,MAAM,KAAK,cAAcH,OAAOH,QAAQ,EAC9CE,MAAM3B,IAAI,CAAC6B,SAAS;IAGtB,IAAIF,MAAM1B,QAAQ,EAAE;QAClB,oDAAoD;QACpD0B,MAAM1B,QAAQ,CAAC4B,SAAS,GAAGhC,aACzBE,gBAAgBE,QAAQ,EACxB2B,OAAO3B,QAAQ,EACf0B,MAAMpB,QAAQ,IAAIqB,OAAOrB,QAAQ,EACjCoB,MAAM1B,QAAQ,CAAC4B,SAAS;IAE5B;IAEA,OAAOF;AACT,EAAE"}
|
|
@@ -17,8 +17,6 @@ _export(exports, {
|
|
|
17
17
|
return useLabel_unstable;
|
|
18
18
|
}
|
|
19
19
|
});
|
|
20
|
-
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
21
|
-
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
22
20
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
23
21
|
const useLabel_unstable = (props, ref)=>{
|
|
24
22
|
const { weight = 'regular', size = 'medium', ...baseProps } = props;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Label/useLabel.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { LabelBaseProps, LabelBaseState, LabelProps, LabelState } from './Label.types';\n\n/**\n * Create the state required to render Label.\n *\n * The returned state can be modified with hooks such as useLabelStyles_unstable,\n * before being passed to renderLabel_unstable.\n *\n * @param props - props from this instance of Label\n * @param ref - reference to root HTMLElement of Label\n */\nexport const useLabel_unstable = (props: LabelProps, ref: React.Ref<HTMLElement>): LabelState => {\n const { weight = 'regular', size = 'medium', ...baseProps } = props;\n const state = useLabelBase_unstable(baseProps, ref as React.Ref<HTMLLabelElement>);\n\n return {\n weight,\n size,\n ...state,\n };\n};\n\n/**\n * Create the base state required to render Label, without design-specific props (size, weight).\n *\n * @param props - props from this instance of Label\n * @param ref - reference to root HTMLElement of Label\n */\nexport const useLabelBase_unstable = (props: LabelBaseProps, ref: React.Ref<HTMLLabelElement>): LabelBaseState => {\n const { disabled = false, required = false, ...rest } = props;\n return {\n disabled,\n required: slot.optional(required === true ? '*' : required || undefined, {\n defaultProps: { 'aria-hidden': 'true' },\n elementType: 'span',\n }),\n components: { root: 'label', required: 'span' },\n root: slot.always(\n getIntrinsicElementProps('label', {\n ref: ref as React.Ref<HTMLLabelElement>,\n ...rest,\n }),\n { elementType: 'label' },\n ),\n };\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/components/Label/useLabel.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { LabelBaseProps, LabelBaseState, LabelProps, LabelState } from './Label.types';\n\n/**\n * Create the state required to render Label.\n *\n * The returned state can be modified with hooks such as useLabelStyles_unstable,\n * before being passed to renderLabel_unstable.\n *\n * @param props - props from this instance of Label\n * @param ref - reference to root HTMLElement of Label\n */\nexport const useLabel_unstable = (props: LabelProps, ref: React.Ref<HTMLElement>): LabelState => {\n const { weight = 'regular', size = 'medium', ...baseProps } = props;\n const state = useLabelBase_unstable(baseProps, ref as React.Ref<HTMLLabelElement>);\n\n return {\n weight,\n size,\n ...state,\n };\n};\n\n/**\n * Create the base state required to render Label, without design-specific props (size, weight).\n *\n * @param props - props from this instance of Label\n * @param ref - reference to root HTMLElement of Label\n */\nexport const useLabelBase_unstable = (props: LabelBaseProps, ref: React.Ref<HTMLLabelElement>): LabelBaseState => {\n const { disabled = false, required = false, ...rest } = props;\n return {\n disabled,\n required: slot.optional(required === true ? '*' : required || undefined, {\n defaultProps: { 'aria-hidden': 'true' },\n elementType: 'span',\n }),\n components: { root: 'label', required: 'span' },\n root: slot.always(\n getIntrinsicElementProps('label', {\n ref: ref as React.Ref<HTMLLabelElement>,\n ...rest,\n }),\n { elementType: 'label' },\n ),\n };\n};\n"],"names":["getIntrinsicElementProps","slot","useLabel_unstable","props","ref","weight","size","baseProps","state","useLabelBase_unstable","disabled","required","rest","optional","undefined","defaultProps","elementType","components","root","always"],"mappings":"AAAA;;;;;;;;;;;;yBAgCaS;eAAAA;;qBAjBAP;;;;gCAZkC,4BAA4B;AAYpE,MAAMA,oBAAoB,CAACC,OAAmBC;IACnD,MAAM,EAAEC,SAAS,SAAS,EAAEC,OAAO,QAAQ,EAAE,GAAGC,WAAW,GAAGJ;IAC9D,MAAMK,QAAQC,sBAAsBF,WAAWH;IAE/C,OAAO;QACLC;QACAC;QACA,GAAGE,KAAK;IACV;AACF,EAAE;AAQK,8BAA8B,CAACL,OAAuBC;IAC3D,MAAM,EAAEM,WAAW,KAAK,EAAEC,WAAW,KAAK,EAAE,GAAGC,MAAM,GAAGT;IACxD,OAAO;QACLO;QACAC,UAAUV,oBAAAA,CAAKY,QAAQ,CAACF,aAAa,OAAO,MAAMA,YAAYG,WAAW;YACvEC,cAAc;gBAAE,eAAe;YAAO;YACtCC,aAAa;QACf;QACAC,YAAY;YAAEC,MAAM;YAASP,UAAU;QAAO;QAC9CO,MAAMjB,oBAAAA,CAAKkB,MAAM,KACfnB,wCAAAA,EAAyB,SAAS;YAChCI,KAAKA;YACL,GAAGQ,IAAI;QACT,IACA;YAAEI,aAAa;QAAQ;IAE3B;AACF,EAAE"}
|
|
@@ -84,8 +84,10 @@ const labelClassNames = {
|
|
|
84
84
|
const useLabelStyles_unstable = (state)=>{
|
|
85
85
|
'use no memo';
|
|
86
86
|
const styles = useStyles();
|
|
87
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
87
88
|
state.root.className = (0, _react.mergeClasses)(labelClassNames.root, styles.root, state.disabled && styles.disabled, styles[state.size], state.weight === 'semibold' && styles.semibold, state.root.className);
|
|
88
89
|
if (state.required) {
|
|
90
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
89
91
|
state.required.className = (0, _react.mergeClasses)(labelClassNames.required, styles.required, state.disabled && styles.disabled, state.required.className);
|
|
90
92
|
}
|
|
91
93
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useLabelStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const labelClassNames = {\n root: 'fui-Label',\n required: 'fui-Label__required'\n};\n/**\n * Styles for the label\n */ const useStyles = makeStyles({\n root: {\n fontFamily: tokens.fontFamilyBase,\n color: tokens.colorNeutralForeground1\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText'\n }\n },\n required: {\n color: tokens.colorPaletteRedForeground3,\n paddingLeft: tokens.spacingHorizontalXS\n },\n small: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200\n },\n medium: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300\n },\n large: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n fontWeight: tokens.fontWeightSemibold\n },\n semibold: {\n fontWeight: tokens.fontWeightSemibold\n }\n});\n/**\n * Apply styling to the Label slots based on the state\n */ export const useLabelStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(labelClassNames.root, styles.root, state.disabled && styles.disabled, styles[state.size], state.weight === 'semibold' && styles.semibold, state.root.className);\n if (state.required) {\n state.required.className = mergeClasses(labelClassNames.required, styles.required, state.disabled && styles.disabled, state.required.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","tokens","labelClassNames","root","required","useStyles","Bahqtrf","sj55zd","disabled","B7iucu3","uwmqm3","small","Be2twd7","Bg96gwp","medium","large","Bhrd7zp","semibold","d","m","useLabelStyles_unstable","state","styles","className","size","weight"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,eAAe;;;2BAwCY;eAAvBkB;;;uBA1CwB,gBAAgB;AAElD,wBAAwB;IAC3BjB,IAAI,EAAE,WAAW;IACjBC,QAAQ,EAAE;AACd,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGN,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAG,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAD,MAAA,EAAA;QAAAE,OAAA,EAAA;IAAA;IAAAL,QAAA,EAAA;QAAAG,MAAA,EAAA;QAAAG,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,KAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,MAAA,EAAA;QAAAF,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAE,KAAA,EAAA;QAAAH,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAG,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAD,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CA+BrB,CAAC;AAGS,iCAAiCE,KAAK,IAAG;IAChD,aAAa;IACb,MAAMC,MAAM,GAAGjB,SAAS,CAAC,CAAC;
|
|
1
|
+
{"version":3,"sources":["useLabelStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const labelClassNames = {\n root: 'fui-Label',\n required: 'fui-Label__required'\n};\n/**\n * Styles for the label\n */ const useStyles = makeStyles({\n root: {\n fontFamily: tokens.fontFamilyBase,\n color: tokens.colorNeutralForeground1\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText'\n }\n },\n required: {\n color: tokens.colorPaletteRedForeground3,\n paddingLeft: tokens.spacingHorizontalXS\n },\n small: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200\n },\n medium: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300\n },\n large: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n fontWeight: tokens.fontWeightSemibold\n },\n semibold: {\n fontWeight: tokens.fontWeightSemibold\n }\n});\n/**\n * Apply styling to the Label slots based on the state\n */ export const useLabelStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(labelClassNames.root, styles.root, state.disabled && styles.disabled, styles[state.size], state.weight === 'semibold' && styles.semibold, state.root.className);\n if (state.required) {\n // eslint-disable-next-line react-hooks/immutability\n state.required.className = mergeClasses(labelClassNames.required, styles.required, state.disabled && styles.disabled, state.required.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","tokens","labelClassNames","root","required","useStyles","Bahqtrf","sj55zd","disabled","B7iucu3","uwmqm3","small","Be2twd7","Bg96gwp","medium","large","Bhrd7zp","semibold","d","m","useLabelStyles_unstable","state","styles","className","size","weight"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,eAAe;;;2BAwCY;eAAvBkB;;;uBA1CwB,gBAAgB;AAElD,wBAAwB;IAC3BjB,IAAI,EAAE,WAAW;IACjBC,QAAQ,EAAE;AACd,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGN,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAG,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAD,MAAA,EAAA;QAAAE,OAAA,EAAA;IAAA;IAAAL,QAAA,EAAA;QAAAG,MAAA,EAAA;QAAAG,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,KAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,MAAA,EAAA;QAAAF,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAE,KAAA,EAAA;QAAAH,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAG,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAD,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CA+BrB,CAAC;AAGS,iCAAiCE,KAAK,IAAG;IAChD,aAAa;IACb,MAAMC,MAAM,GAAGjB,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAgB,KAAK,CAAClB,IAAI,CAACoB,SAAS,GAAGvB,uBAAY,EAACE,eAAe,CAACC,IAAI,EAAEmB,MAAM,CAACnB,IAAI,EAAEkB,KAAK,CAACb,QAAQ,IAAIc,MAAM,CAACd,QAAQ,EAAEc,MAAM,CAACD,KAAK,CAACG,IAAI,CAAC,EAAEH,KAAK,CAACI,MAAM,KAAK,UAAU,IAAIH,MAAM,CAACL,QAAQ,EAAEI,KAAK,CAAClB,IAAI,CAACoB,SAAS,CAAC;IACnM,IAAIF,KAAK,CAACjB,QAAQ,EAAE;QAChB,oDAAA;QACAiB,KAAK,CAACjB,QAAQ,CAACmB,SAAS,OAAGvB,mBAAY,EAACE,eAAe,CAACE,QAAQ,EAAEkB,MAAM,CAAClB,QAAQ,EAAEiB,KAAK,CAACb,QAAQ,IAAIc,MAAM,CAACd,QAAQ,EAAEa,KAAK,CAACjB,QAAQ,CAACmB,SAAS,CAAC;IACnJ;IACA,OAAOF,KAAK;AAChB,CAAC"}
|
|
@@ -60,8 +60,10 @@ const labelClassNames = {
|
|
|
60
60
|
const useLabelStyles_unstable = (state)=>{
|
|
61
61
|
'use no memo';
|
|
62
62
|
const styles = useStyles();
|
|
63
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
63
64
|
state.root.className = (0, _react.mergeClasses)(labelClassNames.root, styles.root, state.disabled && styles.disabled, styles[state.size], state.weight === 'semibold' && styles.semibold, state.root.className);
|
|
64
65
|
if (state.required) {
|
|
66
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
65
67
|
state.required.className = (0, _react.mergeClasses)(labelClassNames.required, styles.required, state.disabled && styles.disabled, state.required.className);
|
|
66
68
|
}
|
|
67
69
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Label/useLabelStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { LabelSlots, LabelState } from './Label.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const labelClassNames: SlotClassNames<LabelSlots> = {\n root: 'fui-Label',\n required: 'fui-Label__required',\n};\n\n/**\n * Styles for the label\n */\nconst useStyles = makeStyles({\n root: {\n fontFamily: tokens.fontFamilyBase,\n color: tokens.colorNeutralForeground1,\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n\n required: {\n color: tokens.colorPaletteRedForeground3,\n paddingLeft: tokens.spacingHorizontalXS,\n },\n\n small: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n },\n\n medium: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n\n large: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n fontWeight: tokens.fontWeightSemibold,\n },\n\n semibold: {\n fontWeight: tokens.fontWeightSemibold,\n },\n});\n\n/**\n * Apply styling to the Label slots based on the state\n */\nexport const useLabelStyles_unstable = (state: LabelState): LabelState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(\n labelClassNames.root,\n styles.root,\n state.disabled && styles.disabled,\n styles[state.size],\n state.weight === 'semibold' && styles.semibold,\n state.root.className,\n );\n\n if (state.required) {\n state.required.className = mergeClasses(\n labelClassNames.required,\n styles.required,\n state.disabled && styles.disabled,\n state.required.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","labelClassNames","root","required","useStyles","fontFamily","fontFamilyBase","color","colorNeutralForeground1","disabled","colorNeutralForegroundDisabled","colorPaletteRedForeground3","paddingLeft","spacingHorizontalXS","small","fontSize","fontSizeBase200","lineHeight","lineHeightBase200","medium","fontSizeBase300","lineHeightBase300","large","fontSizeBase400","lineHeightBase400","fontWeight","fontWeightSemibold","semibold","useLabelStyles_unstable","state","styles","className","size","weight"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,eAAAA;;;
|
|
1
|
+
{"version":3,"sources":["../src/components/Label/useLabelStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { LabelSlots, LabelState } from './Label.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const labelClassNames: SlotClassNames<LabelSlots> = {\n root: 'fui-Label',\n required: 'fui-Label__required',\n};\n\n/**\n * Styles for the label\n */\nconst useStyles = makeStyles({\n root: {\n fontFamily: tokens.fontFamilyBase,\n color: tokens.colorNeutralForeground1,\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n\n required: {\n color: tokens.colorPaletteRedForeground3,\n paddingLeft: tokens.spacingHorizontalXS,\n },\n\n small: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n },\n\n medium: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n\n large: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n fontWeight: tokens.fontWeightSemibold,\n },\n\n semibold: {\n fontWeight: tokens.fontWeightSemibold,\n },\n});\n\n/**\n * Apply styling to the Label slots based on the state\n */\nexport const useLabelStyles_unstable = (state: LabelState): LabelState => {\n 'use no memo';\n\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n labelClassNames.root,\n styles.root,\n state.disabled && styles.disabled,\n styles[state.size],\n state.weight === 'semibold' && styles.semibold,\n state.root.className,\n );\n\n if (state.required) {\n // eslint-disable-next-line react-hooks/immutability\n state.required.className = mergeClasses(\n labelClassNames.required,\n styles.required,\n state.disabled && styles.disabled,\n state.required.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","labelClassNames","root","required","useStyles","fontFamily","fontFamilyBase","color","colorNeutralForeground1","disabled","colorNeutralForegroundDisabled","colorPaletteRedForeground3","paddingLeft","spacingHorizontalXS","small","fontSize","fontSizeBase200","lineHeight","lineHeightBase200","medium","fontSizeBase300","lineHeightBase300","large","fontSizeBase400","lineHeightBase400","fontWeight","fontWeightSemibold","semibold","useLabelStyles_unstable","state","styles","className","size","weight"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,eAAAA;;;2BAkDA2B;eAAAA;;;uBAvD4B,iBAAiB;4BACnC,wBAAwB;AAIxC,wBAAoD;IACzD1B,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYN,iBAAAA,EAAW;IAC3BI,MAAM;QACJG,YAAYL,kBAAAA,CAAOM,cAAc;QACjCC,OAAOP,kBAAAA,CAAOQ,uBAAuB;IACvC;IAEAC,UAAU;QACRF,OAAOP,kBAAAA,CAAOU,8BAA8B;QAC5C,kCAAkC;YAChCH,OAAO;QACT;IACF;IAEAJ,UAAU;QACRI,OAAOP,kBAAAA,CAAOW,0BAA0B;QACxCC,aAAaZ,kBAAAA,CAAOa,mBAAmB;IACzC;IAEAC,OAAO;QACLC,UAAUf,kBAAAA,CAAOgB,eAAe;QAChCC,YAAYjB,kBAAAA,CAAOkB,iBAAiB;IACtC;IAEAC,QAAQ;QACNJ,UAAUf,kBAAAA,CAAOoB,eAAe;QAChCH,YAAYjB,kBAAAA,CAAOqB,iBAAiB;IACtC;IAEAC,OAAO;QACLP,UAAUf,kBAAAA,CAAOuB,eAAe;QAChCN,YAAYjB,kBAAAA,CAAOwB,iBAAiB;QACpCC,YAAYzB,kBAAAA,CAAO0B,kBAAkB;IACvC;IAEAC,UAAU;QACRF,YAAYzB,kBAAAA,CAAO0B,kBAAkB;IACvC;AACF;AAKO,gCAAgC,CAACG;IACtC;IAEA,MAAMC,SAAS1B;IACf,oDAAoD;IACpDyB,MAAM3B,IAAI,CAAC6B,SAAS,OAAGhC,mBAAAA,EACrBE,gBAAgBC,IAAI,EACpB4B,OAAO5B,IAAI,EACX2B,MAAMpB,QAAQ,IAAIqB,OAAOrB,QAAQ,EACjCqB,MAAM,CAACD,MAAMG,IAAI,CAAC,EAClBH,MAAMI,MAAM,KAAK,cAAcH,OAAOH,QAAQ,EAC9CE,MAAM3B,IAAI,CAAC6B,SAAS;IAGtB,IAAIF,MAAM1B,QAAQ,EAAE;QAClB,oDAAoD;QACpD0B,MAAM1B,QAAQ,CAAC4B,SAAS,OAAGhC,mBAAAA,EACzBE,gBAAgBE,QAAQ,EACxB2B,OAAO3B,QAAQ,EACf0B,MAAMpB,QAAQ,IAAIqB,OAAOrB,QAAQ,EACjCoB,MAAM1B,QAAQ,CAAC4B,SAAS;IAE5B;IAEA,OAAOF;AACT,EAAE"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-label",
|
|
3
|
-
"version": "9.4.
|
|
3
|
+
"version": "9.4.2",
|
|
4
4
|
"description": "Fluent UI React Label component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
"dependencies": {
|
|
15
15
|
"@fluentui/react-shared-contexts": "^9.26.2",
|
|
16
16
|
"@fluentui/react-theme": "^9.2.1",
|
|
17
|
-
"@fluentui/react-utilities": "^9.26.
|
|
18
|
-
"@fluentui/react-jsx-runtime": "^9.4.
|
|
17
|
+
"@fluentui/react-utilities": "^9.26.4",
|
|
18
|
+
"@fluentui/react-jsx-runtime": "^9.4.3",
|
|
19
19
|
"@griffel/react": "^1.5.32",
|
|
20
20
|
"@swc/helpers": "^0.5.1"
|
|
21
21
|
},
|