@atlaskit/reactions 31.19.1 → 32.0.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/reactions
 
+## 32.0.0
+
+### Major Changes
+
+- [#166079](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/166079)
+  [`938072fa984ec`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/938072fa984ec) -
+  [ux] Removes showRoundTrigger prop and related styling since it is no longer used
+
+## 31.20.0
+
+### Minor Changes
+
+- [#165300](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/165300)
+  [`14a650aa14dfb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/14a650aa14dfb) -
+  [ux] add new optional xcss prop on EmojiPlaceholder to allow custom background colors on the
+  loading skeletons for emojis. Changes the ReactionSummaryButton to use a lighter shade of grey.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 31.19.1
 
 ### Patch Changes

package/dist/cjs/analytics/index.js

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

package/dist/cjs/components/ReactionPicker.js

@@ -78,8 +78,6 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
     subtleReactionsSummaryAndPicker = _props$subtleReaction === void 0 ? false : _props$subtleReaction,
     _props$showAddReactio = props.showAddReactionText,
     showAddReactionText = _props$showAddReactio === void 0 ? false : _props$showAddReactio,
-    _props$showRoundTrigg = props.showRoundTrigger,
-    showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg,
     reactionPickerTriggerIcon = props.reactionPickerTriggerIcon,
     reactionPickerTriggerText = props.reactionPickerTriggerText,
     reactionPickerPlacement = props.reactionPickerPlacement,
@@ -120,7 +118,7 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
    */
   var wrapperRef = (0, _react.useRef)(null);
   var updatePopper = (0, _react.useRef)();
-  var popperPlacement = showRoundTrigger ? 'left' : reactionPickerPlacement || 'bottom-start';
+  var popperPlacement = reactionPickerPlacement || 'bottom-start';
   var popperModifiers = [
   /**
     Removing this applyStyle modifier as it throws client errors ref:
@@ -156,7 +154,7 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
        */
       showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0,
       /**
-       * Use left placement for popper - using value based on showRoundTrigger for now since it needs the left placement
+       * Use placement for popper based on reactionPickerPlacement prop
        */
       popperPlacement: popperPlacement
     }),
@@ -331,7 +329,6 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
         showOpaqueBackground: showOpaqueBackground,
         showAddReactionText: showAddReactionText,
         subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
-        showRoundTrigger: showRoundTrigger,
         reactionPickerTriggerIcon: reactionPickerTriggerIcon,
         reactionPickerTriggerText: reactionPickerTriggerText,
         isListItem: isListItem

package/dist/cjs/components/ReactionPickerNew.js

@@ -79,8 +79,6 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
     subtleReactionsSummaryAndPicker = _props$subtleReaction === void 0 ? false : _props$subtleReaction,
     _props$showAddReactio = props.showAddReactionText,
     showAddReactionText = _props$showAddReactio === void 0 ? false : _props$showAddReactio,
-    _props$showRoundTrigg = props.showRoundTrigger,
-    showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg,
     reactionPickerTriggerIcon = props.reactionPickerTriggerIcon,
     reactionPickerTriggerText = props.reactionPickerTriggerText,
     reactionPickerPlacement = props.reactionPickerPlacement,
@@ -121,7 +119,7 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
    */
   var wrapperRef = (0, _react.useRef)(null);
   var updatePopper = (0, _react.useRef)();
-  var popperPlacement = showRoundTrigger ? 'left' : reactionPickerPlacement || 'bottom-start';
+  var popperPlacement = reactionPickerPlacement || 'bottom-start';
   var popperModifiers = [
   /**
     Removing this applyStyle modifier as it throws client errors ref:
@@ -157,7 +155,7 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
        */
       showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0,
       /**
-       * Use left placement for popper - using value based on showRoundTrigger for now since it needs the left placement
+       * Use placement for popper based on reactionPickerPlacement prop
        */
       popperPlacement: popperPlacement
     }),
@@ -323,7 +321,6 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
         showOpaqueBackground: showOpaqueBackground,
         showAddReactionText: showAddReactionText,
         subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
-        showRoundTrigger: showRoundTrigger,
         reactionPickerTriggerIcon: reactionPickerTriggerIcon,
         reactionPickerTriggerText: reactionPickerTriggerText,
         isListItem: isListItem

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

@@ -3,6 +3,7 @@
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
 ._8hrz1nam{transform-origin:center center 0}
+._bfhkn82g{background-color:var(--ds-skeleton,#091e420f)}
 ._ca0q1b66{padding-top:var(--ds-space-050,4px)}
 ._kqswh2mm{position:relative}
 ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}

package/dist/cjs/components/ReactionSummaryButton.js

@@ -27,6 +27,7 @@ var styles = {
   button: "_ca0q1b66 _u5f31b66 _n3td1b66 _19bvu2gc",
   container: "_kqswh2mm",
   summaryButtonIconAfter: "_u5f3u2gc _1e0c1txw _4cvr1h6o _1bah1h6o",
+  emojiPlaceholderBackground: "_bfhkn82g",
   particleEffectContainer: "_u5f31ejb"
 };
 /**
@@ -115,7 +116,8 @@ var ReactionSummaryButton = exports.ReactionSummaryButton = /*#__PURE__*/(0, _re
         shortName: ''
       },
       fitToHeight: _constants.RESOURCED_EMOJI_COMPACT_HEIGHT,
-      optimisticImageURL: summaryGetOptimisticImageURL === null || summaryGetOptimisticImageURL === void 0 ? void 0 : summaryGetOptimisticImageURL(reaction.emojiId)
+      optimisticImageURL: summaryGetOptimisticImageURL === null || summaryGetOptimisticImageURL === void 0 ? void 0 : summaryGetOptimisticImageURL(reaction.emojiId),
+      placeholderXcss: styles.emojiPlaceholderBackground
     }));
   })), /*#__PURE__*/React.createElement(_Counter.Counter, {
     value: totalReactionsCount,

package/dist/cjs/components/ReactionSummaryView.js

@@ -105,9 +105,9 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
   }, []);
 
   /**
-      * Event callback when an emoji icon is selected
-      * @param item selected item
-      */
+   * Event callback when an emoji icon is selected
+   * @param item selected item
+   */
   var onEmojiSelected = (0, _react.useCallback)(function (item) {
     // no emoji was selected
     if (!item.id) {

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

@@ -13,14 +13,12 @@
 ._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}
 ._1ul91tcg{min-width:24px}
 ._1ul9zwfg{min-width:2pc}
 ._4cvr1h6o{align-items:center}
 ._4t3i1tcg{height:24px}
-._4t3iviql{height:2rem}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._bfhksyzs{background-color:var(--ds-background-disabled,#091e4208)}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}

package/dist/cjs/components/Trigger.js

@@ -21,7 +21,6 @@ var styles = {
   subtleTrigger: "_1dqoglyw _1ul91tcg",
   expandedTrigger: "_1ul9146b",
   triggerStylesRefresh: "_2rkoglpi",
-  roundTrigger: "_2rko14q2 _4t3iviql _1bsbviql",
   transparentEnabledTrigger: "_1h6dmuej _bfhksm61 _irr3166n _1di61dty",
   opaqueEnabledTrigger: "_1h6dmuej _bfhkvuon _irr3108i _1di61ji5",
   disabledTrigger: "_1h6d13gt _bfhksyzs",
@@ -69,8 +68,6 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react2.default.forwardRef(function
     showAddReactionText = _props$showAddReactio === void 0 ? false : _props$showAddReactio,
     _props$subtleReaction = props.subtleReactionsSummaryAndPicker,
     subtleReactionsSummaryAndPicker = _props$subtleReaction === void 0 ? false : _props$subtleReaction,
-    _props$showRoundTrigg = props.showRoundTrigger,
-    showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg,
     reactionPickerTriggerIcon = props.reactionPickerTriggerIcon,
     _props$reactionPicker = props.reactionPickerTriggerText,
     reactionPickerTriggerText = _props$reactionPicker === void 0 ? formatMessage(i18n.addReaction) : _props$reactionPicker,
@@ -90,7 +87,7 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react2.default.forwardRef(function
       testId: RENDER_TRIGGER_BUTTON_TESTID,
       xcss: (0, _react.cx)(styles.trigger, (fullWidthSummaryViewReactionPickerTrigger || fullWidthSelectorTrayReactionPickerTrigger) && 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),
+      (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && styles.triggerStylesRefresh),
       style: {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/design-system/use-tokens-typography
         lineHeight: '16px'

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

package/dist/es2019/components/ReactionPicker.js

@@ -59,7 +59,6 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     showOpaqueBackground = false,
     subtleReactionsSummaryAndPicker = false,
     showAddReactionText = false,
-    showRoundTrigger = false,
     reactionPickerTriggerIcon,
     reactionPickerTriggerText,
     reactionPickerPlacement,
@@ -80,7 +79,7 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
    */
   const wrapperRef = useRef(null);
   const updatePopper = useRef();
-  const popperPlacement = showRoundTrigger ? 'left' : reactionPickerPlacement || 'bottom-start';
+  const popperPlacement = reactionPickerPlacement || 'bottom-start';
   const popperModifiers = [
   /**
     Removing this applyStyle modifier as it throws client errors ref:
@@ -117,7 +116,7 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
      */
     showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0,
     /**
-     * Use left placement for popper - using value based on showRoundTrigger for now since it needs the left placement
+     * Use placement for popper based on reactionPickerPlacement prop
      */
     popperPlacement
   });
@@ -288,7 +287,6 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     showOpaqueBackground: showOpaqueBackground,
     showAddReactionText: showAddReactionText,
     subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
-    showRoundTrigger: showRoundTrigger,
     reactionPickerTriggerIcon: reactionPickerTriggerIcon,
     reactionPickerTriggerText: reactionPickerTriggerText,
     isListItem: isListItem

package/dist/es2019/components/ReactionPickerNew.js

@@ -60,7 +60,6 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     showOpaqueBackground = false,
     subtleReactionsSummaryAndPicker = false,
     showAddReactionText = false,
-    showRoundTrigger = false,
     reactionPickerTriggerIcon,
     reactionPickerTriggerText,
     reactionPickerPlacement,
@@ -81,7 +80,7 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
    */
   const wrapperRef = useRef(null);
   const updatePopper = useRef();
-  const popperPlacement = showRoundTrigger ? 'left' : reactionPickerPlacement || 'bottom-start';
+  const popperPlacement = reactionPickerPlacement || 'bottom-start';
   const popperModifiers = [
   /**
     Removing this applyStyle modifier as it throws client errors ref:
@@ -118,7 +117,7 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
      */
     showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0,
     /**
-     * Use left placement for popper - using value based on showRoundTrigger for now since it needs the left placement
+     * Use placement for popper based on reactionPickerPlacement prop
      */
     popperPlacement
   });
@@ -282,7 +281,6 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     showOpaqueBackground: showOpaqueBackground,
     showAddReactionText: showAddReactionText,
     subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
-    showRoundTrigger: showRoundTrigger,
     reactionPickerTriggerIcon: reactionPickerTriggerIcon,
     reactionPickerTriggerText: reactionPickerTriggerText,
     isListItem: isListItem

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

@@ -3,6 +3,7 @@
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
 ._8hrz1nam{transform-origin:center center 0}
+._bfhkn82g{background-color:var(--ds-skeleton,#091e420f)}
 ._ca0q1b66{padding-top:var(--ds-space-050,4px)}
 ._kqswh2mm{position:relative}
 ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}

package/dist/es2019/components/ReactionSummaryButton.js

@@ -17,6 +17,7 @@ const styles = {
   button: "_ca0q1b66 _u5f31b66 _n3td1b66 _19bvu2gc",
   container: "_kqswh2mm",
   summaryButtonIconAfter: "_u5f3u2gc _1e0c1txw _4cvr1h6o _1bah1h6o",
+  emojiPlaceholderBackground: "_bfhkn82g",
   particleEffectContainer: "_u5f31ejb"
 };
 /**
@@ -96,7 +97,8 @@ export const ReactionSummaryButton = /*#__PURE__*/forwardRef(({
       shortName: ''
     },
     fitToHeight: RESOURCED_EMOJI_COMPACT_HEIGHT,
-    optimisticImageURL: summaryGetOptimisticImageURL === null || summaryGetOptimisticImageURL === void 0 ? void 0 : summaryGetOptimisticImageURL(reaction.emojiId)
+    optimisticImageURL: summaryGetOptimisticImageURL === null || summaryGetOptimisticImageURL === void 0 ? void 0 : summaryGetOptimisticImageURL(reaction.emojiId),
+    placeholderXcss: styles.emojiPlaceholderBackground
   })))), /*#__PURE__*/React.createElement(Counter, {
     value: totalReactionsCount,
     useDarkerFont: useButtonAlignmentStyling,

package/dist/es2019/components/ReactionSummaryView.js

@@ -72,9 +72,9 @@ export const ReactionSummaryView = ({
   }, []);
 
   /**
-      * Event callback when an emoji icon is selected
-      * @param item selected item
-      */
+   * Event callback when an emoji icon is selected
+   * @param item selected item
+   */
   const onEmojiSelected = useCallback(item => {
     // no emoji was selected
     if (!item.id) {

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

@@ -13,14 +13,12 @@
 ._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}
 ._1ul91tcg{min-width:24px}
 ._1ul9zwfg{min-width:2pc}
 ._4cvr1h6o{align-items:center}
 ._4t3i1tcg{height:24px}
-._4t3iviql{height:2rem}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._bfhksyzs{background-color:var(--ds-background-disabled,#091e4208)}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}

package/dist/es2019/components/Trigger.js

@@ -14,7 +14,6 @@ const styles = {
   subtleTrigger: "_1dqoglyw _1ul91tcg",
   expandedTrigger: "_1ul9146b",
   triggerStylesRefresh: "_2rkoglpi",
-  roundTrigger: "_2rko14q2 _4t3iviql _1bsbviql",
   transparentEnabledTrigger: "_1h6dmuej _bfhksm61 _irr3166n _1di61dty",
   opaqueEnabledTrigger: "_1h6dmuej _bfhkvuon _irr3108i _1di61ji5",
   disabledTrigger: "_1h6d13gt _bfhksyzs",
@@ -59,7 +58,6 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
     showOpaqueBackground = false,
     showAddReactionText = false,
     subtleReactionsSummaryAndPicker = false,
-    showRoundTrigger = false,
     reactionPickerTriggerIcon,
     reactionPickerTriggerText = formatMessage(i18n.addReaction),
     fullWidthSummaryViewReactionPickerTrigger = false,
@@ -75,7 +73,7 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
     testId: RENDER_TRIGGER_BUTTON_TESTID,
     xcss: cx(styles.trigger, (fullWidthSummaryViewReactionPickerTrigger || fullWidthSelectorTrayReactionPickerTrigger) && 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),
+    fg('platform-component-visual-refresh') && styles.triggerStylesRefresh),
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/design-system/use-tokens-typography
       lineHeight: '16px'

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

package/dist/esm/components/ReactionPicker.js

@@ -69,8 +69,6 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
     subtleReactionsSummaryAndPicker = _props$subtleReaction === void 0 ? false : _props$subtleReaction,
     _props$showAddReactio = props.showAddReactionText,
     showAddReactionText = _props$showAddReactio === void 0 ? false : _props$showAddReactio,
-    _props$showRoundTrigg = props.showRoundTrigger,
-    showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg,
     reactionPickerTriggerIcon = props.reactionPickerTriggerIcon,
     reactionPickerTriggerText = props.reactionPickerTriggerText,
     reactionPickerPlacement = props.reactionPickerPlacement,
@@ -111,7 +109,7 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
    */
   var wrapperRef = useRef(null);
   var updatePopper = useRef();
-  var popperPlacement = showRoundTrigger ? 'left' : reactionPickerPlacement || 'bottom-start';
+  var popperPlacement = reactionPickerPlacement || 'bottom-start';
   var popperModifiers = [
   /**
     Removing this applyStyle modifier as it throws client errors ref:
@@ -147,7 +145,7 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
        */
       showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0,
       /**
-       * Use left placement for popper - using value based on showRoundTrigger for now since it needs the left placement
+       * Use placement for popper based on reactionPickerPlacement prop
        */
       popperPlacement: popperPlacement
     }),
@@ -322,7 +320,6 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
         showOpaqueBackground: showOpaqueBackground,
         showAddReactionText: showAddReactionText,
         subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
-        showRoundTrigger: showRoundTrigger,
         reactionPickerTriggerIcon: reactionPickerTriggerIcon,
         reactionPickerTriggerText: reactionPickerTriggerText,
         isListItem: isListItem

package/dist/esm/components/ReactionPickerNew.js

@@ -70,8 +70,6 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
     subtleReactionsSummaryAndPicker = _props$subtleReaction === void 0 ? false : _props$subtleReaction,
     _props$showAddReactio = props.showAddReactionText,
     showAddReactionText = _props$showAddReactio === void 0 ? false : _props$showAddReactio,
-    _props$showRoundTrigg = props.showRoundTrigger,
-    showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg,
     reactionPickerTriggerIcon = props.reactionPickerTriggerIcon,
     reactionPickerTriggerText = props.reactionPickerTriggerText,
     reactionPickerPlacement = props.reactionPickerPlacement,
@@ -112,7 +110,7 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
    */
   var wrapperRef = useRef(null);
   var updatePopper = useRef();
-  var popperPlacement = showRoundTrigger ? 'left' : reactionPickerPlacement || 'bottom-start';
+  var popperPlacement = reactionPickerPlacement || 'bottom-start';
   var popperModifiers = [
   /**
     Removing this applyStyle modifier as it throws client errors ref:
@@ -148,7 +146,7 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
        */
       showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0,
       /**
-       * Use left placement for popper - using value based on showRoundTrigger for now since it needs the left placement
+       * Use placement for popper based on reactionPickerPlacement prop
        */
       popperPlacement: popperPlacement
     }),
@@ -314,7 +312,6 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
         showOpaqueBackground: showOpaqueBackground,
         showAddReactionText: showAddReactionText,
         subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
-        showRoundTrigger: showRoundTrigger,
         reactionPickerTriggerIcon: reactionPickerTriggerIcon,
         reactionPickerTriggerText: reactionPickerTriggerText,
         isListItem: isListItem

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

@@ -3,6 +3,7 @@
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
 ._8hrz1nam{transform-origin:center center 0}
+._bfhkn82g{background-color:var(--ds-skeleton,#091e420f)}
 ._ca0q1b66{padding-top:var(--ds-space-050,4px)}
 ._kqswh2mm{position:relative}
 ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}

package/dist/esm/components/ReactionSummaryButton.js

@@ -18,6 +18,7 @@ var styles = {
   button: "_ca0q1b66 _u5f31b66 _n3td1b66 _19bvu2gc",
   container: "_kqswh2mm",
   summaryButtonIconAfter: "_u5f3u2gc _1e0c1txw _4cvr1h6o _1bah1h6o",
+  emojiPlaceholderBackground: "_bfhkn82g",
   particleEffectContainer: "_u5f31ejb"
 };
 /**
@@ -106,7 +107,8 @@ export var ReactionSummaryButton = /*#__PURE__*/forwardRef(function (_ref, ref)
         shortName: ''
       },
       fitToHeight: RESOURCED_EMOJI_COMPACT_HEIGHT,
-      optimisticImageURL: summaryGetOptimisticImageURL === null || summaryGetOptimisticImageURL === void 0 ? void 0 : summaryGetOptimisticImageURL(reaction.emojiId)
+      optimisticImageURL: summaryGetOptimisticImageURL === null || summaryGetOptimisticImageURL === void 0 ? void 0 : summaryGetOptimisticImageURL(reaction.emojiId),
+      placeholderXcss: styles.emojiPlaceholderBackground
     }));
   })), /*#__PURE__*/React.createElement(Counter, {
     value: totalReactionsCount,

package/dist/esm/components/ReactionSummaryView.js

@@ -96,9 +96,9 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
   }, []);
 
   /**
-      * Event callback when an emoji icon is selected
-      * @param item selected item
-      */
+   * Event callback when an emoji icon is selected
+   * @param item selected item
+   */
   var onEmojiSelected = useCallback(function (item) {
     // no emoji was selected
     if (!item.id) {

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

@@ -13,14 +13,12 @@
 ._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}
 ._1ul91tcg{min-width:24px}
 ._1ul9zwfg{min-width:2pc}
 ._4cvr1h6o{align-items:center}
 ._4t3i1tcg{height:24px}
-._4t3iviql{height:2rem}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._bfhksyzs{background-color:var(--ds-background-disabled,#091e4208)}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}

package/dist/esm/components/Trigger.js

@@ -14,7 +14,6 @@ var styles = {
   subtleTrigger: "_1dqoglyw _1ul91tcg",
   expandedTrigger: "_1ul9146b",
   triggerStylesRefresh: "_2rkoglpi",
-  roundTrigger: "_2rko14q2 _4t3iviql _1bsbviql",
   transparentEnabledTrigger: "_1h6dmuej _bfhksm61 _irr3166n _1di61dty",
   opaqueEnabledTrigger: "_1h6dmuej _bfhkvuon _irr3108i _1di61ji5",
   disabledTrigger: "_1h6d13gt _bfhksyzs",
@@ -62,8 +61,6 @@ export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
     showAddReactionText = _props$showAddReactio === void 0 ? false : _props$showAddReactio,
     _props$subtleReaction = props.subtleReactionsSummaryAndPicker,
     subtleReactionsSummaryAndPicker = _props$subtleReaction === void 0 ? false : _props$subtleReaction,
-    _props$showRoundTrigg = props.showRoundTrigger,
-    showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg,
     reactionPickerTriggerIcon = props.reactionPickerTriggerIcon,
     _props$reactionPicker = props.reactionPickerTriggerText,
     reactionPickerTriggerText = _props$reactionPicker === void 0 ? formatMessage(i18n.addReaction) : _props$reactionPicker,
@@ -83,7 +80,7 @@ export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
       testId: RENDER_TRIGGER_BUTTON_TESTID,
       xcss: cx(styles.trigger, (fullWidthSummaryViewReactionPickerTrigger || fullWidthSelectorTrayReactionPickerTrigger) && 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),
+      fg('platform-component-visual-refresh') && styles.triggerStylesRefresh),
       style: {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/design-system/use-tokens-typography
         lineHeight: '16px'

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

@@ -69,11 +69,7 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
      */
     showAddReactionText?: boolean;
     /**
-     * Optional prop for controlling if the picker hover border will be rounded
-     */
-    showRoundTrigger?: boolean;
-    /**
-     * Optional prop for controlling the picker location, gets overrided by showRoundTrigger
+     * Optional prop for controlling the picker location
      */
     reactionPickerPlacement?: Placement;
     /**

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

@@ -69,11 +69,7 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
      */
     showAddReactionText?: boolean;
     /**
-     * Optional prop for controlling if the picker hover border will be rounded
-     */
-    showRoundTrigger?: boolean;
-    /**
-     * Optional prop for controlling the picker location, gets overrided by showRoundTrigger
+     * Optional prop for controlling the picker location
      */
     reactionPickerPlacement?: Placement;
     /**

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

@@ -47,10 +47,6 @@ export interface TriggerProps {
      * Optional prop for applying subtle styling to reaction picker
      */
     subtleReactionsSummaryAndPicker?: boolean;
-    /**
-     * Optional prop for controlling if the picker hover border will be rounded
-     */
-    showRoundTrigger?: boolean;
     /**
      * Optional prop for controlling icon inside Trigger
      */

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

@@ -69,11 +69,7 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
      */
     showAddReactionText?: boolean;
     /**
-     * Optional prop for controlling if the picker hover border will be rounded
-     */
-    showRoundTrigger?: boolean;
-    /**
-     * Optional prop for controlling the picker location, gets overrided by showRoundTrigger
+     * Optional prop for controlling the picker location
      */
     reactionPickerPlacement?: Placement;
     /**

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

@@ -69,11 +69,7 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
      */
     showAddReactionText?: boolean;
     /**
-     * Optional prop for controlling if the picker hover border will be rounded
-     */
-    showRoundTrigger?: boolean;
-    /**
-     * Optional prop for controlling the picker location, gets overrided by showRoundTrigger
+     * Optional prop for controlling the picker location
      */
     reactionPickerPlacement?: Placement;
     /**

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

@@ -47,10 +47,6 @@ export interface TriggerProps {
      * Optional prop for applying subtle styling to reaction picker
      */
     subtleReactionsSummaryAndPicker?: boolean;
-    /**
-     * Optional prop for controlling if the picker hover border will be rounded
-     */
-    showRoundTrigger?: boolean;
     /**
      * Optional prop for controlling icon inside Trigger
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "31.19.1",
+	"version": "32.0.0",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -38,7 +38,7 @@
 		"@atlaskit/avatar": "^25.1.0",
 		"@atlaskit/button": "^23.2.0",
 		"@atlaskit/css": "^0.10.0",
-		"@atlaskit/emoji": "^69.2.0",
+		"@atlaskit/emoji": "^69.3.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^26.4.0",
 		"@atlaskit/link": "^3.2.0",
@@ -55,7 +55,7 @@
 		"@atlaskit/tabs": "^18.1.0",
 		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tokens": "^5.0.0",
-		"@atlaskit/tooltip": "^20.2.0",
+		"@atlaskit/tooltip": "^20.3.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@atlaskit/util-service-support": "^6.3.0",
 		"@babel/runtime": "^7.0.0",