@atlaskit/reactions 24.7.0 → 24.9.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/reactions
 
+## 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
+
+- [#111042](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111042)
+  [`6e5ef11d2a9e6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6e5ef11d2a9e6) -
+  [ux] Refactor Reactions Dialog to have sticky header and change dialog rendering condition for
+  ReactionSummaryView
+
 ## 24.7.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.7.0";
+var packageVersion = "24.9.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -17,6 +17,7 @@ var _Avatar = _interopRequireDefault(require("@atlaskit/avatar/Avatar"));
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _tabs = require("@atlaskit/tabs");
 var _primitives = require("@atlaskit/primitives");
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _i18n = require("../../shared/i18n");
 var _styles = require("./styles");
 /**
@@ -27,11 +28,29 @@ var _styles = require("./styles");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var userDescriptionStyle = (0, _primitives.xcss)({
-  marginLeft: 'space.200'
+  marginLeft: 'space.150'
 });
 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)({
+  alignItems: 'flex-end'
+});
+var emojiSpacingStlye = (0, _primitives.xcss)({
+  marginLeft: 'space.100'
+});
 var ReactionView = exports.ReactionView = function ReactionView(_ref) {
   var selectedEmojiId = _ref.selectedEmojiId,
     emojiProvider = _ref.emojiProvider,
@@ -39,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;
+      var provider, emoji, capitalizedName;
       return _regenerator.default.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -58,8 +77,12 @@ var ReactionView = exports.ReactionView = function ReactionView(_ref) {
             });
           case 5:
             emoji = _context.sent;
-            if (emoji !== null && emoji !== void 0 && emoji.shortName) {
-              setEmojiShortName(emoji.shortName);
+            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":
@@ -75,61 +98,63 @@ var ReactionView = exports.ReactionView = function ReactionView(_ref) {
       return a.displayName.localeCompare(b.displayName);
     })) || [];
   }, [reaction]);
-  var tabPanelAttributes = (0, _tabs.useTabPanel)();
-  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", (0, _extends2.default)({
-      css: _styles.reactionViewStyle
-    }, tabPanelAttributes), (0, _react2.jsx)(_primitives.Text, {
-      as: "p"
-    }, (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
-    })), 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)(_spinner.default, {
-      size: "large"
-    })) :
-    // 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)("ul", {
-      css: _styles.userListStyle
-    }, alphabeticalNames.map(function (user) {
-      var _user$profilePicture;
-      var profile = (_user$profilePicture = user.profilePicture) === null || _user$profilePicture === void 0 ? void 0 : _user$profilePicture.path;
-      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)("li", {
-          css: _styles.userStyle,
-          key: user.id
-        }, ProfileCardWrapper && user.accountId ? (0, _react2.jsx)(_primitives.Box, {
-          xcss: profileWrapperStyle
-        }, (0, _react2.jsx)(ProfileCardWrapper, {
-          userId: user.accountId,
-          isAnonymous: false,
-          canViewProfile: true,
-          position: "left-start"
-        }, (0, _react2.jsx)(_Avatar.default, {
-          size: "medium",
-          src: profile,
-          testId: "profile"
-        }))) : (0, _react2.jsx)(_Avatar.default, {
-          size: "medium",
-          src: profile,
-          testId: "profile"
-        }), (0, _react2.jsx)(_primitives.Flex, {
-          xcss: userDescriptionStyle
-        }, (0, _react2.jsx)("div", null, user.displayName)))
-      );
-    })))
-  );
+  return (0, _react2.jsx)(_tabs.TabPanel, null, (0, _react2.jsx)(_primitives.Flex, {
+    direction: "column",
+    xcss: reactionViewStyle
+  }, (0, _react2.jsx)(_primitives.Inline, {
+    xcss: headerStyle
+  }, (0, _react2.jsx)(_heading.default, {
+    size: "xsmall"
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.peopleWhoReactedSubheading, {
+    values: {
+      emojiShortName: emojiName
+    }
+  }))), (0, _react2.jsx)(_primitives.Box, {
+    as: "span",
+    xcss: emojiSpacingStlye
+  }, (0, _react2.jsx)(_element.ResourcedEmoji, {
+    emojiProvider: emojiProvider,
+    emojiId: {
+      id: selectedEmojiId,
+      shortName: ''
+    },
+    fitToHeight: 24
+  }))), alphabeticalNames.length === 0 ?
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  (0, _react2.jsx)(_primitives.Box, {
+    xcss: centerSpinnerStyle
+  }, (0, _react2.jsx)(_spinner.default, {
+    size: "large"
+  })) :
+  // 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)("ul", {
+    css: _styles.userListStyle
+  }, alphabeticalNames.map(function (user) {
+    var _user$profilePicture;
+    var profile = (_user$profilePicture = user.profilePicture) === null || _user$profilePicture === void 0 ? void 0 : _user$profilePicture.path;
+    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)("li", {
+        css: _styles.userStyle,
+        key: user.id
+      }, ProfileCardWrapper && user.accountId ? (0, _react2.jsx)(_primitives.Box, {
+        xcss: profileWrapperStyle
+      }, (0, _react2.jsx)(ProfileCardWrapper, {
+        userId: user.accountId,
+        isAnonymous: false,
+        canViewProfile: true,
+        position: "left-start"
+      }, (0, _react2.jsx)(_Avatar.default, {
+        size: "medium",
+        src: profile,
+        testId: "profile"
+      }))) : (0, _react2.jsx)(_Avatar.default, {
+        size: "medium",
+        src: profile,
+        testId: "profile"
+      }), (0, _react2.jsx)(_primitives.Flex, {
+        xcss: userDescriptionStyle
+      }, (0, _react2.jsx)("div", null, user.displayName)))
+    );
+  }))));
 };

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

@@ -6,22 +6,18 @@ 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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("react");
 var _reactIntlNext = require("react-intl-next");
 var _react2 = require("@emotion/react");
+var _tabs = _interopRequireDefault(require("@atlaskit/tabs"));
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _primitives = require("@atlaskit/primitives");
-var _new = _interopRequireWildcard(require("@atlaskit/button/new"));
-var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-var _chevronLeft = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-left"));
-var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-right"));
 var _constants = require("../../shared/constants");
 var _i18n = require("../../shared/i18n");
 var _ReactionsList = require("./ReactionsList");
+var _ReactionsDialogHeader = require("./ReactionsDialogHeader");
 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; }
@@ -32,12 +28,6 @@ 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%',
-  padding: 'space.300',
-  paddingBlockEnd: 'space.400'
-});
-
 /**
  * Test id for the Reactions modal dialog
  */
@@ -49,70 +39,22 @@ var getDimensions = function getDimensions(container) {
     scrollLeft: container === null || container === void 0 ? void 0 : container.scrollLeft
   };
 };
-var ReactionsDialogModalHeader = function ReactionsDialogModalHeader(_ref) {
-  var totalReactionsCount = _ref.totalReactionsCount,
-    handlePreviousPage = _ref.handlePreviousPage,
-    handleNextPage = _ref.handleNextPage,
-    currentPage = _ref.currentPage,
-    maxPages = _ref.maxPages;
-  var _useModal = (0, _modalDialog.useModal)(),
-    titleId = _useModal.titleId;
-  var intl = (0, _reactIntlNext.useIntl)();
-  var isSinglePage = maxPages === 1;
-  var isOnFirstPage = currentPage === 1;
-  var isOnLastPage = currentPage === maxPages;
-  return (0, _react2.jsx)(_primitives.Flex, {
-    direction: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    xcss: fullWidthStyle
-  }, (0, _react2.jsx)(_heading.default, {
-    size: "medium",
-    id: titleId
-  }, intl.formatMessage(_i18n.messages.reactionsCount, {
-    count: totalReactionsCount
-  })), !isSinglePage && (0, _react2.jsx)(_primitives.Flex, {
-    alignItems: "center",
-    gap: "space.100"
-  }, (0, _react2.jsx)(_tooltip.default, {
-    content: intl.formatMessage(_i18n.messages.leftNavigateLabel),
-    canAppear: function canAppear() {
-      return !isOnFirstPage;
-    }
-  }, function (tooltipProps) {
-    return (0, _react2.jsx)(_new.IconButton, (0, _extends2.default)({}, tooltipProps, {
-      isDisabled: isOnFirstPage,
-      onClick: handlePreviousPage,
-      icon: _chevronLeft.default,
-      label: intl.formatMessage(_i18n.messages.leftNavigateLabel)
-    }));
-  }), (0, _react2.jsx)(_tooltip.default, {
-    content: intl.formatMessage(_i18n.messages.rightNavigateLabel),
-    canAppear: function canAppear() {
-      return !isOnLastPage;
-    }
-  }, function (tooltipProps) {
-    return (0, _react2.jsx)(_new.IconButton, (0, _extends2.default)({}, tooltipProps, {
-      onClick: handleNextPage,
-      isDisabled: isOnLastPage,
-      icon: _chevronRight.default,
-      label: intl.formatMessage(_i18n.messages.rightNavigateLabel)
-    }));
-  })));
-};
-var ReactionsDialog = exports.ReactionsDialog = function ReactionsDialog(_ref2) {
+var footerStyle = (0, _primitives.xcss)({
+  borderTop: "2px solid ".concat("var(--ds-border, rgba(11, 18, 14, 0.14))")
+});
+var ReactionsDialog = exports.ReactionsDialog = function ReactionsDialog(_ref) {
   var _currentReactions$;
-  var _ref2$reactions = _ref2.reactions,
-    reactions = _ref2$reactions === void 0 ? [] : _ref2$reactions,
-    _ref2$handleCloseReac = _ref2.handleCloseReactionsDialog,
-    handleCloseReactionsDialog = _ref2$handleCloseReac === void 0 ? function () {} : _ref2$handleCloseReac,
-    emojiProvider = _ref2.emojiProvider,
-    selectedEmojiId = _ref2.selectedEmojiId,
-    _ref2$handleSelectRea = _ref2.handleSelectReaction,
-    handleSelectReaction = _ref2$handleSelectRea === void 0 ? function () {} : _ref2$handleSelectRea,
-    _ref2$handlePaginatio = _ref2.handlePaginationChange,
-    handlePaginationChange = _ref2$handlePaginatio === void 0 ? function () {} : _ref2$handlePaginatio,
-    ProfileCardWrapper = _ref2.ProfileCardWrapper;
+  var _ref$reactions = _ref.reactions,
+    reactions = _ref$reactions === void 0 ? [] : _ref$reactions,
+    _ref$handleCloseReact = _ref.handleCloseReactionsDialog,
+    handleCloseReactionsDialog = _ref$handleCloseReact === void 0 ? function () {} : _ref$handleCloseReact,
+    emojiProvider = _ref.emojiProvider,
+    selectedEmojiId = _ref.selectedEmojiId,
+    _ref$handleSelectReac = _ref.handleSelectReaction,
+    handleSelectReaction = _ref$handleSelectReac === void 0 ? function () {} : _ref$handleSelectReac,
+    _ref$handlePagination = _ref.handlePaginationChange,
+    handlePaginationChange = _ref$handlePagination === void 0 ? function () {} : _ref$handlePagination,
+    ProfileCardWrapper = _ref.ProfileCardWrapper;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     elementToScroll = _useState2[0],
@@ -121,6 +63,16 @@ var ReactionsDialog = exports.ReactionsDialog = function ReactionsDialog(_ref2)
     _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)();
@@ -130,38 +82,31 @@ var ReactionsDialog = exports.ReactionsDialog = function ReactionsDialog(_ref2)
       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 () {
@@ -233,6 +178,16 @@ var ReactionsDialog = exports.ReactionsDialog = function ReactionsDialog(_ref2)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  var selectedIndex = currentReactions.findIndex(function (reaction) {
+    return reaction.emojiId === selectedEmojiId;
+  });
+  var onTabChange = (0, _react.useCallback)(function (index) {
+    if (index === selectedIndex) {
+      return;
+    }
+    var emojiId = currentReactions[index].emojiId;
+    handleSelectReaction(emojiId);
+  }, [selectedIndex, currentReactions, handleSelectReaction]);
   return (0, _react2.jsx)(_modalDialog.default, {
     onClose: handleCloseReactionsDialog,
     height: 600,
@@ -240,23 +195,31 @@ var ReactionsDialog = exports.ReactionsDialog = function ReactionsDialog(_ref2)
     // eslint-disable-next-line jsx-a11y/no-autofocus
     ,
     autoFocus: false
-  }, (0, _react2.jsx)(ReactionsDialogModalHeader, {
+  }, (0, _react2.jsx)(_tabs.default, {
+    id: "reactions-dialog-tabs",
+    onChange: onTabChange,
+    selected: selectedIndex
+  }, (0, _react2.jsx)(_ReactionsDialogHeader.ReactionsDialogHeader, {
     totalReactionsCount: totalReactionsCount,
     maxPages: maxPages,
     handlePreviousPage: handlePreviousPage,
     handleNextPage: handleNextPage,
-    currentPage: currentPage
+    currentPage: currentPage,
+    emojiProvider: emojiProvider,
+    selectedEmojiId: selectedEmojiId,
+    currentReactions: currentReactions
   }), (0, _react2.jsx)(_modalDialog.ModalBody, null, (0, _react2.jsx)("div", {
     css: (0, _styles.containerStyle)(reactionsBorderWidth),
     ref: setRef
   }, (0, _react2.jsx)(_ReactionsList.ReactionsList, {
-    initialEmojiId: selectedEmojiId,
+    selectedEmojiId: selectedEmojiId,
     reactions: currentReactions,
     emojiProvider: emojiProvider,
-    onReactionChanged: handleSelectReaction,
     ProfileCardWrapper: ProfileCardWrapper
-  }))), (0, _react2.jsx)(_modalDialog.ModalFooter, null, (0, _react2.jsx)(_new.default, {
+  })))), (0, _react2.jsx)(_primitives.Box, {
+    xcss: footerStyle
+  }, (0, _react2.jsx)(_modalDialog.ModalFooter, null, (0, _react2.jsx)(_new.default, {
     appearance: "subtle",
     onClick: handleCloseReactionsDialog
-  }, intl.formatMessage(_i18n.messages.closeReactionsDialog))));
+  }, intl.formatMessage(_i18n.messages.closeReactionsDialog)))));
 };