@atlaskit/reactions 30.0.8 → 31.0.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/reactions
 
+## 31.0.0
+
+### Major Changes
+
+- [#140004](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/140004)
+  [`45db426b36675`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/45db426b36675) -
+  [ux] Updated summary view tray to include reactions picker with new design as part of byline
+  reactions changes. Also cleaned up compact styles as it was no longer being used, as well as fixed
+  a prop not being spelled correctly.
+
 ## 30.0.8
 
 ### 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 = "30.0.8";
+var packageVersion = "31.0.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/cjs/components/ReactionPicker.js

@@ -75,6 +75,7 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
     _props$showRoundTrigg = props.showRoundTrigger,
     showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg,
     reactionPickerTriggerIcon = props.reactionPickerTriggerIcon,
+    reactionPickerTriggerText = props.reactionPickerTriggerText,
     reactionPickerPlacement = props.reactionPickerPlacement,
     reactionsPickerPreventOverflowOptions = props.reactionsPickerPreventOverflowOptions;
   var _useState = (0, _react.useState)(null),
@@ -247,7 +248,8 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
         showAddReactionText: showAddReactionText,
         subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
         showRoundTrigger: showRoundTrigger,
-        reactionPickerTriggerIcon: reactionPickerTriggerIcon
+        reactionPickerTriggerIcon: reactionPickerTriggerIcon,
+        reactionPickerTriggerText: reactionPickerTriggerText
       })
     );
   }), settings.isOpen && /*#__PURE__*/_react.default.createElement(PopperWrapper, {

package/dist/cjs/components/ReactionSummaryButton.compiled.css

@@ -1,7 +1,6 @@
 ._19bvu2gc{padding-left:var(--ds-space-100,8px)}
 ._8hrz1nam{transform-origin:center center 0}
 ._ca0q1b66{padding-top:var(--ds-space-050,4px)}
-._ca0qv77o{padding-top:var(--ds-space-025,2px)}
 ._kqswh2mm{position:relative}
 ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
 ._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/cjs/components/ReactionSummaryButton.js

@@ -24,7 +24,6 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var styles = {
   emoji: "_8hrz1nam",
   button: "_ca0q1b66 _u5f31b66 _n3td1b66 _19bvu2gc",
-  compactPadding: "_ca0qv77o",
   container: "_kqswh2mm"
 };
 /**
@@ -49,8 +48,6 @@ var ReactionSummaryButton = exports.ReactionSummaryButton = /*#__PURE__*/(0, _re
     showOpaqueBackground = _ref$showOpaqueBackgr === void 0 ? false : _ref$showOpaqueBackgr,
     _ref$subtleReactionsS = _ref.subtleReactionsSummaryAndPicker,
     subtleReactionsSummaryAndPicker = _ref$subtleReactionsS === void 0 ? false : _ref$subtleReactionsS,
-    _ref$useCompactStyles = _ref.useCompactStyles,
-    useCompactStyles = _ref$useCompactStyles === void 0 ? false : _ref$useCompactStyles,
     _ref$useButtonAlignme = _ref.useButtonAlignmentStyling,
     useButtonAlignmentStyling = _ref$useButtonAlignme === void 0 ? false : _ref$useButtonAlignme;
   var intl = (0, _reactIntlNext.useIntl)();
@@ -78,12 +75,11 @@ var ReactionSummaryButton = exports.ReactionSummaryButton = /*#__PURE__*/(0, _re
     onClick: onClick,
     testId: RENDER_SUMMARY_BUTTON_TESTID,
     ariaLabel: intl.formatMessage(_i18n.messages.summary),
-    useCompactStyles: useCompactStyles,
     showSubtleStyle: subtleReactionsSummaryAndPicker,
     showOpaqueBackground: showOpaqueBackground
   }, /*#__PURE__*/React.createElement(_compiled.Inline, {
     space: "space.050",
-    xcss: (0, _react2.cx)(styles.button, useCompactStyles && styles.compactPadding),
+    xcss: (0, _react2.cx)(styles.button),
     testId: "reaction-summary-wrapper"
   }, topReactions.map(function (reaction) {
     return /*#__PURE__*/React.createElement(_compiled.Box, {
@@ -100,11 +96,11 @@ var ReactionSummaryButton = exports.ReactionSummaryButton = /*#__PURE__*/(0, _re
         id: reaction.emojiId,
         shortName: ''
       },
-      fitToHeight: useCompactStyles ? 12 : 16
+      fitToHeight: 16
     }));
   })), /*#__PURE__*/React.createElement(_Counter.Counter, {
     value: totalReactionsCount,
-    useDarkerFont: useCompactStyles || useButtonAlignmentStyling,
-    useUpdatedStyles: !useCompactStyles && useButtonAlignmentStyling
+    useDarkerFont: useButtonAlignmentStyling,
+    useUpdatedStyles: useButtonAlignmentStyling
   })));
 });

package/dist/cjs/components/ReactionSummaryView.js

@@ -56,7 +56,8 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
     tooltipContent = _ref.tooltipContent,
     reactionPickerTriggerIcon = _ref.reactionPickerTriggerIcon,
     onOpen = _ref.onOpen,
-    useButtonAlignmentStyling = _ref.useButtonAlignmentStyling;
+    useButtonAlignmentStyling = _ref.useButtonAlignmentStyling,
+    reactionPickerTriggerText = _ref.reactionPickerTriggerText;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isSummaryPopupOpen = _useState2[0],
@@ -70,9 +71,10 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
   return /*#__PURE__*/React.createElement(_popup.default, {
     placement: placement,
     content: function content() {
-      return /*#__PURE__*/React.createElement(_compiled.Inline, {
+      return /*#__PURE__*/React.createElement(_compiled.Box, {
+        testId: RENDER_SUMMARY_VIEW_POPUP_TESTID
+      }, /*#__PURE__*/React.createElement(_compiled.Inline, {
         xcss: styles.summaryPopup,
-        testId: RENDER_SUMMARY_VIEW_POPUP_TESTID,
         space: "space.025",
         shouldWrap: true,
         alignBlock: "center"
@@ -90,15 +92,18 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
           handleOpenReactionsDialog: handleOpenReactionsDialog,
           isViewOnly: isViewOnly
         });
-      }), allowSelectFromSummaryView && /*#__PURE__*/React.createElement(_ReactionSummaryViewEmojiPicker.ReactionSummaryViewEmojiPicker, {
+      })), allowSelectFromSummaryView && /*#__PURE__*/React.createElement(_compiled.Flex, {
+        justifyContent: "center"
+      }, /*#__PURE__*/React.createElement(_ReactionSummaryViewEmojiPicker.ReactionSummaryViewEmojiPicker, {
         emojiProvider: emojiProvider,
         disabled: disabled,
         onSelection: onSelection,
         emojiPickerSize: emojiPickerSize,
         tooltipContent: tooltipContent,
         reactionPickerTriggerIcon: reactionPickerTriggerIcon,
+        reactionPickerTriggerText: reactionPickerTriggerText,
         onOpen: onOpen
-      }));
+      })));
     },
     isOpen: isSummaryPopupOpen,
     onClose: handlePopupClose,
@@ -109,7 +114,6 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
         onClick: handleSummaryClick,
         showOpaqueBackground: showOpaqueBackground,
         subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
-        useCompactStyles: allowSelectFromSummaryView,
         useButtonAlignmentStyling: useButtonAlignmentStyling
       }));
     }

package/dist/cjs/components/ReactionSummaryViewEmojiPicker.js

@@ -22,7 +22,8 @@ var ReactionSummaryViewEmojiPicker = exports.ReactionSummaryViewEmojiPicker = fu
     disabled = _ref.disabled,
     reactionPickerTriggerIcon = _ref.reactionPickerTriggerIcon,
     tooltipContent = _ref.tooltipContent,
-    onOpen = _ref.onOpen;
+    onOpen = _ref.onOpen,
+    reactionPickerTriggerText = _ref.reactionPickerTriggerText;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isOpen = _useState2[0],
@@ -86,9 +87,10 @@ var ReactionSummaryViewEmojiPicker = exports.ReactionSummaryViewEmojiPicker = fu
         disabled: disabled,
         reactionPickerTriggerIcon: reactionPickerTriggerIcon,
         tooltipContent: tooltipContent,
-        showAddReactionText: false,
-        subtleReactionsSummaryAndPicker: true,
-        onClick: handleClick
+        onClick: handleClick,
+        showAddReactionText: true,
+        reactionPickerTriggerText: reactionPickerTriggerText,
+        fullWidthSummaryViewReactionPickerTrigger: true
       }));
     }
   });

package/dist/cjs/components/Reactions.js

@@ -137,12 +137,13 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     _ref$noRelativeContai = _ref.noRelativeContainer,
     noRelativeContainer = _ref$noRelativeContai === void 0 ? false : _ref$noRelativeContai,
     showSubtleDefaultReactions = _ref.showSubtleDefaultReactions,
-    reactionPickerTriggerToolipContent = _ref.reactionPickerTriggerToolipContent,
+    reactionPickerTriggerTooltipContent = _ref.reactionPickerTriggerTooltipContent,
     reactionPickerTriggerIcon = _ref.reactionPickerTriggerIcon,
     _ref$allowSelectFromS = _ref.allowSelectFromSummaryView,
     allowSelectFromSummaryView = _ref$allowSelectFromS === void 0 ? false : _ref$allowSelectFromS,
     _ref$useButtonAlignme = _ref.useButtonAlignmentStyling,
-    useButtonAlignmentStyling = _ref$useButtonAlignme === void 0 ? false : _ref$useButtonAlignme;
+    useButtonAlignmentStyling = _ref$useButtonAlignme === void 0 ? false : _ref$useButtonAlignme,
+    reactionPickerTriggerText = _ref.reactionPickerTriggerText;
   var _useState = (0, _react.useState)(''),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -320,10 +321,11 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     allowSelectFromSummaryView: allowSelectFromSummaryView,
     disabled: status !== _types.ReactionStatus.ready,
     reactionPickerTriggerIcon: reactionPickerTriggerIcon,
-    tooltipContent: getTooltip(status, errorMessage, reactionPickerTriggerToolipContent),
+    tooltipContent: getTooltip(status, errorMessage, reactionPickerTriggerTooltipContent),
     emojiPickerSize: emojiPickerSize,
     onOpen: handlePickerOpen,
-    useButtonAlignmentStyling: useButtonAlignmentStyling
+    useButtonAlignmentStyling: useButtonAlignmentStyling,
+    reactionPickerTriggerText: reactionPickerTriggerText
   })) : memorizedReactions.map(function (reaction) {
     return /*#__PURE__*/_react.default.createElement(_Reaction.Reaction, {
       key: reaction.emojiId,
@@ -340,7 +342,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       isViewOnly: isViewOnly,
       showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
     });
-  })), isViewOnly || allowSelectFromSummaryView ? null : /*#__PURE__*/_react.default.createElement(_ReactionPicker.ReactionPicker, {
+  })), isViewOnly || !onlyRenderPicker && shouldShowSummaryView && allowSelectFromSummaryView ? null : /*#__PURE__*/_react.default.createElement(_ReactionPicker.ReactionPicker, {
     emojiProvider: emojiProvider,
     allowAllEmojis: allowAllEmojis,
     pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
@@ -349,13 +351,14 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     onOpen: handlePickerOpen,
     onCancel: handleOnCancel,
     onShowMore: handleOnMore,
-    tooltipContent: getTooltip(status, errorMessage, reactionPickerTriggerToolipContent),
+    tooltipContent: getTooltip(status, errorMessage, reactionPickerTriggerTooltipContent),
     emojiPickerSize: emojiPickerSize,
     miniMode: miniMode,
     showOpaqueBackground: showOpaqueBackground,
     showAddReactionText: showAddReactionText,
     subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
     reactionPickerTriggerIcon: reactionPickerTriggerIcon,
+    reactionPickerTriggerText: reactionPickerTriggerText,
     className: (0, _runtime.ax)(["_1e0c1o8l _19pk1b66"])
   }), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, !!selectedEmojiId && /*#__PURE__*/_react.default.createElement(_segment.default, {
     name: "reactions-dialog"

package/dist/cjs/components/Trigger.compiled.css

@@ -8,8 +8,10 @@
 ._1h6dmuej{border-color:var(--ds-border,#091e4224)}
 ._18u01b66{margin-left:var(--ds-space-050,4px)}
 ._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
 ._19bvze3t{padding-left:var(--ds-space-0,0)}
 ._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
 ._1bsbviql{width:2rem}
 ._1e0c1txw{display:flex}
 ._1ul9146b{min-width:110px}
@@ -24,9 +26,11 @@
 ._ca0q1b66{padding-top:var(--ds-space-050,4px)}
 ._ca0qze3t{padding-top:var(--ds-space-0,0)}
 ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
 ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
 ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
 ._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
 ._u5f3ze3t{padding-right:var(--ds-space-0,0)}
 ._irr3108i:hover{background-color:var(--ds-surface-hovered,#f1f2f4)}
 ._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}

package/dist/cjs/components/Trigger.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Trigger = exports.RENDER_TRIGGER_BUTTON_TESTID = exports.RENDER_TOOLTIP_TRIGGER_TESTID = void 0;
+exports.Trigger = exports.RENDER_TRIGGER_CONTAINER_TESTID = exports.RENDER_TRIGGER_BUTTON_TESTID = exports.RENDER_TOOLTIP_TRIGGER_TESTID = void 0;
 require("./Trigger.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -25,7 +25,9 @@ var styles = {
   transparentEnabledTrigger: "_1h6dmuej _bfhksm61 _irr3166n _1di61dty",
   opaqueEnabledTrigger: "_1h6dmuej _bfhkvuon _irr3108i _1di61ji5",
   disabledTrigger: "_1h6d13gt _bfhksyzs",
-  miniMode: "_2rkoglpi _1dqoglyw _1ul91tcg _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66"
+  miniMode: "_2rkoglpi _1dqoglyw _1ul91tcg _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66",
+  fullWidthSummaryViewReactionPickerTrigger: "_1bsb1osq _19bvu2gc _u5f3u2gc _n3tdu2gc",
+  fullWidth: "_1bsb1osq"
 };
 
 /**
@@ -33,6 +35,7 @@ var styles = {
  */
 var RENDER_TOOLTIP_TRIGGER_TESTID = exports.RENDER_TOOLTIP_TRIGGER_TESTID = 'render-tooltip-trigger';
 var RENDER_TRIGGER_BUTTON_TESTID = exports.RENDER_TRIGGER_BUTTON_TESTID = 'render-trigger-button';
+var RENDER_TRIGGER_CONTAINER_TESTID = exports.RENDER_TRIGGER_CONTAINER_TESTID = 'render-trigger-container';
 var i18n = (0, _reactIntlNext.defineMessages)({
   addReaction: {
     id: 'reaction-picker-trigger.add.reaction.message',
@@ -65,18 +68,25 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react2.default.forwardRef(function
     subtleReactionsSummaryAndPicker = _props$subtleReaction === void 0 ? false : _props$subtleReaction,
     _props$showRoundTrigg = props.showRoundTrigger,
     showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg,
-    reactionPickerTriggerIcon = props.reactionPickerTriggerIcon;
+    reactionPickerTriggerIcon = props.reactionPickerTriggerIcon,
+    _props$reactionPicker = props.reactionPickerTriggerText,
+    reactionPickerTriggerText = _props$reactionPicker === void 0 ? formatMessage(i18n.addReaction) : _props$reactionPicker,
+    _props$fullWidthSumma = props.fullWidthSummaryViewReactionPickerTrigger,
+    fullWidthSummaryViewReactionPickerTrigger = _props$fullWidthSumma === void 0 ? false : _props$fullWidthSumma;
   var handleMouseDown = function handleMouseDown(e, analyticsEvent) {
     if (onClick && !disabled) {
       onClick(e, analyticsEvent);
     }
   };
-  return /*#__PURE__*/_react2.default.createElement(_tooltip.default, {
+  return /*#__PURE__*/_react2.default.createElement(_compiled.Box, {
+    xcss: (0, _react.cx)(fullWidthSummaryViewReactionPickerTrigger && styles.fullWidthSummaryViewReactionPickerTrigger),
+    testId: RENDER_TRIGGER_CONTAINER_TESTID
+  }, /*#__PURE__*/_react2.default.createElement(_tooltip.default, {
     testId: RENDER_TOOLTIP_TRIGGER_TESTID,
     content: tooltipContent
   }, /*#__PURE__*/_react2.default.createElement(_compiled.Pressable, (0, _extends2.default)({
     testId: RENDER_TRIGGER_BUTTON_TESTID,
-    xcss: (0, _react.cx)(styles.trigger, subtleReactionsSummaryAndPicker && styles.subtleTrigger, showAddReactionText && styles.expandedTrigger, disabled ? styles.disabledTrigger : showOpaqueBackground ? styles.opaqueEnabledTrigger : styles.transparentEnabledTrigger, miniMode && styles.miniMode,
+    xcss: (0, _react.cx)(styles.trigger, fullWidthSummaryViewReactionPickerTrigger && styles.fullWidth, subtleReactionsSummaryAndPicker && styles.subtleTrigger, showAddReactionText && styles.expandedTrigger, disabled ? styles.disabledTrigger : showOpaqueBackground ? styles.opaqueEnabledTrigger : styles.transparentEnabledTrigger, miniMode && styles.miniMode,
     // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
     (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && styles.triggerStylesRefresh, showRoundTrigger && styles.roundTrigger),
     style: {
@@ -98,5 +108,5 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react2.default.forwardRef(function
     label: "Add reaction"
   }), showAddReactionText && /*#__PURE__*/_react2.default.createElement(_compiled.Box, {
     xcss: (0, _react.cx)(addReactionStyles.addReactionMessage)
-  }, formatMessage(i18n.addReaction))));
+  }, reactionPickerTriggerText))));
 });

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

package/dist/es2019/components/ReactionPicker.js

@@ -55,6 +55,7 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     showAddReactionText = false,
     showRoundTrigger = false,
     reactionPickerTriggerIcon,
+    reactionPickerTriggerText,
     reactionPickerPlacement,
     reactionsPickerPreventOverflowOptions
   } = props;
@@ -222,7 +223,8 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     showAddReactionText: showAddReactionText,
     subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
     showRoundTrigger: showRoundTrigger,
-    reactionPickerTriggerIcon: reactionPickerTriggerIcon
+    reactionPickerTriggerIcon: reactionPickerTriggerIcon,
+    reactionPickerTriggerText: reactionPickerTriggerText
   })), settings.isOpen && /*#__PURE__*/React.createElement(PopperWrapper, {
     settings: settings,
     popperModifiers: popperModifiers

package/dist/es2019/components/ReactionSummaryButton.compiled.css

@@ -1,7 +1,6 @@
 ._19bvu2gc{padding-left:var(--ds-space-100,8px)}
 ._8hrz1nam{transform-origin:center center 0}
 ._ca0q1b66{padding-top:var(--ds-space-050,4px)}
-._ca0qv77o{padding-top:var(--ds-space-025,2px)}
 ._kqswh2mm{position:relative}
 ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
 ._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/es2019/components/ReactionSummaryButton.js

@@ -13,7 +13,6 @@ import { cx } from '@compiled/react';
 const styles = {
   emoji: "_8hrz1nam",
   button: "_ca0q1b66 _u5f31b66 _n3td1b66 _19bvu2gc",
-  compactPadding: "_ca0qv77o",
   container: "_kqswh2mm"
 };
 /**
@@ -34,7 +33,6 @@ export const ReactionSummaryButton = /*#__PURE__*/forwardRef(({
   onClick,
   showOpaqueBackground = false,
   subtleReactionsSummaryAndPicker = false,
-  useCompactStyles = false,
   useButtonAlignmentStyling = false
 }, ref) => {
   const intl = useIntl();
@@ -58,12 +56,11 @@ export const ReactionSummaryButton = /*#__PURE__*/forwardRef(({
     onClick: onClick,
     testId: RENDER_SUMMARY_BUTTON_TESTID,
     ariaLabel: intl.formatMessage(messages.summary),
-    useCompactStyles: useCompactStyles,
     showSubtleStyle: subtleReactionsSummaryAndPicker,
     showOpaqueBackground: showOpaqueBackground
   }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.050",
-    xcss: cx(styles.button, useCompactStyles && styles.compactPadding),
+    xcss: cx(styles.button),
     testId: "reaction-summary-wrapper"
   }, topReactions.map(reaction => /*#__PURE__*/React.createElement(Box, {
     xcss: styles.emoji,
@@ -79,10 +76,10 @@ export const ReactionSummaryButton = /*#__PURE__*/forwardRef(({
       id: reaction.emojiId,
       shortName: ''
     },
-    fitToHeight: useCompactStyles ? 12 : 16
+    fitToHeight: 16
   })))), /*#__PURE__*/React.createElement(Counter, {
     value: totalReactionsCount,
-    useDarkerFont: useCompactStyles || useButtonAlignmentStyling,
-    useUpdatedStyles: !useCompactStyles && useButtonAlignmentStyling
+    useDarkerFont: useButtonAlignmentStyling,
+    useUpdatedStyles: useButtonAlignmentStyling
   })));
 });

package/dist/es2019/components/ReactionSummaryView.js

@@ -8,7 +8,7 @@ import Popup from '@atlaskit/popup';
 import { Reaction } from './Reaction';
 import { ReactionSummaryViewEmojiPicker } from './ReactionSummaryViewEmojiPicker';
 import { ReactionSummaryButton } from './ReactionSummaryButton';
-import { Inline } from '@atlaskit/primitives/compiled';
+import { Box, Flex, Inline } from '@atlaskit/primitives/compiled';
 const styles = {
   summaryPopup: "_ca0q1b66 _u5f3u2gc _n3tdu2gc _19bvu2gc _p12foiq5"
 };
@@ -38,16 +38,18 @@ export const ReactionSummaryView = ({
   tooltipContent,
   reactionPickerTriggerIcon,
   onOpen,
-  useButtonAlignmentStyling
+  useButtonAlignmentStyling,
+  reactionPickerTriggerText
 }) => {
   const [isSummaryPopupOpen, setSummaryPopupOpen] = useState(false);
   const handlePopupClose = useCallback(() => setSummaryPopupOpen(false), []);
   const handleSummaryClick = useCallback(() => setSummaryPopupOpen(!isSummaryPopupOpen), [isSummaryPopupOpen]);
   return /*#__PURE__*/React.createElement(Popup, {
     placement: placement,
-    content: () => /*#__PURE__*/React.createElement(Inline, {
+    content: () => /*#__PURE__*/React.createElement(Box, {
+      testId: RENDER_SUMMARY_VIEW_POPUP_TESTID
+    }, /*#__PURE__*/React.createElement(Inline, {
       xcss: styles.summaryPopup,
-      testId: RENDER_SUMMARY_VIEW_POPUP_TESTID,
       space: "space.025",
       shouldWrap: true,
       alignBlock: "center"
@@ -63,15 +65,18 @@ export const ReactionSummaryView = ({
       allowUserDialog: allowUserDialog,
       handleOpenReactionsDialog: handleOpenReactionsDialog,
       isViewOnly: isViewOnly
-    })), allowSelectFromSummaryView && /*#__PURE__*/React.createElement(ReactionSummaryViewEmojiPicker, {
+    }))), allowSelectFromSummaryView && /*#__PURE__*/React.createElement(Flex, {
+      justifyContent: "center"
+    }, /*#__PURE__*/React.createElement(ReactionSummaryViewEmojiPicker, {
       emojiProvider: emojiProvider,
       disabled: disabled,
       onSelection: onSelection,
       emojiPickerSize: emojiPickerSize,
       tooltipContent: tooltipContent,
       reactionPickerTriggerIcon: reactionPickerTriggerIcon,
+      reactionPickerTriggerText: reactionPickerTriggerText,
       onOpen: onOpen
-    })),
+    }))),
     isOpen: isSummaryPopupOpen,
     onClose: handlePopupClose,
     trigger: triggerProps => /*#__PURE__*/React.createElement(ReactionSummaryButton, _extends({}, triggerProps, {
@@ -80,7 +85,6 @@ export const ReactionSummaryView = ({
       onClick: handleSummaryClick,
       showOpaqueBackground: showOpaqueBackground,
       subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
-      useCompactStyles: allowSelectFromSummaryView,
       useButtonAlignmentStyling: useButtonAlignmentStyling
     }))
   });

package/dist/es2019/components/ReactionSummaryViewEmojiPicker.js

@@ -11,7 +11,8 @@ export const ReactionSummaryViewEmojiPicker = ({
   disabled,
   reactionPickerTriggerIcon,
   tooltipContent,
-  onOpen
+  onOpen,
+  reactionPickerTriggerText
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const handleClick = () => {
@@ -66,9 +67,10 @@ export const ReactionSummaryViewEmojiPicker = ({
       disabled: disabled,
       reactionPickerTriggerIcon: reactionPickerTriggerIcon,
       tooltipContent: tooltipContent,
-      showAddReactionText: false,
-      subtleReactionsSummaryAndPicker: true,
-      onClick: handleClick
+      onClick: handleClick,
+      showAddReactionText: true,
+      reactionPickerTriggerText: reactionPickerTriggerText,
+      fullWidthSummaryViewReactionPickerTrigger: true
     }))
   });
 };

package/dist/es2019/components/Reactions.js

@@ -103,10 +103,11 @@ export const Reactions = /*#__PURE__*/React.memo(({
   noWrap = false,
   noRelativeContainer = false,
   showSubtleDefaultReactions,
-  reactionPickerTriggerToolipContent,
+  reactionPickerTriggerTooltipContent,
   reactionPickerTriggerIcon,
   allowSelectFromSummaryView = false,
-  useButtonAlignmentStyling = false
+  useButtonAlignmentStyling = false,
+  reactionPickerTriggerText
 }) => {
   const [selectedEmojiId, setSelectedEmojiId] = useState('');
   const {
@@ -271,10 +272,11 @@ export const Reactions = /*#__PURE__*/React.memo(({
     allowSelectFromSummaryView: allowSelectFromSummaryView,
     disabled: status !== ReactionStatus.ready,
     reactionPickerTriggerIcon: reactionPickerTriggerIcon,
-    tooltipContent: getTooltip(status, errorMessage, reactionPickerTriggerToolipContent),
+    tooltipContent: getTooltip(status, errorMessage, reactionPickerTriggerTooltipContent),
     emojiPickerSize: emojiPickerSize,
     onOpen: handlePickerOpen,
-    useButtonAlignmentStyling: useButtonAlignmentStyling
+    useButtonAlignmentStyling: useButtonAlignmentStyling,
+    reactionPickerTriggerText: reactionPickerTriggerText
   })) : memorizedReactions.map(reaction => /*#__PURE__*/React.createElement(Reaction, {
     key: reaction.emojiId,
     reaction: reaction,
@@ -289,7 +291,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
     handleOpenReactionsDialog: handleOpenReactionsDialog,
     isViewOnly: isViewOnly,
     showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
-  }))), isViewOnly || allowSelectFromSummaryView ? null : /*#__PURE__*/React.createElement(ReactionPicker, {
+  }))), isViewOnly || !onlyRenderPicker && shouldShowSummaryView && allowSelectFromSummaryView ? null : /*#__PURE__*/React.createElement(ReactionPicker, {
     emojiProvider: emojiProvider,
     allowAllEmojis: allowAllEmojis,
     pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
@@ -298,13 +300,14 @@ export const Reactions = /*#__PURE__*/React.memo(({
     onOpen: handlePickerOpen,
     onCancel: handleOnCancel,
     onShowMore: handleOnMore,
-    tooltipContent: getTooltip(status, errorMessage, reactionPickerTriggerToolipContent),
+    tooltipContent: getTooltip(status, errorMessage, reactionPickerTriggerTooltipContent),
     emojiPickerSize: emojiPickerSize,
     miniMode: miniMode,
     showOpaqueBackground: showOpaqueBackground,
     showAddReactionText: showAddReactionText,
     subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
     reactionPickerTriggerIcon: reactionPickerTriggerIcon,
+    reactionPickerTriggerText: reactionPickerTriggerText,
     className: ax(["_1e0c1o8l _19pk1b66"])
   }), /*#__PURE__*/React.createElement(ModalTransition, null, !!selectedEmojiId && /*#__PURE__*/React.createElement(UFOSegment, {
     name: "reactions-dialog"

package/dist/es2019/components/Trigger.compiled.css

@@ -8,8 +8,10 @@
 ._1h6dmuej{border-color:var(--ds-border,#091e4224)}
 ._18u01b66{margin-left:var(--ds-space-050,4px)}
 ._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
 ._19bvze3t{padding-left:var(--ds-space-0,0)}
 ._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
 ._1bsbviql{width:2rem}
 ._1e0c1txw{display:flex}
 ._1ul9146b{min-width:110px}
@@ -24,9 +26,11 @@
 ._ca0q1b66{padding-top:var(--ds-space-050,4px)}
 ._ca0qze3t{padding-top:var(--ds-space-0,0)}
 ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
 ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
 ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
 ._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
 ._u5f3ze3t{padding-right:var(--ds-space-0,0)}
 ._irr3108i:hover{background-color:var(--ds-surface-hovered,#f1f2f4)}
 ._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}

package/dist/es2019/components/Trigger.js

@@ -18,7 +18,9 @@ const styles = {
   transparentEnabledTrigger: "_1h6dmuej _bfhksm61 _irr3166n _1di61dty",
   opaqueEnabledTrigger: "_1h6dmuej _bfhkvuon _irr3108i _1di61ji5",
   disabledTrigger: "_1h6d13gt _bfhksyzs",
-  miniMode: "_2rkoglpi _1dqoglyw _1ul91tcg _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66"
+  miniMode: "_2rkoglpi _1dqoglyw _1ul91tcg _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66",
+  fullWidthSummaryViewReactionPickerTrigger: "_1bsb1osq _19bvu2gc _u5f3u2gc _n3tdu2gc",
+  fullWidth: "_1bsb1osq"
 };
 
 /**
@@ -26,6 +28,7 @@ const styles = {
  */
 export const RENDER_TOOLTIP_TRIGGER_TESTID = 'render-tooltip-trigger';
 export const RENDER_TRIGGER_BUTTON_TESTID = 'render-trigger-button';
+export const RENDER_TRIGGER_CONTAINER_TESTID = 'render-trigger-container';
 const i18n = defineMessages({
   addReaction: {
     id: 'reaction-picker-trigger.add.reaction.message',
@@ -54,19 +57,24 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
     showAddReactionText = false,
     subtleReactionsSummaryAndPicker = false,
     showRoundTrigger = false,
-    reactionPickerTriggerIcon
+    reactionPickerTriggerIcon,
+    reactionPickerTriggerText = formatMessage(i18n.addReaction),
+    fullWidthSummaryViewReactionPickerTrigger = false
   } = props;
   const handleMouseDown = (e, analyticsEvent) => {
     if (onClick && !disabled) {
       onClick(e, analyticsEvent);
     }
   };
-  return /*#__PURE__*/React.createElement(Tooltip, {
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: cx(fullWidthSummaryViewReactionPickerTrigger && styles.fullWidthSummaryViewReactionPickerTrigger),
+    testId: RENDER_TRIGGER_CONTAINER_TESTID
+  }, /*#__PURE__*/React.createElement(Tooltip, {
     testId: RENDER_TOOLTIP_TRIGGER_TESTID,
     content: tooltipContent
   }, /*#__PURE__*/React.createElement(Pressable, _extends({
     testId: RENDER_TRIGGER_BUTTON_TESTID,
-    xcss: cx(styles.trigger, subtleReactionsSummaryAndPicker && styles.subtleTrigger, showAddReactionText && styles.expandedTrigger, disabled ? styles.disabledTrigger : showOpaqueBackground ? styles.opaqueEnabledTrigger : styles.transparentEnabledTrigger, miniMode && styles.miniMode,
+    xcss: cx(styles.trigger, fullWidthSummaryViewReactionPickerTrigger && styles.fullWidth, subtleReactionsSummaryAndPicker && styles.subtleTrigger, showAddReactionText && styles.expandedTrigger, disabled ? styles.disabledTrigger : showOpaqueBackground ? styles.opaqueEnabledTrigger : styles.transparentEnabledTrigger, miniMode && styles.miniMode,
     // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
     fg('platform-component-visual-refresh') && styles.triggerStylesRefresh, showRoundTrigger && styles.roundTrigger),
     style: {
@@ -88,5 +96,5 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
     label: "Add reaction"
   }), showAddReactionText && /*#__PURE__*/React.createElement(Box, {
     xcss: cx(addReactionStyles.addReactionMessage)
-  }, formatMessage(i18n.addReaction))));
+  }, reactionPickerTriggerText))));
 });

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

package/dist/esm/components/ReactionPicker.js

@@ -66,6 +66,7 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
     _props$showRoundTrigg = props.showRoundTrigger,
     showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg,
     reactionPickerTriggerIcon = props.reactionPickerTriggerIcon,
+    reactionPickerTriggerText = props.reactionPickerTriggerText,
     reactionPickerPlacement = props.reactionPickerPlacement,
     reactionsPickerPreventOverflowOptions = props.reactionsPickerPreventOverflowOptions;
   var _useState = useState(null),
@@ -238,7 +239,8 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
         showAddReactionText: showAddReactionText,
         subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
         showRoundTrigger: showRoundTrigger,
-        reactionPickerTriggerIcon: reactionPickerTriggerIcon
+        reactionPickerTriggerIcon: reactionPickerTriggerIcon,
+        reactionPickerTriggerText: reactionPickerTriggerText
       })
     );
   }), settings.isOpen && /*#__PURE__*/React.createElement(PopperWrapper, {

package/dist/esm/components/ReactionSummaryButton.compiled.css

@@ -1,7 +1,6 @@
 ._19bvu2gc{padding-left:var(--ds-space-100,8px)}
 ._8hrz1nam{transform-origin:center center 0}
 ._ca0q1b66{padding-top:var(--ds-space-050,4px)}
-._ca0qv77o{padding-top:var(--ds-space-025,2px)}
 ._kqswh2mm{position:relative}
 ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
 ._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/esm/components/ReactionSummaryButton.js

@@ -14,7 +14,6 @@ import { cx } from '@compiled/react';
 var styles = {
   emoji: "_8hrz1nam",
   button: "_ca0q1b66 _u5f31b66 _n3td1b66 _19bvu2gc",
-  compactPadding: "_ca0qv77o",
   container: "_kqswh2mm"
 };
 /**
@@ -39,8 +38,6 @@ export var ReactionSummaryButton = /*#__PURE__*/forwardRef(function (_ref, ref)
     showOpaqueBackground = _ref$showOpaqueBackgr === void 0 ? false : _ref$showOpaqueBackgr,
     _ref$subtleReactionsS = _ref.subtleReactionsSummaryAndPicker,
     subtleReactionsSummaryAndPicker = _ref$subtleReactionsS === void 0 ? false : _ref$subtleReactionsS,
-    _ref$useCompactStyles = _ref.useCompactStyles,
-    useCompactStyles = _ref$useCompactStyles === void 0 ? false : _ref$useCompactStyles,
     _ref$useButtonAlignme = _ref.useButtonAlignmentStyling,
     useButtonAlignmentStyling = _ref$useButtonAlignme === void 0 ? false : _ref$useButtonAlignme;
   var intl = useIntl();
@@ -68,12 +65,11 @@ export var ReactionSummaryButton = /*#__PURE__*/forwardRef(function (_ref, ref)
     onClick: onClick,
     testId: RENDER_SUMMARY_BUTTON_TESTID,
     ariaLabel: intl.formatMessage(messages.summary),
-    useCompactStyles: useCompactStyles,
     showSubtleStyle: subtleReactionsSummaryAndPicker,
     showOpaqueBackground: showOpaqueBackground
   }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.050",
-    xcss: cx(styles.button, useCompactStyles && styles.compactPadding),
+    xcss: cx(styles.button),
     testId: "reaction-summary-wrapper"
   }, topReactions.map(function (reaction) {
     return /*#__PURE__*/React.createElement(Box, {
@@ -90,11 +86,11 @@ export var ReactionSummaryButton = /*#__PURE__*/forwardRef(function (_ref, ref)
         id: reaction.emojiId,
         shortName: ''
       },
-      fitToHeight: useCompactStyles ? 12 : 16
+      fitToHeight: 16
     }));
   })), /*#__PURE__*/React.createElement(Counter, {
     value: totalReactionsCount,
-    useDarkerFont: useCompactStyles || useButtonAlignmentStyling,
-    useUpdatedStyles: !useCompactStyles && useButtonAlignmentStyling
+    useDarkerFont: useButtonAlignmentStyling,
+    useUpdatedStyles: useButtonAlignmentStyling
   })));
 });

package/dist/esm/components/ReactionSummaryView.js

@@ -9,7 +9,7 @@ import Popup from '@atlaskit/popup';
 import { Reaction } from './Reaction';
 import { ReactionSummaryViewEmojiPicker } from './ReactionSummaryViewEmojiPicker';
 import { ReactionSummaryButton } from './ReactionSummaryButton';
-import { Inline } from '@atlaskit/primitives/compiled';
+import { Box, Flex, Inline } from '@atlaskit/primitives/compiled';
 var styles = {
   summaryPopup: "_ca0q1b66 _u5f3u2gc _n3tdu2gc _19bvu2gc _p12foiq5"
 };
@@ -46,7 +46,8 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
     tooltipContent = _ref.tooltipContent,
     reactionPickerTriggerIcon = _ref.reactionPickerTriggerIcon,
     onOpen = _ref.onOpen,
-    useButtonAlignmentStyling = _ref.useButtonAlignmentStyling;
+    useButtonAlignmentStyling = _ref.useButtonAlignmentStyling,
+    reactionPickerTriggerText = _ref.reactionPickerTriggerText;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isSummaryPopupOpen = _useState2[0],
@@ -60,9 +61,10 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
   return /*#__PURE__*/React.createElement(Popup, {
     placement: placement,
     content: function content() {
-      return /*#__PURE__*/React.createElement(Inline, {
+      return /*#__PURE__*/React.createElement(Box, {
+        testId: RENDER_SUMMARY_VIEW_POPUP_TESTID
+      }, /*#__PURE__*/React.createElement(Inline, {
         xcss: styles.summaryPopup,
-        testId: RENDER_SUMMARY_VIEW_POPUP_TESTID,
         space: "space.025",
         shouldWrap: true,
         alignBlock: "center"
@@ -80,15 +82,18 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
           handleOpenReactionsDialog: handleOpenReactionsDialog,
           isViewOnly: isViewOnly
         });
-      }), allowSelectFromSummaryView && /*#__PURE__*/React.createElement(ReactionSummaryViewEmojiPicker, {
+      })), allowSelectFromSummaryView && /*#__PURE__*/React.createElement(Flex, {
+        justifyContent: "center"
+      }, /*#__PURE__*/React.createElement(ReactionSummaryViewEmojiPicker, {
         emojiProvider: emojiProvider,
         disabled: disabled,
         onSelection: onSelection,
         emojiPickerSize: emojiPickerSize,
         tooltipContent: tooltipContent,
         reactionPickerTriggerIcon: reactionPickerTriggerIcon,
+        reactionPickerTriggerText: reactionPickerTriggerText,
         onOpen: onOpen
-      }));
+      })));
     },
     isOpen: isSummaryPopupOpen,
     onClose: handlePopupClose,
@@ -99,7 +104,6 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
         onClick: handleSummaryClick,
         showOpaqueBackground: showOpaqueBackground,
         subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
-        useCompactStyles: allowSelectFromSummaryView,
         useButtonAlignmentStyling: useButtonAlignmentStyling
       }));
     }

package/dist/esm/components/ReactionSummaryViewEmojiPicker.js

@@ -12,7 +12,8 @@ export var ReactionSummaryViewEmojiPicker = function ReactionSummaryViewEmojiPic
     disabled = _ref.disabled,
     reactionPickerTriggerIcon = _ref.reactionPickerTriggerIcon,
     tooltipContent = _ref.tooltipContent,
-    onOpen = _ref.onOpen;
+    onOpen = _ref.onOpen,
+    reactionPickerTriggerText = _ref.reactionPickerTriggerText;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
@@ -76,9 +77,10 @@ export var ReactionSummaryViewEmojiPicker = function ReactionSummaryViewEmojiPic
         disabled: disabled,
         reactionPickerTriggerIcon: reactionPickerTriggerIcon,
         tooltipContent: tooltipContent,
-        showAddReactionText: false,
-        subtleReactionsSummaryAndPicker: true,
-        onClick: handleClick
+        onClick: handleClick,
+        showAddReactionText: true,
+        reactionPickerTriggerText: reactionPickerTriggerText,
+        fullWidthSummaryViewReactionPickerTrigger: true
       }));
     }
   });

package/dist/esm/components/Reactions.js

@@ -125,12 +125,13 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     _ref$noRelativeContai = _ref.noRelativeContainer,
     noRelativeContainer = _ref$noRelativeContai === void 0 ? false : _ref$noRelativeContai,
     showSubtleDefaultReactions = _ref.showSubtleDefaultReactions,
-    reactionPickerTriggerToolipContent = _ref.reactionPickerTriggerToolipContent,
+    reactionPickerTriggerTooltipContent = _ref.reactionPickerTriggerTooltipContent,
     reactionPickerTriggerIcon = _ref.reactionPickerTriggerIcon,
     _ref$allowSelectFromS = _ref.allowSelectFromSummaryView,
     allowSelectFromSummaryView = _ref$allowSelectFromS === void 0 ? false : _ref$allowSelectFromS,
     _ref$useButtonAlignme = _ref.useButtonAlignmentStyling,
-    useButtonAlignmentStyling = _ref$useButtonAlignme === void 0 ? false : _ref$useButtonAlignme;
+    useButtonAlignmentStyling = _ref$useButtonAlignme === void 0 ? false : _ref$useButtonAlignme,
+    reactionPickerTriggerText = _ref.reactionPickerTriggerText;
   var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -308,10 +309,11 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     allowSelectFromSummaryView: allowSelectFromSummaryView,
     disabled: status !== ReactionStatus.ready,
     reactionPickerTriggerIcon: reactionPickerTriggerIcon,
-    tooltipContent: getTooltip(status, errorMessage, reactionPickerTriggerToolipContent),
+    tooltipContent: getTooltip(status, errorMessage, reactionPickerTriggerTooltipContent),
     emojiPickerSize: emojiPickerSize,
     onOpen: handlePickerOpen,
-    useButtonAlignmentStyling: useButtonAlignmentStyling
+    useButtonAlignmentStyling: useButtonAlignmentStyling,
+    reactionPickerTriggerText: reactionPickerTriggerText
   })) : memorizedReactions.map(function (reaction) {
     return /*#__PURE__*/React.createElement(Reaction, {
       key: reaction.emojiId,
@@ -328,7 +330,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       isViewOnly: isViewOnly,
       showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
     });
-  })), isViewOnly || allowSelectFromSummaryView ? null : /*#__PURE__*/React.createElement(ReactionPicker, {
+  })), isViewOnly || !onlyRenderPicker && shouldShowSummaryView && allowSelectFromSummaryView ? null : /*#__PURE__*/React.createElement(ReactionPicker, {
     emojiProvider: emojiProvider,
     allowAllEmojis: allowAllEmojis,
     pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
@@ -337,13 +339,14 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     onOpen: handlePickerOpen,
     onCancel: handleOnCancel,
     onShowMore: handleOnMore,
-    tooltipContent: getTooltip(status, errorMessage, reactionPickerTriggerToolipContent),
+    tooltipContent: getTooltip(status, errorMessage, reactionPickerTriggerTooltipContent),
     emojiPickerSize: emojiPickerSize,
     miniMode: miniMode,
     showOpaqueBackground: showOpaqueBackground,
     showAddReactionText: showAddReactionText,
     subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
     reactionPickerTriggerIcon: reactionPickerTriggerIcon,
+    reactionPickerTriggerText: reactionPickerTriggerText,
     className: ax(["_1e0c1o8l _19pk1b66"])
   }), /*#__PURE__*/React.createElement(ModalTransition, null, !!selectedEmojiId && /*#__PURE__*/React.createElement(UFOSegment, {
     name: "reactions-dialog"

package/dist/esm/components/Trigger.compiled.css

@@ -8,8 +8,10 @@
 ._1h6dmuej{border-color:var(--ds-border,#091e4224)}
 ._18u01b66{margin-left:var(--ds-space-050,4px)}
 ._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
 ._19bvze3t{padding-left:var(--ds-space-0,0)}
 ._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
 ._1bsbviql{width:2rem}
 ._1e0c1txw{display:flex}
 ._1ul9146b{min-width:110px}
@@ -24,9 +26,11 @@
 ._ca0q1b66{padding-top:var(--ds-space-050,4px)}
 ._ca0qze3t{padding-top:var(--ds-space-0,0)}
 ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
 ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
 ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
 ._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
 ._u5f3ze3t{padding-right:var(--ds-space-0,0)}
 ._irr3108i:hover{background-color:var(--ds-surface-hovered,#f1f2f4)}
 ._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}

package/dist/esm/components/Trigger.js

@@ -18,7 +18,9 @@ var styles = {
   transparentEnabledTrigger: "_1h6dmuej _bfhksm61 _irr3166n _1di61dty",
   opaqueEnabledTrigger: "_1h6dmuej _bfhkvuon _irr3108i _1di61ji5",
   disabledTrigger: "_1h6d13gt _bfhksyzs",
-  miniMode: "_2rkoglpi _1dqoglyw _1ul91tcg _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66"
+  miniMode: "_2rkoglpi _1dqoglyw _1ul91tcg _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66",
+  fullWidthSummaryViewReactionPickerTrigger: "_1bsb1osq _19bvu2gc _u5f3u2gc _n3tdu2gc",
+  fullWidth: "_1bsb1osq"
 };
 
 /**
@@ -26,6 +28,7 @@ var styles = {
  */
 export var RENDER_TOOLTIP_TRIGGER_TESTID = 'render-tooltip-trigger';
 export var RENDER_TRIGGER_BUTTON_TESTID = 'render-trigger-button';
+export var RENDER_TRIGGER_CONTAINER_TESTID = 'render-trigger-container';
 var i18n = defineMessages({
   addReaction: {
     id: 'reaction-picker-trigger.add.reaction.message',
@@ -58,18 +61,25 @@ export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
     subtleReactionsSummaryAndPicker = _props$subtleReaction === void 0 ? false : _props$subtleReaction,
     _props$showRoundTrigg = props.showRoundTrigger,
     showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg,
-    reactionPickerTriggerIcon = props.reactionPickerTriggerIcon;
+    reactionPickerTriggerIcon = props.reactionPickerTriggerIcon,
+    _props$reactionPicker = props.reactionPickerTriggerText,
+    reactionPickerTriggerText = _props$reactionPicker === void 0 ? formatMessage(i18n.addReaction) : _props$reactionPicker,
+    _props$fullWidthSumma = props.fullWidthSummaryViewReactionPickerTrigger,
+    fullWidthSummaryViewReactionPickerTrigger = _props$fullWidthSumma === void 0 ? false : _props$fullWidthSumma;
   var handleMouseDown = function handleMouseDown(e, analyticsEvent) {
     if (onClick && !disabled) {
       onClick(e, analyticsEvent);
     }
   };
-  return /*#__PURE__*/React.createElement(Tooltip, {
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: cx(fullWidthSummaryViewReactionPickerTrigger && styles.fullWidthSummaryViewReactionPickerTrigger),
+    testId: RENDER_TRIGGER_CONTAINER_TESTID
+  }, /*#__PURE__*/React.createElement(Tooltip, {
     testId: RENDER_TOOLTIP_TRIGGER_TESTID,
     content: tooltipContent
   }, /*#__PURE__*/React.createElement(Pressable, _extends({
     testId: RENDER_TRIGGER_BUTTON_TESTID,
-    xcss: cx(styles.trigger, subtleReactionsSummaryAndPicker && styles.subtleTrigger, showAddReactionText && styles.expandedTrigger, disabled ? styles.disabledTrigger : showOpaqueBackground ? styles.opaqueEnabledTrigger : styles.transparentEnabledTrigger, miniMode && styles.miniMode,
+    xcss: cx(styles.trigger, fullWidthSummaryViewReactionPickerTrigger && styles.fullWidth, subtleReactionsSummaryAndPicker && styles.subtleTrigger, showAddReactionText && styles.expandedTrigger, disabled ? styles.disabledTrigger : showOpaqueBackground ? styles.opaqueEnabledTrigger : styles.transparentEnabledTrigger, miniMode && styles.miniMode,
     // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
     fg('platform-component-visual-refresh') && styles.triggerStylesRefresh, showRoundTrigger && styles.roundTrigger),
     style: {
@@ -91,5 +101,5 @@ export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
     label: "Add reaction"
   }), showAddReactionText && /*#__PURE__*/React.createElement(Box, {
     xcss: cx(addReactionStyles.addReactionMessage)
-  }, formatMessage(i18n.addReaction))));
+  }, reactionPickerTriggerText))));
 });

package/dist/types/components/ReactionPicker.d.ts

@@ -84,6 +84,10 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
      * Optional prop for controlling icon inside Trigger
      */
     reactionPickerTriggerIcon?: React.ReactNode;
+    /**
+     * Optional prop for controlling text of the trigger button
+     */
+    reactionPickerTriggerText?: string;
 }
 /**
  * Picker component for adding reactions

package/dist/types/components/ReactionSummaryButton.d.ts

@@ -17,10 +17,6 @@ interface ReactionSummaryButtonProps extends Pick<ReactionsProps, 'emojiProvider
      * Optional prop for applying subtle styling to reaction summary button
      */
     subtleReactionsSummaryAndPicker?: boolean;
-    /**
-     * Optional prop to apply compact styling
-     */
-    useCompactStyles?: boolean;
 }
 /**
  * Test id for summary reaction wrapper button

package/dist/types/components/ReactionSummaryView.d.ts

@@ -7,7 +7,7 @@ import { type TriggerProps } from './Trigger';
  * Test id for the Reactions summary view popup
  */
 export declare const RENDER_SUMMARY_VIEW_POPUP_TESTID = "render-summary-view-popup";
-interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider' | 'reactions' | 'flash' | 'particleEffectByEmoji' | 'allowUserDialog' | 'allowSelectFromSummaryView' | 'emojiPickerSize' | 'useButtonAlignmentStyling'>, Pick<TriggerProps, 'tooltipContent' | 'reactionPickerTriggerIcon' | 'disabled'> {
+interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider' | 'reactions' | 'flash' | 'particleEffectByEmoji' | 'allowUserDialog' | 'allowSelectFromSummaryView' | 'emojiPickerSize' | 'useButtonAlignmentStyling' | 'reactionPickerTriggerText'>, Pick<TriggerProps, 'tooltipContent' | 'reactionPickerTriggerIcon' | 'disabled'> {
     /**
      * Optional prop to change the placement of the summary popup reaction list
      */
@@ -54,5 +54,5 @@ interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider'
      */
     onOpen?: () => void;
 }
-export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, allowUserDialog, handleOpenReactionsDialog, isViewOnly, allowSelectFromSummaryView, disabled, emojiPickerSize, onSelection, tooltipContent, reactionPickerTriggerIcon, onOpen, useButtonAlignmentStyling, }: ReactionSummaryViewProps) => JSX.Element;
+export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, allowUserDialog, handleOpenReactionsDialog, isViewOnly, allowSelectFromSummaryView, disabled, emojiPickerSize, onSelection, tooltipContent, reactionPickerTriggerIcon, onOpen, useButtonAlignmentStyling, reactionPickerTriggerText, }: ReactionSummaryViewProps) => JSX.Element;
 export {};

package/dist/types/components/ReactionSummaryViewEmojiPicker.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 import { type ReactionPickerProps } from './ReactionPicker';
 interface ReactionSummaryViewEmojiPickerProps extends ReactionPickerProps {
 }
-export declare const ReactionSummaryViewEmojiPicker: ({ emojiProvider, onSelection, emojiPickerSize, disabled, reactionPickerTriggerIcon, tooltipContent, onOpen, }: ReactionSummaryViewEmojiPickerProps) => React.JSX.Element;
+export declare const ReactionSummaryViewEmojiPicker: ({ emojiProvider, onSelection, emojiPickerSize, disabled, reactionPickerTriggerIcon, tooltipContent, onOpen, reactionPickerTriggerText, }: ReactionSummaryViewEmojiPickerProps) => React.JSX.Element;
 export {};

package/dist/types/components/Reactions.d.ts

@@ -152,11 +152,15 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
     /**
      * Optional prop for controlling tooltip content of the trigger button
      */
-    reactionPickerTriggerToolipContent?: string;
+    reactionPickerTriggerTooltipContent?: string;
     /**
      * Optional prop for controlling if we can select emojis and display UI via summary view picker
      */
     allowSelectFromSummaryView?: boolean;
+    /**
+     * Optional prop for controlling text of the trigger button
+     */
+    reactionPickerTriggerText?: string;
 }
 export interface OpenReactionsDialogOptions {
     emojiId?: string;
@@ -169,4 +173,4 @@ export declare function getTooltip(status: ReactionStatus, errorMessage?: string
 /**
  * Renders list of reactions
  */
-export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, isViewOnly, noWrap, noRelativeContainer, showSubtleDefaultReactions, reactionPickerTriggerToolipContent, reactionPickerTriggerIcon, allowSelectFromSummaryView, useButtonAlignmentStyling, }: ReactionsProps) => JSX.Element>;
+export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, isViewOnly, noWrap, noRelativeContainer, showSubtleDefaultReactions, reactionPickerTriggerTooltipContent, reactionPickerTriggerIcon, allowSelectFromSummaryView, useButtonAlignmentStyling, reactionPickerTriggerText, }: ReactionsProps) => JSX.Element>;

package/dist/types/components/Trigger.d.ts

@@ -10,6 +10,7 @@ import React from 'react';
  */
 export declare const RENDER_TOOLTIP_TRIGGER_TESTID = "render-tooltip-trigger";
 export declare const RENDER_TRIGGER_BUTTON_TESTID = "render-trigger-button";
+export declare const RENDER_TRIGGER_CONTAINER_TESTID = "render-trigger-container";
 export interface TriggerProps {
     /**
      * Optional Event handler when the button to open the picker is clicked
@@ -57,6 +58,14 @@ export interface TriggerProps {
      * Optional prop for controlling if reaction picker is opened
      */
     isSelected?: boolean;
+    /**
+     * Optional prop for controlling text inside Trigger
+     */
+    reactionPickerTriggerText?: string;
+    /**
+     * Optional prop for controlling if the summary view reaction picker trigger should be full width
+     */
+    fullWidthSummaryViewReactionPickerTrigger?: boolean;
 }
 /**
  * Render an emoji button to open the reactions select picker

package/dist/types-ts4.5/components/ReactionPicker.d.ts

@@ -84,6 +84,10 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
      * Optional prop for controlling icon inside Trigger
      */
     reactionPickerTriggerIcon?: React.ReactNode;
+    /**
+     * Optional prop for controlling text of the trigger button
+     */
+    reactionPickerTriggerText?: string;
 }
 /**
  * Picker component for adding reactions

package/dist/types-ts4.5/components/ReactionSummaryButton.d.ts

@@ -17,10 +17,6 @@ interface ReactionSummaryButtonProps extends Pick<ReactionsProps, 'emojiProvider
      * Optional prop for applying subtle styling to reaction summary button
      */
     subtleReactionsSummaryAndPicker?: boolean;
-    /**
-     * Optional prop to apply compact styling
-     */
-    useCompactStyles?: boolean;
 }
 /**
  * Test id for summary reaction wrapper button

package/dist/types-ts4.5/components/ReactionSummaryView.d.ts

@@ -7,7 +7,7 @@ import { type TriggerProps } from './Trigger';
  * Test id for the Reactions summary view popup
  */
 export declare const RENDER_SUMMARY_VIEW_POPUP_TESTID = "render-summary-view-popup";
-interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider' | 'reactions' | 'flash' | 'particleEffectByEmoji' | 'allowUserDialog' | 'allowSelectFromSummaryView' | 'emojiPickerSize' | 'useButtonAlignmentStyling'>, Pick<TriggerProps, 'tooltipContent' | 'reactionPickerTriggerIcon' | 'disabled'> {
+interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider' | 'reactions' | 'flash' | 'particleEffectByEmoji' | 'allowUserDialog' | 'allowSelectFromSummaryView' | 'emojiPickerSize' | 'useButtonAlignmentStyling' | 'reactionPickerTriggerText'>, Pick<TriggerProps, 'tooltipContent' | 'reactionPickerTriggerIcon' | 'disabled'> {
     /**
      * Optional prop to change the placement of the summary popup reaction list
      */
@@ -54,5 +54,5 @@ interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider'
      */
     onOpen?: () => void;
 }
-export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, allowUserDialog, handleOpenReactionsDialog, isViewOnly, allowSelectFromSummaryView, disabled, emojiPickerSize, onSelection, tooltipContent, reactionPickerTriggerIcon, onOpen, useButtonAlignmentStyling, }: ReactionSummaryViewProps) => JSX.Element;
+export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, allowUserDialog, handleOpenReactionsDialog, isViewOnly, allowSelectFromSummaryView, disabled, emojiPickerSize, onSelection, tooltipContent, reactionPickerTriggerIcon, onOpen, useButtonAlignmentStyling, reactionPickerTriggerText, }: ReactionSummaryViewProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/components/ReactionSummaryViewEmojiPicker.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 import { type ReactionPickerProps } from './ReactionPicker';
 interface ReactionSummaryViewEmojiPickerProps extends ReactionPickerProps {
 }
-export declare const ReactionSummaryViewEmojiPicker: ({ emojiProvider, onSelection, emojiPickerSize, disabled, reactionPickerTriggerIcon, tooltipContent, onOpen, }: ReactionSummaryViewEmojiPickerProps) => React.JSX.Element;
+export declare const ReactionSummaryViewEmojiPicker: ({ emojiProvider, onSelection, emojiPickerSize, disabled, reactionPickerTriggerIcon, tooltipContent, onOpen, reactionPickerTriggerText, }: ReactionSummaryViewEmojiPickerProps) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/components/Reactions.d.ts

@@ -152,11 +152,15 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
     /**
      * Optional prop for controlling tooltip content of the trigger button
      */
-    reactionPickerTriggerToolipContent?: string;
+    reactionPickerTriggerTooltipContent?: string;
     /**
      * Optional prop for controlling if we can select emojis and display UI via summary view picker
      */
     allowSelectFromSummaryView?: boolean;
+    /**
+     * Optional prop for controlling text of the trigger button
+     */
+    reactionPickerTriggerText?: string;
 }
 export interface OpenReactionsDialogOptions {
     emojiId?: string;
@@ -169,4 +173,4 @@ export declare function getTooltip(status: ReactionStatus, errorMessage?: string
 /**
  * Renders list of reactions
  */
-export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, isViewOnly, noWrap, noRelativeContainer, showSubtleDefaultReactions, reactionPickerTriggerToolipContent, reactionPickerTriggerIcon, allowSelectFromSummaryView, useButtonAlignmentStyling, }: ReactionsProps) => JSX.Element>;
+export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, isViewOnly, noWrap, noRelativeContainer, showSubtleDefaultReactions, reactionPickerTriggerTooltipContent, reactionPickerTriggerIcon, allowSelectFromSummaryView, useButtonAlignmentStyling, reactionPickerTriggerText, }: ReactionsProps) => JSX.Element>;

package/dist/types-ts4.5/components/Trigger.d.ts

@@ -10,6 +10,7 @@ import React from 'react';
  */
 export declare const RENDER_TOOLTIP_TRIGGER_TESTID = "render-tooltip-trigger";
 export declare const RENDER_TRIGGER_BUTTON_TESTID = "render-trigger-button";
+export declare const RENDER_TRIGGER_CONTAINER_TESTID = "render-trigger-container";
 export interface TriggerProps {
     /**
      * Optional Event handler when the button to open the picker is clicked
@@ -57,6 +58,14 @@ export interface TriggerProps {
      * Optional prop for controlling if reaction picker is opened
      */
     isSelected?: boolean;
+    /**
+     * Optional prop for controlling text inside Trigger
+     */
+    reactionPickerTriggerText?: string;
+    /**
+     * Optional prop for controlling if the summary view reaction picker trigger should be full width
+     */
+    fullWidthSummaryViewReactionPickerTrigger?: boolean;
 }
 /**
  * Render an emoji button to open the reactions select picker

package/package.json

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