@atlaskit/reactions 21.0.3 → 21.1.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @atlaskit/reactions
 
+## 21.1.0
+
+### Minor Changes
+
+- [`f0c986fe03a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f0c986fe03a) - Migrated styles to emotion and removed typestyle dependency from atlassian-frontend dependencies.
+
+### Patch Changes
+
+- [`876cae9c606`](https://bitbucket.org/atlassian/atlassian-frontend/commits/876cae9c606) - Changed selector first-child to first-of-type to better support SSR
+- [`62edf20ab1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/62edf20ab1e) - Migrates all usage of brand tokens to either selected or information tokens. This change is purely for semantic reasons, there are no visual or behavioural changes.
+- Updated dependencies
+
+## 21.0.5
+
+### Patch Changes
+
+- [`63f11b8ade4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/63f11b8ade4) - support proxy via webpack config cli
+- Updated dependencies
+
+## 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/README.md

@@ -0,0 +1,3 @@
+# Reactions
+
+Documentation can be found on: https://product-fabric.atlassian.net/wiki/spaces/TWPCP/pages/3178103484/Reactions+README.

package/dist/cjs/components/Counter.js

@@ -2,192 +2,103 @@
 
 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.counterTestId = exports.countStyle = exports.containerStyle = exports.Counter = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _core = require("@emotion/core");
 
 var _colors = require("@atlaskit/theme/colors");
 
 var _tokens = require("@atlaskit/tokens");
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _react = _interopRequireDefault(require("react"));
+var _motion = require("@atlaskit/motion");
 
-var _reactTransitionGroup = require("react-transition-group");
+var _usePreviousValue = _interopRequireDefault(require("@atlaskit/ds-lib/use-previous-value"));
 
-var _typestyle = require("typestyle");
+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); }
 
-var _utils = require("./utils");
+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 _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 _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; } }
-
-var animationTime = 300;
-var countStyle = (0, _typestyle.style)({
-  fontSize: '11px',
+/** @jsx jsx */
+var counterTestId = 'counter-container';
+exports.counterTestId = counterTestId;
+var countStyle = (0, _core.css)({
+  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.brand', _colors.B400),
+var highlightStyle = (0, _core.css)({
+  color: (0, _tokens.token)('color.text.selected', _colors.B400),
   fontWeight: 600
 });
 exports.highlightStyle = highlightStyle;
-var containerStyle = (0, _typestyle.style)({
+var containerStyle = (0, _core.css)({
   display: 'flex',
   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
-          }
-        });
-      }
-    }
-  }, {
-    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)));
+  };
+
+  var previousValue = (0, _usePreviousValue.default)(value);
+  var label = getLabel(value);
+  var increase = previousValue ? previousValue < value : false;
+  return (0, _core.jsx)("div", {
+    className: className,
+    css: countStyle,
+    style: {
+      width: label.length * 7
     }
-  }]);
-  return Counter;
-}(_react.default.PureComponent);
-
-exports.Counter = Counter;
-(0, _defineProperty2.default)(Counter, "defaultProps", {
-  highlight: false,
-  limit: 100,
-  overLimitLabel: '99+',
-  className: undefined
-});
+  }, (0, _core.jsx)(_motion.ExitingPersistence, null, (0, _core.jsx)(_motion.SlideIn, {
+    enterFrom: increase ? 'bottom' : 'top',
+    key: value,
+    duration: animationDuration
+  }, function (motion, direction) {
+    return (0, _core.jsx)("div", {
+      ref: motion.ref,
+      css: [containerStyle, (0, _core.css)({
+        position: direction === 'exiting' ? 'absolute' : undefined
+      })],
+      className: motion.className,
+      "data-testid": counterTestId
+    }, (0, _core.jsx)("div", {
+      css: highlight && highlightStyle,
+      key: value
+    }, label));
+  })));
+});
+exports.Counter = Counter;

package/dist/cjs/components/EmojiButton.js

@@ -23,12 +23,12 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _core = require("@emotion/core");
+
 var _element = require("@atlaskit/emoji/element");
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _typestyle = require("typestyle");
-
 var _utils = require("./utils");
 
 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); }
@@ -39,7 +39,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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; } }
 
-var emojiButtonStyle = (0, _typestyle.style)({
+var emojiButtonStyle = (0, _core.css)({
   outline: 'none',
   display: 'flex',
   backgroundColor: 'transparent',
@@ -48,11 +48,9 @@ var emojiButtonStyle = (0, _typestyle.style)({
   cursor: 'pointer',
   margin: '0',
   padding: '10px 8px',
-  $nest: {
-    '&:hover > span': {
-      transition: 'transform cubic-bezier(0.23, 1, 0.32, 1) 200ms',
-      transform: 'scale(1.33)'
-    }
+  '&:hover > span': {
+    transition: 'transform cubic-bezier(0.23, 1, 0.32, 1) 200ms',
+    transform: 'scale(1.33)'
   }
 });
 
@@ -87,10 +85,10 @@ var EmojiButton = /*#__PURE__*/function (_PureComponent) {
       var _this$props = this.props,
           emojiId = _this$props.emojiId,
           emojiProvider = _this$props.emojiProvider;
-      return /*#__PURE__*/_react.default.createElement("button", {
+      return (0, _core.jsx)("button", {
         onMouseUp: this.handleMouseDown,
-        className: emojiButtonStyle
-      }, /*#__PURE__*/_react.default.createElement(_element.ResourcedEmoji, {
+        css: emojiButtonStyle
+      }, (0, _core.jsx)(_element.ResourcedEmoji, {
         emojiProvider: emojiProvider,
         emojiId: emojiId
       }));

package/dist/cjs/components/FlashAnimation.js

@@ -5,43 +5,43 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.flashStyle = exports.FlashAnimation = void 0;
+exports.flashStyle = exports.flashAnimationTestId = exports.flashAnimation = exports.FlashAnimation = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _core = require("@emotion/core");
 
 var _colors = require("@atlaskit/theme/colors");
 
 var _tokens = require("@atlaskit/tokens");
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _react = _interopRequireDefault(require("react"));
 
-var _typestyle = require("typestyle");
-
-var containerStyle = (0, _typestyle.style)({
+/** @jsx jsx */
+var flashAnimationTestId = 'flash-animation';
+exports.flashAnimationTestId = flashAnimationTestId;
+var containerStyle = (0, _core.css)({
   width: '100%',
   height: '100%'
 });
 var flashTime = 700;
-var flashAnimation = (0, _typestyle.keyframes)({
+var flashAnimation = (0, _core.keyframes)({
   '0%': {
     backgroundColor: 'transparent'
   },
   '20%': {
-    backgroundColor: (0, _tokens.token)('color.background.brand.pressed', _colors.B75),
-    borderColor: (0, _tokens.token)('color.icon.brand', _colors.B300)
+    backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B75),
+    borderColor: (0, _tokens.token)('color.border.selected', _colors.B300)
   },
   '75%': {
-    backgroundColor: (0, _tokens.token)('color.background.brand.pressed', _colors.B75),
-    borderColor: (0, _tokens.token)('color.icon.brand', _colors.B300)
+    backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B75),
+    borderColor: (0, _tokens.token)('color.border.selected', _colors.B300)
   },
   '100%': {
-    backgroundColor: (0, _tokens.token)('color.background.brand.pressed', _colors.B75),
-    borderColor: (0, _tokens.token)('color.icon.brand', _colors.B300)
+    backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B75),
+    borderColor: (0, _tokens.token)('color.border.selected', _colors.B300)
   }
 });
-var flashStyle = (0, _typestyle.style)({
+exports.flashAnimation = flashAnimation;
+var flashStyle = (0, _core.css)({
   animation: "".concat(flashAnimation, " ").concat(flashTime, "ms ease-in-out")
 });
 /**
@@ -51,8 +51,10 @@ var flashStyle = (0, _typestyle.style)({
 exports.flashStyle = flashStyle;
 
 var FlashAnimation = function FlashAnimation(props) {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(containerStyle, props.className, (0, _defineProperty2.default)({}, flashStyle, props.flash))
+  return (0, _core.jsx)("div", {
+    className: props.className,
+    css: [containerStyle, props.flash && flashStyle],
+    "data-testid": flashAnimationTestId
   }, props.children);
 };
 

package/dist/cjs/components/Reaction.js

@@ -23,6 +23,8 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _core = require("@emotion/core");
+
 var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _element = require("@atlaskit/emoji/element");
@@ -31,12 +33,8 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _tokens = require("@atlaskit/tokens");
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _react = _interopRequireWildcard(require("react"));
 
-var _typestyle = require("typestyle");
-
 var _analytics = require("../analytics");
 
 var _Counter = require("./Counter");
@@ -60,12 +58,12 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
  * Padding and line height are set within the child components
  * of FlashAnimation b/c it otherwise throws off the flash styling
  */
-var emojiStyle = (0, _typestyle.style)({
+var emojiStyle = (0, _core.css)({
   transformOrigin: 'center center 0',
   lineHeight: '12px',
   padding: '4px 4px 4px 8px'
 });
-var reactionStyle = (0, _typestyle.style)({
+var reactionStyle = (0, _core.css)({
   outline: 'none',
   display: 'flex',
   flexDirection: 'row',
@@ -81,33 +79,25 @@ var reactionStyle = (0, _typestyle.style)({
   margin: 0,
   padding: 0,
   transition: '200ms ease-in-out',
-  $nest: {
-    '&:hover': {
-      background: "".concat((0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N20))
-    }
+  '&:hover': {
+    background: "".concat((0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N20))
   }
 });
-var reactedStyle = (0, _typestyle.style)({
-  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.brand.hovered', _colors.B75))
-    }
+var reactedStyle = (0, _core.css)({
+  backgroundColor: (0, _tokens.token)('color.background.selected', _colors.B50),
+  borderColor: (0, _tokens.token)('color.border.selected', _colors.B300),
+  '&:hover': {
+    background: "".concat((0, _tokens.token)('color.background.selected.hovered', _colors.B75))
   }
 });
 var flashHeight = _utils.akHeight - 2; // height without the 1px border
 
-var flashStyle = (0, _typestyle.style)({
+var flashStyle = (0, _core.css)({
   display: 'flex',
   flexDirection: 'row',
   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 +124,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 = {};
@@ -194,29 +184,28 @@ var ReactionWithoutAnalytics = /*#__PURE__*/function (_PureComponent) {
           classNameProp = _this$props3.className,
           flash = _this$props3.flash;
       var emojiName = this.state.emojiName;
-      var classNames = (0, _classnames.default)(reactionStyle, classNameProp, (0, _defineProperty2.default)({}, reactedStyle, reaction.reacted));
       var emojiId = {
         id: reaction.emojiId,
         shortName: ''
       };
-      return /*#__PURE__*/_react.default.createElement("button", {
-        className: classNames,
+      return (0, _core.jsx)("button", {
+        className: classNameProp,
+        css: [reactionStyle, reaction.reacted && reactedStyle],
         onMouseUp: this.handleMouseDown,
-        onMouseOver: this.handleMouseOver
-      }, /*#__PURE__*/_react.default.createElement(_ReactionTooltip.ReactionTooltip, {
+        onMouseEnter: this.handleMouseEnter
+      }, (0, _core.jsx)(_ReactionTooltip.ReactionTooltip, {
         emojiName: emojiName,
         reaction: reaction
-      }, /*#__PURE__*/_react.default.createElement(_FlashAnimation.FlashAnimation, {
+      }, (0, _core.jsx)(_FlashAnimation.FlashAnimation, {
         flash: flash,
-        className: flashStyle
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: emojiStyle
-      }, /*#__PURE__*/_react.default.createElement(_element.ResourcedEmoji, {
+        css: flashStyle
+      }, (0, _core.jsx)("div", {
+        css: emojiStyle
+      }, (0, _core.jsx)(_element.ResourcedEmoji, {
         emojiProvider: emojiProvider,
         emojiId: emojiId,
         fitToHeight: 16
-      })), /*#__PURE__*/_react.default.createElement(_Counter.Counter, {
-        className: counterStyle,
+      })), (0, _core.jsx)(_Counter.Counter, {
         value: reaction.count,
         highlight: reaction.reacted
       }))));
@@ -228,7 +217,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');