@atlaskit/reactions 21.8.1 → 22.0.1

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

@@ -0,0 +1,187 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReactionsDialog = exports.RENDER_MODAL_TESTID = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _reactIntlNext = require("react-intl-next");
+
+var _react2 = require("@emotion/react");
+
+var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+
+var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+
+var _shared = require("../../shared");
+
+var _ReactionsList = require("./ReactionsList");
+
+var _styles = require("./styles");
+
+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; }
+
+/** @jsx jsx */
+
+/**
+ * Test id for the Reactions modal dialog
+ */
+var RENDER_MODAL_TESTID = 'render-reactions-modal';
+exports.RENDER_MODAL_TESTID = RENDER_MODAL_TESTID;
+
+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
+  };
+};
+
+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 = (0, _react.useState)(),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      elementToScroll = _useState2[0],
+      setElementToScroll = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(null),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      reactionsContainerRef = _useState4[0],
+      setReactionsContainerRef = _useState4[1];
+
+  var reactionElementsRef = (0, _react.useRef)();
+  var observerRef = (0, _react.useRef)();
+  var intl = (0, _reactIntlNext.useIntl)();
+  var isSelectedEmojiViewed = (0, _react.useRef)(false);
+  var totalReactionsCount = (0, _react.useMemo)(function () {
+    return reactions.reduce(function (accum, current) {
+      return accum += current === null || current === void 0 ? void 0 : current.count;
+    }, 0);
+  }, [reactions]);
+  var sortedReactions = (0, _react.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 = (0, _react.useMemo)(function () {
+    return Math.ceil(reactions.length / _shared.constants.NUMBER_OF_REACTIONS_TO_DISPLAY) * 100;
+  }, [reactions]);
+  /* Callback from IntersectionObserver to set/unset classNames based on visibility to toggle styles*/
+
+  var handleNavigation = (0, _react.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]);
+  (0, _react.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*/
+
+  (0, _react.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 = (0, _react.useCallback)(function (node) {
+    if (!reactionsContainerRef) {
+      setReactionsContainerRef(node);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, []);
+  return (0, _react2.jsx)(_modalDialog.default, {
+    onClose: handleCloseReactionsDialog,
+    height: 600,
+    testId: RENDER_MODAL_TESTID
+  }, (0, _react2.jsx)(_modalDialog.ModalHeader, null, (0, _react2.jsx)("div", {
+    css: _styles.titleStyle
+  }, (0, _react2.jsx)(_modalDialog.ModalTitle, null, intl.formatMessage(_shared.i18n.messages.reactionsCount, {
+    count: totalReactionsCount
+  })))), (0, _react2.jsx)(_modalDialog.ModalBody, null, (0, _react2.jsx)("div", {
+    css: (0, _styles.containerStyle)(reactionsBorderWidth),
+    ref: setRef
+  }, (0, _react2.jsx)(_ReactionsList.ReactionsList, {
+    initialEmojiId: selectedEmojiId,
+    reactions: sortedReactions,
+    emojiProvider: emojiProvider,
+    onReactionChanged: handleSelectReaction
+  }))), (0, _react2.jsx)(_modalDialog.ModalFooter, null, (0, _react2.jsx)(_standardButton.default, {
+    appearance: "primary",
+    onClick: handleCloseReactionsDialog,
+    autoFocus: true
+  }, intl.formatMessage(_shared.i18n.messages.closeReactionsDialog))));
+};
+
+exports.ReactionsDialog = ReactionsDialog;

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

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReactionsList = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _react2 = require("@emotion/react");
+
+var _element = require("@atlaskit/emoji/element");
+
+var _tabs = _interopRequireWildcard(require("@atlaskit/tabs"));
+
+var _tokens = require("@atlaskit/tokens");
+
+var _Counter = require("../Counter");
+
+var _styles = require("./styles");
+
+var _ReactionView = require("./ReactionView");
+
+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; }
+
+/** @jsx   jsx */
+var ReactionsList = function ReactionsList(_ref) {
+  var reactions = _ref.reactions,
+      initialEmojiId = _ref.initialEmojiId,
+      emojiProvider = _ref.emojiProvider,
+      onReactionChanged = _ref.onReactionChanged;
+
+  var _useState = (0, _react.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 = (0, _slicedToArray2.default)(_useState, 2),
+      selectedEmoji = _useState2[0],
+      setSelectedEmoji = _useState2[1];
+
+  var theme = (0, _tokens.useThemeObserver)();
+  var onTabChange = (0, _react.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 (0, _react2.jsx)(_tabs.default, {
+    id: "reactions-dialog-tabs",
+    onChange: onTabChange,
+    selected: selectedEmoji.index
+  }, (0, _react2.jsx)("div", {
+    css: _styles.customTabListStyles,
+    id: "reactions-dialog-tabs-list"
+  }, (0, _react2.jsx)(_tabs.TabList, null, reactions.map(function (reaction) {
+    var emojiId = {
+      id: reaction.emojiId,
+      shortName: ''
+    };
+    return (0, _react2.jsx)("div", {
+      css: (0, _styles.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
+    }, (0, _react2.jsx)(_tabs.Tab, null, (0, _react2.jsx)(_element.ResourcedEmoji, {
+      emojiProvider: emojiProvider,
+      emojiId: emojiId,
+      fitToHeight: 16,
+      showTooltip: true
+    }), (0, _react2.jsx)("div", {
+      css: (0, _styles.counterStyle)((emojiId === null || emojiId === void 0 ? void 0 : emojiId.id) === selectedEmoji.id)
+    }, (0, _react2.jsx)(_Counter.Counter, {
+      value: reaction.count
+    }))));
+  }))), reactions.map(function (reaction) {
+    return (0, _react2.jsx)(_ReactionView.ReactionView, {
+      key: reaction.emojiId,
+      reaction: reaction,
+      selectedEmojiId: selectedEmoji.id,
+      emojiProvider: emojiProvider
+    });
+  }));
+};
+
+exports.ReactionsList = ReactionsList;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ReactionsDialog", {
+  enumerable: true,
+  get: function get() {
+    return _ReactionsDialog.ReactionsDialog;
+  }
+});
+
+var _ReactionsDialog = require("./ReactionsDialog");

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

@@ -0,0 +1,202 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.userStyle = exports.userListStyle = exports.titleStyle = exports.reactionViewStyle = exports.navigationContainerStyle = exports.customTabWrapper = exports.customTabListStyles = exports.counterStyle = exports.containerStyle = exports.centerSpinner = void 0;
+
+var _react = require("@emotion/react");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _tokens = require("@atlaskit/tokens");
+
+var _shared = require("../../shared");
+
+/** @jsx jsx */
+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 = _shared.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 */
+
+var containerStyle = function containerStyle(reactionsBorderWidth) {
+  return (0, _react.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'
+    }
+  });
+};
+
+exports.containerStyle = containerStyle;
+var titleStyle = (0, _react.css)({
+  '& > h1': {
+    fontSize: '24px!important',
+    color: "".concat((0, _tokens.token)('color.text', _colors.N800))
+  }
+});
+exports.titleStyle = titleStyle;
+var containerEdgeAngle = {
+  rightEdge: 270,
+  leftEdge: 90
+};
+
+var counterStyle = function counterStyle(isSelected) {
+  return (0, _react.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((0, _tokens.token)('color.text', _colors.B400), "!important") : "2px solid ".concat((0, _tokens.token)('color.text', _colors.N500), "!important")
+    }
+  });
+};
+
+exports.counterStyle = counterStyle;
+
+var fadedCss = function fadedCss(edge, theme) {
+  return (0, _react.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%)")
+  });
+};
+
+var customTabWrapper = function customTabWrapper(isSelected, selectedEmojiId, theme) {
+  return (0, _react.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((0, _tokens.token)('color.text', _colors.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
+    }
+  });
+};
+
+exports.customTabWrapper = customTabWrapper;
+var navigationContainerStyle = (0, _react.css)({
+  '> button': {
+    cursor: 'pointer'
+  },
+  'button:last-child': {
+    marginLeft: '16px'
+  }
+});
+exports.navigationContainerStyle = navigationContainerStyle;
+var reactionViewStyle = (0, _react.css)({
+  marginTop: '24px',
+  display: 'flex',
+  flexDirection: 'column',
+  p: {
+    margin: 0,
+    color: "".concat((0, _tokens.token)('color.text', _colors.N800)),
+    textTransform: 'capitalize',
+    fontWeight: 600,
+    fontSize: 16,
+    lineHeight: '20px',
+    '> span': {
+      marginRight: 8
+    }
+  }
+});
+exports.reactionViewStyle = reactionViewStyle;
+var userListStyle = (0, _react.css)({
+  listStyle: 'none',
+  marginTop: 16,
+  padding: 0,
+  textAlign: 'left',
+  li: {
+    color: "".concat((0, _tokens.token)('color.text', _colors.N500)),
+    fontSize: 14
+  }
+});
+exports.userListStyle = userListStyle;
+var userStyle = (0, _react.css)({
+  display: 'flex',
+  alignItems: 'center',
+  padding: '8px 0px 8px 0px',
+  '> span': {
+    marginLeft: 16
+  }
+});
+exports.userStyle = userStyle;
+var customTabListStyles = (0, _react.css)({
+  overflow: 'auto',
+  scrollBehavior: 'smooth',
+  display: 'flex',
+  paddingBottom: 4,
+  'div[role=tablist]': {
+    flexGrow: 1
+  }
+});
+exports.customTabListStyles = customTabListStyles;
+var centerSpinner = (0, _react.css)({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '100%'
+});
+exports.centerSpinner = centerSpinner;

package/dist/cjs/components/ReactionPicker/ReactionPicker.js

@@ -94,11 +94,15 @@ var ReactionPicker = /*#__PURE__*/_react.default.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 ? (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _shared.i18n.messages.addReaction) : _props$tooltipContent;
+      tooltipContent = _props$tooltipContent === void 0 ? (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _shared.i18n.messages.addReaction) : _props$tooltipContent,
+      emojiPickerSize = props.emojiPickerSize;
   /**
    * Container <div /> reference (used by custom hook to detect click outside)
    */
@@ -130,10 +134,7 @@ var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
 
 
   (0, _hooks.useClickAway)(wrapperRef, function () {
-    if (onCancel) {
-      onCancel();
-    }
-
+    onCancel();
     close();
   }, 'click', true);
   /**
@@ -166,10 +167,7 @@ var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
       isOpen: true,
       showFullPicker: true
     });
-
-    if (onShowMore) {
-      onShowMore();
-    }
+    onShowMore();
   }, [onShowMore]);
   /**
    * Event callback when an emoji icon is selected
@@ -197,11 +195,7 @@ var ReactionPicker = /*#__PURE__*/_react.default.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
 
     _analytics.UFO.PickerRender.success();
   };
@@ -221,7 +215,6 @@ var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
   return (0, _react2.jsx)("div", {
     className: wrapperClassName,
     css: styles.pickerStyle,
-    ref: wrapperRef,
     "data-testid": RENDER_REACTIONPICKER_TESTID
   }, (0, _react2.jsx)(_popper.Manager, null, (0, _react2.jsx)(_popper.Reference, null, function (_ref) {
     var popperRef = _ref.ref;
@@ -253,10 +246,12 @@ var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
       }, style),
       ref: ref
     }, (0, _react2.jsx)("div", {
-      css: styles.popupStyle
+      css: styles.popupStyle,
+      ref: wrapperRef
     }, settings.showFullPicker ? (0, _react2.jsx)(_picker.EmojiPicker, {
       emojiProvider: emojiProvider,
-      onSelection: onEmojiSelected
+      onSelection: onEmojiSelected,
+      size: emojiPickerSize
     }) : (0, _react2.jsx)("div", {
       css: styles.contentStyle
     }, (0, _react2.jsx)(_Selector.Selector, {

package/dist/cjs/components/ReactionTooltip/ReactionTooltip.js

@@ -36,31 +36,45 @@ var RENDER_REACTIONTOOLTIP_TESTID = 'render-reactionTooltip';
 exports.RENDER_REACTIONTOOLTIP_TESTID = RENDER_REACTIONTOOLTIP_TESTID;
 
 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 ? _shared.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 : (0, _react2.jsx)("div", {
-    css: styles.tooltipStyle
+  var content = !users || users.length === 0 || !isEnabled ? null : (0, _react2.jsx)("div", {
+    css: styles.tooltipStyle,
+    tabIndex: 0
   }, (0, _react2.jsx)("ul", null, emojiName ? (0, _react2.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 (0, _react2.jsx)("li", {
-      key: index
+      key: user.id
     }, user.displayName);
-  }), users.length > maxReactions ? (0, _react2.jsx)("li", {
-    css: styles.footerStyle
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _shared.i18n.messages.otherUsers, {
+  }), (0, _react2.jsx)("li", {
+    css: allowUserDialog ? [styles.footerStyle, styles.underlineStyle] : styles.footerStyle,
+    onClick: function onClick() {
+      if (allowUserDialog && handleUserListClick) {
+        handleUserListClick(emojiId);
+      }
+    }
+  }, users.length > maxReactions ? (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _shared.i18n.messages.otherUsers, {
     values: {
       count: users.length - maxReactions
     }
-  }))) : null));
+  })) : allowUserDialog && (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _shared.i18n.messages.moreInfo))));
   return (0, _react2.jsx)(_tooltip.default, {
     content: content,
     position: "bottom",

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.verticalMargin = exports.tooltipStyle = exports.footerStyle = exports.emojiNameStyle = void 0;
+exports.verticalMargin = exports.underlineStyle = exports.tooltipStyle = exports.footerStyle = exports.emojiNameStyle = void 0;
 
 var _react = require("@emotion/react");
 
@@ -43,4 +43,13 @@ var footerStyle = (0, _react.css)({
   color: (0, _tokens.token)('color.text.inverse', _colors.N90),
   fontWeight: 300
 });
-exports.footerStyle = footerStyle;
+exports.footerStyle = footerStyle;
+var underlineStyle = (0, _react.css)({
+  cursor: 'pointer',
+  textDecoration: 'underline',
+  ':hover': {
+    backgroundColor: (0, _tokens.token)('color.background.neutral.bold', _colors.N800),
+    color: (0, _tokens.token)('color.text.inverse', _colors.N0)
+  }
+});
+exports.underlineStyle = underlineStyle;