@atlaskit/reactions 22.7.4 → 22.8.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/reactions
 
+## 22.8.0
+
+### Minor Changes
+
+- [`f67c5ff12702a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f67c5ff12702a) -
+  [ux] Added a new summary feature to reactions
+
+## 22.7.5
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 22.7.4
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -48,6 +48,9 @@
         {
             "path": "../../../design-system/popper/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../design-system/popup/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../design-system/primitives/afm-cc/tsconfig.json"
         },

package/afm-jira/tsconfig.json

@@ -0,0 +1,78 @@
+{
+  "extends": "../../../../tsconfig.entry-points.jira.json",
+  "compilerOptions": {
+    "declaration": true,
+    "target": "es5",
+    "outDir": "../../../../../tsDist/@atlaskit__reactions/app",
+    "composite": true,
+    "rootDir": "../"
+  },
+  "include": [
+    "../src/**/*.ts",
+    "../src/**/*.tsx"
+  ],
+  "exclude": [
+    "../src/**/__tests__/*",
+    "../src/**/*.test.*",
+    "../src/**/test.*"
+  ],
+  "references": [
+    {
+      "path": "../../../analytics/analytics-gas-types/afm-jira/tsconfig.json"
+    },
+    {
+      "path": "../../../analytics/analytics-namespaced-context/afm-jira/tsconfig.json"
+    },
+    {
+      "path": "../../../analytics/analytics-next/afm-jira/tsconfig.json"
+    },
+    {
+      "path": "../../../design-system/avatar/afm-jira/tsconfig.json"
+    },
+    {
+      "path": "../../../design-system/button/afm-jira/tsconfig.json"
+    },
+    {
+      "path": "../../emoji/afm-jira/tsconfig.json"
+    },
+    {
+      "path": "../../../design-system/icon/afm-jira/tsconfig.json"
+    },
+    {
+      "path": "../../../design-system/modal-dialog/afm-jira/tsconfig.json"
+    },
+    {
+      "path": "../../../design-system/motion/afm-jira/tsconfig.json"
+    },
+    {
+      "path": "../../../design-system/popper/afm-jira/tsconfig.json"
+    },
+    {
+      "path": "../../../design-system/popup/afm-jira/tsconfig.json"
+    },
+    {
+      "path": "../../../design-system/primitives/afm-jira/tsconfig.json"
+    },
+    {
+      "path": "../../../design-system/spinner/afm-jira/tsconfig.json"
+    },
+    {
+      "path": "../../../design-system/tabs/afm-jira/tsconfig.json"
+    },
+    {
+      "path": "../../../design-system/theme/afm-jira/tsconfig.json"
+    },
+    {
+      "path": "../../../design-system/tokens/afm-jira/tsconfig.json"
+    },
+    {
+      "path": "../../../design-system/tooltip/afm-jira/tsconfig.json"
+    },
+    {
+      "path": "../../../data/ufo-external/afm-jira/tsconfig.json"
+    },
+    {
+      "path": "../../util-service-support/afm-jira/tsconfig.json"
+    }
+  ]
+}

package/dist/cjs/MockReactionsClient.js

@@ -39,7 +39,7 @@ var getReactionKey = function getReactionKey(containerAri, ari) {
   return "".concat(containerAri, "|").concat(ari);
 };
 var defaultUsers = [getUser('oscar', 'Oscar Wallhult'), getUser('julien', 'Julien Michel Hoarau'), getUser('craig', 'Craig Petchell'), getUser('jerome', 'Jerome Touffe-Blin'), getUser('esoares', 'Eduardo Soares'), getUser('lpereira', 'Luiz Pereira'), getUser('pcurren', 'Paul Curren'), getUser('ttjandra', 'Tara Tjandra'), getUser('severington', 'Ste Everington'), getUser('sguillope', 'Sylvain Guillope'), getUser('alunnon', 'Alex Lunnon'), getUser('bsmith', 'Bob Smith'), getUser('jdoe', 'Jane Doe'), getUser('mhomes', 'Mary Homes'), getUser('ckent', 'Clark Kent')];
-var simpleMockData = exports.simpleMockData = (0, _defineProperty2.default)({}, getReactionKey(containerAri, ari), [getReactionSummary(':fire:', 1, true), getReactionSummary(':thumbsup:', 33, false), getReactionSummary(':astonished:', 99, false), getReactionSummary(':heart:', 44, false) // Widest character
+var simpleMockData = exports.simpleMockData = (0, _defineProperty2.default)({}, getReactionKey(containerAri, ari), [getReactionSummary(':fire:', 1, true), getReactionSummary(':astonished:', 99, false), getReactionSummary(':heart:', 44, false) // Widest character
 ]);
 var extendedMockData = (0, _defineProperty2.default)({}, getReactionKey(containerAri, ari), [getReactionSummary(':fire:', 1, true, true), getReactionSummary(':thumbsup:', 999, false, true), getReactionSummary(':astonished:', 9, false, true), getReactionSummary(':heart:', 99, false, true), getReactionSummary(':thinking:', 10, false, true), getReactionSummary(':clap:', 99, false, true), getReactionSummary(':thumbsdown:', 2, false, true), getReactionSummary(':bulb:', 16, false, true), getReactionSummary(':star:', 9999, false, true), getReactionSummary(':green_heart:', 9, false, true), getReactionSummary(':blue_heart:', 8392, false, true), getReactionSummary(':broken_heart:', 1, false, true), getReactionSummary(':grinning:', 10601, false, true), getReactionSummary(':slight_smile:', 99, false, true)]);
 

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 = "22.7.4";
+var packageVersion = "22.8.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/cjs/components/Reaction/Reaction.js

@@ -17,12 +17,12 @@ var _emoji = require("@atlaskit/emoji");
 var _primitives = require("@atlaskit/primitives");
 var _analytics = require("../../analytics");
 var _Counter = require("../Counter");
-var _FlashAnimation = require("../FlashAnimation");
 var _ReactionParticleEffect = require("../ReactionParticleEffect");
 var _ReactionTooltip = require("../ReactionTooltip");
 var _i18n = require("../../shared/i18n");
 var _utils = require("../../shared/utils");
 var _styles = require("./styles");
+var _ReactionButton = require("./ReactionButton");
 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 && Object.prototype.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; }
 /** @jsx jsx */
@@ -36,29 +36,6 @@ var RENDER_REACTION_TESTID = exports.RENDER_REACTION_TESTID = 'render_reaction_w
 var containerStyles = (0, _primitives.xcss)({
   position: 'relative'
 });
-var reactionStyles = (0, _primitives.xcss)({
-  display: 'flex',
-  flexDirection: 'row',
-  alignItems: 'flex-start',
-  minWidth: '36px',
-  height: '24px',
-  backgroundColor: 'color.background.neutral.subtle',
-  borderWidth: 'border.width',
-  borderStyle: 'solid',
-  borderColor: 'color.border',
-  borderRadius: 'border.radius.circle',
-  color: 'color.text.subtle',
-  marginBlockStart: 'space.050',
-  marginInlineEnd: 'space.050',
-  padding: 'space.0',
-  overflow: 'hidden',
-  ':hover': {
-    backgroundColor: 'color.background.neutral.subtle.hovered'
-  },
-  ':active': {
-    backgroundColor: 'color.background.neutral.subtle.pressed'
-  }
-});
 var reactedStyles = (0, _primitives.xcss)({
   backgroundColor: 'color.background.selected',
   borderColor: 'color.border.selected',
@@ -174,20 +151,20 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
     handleUserListClick: handleOpenReactionsDialog,
     allowUserDialog: allowUserDialog,
     isEnabled: isTooltipEnabled
-  }, (0, _react2.jsx)(_primitives.Pressable, {
-    xcss: [reactionStyles, reaction.reacted && reactedStyles],
-    "aria-label": intl.formatMessage(_i18n.messages.reactWithEmoji, {
+  }, (0, _react2.jsx)(_ReactionButton.ReactionButton, {
+    onClick: handleClick,
+    flash: flash,
+    additionalStyles: reaction.reacted ? [reactedStyles] : [],
+    ariaLabel: intl.formatMessage(_i18n.messages.reactWithEmoji, {
       emoji: emojiName
     }),
-    "data-emoji-id": reaction.emojiId,
-    testId: RENDER_REACTION_TESTID,
-    onClick: handleClick,
     onMouseEnter: handleMouseEnter,
     onFocus: handleFocused,
-    "data-emoji-button-id": reaction.emojiId
-  }, (0, _react2.jsx)(_FlashAnimation.FlashAnimation, {
-    flash: flash,
-    css: _styles.flashStyle
+    testId: RENDER_REACTION_TESTID,
+    dataAttributes: {
+      'data-emoji-id': reaction.emojiId,
+      'data-emoji-button-id': reaction.emojiId
+    }
   }, (0, _react2.jsx)("div", {
     css: [_styles.emojiStyle, reaction.count === 0 && _styles.emojiNoReactionStyle]
   }, (0, _react2.jsx)(_emoji.ResourcedEmoji, {
@@ -197,5 +174,5 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
   })), (0, _react2.jsx)(_Counter.Counter, {
     value: reaction.count,
     highlight: reaction.reacted
-  })))));
+  }))));
 };

package/dist/cjs/components/Reaction/ReactionButton.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReactionButton = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireDefault(require("react"));
+var _primitives = require("@atlaskit/primitives");
+var _react2 = require("@emotion/react");
+var _FlashAnimation = require("../FlashAnimation");
+var _styles = require("./styles");
+/** @jsx jsx */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var reactionStyles = (0, _primitives.xcss)({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'flex-start',
+  minWidth: '36px',
+  height: '24px',
+  backgroundColor: 'color.background.neutral.subtle',
+  borderWidth: 'border.width',
+  borderStyle: 'solid',
+  borderColor: 'color.border',
+  borderRadius: 'border.radius.circle',
+  color: 'color.text.subtle',
+  marginBlockStart: 'space.050',
+  marginInlineEnd: 'space.050',
+  padding: 'space.0',
+  overflow: 'hidden',
+  ':hover': {
+    backgroundColor: 'color.background.neutral.subtle.hovered'
+  },
+  ':active': {
+    backgroundColor: 'color.background.neutral.subtle.pressed'
+  }
+});
+var ReactionButton = exports.ReactionButton = function ReactionButton(_ref) {
+  var onClick = _ref.onClick,
+    _ref$flash = _ref.flash,
+    flash = _ref$flash === void 0 ? false : _ref$flash,
+    _ref$additionalStyles = _ref.additionalStyles,
+    additionalStyles = _ref$additionalStyles === void 0 ? [] : _ref$additionalStyles,
+    ariaLabel = _ref.ariaLabel,
+    onMouseEnter = _ref.onMouseEnter,
+    onFocus = _ref.onFocus,
+    children = _ref.children,
+    _ref$dataAttributes = _ref.dataAttributes,
+    dataAttributes = _ref$dataAttributes === void 0 ? {} : _ref$dataAttributes,
+    testId = _ref.testId;
+  return (0, _react2.jsx)(_primitives.Pressable, (0, _extends2.default)({
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onFocus: onFocus,
+    "aria-label": ariaLabel,
+    testId: testId,
+    xcss: [reactionStyles].concat((0, _toConsumableArray2.default)(additionalStyles))
+  }, dataAttributes), (0, _react2.jsx)(_FlashAnimation.FlashAnimation, {
+    flash: flash,
+    css: _styles.flashStyle
+  }, children));
+};

package/dist/cjs/components/Reaction/index.js

@@ -15,4 +15,11 @@ Object.defineProperty(exports, "Reaction", {
     return _Reaction.Reaction;
   }
 });
-var _Reaction = require("./Reaction");
+Object.defineProperty(exports, "ReactionButton", {
+  enumerable: true,
+  get: function get() {
+    return _ReactionButton.ReactionButton;
+  }
+});
+var _Reaction = require("./Reaction");
+var _ReactionButton = require("./ReactionButton");

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

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReactionSummaryButton = exports.RENDER_SUMMARY_EMOJI_TESTID = exports.RENDER_SUMMARY_BUTTON_TESTID = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _emoji = require("@atlaskit/emoji");
+var _primitives = require("@atlaskit/primitives");
+var _i18n = require("../../shared/i18n");
+var _Counter = require("../Counter");
+var _Reaction = require("../Reaction");
+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 && Object.prototype.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; }
+var emojiStyle = (0, _primitives.xcss)({
+  transformOrigin: 'center center 0',
+  lineHeight: '12px'
+});
+var buttonStyle = (0, _primitives.xcss)({
+  paddingTop: 'space.050',
+  paddingRight: 'space.050',
+  paddingBottom: 'space.050',
+  paddingLeft: 'space.100'
+});
+var containerStyle = (0, _primitives.xcss)({
+  position: 'relative'
+});
+/**
+ * Test id for summary reaction wrapper button
+ */
+var RENDER_SUMMARY_BUTTON_TESTID = exports.RENDER_SUMMARY_BUTTON_TESTID = 'reaction-summary-button';
+
+/**
+ * Test id for emojis displayed inside summary button. All emoji's in the summary button will have this test id
+ */
+var RENDER_SUMMARY_EMOJI_TESTID = exports.RENDER_SUMMARY_EMOJI_TESTID = 'summary-emoji-display';
+
+// forwardRef is used here so that the parent popup component can properly interact with the button
+var ReactionSummaryButton = exports.ReactionSummaryButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var emojiProvider = _ref.emojiProvider,
+    _ref$reactions = _ref.reactions,
+    reactions = _ref$reactions === void 0 ? [] : _ref$reactions,
+    _ref$emojisToShow = _ref.emojisToShow,
+    emojisToShow = _ref$emojisToShow === void 0 ? 3 : _ref$emojisToShow,
+    onClick = _ref.onClick;
+  var intl = (0, _reactIntlNext.useIntl)();
+
+  // Helper function to sort reactions by count and return top N
+  var getTopReactions = function getTopReactions(reactions, topN) {
+    return (0, _toConsumableArray2.default)(reactions).sort(function (a, b) {
+      return b.count - a.count;
+    }).slice(0, topN);
+  };
+  var totalReactionsCount = (0, _react.useMemo)(function () {
+    return reactions.reduce(function (accum, current) {
+      return accum += (current === null || current === void 0 ? void 0 : current.count) || 0;
+    }, 0);
+  }, [reactions]);
+  var topReactions = (0, _react.useMemo)(function () {
+    return getTopReactions(reactions, emojisToShow);
+  }, [emojisToShow, reactions]);
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: containerStyle,
+    ref: ref
+  }, /*#__PURE__*/_react.default.createElement(_Reaction.ReactionButton, {
+    onClick: onClick,
+    testId: RENDER_SUMMARY_BUTTON_TESTID,
+    ariaLabel: intl.formatMessage(_i18n.messages.summary)
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+    space: "space.050",
+    xcss: buttonStyle
+  }, topReactions.map(function (reaction) {
+    return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+      xcss: emojiStyle,
+      testId: RENDER_SUMMARY_EMOJI_TESTID
+    }, /*#__PURE__*/_react.default.createElement(_emoji.ResourcedEmoji, {
+      key: reaction.emojiId,
+      emojiProvider: emojiProvider,
+      emojiId: {
+        id: reaction.emojiId,
+        shortName: ''
+      },
+      fitToHeight: 16
+    }));
+  })), /*#__PURE__*/_react.default.createElement(_Counter.Counter, {
+    value: totalReactionsCount
+  })));
+});

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

@@ -0,0 +1,85 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReactionSummaryView = exports.RENDER_SUMMARY_VIEW_POPUP_TESTID = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _popup = _interopRequireDefault(require("@atlaskit/popup"));
+var _primitives = require("@atlaskit/primitives");
+var _react = _interopRequireWildcard(require("react"));
+var _Reaction = require("../Reaction");
+var _ReactionSummaryButton = require("./ReactionSummaryButton");
+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 && Object.prototype.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; }
+var summaryPopupStyles = (0, _primitives.xcss)({
+  padding: 'space.100',
+  maxWidth: '400px'
+});
+
+/**
+ * Test id for the Reactions summary view popup
+ */
+var RENDER_SUMMARY_VIEW_POPUP_TESTID = exports.RENDER_SUMMARY_VIEW_POPUP_TESTID = 'render-summary-view-popup';
+var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummaryView(_ref) {
+  var emojiProvider = _ref.emojiProvider,
+    _ref$reactions = _ref.reactions,
+    reactions = _ref$reactions === void 0 ? [] : _ref$reactions,
+    _ref$flash = _ref.flash,
+    flash = _ref$flash === void 0 ? {} : _ref$flash,
+    _ref$particleEffectBy = _ref.particleEffectByEmoji,
+    particleEffectByEmoji = _ref$particleEffectBy === void 0 ? {} : _ref$particleEffectBy,
+    handleOpenReactionsDialog = _ref.handleOpenReactionsDialog,
+    allowUserDialog = _ref.allowUserDialog,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'auto-start' : _ref$placement,
+    onReactionClick = _ref.onReactionClick,
+    onReactionFocused = _ref.onReactionFocused,
+    onReactionMouseEnter = _ref.onReactionMouseEnter;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isSummaryPopupOpen = _useState2[0],
+    setSummaryPopupOpen = _useState2[1];
+  var handlePopupClose = (0, _react.useCallback)(function () {
+    return setSummaryPopupOpen(false);
+  }, []);
+  var handleSummaryClick = (0, _react.useCallback)(function () {
+    return setSummaryPopupOpen(true);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_popup.default, {
+    placement: placement,
+    content: function content() {
+      return /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+        xcss: summaryPopupStyles,
+        testId: RENDER_SUMMARY_VIEW_POPUP_TESTID,
+        space: "space.025",
+        shouldWrap: true
+      }, reactions.map(function (reaction) {
+        return /*#__PURE__*/_react.default.createElement(_Reaction.Reaction, {
+          key: reaction.emojiId,
+          reaction: reaction,
+          emojiProvider: emojiProvider,
+          onClick: onReactionClick,
+          onFocused: onReactionFocused,
+          onMouseEnter: onReactionMouseEnter,
+          flash: flash[reaction.emojiId],
+          handleUserListClick: handleOpenReactionsDialog,
+          allowUserDialog: allowUserDialog,
+          showParticleEffect: particleEffectByEmoji[reaction.emojiId]
+        });
+      }));
+    },
+    isOpen: isSummaryPopupOpen,
+    onClose: handlePopupClose,
+    trigger: function trigger(triggerProps) {
+      return /*#__PURE__*/_react.default.createElement(_ReactionSummaryButton.ReactionSummaryButton, (0, _extends2.default)({}, triggerProps, {
+        emojiProvider: emojiProvider,
+        reactions: reactions,
+        onClick: handleSummaryClick
+      }));
+    }
+  });
+};

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ReactionSummaryView", {
+  enumerable: true,
+  get: function get() {
+    return _ReactionSummaryView.ReactionSummaryView;
+  }
+});
+var _ReactionSummaryView = require("./ReactionSummaryView");

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

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Reactions = exports.RENDER_VIEWALL_REACTED_USERS_DIALOG = exports.RENDER_REACTIONS_TESTID = void 0;
+exports.Reactions = exports.RENDER_VIEWALL_REACTED_USERS_DIALOG = exports.RENDER_REACTIONS_TESTID = exports.RENDER_REACTIONS_SUMMARY_TESTID = void 0;
 exports.getTooltip = getTooltip;
 exports.ufoExperiences = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -25,6 +25,7 @@ var _Reaction = require("../Reaction");
 var _ReactionDialog = require("../ReactionDialog");
 var _ReactionPicker = require("../ReactionPicker");
 var _styles = require("./styles");
+var _ReactionSummary = require("../ReactionSummary/");
 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 && Object.prototype.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; }
 /** @jsx jsx */
@@ -57,6 +58,11 @@ var RENDER_REACTIONS_TESTID = exports.RENDER_REACTIONS_TESTID = 'render-reaction
  * Test id for the view all reacted user to trigger the dialog
  */
 var RENDER_VIEWALL_REACTED_USERS_DIALOG = exports.RENDER_VIEWALL_REACTED_USERS_DIALOG = 'viewall-reacted-users-dialog';
+
+/**
+ * Test id for summary view of reactions
+ */
+var RENDER_REACTIONS_SUMMARY_TESTID = exports.RENDER_REACTIONS_SUMMARY_TESTID = 'reaction-summary-view';
 /**
  * Get content of the tooltip
  */
@@ -108,7 +114,11 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     _ref$emojiPickerSize = _ref.emojiPickerSize,
     emojiPickerSize = _ref$emojiPickerSize === void 0 ? 'medium' : _ref$emojiPickerSize,
     _ref$miniMode = _ref.miniMode,
-    miniMode = _ref$miniMode === void 0 ? false : _ref$miniMode;
+    miniMode = _ref$miniMode === void 0 ? false : _ref$miniMode,
+    _ref$summaryViewEnabl = _ref.summaryViewEnabled,
+    summaryViewEnabled = _ref$summaryViewEnabl === void 0 ? false : _ref$summaryViewEnabl,
+    _ref$summaryViewThres = _ref.summaryViewThreshold,
+    summaryViewThreshold = _ref$summaryViewThres === void 0 ? 3 : _ref$summaryViewThres;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -261,12 +271,25 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     });
     return reactions.concat(items);
   }, [quickReactionEmojis, reactions]);
+  var shouldShowSummaryView = summaryViewEnabled && memorizedReactions.length >= summaryViewThreshold && memorizedReactions.length > 0;
   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", {
       css: _styles.wrapperStyle,
       "data-testid": RENDER_REACTIONS_TESTID
-    }, memorizedReactions.map(function (reaction) {
+    }, shouldShowSummaryView ? (0, _react2.jsx)("div", {
+      "data-testid": RENDER_REACTIONS_SUMMARY_TESTID
+    }, (0, _react2.jsx)(_ReactionSummary.ReactionSummaryView, {
+      reactions: memorizedReactions,
+      emojiProvider: emojiProvider,
+      flash: flash,
+      particleEffectByEmoji: particleEffectByEmoji,
+      handleOpenReactionsDialog: handleOpenReactionsDialog,
+      allowUserDialog: allowUserDialog,
+      onReactionClick: onReactionClick,
+      onReactionFocused: handleReactionFocused,
+      onReactionMouseEnter: handleReactionMouseEnter
+    })) : memorizedReactions.map(function (reaction) {
       return (0, _react2.jsx)(_Reaction.Reaction, {
         key: reaction.emojiId,
         reaction: reaction,

package/dist/cjs/components/UfoErrorBoundary/UfoErrorBoundary.js

@@ -33,6 +33,7 @@ var UfoErrorBoundary = exports.UfoErrorBoundary = /*#__PURE__*/function (_React$
         _step;
       try {
         for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var _errorInfo$componentS;
           var exp = _step.value;
           exp.failure({
             metadata: {
@@ -41,7 +42,7 @@ var UfoErrorBoundary = exports.UfoErrorBoundary = /*#__PURE__*/function (_React$
               error: {
                 name: error.name,
                 message: error.message,
-                infoStack: errorInfo.componentStack
+                infoStack: (_errorInfo$componentS = errorInfo.componentStack) !== null && _errorInfo$componentS !== void 0 ? _errorInfo$componentS : undefined
               }
             }
           });

package/dist/cjs/shared/i18n.js

@@ -31,6 +31,11 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'React with {emoji} emoji',
     description: 'Aria label on reaction button'
   },
+  summary: {
+    id: 'fabric.reactions.summary',
+    defaultMessage: 'View all user reactions',
+    description: 'Aria label on summary reaction button. Clicking this button shows who reacted in a popup'
+  },
   unexpectedError: {
     id: 'fabric.reactions.error.unexpected',
     defaultMessage: 'Reactions are temporarily unavailable',

package/dist/es2019/MockReactionsClient.js

@@ -24,7 +24,7 @@ const getReactionKey = (containerAri, ari) => {
 };
 const defaultUsers = [getUser('oscar', 'Oscar Wallhult'), getUser('julien', 'Julien Michel Hoarau'), getUser('craig', 'Craig Petchell'), getUser('jerome', 'Jerome Touffe-Blin'), getUser('esoares', 'Eduardo Soares'), getUser('lpereira', 'Luiz Pereira'), getUser('pcurren', 'Paul Curren'), getUser('ttjandra', 'Tara Tjandra'), getUser('severington', 'Ste Everington'), getUser('sguillope', 'Sylvain Guillope'), getUser('alunnon', 'Alex Lunnon'), getUser('bsmith', 'Bob Smith'), getUser('jdoe', 'Jane Doe'), getUser('mhomes', 'Mary Homes'), getUser('ckent', 'Clark Kent')];
 export const simpleMockData = {
-  [getReactionKey(containerAri, ari)]: [getReactionSummary(':fire:', 1, true), getReactionSummary(':thumbsup:', 33, false), getReactionSummary(':astonished:', 99, false), getReactionSummary(':heart:', 44, false) // Widest character
+  [getReactionKey(containerAri, ari)]: [getReactionSummary(':fire:', 1, true), getReactionSummary(':astonished:', 99, false), getReactionSummary(':heart:', 44, false) // Widest character
   ]
 };
 const extendedMockData = {

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 = "22.7.4";
+const packageVersion = "22.8.0";
 /**
  * TODO: move to utility package?
  * A random sampling function