@atlaskit/reactions 26.5.1 → 27.1.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @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
+
+- [#122626](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/122626)
+  [`28c2e5656229f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/28c2e5656229f) -
+  Updates the API by removing the optional boolean prop showMoreEmojiTriggerUI and instead adds two
+  new props reactionPickerTriggerIcon and reactionPickerTriggerTooltipContent to have more control
+  for displaying changes in the Trigger. Currently only Confluence was using this prop so the change
+  should be non-breaking but still marking as major since it's an API update.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 26.5.1
 
 ### Patch Changes

package/dist/cjs/analytics/index.js

@@ -11,7 +11,7 @@ var _analyticsGasTypes = require("@atlaskit/analytics-gas-types");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/reactions";
-var packageVersion = "26.5.1";
+var packageVersion = "27.1.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -14,7 +14,7 @@ var _colors = require("@atlaskit/theme/colors");
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var countStyle = exports.countStyle = (0, _react.css)({
-  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
   color: "var(--ds-text-subtlest, ".concat(_colors.N90, ")"),
   overflow: 'hidden',
   position: 'relative',

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

@@ -58,7 +58,7 @@ var userListStyle = exports.userListStyle = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   li: {
     color: "".concat("var(--ds-text, ".concat(_colors.N500, ")")),
-    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
   }
 });
 

package/dist/cjs/components/ReactionPicker/ReactionPicker.js

@@ -100,7 +100,7 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
     showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg,
     _props$reactionPicker = props.reactionPickerAdditionalStyle,
     reactionPickerAdditionalStyle = _props$reactionPicker === void 0 ? undefined : _props$reactionPicker,
-    showMoreEmojiTriggerUI = props.showMoreEmojiTriggerUI;
+    reactionPickerTriggerIcon = props.reactionPickerTriggerIcon;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     triggerRef = _useState2[0],
@@ -256,7 +256,7 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
         showAddReactionText: showAddReactionText,
         subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
         showRoundTrigger: showRoundTrigger,
-        showMoreEmojiTriggerUI: showMoreEmojiTriggerUI
+        reactionPickerTriggerIcon: reactionPickerTriggerIcon
       })
     );
   }), settings.isOpen && (0, _react2.jsx)(PopperWrapper, {

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

@@ -85,7 +85,7 @@ var RENDER_REACTIONS_SUMMARY_TESTID = exports.RENDER_REACTIONS_SUMMARY_TESTID =
 /**
  * Get content of the tooltip
  */
-function getTooltip(status, errorMessage) {
+function getTooltip(status, errorMessage, tooltipContent) {
   switch (status) {
     case _types.ReactionStatus.error:
       return errorMessage || (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.unexpectedError);
@@ -96,7 +96,7 @@ function getTooltip(status, errorMessage) {
     case _types.ReactionStatus.loading:
       return (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.loadingReactions);
     case _types.ReactionStatus.ready:
-      return (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.addReaction);
+      return !!tooltipContent ? tooltipContent : (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.addReaction);
   }
 }
 
@@ -159,8 +159,11 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     noWrap = _ref$noWrap === void 0 ? false : _ref$noWrap,
     _ref$noRelativeContai = _ref.noRelativeContainer,
     noRelativeContainer = _ref$noRelativeContai === void 0 ? false : _ref$noRelativeContai,
-    showMoreEmojiTriggerUI = _ref.showMoreEmojiTriggerUI,
-    showSubtleDefaultReactions = _ref.showSubtleDefaultReactions;
+    showSubtleDefaultReactions = _ref.showSubtleDefaultReactions,
+    reactionPickerTriggerToolipContent = _ref.reactionPickerTriggerToolipContent,
+    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],
@@ -321,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,
@@ -333,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,
@@ -350,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,
@@ -362,14 +372,14 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     onOpen: handlePickerOpen,
     onCancel: handleOnCancel,
     onShowMore: handleOnMore,
-    tooltipContent: getTooltip(status, errorMessage),
+    tooltipContent: getTooltip(status, errorMessage, reactionPickerTriggerToolipContent),
     emojiPickerSize: emojiPickerSize,
     miniMode: miniMode,
     showOpaqueBackground: showOpaqueBackground,
     showAddReactionText: showAddReactionText,
     subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
     showRoundTrigger: showRoundTrigger,
-    showMoreEmojiTriggerUI: showMoreEmojiTriggerUI,
+    reactionPickerTriggerIcon: reactionPickerTriggerIcon,
     reactionPickerAdditionalStyle: reactionPickerAdditionalStyle
   }), (0, _react2.jsx)(_modalDialog.ModalTransition, null, !!selectedEmojiId && (0, _react2.jsx)(_segment.default, {
     name: "reactions-dialog"

package/dist/cjs/components/Trigger/Trigger.js

@@ -12,7 +12,6 @@ var _react2 = require("@emotion/react");
 var _primitives = require("@atlaskit/primitives");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _emojiAdd = _interopRequireDefault(require("@atlaskit/icon/core/migration/emoji-add"));
-var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /**
  * @jsxRuntime classic
@@ -31,11 +30,6 @@ var i18n = (0, _reactIntlNext.defineMessages)({
     id: 'reaction-picker-trigger.add.reaction.message',
     description: 'Message displayed when there are no page reactions existing on the page.',
     defaultMessage: 'Add a reaction'
-  },
-  showMore: {
-    id: 'reaction-picker-trigger.more.emojis.message',
-    description: 'Message displayed on button to show more emojis.',
-    defaultMessage: 'More emojis'
   }
 });
 var triggerStyles = (0, _primitives.xcss)({
@@ -97,7 +91,7 @@ var miniModeStyles = (0, _primitives.xcss)({
   borderRadius: 'border.radius'
 });
 var addReactionMessageStyles = (0, _primitives.xcss)({
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
   color: 'color.text.subtle',
   marginLeft: 'space.050'
 });
@@ -124,7 +118,7 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react.default.forwardRef(function
     _props$showRoundTrigg = props.showRoundTrigger,
     showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg,
     selectionStyle = props.selectionStyle,
-    showMoreEmojiTriggerUI = props.showMoreEmojiTriggerUI;
+    reactionPickerTriggerIcon = props.reactionPickerTriggerIcon;
   var handleMouseDown = function handleMouseDown(e, analyticsEvent) {
     if (onClick && !disabled) {
       onClick(e, analyticsEvent);
@@ -132,7 +126,7 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react.default.forwardRef(function
   };
   return (0, _react2.jsx)(_tooltip.default, {
     testId: RENDER_TOOLTIP_TRIGGER_TESTID,
-    content: showMoreEmojiTriggerUI ? formatMessage(i18n.showMore) : tooltipContent
+    content: tooltipContent
   }, (0, _react2.jsx)(_primitives.Pressable, (0, _extends2.default)({
     testId: RENDER_TRIGGER_BUTTON_TESTID,
     xcss: [triggerStyles, subtleReactionsSummaryAndPicker && subtleTriggerStyles, showAddReactionText && expandedTriggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && triggerStylesRefresh, showRoundTrigger && roundTriggerStyles,
@@ -141,11 +135,7 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react.default.forwardRef(function
     onClick: handleMouseDown,
     isDisabled: disabled,
     ref: ref
-  }, ariaAttributes), showMoreEmojiTriggerUI ? (0, _react2.jsx)(_showMoreHorizontal.default, {
-    testId: "show-more-emojis-icon",
-    label: formatMessage(i18n.showMore),
-    color: disabled ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon, #44546F)"
-  }) :
+  }, ariaAttributes), !!reactionPickerTriggerIcon ? reactionPickerTriggerIcon :
   // TODO: https://product-fabric.atlassian.net/browse/DSP-21007
   (0, _react2.jsx)(_emojiAdd.default, {
     testId: "emoji-add-icon",

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': 'Переглянути всі реакції користувачів'