@atlaskit/reactions 22.6.3 → 22.7.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/reactions
 
+## 22.7.0
+
+### Minor Changes
+
+-   [#93855](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/93855)
+    [`2c1bba58469b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2c1bba58469b) -
+    [ux] Added Particle effect to reactions
+
 ## 22.6.3
 
 ### 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 = "22.6.3";
+var packageVersion = "22.7.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/cjs/components/Reaction/Reaction.js

@@ -17,6 +17,7 @@ var _emoji = require("@atlaskit/emoji");
 var _analytics = require("../../analytics");
 var _Counter = require("../Counter");
 var _FlashAnimation = require("../FlashAnimation");
+var _ReactionParticleEffect = require("../ReactionParticleEffect");
 var _ReactionTooltip = require("../ReactionTooltip");
 var _i18n = require("../../shared/i18n");
 var _utils = require("../../shared/utils");
@@ -43,6 +44,8 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
     className = _ref.className,
     _ref$flash = _ref.flash,
     flash = _ref$flash === void 0 ? false : _ref$flash,
+    _ref$showParticleEffe = _ref.showParticleEffect,
+    showParticleEffect = _ref$showParticleEffe === void 0 ? false : _ref$showParticleEffe,
     _ref$handleUserListCl = _ref.handleUserListClick,
     handleUserListClick = _ref$handleUserListCl === void 0 ? function () {} : _ref$handleUserListCl,
     allowUserDialog = _ref.allowUserDialog;
@@ -121,7 +124,12 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
     handleUserListClick(emojiId);
     setIsTooltipEnabled(false);
   };
-  return (0, _react2.jsx)(_ReactionTooltip.ReactionTooltip, {
+  return (0, _react2.jsx)("div", {
+    css: _styles.containerStyle
+  }, showParticleEffect && (0, _react2.jsx)(_ReactionParticleEffect.ReactionParticleEffect, {
+    emojiId: emojiId,
+    emojiProvider: emojiProvider
+  }), (0, _react2.jsx)(_ReactionTooltip.ReactionTooltip, {
     emojiName: emojiName,
     reaction: reaction,
     handleUserListClick: handleOpenReactionsDialog,
@@ -144,9 +152,7 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
     flash: flash,
     css: _styles.flashStyle
   }, (0, _react2.jsx)("div", {
-    css: [_styles.emojiStyle, reaction.count === 0 && {
-      padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-025, 2px)", " ", "var(--ds-space-050, 4px)", " 10px")
-    }]
+    css: [_styles.emojiStyle, reaction.count === 0 && _styles.emojiNoReactionStyle]
   }, (0, _react2.jsx)(_emoji.ResourcedEmoji, {
     emojiProvider: emojiProvider,
     emojiId: emojiId,
@@ -154,5 +160,5 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
   })), (0, _react2.jsx)(_Counter.Counter, {
     value: reaction.count,
     highlight: reaction.reacted
-  }))));
+  })))));
 };

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.reactionStyle = exports.reactedStyle = exports.flashStyle = exports.flashHeight = exports.emojiStyle = void 0;
+exports.reactionStyle = exports.reactedStyle = exports.flashStyle = exports.flashHeight = exports.emojiStyle = exports.emojiNoReactionStyle = exports.containerStyle = void 0;
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 /** @jsx jsx */
@@ -19,6 +19,9 @@ var akHeight = 24;
  * of FlashAnimation b/c it otherwise throws off the flash styling
  */
 
+var containerStyle = exports.containerStyle = (0, _react.css)({
+  position: 'relative'
+});
 var emojiStyle = exports.emojiStyle = (0, _react.css)({
   transformOrigin: 'center center 0',
   lineHeight: '12px',
@@ -66,4 +69,7 @@ var flashStyle = exports.flashStyle = (0, _react.css)({
   alignItems: 'center',
   borderRadius: '10px',
   height: "".concat(flashHeight, "px")
+});
+var emojiNoReactionStyle = exports.emojiNoReactionStyle = (0, _react.css)({
+  padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-025, 2px)", " ", "var(--ds-space-050, 4px)", " 10px")
 });

package/dist/cjs/components/ReactionParticleEffect/ReactionParticleEffect.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReactionParticleEffect = exports.PARTICLE_COUNT = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _emoji = require("@atlaskit/emoji");
+var _react = require("@emotion/react");
+var _styles = require("./styles");
+/** @jsx jsx */
+
+var PARTICLE_COUNT = exports.PARTICLE_COUNT = 4;
+var ReactionParticleEffect = exports.ReactionParticleEffect = function ReactionParticleEffect(_ref) {
+  var emojiProvider = _ref.emojiProvider,
+    emojiId = _ref.emojiId;
+  return (0, _react.jsx)("div", {
+    css: _styles.containerStyle
+  }, (0, _toConsumableArray2.default)(Array(PARTICLE_COUNT)).map(function (_, index) {
+    return (0, _react.jsx)("div", {
+      key: index,
+      css: _styles.reactionParticleStyle
+    }, (0, _react.jsx)(_emoji.ResourcedEmoji, {
+      emojiProvider: emojiProvider,
+      emojiId: emojiId,
+      fitToHeight: 16
+    }));
+  }));
+};

package/dist/cjs/components/ReactionParticleEffect/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ReactionParticleEffect", {
+  enumerable: true,
+  get: function get() {
+    return _ReactionParticleEffect.ReactionParticleEffect;
+  }
+});
+var _ReactionParticleEffect = require("./ReactionParticleEffect");

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

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.reactionParticleStyle = exports.containerStyle = void 0;
+var _constants = require("@atlaskit/theme/constants");
+var _react = require("@emotion/react");
+var fade = (0, _react.keyframes)({
+  '0%': {
+    opacity: 0
+  },
+  '20%': {
+    opacity: 1
+  },
+  '60%': {
+    opacity: 1
+  },
+  '100%': {
+    opacity: 0
+  }
+});
+var float = (0, _react.keyframes)({
+  '0%': {
+    transform: 'translateY(0) scale(1)'
+  },
+  '100%': {
+    transform: 'translateY(-120px) scale(1.7)'
+  }
+});
+var containerStyle = exports.containerStyle = (0, _react.css)({
+  position: 'relative',
+  left: 8,
+  // Ensure the effect displays above tooltips
+  zIndex: _constants.layers.tooltip() + 1
+});
+var reactionParticleStyle = exports.reactionParticleStyle = (0, _react.css)({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  pointerEvents: 'none',
+  opacity: 0,
+  animation: "".concat(fade, " ease-in-out, ").concat(float, " ease"),
+  animationDuration: '700ms',
+  // Override position and delay for each particle
+  ':nth-child(2)': {
+    left: -5,
+    animationDelay: '0.15s'
+  },
+  ':nth-child(3)': {
+    left: 8,
+    animationDelay: '0.3s'
+  },
+  ':nth-child(4)': {
+    left: -1,
+    animationDelay: '0.45s'
+  }
+});

package/dist/cjs/components/Reactions/Reactions.js

@@ -79,6 +79,8 @@ function getTooltip(status, errorMessage) {
 var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_ref) {
   var _ref$flash = _ref.flash,
     flash = _ref$flash === void 0 ? {} : _ref$flash,
+    _ref$particleEffectBy = _ref.particleEffectByEmoji,
+    particleEffectByEmoji = _ref$particleEffectBy === void 0 ? {} : _ref$particleEffectBy,
     status = _ref.status,
     errorMessage = _ref.errorMessage,
     loadReaction = _ref.loadReaction,
@@ -270,7 +272,8 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       onFocused: handleReactionFocused,
       flash: flash[reaction.emojiId],
       handleUserListClick: handleOpenReactionsDialog,
-      allowUserDialog: allowUserDialog
+      allowUserDialog: allowUserDialog,
+      showParticleEffect: particleEffectByEmoji[reaction.emojiId]
     });
   }), (0, _react2.jsx)(_ReactionPicker.ReactionPicker, {
     css: _styles.reactionPickerStyle,

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

package/dist/es2019/components/Reaction/Reaction.js

@@ -7,10 +7,11 @@ import { ResourcedEmoji } from '@atlaskit/emoji';
 import { createAndFireSafe, createReactionClickedEvent, createReactionFocusedEvent, createReactionHoveredEvent } from '../../analytics';
 import { Counter } from '../Counter';
 import { FlashAnimation } from '../FlashAnimation';
+import { ReactionParticleEffect } from '../ReactionParticleEffect';
 import { ReactionTooltip } from '../ReactionTooltip';
 import { messages } from '../../shared/i18n';
 import { isLeftClick } from '../../shared/utils';
-import { emojiStyle, flashStyle, reactedStyle, reactionStyle } from './styles';
+import { containerStyle, emojiStyle, emojiNoReactionStyle, flashStyle, reactedStyle, reactionStyle } from './styles';
 /**
  * Test id for Reaction item wrapper div
  */
@@ -26,6 +27,7 @@ export const Reaction = ({
   onFocused = () => {},
   className,
   flash = false,
+  showParticleEffect = false,
   handleUserListClick = () => {},
   allowUserDialog
 }) => {
@@ -86,7 +88,12 @@ export const Reaction = ({
     handleUserListClick(emojiId);
     setIsTooltipEnabled(false);
   };
-  return jsx(ReactionTooltip, {
+  return jsx("div", {
+    css: containerStyle
+  }, showParticleEffect && jsx(ReactionParticleEffect, {
+    emojiId: emojiId,
+    emojiProvider: emojiProvider
+  }), jsx(ReactionTooltip, {
     emojiName: emojiName,
     reaction: reaction,
     handleUserListClick: handleOpenReactionsDialog,
@@ -109,9 +116,7 @@ export const Reaction = ({
     flash: flash,
     css: flashStyle
   }, jsx("div", {
-    css: [emojiStyle, reaction.count === 0 && {
-      padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"} 10px`
-    }]
+    css: [emojiStyle, reaction.count === 0 && emojiNoReactionStyle]
   }, jsx(ResourcedEmoji, {
     emojiProvider: emojiProvider,
     emojiId: emojiId,
@@ -119,5 +124,5 @@ export const Reaction = ({
   })), jsx(Counter, {
     value: reaction.count,
     highlight: reaction.reacted
-  }))));
+  })))));
 };

package/dist/es2019/components/Reaction/styles.js

@@ -12,6 +12,9 @@ const akHeight = 24;
  * of FlashAnimation b/c it otherwise throws off the flash styling
  */
 
+export const containerStyle = css({
+  position: 'relative'
+});
 export const emojiStyle = css({
   transformOrigin: 'center center 0',
   lineHeight: '12px',
@@ -59,4 +62,7 @@ export const flashStyle = css({
   alignItems: 'center',
   borderRadius: '10px',
   height: `${flashHeight}px`
+});
+export const emojiNoReactionStyle = css({
+  padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"} 10px`
 });

package/dist/es2019/components/ReactionParticleEffect/ReactionParticleEffect.js

@@ -0,0 +1,20 @@
+/** @jsx jsx */
+import { ResourcedEmoji } from '@atlaskit/emoji';
+import { jsx } from '@emotion/react';
+import { containerStyle, reactionParticleStyle } from './styles';
+export const PARTICLE_COUNT = 4;
+export const ReactionParticleEffect = ({
+  emojiProvider,
+  emojiId
+}) => jsx("div", {
+  css: containerStyle
+}, [...Array(PARTICLE_COUNT)].map((_, index) => {
+  return jsx("div", {
+    key: index,
+    css: reactionParticleStyle
+  }, jsx(ResourcedEmoji, {
+    emojiProvider: emojiProvider,
+    emojiId: emojiId,
+    fitToHeight: 16
+  }));
+}));

package/dist/es2019/components/ReactionParticleEffect/index.js

@@ -0,0 +1 @@
+export { ReactionParticleEffect } from './ReactionParticleEffect';

package/dist/es2019/components/ReactionParticleEffect/styles.js

@@ -0,0 +1,52 @@
+import { layers } from '@atlaskit/theme/constants';
+import { css, keyframes } from '@emotion/react';
+const fade = keyframes({
+  '0%': {
+    opacity: 0
+  },
+  '20%': {
+    opacity: 1
+  },
+  '60%': {
+    opacity: 1
+  },
+  '100%': {
+    opacity: 0
+  }
+});
+const float = keyframes({
+  '0%': {
+    transform: 'translateY(0) scale(1)'
+  },
+  '100%': {
+    transform: 'translateY(-120px) scale(1.7)'
+  }
+});
+export const containerStyle = css({
+  position: 'relative',
+  left: 8,
+  // Ensure the effect displays above tooltips
+  zIndex: layers.tooltip() + 1
+});
+export const reactionParticleStyle = css({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  pointerEvents: 'none',
+  opacity: 0,
+  animation: `${fade} ease-in-out, ${float} ease`,
+  animationDuration: '700ms',
+  // Override position and delay for each particle
+  ':nth-child(2)': {
+    left: -5,
+    animationDelay: '0.15s'
+  },
+  ':nth-child(3)': {
+    left: 8,
+    animationDelay: '0.3s'
+  },
+  ':nth-child(4)': {
+    left: -1,
+    animationDelay: '0.45s'
+  }
+});

package/dist/es2019/components/Reactions/Reactions.js

@@ -65,6 +65,7 @@ export function getTooltip(status, errorMessage) {
  */
 export const Reactions = /*#__PURE__*/React.memo(({
   flash = {},
+  particleEffectByEmoji = {},
   status,
   errorMessage,
   loadReaction,
@@ -242,7 +243,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
     onFocused: handleReactionFocused,
     flash: flash[reaction.emojiId],
     handleUserListClick: handleOpenReactionsDialog,
-    allowUserDialog: allowUserDialog
+    allowUserDialog: allowUserDialog,
+    showParticleEffect: particleEffectByEmoji[reaction.emojiId]
   })), jsx(ReactionPicker, {
     css: reactionPickerStyle,
     emojiProvider: emojiProvider,

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

package/dist/esm/components/Reaction/Reaction.js

@@ -10,10 +10,11 @@ import { ResourcedEmoji } from '@atlaskit/emoji';
 import { createAndFireSafe, createReactionClickedEvent, createReactionFocusedEvent, createReactionHoveredEvent } from '../../analytics';
 import { Counter } from '../Counter';
 import { FlashAnimation } from '../FlashAnimation';
+import { ReactionParticleEffect } from '../ReactionParticleEffect';
 import { ReactionTooltip } from '../ReactionTooltip';
 import { messages } from '../../shared/i18n';
 import { isLeftClick } from '../../shared/utils';
-import { emojiStyle, flashStyle, reactedStyle, reactionStyle } from './styles';
+import { containerStyle, emojiStyle, emojiNoReactionStyle, flashStyle, reactedStyle, reactionStyle } from './styles';
 /**
  * Test id for Reaction item wrapper div
  */
@@ -32,6 +33,8 @@ export var Reaction = function Reaction(_ref) {
     className = _ref.className,
     _ref$flash = _ref.flash,
     flash = _ref$flash === void 0 ? false : _ref$flash,
+    _ref$showParticleEffe = _ref.showParticleEffect,
+    showParticleEffect = _ref$showParticleEffe === void 0 ? false : _ref$showParticleEffe,
     _ref$handleUserListCl = _ref.handleUserListClick,
     handleUserListClick = _ref$handleUserListCl === void 0 ? function () {} : _ref$handleUserListCl,
     allowUserDialog = _ref.allowUserDialog;
@@ -110,7 +113,12 @@ export var Reaction = function Reaction(_ref) {
     handleUserListClick(emojiId);
     setIsTooltipEnabled(false);
   };
-  return jsx(ReactionTooltip, {
+  return jsx("div", {
+    css: containerStyle
+  }, showParticleEffect && jsx(ReactionParticleEffect, {
+    emojiId: emojiId,
+    emojiProvider: emojiProvider
+  }), jsx(ReactionTooltip, {
     emojiName: emojiName,
     reaction: reaction,
     handleUserListClick: handleOpenReactionsDialog,
@@ -133,9 +141,7 @@ export var Reaction = function Reaction(_ref) {
     flash: flash,
     css: flashStyle
   }, jsx("div", {
-    css: [emojiStyle, reaction.count === 0 && {
-      padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-025, 2px)", " ", "var(--ds-space-050, 4px)", " 10px")
-    }]
+    css: [emojiStyle, reaction.count === 0 && emojiNoReactionStyle]
   }, jsx(ResourcedEmoji, {
     emojiProvider: emojiProvider,
     emojiId: emojiId,
@@ -143,5 +149,5 @@ export var Reaction = function Reaction(_ref) {
   })), jsx(Counter, {
     value: reaction.count,
     highlight: reaction.reacted
-  }))));
+  })))));
 };

package/dist/esm/components/Reaction/styles.js

@@ -12,6 +12,9 @@ var akHeight = 24;
  * of FlashAnimation b/c it otherwise throws off the flash styling
  */
 
+export var containerStyle = css({
+  position: 'relative'
+});
 export var emojiStyle = css({
   transformOrigin: 'center center 0',
   lineHeight: '12px',
@@ -59,4 +62,7 @@ export var flashStyle = css({
   alignItems: 'center',
   borderRadius: '10px',
   height: "".concat(flashHeight, "px")
+});
+export var emojiNoReactionStyle = css({
+  padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-025, 2px)", " ", "var(--ds-space-050, 4px)", " 10px")
 });

package/dist/esm/components/ReactionParticleEffect/ReactionParticleEffect.js

@@ -0,0 +1,22 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+/** @jsx jsx */
+import { ResourcedEmoji } from '@atlaskit/emoji';
+import { jsx } from '@emotion/react';
+import { containerStyle, reactionParticleStyle } from './styles';
+export var PARTICLE_COUNT = 4;
+export var ReactionParticleEffect = function ReactionParticleEffect(_ref) {
+  var emojiProvider = _ref.emojiProvider,
+    emojiId = _ref.emojiId;
+  return jsx("div", {
+    css: containerStyle
+  }, _toConsumableArray(Array(PARTICLE_COUNT)).map(function (_, index) {
+    return jsx("div", {
+      key: index,
+      css: reactionParticleStyle
+    }, jsx(ResourcedEmoji, {
+      emojiProvider: emojiProvider,
+      emojiId: emojiId,
+      fitToHeight: 16
+    }));
+  }));
+};

package/dist/esm/components/ReactionParticleEffect/index.js

@@ -0,0 +1 @@
+export { ReactionParticleEffect } from './ReactionParticleEffect';

package/dist/esm/components/ReactionParticleEffect/styles.js

@@ -0,0 +1,52 @@
+import { layers } from '@atlaskit/theme/constants';
+import { css, keyframes } from '@emotion/react';
+var fade = keyframes({
+  '0%': {
+    opacity: 0
+  },
+  '20%': {
+    opacity: 1
+  },
+  '60%': {
+    opacity: 1
+  },
+  '100%': {
+    opacity: 0
+  }
+});
+var float = keyframes({
+  '0%': {
+    transform: 'translateY(0) scale(1)'
+  },
+  '100%': {
+    transform: 'translateY(-120px) scale(1.7)'
+  }
+});
+export var containerStyle = css({
+  position: 'relative',
+  left: 8,
+  // Ensure the effect displays above tooltips
+  zIndex: layers.tooltip() + 1
+});
+export var reactionParticleStyle = css({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  pointerEvents: 'none',
+  opacity: 0,
+  animation: "".concat(fade, " ease-in-out, ").concat(float, " ease"),
+  animationDuration: '700ms',
+  // Override position and delay for each particle
+  ':nth-child(2)': {
+    left: -5,
+    animationDelay: '0.15s'
+  },
+  ':nth-child(3)': {
+    left: 8,
+    animationDelay: '0.3s'
+  },
+  ':nth-child(4)': {
+    left: -1,
+    animationDelay: '0.45s'
+  }
+});

package/dist/esm/components/Reactions/Reactions.js

@@ -67,6 +67,8 @@ export function getTooltip(status, errorMessage) {
 export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
   var _ref$flash = _ref.flash,
     flash = _ref$flash === void 0 ? {} : _ref$flash,
+    _ref$particleEffectBy = _ref.particleEffectByEmoji,
+    particleEffectByEmoji = _ref$particleEffectBy === void 0 ? {} : _ref$particleEffectBy,
     status = _ref.status,
     errorMessage = _ref.errorMessage,
     loadReaction = _ref.loadReaction,
@@ -258,7 +260,8 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       onFocused: handleReactionFocused,
       flash: flash[reaction.emojiId],
       handleUserListClick: handleOpenReactionsDialog,
-      allowUserDialog: allowUserDialog
+      allowUserDialog: allowUserDialog,
+      showParticleEffect: particleEffectByEmoji[reaction.emojiId]
     });
   }), jsx(ReactionPicker, {
     css: reactionPickerStyle,

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

@@ -1,8 +1,8 @@
 import { jsx } from '@emotion/react';
-import { EmojiProvider } from '@atlaskit/emoji';
-import { ReactionSummary, ReactionClick, ReactionMouseEnter } from '../../types';
-import { ReactionTooltipProps } from '../ReactionTooltip';
-import { ReactionFocused } from '../../types/reaction';
+import { type EmojiProvider } from '@atlaskit/emoji';
+import { type ReactionSummary, type ReactionClick, type ReactionMouseEnter } from '../../types';
+import { type ReactionTooltipProps } from '../ReactionTooltip';
+import { type ReactionFocused } from '../../types/reaction';
 /**
  * Test id for Reaction item wrapper div
  */
@@ -36,6 +36,10 @@ export interface ReactionProps extends Pick<ReactionTooltipProps, 'allowUserDial
      * Show custom animation or render as standard without animation (defaults to false)
      */
     flash?: boolean;
+    /**
+     * Show a floating emoji particle effect (usually in response to a new reaction) (defaults to false)
+     */
+    showParticleEffect?: boolean;
     /**
      * Optional function when the user wants to see more users in a modal
      */
@@ -44,4 +48,4 @@ export interface ReactionProps extends Pick<ReactionTooltipProps, 'allowUserDial
 /**
  * Render an emoji reaction button
  */
-export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, className, flash, handleUserListClick, allowUserDialog, }: ReactionProps) => jsx.JSX.Element;
+export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, className, flash, showParticleEffect, handleUserListClick, allowUserDialog, }: ReactionProps) => jsx.JSX.Element;

package/dist/types/components/Reaction/styles.d.ts

@@ -3,8 +3,10 @@
  * Padding and line height are set within the child components
  * of FlashAnimation b/c it otherwise throws off the flash styling
  */
+export declare const containerStyle: import("@emotion/react").SerializedStyles;
 export declare const emojiStyle: import("@emotion/react").SerializedStyles;
 export declare const reactionStyle: import("@emotion/react").SerializedStyles;
 export declare const reactedStyle: import("@emotion/react").SerializedStyles;
 export declare const flashHeight: number;
 export declare const flashStyle: import("@emotion/react").SerializedStyles;
+export declare const emojiNoReactionStyle: import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,16 @@
+/** @jsx jsx */
+import { type EmojiProvider, type EmojiId } from '@atlaskit/emoji';
+import { jsx } from '@emotion/react';
+export declare const PARTICLE_COUNT = 4;
+interface ReactionParticleEffectProps {
+    /**
+     * ID of the emoji to show within the particle effect
+     */
+    emojiId: EmojiId;
+    /**
+     * Provider for loading emojis
+     */
+    emojiProvider: Promise<EmojiProvider>;
+}
+export declare const ReactionParticleEffect: ({ emojiProvider, emojiId }: ReactionParticleEffectProps) => jsx.JSX.Element;
+export {};

package/dist/types/components/ReactionParticleEffect/index.d.ts

@@ -0,0 +1 @@
+export { ReactionParticleEffect } from './ReactionParticleEffect';

package/dist/types/components/ReactionParticleEffect/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const containerStyle: import("@emotion/react").SerializedStyles;
+export declare const reactionParticleStyle: import("@emotion/react").SerializedStyles;

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

@@ -1,11 +1,11 @@
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
-import { OnCloseHandler } from '@atlaskit/modal-dialog';
-import { onDialogSelectReactionChange, ReactionStatus, ReactionClick, ReactionSummary, QuickReactionEmojiSummary } from '../../types';
-import { ReactionProps } from '../Reaction';
-import { ReactionPickerProps } from '../ReactionPicker';
-import { SelectorProps } from '../Selector';
+import { type OnCloseHandler } from '@atlaskit/modal-dialog';
+import { type onDialogSelectReactionChange, ReactionStatus, type ReactionClick, type ReactionSummary, type QuickReactionEmojiSummary } from '../../types';
+import { type ReactionProps } from '../Reaction';
+import { type ReactionPickerProps } from '../ReactionPicker';
+import { type SelectorProps } from '../Selector';
 /**
  * Set of all available UFO experiences relating to reactions dialog
  */
@@ -56,6 +56,11 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * Optional emoji reactions list to show custom animation or render as standard (key => emoji string "id", value => true/false to show custom animation)
      */
     flash?: Record<string, boolean>;
+    /**
+     * Optional emoji reactions list to show floating emoji particle effect (key => emoji string "id", value => true/false to show the particle effect).
+     * Generally used for newly added reactions.
+     */
+    particleEffectByEmoji?: Record<string, boolean>;
     /**
      * Optional event to get reaction details for an emoji
      * @param emojiId current reaction emoji id
@@ -93,4 +98,4 @@ export declare function getTooltip(status: ReactionStatus, errorMessage?: string
 /**
  * Renders list of reactions
  */
-export declare const Reactions: React.MemoExoticComponent<({ flash, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onReactionHover, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, emojiPickerSize, miniMode, }: ReactionsProps) => jsx.JSX.Element>;
+export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onReactionHover, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, emojiPickerSize, miniMode, }: ReactionsProps) => jsx.JSX.Element>;

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

@@ -1,8 +1,8 @@
 import { jsx } from '@emotion/react';
-import { EmojiProvider } from '@atlaskit/emoji';
-import { ReactionSummary, ReactionClick, ReactionMouseEnter } from '../../types';
-import { ReactionTooltipProps } from '../ReactionTooltip';
-import { ReactionFocused } from '../../types/reaction';
+import { type EmojiProvider } from '@atlaskit/emoji';
+import { type ReactionSummary, type ReactionClick, type ReactionMouseEnter } from '../../types';
+import { type ReactionTooltipProps } from '../ReactionTooltip';
+import { type ReactionFocused } from '../../types/reaction';
 /**
  * Test id for Reaction item wrapper div
  */
@@ -36,6 +36,10 @@ export interface ReactionProps extends Pick<ReactionTooltipProps, 'allowUserDial
      * Show custom animation or render as standard without animation (defaults to false)
      */
     flash?: boolean;
+    /**
+     * Show a floating emoji particle effect (usually in response to a new reaction) (defaults to false)
+     */
+    showParticleEffect?: boolean;
     /**
      * Optional function when the user wants to see more users in a modal
      */
@@ -44,4 +48,4 @@ export interface ReactionProps extends Pick<ReactionTooltipProps, 'allowUserDial
 /**
  * Render an emoji reaction button
  */
-export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, className, flash, handleUserListClick, allowUserDialog, }: ReactionProps) => jsx.JSX.Element;
+export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, className, flash, showParticleEffect, handleUserListClick, allowUserDialog, }: ReactionProps) => jsx.JSX.Element;

package/dist/types-ts4.5/components/Reaction/styles.d.ts

@@ -3,8 +3,10 @@
  * Padding and line height are set within the child components
  * of FlashAnimation b/c it otherwise throws off the flash styling
  */
+export declare const containerStyle: import("@emotion/react").SerializedStyles;
 export declare const emojiStyle: import("@emotion/react").SerializedStyles;
 export declare const reactionStyle: import("@emotion/react").SerializedStyles;
 export declare const reactedStyle: import("@emotion/react").SerializedStyles;
 export declare const flashHeight: number;
 export declare const flashStyle: import("@emotion/react").SerializedStyles;
+export declare const emojiNoReactionStyle: import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,16 @@
+/** @jsx jsx */
+import { type EmojiProvider, type EmojiId } from '@atlaskit/emoji';
+import { jsx } from '@emotion/react';
+export declare const PARTICLE_COUNT = 4;
+interface ReactionParticleEffectProps {
+    /**
+     * ID of the emoji to show within the particle effect
+     */
+    emojiId: EmojiId;
+    /**
+     * Provider for loading emojis
+     */
+    emojiProvider: Promise<EmojiProvider>;
+}
+export declare const ReactionParticleEffect: ({ emojiProvider, emojiId }: ReactionParticleEffectProps) => jsx.JSX.Element;
+export {};

package/dist/types-ts4.5/components/ReactionParticleEffect/index.d.ts

@@ -0,0 +1 @@
+export { ReactionParticleEffect } from './ReactionParticleEffect';

package/dist/types-ts4.5/components/ReactionParticleEffect/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const containerStyle: import("@emotion/react").SerializedStyles;
+export declare const reactionParticleStyle: import("@emotion/react").SerializedStyles;

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

@@ -1,11 +1,11 @@
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
-import { OnCloseHandler } from '@atlaskit/modal-dialog';
-import { onDialogSelectReactionChange, ReactionStatus, ReactionClick, ReactionSummary, QuickReactionEmojiSummary } from '../../types';
-import { ReactionProps } from '../Reaction';
-import { ReactionPickerProps } from '../ReactionPicker';
-import { SelectorProps } from '../Selector';
+import { type OnCloseHandler } from '@atlaskit/modal-dialog';
+import { type onDialogSelectReactionChange, ReactionStatus, type ReactionClick, type ReactionSummary, type QuickReactionEmojiSummary } from '../../types';
+import { type ReactionProps } from '../Reaction';
+import { type ReactionPickerProps } from '../ReactionPicker';
+import { type SelectorProps } from '../Selector';
 /**
  * Set of all available UFO experiences relating to reactions dialog
  */
@@ -56,6 +56,11 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * Optional emoji reactions list to show custom animation or render as standard (key => emoji string "id", value => true/false to show custom animation)
      */
     flash?: Record<string, boolean>;
+    /**
+     * Optional emoji reactions list to show floating emoji particle effect (key => emoji string "id", value => true/false to show the particle effect).
+     * Generally used for newly added reactions.
+     */
+    particleEffectByEmoji?: Record<string, boolean>;
     /**
      * Optional event to get reaction details for an emoji
      * @param emojiId current reaction emoji id
@@ -93,4 +98,4 @@ export declare function getTooltip(status: ReactionStatus, errorMessage?: string
 /**
  * Renders list of reactions
  */
-export declare const Reactions: React.MemoExoticComponent<({ flash, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onReactionHover, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, emojiPickerSize, miniMode, }: ReactionsProps) => jsx.JSX.Element>;
+export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onReactionHover, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, emojiPickerSize, miniMode, }: ReactionsProps) => jsx.JSX.Element>;

package/package.json

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