@fluentui/react-spinner 9.1.4 → 9.1.5

package/lib-amd/components/Spinner/useSpinnerStyles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useSpinnerStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinner/src/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    lineHeight: '0',\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': {\n      ...shorthands.outline('3px', 'solid', 'transparent'),\n    },\n    ['& > svg']: {\n      animationName: {\n        '0%': { transform: 'rotate(0deg)' },\n        '100%': { transform: 'rotate(360deg)' },\n      },\n      ...spinnerAnimation.container,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        animationDuration: '0.01ms',\n        animationIterationCount: '1',\n      },\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  'extra-small': {\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  'extra-large': {\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: tokens.curveEasyEase,\n      strokeLinecap: 'round',\n      transform: 'rotate(-90deg)',\n      transformOrigin: '50% 50%',\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        animationDuration: '0.01ms',\n        animationIterationCount: '1',\n      },\n    },\n\n    ['& > svg > circle.fui-Spinner__Track']: {\n      stroke: 'rgba(255, 255, 255, 0.2)', // this is whiteAlpha[20] but that token is not exported\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: tokens.curveEasyEase,\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.colorBrandStroke2,\n      '@media screen and (forced-colors: active)': {\n        stroke: tokens.colorNeutralBackgroundInverted,\n      },\n    },\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  // style for label\n  inverted: {\n    color: 'rgba(255, 255, 255, 1)', // This is white alpha but the token is not exported\n  },\n\n  primary: {}, // no change\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  const { labelPosition, size, appearance = 'primary' } = 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) {\n    state.spinner.className = mergeClasses(\n      spinnerClassNames.spinner,\n      spinnerStyles.spinnerSVG,\n      spinnerStyles[size],\n      trackStyles[appearance],\n      state.spinner.className,\n    );\n  }\n  if (state.label) {\n    state.label.className = mergeClasses(\n      spinnerClassNames.label,\n      labelStyles[size],\n      labelStyles[appearance],\n      state.label.className,\n    );\n  }\n\n  return state;\n};\n"]}

package/lib-amd/index.js

@@ -1,11 +0,0 @@
-define(["require", "exports", "./Spinner"], function (require, exports, Spinner_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.useSpinnerStyles_unstable = exports.useSpinner_unstable = exports.renderSpinner_unstable = exports.spinnerClassNames = exports.Spinner = void 0;
-    Object.defineProperty(exports, "Spinner", { enumerable: true, get: function () { return Spinner_1.Spinner; } });
-    Object.defineProperty(exports, "spinnerClassNames", { enumerable: true, get: function () { return Spinner_1.spinnerClassNames; } });
-    Object.defineProperty(exports, "renderSpinner_unstable", { enumerable: true, get: function () { return Spinner_1.renderSpinner_unstable; } });
-    Object.defineProperty(exports, "useSpinner_unstable", { enumerable: true, get: function () { return Spinner_1.useSpinner_unstable; } });
-    Object.defineProperty(exports, "useSpinnerStyles_unstable", { enumerable: true, get: function () { return Spinner_1.useSpinnerStyles_unstable; } });
-});
-//# sourceMappingURL=index.js.map

package/lib-amd/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-spinner/src/index.ts"],"names":[],"mappings":";;;;IACE,kGAAA,OAAO,OAAA;IACP,4GAAA,iBAAiB,OAAA;IACjB,iHAAA,sBAAsB,OAAA;IACtB,8GAAA,mBAAmB,OAAA;IACnB,oHAAA,yBAAyB,OAAA","sourcesContent":["export {\n  Spinner,\n  spinnerClassNames,\n  renderSpinner_unstable,\n  useSpinner_unstable,\n  useSpinnerStyles_unstable,\n} from './Spinner';\nexport type { SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner';\n"]}