@atlaskit/reactions 21.8.0 → 22.0.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @atlaskit/reactions
 
+## 22.0.0
+
+### Major Changes
+
+- [`0617b7ef2aa`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0617b7ef2aa) - [ux]
+  Created a new prop, allowUserDialog, that enables an actionable tooltip link to see
+  a detailed breakdown of reacted users. The reactions dialog shows the complete user list for
+  the currently selected reaction, as well as, the user list for all other reactions. Can tab or click through the reactions list to see all reactions and user lists.
+
+  Allow handling of numbers up to 999M and truncate them accordingly.
+  1000 => 1K, 1,500 => 1.5K, 1,000,000 => 1M
+
+### Minor Changes
+
+- [`cf558ddee28`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cf558ddee28) - [ux] add see who reacted button to view all reacted users in a modal, and make reactions more friendly to keyboard users
+- [`4f5ecac139f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4f5ecac139f) - [ux] Provide `emojiPickerSize` option for reaction picker, including `small`, `medium`, and `large`. Emoji picker will be `medium` size by default, which will show more emojis.
+
+### Patch Changes
+
+- [`7cfd0383741`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7cfd0383741) - Add UFO metrics for the Reactions Dialog
+- [`ac2824857ec`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ac2824857ec) - Reactionspicker - fix onClose event gets triggered on each click inside document
+- [`f84d560bdbd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f84d560bdbd) - make onReactionHover depreacted so it's backwards compatible
+- [`99b7758e403`](https://bitbucket.org/atlassian/atlassian-frontend/commits/99b7758e403) - support pluralization for reactions count message in reactions dialog
+- [`b1e9279b174`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b1e9279b174) - Fixing the closing animation for Reactions dialog window
+- Updated dependencies
+
+## 21.8.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 21.8.0
 
 ### Minor Changes

package/dist/cjs/MockReactionsClient.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mockData = exports.getUser = exports.getReactionSummary = exports.containerAri = exports.ari = exports.MockReactionsClient = void 0;
+exports.simpleMockData = exports.getUser = exports.getReactionSummary = exports.containerAri = exports.ari = exports.MockReactionsClient = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -30,11 +30,12 @@ exports.containerAri = containerAri;
 var ari = 'ari:cloud:owner:demo-cloud-id:item/1';
 exports.ari = ari;
 
-var getReactionSummary = function getReactionSummary(shortName, count, reacted) {
+var getReactionSummary = function getReactionSummary(shortName, count, reacted, extendedReactions) {
+  var getReactionsByShortName = extendedReactions ? _shared.constants.ExtendedReactionsByShortName.get(shortName) : _shared.constants.DefaultReactionsByShortName.get(shortName);
   return {
     ari: ari,
     containerAri: containerAri,
-    emojiId: _shared.constants.DefaultReactionsByShortName.get(shortName).id,
+    emojiId: getReactionsByShortName.id,
     count: count,
     reacted: reacted
   };
@@ -45,7 +46,10 @@ exports.getReactionSummary = getReactionSummary;
 var getUser = function getUser(id, displayName) {
   return {
     id: id,
-    displayName: displayName
+    displayName: displayName,
+    profilePicture: {
+      path: 'https://pbs.twimg.com/profile_images/803832195970433027/aaoG6PJI_400x400.jpg'
+    }
   };
 };
 
@@ -55,19 +59,20 @@ var getReactionKey = function getReactionKey(containerAri, ari) {
   return "".concat(containerAri, "|").concat(ari);
 };
 
-var defaultUsers = [getUser('oscar', 'Oscar Wallhult'), getUser('julien', 'Julien Michel Hoarau'), getUser('craig', 'Craig Petchell'), getUser('jerome', 'Jerome Touffe-Blin'), getUser('esoares', 'Eduardo Soares'), getUser('lpereira', 'Luiz Pereira'), getUser('pcurren', 'Paul Curren'), getUser('ttjandra', 'Tara Tjandra'), getUser('severington', 'Ste Everington'), getUser('sguillope', 'Sylvain Guillope'), getUser('alunnon', 'Alex Lunnon')];
-var mockData = (0, _defineProperty2.default)({}, getReactionKey(containerAri, ari), [getReactionSummary(':fire:', 1, true), getReactionSummary(':thumbsup:', 999, false), getReactionSummary(':astonished:', 9, false), getReactionSummary(':heart:', 99, false)]);
+var defaultUsers = [getUser('oscar', 'Oscar Wallhult'), getUser('julien', 'Julien Michel Hoarau'), getUser('craig', 'Craig Petchell'), getUser('jerome', 'Jerome Touffe-Blin'), getUser('esoares', 'Eduardo Soares'), getUser('lpereira', 'Luiz Pereira'), getUser('pcurren', 'Paul Curren'), getUser('ttjandra', 'Tara Tjandra'), getUser('severington', 'Ste Everington'), getUser('sguillope', 'Sylvain Guillope'), getUser('alunnon', 'Alex Lunnon'), getUser('bsmith', 'Bob Smith'), getUser('jdoe', 'Jane Doe'), getUser('mhomes', 'Mary Homes'), getUser('ckent', 'Clark Kent')];
+var simpleMockData = (0, _defineProperty2.default)({}, getReactionKey(containerAri, ari), [getReactionSummary(':fire:', 1, true), getReactionSummary(':thumbsup:', 999, false), getReactionSummary(':astonished:', 9, false), getReactionSummary(':heart:', 99, false)]);
+exports.simpleMockData = simpleMockData;
+var extendedMockData = (0, _defineProperty2.default)({}, getReactionKey(containerAri, ari), [getReactionSummary(':fire:', 1, true, true), getReactionSummary(':thumbsup:', 999, false, true), getReactionSummary(':astonished:', 9, false, true), getReactionSummary(':heart:', 99, false, true), getReactionSummary(':thinking:', 10, false, true), getReactionSummary(':clap:', 99, false, true), getReactionSummary(':thumbsdown:', 2, false, true), getReactionSummary(':bulb:', 16, false, true), getReactionSummary(':star:', 9999, false, true), getReactionSummary(':green_heart:', 9, false, true), getReactionSummary(':blue_heart:', 8392, false, true), getReactionSummary(':broken_heart:', 1, false, true), getReactionSummary(':grinning:', 10601, false, true), getReactionSummary(':slight_smile:', 99, false, true)]);
 /**
  * Mocked version of the client to fetch user information
  */
 
-exports.mockData = mockData;
-
 var MockReactionsClient = /*#__PURE__*/function () {
   function MockReactionsClient() {
     var _this = this;
 
     var delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    var showExtendedReactions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     (0, _classCallCheck2.default)(this, MockReactionsClient);
     (0, _defineProperty2.default)(this, "delayPromise", function () {
       return new Promise(function (resolve) {
@@ -75,12 +80,15 @@ var MockReactionsClient = /*#__PURE__*/function () {
       });
     });
     this.delay = delay;
+    this.mockData = showExtendedReactions ? extendedMockData : simpleMockData;
   }
 
   (0, _createClass2.default)(MockReactionsClient, [{
     key: "getReactions",
     value: function () {
       var _getReactions = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(containerAri, aris) {
+        var _this2 = this;
+
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
@@ -91,7 +99,7 @@ var MockReactionsClient = /*#__PURE__*/function () {
               case 2:
                 return _context.abrupt("return", aris.reduce(function (results, ari) {
                   var reactionKey = getReactionKey(containerAri, ari);
-                  results[ari] = mockData[reactionKey] || [];
+                  results[ari] = _this2.mockData[reactionKey] || [];
                   return results;
                 }, {}));
 
@@ -123,7 +131,7 @@ var MockReactionsClient = /*#__PURE__*/function () {
 
               case 2:
                 reactionKey = "".concat(containerAri, "|").concat(ari);
-                reactionsMockData = mockData[reactionKey];
+                reactionsMockData = this.mockData[reactionKey];
 
                 if (!reactionsMockData) {
                   _context2.next = 9;
@@ -183,10 +191,10 @@ var MockReactionsClient = /*#__PURE__*/function () {
               case 2:
                 reactionKey = getReactionKey(containerAri, ari);
                 found = false;
-                reactionsMockData = mockData[reactionKey];
+                reactionsMockData = this.mockData[reactionKey];
 
                 if (reactionsMockData) {
-                  mockData[reactionKey] = reactionsMockData.map(function (reaction) {
+                  this.mockData[reactionKey] = reactionsMockData.map(function (reaction) {
                     if (reaction.emojiId === emojiId) {
                       found = true;
                       return _objectSpread(_objectSpread({}, reaction), {}, {
@@ -200,7 +208,7 @@ var MockReactionsClient = /*#__PURE__*/function () {
                 }
 
                 if (!found) {
-                  mockData[reactionKey] = [].concat((0, _toConsumableArray2.default)(reactionsMockData ? reactionsMockData : []), [{
+                  this.mockData[reactionKey] = [].concat((0, _toConsumableArray2.default)(reactionsMockData ? reactionsMockData : []), [{
                     containerAri: containerAri,
                     ari: ari,
                     emojiId: emojiId,
@@ -209,7 +217,7 @@ var MockReactionsClient = /*#__PURE__*/function () {
                   }]);
                 }
 
-                return _context3.abrupt("return", mockData[reactionKey]);
+                return _context3.abrupt("return", this.mockData[reactionKey]);
 
               case 8:
               case "end":
@@ -239,7 +247,7 @@ var MockReactionsClient = /*#__PURE__*/function () {
 
               case 2:
                 reactionKey = getReactionKey(containerAri, ari);
-                mockData[reactionKey] = mockData[reactionKey].map(function (reaction) {
+                this.mockData[reactionKey] = this.mockData[reactionKey].map(function (reaction) {
                   if (reaction.emojiId === emojiId) {
                     if (reaction.count === 1) {
                       return undefined;
@@ -255,7 +263,7 @@ var MockReactionsClient = /*#__PURE__*/function () {
                 }).filter(function (reaction_1) {
                   return !!reaction_1;
                 });
-                return _context4.abrupt("return", mockData[reactionKey]);
+                return _context4.abrupt("return", this.mockData[reactionKey]);
 
               case 5:
               case "end":

package/dist/cjs/analytics/analytics.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.extractErrorInfo = exports.createRestSucceededEvent = exports.createRestFailedEvent = exports.createReactionsRenderedEvent = exports.createReactionSelectionEvent = exports.createReactionHoveredEvent = exports.createReactionClickedEvent = exports.createPickerMoreClickedEvent = exports.createPickerCancelledEvent = exports.createPickerButtonClickedEvent = exports.createAndFireSafe = exports.createAndFireEventInElementsChannel = void 0;
+exports.extractErrorInfo = exports.createRestSucceededEvent = exports.createRestFailedEvent = exports.createReactionsRenderedEvent = exports.createReactionSelectionEvent = exports.createReactionHoveredEvent = exports.createReactionFocusedEvent = exports.createReactionClickedEvent = exports.createPickerMoreClickedEvent = exports.createPickerCancelledEvent = exports.createPickerButtonClickedEvent = exports.createAndFireSafe = exports.createAndFireEventInElementsChannel = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -131,6 +131,14 @@ var createReactionHoveredEvent = function createReactionHoveredEvent(startTime)
 
 exports.createReactionHoveredEvent = createReactionHoveredEvent;
 
+var createReactionFocusedEvent = function createReactionFocusedEvent(startTime) {
+  return createPayload('focused', 'existingReaction', _analyticsGasTypes.UI_EVENT_TYPE)({
+    duration: calculateDuration(startTime)
+  });
+};
+
+exports.createReactionFocusedEvent = createReactionFocusedEvent;
+
 var createReactionClickedEvent = function createReactionClickedEvent(added, emojiId) {
   return createPayload('clicked', 'existingReaction', _analyticsGasTypes.UI_EVENT_TYPE)({
     added: added,

package/dist/cjs/analytics/ufo.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sampledReactionsRendered = exports.ReactionsRendered = exports.ReactionsRemove = exports.ReactionsAdd = exports.ReactionDetailsFetch = exports.PickerRender = exports.ExperienceName = exports.ComponentName = void 0;
+exports.sampledReactionsRendered = exports.ReactionsRendered = exports.ReactionsRemove = exports.ReactionsAdd = exports.ReactionDialogSelectedReactionChanged = exports.ReactionDialogOpened = exports.ReactionDialogClosed = exports.ReactionDetailsFetch = exports.PickerRender = exports.ExperienceName = exports.ComponentName = void 0;
 
 var _ufo = require("@atlaskit/ufo");
 
@@ -40,6 +40,9 @@ exports.ExperienceName = ExperienceName;
   ExperienceName["REACTION_ADDED"] = "reaction-added";
   ExperienceName["REACTION_REMOVED"] = "reaction-removed";
   ExperienceName["REACTION_DETAILS_FETCHED"] = "reaction-details-fetched";
+  ExperienceName["REACTION_DIALOG_OPENED"] = "reaction-dialog-opened";
+  ExperienceName["REACTION_DIALOG_CLOSED"] = "reaction-dialog-closed";
+  ExperienceName["REACTION_DIALOG_SELECTED_REACTION_CHANGED"] = "reaction-dialog-selected-reaction-changed";
 })(ExperienceName || (exports.ExperienceName = ExperienceName = {}));
 
 var ComponentName;
@@ -53,6 +56,7 @@ exports.ComponentName = ComponentName;
   ComponentName["PICKER_RENDERED"] = "reactions-picker";
   ComponentName["REACTIONS"] = "reactions-list";
   ComponentName["REACTION_ITEM"] = "reaction-item";
+  ComponentName["REACTION_DIALOG"] = "reaction-dialog";
 })(ComponentName || (exports.ComponentName = ComponentName = {}));
 
 var PickerRender = new _ufo.UFOExperience(ExperienceName.PICKER_OPENED, createExperienceConfig(ComponentName.PICKER_RENDERED, _ufo.ExperienceTypes.Experience, _ufo.ExperiencePerformanceTypes.InlineResult));
@@ -69,10 +73,28 @@ var ReactionsRendered = new _ufo.ConcurrentExperience(ExperienceName.REACTIONS_R
 exports.ReactionsRendered = ReactionsRendered;
 var ReactionsAdd = new _ufo.ConcurrentExperience(ExperienceName.REACTION_ADDED, createExperienceConfig(ComponentName.REACTIONS, _ufo.ExperienceTypes.Experience, _ufo.ExperiencePerformanceTypes.InlineResult));
 /**
- * Experience when a reaction details gets fetched
+ * Expeirence when a reaction dialog is opened
  */
 
 exports.ReactionsAdd = ReactionsAdd;
+var ReactionDialogOpened = new _ufo.UFOExperience(ExperienceName.REACTION_DIALOG_OPENED, createExperienceConfig(ComponentName.REACTION_DIALOG, _ufo.ExperienceTypes.Experience, _ufo.ExperiencePerformanceTypes.InlineResult));
+/**
+ * Experience when a reaction dialog is closed
+ */
+
+exports.ReactionDialogOpened = ReactionDialogOpened;
+var ReactionDialogClosed = new _ufo.UFOExperience(ExperienceName.REACTION_DIALOG_CLOSED, createExperienceConfig(ComponentName.REACTION_DIALOG, _ufo.ExperienceTypes.Experience, _ufo.ExperiencePerformanceTypes.InlineResult));
+/**
+ * Experience when a reaction changed/fetched from inside the modal dialog
+ */
+
+exports.ReactionDialogClosed = ReactionDialogClosed;
+var ReactionDialogSelectedReactionChanged = new _ufo.UFOExperience(ExperienceName.REACTION_DIALOG_SELECTED_REACTION_CHANGED, createExperienceConfig(ComponentName.REACTION_DIALOG, _ufo.ExperienceTypes.Experience, _ufo.ExperiencePerformanceTypes.InlineResult));
+/**
+ * Experience when a reaction details gets fetched
+ */
+
+exports.ReactionDialogSelectedReactionChanged = ReactionDialogSelectedReactionChanged;
 var ReactionDetailsFetch = new _ufo.ConcurrentExperience(ExperienceName.REACTION_DETAILS_FETCHED, createExperienceConfig(ComponentName.REACTION_ITEM, _ufo.ExperienceTypes.Experience, _ufo.ExperiencePerformanceTypes.InlineResult));
 /**
  * Experience when a reaction emoji gets removed/decrement

package/dist/cjs/components/Counter/Counter.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getLabel = exports.RENDER_LABEL_TESTID = exports.RENDER_COUNTER_TESTID = exports.RENDER_COMPONENT_WRAPPER = exports.Counter = void 0;
+exports.RENDER_LABEL_TESTID = exports.RENDER_COUNTER_TESTID = exports.RENDER_COMPONENT_WRAPPER = exports.Counter = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -46,36 +46,32 @@ exports.RENDER_COUNTER_TESTID = RENDER_COUNTER_TESTID;
 var RENDER_LABEL_TESTID = 'counter_label_wrapper';
 exports.RENDER_LABEL_TESTID = RENDER_LABEL_TESTID;
 
-var getLabel = function getLabel(value, overLimitLabel, limit) {
-  // Check if reached limit
-  if (limit && value >= limit) {
-    return overLimitLabel || '';
-  } else if (value === 0) {
-    return '';
-  } else {
-    return value.toString();
-  }
-};
 /**
  * Display reaction count next to the emoji button
  */
-
-
-exports.getLabel = getLabel;
-
 var Counter = function Counter(_ref) {
   var _ref$highlight = _ref.highlight,
       highlight = _ref$highlight === void 0 ? false : _ref$highlight,
-      _ref$limit = _ref.limit,
-      limit = _ref$limit === void 0 ? _shared.constants.DEFAULT_REACTION_TOP_LIMIT : _ref$limit,
-      _ref$overLimitLabel = _ref.overLimitLabel,
-      overLimitLabel = _ref$overLimitLabel === void 0 ? _shared.constants.DEFAULT_OVER_THE_LIMIT_REACTION_LABEL : _ref$overLimitLabel,
+      limit = _ref.limit,
+      overLimitLabel = _ref.overLimitLabel,
       className = _ref.className,
       value = _ref.value,
       _ref$animationDuratio = _ref.animationDuration,
       animationDuration = _ref$animationDuratio === void 0 ? _motion.mediumDurationMs : _ref$animationDuratio;
+
+  var getLabel = function getLabel(value) {
+    // Check if reached limit
+    if (limit && overLimitLabel && value >= limit) {
+      return overLimitLabel || '';
+    } else if (value === 0) {
+      return '';
+    } else {
+      return _shared.utils.formatLargeNumber(value);
+    }
+  };
+
   var previousValue = (0, _usePreviousValue.default)(value);
-  var label = getLabel(value, overLimitLabel, limit);
+  var label = getLabel(value);
   var increase = previousValue ? previousValue < value : false;
   return (0, _react2.jsx)("div", {
     className: className,

package/dist/cjs/components/Reaction/Reaction.js

@@ -56,15 +56,19 @@ var Reaction = function Reaction(_ref) {
   var emojiProvider = _ref.emojiProvider,
       onClick = _ref.onClick,
       reaction = _ref.reaction,
-      onMouseEnter = _ref.onMouseEnter,
+      _ref$onMouseEnter = _ref.onMouseEnter,
+      onMouseEnter = _ref$onMouseEnter === void 0 ? function () {} : _ref$onMouseEnter,
+      _ref$onFocused = _ref.onFocused,
+      onFocused = _ref$onFocused === void 0 ? function () {} : _ref$onFocused,
       className = _ref.className,
       _ref$flash = _ref.flash,
-      flash = _ref$flash === void 0 ? false : _ref$flash;
-  var emojiId = {
-    id: reaction.emojiId,
-    shortName: ''
-  };
+      flash = _ref$flash === void 0 ? false : _ref$flash,
+      _ref$handleUserListCl = _ref.handleUserListClick,
+      handleUserListClick = _ref$handleUserListCl === void 0 ? function () {} : _ref$handleUserListCl,
+      allowUserDialog = _ref.allowUserDialog;
+  var intl = (0, _reactIntlNext.useIntl)();
   var hoverStart = (0, _react.useRef)();
+  var focusStart = (0, _react.useRef)();
 
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
       createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
@@ -72,9 +76,18 @@ var Reaction = function Reaction(_ref) {
   var _useState = (0, _react.useState)(),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       emojiName = _useState2[0],
-      setEmojiName = _useState2[1]; // TODO: Extract the flow to a custom hook to retrieve emoji detailed description from an id using a custom hook. This will benefit a better optimization instead of the emojiProvider resolving everytime.
-  // Also optimize in future version to fetch in batch several emojiIds
+      setEmojiName = _useState2[1];
 
+  var _useState3 = (0, _react.useState)(true),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      isTooltipEnabled = _useState4[0],
+      setIsTooltipEnabled = _useState4[1];
+
+  var emojiId = {
+    id: reaction.emojiId,
+    shortName: ''
+  }; // TODO: Extract the flow to a custom hook to retrieve emoji detailed description from an id using a custom hook. This will benefit a better optimization instead of the emojiProvider resolving everytime.
+  // Also optimize in future version to fetch in batch several emojiIds
 
   (0, _react.useEffect)(function () {
     (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
@@ -106,7 +119,7 @@ var Reaction = function Reaction(_ref) {
       }, _callee);
     }))();
   }, [emojiProvider, reaction.emojiId]);
-  var handleMouseUp = (0, _react.useCallback)(function (event) {
+  var handleClick = (0, _react.useCallback)(function (event) {
     event.preventDefault();
 
     if (_shared.utils.isLeftClick(event)) {
@@ -120,21 +133,40 @@ var Reaction = function Reaction(_ref) {
   }, [createAnalyticsEvent, reaction, onClick]);
   var handleMouseEnter = (0, _react.useCallback)(function (event) {
     event.preventDefault();
+    setIsTooltipEnabled(true);
 
     if (!reaction.users || !reaction.users.length) {
-      hoverStart.current = Date.now();
+      focusStart.current = Date.now();
     }
 
-    _analytics.Analytics.createAndFireSafe(createAnalyticsEvent, _analytics.Analytics.createReactionHoveredEvent, hoverStart.current);
+    _analytics.Analytics.createAndFireSafe(createAnalyticsEvent, _analytics.Analytics.createReactionHoveredEvent, focusStart.current);
 
-    if (onMouseEnter) {
-      onMouseEnter(reaction, event);
-    }
+    onMouseEnter(reaction.emojiId, event);
   }, [createAnalyticsEvent, reaction, onMouseEnter]);
-  var intl = (0, _reactIntlNext.useIntl)();
+  var handleFocused = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
+    setIsTooltipEnabled(true);
+
+    if (!reaction.users || !reaction.users.length) {
+      hoverStart.current = Date.now();
+    }
+
+    _analytics.Analytics.createAndFireSafe(createAnalyticsEvent, _analytics.Analytics.createReactionFocusedEvent, hoverStart.current);
+
+    onFocused(reaction.emojiId, event);
+  }, [createAnalyticsEvent, reaction, onFocused]);
+
+  var handleOpenReactionsDialog = function handleOpenReactionsDialog(emojiId) {
+    handleUserListClick(emojiId);
+    setIsTooltipEnabled(false);
+  };
+
   return (0, _react2.jsx)(_ReactionTooltip.ReactionTooltip, {
     emojiName: emojiName,
-    reaction: reaction
+    reaction: reaction,
+    handleUserListClick: handleOpenReactionsDialog,
+    allowUserDialog: allowUserDialog,
+    isEnabled: isTooltipEnabled
   }, (0, _react2.jsx)("button", {
     className: className,
     css: [styles.reactionStyle, reaction.reacted && styles.reactedStyle],
@@ -144,8 +176,10 @@ var Reaction = function Reaction(_ref) {
     type: "button",
     "data-emoji-id": reaction.emojiId,
     "data-testid": RENDER_REACTION_TESTID,
-    onMouseUp: handleMouseUp,
-    onMouseEnter: handleMouseEnter
+    onClick: handleClick,
+    onMouseEnter: handleMouseEnter,
+    onFocus: handleFocused,
+    "data-emoji-button-id": reaction.emojiId
   }, (0, _react2.jsx)(_FlashAnimation.FlashAnimation, {
     flash: flash,
     css: styles.flashStyle

package/dist/cjs/components/Reaction/styles.js

@@ -30,7 +30,6 @@ var emojiStyle = (0, _react.css)({
 });
 exports.emojiStyle = emojiStyle;
 var reactionStyle = (0, _react.css)({
-  outline: 'none',
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'flex-start',
@@ -47,6 +46,13 @@ var reactionStyle = (0, _react.css)({
   transition: '200ms ease-in-out',
   '&:hover': {
     background: "".concat((0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N20))
+  },
+  '&:focus': {
+    boxShadow: "0 0 0 2px ".concat((0, _tokens.token)('color.border.focused', _colors.B100)),
+    // background, box-shadow
+    transitionDuration: '0s, 0.2s',
+    // disabling browser focus outline
+    outline: 'none'
   }
 });
 exports.reactionStyle = reactionStyle;
@@ -64,6 +70,7 @@ exports.flashHeight = flashHeight;
 var flashStyle = (0, _react.css)({
   display: 'flex',
   flexDirection: 'row',
+  alignItems: 'center',
   borderRadius: '10px',
   height: "".concat(flashHeight, "px")
 });

package/dist/cjs/components/ReactionDialog/ReactionView.js

@@ -0,0 +1,121 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReactionView = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _reactIntlNext = require("react-intl-next");
+
+var _react2 = require("@emotion/react");
+
+var _element = require("@atlaskit/emoji/element");
+
+var _Avatar = _interopRequireDefault(require("@atlaskit/avatar/Avatar"));
+
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+
+var _tabs = require("@atlaskit/tabs");
+
+var _shared = require("../../shared");
+
+var _styles = require("./styles");
+
+/** @jsx   jsx */
+var ReactionView = function ReactionView(_ref) {
+  var selectedEmojiId = _ref.selectedEmojiId,
+      emojiProvider = _ref.emojiProvider,
+      reaction = _ref.reaction;
+  var intl = (0, _reactIntlNext.useIntl)();
+
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      emojiName = _useState2[0],
+      setEmojiName = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var provider, emoji;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return emojiProvider;
+
+            case 2:
+              provider = _context.sent;
+              _context.next = 5;
+              return provider.findByEmojiId({
+                shortName: '',
+                id: selectedEmojiId
+              });
+
+            case 5:
+              emoji = _context.sent;
+
+              if (emoji && emoji.name) {
+                setEmojiName(emoji.name);
+              }
+
+            case 7:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }))();
+  }, [emojiProvider, selectedEmojiId]);
+  var alphabeticalNames = (0, _react.useMemo)(function () {
+    var _reactionObj$users;
+
+    var reactionObj = reaction;
+    return ((_reactionObj$users = reactionObj.users) === null || _reactionObj$users === void 0 ? void 0 : _reactionObj$users.sort(function (a, b) {
+      return a.displayName.localeCompare(b.displayName);
+    })) || [];
+  }, [reaction]);
+  var tabPanelAttributes = (0, _tabs.useTabPanel)();
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: _styles.reactionViewStyle
+  }, tabPanelAttributes), (0, _react2.jsx)("p", null, (0, _react2.jsx)(_element.ResourcedEmoji, {
+    emojiProvider: emojiProvider,
+    emojiId: {
+      id: selectedEmojiId,
+      shortName: ''
+    },
+    fitToHeight: 24
+  }), intl.formatMessage(_shared.i18n.messages.emojiName, {
+    emojiName: emojiName
+  })), alphabeticalNames.length === 0 ? (0, _react2.jsx)("div", {
+    css: _styles.centerSpinner
+  }, (0, _react2.jsx)(_spinner.default, {
+    size: "large"
+  })) : (0, _react2.jsx)("ul", {
+    css: _styles.userListStyle
+  }, alphabeticalNames.map(function (user) {
+    var _user$profilePicture;
+
+    var profile = (_user$profilePicture = user.profilePicture) === null || _user$profilePicture === void 0 ? void 0 : _user$profilePicture.path;
+    return (0, _react2.jsx)("li", {
+      css: _styles.userStyle,
+      key: user.id
+    }, (0, _react2.jsx)(_Avatar.default, {
+      size: "large",
+      src: profile
+    }), (0, _react2.jsx)("span", null, user.displayName));
+  })));
+};
+
+exports.ReactionView = ReactionView;