@atlaskit/reactions 24.7.0 → 24.8.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/reactions
 
+## 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.8.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,20 @@ 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'
+});
+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,
@@ -43,7 +53,7 @@ var ReactionView = exports.ReactionView = function ReactionView(_ref) {
     setEmojiShortName = _useState2[1];
   (0, _react.useEffect)(function () {
     (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-      var provider, emoji;
+      var provider, emoji, shortNameWithoutColons;
       return _regenerator.default.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -59,7 +69,8 @@ var ReactionView = exports.ReactionView = function ReactionView(_ref) {
           case 5:
             emoji = _context.sent;
             if (emoji !== null && emoji !== void 0 && emoji.shortName) {
-              setEmojiShortName(emoji.shortName);
+              shortNameWithoutColons = emoji.shortName.replace(/:/g, '');
+              setEmojiShortName(shortNameWithoutColons);
             }
           case 7:
           case "end":
@@ -75,61 +86,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: emojiShortName
+    }
+  }))), (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)("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)))
+    );
+  }))));
 };

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

@@ -8,20 +8,17 @@ Object.defineProperty(exports, "__esModule", {
 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 +29,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 +40,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],
@@ -233,6 +176,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, analyticsEvent) {
+    if (index === selectedIndex) {
+      return;
+    }
+    var emojiId = currentReactions[index].emojiId;
+    handleSelectReaction(emojiId, analyticsEvent);
+  }, [selectedIndex, currentReactions, handleSelectReaction]);
   return (0, _react2.jsx)(_modalDialog.default, {
     onClose: handleCloseReactionsDialog,
     height: 600,
@@ -240,23 +193,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)))));
 };

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

@@ -0,0 +1,205 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReactionsDialogHeader = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _reactIntlNext = require("react-intl-next");
+var _react = require("@emotion/react");
+var _tokens = require("@atlaskit/tokens");
+var _tabs = require("@atlaskit/tabs");
+var _primitives = require("@atlaskit/primitives");
+var _new = require("@atlaskit/button/new");
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _modalDialog = require("@atlaskit/modal-dialog");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _chevronLeft = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-left"));
+var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-right"));
+var _element = require("@atlaskit/emoji/element");
+var _i18n = require("../../shared/i18n");
+var _Counter = require("../Counter");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var REACTIONS_CONTAINER_WIDTH = 56;
+var REACTION_CONTAINER_HEIGHT = 40;
+var containerEdgeAngle = {
+  rightEdge: 270,
+  leftEdge: 90
+};
+var fadedCss = function fadedCss(edge, theme) {
+  return (0, _react.css)({
+    content: '""',
+    position: 'absolute',
+    left: '0px',
+    top: '0px',
+    width: "".concat(REACTIONS_CONTAINER_WIDTH, "px"),
+    height: "".concat(REACTION_CONTAINER_HEIGHT, "px"),
+    zIndex: 0,
+    background:
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    theme === 'dark' ? "linear-gradient(".concat(containerEdgeAngle[edge], "deg, rgba(34, 39, 43, 0.95) 40.23%, rgba(34, 39, 43, 0.55) 58.33%, rgba(34, 39, 43, 0) 77.49%)") : "linear-gradient(".concat(containerEdgeAngle[edge], "deg, rgba(255, 255, 255, 0.95) 40.23%, rgba(255, 255, 255, 0.55) 58.33%, rgba(255, 255, 255, 0) 77.49%)")
+  });
+};
+var customTabListStyles = (0, _react.css)({
+  overflow: 'auto',
+  display: 'flex',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  'div[role=tablist]': {
+    flexGrow: 1,
+    // paddingInline exists to maintain styling prior to @atlaskit/tabs update that removed baked in horizontal padding
+    paddingInline: "var(--ds-space-100, 8px)"
+  }
+});
+var customTabWrapper = function customTabWrapper(theme) {
+  return (0, _react.css)({
+    flexShrink: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    textAlign: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: "".concat(REACTIONS_CONTAINER_WIDTH, "px"),
+    boxSizing: 'border-box',
+    position: 'relative',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '> div': {
+      minWidth: "".concat(REACTIONS_CONTAINER_WIDTH, "px"),
+      minHeight: "".concat(REACTION_CONTAINER_HEIGHT, "px"),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+      padding: '0px !important',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '& > span': {
+      minHeight: '16px',
+      minWidth: '16px'
+    },
+    // 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)
+  });
+};
+var firstElement = (0, _react.css)({
+  paddingLeft: "var(--ds-space-200, 16px)"
+});
+var fullWidthStyle = (0, _primitives.xcss)({
+  width: '100%',
+  padding: 'space.300',
+  paddingBlockEnd: 'space.400'
+});
+var emojiStyles = (0, _primitives.xcss)({
+  transformOrigin: 'center center 0',
+  paddingInlineStart: 'space.100',
+  paddingBlock: 'space.050',
+  paddingInlineEnd: 'space.050'
+});
+var counterStyle = (0, _primitives.xcss)({
+  marginTop: 'space.025'
+});
+var ReactionsTabs = function ReactionsTabs(_ref) {
+  var currentReactions = _ref.currentReactions,
+    emojiProvider = _ref.emojiProvider,
+    selectedEmojiId = _ref.selectedEmojiId;
+  var _useThemeObserver = (0, _tokens.useThemeObserver)(),
+    colorMode = _useThemeObserver.colorMode;
+  return (0, _react.jsx)("div", {
+    css: customTabListStyles,
+    id: "reactions-dialog-tabs-list"
+  }, (0, _react.jsx)(_tabs.TabList, null, currentReactions.map(function (reaction, index) {
+    var emojiId = {
+      id: reaction.emojiId,
+      shortName: ''
+    };
+    return (0, _react.jsx)("div", {
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      css: [customTabWrapper(colorMode), index === 0 ? firstElement : []]
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: "reaction-elements",
+      key: reaction.emojiId,
+      "data-testid": emojiId === null || emojiId === void 0 ? void 0 : emojiId.id
+    }, (0, _react.jsx)(_tabs.Tab, null, (0, _react.jsx)(_primitives.Flex, {
+      justifyContent: "center",
+      alignItems: "center",
+      direction: "row"
+    }, (0, _react.jsx)(_primitives.Box, {
+      xcss: emojiStyles
+    }, (0, _react.jsx)(_element.ResourcedEmoji, {
+      emojiProvider: emojiProvider,
+      emojiId: emojiId,
+      fitToHeight: 16,
+      showTooltip: true
+    })), (0, _react.jsx)(_primitives.Box, {
+      xcss: counterStyle
+    }, (0, _react.jsx)(_Counter.Counter, {
+      value: reaction.count
+    })))));
+  })));
+};
+var ReactionsDialogHeader = exports.ReactionsDialogHeader = function ReactionsDialogHeader(_ref2) {
+  var totalReactionsCount = _ref2.totalReactionsCount,
+    handlePreviousPage = _ref2.handlePreviousPage,
+    handleNextPage = _ref2.handleNextPage,
+    currentPage = _ref2.currentPage,
+    maxPages = _ref2.maxPages,
+    currentReactions = _ref2.currentReactions,
+    emojiProvider = _ref2.emojiProvider,
+    selectedEmojiId = _ref2.selectedEmojiId;
+  var _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, _react.jsx)(_primitives.Stack, null, (0, _react.jsx)(_primitives.Flex, {
+    direction: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    xcss: fullWidthStyle
+  }, (0, _react.jsx)(_heading.default, {
+    size: "medium",
+    id: titleId
+  }, intl.formatMessage(_i18n.messages.reactionsCount, {
+    count: totalReactionsCount
+  })), !isSinglePage && (0, _react.jsx)(_primitives.Flex, {
+    alignItems: "center",
+    gap: "space.100"
+  }, (0, _react.jsx)(_tooltip.default, {
+    content: intl.formatMessage(_i18n.messages.leftNavigateLabel),
+    canAppear: function canAppear() {
+      return !isOnFirstPage;
+    }
+  }, function (tooltipProps) {
+    return (0, _react.jsx)(_new.IconButton, (0, _extends2.default)({}, tooltipProps, {
+      isDisabled: isOnFirstPage,
+      onClick: handlePreviousPage,
+      icon: _chevronLeft.default,
+      label: intl.formatMessage(_i18n.messages.leftNavigateLabel)
+    }));
+  }), (0, _react.jsx)(_tooltip.default, {
+    content: intl.formatMessage(_i18n.messages.rightNavigateLabel),
+    canAppear: function canAppear() {
+      return !isOnLastPage;
+    }
+  }, function (tooltipProps) {
+    return (0, _react.jsx)(_new.IconButton, (0, _extends2.default)({}, tooltipProps, {
+      onClick: handleNextPage,
+      isDisabled: isOnLastPage,
+      icon: _chevronRight.default,
+      label: intl.formatMessage(_i18n.messages.rightNavigateLabel)
+    }));
+  }))), (0, _react.jsx)(ReactionsTabs, {
+    currentReactions: currentReactions,
+    emojiProvider: emojiProvider,
+    selectedEmojiId: selectedEmojiId
+  }));
+};