@fluentui/react-spinner 9.8.2 → 9.8.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.
Files changed (10) hide show
  1. package/CHANGELOG.md +16 -5
  2. package/lib/components/Spinner/useSpinnerStyles.styles.js +4 -0
  3. package/lib/components/Spinner/useSpinnerStyles.styles.js.map +1 -1
  4. package/lib/components/Spinner/useSpinnerStyles.styles.raw.js +4 -0
  5. package/lib/components/Spinner/useSpinnerStyles.styles.raw.js.map +1 -1
  6. package/lib-commonjs/components/Spinner/useSpinnerStyles.styles.js +4 -0
  7. package/lib-commonjs/components/Spinner/useSpinnerStyles.styles.js.map +1 -1
  8. package/lib-commonjs/components/Spinner/useSpinnerStyles.styles.raw.js +4 -0
  9. package/lib-commonjs/components/Spinner/useSpinnerStyles.styles.raw.js.map +1 -1
  10. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,20 +1,31 @@
1
1
  # Change Log - @fluentui/react-spinner
2
2
 
3
- This log was last generated on Thu, 23 Apr 2026 11:59:32 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 26 May 2026 09:34:01 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.8.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.8.3)
8
+
9
+ Tue, 26 May 2026 09:34:01 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.8.2..@fluentui/react-spinner_v9.8.3)
11
+
12
+ ### Patches
13
+
14
+ - Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
15
+ - Bump @fluentui/react-label to v9.4.2 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
16
+ - Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
17
+
7
18
  ## [9.8.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.8.2)
8
19
 
9
- Thu, 23 Apr 2026 11:59:32 GMT
20
+ Thu, 23 Apr 2026 14:21:06 GMT
10
21
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.8.1..@fluentui/react-spinner_v9.8.2)
11
22
 
12
23
  ### Patches
13
24
 
14
25
  - fix: drop unnecessary dependencies from base hooks ([PR #35972](https://github.com/microsoft/fluentui/pull/35972) by dmytrokirpa@microsoft.com)
15
- - Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
16
- - Bump @fluentui/react-label to v9.4.1 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
17
- - Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
26
+ - Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
27
+ - Bump @fluentui/react-label to v9.4.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
28
+ - Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
18
29
 
19
30
  ## [9.8.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.8.1)
20
31
 
package/lib/components/Spinner/useSpinnerStyles.styles.js CHANGED
@@ -166,14 +166,18 @@ export const useSpinnerStyles_unstable = state => {
166
166
  const spinnerStyles = useSpinnerStyles();
167
167
  const spinnerTailBaseClassName = useSpinnerTailBaseClassName();
168
168
  const labelStyles = useLabelStyles();
169
+ // eslint-disable-next-line react-hooks/immutability
169
170
  state.root.className = mergeClasses(spinnerClassNames.root, rootBaseClassName, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, state.root.className);
170
171
  if (state.spinner) {
172
+ // eslint-disable-next-line react-hooks/immutability
171
173
  state.spinner.className = mergeClasses(spinnerClassNames.spinner, spinnerBaseClassName, spinnerStyles[size], appearance === 'inverted' && spinnerStyles.inverted, state.spinner.className);
172
174
  }
173
175
  if (state.spinnerTail) {
176
+ // eslint-disable-next-line react-hooks/immutability
174
177
  state.spinnerTail.className = mergeClasses(spinnerClassNames.spinnerTail, spinnerTailBaseClassName, dir === 'rtl' && spinnerStyles.rtlTail, state.spinnerTail.className);
175
178
  }
176
179
  if (state.label) {
180
+ // eslint-disable-next-line react-hooks/immutability
177
181
  state.label.className = mergeClasses(spinnerClassNames.label, labelStyles[size], appearance === 'inverted' && labelStyles.inverted, state.label.className);
178
182
  }
179
183
  return state;
package/lib/components/Spinner/useSpinnerStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["useFluent_unstable","useFluent","tokens","typographyStyles","__resetStyles","__styles","mergeClasses","spinnerClassNames","root","spinner","spinnerTail","label","vars","strokeWidth","useRootBaseClassName","useRootStyles","vertical","Beiy3e4","d","useSpinnerBaseClassName","r","s","useSpinnerTailBaseClassName","useSpinnerStyles","inverted","De3pzq","sj55zd","rtlTail","btxmck","gb5jj2","Bdya8wy","Bqenvij","a9b677","qmp6fs","tiny","small","medium","large","huge","m","useLabelStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useSpinnerStyles_unstable","state","labelPosition","size","appearance","dir","rootBaseClassName","rootStyles","spinnerBaseClassName","spinnerStyles","spinnerTailBaseClassName","labelStyles","className"],"sources":["useSpinnerStyles.styles.js"],"sourcesContent":["'use client';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const spinnerClassNames = {\n root: 'fui-Spinner',\n spinner: 'fui-Spinner__spinner',\n spinnerTail: 'fui-Spinner__spinnerTail',\n label: 'fui-Spinner__label'\n};\n/**\n * CSS variables used internally by Spinner\n */ const vars = {\n strokeWidth: '--fui-Spinner--strokeWidth'\n};\nconst useRootBaseClassName = makeResetStyles({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n lineHeight: '0',\n gap: '8px',\n overflow: 'hidden',\n minWidth: 'min-content'\n});\nconst useRootStyles = makeStyles({\n vertical: {\n flexDirection: 'column'\n }\n});\nconst useSpinnerBaseClassName = makeResetStyles({\n position: 'relative',\n flexShrink: 0,\n // Use a mask to create the ring shape of the spinner.\n maskImage: `radial-gradient(closest-side, ` + `transparent calc(100% - var(${vars.strokeWidth}) - 1px), ` + `white calc(100% - var(${vars.strokeWidth})) calc(100% - 1px), ` + `transparent 100%)`,\n backgroundColor: tokens.colorBrandStroke2Contrast,\n color: tokens.colorBrandStroke1,\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'HighlightText',\n color: 'Highlight',\n forcedColorAdjust: 'none'\n },\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'linear',\n animationName: {\n '0%': {\n transform: 'rotate(0deg)'\n },\n '100%': {\n transform: 'rotate(360deg)'\n }\n },\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '1.8s'\n }\n});\n// The spinner tail is rendered using two 135deg arc segments, behind a 105deg arc mask.\n// The segments are rotated out from behind the mask to expand the visible arc from\n// 30deg (min) to 255deg (max), and then back behind the mask again to shrink the arc.\n// The tail and spinner itself also have 360deg rotation animations for the spin.\nconst useSpinnerTailBaseClassName = makeResetStyles({\n position: 'absolute',\n display: 'block',\n width: '100%',\n height: '100%',\n maskImage: 'conic-gradient(transparent 105deg, white 105deg)',\n '&::before, &::after': {\n content: '\"\"',\n position: 'absolute',\n display: 'block',\n width: '100%',\n height: '100%',\n animation: 'inherit',\n backgroundImage: 'conic-gradient(currentcolor 135deg, transparent 135deg)'\n },\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: tokens.curveEasyEase,\n animationName: {\n '0%': {\n transform: 'rotate(-135deg)'\n },\n '50%': {\n transform: 'rotate(0deg)'\n },\n '100%': {\n transform: 'rotate(225deg)'\n }\n },\n '&::before': {\n animationName: {\n '0%': {\n transform: 'rotate(0deg)'\n },\n '50%': {\n transform: 'rotate(105deg)'\n },\n '100%': {\n transform: 'rotate(0deg)'\n }\n }\n },\n '&::after': {\n animationName: {\n '0%': {\n transform: 'rotate(0deg)'\n },\n '50%': {\n transform: 'rotate(225deg)'\n },\n '100%': {\n transform: 'rotate(0deg)'\n }\n }\n },\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationIterationCount: '0',\n backgroundImage: 'conic-gradient(transparent 120deg, currentcolor 360deg)',\n '&::before, &::after': {\n content: 'none'\n }\n }\n});\nconst useSpinnerStyles = makeStyles({\n inverted: {\n backgroundColor: tokens.colorNeutralStrokeAlpha2,\n color: tokens.colorNeutralStrokeOnBrand2\n },\n rtlTail: {\n maskImage: 'conic-gradient(white 255deg, transparent 255deg)',\n '&::before, &::after': {\n backgroundImage: 'conic-gradient(transparent 225deg, currentcolor 225deg)'\n },\n '@media screen and (prefers-reduced-motion: reduce)': {\n backgroundImage: 'conic-gradient(currentcolor 0deg, transparent 240deg)'\n }\n },\n 'extra-tiny': {\n height: '16px',\n width: '16px',\n [vars.strokeWidth]: tokens.strokeWidthThick\n },\n tiny: {\n height: '20px',\n width: '20px',\n [vars.strokeWidth]: tokens.strokeWidthThick\n },\n 'extra-small': {\n height: '24px',\n width: '24px',\n [vars.strokeWidth]: tokens.strokeWidthThick\n },\n small: {\n height: '28px',\n width: '28px',\n [vars.strokeWidth]: tokens.strokeWidthThick\n },\n medium: {\n height: '32px',\n width: '32px',\n [vars.strokeWidth]: tokens.strokeWidthThicker\n },\n large: {\n height: '36px',\n width: '36px',\n [vars.strokeWidth]: tokens.strokeWidthThicker\n },\n 'extra-large': {\n height: '40px',\n width: '40px',\n [vars.strokeWidth]: tokens.strokeWidthThicker\n },\n huge: {\n height: '44px',\n width: '44px',\n [vars.strokeWidth]: tokens.strokeWidthThickest\n }\n});\nconst useLabelStyles = makeStyles({\n inverted: {\n color: tokens.colorNeutralForegroundStaticInverted\n },\n 'extra-tiny': {\n ...typographyStyles.body1\n },\n tiny: {\n ...typographyStyles.body1\n },\n 'extra-small': {\n ...typographyStyles.body1\n },\n small: {\n ...typographyStyles.body1\n },\n medium: {\n ...typographyStyles.subtitle2\n },\n large: {\n ...typographyStyles.subtitle2\n },\n 'extra-large': {\n ...typographyStyles.subtitle2\n },\n huge: {\n ...typographyStyles.subtitle1\n }\n});\n/**\n * Apply styling to the Spinner slots based on the state\n */ export const useSpinnerStyles_unstable = (state)=>{\n 'use no memo';\n const { labelPosition, size, appearance } = state;\n const { dir } = useFluent();\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const spinnerBaseClassName = useSpinnerBaseClassName();\n const spinnerStyles = useSpinnerStyles();\n const spinnerTailBaseClassName = useSpinnerTailBaseClassName();\n const labelStyles = useLabelStyles();\n state.root.className = mergeClasses(spinnerClassNames.root, rootBaseClassName, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, state.root.className);\n if (state.spinner) {\n state.spinner.className = mergeClasses(spinnerClassNames.spinner, spinnerBaseClassName, spinnerStyles[size], appearance === 'inverted' && spinnerStyles.inverted, state.spinner.className);\n }\n if (state.spinnerTail) {\n state.spinnerTail.className = mergeClasses(spinnerClassNames.spinnerTail, spinnerTailBaseClassName, dir === 'rtl' && spinnerStyles.rtlTail, state.spinnerTail.className);\n }\n if (state.label) {\n state.label.className = mergeClasses(spinnerClassNames.label, labelStyles[size], appearance === 'inverted' && labelStyles.inverted, state.label.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["useFluent_unstable","useFluent","tokens","typographyStyles","__resetStyles","__styles","mergeClasses","spinnerClassNames","root","spinner","spinnerTail","label","vars","strokeWidth","useRootBaseClassName","useRootStyles","vertical","Beiy3e4","d","useSpinnerBaseClassName","r","s","useSpinnerTailBaseClassName","useSpinnerStyles","inverted","De3pzq","sj55zd","rtlTail","btxmck","gb5jj2","Bdya8wy","Bqenvij","a9b677","qmp6fs","tiny","small","medium","large","huge","m","useLabelStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useSpinnerStyles_unstable","state","labelPosition","size","appearance","dir","rootBaseClassName","rootStyles","spinnerBaseClassName","spinnerStyles","spinnerTailBaseClassName","labelStyles","className"],"sources":["useSpinnerStyles.styles.js"],"sourcesContent":["'use client';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const spinnerClassNames = {\n root: 'fui-Spinner',\n spinner: 'fui-Spinner__spinner',\n spinnerTail: 'fui-Spinner__spinnerTail',\n label: 'fui-Spinner__label'\n};\n/**\n * CSS variables used internally by Spinner\n */ const vars = {\n strokeWidth: '--fui-Spinner--strokeWidth'\n};\nconst useRootBaseClassName = makeResetStyles({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n lineHeight: '0',\n gap: '8px',\n overflow: 'hidden',\n minWidth: 'min-content'\n});\nconst useRootStyles = makeStyles({\n vertical: {\n flexDirection: 'column'\n }\n});\nconst useSpinnerBaseClassName = makeResetStyles({\n position: 'relative',\n flexShrink: 0,\n // Use a mask to create the ring shape of the spinner.\n maskImage: `radial-gradient(closest-side, ` + `transparent calc(100% - var(${vars.strokeWidth}) - 1px), ` + `white calc(100% - var(${vars.strokeWidth})) calc(100% - 1px), ` + `transparent 100%)`,\n backgroundColor: tokens.colorBrandStroke2Contrast,\n color: tokens.colorBrandStroke1,\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'HighlightText',\n color: 'Highlight',\n forcedColorAdjust: 'none'\n },\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'linear',\n animationName: {\n '0%': {\n transform: 'rotate(0deg)'\n },\n '100%': {\n transform: 'rotate(360deg)'\n }\n },\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '1.8s'\n }\n});\n// The spinner tail is rendered using two 135deg arc segments, behind a 105deg arc mask.\n// The segments are rotated out from behind the mask to expand the visible arc from\n// 30deg (min) to 255deg (max), and then back behind the mask again to shrink the arc.\n// The tail and spinner itself also have 360deg rotation animations for the spin.\nconst useSpinnerTailBaseClassName = makeResetStyles({\n position: 'absolute',\n display: 'block',\n width: '100%',\n height: '100%',\n maskImage: 'conic-gradient(transparent 105deg, white 105deg)',\n '&::before, &::after': {\n content: '\"\"',\n position: 'absolute',\n display: 'block',\n width: '100%',\n height: '100%',\n animation: 'inherit',\n backgroundImage: 'conic-gradient(currentcolor 135deg, transparent 135deg)'\n },\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: tokens.curveEasyEase,\n animationName: {\n '0%': {\n transform: 'rotate(-135deg)'\n },\n '50%': {\n transform: 'rotate(0deg)'\n },\n '100%': {\n transform: 'rotate(225deg)'\n }\n },\n '&::before': {\n animationName: {\n '0%': {\n transform: 'rotate(0deg)'\n },\n '50%': {\n transform: 'rotate(105deg)'\n },\n '100%': {\n transform: 'rotate(0deg)'\n }\n }\n },\n '&::after': {\n animationName: {\n '0%': {\n transform: 'rotate(0deg)'\n },\n '50%': {\n transform: 'rotate(225deg)'\n },\n '100%': {\n transform: 'rotate(0deg)'\n }\n }\n },\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationIterationCount: '0',\n backgroundImage: 'conic-gradient(transparent 120deg, currentcolor 360deg)',\n '&::before, &::after': {\n content: 'none'\n }\n }\n});\nconst useSpinnerStyles = makeStyles({\n inverted: {\n backgroundColor: tokens.colorNeutralStrokeAlpha2,\n color: tokens.colorNeutralStrokeOnBrand2\n },\n rtlTail: {\n maskImage: 'conic-gradient(white 255deg, transparent 255deg)',\n '&::before, &::after': {\n backgroundImage: 'conic-gradient(transparent 225deg, currentcolor 225deg)'\n },\n '@media screen and (prefers-reduced-motion: reduce)': {\n backgroundImage: 'conic-gradient(currentcolor 0deg, transparent 240deg)'\n }\n },\n 'extra-tiny': {\n height: '16px',\n width: '16px',\n [vars.strokeWidth]: tokens.strokeWidthThick\n },\n tiny: {\n height: '20px',\n width: '20px',\n [vars.strokeWidth]: tokens.strokeWidthThick\n },\n 'extra-small': {\n height: '24px',\n width: '24px',\n [vars.strokeWidth]: tokens.strokeWidthThick\n },\n small: {\n height: '28px',\n width: '28px',\n [vars.strokeWidth]: tokens.strokeWidthThick\n },\n medium: {\n height: '32px',\n width: '32px',\n [vars.strokeWidth]: tokens.strokeWidthThicker\n },\n large: {\n height: '36px',\n width: '36px',\n [vars.strokeWidth]: tokens.strokeWidthThicker\n },\n 'extra-large': {\n height: '40px',\n width: '40px',\n [vars.strokeWidth]: tokens.strokeWidthThicker\n },\n huge: {\n height: '44px',\n width: '44px',\n [vars.strokeWidth]: tokens.strokeWidthThickest\n }\n});\nconst useLabelStyles = makeStyles({\n inverted: {\n color: tokens.colorNeutralForegroundStaticInverted\n },\n 'extra-tiny': {\n ...typographyStyles.body1\n },\n tiny: {\n ...typographyStyles.body1\n },\n 'extra-small': {\n ...typographyStyles.body1\n },\n small: {\n ...typographyStyles.body1\n },\n medium: {\n ...typographyStyles.subtitle2\n },\n large: {\n ...typographyStyles.subtitle2\n },\n 'extra-large': {\n ...typographyStyles.subtitle2\n },\n huge: {\n ...typographyStyles.subtitle1\n }\n});\n/**\n * Apply styling to the Spinner slots based on the state\n */ export const useSpinnerStyles_unstable = (state)=>{\n 'use no memo';\n const { labelPosition, size, appearance } = state;\n const { dir } = useFluent();\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const spinnerBaseClassName = useSpinnerBaseClassName();\n const spinnerStyles = useSpinnerStyles();\n const spinnerTailBaseClassName = useSpinnerTailBaseClassName();\n const labelStyles = useLabelStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(spinnerClassNames.root, rootBaseClassName, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, state.root.className);\n if (state.spinner) {\n // eslint-disable-next-line react-hooks/immutability\n state.spinner.className = mergeClasses(spinnerClassNames.spinner, spinnerBaseClassName, spinnerStyles[size], appearance === 'inverted' && spinnerStyles.inverted, state.spinner.className);\n }\n if (state.spinnerTail) {\n // eslint-disable-next-line react-hooks/immutability\n state.spinnerTail.className = mergeClasses(spinnerClassNames.spinnerTail, spinnerTailBaseClassName, dir === 'rtl' && spinnerStyles.rtlTail, state.spinnerTail.className);\n }\n if (state.label) {\n // eslint-disable-next-line react-hooks/immutability\n state.label.className = mergeClasses(spinnerClassNames.label, labelStyles[size], appearance === 'inverted' && labelStyles.inverted, state.label.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
package/lib/components/Spinner/useSpinnerStyles.styles.raw.js CHANGED
@@ -217,14 +217,18 @@ const useLabelStyles = makeStyles({
217
217
  const spinnerStyles = useSpinnerStyles();
218
218
  const spinnerTailBaseClassName = useSpinnerTailBaseClassName();
219
219
  const labelStyles = useLabelStyles();
220
+ // eslint-disable-next-line react-hooks/immutability
220
221
  state.root.className = mergeClasses(spinnerClassNames.root, rootBaseClassName, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, state.root.className);
221
222
  if (state.spinner) {
223
+ // eslint-disable-next-line react-hooks/immutability
222
224
  state.spinner.className = mergeClasses(spinnerClassNames.spinner, spinnerBaseClassName, spinnerStyles[size], appearance === 'inverted' && spinnerStyles.inverted, state.spinner.className);
223
225
  }
224
226
  if (state.spinnerTail) {
227
+ // eslint-disable-next-line react-hooks/immutability
225
228
  state.spinnerTail.className = mergeClasses(spinnerClassNames.spinnerTail, spinnerTailBaseClassName, dir === 'rtl' && spinnerStyles.rtlTail, state.spinnerTail.className);
226
229
  }
227
230
  if (state.label) {
231
+ // eslint-disable-next-line react-hooks/immutability
228
232
  state.label.className = mergeClasses(spinnerClassNames.label, labelStyles[size], appearance === 'inverted' && labelStyles.inverted, state.label.className);
229
233
  }
230
234
  return state;
package/lib/components/Spinner/useSpinnerStyles.styles.raw.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Spinner/useSpinnerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SpinnerSlots, SpinnerState } from './Spinner.types';\n\nexport const spinnerClassNames: SlotClassNames<SpinnerSlots> = {\n root: 'fui-Spinner',\n spinner: 'fui-Spinner__spinner',\n spinnerTail: 'fui-Spinner__spinnerTail',\n label: 'fui-Spinner__label',\n};\n\n/**\n * CSS variables used internally by Spinner\n */\nconst vars = {\n strokeWidth: '--fui-Spinner--strokeWidth',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n lineHeight: '0',\n gap: '8px',\n overflow: 'hidden', // prevents height changes from rotating children\n minWidth: 'min-content',\n});\n\nconst useRootStyles = makeStyles({\n vertical: {\n flexDirection: 'column',\n },\n});\n\nconst useSpinnerBaseClassName = makeResetStyles({\n position: 'relative',\n flexShrink: 0,\n\n // Use a mask to create the ring shape of the spinner.\n maskImage:\n `radial-gradient(closest-side, ` +\n `transparent calc(100% - var(${vars.strokeWidth}) - 1px), ` +\n `white calc(100% - var(${vars.strokeWidth})) calc(100% - 1px), ` +\n `transparent 100%)`,\n\n backgroundColor: tokens.colorBrandStroke2Contrast,\n color: tokens.colorBrandStroke1,\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'HighlightText',\n color: 'Highlight',\n forcedColorAdjust: 'none',\n },\n\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'linear',\n animationName: {\n '0%': { transform: 'rotate(0deg)' },\n '100%': { transform: 'rotate(360deg)' },\n },\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '1.8s',\n },\n});\n\n// The spinner tail is rendered using two 135deg arc segments, behind a 105deg arc mask.\n// The segments are rotated out from behind the mask to expand the visible arc from\n// 30deg (min) to 255deg (max), and then back behind the mask again to shrink the arc.\n// The tail and spinner itself also have 360deg rotation animations for the spin.\nconst useSpinnerTailBaseClassName = makeResetStyles({\n position: 'absolute',\n display: 'block',\n width: '100%',\n height: '100%',\n maskImage: 'conic-gradient(transparent 105deg, white 105deg)',\n\n '&::before, &::after': {\n content: '\"\"',\n position: 'absolute',\n display: 'block',\n width: '100%',\n height: '100%',\n animation: 'inherit',\n backgroundImage: 'conic-gradient(currentcolor 135deg, transparent 135deg)',\n },\n\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: tokens.curveEasyEase,\n animationName: {\n '0%': { transform: 'rotate(-135deg)' },\n '50%': { transform: 'rotate(0deg)' },\n '100%': { transform: 'rotate(225deg)' },\n },\n '&::before': {\n animationName: {\n '0%': { transform: 'rotate(0deg)' },\n '50%': { transform: 'rotate(105deg)' },\n '100%': { transform: 'rotate(0deg)' },\n },\n },\n '&::after': {\n animationName: {\n '0%': { transform: 'rotate(0deg)' },\n '50%': { transform: 'rotate(225deg)' },\n '100%': { transform: 'rotate(0deg)' },\n },\n },\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationIterationCount: '0',\n backgroundImage: 'conic-gradient(transparent 120deg, currentcolor 360deg)',\n '&::before, &::after': {\n content: 'none',\n },\n },\n});\n\nconst useSpinnerStyles = makeStyles({\n inverted: {\n backgroundColor: tokens.colorNeutralStrokeAlpha2,\n color: tokens.colorNeutralStrokeOnBrand2,\n },\n\n rtlTail: {\n maskImage: 'conic-gradient(white 255deg, transparent 255deg)',\n '&::before, &::after': {\n backgroundImage: 'conic-gradient(transparent 225deg, currentcolor 225deg)',\n },\n '@media screen and (prefers-reduced-motion: reduce)': {\n backgroundImage: 'conic-gradient(currentcolor 0deg, transparent 240deg)',\n },\n },\n\n 'extra-tiny': {\n height: '16px',\n width: '16px',\n [vars.strokeWidth]: tokens.strokeWidthThick,\n },\n\n tiny: {\n height: '20px',\n width: '20px',\n [vars.strokeWidth]: tokens.strokeWidthThick,\n },\n\n 'extra-small': {\n height: '24px',\n width: '24px',\n [vars.strokeWidth]: tokens.strokeWidthThick,\n },\n\n small: {\n height: '28px',\n width: '28px',\n [vars.strokeWidth]: tokens.strokeWidthThick,\n },\n\n medium: {\n height: '32px',\n width: '32px',\n [vars.strokeWidth]: tokens.strokeWidthThicker,\n },\n\n large: {\n height: '36px',\n width: '36px',\n [vars.strokeWidth]: tokens.strokeWidthThicker,\n },\n\n 'extra-large': {\n height: '40px',\n width: '40px',\n [vars.strokeWidth]: tokens.strokeWidthThicker,\n },\n\n huge: {\n height: '44px',\n width: '44px',\n [vars.strokeWidth]: tokens.strokeWidthThickest,\n },\n});\n\nconst useLabelStyles = makeStyles({\n inverted: {\n color: tokens.colorNeutralForegroundStaticInverted,\n },\n\n 'extra-tiny': {\n ...typographyStyles.body1,\n },\n\n tiny: {\n ...typographyStyles.body1,\n },\n\n 'extra-small': {\n ...typographyStyles.body1,\n },\n\n small: {\n ...typographyStyles.body1,\n },\n\n medium: {\n ...typographyStyles.subtitle2,\n },\n\n large: {\n ...typographyStyles.subtitle2,\n },\n\n 'extra-large': {\n ...typographyStyles.subtitle2,\n },\n\n huge: {\n ...typographyStyles.subtitle1,\n },\n});\n\n/**\n * Apply styling to the Spinner slots based on the state\n */\nexport const useSpinnerStyles_unstable = (state: SpinnerState): SpinnerState => {\n 'use no memo';\n\n const { labelPosition, size, appearance } = state;\n const { dir } = useFluent();\n\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const spinnerBaseClassName = useSpinnerBaseClassName();\n const spinnerStyles = useSpinnerStyles();\n const spinnerTailBaseClassName = useSpinnerTailBaseClassName();\n const labelStyles = useLabelStyles();\n\n state.root.className = mergeClasses(\n spinnerClassNames.root,\n rootBaseClassName,\n (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical,\n state.root.className,\n );\n if (state.spinner) {\n state.spinner.className = mergeClasses(\n spinnerClassNames.spinner,\n spinnerBaseClassName,\n spinnerStyles[size],\n appearance === 'inverted' && spinnerStyles.inverted,\n state.spinner.className,\n );\n }\n if (state.spinnerTail) {\n state.spinnerTail.className = mergeClasses(\n spinnerClassNames.spinnerTail,\n spinnerTailBaseClassName,\n dir === 'rtl' && spinnerStyles.rtlTail,\n state.spinnerTail.className,\n );\n }\n if (state.label) {\n state.label.className = mergeClasses(\n spinnerClassNames.label,\n labelStyles[size],\n appearance === 'inverted' && labelStyles.inverted,\n state.label.className,\n );\n }\n\n return state;\n};\n"],"names":["useFluent_unstable","useFluent","tokens","typographyStyles","makeResetStyles","makeStyles","mergeClasses","spinnerClassNames","root","spinner","spinnerTail","label","vars","strokeWidth","useRootBaseClassName","display","alignItems","justifyContent","lineHeight","gap","overflow","minWidth","useRootStyles","vertical","flexDirection","useSpinnerBaseClassName","position","flexShrink","maskImage","backgroundColor","colorBrandStroke2Contrast","color","colorBrandStroke1","forcedColorAdjust","animationDuration","animationIterationCount","animationTimingFunction","animationName","transform","useSpinnerTailBaseClassName","width","height","content","animation","backgroundImage","curveEasyEase","useSpinnerStyles","inverted","colorNeutralStrokeAlpha2","colorNeutralStrokeOnBrand2","rtlTail","strokeWidthThick","tiny","small","medium","strokeWidthThicker","large","huge","strokeWidthThickest","useLabelStyles","colorNeutralForegroundStaticInverted","body1","subtitle2","subtitle1","useSpinnerStyles_unstable","state","labelPosition","size","appearance","dir","rootBaseClassName","rootStyles","spinnerBaseClassName","spinnerStyles","spinnerTailBaseClassName","labelStyles","className"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/components/Spinner/useSpinnerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SpinnerSlots, SpinnerState } from './Spinner.types';\n\nexport const spinnerClassNames: SlotClassNames<SpinnerSlots> = {\n root: 'fui-Spinner',\n spinner: 'fui-Spinner__spinner',\n spinnerTail: 'fui-Spinner__spinnerTail',\n label: 'fui-Spinner__label',\n};\n\n/**\n * CSS variables used internally by Spinner\n */\nconst vars = {\n strokeWidth: '--fui-Spinner--strokeWidth',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n lineHeight: '0',\n gap: '8px',\n overflow: 'hidden', // prevents height changes from rotating children\n minWidth: 'min-content',\n});\n\nconst useRootStyles = makeStyles({\n vertical: {\n flexDirection: 'column',\n },\n});\n\nconst useSpinnerBaseClassName = makeResetStyles({\n position: 'relative',\n flexShrink: 0,\n\n // Use a mask to create the ring shape of the spinner.\n maskImage:\n `radial-gradient(closest-side, ` +\n `transparent calc(100% - var(${vars.strokeWidth}) - 1px), ` +\n `white calc(100% - var(${vars.strokeWidth})) calc(100% - 1px), ` +\n `transparent 100%)`,\n\n backgroundColor: tokens.colorBrandStroke2Contrast,\n color: tokens.colorBrandStroke1,\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'HighlightText',\n color: 'Highlight',\n forcedColorAdjust: 'none',\n },\n\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'linear',\n animationName: {\n '0%': { transform: 'rotate(0deg)' },\n '100%': { transform: 'rotate(360deg)' },\n },\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '1.8s',\n },\n});\n\n// The spinner tail is rendered using two 135deg arc segments, behind a 105deg arc mask.\n// The segments are rotated out from behind the mask to expand the visible arc from\n// 30deg (min) to 255deg (max), and then back behind the mask again to shrink the arc.\n// The tail and spinner itself also have 360deg rotation animations for the spin.\nconst useSpinnerTailBaseClassName = makeResetStyles({\n position: 'absolute',\n display: 'block',\n width: '100%',\n height: '100%',\n maskImage: 'conic-gradient(transparent 105deg, white 105deg)',\n\n '&::before, &::after': {\n content: '\"\"',\n position: 'absolute',\n display: 'block',\n width: '100%',\n height: '100%',\n animation: 'inherit',\n backgroundImage: 'conic-gradient(currentcolor 135deg, transparent 135deg)',\n },\n\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: tokens.curveEasyEase,\n animationName: {\n '0%': { transform: 'rotate(-135deg)' },\n '50%': { transform: 'rotate(0deg)' },\n '100%': { transform: 'rotate(225deg)' },\n },\n '&::before': {\n animationName: {\n '0%': { transform: 'rotate(0deg)' },\n '50%': { transform: 'rotate(105deg)' },\n '100%': { transform: 'rotate(0deg)' },\n },\n },\n '&::after': {\n animationName: {\n '0%': { transform: 'rotate(0deg)' },\n '50%': { transform: 'rotate(225deg)' },\n '100%': { transform: 'rotate(0deg)' },\n },\n },\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationIterationCount: '0',\n backgroundImage: 'conic-gradient(transparent 120deg, currentcolor 360deg)',\n '&::before, &::after': {\n content: 'none',\n },\n },\n});\n\nconst useSpinnerStyles = makeStyles({\n inverted: {\n backgroundColor: tokens.colorNeutralStrokeAlpha2,\n color: tokens.colorNeutralStrokeOnBrand2,\n },\n\n rtlTail: {\n maskImage: 'conic-gradient(white 255deg, transparent 255deg)',\n '&::before, &::after': {\n backgroundImage: 'conic-gradient(transparent 225deg, currentcolor 225deg)',\n },\n '@media screen and (prefers-reduced-motion: reduce)': {\n backgroundImage: 'conic-gradient(currentcolor 0deg, transparent 240deg)',\n },\n },\n\n 'extra-tiny': {\n height: '16px',\n width: '16px',\n [vars.strokeWidth]: tokens.strokeWidthThick,\n },\n\n tiny: {\n height: '20px',\n width: '20px',\n [vars.strokeWidth]: tokens.strokeWidthThick,\n },\n\n 'extra-small': {\n height: '24px',\n width: '24px',\n [vars.strokeWidth]: tokens.strokeWidthThick,\n },\n\n small: {\n height: '28px',\n width: '28px',\n [vars.strokeWidth]: tokens.strokeWidthThick,\n },\n\n medium: {\n height: '32px',\n width: '32px',\n [vars.strokeWidth]: tokens.strokeWidthThicker,\n },\n\n large: {\n height: '36px',\n width: '36px',\n [vars.strokeWidth]: tokens.strokeWidthThicker,\n },\n\n 'extra-large': {\n height: '40px',\n width: '40px',\n [vars.strokeWidth]: tokens.strokeWidthThicker,\n },\n\n huge: {\n height: '44px',\n width: '44px',\n [vars.strokeWidth]: tokens.strokeWidthThickest,\n },\n});\n\nconst useLabelStyles = makeStyles({\n inverted: {\n color: tokens.colorNeutralForegroundStaticInverted,\n },\n\n 'extra-tiny': {\n ...typographyStyles.body1,\n },\n\n tiny: {\n ...typographyStyles.body1,\n },\n\n 'extra-small': {\n ...typographyStyles.body1,\n },\n\n small: {\n ...typographyStyles.body1,\n },\n\n medium: {\n ...typographyStyles.subtitle2,\n },\n\n large: {\n ...typographyStyles.subtitle2,\n },\n\n 'extra-large': {\n ...typographyStyles.subtitle2,\n },\n\n huge: {\n ...typographyStyles.subtitle1,\n },\n});\n\n/**\n * Apply styling to the Spinner slots based on the state\n */\nexport const useSpinnerStyles_unstable = (state: SpinnerState): SpinnerState => {\n 'use no memo';\n\n const { labelPosition, size, appearance } = state;\n const { dir } = useFluent();\n\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const spinnerBaseClassName = useSpinnerBaseClassName();\n const spinnerStyles = useSpinnerStyles();\n const spinnerTailBaseClassName = useSpinnerTailBaseClassName();\n const labelStyles = useLabelStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n spinnerClassNames.root,\n rootBaseClassName,\n (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical,\n state.root.className,\n );\n if (state.spinner) {\n // eslint-disable-next-line react-hooks/immutability\n state.spinner.className = mergeClasses(\n spinnerClassNames.spinner,\n spinnerBaseClassName,\n spinnerStyles[size],\n appearance === 'inverted' && spinnerStyles.inverted,\n state.spinner.className,\n );\n }\n if (state.spinnerTail) {\n // eslint-disable-next-line react-hooks/immutability\n state.spinnerTail.className = mergeClasses(\n spinnerClassNames.spinnerTail,\n spinnerTailBaseClassName,\n dir === 'rtl' && spinnerStyles.rtlTail,\n state.spinnerTail.className,\n );\n }\n if (state.label) {\n // eslint-disable-next-line react-hooks/immutability\n state.label.className = mergeClasses(\n spinnerClassNames.label,\n labelStyles[size],\n appearance === 'inverted' && labelStyles.inverted,\n state.label.className,\n );\n }\n\n return state;\n};\n"],"names":["useFluent_unstable","useFluent","tokens","typographyStyles","makeResetStyles","makeStyles","mergeClasses","spinnerClassNames","root","spinner","spinnerTail","label","vars","strokeWidth","useRootBaseClassName","display","alignItems","justifyContent","lineHeight","gap","overflow","minWidth","useRootStyles","vertical","flexDirection","useSpinnerBaseClassName","position","flexShrink","maskImage","backgroundColor","colorBrandStroke2Contrast","color","colorBrandStroke1","forcedColorAdjust","animationDuration","animationIterationCount","animationTimingFunction","animationName","transform","useSpinnerTailBaseClassName","width","height","content","animation","backgroundImage","curveEasyEase","useSpinnerStyles","inverted","colorNeutralStrokeAlpha2","colorNeutralStrokeOnBrand2","rtlTail","strokeWidthThick","tiny","small","medium","strokeWidthThicker","large","huge","strokeWidthThickest","useLabelStyles","colorNeutralForegroundStaticInverted","body1","subtitle2","subtitle1","useSpinnerStyles_unstable","state","labelPosition","size","appearance","dir","rootBaseClassName","rootStyles","spinnerBaseClassName","spinnerStyles","spinnerTailBaseClassName","labelStyles","className"],"mappings":"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"}
package/lib-commonjs/components/Spinner/useSpinnerStyles.styles.js CHANGED
@@ -243,14 +243,18 @@ const useSpinnerStyles_unstable = (state)=>{
243
243
  const spinnerStyles = useSpinnerStyles();
244
244
  const spinnerTailBaseClassName = useSpinnerTailBaseClassName();
245
245
  const labelStyles = useLabelStyles();
246
+ // eslint-disable-next-line react-hooks/immutability
246
247
  state.root.className = (0, _react.mergeClasses)(spinnerClassNames.root, rootBaseClassName, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, state.root.className);
247
248
  if (state.spinner) {
249
+ // eslint-disable-next-line react-hooks/immutability
248
250
  state.spinner.className = (0, _react.mergeClasses)(spinnerClassNames.spinner, spinnerBaseClassName, spinnerStyles[size], appearance === 'inverted' && spinnerStyles.inverted, state.spinner.className);
249
251
  }
250
252
  if (state.spinnerTail) {
253
+ // eslint-disable-next-line react-hooks/immutability
251
254
  state.spinnerTail.className = (0, _react.mergeClasses)(spinnerClassNames.spinnerTail, spinnerTailBaseClassName, dir === 'rtl' && spinnerStyles.rtlTail, state.spinnerTail.className);
252
255
  }
253
256
  if (state.label) {
257
+ // eslint-disable-next-line react-hooks/immutability
254
258
  state.label.className = (0, _react.mergeClasses)(spinnerClassNames.label, labelStyles[size], appearance === 'inverted' && labelStyles.inverted, state.label.className);
255
259
  }
256
260
  return state;
package/lib-commonjs/components/Spinner/useSpinnerStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useSpinnerStyles.styles.js"],"sourcesContent":["'use client';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const spinnerClassNames = {\n root: 'fui-Spinner',\n spinner: 'fui-Spinner__spinner',\n spinnerTail: 'fui-Spinner__spinnerTail',\n label: 'fui-Spinner__label'\n};\n/**\n * CSS variables used internally by Spinner\n */ const vars = {\n strokeWidth: '--fui-Spinner--strokeWidth'\n};\nconst useRootBaseClassName = makeResetStyles({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n lineHeight: '0',\n gap: '8px',\n overflow: 'hidden',\n minWidth: 'min-content'\n});\nconst useRootStyles = makeStyles({\n vertical: {\n flexDirection: 'column'\n }\n});\nconst useSpinnerBaseClassName = makeResetStyles({\n position: 'relative',\n flexShrink: 0,\n // Use a mask to create the ring shape of the spinner.\n maskImage: `radial-gradient(closest-side, ` + `transparent calc(100% - var(${vars.strokeWidth}) - 1px), ` + `white calc(100% - var(${vars.strokeWidth})) calc(100% - 1px), ` + `transparent 100%)`,\n backgroundColor: tokens.colorBrandStroke2Contrast,\n color: tokens.colorBrandStroke1,\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'HighlightText',\n color: 'Highlight',\n forcedColorAdjust: 'none'\n },\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'linear',\n animationName: {\n '0%': {\n transform: 'rotate(0deg)'\n },\n '100%': {\n transform: 'rotate(360deg)'\n }\n },\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '1.8s'\n }\n});\n// The spinner tail is rendered using two 135deg arc segments, behind a 105deg arc mask.\n// The segments are rotated out from behind the mask to expand the visible arc from\n// 30deg (min) to 255deg (max), and then back behind the mask again to shrink the arc.\n// The tail and spinner itself also have 360deg rotation animations for the spin.\nconst useSpinnerTailBaseClassName = makeResetStyles({\n position: 'absolute',\n display: 'block',\n width: '100%',\n height: '100%',\n maskImage: 'conic-gradient(transparent 105deg, white 105deg)',\n '&::before, &::after': {\n content: '\"\"',\n position: 'absolute',\n display: 'block',\n width: '100%',\n height: '100%',\n animation: 'inherit',\n backgroundImage: 'conic-gradient(currentcolor 135deg, transparent 135deg)'\n },\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: tokens.curveEasyEase,\n animationName: {\n '0%': {\n transform: 'rotate(-135deg)'\n },\n '50%': {\n transform: 'rotate(0deg)'\n },\n '100%': {\n transform: 'rotate(225deg)'\n }\n },\n '&::before': {\n animationName: {\n '0%': {\n transform: 'rotate(0deg)'\n },\n '50%': {\n transform: 'rotate(105deg)'\n },\n '100%': {\n transform: 'rotate(0deg)'\n }\n }\n },\n '&::after': {\n animationName: {\n '0%': {\n transform: 'rotate(0deg)'\n },\n '50%': {\n transform: 'rotate(225deg)'\n },\n '100%': {\n transform: 'rotate(0deg)'\n }\n }\n },\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationIterationCount: '0',\n backgroundImage: 'conic-gradient(transparent 120deg, currentcolor 360deg)',\n '&::before, &::after': {\n content: 'none'\n }\n }\n});\nconst useSpinnerStyles = makeStyles({\n inverted: {\n backgroundColor: tokens.colorNeutralStrokeAlpha2,\n color: tokens.colorNeutralStrokeOnBrand2\n },\n rtlTail: {\n maskImage: 'conic-gradient(white 255deg, transparent 255deg)',\n '&::before, &::after': {\n backgroundImage: 'conic-gradient(transparent 225deg, currentcolor 225deg)'\n },\n '@media screen and (prefers-reduced-motion: reduce)': {\n backgroundImage: 'conic-gradient(currentcolor 0deg, transparent 240deg)'\n }\n },\n 'extra-tiny': {\n height: '16px',\n width: '16px',\n [vars.strokeWidth]: tokens.strokeWidthThick\n },\n tiny: {\n height: '20px',\n width: '20px',\n [vars.strokeWidth]: tokens.strokeWidthThick\n },\n 'extra-small': {\n height: '24px',\n width: '24px',\n [vars.strokeWidth]: tokens.strokeWidthThick\n },\n small: {\n height: '28px',\n width: '28px',\n [vars.strokeWidth]: tokens.strokeWidthThick\n },\n medium: {\n height: '32px',\n width: '32px',\n [vars.strokeWidth]: tokens.strokeWidthThicker\n },\n large: {\n height: '36px',\n width: '36px',\n [vars.strokeWidth]: tokens.strokeWidthThicker\n },\n 'extra-large': {\n height: '40px',\n width: '40px',\n [vars.strokeWidth]: tokens.strokeWidthThicker\n },\n huge: {\n height: '44px',\n width: '44px',\n [vars.strokeWidth]: tokens.strokeWidthThickest\n }\n});\nconst useLabelStyles = makeStyles({\n inverted: {\n color: tokens.colorNeutralForegroundStaticInverted\n },\n 'extra-tiny': {\n ...typographyStyles.body1\n },\n tiny: {\n ...typographyStyles.body1\n },\n 'extra-small': {\n ...typographyStyles.body1\n },\n small: {\n ...typographyStyles.body1\n },\n medium: {\n ...typographyStyles.subtitle2\n },\n large: {\n ...typographyStyles.subtitle2\n },\n 'extra-large': {\n ...typographyStyles.subtitle2\n },\n huge: {\n ...typographyStyles.subtitle1\n }\n});\n/**\n * Apply styling to the Spinner slots based on the state\n */ export const useSpinnerStyles_unstable = (state)=>{\n 'use no memo';\n const { labelPosition, size, appearance } = state;\n const { dir } = useFluent();\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const spinnerBaseClassName = useSpinnerBaseClassName();\n const spinnerStyles = useSpinnerStyles();\n const spinnerTailBaseClassName = useSpinnerTailBaseClassName();\n const labelStyles = useLabelStyles();\n state.root.className = mergeClasses(spinnerClassNames.root, rootBaseClassName, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, state.root.className);\n if (state.spinner) {\n state.spinner.className = mergeClasses(spinnerClassNames.spinner, spinnerBaseClassName, spinnerStyles[size], appearance === 'inverted' && spinnerStyles.inverted, state.spinner.className);\n }\n if (state.spinnerTail) {\n state.spinnerTail.className = mergeClasses(spinnerClassNames.spinnerTail, spinnerTailBaseClassName, dir === 'rtl' && spinnerStyles.rtlTail, state.spinnerTail.className);\n }\n if (state.label) {\n state.label.className = mergeClasses(spinnerClassNames.label, labelStyles[size], appearance === 'inverted' && labelStyles.inverted, state.label.className);\n }\n return state;\n};\n"],"names":["useFluent_unstable","useFluent","tokens","typographyStyles","__resetStyles","__styles","mergeClasses","spinnerClassNames","root","spinner","spinnerTail","label","vars","strokeWidth","useRootBaseClassName","useRootStyles","vertical","Beiy3e4","d","useSpinnerBaseClassName","r","s","useSpinnerTailBaseClassName","useSpinnerStyles","inverted","De3pzq","sj55zd","rtlTail","btxmck","gb5jj2","Bdya8wy","Bqenvij","a9b677","qmp6fs","tiny","small","medium","large","huge","m","useLabelStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useSpinnerStyles_unstable","state","labelPosition","size","appearance","dir","rootBaseClassName","rootStyles","spinnerBaseClassName","spinnerStyles","spinnerTailBaseClassName","labelStyles","className"],"mappings":"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"}
1
+ {"version":3,"sources":["useSpinnerStyles.styles.js"],"sourcesContent":["'use client';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const spinnerClassNames = {\n root: 'fui-Spinner',\n spinner: 'fui-Spinner__spinner',\n spinnerTail: 'fui-Spinner__spinnerTail',\n label: 'fui-Spinner__label'\n};\n/**\n * CSS variables used internally by Spinner\n */ const vars = {\n strokeWidth: '--fui-Spinner--strokeWidth'\n};\nconst useRootBaseClassName = makeResetStyles({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n lineHeight: '0',\n gap: '8px',\n overflow: 'hidden',\n minWidth: 'min-content'\n});\nconst useRootStyles = makeStyles({\n vertical: {\n flexDirection: 'column'\n }\n});\nconst useSpinnerBaseClassName = makeResetStyles({\n position: 'relative',\n flexShrink: 0,\n // Use a mask to create the ring shape of the spinner.\n maskImage: `radial-gradient(closest-side, ` + `transparent calc(100% - var(${vars.strokeWidth}) - 1px), ` + `white calc(100% - var(${vars.strokeWidth})) calc(100% - 1px), ` + `transparent 100%)`,\n backgroundColor: tokens.colorBrandStroke2Contrast,\n color: tokens.colorBrandStroke1,\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'HighlightText',\n color: 'Highlight',\n forcedColorAdjust: 'none'\n },\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'linear',\n animationName: {\n '0%': {\n transform: 'rotate(0deg)'\n },\n '100%': {\n transform: 'rotate(360deg)'\n }\n },\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '1.8s'\n }\n});\n// The spinner tail is rendered using two 135deg arc segments, behind a 105deg arc mask.\n// The segments are rotated out from behind the mask to expand the visible arc from\n// 30deg (min) to 255deg (max), and then back behind the mask again to shrink the arc.\n// The tail and spinner itself also have 360deg rotation animations for the spin.\nconst useSpinnerTailBaseClassName = makeResetStyles({\n position: 'absolute',\n display: 'block',\n width: '100%',\n height: '100%',\n maskImage: 'conic-gradient(transparent 105deg, white 105deg)',\n '&::before, &::after': {\n content: '\"\"',\n position: 'absolute',\n display: 'block',\n width: '100%',\n height: '100%',\n animation: 'inherit',\n backgroundImage: 'conic-gradient(currentcolor 135deg, transparent 135deg)'\n },\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: tokens.curveEasyEase,\n animationName: {\n '0%': {\n transform: 'rotate(-135deg)'\n },\n '50%': {\n transform: 'rotate(0deg)'\n },\n '100%': {\n transform: 'rotate(225deg)'\n }\n },\n '&::before': {\n animationName: {\n '0%': {\n transform: 'rotate(0deg)'\n },\n '50%': {\n transform: 'rotate(105deg)'\n },\n '100%': {\n transform: 'rotate(0deg)'\n }\n }\n },\n '&::after': {\n animationName: {\n '0%': {\n transform: 'rotate(0deg)'\n },\n '50%': {\n transform: 'rotate(225deg)'\n },\n '100%': {\n transform: 'rotate(0deg)'\n }\n }\n },\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationIterationCount: '0',\n backgroundImage: 'conic-gradient(transparent 120deg, currentcolor 360deg)',\n '&::before, &::after': {\n content: 'none'\n }\n }\n});\nconst useSpinnerStyles = makeStyles({\n inverted: {\n backgroundColor: tokens.colorNeutralStrokeAlpha2,\n color: tokens.colorNeutralStrokeOnBrand2\n },\n rtlTail: {\n maskImage: 'conic-gradient(white 255deg, transparent 255deg)',\n '&::before, &::after': {\n backgroundImage: 'conic-gradient(transparent 225deg, currentcolor 225deg)'\n },\n '@media screen and (prefers-reduced-motion: reduce)': {\n backgroundImage: 'conic-gradient(currentcolor 0deg, transparent 240deg)'\n }\n },\n 'extra-tiny': {\n height: '16px',\n width: '16px',\n [vars.strokeWidth]: tokens.strokeWidthThick\n },\n tiny: {\n height: '20px',\n width: '20px',\n [vars.strokeWidth]: tokens.strokeWidthThick\n },\n 'extra-small': {\n height: '24px',\n width: '24px',\n [vars.strokeWidth]: tokens.strokeWidthThick\n },\n small: {\n height: '28px',\n width: '28px',\n [vars.strokeWidth]: tokens.strokeWidthThick\n },\n medium: {\n height: '32px',\n width: '32px',\n [vars.strokeWidth]: tokens.strokeWidthThicker\n },\n large: {\n height: '36px',\n width: '36px',\n [vars.strokeWidth]: tokens.strokeWidthThicker\n },\n 'extra-large': {\n height: '40px',\n width: '40px',\n [vars.strokeWidth]: tokens.strokeWidthThicker\n },\n huge: {\n height: '44px',\n width: '44px',\n [vars.strokeWidth]: tokens.strokeWidthThickest\n }\n});\nconst useLabelStyles = makeStyles({\n inverted: {\n color: tokens.colorNeutralForegroundStaticInverted\n },\n 'extra-tiny': {\n ...typographyStyles.body1\n },\n tiny: {\n ...typographyStyles.body1\n },\n 'extra-small': {\n ...typographyStyles.body1\n },\n small: {\n ...typographyStyles.body1\n },\n medium: {\n ...typographyStyles.subtitle2\n },\n large: {\n ...typographyStyles.subtitle2\n },\n 'extra-large': {\n ...typographyStyles.subtitle2\n },\n huge: {\n ...typographyStyles.subtitle1\n }\n});\n/**\n * Apply styling to the Spinner slots based on the state\n */ export const useSpinnerStyles_unstable = (state)=>{\n 'use no memo';\n const { labelPosition, size, appearance } = state;\n const { dir } = useFluent();\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const spinnerBaseClassName = useSpinnerBaseClassName();\n const spinnerStyles = useSpinnerStyles();\n const spinnerTailBaseClassName = useSpinnerTailBaseClassName();\n const labelStyles = useLabelStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(spinnerClassNames.root, rootBaseClassName, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, state.root.className);\n if (state.spinner) {\n // eslint-disable-next-line react-hooks/immutability\n state.spinner.className = mergeClasses(spinnerClassNames.spinner, spinnerBaseClassName, spinnerStyles[size], appearance === 'inverted' && spinnerStyles.inverted, state.spinner.className);\n }\n if (state.spinnerTail) {\n // eslint-disable-next-line react-hooks/immutability\n state.spinnerTail.className = mergeClasses(spinnerClassNames.spinnerTail, spinnerTailBaseClassName, dir === 'rtl' && spinnerStyles.rtlTail, state.spinnerTail.className);\n }\n if (state.label) {\n // eslint-disable-next-line react-hooks/immutability\n state.label.className = mergeClasses(spinnerClassNames.label, labelStyles[size], appearance === 'inverted' && labelStyles.inverted, state.label.className);\n }\n return state;\n};\n"],"names":["useFluent_unstable","useFluent","tokens","typographyStyles","__resetStyles","__styles","mergeClasses","spinnerClassNames","root","spinner","spinnerTail","label","vars","strokeWidth","useRootBaseClassName","useRootStyles","vertical","Beiy3e4","d","useSpinnerBaseClassName","r","s","useSpinnerTailBaseClassName","useSpinnerStyles","inverted","De3pzq","sj55zd","rtlTail","btxmck","gb5jj2","Bdya8wy","Bqenvij","a9b677","qmp6fs","tiny","small","medium","large","huge","m","useLabelStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useSpinnerStyles_unstable","state","labelPosition","size","appearance","dir","rootBaseClassName","rootStyles","spinnerBaseClassName","spinnerStyles","spinnerTailBaseClassName","labelStyles","className"],"mappings":"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"}
package/lib-commonjs/components/Spinner/useSpinnerStyles.styles.raw.js CHANGED
@@ -233,14 +233,18 @@ const useSpinnerStyles_unstable = (state)=>{
233
233
  const spinnerStyles = useSpinnerStyles();
234
234
  const spinnerTailBaseClassName = useSpinnerTailBaseClassName();
235
235
  const labelStyles = useLabelStyles();
236
+ // eslint-disable-next-line react-hooks/immutability
236
237
  state.root.className = (0, _react.mergeClasses)(spinnerClassNames.root, rootBaseClassName, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, state.root.className);
237
238
  if (state.spinner) {
239
+ // eslint-disable-next-line react-hooks/immutability
238
240
  state.spinner.className = (0, _react.mergeClasses)(spinnerClassNames.spinner, spinnerBaseClassName, spinnerStyles[size], appearance === 'inverted' && spinnerStyles.inverted, state.spinner.className);
239
241
  }
240
242
  if (state.spinnerTail) {
243
+ // eslint-disable-next-line react-hooks/immutability
241
244
  state.spinnerTail.className = (0, _react.mergeClasses)(spinnerClassNames.spinnerTail, spinnerTailBaseClassName, dir === 'rtl' && spinnerStyles.rtlTail, state.spinnerTail.className);
242
245
  }
243
246
  if (state.label) {
247
+ // eslint-disable-next-line react-hooks/immutability
244
248
  state.label.className = (0, _react.mergeClasses)(spinnerClassNames.label, labelStyles[size], appearance === 'inverted' && labelStyles.inverted, state.label.className);
245
249
  }
246
250
  return state;
package/lib-commonjs/components/Spinner/useSpinnerStyles.styles.raw.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Spinner/useSpinnerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SpinnerSlots, SpinnerState } from './Spinner.types';\n\nexport const spinnerClassNames: SlotClassNames<SpinnerSlots> = {\n root: 'fui-Spinner',\n spinner: 'fui-Spinner__spinner',\n spinnerTail: 'fui-Spinner__spinnerTail',\n label: 'fui-Spinner__label',\n};\n\n/**\n * CSS variables used internally by Spinner\n */\nconst vars = {\n strokeWidth: '--fui-Spinner--strokeWidth',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n lineHeight: '0',\n gap: '8px',\n overflow: 'hidden', // prevents height changes from rotating children\n minWidth: 'min-content',\n});\n\nconst useRootStyles = makeStyles({\n vertical: {\n flexDirection: 'column',\n },\n});\n\nconst useSpinnerBaseClassName = makeResetStyles({\n position: 'relative',\n flexShrink: 0,\n\n // Use a mask to create the ring shape of the spinner.\n maskImage:\n `radial-gradient(closest-side, ` +\n `transparent calc(100% - var(${vars.strokeWidth}) - 1px), ` +\n `white calc(100% - var(${vars.strokeWidth})) calc(100% - 1px), ` +\n `transparent 100%)`,\n\n backgroundColor: tokens.colorBrandStroke2Contrast,\n color: tokens.colorBrandStroke1,\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'HighlightText',\n color: 'Highlight',\n forcedColorAdjust: 'none',\n },\n\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'linear',\n animationName: {\n '0%': { transform: 'rotate(0deg)' },\n '100%': { transform: 'rotate(360deg)' },\n },\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '1.8s',\n },\n});\n\n// The spinner tail is rendered using two 135deg arc segments, behind a 105deg arc mask.\n// The segments are rotated out from behind the mask to expand the visible arc from\n// 30deg (min) to 255deg (max), and then back behind the mask again to shrink the arc.\n// The tail and spinner itself also have 360deg rotation animations for the spin.\nconst useSpinnerTailBaseClassName = makeResetStyles({\n position: 'absolute',\n display: 'block',\n width: '100%',\n height: '100%',\n maskImage: 'conic-gradient(transparent 105deg, white 105deg)',\n\n '&::before, &::after': {\n content: '\"\"',\n position: 'absolute',\n display: 'block',\n width: '100%',\n height: '100%',\n animation: 'inherit',\n backgroundImage: 'conic-gradient(currentcolor 135deg, transparent 135deg)',\n },\n\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: tokens.curveEasyEase,\n animationName: {\n '0%': { transform: 'rotate(-135deg)' },\n '50%': { transform: 'rotate(0deg)' },\n '100%': { transform: 'rotate(225deg)' },\n },\n '&::before': {\n animationName: {\n '0%': { transform: 'rotate(0deg)' },\n '50%': { transform: 'rotate(105deg)' },\n '100%': { transform: 'rotate(0deg)' },\n },\n },\n '&::after': {\n animationName: {\n '0%': { transform: 'rotate(0deg)' },\n '50%': { transform: 'rotate(225deg)' },\n '100%': { transform: 'rotate(0deg)' },\n },\n },\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationIterationCount: '0',\n backgroundImage: 'conic-gradient(transparent 120deg, currentcolor 360deg)',\n '&::before, &::after': {\n content: 'none',\n },\n },\n});\n\nconst useSpinnerStyles = makeStyles({\n inverted: {\n backgroundColor: tokens.colorNeutralStrokeAlpha2,\n color: tokens.colorNeutralStrokeOnBrand2,\n },\n\n rtlTail: {\n maskImage: 'conic-gradient(white 255deg, transparent 255deg)',\n '&::before, &::after': {\n backgroundImage: 'conic-gradient(transparent 225deg, currentcolor 225deg)',\n },\n '@media screen and (prefers-reduced-motion: reduce)': {\n backgroundImage: 'conic-gradient(currentcolor 0deg, transparent 240deg)',\n },\n },\n\n 'extra-tiny': {\n height: '16px',\n width: '16px',\n [vars.strokeWidth]: tokens.strokeWidthThick,\n },\n\n tiny: {\n height: '20px',\n width: '20px',\n [vars.strokeWidth]: tokens.strokeWidthThick,\n },\n\n 'extra-small': {\n height: '24px',\n width: '24px',\n [vars.strokeWidth]: tokens.strokeWidthThick,\n },\n\n small: {\n height: '28px',\n width: '28px',\n [vars.strokeWidth]: tokens.strokeWidthThick,\n },\n\n medium: {\n height: '32px',\n width: '32px',\n [vars.strokeWidth]: tokens.strokeWidthThicker,\n },\n\n large: {\n height: '36px',\n width: '36px',\n [vars.strokeWidth]: tokens.strokeWidthThicker,\n },\n\n 'extra-large': {\n height: '40px',\n width: '40px',\n [vars.strokeWidth]: tokens.strokeWidthThicker,\n },\n\n huge: {\n height: '44px',\n width: '44px',\n [vars.strokeWidth]: tokens.strokeWidthThickest,\n },\n});\n\nconst useLabelStyles = makeStyles({\n inverted: {\n color: tokens.colorNeutralForegroundStaticInverted,\n },\n\n 'extra-tiny': {\n ...typographyStyles.body1,\n },\n\n tiny: {\n ...typographyStyles.body1,\n },\n\n 'extra-small': {\n ...typographyStyles.body1,\n },\n\n small: {\n ...typographyStyles.body1,\n },\n\n medium: {\n ...typographyStyles.subtitle2,\n },\n\n large: {\n ...typographyStyles.subtitle2,\n },\n\n 'extra-large': {\n ...typographyStyles.subtitle2,\n },\n\n huge: {\n ...typographyStyles.subtitle1,\n },\n});\n\n/**\n * Apply styling to the Spinner slots based on the state\n */\nexport const useSpinnerStyles_unstable = (state: SpinnerState): SpinnerState => {\n 'use no memo';\n\n const { labelPosition, size, appearance } = state;\n const { dir } = useFluent();\n\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const spinnerBaseClassName = useSpinnerBaseClassName();\n const spinnerStyles = useSpinnerStyles();\n const spinnerTailBaseClassName = useSpinnerTailBaseClassName();\n const labelStyles = useLabelStyles();\n\n state.root.className = mergeClasses(\n spinnerClassNames.root,\n rootBaseClassName,\n (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical,\n state.root.className,\n );\n if (state.spinner) {\n state.spinner.className = mergeClasses(\n spinnerClassNames.spinner,\n spinnerBaseClassName,\n spinnerStyles[size],\n appearance === 'inverted' && spinnerStyles.inverted,\n state.spinner.className,\n );\n }\n if (state.spinnerTail) {\n state.spinnerTail.className = mergeClasses(\n spinnerClassNames.spinnerTail,\n spinnerTailBaseClassName,\n dir === 'rtl' && spinnerStyles.rtlTail,\n state.spinnerTail.className,\n );\n }\n if (state.label) {\n state.label.className = mergeClasses(\n spinnerClassNames.label,\n labelStyles[size],\n appearance === 'inverted' && labelStyles.inverted,\n state.label.className,\n );\n }\n\n return state;\n};\n"],"names":["useFluent_unstable","useFluent","tokens","typographyStyles","makeResetStyles","makeStyles","mergeClasses","spinnerClassNames","root","spinner","spinnerTail","label","vars","strokeWidth","useRootBaseClassName","display","alignItems","justifyContent","lineHeight","gap","overflow","minWidth","useRootStyles","vertical","flexDirection","useSpinnerBaseClassName","position","flexShrink","maskImage","backgroundColor","colorBrandStroke2Contrast","color","colorBrandStroke1","forcedColorAdjust","animationDuration","animationIterationCount","animationTimingFunction","animationName","transform","useSpinnerTailBaseClassName","width","height","content","animation","backgroundImage","curveEasyEase","useSpinnerStyles","inverted","colorNeutralStrokeAlpha2","colorNeutralStrokeOnBrand2","rtlTail","strokeWidthThick","tiny","small","medium","strokeWidthThicker","large","huge","strokeWidthThickest","useLabelStyles","colorNeutralForegroundStaticInverted","body1","subtitle2","subtitle1","useSpinnerStyles_unstable","state","labelPosition","size","appearance","dir","rootBaseClassName","rootStyles","spinnerBaseClassName","spinnerStyles","spinnerTailBaseClassName","labelStyles","className"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/components/Spinner/useSpinnerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SpinnerSlots, SpinnerState } from './Spinner.types';\n\nexport const spinnerClassNames: SlotClassNames<SpinnerSlots> = {\n root: 'fui-Spinner',\n spinner: 'fui-Spinner__spinner',\n spinnerTail: 'fui-Spinner__spinnerTail',\n label: 'fui-Spinner__label',\n};\n\n/**\n * CSS variables used internally by Spinner\n */\nconst vars = {\n strokeWidth: '--fui-Spinner--strokeWidth',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n lineHeight: '0',\n gap: '8px',\n overflow: 'hidden', // prevents height changes from rotating children\n minWidth: 'min-content',\n});\n\nconst useRootStyles = makeStyles({\n vertical: {\n flexDirection: 'column',\n },\n});\n\nconst useSpinnerBaseClassName = makeResetStyles({\n position: 'relative',\n flexShrink: 0,\n\n // Use a mask to create the ring shape of the spinner.\n maskImage:\n `radial-gradient(closest-side, ` +\n `transparent calc(100% - var(${vars.strokeWidth}) - 1px), ` +\n `white calc(100% - var(${vars.strokeWidth})) calc(100% - 1px), ` +\n `transparent 100%)`,\n\n backgroundColor: tokens.colorBrandStroke2Contrast,\n color: tokens.colorBrandStroke1,\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'HighlightText',\n color: 'Highlight',\n forcedColorAdjust: 'none',\n },\n\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'linear',\n animationName: {\n '0%': { transform: 'rotate(0deg)' },\n '100%': { transform: 'rotate(360deg)' },\n },\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '1.8s',\n },\n});\n\n// The spinner tail is rendered using two 135deg arc segments, behind a 105deg arc mask.\n// The segments are rotated out from behind the mask to expand the visible arc from\n// 30deg (min) to 255deg (max), and then back behind the mask again to shrink the arc.\n// The tail and spinner itself also have 360deg rotation animations for the spin.\nconst useSpinnerTailBaseClassName = makeResetStyles({\n position: 'absolute',\n display: 'block',\n width: '100%',\n height: '100%',\n maskImage: 'conic-gradient(transparent 105deg, white 105deg)',\n\n '&::before, &::after': {\n content: '\"\"',\n position: 'absolute',\n display: 'block',\n width: '100%',\n height: '100%',\n animation: 'inherit',\n backgroundImage: 'conic-gradient(currentcolor 135deg, transparent 135deg)',\n },\n\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: tokens.curveEasyEase,\n animationName: {\n '0%': { transform: 'rotate(-135deg)' },\n '50%': { transform: 'rotate(0deg)' },\n '100%': { transform: 'rotate(225deg)' },\n },\n '&::before': {\n animationName: {\n '0%': { transform: 'rotate(0deg)' },\n '50%': { transform: 'rotate(105deg)' },\n '100%': { transform: 'rotate(0deg)' },\n },\n },\n '&::after': {\n animationName: {\n '0%': { transform: 'rotate(0deg)' },\n '50%': { transform: 'rotate(225deg)' },\n '100%': { transform: 'rotate(0deg)' },\n },\n },\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationIterationCount: '0',\n backgroundImage: 'conic-gradient(transparent 120deg, currentcolor 360deg)',\n '&::before, &::after': {\n content: 'none',\n },\n },\n});\n\nconst useSpinnerStyles = makeStyles({\n inverted: {\n backgroundColor: tokens.colorNeutralStrokeAlpha2,\n color: tokens.colorNeutralStrokeOnBrand2,\n },\n\n rtlTail: {\n maskImage: 'conic-gradient(white 255deg, transparent 255deg)',\n '&::before, &::after': {\n backgroundImage: 'conic-gradient(transparent 225deg, currentcolor 225deg)',\n },\n '@media screen and (prefers-reduced-motion: reduce)': {\n backgroundImage: 'conic-gradient(currentcolor 0deg, transparent 240deg)',\n },\n },\n\n 'extra-tiny': {\n height: '16px',\n width: '16px',\n [vars.strokeWidth]: tokens.strokeWidthThick,\n },\n\n tiny: {\n height: '20px',\n width: '20px',\n [vars.strokeWidth]: tokens.strokeWidthThick,\n },\n\n 'extra-small': {\n height: '24px',\n width: '24px',\n [vars.strokeWidth]: tokens.strokeWidthThick,\n },\n\n small: {\n height: '28px',\n width: '28px',\n [vars.strokeWidth]: tokens.strokeWidthThick,\n },\n\n medium: {\n height: '32px',\n width: '32px',\n [vars.strokeWidth]: tokens.strokeWidthThicker,\n },\n\n large: {\n height: '36px',\n width: '36px',\n [vars.strokeWidth]: tokens.strokeWidthThicker,\n },\n\n 'extra-large': {\n height: '40px',\n width: '40px',\n [vars.strokeWidth]: tokens.strokeWidthThicker,\n },\n\n huge: {\n height: '44px',\n width: '44px',\n [vars.strokeWidth]: tokens.strokeWidthThickest,\n },\n});\n\nconst useLabelStyles = makeStyles({\n inverted: {\n color: tokens.colorNeutralForegroundStaticInverted,\n },\n\n 'extra-tiny': {\n ...typographyStyles.body1,\n },\n\n tiny: {\n ...typographyStyles.body1,\n },\n\n 'extra-small': {\n ...typographyStyles.body1,\n },\n\n small: {\n ...typographyStyles.body1,\n },\n\n medium: {\n ...typographyStyles.subtitle2,\n },\n\n large: {\n ...typographyStyles.subtitle2,\n },\n\n 'extra-large': {\n ...typographyStyles.subtitle2,\n },\n\n huge: {\n ...typographyStyles.subtitle1,\n },\n});\n\n/**\n * Apply styling to the Spinner slots based on the state\n */\nexport const useSpinnerStyles_unstable = (state: SpinnerState): SpinnerState => {\n 'use no memo';\n\n const { labelPosition, size, appearance } = state;\n const { dir } = useFluent();\n\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const spinnerBaseClassName = useSpinnerBaseClassName();\n const spinnerStyles = useSpinnerStyles();\n const spinnerTailBaseClassName = useSpinnerTailBaseClassName();\n const labelStyles = useLabelStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n spinnerClassNames.root,\n rootBaseClassName,\n (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical,\n state.root.className,\n );\n if (state.spinner) {\n // eslint-disable-next-line react-hooks/immutability\n state.spinner.className = mergeClasses(\n spinnerClassNames.spinner,\n spinnerBaseClassName,\n spinnerStyles[size],\n appearance === 'inverted' && spinnerStyles.inverted,\n state.spinner.className,\n );\n }\n if (state.spinnerTail) {\n // eslint-disable-next-line react-hooks/immutability\n state.spinnerTail.className = mergeClasses(\n spinnerClassNames.spinnerTail,\n spinnerTailBaseClassName,\n dir === 'rtl' && spinnerStyles.rtlTail,\n state.spinnerTail.className,\n );\n }\n if (state.label) {\n // eslint-disable-next-line react-hooks/immutability\n state.label.className = mergeClasses(\n spinnerClassNames.label,\n labelStyles[size],\n appearance === 'inverted' && labelStyles.inverted,\n state.label.className,\n );\n }\n\n return state;\n};\n"],"names":["useFluent_unstable","useFluent","tokens","typographyStyles","makeResetStyles","makeStyles","mergeClasses","spinnerClassNames","root","spinner","spinnerTail","label","vars","strokeWidth","useRootBaseClassName","display","alignItems","justifyContent","lineHeight","gap","overflow","minWidth","useRootStyles","vertical","flexDirection","useSpinnerBaseClassName","position","flexShrink","maskImage","backgroundColor","colorBrandStroke2Contrast","color","colorBrandStroke1","forcedColorAdjust","animationDuration","animationIterationCount","animationTimingFunction","animationName","transform","useSpinnerTailBaseClassName","width","height","content","animation","backgroundImage","curveEasyEase","useSpinnerStyles","inverted","colorNeutralStrokeAlpha2","colorNeutralStrokeOnBrand2","rtlTail","strokeWidthThick","tiny","small","medium","strokeWidthThicker","large","huge","strokeWidthThickest","useLabelStyles","colorNeutralForegroundStaticInverted","body1","subtitle2","subtitle1","useSpinnerStyles_unstable","state","labelPosition","size","appearance","dir","rootBaseClassName","rootStyles","spinnerBaseClassName","spinnerStyles","spinnerTailBaseClassName","labelStyles","className"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-spinner",
3
- "version": "9.8.2",
3
+ "version": "9.8.3",
4
4
  "description": "Spinner component for Fluent UI React",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -12,11 +12,11 @@
12
12
  },
13
13
  "license": "MIT",
14
14
  "dependencies": {
15
- "@fluentui/react-jsx-runtime": "^9.4.2",
16
- "@fluentui/react-label": "^9.4.1",
15
+ "@fluentui/react-jsx-runtime": "^9.4.3",
16
+ "@fluentui/react-label": "^9.4.2",
17
17
  "@fluentui/react-shared-contexts": "^9.26.2",
18
18
  "@fluentui/react-theme": "^9.2.1",
19
- "@fluentui/react-utilities": "^9.26.3",
19
+ "@fluentui/react-utilities": "^9.26.4",
20
20
  "@griffel/react": "^1.5.32",
21
21
  "@swc/helpers": "^0.5.1"
22
22
  },