@atlaskit/reactions 25.3.0 → 25.5.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/reactions
 
+## 25.5.0
+
+### Minor Changes
+
+- [#113818](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113818)
+  [`ae63179ab3076`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ae63179ab3076) -
+  [ux] Reactions Dialog changed after leadership review to remove border from meatball menu. Also
+  misc fixes like fixing button accessibility for the meatball, and removing left navigation button
+  from tablist
+
+## 25.4.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 25.4.0
+
+### Minor Changes
+
+- [#115405](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/115405)
+  [`8f77c2c8c5307`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8f77c2c8c5307) -
+  [ux] Adds the isViewOnly prop to the reactions component, making the picker disabled and
+  preventing addition of new reactions
+
 ## 25.3.0
 
 ### Minor Changes

package/dist/cjs/MockReactionsClient.js

@@ -23,7 +23,8 @@ var getReactionSummary = exports.getReactionSummary = function getReactionSummar
     containerAri: containerAri,
     emojiId: getReactionsByShortName.id,
     count: count,
-    reacted: reacted
+    reacted: reacted,
+    users: defaultUsers
   };
 };
 var getUser = exports.getUser = function getUser(id, displayName) {

package/dist/cjs/analytics/index.js

@@ -11,7 +11,7 @@ var _analyticsGasTypes = require("@atlaskit/analytics-gas-types");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/reactions";
-var packageVersion = "25.3.0";
+var packageVersion = "25.5.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -75,7 +75,9 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
     _ref$showParticleEffe = _ref.showParticleEffect,
     showParticleEffect = _ref$showParticleEffe === void 0 ? false : _ref$showParticleEffe,
     _ref$showOpaqueBackgr = _ref.showOpaqueBackground,
-    showOpaqueBackground = _ref$showOpaqueBackgr === void 0 ? false : _ref$showOpaqueBackgr;
+    showOpaqueBackground = _ref$showOpaqueBackgr === void 0 ? false : _ref$showOpaqueBackgr,
+    allowUserDialog = _ref.allowUserDialog,
+    handleOpenReactionsDialog = _ref.handleOpenReactionsDialog;
   var intl = (0, _reactIntlNext.useIntl)();
   var hoverStart = (0, _react.useRef)();
   var focusStart = (0, _react.useRef)();
@@ -157,7 +159,9 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
   }), (0, _react2.jsx)(_ReactionTooltip.ReactionTooltip, {
     emojiName: emojiName,
     reaction: reaction,
-    isEnabled: isTooltipEnabled
+    isEnabled: isTooltipEnabled,
+    allowUserDialog: allowUserDialog,
+    handleOpenReactionsDialog: handleOpenReactionsDialog
   }, (0, _react2.jsx)(_ReactionButton.ReactionButton, {
     onClick: handleClick,
     flash: flash,

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

@@ -38,9 +38,7 @@ var centerSpinnerStyle = (0, _primitives.xcss)({
   marginTop: 'space.300'
 });
 var ReactionView = exports.ReactionView = function ReactionView(_ref) {
-  var selectedEmojiId = _ref.selectedEmojiId,
-    emojiProvider = _ref.emojiProvider,
-    reaction = _ref.reaction,
+  var reaction = _ref.reaction,
     ProfileCardWrapper = _ref.ProfileCardWrapper;
   var alphabeticalNames = (0, _react.useMemo)(function () {
     var _reactionObj$users;
@@ -52,9 +50,7 @@ var ReactionView = exports.ReactionView = function ReactionView(_ref) {
   return (0, _react2.jsx)(_tabs.TabPanel, null, (0, _react2.jsx)(_primitives.Flex, {
     direction: "column",
     xcss: reactionViewStyle
-  }, alphabeticalNames.length === 0 ?
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  (0, _react2.jsx)(_primitives.Box, {
+  }, alphabeticalNames.length === 0 ? (0, _react2.jsx)(_primitives.Box, {
     xcss: centerSpinnerStyle
   }, (0, _react2.jsx)(_spinner.default, {
     size: "large"

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

@@ -29,13 +29,6 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * Test id for the Reactions modal dialog
  */
 var RENDER_MODAL_TESTID = exports.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
-  };
-};
 var modalBodyStyle = (0, _primitives.xcss)({
   marginBottom: 'space.300'
 });
@@ -51,29 +44,15 @@ var ReactionsDialog = exports.ReactionsDialog = function ReactionsDialog(_ref) {
     handleSelectReaction = _ref$handleSelectReac === void 0 ? function () {} : _ref$handleSelectReac,
     _ref$handlePagination = _ref.handlePaginationChange,
     handlePaginationChange = _ref$handlePagination === void 0 ? function () {} : _ref$handlePagination,
-    ProfileCardWrapper = _ref.ProfileCardWrapper,
-    handleReactionMouseEnter = _ref.handleReactionMouseEnter;
-  var _useState = (0, _react.useState)(),
+    ProfileCardWrapper = _ref.ProfileCardWrapper;
+  var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    elementToScroll = _useState2[0],
-    setElementToScroll = _useState2[1];
-  var _useState3 = (0, _react.useState)(null),
+    hasNavigatedPages = _useState2[0],
+    setHasNavigatedPages = _useState2[1];
+  var _useState3 = (0, _react.useState)(1),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    reactionsContainerRef = _useState4[0],
-    setReactionsContainerRef = _useState4[1];
-
-  // prevents accidental triggering of handlePaginationChange on initial load
-  var _useState5 = (0, _react.useState)(false),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    hasNavigatedPages = _useState6[0],
-    setHasNavigatedPages = _useState6[1];
-  var _useState7 = (0, _react.useState)(1),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    currentPage = _useState8[0],
-    setCurrentPage = _useState8[1];
-  var reactionElementsRef = (0, _react.useRef)();
-  var observerRef = (0, _react.useRef)();
-  var isSelectedEmojiViewed = (0, _react.useRef)(false);
+    currentPage = _useState4[0],
+    setCurrentPage = _useState4[1];
   var totalReactionsCount = (0, _react.useMemo)(function () {
     return reactions.reduce(function (accum, current) {
       return accum += current === null || current === void 0 ? void 0 : current.count;
@@ -109,72 +88,6 @@ var ReactionsDialog = exports.ReactionsDialog = function ReactionsDialog(_ref) {
   var reactionsBorderWidth = (0, _react.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 = (0, _react.useCallback)(function (entries) {
-    entries.forEach(function (entry) {
-      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 || (_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 || (_observerRef$current = observerRef.current) === null || _observerRef$current === 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
-  }, []);
   var selectedIndex = currentReactions.findIndex(function (reaction) {
     return reaction.emojiId === selectedEmojiId;
   });
@@ -208,12 +121,10 @@ var ReactionsDialog = exports.ReactionsDialog = function ReactionsDialog(_ref) {
   }), (0, _react2.jsx)(_modalDialog.ModalBody, null, (0, _react2.jsx)(_primitives.Box, {
     xcss: modalBodyStyle
   }, (0, _react2.jsx)("div", {
-    css: (0, _styles.containerStyle)(reactionsBorderWidth),
-    ref: setRef
+    css: (0, _styles.containerStyle)(reactionsBorderWidth)
   }, (0, _react2.jsx)(_ReactionsList.ReactionsList, {
     selectedEmojiId: selectedEmojiId,
     reactions: currentReactions,
-    emojiProvider: emojiProvider,
     ProfileCardWrapper: ProfileCardWrapper
   }))))));
 };

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

@@ -37,15 +37,16 @@ var containerEdgeAngle = {
   leftEdge: 90
 };
 var leftNavigationStyle = (0, _primitives.xcss)({
-  marginLeft: 'space.200',
+  marginTop: 'space.050',
   alignSelf: 'self-start',
-  marginTop: 'space.050'
+  paddingLeft: 'space.200',
+  paddingBottom: 'space.150'
 });
 var rightNavigationStyle = (0, _primitives.xcss)({
-  marginRight: 'space.100',
-  marginLeft: 'auto',
+  marginTop: 'space.050',
   alignSelf: 'self-start',
-  marginTop: 'space.050'
+  marginLeft: 'auto',
+  marginRight: 'space.100'
 });
 var fadedCss = function fadedCss(edge, theme) {
   return (0, _react2.css)({
@@ -68,10 +69,15 @@ var customTabListStyles = (0, _react2.css)({
   'div[role=tablist]': {
     flexGrow: 1,
     // paddingInline exists to maintain styling prior to @atlaskit/tabs update that removed baked in horizontal padding
-    paddingInline: "var(--ds-space-100, 8px)"
+    paddingInline: "var(--ds-space-100, 8px)",
+    // we add our own border bottom below since tablist border is not full width
+    '&::before': {
+      backgroundColor: 'transparent'
+    }
   },
   width: ' 100%',
-  alignItems: 'flex-start'
+  alignItems: 'flex-start',
+  borderBottom: "1px solid ".concat("var(--ds-border, #EBECF0)")
 });
 var customTabWrapper = function customTabWrapper(theme) {
   return (0, _react2.css)({
@@ -179,7 +185,7 @@ var ReactionsDialogHeader = exports.ReactionsDialogHeader = function ReactionsDi
   var isSinglePage = maxPages === 1;
   var isOnFirstPage = currentPage === 1;
   var isOnLastPage = currentPage === maxPages;
-  var handleHover = function handleHover(reaction) {
+  var handleMouseEnterTab = function handleMouseEnterTab(reaction) {
     var emojiId = reaction.emojiId;
     if (!emojiId || cache[emojiId]) {
       return;
@@ -231,9 +237,9 @@ var ReactionsDialogHeader = exports.ReactionsDialogHeader = function ReactionsDi
   })), (0, _react2.jsx)(_primitives.Inline, null, (0, _react2.jsx)("div", {
     css: customTabListStyles,
     id: "reactions-dialog-tabs-list"
-  }, (0, _react2.jsx)(_tabs.TabList, null, !isSinglePage && !isOnFirstPage && (0, _react2.jsx)(LeftNavigationButton, {
+  }, !isSinglePage && !isOnFirstPage && (0, _react2.jsx)(LeftNavigationButton, {
     handlePreviousPage: handlePreviousPage
-  }), currentReactions.map(function (reaction, index) {
+  }), (0, _react2.jsx)(_tabs.TabList, null, currentReactions.map(function (reaction, index) {
     var emojiId = {
       id: reaction.emojiId,
       shortName: ''
@@ -249,7 +255,7 @@ var ReactionsDialogHeader = exports.ReactionsDialogHeader = function ReactionsDi
         key: reaction.emojiId,
         "data-testid": emojiId === null || emojiId === void 0 ? void 0 : emojiId.id,
         onMouseEnter: function onMouseEnter() {
-          return handleHover(reaction);
+          handleMouseEnterTab(reaction);
         }
       }, (0, _react2.jsx)(_tabs.Tab, null, (0, _react2.jsx)(_tooltip.default, {
         content: cache[reaction.emojiId],

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

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReactionsDialogTrigger = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _primitives = require("@atlaskit/primitives");
+var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
+var _reactIntlNext = require("react-intl-next");
+var _i18n = require("../../shared/i18n");
+var triggerStyles = (0, _primitives.xcss)({
+  marginRight: 'space.050',
+  marginTop: 'space.050',
+  minWidth: '32px',
+  height: '24px',
+  borderRadius: 'border.radius.100',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+var transparentEnabledTriggerStyles = (0, _primitives.xcss)({
+  borderColor: 'color.border',
+  ':hover': {
+    backgroundColor: 'color.background.neutral.subtle.hovered'
+  },
+  ':active': {
+    backgroundColor: 'color.background.neutral.subtle.pressed'
+  }
+});
+// Currently not in use due to Reactions Dialog trigger being moved to tooltip
+// Similar to platform/packages/elements/reactions/src/components/Trigger/Trigger.tsx
+var ReactionsDialogTrigger = exports.ReactionsDialogTrigger = function ReactionsDialogTrigger(_ref) {
+  var onClick = _ref.onClick;
+  var intl = (0, _reactIntlNext.useIntl)();
+  return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+    xcss: [triggerStyles, transparentEnabledTriggerStyles],
+    backgroundColor: "color.background.neutral.subtle",
+    padding: "space.0",
+    onClick: onClick,
+    "aria-label": intl.formatMessage(_i18n.messages.seeWhoReactedTooltip)
+  }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    content: intl.formatMessage(_i18n.messages.seeWhoReactedTooltip)
+  }, /*#__PURE__*/_react.default.createElement(_showMoreHorizontal.default, {
+    label: intl.formatMessage(_i18n.messages.seeWhoReacted)
+  })));
+};

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

@@ -16,15 +16,12 @@ var _ReactionView = require("./ReactionView");
 var ReactionsList = exports.ReactionsList = function ReactionsList(_ref) {
   var reactions = _ref.reactions,
     selectedEmojiId = _ref.selectedEmojiId,
-    emojiProvider = _ref.emojiProvider,
     ProfileCardWrapper = _ref.ProfileCardWrapper;
   return (0, _react.jsx)(_primitives.Box, null, reactions.map(function (reaction) {
     if (reaction.emojiId === selectedEmojiId) {
       return (0, _react.jsx)(_ReactionView.ReactionView, {
         key: reaction.emojiId,
         reaction: reaction,
-        selectedEmojiId: selectedEmojiId,
-        emojiProvider: emojiProvider,
         ProfileCardWrapper: ProfileCardWrapper
       });
     } else {

package/dist/cjs/components/ReactionSummary/ReactionSummaryView.js

@@ -9,15 +9,10 @@ exports.ReactionSummaryView = exports.RENDER_SUMMARY_VIEW_POPUP_TESTID = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactIntlNext = require("react-intl-next");
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 var _primitives = require("@atlaskit/primitives");
-var _new = _interopRequireDefault(require("@atlaskit/button/new"));
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
 var _Reaction = require("../Reaction");
 var _ReactionSummaryButton = require("./ReactionSummaryButton");
-var _i18n = require("../../shared/i18n");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var summaryPopupStyles = (0, _primitives.xcss)({
@@ -25,12 +20,6 @@ var summaryPopupStyles = (0, _primitives.xcss)({
   paddingTop: 'space.050',
   maxWidth: '325px'
 });
-var viewAllButtonStyling = (0, _primitives.xcss)({
-  marginTop: 'space.050'
-});
-var iconStyle = (0, _primitives.xcss)({
-  height: '20px'
-});
 
 /**
  * Test id for the Reactions summary view popup
@@ -53,9 +42,8 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
     showOpaqueBackground = _ref$showOpaqueBackgr === void 0 ? false : _ref$showOpaqueBackgr,
     _ref$subtleReactionsS = _ref.subtleReactionsSummaryAndPicker,
     subtleReactionsSummaryAndPicker = _ref$subtleReactionsS === void 0 ? false : _ref$subtleReactionsS,
-    handleOpenReactionsDialog = _ref.handleOpenReactionsDialog,
-    allowUserDialog = _ref.allowUserDialog;
-  var intl = (0, _reactIntlNext.useIntl)();
+    allowUserDialog = _ref.allowUserDialog,
+    handleOpenReactionsDialog = _ref.handleOpenReactionsDialog;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isSummaryPopupOpen = _useState2[0],
@@ -84,29 +72,11 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
           onFocused: onReactionFocused,
           onMouseEnter: onReactionMouseEnter,
           flash: flash[reaction.emojiId],
-          showParticleEffect: particleEffectByEmoji[reaction.emojiId]
+          showParticleEffect: particleEffectByEmoji[reaction.emojiId],
+          allowUserDialog: allowUserDialog,
+          handleOpenReactionsDialog: handleOpenReactionsDialog
         });
-      }), allowUserDialog && /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-        xcss: viewAllButtonStyling
-      }, /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
-        backgroundColor: "color.background.neutral.subtle",
-        padding: "space.0"
-      }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-        content: intl.formatMessage(_i18n.messages.seeWhoReactedTooltip)
-      }, function (tooltipProps) {
-        return /*#__PURE__*/_react.default.createElement(_new.default, (0, _extends2.default)({}, tooltipProps, {
-          spacing: "compact",
-          onClick: function onClick() {
-            handlePopupClose();
-            handleOpenReactionsDialog === null || handleOpenReactionsDialog === void 0 || handleOpenReactionsDialog(reactions[0].emojiId);
-          }
-        }), /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
-          alignItems: "center",
-          xcss: iconStyle
-        }, /*#__PURE__*/_react.default.createElement(_showMoreHorizontal.default, {
-          label: intl.formatMessage(_i18n.messages.seeWhoReacted)
-        })));
-      }))));
+      }));
     },
     isOpen: isSummaryPopupOpen,
     onClose: handlePopupClose,

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

@@ -32,10 +32,9 @@ var ReactionTooltip = exports.ReactionTooltip = function ReactionTooltip(_ref) {
     _ref$maxReactions = _ref.maxReactions,
     maxReactions = _ref$maxReactions === void 0 ? _constants.TOOLTIP_USERS_LIMIT : _ref$maxReactions,
     _ref$isEnabled = _ref.isEnabled,
-    isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
-  /**
-   * Render list of users in the tooltip box
-   */
+    isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled,
+    allowUserDialog = _ref.allowUserDialog,
+    handleOpenReactionsDialog = _ref.handleOpenReactionsDialog;
   var content = !users || users.length === 0 || !isEnabled ? null :
   // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, jsx-a11y/no-noninteractive-tabindex -- Ignored via go/DSP-18766
   (0, _react2.jsx)("div", {
@@ -49,7 +48,12 @@ var ReactionTooltip = exports.ReactionTooltip = function ReactionTooltip(_ref) {
     }, user.displayName);
   }), (0, _react2.jsx)("li", {
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    css: _styles.footerStyle
+    css: allowUserDialog ? [_styles.footerStyle, _styles.underlineStyle] : _styles.footerStyle,
+    onClick: function onClick() {
+      if (allowUserDialog && handleOpenReactionsDialog) {
+        handleOpenReactionsDialog();
+      }
+    }
   }, users.length > maxReactions && (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.otherUsers, {
     values: {
       count: users.length - maxReactions

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");
 var _colors = require("@atlaskit/theme/colors");
 /**
@@ -46,4 +46,15 @@ var emojiNameStyle = exports.emojiNameStyle = (0, _react.css)({
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var footerStyle = exports.footerStyle = (0, _react.css)({
   color: "var(--ds-text-inverse, ".concat(_colors.N90, ")")
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var underlineStyle = exports.underlineStyle = (0, _react.css)({
+  cursor: 'pointer',
+  textDecoration: 'underline',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  ':hover': {
+    backgroundColor: "var(--ds-background-neutral-bold, ".concat(_colors.N800, ")"),
+    color: "var(--ds-text-inverse, ".concat(_colors.N0, ")")
+  }
 });

package/dist/cjs/components/Reactions/Reactions.js

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.Reactions = exports.RENDER_VIEWALL_REACTED_USERS_DIALOG = exports.RENDER_REACTIONS_TESTID = exports.RENDER_REACTIONS_SUMMARY_TESTID = void 0;
 exports.getTooltip = getTooltip;
 exports.ufoExperiences = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
@@ -16,11 +15,7 @@ var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _modalDialog = require("@atlaskit/modal-dialog");
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-var _primitives = require("@atlaskit/primitives");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
-var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _analytics = require("../../analytics");
 var _constants = require("../../shared/constants");
 var _i18n = require("../../shared/i18n");
@@ -89,13 +84,6 @@ function getTooltip(status, errorMessage) {
       return (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.addReaction);
   }
 }
-var dialogEntrypointButtonStyle = (0, _primitives.xcss)({
-  marginRight: 'space.050',
-  marginTop: 'space.050'
-});
-var iconStyle = (0, _primitives.xcss)({
-  height: '20px'
-});
 
 /**
  * Renders list of reactions
@@ -112,8 +100,6 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     pickerQuickReactionEmojiIds = _ref.pickerQuickReactionEmojiIds,
     _ref$getReactionDetai = _ref.getReactionDetails,
     getReactionDetails = _ref$getReactionDetai === void 0 ? function () {} : _ref$getReactionDetai,
-    _ref$onReactionHover = _ref.onReactionHover,
-    onReactionHover = _ref$onReactionHover === void 0 ? function () {} : _ref$onReactionHover,
     onSelection = _ref.onSelection,
     _ref$reactions = _ref.reactions,
     reactions = _ref$reactions === void 0 ? [] : _ref$reactions,
@@ -150,14 +136,15 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     _ref$onlyRenderPicker = _ref.onlyRenderPicker,
     onlyRenderPicker = _ref$onlyRenderPicker === void 0 ? false : _ref$onlyRenderPicker,
     _ref$showRoundTrigger = _ref.showRoundTrigger,
-    showRoundTrigger = _ref$showRoundTrigger === void 0 ? false : _ref$showRoundTrigger;
+    showRoundTrigger = _ref$showRoundTrigger === void 0 ? false : _ref$showRoundTrigger,
+    _ref$isViewOnly = _ref.isViewOnly,
+    isViewOnly = _ref$isViewOnly === void 0 ? false : _ref$isViewOnly;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     selectedEmojiId = _useState2[0],
     setSelectedEmojiId = _useState2[1];
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
-  var intl = (0, _reactIntlNext.useIntl)();
   var openTime = (0, _react.useRef)();
   var renderTime = (0, _react.useRef)();
   (0, _react.useEffect)(function () {
@@ -180,8 +167,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
   }, [createAnalyticsEvent, status]);
   var handleReactionMouseEnter = (0, _react.useCallback)(function (emojiId) {
     getReactionDetails(emojiId);
-    onReactionHover(emojiId);
-  }, [getReactionDetails, onReactionHover]);
+  }, [getReactionDetails]);
   var handleReactionFocused = (0, _react.useCallback)(function (emojiId) {
     getReactionDetails(emojiId);
   }, [getReactionDetails]);
@@ -203,27 +189,6 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     openTime.current = undefined;
     onSelection(emojiId);
   }, [createAnalyticsEvent, onSelection, reactions]);
-
-  /**
-   * event handler to open dialog with selected reaction
-   * @param emojiId selected emoji id
-   */
-  var handleOpenReactionsDialog = function handleOpenReactionsDialog(emojiId) {
-    // ufo start opening reaction dialog
-    ufoExperiences.openDialog.start();
-    getReactionDetails(emojiId);
-    setSelectedEmojiId(emojiId);
-    onDialogOpenCallback(emojiId, 'button');
-
-    // ufo opening reaction dialog success
-    ufoExperiences.openDialog.success({
-      metadata: {
-        emojiId: emojiId,
-        source: 'Reactions',
-        reason: 'Opening Reactions Dialog successfully'
-      }
-    });
-  };
   var handleCloseReactionsDialog = function handleCloseReactionsDialog(e, analyticsEvent) {
     // ufo closing opening reaction dialog
     ufoExperiences.closeDialog.start();
@@ -315,6 +280,29 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       return (b === null || b === void 0 ? void 0 : b.count) - (a === null || a === void 0 ? void 0 : a.count);
     });
   }, [memorizedReactions]);
+
+  /**
+   * event handler to open dialog with selected reaction
+   * @param emojiId initial emoji id to load dialog with
+   */
+  var handleOpenReactionsDialog = function handleOpenReactionsDialog() {
+    var emojiId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : sortedReactions[0].emojiId;
+    var source = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'endOfPageReactions';
+    // ufo start opening reaction dialog
+    ufoExperiences.openDialog.start();
+    getReactionDetails(emojiId);
+    setSelectedEmojiId(emojiId);
+    onDialogOpenCallback(emojiId, source);
+
+    // ufo opening reaction dialog success
+    ufoExperiences.openDialog.success({
+      metadata: {
+        emojiId: emojiId,
+        source: 'Reactions',
+        reason: 'Opening Reactions Dialog successfully'
+      }
+    });
+  };
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     (0, _react2.jsx)("div", {
@@ -345,28 +333,11 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
         onFocused: handleReactionFocused,
         flash: flash[reaction.emojiId],
         showParticleEffect: particleEffectByEmoji[reaction.emojiId],
-        showOpaqueBackground: showOpaqueBackground
+        showOpaqueBackground: showOpaqueBackground,
+        allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions,
+        handleOpenReactionsDialog: handleOpenReactionsDialog
       });
-    })), !onlyRenderPicker && allowUserDialog && hasEmojiWithFivePlusReactions && !shouldShowSummaryView && (0, _react2.jsx)(_primitives.Box, {
-      xcss: dialogEntrypointButtonStyle
-    }, (0, _react2.jsx)(_primitives.Pressable, {
-      backgroundColor: "color.background.neutral.subtle",
-      padding: "space.0"
-    }, (0, _react2.jsx)(_tooltip.default, {
-      content: intl.formatMessage(_i18n.messages.seeWhoReactedTooltip)
-    }, function (tooltipProps) {
-      return (0, _react2.jsx)(_new.default, (0, _extends2.default)({}, tooltipProps, {
-        spacing: "compact",
-        onClick: function onClick() {
-          return handleOpenReactionsDialog(sortedReactions[0].emojiId);
-        }
-      }), (0, _react2.jsx)(_primitives.Flex, {
-        alignItems: "center",
-        xcss: iconStyle
-      }, (0, _react2.jsx)(_showMoreHorizontal.default, {
-        label: intl.formatMessage(_i18n.messages.seeWhoReacted)
-      })));
-    }))), (0, _react2.jsx)(_ReactionPicker.ReactionPicker
+    })), !isViewOnly && (0, _react2.jsx)(_ReactionPicker.ReactionPicker
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     , {
       css: _styles.reactionPickerStyle,