@atlaskit/reactions 23.0.2 → 24.0.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/reactions
 
+## 24.0.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 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.1";
 /**
  * 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/i18n/cs.js

@@ -25,8 +25,9 @@ var _default = exports.default = {
   'reactions.dialog.close': 'Zavřít',
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Navigace doleva',
+  'reactions.dialog.people-who-reacted.subheader': 'Lidé, kteří reagovali smajlíkem {emojiShortName}',
   'reactions.dialog.reactions.count': '{count, plural, one {{count,number} reakce} few {{count,number} reakce} many {{count,number} reakce} other {{count,number} reakcí}}',
   'reactions.dialog.right.navigate': 'Navigace doprava',
-  'reactions.dialog.viewall': 'Podívejte se, kdo reagoval',
+  'reactions.dialog.viewall': 'Zobrazit vše',
   'reactions.dialog.viewall.tooltip': 'Zobrazit všechny reakce uživatelů'
 };

package/dist/cjs/i18n/da.js

@@ -25,8 +25,9 @@ var _default = exports.default = {
   'reactions.dialog.close': 'Luk',
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Navigation til venstre',
+  'reactions.dialog.people-who-reacted.subheader': 'Personer der reagerede med {emojiShortName}',
   'reactions.dialog.reactions.count': '{count, plural, one {{count,number} reaktion} other {{count,number} reaktioner}}',
   'reactions.dialog.right.navigate': 'Navigation til højre',
-  'reactions.dialog.viewall': 'Se, hvem der har reageret',
+  'reactions.dialog.viewall': 'Vis alle',
   'reactions.dialog.viewall.tooltip': 'Se alle brugerreaktioner'
 };

package/dist/cjs/i18n/de.js

@@ -24,8 +24,9 @@ var _default = exports.default = {
   'reaction-picker-trigger.add.reaction.message': 'Eine Reaktion hinzufügen',
   'reactions.dialog.close': 'Schließen',
   'reactions.dialog.left.navigate': 'Nach links navigieren',
+  'reactions.dialog.people-who-reacted.subheader': 'Personen, die mit {emojiShortName} reagiert haben',
   'reactions.dialog.reactions.count': '{count, plural, one {{count,number} Reaktion} other {{count,number} Reaktionen}}',
   'reactions.dialog.right.navigate': 'Nach rechts navigieren',
-  'reactions.dialog.viewall': 'Reaktionen ansehen',
+  'reactions.dialog.viewall': 'Alle anzeigen',
   'reactions.dialog.viewall.tooltip': 'Alle Benutzerreaktionen anzeigen'
 };

package/dist/cjs/i18n/en.js

@@ -25,8 +25,9 @@ var _default = exports.default = {
   'reactions.dialog.close': 'Close',
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Left Navigate',
+  'reactions.dialog.people-who-reacted.subheader': 'People who reacted with {emojiShortName}',
   'reactions.dialog.reactions.count': '{count, plural, one {# reaction} other {# reactions} }',
   'reactions.dialog.right.navigate': 'Right Navigate',
-  'reactions.dialog.viewall': 'See who reacted',
+  'reactions.dialog.viewall': 'View all',
   'reactions.dialog.viewall.tooltip': 'View all user reactions'
 };

package/dist/cjs/i18n/en_GB.js

@@ -25,8 +25,9 @@ var _default = exports.default = {
   'reactions.dialog.close': 'Close',
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Left Navigate',
+  'reactions.dialog.people-who-reacted.subheader': 'People who reacted with {emojiShortName}',
   'reactions.dialog.reactions.count': '{count, plural, one {# reaction} other {# reactions} }',
   'reactions.dialog.right.navigate': 'Right Navigate',
-  'reactions.dialog.viewall': 'See who reacted',
+  'reactions.dialog.viewall': 'View all',
   'reactions.dialog.viewall.tooltip': 'View all user reactions'
 };

package/dist/cjs/i18n/en_ZZ.js

@@ -25,8 +25,9 @@ var _default = exports.default = {
   'reactions.dialog.close': '⁣⁢Close‍⁡‌؜‍⁡‌‌⁣⁤',
   'reactions.dialog.emoji.name': '⁣⁢{emojiName}⁡‌‌‍؜⁠⁡‍⁡؜⁠‌‌‍‍⁡⁣⁤',
   'reactions.dialog.left.navigate': '⁣⁢Left Navigate؜‍‌؜⁠؜⁡‍⁠⁠⁡⁣⁤',
+  'reactions.dialog.people-who-reacted.subheader': '⁣⁢People who reacted with {emojiShortName}⁠⁡‍‌‌‌‍‌‍⁣⁤',
   'reactions.dialog.reactions.count': '{count, plural, one {⁣⁢{count,number} reaction‌‍‍⁡‍‌⁡⁠‌‍⁠⁣⁤} other {⁣⁢{count,number} reactions‌‍‍⁡‍‌⁡⁠‌‍⁠⁣⁤}}',
   'reactions.dialog.right.navigate': '⁣⁢Right Navigate⁠؜؜⁠‌‌⁡‍‍⁠⁠⁣⁤',
-  'reactions.dialog.viewall': '⁣⁢See who reacted؜؜⁡‍‍‍⁣⁤',
+  'reactions.dialog.viewall': '⁣⁢View all‌‌⁡⁠⁡‌؜⁣⁤',
   'reactions.dialog.viewall.tooltip': '⁣⁢View all user reactions⁡‌؜؜⁡⁡‌‍؜؜⁣⁤'
 };

package/dist/cjs/i18n/es.js

@@ -25,8 +25,9 @@ var _default = exports.default = {
   'reactions.dialog.close': 'Cerrar',
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Desplazarse hacia la izquierda',
+  'reactions.dialog.people-who-reacted.subheader': 'Personas que han reaccionado con {emojiShortName}',
   'reactions.dialog.reactions.count': '{count, plural, one {{count,number} reacción} other {{count,number} reacciones}}',
   'reactions.dialog.right.navigate': 'Desplazarse hacia la derecha',
-  'reactions.dialog.viewall': 'Ver quién ha reaccionado',
+  'reactions.dialog.viewall': 'Ver todo',
   'reactions.dialog.viewall.tooltip': 'Ver todas las reacciones de los usuarios'
 };

package/dist/cjs/i18n/fi.js

@@ -24,8 +24,9 @@ var _default = exports.default = {
   'reaction-picker-trigger.add.reaction.message': 'Lisää reaktio',
   'reactions.dialog.close': 'Sulje',
   'reactions.dialog.left.navigate': 'Navigointi vasemmalle',
+  'reactions.dialog.people-who-reacted.subheader': 'Henkilöt, jotka reagoivat emojilla {emojiShortName}',
   'reactions.dialog.reactions.count': '{count, plural, one {{count,number} reaktio} other {{count,number} reaktiota}}',
   'reactions.dialog.right.navigate': 'Navigointi oikealle',
-  'reactions.dialog.viewall': 'Katso, kuka on reagoinut',
+  'reactions.dialog.viewall': 'Näytä kaikki',
   'reactions.dialog.viewall.tooltip': 'Näytä kaikki käyttäjäreaktiot'
 };

package/dist/cjs/i18n/fr.js

@@ -25,8 +25,9 @@ var _default = exports.default = {
   'reactions.dialog.close': 'Fermer',
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Naviguer vers la gauche',
+  'reactions.dialog.people-who-reacted.subheader': 'Personnes qui ont réagi par {emojiShortName}',
   'reactions.dialog.reactions.count': '{count, plural, one {{count,number} réaction} other {{count,number} réactions}}',
   'reactions.dialog.right.navigate': 'Naviguer vers la droite',
-  'reactions.dialog.viewall': 'Voir qui a réagi',
+  'reactions.dialog.viewall': 'Afficher tout',
   'reactions.dialog.viewall.tooltip': 'Afficher toutes les réactions des utilisateurs'
 };

package/dist/cjs/i18n/hu.js

@@ -25,8 +25,9 @@ var _default = exports.default = {
   'reactions.dialog.close': 'Bezárás',
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Balra navigálás',
+  'reactions.dialog.people-who-reacted.subheader': 'A következővel reagáló felhasználók: {emojiShortName}',
   'reactions.dialog.reactions.count': '{count, plural, one {{count,number} reakció} other {{count,number} reakció}}',
   'reactions.dialog.right.navigate': 'Jobbra navigálás',
-  'reactions.dialog.viewall': 'Reagálók megtekintése',
+  'reactions.dialog.viewall': 'Összes megtekintése',
   'reactions.dialog.viewall.tooltip': 'Minden felhasználói reakció megtekintése'
 };

package/dist/cjs/i18n/it.js

@@ -25,8 +25,9 @@ var _default = exports.default = {
   'reactions.dialog.close': 'Chiudi',
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Navigazione a sinistra',
+  'reactions.dialog.people-who-reacted.subheader': 'Persone che hanno reagito con {emojiShortName}',
   'reactions.dialog.reactions.count': '{count, plural, one {{count,number} reazione} other {{count,number} reazioni}}',
   'reactions.dialog.right.navigate': 'Navigazione a destra',
-  'reactions.dialog.viewall': 'Guarda chi ha reagito',
+  'reactions.dialog.viewall': 'Visualizza tutto',
   'reactions.dialog.viewall.tooltip': 'Visualizza tutte le reazioni degli utenti'
 };

package/dist/cjs/i18n/ja.js

@@ -25,8 +25,9 @@ var _default = exports.default = {
   'reactions.dialog.close': '閉じる',
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': '左に移動',
+  'reactions.dialog.people-who-reacted.subheader': '{emojiShortName} でリアクションしたユーザー',
   'reactions.dialog.reactions.count': '{count, plural, other {{count,number} 件のリアクション}}',
   'reactions.dialog.right.navigate': '右に移動',
-  'reactions.dialog.viewall': 'リアクションしたユーザーを表示',
+  'reactions.dialog.viewall': 'すべて表示',
   'reactions.dialog.viewall.tooltip': 'ユーザーによるすべてのリアクションを表示'
 };

package/dist/cjs/i18n/ko.js

@@ -24,8 +24,9 @@ var _default = exports.default = {
   'reaction-picker-trigger.add.reaction.message': '반응 추가',
   'reactions.dialog.close': '닫기',
   'reactions.dialog.left.navigate': '왼쪽 탐색',
+  'reactions.dialog.people-who-reacted.subheader': '{emojiShortName} 이모지로 반응한 사용자',
   'reactions.dialog.reactions.count': '{count, plural, other {반응 {count,number}개}}',
   'reactions.dialog.right.navigate': '오른쪽 탐색',
-  'reactions.dialog.viewall': '반응한 사용자 보기',
+  'reactions.dialog.viewall': '모두 보기',
   'reactions.dialog.viewall.tooltip': '사용자 반응 모두 보기'
 };

package/dist/cjs/i18n/nb.js

@@ -24,8 +24,9 @@ var _default = exports.default = {
   'reaction-picker-trigger.add.reaction.message': 'Legg til en reaksjon',
   'reactions.dialog.close': 'Lukk',
   'reactions.dialog.left.navigate': 'Naviger til venstre',
+  'reactions.dialog.people-who-reacted.subheader': 'Personer som reagerte med {emojiShortName}',
   'reactions.dialog.reactions.count': '{count, plural, one {{count,number} reaksjon} other {{count,number} reaksjoner}}',
   'reactions.dialog.right.navigate': 'Naviger til høyre',
-  'reactions.dialog.viewall': 'Se hvem som har reagert',
+  'reactions.dialog.viewall': 'Vis alle',
   'reactions.dialog.viewall.tooltip': 'Se alle brukerreaksjoner'
 };

package/dist/cjs/i18n/nl.js

@@ -25,8 +25,9 @@ var _default = exports.default = {
   'reactions.dialog.close': 'Sluiten',
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Navigeer naar links',
+  'reactions.dialog.people-who-reacted.subheader': 'Mensen die {emojiShortName} hebben gereageerd',
   'reactions.dialog.reactions.count': '{count, plural, one {{count,number} reactie} other {{count,number} reacties}}',
   'reactions.dialog.right.navigate': 'Navigeer naar rechts',
-  'reactions.dialog.viewall': 'Bekijken wie er heeft gereageerd',
+  'reactions.dialog.viewall': 'Alles bekijken',
   'reactions.dialog.viewall.tooltip': 'Alle reacties van gebruikers bekijken'
 };

package/dist/cjs/i18n/pl.js

@@ -25,8 +25,9 @@ var _default = exports.default = {
   'reactions.dialog.close': 'Zamknij',
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Przejdź w lewo',
+  'reactions.dialog.people-who-reacted.subheader': 'Osoby, które zareagowały, przesyłając emoji {emojiShortName}',
   'reactions.dialog.reactions.count': '{count, plural, one {{count,number} reakcja} few {{count,number} reakcje} many {{count,number} reakcji} other {{count,number} reakcji}}',
   'reactions.dialog.right.navigate': 'Przejdź w prawo',
-  'reactions.dialog.viewall': 'Zobacz, kto zareagował',
+  'reactions.dialog.viewall': 'Wyświetl wszystkich',
   'reactions.dialog.viewall.tooltip': 'Wyświetl wszystkie reakcje użytkowników'
 };