@atlaskit/reactions 25.4.1 → 25.5.0

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

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { useEffect, useState, useRef, useCallback, useMemo } from 'react';
+import { useEffect, useState, useCallback, useMemo } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import Tabs from '@atlaskit/tabs';
@@ -18,13 +18,6 @@ import { containerStyle } from './styles';
  * Test id for the Reactions modal dialog
  */
 export var RENDER_MODAL_TESTID = 'render-reactions-modal';
-var getDimensions = function getDimensions(container) {
-  return {
-    clientWidth: container === null || container === void 0 ? void 0 : container.clientWidth,
-    scrollWidth: container === null || container === void 0 ? void 0 : container.scrollWidth,
-    scrollLeft: container === null || container === void 0 ? void 0 : container.scrollLeft
-  };
-};
 var modalBodyStyle = xcss({
   marginBottom: 'space.300'
 });
@@ -40,29 +33,15 @@ export var 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 = useState(),
+    ProfileCardWrapper = _ref.ProfileCardWrapper;
+  var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    elementToScroll = _useState2[0],
-    setElementToScroll = _useState2[1];
-  var _useState3 = useState(null),
+    hasNavigatedPages = _useState2[0],
+    setHasNavigatedPages = _useState2[1];
+  var _useState3 = useState(1),
     _useState4 = _slicedToArray(_useState3, 2),
-    reactionsContainerRef = _useState4[0],
-    setReactionsContainerRef = _useState4[1];
-
-  // prevents accidental triggering of handlePaginationChange on initial load
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    hasNavigatedPages = _useState6[0],
-    setHasNavigatedPages = _useState6[1];
-  var _useState7 = useState(1),
-    _useState8 = _slicedToArray(_useState7, 2),
-    currentPage = _useState8[0],
-    setCurrentPage = _useState8[1];
-  var reactionElementsRef = useRef();
-  var observerRef = useRef();
-  var isSelectedEmojiViewed = useRef(false);
+    currentPage = _useState4[0],
+    setCurrentPage = _useState4[1];
   var totalReactionsCount = useMemo(function () {
     return reactions.reduce(function (accum, current) {
       return accum += current === null || current === void 0 ? void 0 : current.count;
@@ -98,72 +77,6 @@ export var ReactionsDialog = function ReactionsDialog(_ref) {
   var reactionsBorderWidth = useMemo(function () {
     return Math.ceil(reactions.length / NUMBER_OF_REACTIONS_TO_DISPLAY) * 100;
   }, [reactions]);
-
-  /* Callback from IntersectionObserver to set/unset classNames based on visibility to toggle styles*/
-  var handleNavigation = useCallback(function (entries) {
-    entries.forEach(function (entry) {
-      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]);
-  useEffect(function () {
-    if (elementToScroll && !isSelectedEmojiViewed.current && reactionsContainerRef) {
-      isSelectedEmojiViewed.current = true;
-      var parentElement = elementToScroll.closest('.reaction-elements');
-      var reactionsList = document.querySelector('#reactions-dialog-tabs-list');
-      var _getDimensions = getDimensions(reactionsList),
-        clientWidth = _getDimensions.clientWidth;
-      var offsetLeft = parentElement === null || parentElement === void 0 ? void 0 : parentElement.offsetLeft;
-      /* which means emoji is not in viewport so scroll to it*/
-      if (reactionsList && offsetLeft > clientWidth) {
-        var scrollBy = Math.trunc(offsetLeft / clientWidth) * clientWidth;
-        reactionsList.scrollLeft += scrollBy;
-      }
-    }
-  }, [elementToScroll, reactionsContainerRef]);
-
-  /* Set up InterSectionObserver to observer reaction elements on navigating*/
-  useEffect(function () {
-    if (reactionsContainerRef) {
-      var options = {
-        root: reactionsContainerRef,
-        rootMargin: '0px',
-        threshold: 1.0
-      };
-      observerRef.current = new IntersectionObserver(handleNavigation, options);
-      reactionElementsRef.current = reactionsContainerRef.querySelectorAll('.reaction-elements');
-      reactionElementsRef.current && reactionElementsRef.current.length > 0 && reactionElementsRef.current.forEach(function (child) {
-        var _observerRef$current;
-        observerRef === null || observerRef === void 0 || (_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 = 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;
   });
@@ -197,12 +110,10 @@ export var ReactionsDialog = function ReactionsDialog(_ref) {
   }), jsx(ModalBody, null, jsx(Box, {
     xcss: modalBodyStyle
   }, jsx("div", {
-    css: containerStyle(reactionsBorderWidth),
-    ref: setRef
+    css: containerStyle(reactionsBorderWidth)
   }, jsx(ReactionsList, {
     selectedEmojiId: selectedEmojiId,
     reactions: currentReactions,
-    emojiProvider: emojiProvider,
     ProfileCardWrapper: ProfileCardWrapper
   }))))));
 };

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

@@ -32,15 +32,16 @@ var containerEdgeAngle = {
   leftEdge: 90
 };
 var leftNavigationStyle = xcss({
-  marginLeft: 'space.200',
+  marginTop: 'space.050',
   alignSelf: 'self-start',
-  marginTop: 'space.050'
+  paddingLeft: 'space.200',
+  paddingBottom: 'space.150'
 });
 var rightNavigationStyle = 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 css({
@@ -63,10 +64,15 @@ var customTabListStyles = 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 css({
@@ -174,7 +180,7 @@ export var ReactionsDialogHeader = function ReactionsDialogHeader(_ref4) {
   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;
@@ -226,9 +232,9 @@ export var ReactionsDialogHeader = function ReactionsDialogHeader(_ref4) {
   })), jsx(Inline, null, jsx("div", {
     css: customTabListStyles,
     id: "reactions-dialog-tabs-list"
-  }, jsx(TabList, null, !isSinglePage && !isOnFirstPage && jsx(LeftNavigationButton, {
+  }, !isSinglePage && !isOnFirstPage && jsx(LeftNavigationButton, {
     handlePreviousPage: handlePreviousPage
-  }), currentReactions.map(function (reaction, index) {
+  }), jsx(TabList, null, currentReactions.map(function (reaction, index) {
     var emojiId = {
       id: reaction.emojiId,
       shortName: ''
@@ -244,7 +250,7 @@ export var ReactionsDialogHeader = function ReactionsDialogHeader(_ref4) {
         key: reaction.emojiId,
         "data-testid": emojiId === null || emojiId === void 0 ? void 0 : emojiId.id,
         onMouseEnter: function onMouseEnter() {
-          return handleHover(reaction);
+          handleMouseEnterTab(reaction);
         }
       }, jsx(Tab, null, jsx(Tooltip, {
         content: cache[reaction.emojiId],

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import Tooltip from '@atlaskit/tooltip';
+import { Pressable, xcss } from '@atlaskit/primitives';
+import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
+import { useIntl } from 'react-intl-next';
+import { messages } from '../../shared/i18n';
+var triggerStyles = xcss({
+  marginRight: 'space.050',
+  marginTop: 'space.050',
+  minWidth: '32px',
+  height: '24px',
+  borderRadius: 'border.radius.100',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+var transparentEnabledTriggerStyles = 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
+export var ReactionsDialogTrigger = function ReactionsDialogTrigger(_ref) {
+  var onClick = _ref.onClick;
+  var intl = useIntl();
+  return /*#__PURE__*/React.createElement(Pressable, {
+    xcss: [triggerStyles, transparentEnabledTriggerStyles],
+    backgroundColor: "color.background.neutral.subtle",
+    padding: "space.0",
+    onClick: onClick,
+    "aria-label": intl.formatMessage(messages.seeWhoReactedTooltip)
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    content: intl.formatMessage(messages.seeWhoReactedTooltip)
+  }, /*#__PURE__*/React.createElement(ShowMoreHorizontalIcon, {
+    label: intl.formatMessage(messages.seeWhoReacted)
+  })));
+};

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

@@ -9,15 +9,12 @@ import { ReactionView } from './ReactionView';
 export var ReactionsList = function ReactionsList(_ref) {
   var reactions = _ref.reactions,
     selectedEmojiId = _ref.selectedEmojiId,
-    emojiProvider = _ref.emojiProvider,
     ProfileCardWrapper = _ref.ProfileCardWrapper;
   return jsx(Box, null, reactions.map(function (reaction) {
     if (reaction.emojiId === selectedEmojiId) {
       return jsx(ReactionView, {
         key: reaction.emojiId,
         reaction: reaction,
-        selectedEmojiId: selectedEmojiId,
-        emojiProvider: emojiProvider,
         ProfileCardWrapper: ProfileCardWrapper
       });
     } else {

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

@@ -1,26 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useCallback, useState } from 'react';
-import { useIntl } from 'react-intl-next';
 import Popup from '@atlaskit/popup';
-import { Box, Inline, Pressable, Flex, xcss } from '@atlaskit/primitives';
-import Button from '@atlaskit/button/new';
-import Tooltip from '@atlaskit/tooltip';
-import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
+import { Inline, xcss } from '@atlaskit/primitives';
 import { Reaction } from '../Reaction';
 import { ReactionSummaryButton } from './ReactionSummaryButton';
-import { messages } from '../../shared/i18n';
 var summaryPopupStyles = xcss({
   padding: 'space.100',
   paddingTop: 'space.050',
   maxWidth: '325px'
 });
-var viewAllButtonStyling = xcss({
-  marginTop: 'space.050'
-});
-var iconStyle = xcss({
-  height: '20px'
-});
 
 /**
  * Test id for the Reactions summary view popup
@@ -43,9 +32,8 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
     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 = useIntl();
+    allowUserDialog = _ref.allowUserDialog,
+    handleOpenReactionsDialog = _ref.handleOpenReactionsDialog;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isSummaryPopupOpen = _useState2[0],
@@ -74,29 +62,11 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
           onFocused: onReactionFocused,
           onMouseEnter: onReactionMouseEnter,
           flash: flash[reaction.emojiId],
-          showParticleEffect: particleEffectByEmoji[reaction.emojiId]
+          showParticleEffect: particleEffectByEmoji[reaction.emojiId],
+          allowUserDialog: allowUserDialog,
+          handleOpenReactionsDialog: handleOpenReactionsDialog
         });
-      }), allowUserDialog && /*#__PURE__*/React.createElement(Box, {
-        xcss: viewAllButtonStyling
-      }, /*#__PURE__*/React.createElement(Pressable, {
-        backgroundColor: "color.background.neutral.subtle",
-        padding: "space.0"
-      }, /*#__PURE__*/React.createElement(Tooltip, {
-        content: intl.formatMessage(messages.seeWhoReactedTooltip)
-      }, function (tooltipProps) {
-        return /*#__PURE__*/React.createElement(Button, _extends({}, tooltipProps, {
-          spacing: "compact",
-          onClick: function onClick() {
-            handlePopupClose();
-            handleOpenReactionsDialog === null || handleOpenReactionsDialog === void 0 || handleOpenReactionsDialog(reactions[0].emojiId);
-          }
-        }), /*#__PURE__*/React.createElement(Flex, {
-          alignItems: "center",
-          xcss: iconStyle
-        }, /*#__PURE__*/React.createElement(ShowMoreHorizontalIcon, {
-          label: intl.formatMessage(messages.seeWhoReacted)
-        })));
-      }))));
+      }));
     },
     isOpen: isSummaryPopupOpen,
     onClose: handlePopupClose,

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 } from './styles';
+import { emojiNameStyle, footerStyle, tooltipStyle, underlineStyle } from './styles';
 
 /**
  * Test id for wrapper ReactionTooltip div
@@ -24,10 +24,9 @@ export var ReactionTooltip = function ReactionTooltip(_ref) {
     _ref$maxReactions = _ref.maxReactions,
     maxReactions = _ref$maxReactions === void 0 ? 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
   jsx("div", {
@@ -41,7 +40,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: footerStyle
+    css: allowUserDialog ? [footerStyle, underlineStyle] : footerStyle,
+    onClick: function onClick() {
+      if (allowUserDialog && handleOpenReactionsDialog) {
+        handleOpenReactionsDialog();
+      }
+    }
   }, users.length > maxReactions && jsx(FormattedMessage, _extends({}, messages.otherUsers, {
     values: {
       count: users.length - maxReactions

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 } from '@atlaskit/theme/colors';
+import { N90, N800, N0 } 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,4 +39,15 @@ 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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /**
@@ -8,14 +7,10 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import { FormattedMessage, useIntl } from 'react-intl-next';
+import { FormattedMessage } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ModalTransition } from '@atlaskit/modal-dialog';
-import Tooltip from '@atlaskit/tooltip';
-import { Box, Pressable, Flex, xcss } from '@atlaskit/primitives';
 import { fg } from '@atlaskit/platform-feature-flags';
-import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
-import Button from '@atlaskit/button/new';
 import { createAndFireSafe, createPickerButtonClickedEvent, createPickerCancelledEvent, createPickerMoreClickedEvent, createReactionsRenderedEvent, createReactionSelectionEvent, isSampled } from '../../analytics';
 import { SAMPLING_RATE_REACTIONS_RENDERED_EXP } from '../../shared/constants';
 import { messages } from '../../shared/i18n';
@@ -76,13 +71,6 @@ export function getTooltip(status, errorMessage) {
       return jsx(FormattedMessage, messages.addReaction);
   }
 }
-var dialogEntrypointButtonStyle = xcss({
-  marginRight: 'space.050',
-  marginTop: 'space.050'
-});
-var iconStyle = xcss({
-  height: '20px'
-});
 
 /**
  * Renders list of reactions
@@ -99,8 +87,6 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     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,
@@ -146,7 +132,6 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     setSelectedEmojiId = _useState2[1];
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
-  var intl = useIntl();
   var openTime = useRef();
   var renderTime = useRef();
   useEffect(function () {
@@ -169,8 +154,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
   }, [createAnalyticsEvent, status]);
   var handleReactionMouseEnter = useCallback(function (emojiId) {
     getReactionDetails(emojiId);
-    onReactionHover(emojiId);
-  }, [getReactionDetails, onReactionHover]);
+  }, [getReactionDetails]);
   var handleReactionFocused = useCallback(function (emojiId) {
     getReactionDetails(emojiId);
   }, [getReactionDetails]);
@@ -192,27 +176,6 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     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();
@@ -304,6 +267,29 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       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
     jsx("div", {
@@ -334,28 +320,11 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
         onFocused: handleReactionFocused,
         flash: flash[reaction.emojiId],
         showParticleEffect: particleEffectByEmoji[reaction.emojiId],
-        showOpaqueBackground: showOpaqueBackground
+        showOpaqueBackground: showOpaqueBackground,
+        allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions,
+        handleOpenReactionsDialog: handleOpenReactionsDialog
       });
-    })), !onlyRenderPicker && allowUserDialog && hasEmojiWithFivePlusReactions && !shouldShowSummaryView && jsx(Box, {
-      xcss: dialogEntrypointButtonStyle
-    }, jsx(Pressable, {
-      backgroundColor: "color.background.neutral.subtle",
-      padding: "space.0"
-    }, jsx(Tooltip, {
-      content: intl.formatMessage(messages.seeWhoReactedTooltip)
-    }, function (tooltipProps) {
-      return jsx(Button, _extends({}, tooltipProps, {
-        spacing: "compact",
-        onClick: function onClick() {
-          return handleOpenReactionsDialog(sortedReactions[0].emojiId);
-        }
-      }), jsx(Flex, {
-        alignItems: "center",
-        xcss: iconStyle
-      }, jsx(ShowMoreHorizontalIcon, {
-        label: intl.formatMessage(messages.seeWhoReacted)
-      })));
-    }))), !isViewOnly && jsx(ReactionPicker
+    })), !isViewOnly && jsx(ReactionPicker
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     , {
       css: reactionPickerStyle,

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

@@ -39,8 +39,16 @@ export interface ReactionProps {
      * Optional prop for using an opaque button background instead of a transparent background
      */
     showOpaqueBackground?: boolean;
+    /**
+     * Optional prop for enabling the Reactions Dialog
+     */
+    allowUserDialog?: boolean;
+    /**
+     * Optional function when the user wants to open the Reactions Dialog
+     */
+    handleOpenReactionsDialog?: (emojiId?: string, source?: string) => void;
 }
 /**
  * Render an emoji reaction button
  */
-export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, flash, showParticleEffect, showOpaqueBackground, }: ReactionProps) => jsx.JSX.Element;
+export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, flash, showParticleEffect, showOpaqueBackground, allowUserDialog, handleOpenReactionsDialog, }: ReactionProps) => jsx.JSX.Element;

package/dist/types/components/ReactionDialog/ReactionView.d.ts

@@ -1,5 +1,4 @@
 import { jsx } from '@emotion/react';
-import { type EmojiProvider } from '@atlaskit/emoji/resource';
 import { type ReactionSummary, type ProfileCardWrapper } from '../../types';
 export interface ReactionViewProps {
     /**
@@ -7,13 +6,8 @@ export interface ReactionViewProps {
      */
     reaction: ReactionSummary;
     /**
-     * Current emoji selected in the reactions dialog
+     * Optional ProfileWrapper component to show profile card on hover
      */
-    selectedEmojiId: string;
-    /**
-     * Provider for loading emojis
-     */
-    emojiProvider: Promise<EmojiProvider>;
     ProfileCardWrapper?: ProfileCardWrapper;
 }
-export declare const ReactionView: ({ selectedEmojiId, emojiProvider, reaction, ProfileCardWrapper, }: ReactionViewProps) => jsx.JSX.Element;
+export declare const ReactionView: ({ reaction, ProfileCardWrapper }: ReactionViewProps) => jsx.JSX.Element;

package/dist/types/components/ReactionDialog/ReactionsDialog.d.ts

@@ -29,6 +29,5 @@ export interface ReactionsDialogProps {
     handleSelectReaction?: (emojiId: string) => void;
     handlePaginationChange?: (emojiId: string, currentPage: number, maxPages: number) => void;
     ProfileCardWrapper?: ProfileCardWrapper;
-    handleReactionMouseEnter?: (emojiId: string) => void;
 }
-export declare const ReactionsDialog: ({ reactions, handleCloseReactionsDialog, emojiProvider, selectedEmojiId, handleSelectReaction, handlePaginationChange, ProfileCardWrapper, handleReactionMouseEnter, }: ReactionsDialogProps) => jsx.JSX.Element;
+export declare const ReactionsDialog: ({ reactions, handleCloseReactionsDialog, emojiProvider, selectedEmojiId, handleSelectReaction, handlePaginationChange, ProfileCardWrapper, }: ReactionsDialogProps) => jsx.JSX.Element;

package/dist/types/components/ReactionDialog/ReactionsDialogTrigger.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface ReactionsDialogTriggerProps {
+    onClick: () => void;
+}
+export declare const ReactionsDialogTrigger: ({ onClick }: ReactionsDialogTriggerProps) => React.JSX.Element;
+export {};

package/dist/types/components/ReactionDialog/ReactionsList.d.ts

@@ -3,7 +3,6 @@
  * @jsx jsx
  */
 import { jsx } from '@emotion/react';
-import { type EmojiProvider } from '@atlaskit/emoji/resource';
 import { type ReactionSummary, type ProfileCardWrapper } from '../../types';
 export interface ReactionsListProps {
     /**
@@ -17,10 +16,9 @@ export interface ReactionsListProps {
     /**
      * Provider for loading emojis
      */
-    emojiProvider: Promise<EmojiProvider>;
     /**
      * A functional component from Confluence to show a profile card on hover
      */
     ProfileCardWrapper?: ProfileCardWrapper;
 }
-export declare const ReactionsList: ({ reactions, selectedEmojiId, emojiProvider, ProfileCardWrapper, }: ReactionsListProps) => jsx.JSX.Element;
+export declare const ReactionsList: ({ reactions, selectedEmojiId, ProfileCardWrapper, }: ReactionsListProps) => jsx.JSX.Element;

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

@@ -32,9 +32,13 @@ interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider'
      */
     subtleReactionsSummaryAndPicker?: boolean;
     /**
-     * Optional function when the user wants to see more users in a modal
+     * Optional prop for enabling the Reactions Dialog
      */
-    handleOpenReactionsDialog?: (emojiId: string) => void;
+    allowUserDialog?: boolean;
+    /**
+     * Optional function when the user wants to open the Reactions Dialog
+     */
+    handleOpenReactionsDialog?: (emojiId?: string, source?: string) => void;
 }
-export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, handleOpenReactionsDialog, allowUserDialog, }: ReactionSummaryViewProps) => React.JSX.Element;
+export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, allowUserDialog, handleOpenReactionsDialog, }: ReactionSummaryViewProps) => React.JSX.Element;
 export {};