@atlaskit/spinner - npm Package Compare versions

Comparing version 11.0.0 to 12.0.0

CHANGELOG.md

 # @atlaskit/spinner
 
+## 12.0.0
+### Major Changes
+
+- [215688984e](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/215688984e):
+
+  - @atlaskit/spinner has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No API or behavioural changes.
+
 ## 11.0.0
@@ -4,0 +11,0 @@ - [major] [7c17b35107](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/7c17b35107):

dist/package.json

 {
 	"name": "@atlaskit/spinner",
-	"version": "11.0.0",
+	"version": "12.0.0",
 	"sideEffects": false
 }

index.js

@@ -1,1 +0,2 @@
-export { default } from './Spinner';
+export { default } from './Spinner';
+//# sourceMappingURL=index.js.map

package.json

 {
   "name": "@atlaskit/spinner",
-  "version": "11.0.0",
+  "version": "12.0.0",
   "description": "A React component that displays a spinning icon to show a loading state",
   "license": "Apache-2.0",
   "module": "index.js",
-  "atlaskit:src": "src/index.js",
+  "types": "index.d.ts",
+  "atlaskit:src": "src/index.ts",
   "sideEffects": false,
@@ -34,3 +35,3 @@ "atlaskit:designLink": "https://atlassian.design/guidelines/product/components/spinners",
     "@atlaskit/build-utils": "^2.0.0",
-    "@atlaskit/button": "^13.0.0",
+    "@atlaskit/button": "^13.0.4",
     "@atlaskit/docs": "^8.0.0",
@@ -42,2 +43,2 @@ "@atlaskit/ssr": "^0.1.0",
   }
-}
+}

Spinner/constants.js

 export var SIZES_MAP = {
-  xsmall: 8,
-  small: 16,
-  medium: 24,
-  large: 48,
-  xlarge: 96
+    xsmall: 8,
+    small: 16,
+    medium: 24,
+    large: 48,
+    xlarge: 96,
 };
-export var DEFAULT_SIZE = SIZES_MAP.small;
+export var DEFAULT_SIZE = SIZES_MAP.small;
+//# sourceMappingURL=constants.js.map

Spinner/index.js

@@ -1,8 +0,2 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import * as tslib_1 from "tslib";
 import React, { Component } from 'react';
@@ -14,151 +8,83 @@ import { Transition } from 'react-transition-group';
 import Svg from './styledSvg';
-var Outer = styled.span.withConfig({
-  displayName: "Spinner__Outer",
-  componentId: "sc-1ejgacn-0"
-})(["\n  display: inline-block;\n  vertical-align: middle;\n"]);
+var Outer = styled.span(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  display: inline-block;\n  vertical-align: middle;\n"], ["\n  display: inline-block;\n  vertical-align: middle;\n"])));
 Outer.displayName = 'Outer';
-
-var Spinner =
-/*#__PURE__*/
-function (_Component) {
-  _inherits(Spinner, _Component);
-
-  function Spinner(props) {
-    var _this;
-
-    _classCallCheck(this, Spinner);
-
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(Spinner).call(this, props));
-
-    _defineProperty(_assertThisInitialized(_this), "transitionNode", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "enter", function () {
-      var delay = _this.props.delay;
-
-      if (delay) {
-        _this.setState({
-          phase: 'DELAY'
-        });
-      } else {
-        _this.setState({
-          phase: 'ENTER'
-        });
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "idle", function () {
-      _this.setState({
-        phase: 'IDLE'
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "exit", function () {
-      _this.setState({
-        phase: 'LEAVE'
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "endListener", function (node, done) {
-      var executeCallback = function executeCallback(event) {
-        // ignore animation events on the glyph
-        // $FlowFixMe - tagName does not exist in event.target
-        if (event.target.tagName === 'svg') {
-          return false;
-        }
-
-        if (_this.state.phase === 'DELAY') {
-          _this.setState({
-            phase: 'ENTER'
-          });
-
-          _this.endListener(node, done);
-        } else {
-          done();
-        }
-
-        return node && node.removeEventListener('animationend', executeCallback);
-      }; // FIX - jest-emotion doesn't recognise the DOM node so it can't add
-      // the eventListener in the @atlaskit/button tests.
-      // Should be fixed when we move to emotion@10
-
-
-      if (node && node.addEventListener) {
-        return node && node.addEventListener('animationend', executeCallback);
-      }
-
-      return done();
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "validateSize", function () {
-      var size = _this.props.size;
-      var spinnerSize = SIZES_MAP[size] || size;
-      return typeof spinnerSize === 'number' ? spinnerSize : DEFAULT_SIZE;
-    });
-
-    _this.state = {
-      phase: ''
+var Spinner = /** @class */ (function (_super) {
+    tslib_1.__extends(Spinner, _super);
+    function Spinner(props) {
+        var _this = _super.call(this, props) || this;
+        _this.transitionNode = null;
+        _this.enter = function () {
+            var delay = _this.props.delay;
+            if (delay) {
+                _this.setState({ phase: 'DELAY' });
+            }
+            else {
+                _this.setState({ phase: 'ENTER' });
+            }
+        };
+        _this.idle = function () {
+            _this.setState({ phase: 'IDLE' });
+        };
+        _this.exit = function () {
+            _this.setState({ phase: 'LEAVE' });
+        };
+        _this.endListener = function (node, done) {
+            var executeCallback = function (event) {
+                // ignore animation events on the glyph
+                if (event.target.tagName === 'svg') {
+                    return;
+                }
+                if (_this.state.phase === 'DELAY') {
+                    _this.setState({ phase: 'ENTER' });
+                    _this.endListener(node, done);
+                }
+                else {
+                    done();
+                }
+                return node && node.removeEventListener('animationend', executeCallback);
+            };
+            // FIX - jest-emotion doesn't recognise the DOM node so it can't add
+            // the eventListener in the @atlaskit/button tests.
+            // Should be fixed when we move to emotion@10
+            if (node && node.addEventListener) {
+                return node.addEventListener('animationend', executeCallback);
+            }
+            return done();
+        };
+        _this.validateSize = function () {
+            var size = _this.props.size;
+            var spinnerSize = SIZES_MAP[size] || size;
+            return typeof spinnerSize === 'number' ? spinnerSize : DEFAULT_SIZE;
+        };
+        _this.state = {
+            phase: '',
+        };
+        return _this;
+    }
+    Spinner.prototype.render = function () {
+        var _this = this;
+        var phase = this.state.phase;
+        var _a = this.props, delay = _a.delay, invertColor = _a.invertColor, isCompleting = _a.isCompleting;
+        var size = this.validateSize();
+        var strokeWidth = Math.round(size / 10);
+        var strokeRadius = size / 2 - strokeWidth / 2;
+        return (React.createElement(Outer, null,
+            React.createElement(Transition, { addEndListener: this.endListener, appear: true, in: !isCompleting, mountOnEnter: true, unmountOnExit: true, onEnter: this.enter, onEntered: this.idle, onExit: this.exit, onExited: function () { return _this.props.onComplete(); }, timeout: 0, ref: function (node) {
+                    _this.transitionNode = node;
+                } },
+                React.createElement(Container, { delay: delay / 1000, phase: phase, size: size },
+                    React.createElement(Svg, { focusable: "false", height: size, invertColor: invertColor, phase: phase, size: size, viewBox: "0 0 " + size + " " + size, width: size, xmlns: "http://www.w3.org/2000/svg" },
+                        React.createElement("circle", { cx: size / 2, cy: size / 2, r: strokeRadius }))))));
     };
-    return _this;
-  }
-
-  _createClass(Spinner, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var phase = this.state.phase;
-      var _this$props = this.props,
-          delay = _this$props.delay,
-          invertColor = _this$props.invertColor,
-          isCompleting = _this$props.isCompleting;
-      var size = this.validateSize();
-      var strokeWidth = Math.round(size / 10);
-      var strokeRadius = size / 2 - strokeWidth / 2;
-      return React.createElement(Outer, null, React.createElement(Transition, {
-        addEndListener: this.endListener,
-        appear: true,
-        in: !isCompleting,
-        mountOnEnter: true,
-        unmountOnExit: true,
-        onEnter: this.enter,
-        onEntered: this.idle,
-        onExit: this.exit,
-        onExited: function onExited() {
-          return _this2.props.onComplete();
-        },
-        ref: function ref(node) {
-          _this2.transitionNode = node;
-        }
-      }, React.createElement(Container, {
-        delay: delay / 1000,
-        phase: phase,
-        size: size
-      }, React.createElement(Svg, {
-        focusable: "false",
-        height: size,
-        invertColor: invertColor,
-        phase: phase,
-        size: size,
-        viewBox: "0 0 ".concat(size, " ").concat(size),
-        width: size,
-        xmlns: "http://www.w3.org/2000/svg"
-      }, React.createElement("circle", {
-        cx: size / 2,
-        cy: size / 2,
-        r: strokeRadius
-      })))));
-    }
-  }]);
-
-  return Spinner;
-}(Component);
-
-_defineProperty(Spinner, "defaultProps", {
-  delay: 100,
-  isCompleting: false,
-  invertColor: false,
-  onComplete: function onComplete() {},
-  size: 'medium'
-});
-
-export { Spinner as default };
+    Spinner.defaultProps = {
+        delay: 100,
+        isCompleting: false,
+        invertColor: false,
+        onComplete: function () { },
+        size: 'medium',
+    };
+    return Spinner;
+}(Component));
+export default Spinner;
+var templateObject_1;
+//# sourceMappingURL=index.js.map

Spinner/styledContainer.js

@@ -0,3 +1,3 @@
+import * as tslib_1 from "tslib";
 import styled, { keyframes, css } from 'styled-components';
-
 /* Define keyframes statically to prevent a perfomance issue in styled components v1 where the keyframes function
@@ -9,38 +9,30 @@ * does not cache previous values resulting in each spinner injecting the same keyframe definition
 var keyframeNames = {
-  noop: keyframes(["\n    from { opacity: 0; }\n    to { opacity: 0; }\n  "]),
-  enterRotate: keyframes(["\n    from { transform: rotate(50deg); }\n    to { transform: rotate(230deg); }\n  "]),
-  leaveRotate: keyframes(["\n    from { transform: rotate(230deg); }\n    to { transform: rotate(510deg); }\n  "]),
-  leaveOpacity: keyframes(["\n    from { opacity: 1; }\n    to { opacity: 0; }\n  "])
+    noop: keyframes(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    from { opacity: 0; }\n    to { opacity: 0; }\n  "], ["\n    from { opacity: 0; }\n    to { opacity: 0; }\n  "]))),
+    enterRotate: keyframes(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n    from { transform: rotate(50deg); }\n    to { transform: rotate(230deg); }\n  "], ["\n    from { transform: rotate(50deg); }\n    to { transform: rotate(230deg); }\n  "]))),
+    leaveRotate: keyframes(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n    from { transform: rotate(230deg); }\n    to { transform: rotate(510deg); }\n  "], ["\n    from { transform: rotate(230deg); }\n    to { transform: rotate(510deg); }\n  "]))),
+    leaveOpacity: keyframes(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n    from { opacity: 1; }\n    to { opacity: 0; }\n  "], ["\n    from { opacity: 1; }\n    to { opacity: 0; }\n  "]))),
 };
-export var getContainerAnimation = function getContainerAnimation(_ref) {
-  var delay = _ref.delay,
-      phase = _ref.phase;
-
-  if (phase === 'DELAY') {
-    /* This hides the spinner and allows us to use animationend events to move to the next phase in
-     * the same way we do with the other lifecycle stages */
-    return css(["\n      animation: ", "s ", ";\n    "], delay, keyframeNames.noop);
-  }
-
-  if (phase === 'ENTER' || phase === 'IDLE') {
-    return css(["\n      animation: 1s ease-in-out forwards ", ";\n    "], keyframeNames.enterRotate);
-  }
-
-  if (phase === 'LEAVE') {
-    return css(["\n      animation: 0.53s ease-in-out forwards ", ",\n        0.2s ease-in-out 0.33s ", ";\n    "], keyframeNames.leaveRotate, keyframeNames.leaveOpacity);
-  }
-
-  return '';
+export var getContainerAnimation = function (_a) {
+    var delay = _a.delay, phase = _a.phase;
+    if (phase === 'DELAY') {
+        /* This hides the spinner and allows us to use animationend events to move to the next phase in
+         * the same way we do with the other lifecycle stages */
+        return css(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n      animation: ", "s ", ";\n    "], ["\n      animation: ", "s ", ";\n    "])), delay, keyframeNames.noop);
+    }
+    if (phase === 'ENTER' || phase === 'IDLE') {
+        return css(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n      animation: 1s ease-in-out forwards ", ";\n    "], ["\n      animation: 1s ease-in-out forwards ", ";\n    "])), keyframeNames.enterRotate);
+    }
+    if (phase === 'LEAVE') {
+        return css(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["\n      animation: 0.53s ease-in-out forwards ", ",\n        0.2s ease-in-out 0.33s ", ";\n    "], ["\n      animation: 0.53s ease-in-out forwards ", ",\n        0.2s ease-in-out 0.33s ", ";\n    "])), keyframeNames.leaveRotate, keyframeNames.leaveOpacity);
+    }
+    return '';
 };
-
-var getSize = function getSize(_ref2) {
-  var size = _ref2.size;
-  return "".concat(size, "px");
+var getSize = function (_a) {
+    var size = _a.size;
+    return size + "px";
 };
-
-var Container = styled.span.withConfig({
-  displayName: "styledContainer__Container",
-  componentId: "sc-1qs8wxp-0"
-})(["\n  ", "\n  display: flex;\n  height: ", ";\n  width: ", ";\n\n  /* Rapidly creating and removing spinners will result in multiple spinners being visible while\n   * they complete their exit animations. This rules hides the spinner if another one has been\n   * added. */\n  div + & {\n    display: none;\n  }\n"], getContainerAnimation, getSize, getSize);
+var Container = styled.span(templateObject_8 || (templateObject_8 = tslib_1.__makeTemplateObject(["\n  ", "\n  display: flex;\n  height: ", ";\n  width: ", ";\n\n  /* Rapidly creating and removing spinners will result in multiple spinners being visible while\n   * they complete their exit animations. This rules hides the spinner if another one has been\n   * added. */\n  div + & {\n    display: none;\n  }\n"], ["\n  ", "\n  display: flex;\n  height: ", ";\n  width: ", ";\n\n  /* Rapidly creating and removing spinners will result in multiple spinners being visible while\n   * they complete their exit animations. This rules hides the spinner if another one has been\n   * added. */\n  div + & {\n    display: none;\n  }\n"])), getContainerAnimation, getSize, getSize);
 Container.displayName = 'SpinnerContainer';
-export default Container;
+export default Container;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+//# sourceMappingURL=styledContainer.js.map

Spinner/styledSvg.js

@@ -1,16 +0,12 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import * as tslib_1 from "tslib";
 import styled, { css, keyframes } from 'styled-components';
-import { themed } from '@atlaskit/theme/components';
+import { themed } from '@atlaskit/theme';
 import { N500, N0 } from '@atlaskit/theme/colors';
 import { SIZES_MAP } from './constants';
-
-var getStrokeWidth = function getStrokeWidth(size) {
-  return Math.round(size / 10);
+var getStrokeWidth = function (size) { return Math.round(size / 10); };
+var getStrokeCircumference = function (size) {
+    var strokeWidth = getStrokeWidth(size);
+    var strokeRadius = size / 2 - strokeWidth / 2;
+    return Math.PI * strokeRadius * 2;
 };
-
-var getStrokeCircumference = function getStrokeCircumference(size) {
-  var strokeWidth = getStrokeWidth(size);
-  var strokeRadius = size / 2 - strokeWidth / 2;
-  return Math.PI * strokeRadius * 2;
-};
 /* Define keyframes statically to prevent a perfomance issue in styled components v1 where the keyframes function
@@ -21,12 +17,18 @@ * does not cache previous values resulting in each spinner injecting the same keyframe definition
  */
-
-
 var keyframeNames = {
-  noop: keyframes(["\n    from { opacity: 0; }\n    to { opacity: 0; }\n  "]),
-  rotate: keyframes(["\n    to { transform: rotate(360deg); }\n  "]),
-  enterOpacity: keyframes(["\n    from { opacity: 0; }\n    to { opacity: 1; }\n  "]),
-  smallEnterStroke: keyframes(["\n    from { stroke-dashoffset: ", "px; }\n    to { stroke-dashoffset: ", "px; }\n  "], getStrokeCircumference(SIZES_MAP.small), getStrokeCircumference(SIZES_MAP.small) * 0.8),
-  mediumEnterStroke: keyframes(["\n    from { stroke-dashoffset: ", "px; }\n    to { stroke-dashoffset: ", "px; }\n  "], getStrokeCircumference(SIZES_MAP.medium), getStrokeCircumference(SIZES_MAP.medium) * 0.8),
-  largeEnterStroke: keyframes(["\n    from { stroke-dashoffset: ", "px; }\n    to { stroke-dashoffset: ", "px; }\n  "], getStrokeCircumference(SIZES_MAP.large), getStrokeCircumference(SIZES_MAP.large) * 0.8),
-  xlargeEnterStroke: keyframes(["\n    from { stroke-dashoffset: ", "px; }\n    to { stroke-dashoffset: ", "px; }\n  "], getStrokeCircumference(SIZES_MAP.xlarge), getStrokeCircumference(SIZES_MAP.xlarge) * 0.8)
+    noop: keyframes(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    from { opacity: 0; }\n    to { opacity: 0; }\n  "], ["\n    from { opacity: 0; }\n    to { opacity: 0; }\n  "]))),
+    rotate: keyframes(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n    to { transform: rotate(360deg); }\n  "], ["\n    to { transform: rotate(360deg); }\n  "]))),
+    enterOpacity: keyframes(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n    from { opacity: 0; }\n    to { opacity: 1; }\n  "], ["\n    from { opacity: 0; }\n    to { opacity: 1; }\n  "]))),
+    smallEnterStroke: keyframes(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n    from { stroke-dashoffset: ", "px; }\n    to { stroke-dashoffset: ", "px; }\n  "], ["\n    from { stroke-dashoffset: ", "px; }\n    to { stroke-dashoffset: ",
+        "px; }\n  "])), getStrokeCircumference(SIZES_MAP.small), getStrokeCircumference(SIZES_MAP.small) *
+        0.8),
+    mediumEnterStroke: keyframes(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n    from { stroke-dashoffset: ", "px; }\n    to { stroke-dashoffset: ", "px; }\n  "], ["\n    from { stroke-dashoffset: ", "px; }\n    to { stroke-dashoffset: ",
+        "px; }\n  "])), getStrokeCircumference(SIZES_MAP.medium), getStrokeCircumference(SIZES_MAP.medium) *
+        0.8),
+    largeEnterStroke: keyframes(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n    from { stroke-dashoffset: ", "px; }\n    to { stroke-dashoffset: ", "px; }\n  "], ["\n    from { stroke-dashoffset: ", "px; }\n    to { stroke-dashoffset: ",
+        "px; }\n  "])), getStrokeCircumference(SIZES_MAP.large), getStrokeCircumference(SIZES_MAP.large) *
+        0.8),
+    xlargeEnterStroke: keyframes(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["\n    from { stroke-dashoffset: ", "px; }\n    to { stroke-dashoffset: ", "px; }\n  "], ["\n    from { stroke-dashoffset: ", "px; }\n    to { stroke-dashoffset: ",
+        "px; }\n  "])), getStrokeCircumference(SIZES_MAP.xlarge), getStrokeCircumference(SIZES_MAP.xlarge) *
+        0.8),
 };
@@ -36,51 +38,32 @@ /* If a standard size is used, we can use one of our statically defined keyframes, otherwise
  */
-
-var getEnterStrokeKeyframe = function getEnterStrokeKeyframe(size) {
-  var standardSizeName = Object.keys(SIZES_MAP).find(function (sizeName) {
-    return size === SIZES_MAP[sizeName];
-  });
-
-  if (standardSizeName) {
-    return keyframeNames["".concat(standardSizeName, "EnterStroke")];
-  }
-
-  var circumference = getStrokeCircumference(size);
-  return keyframes(["\n    from { stroke-dashoffset: ", "px; }\n    to { stroke-dashoffset: ", "px; }\n  "], circumference, circumference * 0.8);
+var getEnterStrokeKeyframe = function (size) {
+    var standardSizeName = Object.keys(SIZES_MAP).find(function (sizeName) { return size === SIZES_MAP[sizeName]; });
+    if (standardSizeName) {
+        return keyframeNames[standardSizeName + "EnterStroke"];
+    }
+    var circumference = getStrokeCircumference(size);
+    return keyframes(templateObject_8 || (templateObject_8 = tslib_1.__makeTemplateObject(["\n    from { stroke-dashoffset: ", "px; }\n    to { stroke-dashoffset: ", "px; }\n  "], ["\n    from { stroke-dashoffset: ", "px; }\n    to { stroke-dashoffset: ", "px; }\n  "])), circumference, circumference * 0.8);
 };
-
-var spinnerColor = themed({
-  light: N500,
-  dark: N0
-});
-var spinnerColorInverted = themed({
-  light: N0,
-  dark: N0
-});
-export var getStrokeColor = function getStrokeColor(_ref // $FlowFixMe - theme is not found in props
-) {
-  var invertColor = _ref.invertColor,
-      props = _objectWithoutProperties(_ref, ["invertColor"]);
-
-  return invertColor ? spinnerColorInverted(props) : spinnerColor(props);
+var spinnerColor = themed({ light: N500, dark: N0 });
+var spinnerColorInverted = themed({ light: N0, dark: N0 });
+export var getStrokeColor = function (_a) {
+    var invertColor = _a.invertColor, props = tslib_1.__rest(_a, ["invertColor"]);
+    return invertColor ? spinnerColorInverted(props) : spinnerColor(props);
 };
-export var svgStyles = css(["\n  ", ";\n"], function (props) {
-  var circumference = getStrokeCircumference(props.size);
-
-  var animation = function animation(animProps) {
-    var baseAnimation = '0.86s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite';
-
-    if (animProps.phase === 'ENTER') {
-      return css(["\n          animation: ", " ", ",\n            0.8s ease-in-out ", ",\n            0.2s ease-in-out ", ";\n        "], baseAnimation, keyframeNames.rotate, getEnterStrokeKeyframe(animProps.size), keyframeNames.enterOpacity);
-    }
-
-    return css(["\n        animation: ", " ", ";\n      "], baseAnimation, keyframeNames.rotate);
-  };
-
-  return css(["\n      ", "\n      fill: none;\n      stroke: ", ";\n      stroke-dasharray: ", "px;\n      stroke-dashoffset: ", "px;\n      stroke-linecap: round;\n      stroke-width: ", "px;\n      transform-origin: center;\n    "], animation, getStrokeColor, circumference, circumference * 0.8, getStrokeWidth(props.size));
+export var svgStyles = css(templateObject_12 || (templateObject_12 = tslib_1.__makeTemplateObject(["\n  ", ";\n"], ["\n  ",
+    ";\n"])), function (props) {
+    var circumference = getStrokeCircumference(props.size);
+    var animation = function (animProps) {
+        var baseAnimation = '0.86s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite';
+        if (animProps.phase === 'ENTER') {
+            return css(templateObject_9 || (templateObject_9 = tslib_1.__makeTemplateObject(["\n          animation: ", " ", ",\n            0.8s ease-in-out ", ",\n            0.2s ease-in-out ", ";\n        "], ["\n          animation: ", " ", ",\n            0.8s ease-in-out ", ",\n            0.2s ease-in-out ", ";\n        "])), baseAnimation, keyframeNames.rotate, getEnterStrokeKeyframe(animProps.size), keyframeNames.enterOpacity);
+        }
+        return css(templateObject_10 || (templateObject_10 = tslib_1.__makeTemplateObject(["\n        animation: ", " ", ";\n      "], ["\n        animation: ", " ", ";\n      "])), baseAnimation, keyframeNames.rotate);
+    };
+    return css(templateObject_11 || (templateObject_11 = tslib_1.__makeTemplateObject(["\n      ", "\n      fill: none;\n      stroke: ", ";\n      stroke-dasharray: ", "px;\n      stroke-dashoffset: ", "px;\n      stroke-linecap: round;\n      stroke-width: ", "px;\n      transform-origin: center;\n    "], ["\n      ", "\n      fill: none;\n      stroke: ", ";\n      stroke-dasharray: ", "px;\n      stroke-dashoffset: ", "px;\n      stroke-linecap: round;\n      stroke-width: ", "px;\n      transform-origin: center;\n    "])), animation, getStrokeColor, circumference, circumference * 0.8, getStrokeWidth(props.size));
 });
-var Svg = styled.svg.withConfig({
-  displayName: "styledSvg__Svg",
-  componentId: "y2l69q-0"
-})(["\n  ", ";\n"], svgStyles);
+var Svg = styled.svg(templateObject_13 || (templateObject_13 = tslib_1.__makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), svgStyles);
 Svg.displayName = 'SpinnerSvg';
-export default Svg;
+export default Svg;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
+//# sourceMappingURL=styledSvg.js.map

version.json

 {
 	"name": "@atlaskit/spinner",
-	"version": "11.0.0",
+	"version": "12.0.0",
 	"sideEffects": false
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

45209

increased by10.08%

Number of package files

28

increased by40%

Lines of code

383

increased by17.13%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes