@atlaskit/reactions 21.4.0 → 21.6.0

package/docs/4-reaction-service-client.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { md, code, Props } from '@atlaskit/docs';
+
+export default md`
+
+  The ReactionServiceClient class is another key element used in the Reactions memory state management. It wraps all API calls to the pf-reactions-service required for communicating with the remote API.
+
+  ## Usage
+
+  ${code`
+  import { MemoryReactionsStore, State, ReactionServiceClient } from '@atlaskit/reactions';
+
+  const apiConfig = {
+    baseUrl: 'http://www.example.org',
+    // optional, generate token from asap, check \`pf-emoji-service\` for more info
+    authHeader: 'Bearer token',
+  };
+
+  // Create a client object fetching the reactions data from the specified url
+  const client = new ReactionServiceClient(apiConfig.baseUrl, apiConfig.authHeader) = {};
+
+  // Add the client to the MemoryReactionsStore class
+
+  // Define the initial state object
+  const intialState: State = {
+    reactions: {},
+    flash: {}
+  };
+
+  // Define the store object that will handle all the reactions data (get/set/remove) and the API calls to the server
+  const store = new MemoryReactionsStore(client, intialState, {
+    subproduct: 'atlaskit',
+  });
+`}
+
+  ${(
+    <Props
+      heading="ReactionClient type"
+      props={require('!!extract-react-types-loader!../extract-react-type/reactionClient')}
+    />
+  )}
+`;

package/extract-react-type/ConnectedReactionPicker.ts

@@ -0,0 +1,6 @@
+import type { ConnectedReactionPickerProps } from '../src/containers';
+
+/**
+ * The props definition in src/containers/ConnectedReactionPicker.tsx breaks ERT unfortunately, hence this hack (for the custom component props).
+ */
+export default function (_: ConnectedReactionPickerProps) {}

package/extract-react-type/ConnectedReactionsView.ts

@@ -0,0 +1,6 @@
+import type { ConnectedReactionsViewProps } from '../src/containers';
+
+/**
+ * The props definition in src/containers/ConnectedReactionsView.tsx breaks ERT unfortunately, hence this hack (for the custom component props).
+ */
+export default function (_: ConnectedReactionsViewProps) {}

package/extract-react-type/Reaction.ts

@@ -0,0 +1,6 @@
+import type { ReactionProps } from '../src/components';
+
+/**
+ * The props definition in src/components/Reaction/Reaction.ts breaks ERT unfortunately, hence this hack (for the custom component props).
+ */
+export default function (_: ReactionProps) {}

package/extract-react-type/Reactions.ts

@@ -0,0 +1,6 @@
+import type { ReactionsProps } from '../src/components';
+
+/**
+ * The props definition in src/components/Reactions/Reactions.tsx breaks ERT unfortunately, hence this hack (for the custom component props).
+ */
+export default function (_: ReactionsProps) {}

package/extract-react-type/actions.ts

@@ -0,0 +1,6 @@
+import type { Actions } from '../src/types';
+
+/**
+ * The props definition in src/types/action.ts breaks ERT unfortunately, hence this hack (for the custom component props).
+ */
+export default function (_: Actions) {}

package/extract-react-type/reactionClient.ts

@@ -0,0 +1,6 @@
+import type { Client } from '../src/types';
+
+/**
+ * The props definition in src/types/client.ts breaks ERT unfortunately, hence this hack (for the custom component props).
+ */
+export default function (_: Client) {}

package/extract-react-type/reactionsStore.ts

@@ -0,0 +1,6 @@
+import type { Store } from '../src/types';
+
+/**
+ * The props definition in src/types/store.ts breaks ERT unfortunately, hence this hack (for the custom component props).
+ */
+export default function (_: Store) {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/reactions",
-  "version": "21.4.0",
+  "version": "21.6.0",
   "description": "Reactions component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,12 +29,12 @@
     "@atlaskit/analytics-namespaced-context": "^6.5.0",
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/button": "^16.3.0",
-    "@atlaskit/ds-lib": "^2.0.0",
-    "@atlaskit/emoji": "^65.0.0",
+    "@atlaskit/ds-lib": "^2.1.0",
+    "@atlaskit/emoji": "^65.2.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/motion": "^1.2.0",
     "@atlaskit/popper": "^5.0.0",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@atlaskit/tooltip": "^17.5.0",
     "@atlaskit/ufo": "^0.1.0",
@@ -52,18 +52,25 @@
     "@atlaskit/docs": "^9.0.0",
     "@atlaskit/editor-test-helpers": "^17.1.0",
     "@atlaskit/elements-test-helpers": "^0.7.0",
+    "@atlaskit/section-message": "^6.2.0",
     "@atlaskit/tooltip": "^17.5.0",
-    "@atlaskit/util-data-test": "^17.4.0",
+    "@atlaskit/util-data-test": "^17.5.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/ufo": "^0.1.0",
+    "@emotion/jest": "^11.8.0",
+    "@testing-library/dom": "^7.7.3",
+    "@testing-library/jest-dom": "^4.1.0",
+    "@testing-library/react": "^8.0.1",
+    "@testing-library/user-event": "10.4.0",
     "@types/webpack-dev-server": "^3.11.2",
+    "dotenv": "^8.2.0",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",
     "es6-promise": "^4.0.5",
     "fetch-mock": "^8.0.0",
     "react": "^16.8.0",
     "react-intl-next": "npm:react-intl@^5.18.1",
-    "typescript": "4.2.4",
+    "typescript": "4.3.5",
     "wait-for-expect": "^1.2.0",
     "webpack-dev-server": "^3.11.2"
   },
@@ -79,5 +86,15 @@
       "tree-shaking": []
     }
   },
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
+  "scripts": {
+    "setup-first-time": "yarn run setup-local-config; yarn run setup-env",
+    "setup-local-config": "cp -nv local-config-template.ts local-config.ts",
+    "setup-env": "cp -nv .env-template .env",
+    "start": "cd ../../ && yarn start reactions",
+    "test": "cd ../../ && yarn test reactions",
+    "typecheck": "cd ../../ && yarn typecheck:package ./packages/elements/reactions",
+    "start:dev": "cd ../../ && yarn start reactions --proxy ./packages/elements/reactions/proxy.ts",
+    "start:edge": "cd ../../ && PROXY_TARGET_ENV=edge yarn start reactions --proxy ./packages/elements/reactions/proxy.ts"
+  }
 }

package/dist/cjs/client/MockReactionsClient.js

@@ -1,183 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.user = exports.reaction = exports.containerAri = exports.ari = exports.MockReactionsClient = void 0;
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _defineProperty3 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _Selector = require("../components/Selector");
-
-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 = 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;
-var ari = 'ari:cloud:owner:demo-cloud-id:item/1';
-exports.ari = ari;
-
-var reaction = function reaction(shortName, count, reacted) {
-  return {
-    ari: ari,
-    containerAri: containerAri,
-    emojiId: _Selector.defaultReactionsByShortName.get(shortName).id,
-    count: count,
-    reacted: reacted
-  };
-};
-
-exports.reaction = reaction;
-
-var user = function user(id, displayName) {
-  return {
-    id: id,
-    displayName: displayName
-  };
-};
-
-exports.user = user;
-
-var objectReactionKey = function objectReactionKey(containerAri, ari) {
-  return "".concat(containerAri, "|").concat(ari);
-};
-
-var defaultUsers = [user('oscar', 'Oscar Wallhult'), user('julien', 'Julien Michel Hoarau'), user('craig', 'Craig Petchell'), user('jerome', 'Jerome Touffe-Blin'), user('esoares', 'Eduardo Soares'), user('lpereira', 'Luiz Pereira'), user('pcurren', 'Paul Curren'), user('ttjandra', 'Tara Tjandra'), user('severington', 'Ste Everington'), user('sguillope', 'Sylvain Guillope'), user('alunnon', 'Alex Lunnon')];
-
-var MockReactionsClient = /*#__PURE__*/function () {
-  function MockReactionsClient() {
-    var _this = this;
-
-    var delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-    (0, _classCallCheck2.default)(this, MockReactionsClient);
-    (0, _defineProperty3.default)(this, "mockData", (0, _defineProperty3.default)({}, objectReactionKey(containerAri, ari), [reaction(':fire:', 1, true), reaction(':thumbsup:', 9, false), reaction(':astonished:', 5, false), reaction(':heart:', 100, false)]));
-    (0, _defineProperty3.default)(this, "delayPromise", function () {
-      return new Promise(function (resolve) {
-        return window.setTimeout(resolve, _this.delay);
-      });
-    });
-    this.delay = delay;
-  }
-
-  (0, _createClass2.default)(MockReactionsClient, [{
-    key: "getReactions",
-    value: function getReactions(containerAri, aris) {
-      var _this2 = this;
-
-      return this.delayPromise().then(function () {
-        return aris.reduce(function (results, ari) {
-          var reactionKey = objectReactionKey(containerAri, ari);
-          results[ari] = _this2.mockData[reactionKey] || [];
-          return results;
-        }, {});
-      });
-    }
-  }, {
-    key: "getDetailedReaction",
-    value: function getDetailedReaction(containerAri, ari, emojiId) {
-      var _this3 = this;
-
-      return this.delayPromise().then(function () {
-        var reactionKey = "".concat(containerAri, "|").concat(ari);
-        var reactionsMockData = _this3.mockData[reactionKey];
-
-        if (reactionsMockData) {
-          var _reaction = reactionsMockData.find(function (reaction) {
-            return reaction.emojiId === emojiId;
-          });
-
-          if (_reaction) {
-            var users = [].concat(defaultUsers).slice(Math.floor(Math.random() * 4), Math.floor(Math.random() * 9) + 4).slice(0, _reaction.count);
-            return _objectSpread(_objectSpread({}, _reaction), {}, {
-              users: users
-            });
-          }
-        }
-
-        return {
-          containerAri: containerAri,
-          ari: ari,
-          emojiId: emojiId,
-          count: 1,
-          reacted: true,
-          users: []
-        };
-      });
-    }
-  }, {
-    key: "addReaction",
-    value: function addReaction(containerAri, ari, emojiId) {
-      var _this4 = this;
-
-      return this.delayPromise().then(function () {
-        var reactionKey = objectReactionKey(containerAri, ari);
-        var found = false;
-        var reactionsMockData = _this4.mockData[reactionKey];
-
-        if (reactionsMockData) {
-          _this4.mockData[reactionKey] = reactionsMockData.map(function (reaction) {
-            if (reaction.emojiId === emojiId) {
-              found = true;
-              return _objectSpread(_objectSpread({}, reaction), {}, {
-                count: reaction.count + 1,
-                reacted: true
-              });
-            }
-
-            return reaction;
-          });
-        }
-
-        if (!found) {
-          _this4.mockData[reactionKey] = [].concat((0, _toConsumableArray2.default)(reactionsMockData ? reactionsMockData : []), [{
-            containerAri: containerAri,
-            ari: ari,
-            emojiId: emojiId,
-            count: 1,
-            reacted: true
-          }]);
-        }
-
-        return _this4.mockData[reactionKey];
-      });
-    }
-  }, {
-    key: "deleteReaction",
-    value: function deleteReaction(containerAri, ari, emojiId) {
-      var _this5 = this;
-
-      return this.delayPromise().then(function () {
-        var reactionKey = objectReactionKey(containerAri, ari);
-        _this5.mockData[reactionKey] = _this5.mockData[reactionKey].map(function (reaction) {
-          if (reaction.emojiId === emojiId) {
-            if (reaction.count === 1) {
-              return undefined;
-            }
-
-            return _objectSpread(_objectSpread({}, reaction), {}, {
-              count: reaction.count - 1,
-              reacted: false
-            });
-          }
-
-          return reaction;
-        }).filter(function (reaction) {
-          return !!reaction;
-        });
-        return _this5.mockData[reactionKey];
-      });
-    }
-  }]);
-  return MockReactionsClient;
-}();
-
-exports.MockReactionsClient = MockReactionsClient;

package/dist/cjs/components/EmojiButton.js

@@ -1,100 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.EmojiButton = 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"));
-
-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 _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); }
-
-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 emojiButtonStyle = (0, _core.css)({
-  outline: 'none',
-  display: 'flex',
-  backgroundColor: 'transparent',
-  border: 0,
-  borderRadius: '5px',
-  cursor: 'pointer',
-  margin: '0',
-  padding: '10px 8px',
-  '&:hover > span': {
-    transition: 'transform cubic-bezier(0.23, 1, 0.32, 1) 200ms',
-    transform: 'scale(1.33)'
-  }
-});
-
-var EmojiButton = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(EmojiButton, _PureComponent);
-
-  var _super = _createSuper(EmojiButton);
-
-  function EmojiButton() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, EmojiButton);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMouseDown", function (event) {
-      event.preventDefault();
-
-      if (_this.props.onClick && (0, _utils.isLeftClick)(event)) {
-        _this.props.onClick(_this.props.emojiId, undefined, event);
-      }
-    });
-    return _this;
-  }
-
-  (0, _createClass2.default)(EmojiButton, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          emojiId = _this$props.emojiId,
-          emojiProvider = _this$props.emojiProvider;
-      return (0, _core.jsx)("button", {
-        onMouseUp: this.handleMouseDown,
-        css: emojiButtonStyle
-      }, (0, _core.jsx)(_element.ResourcedEmoji, {
-        emojiProvider: emojiProvider,
-        emojiId: emojiId
-      }));
-    }
-  }]);
-  return EmojiButton;
-}(_react.PureComponent);
-
-exports.EmojiButton = EmojiButton;

package/dist/cjs/components/Reaction.js

@@ -1,226 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Reaction = 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"));
-
-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");
-
-var _colors = require("@atlaskit/theme/colors");
-
-var _tokens = require("@atlaskit/tokens");
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _analytics = require("../analytics");
-
-var _Counter = require("./Counter");
-
-var _FlashAnimation = require("./FlashAnimation");
-
-var _ReactionTooltip = require("./ReactionTooltip");
-
-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); }
-
-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; } }
-
-/**
- * Styling Note:
- * Padding and line height are set within the child components
- * of FlashAnimation b/c it otherwise throws off the flash styling
- */
-var emojiStyle = (0, _core.css)({
-  transformOrigin: 'center center 0',
-  lineHeight: '12px',
-  padding: '4px 4px 4px 8px'
-});
-var reactionStyle = (0, _core.css)({
-  outline: 'none',
-  display: 'flex',
-  flexDirection: 'row',
-  alignItems: 'flex-start',
-  minWidth: '36px',
-  height: "".concat(_utils.akHeight, "px"),
-  background: 'transparent',
-  border: "1px solid ".concat((0, _tokens.token)('color.border', _colors.N40)),
-  boxSizing: 'border-box',
-  borderRadius: '20px',
-  color: "".concat((0, _tokens.token)('color.text.subtle', _colors.N400)),
-  cursor: 'pointer',
-  margin: 0,
-  padding: 0,
-  transition: '200ms ease-in-out',
-  '&:hover': {
-    background: "".concat((0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N20))
-  }
-});
-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, _core.css)({
-  display: 'flex',
-  flexDirection: 'row',
-  borderRadius: '10px',
-  height: "".concat(flashHeight, "px")
-});
-
-var ReactionWithoutAnalytics = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(ReactionWithoutAnalytics, _PureComponent);
-
-  var _super = _createSuper(ReactionWithoutAnalytics);
-
-  function ReactionWithoutAnalytics(props) {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, ReactionWithoutAnalytics);
-    _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "mounted", false);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMouseDown", function (event) {
-      event.preventDefault();
-      event.stopPropagation();
-
-      if (_this.props.onClick && (0, _utils.isLeftClick)(event)) {
-        var _this$props = _this.props,
-            _reaction = _this$props.reaction,
-            createAnalyticsEvent = _this$props.createAnalyticsEvent;
-        var reacted = _reaction.reacted,
-            _emojiId = _reaction.emojiId;
-        (0, _analytics.createAndFireSafe)(createAnalyticsEvent, _analytics.createReactionClickedEvent, !reacted, _emojiId);
-
-        _this.props.onClick(_this.props.reaction.emojiId, event);
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMouseEnter", function (event) {
-      event.preventDefault();
-      var _this$props2 = _this.props,
-          onMouseEnter = _this$props2.onMouseEnter,
-          reaction = _this$props2.reaction;
-
-      if (!reaction.users || !reaction.users.length) {
-        _this.hoverStart = Date.now();
-      }
-
-      if (onMouseEnter) {
-        onMouseEnter(_this.props.reaction, event);
-      }
-    });
-    _this.state = {};
-    return _this;
-  }
-
-  (0, _createClass2.default)(ReactionWithoutAnalytics, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(_ref) {
-      var prevReaction = _ref.reaction;
-
-      if (!prevReaction.users && this.props.reaction.users) {
-        (0, _analytics.createAndFireSafe)(this.props.createAnalyticsEvent, _analytics.createReactionHoveredEvent, this.hoverStart);
-      }
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
-
-      this.mounted = true;
-      this.props.emojiProvider.then(function (emojiResource) {
-        return emojiResource.findByEmojiId({
-          shortName: '',
-          id: _this2.props.reaction.emojiId
-        });
-      }).then(function (foundEmoji) {
-        if (foundEmoji && _this2.mounted) {
-          _this2.setState({
-            emojiName: foundEmoji.name
-          });
-        }
-      });
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.mounted = false;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props3 = this.props,
-          emojiProvider = _this$props3.emojiProvider,
-          reaction = _this$props3.reaction,
-          classNameProp = _this$props3.className,
-          flash = _this$props3.flash;
-      var emojiName = this.state.emojiName;
-      var emojiId = {
-        id: reaction.emojiId,
-        shortName: ''
-      };
-      return (0, _core.jsx)(_ReactionTooltip.ReactionTooltip, {
-        emojiName: emojiName,
-        reaction: reaction
-      }, (0, _core.jsx)("button", {
-        className: classNameProp,
-        css: [reactionStyle, reaction.reacted && reactedStyle],
-        onMouseUp: this.handleMouseDown,
-        onMouseEnter: this.handleMouseEnter
-      }, (0, _core.jsx)(_FlashAnimation.FlashAnimation, {
-        flash: flash,
-        css: flashStyle
-      }, (0, _core.jsx)("div", {
-        css: emojiStyle
-      }, (0, _core.jsx)(_element.ResourcedEmoji, {
-        emojiProvider: emojiProvider,
-        emojiId: emojiId,
-        fitToHeight: 16
-      })), (0, _core.jsx)(_Counter.Counter, {
-        value: reaction.count,
-        highlight: reaction.reacted
-      }))));
-    }
-  }]);
-  return ReactionWithoutAnalytics;
-}(_react.PureComponent);
-
-(0, _defineProperty2.default)(ReactionWithoutAnalytics, "defaultProps", {
-  flash: false,
-  className: undefined,
-  onMouseEnter: undefined,
-  flashOnMount: false
-});
-(0, _defineProperty2.default)(ReactionWithoutAnalytics, "displayName", 'Reaction');
-var Reaction = (0, _analyticsNext.withAnalyticsEvents)()(ReactionWithoutAnalytics);
-exports.Reaction = Reaction;