@atlaskit/reactions 30.0.7 → 31.0.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @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
+
+- [#138792](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/138792)
+  [`aec039377f39e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/aec039377f39e) -
+  tidy up feature flag of compiled css migration
+
 ## 30.0.7
 
 ### 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.7";
+var packageVersion = "31.0.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/cjs/components/{compiled/Counter.js → Counter.js}

@@ -11,7 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _motion = require("@atlaskit/motion");
-var _utils = require("../../shared/utils");
+var _utils = require("../shared/utils");
 var _colors = require("@atlaskit/theme/colors");
 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; }

package/dist/cjs/components/{compiled/EmojiButton.js → EmojiButton.js}

@@ -11,8 +11,8 @@ var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
 var _reactIntlNext = require("react-intl-next");
 var _emoji = require("@atlaskit/emoji");
-var _i18n = require("../../shared/i18n");
-var _utils = require("../../shared/utils");
+var _i18n = require("../shared/i18n");
+var _utils = require("../shared/utils");
 var _compiled = require("@atlaskit/primitives/compiled");
 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; }

package/dist/cjs/components/{compiled/Reaction.js → Reaction.js}

@@ -17,12 +17,12 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _emoji = require("@atlaskit/emoji");
-var _analytics = require("../../analytics");
-var _Counter = require("../Counter");
+var _analytics = require("../analytics");
+var _Counter = require("./Counter");
 var _ReactionParticleEffect = require("./ReactionParticleEffect");
 var _ReactionTooltip = require("./ReactionTooltip");
-var _i18n = require("../../shared/i18n");
-var _utils = require("../../shared/utils");
+var _i18n = require("../shared/i18n");
+var _utils = require("../shared/utils");
 var _ReactionButton = require("./ReactionButton");
 var _StaticReaction = require("./StaticReaction");
 var _compiled = require("@atlaskit/primitives/compiled");

package/dist/cjs/components/{compiled/ReactionPicker.js → ReactionPicker.js}

@@ -16,14 +16,14 @@ var _reactIntlNext = require("react-intl-next");
 var _picker = require("@atlaskit/emoji/picker");
 var _popper = require("@atlaskit/popper");
 var _constants = require("@atlaskit/theme/constants");
-var _useCloseManager = require("../../hooks/useCloseManager");
-var _useFocusTrap = require("../../hooks/useFocusTrap");
-var _i18n = require("../../shared/i18n");
-var _ufo = require("../../ufo");
+var _useCloseManager = require("../hooks/useCloseManager");
+var _useFocusTrap = require("../hooks/useFocusTrap");
+var _i18n = require("../shared/i18n");
+var _ufo = require("../ufo");
 var _Selector = require("./Selector");
 var _Trigger = require("./Trigger");
 var _colors = require("@atlaskit/theme/colors");
-var _RepositionOnUpdate = require("../ReactionPicker/RepositionOnUpdate");
+var _RepositionOnUpdate = require("./RepositionOnUpdate");
 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; }
 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; }
@@ -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/{esm/components/compiled → 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/{compiled/ReactionSummaryButton.js → ReactionSummaryButton.js}

@@ -14,7 +14,7 @@ var _runtime = require("@compiled/react/runtime");
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _reactIntlNext = require("react-intl-next");
 var _emoji = require("@atlaskit/emoji");
-var _i18n = require("../../shared/i18n");
+var _i18n = require("../shared/i18n");
 var _Counter = require("./Counter");
 var _ReactionButton = require("./ReactionButton");
 var _compiled = require("@atlaskit/primitives/compiled");
@@ -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/{compiled/ReactionSummaryView.js → ReactionSummaryView.js}

@@ -15,7 +15,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 var _Reaction = require("./Reaction");
-var _ReactionSummaryViewEmojiPicker = require("../ReactionSummary/ReactionSummaryViewEmojiPicker");
+var _ReactionSummaryViewEmojiPicker = require("./ReactionSummaryViewEmojiPicker");
 var _ReactionSummaryButton = require("./ReactionSummaryButton");
 var _compiled = require("@atlaskit/primitives/compiled");
 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); }
@@ -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/{ReactionSummary/ReactionSummaryViewEmojiPicker.js → ReactionSummaryViewEmojiPicker.js}

@@ -11,8 +11,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _picker = require("@atlaskit/emoji/picker");
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
-var _ufo = require("../../ufo");
-var _Trigger = require("../Trigger");
+var _ufo = require("../ufo");
+var _Trigger = require("./Trigger");
 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; }
 var ReactionSummaryViewEmojiPicker = exports.ReactionSummaryViewEmojiPicker = function ReactionSummaryViewEmojiPicker(_ref) {
@@ -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/{compiled/ReactionTooltip.js → ReactionTooltip.js}

@@ -12,8 +12,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireDefault(require("react"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _reactIntlNext = require("react-intl-next");
-var _constants = require("../../shared/constants");
-var _i18n = require("../../shared/i18n");
+var _constants = require("../shared/constants");
+var _i18n = require("../shared/i18n");
 var _colors = require("@atlaskit/theme/colors");
 var verticalMargin = exports.verticalMargin = 5;
 var tooltipStyle = null;

package/dist/cjs/components/{compiled/Reactions.js → Reactions.js}

@@ -19,11 +19,11 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _modalDialog = require("@atlaskit/modal-dialog");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _segment = _interopRequireDefault(require("@atlaskit/react-ufo/segment"));
-var _analytics = require("../../analytics");
-var _constants = require("../../shared/constants");
-var _i18n = require("../../shared/i18n");
-var _types = require("../../types");
-var _ufo = require("../../ufo");
+var _analytics = require("../analytics");
+var _constants = require("../shared/constants");
+var _i18n = require("../shared/i18n");
+var _types = require("../types");
+var _ufo = require("../ufo");
 var _Reaction = require("./Reaction");
 var _ReactionsDialog = require("./ReactionsDialog");
 var _ReactionPicker = require("./ReactionPicker");
@@ -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/{compiled/ReactionsDialog.js → ReactionsDialog.js}

@@ -15,7 +15,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _tabs = _interopRequireDefault(require("@atlaskit/tabs"));
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
 var _compiled = require("@atlaskit/primitives/compiled");
-var _constants = require("../../shared/constants");
+var _constants = require("../shared/constants");
 var _ReactionsList = require("./ReactionsList");
 var _ReactionsDialogHeader = require("./ReactionsDialogHeader");
 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); }

package/dist/cjs/components/{compiled/ReactionsDialogHeader.js → ReactionsDialogHeader.js}

@@ -28,7 +28,7 @@ var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/utility/chevr
 var _close = _interopRequireDefault(require("@atlaskit/icon/core/close"));
 var _element = require("@atlaskit/emoji/element");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _i18n = require("../../shared/i18n");
+var _i18n = require("../shared/i18n");
 var _Counter = require("./Counter");
 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; }

package/dist/cjs/components/{compiled/ReactionsDialogTrigger.js → ReactionsDialogTrigger.js}

@@ -15,7 +15,7 @@ var _react2 = require("@compiled/react");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
 var _reactIntlNext = require("react-intl-next");
-var _i18n = require("../../shared/i18n");
+var _i18n = require("../shared/i18n");
 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; }
 var styles = {

package/dist/cjs/components/{compiled/Selector.js → Selector.js}

@@ -12,9 +12,9 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-var _constants = require("../../shared/constants");
+var _constants = require("../shared/constants");
 var _EmojiButton = require("./EmojiButton");
-var _ShowMore = require("../ShowMore");
+var _ShowMore = require("./ShowMore");
 var _compiled = require("@atlaskit/primitives/compiled");
 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; }

package/dist/cjs/components/{ShowMore/ShowMore.js → ShowMore.js}

@@ -10,7 +10,7 @@ var _reactIntlNext = require("react-intl-next");
 var _new = require("@atlaskit/button/new");
 var _showMoreHorizontalEditorMore = _interopRequireDefault(require("@atlaskit/icon/core/migration/show-more-horizontal--editor-more"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-var _i18n = require("../../shared/i18n");
+var _i18n = require("../shared/i18n");
 /**
  * Test id for wrapper button
  */

package/dist/{esm/components/compiled → 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/{compiled/Trigger.js → 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: {
@@ -85,7 +95,9 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react2.default.forwardRef(function
     },
     onClick: handleMouseDown,
     isDisabled: disabled,
-    ref: ref
+    ref: ref,
+    "data-subtle": subtleReactionsSummaryAndPicker,
+    "data-mini-mode": miniMode
   }, ariaAttributes), !!reactionPickerTriggerIcon ? reactionPickerTriggerIcon :
   /*#__PURE__*/
   // TODO: https://product-fabric.atlassian.net/browse/DSP-21007
@@ -96,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/cjs/components/index.js

@@ -37,4 +37,4 @@ var _Reaction = require("./Reaction");
 var _ReactionPicker = require("./ReactionPicker");
 var _Reactions = require("./Reactions");
 var _UfoErrorBoundary = require("./UfoErrorBoundary");
-var _ReactionsDialog = require("./ReactionDialog/ReactionsDialog");
+var _ReactionsDialog = require("./ReactionsDialog");

package/dist/cjs/containers/ConnectedReactionPicker/ConnectedReactionPicker.js

@@ -12,9 +12,6 @@ var _react = _interopRequireDefault(require("react"));
 var _components = require("../../components");
 var _ufo = require("../../ufo");
 var _ReactionPicker = require("../../components/ReactionPicker");
-var _ReactionPicker2 = require("../../components/compiled/ReactionPicker");
-var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
-var ReactionPicker = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_css_migrate_reactions', _ReactionPicker2.ReactionPicker, _ReactionPicker.ReactionPicker);
 /**
  * Reaction Picker component
  */
@@ -46,7 +43,7 @@ var ConnectedReactionPicker = exports.ConnectedReactionPicker = function Connect
   };
   return /*#__PURE__*/_react.default.createElement(_components.UfoErrorBoundary, {
     experiences: [_ufo.PickerRender]
-  }, /*#__PURE__*/_react.default.createElement(ReactionPicker, (0, _extends2.default)({}, props, {
+  }, /*#__PURE__*/_react.default.createElement(_ReactionPicker.ReactionPicker, (0, _extends2.default)({}, props, {
     onSelection: onSelection
   })));
 };

package/dist/cjs/containers/ConnectedReactionsView/ConnectedReactionsView.js

@@ -16,10 +16,8 @@ var _analyticsNamespacedContext = require("@atlaskit/analytics-namespaced-contex
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _components = require("../../components");
 var _Reactions = require("../../components/Reactions");
-var _Reactions2 = require("../../components/compiled/Reactions");
 var _store2 = require("../../store");
 var _types = require("../../types");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _excluded = ["ari", "containerAri", "store", "particleEffectByEmojiEnabled", "onReactionSuccess"];
 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; }
@@ -223,9 +221,7 @@ var ConnectedReactionsView = exports.ConnectedReactionsView = function Connected
     }
   }, /*#__PURE__*/_react.default.createElement(_components.UfoErrorBoundary, {
     experiences: experienceInstance.current ? [experienceInstance.current] : []
-  }, stateData && dispatchData && (0, _platformFeatureFlags.fg)('platform_editor_css_migrate_reactions') ? /*#__PURE__*/_react.default.createElement(_Reactions2.Reactions, (0, _extends2.default)({
+  }, stateData && dispatchData && /*#__PURE__*/_react.default.createElement(_Reactions.Reactions, (0, _extends2.default)({
     key: "".concat(containerAri, "|").concat(ari)
-  }, rest, dispatchData, stateData)) : null, stateData && dispatchData && !(0, _platformFeatureFlags.fg)('platform_editor_css_migrate_reactions') ? /*#__PURE__*/_react.default.createElement(_Reactions.Reactions, (0, _extends2.default)({
-    key: "".concat(containerAri, "|").concat(ari)
-  }, rest, dispatchData, stateData)) : null));
+  }, rest, dispatchData, stateData))));
 };