@atlaskit/reactions 25.0.0 → 25.1.0

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

@@ -6,13 +6,14 @@ 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 } from 'react-intl-next';
+import { FormattedMessage, useIntl } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ModalTransition } from '@atlaskit/modal-dialog';
-import Button from '@atlaskit/button/new';
 import Tooltip from '@atlaskit/tooltip';
-import { Box, xcss } from '@atlaskit/primitives';
+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';
@@ -42,10 +43,6 @@ export const ufoExperiences = {
   selectedReactionChangeInsideDialog: ReactionDialogSelectedReactionChanged,
   pageNavigated: ReactionDialogPageNavigation
 };
-const dialogEntrypointButtonStyle = xcss({
-  marginRight: 'space.050',
-  marginTop: 'space.050'
-});
 
 /**
  * Test id for wrapper Reactions div
@@ -77,6 +74,13 @@ 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
@@ -116,6 +120,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
+  const intl = useIntl();
   let openTime = useRef();
   let renderTime = useRef();
   useEffect(() => {
@@ -297,14 +302,20 @@ export const Reactions = /*#__PURE__*/React.memo(({
       showOpaqueBackground: showOpaqueBackground
     })), allowUserDialog && hasEmojiWithFivePlusReactions && !shouldShowSummaryView && jsx(Box, {
       xcss: dialogEntrypointButtonStyle
+    }, jsx(Pressable, {
+      backgroundColor: "color.background.neutral.subtle",
+      padding: "space.0"
     }, jsx(Tooltip, {
-      content: jsx(FormattedMessage, messages.seeWhoReactedTooltip),
-      hideTooltipOnClick: true
+      content: intl.formatMessage(messages.seeWhoReactedTooltip)
     }, tooltipProps => jsx(Button, _extends({}, tooltipProps, {
       spacing: "compact",
-      onClick: () => handleOpenReactionsDialog(sortedReactions[0].emojiId),
-      testId: RENDER_VIEWALL_REACTED_USERS_DIALOG
-    }), jsx(FormattedMessage, messages.seeWhoReacted)))), jsx(ReactionPicker
+      onClick: () => handleOpenReactionsDialog(sortedReactions[0].emojiId)
+    }), jsx(Flex, {
+      alignItems: "center",
+      xcss: iconStyle
+    }, jsx(ShowMoreHorizontalIcon, {
+      label: intl.formatMessage(messages.seeWhoReacted)
+    })))))), jsx(ReactionPicker
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     , {
       css: reactionPickerStyle,

package/dist/es2019/shared/i18n.js

@@ -72,10 +72,5 @@ export const messages = defineMessages({
     id: 'reactions.dialog.viewall.tooltip',
     defaultMessage: 'View all user reactions',
     description: 'Tooltip content of see who reacted link'
-  },
-  peopleWhoReactedSubheading: {
-    id: 'reactions.dialog.people-who-reacted.subheader',
-    defaultMessage: 'People who reacted with {emojiShortName}',
-    description: 'Subheading that shows the user which emoji tab they are on'
   }
 });

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

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

@@ -1,22 +1,14 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { useEffect, useState, useMemo } from 'react';
-import { FormattedMessage } from 'react-intl-next';
+import { useMemo } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import { ResourcedEmoji } from '@atlaskit/emoji/element';
 import Avatar from '@atlaskit/avatar/Avatar';
 import Spinner from '@atlaskit/spinner';
 import { TabPanel } from '@atlaskit/tabs';
-import { Box, Flex, xcss, Inline } from '@atlaskit/primitives';
-import Heading from '@atlaskit/heading';
-import { messages } from '../../shared/i18n';
+import { Box, Flex, xcss } from '@atlaskit/primitives';
 import { userListStyle, userStyle } from './styles';
 var userDescriptionStyle = xcss({
   marginLeft: 'space.150'
@@ -25,7 +17,7 @@ var profileWrapperStyle = xcss({
   marginLeft: 'space.0'
 });
 var reactionViewStyle = xcss({
-  marginTop: 'space.300',
+  marginTop: 'space.150',
   minHeight: '300px',
   minWidth: '550px'
 });
@@ -36,52 +28,11 @@ var centerSpinnerStyle = xcss({
   height: '100%',
   marginTop: 'space.300'
 });
-var headerStyle = xcss({
-  alignItems: 'flex-end'
-});
-var emojiSpacingStlye = xcss({
-  marginLeft: 'space.100'
-});
 export var ReactionView = function ReactionView(_ref) {
   var selectedEmojiId = _ref.selectedEmojiId,
     emojiProvider = _ref.emojiProvider,
     reaction = _ref.reaction,
     ProfileCardWrapper = _ref.ProfileCardWrapper;
-  var _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    emojiName = _useState2[0],
-    setEmojiName = _useState2[1];
-  useEffect(function () {
-    _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var provider, emoji, capitalizedName;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            _context.next = 2;
-            return emojiProvider;
-          case 2:
-            provider = _context.sent;
-            _context.next = 5;
-            return provider.findByEmojiId({
-              shortName: '',
-              id: selectedEmojiId
-            });
-          case 5:
-            emoji = _context.sent;
-            if (emoji !== null && emoji !== void 0 && emoji.name) {
-              // capitalize first letter of each string
-              capitalizedName = emoji.name.replace(/\b\w/g, function (char) {
-                return char.toUpperCase();
-              });
-              setEmojiName(capitalizedName);
-            }
-          case 7:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }))();
-  }, [emojiProvider, selectedEmojiId, reaction]);
   var alphabeticalNames = useMemo(function () {
     var _reactionObj$users;
     var reactionObj = reaction;
@@ -92,25 +43,7 @@ export var ReactionView = function ReactionView(_ref) {
   return jsx(TabPanel, null, jsx(Flex, {
     direction: "column",
     xcss: reactionViewStyle
-  }, jsx(Inline, {
-    xcss: headerStyle
-  }, jsx(Heading, {
-    size: "xsmall"
-  }, jsx(FormattedMessage, _extends({}, messages.peopleWhoReactedSubheading, {
-    values: {
-      emojiShortName: emojiName
-    }
-  }))), jsx(Box, {
-    as: "span",
-    xcss: emojiSpacingStlye
-  }, jsx(ResourcedEmoji, {
-    emojiProvider: emojiProvider,
-    emojiId: {
-      id: selectedEmojiId,
-      shortName: ''
-    },
-    fitToHeight: 24
-  }))), alphabeticalNames.length === 0 ?
+  }, 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, {
     xcss: centerSpinnerStyle

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

@@ -4,15 +4,12 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * @jsx jsx
  */
 import { useEffect, useState, useRef, useCallback, useMemo } from 'react';
-import { useIntl } from 'react-intl-next';
 // 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';
-import Button from '@atlaskit/button/new';
+import Modal, { ModalBody } from '@atlaskit/modal-dialog';
 import { Box, xcss } from '@atlaskit/primitives';
-import Modal, { ModalBody, ModalFooter } from '@atlaskit/modal-dialog';
 import { NUMBER_OF_REACTIONS_TO_DISPLAY } from '../../shared/constants';
-import { messages } from '../../shared/i18n';
 import { ReactionsList } from './ReactionsList';
 import { ReactionsDialogHeader } from './ReactionsDialogHeader';
 import { containerStyle } from './styles';
@@ -28,8 +25,8 @@ var getDimensions = function getDimensions(container) {
     scrollLeft: container === null || container === void 0 ? void 0 : container.scrollLeft
   };
 };
-var footerStyle = xcss({
-  borderTop: "2px solid ".concat("var(--ds-border, rgba(11, 18, 14, 0.14))")
+var modalBodyStyle = xcss({
+  marginBottom: 'space.300'
 });
 export var ReactionsDialog = function ReactionsDialog(_ref) {
   var _currentReactions$;
@@ -43,7 +40,8 @@ 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;
+    ProfileCardWrapper = _ref.ProfileCardWrapper,
+    handleReactionMouseEnter = _ref.handleReactionMouseEnter;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     elementToScroll = _useState2[0],
@@ -64,7 +62,6 @@ export var ReactionsDialog = function ReactionsDialog(_ref) {
     setCurrentPage = _useState8[1];
   var reactionElementsRef = useRef();
   var observerRef = useRef();
-  var intl = useIntl();
   var isSelectedEmojiViewed = useRef(false);
   var totalReactionsCount = useMemo(function () {
     return reactions.reduce(function (accum, current) {
@@ -195,9 +192,11 @@ export var ReactionsDialog = function ReactionsDialog(_ref) {
     handleNextPage: handleNextPage,
     currentPage: currentPage,
     emojiProvider: emojiProvider,
-    selectedEmojiId: selectedEmojiId,
-    currentReactions: currentReactions
-  }), jsx(ModalBody, null, jsx("div", {
+    currentReactions: currentReactions,
+    handleCloseReactionsDialog: handleCloseReactionsDialog
+  }), jsx(ModalBody, null, jsx(Box, {
+    xcss: modalBodyStyle
+  }, jsx("div", {
     css: containerStyle(reactionsBorderWidth),
     ref: setRef
   }, jsx(ReactionsList, {
@@ -205,10 +204,5 @@ export var ReactionsDialog = function ReactionsDialog(_ref) {
     reactions: currentReactions,
     emojiProvider: emojiProvider,
     ProfileCardWrapper: ProfileCardWrapper
-  })))), jsx(Box, {
-    xcss: footerStyle
-  }, jsx(ModalFooter, null, jsx(Button, {
-    appearance: "subtle",
-    onClick: handleCloseReactionsDialog
-  }, intl.formatMessage(messages.closeReactionsDialog)))));
+  }))))));
 };

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

@@ -1,20 +1,27 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+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) { _defineProperty(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; }
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
+import { useState } from 'react';
 import { useIntl } from 'react-intl-next';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx, css } from '@emotion/react';
 import { useThemeObserver } from '@atlaskit/tokens';
 import { Tab, TabList } from '@atlaskit/tabs';
-import { Box, Flex, xcss, Stack } from '@atlaskit/primitives';
+import { Box, Flex, xcss, Stack, Inline } from '@atlaskit/primitives';
 import { IconButton } from '@atlaskit/button/new';
 import Heading from '@atlaskit/heading';
 import { useModal } from '@atlaskit/modal-dialog';
 import Tooltip from '@atlaskit/tooltip';
 import ChevronLeftIcon from '@atlaskit/icon/utility/chevron-left';
 import ChevronRightIcon from '@atlaskit/icon/utility/chevron-right';
+import CloseIcon from '@atlaskit/icon/core/close';
 import { ResourcedEmoji } from '@atlaskit/emoji/element';
 import { messages } from '../../shared/i18n';
 import { Counter } from '../Counter';
@@ -24,6 +31,17 @@ var containerEdgeAngle = {
   rightEdge: 270,
   leftEdge: 90
 };
+var leftNavigationStyle = xcss({
+  marginLeft: 'space.200',
+  alignSelf: 'self-start',
+  marginTop: 'space.050'
+});
+var rightNavigationStyle = xcss({
+  marginRight: 'space.100',
+  marginLeft: 'auto',
+  alignSelf: 'self-start',
+  marginTop: 'space.050'
+});
 var fadedCss = function fadedCss(edge, theme) {
   return css({
     content: '""',
@@ -46,7 +64,9 @@ var customTabListStyles = css({
     flexGrow: 1,
     // paddingInline exists to maintain styling prior to @atlaskit/tabs update that removed baked in horizontal padding
     paddingInline: "var(--ds-space-100, 8px)"
-  }
+  },
+  width: ' 100%',
+  alignItems: 'flex-start'
 });
 var customTabWrapper = function customTabWrapper(theme) {
   return css({
@@ -96,61 +116,101 @@ var emojiStyles = xcss({
 var counterStyle = xcss({
   marginTop: 'space.025'
 });
-var ReactionsTabs = function ReactionsTabs(_ref) {
-  var currentReactions = _ref.currentReactions,
-    emojiProvider = _ref.emojiProvider,
-    selectedEmojiId = _ref.selectedEmojiId;
-  var _useThemeObserver = useThemeObserver(),
-    colorMode = _useThemeObserver.colorMode;
-  return jsx("div", {
-    css: customTabListStyles,
-    id: "reactions-dialog-tabs-list"
-  }, jsx(TabList, null, currentReactions.map(function (reaction, index) {
-    var emojiId = {
-      id: reaction.emojiId,
-      shortName: ''
-    };
-    return jsx("div", {
-      // 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: [customTabWrapper(colorMode), index === 0 ? firstElement : []]
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      ,
-      className: "reaction-elements",
-      key: reaction.emojiId,
-      "data-testid": emojiId === null || emojiId === void 0 ? void 0 : emojiId.id
-    }, jsx(Tab, null, jsx(Flex, {
-      justifyContent: "center",
-      alignItems: "center",
-      direction: "row"
-    }, jsx(Box, {
-      xcss: emojiStyles
-    }, jsx(ResourcedEmoji, {
-      emojiProvider: emojiProvider,
-      emojiId: emojiId,
-      fitToHeight: 16,
-      showTooltip: true
-    })), jsx(Box, {
-      xcss: counterStyle
-    }, jsx(Counter, {
-      value: reaction.count
-    })))));
-  })));
+var CloseButton = function CloseButton(_ref) {
+  var handleCloseReactionsDialog = _ref.handleCloseReactionsDialog;
+  var intl = useIntl();
+  return jsx(IconButton, {
+    onClick: handleCloseReactionsDialog,
+    icon: CloseIcon,
+    label: intl.formatMessage(messages.closeReactionsDialog),
+    appearance: "subtle",
+    isTooltipDisabled: false
+  });
 };
-export var ReactionsDialogHeader = function ReactionsDialogHeader(_ref2) {
-  var totalReactionsCount = _ref2.totalReactionsCount,
-    handlePreviousPage = _ref2.handlePreviousPage,
-    handleNextPage = _ref2.handleNextPage,
-    currentPage = _ref2.currentPage,
-    maxPages = _ref2.maxPages,
-    currentReactions = _ref2.currentReactions,
-    emojiProvider = _ref2.emojiProvider,
-    selectedEmojiId = _ref2.selectedEmojiId;
+var LeftNavigationButton = function LeftNavigationButton(_ref2) {
+  var handlePreviousPage = _ref2.handlePreviousPage;
+  var intl = useIntl();
+  return jsx(Flex, {
+    xcss: leftNavigationStyle
+  }, jsx(IconButton, {
+    spacing: "compact",
+    onClick: handlePreviousPage,
+    icon: ChevronLeftIcon,
+    label: intl.formatMessage(messages.leftNavigateLabel),
+    isTooltipDisabled: false
+  }));
+};
+var RightNavigationButton = function RightNavigationButton(_ref3) {
+  var handleNextPage = _ref3.handleNextPage;
+  var intl = useIntl();
+  return jsx(Flex, {
+    xcss: rightNavigationStyle
+  }, jsx(IconButton, {
+    spacing: "compact",
+    onClick: handleNextPage,
+    icon: ChevronRightIcon,
+    label: intl.formatMessage(messages.rightNavigateLabel),
+    isTooltipDisabled: false
+  }));
+};
+export var ReactionsDialogHeader = function ReactionsDialogHeader(_ref4) {
+  var totalReactionsCount = _ref4.totalReactionsCount,
+    handlePreviousPage = _ref4.handlePreviousPage,
+    handleNextPage = _ref4.handleNextPage,
+    currentPage = _ref4.currentPage,
+    maxPages = _ref4.maxPages,
+    currentReactions = _ref4.currentReactions,
+    emojiProvider = _ref4.emojiProvider,
+    handleCloseReactionsDialog = _ref4.handleCloseReactionsDialog;
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    cache = _useState2[0],
+    setCache = _useState2[1];
   var _useModal = useModal(),
     titleId = _useModal.titleId;
   var intl = useIntl();
+  var _useThemeObserver = useThemeObserver(),
+    colorMode = _useThemeObserver.colorMode;
   var isSinglePage = maxPages === 1;
   var isOnFirstPage = currentPage === 1;
   var isOnLastPage = currentPage === maxPages;
+  var handleHover = function handleHover(reaction) {
+    var emojiId = reaction.emojiId;
+    if (!emojiId || cache[emojiId]) {
+      return;
+    }
+    _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var provider, emoji, capitalizedName;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return emojiProvider;
+          case 2:
+            provider = _context.sent;
+            _context.next = 5;
+            return provider.findByEmojiId({
+              shortName: '',
+              id: emojiId
+            });
+          case 5:
+            emoji = _context.sent;
+            if (emoji !== null && emoji !== void 0 && emoji.name) {
+              // capitalize first letter of each string
+              capitalizedName = emoji.name.replace(/\b\w/g, function (char) {
+                return char.toUpperCase();
+              });
+              setCache(function (prevCache) {
+                return _objectSpread(_objectSpread({}, prevCache), {}, _defineProperty({}, emojiId, capitalizedName));
+              });
+            }
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }))();
+  };
   return jsx(Stack, null, jsx(Flex, {
     direction: "row",
     justifyContent: "space-between",
@@ -161,36 +221,54 @@ export var ReactionsDialogHeader = function ReactionsDialogHeader(_ref2) {
     id: titleId
   }, intl.formatMessage(messages.reactionsCount, {
     count: totalReactionsCount
-  })), !isSinglePage && jsx(Flex, {
-    alignItems: "center",
-    gap: "space.100"
-  }, jsx(Tooltip, {
-    content: intl.formatMessage(messages.leftNavigateLabel),
-    canAppear: function canAppear() {
-      return !isOnFirstPage;
-    }
-  }, function (tooltipProps) {
-    return jsx(IconButton, _extends({}, tooltipProps, {
-      isDisabled: isOnFirstPage,
-      onClick: handlePreviousPage,
-      icon: ChevronLeftIcon,
-      label: intl.formatMessage(messages.leftNavigateLabel)
-    }));
-  }), jsx(Tooltip, {
-    content: intl.formatMessage(messages.rightNavigateLabel),
-    canAppear: function canAppear() {
-      return !isOnLastPage;
-    }
-  }, function (tooltipProps) {
-    return jsx(IconButton, _extends({}, tooltipProps, {
-      onClick: handleNextPage,
-      isDisabled: isOnLastPage,
-      icon: ChevronRightIcon,
-      label: intl.formatMessage(messages.rightNavigateLabel)
-    }));
-  }))), jsx(ReactionsTabs, {
-    currentReactions: currentReactions,
-    emojiProvider: emojiProvider,
-    selectedEmojiId: selectedEmojiId
-  }));
+  })), jsx(CloseButton, {
+    handleCloseReactionsDialog: handleCloseReactionsDialog
+  })), jsx(Inline, null, jsx("div", {
+    css: customTabListStyles,
+    id: "reactions-dialog-tabs-list"
+  }, jsx(TabList, null, !isSinglePage && !isOnFirstPage && jsx(LeftNavigationButton, {
+    handlePreviousPage: handlePreviousPage
+  }), currentReactions.map(function (reaction, index) {
+    var emojiId = {
+      id: reaction.emojiId,
+      shortName: ''
+    };
+    return (
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      jsx("div", {
+        // 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: [customTabWrapper(colorMode), index === 0 ? firstElement : []]
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        ,
+        className: "reaction-elements",
+        key: reaction.emojiId,
+        "data-testid": emojiId === null || emojiId === void 0 ? void 0 : emojiId.id,
+        onMouseEnter: function onMouseEnter() {
+          return handleHover(reaction);
+        }
+      }, jsx(Tab, null, jsx(Tooltip, {
+        content: cache[reaction.emojiId],
+        canAppear: function canAppear() {
+          return !!cache[reaction.emojiId];
+        }
+      }, jsx(Flex, {
+        justifyContent: "center",
+        alignItems: "center",
+        direction: "row"
+      }, jsx(Box, {
+        xcss: emojiStyles
+      }, jsx(ResourcedEmoji, {
+        emojiProvider: emojiProvider,
+        emojiId: emojiId,
+        fitToHeight: 16,
+        showTooltip: true
+      })), jsx(Box, {
+        xcss: counterStyle
+      }, jsx(Counter, {
+        value: reaction.count
+      }))))))
+    );
+  }), !isSinglePage && !isOnLastPage && jsx(RightNavigationButton, {
+    handleNextPage: handleNextPage
+  })))));
 };

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

@@ -4,13 +4,14 @@
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
+import { Box } from '@atlaskit/primitives';
 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("div", null, reactions.map(function (reaction) {
+  return jsx(Box, null, reactions.map(function (reaction) {
     if (reaction.emojiId === selectedEmojiId) {
       return jsx(ReactionView, {
         key: reaction.emojiId,

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

@@ -1,11 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useCallback, useState } from 'react';
-import { FormattedMessage } from 'react-intl-next';
+import { useIntl } from 'react-intl-next';
 import Popup from '@atlaskit/popup';
-import { Box, Inline, Text, xcss } from '@atlaskit/primitives';
+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 { Reaction } from '../Reaction';
 import { ReactionSummaryButton } from './ReactionSummaryButton';
 import { messages } from '../../shared/i18n';
@@ -17,6 +18,9 @@ var summaryPopupStyles = xcss({
 var viewAllButtonStyling = xcss({
   marginTop: 'space.050'
 });
+var iconStyle = xcss({
+  height: '20px'
+});
 
 /**
  * Test id for the Reactions summary view popup
@@ -41,6 +45,7 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
     subtleReactionsSummaryAndPicker = _ref$subtleReactionsS === void 0 ? false : _ref$subtleReactionsS,
     handleOpenReactionsDialog = _ref.handleOpenReactionsDialog,
     allowUserDialog = _ref.allowUserDialog;
+  var intl = useIntl();
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isSummaryPopupOpen = _useState2[0],
@@ -73,9 +78,11 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
         });
       }), allowUserDialog && /*#__PURE__*/React.createElement(Box, {
         xcss: viewAllButtonStyling
+      }, /*#__PURE__*/React.createElement(Pressable, {
+        backgroundColor: "color.background.neutral.subtle",
+        padding: "space.0"
       }, /*#__PURE__*/React.createElement(Tooltip, {
-        content: /*#__PURE__*/React.createElement(FormattedMessage, messages.seeWhoReactedTooltip),
-        hideTooltipOnClick: true
+        content: intl.formatMessage(messages.seeWhoReactedTooltip)
       }, function (tooltipProps) {
         return /*#__PURE__*/React.createElement(Button, _extends({}, tooltipProps, {
           spacing: "compact",
@@ -83,11 +90,13 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
             handlePopupClose();
             handleOpenReactionsDialog === null || handleOpenReactionsDialog === void 0 || handleOpenReactionsDialog(reactions[0].emojiId);
           }
-        }), /*#__PURE__*/React.createElement(Text, {
-          color: "color.text.subtlest",
-          weight: "medium"
-        }, /*#__PURE__*/React.createElement(FormattedMessage, messages.seeWhoReacted)));
-      })));
+        }), /*#__PURE__*/React.createElement(Flex, {
+          alignItems: "center",
+          xcss: iconStyle
+        }, /*#__PURE__*/React.createElement(ShowMoreHorizontalIcon, {
+          label: intl.formatMessage(messages.seeWhoReacted)
+        })));
+      }))));
     },
     isOpen: isSummaryPopupOpen,
     onClose: handlePopupClose,