@atlaskit/reactions 24.8.0 → 24.10.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/reactions
 
+## 24.10.0
+
+### Minor Changes
+
+- [#111959](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111959)
+  [`0411f7100eec8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0411f7100eec8) -
+  [ux] Move "View all" button before the "Add reaction" button and make button non-subtle
+
+## 24.9.0
+
+### Minor Changes
+
+- [#110049](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110049)
+  [`27aa41be2259d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/27aa41be2259d) -
+  Create new UFO experience for page navigation in Reactions Dialog along with a new prop that
+  accepts a page change handler. Also refactor code when opening dialog, and update tests
+
 ## 24.8.0
 
 ### Minor 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 = "24.8.0";
+var packageVersion = "24.10.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -34,6 +34,15 @@ var profileWrapperStyle = (0, _primitives.xcss)({
   marginLeft: 'space.0'
 });
 var reactionViewStyle = (0, _primitives.xcss)({
+  marginTop: 'space.300',
+  minHeight: '300px',
+  minWidth: '550px'
+});
+var centerSpinnerStyle = (0, _primitives.xcss)({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '100%',
   marginTop: 'space.300'
 });
 var headerStyle = (0, _primitives.xcss)({
@@ -49,11 +58,11 @@ var ReactionView = exports.ReactionView = function ReactionView(_ref) {
     ProfileCardWrapper = _ref.ProfileCardWrapper;
   var _useState = (0, _react.useState)(''),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    emojiShortName = _useState2[0],
-    setEmojiShortName = _useState2[1];
+    emojiName = _useState2[0],
+    setEmojiName = _useState2[1];
   (0, _react.useEffect)(function () {
     (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-      var provider, emoji, shortNameWithoutColons;
+      var provider, emoji, capitalizedName;
       return _regenerator.default.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -68,9 +77,12 @@ var ReactionView = exports.ReactionView = function ReactionView(_ref) {
             });
           case 5:
             emoji = _context.sent;
-            if (emoji !== null && emoji !== void 0 && emoji.shortName) {
-              shortNameWithoutColons = emoji.shortName.replace(/:/g, '');
-              setEmojiShortName(shortNameWithoutColons);
+            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":
@@ -95,7 +107,7 @@ var ReactionView = exports.ReactionView = function ReactionView(_ref) {
     size: "xsmall"
   }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.peopleWhoReactedSubheading, {
     values: {
-      emojiShortName: emojiShortName
+      emojiShortName: emojiName
     }
   }))), (0, _react2.jsx)(_primitives.Box, {
     as: "span",
@@ -109,8 +121,8 @@ var ReactionView = exports.ReactionView = function ReactionView(_ref) {
     fitToHeight: 24
   }))), 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", {
-    css: _styles.centerSpinner
+  (0, _react2.jsx)(_primitives.Box, {
+    xcss: centerSpinnerStyle
   }, (0, _react2.jsx)(_spinner.default, {
     size: "large"
   })) :

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ReactionsDialog = exports.RENDER_MODAL_TESTID = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _reactIntlNext = require("react-intl-next");
@@ -64,6 +63,16 @@ var ReactionsDialog = exports.ReactionsDialog = function ReactionsDialog(_ref) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     reactionsContainerRef = _useState4[0],
     setReactionsContainerRef = _useState4[1];
+
+  // prevents accidental triggering of handlePaginationChange on initial load
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    hasNavigatedPages = _useState6[0],
+    setHasNavigatedPages = _useState6[1];
+  var _useState7 = (0, _react.useState)(1),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    currentPage = _useState8[0],
+    setCurrentPage = _useState8[1];
   var reactionElementsRef = (0, _react.useRef)();
   var observerRef = (0, _react.useRef)();
   var intl = (0, _reactIntlNext.useIntl)();
@@ -73,38 +82,31 @@ var ReactionsDialog = exports.ReactionsDialog = function ReactionsDialog(_ref) {
       return accum += current === null || current === void 0 ? void 0 : current.count;
     }, 0);
   }, [reactions]);
-  var sortedReactions = (0, _react.useMemo)(function () {
-    return (0, _toConsumableArray2.default)(reactions).sort(function (a, b) {
-      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]);
+    return reactions.slice(start, end);
+  }, [reactions, currentPage]);
   var handleNextPage = function handleNextPage() {
     setCurrentPage(function (prevPage) {
       return Math.min(prevPage + 1, maxPages);
     });
+    setHasNavigatedPages(true);
   };
   var handlePreviousPage = function handlePreviousPage() {
     setCurrentPage(function (prevPage) {
       return Math.max(prevPage - 1, 1);
     });
+    setHasNavigatedPages(true);
   };
   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);
+    if (hasNavigatedPages && firstEmojiOnPage) {
+      handlePaginationChange(firstEmojiOnPage, currentPage, maxPages);
     }
-  }, [currentPage, firstEmojiOnPage, handlePaginationChange]);
+  }, [hasNavigatedPages, currentPage, maxPages, firstEmojiOnPage, handlePaginationChange]);
 
   /* set Reactions Border Width , 8 Number of reactions to display*/
   var reactionsBorderWidth = (0, _react.useMemo)(function () {
@@ -179,12 +181,12 @@ var ReactionsDialog = exports.ReactionsDialog = function ReactionsDialog(_ref) {
   var selectedIndex = currentReactions.findIndex(function (reaction) {
     return reaction.emojiId === selectedEmojiId;
   });
-  var onTabChange = (0, _react.useCallback)(function (index, analyticsEvent) {
+  var onTabChange = (0, _react.useCallback)(function (index) {
     if (index === selectedIndex) {
       return;
     }
     var emojiId = currentReactions[index].emojiId;
-    handleSelectReaction(emojiId, analyticsEvent);
+    handleSelectReaction(emojiId);
   }, [selectedIndex, currentReactions, handleSelectReaction]);
   return (0, _react2.jsx)(_modalDialog.default, {
     onClose: handleCloseReactionsDialog,

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.userStyle = exports.userListStyle = exports.navigationContainerStyle = exports.customTabListStyles = exports.containerStyle = exports.centerSpinner = void 0;
+exports.userStyle = exports.userListStyle = exports.navigationContainerStyle = exports.customTabListStyles = exports.containerStyle = void 0;
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 /**
@@ -83,13 +83,4 @@ var customTabListStyles = exports.customTabListStyles = (0, _react.css)({
     // paddingInline exists to maintain styling prior to @atlaskit/tabs update that removed baked in horizontal padding
     paddingInline: "var(--ds-space-100, 8px)"
   }
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var centerSpinner = exports.centerSpinner = (0, _react.css)({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  height: '100%',
-  marginTop: "var(--ds-space-300, 24px)"
 });

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

@@ -13,6 +13,7 @@ var _reactIntlNext = require("react-intl-next");
 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 _Reaction = require("../Reaction");
 var _ReactionSummaryButton = require("./ReactionSummaryButton");
 var _i18n = require("../../shared/i18n");
@@ -82,16 +83,21 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
         });
       }), allowUserDialog && /*#__PURE__*/_react.default.createElement(_primitives.Box, {
         xcss: viewAllButtonStyling
-      }, /*#__PURE__*/_react.default.createElement(_new.default, {
-        appearance: "subtle",
-        onClick: function onClick() {
-          return handleOpenReactionsDialog === null || handleOpenReactionsDialog === void 0 ? void 0 : handleOpenReactionsDialog(reactions[0].emojiId);
-        },
-        spacing: "compact"
-      }, /*#__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(_tooltip.default, {
+        content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.seeWhoReactedTooltip),
+        hideTooltipOnClick: true
+      }, function (tooltipProps) {
+        return /*#__PURE__*/_react.default.createElement(_new.default, (0, _extends2.default)({}, tooltipProps, {
+          spacing: "compact",
+          onClick: function onClick() {
+            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)));
+      })));
     },
     isOpen: isSummaryPopupOpen,
     onClose: handlePopupClose,

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

@@ -9,6 +9,7 @@ exports.Reactions = exports.RENDER_VIEWALL_REACTED_USERS_DIALOG = exports.RENDER
 exports.getTooltip = getTooltip;
 exports.ufoExperiences = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
@@ -38,16 +39,12 @@ 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 tooltipStyle = (0, _primitives.xcss)({
-  paddingLeft: 'space.050'
-});
-
 /**
- * Set of all available UFO experiences relating to reactions dialog
+ * Set of all available UFO experiences relating to Reactions Dialog
  */
 var ufoExperiences = exports.ufoExperiences = {
   /**
-   * Expeirence when a reaction dialog is opened
+   * Experience when a reaction dialog is opened
    */
   openDialog: _ufo.ReactionDialogOpened,
   /**
@@ -57,8 +54,13 @@ var ufoExperiences = exports.ufoExperiences = {
   /**
    * Experience when a reaction changed/fetched from inside the modal dialog
    */
-  selectedReactionChangeInsideDialog: _ufo.ReactionDialogSelectedReactionChanged
+  selectedReactionChangeInsideDialog: _ufo.ReactionDialogSelectedReactionChanged,
+  pageNavigated: _ufo.ReactionDialogPageNavigation
 };
+var dialogEntrypointButtonStyle = (0, _primitives.xcss)({
+  marginRight: 'space.050',
+  marginTop: 'space.050'
+});
 
 /**
  * Test id for wrapper Reactions div
@@ -121,6 +123,8 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     onDialogCloseCallback = _ref$onDialogCloseCal === void 0 ? function () {} : _ref$onDialogCloseCal,
     _ref$onDialogSelectRe = _ref.onDialogSelectReactionCallback,
     onDialogSelectReactionCallback = _ref$onDialogSelectRe === void 0 ? function () {} : _ref$onDialogSelectRe,
+    _ref$onDialogPageChan = _ref.onDialogPageChangeCallback,
+    onDialogPageChangeCallback = _ref$onDialogPageChan === void 0 ? function () {} : _ref$onDialogPageChan,
     _ref$emojiPickerSize = _ref.emojiPickerSize,
     emojiPickerSize = _ref$emojiPickerSize === void 0 ? 'medium' : _ref$emojiPickerSize,
     _ref$miniMode = _ref.miniMode,
@@ -192,31 +196,12 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
   }, [createAnalyticsEvent, onSelection, reactions]);
 
   /**
-   * event handler to open selected reaction from tooltip
+   * event handler to open dialog with selected reaction
    * @param emojiId selected emoji id
    */
   var handleOpenReactionsDialog = function handleOpenReactionsDialog(emojiId) {
     // ufo start opening reaction dialog
     ufoExperiences.openDialog.start();
-    setSelectedEmojiId(emojiId);
-    onDialogOpenCallback(emojiId, 'tooltip');
-    // ufo opening reaction dialog success
-    ufoExperiences.openDialog.success({
-      metadata: {
-        emojiId: emojiId,
-        source: 'Reactions',
-        reason: 'Opening dialog from emoji tooltip link successfully'
-      }
-    });
-  };
-
-  /**
-   * Event handler to oepn all reactions link button
-   */
-  var handleOpenAllReactionsDialog = function handleOpenAllReactionsDialog() {
-    // ufo start opening reaction dialog
-    ufoExperiences.openDialog.start();
-    var emojiId = reactions[0].emojiId;
     getReactionDetails(emojiId);
     setSelectedEmojiId(emojiId);
     onDialogOpenCallback(emojiId, 'button');
@@ -226,7 +211,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       metadata: {
         emojiId: emojiId,
         source: 'Reactions',
-        reason: 'Opening all reactions dialog link successfully'
+        reason: 'Opening Reactions Dialog successfully'
       }
     });
   };
@@ -244,14 +229,12 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       }
     });
   };
-  var handleSelectReactionInDialog = function handleSelectReactionInDialog(emojiId, analyticsEvent) {
+  var handleSelectReactionInDialog = function handleSelectReactionInDialog(emojiId) {
     // ufo selected reaction inside the modal dialog
     ufoExperiences.selectedReactionChangeInsideDialog.start();
     handleReactionMouseEnter(emojiId);
     setSelectedEmojiId(emojiId);
-    if (analyticsEvent) {
-      onDialogSelectReactionCallback(emojiId, analyticsEvent);
-    }
+    onDialogSelectReactionCallback(emojiId);
 
     // ufo selected reaction inside the modal dialog success
     ufoExperiences.selectedReactionChangeInsideDialog.success({
@@ -262,9 +245,20 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       }
     });
   };
-  var handlePaginationChange = (0, _react.useCallback)(function (emojiId) {
+  var handlePaginationChange = (0, _react.useCallback)(function (emojiId, currentPage, maxPages) {
+    ufoExperiences.pageNavigated.start();
+
+    // fetch the latest active emoji from the new page
     getReactionDetails(emojiId);
     setSelectedEmojiId(emojiId);
+    onDialogPageChangeCallback(emojiId, currentPage, maxPages);
+    ufoExperiences.pageNavigated.success({
+      metadata: {
+        emojiId: emojiId,
+        source: 'Reactions Dialog',
+        reason: 'Navigated to new page'
+      }
+    });
   },
   // Exclude unstable getReactionDetails to avoid extra re-renders
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -307,6 +301,11 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
   var hasEmojiWithFivePlusReactions = reactions.some(function (reaction) {
     return reaction.count >= 5;
   });
+  var sortedReactions = (0, _react.useMemo)(function () {
+    return (0, _toConsumableArray2.default)(memorizedReactions).sort(function (a, b) {
+      return (b === null || b === void 0 ? void 0 : b.count) - (a === null || a === void 0 ? void 0 : a.count);
+    });
+  }, [memorizedReactions]);
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     (0, _react2.jsx)("div", {
@@ -315,7 +314,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     }, shouldShowSummaryView ? (0, _react2.jsx)("div", {
       "data-testid": RENDER_REACTIONS_SUMMARY_TESTID
     }, (0, _react2.jsx)(_ReactionSummary.ReactionSummaryView, {
-      reactions: memorizedReactions,
+      reactions: sortedReactions,
       emojiProvider: emojiProvider,
       flash: flash,
       particleEffectByEmoji: particleEffectByEmoji,
@@ -339,7 +338,20 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
         showParticleEffect: particleEffectByEmoji[reaction.emojiId],
         showOpaqueBackground: showOpaqueBackground
       });
-    }), (0, _react2.jsx)(_ReactionPicker.ReactionPicker
+    }), allowUserDialog && hasEmojiWithFivePlusReactions && !shouldShowSummaryView && (0, _react2.jsx)(_primitives.Box, {
+      xcss: dialogEntrypointButtonStyle
+    }, (0, _react2.jsx)(_tooltip.default, {
+      content: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.seeWhoReactedTooltip),
+      hideTooltipOnClick: true
+    }, function (tooltipProps) {
+      return (0, _react2.jsx)(_new.default, (0, _extends2.default)({}, tooltipProps, {
+        spacing: "compact",
+        onClick: function onClick() {
+          return handleOpenReactionsDialog(sortedReactions[0].emojiId);
+        },
+        testId: RENDER_VIEWALL_REACTED_USERS_DIALOG
+      }), (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.seeWhoReacted));
+    })), (0, _react2.jsx)(_ReactionPicker.ReactionPicker
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     , {
       css: _styles.reactionPickerStyle,
@@ -357,21 +369,9 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       showOpaqueBackground: showOpaqueBackground,
       showAddReactionText: showAddReactionText,
       subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
-    }), allowUserDialog && hasEmojiWithFivePlusReactions && !shouldShowSummaryView && (0, _react2.jsx)(_primitives.Box, {
-      xcss: tooltipStyle
-    }, (0, _react2.jsx)(_tooltip.default, {
-      content: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.seeWhoReactedTooltip),
-      hideTooltipOnClick: true
-    }, function (tooltipProps) {
-      return (0, _react2.jsx)(_new.default, (0, _extends2.default)({}, tooltipProps, {
-        appearance: "subtle",
-        spacing: "compact",
-        onClick: handleOpenAllReactionsDialog,
-        testId: RENDER_VIEWALL_REACTED_USERS_DIALOG
-      }), (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.seeWhoReacted));
-    })), (0, _react2.jsx)(_modalDialog.ModalTransition, null, !!selectedEmojiId && (0, _react2.jsx)(_ReactionDialog.ReactionsDialog, {
+    }), (0, _react2.jsx)(_modalDialog.ModalTransition, null, !!selectedEmojiId && (0, _react2.jsx)(_ReactionDialog.ReactionsDialog, {
       selectedEmojiId: selectedEmojiId,
-      reactions: memorizedReactions,
+      reactions: sortedReactions,
       emojiProvider: emojiProvider,
       handleCloseReactionsDialog: handleCloseReactionsDialog,
       handleSelectReaction: handleSelectReactionInDialog,

package/dist/cjs/i18n/cs.js

@@ -17,7 +17,6 @@ var _default = exports.default = {
   'fabric.reactions.error.unexpected': 'Reakce jsou dočasně nedostupné.',
   'fabric.reactions.loading': 'Načítání...',
   'fabric.reactions.more.emojis': 'Více smajlíků',
-  'fabric.reactions.more.info': 'Další informace',
   'fabric.reactions.other.reacted.users': '{count, plural, one {a jeden další} few {a {count} další} many {a {count} dalšího} other {a {count} dalších}}',
   'fabric.reactions.reactwithemoji': 'Reagovat pomocí smajlíku {emoji}',
   'fabric.reactions.summary': 'Zobrazit všechny reakce uživatelů',
@@ -26,7 +25,6 @@ var _default = exports.default = {
   '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': 'Zobrazit vše',
   'reactions.dialog.viewall.tooltip': 'Zobrazit všechny reakce uživatelů'

package/dist/cjs/i18n/da.js

@@ -17,7 +17,6 @@ var _default = exports.default = {
   'fabric.reactions.error.unexpected': 'Reaktioner er midlertidigt utilgængelige',
   'fabric.reactions.loading': 'Indlæser ...',
   'fabric.reactions.more.emojis': 'Flere emojis',
-  'fabric.reactions.more.info': 'Flere oplysninger',
   'fabric.reactions.other.reacted.users': '{count, plural, one {og én anden} other {og {count} andre}}',
   'fabric.reactions.reactwithemoji': 'Reager med emojien {emoji}',
   'fabric.reactions.summary': 'Se alle brugerreaktioner',
@@ -26,7 +25,6 @@ var _default = exports.default = {
   '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': 'Vis alle',
   'reactions.dialog.viewall.tooltip': 'Se alle brugerreaktioner'

package/dist/cjs/i18n/de.js

@@ -17,7 +17,6 @@ var _default = exports.default = {
   'fabric.reactions.error.unexpected': 'Reaktionen sind vorübergehend nicht verfügbar.',
   'fabric.reactions.loading': 'Wird geladen...',
   'fabric.reactions.more.emojis': 'Mehr Emojis',
-  'fabric.reactions.more.info': 'Weitere Informationen',
   'fabric.reactions.other.reacted.users': '{count, plural, one {und ein weiterer} other {und {count} weitere}}',
   'fabric.reactions.reactwithemoji': 'Mit {emoji}-Emoji reagieren',
   'fabric.reactions.summary': 'Alle Benutzerreaktionen anzeigen',
@@ -25,7 +24,6 @@ var _default = exports.default = {
   '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': 'Alle anzeigen',
   'reactions.dialog.viewall.tooltip': 'Alle Benutzerreaktionen anzeigen'

package/dist/cjs/i18n/en.js

@@ -17,7 +17,6 @@ var _default = exports.default = {
   'fabric.reactions.error.unexpected': 'Reactions are temporarily unavailable',
   'fabric.reactions.loading': 'Loading...',
   'fabric.reactions.more.emojis': 'More emojis',
-  'fabric.reactions.more.info': 'More info',
   'fabric.reactions.other.reacted.users': '{count, plural, one {and one other} other {and {count} others}}',
   'fabric.reactions.reactwithemoji': 'React with {emoji} emoji',
   'fabric.reactions.summary': 'View all user reactions',
@@ -26,7 +25,7 @@ var _default = exports.default = {
   '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.reactions.count': '{count, plural, one {# total reaction} other {# total reactions} }',
   'reactions.dialog.right.navigate': 'Right Navigate',
   'reactions.dialog.viewall': 'View all',
   'reactions.dialog.viewall.tooltip': 'View all user reactions'

package/dist/cjs/i18n/en_GB.js

@@ -17,7 +17,6 @@ var _default = exports.default = {
   'fabric.reactions.error.unexpected': 'Reactions are temporarily unavailable',
   'fabric.reactions.loading': 'Loading...',
   'fabric.reactions.more.emojis': 'More emojis',
-  'fabric.reactions.more.info': 'More info',
   'fabric.reactions.other.reacted.users': '{count, plural, one {and one other} other {and {count} others}}',
   'fabric.reactions.reactwithemoji': 'React with {emoji} emoji',
   'fabric.reactions.summary': 'View all user reactions',
@@ -26,7 +25,7 @@ var _default = exports.default = {
   '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.reactions.count': '{count, plural, one {# total reaction} other {# total reactions} }',
   'reactions.dialog.right.navigate': 'Right Navigate',
   'reactions.dialog.viewall': 'View all',
   'reactions.dialog.viewall.tooltip': 'View all user reactions'

package/dist/cjs/i18n/en_ZZ.js

@@ -17,7 +17,6 @@ var _default = exports.default = {
   'fabric.reactions.error.unexpected': '⁣⁢Reactions are temporarily unavailable⁡‍‍؜‍⁡‌؜؜؜؜‍⁠‍⁣⁤',
   'fabric.reactions.loading': '⁣⁢Loading...⁡؜؜؜‌⁣⁤',
   'fabric.reactions.more.emojis': '⁣⁢More emojis‌‍⁠⁠‍؜‍⁡⁠⁡؜‌⁠⁣⁤',
-  'fabric.reactions.more.info': '⁣⁢More info؜؜؜‍⁠‍؜⁠؜⁠؜⁡⁣⁤',
   'fabric.reactions.other.reacted.users': '{count, plural, one {⁣⁢and one other‍⁠؜⁠⁡‌⁠⁠⁠⁣⁤} other {⁣⁢and {count} others‍⁠؜⁠⁡‌⁠⁠⁠⁣⁤}}',
   'fabric.reactions.reactwithemoji': '⁣⁢React with {emoji} emoji‌‍؜‍⁡⁠⁡⁣⁤',
   'fabric.reactions.summary': '⁣⁢View all user reactions‌⁡‍⁡‌‌⁡‌⁠‍⁡⁠⁣⁤',
@@ -26,7 +25,7 @@ var _default = exports.default = {
   '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.reactions.count': '{count, plural, one {⁣⁢{count,number} total reaction؜‍⁡‌⁠⁠‌‌‌؜⁣⁤} other {⁣⁢{count,number} total reactions؜‍⁡‌⁠⁠‌‌‌؜⁣⁤}}',
   'reactions.dialog.right.navigate': '⁣⁢Right Navigate⁠؜؜⁠‌‌⁡‍‍⁠⁠⁣⁤',
   'reactions.dialog.viewall': '⁣⁢View all‌‌⁡⁠⁡‌؜⁣⁤',
   'reactions.dialog.viewall.tooltip': '⁣⁢View all user reactions⁡‌؜؜⁡⁡‌‍؜؜⁣⁤'

package/dist/cjs/i18n/es.js

@@ -17,7 +17,6 @@ var _default = exports.default = {
   'fabric.reactions.error.unexpected': 'Las reacciones no están disponibles temporalmente',
   'fabric.reactions.loading': 'Cargando...',
   'fabric.reactions.more.emojis': 'Más emojis',
-  'fabric.reactions.more.info': 'Más información',
   'fabric.reactions.other.reacted.users': '{count, plural, one {y 1 más} other {y {count} más}}',
   'fabric.reactions.reactwithemoji': 'Reaccionar con el emoticono {emoji}',
   'fabric.reactions.summary': 'Ver todas las reacciones de los usuarios',
@@ -26,7 +25,6 @@ var _default = exports.default = {
   '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 todo',
   'reactions.dialog.viewall.tooltip': 'Ver todas las reacciones de los usuarios'

package/dist/cjs/i18n/fi.js

@@ -17,7 +17,6 @@ var _default = exports.default = {
   'fabric.reactions.error.unexpected': 'Reaktiot ovat väliaikaisesti poissa käytöstä',
   'fabric.reactions.loading': 'Ladataan...',
   'fabric.reactions.more.emojis': 'Lisää emojeita',
-  'fabric.reactions.more.info': 'Lisätietoja',
   'fabric.reactions.other.reacted.users': '{count, plural, one {ja yksi muu} other {ja {count} muuta}}',
   'fabric.reactions.reactwithemoji': 'Reagoi emojilla {emoji}',
   'fabric.reactions.summary': 'Näytä kaikki käyttäjäreaktiot',
@@ -25,7 +24,6 @@ var _default = exports.default = {
   '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': 'Näytä kaikki',
   'reactions.dialog.viewall.tooltip': 'Näytä kaikki käyttäjäreaktiot'

package/dist/cjs/i18n/fr.js

@@ -17,7 +17,6 @@ var _default = exports.default = {
   'fabric.reactions.error.unexpected': 'Les réactions sont temporairement indisponibles',
   'fabric.reactions.loading': 'Chargement…',
   'fabric.reactions.more.emojis': "Plus d'émoticônes",
-  'fabric.reactions.more.info': "Plus d'infos",
   'fabric.reactions.other.reacted.users': '{count, plural, one {et 1 autre} other {et {count} autres}}',
   'fabric.reactions.reactwithemoji': "Réagir avec l'émoticône {emoji}",
   'fabric.reactions.summary': 'Afficher toutes les réactions des utilisateurs',
@@ -26,7 +25,6 @@ var _default = exports.default = {
   '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': 'Afficher tout',
   'reactions.dialog.viewall.tooltip': 'Afficher toutes les réactions des utilisateurs'

package/dist/cjs/i18n/hu.js

@@ -17,7 +17,6 @@ var _default = exports.default = {
   'fabric.reactions.error.unexpected': 'A reakciók átmenetileg nem érhetők el.',
   'fabric.reactions.loading': 'Betöltés...',
   'fabric.reactions.more.emojis': 'Még több emoji',
-  'fabric.reactions.more.info': 'További információ',
   'fabric.reactions.other.reacted.users': '{count, plural, one {és egy másik} other {és {count} másik}}',
   'fabric.reactions.reactwithemoji': 'Reagálás {emoji} emojival',
   'fabric.reactions.summary': 'Minden felhasználói reakció megtekintése',
@@ -26,7 +25,6 @@ var _default = exports.default = {
   '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': 'Összes megtekintése',
   'reactions.dialog.viewall.tooltip': 'Minden felhasználói reakció megtekintése'

package/dist/cjs/i18n/it.js

@@ -17,7 +17,6 @@ var _default = exports.default = {
   'fabric.reactions.error.unexpected': 'Le reazioni non sono temporaneamente disponibili',
   'fabric.reactions.loading': 'Caricamento in corso...',
   'fabric.reactions.more.emojis': 'Altre emoji',
-  'fabric.reactions.more.info': 'Altre informazioni',
   'fabric.reactions.other.reacted.users': '{count, plural, one {e un altro} other {e altri {count}}}',
   'fabric.reactions.reactwithemoji': "Reagisci con l'emoji {emoji}",
   'fabric.reactions.summary': 'Visualizza tutte le reazioni degli utenti',
@@ -26,7 +25,6 @@ var _default = exports.default = {
   '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': 'Visualizza tutto',
   'reactions.dialog.viewall.tooltip': 'Visualizza tutte le reazioni degli utenti'