@atlaskit/reactions 27.0.0 → 27.1.0

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

@@ -0,0 +1,81 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useCallback, useState } from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { EmojiPicker } from '@atlaskit/emoji/picker';
+import Popup from '@atlaskit/popup';
+import { PickerRender } from '../../ufo';
+import { Trigger } from '../Trigger';
+;
+export const ReactionSummaryViewEmojiPicker = ({
+  emojiProvider,
+  onSelection,
+  emojiPickerSize,
+  disabled,
+  reactionPickerTriggerIcon,
+  tooltipContent,
+  onOpen
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const handleClick = () => {
+    // ufo start reactions picker open experience
+    PickerRender.start();
+    setIsOpen(prevIsOpen => !prevIsOpen);
+    onOpen && onOpen();
+
+    // ufo reactions picker opened success
+    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
+  */
+  const close = useCallback(_id => {
+    setIsOpen(false);
+    // ufo abort reaction experience
+    PickerRender.abort({
+      metadata: {
+        emojiId: _id,
+        source: 'ReactionPicker',
+        reason: 'close dialog'
+      }
+    });
+  }, [setIsOpen]);
+
+  /**
+  * Event callback when an emoji icon is selected
+  * @param item selected item
+  */
+  const onEmojiSelected = useCallback(item => {
+    // no emoji was selected
+    if (!item.id) {
+      return;
+    }
+    onSelection(item.id, 'emojiPicker');
+    close(item.id);
+  }, [onSelection, close]);
+  return jsx(Popup, {
+    testId: "reaction-summary-view-emoji-picker",
+    isOpen: isOpen,
+    placement: "right",
+    onClose: () => close(),
+    content: () => jsx(EmojiPicker, {
+      emojiProvider: emojiProvider,
+      onSelection: onEmojiSelected,
+      size: emojiPickerSize
+    }),
+    trigger: triggerProps => jsx(Trigger, _extends({}, triggerProps, {
+      disabled: disabled,
+      reactionPickerTriggerIcon: reactionPickerTriggerIcon,
+      tooltipContent: tooltipContent,
+      showAddReactionText: false,
+      subtleReactionsSummaryAndPicker: true,
+      onClick: handleClick
+    }))
+  });
+};

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

@@ -82,7 +82,6 @@ export function getTooltip(status, errorMessage, tooltipContent) {
     case ReactionStatus.ready:
       return !!tooltipContent ? tooltipContent : jsx(FormattedMessage, messages.addReaction);
   }
-  ;
 }
 
 /**
@@ -125,7 +124,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
   noRelativeContainer = false,
   showSubtleDefaultReactions,
   reactionPickerTriggerToolipContent,
-  reactionPickerTriggerIcon
+  reactionPickerTriggerIcon,
+  allowSelectFromSummaryView = false
 }) => {
   const [selectedEmojiId, setSelectedEmojiId] = useState();
   const {
@@ -275,6 +275,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
     emojiProvider: emojiProvider,
     flash: flash,
     particleEffectByEmoji: particleEffectByEmoji,
+    onSelection: handleOnSelection,
     onReactionClick: onReactionClick,
     onReactionFocused: handleReactionFocused,
     onReactionMouseEnter: handleReactionMouseEnter,
@@ -285,7 +286,13 @@ export const Reactions = /*#__PURE__*/React.memo(({
       source: 'summaryView'
     }),
     allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions,
-    isViewOnly: isViewOnly
+    isViewOnly: isViewOnly,
+    allowSelectFromSummaryView: allowSelectFromSummaryView,
+    disabled: status !== ReactionStatus.ready,
+    reactionPickerTriggerIcon: reactionPickerTriggerIcon,
+    tooltipContent: getTooltip(status, errorMessage, reactionPickerTriggerToolipContent),
+    emojiPickerSize: emojiPickerSize,
+    onOpen: handlePickerOpen
   })) : memorizedReactions.map(reaction => jsx(Reaction, {
     key: reaction.emojiId,
     reaction: reaction,
@@ -300,7 +307,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
     handleOpenReactionsDialog: handleOpenReactionsDialog,
     isViewOnly: isViewOnly,
     showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
-  }))), !isViewOnly && jsx(ReactionPicker
+  }))), isViewOnly || allowSelectFromSummaryView ? null : jsx(ReactionPicker
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   , {
     css: reactionPickerStyle,

package/dist/es2019/i18n/cs.js

@@ -18,7 +18,6 @@ export 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/es2019/i18n/da.js

@@ -18,7 +18,6 @@ export 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/es2019/i18n/de.js

@@ -17,7 +17,6 @@ export 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/es2019/i18n/en.js

@@ -18,7 +18,6 @@ export 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/es2019/i18n/en_GB.js

@@ -18,7 +18,6 @@ export 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/es2019/i18n/en_ZZ.js

@@ -18,7 +18,6 @@ export 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/es2019/i18n/es.js

@@ -18,7 +18,6 @@ export 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/es2019/i18n/fi.js

@@ -17,7 +17,6 @@ export 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/es2019/i18n/fr.js

@@ -18,7 +18,6 @@ export 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/es2019/i18n/hu.js

@@ -18,7 +18,6 @@ export 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/es2019/i18n/it.js

@@ -18,7 +18,6 @@ export 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/es2019/i18n/ja.js

@@ -18,7 +18,6 @@ export 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/es2019/i18n/ko.js

@@ -17,8 +17,7 @@ export 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/es2019/i18n/nb.js

@@ -17,7 +17,6 @@ export 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/es2019/i18n/nl.js

@@ -18,7 +18,6 @@ export 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/es2019/i18n/pl.js

@@ -18,7 +18,6 @@ export 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/es2019/i18n/pt_BR.js

@@ -18,7 +18,6 @@ export 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/es2019/i18n/ru.js

@@ -17,7 +17,6 @@ export 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/es2019/i18n/sv.js

@@ -18,7 +18,6 @@ export 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/es2019/i18n/th.js

@@ -18,7 +18,6 @@ export 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/es2019/i18n/tr.js

@@ -18,7 +18,6 @@ export 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/es2019/i18n/uk.js

@@ -18,8 +18,7 @@ export 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/es2019/i18n/vi.js

@@ -18,7 +18,6 @@ export 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/es2019/i18n/zh.js

@@ -18,7 +18,6 @@ export 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/es2019/i18n/zh_TW.js

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

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

@@ -2,7 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 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';
@@ -17,6 +17,9 @@ var buttonStyle = xcss({
   paddingBottom: 'space.050',
   paddingLeft: 'space.100'
 });
+var compactButtonStyle = xcss({
+  height: '22px'
+});
 var opaqueBackgroundStyles = xcss({
   backgroundColor: 'elevation.surface',
   ':hover': {
@@ -53,7 +56,9 @@ export var ReactionSummaryButton = /*#__PURE__*/forwardRef(function (_ref, ref)
     _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 = useIntl();
 
   // Helper function to sort reactions by count and return top N
@@ -72,14 +77,17 @@ export var ReactionSummaryButton = /*#__PURE__*/forwardRef(function (_ref, ref)
   }, [emojisToShow, reactions]);
   var buttonStyles = showOpaqueBackground ? [opaqueBackgroundStyles] : [];
   var subtleSummaryStyles = subtleReactionsSummaryAndPicker ? [hideBorderStyle] : [];
-  return /*#__PURE__*/React.createElement(Box, {
+  var 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: [].concat(buttonStyles, subtleSummaryStyles)
+    additionalStyles: [].concat(buttonStyles, subtleSummaryStyles, compactButtonStyles)
   }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.050",
     xcss: buttonStyle

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

@@ -4,6 +4,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';
 var summaryPopupStyles = xcss({
   padding: 'space.100',
@@ -35,7 +36,14 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
     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 = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isSummaryPopupOpen = _useState2[0],
@@ -69,6 +77,14 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
           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,
@@ -79,7 +95,8 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
         reactions: reactions,
         onClick: handleSummaryClick,
         showOpaqueBackground: showOpaqueBackground,
-        subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
+        subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
+        useCompactStyles: allowSelectFromSummaryView
       }));
     }
   });

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

@@ -0,0 +1,92 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useCallback, useState } from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { EmojiPicker } from '@atlaskit/emoji/picker';
+import Popup from '@atlaskit/popup';
+import { PickerRender } from '../../ufo';
+import { Trigger } from '../Trigger';
+;
+export var 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 = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var handleClick = function handleClick() {
+    // ufo start reactions picker open experience
+    PickerRender.start();
+    setIsOpen(function (prevIsOpen) {
+      return !prevIsOpen;
+    });
+    onOpen && onOpen();
+
+    // ufo reactions picker opened success
+    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 = useCallback(function (_id) {
+    setIsOpen(false);
+    // ufo abort reaction experience
+    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 = useCallback(function (item) {
+    // no emoji was selected
+    if (!item.id) {
+      return;
+    }
+    onSelection(item.id, 'emojiPicker');
+    close(item.id);
+  }, [onSelection, close]);
+  return jsx(Popup, {
+    testId: "reaction-summary-view-emoji-picker",
+    isOpen: isOpen,
+    placement: "right",
+    onClose: function onClose() {
+      return close();
+    },
+    content: function content() {
+      return jsx(EmojiPicker, {
+        emojiProvider: emojiProvider,
+        onSelection: onEmojiSelected,
+        size: emojiPickerSize
+      });
+    },
+    trigger: function trigger(triggerProps) {
+      return jsx(Trigger, _extends({}, triggerProps, {
+        disabled: disabled,
+        reactionPickerTriggerIcon: reactionPickerTriggerIcon,
+        tooltipContent: tooltipContent,
+        showAddReactionText: false,
+        subtleReactionsSummaryAndPicker: true,
+        onClick: handleClick
+      }));
+    }
+  });
+};

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

@@ -84,7 +84,6 @@ export function getTooltip(status, errorMessage, tooltipContent) {
     case ReactionStatus.ready:
       return !!tooltipContent ? tooltipContent : jsx(FormattedMessage, messages.addReaction);
   }
-  ;
 }
 
 /**
@@ -148,7 +147,9 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     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 = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -309,6 +310,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     emojiProvider: emojiProvider,
     flash: flash,
     particleEffectByEmoji: particleEffectByEmoji,
+    onSelection: handleOnSelection,
     onReactionClick: onReactionClick,
     onReactionFocused: handleReactionFocused,
     onReactionMouseEnter: handleReactionMouseEnter,
@@ -321,7 +323,13 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       });
     },
     allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions,
-    isViewOnly: isViewOnly
+    isViewOnly: isViewOnly,
+    allowSelectFromSummaryView: allowSelectFromSummaryView,
+    disabled: status !== ReactionStatus.ready,
+    reactionPickerTriggerIcon: reactionPickerTriggerIcon,
+    tooltipContent: getTooltip(status, errorMessage, reactionPickerTriggerToolipContent),
+    emojiPickerSize: emojiPickerSize,
+    onOpen: handlePickerOpen
   })) : memorizedReactions.map(function (reaction) {
     return jsx(Reaction, {
       key: reaction.emojiId,
@@ -338,7 +346,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       isViewOnly: isViewOnly,
       showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
     });
-  })), !isViewOnly && jsx(ReactionPicker
+  })), isViewOnly || allowSelectFromSummaryView ? null : jsx(ReactionPicker
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   , {
     css: reactionPickerStyle,

package/dist/esm/i18n/cs.js

@@ -18,7 +18,6 @@ export 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',