@atlaskit/reactions 21.0.0 → 21.0.4

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @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
+
+- Updated dependencies
+
+## 21.0.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 21.0.1
+
+### Patch Changes
+
+- [`b44aa6749c0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b44aa6749c0) - [ux] Changed the token usage for emoji name to make it visible in the reaction tooltip.
+
 ## 21.0.0
 
 ### Major Changes

package/dist/cjs/analytics/index.js

@@ -15,9 +15,9 @@ var _analyticsGasTypes = require("@atlaskit/analytics-gas-types");
 
 var _version = require("../version.json");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var createAndFireEventInElementsChannel = (0, _analyticsNext.createAndFireEvent)('fabric-elements');
 exports.createAndFireEventInElementsChannel = createAndFireEventInElementsChannel;

package/dist/cjs/client/MockReactionsClient.js

@@ -17,9 +17,9 @@ var _defineProperty3 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _Selector = require("../components/Selector");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty3.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty3.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var containerAri = 'ari:cloud:owner:demo-cloud-id:container/1';
 exports.containerAri = containerAri;

package/dist/cjs/client/ReactionServiceClient.js

@@ -15,9 +15,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _utilServiceSupport = require("@atlaskit/util-service-support");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var ReactionServiceClient = /*#__PURE__*/function () {
   function ReactionServiceClient(baseUrl, sessionToken) {

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,29 +17,30 @@ 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',
-  color: (0, _tokens.token)('color.text.lowEmphasis', _colors.N90),
+  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)({
-  color: (0, _tokens.token)('color.text.selected', _colors.B400),
+  color: (0, _tokens.token)('color.text.brand', _colors.B400),
   fontWeight: 600
 });
 exports.highlightStyle = highlightStyle;
@@ -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/FlashAnimation.js

@@ -29,16 +29,16 @@ var flashAnimation = (0, _typestyle.keyframes)({
     backgroundColor: 'transparent'
   },
   '20%': {
-    backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B75),
-    borderColor: (0, _tokens.token)('color.iconBorder.brand', _colors.B300)
+    backgroundColor: (0, _tokens.token)('color.background.brand.pressed', _colors.B75),
+    borderColor: (0, _tokens.token)('color.icon.brand', _colors.B300)
   },
   '75%': {
-    backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B75),
-    borderColor: (0, _tokens.token)('color.iconBorder.brand', _colors.B300)
+    backgroundColor: (0, _tokens.token)('color.background.brand.pressed', _colors.B75),
+    borderColor: (0, _tokens.token)('color.icon.brand', _colors.B300)
   },
   '100%': {
-    backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B75),
-    borderColor: (0, _tokens.token)('color.iconBorder.brand', _colors.B300)
+    backgroundColor: (0, _tokens.token)('color.background.brand.pressed', _colors.B75),
+    borderColor: (0, _tokens.token)('color.icon.brand', _colors.B300)
   }
 });
 var flashStyle = (0, _typestyle.style)({

package/dist/cjs/components/Reaction.js

@@ -73,26 +73,26 @@ var reactionStyle = (0, _typestyle.style)({
   minWidth: '36px',
   height: "".concat(_utils.akHeight, "px"),
   background: 'transparent',
-  border: "1px solid ".concat((0, _tokens.token)('color.border.neutral', _colors.N40)),
+  border: "1px solid ".concat((0, _tokens.token)('color.border', _colors.N40)),
   boxSizing: 'border-box',
   borderRadius: '20px',
-  color: "".concat((0, _tokens.token)('color.text.mediumEmphasis', _colors.N400)),
+  color: "".concat((0, _tokens.token)('color.text.subtle', _colors.N400)),
   cursor: 'pointer',
   margin: 0,
   padding: 0,
   transition: '200ms ease-in-out',
   $nest: {
     '&:hover': {
-      background: "".concat((0, _tokens.token)('color.background.transparentNeutral.hover', _colors.N20))
+      background: "".concat((0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N20))
     }
   }
 });
 var reactedStyle = (0, _typestyle.style)({
-  backgroundColor: (0, _tokens.token)('color.background.selected.resting', _colors.B50),
-  borderColor: (0, _tokens.token)('color.iconBorder.brand', _colors.B300),
+  backgroundColor: (0, _tokens.token)('color.background.brand', _colors.B50),
+  borderColor: (0, _tokens.token)('color.icon.brand', _colors.B300),
   $nest: {
     '&:hover': {
-      background: "".concat((0, _tokens.token)('color.background.selected.hover', _colors.B75))
+      background: "".concat((0, _tokens.token)('color.background.brand.hovered', _colors.B75))
     }
   }
 });
@@ -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/ReactionPicker.js

@@ -49,9 +49,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 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); }; }
 
@@ -70,9 +70,9 @@ var contentStyle = (0, _typestyle.style)({
   display: 'flex'
 });
 var popupStyle = (0, _typestyle.style)({
-  background: (0, _tokens.token)('color.background.overlay', _colors.N0),
+  background: (0, _tokens.token)('elevation.surface.overlay', _colors.N0),
   borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
-  boxShadow: (0, _tokens.token)('shadow.overlay', "0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A)),
+  boxShadow: (0, _tokens.token)('elevation.shadow.overlay', "0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A)),
   $nest: {
     '&> div': {
       boxShadow: undefined

package/dist/cjs/components/ReactionTooltip.js

@@ -46,11 +46,11 @@ var tooltipStyle = (0, _typestyle.style)({
 });
 var emojiNameStyle = (0, _typestyle.style)({
   textTransform: 'capitalize',
-  color: (0, _tokens.token)('color.text.mediumEmphasis', _colors.N90),
+  color: (0, _tokens.token)('color.text.inverse', _colors.N90),
   fontWeight: 600
 });
 var footerStyle = (0, _typestyle.style)({
-  color: (0, _tokens.token)('color.text.mediumEmphasis', _colors.N90),
+  color: (0, _tokens.token)('color.text.inverse', _colors.N90),
   fontWeight: 300
 });
 var TOOLTIP_USERS_LIMIT = 5;

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/components/ShowMore.js

@@ -59,12 +59,12 @@ var moreButtonStyle = (0, _typestyle.style)({
   verticalAlign: 'top',
   $nest: {
     '&:hover': {
-      backgroundColor: (0, _tokens.token)('color.background.transparentNeutral.hover', _colors.N30A)
+      backgroundColor: (0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N30A)
     }
   }
 });
 var separatorStyle = (0, _typestyle.style)({
-  backgroundColor: (0, _tokens.token)('color.border.neutral', _colors.N30A),
+  backgroundColor: (0, _tokens.token)('color.border', _colors.N30A),
   margin: '8px 8px 8px 4px',
   width: '1px',
   height: '60%',

package/dist/cjs/reaction-store/ReactionsStore.js

@@ -27,9 +27,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var MemoryReactionsStore = /*#__PURE__*/function () {
   function MemoryReactionsStore(client) {

package/dist/cjs/reaction-store/utils.js

@@ -13,9 +13,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _ReactionStatus = require("../types/ReactionStatus");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var compareEmojiId = function compareEmojiId(l, r) {
   return l.localeCompare(r);

package/dist/cjs/version.json

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