@atlaskit/reactions 27.0.0 → 27.1.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/reactions
 
+## 27.1.0
+
+### Minor Changes
+
+- [#123407](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/123407)
+  [`efdf36c53ac41`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/efdf36c53ac41) -
+  [ux] Updates Reactions API to include a allowSelectFromSummaryView prop which controls if we add
+  an emoji pickerto the summary view. Also creates a new emoji picker component to use in this view.
+
 ## 27.0.0
 
 ### Major 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 = "27.0.0";
+var packageVersion = "27.1.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -27,6 +27,9 @@ var buttonStyle = (0, _primitives.xcss)({
   paddingBottom: 'space.050',
   paddingLeft: 'space.100'
 });
+var compactButtonStyle = (0, _primitives.xcss)({
+  height: '22px'
+});
 var opaqueBackgroundStyles = (0, _primitives.xcss)({
   backgroundColor: 'elevation.surface',
   ':hover': {
@@ -63,7 +66,9 @@ var ReactionSummaryButton = exports.ReactionSummaryButton = /*#__PURE__*/(0, _re
     _ref$showOpaqueBackgr = _ref.showOpaqueBackground,
     showOpaqueBackground = _ref$showOpaqueBackgr === void 0 ? false : _ref$showOpaqueBackgr,
     _ref$subtleReactionsS = _ref.subtleReactionsSummaryAndPicker,
-    subtleReactionsSummaryAndPicker = _ref$subtleReactionsS === void 0 ? false : _ref$subtleReactionsS;
+    subtleReactionsSummaryAndPicker = _ref$subtleReactionsS === void 0 ? false : _ref$subtleReactionsS,
+    _ref$useCompactStyles = _ref.useCompactStyles,
+    useCompactStyles = _ref$useCompactStyles === void 0 ? false : _ref$useCompactStyles;
   var intl = (0, _reactIntlNext.useIntl)();
 
   // Helper function to sort reactions by count and return top N
@@ -82,14 +87,17 @@ var ReactionSummaryButton = exports.ReactionSummaryButton = /*#__PURE__*/(0, _re
   }, [emojisToShow, reactions]);
   var buttonStyles = showOpaqueBackground ? [opaqueBackgroundStyles] : [];
   var subtleSummaryStyles = subtleReactionsSummaryAndPicker ? [hideBorderStyle] : [];
-  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+  var compactButtonStyles = useCompactStyles ? [compactButtonStyle] : [];
+  return /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
     xcss: containerStyle,
-    ref: ref
+    ref: ref,
+    alignItems: "center",
+    justifyContent: "center"
   }, /*#__PURE__*/_react.default.createElement(_Reaction.ReactionButton, {
     onClick: onClick,
     testId: RENDER_SUMMARY_BUTTON_TESTID,
     ariaLabel: intl.formatMessage(_i18n.messages.summary),
-    additionalStyles: [].concat(buttonStyles, subtleSummaryStyles)
+    additionalStyles: [].concat(buttonStyles, subtleSummaryStyles, compactButtonStyles)
   }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
     space: "space.050",
     xcss: buttonStyle

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

@@ -12,6 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 var _primitives = require("@atlaskit/primitives");
 var _Reaction = require("../Reaction");
+var _ReactionSummaryViewEmojiPicker = require("./ReactionSummaryViewEmojiPicker");
 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 && {}.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; }
@@ -45,7 +46,14 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
     allowUserDialog = _ref.allowUserDialog,
     handleOpenReactionsDialog = _ref.handleOpenReactionsDialog,
     _ref$isViewOnly = _ref.isViewOnly,
-    isViewOnly = _ref$isViewOnly === void 0 ? false : _ref$isViewOnly;
+    isViewOnly = _ref$isViewOnly === void 0 ? false : _ref$isViewOnly,
+    allowSelectFromSummaryView = _ref.allowSelectFromSummaryView,
+    disabled = _ref.disabled,
+    emojiPickerSize = _ref.emojiPickerSize,
+    onSelection = _ref.onSelection,
+    tooltipContent = _ref.tooltipContent,
+    reactionPickerTriggerIcon = _ref.reactionPickerTriggerIcon,
+    onOpen = _ref.onOpen;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isSummaryPopupOpen = _useState2[0],
@@ -79,6 +87,14 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
           handleOpenReactionsDialog: handleOpenReactionsDialog,
           isViewOnly: isViewOnly
         });
+      }), allowSelectFromSummaryView && /*#__PURE__*/_react.default.createElement(_ReactionSummaryViewEmojiPicker.ReactionSummaryViewEmojiPicker, {
+        emojiProvider: emojiProvider,
+        disabled: disabled,
+        onSelection: onSelection,
+        emojiPickerSize: emojiPickerSize,
+        tooltipContent: tooltipContent,
+        reactionPickerTriggerIcon: reactionPickerTriggerIcon,
+        onOpen: onOpen
       }));
     },
     isOpen: isSummaryPopupOpen,
@@ -89,7 +105,8 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
         reactions: reactions,
         onClick: handleSummaryClick,
         showOpaqueBackground: showOpaqueBackground,
-        subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
+        subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
+        useCompactStyles: allowSelectFromSummaryView
       }));
     }
   });

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

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReactionSummaryViewEmojiPicker = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _picker = require("@atlaskit/emoji/picker");
+var _popup = _interopRequireDefault(require("@atlaskit/popup"));
+var _ufo = require("../../ufo");
+var _Trigger = require("../Trigger");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+;
+var ReactionSummaryViewEmojiPicker = exports.ReactionSummaryViewEmojiPicker = function ReactionSummaryViewEmojiPicker(_ref) {
+  var emojiProvider = _ref.emojiProvider,
+    onSelection = _ref.onSelection,
+    emojiPickerSize = _ref.emojiPickerSize,
+    disabled = _ref.disabled,
+    reactionPickerTriggerIcon = _ref.reactionPickerTriggerIcon,
+    tooltipContent = _ref.tooltipContent,
+    onOpen = _ref.onOpen;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var handleClick = function handleClick() {
+    // ufo start reactions picker open experience
+    _ufo.PickerRender.start();
+    setIsOpen(function (prevIsOpen) {
+      return !prevIsOpen;
+    });
+    onOpen && onOpen();
+
+    // ufo reactions picker opened success
+    _ufo.PickerRender.success();
+  };
+
+  /**
+  * Event callback when the picker is closed
+  * @param _id Optional id if an emoji button was selected or undefined if was clicked outside the picker
+  */
+  var close = (0, _react.useCallback)(function (_id) {
+    setIsOpen(false);
+    // ufo abort reaction experience
+    _ufo.PickerRender.abort({
+      metadata: {
+        emojiId: _id,
+        source: 'ReactionPicker',
+        reason: 'close dialog'
+      }
+    });
+  }, [setIsOpen]);
+
+  /**
+  * Event callback when an emoji icon is selected
+  * @param item selected item
+  */
+  var onEmojiSelected = (0, _react.useCallback)(function (item) {
+    // no emoji was selected
+    if (!item.id) {
+      return;
+    }
+    onSelection(item.id, 'emojiPicker');
+    close(item.id);
+  }, [onSelection, close]);
+  return (0, _react2.jsx)(_popup.default, {
+    testId: "reaction-summary-view-emoji-picker",
+    isOpen: isOpen,
+    placement: "right",
+    onClose: function onClose() {
+      return close();
+    },
+    content: function content() {
+      return (0, _react2.jsx)(_picker.EmojiPicker, {
+        emojiProvider: emojiProvider,
+        onSelection: onEmojiSelected,
+        size: emojiPickerSize
+      });
+    },
+    trigger: function trigger(triggerProps) {
+      return (0, _react2.jsx)(_Trigger.Trigger, (0, _extends2.default)({}, triggerProps, {
+        disabled: disabled,
+        reactionPickerTriggerIcon: reactionPickerTriggerIcon,
+        tooltipContent: tooltipContent,
+        showAddReactionText: false,
+        subtleReactionsSummaryAndPicker: true,
+        onClick: handleClick
+      }));
+    }
+  });
+};

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

@@ -98,7 +98,6 @@ function getTooltip(status, errorMessage, tooltipContent) {
     case _types.ReactionStatus.ready:
       return !!tooltipContent ? tooltipContent : (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.addReaction);
   }
-  ;
 }
 
 /**
@@ -162,7 +161,9 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     noRelativeContainer = _ref$noRelativeContai === void 0 ? false : _ref$noRelativeContai,
     showSubtleDefaultReactions = _ref.showSubtleDefaultReactions,
     reactionPickerTriggerToolipContent = _ref.reactionPickerTriggerToolipContent,
-    reactionPickerTriggerIcon = _ref.reactionPickerTriggerIcon;
+    reactionPickerTriggerIcon = _ref.reactionPickerTriggerIcon,
+    _ref$allowSelectFromS = _ref.allowSelectFromSummaryView,
+    allowSelectFromSummaryView = _ref$allowSelectFromS === void 0 ? false : _ref$allowSelectFromS;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -323,6 +324,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     emojiProvider: emojiProvider,
     flash: flash,
     particleEffectByEmoji: particleEffectByEmoji,
+    onSelection: handleOnSelection,
     onReactionClick: onReactionClick,
     onReactionFocused: handleReactionFocused,
     onReactionMouseEnter: handleReactionMouseEnter,
@@ -335,7 +337,13 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       });
     },
     allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions,
-    isViewOnly: isViewOnly
+    isViewOnly: isViewOnly,
+    allowSelectFromSummaryView: allowSelectFromSummaryView,
+    disabled: status !== _types.ReactionStatus.ready,
+    reactionPickerTriggerIcon: reactionPickerTriggerIcon,
+    tooltipContent: getTooltip(status, errorMessage, reactionPickerTriggerToolipContent),
+    emojiPickerSize: emojiPickerSize,
+    onOpen: handlePickerOpen
   })) : memorizedReactions.map(function (reaction) {
     return (0, _react2.jsx)(_Reaction.Reaction, {
       key: reaction.emojiId,
@@ -352,7 +360,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       isViewOnly: isViewOnly,
       showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
     });
-  })), !isViewOnly && (0, _react2.jsx)(_ReactionPicker.ReactionPicker
+  })), isViewOnly || allowSelectFromSummaryView ? null : (0, _react2.jsx)(_ReactionPicker.ReactionPicker
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   , {
     css: _styles.reactionPickerStyle,

package/dist/cjs/i18n/cs.js

@@ -24,7 +24,6 @@ var _default = exports.default = {
   'reactions.dialog.close': 'Zavřít',
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Navigace doleva',
-  'reactions.dialog.people-who-reacted.subheader': 'Lidé, kteří reagovali smajlíkem {emojiShortName}',
   'reactions.dialog.reactions.count': '{count, plural, one {{count,number} reakce celkem} few {{count,number} reakce celkem} many {{count,number} reakce celkem} other {{count,number} reakcí celkem}}',
   'reactions.dialog.right.navigate': 'Navigace doprava',
   'reactions.dialog.viewall': 'Zobrazit vše',

package/dist/cjs/i18n/da.js

@@ -24,7 +24,6 @@ var _default = exports.default = {
   'reactions.dialog.close': 'Luk',
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Navigation til venstre',
-  'reactions.dialog.people-who-reacted.subheader': 'Personer der reagerede med {emojiShortName}',
   'reactions.dialog.reactions.count': '{count, plural, one {{count,number} reaktion i alt} other {{count,number} reaktioner i alt}}',
   'reactions.dialog.right.navigate': 'Navigation til højre',
   'reactions.dialog.viewall': 'Vis alle',

package/dist/cjs/i18n/de.js

@@ -23,7 +23,6 @@ var _default = exports.default = {
   'reaction-picker-trigger.add.reaction.message': 'Eine Reaktion hinzufügen',
   'reactions.dialog.close': 'Schließen',
   'reactions.dialog.left.navigate': 'Nach links navigieren',
-  'reactions.dialog.people-who-reacted.subheader': 'Personen, die mit {emojiShortName} reagiert haben',
   'reactions.dialog.reactions.count': '{count, plural, one {{count,number} Reaktion insgesamt} other {{count,number} Reaktionen insgesamt}}',
   'reactions.dialog.right.navigate': 'Nach rechts navigieren',
   'reactions.dialog.viewall': 'Alle anzeigen',

package/dist/cjs/i18n/en.js

@@ -24,7 +24,6 @@ var _default = exports.default = {
   'reactions.dialog.close': 'Close',
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Left Navigate',
-  'reactions.dialog.people-who-reacted.subheader': 'People who reacted with {emojiShortName}',
   'reactions.dialog.reactions.count': '{count, plural, one {# total reaction} other {# total reactions} }',
   'reactions.dialog.right.navigate': 'Right Navigate',
   'reactions.dialog.viewall': 'View all',

package/dist/cjs/i18n/en_GB.js

@@ -24,7 +24,6 @@ var _default = exports.default = {
   'reactions.dialog.close': 'Close',
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Left Navigate',
-  'reactions.dialog.people-who-reacted.subheader': 'People who reacted with {emojiShortName}',
   'reactions.dialog.reactions.count': '{count, plural, one {# total reaction} other {# total reactions} }',
   'reactions.dialog.right.navigate': 'Right Navigate',
   'reactions.dialog.viewall': 'View all',

package/dist/cjs/i18n/en_ZZ.js

@@ -24,7 +24,6 @@ var _default = exports.default = {
   'reactions.dialog.close': '⁣⁢Close‍⁡‌؜‍⁡‌‌⁣⁤',
   'reactions.dialog.emoji.name': '⁣⁢{emojiName}⁡‌‌‍؜⁠⁡‍⁡؜⁠‌‌‍‍⁡⁣⁤',
   'reactions.dialog.left.navigate': '⁣⁢Left Navigate؜‍‌؜⁠؜⁡‍⁠⁠⁡⁣⁤',
-  'reactions.dialog.people-who-reacted.subheader': '⁣⁢People who reacted with {emojiShortName}⁠⁡‍‌‌‌‍‌‍⁣⁤',
   'reactions.dialog.reactions.count': '{count, plural, one {⁣⁢{count,number} total reaction؜‍⁡‌⁠⁠‌‌‌؜⁣⁤} other {⁣⁢{count,number} total reactions؜‍⁡‌⁠⁠‌‌‌؜⁣⁤}}',
   'reactions.dialog.right.navigate': '⁣⁢Right Navigate⁠؜؜⁠‌‌⁡‍‍⁠⁠⁣⁤',
   'reactions.dialog.viewall': '⁣⁢View all‌‌⁡⁠⁡‌؜⁣⁤',

package/dist/cjs/i18n/es.js

@@ -24,7 +24,6 @@ var _default = exports.default = {
   'reactions.dialog.close': 'Cerrar',
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Desplazarse hacia la izquierda',
-  'reactions.dialog.people-who-reacted.subheader': 'Personas que han reaccionado con {emojiShortName}',
   'reactions.dialog.reactions.count': '{count, plural, one {{count,number} reacción total} other {{count,number} reacciones totales}}',
   'reactions.dialog.right.navigate': 'Desplazarse hacia la derecha',
   'reactions.dialog.viewall': 'Ver todo',

package/dist/cjs/i18n/fi.js

@@ -23,7 +23,6 @@ var _default = exports.default = {
   'reaction-picker-trigger.add.reaction.message': 'Lisää reaktio',
   'reactions.dialog.close': 'Sulje',
   'reactions.dialog.left.navigate': 'Navigointi vasemmalle',
-  'reactions.dialog.people-who-reacted.subheader': 'Henkilöt, jotka reagoivat emojilla {emojiShortName}',
   'reactions.dialog.reactions.count': '{count, plural, one {Yhteensä {count,number} reaktio} other {Yhteensä {count,number} reaktiota}}',
   'reactions.dialog.right.navigate': 'Navigointi oikealle',
   'reactions.dialog.viewall': 'Näytä kaikki',

package/dist/cjs/i18n/fr.js

@@ -24,7 +24,6 @@ var _default = exports.default = {
   'reactions.dialog.close': 'Fermer',
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Naviguer vers la gauche',
-  'reactions.dialog.people-who-reacted.subheader': 'Personnes qui ont réagi par {emojiShortName}',
   'reactions.dialog.reactions.count': '{count, plural, one {{count,number} réaction au total} other {{count,number} réactions au total}}',
   'reactions.dialog.right.navigate': 'Naviguer vers la droite',
   'reactions.dialog.viewall': 'Afficher tout',

package/dist/cjs/i18n/hu.js

@@ -24,7 +24,6 @@ var _default = exports.default = {
   'reactions.dialog.close': 'Bezárás',
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Balra navigálás',
-  'reactions.dialog.people-who-reacted.subheader': 'A következővel reagáló felhasználók: {emojiShortName}',
   'reactions.dialog.reactions.count': '{count, plural, one {{count,number} reakció összesen} other {{count,number} reakció összesen}}',
   'reactions.dialog.right.navigate': 'Jobbra navigálás',
   'reactions.dialog.viewall': 'Összes megtekintése',

package/dist/cjs/i18n/it.js

@@ -24,7 +24,6 @@ var _default = exports.default = {
   'reactions.dialog.close': 'Chiudi',
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Navigazione a sinistra',
-  'reactions.dialog.people-who-reacted.subheader': 'Persone che hanno reagito con {emojiShortName}',
   'reactions.dialog.reactions.count': '{count, plural, one {{count,number} reazione in totale} other {{count,number} reazioni in totale}}',
   'reactions.dialog.right.navigate': 'Navigazione a destra',
   'reactions.dialog.viewall': 'Visualizza tutto',

package/dist/cjs/i18n/ja.js

@@ -24,7 +24,6 @@ var _default = exports.default = {
   'reactions.dialog.close': '閉じる',
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': '左に移動',
-  'reactions.dialog.people-who-reacted.subheader': '{emojiShortName} でリアクションしたユーザー',
   'reactions.dialog.reactions.count': '{count, plural, other {合計 {count,number} 件のリアクション}}',
   'reactions.dialog.right.navigate': '右に移動',
   'reactions.dialog.viewall': 'すべて表示',

package/dist/cjs/i18n/ko.js

@@ -23,8 +23,7 @@ var _default = exports.default = {
   'reaction-picker-trigger.add.reaction.message': '반응 추가',
   'reactions.dialog.close': '닫기',
   'reactions.dialog.left.navigate': '왼쪽 탐색',
-  'reactions.dialog.people-who-reacted.subheader': '{emojiShortName} 이모지로 반응한 사용자',
-  'reactions.dialog.reactions.count': '{count, plural, other {반응 총 {count,number}개}}',
+  'reactions.dialog.reactions.count': '{count, plural, other {총 {count,number}개 반응}}',
   'reactions.dialog.right.navigate': '오른쪽 탐색',
   'reactions.dialog.viewall': '모두 보기',
   'reactions.dialog.viewall.tooltip': '사용자 반응 모두 보기'

package/dist/cjs/i18n/nb.js

@@ -23,7 +23,6 @@ var _default = exports.default = {
   'reaction-picker-trigger.add.reaction.message': 'Legg til en reaksjon',
   'reactions.dialog.close': 'Lukk',
   'reactions.dialog.left.navigate': 'Naviger til venstre',
-  'reactions.dialog.people-who-reacted.subheader': 'Personer som reagerte med {emojiShortName}',
   'reactions.dialog.reactions.count': '{count, plural, one {{count,number} reaksjon totalt} other {{count,number} reaksjoner totalt}}',
   'reactions.dialog.right.navigate': 'Naviger til høyre',
   'reactions.dialog.viewall': 'Vis alle',

package/dist/cjs/i18n/nl.js

@@ -24,7 +24,6 @@ var _default = exports.default = {
   'reactions.dialog.close': 'Sluiten',
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Navigeer naar links',
-  'reactions.dialog.people-who-reacted.subheader': 'Mensen die {emojiShortName} hebben gereageerd',
   'reactions.dialog.reactions.count': '{count, plural, one {{count,number} totale reactie} other {{count,number} totale reacties}}',
   'reactions.dialog.right.navigate': 'Navigeer naar rechts',
   'reactions.dialog.viewall': 'Alles bekijken',

package/dist/cjs/i18n/pl.js

@@ -24,7 +24,6 @@ var _default = exports.default = {
   'reactions.dialog.close': 'Zamknij',
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Przejdź w lewo',
-  'reactions.dialog.people-who-reacted.subheader': 'Osoby, które zareagowały, przesyłając emoji {emojiShortName}',
   'reactions.dialog.reactions.count': '{count, plural, one {Łącznie {count,number} reakcja} few {Łącznie {count,number} reakcje} many {Łącznie {count,number} reakcji} other {Łącznie {count,number} reakcji}}',
   'reactions.dialog.right.navigate': 'Przejdź w prawo',
   'reactions.dialog.viewall': 'Wyświetl wszystkich',

package/dist/cjs/i18n/pt_BR.js

@@ -24,7 +24,6 @@ var _default = exports.default = {
   'reactions.dialog.close': 'Fechar',
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Navegar para a esquerda',
-  'reactions.dialog.people-who-reacted.subheader': 'Pessoas que reagiram com {emojiShortName}',
   'reactions.dialog.reactions.count': '{count, plural, one {{count,number} reação total} other {{count,number} reações totais}}',
   'reactions.dialog.right.navigate': 'Navegar para a direita',
   'reactions.dialog.viewall': 'Ver tudo',

package/dist/cjs/i18n/ru.js

@@ -23,7 +23,6 @@ var _default = exports.default = {
   'reaction-picker-trigger.add.reaction.message': 'Добавьте реакцию',
   'reactions.dialog.close': 'Закрыть',
   'reactions.dialog.left.navigate': 'Навигация влево',
-  'reactions.dialog.people-who-reacted.subheader': 'Люди, которые оставили реакцию {emojiShortName}',
   'reactions.dialog.reactions.count': '{count, plural, one {Всего реакций: {count,number}} few {Всего реакций: {count,number}} many {Всего реакций: {count,number}} other {Всего реакций: {count,number}}}',
   'reactions.dialog.right.navigate': 'Навигация вправо',
   'reactions.dialog.viewall': 'Просмотреть все',

package/dist/cjs/i18n/sv.js

@@ -24,7 +24,6 @@ var _default = exports.default = {
   'reactions.dialog.close': 'Stäng',
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Vänster navigering',
-  'reactions.dialog.people-who-reacted.subheader': 'Personer som reagerade med {emojiShortName}',
   'reactions.dialog.reactions.count': '{count, plural, one {{count,number} reaktion} other {{count,number} reaktioner}}',
   'reactions.dialog.right.navigate': 'Höger navigering',
   'reactions.dialog.viewall': 'Visa alla',

package/dist/cjs/i18n/th.js

@@ -24,7 +24,6 @@ var _default = exports.default = {
   'reactions.dialog.close': 'ปิด',
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'นำทางไปทางซ้าย',
-  'reactions.dialog.people-who-reacted.subheader': 'ผู้ที่แสดงปฏิกิริยาด้วยเอโมจิ {emojiShortName}',
   'reactions.dialog.reactions.count': '{count, plural, other {การโต้ตอบทั้งหมด {count,number} ครั้ง}}',
   'reactions.dialog.right.navigate': 'นำทางไปทางขวา',
   'reactions.dialog.viewall': 'ดูทั้งหมด',

package/dist/cjs/i18n/tr.js

@@ -24,7 +24,6 @@ var _default = exports.default = {
   'reactions.dialog.close': 'Kapat',
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Sol Gezinme',
-  'reactions.dialog.people-who-reacted.subheader': '{emojiShortName} ile tepki veren kişiler',
   'reactions.dialog.reactions.count': '{count, plural, one {Toplam {count,number} tepki} other {Toplam {count,number} tepki}}',
   'reactions.dialog.right.navigate': 'Sağ Gezinme',
   'reactions.dialog.viewall': 'Tümünü göster',

package/dist/cjs/i18n/uk.js

@@ -24,8 +24,7 @@ var _default = exports.default = {
   'reactions.dialog.close': 'Закрити',
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Перейти вліво',
-  'reactions.dialog.people-who-reacted.subheader': 'Люди, що додали реакцію {emojiShortName}',
-  'reactions.dialog.reactions.count': '{count, plural, one {Усього {count,number} реакція} few {Усього {count,number} реакції} many {Усього {count,number} реакцій} other {Усього {count,number} реакцій}}',
+  'reactions.dialog.reactions.count': '{count, plural, one {Усього {count,number} реакція} few {Усього {count,number} реакції} many {Усього {count,number} реакцій} other {Усього {count,number} реакції}}',
   'reactions.dialog.right.navigate': 'Перейти вправо',
   'reactions.dialog.viewall': 'Переглянути все',
   'reactions.dialog.viewall.tooltip': 'Переглянути всі реакції користувачів'

package/dist/cjs/i18n/vi.js

@@ -24,7 +24,6 @@ var _default = exports.default = {
   'reactions.dialog.close': 'Đóng',
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Sang trái',
-  'reactions.dialog.people-who-reacted.subheader': 'Những người đã tương tác bằng {emojiShortName}',
   'reactions.dialog.reactions.count': '{count, plural, other {Tổng số {count,number} lượt tương tác}}',
   'reactions.dialog.right.navigate': 'Sang phải',
   'reactions.dialog.viewall': 'Xem tất cả',

package/dist/cjs/i18n/zh.js

@@ -24,7 +24,6 @@ var _default = exports.default = {
   'reactions.dialog.close': '关闭',
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': '向左导航',
-  'reactions.dialog.people-who-reacted.subheader': '使用 {emojiShortName} 回应的人员',
   'reactions.dialog.reactions.count': '{count, plural, other {共 {count,number} 条回应}}',
   'reactions.dialog.right.navigate': '向右导航',
   'reactions.dialog.viewall': '查看全部',

package/dist/cjs/i18n/zh_TW.js

@@ -23,7 +23,6 @@ var _default = exports.default = {
   'reaction-picker-trigger.add.reaction.message': '新增回應',
   'reactions.dialog.close': '關閉',
   'reactions.dialog.left.navigate': '左側導覽',
-  'reactions.dialog.people-who-reacted.subheader': '使用 {emojiShortName} 回應的人',
   'reactions.dialog.reactions.count': '{count, plural, other {{count,number} 個回應總計}}',
   'reactions.dialog.right.navigate': '右側導覽',
   'reactions.dialog.viewall': '查看全部',

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

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

@@ -1,7 +1,7 @@
 import React, { forwardRef, useMemo } from 'react';
 import { useIntl } from 'react-intl-next';
 import { ResourcedEmoji } from '@atlaskit/emoji';
-import { Inline, xcss, Box } from '@atlaskit/primitives';
+import { Inline, xcss, Box, Flex } from '@atlaskit/primitives';
 import { messages } from '../../shared/i18n';
 import { Counter } from '../Counter';
 import { ReactionButton } from '../Reaction';
@@ -16,6 +16,9 @@ const buttonStyle = xcss({
   paddingBottom: 'space.050',
   paddingLeft: 'space.100'
 });
+const compactButtonStyle = xcss({
+  height: '22px'
+});
 const opaqueBackgroundStyles = xcss({
   backgroundColor: 'elevation.surface',
   ':hover': {
@@ -48,7 +51,8 @@ export const ReactionSummaryButton = /*#__PURE__*/forwardRef(({
   emojisToShow = 3,
   onClick,
   showOpaqueBackground = false,
-  subtleReactionsSummaryAndPicker = false
+  subtleReactionsSummaryAndPicker = false,
+  useCompactStyles = false
 }, ref) => {
   const intl = useIntl();
 
@@ -64,14 +68,17 @@ export const ReactionSummaryButton = /*#__PURE__*/forwardRef(({
   const topReactions = useMemo(() => getTopReactions(reactions, emojisToShow), [emojisToShow, reactions]);
   const buttonStyles = showOpaqueBackground ? [opaqueBackgroundStyles] : [];
   const subtleSummaryStyles = subtleReactionsSummaryAndPicker ? [hideBorderStyle] : [];
-  return /*#__PURE__*/React.createElement(Box, {
+  const compactButtonStyles = useCompactStyles ? [compactButtonStyle] : [];
+  return /*#__PURE__*/React.createElement(Flex, {
     xcss: containerStyle,
-    ref: ref
+    ref: ref,
+    alignItems: "center",
+    justifyContent: "center"
   }, /*#__PURE__*/React.createElement(ReactionButton, {
     onClick: onClick,
     testId: RENDER_SUMMARY_BUTTON_TESTID,
     ariaLabel: intl.formatMessage(messages.summary),
-    additionalStyles: [...buttonStyles, ...subtleSummaryStyles]
+    additionalStyles: [...buttonStyles, ...subtleSummaryStyles, ...compactButtonStyles]
   }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.050",
     xcss: buttonStyle

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

@@ -3,6 +3,7 @@ import React, { useCallback, useState } from 'react';
 import Popup from '@atlaskit/popup';
 import { Inline, xcss } from '@atlaskit/primitives';
 import { Reaction } from '../Reaction';
+import { ReactionSummaryViewEmojiPicker } from './ReactionSummaryViewEmojiPicker';
 import { ReactionSummaryButton } from './ReactionSummaryButton';
 const summaryPopupStyles = xcss({
   padding: 'space.100',
@@ -27,7 +28,14 @@ export const ReactionSummaryView = ({
   subtleReactionsSummaryAndPicker = false,
   allowUserDialog,
   handleOpenReactionsDialog,
-  isViewOnly = false
+  isViewOnly = false,
+  allowSelectFromSummaryView,
+  disabled,
+  emojiPickerSize,
+  onSelection,
+  tooltipContent,
+  reactionPickerTriggerIcon,
+  onOpen
 }) => {
   const [isSummaryPopupOpen, setSummaryPopupOpen] = useState(false);
   const handlePopupClose = useCallback(() => setSummaryPopupOpen(false), []);
@@ -52,7 +60,15 @@ export const ReactionSummaryView = ({
       allowUserDialog: allowUserDialog,
       handleOpenReactionsDialog: handleOpenReactionsDialog,
       isViewOnly: isViewOnly
-    }))),
+    })), allowSelectFromSummaryView && /*#__PURE__*/React.createElement(ReactionSummaryViewEmojiPicker, {
+      emojiProvider: emojiProvider,
+      disabled: disabled,
+      onSelection: onSelection,
+      emojiPickerSize: emojiPickerSize,
+      tooltipContent: tooltipContent,
+      reactionPickerTriggerIcon: reactionPickerTriggerIcon,
+      onOpen: onOpen
+    })),
     isOpen: isSummaryPopupOpen,
     onClose: handlePopupClose,
     trigger: triggerProps => /*#__PURE__*/React.createElement(ReactionSummaryButton, _extends({}, triggerProps, {
@@ -60,7 +76,8 @@ export const ReactionSummaryView = ({
       reactions: reactions,
       onClick: handleSummaryClick,
       showOpaqueBackground: showOpaqueBackground,
-      subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
+      subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
+      useCompactStyles: allowSelectFromSummaryView
     }))
   });
 };