npm - @fluentui/react-spinner - Versions diffs - 9.7.4 → 9.7.5 - Mend

@fluentui/react-spinner 9.7.4 → 9.7.5

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

package/CHANGELOG.md CHANGED Viewed

@@ -1,20 +1,36 @@
 # Change Log - @fluentui/react-spinner
-This log was last generated on Thu, 21 Aug 2025 12:20:43 GMT and should not be manually modified.
+This log was last generated on Mon, 08 Sep 2025 12:41:15 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.7.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.7.5)
+Mon, 08 Sep 2025 12:41:15 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.7.4..@fluentui/react-spinner_v9.7.5)
+### Patches
+- chore: enforce explicit module boundary types ([PR #35080](https://github.com/microsoft/fluentui/pull/35080) by dmytrokirpa@microsoft.com)
+- chore: extend peer dependencies versions to support React 19 ([PR #35145](https://github.com/microsoft/fluentui/pull/35145) by dmytrokirpa@microsoft.com)
+- fix: react 19 type issues ([PR #34864](https://github.com/microsoft/fluentui/pull/34864) by dmytrokirpa@microsoft.com)
+- fix: set min-width to min-content to prevent spinner clipping ([PR #35068](https://github.com/microsoft/fluentui/pull/35068) by busratemizyureek@gmail.com)
+- Bump @fluentui/react-jsx-runtime to v9.2.0 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-label to v9.3.5 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-utilities to v9.24.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
 ## [9.7.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.7.4)
-Thu, 21 Aug 2025 12:20:43 GMT
+Thu, 21 Aug 2025 12:25:39 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.7.3..@fluentui/react-spinner_v9.7.4)
 ### Patches
-- Bump @fluentui/react-jsx-runtime to v9.1.6 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-label to v9.3.4 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-shared-contexts to v9.25.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-utilities to v9.24.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.1.6 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-label to v9.3.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-utilities to v9.24.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
 ## [9.7.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.7.3)

package/dist/index.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { JSXElement } from '@fluentui/react-utilities';
 import { Label } from '@fluentui/react-label';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
@@ -9,7 +10,7 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of Spinner
  */
-export declare const renderSpinner_unstable: (state: SpinnerState) => JSX.Element;
+export declare const renderSpinner_unstable: (state: SpinnerState) => JSXElement;
 /**
  * Converged Spinner component for the fluentui repo

package/lib/components/Spinner/renderSpinner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Spinner/renderSpinner.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { SpinnerState, SpinnerSlots } from './Spinner.types';\n\n/\n Render the final JSX of Spinner\n */\nexport const renderSpinner_unstable = (state: SpinnerState) => {\n assertSlots<SpinnerSlots>(state);\n const { labelPosition, shouldRenderSpinner } = state;\n return (\n <state.root>\n {state.label && shouldRenderSpinner && (labelPosition === 'above' \|\| labelPosition === 'before') && (\n <state.label />\n )}\n {state.spinner && shouldRenderSpinner && (\n <state.spinner>{state.spinnerTail && <state.spinnerTail />}</state.spinner>\n )}\n {state.label && shouldRenderSpinner && (labelPosition === 'below' \|\| labelPosition === 'after') && (\n <state.label />\n )}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderSpinner_unstable","state","labelPosition","shouldRenderSpinner","root","label","spinner","spinnerTail"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;~~AAGxD~~;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC;IACrCF,YAA0BE;IAC1B,MAAM,EAAEC,aAAa,EAAEC,mBAAmB,EAAE,GAAGF;IAC/C,qBACE,MAACA,MAAMG,IAAI;;YACRH,MAAMI,KAAK,IAAIF,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,QAAO,mBAC5F,KAACD,MAAMI,KAAK;YAEbJ,MAAMK,OAAO,IAAIH,qCAChB,KAACF,MAAMK,OAAO;0BAAEL,MAAMM,WAAW,kBAAI,KAACN,MAAMM,WAAW;;YAExDN,MAAMI,KAAK,IAAIF,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,OAAM,mBAC3F,KAACD,MAAMI,KAAK;;;AAIpB,EAAE"}
1	+ {"version":3,"sources":["../src/components/Spinner/renderSpinner.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { SpinnerState, SpinnerSlots } from './Spinner.types';\n\n/\n Render the final JSX of Spinner\n */\nexport const renderSpinner_unstable = (state: SpinnerState): JSXElement => {\n assertSlots<SpinnerSlots>(state);\n const { labelPosition, shouldRenderSpinner } = state;\n return (\n <state.root>\n {state.label && shouldRenderSpinner && (labelPosition === 'above' \|\| labelPosition === 'before') && (\n <state.label />\n )}\n {state.spinner && shouldRenderSpinner && (\n <state.spinner>{state.spinnerTail && <state.spinnerTail />}</state.spinner>\n )}\n {state.label && shouldRenderSpinner && (labelPosition === 'below' \|\| labelPosition === 'after') && (\n <state.label />\n )}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderSpinner_unstable","state","labelPosition","shouldRenderSpinner","root","label","spinner","spinnerTail"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC;IACrCF,YAA0BE;IAC1B,MAAM,EAAEC,aAAa,EAAEC,mBAAmB,EAAE,GAAGF;IAC/C,qBACE,MAACA,MAAMG,IAAI;;YACRH,MAAMI,KAAK,IAAIF,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,QAAO,mBAC5F,KAACD,MAAMI,KAAK;YAEbJ,MAAMK,OAAO,IAAIH,qCAChB,KAACF,MAAMK,OAAO;0BAAEL,MAAMM,WAAW,kBAAI,KAACN,MAAMM,WAAW;;YAExDN,MAAMI,KAAK,IAAIF,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,OAAM,mBAC3F,KAACD,MAAMI,KAAK;;;AAIpB,EAAE"}

package/lib/components/Spinner/useSpinnerStyles.styles.js CHANGED Viewed

@@ -13,7 +13,7 @@ export const spinnerClassNames = {
 const vars = {
   strokeWidth: '--fui-Spinner--strokeWidth'
 };
-const useRootBaseClassName = /*#__PURE__*/__resetStyles("r82apo5", null, [".r82apo5{display:flex;align-items:center;justify-content:center;line-height:0;gap:8px;overflow:hidden;}"]);
+const useRootBaseClassName = /*#__PURE__*/__resetStyles("rpp59a7", null, [".rpp59a7{display:flex;align-items:center;justify-content:center;line-height:0;gap:8px;overflow:hidden;min-width:min-content;}"]);
 const useRootStyles = /*#__PURE__*/__styles({
   vertical: {
     Beiy3e4: "f1vx9l62"

package/lib/components/Spinner/useSpinnerStyles.styles.js.map CHANGED Viewed

	@@ -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","Br2kee7","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":["import { 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});\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","Br2kee7","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":["import { 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":[]}

package/lib/components/Spinner/useSpinnerStyles.styles.raw.js CHANGED Viewed

@@ -18,7 +18,8 @@ const useRootBaseClassName = makeResetStyles({
     justifyContent: 'center',
     lineHeight: '0',
     gap: '8px',
-    overflow: 'hidden'
+    overflow: 'hidden',
+    minWidth: 'min-content'
 });
 const useRootStyles = makeStyles({
     vertical: {

package/lib/components/Spinner/useSpinnerStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Spinner/useSpinnerStyles.styles.ts"],"sourcesContent":["import { 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});\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","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":["import { 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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"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/contexts/SpinnerContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { SpinnerProps } from '../components/Spinner/Spinner.types';\n\nconst SpinnerContext = React.createContext<SpinnerContextValue \| undefined>(undefined);\n\n/*\n @internal\n /\nexport type SpinnerContextValue = Pick<SpinnerProps, 'size'>;\n\nconst SpinnerContextDefaultValue: SpinnerContextValue = {};\n\n/\n @internal\n /\nexport const SpinnerContextProvider = SpinnerContext.Provider;\n\n/\n @internal\n */\nexport const useSpinnerContext = () => React.useContext(SpinnerContext) ?? SpinnerContextDefaultValue;\n"],"names":["React","SpinnerContext","createContext","undefined","SpinnerContextDefaultValue","SpinnerContextProvider","Provider","useSpinnerContext","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,iBAAiBD,MAAME,aAAa,CAAkCC;AAO5E,MAAMC,6BAAkD,CAAC;AAEzD;;CAEC,GACD,OAAO,MAAMC,yBAAyBJ,eAAeK,QAAQ,CAAC;AAE9D;;CAEC,GACD,OAAO,MAAMC,oBAAoB;~~QAAMP~~;WAAAA,CAAAA,oBAAAA,MAAMQ,UAAU,CAACP,6BAAjBD,+BAAAA,oBAAoCI;EAA2B"}
1	+ {"version":3,"sources":["../src/contexts/SpinnerContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { SpinnerProps } from '../components/Spinner/Spinner.types';\n\nconst SpinnerContext = React.createContext<SpinnerContextValue \| undefined>(undefined);\n\n/*\n @internal\n /\nexport type SpinnerContextValue = Pick<SpinnerProps, 'size'>;\n\nconst SpinnerContextDefaultValue: SpinnerContextValue = {};\n\n/\n @internal\n /\nexport const SpinnerContextProvider = SpinnerContext.Provider;\n\n/\n @internal\n */\nexport const useSpinnerContext = (): SpinnerContextValue =>\n React.useContext(SpinnerContext) ?? SpinnerContextDefaultValue;\n"],"names":["React","SpinnerContext","createContext","undefined","SpinnerContextDefaultValue","SpinnerContextProvider","Provider","useSpinnerContext","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,iBAAiBD,MAAME,aAAa,CAAkCC;AAO5E,MAAMC,6BAAkD,CAAC;AAEzD;;CAEC,GACD,OAAO,MAAMC,yBAAyBJ,eAAeK,QAAQ,CAAC;AAE9D;;CAEC,GACD,OAAO,MAAMC,oBAAoB;QAC/BP;WAAAA,CAAAA,oBAAAA,MAAMQ,UAAU,CAACP,6BAAjBD,+BAAAA,oBAAoCI;EAA2B"}

package/lib-commonjs/components/Spinner/renderSpinner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Spinner/renderSpinner.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { SpinnerState, SpinnerSlots } from './Spinner.types';\n\n/\n Render the final JSX of Spinner\n */\nexport const renderSpinner_unstable = (state: SpinnerState) => {\n assertSlots<SpinnerSlots>(state);\n const { labelPosition, shouldRenderSpinner } = state;\n return (\n <state.root>\n {state.label && shouldRenderSpinner && (labelPosition === 'above' \|\| labelPosition === 'before') && (\n <state.label />\n )}\n {state.spinner && shouldRenderSpinner && (\n <state.spinner>{state.spinnerTail && <state.spinnerTail />}</state.spinner>\n )}\n {state.label && shouldRenderSpinner && (labelPosition === 'below' \|\| labelPosition === 'after') && (\n <state.label />\n )}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderSpinner_unstable","state","labelPosition","shouldRenderSpinner","root","label","spinner","spinnerTail"],"mappings":";;;;+~~BASaC~~;;;;;;~~4BARb~~,iCAAiD;gCAErB,4BAA4B;~~AAMjD~~,+BAA+B,CAACC;QACrCF,2BAAAA,EAA0BE;IAC1B,MAAM,EAAEC,aAAa,EAAEC,mBAAmB,EAAE,GAAGF;IAC/C,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMG,IAAI,EAAA;;YACRH,MAAMI,KAAK,IAAIF,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,QAAA,CAAO,IAAA,WAAA,OAC5F,eAAA,EAACD,MAAMI,KAAK,EAAA,CAAA;YAEbJ,MAAMK,OAAO,IAAIH,uBAAAA,WAAAA,OAChB,eAAA,EAACF,MAAMK,OAAO,EAAA;0BAAEL,MAAMM,WAAW,IAAA,WAAA,OAAI,eAAA,EAACN,MAAMM,WAAW,EAAA,CAAA;;YAExDN,MAAMI,KAAK,IAAIF,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,OAAA,CAAM,IAAA,WAAA,OAC3F,eAAA,EAACD,MAAMI,KAAK,EAAA,CAAA;;;AAIpB,EAAE"}
1	+ {"version":3,"sources":["../src/components/Spinner/renderSpinner.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { SpinnerState, SpinnerSlots } from './Spinner.types';\n\n/\n Render the final JSX of Spinner\n */\nexport const renderSpinner_unstable = (state: SpinnerState): JSXElement => {\n assertSlots<SpinnerSlots>(state);\n const { labelPosition, shouldRenderSpinner } = state;\n return (\n <state.root>\n {state.label && shouldRenderSpinner && (labelPosition === 'above' \|\| labelPosition === 'before') && (\n <state.label />\n )}\n {state.spinner && shouldRenderSpinner && (\n <state.spinner>{state.spinnerTail && <state.spinnerTail />}</state.spinner>\n )}\n {state.label && shouldRenderSpinner && (labelPosition === 'below' \|\| labelPosition === 'after') && (\n <state.label />\n )}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderSpinner_unstable","state","labelPosition","shouldRenderSpinner","root","label","spinner","spinnerTail"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,+BAA+B,CAACC;QACrCF,2BAAAA,EAA0BE;IAC1B,MAAM,EAAEC,aAAa,EAAEC,mBAAmB,EAAE,GAAGF;IAC/C,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMG,IAAI,EAAA;;YACRH,MAAMI,KAAK,IAAIF,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,QAAA,CAAO,IAAA,WAAA,OAC5F,eAAA,EAACD,MAAMI,KAAK,EAAA,CAAA;YAEbJ,MAAMK,OAAO,IAAIH,uBAAAA,WAAAA,OAChB,eAAA,EAACF,MAAMK,OAAO,EAAA;0BAAEL,MAAMM,WAAW,IAAA,WAAA,OAAI,eAAA,EAACN,MAAMM,WAAW,EAAA,CAAA;;YAExDN,MAAMI,KAAK,IAAIF,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,OAAA,CAAM,IAAA,WAAA,OAC3F,eAAA,EAACD,MAAMI,KAAK,EAAA,CAAA;;;AAIpB,EAAE"}

package/lib-commonjs/components/Spinner/useSpinnerStyles.styles.js CHANGED Viewed

@@ -29,8 +29,8 @@ const spinnerClassNames = {
  */ const vars = {
     strokeWidth: '--fui-Spinner--strokeWidth'
 };
-const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r82apo5", null, [
-    ".r82apo5{display:flex;align-items:center;justify-content:center;line-height:0;gap:8px;overflow:hidden;}"
+const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rpp59a7", null, [
+    ".rpp59a7{display:flex;align-items:center;justify-content:center;line-height:0;gap:8px;overflow:hidden;min-width:min-content;}"
 ]);
 const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
     vertical: {

package/lib-commonjs/components/Spinner/useSpinnerStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useSpinnerStyles.styles.js"],"sourcesContent":["import { 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});\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","Br2kee7","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":["import { 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","Br2kee7","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 Viewed

@@ -36,7 +36,8 @@ const useRootBaseClassName = (0, _react.makeResetStyles)({
     justifyContent: 'center',
     lineHeight: '0',
     gap: '8px',
-    overflow: 'hidden'
+    overflow: 'hidden',
+    minWidth: 'min-content'
 });
 const useRootStyles = (0, _react.makeStyles)({
     vertical: {

package/lib-commonjs/components/Spinner/useSpinnerStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Spinner/useSpinnerStyles.styles.ts"],"sourcesContent":["import { 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});\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","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":";;;;;;;;;;;IAMaO,iBAAAA;;;6BA2NAwD;eAAAA;;;qCAjOmC,kCAAkC;4BACzC,wBAAwB;uBAEP,iBAAiB;AAGpE,0BAAwD;IAC7DvD,MAAM;IACNC,SAAS;IACTC,aAAa;IACbC,OAAO;AACT,EAAE;AAEF;;CAEC,GACD,MAAMC,OAAO;IACXC,aAAa;AACf;AAEA,MAAMC,2BAAuBV,sBAAAA,EAAgB;IAC3CW,SAAS;IACTC,YAAY;IACZC,gBAAgB;IAChBC,YAAY;IACZC,KAAK;IACLC,UAAU;AACZ;AAEA,MAAMC,oBAAgBhB,iBAAAA,EAAW;IAC/BiB,UAAU;QACRC,eAAe;IACjB;AACF;AAEA,MAAMC,8BAA0BpB,sBAAAA,EAAgB;IAC9CqB,UAAU;IACVC,YAAY;IAEZ,sDAAsD;IACtDC,WACE,CAAC,8BAA8B,CAAC,GAChC,CAAC,4BAA4B,EAAEf,KAAKC,WAAW,CAAC,UAAU,CAAC,GAC3D,CAAC,sBAAsB,EAAED,KAAKC,WAAW,CAAC,qBAAqB,CAAC,GAChE,CAAC,iBAAiB,CAAC;IAErBe,iBAAiB1B,kBAAAA,CAAO2B,yBAAyB;IACjDC,OAAO5B,kBAAAA,CAAO6B,iBAAiB;IAC/B,6CAA6C;QAC3CH,iBAAiB;QACjBE,OAAO;QACPE,mBAAmB;IACrB;IAEAC,mBAAmB;IACnBC,yBAAyB;IACzBC,yBAAyB;IACzBC,eAAe;QACb,MAAM;YAAEC,WAAW;QAAe;QAClC,QAAQ;YAAEA,WAAW;QAAiB;IACxC;IAEA,sDAAsD;QACpDJ,mBAAmB;IACrB;AACF;AAEA,wFAAwF;AACxF,mFAAmF;AACnF,sFAAsF;AACtF,iFAAiF;AACjF,MAAMK,kCAA8BlC,sBAAAA,EAAgB;IAClDqB,UAAU;IACVV,SAAS;IACTwB,OAAO;IACPC,QAAQ;IACRb,WAAW;IAEX,uBAAuB;QACrBc,SAAS;QACThB,UAAU;QACVV,SAAS;QACTwB,OAAO;QACPC,QAAQ;QACRE,WAAW;QACXC,iBAAiB;IACnB;IAEAV,mBAAmB;IACnBC,yBAAyB;IACzBC,yBAAyBjC,kBAAAA,CAAO0C,aAAa;IAC7CR,eAAe;QACb,MAAM;YAAEC,WAAW;QAAkB;QACrC,OAAO;YAAEA,WAAW;QAAe;QACnC,QAAQ;YAAEA,WAAW;QAAiB;IACxC;IACA,aAAa;QACXD,eAAe;YACb,MAAM;gBAAEC,WAAW;YAAe;YAClC,OAAO;gBAAEA,WAAW;YAAiB;YACrC,QAAQ;gBAAEA,WAAW;YAAe;QACtC;IACF;IACA,YAAY;QACVD,eAAe;YACb,MAAM;gBAAEC,WAAW;YAAe;YAClC,OAAO;gBAAEA,WAAW;YAAiB;YACrC,QAAQ;gBAAEA,WAAW;YAAe;QACtC;IACF;IACA,sDAAsD;QACpDH,yBAAyB;QACzBS,iBAAiB;QACjB,uBAAuB;YACrBF,SAAS;QACX;IACF;AACF;AAEA,MAAMI,uBAAmBxC,iBAAAA,EAAW;IAClCyC,UAAU;QACRlB,iBAAiB1B,kBAAAA,CAAO6C,wBAAwB;QAChDjB,OAAO5B,kBAAAA,CAAO8C,0BAA0B;IAC1C;IAEAC,SAAS;QACPtB,WAAW;QACX,uBAAuB;YACrBgB,iBAAiB;QACnB;QACA,sDAAsD;YACpDA,iBAAiB;QACnB;IACF;IAEA,cAAc;QACZH,QAAQ;QACRD,OAAO;QACP,CAAC3B,KAAKC,WAAW,CAAC,EAAEX,kBAAAA,CAAOgD,gBAAgB;IAC7C;IAEAC,MAAM;QACJX,QAAQ;QACRD,OAAO;QACP,CAAC3B,KAAKC,WAAW,CAAC,EAAEX,kBAAAA,CAAOgD,gBAAgB;IAC7C;IAEA,eAAe;QACbV,QAAQ;QACRD,OAAO;QACP,CAAC3B,KAAKC,WAAW,CAAC,EAAEX,kBAAAA,CAAOgD,gBAAgB;IAC7C;IAEAE,OAAO;QACLZ,QAAQ;QACRD,OAAO;QACP,CAAC3B,KAAKC,WAAW,CAAC,EAAEX,kBAAAA,CAAOgD,gBAAgB;IAC7C;IAEAG,QAAQ;QACNb,QAAQ;QACRD,OAAO;QACP,CAAC3B,KAAKC,WAAW,CAAC,EAAEX,kBAAAA,CAAOoD,kBAAkB;IAC/C;IAEAC,OAAO;QACLf,QAAQ;QACRD,OAAO;QACP,CAAC3B,KAAKC,WAAW,CAAC,EAAEX,kBAAAA,CAAOoD,kBAAkB;IAC/C;IAEA,eAAe;QACbd,QAAQ;QACRD,OAAO;QACP,CAAC3B,KAAKC,WAAW,CAAC,EAAEX,kBAAAA,CAAOoD,kBAAkB;IAC/C;IAEAE,MAAM;QACJhB,QAAQ;QACRD,OAAO;QACP,CAAC3B,KAAKC,WAAW,CAAC,EAAEX,kBAAAA,CAAOuD,mBAAmB;IAChD;AACF;AAEA,MAAMC,qBAAiBrD,iBAAAA,EAAW;IAChCyC,UAAU;QACRhB,OAAO5B,kBAAAA,CAAOyD,oCAAoC;IACpD;IAEA,cAAc;QACZ,GAAGxD,4BAAAA,CAAiByD,KAAK;IAC3B;IAEAT,MAAM;QACJ,GAAGhD,4BAAAA,CAAiByD,KAAK;IAC3B;IAEA,eAAe;QACb,GAAGzD,4BAAAA,CAAiByD,KAAK;IAC3B;IAEAR,OAAO;QACL,GAAGjD,4BAAAA,CAAiByD,KAAK;IAC3B;IAEAP,QAAQ;QACN,GAAGlD,4BAAAA,CAAiB0D,SAAS;IAC/B;IAEAN,OAAO;QACL,GAAGpD,4BAAAA,CAAiB0D,SAAS;IAC/B;IAEA,eAAe;QACb,GAAG1D,4BAAAA,CAAiB0D,SAAS;IAC/B;IAEAL,MAAM;QACJ,GAAGrD,4BAAAA,CAAiB2D,SAAS;IAC/B;AACF;AAKO,kCAAkC,CAACE;IACxC;IAEA,MAAM,EAAEC,aAAa,EAAEC,IAAI,EAAEC,UAAU,EAAE,GAAGH;IAC5C,MAAM,EAAEI,GAAG,EAAE,OAAGnE,uCAAAA;IAEhB,MAAMoE,oBAAoBvD;IAC1B,MAAMwD,aAAajD;IACnB,MAAMkD,uBAAuB/C;IAC7B,MAAMgD,gBAAgB3B;IACtB,MAAM4B,2BAA2BnC;IACjC,MAAMoC,cAAchB;IAEpBM,MAAMxD,IAAI,CAACmE,SAAS,OAAGrE,mBAAAA,EACrBC,kBAAkBC,IAAI,EACtB6D,mBACCJ,CAAAA,kBAAkB,WAAWA,kBAAkB,OAAA,CAAM,IAAMK,WAAWhD,QAAQ,EAC/E0C,MAAMxD,IAAI,CAACmE,SAAS;IAEtB,IAAIX,MAAMvD,OAAO,EAAE;QACjBuD,MAAMvD,OAAO,CAACkE,SAAS,OAAGrE,mBAAAA,EACxBC,kBAAkBE,OAAO,EACzB8D,sBACAC,aAAa,CAACN,KAAK,EACnBC,eAAe,cAAcK,cAAc1B,QAAQ,EACnDkB,MAAMvD,OAAO,CAACkE,SAAS;IAE3B;IACA,IAAIX,MAAMtD,WAAW,EAAE;QACrBsD,MAAMtD,WAAW,CAACiE,SAAS,OAAGrE,mBAAAA,EAC5BC,kBAAkBG,WAAW,EAC7B+D,0BACAL,QAAQ,SAASI,cAAcvB,OAAO,EACtCe,MAAMtD,WAAW,CAACiE,SAAS;IAE/B;IACA,IAAIX,MAAMrD,KAAK,EAAE;QACfqD,MAAMrD,KAAK,CAACgE,SAAS,OAAGrE,mBAAAA,EACtBC,kBAAkBI,KAAK,EACvB+D,WAAW,CAACR,KAAK,EACjBC,eAAe,cAAcO,YAAY5B,QAAQ,EACjDkB,MAAMrD,KAAK,CAACgE,SAAS;IAEzB;IAEA,OAAOX;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/Spinner/useSpinnerStyles.styles.ts"],"sourcesContent":["import { 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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"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/contexts/SpinnerContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { SpinnerProps } from '../components/Spinner/Spinner.types';\n\nconst SpinnerContext = React.createContext<SpinnerContextValue \| undefined>(undefined);\n\n/*\n @internal\n /\nexport type SpinnerContextValue = Pick<SpinnerProps, 'size'>;\n\nconst SpinnerContextDefaultValue: SpinnerContextValue = {};\n\n/\n @internal\n /\nexport const SpinnerContextProvider = SpinnerContext.Provider;\n\n/\n @internal\n */\nexport const useSpinnerContext = () => React.useContext(SpinnerContext) ?? SpinnerContextDefaultValue;\n"],"names":["React","SpinnerContext","createContext","undefined","SpinnerContextDefaultValue","SpinnerContextProvider","Provider","useSpinnerContext","useContext"],"mappings":";;;;;;;;;;;IAeaK,sBAAAA;;;qBAKAE;;;;;iEApBU,QAAQ;AAG/B,MAAMN,+BAAiBD,OAAME,aAAa,CAAkCC;AAO5E,MAAMC,6BAAkD,CAAC;AAKlD,+BAA+BH,eAAeK,QAAQ,CAAC;AAKvD,MAAMC,oBAAoB;~~QAAMP~~;WAAAA,CAAAA,oBAAAA,OAAMQ,UAAU,CAACP,eAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAAoCI;EAA2B"}
1	+ {"version":3,"sources":["../src/contexts/SpinnerContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { SpinnerProps } from '../components/Spinner/Spinner.types';\n\nconst SpinnerContext = React.createContext<SpinnerContextValue \| undefined>(undefined);\n\n/*\n @internal\n /\nexport type SpinnerContextValue = Pick<SpinnerProps, 'size'>;\n\nconst SpinnerContextDefaultValue: SpinnerContextValue = {};\n\n/\n @internal\n /\nexport const SpinnerContextProvider = SpinnerContext.Provider;\n\n/\n @internal\n */\nexport const useSpinnerContext = (): SpinnerContextValue =>\n React.useContext(SpinnerContext) ?? SpinnerContextDefaultValue;\n"],"names":["React","SpinnerContext","createContext","undefined","SpinnerContextDefaultValue","SpinnerContextProvider","Provider","useSpinnerContext","useContext"],"mappings":";;;;;;;;;;;IAeaK,sBAAAA;;;qBAKAE;;;;;iEApBU,QAAQ;AAG/B,MAAMN,+BAAiBD,OAAME,aAAa,CAAkCC;AAO5E,MAAMC,6BAAkD,CAAC;AAKlD,+BAA+BH,eAAeK,QAAQ,CAAC;AAKvD,MAAMC,oBAAoB;QAC/BP;WAAAA,CAAAA,oBAAAA,OAAMQ,UAAU,CAACP,eAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAAoCI;EAA2B"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-spinner",
-  "version": "9.7.4",
+  "version": "9.7.5",
   "description": "Spinner component for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -18,19 +18,19 @@
     "@fluentui/scripts-api-extractor": "*"
   },
   "dependencies": {
-    "@fluentui/react-jsx-runtime": "^9.1.6",
-    "@fluentui/react-label": "^9.3.4",
-    "@fluentui/react-shared-contexts": "^9.25.0",
+    "@fluentui/react-jsx-runtime": "^9.2.0",
+    "@fluentui/react-label": "^9.3.5",
+    "@fluentui/react-shared-contexts": "^9.25.1",
     "@fluentui/react-theme": "^9.2.0",
-    "@fluentui/react-utilities": "^9.24.0",
+    "@fluentui/react-utilities": "^9.24.1",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
-    "@types/react": ">=16.14.0 <19.0.0",
-    "@types/react-dom": ">=16.9.0 <19.0.0",
-    "react": ">=16.14.0 <19.0.0",
-    "react-dom": ">=16.14.0 <19.0.0"
+    "@types/react": ">=16.14.0 <20.0.0",
+    "@types/react-dom": ">=16.9.0 <20.0.0",
+    "react": ">=16.14.0 <20.0.0",
+    "react-dom": ">=16.14.0 <20.0.0"
   },
   "beachball": {
     "disallowedChangeTypes": [