@atlaskit/reactions 25.4.1 → 25.5.0

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

@@ -56,7 +56,9 @@ export const Reaction = ({
   onFocused = () => {},
   flash = false,
   showParticleEffect = false,
-  showOpaqueBackground = false
+  showOpaqueBackground = false,
+  allowUserDialog,
+  handleOpenReactionsDialog
 }) => {
   const intl = useIntl();
   const hoverStart = useRef();
@@ -123,7 +125,9 @@ export const Reaction = ({
   }), jsx(ReactionTooltip, {
     emojiName: emojiName,
     reaction: reaction,
-    isEnabled: isTooltipEnabled
+    isEnabled: isTooltipEnabled,
+    allowUserDialog: allowUserDialog,
+    handleOpenReactionsDialog: handleOpenReactionsDialog
   }, jsx(ReactionButton, {
     onClick: handleClick,
     flash: flash,

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

@@ -29,8 +29,6 @@ const centerSpinnerStyle = xcss({
   marginTop: 'space.300'
 });
 export const ReactionView = ({
-  selectedEmojiId,
-  emojiProvider,
   reaction,
   ProfileCardWrapper
 }) => {
@@ -42,9 +40,7 @@ export const ReactionView = ({
   return jsx(TabPanel, null, jsx(Flex, {
     direction: "column",
     xcss: reactionViewStyle
-  }, alphabeticalNames.length === 0 ?
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  jsx(Box, {
+  }, alphabeticalNames.length === 0 ? jsx(Box, {
     xcss: centerSpinnerStyle
   }, jsx(Spinner, {
     size: "large"

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

@@ -2,7 +2,7 @@
  * @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';
@@ -17,13 +17,6 @@ import { containerStyle } from './styles';
  * Test id for the Reactions modal dialog
  */
 export const RENDER_MODAL_TESTID = 'render-reactions-modal';
-const 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
-  };
-};
 const modalBodyStyle = xcss({
   marginBottom: 'space.300'
 });
@@ -34,19 +27,11 @@ export const ReactionsDialog = ({
   selectedEmojiId,
   handleSelectReaction = () => {},
   handlePaginationChange = () => {},
-  ProfileCardWrapper,
-  handleReactionMouseEnter
+  ProfileCardWrapper
 }) => {
   var _currentReactions$;
-  const [elementToScroll, setElementToScroll] = useState();
-  const [reactionsContainerRef, setReactionsContainerRef] = useState(null);
-
-  // prevents accidental triggering of handlePaginationChange on initial load
   const [hasNavigatedPages, setHasNavigatedPages] = useState(false);
   const [currentPage, setCurrentPage] = useState(1);
-  const reactionElementsRef = useRef();
-  const observerRef = useRef();
-  const isSelectedEmojiViewed = useRef(false);
   const totalReactionsCount = useMemo(() => {
     return reactions.reduce((accum, current) => {
       return accum += current === null || current === void 0 ? void 0 : current.count;
@@ -78,73 +63,6 @@ export const ReactionsDialog = ({
   const reactionsBorderWidth = useMemo(() => {
     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*/
-  const handleNavigation = useCallback(entries => {
-    entries.forEach(entry => {
-      var _dataset;
-      const element = entry.target;
-      const emojiElement = element === null || element === void 0 ? void 0 : element.querySelector('[data-emoji-id]');
-      const emojiId = emojiElement === null || emojiElement === void 0 ? void 0 : (_dataset = emojiElement.dataset) === null || _dataset === void 0 ? void 0 : _dataset.emojiId;
-      if (entry.intersectionRatio < 1) {
-        element.classList.add('disabled');
-        /*Check if selectedEmoji (passed as props based on what user selects) is out of viewport */
-        if (emojiId === selectedEmojiId && !isSelectedEmojiViewed.current) {
-          setElementToScroll(emojiElement !== null && emojiElement !== void 0 ? emojiElement : undefined);
-        }
-      } else {
-        if (emojiId === selectedEmojiId && !isSelectedEmojiViewed.current) {
-          isSelectedEmojiViewed.current = true;
-        }
-        element.classList.remove('disabled');
-      }
-    });
-  }, [selectedEmojiId]);
-  useEffect(() => {
-    if (elementToScroll && !isSelectedEmojiViewed.current && reactionsContainerRef) {
-      isSelectedEmojiViewed.current = true;
-      const parentElement = elementToScroll.closest('.reaction-elements');
-      const reactionsList = document.querySelector('#reactions-dialog-tabs-list');
-      const {
-        clientWidth
-      } = getDimensions(reactionsList);
-      const 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) {
-        const scrollBy = Math.trunc(offsetLeft / clientWidth) * clientWidth;
-        reactionsList.scrollLeft += scrollBy;
-      }
-    }
-  }, [elementToScroll, reactionsContainerRef]);
-
-  /* Set up InterSectionObserver to observer reaction elements on navigating*/
-  useEffect(() => {
-    if (reactionsContainerRef) {
-      const 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(child => {
-        var _observerRef$current;
-        observerRef === null || observerRef === void 0 ? void 0 : (_observerRef$current = observerRef.current) === null || _observerRef$current === void 0 ? void 0 : _observerRef$current.observe(child);
-      });
-    }
-    return () => {
-      if (observerRef.current) {
-        observerRef.current.disconnect();
-        observerRef.current = undefined;
-      }
-    };
-  }, [reactionsContainerRef, reactions, handleNavigation, selectedEmojiId]);
-  const setRef = useCallback(node => {
-    if (!reactionsContainerRef) {
-      setReactionsContainerRef(node);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
   const selectedIndex = currentReactions.findIndex(reaction => reaction.emojiId === selectedEmojiId);
   const onTabChange = useCallback(index => {
     if (index === selectedIndex) {
@@ -176,12 +94,10 @@ export const ReactionsDialog = ({
   }), 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/es2019/components/ReactionDialog/ReactionsDialogHeader.js

@@ -26,15 +26,16 @@ const containerEdgeAngle = {
   leftEdge: 90
 };
 const leftNavigationStyle = xcss({
-  marginLeft: 'space.200',
+  marginTop: 'space.050',
   alignSelf: 'self-start',
-  marginTop: 'space.050'
+  paddingLeft: 'space.200',
+  paddingBottom: 'space.150'
 });
 const rightNavigationStyle = xcss({
-  marginRight: 'space.100',
-  marginLeft: 'auto',
+  marginTop: 'space.050',
   alignSelf: 'self-start',
-  marginTop: 'space.050'
+  marginLeft: 'auto',
+  marginRight: 'space.100'
 });
 const fadedCss = (edge, theme) => css({
   content: '""',
@@ -55,10 +56,15 @@ const 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 ${"var(--ds-border, #EBECF0)"}`
 });
 const customTabWrapper = theme => css({
   flexShrink: 0,
@@ -167,7 +173,7 @@ export const ReactionsDialogHeader = ({
   const isSinglePage = maxPages === 1;
   const isOnFirstPage = currentPage === 1;
   const isOnLastPage = currentPage === maxPages;
-  const handleHover = reaction => {
+  const handleMouseEnterTab = reaction => {
     const {
       emojiId
     } = reaction;
@@ -175,6 +181,7 @@ export const ReactionsDialogHeader = ({
       return;
     }
     (async () => {
+      // Note: not a network request e.g. ReactedUsersQuery
       const provider = await emojiProvider;
       const emoji = await provider.findByEmojiId({
         shortName: '',
@@ -205,9 +212,9 @@ export const ReactionsDialogHeader = ({
   })), 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((reaction, index) => {
+  }), jsx(TabList, null, currentReactions.map((reaction, index) => {
     const emojiId = {
       id: reaction.emojiId,
       shortName: ''
@@ -222,7 +229,9 @@ export const ReactionsDialogHeader = ({
         className: "reaction-elements",
         key: reaction.emojiId,
         "data-testid": emojiId === null || emojiId === void 0 ? void 0 : emojiId.id,
-        onMouseEnter: () => handleHover(reaction)
+        onMouseEnter: () => {
+          handleMouseEnterTab(reaction);
+        }
       }, jsx(Tab, null, jsx(Tooltip, {
         content: cache[reaction.emojiId],
         canAppear: () => !!cache[reaction.emojiId]

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

@@ -0,0 +1,43 @@
+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';
+const triggerStyles = xcss({
+  marginRight: 'space.050',
+  marginTop: 'space.050',
+  minWidth: '32px',
+  height: '24px',
+  borderRadius: 'border.radius.100',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+const 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 const ReactionsDialogTrigger = ({
+  onClick
+}) => {
+  const 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/es2019/components/ReactionDialog/ReactionsList.js

@@ -9,7 +9,6 @@ import { ReactionView } from './ReactionView';
 export const ReactionsList = ({
   reactions,
   selectedEmojiId,
-  emojiProvider,
   ProfileCardWrapper
 }) => {
   return jsx(Box, null, reactions.map(reaction => {
@@ -17,8 +16,6 @@ export const ReactionsList = ({
       return jsx(ReactionView, {
         key: reaction.emojiId,
         reaction: reaction,
-        selectedEmojiId: selectedEmojiId,
-        emojiProvider: emojiProvider,
         ProfileCardWrapper: ProfileCardWrapper
       });
     } else {

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

@@ -1,25 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 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';
 const summaryPopupStyles = xcss({
   padding: 'space.100',
   paddingTop: 'space.050',
   maxWidth: '325px'
 });
-const viewAllButtonStyling = xcss({
-  marginTop: 'space.050'
-});
-const iconStyle = xcss({
-  height: '20px'
-});
 
 /**
  * Test id for the Reactions summary view popup
@@ -36,10 +25,9 @@ export const ReactionSummaryView = ({
   onReactionMouseEnter,
   showOpaqueBackground = false,
   subtleReactionsSummaryAndPicker = false,
-  handleOpenReactionsDialog,
-  allowUserDialog
+  allowUserDialog,
+  handleOpenReactionsDialog
 }) => {
-  const intl = useIntl();
   const [isSummaryPopupOpen, setSummaryPopupOpen] = useState(false);
   const handlePopupClose = useCallback(() => setSummaryPopupOpen(false), []);
   const handleSummaryClick = useCallback(() => setSummaryPopupOpen(!isSummaryPopupOpen), [isSummaryPopupOpen]);
@@ -59,26 +47,10 @@ export const ReactionSummaryView = ({
       onFocused: onReactionFocused,
       onMouseEnter: onReactionMouseEnter,
       flash: flash[reaction.emojiId],
-      showParticleEffect: particleEffectByEmoji[reaction.emojiId]
-    })), 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)
-    }, tooltipProps => /*#__PURE__*/React.createElement(Button, _extends({}, tooltipProps, {
-      spacing: "compact",
-      onClick: () => {
-        handlePopupClose();
-        handleOpenReactionsDialog === null || handleOpenReactionsDialog === void 0 ? void 0 : handleOpenReactionsDialog(reactions[0].emojiId);
-      }
-    }), /*#__PURE__*/React.createElement(Flex, {
-      alignItems: "center",
-      xcss: iconStyle
-    }, /*#__PURE__*/React.createElement(ShowMoreHorizontalIcon, {
-      label: intl.formatMessage(messages.seeWhoReacted)
-    }))))))),
+      showParticleEffect: particleEffectByEmoji[reaction.emojiId],
+      allowUserDialog: allowUserDialog,
+      handleOpenReactionsDialog: handleOpenReactionsDialog
+    }))),
     isOpen: isSummaryPopupOpen,
     onClose: handlePopupClose,
     trigger: triggerProps => /*#__PURE__*/React.createElement(ReactionSummaryButton, _extends({}, triggerProps, {

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 } from './styles';
+import { emojiNameStyle, footerStyle, tooltipStyle, underlineStyle } from './styles';
 
 /**
  * Test id for wrapper ReactionTooltip div
@@ -23,11 +23,10 @@ export const ReactionTooltip = ({
     users = []
   },
   maxReactions = TOOLTIP_USERS_LIMIT,
-  isEnabled = true
+  isEnabled = true,
+  allowUserDialog,
+  handleOpenReactionsDialog
 }) => {
-  /**
-   * Render list of users in the tooltip box
-   */
   const 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 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: footerStyle
+    css: allowUserDialog ? [footerStyle, underlineStyle] : footerStyle,
+    onClick: () => {
+      if (allowUserDialog && handleOpenReactionsDialog) {
+        handleOpenReactionsDialog();
+      }
+    }
   }, users.length > maxReactions && jsx(FormattedMessage, _extends({}, messages.otherUsers, {
     values: {
       count: users.length - maxReactions

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -6,14 +5,10 @@ import _extends from "@babel/runtime/helpers/extends";
 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';
@@ -74,13 +69,6 @@ export function getTooltip(status, errorMessage) {
       return jsx(FormattedMessage, messages.addReaction);
   }
 }
-const dialogEntrypointButtonStyle = xcss({
-  marginRight: 'space.050',
-  marginTop: 'space.050'
-});
-const iconStyle = xcss({
-  height: '20px'
-});
 
 /**
  * Renders list of reactions
@@ -94,7 +82,6 @@ export const Reactions = /*#__PURE__*/React.memo(({
   quickReactionEmojis,
   pickerQuickReactionEmojiIds,
   getReactionDetails = () => {},
-  onReactionHover = () => {},
   onSelection,
   reactions = [],
   emojiProvider,
@@ -123,7 +110,6 @@ export const Reactions = /*#__PURE__*/React.memo(({
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
-  const intl = useIntl();
   let openTime = useRef();
   let renderTime = useRef();
   useEffect(() => {
@@ -146,8 +132,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
   }, [createAnalyticsEvent, status]);
   const handleReactionMouseEnter = useCallback(emojiId => {
     getReactionDetails(emojiId);
-    onReactionHover(emojiId);
-  }, [getReactionDetails, onReactionHover]);
+  }, [getReactionDetails]);
   const handleReactionFocused = useCallback(emojiId => {
     getReactionDetails(emojiId);
   }, [getReactionDetails]);
@@ -167,27 +152,6 @@ export const Reactions = /*#__PURE__*/React.memo(({
     openTime.current = undefined;
     onSelection(emojiId);
   }, [createAnalyticsEvent, onSelection, reactions]);
-
-  /**
-   * event handler to open dialog with selected reaction
-   * @param emojiId selected emoji id
-   */
-  const 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,
-        source: 'Reactions',
-        reason: 'Opening Reactions Dialog successfully'
-      }
-    });
-  };
   const handleCloseReactionsDialog = (e, analyticsEvent) => {
     // ufo closing opening reaction dialog
     ufoExperiences.closeDialog.start();
@@ -273,6 +237,27 @@ export const Reactions = /*#__PURE__*/React.memo(({
   const sortedReactions = useMemo(() => {
     return [...memorizedReactions].sort((a, b) => (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
+   */
+  const handleOpenReactionsDialog = (emojiId = sortedReactions[0].emojiId, source = '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,
+        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", {
@@ -302,23 +287,10 @@ export const Reactions = /*#__PURE__*/React.memo(({
       onFocused: handleReactionFocused,
       flash: flash[reaction.emojiId],
       showParticleEffect: particleEffectByEmoji[reaction.emojiId],
-      showOpaqueBackground: showOpaqueBackground
-    }))), !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)
-    }, tooltipProps => jsx(Button, _extends({}, tooltipProps, {
-      spacing: "compact",
-      onClick: () => handleOpenReactionsDialog(sortedReactions[0].emojiId)
-    }), jsx(Flex, {
-      alignItems: "center",
-      xcss: iconStyle
-    }, jsx(ShowMoreHorizontalIcon, {
-      label: intl.formatMessage(messages.seeWhoReacted)
-    })))))), !isViewOnly && jsx(ReactionPicker
+      showOpaqueBackground: showOpaqueBackground,
+      allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions,
+      handleOpenReactionsDialog: handleOpenReactionsDialog
+    }))), !isViewOnly && jsx(ReactionPicker
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     , {
       css: reactionPickerStyle,

package/dist/esm/MockReactionsClient.js

@@ -16,7 +16,8 @@ export var getReactionSummary = function getReactionSummary(shortName, count, re
     containerAri: containerAri,
     emojiId: getReactionsByShortName.id,
     count: count,
-    reacted: reacted
+    reacted: reacted,
+    users: defaultUsers
   };
 };
 export var getUser = function getUser(id, displayName) {

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

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

@@ -64,7 +64,9 @@ export var Reaction = function Reaction(_ref) {
     _ref$showParticleEffe = _ref.showParticleEffect,
     showParticleEffect = _ref$showParticleEffe === void 0 ? false : _ref$showParticleEffe,
     _ref$showOpaqueBackgr = _ref.showOpaqueBackground,
-    showOpaqueBackground = _ref$showOpaqueBackgr === void 0 ? false : _ref$showOpaqueBackgr;
+    showOpaqueBackground = _ref$showOpaqueBackgr === void 0 ? false : _ref$showOpaqueBackgr,
+    allowUserDialog = _ref.allowUserDialog,
+    handleOpenReactionsDialog = _ref.handleOpenReactionsDialog;
   var intl = useIntl();
   var hoverStart = useRef();
   var focusStart = useRef();
@@ -146,7 +148,9 @@ export var Reaction = function Reaction(_ref) {
   }), jsx(ReactionTooltip, {
     emojiName: emojiName,
     reaction: reaction,
-    isEnabled: isTooltipEnabled
+    isEnabled: isTooltipEnabled,
+    allowUserDialog: allowUserDialog,
+    handleOpenReactionsDialog: handleOpenReactionsDialog
   }, jsx(ReactionButton, {
     onClick: handleClick,
     flash: flash,

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

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