@fluentui/react-spinner 9.0.0-beta.9 → 9.0.0-rc.4

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 (38) hide show
  1. package/CHANGELOG.json +144 -1
  2. package/CHANGELOG.md +42 -2
  3. package/README.md +8 -7
  4. package/Spec.md +0 -2
  5. package/dist/index.d.ts +5 -12
  6. package/{lib → dist}/tsdoc-metadata.json +0 -0
  7. package/lib/components/Spinner/Spinner.types.js.map +1 -1
  8. package/lib/components/Spinner/renderSpinner.js +2 -3
  9. package/lib/components/Spinner/renderSpinner.js.map +1 -1
  10. package/lib/components/Spinner/useSpinner.js +1 -3
  11. package/lib/components/Spinner/useSpinner.js.map +1 -1
  12. package/lib/components/Spinner/useSpinnerStyles.js +41 -54
  13. package/lib/components/Spinner/useSpinnerStyles.js.map +1 -1
  14. package/lib-commonjs/components/Spinner/renderSpinner.js +2 -3
  15. package/lib-commonjs/components/Spinner/renderSpinner.js.map +1 -1
  16. package/lib-commonjs/components/Spinner/useSpinner.js +1 -3
  17. package/lib-commonjs/components/Spinner/useSpinner.js.map +1 -1
  18. package/lib-commonjs/components/Spinner/useSpinnerStyles.js +40 -53
  19. package/lib-commonjs/components/Spinner/useSpinnerStyles.js.map +1 -1
  20. package/package.json +7 -7
  21. package/lib/Spinner.d.ts +0 -1
  22. package/lib/components/Spinner/DefaultSvg.d.ts +0 -1
  23. package/lib/components/Spinner/Spinner.d.ts +0 -6
  24. package/lib/components/Spinner/Spinner.types.d.ts +0 -51
  25. package/lib/components/Spinner/index.d.ts +0 -5
  26. package/lib/components/Spinner/renderSpinner.d.ts +0 -5
  27. package/lib/components/Spinner/useSpinner.d.ts +0 -12
  28. package/lib/components/Spinner/useSpinnerStyles.d.ts +0 -7
  29. package/lib/index.d.ts +0 -2
  30. package/lib-commonjs/Spinner.d.ts +0 -1
  31. package/lib-commonjs/components/Spinner/DefaultSvg.d.ts +0 -1
  32. package/lib-commonjs/components/Spinner/Spinner.d.ts +0 -6
  33. package/lib-commonjs/components/Spinner/Spinner.types.d.ts +0 -51
  34. package/lib-commonjs/components/Spinner/index.d.ts +0 -5
  35. package/lib-commonjs/components/Spinner/renderSpinner.d.ts +0 -5
  36. package/lib-commonjs/components/Spinner/useSpinner.d.ts +0 -12
  37. package/lib-commonjs/components/Spinner/useSpinnerStyles.d.ts +0 -7
  38. package/lib-commonjs/index.d.ts +0 -2
package/lib/components/Spinner/useSpinnerStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Spinner/useSpinnerStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SpinnerState, SpinnerSlots } from './Spinner.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const spinnerClassNames: SlotClassNames<SpinnerSlots> = {\n root: 'fui-Spinner',\n spinner: 'fui-Spinner__spinner',\n label: 'fui-Spinner__label',\n};\n\n/*\n * TODO: Update with proper tokens when added\n * Radii for the Spinner circles\n */\nconst rValues = {\n tiny: '9',\n extraSmall: '11',\n small: '13',\n medium: '14.5',\n large: '16.5',\n extraLarge: '18.5',\n huge: '20',\n};\n\n/*\n * TODO: Update with proper tokens when added\n * Sizes for the Spinner\n */\nconst spinnnerSizes = {\n tiny: '20px',\n extraSmall: '24px',\n small: '28px',\n medium: '32px',\n large: '36px',\n extraLarge: '40px',\n huge: '44px',\n};\n\n/*\n * TODO: Update with proper tokens when added\n * Stroke widths for the Spinner\n */\nconst spinnerStrokeWidth = {\n sWidth: '2px',\n mWidth: '3px',\n lWidth: '4px',\n};\n\n/*\n * TODO: Update with proper tokens when added\n * Animation for Spinner\n */\nconst spinnerAnimation = {\n container: {\n animationDuration: '3s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'linear',\n backgroundColor: 'transparent',\n },\n};\n\n/*\n * TODO: Update with proper tokens when added\n * Label sizes for the Spinner\n */\nconst labelSizeTokens = {\n body1: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n\n subtitle2: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n\n subtitle1: {\n fontSize: tokens.fontSizeBase500,\n lineHeight: tokens.lineHeightBase500,\n },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n ...shorthands.gap('8px'),\n },\n\n horizontal: {\n flexDirection: 'row',\n },\n\n vertical: {\n flexDirection: 'column',\n },\n});\n\nconst useLoaderStyles = makeStyles({\n // global SVG class\n spinnerSVG: {\n ':focus-visible': {\n outlineStyle: '3px solid transparent',\n },\n ['& > svg']: {\n animationName: {\n '0%': { transform: 'rotate(0deg)' },\n '100%': { transform: 'rotate(360deg)' },\n },\n ...spinnerAnimation.container,\n },\n ['& > svg > circle']: {\n cx: '50%',\n cy: '50%',\n fill: 'none',\n },\n },\n\n tiny: {\n ['& > svg']: {\n height: spinnnerSizes.tiny,\n width: spinnnerSizes.tiny,\n },\n ['& > svg > circle']: {\n strokeWidth: spinnerStrokeWidth.sWidth,\n r: rValues.tiny,\n },\n },\n\n extraSmall: {\n ['& > svg']: {\n height: spinnnerSizes.extraSmall,\n width: spinnnerSizes.extraSmall,\n },\n ['& > svg > circle']: {\n strokeWidth: spinnerStrokeWidth.sWidth,\n r: rValues.extraSmall,\n },\n },\n\n small: {\n ['& > svg']: {\n height: spinnnerSizes.small,\n width: spinnnerSizes.small,\n },\n ['& > svg > circle']: {\n strokeWidth: spinnerStrokeWidth.sWidth,\n r: rValues.small,\n },\n },\n\n medium: {\n ['& > svg']: {\n height: spinnnerSizes.medium,\n width: spinnnerSizes.medium,\n },\n ['& > svg > circle']: {\n strokeWidth: spinnerStrokeWidth.mWidth,\n r: rValues.medium,\n },\n },\n\n large: {\n ['& > svg']: {\n height: spinnnerSizes.large,\n width: spinnnerSizes.large,\n },\n ['& > svg > circle']: {\n strokeWidth: spinnerStrokeWidth.mWidth,\n r: rValues.large,\n },\n },\n\n extraLarge: {\n ['& > svg']: {\n height: spinnnerSizes.extraLarge,\n width: spinnnerSizes.extraLarge,\n },\n ['& > svg > circle']: {\n strokeWidth: spinnerStrokeWidth.mWidth,\n r: rValues.extraLarge,\n },\n },\n\n huge: {\n ['& > svg']: {\n height: spinnnerSizes.huge,\n width: spinnnerSizes.huge,\n },\n ['& > svg > circle']: {\n strokeWidth: spinnerStrokeWidth.lWidth,\n r: rValues.huge,\n },\n },\n});\n\nconst useTrackStyles = makeStyles({\n inverted: {\n ['& > svg > circle.fui-Spinner__Tail']: {\n stroke: tokens.colorNeutralStrokeOnBrand2,\n animationName: {\n '0%': {\n strokeDasharray: '1,150',\n strokeDashoffset: '0',\n },\n\n '50%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-35',\n },\n\n '100%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-124',\n },\n },\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'cubic-bezier(0.33,0,0.67,1)',\n strokeLinecap: 'round',\n transform: 'rotate(-90deg)',\n transformOrigin: '50% 50%',\n },\n\n ['& > svg > circle.fui-Spinner__Track']: {\n stroke: tokens.colorNeutralBackgroundInverted,\n },\n },\n primary: {\n ['& > svg > circle.fui-Spinner__Tail']: {\n stroke: tokens.colorBrandStroke1,\n '@media screen and (forced-colors: active)': {\n stroke: tokens.colorNeutralStrokeOnBrand2,\n },\n animationName: {\n '0%': {\n strokeDasharray: '1,150',\n strokeDashoffset: '0',\n },\n\n '50%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-35',\n },\n\n '100%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-124',\n },\n },\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'cubic-bezier(0.33,0,0.67,1)',\n strokeLinecap: 'round',\n transform: 'rotate(-90deg)',\n transformOrigin: '50% 50%',\n },\n ['& > svg > circle.fui-Spinner__Track']: {\n stroke: tokens.colorNeutralBackground4,\n '@media screen and (forced-colors: active)': {\n stroke: tokens.colorNeutralBackgroundInverted,\n },\n },\n },\n});\n\nconst useLabelStyles = makeStyles({\n // style for label\n\n tiny: {\n ...labelSizeTokens.body1,\n },\n\n extraSmall: {\n ...labelSizeTokens.body1,\n },\n\n small: {\n ...labelSizeTokens.body1,\n },\n\n medium: {\n ...labelSizeTokens.subtitle2,\n },\n\n large: {\n ...labelSizeTokens.subtitle2,\n },\n\n extraLarge: {\n ...labelSizeTokens.subtitle2,\n },\n\n huge: {\n ...labelSizeTokens.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 const { labelPosition, size = 'medium' } = state;\n const rootStyles = useRootStyles();\n const spinnerStyles = useLoaderStyles();\n const labelStyles = useLabelStyles();\n const trackStyles = useTrackStyles();\n\n state.root.className = mergeClasses(\n spinnerClassNames.root,\n rootStyles.root,\n (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical,\n (labelPosition === 'before' || labelPosition === 'after') && rootStyles.horizontal,\n state.root.className,\n );\n if (state.spinner && state.appearance) {\n state.spinner.className = mergeClasses(\n spinnerClassNames.spinner,\n spinnerStyles.spinnerSVG,\n size === 'extra-small' && spinnerStyles.extraSmall,\n size === 'extra-large' && spinnerStyles.extraLarge,\n size !== 'extra-large' && size !== 'extra-small' && spinnerStyles[size],\n trackStyles[state.appearance],\n state.spinner.className,\n );\n }\n if (state.label) {\n state.label.className = mergeClasses(\n spinnerClassNames.label,\n size === 'extra-small' && labelStyles.extraSmall,\n size === 'extra-large' && labelStyles.extraLarge,\n size !== 'extra-large' && size !== 'extra-small' && labelStyles[size],\n state.label.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Spinner/useSpinnerStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SpinnerState, SpinnerSlots } from './Spinner.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const spinnerClassNames: SlotClassNames<SpinnerSlots> = {\n root: 'fui-Spinner',\n spinner: 'fui-Spinner__spinner',\n label: 'fui-Spinner__label',\n};\n\n/*\n * TODO: Update with proper tokens when added\n * Radii for the Spinner circles\n */\nconst rValues = {\n tiny: '9px',\n extraSmall: '11px',\n small: '13px',\n medium: '14.5px',\n large: '16.5px',\n extraLarge: '18.5px',\n huge: '20px',\n};\n\n/*\n * TODO: Update with proper tokens when added\n * Sizes for the Spinner\n */\nconst spinnnerSizes = {\n tiny: '20px',\n extraSmall: '24px',\n small: '28px',\n medium: '32px',\n large: '36px',\n extraLarge: '40px',\n huge: '44px',\n};\n\n/*\n * TODO: Update with proper tokens when added\n * Animation for Spinner\n */\nconst spinnerAnimation = {\n container: {\n animationDuration: '3s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'linear',\n backgroundColor: 'transparent',\n },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n ...shorthands.gap('8px'),\n },\n\n horizontal: {\n flexDirection: 'row',\n },\n\n vertical: {\n flexDirection: 'column',\n },\n});\n\nconst useLoaderStyles = makeStyles({\n // global SVG class\n spinnerSVG: {\n ':focus-visible': {\n outlineStyle: '3px solid transparent',\n },\n ['& > svg']: {\n animationName: {\n '0%': { transform: 'rotate(0deg)' },\n '100%': { transform: 'rotate(360deg)' },\n },\n ...spinnerAnimation.container,\n },\n ['& > svg > circle']: {\n cx: '50%',\n cy: '50%',\n fill: 'none',\n },\n },\n\n tiny: {\n ['& > svg']: {\n height: spinnnerSizes.tiny,\n width: spinnnerSizes.tiny,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThick,\n r: rValues.tiny,\n },\n },\n\n extraSmall: {\n ['& > svg']: {\n height: spinnnerSizes.extraSmall,\n width: spinnnerSizes.extraSmall,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThick,\n r: rValues.extraSmall,\n },\n },\n\n small: {\n ['& > svg']: {\n height: spinnnerSizes.small,\n width: spinnnerSizes.small,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThick,\n r: rValues.small,\n },\n },\n\n medium: {\n ['& > svg']: {\n height: spinnnerSizes.medium,\n width: spinnnerSizes.medium,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThicker,\n r: rValues.medium,\n },\n },\n\n large: {\n ['& > svg']: {\n height: spinnnerSizes.large,\n width: spinnnerSizes.large,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThicker,\n r: rValues.large,\n },\n },\n\n extraLarge: {\n ['& > svg']: {\n height: spinnnerSizes.extraLarge,\n width: spinnnerSizes.extraLarge,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThicker,\n r: rValues.extraLarge,\n },\n },\n\n huge: {\n ['& > svg']: {\n height: spinnnerSizes.huge,\n width: spinnnerSizes.huge,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThickest,\n r: rValues.huge,\n },\n },\n});\n\nconst useTrackStyles = makeStyles({\n inverted: {\n ['& > svg > circle.fui-Spinner__Tail']: {\n stroke: tokens.colorNeutralStrokeOnBrand2,\n animationName: {\n '0%': {\n strokeDasharray: '1,150',\n strokeDashoffset: '0',\n },\n\n '50%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-35',\n },\n\n '100%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-124',\n },\n },\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'cubic-bezier(0.33,0,0.67,1)',\n strokeLinecap: 'round',\n transform: 'rotate(-90deg)',\n transformOrigin: '50% 50%',\n },\n\n ['& > svg > circle.fui-Spinner__Track']: {\n stroke: tokens.colorNeutralBackgroundInverted,\n },\n },\n primary: {\n ['& > svg > circle.fui-Spinner__Tail']: {\n stroke: tokens.colorBrandStroke1,\n '@media screen and (forced-colors: active)': {\n stroke: tokens.colorNeutralStrokeOnBrand2,\n },\n animationName: {\n '0%': {\n strokeDasharray: '1,150',\n strokeDashoffset: '0',\n },\n\n '50%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-35',\n },\n\n '100%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-124',\n },\n },\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'cubic-bezier(0.33,0,0.67,1)',\n strokeLinecap: 'round',\n transform: 'rotate(-90deg)',\n transformOrigin: '50% 50%',\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1',\n },\n },\n ['& > svg > circle.fui-Spinner__Track']: {\n stroke: tokens.colorNeutralBackground4,\n '@media screen and (forced-colors: active)': {\n stroke: tokens.colorNeutralBackgroundInverted,\n },\n },\n },\n});\n\nconst useLabelStyles = makeStyles({\n // style for label\n\n tiny: {\n ...typographyStyles.body1,\n },\n\n extraSmall: {\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 extraLarge: {\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 const { labelPosition, size = 'medium' } = state;\n const rootStyles = useRootStyles();\n const spinnerStyles = useLoaderStyles();\n const labelStyles = useLabelStyles();\n const trackStyles = useTrackStyles();\n\n state.root.className = mergeClasses(\n spinnerClassNames.root,\n rootStyles.root,\n (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical,\n (labelPosition === 'before' || labelPosition === 'after') && rootStyles.horizontal,\n state.root.className,\n );\n if (state.spinner && state.appearance) {\n state.spinner.className = mergeClasses(\n spinnerClassNames.spinner,\n spinnerStyles.spinnerSVG,\n size === 'extra-small' && spinnerStyles.extraSmall,\n size === 'extra-large' && spinnerStyles.extraLarge,\n size !== 'extra-large' && size !== 'extra-small' && spinnerStyles[size],\n trackStyles[state.appearance],\n state.spinner.className,\n );\n }\n if (state.label) {\n state.label.className = mergeClasses(\n spinnerClassNames.label,\n size === 'extra-small' && labelStyles.extraSmall,\n size === 'extra-large' && labelStyles.extraLarge,\n size !== 'extra-large' && size !== 'extra-small' && labelStyles[size],\n state.label.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Spinner/renderSpinner.js CHANGED
@@ -19,12 +19,11 @@ const renderSpinner_unstable = state => {
19
19
  slotProps
20
20
  } = react_utilities_1.getSlots(state);
21
21
  const {
22
- labelPosition,
23
- status
22
+ labelPosition
24
23
  } = state;
25
24
  return React.createElement(slots.root, { ...slotProps.root
26
25
  }, slots.label && (labelPosition === 'above' || labelPosition === 'before') && React.createElement(slots.label, { ...slotProps.label
27
- }), slots.spinner && status === 'active' && React.createElement(slots.spinner, { ...slotProps.spinner
26
+ }), slots.spinner && React.createElement(slots.spinner, { ...slotProps.spinner
28
27
  }), slots.label && (labelPosition === 'below' || labelPosition === 'after') && React.createElement(slots.label, { ...slotProps.label
29
28
  }));
30
29
  };
package/lib-commonjs/components/Spinner/renderSpinner.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Spinner/renderSpinner.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,sBAAsB,GAAI,KAAD,IAAwB;AAC5D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAuB,KAAvB,CAA7B;AACA,QAAM;AAAE,IAAA,aAAF;AAAiB,IAAA;AAAjB,MAA4B,KAAlC;AACA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,KAAN,KAAgB,aAAa,KAAK,OAAlB,IAA6B,aAAa,KAAK,QAA/D,KAA4E,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAD/E,EAEG,KAAK,CAAC,OAAN,IAAiB,MAAM,KAAK,QAA5B,IAAwC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;AAAf,GAAd,CAF3C,EAGG,KAAK,CAAC,KAAN,KAAgB,aAAa,KAAK,OAAlB,IAA6B,aAAa,KAAK,OAA/D,KAA2E,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAH9E,CADF;AAOD,CAVM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourcesContent":["import * as React from 'react';\nimport { getSlots } 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 const { slots, slotProps } = getSlots<SpinnerSlots>(state);\n const { labelPosition, status } = state;\n return (\n <slots.root {...slotProps.root}>\n {slots.label && (labelPosition === 'above' || labelPosition === 'before') && <slots.label {...slotProps.label} />}\n {slots.spinner && status === 'active' && <slots.spinner {...slotProps.spinner} />}\n {slots.label && (labelPosition === 'below' || labelPosition === 'after') && <slots.label {...slotProps.label} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Spinner/renderSpinner.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,sBAAsB,GAAI,KAAD,IAAwB;AAC5D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAuB,KAAvB,CAA7B;AACA,QAAM;AAAE,IAAA;AAAF,MAAoB,KAA1B;AACA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,KAAN,KAAgB,aAAa,KAAK,OAAlB,IAA6B,aAAa,KAAK,QAA/D,KAA4E,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAD/E,EAEG,KAAK,CAAC,OAAN,IAAiB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;AAAf,GAAd,CAFpB,EAGG,KAAK,CAAC,KAAN,KAAgB,aAAa,KAAK,OAAlB,IAA6B,aAAa,KAAK,OAA/D,KAA2E,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAH9E,CADF;AAOD,CAVM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourcesContent":["import * as React from 'react';\nimport { getSlots } 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 const { slots, slotProps } = getSlots<SpinnerSlots>(state);\n const { labelPosition } = state;\n return (\n <slots.root {...slotProps.root}>\n {slots.label && (labelPosition === 'above' || labelPosition === 'before') && <slots.label {...slotProps.label} />}\n {slots.spinner && <slots.spinner {...slotProps.spinner} />}\n {slots.label && (labelPosition === 'below' || labelPosition === 'after') && <slots.label {...slotProps.label} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Spinner/useSpinner.js CHANGED
@@ -28,8 +28,7 @@ const useSpinner_unstable = (props, ref) => {
28
28
  const {
29
29
  appearance = 'primary',
30
30
  labelPosition = 'after',
31
- size = 'medium',
32
- status = 'active'
31
+ size = 'medium'
33
32
  } = props;
34
33
  const baseId = react_utilities_1.useId('spinner');
35
34
  const {
@@ -62,7 +61,6 @@ const useSpinner_unstable = (props, ref) => {
62
61
  appearance,
63
62
  labelPosition,
64
63
  size,
65
- status,
66
64
  components: {
67
65
  root: 'div',
68
66
  spinner: 'span',
package/lib-commonjs/components/Spinner/useSpinner.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Spinner/useSpinner.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;AACpG;AACA,QAAM;AAAE,IAAA,UAAU,GAAG,SAAf;AAA0B,IAAA,aAAa,GAAG,OAA1C;AAAmD,IAAA,IAAI,GAAG,QAA1D;AAAoE,IAAA,MAAM,GAAG;AAA7E,MAA0F,KAAhG;AACA,QAAM,MAAM,GAAG,iBAAA,CAAA,KAAA,CAAM,SAAN,CAAf;AAEA,QAAM;AAAE,IAAA,QAAF;AAAY,OAAG;AAAf,MAAwB,KAA9B;AACA,QAAM,UAAU,GAAG,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AAAE,IAAA,GAAF;AAAO,OAAG;AAAV,GAA7B,EAA+C,CAAC,MAAD,CAA/C,CAAnB;AAEA,QAAM,cAAc,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,KAAvB,EAA8B;AACnD,IAAA,YAAY,EAAE;AACZ,MAAA,EAAE,EAAE;AADQ,KADqC;AAInD,IAAA,QAAQ,EAAE;AAJyC,GAA9B,CAAvB;AAOA,QAAM,gBAAgB,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,OAAvB,EAAgC;AACvD,IAAA,QAAQ,EAAE,IAD6C;AAEvD,IAAA,YAAY,EAAE;AACZ,MAAA,QAAQ,EAAE,KAAA,CAAA,aAAA,CAAC,YAAA,CAAA,UAAD,EAAW,IAAX,CADE;AAEZ,MAAA;AAFY;AAFyC,GAAhC,CAAzB;;AAQA,MAAI,cAAc,IAAI,gBAAlB,IAAsC,CAAC,gBAAgB,CAAC,iBAAD,CAA3D,EAAgF;AAC9E,IAAA,gBAAgB,CAAC,iBAAD,CAAhB,GAAsC,cAAc,CAAC,EAArD;AACD;;AAED,QAAM,KAAK,GAAiB;AAC1B,IAAA,UAD0B;AAE1B,IAAA,aAF0B;AAG1B,IAAA,IAH0B;AAI1B,IAAA,MAJ0B;AAK1B,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,OAAO,EAAE,MAFC;AAGV,MAAA,KAAK,EAAE,aAAA,CAAA;AAHG,KALc;AAU1B,IAAA,IAAI,EAAE,UAVoB;AAW1B,IAAA,OAAO,EAAE,gBAXiB;AAY1B,IAAA,KAAK,EAAE;AAZmB,GAA5B;AAcA,SAAO,KAAP;AACD,CA1CM;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { SpinnerProps, SpinnerState } from './Spinner.types';\nimport { Label } from '@fluentui/react-label';\nimport { DefaultSvg } from './DefaultSvg';\n\n/**\n * Create the state required to render Spinner.\n *\n * The returned state can be modified with hooks such as useSpinnerStyles_unstable,\n * before being passed to renderSpinner_unstable.\n *\n * @param props - props from this instance of Spinner\n * @param ref - reference to root HTMLElement of Spinner\n */\nexport const useSpinner_unstable = (props: SpinnerProps, ref: React.Ref<HTMLElement>): SpinnerState => {\n // Props\n const { appearance = 'primary', labelPosition = 'after', size = 'medium', status = 'active' } = props;\n const baseId = useId('spinner');\n\n const { tabIndex, ...rest } = props;\n const nativeRoot = getNativeElementProps('div', { ref, ...rest }, ['size']);\n\n const labelShorthand = resolveShorthand(props.label, {\n defaultProps: {\n id: baseId,\n },\n required: false,\n });\n\n const spinnerShortHand = resolveShorthand(props.spinner, {\n required: true,\n defaultProps: {\n children: <DefaultSvg />,\n tabIndex,\n },\n });\n\n if (labelShorthand && spinnerShortHand && !spinnerShortHand['aria-labelledby']) {\n spinnerShortHand['aria-labelledby'] = labelShorthand.id;\n }\n\n const state: SpinnerState = {\n appearance,\n labelPosition,\n size,\n status,\n components: {\n root: 'div',\n spinner: 'span',\n label: Label,\n },\n root: nativeRoot,\n spinner: spinnerShortHand,\n label: labelShorthand,\n };\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Spinner/useSpinner.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;AACpG;AACA,QAAM;AAAE,IAAA,UAAU,GAAG,SAAf;AAA0B,IAAA,aAAa,GAAG,OAA1C;AAAmD,IAAA,IAAI,GAAG;AAA1D,MAAuE,KAA7E;AACA,QAAM,MAAM,GAAG,iBAAA,CAAA,KAAA,CAAM,SAAN,CAAf;AAEA,QAAM;AAAE,IAAA,QAAF;AAAY,OAAG;AAAf,MAAwB,KAA9B;AACA,QAAM,UAAU,GAAG,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AAAE,IAAA,GAAF;AAAO,OAAG;AAAV,GAA7B,EAA+C,CAAC,MAAD,CAA/C,CAAnB;AAEA,QAAM,cAAc,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,KAAvB,EAA8B;AACnD,IAAA,YAAY,EAAE;AACZ,MAAA,EAAE,EAAE;AADQ,KADqC;AAInD,IAAA,QAAQ,EAAE;AAJyC,GAA9B,CAAvB;AAOA,QAAM,gBAAgB,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,OAAvB,EAAgC;AACvD,IAAA,QAAQ,EAAE,IAD6C;AAEvD,IAAA,YAAY,EAAE;AACZ,MAAA,QAAQ,EAAE,KAAA,CAAA,aAAA,CAAC,YAAA,CAAA,UAAD,EAAW,IAAX,CADE;AAEZ,MAAA;AAFY;AAFyC,GAAhC,CAAzB;;AAQA,MAAI,cAAc,IAAI,gBAAlB,IAAsC,CAAC,gBAAgB,CAAC,iBAAD,CAA3D,EAAgF;AAC9E,IAAA,gBAAgB,CAAC,iBAAD,CAAhB,GAAsC,cAAc,CAAC,EAArD;AACD;;AAED,QAAM,KAAK,GAAiB;AAC1B,IAAA,UAD0B;AAE1B,IAAA,aAF0B;AAG1B,IAAA,IAH0B;AAI1B,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,OAAO,EAAE,MAFC;AAGV,MAAA,KAAK,EAAE,aAAA,CAAA;AAHG,KAJc;AAS1B,IAAA,IAAI,EAAE,UAToB;AAU1B,IAAA,OAAO,EAAE,gBAViB;AAW1B,IAAA,KAAK,EAAE;AAXmB,GAA5B;AAaA,SAAO,KAAP;AACD,CAzCM;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { SpinnerProps, SpinnerState } from './Spinner.types';\nimport { Label } from '@fluentui/react-label';\nimport { DefaultSvg } from './DefaultSvg';\n\n/**\n * Create the state required to render Spinner.\n *\n * The returned state can be modified with hooks such as useSpinnerStyles_unstable,\n * before being passed to renderSpinner_unstable.\n *\n * @param props - props from this instance of Spinner\n * @param ref - reference to root HTMLElement of Spinner\n */\nexport const useSpinner_unstable = (props: SpinnerProps, ref: React.Ref<HTMLElement>): SpinnerState => {\n // Props\n const { appearance = 'primary', labelPosition = 'after', size = 'medium' } = props;\n const baseId = useId('spinner');\n\n const { tabIndex, ...rest } = props;\n const nativeRoot = getNativeElementProps('div', { ref, ...rest }, ['size']);\n\n const labelShorthand = resolveShorthand(props.label, {\n defaultProps: {\n id: baseId,\n },\n required: false,\n });\n\n const spinnerShortHand = resolveShorthand(props.spinner, {\n required: true,\n defaultProps: {\n children: <DefaultSvg />,\n tabIndex,\n },\n });\n\n if (labelShorthand && spinnerShortHand && !spinnerShortHand['aria-labelledby']) {\n spinnerShortHand['aria-labelledby'] = labelShorthand.id;\n }\n\n const state: SpinnerState = {\n appearance,\n labelPosition,\n size,\n components: {\n root: 'div',\n spinner: 'span',\n label: Label,\n },\n root: nativeRoot,\n spinner: spinnerShortHand,\n label: labelShorthand,\n };\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Spinner/useSpinnerStyles.js CHANGED
@@ -20,13 +20,13 @@ exports.spinnerClassNames = {
20
20
  */
21
21
 
22
22
  const rValues = {
23
- tiny: '9',
24
- extraSmall: '11',
25
- small: '13',
26
- medium: '14.5',
27
- large: '16.5',
28
- extraLarge: '18.5',
29
- huge: '20'
23
+ tiny: '9px',
24
+ extraSmall: '11px',
25
+ small: '13px',
26
+ medium: '14.5px',
27
+ large: '16.5px',
28
+ extraLarge: '18.5px',
29
+ huge: '20px'
30
30
  };
31
31
  /*
32
32
  * TODO: Update with proper tokens when added
@@ -42,16 +42,6 @@ const spinnnerSizes = {
42
42
  extraLarge: '40px',
43
43
  huge: '44px'
44
44
  };
45
- /*
46
- * TODO: Update with proper tokens when added
47
- * Stroke widths for the Spinner
48
- */
49
-
50
- const spinnerStrokeWidth = {
51
- sWidth: '2px',
52
- mWidth: '3px',
53
- lWidth: '4px'
54
- };
55
45
  /*
56
46
  * TODO: Update with proper tokens when added
57
47
  * Animation for Spinner
@@ -65,25 +55,6 @@ const spinnerAnimation = {
65
55
  backgroundColor: 'transparent'
66
56
  }
67
57
  };
68
- /*
69
- * TODO: Update with proper tokens when added
70
- * Label sizes for the Spinner
71
- */
72
-
73
- const labelSizeTokens = {
74
- body1: {
75
- fontSize: react_theme_1.tokens.fontSizeBase300,
76
- lineHeight: react_theme_1.tokens.lineHeightBase300
77
- },
78
- subtitle2: {
79
- fontSize: react_theme_1.tokens.fontSizeBase400,
80
- lineHeight: react_theme_1.tokens.lineHeightBase400
81
- },
82
- subtitle1: {
83
- fontSize: react_theme_1.tokens.fontSizeBase500,
84
- lineHeight: react_theme_1.tokens.lineHeightBase500
85
- }
86
- };
87
58
  /**
88
59
  * Styles for the root slot
89
60
  */
@@ -121,49 +92,49 @@ const useLoaderStyles = /*#__PURE__*/react_1.__styles({
121
92
  "tiny": {
122
93
  "Bah9ito": "f1j4wmu2",
123
94
  "ut6tcf": "f1vppzuq",
124
- "B7p06xz": "f1subliv",
125
- "B807ibg": "fd2apu6"
95
+ "B7p06xz": "fv1u54w",
96
+ "B807ibg": "fngtx1d"
126
97
  },
127
98
  "extraSmall": {
128
99
  "Bah9ito": "fmpqlna",
129
100
  "ut6tcf": "f15z5jzu",
130
- "B7p06xz": "f1subliv",
131
- "B807ibg": "fm96dlc"
101
+ "B7p06xz": "fv1u54w",
102
+ "B807ibg": "fadawes"
132
103
  },
133
104
  "small": {
134
105
  "Bah9ito": "fo52gbo",
135
106
  "ut6tcf": "f1b41i3v",
136
- "B7p06xz": "f1subliv",
137
- "B807ibg": "f1i91flz"
107
+ "B7p06xz": "fv1u54w",
108
+ "B807ibg": "f1xqyyrl"
138
109
  },
139
110
  "medium": {
140
111
  "Bah9ito": "f1aiqagr",
141
112
  "ut6tcf": "f1wtx80b",
142
- "B7p06xz": "f17vzdod",
143
- "B807ibg": "fjlkznx"
113
+ "B7p06xz": "f1flujpd",
114
+ "B807ibg": "f1u06hy7"
144
115
  },
145
116
  "large": {
146
117
  "Bah9ito": "f1trdq7b",
147
118
  "ut6tcf": "f9e0mc5",
148
- "B7p06xz": "f17vzdod",
149
- "B807ibg": "f1upeyd8"
119
+ "B7p06xz": "f1flujpd",
120
+ "B807ibg": "f13pmvhl"
150
121
  },
151
122
  "extraLarge": {
152
123
  "Bah9ito": "f89rf2a",
153
124
  "ut6tcf": "f1w2xg3q",
154
- "B7p06xz": "f17vzdod",
155
- "B807ibg": "f1r2vitc"
125
+ "B7p06xz": "f1flujpd",
126
+ "B807ibg": "fmn74v6"
156
127
  },
157
128
  "huge": {
158
129
  "Bah9ito": "f1rx7k5y",
159
130
  "ut6tcf": "f1vtyt49",
160
- "B7p06xz": "f1l9ujyx",
161
- "B807ibg": "fmhqutl"
131
+ "B7p06xz": "f1owbg48",
132
+ "B807ibg": "f1fr1izd"
162
133
  }
163
134
  }, {
164
135
  "i": [".f1nahjz1:focus-visible{outline-style:3px solid transparent;}"],
165
136
  "k": ["@-webkit-keyframes fb7n1on{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}", "@-webkit-keyframes f1gx3jof{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-ms-transform:rotate(-360deg);transform:rotate(-360deg);}}", "@keyframes fb7n1on{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}", "@keyframes f1gx3jof{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-ms-transform:rotate(-360deg);transform:rotate(-360deg);}}"],
166
- "d": [".f5tbecn>svg{-webkit-animation-name:fb7n1on;animation-name:fb7n1on;}", ".f15qb8s7>svg{-webkit-animation-name:f1gx3jof;animation-name:f1gx3jof;}", ".fn4mtlg>svg{-webkit-animation-duration:3s;animation-duration:3s;}", ".f1y80fxs>svg{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".f1r2crtq>svg{-webkit-animation-timing-function:linear;animation-timing-function:linear;}", ".f1wsi8sr>svg{background-color:transparent;}", ".f1da2vov>svg>circle{cx:50%;}", ".f11rfva0>svg>circle{cy:50%;}", ".f1exc66>svg>circle{fill:none;}", ".f1j4wmu2>svg{height:20px;}", ".f1vppzuq>svg{width:20px;}", ".f1subliv>svg>circle{stroke-width:2px;}", ".fd2apu6>svg>circle{r:9;}", ".fmpqlna>svg{height:24px;}", ".f15z5jzu>svg{width:24px;}", ".fm96dlc>svg>circle{r:11;}", ".fo52gbo>svg{height:28px;}", ".f1b41i3v>svg{width:28px;}", ".f1i91flz>svg>circle{r:13;}", ".f1aiqagr>svg{height:32px;}", ".f1wtx80b>svg{width:32px;}", ".f17vzdod>svg>circle{stroke-width:3px;}", ".fjlkznx>svg>circle{r:14.5;}", ".f1trdq7b>svg{height:36px;}", ".f9e0mc5>svg{width:36px;}", ".f1upeyd8>svg>circle{r:16.5;}", ".f89rf2a>svg{height:40px;}", ".f1w2xg3q>svg{width:40px;}", ".f1r2vitc>svg>circle{r:18.5;}", ".f1rx7k5y>svg{height:44px;}", ".f1vtyt49>svg{width:44px;}", ".f1l9ujyx>svg>circle{stroke-width:4px;}", ".fmhqutl>svg>circle{r:20;}"]
137
+ "d": [".f5tbecn>svg{-webkit-animation-name:fb7n1on;animation-name:fb7n1on;}", ".f15qb8s7>svg{-webkit-animation-name:f1gx3jof;animation-name:f1gx3jof;}", ".fn4mtlg>svg{-webkit-animation-duration:3s;animation-duration:3s;}", ".f1y80fxs>svg{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".f1r2crtq>svg{-webkit-animation-timing-function:linear;animation-timing-function:linear;}", ".f1wsi8sr>svg{background-color:transparent;}", ".f1da2vov>svg>circle{cx:50%;}", ".f11rfva0>svg>circle{cy:50%;}", ".f1exc66>svg>circle{fill:none;}", ".f1j4wmu2>svg{height:20px;}", ".f1vppzuq>svg{width:20px;}", ".fv1u54w>svg>circle{stroke-width:var(--strokeWidthThick);}", ".fngtx1d>svg>circle{r:9px;}", ".fmpqlna>svg{height:24px;}", ".f15z5jzu>svg{width:24px;}", ".fadawes>svg>circle{r:11px;}", ".fo52gbo>svg{height:28px;}", ".f1b41i3v>svg{width:28px;}", ".f1xqyyrl>svg>circle{r:13px;}", ".f1aiqagr>svg{height:32px;}", ".f1wtx80b>svg{width:32px;}", ".f1flujpd>svg>circle{stroke-width:var(--strokeWidthThicker);}", ".f1u06hy7>svg>circle{r:14.5px;}", ".f1trdq7b>svg{height:36px;}", ".f9e0mc5>svg{width:36px;}", ".f13pmvhl>svg>circle{r:16.5px;}", ".f89rf2a>svg{height:40px;}", ".f1w2xg3q>svg{width:40px;}", ".fmn74v6>svg>circle{r:18.5px;}", ".f1rx7k5y>svg{height:44px;}", ".f1vtyt49>svg{width:44px;}", ".f1owbg48>svg>circle{stroke-width:var(--strokeWidthThickest);}", ".f1fr1izd>svg>circle{r:20px;}"]
167
138
  });
168
139
 
169
140
  const useTrackStyles = /*#__PURE__*/react_1.__styles({
@@ -188,46 +159,62 @@ const useTrackStyles = /*#__PURE__*/react_1.__styles({
188
159
  "B8001xd": "fu3xdw0",
189
160
  "Bdordwa": ["f1ttdh6v", "fmyjox0"],
190
161
  "Bo2mdfu": "f1eseayc",
162
+ "E10nrc": "folzdkc",
163
+ "Bwl7w15": "fhlfkde",
191
164
  "Bksq7rz": "f12uf417",
192
165
  "y14cdu": "flglbw1"
193
166
  }
194
167
  }, {
195
168
  "d": [".f1jvpmnu>svg>circle.fui-Spinner__Tail{stroke:var(--colorNeutralStrokeOnBrand2);}", ".fq8a5sv>svg>circle.fui-Spinner__Tail{-webkit-animation-name:f1v1ql0f;animation-name:f1v1ql0f;}", ".f1b4lwqj>svg>circle.fui-Spinner__Tail{-webkit-animation-duration:1.5s;animation-duration:1.5s;}", ".f1najlst>svg>circle.fui-Spinner__Tail{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".f10r9z1l>svg>circle.fui-Spinner__Tail{-webkit-animation-timing-function:cubic-bezier(0.33,0,0.67,1);animation-timing-function:cubic-bezier(0.33,0,0.67,1);}", ".fu3xdw0>svg>circle.fui-Spinner__Tail{stroke-linecap:round;}", ".f1ttdh6v>svg>circle.fui-Spinner__Tail{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);}", ".fmyjox0>svg>circle.fui-Spinner__Tail{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}", ".f1eseayc>svg>circle.fui-Spinner__Tail{transform-origin:50% 50%;}", ".f1iqpjmu>svg>circle.fui-Spinner__Track{stroke:var(--colorNeutralBackgroundInverted);}", ".f11ditju>svg>circle.fui-Spinner__Tail{stroke:var(--colorBrandStroke1);}", ".f12uf417>svg>circle.fui-Spinner__Track{stroke:var(--colorNeutralBackground4);}"],
196
169
  "k": ["@-webkit-keyframes f1v1ql0f{0%{stroke-dasharray:1,150;stroke-dashoffset:0;}50%{stroke-dasharray:90,150;stroke-dashoffset:-35;}100%{stroke-dasharray:90,150;stroke-dashoffset:-124;}}", "@keyframes f1v1ql0f{0%{stroke-dasharray:1,150;stroke-dashoffset:0;}50%{stroke-dasharray:90,150;stroke-dashoffset:-35;}100%{stroke-dasharray:90,150;stroke-dashoffset:-124;}}"],
197
- "t": ["@media screen and (forced-colors: active){.f1m9nikz>svg>circle.fui-Spinner__Tail{stroke:var(--colorNeutralStrokeOnBrand2);}}", "@media screen and (forced-colors: active){.flglbw1>svg>circle.fui-Spinner__Track{stroke:var(--colorNeutralBackgroundInverted);}}"]
170
+ "t": ["@media screen and (forced-colors: active){.f1m9nikz>svg>circle.fui-Spinner__Tail{stroke:var(--colorNeutralStrokeOnBrand2);}}", "@media screen and (prefers-reduced-motion: reduce){.folzdkc>svg>circle.fui-Spinner__Tail{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.fhlfkde>svg>circle.fui-Spinner__Tail{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}", "@media screen and (forced-colors: active){.flglbw1>svg>circle.fui-Spinner__Track{stroke:var(--colorNeutralBackgroundInverted);}}"]
198
171
  });
199
172
 
200
173
  const useLabelStyles = /*#__PURE__*/react_1.__styles({
201
174
  "tiny": {
175
+ "Bahqtrf": "fk6fouc",
202
176
  "Be2twd7": "fkhj508",
177
+ "Bhrd7zp": "figsok6",
203
178
  "Bg96gwp": "f1i3iumi"
204
179
  },
205
180
  "extraSmall": {
181
+ "Bahqtrf": "fk6fouc",
206
182
  "Be2twd7": "fkhj508",
183
+ "Bhrd7zp": "figsok6",
207
184
  "Bg96gwp": "f1i3iumi"
208
185
  },
209
186
  "small": {
187
+ "Bahqtrf": "fk6fouc",
210
188
  "Be2twd7": "fkhj508",
189
+ "Bhrd7zp": "figsok6",
211
190
  "Bg96gwp": "f1i3iumi"
212
191
  },
213
192
  "medium": {
193
+ "Bahqtrf": "fk6fouc",
214
194
  "Be2twd7": "fod5ikn",
195
+ "Bhrd7zp": "fl43uef",
215
196
  "Bg96gwp": "faaz57k"
216
197
  },
217
198
  "large": {
199
+ "Bahqtrf": "fk6fouc",
218
200
  "Be2twd7": "fod5ikn",
201
+ "Bhrd7zp": "fl43uef",
219
202
  "Bg96gwp": "faaz57k"
220
203
  },
221
204
  "extraLarge": {
205
+ "Bahqtrf": "fk6fouc",
222
206
  "Be2twd7": "fod5ikn",
207
+ "Bhrd7zp": "fl43uef",
223
208
  "Bg96gwp": "faaz57k"
224
209
  },
225
210
  "huge": {
211
+ "Bahqtrf": "fk6fouc",
226
212
  "Be2twd7": "f1pp30po",
213
+ "Bhrd7zp": "fl43uef",
227
214
  "Bg96gwp": "f106mvju"
228
215
  }
229
216
  }, {
230
- "d": [".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f106mvju{line-height:var(--lineHeightBase500);}"]
217
+ "d": [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f106mvju{line-height:var(--lineHeightBase500);}"]
231
218
  });
232
219
  /**
233
220
  * Apply styling to the Spinner slots based on the state
package/lib-commonjs/components/Spinner/useSpinnerStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Spinner/useSpinnerStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SpinnerState, SpinnerSlots } from './Spinner.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const spinnerClassNames: SlotClassNames<SpinnerSlots> = {\n root: 'fui-Spinner',\n spinner: 'fui-Spinner__spinner',\n label: 'fui-Spinner__label',\n};\n\n/*\n * TODO: Update with proper tokens when added\n * Radii for the Spinner circles\n */\nconst rValues = {\n tiny: '9',\n extraSmall: '11',\n small: '13',\n medium: '14.5',\n large: '16.5',\n extraLarge: '18.5',\n huge: '20',\n};\n\n/*\n * TODO: Update with proper tokens when added\n * Sizes for the Spinner\n */\nconst spinnnerSizes = {\n tiny: '20px',\n extraSmall: '24px',\n small: '28px',\n medium: '32px',\n large: '36px',\n extraLarge: '40px',\n huge: '44px',\n};\n\n/*\n * TODO: Update with proper tokens when added\n * Stroke widths for the Spinner\n */\nconst spinnerStrokeWidth = {\n sWidth: '2px',\n mWidth: '3px',\n lWidth: '4px',\n};\n\n/*\n * TODO: Update with proper tokens when added\n * Animation for Spinner\n */\nconst spinnerAnimation = {\n container: {\n animationDuration: '3s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'linear',\n backgroundColor: 'transparent',\n },\n};\n\n/*\n * TODO: Update with proper tokens when added\n * Label sizes for the Spinner\n */\nconst labelSizeTokens = {\n body1: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n\n subtitle2: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n\n subtitle1: {\n fontSize: tokens.fontSizeBase500,\n lineHeight: tokens.lineHeightBase500,\n },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n ...shorthands.gap('8px'),\n },\n\n horizontal: {\n flexDirection: 'row',\n },\n\n vertical: {\n flexDirection: 'column',\n },\n});\n\nconst useLoaderStyles = makeStyles({\n // global SVG class\n spinnerSVG: {\n ':focus-visible': {\n outlineStyle: '3px solid transparent',\n },\n ['& > svg']: {\n animationName: {\n '0%': { transform: 'rotate(0deg)' },\n '100%': { transform: 'rotate(360deg)' },\n },\n ...spinnerAnimation.container,\n },\n ['& > svg > circle']: {\n cx: '50%',\n cy: '50%',\n fill: 'none',\n },\n },\n\n tiny: {\n ['& > svg']: {\n height: spinnnerSizes.tiny,\n width: spinnnerSizes.tiny,\n },\n ['& > svg > circle']: {\n strokeWidth: spinnerStrokeWidth.sWidth,\n r: rValues.tiny,\n },\n },\n\n extraSmall: {\n ['& > svg']: {\n height: spinnnerSizes.extraSmall,\n width: spinnnerSizes.extraSmall,\n },\n ['& > svg > circle']: {\n strokeWidth: spinnerStrokeWidth.sWidth,\n r: rValues.extraSmall,\n },\n },\n\n small: {\n ['& > svg']: {\n height: spinnnerSizes.small,\n width: spinnnerSizes.small,\n },\n ['& > svg > circle']: {\n strokeWidth: spinnerStrokeWidth.sWidth,\n r: rValues.small,\n },\n },\n\n medium: {\n ['& > svg']: {\n height: spinnnerSizes.medium,\n width: spinnnerSizes.medium,\n },\n ['& > svg > circle']: {\n strokeWidth: spinnerStrokeWidth.mWidth,\n r: rValues.medium,\n },\n },\n\n large: {\n ['& > svg']: {\n height: spinnnerSizes.large,\n width: spinnnerSizes.large,\n },\n ['& > svg > circle']: {\n strokeWidth: spinnerStrokeWidth.mWidth,\n r: rValues.large,\n },\n },\n\n extraLarge: {\n ['& > svg']: {\n height: spinnnerSizes.extraLarge,\n width: spinnnerSizes.extraLarge,\n },\n ['& > svg > circle']: {\n strokeWidth: spinnerStrokeWidth.mWidth,\n r: rValues.extraLarge,\n },\n },\n\n huge: {\n ['& > svg']: {\n height: spinnnerSizes.huge,\n width: spinnnerSizes.huge,\n },\n ['& > svg > circle']: {\n strokeWidth: spinnerStrokeWidth.lWidth,\n r: rValues.huge,\n },\n },\n});\n\nconst useTrackStyles = makeStyles({\n inverted: {\n ['& > svg > circle.fui-Spinner__Tail']: {\n stroke: tokens.colorNeutralStrokeOnBrand2,\n animationName: {\n '0%': {\n strokeDasharray: '1,150',\n strokeDashoffset: '0',\n },\n\n '50%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-35',\n },\n\n '100%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-124',\n },\n },\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'cubic-bezier(0.33,0,0.67,1)',\n strokeLinecap: 'round',\n transform: 'rotate(-90deg)',\n transformOrigin: '50% 50%',\n },\n\n ['& > svg > circle.fui-Spinner__Track']: {\n stroke: tokens.colorNeutralBackgroundInverted,\n },\n },\n primary: {\n ['& > svg > circle.fui-Spinner__Tail']: {\n stroke: tokens.colorBrandStroke1,\n '@media screen and (forced-colors: active)': {\n stroke: tokens.colorNeutralStrokeOnBrand2,\n },\n animationName: {\n '0%': {\n strokeDasharray: '1,150',\n strokeDashoffset: '0',\n },\n\n '50%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-35',\n },\n\n '100%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-124',\n },\n },\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'cubic-bezier(0.33,0,0.67,1)',\n strokeLinecap: 'round',\n transform: 'rotate(-90deg)',\n transformOrigin: '50% 50%',\n },\n ['& > svg > circle.fui-Spinner__Track']: {\n stroke: tokens.colorNeutralBackground4,\n '@media screen and (forced-colors: active)': {\n stroke: tokens.colorNeutralBackgroundInverted,\n },\n },\n },\n});\n\nconst useLabelStyles = makeStyles({\n // style for label\n\n tiny: {\n ...labelSizeTokens.body1,\n },\n\n extraSmall: {\n ...labelSizeTokens.body1,\n },\n\n small: {\n ...labelSizeTokens.body1,\n },\n\n medium: {\n ...labelSizeTokens.subtitle2,\n },\n\n large: {\n ...labelSizeTokens.subtitle2,\n },\n\n extraLarge: {\n ...labelSizeTokens.subtitle2,\n },\n\n huge: {\n ...labelSizeTokens.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 const { labelPosition, size = 'medium' } = state;\n const rootStyles = useRootStyles();\n const spinnerStyles = useLoaderStyles();\n const labelStyles = useLabelStyles();\n const trackStyles = useTrackStyles();\n\n state.root.className = mergeClasses(\n spinnerClassNames.root,\n rootStyles.root,\n (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical,\n (labelPosition === 'before' || labelPosition === 'after') && rootStyles.horizontal,\n state.root.className,\n );\n if (state.spinner && state.appearance) {\n state.spinner.className = mergeClasses(\n spinnerClassNames.spinner,\n spinnerStyles.spinnerSVG,\n size === 'extra-small' && spinnerStyles.extraSmall,\n size === 'extra-large' && spinnerStyles.extraLarge,\n size !== 'extra-large' && size !== 'extra-small' && spinnerStyles[size],\n trackStyles[state.appearance],\n state.spinner.className,\n );\n }\n if (state.label) {\n state.label.className = mergeClasses(\n spinnerClassNames.label,\n size === 'extra-small' && labelStyles.extraSmall,\n size === 'extra-large' && labelStyles.extraLarge,\n size !== 'extra-large' && size !== 'extra-small' && labelStyles[size],\n state.label.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Spinner/useSpinnerStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAIa,OAAA,CAAA,iBAAA,GAAkD;AAC7D,EAAA,IAAI,EAAE,aADuD;AAE7D,EAAA,OAAO,EAAE,sBAFoD;AAG7D,EAAA,KAAK,EAAE;AAHsD,CAAlD;AAMb;;;AAGG;;AACH,MAAM,OAAO,GAAG;AACd,EAAA,IAAI,EAAE,KADQ;AAEd,EAAA,UAAU,EAAE,MAFE;AAGd,EAAA,KAAK,EAAE,MAHO;AAId,EAAA,MAAM,EAAE,QAJM;AAKd,EAAA,KAAK,EAAE,QALO;AAMd,EAAA,UAAU,EAAE,QANE;AAOd,EAAA,IAAI,EAAE;AAPQ,CAAhB;AAUA;;;AAGG;;AACH,MAAM,aAAa,GAAG;AACpB,EAAA,IAAI,EAAE,MADc;AAEpB,EAAA,UAAU,EAAE,MAFQ;AAGpB,EAAA,KAAK,EAAE,MAHa;AAIpB,EAAA,MAAM,EAAE,MAJY;AAKpB,EAAA,KAAK,EAAE,MALa;AAMpB,EAAA,UAAU,EAAE,MANQ;AAOpB,EAAA,IAAI,EAAE;AAPc,CAAtB;AAUA;;;AAGG;;AACH,MAAM,gBAAgB,GAAG;AACvB,EAAA,SAAS,EAAE;AACT,IAAA,iBAAiB,EAAE,IADV;AAET,IAAA,uBAAuB,EAAE,UAFhB;AAGT,IAAA,uBAAuB,EAAE,QAHhB;AAIT,IAAA,eAAe,EAAE;AAJR;AADY,CAAzB;AASA;;AAEG;;AACH,MAAM,aAAa,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AAiBA,MAAM,eAAe,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAxB;;AAkGA,MAAM,cAAc,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;;AA0EA,MAAM,cAAc,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;AAgCA;;AAEG;;;AACI,MAAM,yBAAyB,GAAI,KAAD,IAAsC;AAC7E,QAAM;AAAE,IAAA,aAAF;AAAiB,IAAA,IAAI,GAAG;AAAxB,MAAqC,KAA3C;AACA,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,QAAM,aAAa,GAAG,eAAe,EAArC;AACA,QAAM,WAAW,GAAG,cAAc,EAAlC;AACA,QAAM,WAAW,GAAG,cAAc,EAAlC;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,iBAAA,CAAkB,IADG,EAErB,UAAU,CAAC,IAFU,EAGrB,CAAC,aAAa,KAAK,OAAlB,IAA6B,aAAa,KAAK,OAAhD,KAA4D,UAAU,CAAC,QAHlD,EAIrB,CAAC,aAAa,KAAK,QAAlB,IAA8B,aAAa,KAAK,OAAjD,KAA6D,UAAU,CAAC,UAJnD,EAKrB,KAAK,CAAC,IAAN,CAAW,SALU,CAAvB;;AAOA,MAAI,KAAK,CAAC,OAAN,IAAiB,KAAK,CAAC,UAA3B,EAAuC;AACrC,IAAA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,OAAA,CAAA,YAAA,CACxB,OAAA,CAAA,iBAAA,CAAkB,OADM,EAExB,aAAa,CAAC,UAFU,EAGxB,IAAI,KAAK,aAAT,IAA0B,aAAa,CAAC,UAHhB,EAIxB,IAAI,KAAK,aAAT,IAA0B,aAAa,CAAC,UAJhB,EAKxB,IAAI,KAAK,aAAT,IAA0B,IAAI,KAAK,aAAnC,IAAoD,aAAa,CAAC,IAAD,CALzC,EAMxB,WAAW,CAAC,KAAK,CAAC,UAAP,CANa,EAOxB,KAAK,CAAC,OAAN,CAAc,SAPU,CAA1B;AASD;;AACD,MAAI,KAAK,CAAC,KAAV,EAAiB;AACf,IAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,OAAA,CAAA,YAAA,CACtB,OAAA,CAAA,iBAAA,CAAkB,KADI,EAEtB,IAAI,KAAK,aAAT,IAA0B,WAAW,CAAC,UAFhB,EAGtB,IAAI,KAAK,aAAT,IAA0B,WAAW,CAAC,UAHhB,EAItB,IAAI,KAAK,aAAT,IAA0B,IAAI,KAAK,aAAnC,IAAoD,WAAW,CAAC,IAAD,CAJzC,EAKtB,KAAK,CAAC,KAAN,CAAY,SALU,CAAxB;AAOD;;AAED,SAAO,KAAP;AACD,CApCM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SpinnerState, SpinnerSlots } from './Spinner.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const spinnerClassNames: SlotClassNames<SpinnerSlots> = {\n root: 'fui-Spinner',\n spinner: 'fui-Spinner__spinner',\n label: 'fui-Spinner__label',\n};\n\n/*\n * TODO: Update with proper tokens when added\n * Radii for the Spinner circles\n */\nconst rValues = {\n tiny: '9px',\n extraSmall: '11px',\n small: '13px',\n medium: '14.5px',\n large: '16.5px',\n extraLarge: '18.5px',\n huge: '20px',\n};\n\n/*\n * TODO: Update with proper tokens when added\n * Sizes for the Spinner\n */\nconst spinnnerSizes = {\n tiny: '20px',\n extraSmall: '24px',\n small: '28px',\n medium: '32px',\n large: '36px',\n extraLarge: '40px',\n huge: '44px',\n};\n\n/*\n * TODO: Update with proper tokens when added\n * Animation for Spinner\n */\nconst spinnerAnimation = {\n container: {\n animationDuration: '3s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'linear',\n backgroundColor: 'transparent',\n },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n ...shorthands.gap('8px'),\n },\n\n horizontal: {\n flexDirection: 'row',\n },\n\n vertical: {\n flexDirection: 'column',\n },\n});\n\nconst useLoaderStyles = makeStyles({\n // global SVG class\n spinnerSVG: {\n ':focus-visible': {\n outlineStyle: '3px solid transparent',\n },\n ['& > svg']: {\n animationName: {\n '0%': { transform: 'rotate(0deg)' },\n '100%': { transform: 'rotate(360deg)' },\n },\n ...spinnerAnimation.container,\n },\n ['& > svg > circle']: {\n cx: '50%',\n cy: '50%',\n fill: 'none',\n },\n },\n\n tiny: {\n ['& > svg']: {\n height: spinnnerSizes.tiny,\n width: spinnnerSizes.tiny,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThick,\n r: rValues.tiny,\n },\n },\n\n extraSmall: {\n ['& > svg']: {\n height: spinnnerSizes.extraSmall,\n width: spinnnerSizes.extraSmall,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThick,\n r: rValues.extraSmall,\n },\n },\n\n small: {\n ['& > svg']: {\n height: spinnnerSizes.small,\n width: spinnnerSizes.small,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThick,\n r: rValues.small,\n },\n },\n\n medium: {\n ['& > svg']: {\n height: spinnnerSizes.medium,\n width: spinnnerSizes.medium,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThicker,\n r: rValues.medium,\n },\n },\n\n large: {\n ['& > svg']: {\n height: spinnnerSizes.large,\n width: spinnnerSizes.large,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThicker,\n r: rValues.large,\n },\n },\n\n extraLarge: {\n ['& > svg']: {\n height: spinnnerSizes.extraLarge,\n width: spinnnerSizes.extraLarge,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThicker,\n r: rValues.extraLarge,\n },\n },\n\n huge: {\n ['& > svg']: {\n height: spinnnerSizes.huge,\n width: spinnnerSizes.huge,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThickest,\n r: rValues.huge,\n },\n },\n});\n\nconst useTrackStyles = makeStyles({\n inverted: {\n ['& > svg > circle.fui-Spinner__Tail']: {\n stroke: tokens.colorNeutralStrokeOnBrand2,\n animationName: {\n '0%': {\n strokeDasharray: '1,150',\n strokeDashoffset: '0',\n },\n\n '50%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-35',\n },\n\n '100%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-124',\n },\n },\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'cubic-bezier(0.33,0,0.67,1)',\n strokeLinecap: 'round',\n transform: 'rotate(-90deg)',\n transformOrigin: '50% 50%',\n },\n\n ['& > svg > circle.fui-Spinner__Track']: {\n stroke: tokens.colorNeutralBackgroundInverted,\n },\n },\n primary: {\n ['& > svg > circle.fui-Spinner__Tail']: {\n stroke: tokens.colorBrandStroke1,\n '@media screen and (forced-colors: active)': {\n stroke: tokens.colorNeutralStrokeOnBrand2,\n },\n animationName: {\n '0%': {\n strokeDasharray: '1,150',\n strokeDashoffset: '0',\n },\n\n '50%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-35',\n },\n\n '100%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-124',\n },\n },\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'cubic-bezier(0.33,0,0.67,1)',\n strokeLinecap: 'round',\n transform: 'rotate(-90deg)',\n transformOrigin: '50% 50%',\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1',\n },\n },\n ['& > svg > circle.fui-Spinner__Track']: {\n stroke: tokens.colorNeutralBackground4,\n '@media screen and (forced-colors: active)': {\n stroke: tokens.colorNeutralBackgroundInverted,\n },\n },\n },\n});\n\nconst useLabelStyles = makeStyles({\n // style for label\n\n tiny: {\n ...typographyStyles.body1,\n },\n\n extraSmall: {\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 extraLarge: {\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 const { labelPosition, size = 'medium' } = state;\n const rootStyles = useRootStyles();\n const spinnerStyles = useLoaderStyles();\n const labelStyles = useLabelStyles();\n const trackStyles = useTrackStyles();\n\n state.root.className = mergeClasses(\n spinnerClassNames.root,\n rootStyles.root,\n (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical,\n (labelPosition === 'before' || labelPosition === 'after') && rootStyles.horizontal,\n state.root.className,\n );\n if (state.spinner && state.appearance) {\n state.spinner.className = mergeClasses(\n spinnerClassNames.spinner,\n spinnerStyles.spinnerSVG,\n size === 'extra-small' && spinnerStyles.extraSmall,\n size === 'extra-large' && spinnerStyles.extraLarge,\n size !== 'extra-large' && size !== 'extra-small' && spinnerStyles[size],\n trackStyles[state.appearance],\n state.spinner.className,\n );\n }\n if (state.label) {\n state.label.className = mergeClasses(\n spinnerClassNames.label,\n size === 'extra-small' && labelStyles.extraSmall,\n size === 'extra-large' && labelStyles.extraLarge,\n size !== 'extra-large' && size !== 'extra-small' && labelStyles[size],\n state.label.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@fluentui/react-spinner",
3
- "version": "9.0.0-beta.9",
3
+ "version": "9.0.0-rc.4",
4
4
  "description": "Spinner component for Fluent UI React",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
7
- "typings": "lib/index.d.ts",
7
+ "typings": "dist/index.d.ts",
8
8
  "sideEffects": false,
9
9
  "repository": {
10
10
  "type": "git",
@@ -28,14 +28,14 @@
28
28
  "devDependencies": {
29
29
  "@fluentui/eslint-plugin": "*",
30
30
  "@fluentui/react-conformance": "*",
31
- "@fluentui/react-conformance-griffel": "9.0.0-beta.5",
31
+ "@fluentui/react-conformance-griffel": "9.0.0-beta.7",
32
32
  "@fluentui/scripts": "^1.0.0"
33
33
  },
34
34
  "dependencies": {
35
- "@fluentui/react-theme": "9.0.0-rc.7",
36
- "@fluentui/react-label": "9.0.0-beta.12",
37
- "@fluentui/react-utilities": "9.0.0-rc.8",
38
- "@griffel/react": "1.0.3",
35
+ "@fluentui/react-theme": "9.0.0-rc.9",
36
+ "@fluentui/react-label": "9.0.0-rc.4",
37
+ "@fluentui/react-utilities": "9.0.0-rc.9",
38
+ "@griffel/react": "1.0.5",
39
39
  "tslib": "^2.1.0"
40
40
  },
41
41
  "peerDependencies": {
package/lib/Spinner.d.ts DELETED
@@ -1 +0,0 @@
1
- export * from './components/Spinner/index';
package/lib/components/Spinner/DefaultSvg.d.ts DELETED
@@ -1 +0,0 @@
1
- export declare const DefaultSvg: () => JSX.Element;
package/lib/components/Spinner/Spinner.d.ts DELETED
@@ -1,6 +0,0 @@
1
- import type { SpinnerProps } from './Spinner.types';
2
- import type { ForwardRefComponent } from '@fluentui/react-utilities';
3
- /**
4
- * Converged Spinner component for the fluentui repo
5
- */
6
- export declare const Spinner: ForwardRefComponent<SpinnerProps>;
package/lib/components/Spinner/Spinner.types.d.ts DELETED
@@ -1,51 +0,0 @@
1
- import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
2
- import { Label } from '@fluentui/react-label';
3
- export declare type SpinnerSlots = {
4
- /**
5
- * The root of the Spinner.
6
- * The root slot receives the `className` and `style` specified directly on the `<Spinner>`.
7
- */
8
- root: NonNullable<Slot<'div'>>;
9
- /**
10
- * The slot for the animated svg.
11
- * The spinner slot receives the `className` and `style` that handles the spinning animation.
12
- * An svg is also rendered as a child of this slot
13
- */
14
- spinner?: Slot<'span'>;
15
- /**
16
- * The label of the Slider.
17
- * The label slot receives the styling related to the text associated with the Spinner.
18
- */
19
- label?: Slot<typeof Label>;
20
- };
21
- declare type SpinnerCommons = {
22
- /**
23
- * The appearance of the Spinner.
24
- * @default 'primary'
25
- */
26
- appearance?: 'primary' | 'inverted';
27
- /**
28
- * Where the label is positioned relative to the Spinner
29
- * @default 'after'
30
- */
31
- labelPosition?: 'above' | 'below' | 'before' | 'after';
32
- /**
33
- * The size of the spinner.
34
- * @default 'medium'
35
- */
36
- size?: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';
37
- /**
38
- * The status of the Spinner.
39
- * @default 'active'
40
- */
41
- status?: 'active' | 'inactive';
42
- };
43
- /**
44
- * Spinner Props
45
- */
46
- export declare type SpinnerProps = Omit<ComponentProps<SpinnerSlots>, 'size'> & Partial<SpinnerCommons>;
47
- /**
48
- * State used in rendering Spinner
49
- */
50
- export declare type SpinnerState = ComponentState<SpinnerSlots> & SpinnerCommons;
51
- export {};
package/lib/components/Spinner/index.d.ts DELETED
@@ -1,5 +0,0 @@
1
- export * from './Spinner';
2
- export * from './Spinner.types';
3
- export * from './renderSpinner';
4
- export * from './useSpinner';
5
- export * from './useSpinnerStyles';
package/lib/components/Spinner/renderSpinner.d.ts DELETED
@@ -1,5 +0,0 @@
1
- import type { SpinnerState } from './Spinner.types';
2
- /**
3
- * Render the final JSX of Spinner
4
- */
5
- export declare const renderSpinner_unstable: (state: SpinnerState) => JSX.Element;
package/lib/components/Spinner/useSpinner.d.ts DELETED
@@ -1,12 +0,0 @@
1
- import * as React from 'react';
2
- import type { SpinnerProps, SpinnerState } from './Spinner.types';
3
- /**
4
- * Create the state required to render Spinner.
5
- *
6
- * The returned state can be modified with hooks such as useSpinnerStyles_unstable,
7
- * before being passed to renderSpinner_unstable.
8
- *
9
- * @param props - props from this instance of Spinner
10
- * @param ref - reference to root HTMLElement of Spinner
11
- */
12
- export declare const useSpinner_unstable: (props: SpinnerProps, ref: React.Ref<HTMLElement>) => SpinnerState;
package/lib/components/Spinner/useSpinnerStyles.d.ts DELETED
@@ -1,7 +0,0 @@
1
- import type { SpinnerState, SpinnerSlots } from './Spinner.types';
2
- import type { SlotClassNames } from '@fluentui/react-utilities';
3
- export declare const spinnerClassNames: SlotClassNames<SpinnerSlots>;
4
- /**
5
- * Apply styling to the Spinner slots based on the state
6
- */
7
- export declare const useSpinnerStyles_unstable: (state: SpinnerState) => SpinnerState;
package/lib/index.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export { Spinner, spinnerClassNames, renderSpinner_unstable, useSpinner_unstable, useSpinnerStyles_unstable, } from './Spinner';
2
- export type { SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner';
package/lib-commonjs/Spinner.d.ts DELETED
@@ -1 +0,0 @@
1
- export * from './components/Spinner/index';
package/lib-commonjs/components/Spinner/DefaultSvg.d.ts DELETED
@@ -1 +0,0 @@
1
- export declare const DefaultSvg: () => JSX.Element;
package/lib-commonjs/components/Spinner/Spinner.d.ts DELETED
@@ -1,6 +0,0 @@
1
- import type { SpinnerProps } from './Spinner.types';
2
- import type { ForwardRefComponent } from '@fluentui/react-utilities';
3
- /**
4
- * Converged Spinner component for the fluentui repo
5
- */
6
- export declare const Spinner: ForwardRefComponent<SpinnerProps>;
package/lib-commonjs/components/Spinner/Spinner.types.d.ts DELETED
@@ -1,51 +0,0 @@
1
- import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
2
- import { Label } from '@fluentui/react-label';
3
- export declare type SpinnerSlots = {
4
- /**
5
- * The root of the Spinner.
6
- * The root slot receives the `className` and `style` specified directly on the `<Spinner>`.
7
- */
8
- root: NonNullable<Slot<'div'>>;
9
- /**
10
- * The slot for the animated svg.
11
- * The spinner slot receives the `className` and `style` that handles the spinning animation.
12
- * An svg is also rendered as a child of this slot
13
- */
14
- spinner?: Slot<'span'>;
15
- /**
16
- * The label of the Slider.
17
- * The label slot receives the styling related to the text associated with the Spinner.
18
- */
19
- label?: Slot<typeof Label>;
20
- };
21
- declare type SpinnerCommons = {
22
- /**
23
- * The appearance of the Spinner.
24
- * @default 'primary'
25
- */
26
- appearance?: 'primary' | 'inverted';
27
- /**
28
- * Where the label is positioned relative to the Spinner
29
- * @default 'after'
30
- */
31
- labelPosition?: 'above' | 'below' | 'before' | 'after';
32
- /**
33
- * The size of the spinner.
34
- * @default 'medium'
35
- */
36
- size?: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';
37
- /**
38
- * The status of the Spinner.
39
- * @default 'active'
40
- */
41
- status?: 'active' | 'inactive';
42
- };
43
- /**
44
- * Spinner Props
45
- */
46
- export declare type SpinnerProps = Omit<ComponentProps<SpinnerSlots>, 'size'> & Partial<SpinnerCommons>;
47
- /**
48
- * State used in rendering Spinner
49
- */
50
- export declare type SpinnerState = ComponentState<SpinnerSlots> & SpinnerCommons;
51
- export {};
package/lib-commonjs/components/Spinner/index.d.ts DELETED
@@ -1,5 +0,0 @@
1
- export * from './Spinner';
2
- export * from './Spinner.types';
3
- export * from './renderSpinner';
4
- export * from './useSpinner';
5
- export * from './useSpinnerStyles';
package/lib-commonjs/components/Spinner/renderSpinner.d.ts DELETED
@@ -1,5 +0,0 @@
1
- import type { SpinnerState } from './Spinner.types';
2
- /**
3
- * Render the final JSX of Spinner
4
- */
5
- export declare const renderSpinner_unstable: (state: SpinnerState) => JSX.Element;
package/lib-commonjs/components/Spinner/useSpinner.d.ts DELETED
@@ -1,12 +0,0 @@
1
- import * as React from 'react';
2
- import type { SpinnerProps, SpinnerState } from './Spinner.types';
3
- /**
4
- * Create the state required to render Spinner.
5
- *
6
- * The returned state can be modified with hooks such as useSpinnerStyles_unstable,
7
- * before being passed to renderSpinner_unstable.
8
- *
9
- * @param props - props from this instance of Spinner
10
- * @param ref - reference to root HTMLElement of Spinner
11
- */
12
- export declare const useSpinner_unstable: (props: SpinnerProps, ref: React.Ref<HTMLElement>) => SpinnerState;