@atlaskit/reactions 21.0.3 → 21.0.4

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/reactions
 
+## 21.0.4
+
+### Patch Changes
+
+- [`62a37c2a5c8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/62a37c2a5c8) - replace `react-transition-group` with `@atlaskit/motion` and improve Counter component
+- [`696ba6c465d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/696ba6c465d) - The Reaction component now fires only one request to the service when being hovered.
+- [`95015909035`](https://bitbucket.org/atlassian/atlassian-frontend/commits/95015909035) - Fixed issue where some of the examples where crashing.
+- Updated dependencies
+
 ## 21.0.3
 
 ### Patch Changes

package/dist/cjs/components/Counter.js

@@ -2,22 +2,12 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.slideUpStyle = exports.slideDownStyle = exports.highlightStyle = exports.countStyle = exports.containerStyle = exports.Counter = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+exports.highlightStyle = exports.countStyle = exports.containerStyle = exports.Counter = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -27,25 +17,26 @@ var _tokens = require("@atlaskit/tokens");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _reactTransitionGroup = require("react-transition-group");
+var _motion = require("@atlaskit/motion");
 
 var _typestyle = require("typestyle");
 
-var _utils = require("./utils");
+var _usePreviousValue = _interopRequireDefault(require("@atlaskit/ds-lib/use-previous-value"));
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var animationTime = 300;
 var countStyle = (0, _typestyle.style)({
-  fontSize: '11px',
+  fontSize: 11,
+  // TODO: nice to have a theme level token for fontSize
   color: (0, _tokens.token)('color.text.subtlest', _colors.N90),
   overflow: 'hidden',
-  height: "".concat(_utils.akHeight, "px"),
-  transition: "width ".concat(animationTime, "ms ease-in-out")
+  position: 'relative',
+  padding: '4px 8px 4px 0',
+  lineHeight: '14px'
 });
 exports.countStyle = countStyle;
 var highlightStyle = (0, _typestyle.style)({
@@ -58,136 +49,56 @@ var containerStyle = (0, _typestyle.style)({
   flexDirection: 'column'
 });
 exports.containerStyle = containerStyle;
-
-var slideAnimation = function slideAnimation(start, end) {
-  var animation = (0, _typestyle.keyframes)({
-    '0%': {
-      transform: "translateY(".concat(start, "%)")
-    },
-    '100%': {
-      transform: "translateY(".concat(end, "%)")
+var Counter = /*#__PURE__*/(0, _react.memo)(function (_ref) {
+  var _ref$highlight = _ref.highlight,
+      highlight = _ref$highlight === void 0 ? false : _ref$highlight,
+      _ref$limit = _ref.limit,
+      limit = _ref$limit === void 0 ? 100 : _ref$limit,
+      _ref$overLimitLabel = _ref.overLimitLabel,
+      overLimitLabel = _ref$overLimitLabel === void 0 ? '99+' : _ref$overLimitLabel,
+      className = _ref.className,
+      value = _ref.value,
+      _ref$animationDuratio = _ref.animationDuration,
+      animationDuration = _ref$animationDuratio === void 0 ? _motion.mediumDurationMs : _ref$animationDuratio;
+
+  var hasReachedLimit = function hasReachedLimit(value) {
+    return limit && value >= limit;
+  };
+
+  var getLabel = function getLabel(value) {
+    if (hasReachedLimit(value)) {
+      return overLimitLabel || '';
+    } else if (value === 0) {
+      return '';
+    } else {
+      return value.toString();
     }
-  });
-  return "".concat(animation, " ").concat(animationTime, "ms ease-in-out");
-};
-
-var counterAnimation = function counterAnimation(start, end) {
-  return (0, _typestyle.style)({
-    animation: slideAnimation(start, end)
-  });
-};
-
-var slideUpStyle = counterAnimation(0, -50);
-exports.slideUpStyle = slideUpStyle;
-var slideDownStyle = counterAnimation(-50, 0);
-exports.slideDownStyle = slideDownStyle;
-
-var Counter = /*#__PURE__*/function (_React$PureComponent) {
-  (0, _inherits2.default)(Counter, _React$PureComponent);
-
-  var _super = _createSuper(Counter);
-
-  function Counter(props) {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, Counter);
-    _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getLabel", function (value) {
-      var overLimitLabel = _this.props.overLimitLabel;
-
-      if (_this.hasReachedLimit(value)) {
-        return overLimitLabel || '';
-      } else if (value === 0) {
-        return '';
-      } else {
-        return value.toString();
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hasReachedLimit", function (value) {
-      return _this.props.limit && value >= _this.props.limit;
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderPrevious", function () {
-      var previous = _this.state.previous;
-
-      if (previous !== undefined) {
-        var className = (0, _classnames.default)((0, _defineProperty2.default)({}, highlightStyle, previous.highlight));
-        return /*#__PURE__*/_react.default.createElement("div", {
-          key: previous.value,
-          className: className
-        }, _this.getLabel(previous.value));
-      }
-
-      return null;
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "clearPrevious", function () {
-      _this.setState({
-        previous: undefined
-      });
-    });
-    _this.state = {
-      previous: undefined
-    };
-    return _this;
-  }
-
-  (0, _createClass2.default)(Counter, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var _this$props = this.props,
-          value = _this$props.value,
-          highlight = _this$props.highlight;
-
-      if (value !== undefined && value !== nextProps.value && (!this.hasReachedLimit(value) || !this.hasReachedLimit(nextProps.value))) {
-        this.setState({
-          previous: {
-            value: value,
-            highlight: highlight
-          }
-        });
-      }
+  };
+
+  var previousValue = (0, _usePreviousValue.default)(value);
+  var label = getLabel(value);
+  var increase = previousValue ? previousValue < value : false;
+  var rootClassName = (0, _classnames.default)(countStyle, className);
+  var currentClassName = (0, _classnames.default)((0, _defineProperty2.default)({}, highlightStyle, highlight));
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: rootClassName,
+    style: {
+      width: label.length * 7
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          value = _this$props2.value,
-          highlight = _this$props2.highlight,
-          classNameProp = _this$props2.className;
-      var previous = this.state.previous;
-      var label = this.getLabel(value);
-      var increase = previous !== undefined && previous.value < value;
-      var decrease = previous !== undefined && previous.value > value;
-      var enterClass = increase ? slideUpStyle : decrease ? slideDownStyle : undefined;
-      var className = (0, _classnames.default)(countStyle, classNameProp);
-      var currentClassName = (0, _classnames.default)((0, _defineProperty2.default)({}, highlightStyle, highlight)); // WS-2525 With the pill UI updates, width of * 10 was too much so dropped down to * 7
-
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: className,
-        style: {
-          width: label.length * 7
-        }
-      }, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
-        classNames: {
-          enter: enterClass
-        },
-        timeout: animationTime,
-        in: increase || decrease,
-        onEntered: this.clearPrevious
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: containerStyle
-      }, increase ? this.renderPrevious() : null, /*#__PURE__*/_react.default.createElement("div", {
-        className: currentClassName,
-        key: value
-      }, label), decrease ? this.renderPrevious() : null)));
-    }
-  }]);
-  return Counter;
-}(_react.default.PureComponent);
-
-exports.Counter = Counter;
-(0, _defineProperty2.default)(Counter, "defaultProps", {
-  highlight: false,
-  limit: 100,
-  overLimitLabel: '99+',
-  className: undefined
-});
+  }, /*#__PURE__*/_react.default.createElement(_motion.ExitingPersistence, null, /*#__PURE__*/_react.default.createElement(_motion.SlideIn, {
+    enterFrom: increase ? 'bottom' : 'top',
+    key: value,
+    duration: animationDuration
+  }, function (motion, direction) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: motion.ref,
+      className: (0, _classnames.default)(containerStyle, motion.className, (0, _typestyle.style)({
+        position: direction === 'exiting' ? 'absolute' : undefined
+      }))
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: currentClassName,
+      key: value
+    }, label));
+  })));
+});
+exports.Counter = Counter;

package/dist/cjs/components/Reaction.js

@@ -104,10 +104,6 @@ var flashStyle = (0, _typestyle.style)({
   borderRadius: '10px',
   height: "".concat(flashHeight, "px")
 });
-var counterStyle = (0, _typestyle.style)({
-  padding: '4px 8px 4px 0',
-  lineHeight: '14px'
-});
 
 var ReactionWithoutAnalytics = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(ReactionWithoutAnalytics, _PureComponent);
@@ -134,18 +130,18 @@ var ReactionWithoutAnalytics = /*#__PURE__*/function (_PureComponent) {
         _this.props.onClick(_this.props.reaction.emojiId, event);
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMouseOver", function (event) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMouseEnter", function (event) {
       event.preventDefault();
       var _this$props2 = _this.props,
-          onMouseOver = _this$props2.onMouseOver,
+          onMouseEnter = _this$props2.onMouseEnter,
           reaction = _this$props2.reaction;
 
       if (!reaction.users || !reaction.users.length) {
         _this.hoverStart = Date.now();
       }
 
-      if (onMouseOver) {
-        onMouseOver(_this.props.reaction, event);
+      if (onMouseEnter) {
+        onMouseEnter(_this.props.reaction, event);
       }
     });
     _this.state = {};
@@ -202,7 +198,7 @@ var ReactionWithoutAnalytics = /*#__PURE__*/function (_PureComponent) {
       return /*#__PURE__*/_react.default.createElement("button", {
         className: classNames,
         onMouseUp: this.handleMouseDown,
-        onMouseOver: this.handleMouseOver
+        onMouseEnter: this.handleMouseEnter
       }, /*#__PURE__*/_react.default.createElement(_ReactionTooltip.ReactionTooltip, {
         emojiName: emojiName,
         reaction: reaction
@@ -216,7 +212,6 @@ var ReactionWithoutAnalytics = /*#__PURE__*/function (_PureComponent) {
         emojiId: emojiId,
         fitToHeight: 16
       })), /*#__PURE__*/_react.default.createElement(_Counter.Counter, {
-        className: counterStyle,
         value: reaction.count,
         highlight: reaction.reacted
       }))));
@@ -228,7 +223,7 @@ var ReactionWithoutAnalytics = /*#__PURE__*/function (_PureComponent) {
 (0, _defineProperty2.default)(ReactionWithoutAnalytics, "defaultProps", {
   flash: false,
   className: undefined,
-  onMouseOver: undefined,
+  onMouseEnter: undefined,
   flashOnMount: false
 });
 (0, _defineProperty2.default)(ReactionWithoutAnalytics, "displayName", 'Reaction');

package/dist/cjs/components/Reactions.js

@@ -101,7 +101,7 @@ var ReactionsWithoutAnalytics = /*#__PURE__*/function (_React$PureComponent) {
           return undefined;
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleReactionMouseOver", function (reaction) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleReactionMouseEnter", function (reaction) {
       if (_this.props.onReactionHover) {
         _this.props.onReactionHover(reaction.emojiId);
       }
@@ -134,7 +134,7 @@ var ReactionsWithoutAnalytics = /*#__PURE__*/function (_React$PureComponent) {
         reaction: reaction,
         emojiProvider: _this.props.emojiProvider,
         onClick: _this.props.onReactionClick,
-        onMouseOver: _this.handleReactionMouseOver,
+        onMouseEnter: _this.handleReactionMouseEnter,
         flash: _this.props.flash[reaction.emojiId]
       });
     });

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "21.0.3"
+	"version": "21.0.4"
 }

package/dist/es2019/components/Counter.js

@@ -1,18 +1,18 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { N90, B400 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import cx from 'classnames';
-import React from 'react';
-import { CSSTransition } from 'react-transition-group';
-import { keyframes, style } from 'typestyle';
-import { akHeight } from './utils';
-const animationTime = 300;
+import React, { memo } from 'react';
+import { SlideIn, ExitingPersistence, mediumDurationMs } from '@atlaskit/motion';
+import { style } from 'typestyle';
+import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
 export const countStyle = style({
-  fontSize: '11px',
+  fontSize: 11,
+  // TODO: nice to have a theme level token for fontSize
   color: token('color.text.subtlest', N90),
   overflow: 'hidden',
-  height: `${akHeight}px`,
-  transition: `width ${animationTime}ms ease-in-out`
+  position: 'relative',
+  padding: '4px 8px 4px 0',
+  lineHeight: '14px'
 });
 export const highlightStyle = style({
   color: token('color.text.brand', B400),
@@ -22,133 +22,49 @@ export const containerStyle = style({
   display: 'flex',
   flexDirection: 'column'
 });
-
-const slideAnimation = (start, end) => {
-  const animation = keyframes({
-    '0%': {
-      transform: `translateY(${start}%)`
-    },
-    '100%': {
-      transform: `translateY(${end}%)`
+export const Counter = /*#__PURE__*/memo(({
+  highlight = false,
+  limit = 100,
+  overLimitLabel = '99+',
+  className,
+  value,
+  animationDuration = mediumDurationMs
+}) => {
+  const hasReachedLimit = value => limit && value >= limit;
+
+  const getLabel = value => {
+    if (hasReachedLimit(value)) {
+      return overLimitLabel || '';
+    } else if (value === 0) {
+      return '';
+    } else {
+      return value.toString();
     }
+  };
+
+  const previousValue = usePreviousValue(value);
+  const label = getLabel(value);
+  const increase = previousValue ? previousValue < value : false;
+  const rootClassName = cx(countStyle, className);
+  const currentClassName = cx({
+    [highlightStyle]: highlight
   });
-  return `${animation} ${animationTime}ms ease-in-out`;
-};
-
-const counterAnimation = (start, end) => style({
-  animation: slideAnimation(start, end)
-});
-
-export const slideUpStyle = counterAnimation(0, -50);
-export const slideDownStyle = counterAnimation(-50, 0);
-export class Counter extends React.PureComponent {
-  constructor(props) {
-    super(props);
-
-    _defineProperty(this, "getLabel", value => {
-      const {
-        overLimitLabel
-      } = this.props;
-
-      if (this.hasReachedLimit(value)) {
-        return overLimitLabel || '';
-      } else if (value === 0) {
-        return '';
-      } else {
-        return value.toString();
-      }
-    });
-
-    _defineProperty(this, "hasReachedLimit", value => this.props.limit && value >= this.props.limit);
-
-    _defineProperty(this, "renderPrevious", () => {
-      const {
-        previous
-      } = this.state;
-
-      if (previous !== undefined) {
-        const className = cx({
-          [highlightStyle]: previous.highlight
-        });
-        return /*#__PURE__*/React.createElement("div", {
-          key: previous.value,
-          className: className
-        }, this.getLabel(previous.value));
-      }
-
-      return null;
-    });
-
-    _defineProperty(this, "clearPrevious", () => {
-      this.setState({
-        previous: undefined
-      });
-    });
-
-    this.state = {
-      previous: undefined
-    };
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const {
-      value,
-      highlight
-    } = this.props;
-
-    if (value !== undefined && value !== nextProps.value && (!this.hasReachedLimit(value) || !this.hasReachedLimit(nextProps.value))) {
-      this.setState({
-        previous: {
-          value,
-          highlight
-        }
-      });
+  return /*#__PURE__*/React.createElement("div", {
+    className: rootClassName,
+    style: {
+      width: label.length * 7
     }
-  }
-
-  render() {
-    const {
-      value,
-      highlight,
-      className: classNameProp
-    } = this.props;
-    const {
-      previous
-    } = this.state;
-    const label = this.getLabel(value);
-    const increase = previous !== undefined && previous.value < value;
-    const decrease = previous !== undefined && previous.value > value;
-    const enterClass = increase ? slideUpStyle : decrease ? slideDownStyle : undefined;
-    const className = cx(countStyle, classNameProp);
-    const currentClassName = cx({
-      [highlightStyle]: highlight
-    }); // WS-2525 With the pill UI updates, width of * 10 was too much so dropped down to * 7
-
-    return /*#__PURE__*/React.createElement("div", {
-      className: className,
-      style: {
-        width: label.length * 7
-      }
-    }, /*#__PURE__*/React.createElement(CSSTransition, {
-      classNames: {
-        enter: enterClass
-      },
-      timeout: animationTime,
-      in: increase || decrease,
-      onEntered: this.clearPrevious
-    }, /*#__PURE__*/React.createElement("div", {
-      className: containerStyle
-    }, increase ? this.renderPrevious() : null, /*#__PURE__*/React.createElement("div", {
-      className: currentClassName,
-      key: value
-    }, label), decrease ? this.renderPrevious() : null)));
-  }
-
-}
-
-_defineProperty(Counter, "defaultProps", {
-  highlight: false,
-  limit: 100,
-  overLimitLabel: '99+',
-  className: undefined
+  }, /*#__PURE__*/React.createElement(ExitingPersistence, null, /*#__PURE__*/React.createElement(SlideIn, {
+    enterFrom: increase ? 'bottom' : 'top',
+    key: value,
+    duration: animationDuration
+  }, (motion, direction) => /*#__PURE__*/React.createElement("div", {
+    ref: motion.ref,
+    className: cx(containerStyle, motion.className, style({
+      position: direction === 'exiting' ? 'absolute' : undefined
+    }))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: currentClassName,
+    key: value
+  }, label)))));
 });

package/dist/es2019/components/Reaction.js

@@ -62,10 +62,6 @@ const flashStyle = style({
   borderRadius: '10px',
   height: `${flashHeight}px`
 });
-const counterStyle = style({
-  padding: '4px 8px 4px 0',
-  lineHeight: '14px'
-});
 
 class ReactionWithoutAnalytics extends PureComponent {
   constructor(props) {
@@ -90,10 +86,10 @@ class ReactionWithoutAnalytics extends PureComponent {
       }
     });
 
-    _defineProperty(this, "handleMouseOver", event => {
+    _defineProperty(this, "handleMouseEnter", event => {
       event.preventDefault();
       const {
-        onMouseOver,
+        onMouseEnter,
         reaction
       } = this.props;
 
@@ -101,8 +97,8 @@ class ReactionWithoutAnalytics extends PureComponent {
         this.hoverStart = Date.now();
       }
 
-      if (onMouseOver) {
-        onMouseOver(this.props.reaction, event);
+      if (onMouseEnter) {
+        onMouseEnter(this.props.reaction, event);
       }
     });
 
@@ -155,7 +151,7 @@ class ReactionWithoutAnalytics extends PureComponent {
     return /*#__PURE__*/React.createElement("button", {
       className: classNames,
       onMouseUp: this.handleMouseDown,
-      onMouseOver: this.handleMouseOver
+      onMouseEnter: this.handleMouseEnter
     }, /*#__PURE__*/React.createElement(ReactionTooltip, {
       emojiName: emojiName,
       reaction: reaction
@@ -169,7 +165,6 @@ class ReactionWithoutAnalytics extends PureComponent {
       emojiId: emojiId,
       fitToHeight: 16
     })), /*#__PURE__*/React.createElement(Counter, {
-      className: counterStyle,
       value: reaction.count,
       highlight: reaction.reacted
     }))));
@@ -180,7 +175,7 @@ class ReactionWithoutAnalytics extends PureComponent {
 _defineProperty(ReactionWithoutAnalytics, "defaultProps", {
   flash: false,
   className: undefined,
-  onMouseOver: undefined,
+  onMouseEnter: undefined,
   flashOnMount: false
 });
 

package/dist/es2019/components/Reactions.js

@@ -60,7 +60,7 @@ export class ReactionsWithoutAnalytics extends React.PureComponent {
       }
     });
 
-    _defineProperty(this, "handleReactionMouseOver", reaction => {
+    _defineProperty(this, "handleReactionMouseEnter", reaction => {
       if (this.props.onReactionHover) {
         this.props.onReactionHover(reaction.emojiId);
       }
@@ -95,7 +95,7 @@ export class ReactionsWithoutAnalytics extends React.PureComponent {
       reaction: reaction,
       emojiProvider: this.props.emojiProvider,
       onClick: this.props.onReactionClick,
-      onMouseOver: this.handleReactionMouseOver,
+      onMouseEnter: this.handleReactionMouseEnter,
       flash: this.props.flash[reaction.emojiId]
     }));
 

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "21.0.3"
+	"version": "21.0.4"
 }

package/dist/esm/components/Counter.js

@@ -1,29 +1,19 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 import { N90, B400 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import cx from 'classnames';
-import React from 'react';
-import { CSSTransition } from 'react-transition-group';
-import { keyframes, style } from 'typestyle';
-import { akHeight } from './utils';
-var animationTime = 300;
+import React, { memo } from 'react';
+import { SlideIn, ExitingPersistence, mediumDurationMs } from '@atlaskit/motion';
+import { style } from 'typestyle';
+import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
 export var countStyle = style({
-  fontSize: '11px',
+  fontSize: 11,
+  // TODO: nice to have a theme level token for fontSize
   color: token('color.text.subtlest', N90),
   overflow: 'hidden',
-  height: "".concat(akHeight, "px"),
-  transition: "width ".concat(animationTime, "ms ease-in-out")
+  position: 'relative',
+  padding: '4px 8px 4px 0',
+  lineHeight: '14px'
 });
 export var highlightStyle = style({
   color: token('color.text.brand', B400),
@@ -33,139 +23,55 @@ export var containerStyle = style({
   display: 'flex',
   flexDirection: 'column'
 });
-
-var slideAnimation = function slideAnimation(start, end) {
-  var animation = keyframes({
-    '0%': {
-      transform: "translateY(".concat(start, "%)")
-    },
-    '100%': {
-      transform: "translateY(".concat(end, "%)")
-    }
-  });
-  return "".concat(animation, " ").concat(animationTime, "ms ease-in-out");
-};
-
-var counterAnimation = function counterAnimation(start, end) {
-  return style({
-    animation: slideAnimation(start, end)
-  });
-};
-
-export var slideUpStyle = counterAnimation(0, -50);
-export var slideDownStyle = counterAnimation(-50, 0);
-export var Counter = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(Counter, _React$PureComponent);
-
-  var _super = _createSuper(Counter);
-
-  function Counter(props) {
-    var _this;
-
-    _classCallCheck(this, Counter);
-
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "getLabel", function (value) {
-      var overLimitLabel = _this.props.overLimitLabel;
-
-      if (_this.hasReachedLimit(value)) {
-        return overLimitLabel || '';
-      } else if (value === 0) {
-        return '';
-      } else {
-        return value.toString();
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "hasReachedLimit", function (value) {
-      return _this.props.limit && value >= _this.props.limit;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "renderPrevious", function () {
-      var previous = _this.state.previous;
-
-      if (previous !== undefined) {
-        var className = cx(_defineProperty({}, highlightStyle, previous.highlight));
-        return /*#__PURE__*/React.createElement("div", {
-          key: previous.value,
-          className: className
-        }, _this.getLabel(previous.value));
-      }
-
-      return null;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "clearPrevious", function () {
-      _this.setState({
-        previous: undefined
-      });
-    });
-
-    _this.state = {
-      previous: undefined
-    };
-    return _this;
-  }
-
-  _createClass(Counter, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var _this$props = this.props,
-          value = _this$props.value,
-          highlight = _this$props.highlight;
-
-      if (value !== undefined && value !== nextProps.value && (!this.hasReachedLimit(value) || !this.hasReachedLimit(nextProps.value))) {
-        this.setState({
-          previous: {
-            value: value,
-            highlight: highlight
-          }
-        });
-      }
+export var Counter = /*#__PURE__*/memo(function (_ref) {
+  var _ref$highlight = _ref.highlight,
+      highlight = _ref$highlight === void 0 ? false : _ref$highlight,
+      _ref$limit = _ref.limit,
+      limit = _ref$limit === void 0 ? 100 : _ref$limit,
+      _ref$overLimitLabel = _ref.overLimitLabel,
+      overLimitLabel = _ref$overLimitLabel === void 0 ? '99+' : _ref$overLimitLabel,
+      className = _ref.className,
+      value = _ref.value,
+      _ref$animationDuratio = _ref.animationDuration,
+      animationDuration = _ref$animationDuratio === void 0 ? mediumDurationMs : _ref$animationDuratio;
+
+  var hasReachedLimit = function hasReachedLimit(value) {
+    return limit && value >= limit;
+  };
+
+  var getLabel = function getLabel(value) {
+    if (hasReachedLimit(value)) {
+      return overLimitLabel || '';
+    } else if (value === 0) {
+      return '';
+    } else {
+      return value.toString();
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          value = _this$props2.value,
-          highlight = _this$props2.highlight,
-          classNameProp = _this$props2.className;
-      var previous = this.state.previous;
-      var label = this.getLabel(value);
-      var increase = previous !== undefined && previous.value < value;
-      var decrease = previous !== undefined && previous.value > value;
-      var enterClass = increase ? slideUpStyle : decrease ? slideDownStyle : undefined;
-      var className = cx(countStyle, classNameProp);
-      var currentClassName = cx(_defineProperty({}, highlightStyle, highlight)); // WS-2525 With the pill UI updates, width of * 10 was too much so dropped down to * 7
-
-      return /*#__PURE__*/React.createElement("div", {
-        className: className,
-        style: {
-          width: label.length * 7
-        }
-      }, /*#__PURE__*/React.createElement(CSSTransition, {
-        classNames: {
-          enter: enterClass
-        },
-        timeout: animationTime,
-        in: increase || decrease,
-        onEntered: this.clearPrevious
-      }, /*#__PURE__*/React.createElement("div", {
-        className: containerStyle
-      }, increase ? this.renderPrevious() : null, /*#__PURE__*/React.createElement("div", {
-        className: currentClassName,
-        key: value
-      }, label), decrease ? this.renderPrevious() : null)));
+  };
+
+  var previousValue = usePreviousValue(value);
+  var label = getLabel(value);
+  var increase = previousValue ? previousValue < value : false;
+  var rootClassName = cx(countStyle, className);
+  var currentClassName = cx(_defineProperty({}, highlightStyle, highlight));
+  return /*#__PURE__*/React.createElement("div", {
+    className: rootClassName,
+    style: {
+      width: label.length * 7
     }
-  }]);
-
-  return Counter;
-}(React.PureComponent);
-
-_defineProperty(Counter, "defaultProps", {
-  highlight: false,
-  limit: 100,
-  overLimitLabel: '99+',
-  className: undefined
+  }, /*#__PURE__*/React.createElement(ExitingPersistence, null, /*#__PURE__*/React.createElement(SlideIn, {
+    enterFrom: increase ? 'bottom' : 'top',
+    key: value,
+    duration: animationDuration
+  }, function (motion, direction) {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: motion.ref,
+      className: cx(containerStyle, motion.className, style({
+        position: direction === 'exiting' ? 'absolute' : undefined
+      }))
+    }, /*#__PURE__*/React.createElement("div", {
+      className: currentClassName,
+      key: value
+    }, label));
+  })));
 });

package/dist/esm/components/Reaction.js

@@ -73,10 +73,6 @@ var flashStyle = style({
   borderRadius: '10px',
   height: "".concat(flashHeight, "px")
 });
-var counterStyle = style({
-  padding: '4px 8px 4px 0',
-  lineHeight: '14px'
-});
 
 var ReactionWithoutAnalytics = /*#__PURE__*/function (_PureComponent) {
   _inherits(ReactionWithoutAnalytics, _PureComponent);
@@ -107,18 +103,18 @@ var ReactionWithoutAnalytics = /*#__PURE__*/function (_PureComponent) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleMouseOver", function (event) {
+    _defineProperty(_assertThisInitialized(_this), "handleMouseEnter", function (event) {
       event.preventDefault();
       var _this$props2 = _this.props,
-          onMouseOver = _this$props2.onMouseOver,
+          onMouseEnter = _this$props2.onMouseEnter,
           reaction = _this$props2.reaction;
 
       if (!reaction.users || !reaction.users.length) {
         _this.hoverStart = Date.now();
       }
 
-      if (onMouseOver) {
-        onMouseOver(_this.props.reaction, event);
+      if (onMouseEnter) {
+        onMouseEnter(_this.props.reaction, event);
       }
     });
 
@@ -176,7 +172,7 @@ var ReactionWithoutAnalytics = /*#__PURE__*/function (_PureComponent) {
       return /*#__PURE__*/React.createElement("button", {
         className: classNames,
         onMouseUp: this.handleMouseDown,
-        onMouseOver: this.handleMouseOver
+        onMouseEnter: this.handleMouseEnter
       }, /*#__PURE__*/React.createElement(ReactionTooltip, {
         emojiName: emojiName,
         reaction: reaction
@@ -190,7 +186,6 @@ var ReactionWithoutAnalytics = /*#__PURE__*/function (_PureComponent) {
         emojiId: emojiId,
         fitToHeight: 16
       })), /*#__PURE__*/React.createElement(Counter, {
-        className: counterStyle,
         value: reaction.count,
         highlight: reaction.reacted
       }))));
@@ -203,7 +198,7 @@ var ReactionWithoutAnalytics = /*#__PURE__*/function (_PureComponent) {
 _defineProperty(ReactionWithoutAnalytics, "defaultProps", {
   flash: false,
   className: undefined,
-  onMouseOver: undefined,
+  onMouseEnter: undefined,
   flashOnMount: false
 });
 

package/dist/esm/components/Reactions.js

@@ -80,7 +80,7 @@ export var ReactionsWithoutAnalytics = /*#__PURE__*/function (_React$PureCompone
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleReactionMouseOver", function (reaction) {
+    _defineProperty(_assertThisInitialized(_this), "handleReactionMouseEnter", function (reaction) {
       if (_this.props.onReactionHover) {
         _this.props.onReactionHover(reaction.emojiId);
       }
@@ -118,7 +118,7 @@ export var ReactionsWithoutAnalytics = /*#__PURE__*/function (_React$PureCompone
         reaction: reaction,
         emojiProvider: _this.props.emojiProvider,
         onClick: _this.props.onReactionClick,
-        onMouseOver: _this.handleReactionMouseOver,
+        onMouseEnter: _this.handleReactionMouseEnter,
         flash: _this.props.flash[reaction.emojiId]
       });
     });

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "21.0.3"
+	"version": "21.0.4"
 }

package/dist/types/components/Counter.d.ts

@@ -2,33 +2,12 @@ import React from 'react';
 export declare const countStyle: string;
 export declare const highlightStyle: string;
 export declare const containerStyle: string;
-export declare const slideUpStyle: string;
-export declare const slideDownStyle: string;
 export declare type Props = {
     value: number;
     highlight?: boolean;
     limit?: number;
     overLimitLabel?: string;
     className?: string;
+    animationDuration?: number;
 };
-export declare type State = {
-    previous?: {
-        value: number;
-        highlight?: boolean;
-    };
-};
-export declare class Counter extends React.PureComponent<Props, State> {
-    static defaultProps: {
-        highlight: boolean;
-        limit: number;
-        overLimitLabel: string;
-        className: undefined;
-    };
-    constructor(props: Props);
-    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
-    private getLabel;
-    private hasReachedLimit;
-    private renderPrevious;
-    private clearPrevious;
-    render(): JSX.Element;
-}
+export declare const Counter: React.FC<Props>;

package/dist/types/components/Reaction.d.ts

@@ -11,15 +11,15 @@ export interface Props {
     emojiProvider: Promise<EmojiProvider>;
     onClick: ReactionOnClick;
     className?: string;
-    onMouseOver?: (reaction: ReactionSummary, event?: SyntheticEvent<any>) => void;
+    onMouseEnter?: (reaction: ReactionSummary, event?: SyntheticEvent<any>) => void;
     flash?: boolean;
 }
 export interface State {
     emojiName?: string;
 }
-export declare const Reaction: React.ForwardRefExoticComponent<Pick<Pick<Props & WithAnalyticsEventsProps, "className" | "reaction" | "emojiProvider" | "onClick" | "onMouseOver" | "flash">, "reaction" | "emojiProvider" | "onClick"> & Partial<Pick<Pick<Props & WithAnalyticsEventsProps, "className" | "reaction" | "emojiProvider" | "onClick" | "onMouseOver" | "flash">, "className" | "onMouseOver" | "flash">> & Partial<Pick<{
+export declare const Reaction: React.ForwardRefExoticComponent<Pick<Pick<Props & WithAnalyticsEventsProps, "className" | "reaction" | "emojiProvider" | "onClick" | "onMouseEnter" | "flash">, "reaction" | "emojiProvider" | "onClick"> & Partial<Pick<Pick<Props & WithAnalyticsEventsProps, "className" | "reaction" | "emojiProvider" | "onClick" | "onMouseEnter" | "flash">, "className" | "onMouseEnter" | "flash">> & Partial<Pick<{
     flash: boolean;
     className: undefined;
-    onMouseOver: undefined;
+    onMouseEnter: undefined;
     flashOnMount: boolean;
 }, "flashOnMount">> & React.RefAttributes<any>>;

package/dist/types/components/Reactions.d.ts

@@ -32,7 +32,7 @@ export declare class ReactionsWithoutAnalytics extends React.PureComponent<Props
     componentDidUpdate: () => void;
     private isDisabled;
     private getTooltip;
-    private handleReactionMouseOver;
+    private handleReactionMouseEnter;
     private handlePickerOpen;
     private handleOnCancel;
     private handleOnMore;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/reactions",
-  "version": "21.0.3",
+  "version": "21.0.4",
   "description": "Reactions component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -26,11 +26,13 @@
   },
   "dependencies": {
     "@atlaskit/analytics-gas-types": "^5.0.0",
-    "@atlaskit/analytics-namespaced-context": "^6.3.0",
+    "@atlaskit/analytics-namespaced-context": "^6.4.0",
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/button": "^16.0.0",
+    "@atlaskit/ds-lib": "^1.4.0",
     "@atlaskit/emoji": "^64.1.0",
     "@atlaskit/icon": "^21.10.0",
+    "@atlaskit/motion": "^1.0.3",
     "@atlaskit/popper": "^5.0.0",
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tokens": "^0.6.0",
@@ -38,7 +40,6 @@
     "@atlaskit/util-service-support": "^6.1.0",
     "@babel/runtime": "^7.0.0",
     "classnames": "^2.2.5",
-    "react-transition-group": "^4.4.1",
     "typestyle": "^1.4.4"
   },
   "peerDependencies": {
@@ -49,7 +50,7 @@
   "devDependencies": {
     "@atlaskit/analytics-viewer": "^0.4.5",
     "@atlaskit/docs": "^9.0.0",
-    "@atlaskit/editor-test-helpers": "^16.0.0",
+    "@atlaskit/editor-test-helpers": "^16.1.0",
     "@atlaskit/elements-test-helpers": "^0.7.0",
     "@atlaskit/tooltip": "^17.5.0",
     "@atlaskit/util-data-test": "^17.2.0",