@fluentui/react-rating 9.4.2 → 9.4.3
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 +14 -2
- package/lib/components/Rating/useRatingStyles.styles.js +0 -2
- package/lib/components/Rating/useRatingStyles.styles.js.map +1 -1
- package/lib/components/Rating/useRatingStyles.styles.raw.js +0 -1
- package/lib/components/Rating/useRatingStyles.styles.raw.js.map +1 -1
- package/lib/components/RatingDisplay/useRatingDisplayStyles.styles.js +0 -2
- package/lib/components/RatingDisplay/useRatingDisplayStyles.styles.js.map +1 -1
- package/lib/components/RatingDisplay/useRatingDisplayStyles.styles.raw.js +0 -1
- package/lib/components/RatingDisplay/useRatingDisplayStyles.styles.raw.js.map +1 -1
- package/lib/components/RatingItem/useRatingItemStyles.styles.js +0 -2
- package/lib/components/RatingItem/useRatingItemStyles.styles.js.map +1 -1
- package/lib/components/RatingItem/useRatingItemStyles.styles.raw.js +0 -1
- package/lib/components/RatingItem/useRatingItemStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/Rating/useRatingStyles.styles.js +0 -1
- package/lib-commonjs/components/Rating/useRatingStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Rating/useRatingStyles.styles.raw.js +0 -1
- package/lib-commonjs/components/Rating/useRatingStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/RatingDisplay/useRatingDisplayStyles.styles.js +0 -1
- package/lib-commonjs/components/RatingDisplay/useRatingDisplayStyles.styles.js.map +1 -1
- package/lib-commonjs/components/RatingDisplay/useRatingDisplayStyles.styles.raw.js +0 -1
- package/lib-commonjs/components/RatingDisplay/useRatingDisplayStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/RatingItem/useRatingItemStyles.styles.js +0 -1
- package/lib-commonjs/components/RatingItem/useRatingItemStyles.styles.js.map +1 -1
- package/lib-commonjs/components/RatingItem/useRatingItemStyles.styles.raw.js +0 -1
- package/lib-commonjs/components/RatingItem/useRatingItemStyles.styles.raw.js.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,24 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-rating
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 24 Jun 2026 11:03:43 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.4.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-rating_v9.4.3)
|
|
8
|
+
|
|
9
|
+
Wed, 24 Jun 2026 11:03:43 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-rating_v9.4.2..@fluentui/react-rating_v9.4.3)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: remove redundant use no memo directives, and add justification to valid ones ([PR #36224](https://github.com/microsoft/fluentui/pull/36224) by martinhochel@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.4 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
16
|
+
- Bump @fluentui/react-tabster to v9.26.16 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
17
|
+
- Bump @fluentui/react-utilities to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
18
|
+
|
|
7
19
|
## [9.4.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-rating_v9.4.2)
|
|
8
20
|
|
|
9
|
-
Tue, 26 May 2026 09:
|
|
21
|
+
Tue, 26 May 2026 09:39:35 GMT
|
|
10
22
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-rating_v9.4.1..@fluentui/react-rating_v9.4.2)
|
|
11
23
|
|
|
12
24
|
### Patches
|
|
@@ -12,8 +12,6 @@ const useRootClassName = /*#__PURE__*/__resetStyles("r2imjyh", null, [".r2imjyh{
|
|
|
12
12
|
* Apply styling to the Rating slots based on the state
|
|
13
13
|
*/
|
|
14
14
|
export const useRatingStyles_unstable = state => {
|
|
15
|
-
'use no memo';
|
|
16
|
-
|
|
17
15
|
const rootClassName = useRootClassName();
|
|
18
16
|
// eslint-disable-next-line react-hooks/immutability
|
|
19
17
|
state.root.className = mergeClasses(ratingClassNames.root, rootClassName, state.root.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","mergeClasses","ratingClassNames","root","useRootClassName","useRatingStyles_unstable","state","rootClassName","className"],"sources":["useRatingStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nexport const ratingClassNames = {\n root: 'fui-Rating'\n};\n/**\n * Styles for the root slot\n */ const useRootClassName = makeResetStyles({\n display: 'flex',\n flexWrap: 'wrap'\n});\n/**\n * Apply styling to the Rating slots based on the state\n */ export const useRatingStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"names":["__resetStyles","mergeClasses","ratingClassNames","root","useRootClassName","useRatingStyles_unstable","state","rootClassName","className"],"sources":["useRatingStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nexport const ratingClassNames = {\n root: 'fui-Rating'\n};\n/**\n * Styles for the root slot\n */ const useRootClassName = makeResetStyles({\n display: 'flex',\n flexWrap: 'wrap'\n});\n/**\n * Apply styling to the Rating slots based on the state\n */ export const useRatingStyles_unstable = (state)=>{\n const rootClassName = useRootClassName();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(ratingClassNames.root, rootClassName, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,OAAO,MAAMC,gBAAgB,GAAG;EAC5BC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,gBAAgB,gBAAGJ,aAAA,4DAG5B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMK,wBAAwB,GAAIC,KAAK,IAAG;EACjD,MAAMC,aAAa,GAAGH,gBAAgB,CAAC,CAAC;EACxC;EACAE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGP,YAAY,CAACC,gBAAgB,CAACC,IAAI,EAAEI,aAAa,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC/F,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -12,7 +12,6 @@ export const ratingClassNames = {
|
|
|
12
12
|
/**
|
|
13
13
|
* Apply styling to the Rating slots based on the state
|
|
14
14
|
*/ export const useRatingStyles_unstable = (state)=>{
|
|
15
|
-
'use no memo';
|
|
16
15
|
const rootClassName = useRootClassName();
|
|
17
16
|
// eslint-disable-next-line react-hooks/immutability
|
|
18
17
|
state.root.className = mergeClasses(ratingClassNames.root, rootClassName, state.root.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Rating/useRatingStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { RatingSlots, RatingState } from './Rating.types';\n\nexport const ratingClassNames: SlotClassNames<RatingSlots> = {\n root: 'fui-Rating',\n};\n\n/**\n * Styles for the root slot\n */\n\nconst useRootClassName = makeResetStyles({\n display: 'flex',\n flexWrap: 'wrap',\n});\n\n/**\n * Apply styling to the Rating slots based on the state\n */\nexport const useRatingStyles_unstable = (state: RatingState): RatingState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/Rating/useRatingStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { RatingSlots, RatingState } from './Rating.types';\n\nexport const ratingClassNames: SlotClassNames<RatingSlots> = {\n root: 'fui-Rating',\n};\n\n/**\n * Styles for the root slot\n */\n\nconst useRootClassName = makeResetStyles({\n display: 'flex',\n flexWrap: 'wrap',\n});\n\n/**\n * Apply styling to the Rating slots based on the state\n */\nexport const useRatingStyles_unstable = (state: RatingState): RatingState => {\n const rootClassName = useRootClassName();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(ratingClassNames.root, rootClassName, state.root.className);\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","ratingClassNames","root","useRootClassName","display","flexWrap","useRatingStyles_unstable","state","rootClassName","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAI/D,OAAO,MAAMC,mBAAgD;IAC3DC,MAAM;AACR,EAAE;AAEF;;CAEC,GAED,MAAMC,mBAAmBJ,gBAAgB;IACvCK,SAAS;IACTC,UAAU;AACZ;AAEA;;CAEC,GACD,OAAO,MAAMC,2BAA2B,CAACC;IACvC,MAAMC,gBAAgBL;IACtB,oDAAoD;IACpDI,MAAML,IAAI,CAACO,SAAS,GAAGT,aAAaC,iBAAiBC,IAAI,EAAEM,eAAeD,MAAML,IAAI,CAACO,SAAS;IAC9F,OAAOF;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","typographyStyles","ratingDisplayClassNames","root","valueText","countText","useRootClassName","useLabelClassName","useLabelStyles","large","Be2twd7","Bg96gwp","Frg6f3","extraLarge","strong","Bhrd7zp","divider","Ftih45","d","useRatingDisplayStyles_unstable","state","size","rootClassName","className","labelClassName","labelStyles"],"sources":["useRatingDisplayStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const ratingDisplayClassNames = {\n root: 'fui-RatingDisplay',\n valueText: 'fui-RatingDisplay__valueText',\n countText: 'fui-RatingDisplay__countText'\n};\n/**\n * Styles for the root slot\n */ const useRootClassName = makeResetStyles({\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'center'\n});\nconst useLabelClassName = makeResetStyles({\n color: tokens.colorNeutralForeground1,\n marginLeft: tokens.spacingHorizontalXS,\n ...typographyStyles.caption1\n});\nconst useLabelStyles = makeStyles({\n large: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n marginLeft: tokens.spacingHorizontalSNudge\n },\n extraLarge: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n marginLeft: tokens.spacingHorizontalS\n },\n strong: {\n fontWeight: tokens.fontWeightSemibold\n },\n divider: {\n '::before': {\n content: '\"· \"'\n }\n }\n});\n/**\n * Apply styling to the RatingDisplay slots based on the state\n */ export const useRatingDisplayStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","typographyStyles","ratingDisplayClassNames","root","valueText","countText","useRootClassName","useLabelClassName","useLabelStyles","large","Be2twd7","Bg96gwp","Frg6f3","extraLarge","strong","Bhrd7zp","divider","Ftih45","d","useRatingDisplayStyles_unstable","state","size","rootClassName","className","labelClassName","labelStyles"],"sources":["useRatingDisplayStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const ratingDisplayClassNames = {\n root: 'fui-RatingDisplay',\n valueText: 'fui-RatingDisplay__valueText',\n countText: 'fui-RatingDisplay__countText'\n};\n/**\n * Styles for the root slot\n */ const useRootClassName = makeResetStyles({\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'center'\n});\nconst useLabelClassName = makeResetStyles({\n color: tokens.colorNeutralForeground1,\n marginLeft: tokens.spacingHorizontalXS,\n ...typographyStyles.caption1\n});\nconst useLabelStyles = makeStyles({\n large: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n marginLeft: tokens.spacingHorizontalSNudge\n },\n extraLarge: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n marginLeft: tokens.spacingHorizontalS\n },\n strong: {\n fontWeight: tokens.fontWeightSemibold\n },\n divider: {\n '::before': {\n content: '\"· \"'\n }\n }\n});\n/**\n * Apply styling to the RatingDisplay slots based on the state\n */ export const useRatingDisplayStyles_unstable = (state)=>{\n const { size } = state;\n const rootClassName = useRootClassName();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(ratingDisplayClassNames.root, rootClassName, state.root.className);\n const labelClassName = useLabelClassName();\n const labelStyles = useLabelStyles();\n if (state.valueText) {\n // eslint-disable-next-line react-hooks/immutability\n state.valueText.className = mergeClasses(ratingDisplayClassNames.valueText, labelClassName, labelStyles.strong, size === 'large' && labelStyles.large, size === 'extra-large' && labelStyles.extraLarge, state.valueText.className);\n }\n if (state.countText) {\n // eslint-disable-next-line react-hooks/immutability\n state.countText.className = mergeClasses(ratingDisplayClassNames.countText, labelClassName, size === 'large' && labelStyles.large, size === 'extra-large' && labelStyles.extraLarge, state.valueText && labelStyles.divider, state.countText.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,SAAS,EAAE,8BAA8B;EACzCC,SAAS,EAAE;AACf,CAAC;AACD;AACA;AACA;AAAI,MAAMC,gBAAgB,gBAAGT,aAAA,+EAI5B,CAAC;AACF,MAAMU,iBAAiB,gBAAGV,aAAA,seAIzB,CAAC;AACF,MAAMW,cAAc,gBAAGV,QAAA;EAAAW,KAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,UAAA;IAAAH,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAE,MAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAmBtB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAM;IAAEC;EAAK,CAAC,GAAGD,KAAK;EACtB,MAAME,aAAa,GAAGhB,gBAAgB,CAAC,CAAC;EACxC;EACAc,KAAK,CAACjB,IAAI,CAACoB,SAAS,GAAGxB,YAAY,CAACG,uBAAuB,CAACC,IAAI,EAAEmB,aAAa,EAAEF,KAAK,CAACjB,IAAI,CAACoB,SAAS,CAAC;EACtG,MAAMC,cAAc,GAAGjB,iBAAiB,CAAC,CAAC;EAC1C,MAAMkB,WAAW,GAAGjB,cAAc,CAAC,CAAC;EACpC,IAAIY,KAAK,CAAChB,SAAS,EAAE;IACjB;IACAgB,KAAK,CAAChB,SAAS,CAACmB,SAAS,GAAGxB,YAAY,CAACG,uBAAuB,CAACE,SAAS,EAAEoB,cAAc,EAAEC,WAAW,CAACX,MAAM,EAAEO,IAAI,KAAK,OAAO,IAAII,WAAW,CAAChB,KAAK,EAAEY,IAAI,KAAK,aAAa,IAAII,WAAW,CAACZ,UAAU,EAAEO,KAAK,CAAChB,SAAS,CAACmB,SAAS,CAAC;EACvO;EACA,IAAIH,KAAK,CAACf,SAAS,EAAE;IACjB;IACAe,KAAK,CAACf,SAAS,CAACkB,SAAS,GAAGxB,YAAY,CAACG,uBAAuB,CAACG,SAAS,EAAEmB,cAAc,EAAEH,IAAI,KAAK,OAAO,IAAII,WAAW,CAAChB,KAAK,EAAEY,IAAI,KAAK,aAAa,IAAII,WAAW,CAACZ,UAAU,EAAEO,KAAK,CAAChB,SAAS,IAAIqB,WAAW,CAACT,OAAO,EAAEI,KAAK,CAACf,SAAS,CAACkB,SAAS,CAAC;EAC3P;EACA,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -41,7 +41,6 @@ const useLabelStyles = makeStyles({
|
|
|
41
41
|
/**
|
|
42
42
|
* Apply styling to the RatingDisplay slots based on the state
|
|
43
43
|
*/ export const useRatingDisplayStyles_unstable = (state)=>{
|
|
44
|
-
'use no memo';
|
|
45
44
|
const { size } = state;
|
|
46
45
|
const rootClassName = useRootClassName();
|
|
47
46
|
// eslint-disable-next-line react-hooks/immutability
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/RatingDisplay/useRatingDisplayStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { RatingDisplaySlots, RatingDisplayState } from './RatingDisplay.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const ratingDisplayClassNames: SlotClassNames<RatingDisplaySlots> = {\n root: 'fui-RatingDisplay',\n valueText: 'fui-RatingDisplay__valueText',\n countText: 'fui-RatingDisplay__countText',\n};\n\n/**\n * Styles for the root slot\n */\n\nconst useRootClassName = makeResetStyles({\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'center',\n});\n\nconst useLabelClassName = makeResetStyles({\n color: tokens.colorNeutralForeground1,\n marginLeft: tokens.spacingHorizontalXS,\n ...typographyStyles.caption1,\n});\n\nconst useLabelStyles = makeStyles({\n large: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n marginLeft: tokens.spacingHorizontalSNudge,\n },\n extraLarge: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n marginLeft: tokens.spacingHorizontalS,\n },\n strong: {\n fontWeight: tokens.fontWeightSemibold,\n },\n divider: {\n '::before': {\n content: '\"· \"',\n },\n },\n});\n\n/**\n * Apply styling to the RatingDisplay slots based on the state\n */\nexport const useRatingDisplayStyles_unstable = (state: RatingDisplayState): RatingDisplayState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/RatingDisplay/useRatingDisplayStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { RatingDisplaySlots, RatingDisplayState } from './RatingDisplay.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const ratingDisplayClassNames: SlotClassNames<RatingDisplaySlots> = {\n root: 'fui-RatingDisplay',\n valueText: 'fui-RatingDisplay__valueText',\n countText: 'fui-RatingDisplay__countText',\n};\n\n/**\n * Styles for the root slot\n */\n\nconst useRootClassName = makeResetStyles({\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'center',\n});\n\nconst useLabelClassName = makeResetStyles({\n color: tokens.colorNeutralForeground1,\n marginLeft: tokens.spacingHorizontalXS,\n ...typographyStyles.caption1,\n});\n\nconst useLabelStyles = makeStyles({\n large: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n marginLeft: tokens.spacingHorizontalSNudge,\n },\n extraLarge: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n marginLeft: tokens.spacingHorizontalS,\n },\n strong: {\n fontWeight: tokens.fontWeightSemibold,\n },\n divider: {\n '::before': {\n content: '\"· \"',\n },\n },\n});\n\n/**\n * Apply styling to the RatingDisplay slots based on the state\n */\nexport const useRatingDisplayStyles_unstable = (state: RatingDisplayState): RatingDisplayState => {\n const { size } = state;\n const rootClassName = useRootClassName();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(ratingDisplayClassNames.root, rootClassName, state.root.className);\n const labelClassName = useLabelClassName();\n const labelStyles = useLabelStyles();\n\n if (state.valueText) {\n // eslint-disable-next-line react-hooks/immutability\n state.valueText.className = mergeClasses(\n ratingDisplayClassNames.valueText,\n labelClassName,\n labelStyles.strong,\n size === 'large' && labelStyles.large,\n size === 'extra-large' && labelStyles.extraLarge,\n state.valueText.className,\n );\n }\n if (state.countText) {\n // eslint-disable-next-line react-hooks/immutability\n state.countText.className = mergeClasses(\n ratingDisplayClassNames.countText,\n labelClassName,\n size === 'large' && labelStyles.large,\n size === 'extra-large' && labelStyles.extraLarge,\n state.valueText && labelStyles.divider,\n state.countText.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","ratingDisplayClassNames","root","valueText","countText","useRootClassName","display","flexWrap","alignItems","useLabelClassName","color","colorNeutralForeground1","marginLeft","spacingHorizontalXS","caption1","useLabelStyles","large","fontSize","fontSizeBase300","lineHeight","lineHeightBase300","spacingHorizontalSNudge","extraLarge","fontSizeBase400","lineHeightBase400","spacingHorizontalS","strong","fontWeight","fontWeightSemibold","divider","content","useRatingDisplayStyles_unstable","state","size","rootClassName","className","labelClassName","labelStyles"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAEjE,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;IACNC,WAAW;IACXC,WAAW;AACb,EAAE;AAEF;;CAEC,GAED,MAAMC,mBAAmBT,gBAAgB;IACvCU,SAAS;IACTC,UAAU;IACVC,YAAY;AACd;AAEA,MAAMC,oBAAoBb,gBAAgB;IACxCc,OAAOX,OAAOY,uBAAuB;IACrCC,YAAYb,OAAOc,mBAAmB;IACtC,GAAGb,iBAAiBc,QAAQ;AAC9B;AAEA,MAAMC,iBAAiBlB,WAAW;IAChCmB,OAAO;QACLC,UAAUlB,OAAOmB,eAAe;QAChCC,YAAYpB,OAAOqB,iBAAiB;QACpCR,YAAYb,OAAOsB,uBAAuB;IAC5C;IACAC,YAAY;QACVL,UAAUlB,OAAOwB,eAAe;QAChCJ,YAAYpB,OAAOyB,iBAAiB;QACpCZ,YAAYb,OAAO0B,kBAAkB;IACvC;IACAC,QAAQ;QACNC,YAAY5B,OAAO6B,kBAAkB;IACvC;IACAC,SAAS;QACP,YAAY;YACVC,SAAS;QACX;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9C,MAAM,EAAEC,IAAI,EAAE,GAAGD;IACjB,MAAME,gBAAgB7B;IACtB,oDAAoD;IACpD2B,MAAM9B,IAAI,CAACiC,SAAS,GAAGrC,aAAaG,wBAAwBC,IAAI,EAAEgC,eAAeF,MAAM9B,IAAI,CAACiC,SAAS;IACrG,MAAMC,iBAAiB3B;IACvB,MAAM4B,cAActB;IAEpB,IAAIiB,MAAM7B,SAAS,EAAE;QACnB,oDAAoD;QACpD6B,MAAM7B,SAAS,CAACgC,SAAS,GAAGrC,aAC1BG,wBAAwBE,SAAS,EACjCiC,gBACAC,YAAYX,MAAM,EAClBO,SAAS,WAAWI,YAAYrB,KAAK,EACrCiB,SAAS,iBAAiBI,YAAYf,UAAU,EAChDU,MAAM7B,SAAS,CAACgC,SAAS;IAE7B;IACA,IAAIH,MAAM5B,SAAS,EAAE;QACnB,oDAAoD;QACpD4B,MAAM5B,SAAS,CAAC+B,SAAS,GAAGrC,aAC1BG,wBAAwBG,SAAS,EACjCgC,gBACAH,SAAS,WAAWI,YAAYrB,KAAK,EACrCiB,SAAS,iBAAiBI,YAAYf,UAAU,EAChDU,MAAM7B,SAAS,IAAIkC,YAAYR,OAAO,EACtCG,MAAM5B,SAAS,CAAC+B,SAAS;IAE7B;IAEA,OAAOH;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","createFocusOutlineStyle","ratingItemClassNames","root","selectedIcon","unselectedIcon","halfValueInput","fullValueInput","useStyles","qhf8xq","Brovlpu","B486eqv","Bssx7fj","uh7if5","clntm0","Dlk2r6","h6p2u","I6qiy5","yzno9d","By0wis0","B2j2mmj","wigs8","pbfy6t","B0v4ure","Byrf0fs","Bsiemmq","Bwckmig","skfxo0","Iidy0u","B98u21t","Bvwlmkc","jo1ztg","Ba1iezr","Blmvk6g","B24cy0v","Bil7v7r","Br3gin4","nr063g","ghq09","Bbgo44z","Bseh09z","az1dzo","Ba3ybja","B6352mv","vppk2z","Biaj6j7","B2pnrqr","B29w5g4","Bhhzhcn","Bec0n69","small","Be2twd7","a9b677","Bqenvij","medium","large","d","p","f","i","m","useInputBaseClassName","useInputStyles","lowerHalf","j35jbq","upperHalf","oyh7mz","useIndicatorBaseClassName","useIndicatorStyles","l5kjut","uoufgc","v39lw8","Bbwb3tu","Frg6f3","brand","sj55zd","marigold","filled","ojy3ng","B7iucu3","Biw2w6l","brandFilled","marigoldFilled","useRatingItemStyles_unstable","state","color","size","iconFillWidth","appearance","styles","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","className"],"sources":["useRatingItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nexport const ratingItemClassNames = {\n root: 'fui-RatingItem',\n selectedIcon: 'fui-RatingItem__selectedIcon',\n unselectedIcon: 'fui-RatingItem__unselectedIcon',\n halfValueInput: 'fui-RatingItem__halfValueInput',\n fullValueInput: 'fui-RatingItem__fullValueInput'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n position: 'relative',\n ...createFocusOutlineStyle({\n style: {},\n selector: 'focus-within'\n })\n },\n small: {\n fontSize: '12px',\n width: '12px',\n height: '12px'\n },\n medium: {\n fontSize: '16px',\n width: '16px',\n height: '16px'\n },\n large: {\n fontSize: '20px',\n width: '20px',\n height: '20px'\n },\n 'extra-large': {\n fontSize: '28px',\n width: '28px',\n height: '28px'\n }\n});\nconst useInputBaseClassName = makeResetStyles({\n position: 'absolute',\n left: 0,\n top: 0,\n right: 0,\n bottom: 0,\n boxSizing: 'border-box',\n margin: 0,\n opacity: 0,\n cursor: 'pointer',\n height: '100%'\n});\nconst useInputStyles = makeStyles({\n lowerHalf: {\n right: '50%'\n },\n upperHalf: {\n left: '50%'\n }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n display: 'flex',\n overflow: 'hidden',\n color: tokens.colorNeutralForeground1,\n fill: 'currentColor',\n pointerEvents: 'none',\n position: 'absolute',\n left: 0,\n right: 0,\n top: 0,\n bottom: 0\n});\nconst useIndicatorStyles = makeStyles({\n lowerHalf: {\n right: '50%',\n '& > svg': {\n flex: '0 0 auto'\n }\n },\n upperHalf: {\n left: '50%',\n marginLeft: '-50%'\n },\n brand: {\n color: tokens.colorBrandForeground1\n },\n marigold: {\n color: tokens.colorPaletteMarigoldBorderActive\n },\n filled: {\n color: tokens.colorNeutralBackground6,\n stroke: tokens.colorTransparentStroke,\n '@media (forced-colors: active)': {\n color: 'Canvas',\n stroke: 'CanvasText'\n }\n },\n brandFilled: {\n color: tokens.colorBrandBackground2\n },\n marigoldFilled: {\n color: tokens.colorPaletteMarigoldBackground2\n }\n});\n/**\n * Apply styling to the RatingItem slots based on the state\n */ export const useRatingItemStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","createFocusOutlineStyle","ratingItemClassNames","root","selectedIcon","unselectedIcon","halfValueInput","fullValueInput","useStyles","qhf8xq","Brovlpu","B486eqv","Bssx7fj","uh7if5","clntm0","Dlk2r6","h6p2u","I6qiy5","yzno9d","By0wis0","B2j2mmj","wigs8","pbfy6t","B0v4ure","Byrf0fs","Bsiemmq","Bwckmig","skfxo0","Iidy0u","B98u21t","Bvwlmkc","jo1ztg","Ba1iezr","Blmvk6g","B24cy0v","Bil7v7r","Br3gin4","nr063g","ghq09","Bbgo44z","Bseh09z","az1dzo","Ba3ybja","B6352mv","vppk2z","Biaj6j7","B2pnrqr","B29w5g4","Bhhzhcn","Bec0n69","small","Be2twd7","a9b677","Bqenvij","medium","large","d","p","f","i","m","useInputBaseClassName","useInputStyles","lowerHalf","j35jbq","upperHalf","oyh7mz","useIndicatorBaseClassName","useIndicatorStyles","l5kjut","uoufgc","v39lw8","Bbwb3tu","Frg6f3","brand","sj55zd","marigold","filled","ojy3ng","B7iucu3","Biw2w6l","brandFilled","marigoldFilled","useRatingItemStyles_unstable","state","color","size","iconFillWidth","appearance","styles","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","className"],"sources":["useRatingItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nexport const ratingItemClassNames = {\n root: 'fui-RatingItem',\n selectedIcon: 'fui-RatingItem__selectedIcon',\n unselectedIcon: 'fui-RatingItem__unselectedIcon',\n halfValueInput: 'fui-RatingItem__halfValueInput',\n fullValueInput: 'fui-RatingItem__fullValueInput'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n position: 'relative',\n ...createFocusOutlineStyle({\n style: {},\n selector: 'focus-within'\n })\n },\n small: {\n fontSize: '12px',\n width: '12px',\n height: '12px'\n },\n medium: {\n fontSize: '16px',\n width: '16px',\n height: '16px'\n },\n large: {\n fontSize: '20px',\n width: '20px',\n height: '20px'\n },\n 'extra-large': {\n fontSize: '28px',\n width: '28px',\n height: '28px'\n }\n});\nconst useInputBaseClassName = makeResetStyles({\n position: 'absolute',\n left: 0,\n top: 0,\n right: 0,\n bottom: 0,\n boxSizing: 'border-box',\n margin: 0,\n opacity: 0,\n cursor: 'pointer',\n height: '100%'\n});\nconst useInputStyles = makeStyles({\n lowerHalf: {\n right: '50%'\n },\n upperHalf: {\n left: '50%'\n }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n display: 'flex',\n overflow: 'hidden',\n color: tokens.colorNeutralForeground1,\n fill: 'currentColor',\n pointerEvents: 'none',\n position: 'absolute',\n left: 0,\n right: 0,\n top: 0,\n bottom: 0\n});\nconst useIndicatorStyles = makeStyles({\n lowerHalf: {\n right: '50%',\n '& > svg': {\n flex: '0 0 auto'\n }\n },\n upperHalf: {\n left: '50%',\n marginLeft: '-50%'\n },\n brand: {\n color: tokens.colorBrandForeground1\n },\n marigold: {\n color: tokens.colorPaletteMarigoldBorderActive\n },\n filled: {\n color: tokens.colorNeutralBackground6,\n stroke: tokens.colorTransparentStroke,\n '@media (forced-colors: active)': {\n color: 'Canvas',\n stroke: 'CanvasText'\n }\n },\n brandFilled: {\n color: tokens.colorBrandBackground2\n },\n marigoldFilled: {\n color: tokens.colorPaletteMarigoldBackground2\n }\n});\n/**\n * Apply styling to the RatingItem slots based on the state\n */ export const useRatingItemStyles_unstable = (state)=>{\n const { color, size, iconFillWidth, appearance } = state;\n const styles = useStyles();\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(ratingItemClassNames.root, styles.root, styles[size], state.root.className);\n if (state.halfValueInput) {\n // eslint-disable-next-line react-hooks/immutability\n state.halfValueInput.className = mergeClasses(ratingItemClassNames.halfValueInput, inputBaseClassName, inputStyles.lowerHalf, state.halfValueInput.className);\n }\n if (state.fullValueInput) {\n // eslint-disable-next-line react-hooks/immutability\n state.fullValueInput.className = mergeClasses(ratingItemClassNames.fullValueInput, inputBaseClassName, state.halfValueInput && inputStyles.upperHalf, state.fullValueInput.className);\n }\n if (state.unselectedIcon) {\n // eslint-disable-next-line react-hooks/immutability\n state.unselectedIcon.className = mergeClasses(ratingItemClassNames.unselectedIcon, indicatorBaseClassName, appearance === 'filled' && indicatorStyles.filled, color === 'brand' && (appearance === 'filled' ? indicatorStyles.brandFilled : indicatorStyles.brand), color === 'marigold' && (appearance === 'filled' ? indicatorStyles.marigoldFilled : indicatorStyles.marigold), iconFillWidth === 0.5 && indicatorStyles.upperHalf, state.unselectedIcon.className);\n }\n if (state.selectedIcon) {\n // eslint-disable-next-line react-hooks/immutability\n state.selectedIcon.className = mergeClasses(ratingItemClassNames.selectedIcon, indicatorBaseClassName, color === 'brand' && indicatorStyles.brand, color === 'marigold' && indicatorStyles.marigold, iconFillWidth === 0.5 && indicatorStyles.lowerHalf, state.selectedIcon.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -107,7 +107,6 @@ const useIndicatorStyles = makeStyles({
|
|
|
107
107
|
/**
|
|
108
108
|
* Apply styling to the RatingItem slots based on the state
|
|
109
109
|
*/ export const useRatingItemStyles_unstable = (state)=>{
|
|
110
|
-
'use no memo';
|
|
111
110
|
const { color, size, iconFillWidth, appearance } = state;
|
|
112
111
|
const styles = useStyles();
|
|
113
112
|
const inputBaseClassName = useInputBaseClassName();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/RatingItem/useRatingItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport type { RatingItemSlots, RatingItemState } from './RatingItem.types';\n\nexport const ratingItemClassNames: SlotClassNames<RatingItemSlots> = {\n root: 'fui-RatingItem',\n selectedIcon: 'fui-RatingItem__selectedIcon',\n unselectedIcon: 'fui-RatingItem__unselectedIcon',\n halfValueInput: 'fui-RatingItem__halfValueInput',\n fullValueInput: 'fui-RatingItem__fullValueInput',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n small: {\n fontSize: '12px',\n width: '12px',\n height: '12px',\n },\n\n medium: {\n fontSize: '16px',\n width: '16px',\n height: '16px',\n },\n\n large: {\n fontSize: '20px',\n width: '20px',\n height: '20px',\n },\n\n 'extra-large': {\n fontSize: '28px',\n width: '28px',\n height: '28px',\n },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n position: 'absolute',\n left: 0,\n top: 0,\n right: 0,\n bottom: 0,\n boxSizing: 'border-box',\n margin: 0,\n opacity: 0,\n cursor: 'pointer',\n height: '100%',\n});\n\nconst useInputStyles = makeStyles({\n lowerHalf: {\n right: '50%',\n },\n upperHalf: {\n left: '50%',\n },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n display: 'flex',\n overflow: 'hidden',\n color: tokens.colorNeutralForeground1,\n fill: 'currentColor',\n pointerEvents: 'none',\n position: 'absolute',\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n});\n\nconst useIndicatorStyles = makeStyles({\n lowerHalf: {\n right: '50%',\n '& > svg': {\n flex: '0 0 auto',\n },\n },\n upperHalf: {\n left: '50%',\n marginLeft: '-50%',\n },\n brand: {\n color: tokens.colorBrandForeground1,\n },\n marigold: {\n color: tokens.colorPaletteMarigoldBorderActive,\n },\n filled: {\n color: tokens.colorNeutralBackground6,\n stroke: tokens.colorTransparentStroke,\n '@media (forced-colors: active)': {\n color: 'Canvas',\n stroke: 'CanvasText',\n },\n },\n brandFilled: {\n color: tokens.colorBrandBackground2,\n },\n marigoldFilled: {\n color: tokens.colorPaletteMarigoldBackground2,\n },\n});\n\n/**\n * Apply styling to the RatingItem slots based on the state\n */\nexport const useRatingItemStyles_unstable = (state: RatingItemState): RatingItemState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/RatingItem/useRatingItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport type { RatingItemSlots, RatingItemState } from './RatingItem.types';\n\nexport const ratingItemClassNames: SlotClassNames<RatingItemSlots> = {\n root: 'fui-RatingItem',\n selectedIcon: 'fui-RatingItem__selectedIcon',\n unselectedIcon: 'fui-RatingItem__unselectedIcon',\n halfValueInput: 'fui-RatingItem__halfValueInput',\n fullValueInput: 'fui-RatingItem__fullValueInput',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n small: {\n fontSize: '12px',\n width: '12px',\n height: '12px',\n },\n\n medium: {\n fontSize: '16px',\n width: '16px',\n height: '16px',\n },\n\n large: {\n fontSize: '20px',\n width: '20px',\n height: '20px',\n },\n\n 'extra-large': {\n fontSize: '28px',\n width: '28px',\n height: '28px',\n },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n position: 'absolute',\n left: 0,\n top: 0,\n right: 0,\n bottom: 0,\n boxSizing: 'border-box',\n margin: 0,\n opacity: 0,\n cursor: 'pointer',\n height: '100%',\n});\n\nconst useInputStyles = makeStyles({\n lowerHalf: {\n right: '50%',\n },\n upperHalf: {\n left: '50%',\n },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n display: 'flex',\n overflow: 'hidden',\n color: tokens.colorNeutralForeground1,\n fill: 'currentColor',\n pointerEvents: 'none',\n position: 'absolute',\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n});\n\nconst useIndicatorStyles = makeStyles({\n lowerHalf: {\n right: '50%',\n '& > svg': {\n flex: '0 0 auto',\n },\n },\n upperHalf: {\n left: '50%',\n marginLeft: '-50%',\n },\n brand: {\n color: tokens.colorBrandForeground1,\n },\n marigold: {\n color: tokens.colorPaletteMarigoldBorderActive,\n },\n filled: {\n color: tokens.colorNeutralBackground6,\n stroke: tokens.colorTransparentStroke,\n '@media (forced-colors: active)': {\n color: 'Canvas',\n stroke: 'CanvasText',\n },\n },\n brandFilled: {\n color: tokens.colorBrandBackground2,\n },\n marigoldFilled: {\n color: tokens.colorPaletteMarigoldBackground2,\n },\n});\n\n/**\n * Apply styling to the RatingItem slots based on the state\n */\nexport const useRatingItemStyles_unstable = (state: RatingItemState): RatingItemState => {\n const { color, size, iconFillWidth, appearance } = state;\n const styles = useStyles();\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(ratingItemClassNames.root, styles.root, styles[size], state.root.className);\n\n if (state.halfValueInput) {\n // eslint-disable-next-line react-hooks/immutability\n state.halfValueInput.className = mergeClasses(\n ratingItemClassNames.halfValueInput,\n inputBaseClassName,\n inputStyles.lowerHalf,\n state.halfValueInput.className,\n );\n }\n\n if (state.fullValueInput) {\n // eslint-disable-next-line react-hooks/immutability\n state.fullValueInput.className = mergeClasses(\n ratingItemClassNames.fullValueInput,\n inputBaseClassName,\n state.halfValueInput && inputStyles.upperHalf,\n state.fullValueInput.className,\n );\n }\n\n if (state.unselectedIcon) {\n // eslint-disable-next-line react-hooks/immutability\n state.unselectedIcon.className = mergeClasses(\n ratingItemClassNames.unselectedIcon,\n indicatorBaseClassName,\n appearance === 'filled' && indicatorStyles.filled,\n color === 'brand' && (appearance === 'filled' ? indicatorStyles.brandFilled : indicatorStyles.brand),\n color === 'marigold' && (appearance === 'filled' ? indicatorStyles.marigoldFilled : indicatorStyles.marigold),\n iconFillWidth === 0.5 && indicatorStyles.upperHalf,\n state.unselectedIcon.className,\n );\n }\n\n if (state.selectedIcon) {\n // eslint-disable-next-line react-hooks/immutability\n state.selectedIcon.className = mergeClasses(\n ratingItemClassNames.selectedIcon,\n indicatorBaseClassName,\n color === 'brand' && indicatorStyles.brand,\n color === 'marigold' && indicatorStyles.marigold,\n iconFillWidth === 0.5 && indicatorStyles.lowerHalf,\n state.selectedIcon.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","createFocusOutlineStyle","ratingItemClassNames","root","selectedIcon","unselectedIcon","halfValueInput","fullValueInput","useStyles","position","style","selector","small","fontSize","width","height","medium","large","useInputBaseClassName","left","top","right","bottom","boxSizing","margin","opacity","cursor","useInputStyles","lowerHalf","upperHalf","useIndicatorBaseClassName","display","overflow","color","colorNeutralForeground1","fill","pointerEvents","useIndicatorStyles","flex","marginLeft","brand","colorBrandForeground1","marigold","colorPaletteMarigoldBorderActive","filled","colorNeutralBackground6","stroke","colorTransparentStroke","brandFilled","colorBrandBackground2","marigoldFilled","colorPaletteMarigoldBackground2","useRatingItemStyles_unstable","state","size","iconFillWidth","appearance","styles","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","className"],"mappings":"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"}
|
|
@@ -27,7 +27,6 @@ const ratingClassNames = {
|
|
|
27
27
|
".r2imjyh{display:flex;flex-wrap:wrap;}"
|
|
28
28
|
]);
|
|
29
29
|
const useRatingStyles_unstable = (state)=>{
|
|
30
|
-
'use no memo';
|
|
31
30
|
const rootClassName = useRootClassName();
|
|
32
31
|
// eslint-disable-next-line react-hooks/immutability
|
|
33
32
|
state.root.className = (0, _react.mergeClasses)(ratingClassNames.root, rootClassName, state.root.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useRatingStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nexport const ratingClassNames = {\n root: 'fui-Rating'\n};\n/**\n * Styles for the root slot\n */ const useRootClassName = makeResetStyles({\n display: 'flex',\n flexWrap: 'wrap'\n});\n/**\n * Apply styling to the Rating slots based on the state\n */ export const useRatingStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"sources":["useRatingStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nexport const ratingClassNames = {\n root: 'fui-Rating'\n};\n/**\n * Styles for the root slot\n */ const useRootClassName = makeResetStyles({\n display: 'flex',\n flexWrap: 'wrap'\n});\n/**\n * Apply styling to the Rating slots based on the state\n */ export const useRatingStyles_unstable = (state)=>{\n const rootClassName = useRootClassName();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(ratingClassNames.root, rootClassName, state.root.className);\n return state;\n};\n"],"names":["__resetStyles","mergeClasses","ratingClassNames","root","useRootClassName","useRatingStyles_unstable","state","rootClassName","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;oBAEiB;;;4BAWY;;;;uBAZK,gBAAgB;AACvD,MAAME,mBAAmB;IAC5BC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,gBAAgB,GAAA,WAAA,OAAGJ,oBAAA,EAAA,WAAA,MAAA;IAAA;CAG5B,CAAC;AAGS,MAAMK,4BAA4BC,KAAK,IAAG;IACjD,MAAMC,aAAa,GAAGH,gBAAgB,CAAC,CAAC;IACxC,oDAAA;IACAE,KAAK,CAACH,IAAI,CAACK,SAAS,OAAGP,mBAAY,EAACC,gBAAgB,CAACC,IAAI,EAAEI,aAAa,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;IAC/F,OAAOF,KAAK;AAChB,CAAC"}
|
|
@@ -28,7 +28,6 @@ const ratingClassNames = {
|
|
|
28
28
|
flexWrap: 'wrap'
|
|
29
29
|
});
|
|
30
30
|
const useRatingStyles_unstable = (state)=>{
|
|
31
|
-
'use no memo';
|
|
32
31
|
const rootClassName = useRootClassName();
|
|
33
32
|
// eslint-disable-next-line react-hooks/immutability
|
|
34
33
|
state.root.className = (0, _react.mergeClasses)(ratingClassNames.root, rootClassName, state.root.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Rating/useRatingStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { RatingSlots, RatingState } from './Rating.types';\n\nexport const ratingClassNames: SlotClassNames<RatingSlots> = {\n root: 'fui-Rating',\n};\n\n/**\n * Styles for the root slot\n */\n\nconst useRootClassName = makeResetStyles({\n display: 'flex',\n flexWrap: 'wrap',\n});\n\n/**\n * Apply styling to the Rating slots based on the state\n */\nexport const useRatingStyles_unstable = (state: RatingState): RatingState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/Rating/useRatingStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { RatingSlots, RatingState } from './Rating.types';\n\nexport const ratingClassNames: SlotClassNames<RatingSlots> = {\n root: 'fui-Rating',\n};\n\n/**\n * Styles for the root slot\n */\n\nconst useRootClassName = makeResetStyles({\n display: 'flex',\n flexWrap: 'wrap',\n});\n\n/**\n * Apply styling to the Rating slots based on the state\n */\nexport const useRatingStyles_unstable = (state: RatingState): RatingState => {\n const rootClassName = useRootClassName();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(ratingClassNames.root, rootClassName, state.root.className);\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","ratingClassNames","root","useRootClassName","display","flexWrap","useRatingStyles_unstable","state","rootClassName","className"],"mappings":"AAAA;;;;;;;;;;;;oBAMaE;;;IAgBAK,wBAAAA;;;;uBApBiC,iBAAiB;AAIxD,MAAML,mBAAgD;IAC3DC,MAAM;AACR,EAAE;AAEF;;CAEC,GAED,MAAMC,uBAAmBJ,sBAAAA,EAAgB;IACvCK,SAAS;IACTC,UAAU;AACZ;AAKO,iCAAiC,CAACE;IACvC,MAAMC,gBAAgBL;IACtB,oDAAoD;IACpDI,MAAML,IAAI,CAACO,SAAS,OAAGT,mBAAAA,EAAaC,iBAAiBC,IAAI,EAAEM,eAAeD,MAAML,IAAI,CAACO,SAAS;IAC9F,OAAOF;AACT,EAAE"}
|
|
@@ -70,7 +70,6 @@ const useLabelStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
70
70
|
]
|
|
71
71
|
});
|
|
72
72
|
const useRatingDisplayStyles_unstable = (state)=>{
|
|
73
|
-
'use no memo';
|
|
74
73
|
const { size } = state;
|
|
75
74
|
const rootClassName = useRootClassName();
|
|
76
75
|
// eslint-disable-next-line react-hooks/immutability
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useRatingDisplayStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const ratingDisplayClassNames = {\n root: 'fui-RatingDisplay',\n valueText: 'fui-RatingDisplay__valueText',\n countText: 'fui-RatingDisplay__countText'\n};\n/**\n * Styles for the root slot\n */ const useRootClassName = makeResetStyles({\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'center'\n});\nconst useLabelClassName = makeResetStyles({\n color: tokens.colorNeutralForeground1,\n marginLeft: tokens.spacingHorizontalXS,\n ...typographyStyles.caption1\n});\nconst useLabelStyles = makeStyles({\n large: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n marginLeft: tokens.spacingHorizontalSNudge\n },\n extraLarge: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n marginLeft: tokens.spacingHorizontalS\n },\n strong: {\n fontWeight: tokens.fontWeightSemibold\n },\n divider: {\n '::before': {\n content: '\"· \"'\n }\n }\n});\n/**\n * Apply styling to the RatingDisplay slots based on the state\n */ export const useRatingDisplayStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"sources":["useRatingDisplayStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const ratingDisplayClassNames = {\n root: 'fui-RatingDisplay',\n valueText: 'fui-RatingDisplay__valueText',\n countText: 'fui-RatingDisplay__countText'\n};\n/**\n * Styles for the root slot\n */ const useRootClassName = makeResetStyles({\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'center'\n});\nconst useLabelClassName = makeResetStyles({\n color: tokens.colorNeutralForeground1,\n marginLeft: tokens.spacingHorizontalXS,\n ...typographyStyles.caption1\n});\nconst useLabelStyles = makeStyles({\n large: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n marginLeft: tokens.spacingHorizontalSNudge\n },\n extraLarge: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n marginLeft: tokens.spacingHorizontalS\n },\n strong: {\n fontWeight: tokens.fontWeightSemibold\n },\n divider: {\n '::before': {\n content: '\"· \"'\n }\n }\n});\n/**\n * Apply styling to the RatingDisplay slots based on the state\n */ export const useRatingDisplayStyles_unstable = (state)=>{\n const { size } = state;\n const rootClassName = useRootClassName();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(ratingDisplayClassNames.root, rootClassName, state.root.className);\n const labelClassName = useLabelClassName();\n const labelStyles = useLabelStyles();\n if (state.valueText) {\n // eslint-disable-next-line react-hooks/immutability\n state.valueText.className = mergeClasses(ratingDisplayClassNames.valueText, labelClassName, labelStyles.strong, size === 'large' && labelStyles.large, size === 'extra-large' && labelStyles.extraLarge, state.valueText.className);\n }\n if (state.countText) {\n // eslint-disable-next-line react-hooks/immutability\n state.countText.className = mergeClasses(ratingDisplayClassNames.countText, labelClassName, size === 'large' && labelStyles.large, size === 'extra-large' && labelStyles.extraLarge, state.valueText && labelStyles.divider, state.countText.className);\n }\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","typographyStyles","ratingDisplayClassNames","root","valueText","countText","useRootClassName","useLabelClassName","useLabelStyles","large","Be2twd7","Bg96gwp","Frg6f3","extraLarge","strong","Bhrd7zp","divider","Ftih45","d","useRatingDisplayStyles_unstable","state","size","rootClassName","className","labelClassName","labelStyles"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCK,uBAAuB;;;mCAuCY;eAA/BiB;;;uBAzCyC,gBAAgB;AAEnE,gCAAgC;IACnChB,IAAI,EAAE,mBAAmB;IACzBC,SAAS,EAAE,8BAA8B;IACzCC,SAAS,EAAE;AACf,CAAC;AACD;;CAEA,GAAI,MAAMC,gBAAgB,GAAA,WAAA,OAAGT,oBAAA,EAAA,WAAA,MAAA;IAAA;CAI5B,CAAC;AACF,MAAMU,iBAAiB,GAAA,WAAA,OAAGV,oBAAA,EAAA,WAAA,WAAA;IAAA;IAAA;CAIzB,CAAC;AACF,MAAMW,cAAc,GAAA,WAAA,OAAGV,eAAA,EAAA;IAAAW,KAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,UAAA,EAAA;QAAAH,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAmBtB,CAAC;AAGS,yCAAyCE,KAAK,IAAG;IACxD,MAAM,EAAEC,IAAAA,EAAM,GAAGD,KAAK;IACtB,MAAME,aAAa,GAAGhB,gBAAgB,CAAC,CAAC;IACxC,oDAAA;IACAc,KAAK,CAACjB,IAAI,CAACoB,SAAS,OAAGxB,mBAAY,EAACG,uBAAuB,CAACC,IAAI,EAAEmB,aAAa,EAAEF,KAAK,CAACjB,IAAI,CAACoB,SAAS,CAAC;IACtG,MAAMC,cAAc,GAAGjB,iBAAiB,CAAC,CAAC;IAC1C,MAAMkB,WAAW,GAAGjB,cAAc,CAAC,CAAC;IACpC,IAAIY,KAAK,CAAChB,SAAS,EAAE;QACjB,oDAAA;QACAgB,KAAK,CAAChB,SAAS,CAACmB,SAAS,OAAGxB,mBAAY,EAACG,uBAAuB,CAACE,SAAS,EAAEoB,cAAc,EAAEC,WAAW,CAACX,MAAM,EAAEO,IAAI,KAAK,OAAO,IAAII,WAAW,CAAChB,KAAK,EAAEY,IAAI,KAAK,aAAa,IAAII,WAAW,CAACZ,UAAU,EAAEO,KAAK,CAAChB,SAAS,CAACmB,SAAS,CAAC;IACvO;IACA,IAAIH,KAAK,CAACf,SAAS,EAAE;QACjB,oDAAA;QACAe,KAAK,CAACf,SAAS,CAACkB,SAAS,OAAGxB,mBAAY,EAACG,uBAAuB,CAACG,SAAS,EAAEmB,cAAc,EAAEH,IAAI,KAAK,OAAO,IAAII,WAAW,CAAChB,KAAK,EAAEY,IAAI,KAAK,aAAa,IAAII,WAAW,CAACZ,UAAU,EAAEO,KAAK,CAAChB,SAAS,IAAIqB,WAAW,CAACT,OAAO,EAAEI,KAAK,CAACf,SAAS,CAACkB,SAAS,CAAC;IAC3P;IACA,OAAOH,KAAK;AAChB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/RatingDisplay/useRatingDisplayStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { RatingDisplaySlots, RatingDisplayState } from './RatingDisplay.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const ratingDisplayClassNames: SlotClassNames<RatingDisplaySlots> = {\n root: 'fui-RatingDisplay',\n valueText: 'fui-RatingDisplay__valueText',\n countText: 'fui-RatingDisplay__countText',\n};\n\n/**\n * Styles for the root slot\n */\n\nconst useRootClassName = makeResetStyles({\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'center',\n});\n\nconst useLabelClassName = makeResetStyles({\n color: tokens.colorNeutralForeground1,\n marginLeft: tokens.spacingHorizontalXS,\n ...typographyStyles.caption1,\n});\n\nconst useLabelStyles = makeStyles({\n large: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n marginLeft: tokens.spacingHorizontalSNudge,\n },\n extraLarge: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n marginLeft: tokens.spacingHorizontalS,\n },\n strong: {\n fontWeight: tokens.fontWeightSemibold,\n },\n divider: {\n '::before': {\n content: '\"· \"',\n },\n },\n});\n\n/**\n * Apply styling to the RatingDisplay slots based on the state\n */\nexport const useRatingDisplayStyles_unstable = (state: RatingDisplayState): RatingDisplayState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/RatingDisplay/useRatingDisplayStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { RatingDisplaySlots, RatingDisplayState } from './RatingDisplay.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const ratingDisplayClassNames: SlotClassNames<RatingDisplaySlots> = {\n root: 'fui-RatingDisplay',\n valueText: 'fui-RatingDisplay__valueText',\n countText: 'fui-RatingDisplay__countText',\n};\n\n/**\n * Styles for the root slot\n */\n\nconst useRootClassName = makeResetStyles({\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'center',\n});\n\nconst useLabelClassName = makeResetStyles({\n color: tokens.colorNeutralForeground1,\n marginLeft: tokens.spacingHorizontalXS,\n ...typographyStyles.caption1,\n});\n\nconst useLabelStyles = makeStyles({\n large: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n marginLeft: tokens.spacingHorizontalSNudge,\n },\n extraLarge: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n marginLeft: tokens.spacingHorizontalS,\n },\n strong: {\n fontWeight: tokens.fontWeightSemibold,\n },\n divider: {\n '::before': {\n content: '\"· \"',\n },\n },\n});\n\n/**\n * Apply styling to the RatingDisplay slots based on the state\n */\nexport const useRatingDisplayStyles_unstable = (state: RatingDisplayState): RatingDisplayState => {\n const { size } = state;\n const rootClassName = useRootClassName();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(ratingDisplayClassNames.root, rootClassName, state.root.className);\n const labelClassName = useLabelClassName();\n const labelStyles = useLabelStyles();\n\n if (state.valueText) {\n // eslint-disable-next-line react-hooks/immutability\n state.valueText.className = mergeClasses(\n ratingDisplayClassNames.valueText,\n labelClassName,\n labelStyles.strong,\n size === 'large' && labelStyles.large,\n size === 'extra-large' && labelStyles.extraLarge,\n state.valueText.className,\n );\n }\n if (state.countText) {\n // eslint-disable-next-line react-hooks/immutability\n state.countText.className = mergeClasses(\n ratingDisplayClassNames.countText,\n labelClassName,\n size === 'large' && labelStyles.large,\n size === 'extra-large' && labelStyles.extraLarge,\n state.valueText && labelStyles.divider,\n state.countText.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","ratingDisplayClassNames","root","valueText","countText","useRootClassName","display","flexWrap","alignItems","useLabelClassName","color","colorNeutralForeground1","marginLeft","spacingHorizontalXS","caption1","useLabelStyles","large","fontSize","fontSizeBase300","lineHeight","lineHeightBase300","spacingHorizontalSNudge","extraLarge","fontSizeBase400","lineHeightBase400","spacingHorizontalS","strong","fontWeight","fontWeightSemibold","divider","content","useRatingDisplayStyles_unstable","state","size","rootClassName","className","labelClassName","labelStyles"],"mappings":"AAAA;;;;;;;;;;;;IAOaK,uBAAAA;;;mCA8CA8B;;;;uBAnD6C,iBAAiB;4BAGlC,wBAAwB;AAE1D,gCAAoE;IACzE7B,MAAM;IACNC,WAAW;IACXC,WAAW;AACb,EAAE;AAEF;;CAEC,GAED,MAAMC,uBAAmBT,sBAAAA,EAAgB;IACvCU,SAAS;IACTC,UAAU;IACVC,YAAY;AACd;AAEA,MAAMC,wBAAoBb,sBAAAA,EAAgB;IACxCc,OAAOX,kBAAAA,CAAOY,uBAAuB;IACrCC,YAAYb,kBAAAA,CAAOc,mBAAmB;IACtC,GAAGb,4BAAAA,CAAiBc,QAAQ;AAC9B;AAEA,MAAMC,qBAAiBlB,iBAAAA,EAAW;IAChCmB,OAAO;QACLC,UAAUlB,kBAAAA,CAAOmB,eAAe;QAChCC,YAAYpB,kBAAAA,CAAOqB,iBAAiB;QACpCR,YAAYb,kBAAAA,CAAOsB,uBAAuB;IAC5C;IACAC,YAAY;QACVL,UAAUlB,kBAAAA,CAAOwB,eAAe;QAChCJ,YAAYpB,kBAAAA,CAAOyB,iBAAiB;QACpCZ,YAAYb,kBAAAA,CAAO0B,kBAAkB;IACvC;IACAC,QAAQ;QACNC,YAAY5B,kBAAAA,CAAO6B,kBAAkB;IACvC;IACAC,SAAS;QACP,YAAY;YACVC,SAAS;QACX;IACF;AACF;AAKO,MAAMC,kCAAkC,CAACC;IAC9C,MAAM,EAAEC,IAAI,EAAE,GAAGD;IACjB,MAAME,gBAAgB7B;IACtB,oDAAoD;IACpD2B,MAAM9B,IAAI,CAACiC,SAAS,OAAGrC,mBAAAA,EAAaG,wBAAwBC,IAAI,EAAEgC,eAAeF,MAAM9B,IAAI,CAACiC,SAAS;IACrG,MAAMC,iBAAiB3B;IACvB,MAAM4B,cAActB;IAEpB,IAAIiB,MAAM7B,SAAS,EAAE;QACnB,oDAAoD;QACpD6B,MAAM7B,SAAS,CAACgC,SAAS,OAAGrC,mBAAAA,EAC1BG,wBAAwBE,SAAS,EACjCiC,gBACAC,YAAYX,MAAM,EAClBO,SAAS,WAAWI,YAAYrB,KAAK,EACrCiB,SAAS,iBAAiBI,YAAYf,UAAU,EAChDU,MAAM7B,SAAS,CAACgC,SAAS;IAE7B;IACA,IAAIH,MAAM5B,SAAS,EAAE;QACnB,oDAAoD;QACpD4B,MAAM5B,SAAS,CAAC+B,SAAS,OAAGrC,mBAAAA,EAC1BG,wBAAwBG,SAAS,EACjCgC,gBACAH,SAAS,WAAWI,YAAYrB,KAAK,EACrCiB,SAAS,iBAAiBI,YAAYf,UAAU,EAChDU,MAAM7B,SAAS,IAAIkC,YAAYR,OAAO,EACtCG,MAAM5B,SAAS,CAAC+B,SAAS;IAE7B;IAEA,OAAOH;AACT,EAAE"}
|
|
@@ -277,7 +277,6 @@ const useIndicatorStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
277
277
|
]
|
|
278
278
|
});
|
|
279
279
|
const useRatingItemStyles_unstable = (state)=>{
|
|
280
|
-
'use no memo';
|
|
281
280
|
const { color, size, iconFillWidth, appearance } = state;
|
|
282
281
|
const styles = useStyles();
|
|
283
282
|
const inputBaseClassName = useInputBaseClassName();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useRatingItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nexport const ratingItemClassNames = {\n root: 'fui-RatingItem',\n selectedIcon: 'fui-RatingItem__selectedIcon',\n unselectedIcon: 'fui-RatingItem__unselectedIcon',\n halfValueInput: 'fui-RatingItem__halfValueInput',\n fullValueInput: 'fui-RatingItem__fullValueInput'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n position: 'relative',\n ...createFocusOutlineStyle({\n style: {},\n selector: 'focus-within'\n })\n },\n small: {\n fontSize: '12px',\n width: '12px',\n height: '12px'\n },\n medium: {\n fontSize: '16px',\n width: '16px',\n height: '16px'\n },\n large: {\n fontSize: '20px',\n width: '20px',\n height: '20px'\n },\n 'extra-large': {\n fontSize: '28px',\n width: '28px',\n height: '28px'\n }\n});\nconst useInputBaseClassName = makeResetStyles({\n position: 'absolute',\n left: 0,\n top: 0,\n right: 0,\n bottom: 0,\n boxSizing: 'border-box',\n margin: 0,\n opacity: 0,\n cursor: 'pointer',\n height: '100%'\n});\nconst useInputStyles = makeStyles({\n lowerHalf: {\n right: '50%'\n },\n upperHalf: {\n left: '50%'\n }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n display: 'flex',\n overflow: 'hidden',\n color: tokens.colorNeutralForeground1,\n fill: 'currentColor',\n pointerEvents: 'none',\n position: 'absolute',\n left: 0,\n right: 0,\n top: 0,\n bottom: 0\n});\nconst useIndicatorStyles = makeStyles({\n lowerHalf: {\n right: '50%',\n '& > svg': {\n flex: '0 0 auto'\n }\n },\n upperHalf: {\n left: '50%',\n marginLeft: '-50%'\n },\n brand: {\n color: tokens.colorBrandForeground1\n },\n marigold: {\n color: tokens.colorPaletteMarigoldBorderActive\n },\n filled: {\n color: tokens.colorNeutralBackground6,\n stroke: tokens.colorTransparentStroke,\n '@media (forced-colors: active)': {\n color: 'Canvas',\n stroke: 'CanvasText'\n }\n },\n brandFilled: {\n color: tokens.colorBrandBackground2\n },\n marigoldFilled: {\n color: tokens.colorPaletteMarigoldBackground2\n }\n});\n/**\n * Apply styling to the RatingItem slots based on the state\n */ export const useRatingItemStyles_unstable = (state)=>{\n 'use no memo';\n const { color, size, iconFillWidth, appearance } = state;\n const styles = useStyles();\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(ratingItemClassNames.root, styles.root, styles[size], state.root.className);\n if (state.halfValueInput) {\n // eslint-disable-next-line react-hooks/immutability\n state.halfValueInput.className = mergeClasses(ratingItemClassNames.halfValueInput, inputBaseClassName, inputStyles.lowerHalf, state.halfValueInput.className);\n }\n if (state.fullValueInput) {\n // eslint-disable-next-line react-hooks/immutability\n state.fullValueInput.className = mergeClasses(ratingItemClassNames.fullValueInput, inputBaseClassName, state.halfValueInput && inputStyles.upperHalf, state.fullValueInput.className);\n }\n if (state.unselectedIcon) {\n // eslint-disable-next-line react-hooks/immutability\n state.unselectedIcon.className = mergeClasses(ratingItemClassNames.unselectedIcon, indicatorBaseClassName, appearance === 'filled' && indicatorStyles.filled, color === 'brand' && (appearance === 'filled' ? indicatorStyles.brandFilled : indicatorStyles.brand), color === 'marigold' && (appearance === 'filled' ? indicatorStyles.marigoldFilled : indicatorStyles.marigold), iconFillWidth === 0.5 && indicatorStyles.upperHalf, state.unselectedIcon.className);\n }\n if (state.selectedIcon) {\n // eslint-disable-next-line react-hooks/immutability\n state.selectedIcon.className = mergeClasses(ratingItemClassNames.selectedIcon, indicatorBaseClassName, color === 'brand' && indicatorStyles.brand, color === 'marigold' && indicatorStyles.marigold, iconFillWidth === 0.5 && indicatorStyles.lowerHalf, state.selectedIcon.className);\n }\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","createFocusOutlineStyle","ratingItemClassNames","root","selectedIcon","unselectedIcon","halfValueInput","fullValueInput","useStyles","qhf8xq","Brovlpu","B486eqv","Bssx7fj","uh7if5","clntm0","Dlk2r6","h6p2u","I6qiy5","yzno9d","By0wis0","B2j2mmj","wigs8","pbfy6t","B0v4ure","Byrf0fs","Bsiemmq","Bwckmig","skfxo0","Iidy0u","B98u21t","Bvwlmkc","jo1ztg","Ba1iezr","Blmvk6g","B24cy0v","Bil7v7r","Br3gin4","nr063g","ghq09","Bbgo44z","Bseh09z","az1dzo","Ba3ybja","B6352mv","vppk2z","Biaj6j7","B2pnrqr","B29w5g4","Bhhzhcn","Bec0n69","small","Be2twd7","a9b677","Bqenvij","medium","large","d","p","f","i","m","useInputBaseClassName","useInputStyles","lowerHalf","j35jbq","upperHalf","oyh7mz","useIndicatorBaseClassName","useIndicatorStyles","l5kjut","uoufgc","v39lw8","Bbwb3tu","Frg6f3","brand","sj55zd","marigold","filled","ojy3ng","B7iucu3","Biw2w6l","brandFilled","marigoldFilled","useRatingItemStyles_unstable","state","color","size","iconFillWidth","appearance","styles","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","className"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["useRatingItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nexport const ratingItemClassNames = {\n root: 'fui-RatingItem',\n selectedIcon: 'fui-RatingItem__selectedIcon',\n unselectedIcon: 'fui-RatingItem__unselectedIcon',\n halfValueInput: 'fui-RatingItem__halfValueInput',\n fullValueInput: 'fui-RatingItem__fullValueInput'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n position: 'relative',\n ...createFocusOutlineStyle({\n style: {},\n selector: 'focus-within'\n })\n },\n small: {\n fontSize: '12px',\n width: '12px',\n height: '12px'\n },\n medium: {\n fontSize: '16px',\n width: '16px',\n height: '16px'\n },\n large: {\n fontSize: '20px',\n width: '20px',\n height: '20px'\n },\n 'extra-large': {\n fontSize: '28px',\n width: '28px',\n height: '28px'\n }\n});\nconst useInputBaseClassName = makeResetStyles({\n position: 'absolute',\n left: 0,\n top: 0,\n right: 0,\n bottom: 0,\n boxSizing: 'border-box',\n margin: 0,\n opacity: 0,\n cursor: 'pointer',\n height: '100%'\n});\nconst useInputStyles = makeStyles({\n lowerHalf: {\n right: '50%'\n },\n upperHalf: {\n left: '50%'\n }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n display: 'flex',\n overflow: 'hidden',\n color: tokens.colorNeutralForeground1,\n fill: 'currentColor',\n pointerEvents: 'none',\n position: 'absolute',\n left: 0,\n right: 0,\n top: 0,\n bottom: 0\n});\nconst useIndicatorStyles = makeStyles({\n lowerHalf: {\n right: '50%',\n '& > svg': {\n flex: '0 0 auto'\n }\n },\n upperHalf: {\n left: '50%',\n marginLeft: '-50%'\n },\n brand: {\n color: tokens.colorBrandForeground1\n },\n marigold: {\n color: tokens.colorPaletteMarigoldBorderActive\n },\n filled: {\n color: tokens.colorNeutralBackground6,\n stroke: tokens.colorTransparentStroke,\n '@media (forced-colors: active)': {\n color: 'Canvas',\n stroke: 'CanvasText'\n }\n },\n brandFilled: {\n color: tokens.colorBrandBackground2\n },\n marigoldFilled: {\n color: tokens.colorPaletteMarigoldBackground2\n }\n});\n/**\n * Apply styling to the RatingItem slots based on the state\n */ export const useRatingItemStyles_unstable = (state)=>{\n const { color, size, iconFillWidth, appearance } = state;\n const styles = useStyles();\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(ratingItemClassNames.root, styles.root, styles[size], state.root.className);\n if (state.halfValueInput) {\n // eslint-disable-next-line react-hooks/immutability\n state.halfValueInput.className = mergeClasses(ratingItemClassNames.halfValueInput, inputBaseClassName, inputStyles.lowerHalf, state.halfValueInput.className);\n }\n if (state.fullValueInput) {\n // eslint-disable-next-line react-hooks/immutability\n state.fullValueInput.className = mergeClasses(ratingItemClassNames.fullValueInput, inputBaseClassName, state.halfValueInput && inputStyles.upperHalf, state.fullValueInput.className);\n }\n if (state.unselectedIcon) {\n // eslint-disable-next-line react-hooks/immutability\n state.unselectedIcon.className = mergeClasses(ratingItemClassNames.unselectedIcon, indicatorBaseClassName, appearance === 'filled' && indicatorStyles.filled, color === 'brand' && (appearance === 'filled' ? indicatorStyles.brandFilled : indicatorStyles.brand), color === 'marigold' && (appearance === 'filled' ? indicatorStyles.marigoldFilled : indicatorStyles.marigold), iconFillWidth === 0.5 && indicatorStyles.upperHalf, state.unselectedIcon.className);\n }\n if (state.selectedIcon) {\n // eslint-disable-next-line react-hooks/immutability\n state.selectedIcon.className = mergeClasses(ratingItemClassNames.selectedIcon, indicatorBaseClassName, color === 'brand' && indicatorStyles.brand, color === 'marigold' && indicatorStyles.marigold, iconFillWidth === 0.5 && indicatorStyles.lowerHalf, state.selectedIcon.className);\n }\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","createFocusOutlineStyle","ratingItemClassNames","root","selectedIcon","unselectedIcon","halfValueInput","fullValueInput","useStyles","qhf8xq","Brovlpu","B486eqv","Bssx7fj","uh7if5","clntm0","Dlk2r6","h6p2u","I6qiy5","yzno9d","By0wis0","B2j2mmj","wigs8","pbfy6t","B0v4ure","Byrf0fs","Bsiemmq","Bwckmig","skfxo0","Iidy0u","B98u21t","Bvwlmkc","jo1ztg","Ba1iezr","Blmvk6g","B24cy0v","Bil7v7r","Br3gin4","nr063g","ghq09","Bbgo44z","Bseh09z","az1dzo","Ba3ybja","B6352mv","vppk2z","Biaj6j7","B2pnrqr","B29w5g4","Bhhzhcn","Bec0n69","small","Be2twd7","a9b677","Bqenvij","medium","large","d","p","f","i","m","useInputBaseClassName","useInputStyles","lowerHalf","j35jbq","upperHalf","oyh7mz","useIndicatorBaseClassName","useIndicatorStyles","l5kjut","uoufgc","v39lw8","Bbwb3tu","Frg6f3","brand","sj55zd","marigold","filled","ojy3ng","B7iucu3","Biw2w6l","brandFilled","marigoldFilled","useRatingItemStyles_unstable","state","color","size","iconFillWidth","appearance","styles","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","className"],"mappings":"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"}
|
|
@@ -123,7 +123,6 @@ const useIndicatorStyles = (0, _react.makeStyles)({
|
|
|
123
123
|
}
|
|
124
124
|
});
|
|
125
125
|
const useRatingItemStyles_unstable = (state)=>{
|
|
126
|
-
'use no memo';
|
|
127
126
|
const { color, size, iconFillWidth, appearance } = state;
|
|
128
127
|
const styles = useStyles();
|
|
129
128
|
const inputBaseClassName = useInputBaseClassName();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/RatingItem/useRatingItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport type { RatingItemSlots, RatingItemState } from './RatingItem.types';\n\nexport const ratingItemClassNames: SlotClassNames<RatingItemSlots> = {\n root: 'fui-RatingItem',\n selectedIcon: 'fui-RatingItem__selectedIcon',\n unselectedIcon: 'fui-RatingItem__unselectedIcon',\n halfValueInput: 'fui-RatingItem__halfValueInput',\n fullValueInput: 'fui-RatingItem__fullValueInput',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n small: {\n fontSize: '12px',\n width: '12px',\n height: '12px',\n },\n\n medium: {\n fontSize: '16px',\n width: '16px',\n height: '16px',\n },\n\n large: {\n fontSize: '20px',\n width: '20px',\n height: '20px',\n },\n\n 'extra-large': {\n fontSize: '28px',\n width: '28px',\n height: '28px',\n },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n position: 'absolute',\n left: 0,\n top: 0,\n right: 0,\n bottom: 0,\n boxSizing: 'border-box',\n margin: 0,\n opacity: 0,\n cursor: 'pointer',\n height: '100%',\n});\n\nconst useInputStyles = makeStyles({\n lowerHalf: {\n right: '50%',\n },\n upperHalf: {\n left: '50%',\n },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n display: 'flex',\n overflow: 'hidden',\n color: tokens.colorNeutralForeground1,\n fill: 'currentColor',\n pointerEvents: 'none',\n position: 'absolute',\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n});\n\nconst useIndicatorStyles = makeStyles({\n lowerHalf: {\n right: '50%',\n '& > svg': {\n flex: '0 0 auto',\n },\n },\n upperHalf: {\n left: '50%',\n marginLeft: '-50%',\n },\n brand: {\n color: tokens.colorBrandForeground1,\n },\n marigold: {\n color: tokens.colorPaletteMarigoldBorderActive,\n },\n filled: {\n color: tokens.colorNeutralBackground6,\n stroke: tokens.colorTransparentStroke,\n '@media (forced-colors: active)': {\n color: 'Canvas',\n stroke: 'CanvasText',\n },\n },\n brandFilled: {\n color: tokens.colorBrandBackground2,\n },\n marigoldFilled: {\n color: tokens.colorPaletteMarigoldBackground2,\n },\n});\n\n/**\n * Apply styling to the RatingItem slots based on the state\n */\nexport const useRatingItemStyles_unstable = (state: RatingItemState): RatingItemState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/RatingItem/useRatingItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport type { RatingItemSlots, RatingItemState } from './RatingItem.types';\n\nexport const ratingItemClassNames: SlotClassNames<RatingItemSlots> = {\n root: 'fui-RatingItem',\n selectedIcon: 'fui-RatingItem__selectedIcon',\n unselectedIcon: 'fui-RatingItem__unselectedIcon',\n halfValueInput: 'fui-RatingItem__halfValueInput',\n fullValueInput: 'fui-RatingItem__fullValueInput',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n small: {\n fontSize: '12px',\n width: '12px',\n height: '12px',\n },\n\n medium: {\n fontSize: '16px',\n width: '16px',\n height: '16px',\n },\n\n large: {\n fontSize: '20px',\n width: '20px',\n height: '20px',\n },\n\n 'extra-large': {\n fontSize: '28px',\n width: '28px',\n height: '28px',\n },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n position: 'absolute',\n left: 0,\n top: 0,\n right: 0,\n bottom: 0,\n boxSizing: 'border-box',\n margin: 0,\n opacity: 0,\n cursor: 'pointer',\n height: '100%',\n});\n\nconst useInputStyles = makeStyles({\n lowerHalf: {\n right: '50%',\n },\n upperHalf: {\n left: '50%',\n },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n display: 'flex',\n overflow: 'hidden',\n color: tokens.colorNeutralForeground1,\n fill: 'currentColor',\n pointerEvents: 'none',\n position: 'absolute',\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n});\n\nconst useIndicatorStyles = makeStyles({\n lowerHalf: {\n right: '50%',\n '& > svg': {\n flex: '0 0 auto',\n },\n },\n upperHalf: {\n left: '50%',\n marginLeft: '-50%',\n },\n brand: {\n color: tokens.colorBrandForeground1,\n },\n marigold: {\n color: tokens.colorPaletteMarigoldBorderActive,\n },\n filled: {\n color: tokens.colorNeutralBackground6,\n stroke: tokens.colorTransparentStroke,\n '@media (forced-colors: active)': {\n color: 'Canvas',\n stroke: 'CanvasText',\n },\n },\n brandFilled: {\n color: tokens.colorBrandBackground2,\n },\n marigoldFilled: {\n color: tokens.colorPaletteMarigoldBackground2,\n },\n});\n\n/**\n * Apply styling to the RatingItem slots based on the state\n */\nexport const useRatingItemStyles_unstable = (state: RatingItemState): RatingItemState => {\n const { color, size, iconFillWidth, appearance } = state;\n const styles = useStyles();\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(ratingItemClassNames.root, styles.root, styles[size], state.root.className);\n\n if (state.halfValueInput) {\n // eslint-disable-next-line react-hooks/immutability\n state.halfValueInput.className = mergeClasses(\n ratingItemClassNames.halfValueInput,\n inputBaseClassName,\n inputStyles.lowerHalf,\n state.halfValueInput.className,\n );\n }\n\n if (state.fullValueInput) {\n // eslint-disable-next-line react-hooks/immutability\n state.fullValueInput.className = mergeClasses(\n ratingItemClassNames.fullValueInput,\n inputBaseClassName,\n state.halfValueInput && inputStyles.upperHalf,\n state.fullValueInput.className,\n );\n }\n\n if (state.unselectedIcon) {\n // eslint-disable-next-line react-hooks/immutability\n state.unselectedIcon.className = mergeClasses(\n ratingItemClassNames.unselectedIcon,\n indicatorBaseClassName,\n appearance === 'filled' && indicatorStyles.filled,\n color === 'brand' && (appearance === 'filled' ? indicatorStyles.brandFilled : indicatorStyles.brand),\n color === 'marigold' && (appearance === 'filled' ? indicatorStyles.marigoldFilled : indicatorStyles.marigold),\n iconFillWidth === 0.5 && indicatorStyles.upperHalf,\n state.unselectedIcon.className,\n );\n }\n\n if (state.selectedIcon) {\n // eslint-disable-next-line react-hooks/immutability\n state.selectedIcon.className = mergeClasses(\n ratingItemClassNames.selectedIcon,\n indicatorBaseClassName,\n color === 'brand' && indicatorStyles.brand,\n color === 'marigold' && indicatorStyles.marigold,\n iconFillWidth === 0.5 && indicatorStyles.lowerHalf,\n state.selectedIcon.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","createFocusOutlineStyle","ratingItemClassNames","root","selectedIcon","unselectedIcon","halfValueInput","fullValueInput","useStyles","position","style","selector","small","fontSize","width","height","medium","large","useInputBaseClassName","left","top","right","bottom","boxSizing","margin","opacity","cursor","useInputStyles","lowerHalf","upperHalf","useIndicatorBaseClassName","display","overflow","color","colorNeutralForeground1","fill","pointerEvents","useIndicatorStyles","flex","marginLeft","brand","colorBrandForeground1","marigold","colorPaletteMarigoldBorderActive","filled","colorNeutralBackground6","stroke","colorTransparentStroke","brandFilled","colorBrandBackground2","marigoldFilled","colorPaletteMarigoldBackground2","useRatingItemStyles_unstable","state","size","iconFillWidth","appearance","styles","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","className"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-rating",
|
|
3
|
-
"version": "9.4.
|
|
3
|
+
"version": "9.4.3",
|
|
4
4
|
"description": "Rating component for building web experiences",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -12,12 +12,12 @@
|
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@fluentui/react-jsx-runtime": "^9.4.
|
|
15
|
+
"@fluentui/react-jsx-runtime": "^9.4.4",
|
|
16
16
|
"@fluentui/react-icons": "^2.0.245",
|
|
17
17
|
"@fluentui/react-shared-contexts": "^9.26.2",
|
|
18
18
|
"@fluentui/react-theme": "^9.2.1",
|
|
19
|
-
"@fluentui/react-tabster": "^9.26.
|
|
20
|
-
"@fluentui/react-utilities": "^9.26.
|
|
19
|
+
"@fluentui/react-tabster": "^9.26.16",
|
|
20
|
+
"@fluentui/react-utilities": "^9.26.5",
|
|
21
21
|
"@griffel/react": "^1.5.32",
|
|
22
22
|
"@swc/helpers": "^0.5.1"
|
|
23
23
|
},
|