@atlaskit/reactions 24.0.1 → 24.1.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/reactions
 
+## 24.1.0
+
+### Minor Changes
+
+- [#106745](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/106745)
+  [`d3fc0dc988c34`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d3fc0dc988c34) -
+  [ux] UI updates to improve spacing and text appearance. Business logic updates on when to render
+  dialog entrypoint
+
 ## 24.0.1
 
 ### 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 = "24.0.1";
+var packageVersion = "24.1.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -7,12 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ReactionsDialog = exports.RENDER_MODAL_TESTID = void 0;
 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 _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");
@@ -29,7 +32,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 fullWidthStyle = (0, _primitives.xcss)({
-  width: '100%'
+  width: '100%',
+  padding: 'space.300',
+  paddingBlockEnd: 'space.400'
 });
 
 /**
@@ -43,18 +48,69 @@ var getDimensions = function getDimensions(container) {
     scrollLeft: container === null || container === void 0 ? void 0 : container.scrollLeft
   };
 };
-var ReactionsDialog = exports.ReactionsDialog = function ReactionsDialog(_ref) {
+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 _currentReactions$;
-  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;
+  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;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     elementToScroll = _useState2[0],
@@ -179,27 +235,16 @@ var ReactionsDialog = exports.ReactionsDialog = function ReactionsDialog(_ref) {
     onClose: handleCloseReactionsDialog,
     height: 600,
     testId: RENDER_MODAL_TESTID
-  }, (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", {
+    // eslint-disable-next-line jsx-a11y/no-autofocus
+    ,
+    autoFocus: false
+  }, (0, _react2.jsx)(ReactionsDialogModalHeader, {
+    totalReactionsCount: totalReactionsCount,
+    maxPages: maxPages,
+    handlePreviousPage: handlePreviousPage,
+    handleNextPage: handleNextPage,
+    currentPage: currentPage
+  }), (0, _react2.jsx)(_modalDialog.ModalBody, null, (0, _react2.jsx)("div", {
     css: (0, _styles.containerStyle)(reactionsBorderWidth),
     ref: setRef
   }, (0, _react2.jsx)(_ReactionsList.ReactionsList, {
@@ -208,8 +253,7 @@ var ReactionsDialog = exports.ReactionsDialog = function ReactionsDialog(_ref) {
     emojiProvider: emojiProvider,
     onReactionChanged: handleSelectReaction
   }))), (0, _react2.jsx)(_modalDialog.ModalFooter, null, (0, _react2.jsx)(_new.default, {
-    appearance: "primary",
-    onClick: handleCloseReactionsDialog,
-    autoFocus: true
+    appearance: "subtle",
+    onClick: handleCloseReactionsDialog
   }, intl.formatMessage(_i18n.messages.closeReactionsDialog))));
 };

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

@@ -110,7 +110,6 @@ var reactionViewStyle = exports.reactionViewStyle = (0, _react.css)({
   p: {
     margin: 0,
     color: "".concat("var(--ds-text, ".concat(_colors.N800, ")")),
-    textTransform: 'capitalize',
     font: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
     fontWeight: "var(--ds-font-weight-semibold, 600)",
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography

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

@@ -293,6 +293,11 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     return reactions.concat(items);
   }, [quickReactionEmojis, reactions, hideDefaultReactions]);
   var shouldShowSummaryView = summaryViewEnabled && memorizedReactions.length >= summaryViewThreshold && reactions.length > 0;
+
+  // criteria to show Reactions Dialog
+  var hasEmojiWithFivePlusReactions = reactions.some(function (reaction) {
+    return reaction.count >= 5;
+  });
   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", {
@@ -345,7 +350,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       showOpaqueBackground: showOpaqueBackground,
       showAddReactionText: showAddReactionText,
       subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
-    }), allowUserDialog && reactions.length > 0 && (0, _react2.jsx)(_tooltip.default, {
+    }), allowUserDialog && hasEmojiWithFivePlusReactions && (0, _react2.jsx)(_tooltip.default, {
       content: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.seeWhoReactedTooltip),
       hideTooltipOnClick: true
     }, (0, _react2.jsx)(_standardButton.default

package/dist/cjs/shared/i18n.js

@@ -53,7 +53,7 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
   },
   reactionsCount: {
     id: 'reactions.dialog.reactions.count',
-    defaultMessage: "{count, plural,\n        one {# reaction}\n        other {# reactions}\n      }",
+    defaultMessage: "{count, plural,\n        one {# total reaction}\n        other {# total reactions}\n      }",
     description: 'The count of Reactions displayed in Reactions Dialog'
   },
   leftNavigateLabel: {

package/dist/es2019/analytics/index.js

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

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

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -8,7 +9,9 @@ import { useIntl } from 'react-intl-next';
 import { jsx } from '@emotion/react';
 import { Flex, xcss } from '@atlaskit/primitives';
 import Button, { IconButton } from '@atlaskit/button/new';
-import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
+import Heading from '@atlaskit/heading';
+import Modal, { ModalBody, ModalFooter, useModal } from '@atlaskit/modal-dialog';
+import Tooltip from '@atlaskit/tooltip';
 import ChevronLeftIcon from '@atlaskit/icon/utility/chevron-left';
 import ChevronRightIcon from '@atlaskit/icon/utility/chevron-right';
 import { NUMBER_OF_REACTIONS_TO_DISPLAY } from '../../shared/constants';
@@ -16,7 +19,9 @@ import { messages } from '../../shared/i18n';
 import { ReactionsList } from './ReactionsList';
 import { containerStyle } from './styles';
 const fullWidthStyle = xcss({
-  width: '100%'
+  width: '100%',
+  padding: 'space.300',
+  paddingBlockEnd: 'space.400'
 });
 
 /**
@@ -30,6 +35,51 @@ const getDimensions = container => {
     scrollLeft: container === null || container === void 0 ? void 0 : container.scrollLeft
   };
 };
+const ReactionsDialogModalHeader = ({
+  totalReactionsCount,
+  handlePreviousPage,
+  handleNextPage,
+  currentPage,
+  maxPages
+}) => {
+  const {
+    titleId
+  } = useModal();
+  const intl = useIntl();
+  const isSinglePage = maxPages === 1;
+  const isOnFirstPage = currentPage === 1;
+  const isOnLastPage = currentPage === maxPages;
+  return jsx(Flex, {
+    direction: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    xcss: fullWidthStyle
+  }, jsx(Heading, {
+    size: "medium",
+    id: titleId
+  }, intl.formatMessage(messages.reactionsCount, {
+    count: totalReactionsCount
+  })), !isSinglePage && jsx(Flex, {
+    alignItems: "center",
+    gap: "space.100"
+  }, jsx(Tooltip, {
+    content: intl.formatMessage(messages.leftNavigateLabel),
+    canAppear: () => !isOnFirstPage
+  }, tooltipProps => jsx(IconButton, _extends({}, tooltipProps, {
+    isDisabled: isOnFirstPage,
+    onClick: handlePreviousPage,
+    icon: ChevronLeftIcon,
+    label: intl.formatMessage(messages.leftNavigateLabel)
+  }))), jsx(Tooltip, {
+    content: intl.formatMessage(messages.rightNavigateLabel),
+    canAppear: () => !isOnLastPage
+  }, tooltipProps => jsx(IconButton, _extends({}, tooltipProps, {
+    onClick: handleNextPage,
+    isDisabled: isOnLastPage,
+    icon: ChevronRightIcon,
+    label: intl.formatMessage(messages.rightNavigateLabel)
+  })))));
+};
 export const ReactionsDialog = ({
   reactions = [],
   handleCloseReactionsDialog = () => {},
@@ -149,27 +199,16 @@ export const ReactionsDialog = ({
     onClose: handleCloseReactionsDialog,
     height: 600,
     testId: RENDER_MODAL_TESTID
-  }, jsx(ModalHeader, null, jsx(Flex, {
-    direction: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    xcss: fullWidthStyle
-  }, jsx("div", null, jsx(ModalTitle, null, intl.formatMessage(messages.reactionsCount, {
-    count: totalReactionsCount
-  }))), jsx(Flex, {
-    alignItems: "center",
-    gap: "space.100"
-  }, jsx(IconButton, {
-    isDisabled: currentPage === 1,
-    onClick: handlePreviousPage,
-    icon: ChevronLeftIcon,
-    label: intl.formatMessage(messages.leftNavigateLabel)
-  }), jsx(IconButton, {
-    onClick: handleNextPage,
-    isDisabled: currentPage === maxPages,
-    icon: ChevronRightIcon,
-    label: intl.formatMessage(messages.rightNavigateLabel)
-  })))), jsx(ModalBody, null, jsx("div", {
+    // eslint-disable-next-line jsx-a11y/no-autofocus
+    ,
+    autoFocus: false
+  }, jsx(ReactionsDialogModalHeader, {
+    totalReactionsCount: totalReactionsCount,
+    maxPages: maxPages,
+    handlePreviousPage: handlePreviousPage,
+    handleNextPage: handleNextPage,
+    currentPage: currentPage
+  }), jsx(ModalBody, null, jsx("div", {
     css: containerStyle(reactionsBorderWidth),
     ref: setRef
   }, jsx(ReactionsList, {
@@ -178,8 +217,7 @@ export const ReactionsDialog = ({
     emojiProvider: emojiProvider,
     onReactionChanged: handleSelectReaction
   }))), jsx(ModalFooter, null, jsx(Button, {
-    appearance: "primary",
-    onClick: handleCloseReactionsDialog,
-    autoFocus: true
+    appearance: "subtle",
+    onClick: handleCloseReactionsDialog
   }, intl.formatMessage(messages.closeReactionsDialog))));
 };

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

@@ -97,7 +97,6 @@ export const reactionViewStyle = css({
   p: {
     margin: 0,
     color: `${`var(--ds-text, ${N800})`}`,
-    textTransform: 'capitalize',
     font: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
     fontWeight: "var(--ds-font-weight-semibold, 600)",
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography

package/dist/es2019/components/Reactions/Reactions.js

@@ -258,6 +258,9 @@ export const Reactions = /*#__PURE__*/React.memo(({
     return reactions.concat(items);
   }, [quickReactionEmojis, reactions, hideDefaultReactions]);
   const shouldShowSummaryView = summaryViewEnabled && memorizedReactions.length >= summaryViewThreshold && reactions.length > 0;
+
+  // criteria to show Reactions Dialog
+  const hasEmojiWithFivePlusReactions = reactions.some(reaction => reaction.count >= 5);
   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
     jsx("div", {
@@ -308,7 +311,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
       showOpaqueBackground: showOpaqueBackground,
       showAddReactionText: showAddReactionText,
       subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
-    }), allowUserDialog && reactions.length > 0 && jsx(Tooltip, {
+    }), allowUserDialog && hasEmojiWithFivePlusReactions && jsx(Tooltip, {
       content: jsx(FormattedMessage, messages.seeWhoReactedTooltip),
       hideTooltipOnClick: true
     }, jsx(Button

package/dist/es2019/shared/i18n.js

@@ -48,8 +48,8 @@ export const messages = defineMessages({
   reactionsCount: {
     id: 'reactions.dialog.reactions.count',
     defaultMessage: `{count, plural,
-        one {# reaction}
-        other {# reactions}
+        one {# total reaction}
+        other {# total reactions}
       }`,
     description: 'The count of Reactions displayed in Reactions Dialog'
   },

package/dist/esm/analytics/index.js

@@ -4,7 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 var packageName = "@atlaskit/reactions";
-var packageVersion = "24.0.1";
+var packageVersion = "24.1.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -1,4 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -9,7 +10,9 @@ import { useIntl } from 'react-intl-next';
 import { jsx } from '@emotion/react';
 import { Flex, xcss } from '@atlaskit/primitives';
 import Button, { IconButton } from '@atlaskit/button/new';
-import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
+import Heading from '@atlaskit/heading';
+import Modal, { ModalBody, ModalFooter, useModal } from '@atlaskit/modal-dialog';
+import Tooltip from '@atlaskit/tooltip';
 import ChevronLeftIcon from '@atlaskit/icon/utility/chevron-left';
 import ChevronRightIcon from '@atlaskit/icon/utility/chevron-right';
 import { NUMBER_OF_REACTIONS_TO_DISPLAY } from '../../shared/constants';
@@ -17,7 +20,9 @@ import { messages } from '../../shared/i18n';
 import { ReactionsList } from './ReactionsList';
 import { containerStyle } from './styles';
 var fullWidthStyle = xcss({
-  width: '100%'
+  width: '100%',
+  padding: 'space.300',
+  paddingBlockEnd: 'space.400'
 });
 
 /**
@@ -31,18 +36,69 @@ var getDimensions = function getDimensions(container) {
     scrollLeft: container === null || container === void 0 ? void 0 : container.scrollLeft
   };
 };
-export var ReactionsDialog = function ReactionsDialog(_ref) {
+var ReactionsDialogModalHeader = function ReactionsDialogModalHeader(_ref) {
+  var totalReactionsCount = _ref.totalReactionsCount,
+    handlePreviousPage = _ref.handlePreviousPage,
+    handleNextPage = _ref.handleNextPage,
+    currentPage = _ref.currentPage,
+    maxPages = _ref.maxPages;
+  var _useModal = useModal(),
+    titleId = _useModal.titleId;
+  var intl = useIntl();
+  var isSinglePage = maxPages === 1;
+  var isOnFirstPage = currentPage === 1;
+  var isOnLastPage = currentPage === maxPages;
+  return jsx(Flex, {
+    direction: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    xcss: fullWidthStyle
+  }, jsx(Heading, {
+    size: "medium",
+    id: titleId
+  }, intl.formatMessage(messages.reactionsCount, {
+    count: totalReactionsCount
+  })), !isSinglePage && jsx(Flex, {
+    alignItems: "center",
+    gap: "space.100"
+  }, jsx(Tooltip, {
+    content: intl.formatMessage(messages.leftNavigateLabel),
+    canAppear: function canAppear() {
+      return !isOnFirstPage;
+    }
+  }, function (tooltipProps) {
+    return jsx(IconButton, _extends({}, tooltipProps, {
+      isDisabled: isOnFirstPage,
+      onClick: handlePreviousPage,
+      icon: ChevronLeftIcon,
+      label: intl.formatMessage(messages.leftNavigateLabel)
+    }));
+  }), jsx(Tooltip, {
+    content: intl.formatMessage(messages.rightNavigateLabel),
+    canAppear: function canAppear() {
+      return !isOnLastPage;
+    }
+  }, function (tooltipProps) {
+    return jsx(IconButton, _extends({}, tooltipProps, {
+      onClick: handleNextPage,
+      isDisabled: isOnLastPage,
+      icon: ChevronRightIcon,
+      label: intl.formatMessage(messages.rightNavigateLabel)
+    }));
+  })));
+};
+export var ReactionsDialog = function ReactionsDialog(_ref2) {
   var _currentReactions$;
-  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;
+  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;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     elementToScroll = _useState2[0],
@@ -167,27 +223,16 @@ export var ReactionsDialog = function ReactionsDialog(_ref) {
     onClose: handleCloseReactionsDialog,
     height: 600,
     testId: RENDER_MODAL_TESTID
-  }, jsx(ModalHeader, null, jsx(Flex, {
-    direction: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    xcss: fullWidthStyle
-  }, jsx("div", null, jsx(ModalTitle, null, intl.formatMessage(messages.reactionsCount, {
-    count: totalReactionsCount
-  }))), jsx(Flex, {
-    alignItems: "center",
-    gap: "space.100"
-  }, jsx(IconButton, {
-    isDisabled: currentPage === 1,
-    onClick: handlePreviousPage,
-    icon: ChevronLeftIcon,
-    label: intl.formatMessage(messages.leftNavigateLabel)
-  }), jsx(IconButton, {
-    onClick: handleNextPage,
-    isDisabled: currentPage === maxPages,
-    icon: ChevronRightIcon,
-    label: intl.formatMessage(messages.rightNavigateLabel)
-  })))), jsx(ModalBody, null, jsx("div", {
+    // eslint-disable-next-line jsx-a11y/no-autofocus
+    ,
+    autoFocus: false
+  }, jsx(ReactionsDialogModalHeader, {
+    totalReactionsCount: totalReactionsCount,
+    maxPages: maxPages,
+    handlePreviousPage: handlePreviousPage,
+    handleNextPage: handleNextPage,
+    currentPage: currentPage
+  }), jsx(ModalBody, null, jsx("div", {
     css: containerStyle(reactionsBorderWidth),
     ref: setRef
   }, jsx(ReactionsList, {
@@ -196,8 +241,7 @@ export var ReactionsDialog = function ReactionsDialog(_ref) {
     emojiProvider: emojiProvider,
     onReactionChanged: handleSelectReaction
   }))), jsx(ModalFooter, null, jsx(Button, {
-    appearance: "primary",
-    onClick: handleCloseReactionsDialog,
-    autoFocus: true
+    appearance: "subtle",
+    onClick: handleCloseReactionsDialog
   }, intl.formatMessage(messages.closeReactionsDialog))));
 };

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

@@ -103,7 +103,6 @@ export var reactionViewStyle = css({
   p: {
     margin: 0,
     color: "".concat("var(--ds-text, ".concat(N800, ")")),
-    textTransform: 'capitalize',
     font: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
     fontWeight: "var(--ds-font-weight-semibold, 600)",
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography

package/dist/esm/components/Reactions/Reactions.js

@@ -280,6 +280,11 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     return reactions.concat(items);
   }, [quickReactionEmojis, reactions, hideDefaultReactions]);
   var shouldShowSummaryView = summaryViewEnabled && memorizedReactions.length >= summaryViewThreshold && reactions.length > 0;
+
+  // criteria to show Reactions Dialog
+  var hasEmojiWithFivePlusReactions = reactions.some(function (reaction) {
+    return reaction.count >= 5;
+  });
   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
     jsx("div", {
@@ -332,7 +337,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       showOpaqueBackground: showOpaqueBackground,
       showAddReactionText: showAddReactionText,
       subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
-    }), allowUserDialog && reactions.length > 0 && jsx(Tooltip, {
+    }), allowUserDialog && hasEmojiWithFivePlusReactions && jsx(Tooltip, {
       content: jsx(FormattedMessage, messages.seeWhoReactedTooltip),
       hideTooltipOnClick: true
     }, jsx(Button

package/dist/esm/shared/i18n.js

@@ -47,7 +47,7 @@ export var messages = defineMessages({
   },
   reactionsCount: {
     id: 'reactions.dialog.reactions.count',
-    defaultMessage: "{count, plural,\n        one {# reaction}\n        other {# reactions}\n      }",
+    defaultMessage: "{count, plural,\n        one {# total reaction}\n        other {# total reactions}\n      }",
     description: 'The count of Reactions displayed in Reactions Dialog'
   },
   leftNavigateLabel: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "24.0.1",
+	"version": "24.1.0",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"