@atlaskit/reactions 22.10.0 → 22.10.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/reactions
 
+## 22.10.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 22.10.1
+
+### Patch Changes
+
+- [#119960](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/119960)
+  [`77542b34dfee2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/77542b34dfee2) -
+  Exposed particleEffectByEmoji prop in ConnectedReactionsView to support particle effect
+- Updated dependencies
+
 ## 22.10.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 = "22.10.0";
+var packageVersion = "22.10.2";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/cjs/components/Counter/Counter.js

@@ -9,7 +9,10 @@ var _react2 = require("@emotion/react");
 var _motion = require("@atlaskit/motion");
 var _utils = require("../../shared/utils");
 var _styles = require("./styles");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

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

@@ -6,7 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.highlightStyle = exports.counterLabelStyle = exports.countStyle = exports.containerStyle = void 0;
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766

package/dist/cjs/components/EmojiButton/EmojiButton.js

@@ -12,7 +12,10 @@ var _emoji = require("@atlaskit/emoji");
 var _primitives = require("@atlaskit/primitives");
 var _i18n = require("../../shared/i18n");
 var _utils = require("../../shared/utils");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

package/dist/cjs/components/FlashAnimation/FlashAnimation.js

@@ -6,7 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.RENDER_FLASHANIMATION_TESTID = exports.FlashAnimation = void 0;
 var _react = require("@emotion/react");
 var _styles = require("./styles");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

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

@@ -6,7 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.flashStyle = exports.flashAnimation = exports.containerStyle = void 0;
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var flashTime = 700;

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

@@ -25,7 +25,10 @@ var _styles = require("./styles");
 var _ReactionButton = require("./ReactionButton");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

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

@@ -12,7 +12,10 @@ var _primitives = require("@atlaskit/primitives");
 var _react2 = require("@emotion/react");
 var _FlashAnimation = require("../FlashAnimation");
 var _styles = require("./styles");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

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

@@ -6,7 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 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 */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 /**

package/dist/cjs/components/ReactionDialog/ReactionView.js

@@ -18,7 +18,10 @@ var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _tabs = require("@atlaskit/tabs");
 var _i18n = require("../../shared/i18n");
 var _styles = require("./styles");
-/** @jsx   jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

package/dist/cjs/components/ReactionDialog/ReactionsDialog.js

@@ -18,7 +18,10 @@ var _ReactionsList = require("./ReactionsList");
 var _styles = require("./styles");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

package/dist/cjs/components/ReactionDialog/ReactionsList.js

@@ -17,7 +17,10 @@ var _styles = require("./styles");
 var _ReactionView = require("./ReactionView");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/** @jsx   jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

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

@@ -7,7 +7,10 @@ exports.userStyle = exports.userListStyle = exports.titleStyle = exports.reactio
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../../shared/constants");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var REACTIONS_CONTAINER_WIDTH = 48;

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

@@ -9,7 +9,10 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _emoji = require("@atlaskit/emoji");
 var _react = require("@emotion/react");
 var _styles = require("./styles");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

package/dist/cjs/components/ReactionPicker/ReactionPicker.js

@@ -25,7 +25,10 @@ var _RepositionOnUpdate = require("./RepositionOnUpdate");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-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; } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+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; } /**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 /**
  * Test id for wrapper ReactionPicker div
  */

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

@@ -7,7 +7,10 @@ exports.popupWrapperStyle = exports.popupStyle = exports.pickerStyle = exports.c
 var _react = require("@emotion/react");
 var _constants = require("@atlaskit/theme/constants");
 var _colors = require("@atlaskit/theme/colors");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766

package/dist/cjs/components/ReactionTooltip/ReactionTooltip.js

@@ -13,7 +13,10 @@ var _reactIntlNext = require("react-intl-next");
 var _constants = require("../../shared/constants");
 var _i18n = require("../../shared/i18n");
 var _styles = require("./styles");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

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

@@ -6,7 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.verticalMargin = exports.underlineStyle = exports.tooltipStyle = exports.footerStyle = exports.emojiNameStyle = void 0;
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var verticalMargin = exports.verticalMargin = 5;

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

@@ -28,7 +28,10 @@ var _styles = require("./styles");
 var _ReactionSummary = require("../ReactionSummary/");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

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

@@ -5,7 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.wrapperStyle = exports.seeWhoReactedStyle = exports.reactionPickerStyle = void 0;
 var _react = require("@emotion/react");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766

package/dist/cjs/components/Selector/Selector.js

@@ -16,7 +16,10 @@ var _ShowMore = require("../ShowMore");
 var _styles = require("./styles");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

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

@@ -5,7 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.revealStyle = exports.revealAnimation = void 0;
 var _react = require("@emotion/react");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766

package/dist/cjs/components/ShowMore/ShowMore.js

@@ -11,7 +11,10 @@ var _new = require("@atlaskit/button/new");
 var _more = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/more"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _i18n = require("../../shared/i18n");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 /**

package/dist/cjs/components/Trigger/Trigger.js

@@ -11,7 +11,10 @@ var _react2 = require("@emotion/react");
 var _primitives = require("@atlaskit/primitives");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _emojiAdd = _interopRequireDefault(require("@atlaskit/icon/glyph/emoji-add"));
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

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

@@ -17,7 +17,7 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _components = require("../../components");
 var _store2 = require("../../store");
 var _types = require("../../types");
-var _excluded = ["ari", "containerAri", "store"];
+var _excluded = ["ari", "containerAri", "store", "particleEffectByEmojiEnabled"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
@@ -31,7 +31,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 /**
  * Export the mapper function outside the component so easier to do unit tests
  */
-var mapStateToPropsHelper = exports.mapStateToPropsHelper = function mapStateToPropsHelper(containerAri, ari, state) {
+var mapStateToPropsHelper = exports.mapStateToPropsHelper = function mapStateToPropsHelper(containerAri, ari, particleEffectByEmojiEnabled, state) {
   var reactionsState = state && state.reactions["".concat(containerAri, "|").concat(ari)];
   if (!state || !reactionsState) {
     return {
@@ -44,7 +44,8 @@ var mapStateToPropsHelper = exports.mapStateToPropsHelper = function mapStateToP
       return {
         reactions: reactionsState.reactions,
         status: reactionsState.status,
-        flash: state.flash["".concat(containerAri, "|").concat(ari)]
+        flash: state.flash["".concat(containerAri, "|").concat(ari)],
+        particleEffectByEmoji: particleEffectByEmojiEnabled ? state.particleEffectByEmoji["".concat(containerAri, "|").concat(ari)] : {}
       };
     case _types.ReactionStatus.error:
       return {
@@ -82,6 +83,7 @@ var ConnectedReactionsView = exports.ConnectedReactionsView = function Connected
   var ari = props.ari,
     containerAri = props.containerAri,
     store = props.store,
+    particleEffectByEmojiEnabled = props.particleEffectByEmojiEnabled,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   /**
    * Reference to the <Reactions /> component instance mandatory props
@@ -122,8 +124,8 @@ var ConnectedReactionsView = exports.ConnectedReactionsView = function Connected
    * @param state store instance latest data
    */
   var mapStateToProps = (0, _react.useCallback)(function (state) {
-    return mapStateToPropsHelper(containerAri, ari, state);
-  }, [containerAri, ari]);
+    return mapStateToPropsHelper(containerAri, ari, particleEffectByEmojiEnabled, state);
+  }, [containerAri, ari, particleEffectByEmojiEnabled]);
 
   /**
    * Map the store instance "actions" methods to the <Reactions /> component actions methods

package/dist/cjs/store/MemoryReactionsStore.js

@@ -53,7 +53,8 @@ var MemoryReactionsStore = exports.MemoryReactionsStore = /*#__PURE__*/function
      */
     (0, _defineProperty2.default)(this, "initialState", {
       reactions: {},
-      flash: {}
+      flash: {},
+      particleEffectByEmoji: {}
     });
     /**
      * Update the store state data with a new data
@@ -132,6 +133,7 @@ var MemoryReactionsStore = exports.MemoryReactionsStore = /*#__PURE__*/function
         emojiId = reaction.emojiId;
       _this.optmisticUpdate(containerAri, ari, emojiId)(_utils.addOne);
       _this.flash(reaction);
+      _this.setParticleEffectForEmoji(containerAri, ari, emojiId, true);
       var exp = ufoExperiences.add.getInstance("".concat(ari, "|").concat(emojiId));
       // ufo start reaction experience
       exp.start();
@@ -167,6 +169,7 @@ var MemoryReactionsStore = exports.MemoryReactionsStore = /*#__PURE__*/function
         ari = reaction.ari,
         emojiId = reaction.emojiId;
       var exp = ufoExperiences.remove.getInstance("".concat(ari, "|").concat(emojiId));
+      _this.setParticleEffectForEmoji(containerAri, ari, emojiId, false);
 
       // ufo start reaction experience
 
@@ -299,6 +302,13 @@ var MemoryReactionsStore = exports.MemoryReactionsStore = /*#__PURE__*/function
         flash: _objectSpread(_objectSpread({}, this.state.flash), {}, (0, _defineProperty2.default)({}, "".concat(containerAri, "|").concat(ari), _objectSpread(_objectSpread({}, this.state.flash["".concat(containerAri, "|").concat(ari)]), {}, (0, _defineProperty2.default)({}, emojiId, flash))))
       });
     }
+  }, {
+    key: "setParticleEffectForEmoji",
+    value: function setParticleEffectForEmoji(containerAri, ari, emojiId, enable) {
+      this.setState({
+        particleEffectByEmoji: _objectSpread(_objectSpread({}, this.state.particleEffectByEmoji), {}, (0, _defineProperty2.default)({}, "".concat(containerAri, "|").concat(ari), _objectSpread(_objectSpread({}, this.state.particleEffectByEmoji["".concat(containerAri, "|").concat(ari)]), {}, (0, _defineProperty2.default)({}, emojiId, enable))))
+      });
+    }
   }, {
     key: "withReadyReaction",
     value:

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

package/dist/es2019/components/Counter/Counter.js

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { useEffect, useMemo, useRef } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx, css } from '@emotion/react';

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { N90, B400 } from '@atlaskit/theme/colors';

package/dist/es2019/components/EmojiButton/EmojiButton.js

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
 import { useIntl } from 'react-intl-next';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/es2019/components/FlashAnimation/FlashAnimation.js

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, keyframes } from '@emotion/react';
 import { B75, B300 } from '@atlaskit/theme/colors';

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl-next';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

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

@@ -1,5 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
 import { Pressable, xcss } from '@atlaskit/primitives';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { B50, B75, B300, N20, N40, N400, B100 } from '@atlaskit/theme/colors';

package/dist/es2019/components/ReactionDialog/ReactionView.js

@@ -1,5 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
-/** @jsx   jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { useEffect, useState, useMemo } from 'react';
 import { useIntl } from 'react-intl-next';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/es2019/components/ReactionDialog/ReactionsDialog.js

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { useEffect, useState, useRef, useCallback, useMemo } from 'react';
 import { useIntl } from 'react-intl-next';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/es2019/components/ReactionDialog/ReactionsList.js

@@ -1,4 +1,7 @@
-/** @jsx   jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { useCallback, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { B400, N500, N800 } from '@atlaskit/theme/colors';

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { ResourcedEmoji } from '@atlaskit/emoji';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';

package/dist/es2019/components/ReactionPicker/ReactionPicker.js

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';

package/dist/es2019/components/ReactionTooltip/ReactionTooltip.js

@@ -1,5 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { N90, N800, N0 } from '@atlaskit/theme/colors';

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';