@atlaskit/reactions 21.8.0 → 22.0.0

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

@@ -0,0 +1,98 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+
+/** @jsx   jsx */
+import { useEffect, useState, useMemo } from 'react';
+import { useIntl } from 'react-intl-next';
+import { jsx } from '@emotion/react';
+import { ResourcedEmoji } from '@atlaskit/emoji/element';
+import Avatar from '@atlaskit/avatar/Avatar';
+import Spinner from '@atlaskit/spinner';
+import { useTabPanel } from '@atlaskit/tabs';
+import { i18n } from '../../shared';
+import { reactionViewStyle, userListStyle, userStyle, centerSpinner } from './styles';
+export var ReactionView = function ReactionView(_ref) {
+  var selectedEmojiId = _ref.selectedEmojiId,
+      emojiProvider = _ref.emojiProvider,
+      reaction = _ref.reaction;
+  var intl = useIntl();
+
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      emojiName = _useState2[0],
+      setEmojiName = _useState2[1];
+
+  useEffect(function () {
+    _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var provider, emoji;
+      return _regeneratorRuntime.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 = 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 = useTabPanel();
+  return jsx("div", _extends({
+    css: reactionViewStyle
+  }, tabPanelAttributes), jsx("p", null, jsx(ResourcedEmoji, {
+    emojiProvider: emojiProvider,
+    emojiId: {
+      id: selectedEmojiId,
+      shortName: ''
+    },
+    fitToHeight: 24
+  }), intl.formatMessage(i18n.messages.emojiName, {
+    emojiName: emojiName
+  })), alphabeticalNames.length === 0 ? jsx("div", {
+    css: centerSpinner
+  }, jsx(Spinner, {
+    size: "large"
+  })) : jsx("ul", {
+    css: 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 jsx("li", {
+      css: userStyle,
+      key: user.id
+    }, jsx(Avatar, {
+      size: "large",
+      src: profile
+    }), jsx("span", null, user.displayName));
+  })));
+};

package/dist/esm/components/ReactionDialog/ReactionsDialog.js

@@ -0,0 +1,161 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/** @jsx jsx */
+import { useEffect, useState, useRef, useCallback, useMemo } from 'react';
+import { useIntl } from 'react-intl-next';
+import { jsx } from '@emotion/react';
+import Button from '@atlaskit/button/standard-button';
+import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
+import { constants, i18n } from '../../shared';
+import { ReactionsList } from './ReactionsList';
+import { containerStyle, titleStyle } from './styles';
+/**
+ * Test id for the Reactions modal dialog
+ */
+
+export var RENDER_MODAL_TESTID = 'render-reactions-modal';
+
+var getDimensions = function getDimensions(container) {
+  return {
+    clientWidth: container === null || container === void 0 ? void 0 : container.clientWidth,
+    scrollWidth: container === null || container === void 0 ? void 0 : container.scrollWidth,
+    scrollLeft: container === null || container === void 0 ? void 0 : container.scrollLeft
+  };
+};
+
+export var ReactionsDialog = function ReactionsDialog(_ref) {
+  var _ref$reactions = _ref.reactions,
+      reactions = _ref$reactions === void 0 ? [] : _ref$reactions,
+      _ref$handleCloseReact = _ref.handleCloseReactionsDialog,
+      handleCloseReactionsDialog = _ref$handleCloseReact === void 0 ? function () {} : _ref$handleCloseReact,
+      emojiProvider = _ref.emojiProvider,
+      selectedEmojiId = _ref.selectedEmojiId,
+      _ref$handleSelectReac = _ref.handleSelectReaction,
+      handleSelectReaction = _ref$handleSelectReac === void 0 ? function () {} : _ref$handleSelectReac;
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      elementToScroll = _useState2[0],
+      setElementToScroll = _useState2[1];
+
+  var _useState3 = useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      reactionsContainerRef = _useState4[0],
+      setReactionsContainerRef = _useState4[1];
+
+  var reactionElementsRef = useRef();
+  var observerRef = useRef();
+  var intl = useIntl();
+  var isSelectedEmojiViewed = useRef(false);
+  var totalReactionsCount = useMemo(function () {
+    return reactions.reduce(function (accum, current) {
+      return accum += current === null || current === void 0 ? void 0 : current.count;
+    }, 0);
+  }, [reactions]);
+  var sortedReactions = useMemo(function () {
+    return reactions.sort(function (a, b) {
+      return (b === null || b === void 0 ? void 0 : b.count) - (a === null || a === void 0 ? void 0 : a.count);
+    });
+  }, [reactions]);
+  /* set Reactions Border Width , 9 Number of reactions to display*/
+
+  var reactionsBorderWidth = useMemo(function () {
+    return Math.ceil(reactions.length / constants.NUMBER_OF_REACTIONS_TO_DISPLAY) * 100;
+  }, [reactions]);
+  /* Callback from IntersectionObserver to set/unset classNames based on visibility to toggle styles*/
+
+  var handleNavigation = useCallback(function (entries) {
+    entries.forEach(function (entry, index) {
+      var _dataset;
+
+      var element = entry.target;
+      var emojiElement = element === null || element === void 0 ? void 0 : element.querySelector('[data-emoji-id]');
+      var emojiId = emojiElement === null || emojiElement === void 0 ? void 0 : (_dataset = emojiElement.dataset) === null || _dataset === void 0 ? void 0 : _dataset.emojiId;
+
+      if (entry.intersectionRatio < 1) {
+        element.classList.add('disabled');
+        /*Check if selectedEmoji (passed as props based on what user selects) is out of viewport */
+
+        if (emojiId === selectedEmojiId && !isSelectedEmojiViewed.current) {
+          setElementToScroll(emojiElement !== null && emojiElement !== void 0 ? emojiElement : undefined);
+        }
+      } else {
+        if (emojiId === selectedEmojiId && !isSelectedEmojiViewed.current) {
+          isSelectedEmojiViewed.current = true;
+        }
+
+        element.classList.remove('disabled');
+      }
+    });
+  }, [selectedEmojiId]);
+  useEffect(function () {
+    if (elementToScroll && !isSelectedEmojiViewed.current && reactionsContainerRef) {
+      isSelectedEmojiViewed.current = true;
+      var parentElement = elementToScroll.closest('.reaction-elements');
+      var reactionsList = document.querySelector('#reactions-dialog-tabs-list');
+
+      var _getDimensions = getDimensions(reactionsList),
+          clientWidth = _getDimensions.clientWidth;
+
+      var offsetLeft = parentElement === null || parentElement === void 0 ? void 0 : parentElement.offsetLeft;
+      /* which means emoji is not in viewport so scroll to it*/
+
+      if (reactionsList && offsetLeft > clientWidth) {
+        var scrollBy = Math.trunc(offsetLeft / clientWidth) * clientWidth;
+        reactionsList.scrollLeft += scrollBy;
+      }
+    }
+  }, [elementToScroll, reactionsContainerRef]);
+  /* Set up InterSectionObserver to observer reaction elements on navigating*/
+
+  useEffect(function () {
+    if (reactionsContainerRef) {
+      var options = {
+        root: reactionsContainerRef,
+        rootMargin: '0px',
+        threshold: 1.0
+      };
+      observerRef.current = new IntersectionObserver(handleNavigation, options);
+      reactionElementsRef.current = reactionsContainerRef.querySelectorAll('.reaction-elements');
+      reactionElementsRef.current && reactionElementsRef.current.length > 0 && reactionElementsRef.current.forEach(function (child) {
+        var _observerRef$current;
+
+        observerRef === null || observerRef === void 0 ? void 0 : (_observerRef$current = observerRef.current) === null || _observerRef$current === void 0 ? void 0 : _observerRef$current.observe(child);
+      });
+    }
+
+    return function () {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = undefined;
+      }
+    };
+  }, [reactionsContainerRef, reactions, handleNavigation, selectedEmojiId]);
+  var setRef = useCallback(function (node) {
+    if (!reactionsContainerRef) {
+      setReactionsContainerRef(node);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, []);
+  return jsx(Modal, {
+    onClose: handleCloseReactionsDialog,
+    height: 600,
+    testId: RENDER_MODAL_TESTID
+  }, jsx(ModalHeader, null, jsx("div", {
+    css: titleStyle
+  }, jsx(ModalTitle, null, intl.formatMessage(i18n.messages.reactionsCount, {
+    count: totalReactionsCount
+  })))), jsx(ModalBody, null, jsx("div", {
+    css: containerStyle(reactionsBorderWidth),
+    ref: setRef
+  }, jsx(ReactionsList, {
+    initialEmojiId: selectedEmojiId,
+    reactions: sortedReactions,
+    emojiProvider: emojiProvider,
+    onReactionChanged: handleSelectReaction
+  }))), jsx(ModalFooter, null, jsx(Button, {
+    appearance: "primary",
+    onClick: handleCloseReactionsDialog,
+    autoFocus: true
+  }, intl.formatMessage(i18n.messages.closeReactionsDialog))));
+};

package/dist/esm/components/ReactionDialog/ReactionsList.js

@@ -0,0 +1,79 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/** @jsx   jsx */
+import { useCallback, useState } from 'react';
+import { jsx } from '@emotion/react';
+import { ResourcedEmoji } from '@atlaskit/emoji/element';
+import Tabs, { Tab, TabList } from '@atlaskit/tabs';
+import { useThemeObserver } from '@atlaskit/tokens';
+import { Counter } from '../Counter';
+import { counterStyle, customTabWrapper, customTabListStyles } from './styles';
+import { ReactionView } from './ReactionView';
+export var ReactionsList = function ReactionsList(_ref) {
+  var reactions = _ref.reactions,
+      initialEmojiId = _ref.initialEmojiId,
+      emojiProvider = _ref.emojiProvider,
+      onReactionChanged = _ref.onReactionChanged;
+
+  var _useState = useState(function () {
+    // Calculate this only on initialize the List of Tabs and each Reactions View collection
+    return {
+      index: reactions.findIndex(function (reaction) {
+        return reaction.emojiId === initialEmojiId;
+      }),
+      id: initialEmojiId
+    };
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedEmoji = _useState2[0],
+      setSelectedEmoji = _useState2[1];
+
+  var theme = useThemeObserver();
+  var onTabChange = useCallback(function (index, analyticsEvent) {
+    if (index === selectedEmoji.index) {
+      return;
+    }
+
+    var emojiId = reactions[index].emojiId;
+    setSelectedEmoji({
+      index: index,
+      id: emojiId
+    });
+    onReactionChanged(emojiId, analyticsEvent);
+  }, [selectedEmoji.index, reactions, onReactionChanged]);
+  return jsx(Tabs, {
+    id: "reactions-dialog-tabs",
+    onChange: onTabChange,
+    selected: selectedEmoji.index
+  }, jsx("div", {
+    css: customTabListStyles,
+    id: "reactions-dialog-tabs-list"
+  }, jsx(TabList, null, reactions.map(function (reaction) {
+    var emojiId = {
+      id: reaction.emojiId,
+      shortName: ''
+    };
+    return jsx("div", {
+      css: customTabWrapper((emojiId === null || emojiId === void 0 ? void 0 : emojiId.id) === selectedEmoji.id, selectedEmoji.id, theme),
+      className: "reaction-elements",
+      key: reaction.emojiId,
+      "data-testid": emojiId === null || emojiId === void 0 ? void 0 : emojiId.id
+    }, jsx(Tab, null, jsx(ResourcedEmoji, {
+      emojiProvider: emojiProvider,
+      emojiId: emojiId,
+      fitToHeight: 16,
+      showTooltip: true
+    }), jsx("div", {
+      css: counterStyle((emojiId === null || emojiId === void 0 ? void 0 : emojiId.id) === selectedEmoji.id)
+    }, jsx(Counter, {
+      value: reaction.count
+    }))));
+  }))), reactions.map(function (reaction) {
+    return jsx(ReactionView, {
+      key: reaction.emojiId,
+      reaction: reaction,
+      selectedEmojiId: selectedEmoji.id,
+      emojiProvider: emojiProvider
+    });
+  }));
+};

package/dist/esm/components/ReactionDialog/index.js

@@ -0,0 +1 @@
+export { ReactionsDialog } from './ReactionsDialog';

package/dist/esm/components/ReactionDialog/styles.js

@@ -0,0 +1,177 @@
+/** @jsx jsx */
+import { css } from '@emotion/react';
+import { B400, N500, N800 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
+import { constants } from '../../shared';
+var REACTIONS_CONTAINER_WIDTH = 48;
+var REACTION_RIGHT_MARGIN = 8;
+/* we want to display around 9 reactions and show 10th one as faded so removing 2px from REACTIONS_CONTAINER_WIDTH*/
+
+var CONTAINER_WIDTH = constants.NUMBER_OF_REACTIONS_TO_DISPLAY * (REACTIONS_CONTAINER_WIDTH + REACTION_RIGHT_MARGIN) + REACTIONS_CONTAINER_WIDTH - 2;
+var REACTION_CONTAINER_HEIGHT = 48;
+/*Reactions Container. Using pseudo Element :after to set border since with onClick of Reaction to higlight the
+border blue below the reaction. Setting Border Width based on number of reactions to make sure it shows up
+in case the container overflows */
+
+export var containerStyle = function containerStyle(reactionsBorderWidth) {
+  return css({
+    overflow: 'hidden',
+    maxWidth: "".concat(CONTAINER_WIDTH, "px"),
+    height: '100%',
+    display: 'flex',
+    justifyContent: 'start',
+    position: 'relative',
+    scrollBehavior: 'smooth',
+    '&:after': {
+      content: '""',
+      zIndex: 0,
+      display: 'block',
+      minWidth: "".concat(reactionsBorderWidth, "%"),
+      bottom: '0px',
+      position: 'absolute'
+    }
+  });
+};
+export var titleStyle = css({
+  '& > h1': {
+    fontSize: '24px!important',
+    color: "".concat(token('color.text', N800))
+  }
+});
+var containerEdgeAngle = {
+  rightEdge: 270,
+  leftEdge: 90
+};
+export var counterStyle = function counterStyle(isSelected) {
+  return css({
+    display: 'flex',
+    alignSelf: 'center',
+    lineHeight: '14px',
+    fontSize: '11px',
+    fontWeight: isSelected ? 700 : 400,
+    paddingRight: '0px',
+    marginTop: '5px',
+    '> div': {
+      width: '100%',
+      padding: '0px!important',
+      //Counter component has its own styles overriding them to match designs
+      color: isSelected ? "".concat(token('color.text', B400), "!important") : "2px solid ".concat(token('color.text', N500), "!important")
+    }
+  });
+};
+
+var fadedCss = function fadedCss(edge, theme) {
+  return css({
+    content: '""',
+    position: 'absolute',
+    left: '0px',
+    top: '0px',
+    width: "".concat(REACTIONS_CONTAINER_WIDTH, "px"),
+    height: "".concat(REACTION_CONTAINER_HEIGHT, "px"),
+    zIndex: 0,
+    background: theme === 'dark' || theme === 'legacy-dark' ? "linear-gradient(".concat(containerEdgeAngle[edge], "deg, rgba(34, 39, 43, 0.95) 40.23%, rgba(34, 39, 43, 0.55) 58.33%, rgba(34, 39, 43, 0) 77.49%)") : "linear-gradient(".concat(containerEdgeAngle[edge], "deg, rgba(255, 255, 255, 0.95) 40.23%, rgba(255, 255, 255, 0.55) 58.33%, rgba(255, 255, 255, 0) 77.49%)")
+  });
+};
+
+export var customTabWrapper = function customTabWrapper(isSelected, selectedEmojiId, theme) {
+  return css({
+    flexShrink: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    textAlign: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: "".concat(REACTIONS_CONTAINER_WIDTH, "px"),
+    minHeight: "".concat(REACTION_CONTAINER_HEIGHT, "px"),
+    marginRight: "".concat(REACTION_RIGHT_MARGIN, "px"),
+    boxSizing: 'border-box',
+    position: 'relative',
+    '> div': {
+      minWidth: "".concat(REACTIONS_CONTAINER_WIDTH, "px"),
+      minHeight: "".concat(REACTION_CONTAINER_HEIGHT, "px"),
+      padding: '0px !important',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    '& > span': {
+      minHeight: '16px',
+      minWidth: '16px'
+    },
+    '&.disabled:after': fadedCss('rightEdge', theme),
+    '&.disabled + &.disabled:after': fadedCss('leftEdge', theme),
+    '&:after': isSelected ? {
+      content: '""',
+      borderBottom: "2px solid ".concat(token('color.text', B400)),
+      width: "".concat(REACTIONS_CONTAINER_WIDTH, "px"),
+      bottom: '0px',
+      display: 'block',
+      position: 'absolute',
+      zIndex: 2
+    } : {
+      content: '""',
+      borderBottom: "2px solid transparent",
+      width: "".concat(REACTIONS_CONTAINER_WIDTH, "px"),
+      bottom: '0px',
+      display: 'block',
+      position: 'absolute',
+      zIndex: 1
+    }
+  });
+};
+export var navigationContainerStyle = css({
+  '> button': {
+    cursor: 'pointer'
+  },
+  'button:last-child': {
+    marginLeft: '16px'
+  }
+});
+export var reactionViewStyle = css({
+  marginTop: '24px',
+  display: 'flex',
+  flexDirection: 'column',
+  p: {
+    margin: 0,
+    color: "".concat(token('color.text', N800)),
+    textTransform: 'capitalize',
+    fontWeight: 600,
+    fontSize: 16,
+    lineHeight: '20px',
+    '> span': {
+      marginRight: 8
+    }
+  }
+});
+export var userListStyle = css({
+  listStyle: 'none',
+  marginTop: 16,
+  padding: 0,
+  textAlign: 'left',
+  li: {
+    color: "".concat(token('color.text', N500)),
+    fontSize: 14
+  }
+});
+export var userStyle = css({
+  display: 'flex',
+  alignItems: 'center',
+  padding: '8px 0px 8px 0px',
+  '> span': {
+    marginLeft: 16
+  }
+});
+export var customTabListStyles = css({
+  overflow: 'auto',
+  scrollBehavior: 'smooth',
+  display: 'flex',
+  paddingBottom: 4,
+  'div[role=tablist]': {
+    flexGrow: 1
+  }
+});
+export var centerSpinner = css({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '100%'
+});

package/dist/esm/components/ReactionPicker/ReactionPicker.js

@@ -67,11 +67,15 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
       allowAllEmojis = props.allowAllEmojis,
       disabled = props.disabled,
       pickerQuickReactionEmojiIds = props.pickerQuickReactionEmojiIds,
-      onShowMore = props.onShowMore,
-      onOpen = props.onOpen,
-      onCancel = props.onCancel,
+      _props$onShowMore = props.onShowMore,
+      onShowMore = _props$onShowMore === void 0 ? function () {} : _props$onShowMore,
+      _props$onOpen = props.onOpen,
+      onOpen = _props$onOpen === void 0 ? function () {} : _props$onOpen,
+      _props$onCancel = props.onCancel,
+      onCancel = _props$onCancel === void 0 ? function () {} : _props$onCancel,
       _props$tooltipContent = props.tooltipContent,
-      tooltipContent = _props$tooltipContent === void 0 ? jsx(FormattedMessage, i18n.messages.addReaction) : _props$tooltipContent;
+      tooltipContent = _props$tooltipContent === void 0 ? jsx(FormattedMessage, i18n.messages.addReaction) : _props$tooltipContent,
+      emojiPickerSize = props.emojiPickerSize;
   /**
    * Container <div /> reference (used by custom hook to detect click outside)
    */
@@ -103,10 +107,7 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
 
 
   useClickAway(wrapperRef, function () {
-    if (onCancel) {
-      onCancel();
-    }
-
+    onCancel();
     close();
   }, 'click', true);
   /**
@@ -139,10 +140,7 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
       isOpen: true,
       showFullPicker: true
     });
-
-    if (onShowMore) {
-      onShowMore();
-    }
+    onShowMore();
   }, [onShowMore]);
   /**
    * Event callback when an emoji icon is selected
@@ -169,11 +167,7 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
       isOpen: !settings.isOpen,
       showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0
     });
-
-    if (onOpen) {
-      onOpen();
-    } // ufo reactions picker opened success
-
+    onOpen(); // ufo reactions picker opened success
 
     UFO.PickerRender.success();
   };
@@ -193,7 +187,6 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
   return jsx("div", {
     className: wrapperClassName,
     css: styles.pickerStyle,
-    ref: wrapperRef,
     "data-testid": RENDER_REACTIONPICKER_TESTID
   }, jsx(Manager, null, jsx(Reference, null, function (_ref) {
     var popperRef = _ref.ref;
@@ -225,10 +218,12 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
       }, style),
       ref: ref
     }, jsx("div", {
-      css: styles.popupStyle
+      css: styles.popupStyle,
+      ref: wrapperRef
     }, settings.showFullPicker ? jsx(EmojiPicker, {
       emojiProvider: emojiProvider,
-      onSelection: onEmojiSelected
+      onSelection: onEmojiSelected,
+      size: emojiPickerSize
     }) : jsx("div", {
       css: styles.contentStyle
     }, jsx(Selector, {

package/dist/esm/components/ReactionTooltip/ReactionTooltip.js

@@ -13,31 +13,45 @@ import * as styles from './styles';
 
 export var RENDER_REACTIONTOOLTIP_TESTID = 'render-reactionTooltip';
 export var ReactionTooltip = function ReactionTooltip(_ref) {
-  var emojiName = _ref.emojiName,
-      children = _ref.children,
+  var children = _ref.children,
+      emojiName = _ref.emojiName,
+      _ref$reaction = _ref.reaction,
+      _ref$reaction$users = _ref$reaction.users,
+      users = _ref$reaction$users === void 0 ? [] : _ref$reaction$users,
+      _ref$reaction$emojiId = _ref$reaction.emojiId,
+      emojiId = _ref$reaction$emojiId === void 0 ? '' : _ref$reaction$emojiId,
       _ref$maxReactions = _ref.maxReactions,
       maxReactions = _ref$maxReactions === void 0 ? constants.TOOLTIP_USERS_LIMIT : _ref$maxReactions,
-      _ref$reaction$users = _ref.reaction.users,
-      users = _ref$reaction$users === void 0 ? [] : _ref$reaction$users;
+      handleUserListClick = _ref.handleUserListClick,
+      _ref$allowUserDialog = _ref.allowUserDialog,
+      allowUserDialog = _ref$allowUserDialog === void 0 ? false : _ref$allowUserDialog,
+      _ref$isEnabled = _ref.isEnabled,
+      isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
 
   /**
    * Render list of users in the tooltip box
    */
-  var content = !users || users.length === 0 ? null : jsx("div", {
-    css: styles.tooltipStyle
+  var content = !users || users.length === 0 || !isEnabled ? null : jsx("div", {
+    css: styles.tooltipStyle,
+    tabIndex: 0
   }, jsx("ul", null, emojiName ? jsx("li", {
     css: styles.emojiNameStyle
-  }, emojiName) : null, users.slice(0, maxReactions).map(function (user, index) {
+  }, emojiName) : null, users.slice(0, maxReactions).map(function (user) {
     return jsx("li", {
-      key: index
+      key: user.id
     }, user.displayName);
-  }), users.length > maxReactions ? jsx("li", {
-    css: styles.footerStyle
-  }, jsx(FormattedMessage, _extends({}, i18n.messages.otherUsers, {
+  }), jsx("li", {
+    css: allowUserDialog ? [styles.footerStyle, styles.underlineStyle] : styles.footerStyle,
+    onClick: function onClick() {
+      if (allowUserDialog && handleUserListClick) {
+        handleUserListClick(emojiId);
+      }
+    }
+  }, users.length > maxReactions ? jsx(FormattedMessage, _extends({}, i18n.messages.otherUsers, {
     values: {
       count: users.length - maxReactions
     }
-  }))) : null));
+  })) : allowUserDialog && jsx(FormattedMessage, i18n.messages.moreInfo))));
   return jsx(Tooltip, {
     content: content,
     position: "bottom",

package/dist/esm/components/ReactionTooltip/styles.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
 import { token } from '@atlaskit/tokens';
-import { N90 } from '@atlaskit/theme/colors';
+import { N90, N800, N0 } from '@atlaskit/theme/colors';
 export var verticalMargin = 5;
 export var tooltipStyle = css({
   maxWidth: '150px',
@@ -29,4 +29,12 @@ export var emojiNameStyle = css({
 export var footerStyle = css({
   color: token('color.text.inverse', N90),
   fontWeight: 300
+});
+export var underlineStyle = css({
+  cursor: 'pointer',
+  textDecoration: 'underline',
+  ':hover': {
+    backgroundColor: token('color.background.neutral.bold', N800),
+    color: token('color.text.inverse', N0)
+  }
 });