@atlaskit/reactions 23.0.2 → 24.0.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/reactions
 
+## 24.0.0
+
+### Major Changes
+
+- [#105233](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/105233)
+  [`e66f08655d260`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e66f08655d260) -
+  [ux] Update Reactions Dialog to use pagination instead of horizontal scroll
+
 ## 23.0.2
 
 ### Patch 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 = "23.0.2";
+var packageVersion = "24.0.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -30,11 +30,10 @@ var ReactionView = exports.ReactionView = function ReactionView(_ref) {
   var selectedEmojiId = _ref.selectedEmojiId,
     emojiProvider = _ref.emojiProvider,
     reaction = _ref.reaction;
-  var intl = (0, _reactIntlNext.useIntl)();
   var _useState = (0, _react.useState)(''),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    emojiName = _useState2[0],
-    setEmojiName = _useState2[1];
+    emojiShortName = _useState2[0],
+    setEmojiShortName = _useState2[1];
   (0, _react.useEffect)(function () {
     (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
       var provider, emoji;
@@ -52,8 +51,8 @@ var ReactionView = exports.ReactionView = function ReactionView(_ref) {
             });
           case 5:
             emoji = _context.sent;
-            if (emoji && emoji.name) {
-              setEmojiName(emoji.name);
+            if (emoji !== null && emoji !== void 0 && emoji.shortName) {
+              setEmojiShortName(emoji.shortName);
             }
           case 7:
           case "end":
@@ -61,7 +60,7 @@ var ReactionView = exports.ReactionView = function ReactionView(_ref) {
         }
       }, _callee);
     }))();
-  }, [emojiProvider, selectedEmojiId]);
+  }, [emojiProvider, selectedEmojiId, reaction]);
   var alphabeticalNames = (0, _react.useMemo)(function () {
     var _reactionObj$users;
     var reactionObj = reaction;
@@ -76,15 +75,17 @@ var ReactionView = exports.ReactionView = function ReactionView(_ref) {
       css: _styles.reactionViewStyle
     }, tabPanelAttributes), (0, _react2.jsx)(_primitives.Text, {
       as: "p"
-    }, (0, _react2.jsx)(_element.ResourcedEmoji, {
+    }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.peopleWhoReactedSubheading, {
+      values: {
+        emojiShortName: emojiShortName
+      }
+    })), (0, _react2.jsx)(_element.ResourcedEmoji, {
       emojiProvider: emojiProvider,
       emojiId: {
         id: selectedEmojiId,
         shortName: ''
       },
-      fitToHeight: 24
-    }), intl.formatMessage(_i18n.messages.emojiName, {
-      emojiName: emojiName
+      fitToHeight: 16
     })), 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)("div", {

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

@@ -10,8 +10,11 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _reactIntlNext = require("react-intl-next");
 var _react2 = require("@emotion/react");
-var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _primitives = require("@atlaskit/primitives");
+var _new = _interopRequireWildcard(require("@atlaskit/button/new"));
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+var _chevronLeft = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-left"));
+var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-right"));
 var _constants = require("../../shared/constants");
 var _i18n = require("../../shared/i18n");
 var _ReactionsList = require("./ReactionsList");
@@ -25,6 +28,10 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+var fullWidthStyle = (0, _primitives.xcss)({
+  width: '100%'
+});
+
 /**
  * Test id for the Reactions modal dialog
  */
@@ -37,6 +44,7 @@ var getDimensions = function getDimensions(container) {
   };
 };
 var ReactionsDialog = exports.ReactionsDialog = function ReactionsDialog(_ref) {
+  var _currentReactions$;
   var _ref$reactions = _ref.reactions,
     reactions = _ref$reactions === void 0 ? [] : _ref$reactions,
     _ref$handleCloseReact = _ref.handleCloseReactionsDialog,
@@ -44,7 +52,9 @@ var ReactionsDialog = exports.ReactionsDialog = function ReactionsDialog(_ref) {
     emojiProvider = _ref.emojiProvider,
     selectedEmojiId = _ref.selectedEmojiId,
     _ref$handleSelectReac = _ref.handleSelectReaction,
-    handleSelectReaction = _ref$handleSelectReac === void 0 ? function () {} : _ref$handleSelectReac;
+    handleSelectReaction = _ref$handleSelectReac === void 0 ? function () {} : _ref$handleSelectReac,
+    _ref$handlePagination = _ref.handlePaginationChange,
+    handlePaginationChange = _ref$handlePagination === void 0 ? function () {} : _ref$handlePagination;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     elementToScroll = _useState2[0],
@@ -67,15 +77,42 @@ var ReactionsDialog = exports.ReactionsDialog = function ReactionsDialog(_ref) {
       return (b === null || b === void 0 ? void 0 : b.count) - (a === null || a === void 0 ? void 0 : a.count);
     });
   }, [reactions]);
+  var maxPages = Math.max(1, Math.ceil(reactions.length / _constants.NUMBER_OF_REACTIONS_TO_DISPLAY));
+  var _useState5 = (0, _react.useState)(1),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    currentPage = _useState6[0],
+    setCurrentPage = _useState6[1];
+  var currentReactions = (0, _react.useMemo)(function () {
+    var start = (currentPage - 1) * _constants.NUMBER_OF_REACTIONS_TO_DISPLAY;
+    var end = start + _constants.NUMBER_OF_REACTIONS_TO_DISPLAY;
+    return sortedReactions.slice(start, end);
+  }, [sortedReactions, currentPage]);
+  var handleNextPage = function handleNextPage() {
+    setCurrentPage(function (prevPage) {
+      return Math.min(prevPage + 1, maxPages);
+    });
+  };
+  var handlePreviousPage = function handlePreviousPage() {
+    setCurrentPage(function (prevPage) {
+      return Math.max(prevPage - 1, 1);
+    });
+  };
+  var firstEmojiOnPage = (_currentReactions$ = currentReactions[0]) === null || _currentReactions$ === void 0 ? void 0 : _currentReactions$.emojiId;
+  (0, _react.useEffect)(function () {
+    // trigger the handler with the first emoji when the page changes
+    if (firstEmojiOnPage) {
+      handlePaginationChange(firstEmojiOnPage);
+    }
+  }, [currentPage, firstEmojiOnPage, handlePaginationChange]);
 
-  /* set Reactions Border Width , 9 Number of reactions to display*/
+  /* set Reactions Border Width , 8 Number of reactions to display*/
   var reactionsBorderWidth = (0, _react.useMemo)(function () {
     return Math.ceil(reactions.length / _constants.NUMBER_OF_REACTIONS_TO_DISPLAY) * 100;
   }, [reactions]);
 
   /* Callback from IntersectionObserver to set/unset classNames based on visibility to toggle styles*/
   var handleNavigation = (0, _react.useCallback)(function (entries) {
-    entries.forEach(function (entry, index) {
+    entries.forEach(function (entry) {
       var _dataset;
       var element = entry.target;
       var emojiElement = element === null || element === void 0 ? void 0 : element.querySelector('[data-emoji-id]');
@@ -142,16 +179,32 @@ var ReactionsDialog = exports.ReactionsDialog = function ReactionsDialog(_ref) {
     onClose: handleCloseReactionsDialog,
     height: 600,
     testId: RENDER_MODAL_TESTID
-  }, (0, _react2.jsx)(_modalDialog.ModalHeader, null, (0, _react2.jsx)("div", {
-    css: _styles.titleStyle
-  }, (0, _react2.jsx)(_modalDialog.ModalTitle, null, intl.formatMessage(_i18n.messages.reactionsCount, {
+  }, (0, _react2.jsx)(_modalDialog.ModalHeader, null, (0, _react2.jsx)(_primitives.Flex, {
+    direction: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    xcss: fullWidthStyle
+  }, (0, _react2.jsx)("div", null, (0, _react2.jsx)(_modalDialog.ModalTitle, null, intl.formatMessage(_i18n.messages.reactionsCount, {
     count: totalReactionsCount
+  }))), (0, _react2.jsx)(_primitives.Flex, {
+    alignItems: "center",
+    gap: "space.100"
+  }, (0, _react2.jsx)(_new.IconButton, {
+    isDisabled: currentPage === 1,
+    onClick: handlePreviousPage,
+    icon: _chevronLeft.default,
+    label: intl.formatMessage(_i18n.messages.leftNavigateLabel)
+  }), (0, _react2.jsx)(_new.IconButton, {
+    onClick: handleNextPage,
+    isDisabled: currentPage === maxPages,
+    icon: _chevronRight.default,
+    label: intl.formatMessage(_i18n.messages.rightNavigateLabel)
   })))), (0, _react2.jsx)(_modalDialog.ModalBody, null, (0, _react2.jsx)("div", {
     css: (0, _styles.containerStyle)(reactionsBorderWidth),
     ref: setRef
   }, (0, _react2.jsx)(_ReactionsList.ReactionsList, {
     initialEmojiId: selectedEmojiId,
-    reactions: sortedReactions,
+    reactions: currentReactions,
     emojiProvider: emojiProvider,
     onReactionChanged: handleSelectReaction
   }))), (0, _react2.jsx)(_modalDialog.ModalFooter, null, (0, _react2.jsx)(_new.default, {

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

@@ -12,6 +12,7 @@ var _react2 = require("@emotion/react");
 var _element = require("@atlaskit/emoji/element");
 var _tabs = _interopRequireWildcard(require("@atlaskit/tabs"));
 var _tokens = require("@atlaskit/tokens");
+var _primitives = require("@atlaskit/primitives");
 var _Counter = require("../Counter");
 var _styles = require("./styles");
 var _ReactionView = require("./ReactionView");
@@ -24,6 +25,9 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+var emojiStyles = (0, _primitives.xcss)({
+  minWidth: '36px'
+});
 var ReactionsList = exports.ReactionsList = function ReactionsList(_ref) {
   var reactions = _ref.reactions,
     initialEmojiId = _ref.initialEmojiId,
@@ -43,6 +47,19 @@ var ReactionsList = exports.ReactionsList = function ReactionsList(_ref) {
     setSelectedEmoji = _useState2[1];
   var _useThemeObserver = (0, _tokens.useThemeObserver)(),
     colorMode = _useThemeObserver.colorMode;
+  (0, _react.useEffect)(function () {
+    // select first emoji when navigating to a new page
+    var currentPageEmojis = reactions.map(function (reaction) {
+      return reaction.emojiId;
+    });
+    if (!currentPageEmojis.includes(selectedEmoji.id)) {
+      setSelectedEmoji({
+        index: 0,
+        id: initialEmojiId
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [reactions, initialEmojiId]);
   var onTabChange = (0, _react.useCallback)(function (index, analyticsEvent) {
     if (index === selectedEmoji.index) {
       return;
@@ -74,14 +91,18 @@ var ReactionsList = exports.ReactionsList = function ReactionsList(_ref) {
       className: "reaction-elements",
       key: reaction.emojiId,
       "data-testid": emojiId === null || emojiId === void 0 ? void 0 : emojiId.id
-    }, (0, _react2.jsx)(_tabs.Tab, null, (0, _react2.jsx)(_element.ResourcedEmoji, {
+    }, (0, _react2.jsx)(_tabs.Tab, null, (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)("div", {
-      css: (0, _styles.counterStyle)((emojiId === null || emojiId === void 0 ? void 0 : emojiId.id) === selectedEmoji.id)
-    }, (0, _react2.jsx)(_Counter.Counter, {
+    })), (0, _react2.jsx)(_Counter.Counter, {
       value: reaction.count
     }))));
   }))), reactions.map(function (reaction) {

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

@@ -3,10 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.userStyle = exports.userListStyle = exports.titleStyle = exports.reactionViewStyle = exports.navigationContainerStyle = exports.customTabWrapper = exports.customTabListStyles = exports.counterStyle = exports.containerStyle = exports.centerSpinner = void 0;
+exports.userStyle = exports.userListStyle = exports.reactionViewStyle = exports.navigationContainerStyle = exports.customTabWrapper = exports.customTabListStyles = exports.containerStyle = exports.centerSpinner = void 0;
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
-var _constants = require("../../shared/constants");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -14,13 +13,7 @@ var _constants = require("../../shared/constants");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var REACTIONS_CONTAINER_WIDTH = 48;
-
-// These margin values must match
-var REACTION_RIGHT_MARGIN = 8;
-var REACTION_RIGHT_MARGIN_TOKEN = "var(--ds-space-100, 8px)";
-/* we want to display around 9 reactions and show 10th one as faded so removing 2px from REACTIONS_CONTAINER_WIDTH*/
-var CONTAINER_WIDTH = _constants.NUMBER_OF_REACTIONS_TO_DISPLAY * (REACTIONS_CONTAINER_WIDTH + REACTION_RIGHT_MARGIN) + REACTIONS_CONTAINER_WIDTH - 2;
-var REACTION_CONTAINER_HEIGHT = 48;
+var REACTION_CONTAINER_HEIGHT = 40;
 
 /*Reactions Container. Using pseudo Element :after to set border since with onClick of Reaction to higlight the
 border blue below the reaction. Setting Border Width based on number of reactions to make sure it shows up
@@ -29,7 +22,6 @@ var containerStyle = exports.containerStyle = function containerStyle(reactionsB
   return (0, _react.css)({
     overflow: 'hidden',
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    maxWidth: "".concat(CONTAINER_WIDTH, "px"),
     height: '100%',
     display: 'flex',
     justifyContent: 'start',
@@ -47,42 +39,10 @@ var containerStyle = exports.containerStyle = function containerStyle(reactionsB
     }
   });
 };
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var titleStyle = exports.titleStyle = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '& > h1': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-    fontSize: '24px!important',
-    color: "".concat("var(--ds-text, ".concat(_colors.N800, ")"))
-  }
-});
 var containerEdgeAngle = {
   rightEdge: 270,
   leftEdge: 90
 };
-var counterStyle = exports.counterStyle = function counterStyle(isSelected) {
-  return (0, _react.css)({
-    display: 'flex',
-    alignSelf: 'center',
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    lineHeight: '14px',
-    font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-    paddingRight: '0px',
-    marginTop: "var(--ds-space-075, 6px)",
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '> div': {
-      width: '100%',
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-      padding: "var(--ds-space-0, 0px)".concat("!important"),
-      //Counter component has its own styles overriding them to match designs
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      color: isSelected ? "".concat("var(--ds-text, ".concat(_colors.B400, ")"), "!important") : "2px solid ".concat("var(--ds-text, ".concat(_colors.N500, ")"), "!important"),
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
-      fontWeight: isSelected ? 700 : 400
-    }
-  });
-};
 var fadedCss = function fadedCss(edge, theme) {
   return (0, _react.css)({
     content: '""',
@@ -106,8 +66,6 @@ var customTabWrapper = exports.customTabWrapper = function customTabWrapper(isSe
     alignItems: 'center',
     justifyContent: 'center',
     minWidth: "".concat(REACTIONS_CONTAINER_WIDTH, "px"),
-    minHeight: "".concat(REACTION_CONTAINER_HEIGHT, "px"),
-    marginRight: REACTION_RIGHT_MARGIN_TOKEN,
     boxSizing: 'border-box',
     position: 'relative',
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -127,25 +85,7 @@ var customTabWrapper = exports.customTabWrapper = function customTabWrapper(isSe
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     '&.disabled:after': fadedCss('rightEdge', theme),
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    '&.disabled + &.disabled:after': fadedCss('leftEdge', theme),
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    '&:after': isSelected ? {
-      content: '""',
-      borderBottom: "2px solid ".concat("var(--ds-text, ".concat(_colors.B400, ")")),
-      width: "".concat(REACTIONS_CONTAINER_WIDTH, "px"),
-      bottom: '0px',
-      display: 'block',
-      position: 'absolute',
-      zIndex: 2
-    } : {
-      content: '""',
-      borderBottom: "2px solid transparent",
-      width: "".concat(REACTIONS_CONTAINER_WIDTH, "px"),
-      bottom: '0px',
-      display: 'block',
-      position: 'absolute',
-      zIndex: 1
-    }
+    '&.disabled + &.disabled:after': fadedCss('leftEdge', theme)
   });
 };
 
@@ -209,7 +149,6 @@ var userStyle = exports.userStyle = (0, _react.css)({
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var customTabListStyles = exports.customTabListStyles = (0, _react.css)({
   overflow: 'auto',
-  scrollBehavior: 'smooth',
   display: 'flex',
   paddingBottom: "var(--ds-space-050, 4px)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766

package/dist/cjs/components/Reactions/Reactions.js

@@ -24,8 +24,8 @@ var _ufo = require("../../ufo");
 var _Reaction = require("../Reaction");
 var _ReactionDialog = require("../ReactionDialog");
 var _ReactionPicker = require("../ReactionPicker");
-var _styles = require("./styles");
 var _ReactionSummary = require("../ReactionSummary/");
+var _styles = require("./styles");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
@@ -240,7 +240,9 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     // ufo selected reaction inside the modal dialog
     ufoExperiences.selectedReactionChangeInsideDialog.start();
     handleReactionMouseEnter(emojiId);
-    onDialogSelectReactionCallback(emojiId, analyticsEvent);
+    if (analyticsEvent) {
+      onDialogSelectReactionCallback(emojiId, analyticsEvent);
+    }
 
     // ufo selected reaction inside the modal dialog success
     ufoExperiences.selectedReactionChangeInsideDialog.success({
@@ -251,6 +253,13 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       }
     });
   };
+  var handlePaginationChange = (0, _react.useCallback)(function (emojiId) {
+    getReactionDetails(emojiId);
+    setSelectedEmojiId(emojiId);
+  },
+  // Exclude unstable getReactionDetails to avoid extra re-renders
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [setSelectedEmojiId]);
 
   /**
    * Get the reactions that we want to render are any reactions with a count greater than zero as well as any default emoji not already shown
@@ -355,7 +364,8 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       reactions: memorizedReactions,
       emojiProvider: emojiProvider,
       handleCloseReactionsDialog: handleCloseReactionsDialog,
-      handleSelectReaction: handleSelectReactionInDialog
+      handleSelectReaction: handleSelectReactionInDialog,
+      handlePaginationChange: handlePaginationChange
     })))
   );
 });

package/dist/cjs/shared/constants.js

@@ -95,10 +95,10 @@ var ExtendedReactionsByShortName = exports.ExtendedReactionsByShortName = new Ma
 var TOOLTIP_USERS_LIMIT = exports.TOOLTIP_USERS_LIMIT = 5;
 
 /**
- * Maximum number of reactions that will fit in the horizontal scroll of
+ * Maximum number of reactions that will fit in the horizontal pagination of
  * reactions dialog
  */
-var NUMBER_OF_REACTIONS_TO_DISPLAY = exports.NUMBER_OF_REACTIONS_TO_DISPLAY = 9;
+var NUMBER_OF_REACTIONS_TO_DISPLAY = exports.NUMBER_OF_REACTIONS_TO_DISPLAY = 8;
 
 // This rate is used in fetching emoji resource
 var SAMPLING_RATE_REACTIONS_RENDERED_EXP = exports.SAMPLING_RATE_REACTIONS_RENDERED_EXP = 50;

package/dist/es2019/analytics/index.js

@@ -1,7 +1,7 @@
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 const packageName = "@atlaskit/reactions";
-const packageVersion = "23.0.2";
+const packageVersion = "24.0.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsx jsx
  */
 import { useEffect, useState, useMemo } from 'react';
-import { useIntl } from 'react-intl-next';
+import { FormattedMessage } 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 { ResourcedEmoji } from '@atlaskit/emoji/element';
@@ -19,8 +19,7 @@ export const ReactionView = ({
   emojiProvider,
   reaction
 }) => {
-  const intl = useIntl();
-  const [emojiName, setEmojiName] = useState('');
+  const [emojiShortName, setEmojiShortName] = useState('');
   useEffect(() => {
     (async () => {
       const provider = await emojiProvider;
@@ -28,11 +27,11 @@ export const ReactionView = ({
         shortName: '',
         id: selectedEmojiId
       });
-      if (emoji && emoji.name) {
-        setEmojiName(emoji.name);
+      if (emoji !== null && emoji !== void 0 && emoji.shortName) {
+        setEmojiShortName(emoji.shortName);
       }
     })();
-  }, [emojiProvider, selectedEmojiId]);
+  }, [emojiProvider, selectedEmojiId, reaction]);
   const alphabeticalNames = useMemo(() => {
     var _reactionObj$users;
     const reactionObj = reaction;
@@ -45,15 +44,17 @@ export const ReactionView = ({
       css: reactionViewStyle
     }, tabPanelAttributes), jsx(Text, {
       as: "p"
-    }, jsx(ResourcedEmoji, {
+    }, jsx(FormattedMessage, _extends({}, messages.peopleWhoReactedSubheading, {
+      values: {
+        emojiShortName
+      }
+    })), jsx(ResourcedEmoji, {
       emojiProvider: emojiProvider,
       emojiId: {
         id: selectedEmojiId,
         shortName: ''
       },
-      fitToHeight: 24
-    }), intl.formatMessage(messages.emojiName, {
-      emojiName
+      fitToHeight: 16
     })), 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("div", {

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

@@ -6,12 +6,18 @@ 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 Button from '@atlaskit/button/new';
+import { Flex, xcss } from '@atlaskit/primitives';
+import Button, { IconButton } from '@atlaskit/button/new';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
+import ChevronLeftIcon from '@atlaskit/icon/utility/chevron-left';
+import ChevronRightIcon from '@atlaskit/icon/utility/chevron-right';
 import { NUMBER_OF_REACTIONS_TO_DISPLAY } from '../../shared/constants';
 import { messages } from '../../shared/i18n';
 import { ReactionsList } from './ReactionsList';
-import { containerStyle, titleStyle } from './styles';
+import { containerStyle } from './styles';
+const fullWidthStyle = xcss({
+  width: '100%'
+});
 
 /**
  * Test id for the Reactions modal dialog
@@ -29,8 +35,10 @@ export const ReactionsDialog = ({
   handleCloseReactionsDialog = () => {},
   emojiProvider,
   selectedEmojiId,
-  handleSelectReaction = () => {}
+  handleSelectReaction = () => {},
+  handlePaginationChange = () => {}
 }) => {
+  var _currentReactions$;
   const [elementToScroll, setElementToScroll] = useState();
   const [reactionsContainerRef, setReactionsContainerRef] = useState(null);
   const reactionElementsRef = useRef();
@@ -45,15 +53,35 @@ export const ReactionsDialog = ({
   const sortedReactions = useMemo(() => {
     return reactions.sort((a, b) => (b === null || b === void 0 ? void 0 : b.count) - (a === null || a === void 0 ? void 0 : a.count));
   }, [reactions]);
+  const maxPages = Math.max(1, Math.ceil(reactions.length / NUMBER_OF_REACTIONS_TO_DISPLAY));
+  const [currentPage, setCurrentPage] = useState(1);
+  const currentReactions = useMemo(() => {
+    const start = (currentPage - 1) * NUMBER_OF_REACTIONS_TO_DISPLAY;
+    const end = start + NUMBER_OF_REACTIONS_TO_DISPLAY;
+    return sortedReactions.slice(start, end);
+  }, [sortedReactions, currentPage]);
+  const handleNextPage = () => {
+    setCurrentPage(prevPage => Math.min(prevPage + 1, maxPages));
+  };
+  const handlePreviousPage = () => {
+    setCurrentPage(prevPage => Math.max(prevPage - 1, 1));
+  };
+  const firstEmojiOnPage = (_currentReactions$ = currentReactions[0]) === null || _currentReactions$ === void 0 ? void 0 : _currentReactions$.emojiId;
+  useEffect(() => {
+    // trigger the handler with the first emoji when the page changes
+    if (firstEmojiOnPage) {
+      handlePaginationChange(firstEmojiOnPage);
+    }
+  }, [currentPage, firstEmojiOnPage, handlePaginationChange]);
 
-  /* set Reactions Border Width , 9 Number of reactions to display*/
+  /* set Reactions Border Width , 8 Number of reactions to display*/
   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, index) => {
+    entries.forEach(entry => {
       var _dataset;
       const element = entry.target;
       const emojiElement = element === null || element === void 0 ? void 0 : element.querySelector('[data-emoji-id]');
@@ -121,16 +149,32 @@ export const ReactionsDialog = ({
     onClose: handleCloseReactionsDialog,
     height: 600,
     testId: RENDER_MODAL_TESTID
-  }, jsx(ModalHeader, null, jsx("div", {
-    css: titleStyle
-  }, jsx(ModalTitle, null, intl.formatMessage(messages.reactionsCount, {
+  }, jsx(ModalHeader, null, jsx(Flex, {
+    direction: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    xcss: fullWidthStyle
+  }, jsx("div", null, jsx(ModalTitle, null, intl.formatMessage(messages.reactionsCount, {
     count: totalReactionsCount
+  }))), jsx(Flex, {
+    alignItems: "center",
+    gap: "space.100"
+  }, jsx(IconButton, {
+    isDisabled: currentPage === 1,
+    onClick: handlePreviousPage,
+    icon: ChevronLeftIcon,
+    label: intl.formatMessage(messages.leftNavigateLabel)
+  }), jsx(IconButton, {
+    onClick: handleNextPage,
+    isDisabled: currentPage === maxPages,
+    icon: ChevronRightIcon,
+    label: intl.formatMessage(messages.rightNavigateLabel)
   })))), jsx(ModalBody, null, jsx("div", {
     css: containerStyle(reactionsBorderWidth),
     ref: setRef
   }, jsx(ReactionsList, {
     initialEmojiId: selectedEmojiId,
-    reactions: sortedReactions,
+    reactions: currentReactions,
     emojiProvider: emojiProvider,
     onReactionChanged: handleSelectReaction
   }))), jsx(ModalFooter, null, jsx(Button, {