@atlaskit/reactions 24.1.0 → 24.3.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/reactions
 
+## 24.3.0
+
+### Minor Changes
+
+- [#108357](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/108357)
+  [`dd0053af6d370`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/dd0053af6d370) -
+  [ux] "And X others" entrypoint into Reactions Dialog removed. "More info" entrypoint removed and
+  completely deleted from ReactionTooltip
+
+## 24.2.0
+
+### Minor Changes
+
+- [#108078](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/108078)
+  [`d7e3f8c56ff08`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d7e3f8c56ff08) -
+  [ux] Adds the profileCardWrapper prop which adds an on-hover interaction to the Avatar picture and
+  shows the user's profile card
+
 ## 24.1.0
 
 ### Minor Changes

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 = "24.1.0";
+var packageVersion = "24.3.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -74,9 +74,6 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
     flash = _ref$flash === void 0 ? false : _ref$flash,
     _ref$showParticleEffe = _ref.showParticleEffect,
     showParticleEffect = _ref$showParticleEffe === void 0 ? false : _ref$showParticleEffe,
-    _ref$handleUserListCl = _ref.handleUserListClick,
-    handleUserListClick = _ref$handleUserListCl === void 0 ? function () {} : _ref$handleUserListCl,
-    allowUserDialog = _ref.allowUserDialog,
     _ref$showOpaqueBackgr = _ref.showOpaqueBackground,
     showOpaqueBackground = _ref$showOpaqueBackgr === void 0 ? false : _ref$showOpaqueBackgr;
   var intl = (0, _reactIntlNext.useIntl)();
@@ -151,10 +148,6 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
     (0, _analytics.createAndFireSafe)(createAnalyticsEvent, _analytics.createReactionFocusedEvent, hoverStart.current);
     onFocused(reaction.emojiId, event);
   }, [createAnalyticsEvent, reaction, onFocused]);
-  var handleOpenReactionsDialog = function handleOpenReactionsDialog(emojiId) {
-    handleUserListClick(emojiId);
-    setIsTooltipEnabled(false);
-  };
   var buttonStyles = showOpaqueBackground ? [opaqueBackgroundStyles] : [];
   return (0, _react2.jsx)(_primitives.Box, {
     xcss: containerStyles
@@ -164,8 +157,6 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
   }), (0, _react2.jsx)(_ReactionTooltip.ReactionTooltip, {
     emojiName: emojiName,
     reaction: reaction,
-    handleUserListClick: handleOpenReactionsDialog,
-    allowUserDialog: allowUserDialog,
     isEnabled: isTooltipEnabled
   }, (0, _react2.jsx)(_ReactionButton.ReactionButton, {
     onClick: handleClick,

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

@@ -26,10 +26,14 @@ var _styles = require("./styles");
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+var userDescriptionStyle = (0, _primitives.xcss)({
+  marginLeft: 'space.200'
+});
 var ReactionView = exports.ReactionView = function ReactionView(_ref) {
   var selectedEmojiId = _ref.selectedEmojiId,
     emojiProvider = _ref.emojiProvider,
-    reaction = _ref.reaction;
+    reaction = _ref.reaction,
+    ProfileCardWrapper = _ref.ProfileCardWrapper;
   var _useState = (0, _react.useState)(''),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     emojiShortName = _useState2[0],
@@ -85,7 +89,7 @@ var ReactionView = exports.ReactionView = function ReactionView(_ref) {
         id: selectedEmojiId,
         shortName: ''
       },
-      fitToHeight: 16
+      fitToHeight: 24
     })), 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)("div", {
@@ -104,10 +108,22 @@ var ReactionView = exports.ReactionView = function ReactionView(_ref) {
         (0, _react2.jsx)("li", {
           css: _styles.userStyle,
           key: user.id
+        }, ProfileCardWrapper && user.accountId ? (0, _react2.jsx)(ProfileCardWrapper, {
+          userId: user.accountId,
+          isAnonymous: false,
+          canViewProfile: true,
+          position: "left-start"
         }, (0, _react2.jsx)(_Avatar.default, {
           size: "large",
-          src: profile
-        }), (0, _react2.jsx)("span", null, user.displayName))
+          src: profile,
+          testId: "profile"
+        })) : (0, _react2.jsx)(_Avatar.default, {
+          size: "large",
+          src: profile,
+          testId: "profile"
+        }), (0, _react2.jsx)(_primitives.Flex, {
+          xcss: userDescriptionStyle
+        }, (0, _react2.jsx)("div", null, user.displayName)))
       );
     })))
   );

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

@@ -110,7 +110,8 @@ var ReactionsDialog = exports.ReactionsDialog = function ReactionsDialog(_ref2)
     _ref2$handleSelectRea = _ref2.handleSelectReaction,
     handleSelectReaction = _ref2$handleSelectRea === void 0 ? function () {} : _ref2$handleSelectRea,
     _ref2$handlePaginatio = _ref2.handlePaginationChange,
-    handlePaginationChange = _ref2$handlePaginatio === void 0 ? function () {} : _ref2$handlePaginatio;
+    handlePaginationChange = _ref2$handlePaginatio === void 0 ? function () {} : _ref2$handlePaginatio,
+    ProfileCardWrapper = _ref2.ProfileCardWrapper;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     elementToScroll = _useState2[0],
@@ -251,7 +252,8 @@ var ReactionsDialog = exports.ReactionsDialog = function ReactionsDialog(_ref2)
     initialEmojiId: selectedEmojiId,
     reactions: currentReactions,
     emojiProvider: emojiProvider,
-    onReactionChanged: handleSelectReaction
+    onReactionChanged: handleSelectReaction,
+    ProfileCardWrapper: ProfileCardWrapper
   }))), (0, _react2.jsx)(_modalDialog.ModalFooter, null, (0, _react2.jsx)(_new.default, {
     appearance: "subtle",
     onClick: handleCloseReactionsDialog

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

@@ -32,7 +32,8 @@ var ReactionsList = exports.ReactionsList = function ReactionsList(_ref) {
   var reactions = _ref.reactions,
     initialEmojiId = _ref.initialEmojiId,
     emojiProvider = _ref.emojiProvider,
-    onReactionChanged = _ref.onReactionChanged;
+    onReactionChanged = _ref.onReactionChanged,
+    ProfileCardWrapper = _ref.ProfileCardWrapper;
   var _useState = (0, _react.useState)(function () {
       // Calculate this only on initialize the List of Tabs and each Reactions View collection
       return {
@@ -110,7 +111,8 @@ var ReactionsList = exports.ReactionsList = function ReactionsList(_ref) {
       key: reaction.emojiId,
       reaction: reaction,
       selectedEmojiId: selectedEmoji.id,
-      emojiProvider: emojiProvider
+      emojiProvider: emojiProvider,
+      ProfileCardWrapper: ProfileCardWrapper
     });
   }));
 };

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

@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 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 _popup = _interopRequireDefault(require("@atlaskit/popup"));
 var _primitives = require("@atlaskit/primitives");
-var _react = _interopRequireWildcard(require("react"));
 var _Reaction = require("../Reaction");
 var _ReactionSummaryButton = require("./ReactionSummaryButton");
 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); }
@@ -33,8 +33,6 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
     flash = _ref$flash === void 0 ? {} : _ref$flash,
     _ref$particleEffectBy = _ref.particleEffectByEmoji,
     particleEffectByEmoji = _ref$particleEffectBy === void 0 ? {} : _ref$particleEffectBy,
-    handleOpenReactionsDialog = _ref.handleOpenReactionsDialog,
-    allowUserDialog = _ref.allowUserDialog,
     _ref$placement = _ref.placement,
     placement = _ref$placement === void 0 ? 'auto-start' : _ref$placement,
     onReactionClick = _ref.onReactionClick,
@@ -71,8 +69,6 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
           onFocused: onReactionFocused,
           onMouseEnter: onReactionMouseEnter,
           flash: flash[reaction.emojiId],
-          handleUserListClick: handleOpenReactionsDialog,
-          allowUserDialog: allowUserDialog,
           showParticleEffect: particleEffectByEmoji[reaction.emojiId]
         });
       }));

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

@@ -27,16 +27,10 @@ var RENDER_REACTIONTOOLTIP_TESTID = exports.RENDER_REACTIONTOOLTIP_TESTID = 'ren
 var ReactionTooltip = exports.ReactionTooltip = function ReactionTooltip(_ref) {
   var children = _ref.children,
     emojiName = _ref.emojiName,
-    _ref$reaction = _ref.reaction,
-    _ref$reaction$users = _ref$reaction.users,
+    _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,
-    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;
   /**
@@ -55,17 +49,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: 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)({}, _i18n.messages.otherUsers, {
+    css: _styles.footerStyle
+  }, users.length > maxReactions && (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.otherUsers, {
     values: {
       count: users.length - maxReactions
     }
-  })) : allowUserDialog && (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _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.underlineStyle = exports.tooltipStyle = exports.footerStyle = exports.emojiNameStyle = void 0;
+exports.verticalMargin = exports.tooltipStyle = exports.footerStyle = exports.emojiNameStyle = void 0;
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 /**
@@ -46,15 +46,4 @@ 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

@@ -130,7 +130,8 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     _ref$showAddReactionT = _ref.showAddReactionText,
     showAddReactionText = _ref$showAddReactionT === void 0 ? false : _ref$showAddReactionT,
     _ref$hideDefaultReact = _ref.hideDefaultReactions,
-    hideDefaultReactions = _ref$hideDefaultReact === void 0 ? false : _ref$hideDefaultReact;
+    hideDefaultReactions = _ref$hideDefaultReact === void 0 ? false : _ref$hideDefaultReact,
+    ProfileCardWrapper = _ref.ProfileCardWrapper;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -182,26 +183,6 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     onSelection(emojiId);
   }, [createAnalyticsEvent, onSelection, reactions]);
 
-  /**
-   * event handler to open selected reaction from tooltip
-   * @param emojiId selected emoji id
-   */
-  var handleOpenReactionsDialog = function handleOpenReactionsDialog(emojiId) {
-    // ufo start opening reaction dialog
-    ufoExperiences.openDialog.start();
-    setSelectedEmojiId(emojiId);
-    onDialogOpenCallback(emojiId, 'tooltip');
-
-    // ufo opening reaction dialog success
-    ufoExperiences.openDialog.success({
-      metadata: {
-        emojiId: emojiId,
-        source: 'Reactions',
-        reason: 'Opening dialog from emoji tooltip link successfully'
-      }
-    });
-  };
-
   /**
    * Event handler to oepn all reactions link button
    */
@@ -310,8 +291,6 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       emojiProvider: emojiProvider,
       flash: flash,
       particleEffectByEmoji: particleEffectByEmoji,
-      handleOpenReactionsDialog: handleOpenReactionsDialog,
-      allowUserDialog: allowUserDialog,
       onReactionClick: onReactionClick,
       onReactionFocused: handleReactionFocused,
       onReactionMouseEnter: handleReactionMouseEnter,
@@ -327,8 +306,6 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
         onMouseEnter: handleReactionMouseEnter,
         onFocused: handleReactionFocused,
         flash: flash[reaction.emojiId],
-        handleUserListClick: handleOpenReactionsDialog,
-        allowUserDialog: allowUserDialog,
         showParticleEffect: particleEffectByEmoji[reaction.emojiId],
         showOpaqueBackground: showOpaqueBackground
       });
@@ -370,7 +347,8 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       emojiProvider: emojiProvider,
       handleCloseReactionsDialog: handleCloseReactionsDialog,
       handleSelectReaction: handleSelectReactionInDialog,
-      handlePaginationChange: handlePaginationChange
+      handlePaginationChange: handlePaginationChange,
+      ProfileCardWrapper: ProfileCardWrapper
     })))
   );
 });

package/dist/cjs/shared/i18n.js

@@ -21,11 +21,6 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'More emojis',
     description: 'Tooltip of the "show more" button in the quick reaction selector. The full emoji selector is displayed when the user clicks on it.'
   },
-  moreInfo: {
-    id: 'fabric.reactions.more.info',
-    defaultMessage: 'More info',
-    description: 'Clickable text in a tooltip that will display more information about the users who reacted'
-  },
   reactWithEmoji: {
     id: 'fabric.reactions.reactwithemoji',
     defaultMessage: 'React with {emoji} emoji',

package/dist/es2019/analytics/index.js

@@ -1,7 +1,7 @@
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 const packageName = "@atlaskit/reactions";
-const packageVersion = "24.1.0";
+const packageVersion = "24.3.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/es2019/components/Reaction/Reaction.js

@@ -56,8 +56,6 @@ export const Reaction = ({
   onFocused = () => {},
   flash = false,
   showParticleEffect = false,
-  handleUserListClick = () => {},
-  allowUserDialog,
   showOpaqueBackground = false
 }) => {
   const intl = useIntl();
@@ -116,10 +114,6 @@ export const Reaction = ({
     createAndFireSafe(createAnalyticsEvent, createReactionFocusedEvent, hoverStart.current);
     onFocused(reaction.emojiId, event);
   }, [createAnalyticsEvent, reaction, onFocused]);
-  const handleOpenReactionsDialog = emojiId => {
-    handleUserListClick(emojiId);
-    setIsTooltipEnabled(false);
-  };
   const buttonStyles = showOpaqueBackground ? [opaqueBackgroundStyles] : [];
   return jsx(Box, {
     xcss: containerStyles
@@ -129,8 +123,6 @@ export const Reaction = ({
   }), jsx(ReactionTooltip, {
     emojiName: emojiName,
     reaction: reaction,
-    handleUserListClick: handleOpenReactionsDialog,
-    allowUserDialog: allowUserDialog,
     isEnabled: isTooltipEnabled
   }, jsx(ReactionButton, {
     onClick: handleClick,

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

@@ -11,13 +11,17 @@ import { ResourcedEmoji } from '@atlaskit/emoji/element';
 import Avatar from '@atlaskit/avatar/Avatar';
 import Spinner from '@atlaskit/spinner';
 import { useTabPanel } from '@atlaskit/tabs';
-import { Text } from '@atlaskit/primitives';
+import { Text, Flex, xcss } from '@atlaskit/primitives';
 import { messages } from '../../shared/i18n';
 import { reactionViewStyle, userListStyle, userStyle, centerSpinner } from './styles';
+const userDescriptionStyle = xcss({
+  marginLeft: 'space.200'
+});
 export const ReactionView = ({
   selectedEmojiId,
   emojiProvider,
-  reaction
+  reaction,
+  ProfileCardWrapper
 }) => {
   const [emojiShortName, setEmojiShortName] = useState('');
   useEffect(() => {
@@ -54,7 +58,7 @@ export const ReactionView = ({
         id: selectedEmojiId,
         shortName: ''
       },
-      fitToHeight: 16
+      fitToHeight: 24
     })), 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
     jsx("div", {
@@ -73,10 +77,22 @@ export const ReactionView = ({
         jsx("li", {
           css: userStyle,
           key: user.id
+        }, ProfileCardWrapper && user.accountId ? jsx(ProfileCardWrapper, {
+          userId: user.accountId,
+          isAnonymous: false,
+          canViewProfile: true,
+          position: "left-start"
         }, jsx(Avatar, {
           size: "large",
-          src: profile
-        }), jsx("span", null, user.displayName))
+          src: profile,
+          testId: "profile"
+        })) : jsx(Avatar, {
+          size: "large",
+          src: profile,
+          testId: "profile"
+        }), jsx(Flex, {
+          xcss: userDescriptionStyle
+        }, jsx("div", null, user.displayName)))
       );
     })))
   );

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

@@ -86,7 +86,8 @@ export const ReactionsDialog = ({
   emojiProvider,
   selectedEmojiId,
   handleSelectReaction = () => {},
-  handlePaginationChange = () => {}
+  handlePaginationChange = () => {},
+  ProfileCardWrapper
 }) => {
   var _currentReactions$;
   const [elementToScroll, setElementToScroll] = useState();
@@ -215,7 +216,8 @@ export const ReactionsDialog = ({
     initialEmojiId: selectedEmojiId,
     reactions: currentReactions,
     emojiProvider: emojiProvider,
-    onReactionChanged: handleSelectReaction
+    onReactionChanged: handleSelectReaction,
+    ProfileCardWrapper: ProfileCardWrapper
   }))), jsx(ModalFooter, null, jsx(Button, {
     appearance: "subtle",
     onClick: handleCloseReactionsDialog

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

@@ -19,7 +19,8 @@ export const ReactionsList = ({
   reactions,
   initialEmojiId,
   emojiProvider,
-  onReactionChanged
+  onReactionChanged,
+  ProfileCardWrapper
 }) => {
   const [selectedEmoji, setSelectedEmoji] = useState(() => {
     // Calculate this only on initialize the List of Tabs and each Reactions View collection
@@ -91,6 +92,7 @@ export const ReactionsList = ({
     key: reaction.emojiId,
     reaction: reaction,
     selectedEmojiId: selectedEmoji.id,
-    emojiProvider: emojiProvider
+    emojiProvider: emojiProvider,
+    ProfileCardWrapper: ProfileCardWrapper
   })));
 };

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useState } from 'react';
 import Popup from '@atlaskit/popup';
 import { Inline, xcss } from '@atlaskit/primitives';
-import React, { useCallback, useState } from 'react';
 import { Reaction } from '../Reaction';
 import { ReactionSummaryButton } from './ReactionSummaryButton';
 const summaryPopupStyles = xcss({
@@ -19,8 +19,6 @@ export const ReactionSummaryView = ({
   reactions = [],
   flash = {},
   particleEffectByEmoji = {},
-  handleOpenReactionsDialog,
-  allowUserDialog,
   placement = 'auto-start',
   onReactionClick,
   onReactionFocused,
@@ -46,8 +44,6 @@ export const ReactionSummaryView = ({
       onFocused: onReactionFocused,
       onMouseEnter: onReactionMouseEnter,
       flash: flash[reaction.emojiId],
-      handleUserListClick: handleOpenReactionsDialog,
-      allowUserDialog: allowUserDialog,
       showParticleEffect: particleEffectByEmoji[reaction.emojiId]
     }))),
     isOpen: isSummaryPopupOpen,

package/dist/es2019/components/ReactionTooltip/ReactionTooltip.js

@@ -10,7 +10,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { FormattedMessage } from 'react-intl-next';
 import { TOOLTIP_USERS_LIMIT } from '../../shared/constants';
 import { messages } from '../../shared/i18n';
-import { emojiNameStyle, footerStyle, tooltipStyle, underlineStyle } from './styles';
+import { emojiNameStyle, footerStyle, tooltipStyle } from './styles';
 
 /**
  * Test id for wrapper ReactionTooltip div
@@ -20,12 +20,9 @@ export const ReactionTooltip = ({
   children,
   emojiName,
   reaction: {
-    users = [],
-    emojiId = ''
+    users = []
   },
   maxReactions = TOOLTIP_USERS_LIMIT,
-  handleUserListClick,
-  allowUserDialog = false,
   isEnabled = true
 }) => {
   /**
@@ -44,17 +41,12 @@ export const ReactionTooltip = ({
     }, user.displayName);
   }), 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: allowUserDialog ? [footerStyle, underlineStyle] : footerStyle,
-    onClick: () => {
-      if (allowUserDialog && handleUserListClick) {
-        handleUserListClick(emojiId);
-      }
-    }
-  }, users.length > maxReactions ? jsx(FormattedMessage, _extends({}, messages.otherUsers, {
+    css: footerStyle
+  }, users.length > maxReactions && jsx(FormattedMessage, _extends({}, messages.otherUsers, {
     values: {
       count: users.length - maxReactions
     }
-  })) : allowUserDialog && jsx(FormattedMessage, messages.moreInfo))));
+  })))));
   return jsx(Tooltip, {
     content: content,
     position: "bottom",

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

@@ -4,7 +4,7 @@
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { N90, N800, N0 } from '@atlaskit/theme/colors';
+import { N90 } from '@atlaskit/theme/colors';
 export const verticalMargin = 5;
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
@@ -39,15 +39,4 @@ export const emojiNameStyle = css({
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const footerStyle = css({
   color: `var(--ds-text-inverse, ${N90})`
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const underlineStyle = 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, ${N800})`,
-    color: `var(--ds-text-inverse, ${N0})`
-  }
 });

package/dist/es2019/components/Reactions/Reactions.js

@@ -100,7 +100,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
   showOpaqueBackground = false,
   subtleReactionsSummaryAndPicker = false,
   showAddReactionText = false,
-  hideDefaultReactions = false
+  hideDefaultReactions = false,
+  ProfileCardWrapper
 }) => {
   const [selectedEmojiId, setSelectedEmojiId] = useState();
   const {
@@ -149,26 +150,6 @@ export const Reactions = /*#__PURE__*/React.memo(({
     onSelection(emojiId);
   }, [createAnalyticsEvent, onSelection, reactions]);
 
-  /**
-   * event handler to open selected reaction from tooltip
-   * @param emojiId selected emoji id
-   */
-  const handleOpenReactionsDialog = emojiId => {
-    // ufo start opening reaction dialog
-    ufoExperiences.openDialog.start();
-    setSelectedEmojiId(emojiId);
-    onDialogOpenCallback(emojiId, 'tooltip');
-
-    // ufo opening reaction dialog success
-    ufoExperiences.openDialog.success({
-      metadata: {
-        emojiId,
-        source: 'Reactions',
-        reason: 'Opening dialog from emoji tooltip link successfully'
-      }
-    });
-  };
-
   /**
    * Event handler to oepn all reactions link button
    */
@@ -273,8 +254,6 @@ export const Reactions = /*#__PURE__*/React.memo(({
       emojiProvider: emojiProvider,
       flash: flash,
       particleEffectByEmoji: particleEffectByEmoji,
-      handleOpenReactionsDialog: handleOpenReactionsDialog,
-      allowUserDialog: allowUserDialog,
       onReactionClick: onReactionClick,
       onReactionFocused: handleReactionFocused,
       onReactionMouseEnter: handleReactionMouseEnter,
@@ -289,8 +268,6 @@ export const Reactions = /*#__PURE__*/React.memo(({
       onMouseEnter: handleReactionMouseEnter,
       onFocused: handleReactionFocused,
       flash: flash[reaction.emojiId],
-      handleUserListClick: handleOpenReactionsDialog,
-      allowUserDialog: allowUserDialog,
       showParticleEffect: particleEffectByEmoji[reaction.emojiId],
       showOpaqueBackground: showOpaqueBackground
     })), jsx(ReactionPicker
@@ -331,7 +308,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
       emojiProvider: emojiProvider,
       handleCloseReactionsDialog: handleCloseReactionsDialog,
       handleSelectReaction: handleSelectReactionInDialog,
-      handlePaginationChange: handlePaginationChange
+      handlePaginationChange: handlePaginationChange,
+      ProfileCardWrapper: ProfileCardWrapper
     })))
   );
 });

package/dist/es2019/shared/i18n.js

@@ -15,11 +15,6 @@ export const messages = defineMessages({
     defaultMessage: 'More emojis',
     description: 'Tooltip of the "show more" button in the quick reaction selector. The full emoji selector is displayed when the user clicks on it.'
   },
-  moreInfo: {
-    id: 'fabric.reactions.more.info',
-    defaultMessage: 'More info',
-    description: 'Clickable text in a tooltip that will display more information about the users who reacted'
-  },
   reactWithEmoji: {
     id: 'fabric.reactions.reactwithemoji',
     defaultMessage: 'React with {emoji} emoji',

package/dist/esm/analytics/index.js

@@ -4,7 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 var packageName = "@atlaskit/reactions";
-var packageVersion = "24.1.0";
+var packageVersion = "24.3.0";
 /**
  * TODO: move to utility package?
  * A random sampling function