@atlaskit/reactions 31.5.0 → 31.5.2

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/reactions
 
+## 31.5.2
+
+### Patch Changes
+
+- [#148201](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/148201)
+  [`8e811f1840de7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8e811f1840de7) -
+  Either actively or pre-emptively fixes a bug with keyframe animations in CJS and ESM distribution
+  targets for packages using Compiled CSS-in-JS. This may not affect this package, but the change
+  was made so a future migration does not accidentally break it.
+- Updated dependencies
+
+## 31.5.1
+
+### Patch Changes
+
+- [#145524](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/145524)
+  [`c667c355bfcf6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c667c355bfcf6) -
+  Adding property to wrap button in list item when true
+
 ## 31.5.0
 
 ### Minor 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.5.0";
+var packageVersion = "31.5.2";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -1,3 +1,6 @@
-
-._y44vt91o{animation:var(--_770km1)}._1bsb1osq{width:100%}
-._4t3i1osq{height:100%}
+._1bsb1osq{width:100%}
+._1pgl1ytf{animation-timing-function:ease-in-out}
+._4t3i1osq{height:100%}
+._5sagolkx{animation-duration:var(--_gwerdd)}
+._j7hq1x5b{animation-name:kfhns1k}
+@keyframes kfhns1k{20%{border-color:var(--_8ijx7f);background-color:var(--_17s7zfd)}75%{border-color:var(--_8ijx7f);background-color:var(--_17s7zfd)}to{border-color:var(--_8ijx7f);background-color:var(--_17s7zfd)}0%{background-color:transparent}}

package/dist/cjs/components/FlashAnimation.js

@@ -26,10 +26,12 @@ var RENDER_FLASHANIMATION_TESTID = exports.RENDER_FLASHANIMATION_TESTID = 'flash
 var FlashAnimation = exports.FlashAnimation = function FlashAnimation(props) {
   return /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: (0, _runtime.ax)(["_1bsb1osq _4t3i1osq", props.flash && "_y44vt91o", props.className]),
+    className: (0, _runtime.ax)(["_1bsb1osq _4t3i1osq", props.flash && "", props.flash && "_j7hq1x5b _5sagolkx _1pgl1ytf", props.className]),
     "data-testid": RENDER_FLASHANIMATION_TESTID,
     style: {
-      "--_770km1": (0, _runtime.ix)("".concat(flashAnimation, " ").concat(flashTime, "ms ease-in-out"))
+      "--_17s7zfd": (0, _runtime.ix)("var(--ds-background-selected-pressed, ".concat(_colors.B75, ")")),
+      "--_8ijx7f": (0, _runtime.ix)("var(--ds-border-selected, ".concat(_colors.B300, ")")),
+      "--_gwerdd": (0, _runtime.ix)("".concat(flashTime, "ms"))
     }
   }, props.children);
 };

package/dist/cjs/components/ReactionPicker.js

@@ -77,7 +77,9 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
     reactionPickerTriggerIcon = props.reactionPickerTriggerIcon,
     reactionPickerTriggerText = props.reactionPickerTriggerText,
     reactionPickerPlacement = props.reactionPickerPlacement,
-    reactionsPickerPreventOverflowOptions = props.reactionsPickerPreventOverflowOptions;
+    reactionsPickerPreventOverflowOptions = props.reactionsPickerPreventOverflowOptions,
+    _props$isListItem = props.isListItem,
+    isListItem = _props$isListItem === void 0 ? false : _props$isListItem;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     triggerRef = _useState2[0],
@@ -249,7 +251,8 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
         subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
         showRoundTrigger: showRoundTrigger,
         reactionPickerTriggerIcon: reactionPickerTriggerIcon,
-        reactionPickerTriggerText: reactionPickerTriggerText
+        reactionPickerTriggerText: reactionPickerTriggerText,
+        isListItem: isListItem
       })
     );
   }), settings.isOpen && /*#__PURE__*/_react.default.createElement(PopperWrapper, {

package/dist/cjs/components/Reactions.js

@@ -144,7 +144,9 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     useButtonAlignmentStyling = _ref$useButtonAlignme === void 0 ? false : _ref$useButtonAlignme,
     reactionPickerTriggerText = _ref.reactionPickerTriggerText,
     _ref$hoverableSummary = _ref.hoverableSummaryView,
-    hoverableSummaryView = _ref$hoverableSummary === void 0 ? false : _ref$hoverableSummary;
+    hoverableSummaryView = _ref$hoverableSummary === void 0 ? false : _ref$hoverableSummary,
+    _ref$isListItem = _ref.isListItem,
+    isListItem = _ref$isListItem === void 0 ? false : _ref$isListItem;
   var _useState = (0, _react.useState)(''),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -361,6 +363,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
     reactionPickerTriggerIcon: reactionPickerTriggerIcon,
     reactionPickerTriggerText: reactionPickerTriggerText,
+    isListItem: isListItem,
     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/Selector.compiled.css

@@ -1,13 +1,17 @@
-
-._y44vlcmg{animation:var(--_1m4wxxu)}._12l2u2gc{margin-inline-end:var(--ds-space-100,8px)}
+._12l2u2gc{margin-inline-end:var(--ds-space-100,8px)}
 ._19bv1b66{padding-left:var(--ds-space-050,4px)}
 ._1e0c1o8l{display:inline-block}
+._1o51q7pw{animation-fill-mode:forwards}
 ._1p3lnqa1{border-left-style:solid}
+._1pgl1ytf{animation-timing-function:ease-in-out}
 ._4t3i1tcg{height:24px}
+._5sag6ebc{animation-duration:.15s}
 ._5wramuej{border-left-color:var(--ds-border,#091e4224)}
 ._ahbq1b66{margin-inline-start:var(--ds-space-050,4px)}
 ._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._j7hqordv{animation-name:k12q5x3s}
 ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
 ._t6vde4h9{border-left-width:var(--ds-border-width,1px)}
 ._tzy4idpf{opacity:0}
-._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}
+@keyframes k12q5x3s{0%{opacity:1;transform:scale(.5)}75%{transform:scale(1.25)}to{opacity:1;transform:scale(1)}}

package/dist/cjs/components/Selector.js

@@ -34,10 +34,7 @@ var Reveal = function Reveal(_ref) {
     testId = _ref.testId;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
-    className: (0, _runtime.ax)(["_y44vlcmg _tzy4idpf"]),
-    style: {
-      "--_1m4wxxu": (0, _runtime.ix)("".concat(revealAnimation, " 150ms ease-in-out forwards"))
-    }
+    className: (0, _runtime.ax)(["_j7hqordv _5sag6ebc _1pgl1ytf _1o51q7pw _tzy4idpf"])
   }, children);
 };
 

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

@@ -1,6 +1,7 @@
 ._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rko14q2{border-radius:var(--ds-border-radius-circle,2002pc)}
 ._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._qtt8glyw{list-style:none}
 ._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._1dqoglyw{border-style:none}
 ._1dqonqa1{border-style:solid}

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_CONTAINER_TESTID = 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 = exports.RENDER_LIST_ITEM_WRAPPER_TESTID = void 0;
 require("./Trigger.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -36,6 +36,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 RENDER_LIST_ITEM_WRAPPER_TESTID = exports.RENDER_LIST_ITEM_WRAPPER_TESTID = 'render-list-item-wrapper';
 var i18n = (0, _reactIntlNext.defineMessages)({
   addReaction: {
     id: 'reaction-picker-trigger.add.reaction.message',
@@ -46,6 +47,7 @@ var i18n = (0, _reactIntlNext.defineMessages)({
 var addReactionStyles = {
   addReactionMessage: "_11c8dcr7 _syaz1gjq _18u01b66"
 };
+var noMarkerListStyle = null;
 
 /**
  * Render an emoji button to open the reactions select picker
@@ -72,41 +74,49 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react2.default.forwardRef(function
     _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;
+    fullWidthSummaryViewReactionPickerTrigger = _props$fullWidthSumma === void 0 ? false : _props$fullWidthSumma,
+    _props$isListItem = props.isListItem,
+    isListItem = _props$isListItem === void 0 ? false : _props$isListItem;
   var handleMouseDown = function handleMouseDown(e, analyticsEvent) {
     if (onClick && !disabled) {
       onClick(e, analyticsEvent);
     }
   };
+  var renderPressableButton = function renderPressableButton() {
+    return /*#__PURE__*/_react2.default.createElement(_compiled.Pressable, (0, _extends2.default)({
+      testId: RENDER_TRIGGER_BUTTON_TESTID,
+      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: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/design-system/use-tokens-typography
+        lineHeight: '16px'
+      },
+      onClick: handleMouseDown,
+      isDisabled: disabled,
+      ref: ref,
+      "data-subtle": subtleReactionsSummaryAndPicker,
+      "data-mini-mode": miniMode
+    }, ariaAttributes), !!reactionPickerTriggerIcon ? reactionPickerTriggerIcon :
+    /*#__PURE__*/
+    // TODO: https://product-fabric.atlassian.net/browse/DSP-21007
+    _react2.default.createElement(_emojiAdd.default, {
+      testId: "emoji-add-icon",
+      color: disabled ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon, #44546F)",
+      LEGACY_size: "small",
+      label: "Add reaction"
+    }), showAddReactionText && /*#__PURE__*/_react2.default.createElement(_compiled.Box, {
+      xcss: (0, _react.cx)(addReactionStyles.addReactionMessage)
+    }, reactionPickerTriggerText));
+  };
   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, 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: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/design-system/use-tokens-typography
-      lineHeight: '16px'
-    },
-    onClick: handleMouseDown,
-    isDisabled: disabled,
-    ref: ref,
-    "data-subtle": subtleReactionsSummaryAndPicker,
-    "data-mini-mode": miniMode
-  }, ariaAttributes), !!reactionPickerTriggerIcon ? reactionPickerTriggerIcon :
-  /*#__PURE__*/
-  // TODO: https://product-fabric.atlassian.net/browse/DSP-21007
-  _react2.default.createElement(_emojiAdd.default, {
-    testId: "emoji-add-icon",
-    color: disabled ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon, #44546F)",
-    LEGACY_size: "small",
-    label: "Add reaction"
-  }), showAddReactionText && /*#__PURE__*/_react2.default.createElement(_compiled.Box, {
-    xcss: (0, _react.cx)(addReactionStyles.addReactionMessage)
-  }, reactionPickerTriggerText))));
+  }, isListItem ? /*#__PURE__*/_react2.default.createElement("li", {
+    "data-testid": RENDER_LIST_ITEM_WRAPPER_TESTID,
+    className: (0, _runtime.ax)(["_qtt8glyw"])
+  }, renderPressableButton()) : renderPressableButton()));
 });

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

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

@@ -1,4 +1,6 @@
-
-._y44v1li1{animation:k1qrjcqm .7s ease-in-out}._1bsb1osq{width:100%}
+._1bsb1osq{width:100%}
+._1pgl1ytf{animation-timing-function:ease-in-out}
 ._4t3i1osq{height:100%}
+._5sagpwmj{animation-duration:.7s}
+._j7hqdjji{animation-name:k1qrjcqm}
 @keyframes k1qrjcqm{20%{border-color:var(--ds-border-selected,#0065ff);background-color:var(--ds-background-selected-pressed,#b3d4ff)}75%{border-color:var(--ds-border-selected,#0065ff);background-color:var(--ds-background-selected-pressed,#b3d4ff)}to{border-color:var(--ds-border-selected,#0065ff);background-color:var(--ds-background-selected-pressed,#b3d4ff)}0%{background-color:transparent}}

package/dist/es2019/components/FlashAnimation.js

@@ -16,6 +16,6 @@ export const RENDER_FLASHANIMATION_TESTID = 'flash-animation';
  */
 export const FlashAnimation = props => /*#__PURE__*/React.createElement("div", {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-  className: ax(["_1bsb1osq _4t3i1osq", props.flash && "", props.flash && "_y44v1li1", props.className]),
+  className: ax(["_1bsb1osq _4t3i1osq", props.flash && "", props.flash && "_j7hqdjji _5sagpwmj _1pgl1ytf", props.className]),
   "data-testid": RENDER_FLASHANIMATION_TESTID
 }, props.children);

package/dist/es2019/components/ReactionPicker.js

@@ -57,7 +57,8 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     reactionPickerTriggerIcon,
     reactionPickerTriggerText,
     reactionPickerPlacement,
-    reactionsPickerPreventOverflowOptions
+    reactionsPickerPreventOverflowOptions,
+    isListItem = false
   } = props;
   const [triggerRef, setTriggerRef] = useState(null);
 
@@ -224,7 +225,8 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
     showRoundTrigger: showRoundTrigger,
     reactionPickerTriggerIcon: reactionPickerTriggerIcon,
-    reactionPickerTriggerText: reactionPickerTriggerText
+    reactionPickerTriggerText: reactionPickerTriggerText,
+    isListItem: isListItem
   })), settings.isOpen && /*#__PURE__*/React.createElement(PopperWrapper, {
     settings: settings,
     popperModifiers: popperModifiers

package/dist/es2019/components/Reactions.js

@@ -107,7 +107,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
   allowSelectFromSummaryView = false,
   useButtonAlignmentStyling = false,
   reactionPickerTriggerText,
-  hoverableSummaryView = false
+  hoverableSummaryView = false,
+  isListItem = false
 }) => {
   const [selectedEmojiId, setSelectedEmojiId] = useState('');
   const {
@@ -309,6 +310,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
     subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
     reactionPickerTriggerIcon: reactionPickerTriggerIcon,
     reactionPickerTriggerText: reactionPickerTriggerText,
+    isListItem: isListItem,
     className: ax(["_1e0c1o8l _19pk1b66"])
   }), /*#__PURE__*/React.createElement(ModalTransition, null, !!selectedEmojiId && /*#__PURE__*/React.createElement(UFOSegment, {
     name: "reactions-dialog"

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

@@ -1,12 +1,15 @@
-
-._y44v8out{animation:k12q5x3s .15s ease-in-out forwards}._12l2u2gc{margin-inline-end:var(--ds-space-100,8px)}
+._12l2u2gc{margin-inline-end:var(--ds-space-100,8px)}
 ._19bv1b66{padding-left:var(--ds-space-050,4px)}
 ._1e0c1o8l{display:inline-block}
+._1o51q7pw{animation-fill-mode:forwards}
 ._1p3lnqa1{border-left-style:solid}
+._1pgl1ytf{animation-timing-function:ease-in-out}
 ._4t3i1tcg{height:24px}
+._5sag6ebc{animation-duration:.15s}
 ._5wramuej{border-left-color:var(--ds-border,#091e4224)}
 ._ahbq1b66{margin-inline-start:var(--ds-space-050,4px)}
 ._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._j7hqordv{animation-name:k12q5x3s}
 ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
 ._t6vde4h9{border-left-width:var(--ds-border-width,1px)}
 ._tzy4idpf{opacity:0}

package/dist/es2019/components/Selector.js

@@ -25,7 +25,7 @@ const Reveal = ({
 }) => {
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
-    className: ax(["_y44v8out _tzy4idpf"])
+    className: ax(["_j7hqordv _5sag6ebc _1pgl1ytf _1o51q7pw _tzy4idpf"])
   }, children);
 };
 

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

@@ -1,6 +1,7 @@
 ._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rko14q2{border-radius:var(--ds-border-radius-circle,2002pc)}
 ._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._qtt8glyw{list-style:none}
 ._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._1dqoglyw{border-style:none}
 ._1dqonqa1{border-style:solid}

package/dist/es2019/components/Trigger.js

@@ -29,6 +29,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';
+export const RENDER_LIST_ITEM_WRAPPER_TESTID = 'render-list-item-wrapper';
 const i18n = defineMessages({
   addReaction: {
     id: 'reaction-picker-trigger.add.reaction.message',
@@ -39,6 +40,7 @@ const i18n = defineMessages({
 const addReactionStyles = {
   addReactionMessage: "_11c8dcr7 _syaz1gjq _18u01b66"
 };
+const noMarkerListStyle = null;
 
 /**
  * Render an emoji button to open the reactions select picker
@@ -59,20 +61,15 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
     showRoundTrigger = false,
     reactionPickerTriggerIcon,
     reactionPickerTriggerText = formatMessage(i18n.addReaction),
-    fullWidthSummaryViewReactionPickerTrigger = false
+    fullWidthSummaryViewReactionPickerTrigger = false,
+    isListItem = false
   } = props;
   const handleMouseDown = (e, analyticsEvent) => {
     if (onClick && !disabled) {
       onClick(e, analyticsEvent);
     }
   };
-  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({
+  const renderPressableButton = () => /*#__PURE__*/React.createElement(Pressable, _extends({
     testId: RENDER_TRIGGER_BUTTON_TESTID,
     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
@@ -96,5 +93,15 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
     label: "Add reaction"
   }), showAddReactionText && /*#__PURE__*/React.createElement(Box, {
     xcss: cx(addReactionStyles.addReactionMessage)
-  }, reactionPickerTriggerText))));
+  }, reactionPickerTriggerText));
+  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
+  }, isListItem ? /*#__PURE__*/React.createElement("li", {
+    "data-testid": RENDER_LIST_ITEM_WRAPPER_TESTID,
+    className: ax(["_qtt8glyw"])
+  }, renderPressableButton()) : renderPressableButton()));
 });

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

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

@@ -1,3 +1,6 @@
-
-._y44vt91o{animation:var(--_770km1)}._1bsb1osq{width:100%}
-._4t3i1osq{height:100%}
+._1bsb1osq{width:100%}
+._1pgl1ytf{animation-timing-function:ease-in-out}
+._4t3i1osq{height:100%}
+._5sagolkx{animation-duration:var(--_gwerdd)}
+._j7hq1x5b{animation-name:kfhns1k}
+@keyframes kfhns1k{20%{border-color:var(--_8ijx7f);background-color:var(--_17s7zfd)}75%{border-color:var(--_8ijx7f);background-color:var(--_17s7zfd)}to{border-color:var(--_8ijx7f);background-color:var(--_17s7zfd)}0%{background-color:transparent}}

package/dist/esm/components/FlashAnimation.js

@@ -17,10 +17,12 @@ export var RENDER_FLASHANIMATION_TESTID = 'flash-animation';
 export var FlashAnimation = function FlashAnimation(props) {
   return /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: ax(["_1bsb1osq _4t3i1osq", props.flash && "_y44vt91o", props.className]),
+    className: ax(["_1bsb1osq _4t3i1osq", props.flash && "", props.flash && "_j7hq1x5b _5sagolkx _1pgl1ytf", props.className]),
     "data-testid": RENDER_FLASHANIMATION_TESTID,
     style: {
-      "--_770km1": ix("".concat(flashAnimation, " ").concat(flashTime, "ms ease-in-out"))
+      "--_17s7zfd": ix("var(--ds-background-selected-pressed, ".concat(B75, ")")),
+      "--_8ijx7f": ix("var(--ds-border-selected, ".concat(B300, ")")),
+      "--_gwerdd": ix("".concat(flashTime, "ms"))
     }
   }, props.children);
 };

package/dist/esm/components/ReactionPicker.js

@@ -68,7 +68,9 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
     reactionPickerTriggerIcon = props.reactionPickerTriggerIcon,
     reactionPickerTriggerText = props.reactionPickerTriggerText,
     reactionPickerPlacement = props.reactionPickerPlacement,
-    reactionsPickerPreventOverflowOptions = props.reactionsPickerPreventOverflowOptions;
+    reactionsPickerPreventOverflowOptions = props.reactionsPickerPreventOverflowOptions,
+    _props$isListItem = props.isListItem,
+    isListItem = _props$isListItem === void 0 ? false : _props$isListItem;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     triggerRef = _useState2[0],
@@ -240,7 +242,8 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
         subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
         showRoundTrigger: showRoundTrigger,
         reactionPickerTriggerIcon: reactionPickerTriggerIcon,
-        reactionPickerTriggerText: reactionPickerTriggerText
+        reactionPickerTriggerText: reactionPickerTriggerText,
+        isListItem: isListItem
       })
     );
   }), settings.isOpen && /*#__PURE__*/React.createElement(PopperWrapper, {

package/dist/esm/components/Reactions.js

@@ -132,7 +132,9 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     useButtonAlignmentStyling = _ref$useButtonAlignme === void 0 ? false : _ref$useButtonAlignme,
     reactionPickerTriggerText = _ref.reactionPickerTriggerText,
     _ref$hoverableSummary = _ref.hoverableSummaryView,
-    hoverableSummaryView = _ref$hoverableSummary === void 0 ? false : _ref$hoverableSummary;
+    hoverableSummaryView = _ref$hoverableSummary === void 0 ? false : _ref$hoverableSummary,
+    _ref$isListItem = _ref.isListItem,
+    isListItem = _ref$isListItem === void 0 ? false : _ref$isListItem;
   var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -349,6 +351,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
     reactionPickerTriggerIcon: reactionPickerTriggerIcon,
     reactionPickerTriggerText: reactionPickerTriggerText,
+    isListItem: isListItem,
     className: ax(["_1e0c1o8l _19pk1b66"])
   }), /*#__PURE__*/React.createElement(ModalTransition, null, !!selectedEmojiId && /*#__PURE__*/React.createElement(UFOSegment, {
     name: "reactions-dialog"

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

@@ -1,13 +1,17 @@
-
-._y44vlcmg{animation:var(--_1m4wxxu)}._12l2u2gc{margin-inline-end:var(--ds-space-100,8px)}
+._12l2u2gc{margin-inline-end:var(--ds-space-100,8px)}
 ._19bv1b66{padding-left:var(--ds-space-050,4px)}
 ._1e0c1o8l{display:inline-block}
+._1o51q7pw{animation-fill-mode:forwards}
 ._1p3lnqa1{border-left-style:solid}
+._1pgl1ytf{animation-timing-function:ease-in-out}
 ._4t3i1tcg{height:24px}
+._5sag6ebc{animation-duration:.15s}
 ._5wramuej{border-left-color:var(--ds-border,#091e4224)}
 ._ahbq1b66{margin-inline-start:var(--ds-space-050,4px)}
 ._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._j7hqordv{animation-name:k12q5x3s}
 ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
 ._t6vde4h9{border-left-width:var(--ds-border-width,1px)}
 ._tzy4idpf{opacity:0}
-._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}
+@keyframes k12q5x3s{0%{opacity:1;transform:scale(.5)}75%{transform:scale(1.25)}to{opacity:1;transform:scale(1)}}

package/dist/esm/components/Selector.js

@@ -24,10 +24,7 @@ var Reveal = function Reveal(_ref) {
     testId = _ref.testId;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
-    className: ax(["_y44vlcmg _tzy4idpf"]),
-    style: {
-      "--_1m4wxxu": ix("".concat(revealAnimation, " 150ms ease-in-out forwards"))
-    }
+    className: ax(["_j7hqordv _5sag6ebc _1pgl1ytf _1o51q7pw _tzy4idpf"])
   }, children);
 };
 

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

@@ -1,6 +1,7 @@
 ._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rko14q2{border-radius:var(--ds-border-radius-circle,2002pc)}
 ._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._qtt8glyw{list-style:none}
 ._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._1dqoglyw{border-style:none}
 ._1dqonqa1{border-style:solid}

package/dist/esm/components/Trigger.js

@@ -29,6 +29,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';
+export var RENDER_LIST_ITEM_WRAPPER_TESTID = 'render-list-item-wrapper';
 var i18n = defineMessages({
   addReaction: {
     id: 'reaction-picker-trigger.add.reaction.message',
@@ -39,6 +40,7 @@ var i18n = defineMessages({
 var addReactionStyles = {
   addReactionMessage: "_11c8dcr7 _syaz1gjq _18u01b66"
 };
+var noMarkerListStyle = null;
 
 /**
  * Render an emoji button to open the reactions select picker
@@ -65,41 +67,49 @@ export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
     _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;
+    fullWidthSummaryViewReactionPickerTrigger = _props$fullWidthSumma === void 0 ? false : _props$fullWidthSumma,
+    _props$isListItem = props.isListItem,
+    isListItem = _props$isListItem === void 0 ? false : _props$isListItem;
   var handleMouseDown = function handleMouseDown(e, analyticsEvent) {
     if (onClick && !disabled) {
       onClick(e, analyticsEvent);
     }
   };
+  var renderPressableButton = function renderPressableButton() {
+    return /*#__PURE__*/React.createElement(Pressable, _extends({
+      testId: RENDER_TRIGGER_BUTTON_TESTID,
+      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: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/design-system/use-tokens-typography
+        lineHeight: '16px'
+      },
+      onClick: handleMouseDown,
+      isDisabled: disabled,
+      ref: ref,
+      "data-subtle": subtleReactionsSummaryAndPicker,
+      "data-mini-mode": miniMode
+    }, ariaAttributes), !!reactionPickerTriggerIcon ? reactionPickerTriggerIcon :
+    /*#__PURE__*/
+    // TODO: https://product-fabric.atlassian.net/browse/DSP-21007
+    React.createElement(EmojiAddIcon, {
+      testId: "emoji-add-icon",
+      color: disabled ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon, #44546F)",
+      LEGACY_size: "small",
+      label: "Add reaction"
+    }), showAddReactionText && /*#__PURE__*/React.createElement(Box, {
+      xcss: cx(addReactionStyles.addReactionMessage)
+    }, reactionPickerTriggerText));
+  };
   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, 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: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/design-system/use-tokens-typography
-      lineHeight: '16px'
-    },
-    onClick: handleMouseDown,
-    isDisabled: disabled,
-    ref: ref,
-    "data-subtle": subtleReactionsSummaryAndPicker,
-    "data-mini-mode": miniMode
-  }, ariaAttributes), !!reactionPickerTriggerIcon ? reactionPickerTriggerIcon :
-  /*#__PURE__*/
-  // TODO: https://product-fabric.atlassian.net/browse/DSP-21007
-  React.createElement(EmojiAddIcon, {
-    testId: "emoji-add-icon",
-    color: disabled ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon, #44546F)",
-    LEGACY_size: "small",
-    label: "Add reaction"
-  }), showAddReactionText && /*#__PURE__*/React.createElement(Box, {
-    xcss: cx(addReactionStyles.addReactionMessage)
-  }, reactionPickerTriggerText))));
+  }, isListItem ? /*#__PURE__*/React.createElement("li", {
+    "data-testid": RENDER_LIST_ITEM_WRAPPER_TESTID,
+    className: ax(["_qtt8glyw"])
+  }, renderPressableButton()) : renderPressableButton()));
 });

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

@@ -88,6 +88,10 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
      * Optional prop for controlling text of the trigger button
      */
     reactionPickerTriggerText?: string;
+    /**
+     * Optional prop to say if the reactions component is in a list
+     */
+    isListItem?: boolean;
 }
 /**
  * Picker component for adding reactions

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

@@ -165,6 +165,10 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * Optional prop for controlling if the summary view is hoverable
      */
     hoverableSummaryView?: boolean;
+    /**
+     * Optional prop to say if the reactions component is in a list
+     */
+    isListItem?: boolean;
 }
 export interface OpenReactionsDialogOptions {
     emojiId?: string;
@@ -177,4 +181,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, reactionPickerTriggerTooltipContent, reactionPickerTriggerIcon, allowSelectFromSummaryView, useButtonAlignmentStyling, reactionPickerTriggerText, hoverableSummaryView, }: 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, hoverableSummaryView, isListItem, }: ReactionsProps) => JSX.Element>;

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

@@ -11,6 +11,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 declare const RENDER_LIST_ITEM_WRAPPER_TESTID = "render-list-item-wrapper";
 export interface TriggerProps {
     /**
      * Optional Event handler when the button to open the picker is clicked
@@ -66,6 +67,10 @@ export interface TriggerProps {
      * Optional prop for controlling if the summary view reaction picker trigger should be full width
      */
     fullWidthSummaryViewReactionPickerTrigger?: boolean;
+    /**
+     * Optional prop to say if the reactions component is in a list
+     */
+    isListItem?: boolean;
 }
 /**
  * Render an emoji button to open the reactions select picker

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

@@ -88,6 +88,10 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
      * Optional prop for controlling text of the trigger button
      */
     reactionPickerTriggerText?: string;
+    /**
+     * Optional prop to say if the reactions component is in a list
+     */
+    isListItem?: boolean;
 }
 /**
  * Picker component for adding reactions

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

@@ -165,6 +165,10 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * Optional prop for controlling if the summary view is hoverable
      */
     hoverableSummaryView?: boolean;
+    /**
+     * Optional prop to say if the reactions component is in a list
+     */
+    isListItem?: boolean;
 }
 export interface OpenReactionsDialogOptions {
     emojiId?: string;
@@ -177,4 +181,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, reactionPickerTriggerTooltipContent, reactionPickerTriggerIcon, allowSelectFromSummaryView, useButtonAlignmentStyling, reactionPickerTriggerText, hoverableSummaryView, }: 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, hoverableSummaryView, isListItem, }: ReactionsProps) => JSX.Element>;

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

@@ -11,6 +11,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 declare const RENDER_LIST_ITEM_WRAPPER_TESTID = "render-list-item-wrapper";
 export interface TriggerProps {
     /**
      * Optional Event handler when the button to open the picker is clicked
@@ -66,6 +67,10 @@ export interface TriggerProps {
      * Optional prop for controlling if the summary view reaction picker trigger should be full width
      */
     fullWidthSummaryViewReactionPickerTrigger?: boolean;
+    /**
+     * Optional prop to say if the reactions component is in a list
+     */
+    isListItem?: boolean;
 }
 /**
  * Render an emoji button to open the reactions select picker

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "31.5.0",
+	"version": "31.5.2",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -48,7 +48,7 @@
 		"@atlaskit/popper": "^7.0.0",
 		"@atlaskit/popup": "^4.1.0",
 		"@atlaskit/primitives": "^14.4.0",
-		"@atlaskit/react-ufo": "^3.6.0",
+		"@atlaskit/react-ufo": "^3.9.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/tabs": "^18.0.0",
 		"@atlaskit/theme": "^18.0.0",
@@ -66,9 +66,9 @@
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"devDependencies": {
-		"@af/visual-regression": "^1.3.0",
-		"@atlaskit/editor-test-helpers": "^22.1.0",
-		"@atlaskit/elements-test-helpers": "^0.9.0",
+		"@af/visual-regression": "workspace:^",
+		"@atlaskit/editor-test-helpers": "workspace:^",
+		"@atlaskit/elements-test-helpers": "workspace:^",
 		"@atlaskit/util-data-test": "^18.0.0",
 		"@atlassian/feature-flags-test-utils": "^0.3.0",
 		"@testing-library/dom": "^10.1.0",