@atlaskit/reactions 24.2.0 → 24.3.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @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

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.2.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/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

@@ -183,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
    */
@@ -311,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,
@@ -328,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
       });

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.2.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/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

@@ -150,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
    */
@@ -274,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,
@@ -290,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

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

package/dist/esm/components/Reaction/Reaction.js

@@ -63,9 +63,6 @@ export var 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 = useIntl();
@@ -140,10 +137,6 @@ export var Reaction = function Reaction(_ref) {
     createAndFireSafe(createAnalyticsEvent, createReactionFocusedEvent, hoverStart.current);
     onFocused(reaction.emojiId, event);
   }, [createAnalyticsEvent, reaction, onFocused]);
-  var handleOpenReactionsDialog = function handleOpenReactionsDialog(emojiId) {
-    handleUserListClick(emojiId);
-    setIsTooltipEnabled(false);
-  };
   var buttonStyles = showOpaqueBackground ? [opaqueBackgroundStyles] : [];
   return jsx(Box, {
     xcss: containerStyles
@@ -153,8 +146,6 @@ export var Reaction = function Reaction(_ref) {
   }), jsx(ReactionTooltip, {
     emojiName: emojiName,
     reaction: reaction,
-    handleUserListClick: handleOpenReactionsDialog,
-    allowUserDialog: allowUserDialog,
     isEnabled: isTooltipEnabled
   }, jsx(ReactionButton, {
     onClick: handleClick,

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

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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';
 var summaryPopupStyles = xcss({
@@ -23,8 +23,6 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
     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,
@@ -61,8 +59,6 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
           onFocused: onReactionFocused,
           onMouseEnter: onReactionMouseEnter,
           flash: flash[reaction.emojiId],
-          handleUserListClick: handleOpenReactionsDialog,
-          allowUserDialog: allowUserDialog,
           showParticleEffect: particleEffectByEmoji[reaction.emojiId]
         });
       }));

package/dist/esm/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
@@ -19,16 +19,10 @@ export var RENDER_REACTIONTOOLTIP_TESTID = 'render-reactionTooltip';
 export var 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 ? 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;
   /**
@@ -47,17 +41,12 @@ export var ReactionTooltip = function ReactionTooltip(_ref) {
     }, 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: function 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/esm/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 var verticalMargin = 5;
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
@@ -39,15 +39,4 @@ export var emojiNameStyle = css({
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var footerStyle = css({
   color: "var(--ds-text-inverse, ".concat(N90, ")")
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var 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, ".concat(N800, ")"),
-    color: "var(--ds-text-inverse, ".concat(N0, ")")
-  }
 });

package/dist/esm/components/Reactions/Reactions.js

@@ -170,26 +170,6 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     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
    */
@@ -298,8 +278,6 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       emojiProvider: emojiProvider,
       flash: flash,
       particleEffectByEmoji: particleEffectByEmoji,
-      handleOpenReactionsDialog: handleOpenReactionsDialog,
-      allowUserDialog: allowUserDialog,
       onReactionClick: onReactionClick,
       onReactionFocused: handleReactionFocused,
       onReactionMouseEnter: handleReactionMouseEnter,
@@ -315,8 +293,6 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
         onMouseEnter: handleReactionMouseEnter,
         onFocused: handleReactionFocused,
         flash: flash[reaction.emojiId],
-        handleUserListClick: handleOpenReactionsDialog,
-        allowUserDialog: allowUserDialog,
         showParticleEffect: particleEffectByEmoji[reaction.emojiId],
         showOpaqueBackground: showOpaqueBackground
       });

package/dist/esm/shared/i18n.js

@@ -15,11 +15,6 @@ export var 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/types/components/Reaction/Reaction.d.ts

@@ -1,13 +1,12 @@
 import { jsx } from '@emotion/react';
 import { type EmojiProvider } from '@atlaskit/emoji';
 import { type ReactionSummary, type ReactionClick, type ReactionMouseEnter } from '../../types';
-import { type ReactionTooltipProps } from '../ReactionTooltip';
 import { type ReactionFocused } from '../../types/reaction';
 /**
  * Test id for Reaction item wrapper div
  */
 export declare const RENDER_REACTION_TESTID = "render_reaction_wrapper";
-export interface ReactionProps extends Pick<ReactionTooltipProps, 'allowUserDialog'> {
+export interface ReactionProps {
     /**
      * Data for the reaction
      */
@@ -36,10 +35,6 @@ export interface ReactionProps extends Pick<ReactionTooltipProps, 'allowUserDial
      * Show a floating emoji particle effect (usually in response to a new reaction) (defaults to false)
      */
     showParticleEffect?: boolean;
-    /**
-     * Optional function when the user wants to see more users in a modal
-     */
-    handleUserListClick?: (emojiId: string) => void;
     /**
      * Optional prop for using an opaque button background instead of a transparent background
      */
@@ -48,4 +43,4 @@ export interface ReactionProps extends Pick<ReactionTooltipProps, 'allowUserDial
 /**
  * Render an emoji reaction button
  */
-export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, flash, showParticleEffect, handleUserListClick, allowUserDialog, showOpaqueBackground, }: ReactionProps) => jsx.JSX.Element;
+export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, flash, showParticleEffect, showOpaqueBackground, }: ReactionProps) => jsx.JSX.Element;

package/dist/types/components/ReactionSummary/ReactionSummaryView.d.ts

@@ -1,17 +1,12 @@
 /// <reference types="react" />
 import { type Placement } from '@atlaskit/popper';
 import { type ReactionClick, type ReactionFocused, type ReactionMouseEnter } from '../../types';
-import { type ReactionProps } from '../Reaction';
 import { type ReactionsProps } from '../Reactions';
 /**
  * Test id for the Reactions summary view popup
  */
 export declare const RENDER_SUMMARY_VIEW_POPUP_TESTID = "render-summary-view-popup";
-interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider' | 'reactions' | 'flash' | 'particleEffectByEmoji'>, Pick<ReactionProps, 'allowUserDialog'> {
-    /**
-     * Optional function when the user wants to see more users in a modal
-     */
-    handleOpenReactionsDialog: (emojiId: string) => void;
+interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider' | 'reactions' | 'flash' | 'particleEffectByEmoji'> {
     /**
      * Optional prop to change the placement of the summary popup reaction list
      */
@@ -37,5 +32,5 @@ interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider'
      */
     subtleReactionsSummaryAndPicker?: boolean;
 }
-export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, handleOpenReactionsDialog, allowUserDialog, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, }: ReactionSummaryViewProps) => JSX.Element;
+export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, }: ReactionSummaryViewProps) => JSX.Element;
 export {};

package/dist/types/components/ReactionTooltip/ReactionTooltip.d.ts

@@ -22,17 +22,9 @@ export type ReactionTooltipProps = PropsWithChildren<{
      * Optional Max users to show in the displayed tooltip (defaults to 5)
      */
     maxReactions?: number;
-    /**
-     * Optional function when the user wants to see more users in a modal
-     */
-    handleUserListClick?: (emojiId: string) => void;
-    /**
-     * Optional flag to show reactions dialog (defaults to false)
-     */
-    allowUserDialog?: boolean;
     /**
      * Optional flag for enabling tooltip (defaults to true)
      */
     isEnabled?: boolean;
 }>;
-export declare const ReactionTooltip: ({ children, emojiName, reaction: { users, emojiId }, maxReactions, handleUserListClick, allowUserDialog, isEnabled, }: ReactionTooltipProps) => jsx.JSX.Element;
+export declare const ReactionTooltip: ({ children, emojiName, reaction: { users }, maxReactions, isEnabled, }: ReactionTooltipProps) => jsx.JSX.Element;

package/dist/types/components/ReactionTooltip/styles.d.ts

@@ -2,4 +2,3 @@ export declare const verticalMargin = 5;
 export declare const tooltipStyle: import("@emotion/react").SerializedStyles;
 export declare const emojiNameStyle: import("@emotion/react").SerializedStyles;
 export declare const footerStyle: import("@emotion/react").SerializedStyles;
-export declare const underlineStyle: import("@emotion/react").SerializedStyles;

package/dist/types/components/Reactions/Reactions.d.ts

@@ -7,7 +7,6 @@ import { jsx } from '@emotion/react';
 import { type OnCloseHandler } from '@atlaskit/modal-dialog';
 import { type Placement } from '@atlaskit/popper';
 import { type onDialogSelectReactionChange, ReactionStatus, type ReactionClick, type ReactionSummary, type QuickReactionEmojiSummary, type ProfileCardWrapper } from '../../types';
-import { type ReactionProps } from '../Reaction';
 import { type ReactionPickerProps } from '../ReactionPicker';
 import { type SelectorProps } from '../Selector';
 /**
@@ -39,7 +38,7 @@ export declare const RENDER_VIEWALL_REACTED_USERS_DIALOG = "viewall-reacted-user
  * Test id for summary view of reactions
  */
 export declare const RENDER_REACTIONS_SUMMARY_TESTID = "reaction-summary-view";
-export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode'>, Pick<SelectorProps, 'pickerQuickReactionEmojiIds'>, Pick<ReactionProps, 'allowUserDialog'> {
+export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode'>, Pick<SelectorProps, 'pickerQuickReactionEmojiIds'> {
     /**
      * event handler to fetching the reactions
      */
@@ -126,6 +125,10 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * Optional prop for hiding default reactions displayed when there are no existing reactions
      */
     hideDefaultReactions?: boolean;
+    /**
+     * Optional prop from checking a feature gate for rendering Reactions Dialog
+     */
+    allowUserDialog?: boolean;
     /**
      * Optional prop for rendering a profile card wrapper in the Reactions Dialog
      */

package/dist/types/shared/i18n.d.ts

@@ -14,11 +14,6 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
-    moreInfo: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
     reactWithEmoji: {
         id: string;
         defaultMessage: string;

package/dist/types-ts4.5/components/Reaction/Reaction.d.ts

@@ -1,13 +1,12 @@
 import { jsx } from '@emotion/react';
 import { type EmojiProvider } from '@atlaskit/emoji';
 import { type ReactionSummary, type ReactionClick, type ReactionMouseEnter } from '../../types';
-import { type ReactionTooltipProps } from '../ReactionTooltip';
 import { type ReactionFocused } from '../../types/reaction';
 /**
  * Test id for Reaction item wrapper div
  */
 export declare const RENDER_REACTION_TESTID = "render_reaction_wrapper";
-export interface ReactionProps extends Pick<ReactionTooltipProps, 'allowUserDialog'> {
+export interface ReactionProps {
     /**
      * Data for the reaction
      */
@@ -36,10 +35,6 @@ export interface ReactionProps extends Pick<ReactionTooltipProps, 'allowUserDial
      * Show a floating emoji particle effect (usually in response to a new reaction) (defaults to false)
      */
     showParticleEffect?: boolean;
-    /**
-     * Optional function when the user wants to see more users in a modal
-     */
-    handleUserListClick?: (emojiId: string) => void;
     /**
      * Optional prop for using an opaque button background instead of a transparent background
      */
@@ -48,4 +43,4 @@ export interface ReactionProps extends Pick<ReactionTooltipProps, 'allowUserDial
 /**
  * Render an emoji reaction button
  */
-export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, flash, showParticleEffect, handleUserListClick, allowUserDialog, showOpaqueBackground, }: ReactionProps) => jsx.JSX.Element;
+export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, flash, showParticleEffect, showOpaqueBackground, }: ReactionProps) => jsx.JSX.Element;

package/dist/types-ts4.5/components/ReactionSummary/ReactionSummaryView.d.ts

@@ -1,17 +1,12 @@
 /// <reference types="react" />
 import { type Placement } from '@atlaskit/popper';
 import { type ReactionClick, type ReactionFocused, type ReactionMouseEnter } from '../../types';
-import { type ReactionProps } from '../Reaction';
 import { type ReactionsProps } from '../Reactions';
 /**
  * Test id for the Reactions summary view popup
  */
 export declare const RENDER_SUMMARY_VIEW_POPUP_TESTID = "render-summary-view-popup";
-interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider' | 'reactions' | 'flash' | 'particleEffectByEmoji'>, Pick<ReactionProps, 'allowUserDialog'> {
-    /**
-     * Optional function when the user wants to see more users in a modal
-     */
-    handleOpenReactionsDialog: (emojiId: string) => void;
+interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider' | 'reactions' | 'flash' | 'particleEffectByEmoji'> {
     /**
      * Optional prop to change the placement of the summary popup reaction list
      */
@@ -37,5 +32,5 @@ interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider'
      */
     subtleReactionsSummaryAndPicker?: boolean;
 }
-export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, handleOpenReactionsDialog, allowUserDialog, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, }: ReactionSummaryViewProps) => JSX.Element;
+export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, }: ReactionSummaryViewProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/components/ReactionTooltip/ReactionTooltip.d.ts

@@ -22,17 +22,9 @@ export type ReactionTooltipProps = PropsWithChildren<{
      * Optional Max users to show in the displayed tooltip (defaults to 5)
      */
     maxReactions?: number;
-    /**
-     * Optional function when the user wants to see more users in a modal
-     */
-    handleUserListClick?: (emojiId: string) => void;
-    /**
-     * Optional flag to show reactions dialog (defaults to false)
-     */
-    allowUserDialog?: boolean;
     /**
      * Optional flag for enabling tooltip (defaults to true)
      */
     isEnabled?: boolean;
 }>;
-export declare const ReactionTooltip: ({ children, emojiName, reaction: { users, emojiId }, maxReactions, handleUserListClick, allowUserDialog, isEnabled, }: ReactionTooltipProps) => jsx.JSX.Element;
+export declare const ReactionTooltip: ({ children, emojiName, reaction: { users }, maxReactions, isEnabled, }: ReactionTooltipProps) => jsx.JSX.Element;

package/dist/types-ts4.5/components/ReactionTooltip/styles.d.ts

@@ -2,4 +2,3 @@ export declare const verticalMargin = 5;
 export declare const tooltipStyle: import("@emotion/react").SerializedStyles;
 export declare const emojiNameStyle: import("@emotion/react").SerializedStyles;
 export declare const footerStyle: import("@emotion/react").SerializedStyles;
-export declare const underlineStyle: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/components/Reactions/Reactions.d.ts

@@ -7,7 +7,6 @@ import { jsx } from '@emotion/react';
 import { type OnCloseHandler } from '@atlaskit/modal-dialog';
 import { type Placement } from '@atlaskit/popper';
 import { type onDialogSelectReactionChange, ReactionStatus, type ReactionClick, type ReactionSummary, type QuickReactionEmojiSummary, type ProfileCardWrapper } from '../../types';
-import { type ReactionProps } from '../Reaction';
 import { type ReactionPickerProps } from '../ReactionPicker';
 import { type SelectorProps } from '../Selector';
 /**
@@ -39,7 +38,7 @@ export declare const RENDER_VIEWALL_REACTED_USERS_DIALOG = "viewall-reacted-user
  * Test id for summary view of reactions
  */
 export declare const RENDER_REACTIONS_SUMMARY_TESTID = "reaction-summary-view";
-export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode'>, Pick<SelectorProps, 'pickerQuickReactionEmojiIds'>, Pick<ReactionProps, 'allowUserDialog'> {
+export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode'>, Pick<SelectorProps, 'pickerQuickReactionEmojiIds'> {
     /**
      * event handler to fetching the reactions
      */
@@ -126,6 +125,10 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * Optional prop for hiding default reactions displayed when there are no existing reactions
      */
     hideDefaultReactions?: boolean;
+    /**
+     * Optional prop from checking a feature gate for rendering Reactions Dialog
+     */
+    allowUserDialog?: boolean;
     /**
      * Optional prop for rendering a profile card wrapper in the Reactions Dialog
      */

package/dist/types-ts4.5/shared/i18n.d.ts

@@ -14,11 +14,6 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
-    moreInfo: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
     reactWithEmoji: {
         id: string;
         defaultMessage: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "24.2.0",
+	"version": "24.3.0",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"