@atlaskit/reactions 25.0.0 → 25.2.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/reactions
 
+## 25.2.0
+
+### Minor Changes
+
+- [#113141](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113141)
+  [`2b9b00172281b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2b9b00172281b) -
+  Added new 'onlyRenderPicker' property to hide user reactions and only render picker
+
+## 25.1.0
+
+### Minor Changes
+
+- [#112754](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/112754)
+  [`281e77ddc6053`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/281e77ddc6053) -
+  [ux] Reactions Dialog updates - move navigation buttons next to tabs, move close handler from
+  footer to header, add tooltips on reaction hover, change CTA into meatball menu, remove
+  subheading, adjust modal body bottom padding
+
 ## 25.0.0
 
 ### Major 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 = "25.0.0";
+var packageVersion = "25.2.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -5,20 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ReactionView = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
-var _reactIntlNext = require("react-intl-next");
 var _react2 = require("@emotion/react");
-var _element = require("@atlaskit/emoji/element");
 var _Avatar = _interopRequireDefault(require("@atlaskit/avatar/Avatar"));
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _tabs = require("@atlaskit/tabs");
 var _primitives = require("@atlaskit/primitives");
-var _heading = _interopRequireDefault(require("@atlaskit/heading"));
-var _i18n = require("../../shared/i18n");
 var _styles = require("./styles");
 /**
  * @jsxRuntime classic
@@ -34,7 +26,7 @@ var profileWrapperStyle = (0, _primitives.xcss)({
   marginLeft: 'space.0'
 });
 var reactionViewStyle = (0, _primitives.xcss)({
-  marginTop: 'space.300',
+  marginTop: 'space.150',
   minHeight: '300px',
   minWidth: '550px'
 });
@@ -45,52 +37,11 @@ var centerSpinnerStyle = (0, _primitives.xcss)({
   height: '100%',
   marginTop: 'space.300'
 });
-var headerStyle = (0, _primitives.xcss)({
-  alignItems: 'flex-end'
-});
-var emojiSpacingStlye = (0, _primitives.xcss)({
-  marginLeft: 'space.100'
-});
 var ReactionView = exports.ReactionView = function ReactionView(_ref) {
   var selectedEmojiId = _ref.selectedEmojiId,
     emojiProvider = _ref.emojiProvider,
     reaction = _ref.reaction,
     ProfileCardWrapper = _ref.ProfileCardWrapper;
-  var _useState = (0, _react.useState)(''),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    emojiName = _useState2[0],
-    setEmojiName = _useState2[1];
-  (0, _react.useEffect)(function () {
-    (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-      var provider, emoji, capitalizedName;
-      return _regenerator.default.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 = (0, _react.useMemo)(function () {
     var _reactionObj$users;
     var reactionObj = reaction;
@@ -101,25 +52,7 @@ var ReactionView = exports.ReactionView = function ReactionView(_ref) {
   return (0, _react2.jsx)(_tabs.TabPanel, null, (0, _react2.jsx)(_primitives.Flex, {
     direction: "column",
     xcss: reactionViewStyle
-  }, (0, _react2.jsx)(_primitives.Inline, {
-    xcss: headerStyle
-  }, (0, _react2.jsx)(_heading.default, {
-    size: "xsmall"
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.peopleWhoReactedSubheading, {
-    values: {
-      emojiShortName: emojiName
-    }
-  }))), (0, _react2.jsx)(_primitives.Box, {
-    as: "span",
-    xcss: emojiSpacingStlye
-  }, (0, _react2.jsx)(_element.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
   (0, _react2.jsx)(_primitives.Box, {
     xcss: centerSpinnerStyle

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

@@ -8,14 +8,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.ReactionsDialog = exports.RENDER_MODAL_TESTID = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
-var _reactIntlNext = require("react-intl-next");
 var _react2 = require("@emotion/react");
 var _tabs = _interopRequireDefault(require("@atlaskit/tabs"));
-var _new = _interopRequireDefault(require("@atlaskit/button/new"));
-var _primitives = require("@atlaskit/primitives");
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+var _primitives = require("@atlaskit/primitives");
 var _constants = require("../../shared/constants");
-var _i18n = require("../../shared/i18n");
 var _ReactionsList = require("./ReactionsList");
 var _ReactionsDialogHeader = require("./ReactionsDialogHeader");
 var _styles = require("./styles");
@@ -39,8 +36,8 @@ var getDimensions = function getDimensions(container) {
     scrollLeft: container === null || container === void 0 ? void 0 : container.scrollLeft
   };
 };
-var footerStyle = (0, _primitives.xcss)({
-  borderTop: "2px solid ".concat("var(--ds-border, rgba(11, 18, 14, 0.14))")
+var modalBodyStyle = (0, _primitives.xcss)({
+  marginBottom: 'space.300'
 });
 var ReactionsDialog = exports.ReactionsDialog = function ReactionsDialog(_ref) {
   var _currentReactions$;
@@ -54,7 +51,8 @@ var ReactionsDialog = exports.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 = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     elementToScroll = _useState2[0],
@@ -75,7 +73,6 @@ var ReactionsDialog = exports.ReactionsDialog = function ReactionsDialog(_ref) {
     setCurrentPage = _useState8[1];
   var reactionElementsRef = (0, _react.useRef)();
   var observerRef = (0, _react.useRef)();
-  var intl = (0, _reactIntlNext.useIntl)();
   var isSelectedEmojiViewed = (0, _react.useRef)(false);
   var totalReactionsCount = (0, _react.useMemo)(function () {
     return reactions.reduce(function (accum, current) {
@@ -206,9 +203,11 @@ var ReactionsDialog = exports.ReactionsDialog = function ReactionsDialog(_ref) {
     handleNextPage: handleNextPage,
     currentPage: currentPage,
     emojiProvider: emojiProvider,
-    selectedEmojiId: selectedEmojiId,
-    currentReactions: currentReactions
-  }), (0, _react2.jsx)(_modalDialog.ModalBody, null, (0, _react2.jsx)("div", {
+    currentReactions: currentReactions,
+    handleCloseReactionsDialog: handleCloseReactionsDialog
+  }), (0, _react2.jsx)(_modalDialog.ModalBody, null, (0, _react2.jsx)(_primitives.Box, {
+    xcss: modalBodyStyle
+  }, (0, _react2.jsx)("div", {
     css: (0, _styles.containerStyle)(reactionsBorderWidth),
     ref: setRef
   }, (0, _react2.jsx)(_ReactionsList.ReactionsList, {
@@ -216,10 +215,5 @@ var ReactionsDialog = exports.ReactionsDialog = function ReactionsDialog(_ref) {
     reactions: currentReactions,
     emojiProvider: emojiProvider,
     ProfileCardWrapper: ProfileCardWrapper
-  })))), (0, _react2.jsx)(_primitives.Box, {
-    xcss: footerStyle
-  }, (0, _react2.jsx)(_modalDialog.ModalFooter, null, (0, _react2.jsx)(_new.default, {
-    appearance: "subtle",
-    onClick: handleCloseReactionsDialog
-  }, intl.formatMessage(_i18n.messages.closeReactionsDialog)))));
+  }))))));
 };

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

@@ -5,9 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ReactionsDialogHeader = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
 var _reactIntlNext = require("react-intl-next");
-var _react = require("@emotion/react");
+var _react2 = require("@emotion/react");
 var _tokens = require("@atlaskit/tokens");
 var _tabs = require("@atlaskit/tabs");
 var _primitives = require("@atlaskit/primitives");
@@ -17,24 +21,34 @@ var _modalDialog = require("@atlaskit/modal-dialog");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _chevronLeft = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-left"));
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-right"));
+var _close = _interopRequireDefault(require("@atlaskit/icon/core/close"));
 var _element = require("@atlaskit/emoji/element");
 var _i18n = require("../../shared/i18n");
 var _Counter = require("../Counter");
-/**
+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; } /**
  * @jsxRuntime classic
  * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var REACTIONS_CONTAINER_WIDTH = 56;
 var REACTION_CONTAINER_HEIGHT = 40;
 var containerEdgeAngle = {
   rightEdge: 270,
   leftEdge: 90
 };
+var leftNavigationStyle = (0, _primitives.xcss)({
+  marginLeft: 'space.200',
+  alignSelf: 'self-start',
+  marginTop: 'space.050'
+});
+var rightNavigationStyle = (0, _primitives.xcss)({
+  marginRight: 'space.100',
+  marginLeft: 'auto',
+  alignSelf: 'self-start',
+  marginTop: 'space.050'
+});
 var fadedCss = function fadedCss(edge, theme) {
-  return (0, _react.css)({
+  return (0, _react2.css)({
     content: '""',
     position: 'absolute',
     left: '0px',
@@ -47,7 +61,7 @@ var fadedCss = function fadedCss(edge, theme) {
     theme === 'dark' ? "linear-gradient(".concat(containerEdgeAngle[edge], "deg, rgba(34, 39, 43, 0.95) 40.23%, rgba(34, 39, 43, 0.55) 58.33%, rgba(34, 39, 43, 0) 77.49%)") : "linear-gradient(".concat(containerEdgeAngle[edge], "deg, rgba(255, 255, 255, 0.95) 40.23%, rgba(255, 255, 255, 0.55) 58.33%, rgba(255, 255, 255, 0) 77.49%)")
   });
 };
-var customTabListStyles = (0, _react.css)({
+var customTabListStyles = (0, _react2.css)({
   overflow: 'auto',
   display: 'flex',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -55,10 +69,12 @@ var customTabListStyles = (0, _react.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 (0, _react.css)({
+  return (0, _react2.css)({
     flexShrink: 0,
     display: 'flex',
     flexDirection: 'column',
@@ -88,7 +104,7 @@ var customTabWrapper = function customTabWrapper(theme) {
     '&.disabled + &.disabled:after': fadedCss('leftEdge', theme)
   });
 };
-var firstElement = (0, _react.css)({
+var firstElement = (0, _react2.css)({
   paddingLeft: "var(--ds-space-200, 16px)"
 });
 var fullWidthStyle = (0, _primitives.xcss)({
@@ -105,101 +121,159 @@ var emojiStyles = (0, _primitives.xcss)({
 var counterStyle = (0, _primitives.xcss)({
   marginTop: 'space.025'
 });
-var ReactionsTabs = function ReactionsTabs(_ref) {
-  var currentReactions = _ref.currentReactions,
-    emojiProvider = _ref.emojiProvider,
-    selectedEmojiId = _ref.selectedEmojiId;
-  var _useThemeObserver = (0, _tokens.useThemeObserver)(),
-    colorMode = _useThemeObserver.colorMode;
-  return (0, _react.jsx)("div", {
-    css: customTabListStyles,
-    id: "reactions-dialog-tabs-list"
-  }, (0, _react.jsx)(_tabs.TabList, null, currentReactions.map(function (reaction, index) {
-    var emojiId = {
-      id: reaction.emojiId,
-      shortName: ''
-    };
-    return (0, _react.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
-    }, (0, _react.jsx)(_tabs.Tab, null, (0, _react.jsx)(_primitives.Flex, {
-      justifyContent: "center",
-      alignItems: "center",
-      direction: "row"
-    }, (0, _react.jsx)(_primitives.Box, {
-      xcss: emojiStyles
-    }, (0, _react.jsx)(_element.ResourcedEmoji, {
-      emojiProvider: emojiProvider,
-      emojiId: emojiId,
-      fitToHeight: 16,
-      showTooltip: true
-    })), (0, _react.jsx)(_primitives.Box, {
-      xcss: counterStyle
-    }, (0, _react.jsx)(_Counter.Counter, {
-      value: reaction.count
-    })))));
-  })));
+var CloseButton = function CloseButton(_ref) {
+  var handleCloseReactionsDialog = _ref.handleCloseReactionsDialog;
+  var intl = (0, _reactIntlNext.useIntl)();
+  return (0, _react2.jsx)(_new.IconButton, {
+    onClick: handleCloseReactionsDialog,
+    icon: _close.default,
+    label: intl.formatMessage(_i18n.messages.closeReactionsDialog),
+    appearance: "subtle",
+    isTooltipDisabled: false
+  });
+};
+var LeftNavigationButton = function LeftNavigationButton(_ref2) {
+  var handlePreviousPage = _ref2.handlePreviousPage;
+  var intl = (0, _reactIntlNext.useIntl)();
+  return (0, _react2.jsx)(_primitives.Flex, {
+    xcss: leftNavigationStyle
+  }, (0, _react2.jsx)(_new.IconButton, {
+    spacing: "compact",
+    onClick: handlePreviousPage,
+    icon: _chevronLeft.default,
+    label: intl.formatMessage(_i18n.messages.leftNavigateLabel),
+    isTooltipDisabled: false
+  }));
 };
-var ReactionsDialogHeader = exports.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 RightNavigationButton = function RightNavigationButton(_ref3) {
+  var handleNextPage = _ref3.handleNextPage;
+  var intl = (0, _reactIntlNext.useIntl)();
+  return (0, _react2.jsx)(_primitives.Flex, {
+    xcss: rightNavigationStyle
+  }, (0, _react2.jsx)(_new.IconButton, {
+    spacing: "compact",
+    onClick: handleNextPage,
+    icon: _chevronRight.default,
+    label: intl.formatMessage(_i18n.messages.rightNavigateLabel),
+    isTooltipDisabled: false
+  }));
+};
+var ReactionsDialogHeader = exports.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 = (0, _react.useState)({}),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    cache = _useState2[0],
+    setCache = _useState2[1];
   var _useModal = (0, _modalDialog.useModal)(),
     titleId = _useModal.titleId;
   var intl = (0, _reactIntlNext.useIntl)();
+  var _useThemeObserver = (0, _tokens.useThemeObserver)(),
+    colorMode = _useThemeObserver.colorMode;
   var isSinglePage = maxPages === 1;
   var isOnFirstPage = currentPage === 1;
   var isOnLastPage = currentPage === maxPages;
-  return (0, _react.jsx)(_primitives.Stack, null, (0, _react.jsx)(_primitives.Flex, {
+  var handleHover = function handleHover(reaction) {
+    var emojiId = reaction.emojiId;
+    if (!emojiId || cache[emojiId]) {
+      return;
+    }
+    (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var provider, emoji, capitalizedName;
+      return _regenerator.default.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), {}, (0, _defineProperty2.default)({}, emojiId, capitalizedName));
+              });
+            }
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }))();
+  };
+  return (0, _react2.jsx)(_primitives.Stack, null, (0, _react2.jsx)(_primitives.Flex, {
     direction: "row",
     justifyContent: "space-between",
     alignItems: "center",
     xcss: fullWidthStyle
-  }, (0, _react.jsx)(_heading.default, {
+  }, (0, _react2.jsx)(_heading.default, {
     size: "medium",
     id: titleId
   }, intl.formatMessage(_i18n.messages.reactionsCount, {
     count: totalReactionsCount
-  })), !isSinglePage && (0, _react.jsx)(_primitives.Flex, {
-    alignItems: "center",
-    gap: "space.100"
-  }, (0, _react.jsx)(_tooltip.default, {
-    content: intl.formatMessage(_i18n.messages.leftNavigateLabel),
-    canAppear: function canAppear() {
-      return !isOnFirstPage;
-    }
-  }, function (tooltipProps) {
-    return (0, _react.jsx)(_new.IconButton, (0, _extends2.default)({}, tooltipProps, {
-      isDisabled: isOnFirstPage,
-      onClick: handlePreviousPage,
-      icon: _chevronLeft.default,
-      label: intl.formatMessage(_i18n.messages.leftNavigateLabel)
-    }));
-  }), (0, _react.jsx)(_tooltip.default, {
-    content: intl.formatMessage(_i18n.messages.rightNavigateLabel),
-    canAppear: function canAppear() {
-      return !isOnLastPage;
-    }
-  }, function (tooltipProps) {
-    return (0, _react.jsx)(_new.IconButton, (0, _extends2.default)({}, tooltipProps, {
-      onClick: handleNextPage,
-      isDisabled: isOnLastPage,
-      icon: _chevronRight.default,
-      label: intl.formatMessage(_i18n.messages.rightNavigateLabel)
-    }));
-  }))), (0, _react.jsx)(ReactionsTabs, {
-    currentReactions: currentReactions,
-    emojiProvider: emojiProvider,
-    selectedEmojiId: selectedEmojiId
-  }));
+  })), (0, _react2.jsx)(CloseButton, {
+    handleCloseReactionsDialog: handleCloseReactionsDialog
+  })), (0, _react2.jsx)(_primitives.Inline, null, (0, _react2.jsx)("div", {
+    css: customTabListStyles,
+    id: "reactions-dialog-tabs-list"
+  }, (0, _react2.jsx)(_tabs.TabList, null, !isSinglePage && !isOnFirstPage && (0, _react2.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
+      (0, _react2.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);
+        }
+      }, (0, _react2.jsx)(_tabs.Tab, null, (0, _react2.jsx)(_tooltip.default, {
+        content: cache[reaction.emojiId],
+        canAppear: function canAppear() {
+          return !!cache[reaction.emojiId];
+        }
+      }, (0, _react2.jsx)(_primitives.Flex, {
+        justifyContent: "center",
+        alignItems: "center",
+        direction: "row"
+      }, (0, _react2.jsx)(_primitives.Box, {
+        xcss: emojiStyles
+      }, (0, _react2.jsx)(_element.ResourcedEmoji, {
+        emojiProvider: emojiProvider,
+        emojiId: emojiId,
+        fitToHeight: 16,
+        showTooltip: true
+      })), (0, _react2.jsx)(_primitives.Box, {
+        xcss: counterStyle
+      }, (0, _react2.jsx)(_Counter.Counter, {
+        value: reaction.count
+      }))))))
+    );
+  }), !isSinglePage && !isOnLastPage && (0, _react2.jsx)(RightNavigationButton, {
+    handleNextPage: handleNextPage
+  })))));
 };

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ReactionsList = void 0;
 var _react = require("@emotion/react");
+var _primitives = require("@atlaskit/primitives");
 var _ReactionView = require("./ReactionView");
 /**
  * @jsxRuntime classic
@@ -17,7 +18,7 @@ var ReactionsList = exports.ReactionsList = function ReactionsList(_ref) {
     selectedEmojiId = _ref.selectedEmojiId,
     emojiProvider = _ref.emojiProvider,
     ProfileCardWrapper = _ref.ProfileCardWrapper;
-  return (0, _react.jsx)("div", null, reactions.map(function (reaction) {
+  return (0, _react.jsx)(_primitives.Box, null, reactions.map(function (reaction) {
     if (reaction.emojiId === selectedEmojiId) {
       return (0, _react.jsx)(_ReactionView.ReactionView, {
         key: reaction.emojiId,

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

@@ -14,6 +14,7 @@ var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 var _primitives = require("@atlaskit/primitives");
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
 var _Reaction = require("../Reaction");
 var _ReactionSummaryButton = require("./ReactionSummaryButton");
 var _i18n = require("../../shared/i18n");
@@ -27,6 +28,9 @@ var summaryPopupStyles = (0, _primitives.xcss)({
 var viewAllButtonStyling = (0, _primitives.xcss)({
   marginTop: 'space.050'
 });
+var iconStyle = (0, _primitives.xcss)({
+  height: '20px'
+});
 
 /**
  * Test id for the Reactions summary view popup
@@ -51,6 +55,7 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
     subtleReactionsSummaryAndPicker = _ref$subtleReactionsS === void 0 ? false : _ref$subtleReactionsS,
     handleOpenReactionsDialog = _ref.handleOpenReactionsDialog,
     allowUserDialog = _ref.allowUserDialog;
+  var intl = (0, _reactIntlNext.useIntl)();
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isSummaryPopupOpen = _useState2[0],
@@ -83,9 +88,11 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
         });
       }), allowUserDialog && /*#__PURE__*/_react.default.createElement(_primitives.Box, {
         xcss: viewAllButtonStyling
+      }, /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+        backgroundColor: "color.background.neutral.subtle",
+        padding: "space.0"
       }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-        content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.seeWhoReactedTooltip),
-        hideTooltipOnClick: true
+        content: intl.formatMessage(_i18n.messages.seeWhoReactedTooltip)
       }, function (tooltipProps) {
         return /*#__PURE__*/_react.default.createElement(_new.default, (0, _extends2.default)({}, tooltipProps, {
           spacing: "compact",
@@ -93,11 +100,13 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
             handlePopupClose();
             handleOpenReactionsDialog === null || handleOpenReactionsDialog === void 0 || handleOpenReactionsDialog(reactions[0].emojiId);
           }
-        }), /*#__PURE__*/_react.default.createElement(_primitives.Text, {
-          color: "color.text.subtlest",
-          weight: "medium"
-        }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.seeWhoReacted)));
-      })));
+        }), /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
+          alignItems: "center",
+          xcss: iconStyle
+        }, /*#__PURE__*/_react.default.createElement(_showMoreHorizontal.default, {
+          label: intl.formatMessage(_i18n.messages.seeWhoReacted)
+        })));
+      }))));
     },
     isOpen: isSummaryPopupOpen,
     onClose: handlePopupClose,