@atlaskit/reactions 22.12.0 → 22.13.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/reactions
 
+## 22.13.0
+
+### Minor Changes
+
+- [#138899](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/138899)
+  [`5d280e98cb44f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5d280e98cb44f) -
+  Add on reactions success callback to reactions component
+
+## 22.12.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 22.12.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.12.0";
+var packageVersion = "22.13.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -17,7 +17,8 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _components = require("../../components");
 var _store2 = require("../../store");
 var _types = require("../../types");
-var _excluded = ["ari", "containerAri", "store", "particleEffectByEmojiEnabled"];
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _excluded = ["ari", "containerAri", "store", "particleEffectByEmojiEnabled", "onReactionSuccess"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && 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; }
 /**
@@ -63,18 +64,28 @@ var mapStateToPropsHelper = exports.mapStateToPropsHelper = function mapStateToP
 /**
  * Export the mapper function outside the component so easier to do unit tests
  */
-var mapDispatchToPropsHelper = exports.mapDispatchToPropsHelper = function mapDispatchToPropsHelper(actions, containerAri, ari) {
+var mapDispatchToPropsHelper = exports.mapDispatchToPropsHelper = function mapDispatchToPropsHelper(actions, containerAri, ari, successCallBack) {
   return {
     loadReaction: function loadReaction() {
       actions.getReactions(containerAri, ari);
     },
     onReactionClick: function onReactionClick(emojiId) {
+      // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+      if ((0, _platformFeatureFlags.fg)('platform_reaction_success_callback') && successCallBack) {
+        actions.toggleReaction(containerAri, ari, emojiId, successCallBack);
+        return;
+      }
       actions.toggleReaction(containerAri, ari, emojiId);
     },
     getReactionDetails: function getReactionDetails(emojiId) {
       actions.getDetailedReaction(containerAri, ari, emojiId);
     },
     onSelection: function onSelection(emojiId) {
+      // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+      if ((0, _platformFeatureFlags.fg)('platform_reaction_success_callback') && successCallBack) {
+        actions.addReaction(containerAri, ari, emojiId, successCallBack);
+        return;
+      }
       actions.addReaction(containerAri, ari, emojiId);
     }
   };
@@ -84,6 +95,7 @@ var ConnectedReactionsView = exports.ConnectedReactionsView = function Connected
     containerAri = props.containerAri,
     store = props.store,
     particleEffectByEmojiEnabled = props.particleEffectByEmojiEnabled,
+    onReactionSuccess = props.onReactionSuccess,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   /**
    * Reference to the <Reactions /> component instance mandatory props
@@ -132,8 +144,8 @@ var ConnectedReactionsView = exports.ConnectedReactionsView = function Connected
    * @param actions list of actions in the store instance
    */
   var mapDispatchToProps = (0, _react.useCallback)(function (actions) {
-    return mapDispatchToPropsHelper(actions, containerAri, ari);
-  }, [ari, containerAri]);
+    return mapDispatchToPropsHelper(actions, containerAri, ari, onReactionSuccess);
+  }, [ari, containerAri, onReactionSuccess]);
   (0, _react.useEffect)(function () {
     (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
       var _store, state, dispatch;

package/dist/cjs/i18n/en.js

@@ -21,6 +21,7 @@ var _default = exports.default = {
   'fabric.reactions.other.reacted.users': '{count, plural, one {and one other} other {and {count} others}}',
   'fabric.reactions.reactwithemoji': 'React with {emoji} emoji',
   'fabric.reactions.summary': 'View all user reactions',
+  'reaction-picker-trigger.add.reaction.message': 'Add a reaction',
   'reactions.dialog.close': 'Close',
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Left Navigate',

package/dist/cjs/i18n/en_GB.js

@@ -21,6 +21,7 @@ var _default = exports.default = {
   'fabric.reactions.other.reacted.users': '{count, plural, one {and one other} other {and {count} others}}',
   'fabric.reactions.reactwithemoji': 'React with {emoji} emoji',
   'fabric.reactions.summary': 'View all user reactions',
+  'reaction-picker-trigger.add.reaction.message': 'Add a reaction',
   'reactions.dialog.close': 'Close',
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Left Navigate',

package/dist/cjs/i18n/en_ZZ.js

@@ -21,6 +21,7 @@ var _default = exports.default = {
   'fabric.reactions.other.reacted.users': '{count, plural, one {⁣⁢and one other‍⁠؜⁠⁡‌⁠⁠⁠⁣⁤} other {⁣⁢and {count} others‍⁠؜⁠⁡‌⁠⁠⁠⁣⁤}}',
   'fabric.reactions.reactwithemoji': '⁣⁢React with {emoji} emoji‌‍؜‍⁡⁠⁡⁣⁤',
   'fabric.reactions.summary': '⁣⁢View all user reactions‌⁡‍⁡‌‌⁡‌⁠‍⁡⁠⁣⁤',
+  'reaction-picker-trigger.add.reaction.message': '⁣⁢Add a reaction‌⁡‍؜؜⁠؜؜⁠⁠⁣⁤',
   'reactions.dialog.close': '⁣⁢Close‍⁡‌؜‍⁡‌‌⁣⁤',
   'reactions.dialog.emoji.name': '⁣⁢{emojiName}⁡‌‌‍؜⁠⁡‍⁡؜⁠‌‌‍‍⁡⁣⁤',
   'reactions.dialog.left.navigate': '⁣⁢Left Navigate؜‍‌؜⁠؜⁡‍⁠⁠⁡⁣⁤',

package/dist/cjs/store/MemoryReactionsStore.js

@@ -14,6 +14,7 @@ var _batched = require("./batched");
 var _utils = require("./utils");
 var _constants = require("../shared/constants");
 var _ufo = require("../ufo");
+var _reaction = require("../types/reaction");
 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; }
 /**
@@ -133,7 +134,7 @@ var MemoryReactionsStore = exports.MemoryReactionsStore = /*#__PURE__*/function
         });
       };
     });
-    (0, _defineProperty2.default)(this, "doAddReaction", function (reaction) {
+    (0, _defineProperty2.default)(this, "doAddReaction", function (reaction, onSuccess) {
       var containerAri = reaction.containerAri,
         ari = reaction.ari,
         emojiId = reaction.emojiId;
@@ -156,6 +157,7 @@ var MemoryReactionsStore = exports.MemoryReactionsStore = /*#__PURE__*/function
         }
         // ufo add reaction success
         exp.success();
+        onSuccess === null || onSuccess === void 0 || onSuccess(_reaction.ReactionUpdateType.added, ari, emojiId);
       }).catch(function (error) {
         if ((0, _utils.isRealErrorFromService)(error.code)) {
           _this.createAnalyticsEvent && (0, _analytics.createAndFireSafe)(_this.createAnalyticsEvent, _analytics.createRestFailedEvent, 'addReaction', error.code);
@@ -170,7 +172,7 @@ var MemoryReactionsStore = exports.MemoryReactionsStore = /*#__PURE__*/function
         return Promise.reject(error);
       });
     });
-    (0, _defineProperty2.default)(this, "doRemoveReaction", function (reaction) {
+    (0, _defineProperty2.default)(this, "doRemoveReaction", function (reaction, onSuccess) {
       var containerAri = reaction.containerAri,
         ari = reaction.ari,
         emojiId = reaction.emojiId;
@@ -191,6 +193,7 @@ var MemoryReactionsStore = exports.MemoryReactionsStore = /*#__PURE__*/function
       _this.client.deleteReaction(containerAri, ari, emojiId, _this.metadata).then(function (_) {
         // ufo add reaction success
         exp.success();
+        onSuccess === null || onSuccess === void 0 || onSuccess(_reaction.ReactionUpdateType.removed, ari, emojiId);
       }).catch(function (error) {
         // ufo add reaction failure
         exp.failure({
@@ -359,7 +362,7 @@ var MemoryReactionsStore = exports.MemoryReactionsStore = /*#__PURE__*/function
     key: "withReaction",
     value: function withReaction(reactedCallback, notReactedCallback) {
       var _this3 = this;
-      return function (containerAri, ari, emojiId) {
+      return function (containerAri, ari, emojiId, onSuccess) {
         _this3.withReadyReaction(containerAri, ari)(function (reactionsState) {
           var reaction = reactionsState.reactions.find((0, _utils.byEmojiId)(emojiId)) || {
             containerAri: containerAri,
@@ -369,7 +372,7 @@ var MemoryReactionsStore = exports.MemoryReactionsStore = /*#__PURE__*/function
             reacted: false
           };
           var callback = reaction.reacted || !notReactedCallback ? reactedCallback : notReactedCallback;
-          var updatedReaction = callback(reaction);
+          var updatedReaction = callback(reaction, onSuccess);
           if (updatedReaction && !(updatedReaction instanceof Function)) {
             return (0, _utils.readyState)(reactionsState.reactions.map((0, _utils.updateByEmojiId)(emojiId, updatedReaction)));
           }

package/dist/cjs/types/Actions.js

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/types/Updater.js

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/types/reaction.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ReactionStatus = void 0;
+exports.ReactionUpdateType = exports.ReactionStatus = void 0;
 /**
  * Collection of reactions as object (key is unique id from containerAri and ari combined)
  */
@@ -33,6 +33,18 @@ exports.ReactionStatus = void 0;
  * @param emojiId id of emoji
  * @param event (Optional) custom DOM event handler callback
  */
+var ReactionUpdateType = exports.ReactionUpdateType = /*#__PURE__*/function (ReactionUpdateType) {
+  ReactionUpdateType["added"] = "added";
+  ReactionUpdateType["removed"] = "removed";
+  return ReactionUpdateType;
+}({});
+/**
+ * Event handler that is invoked when a reaction update is successful.
+ *
+ * @param {ReactionUpdateType} action - The action performed on the reaction.
+ * @param ari - The ARI (Atlassian Resource Identifier) of the entity.
+ * @param emojiId - The ID of the emoji used in the reaction.
+ */
 /**
  * Condition of the reaction when gets loaded from the store
  */

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

package/dist/es2019/containers/ConnectedReactionsView/ConnectedReactionsView.js

@@ -5,6 +5,7 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { Reactions, UfoErrorBoundary } from '../../components';
 import { ufoExperiences } from '../../store';
 import { ReactionStatus } from '../../types';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 /**
  * State Props required for <Reactions />
@@ -49,18 +50,28 @@ export const mapStateToPropsHelper = (containerAri, ari, particleEffectByEmojiEn
 /**
  * Export the mapper function outside the component so easier to do unit tests
  */
-export const mapDispatchToPropsHelper = (actions, containerAri, ari) => {
+export const mapDispatchToPropsHelper = (actions, containerAri, ari, successCallBack) => {
   return {
     loadReaction: () => {
       actions.getReactions(containerAri, ari);
     },
     onReactionClick: emojiId => {
+      // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+      if (fg('platform_reaction_success_callback') && successCallBack) {
+        actions.toggleReaction(containerAri, ari, emojiId, successCallBack);
+        return;
+      }
       actions.toggleReaction(containerAri, ari, emojiId);
     },
     getReactionDetails: emojiId => {
       actions.getDetailedReaction(containerAri, ari, emojiId);
     },
     onSelection: emojiId => {
+      // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+      if (fg('platform_reaction_success_callback') && successCallBack) {
+        actions.addReaction(containerAri, ari, emojiId, successCallBack);
+        return;
+      }
       actions.addReaction(containerAri, ari, emojiId);
     }
   };
@@ -71,6 +82,7 @@ export const ConnectedReactionsView = props => {
     containerAri,
     store,
     particleEffectByEmojiEnabled,
+    onReactionSuccess,
     ...rest
   } = props;
   /**
@@ -115,8 +127,8 @@ export const ConnectedReactionsView = props => {
    * @param actions list of actions in the store instance
    */
   const mapDispatchToProps = useCallback(actions => {
-    return mapDispatchToPropsHelper(actions, containerAri, ari);
-  }, [ari, containerAri]);
+    return mapDispatchToPropsHelper(actions, containerAri, ari, onReactionSuccess);
+  }, [ari, containerAri, onReactionSuccess]);
   useEffect(() => {
     (async () => {
       const _store = await Promise.resolve(store);

package/dist/es2019/i18n/en.js

@@ -15,6 +15,7 @@ export default {
   'fabric.reactions.other.reacted.users': '{count, plural, one {and one other} other {and {count} others}}',
   'fabric.reactions.reactwithemoji': 'React with {emoji} emoji',
   'fabric.reactions.summary': 'View all user reactions',
+  'reaction-picker-trigger.add.reaction.message': 'Add a reaction',
   'reactions.dialog.close': 'Close',
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Left Navigate',

package/dist/es2019/i18n/en_GB.js

@@ -15,6 +15,7 @@ export default {
   'fabric.reactions.other.reacted.users': '{count, plural, one {and one other} other {and {count} others}}',
   'fabric.reactions.reactwithemoji': 'React with {emoji} emoji',
   'fabric.reactions.summary': 'View all user reactions',
+  'reaction-picker-trigger.add.reaction.message': 'Add a reaction',
   'reactions.dialog.close': 'Close',
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Left Navigate',

package/dist/es2019/i18n/en_ZZ.js

@@ -15,6 +15,7 @@ export default {
   'fabric.reactions.other.reacted.users': '{count, plural, one {⁣⁢and one other‍⁠؜⁠⁡‌⁠⁠⁠⁣⁤} other {⁣⁢and {count} others‍⁠؜⁠⁡‌⁠⁠⁠⁣⁤}}',
   'fabric.reactions.reactwithemoji': '⁣⁢React with {emoji} emoji‌‍؜‍⁡⁠⁡⁣⁤',
   'fabric.reactions.summary': '⁣⁢View all user reactions‌⁡‍⁡‌‌⁡‌⁠‍⁡⁠⁣⁤',
+  'reaction-picker-trigger.add.reaction.message': '⁣⁢Add a reaction‌⁡‍؜؜⁠؜؜⁠⁠⁣⁤',
   'reactions.dialog.close': '⁣⁢Close‍⁡‌؜‍⁡‌‌⁣⁤',
   'reactions.dialog.emoji.name': '⁣⁢{emojiName}⁡‌‌‍؜⁠⁡‍⁡؜⁠‌‌‍‍⁡⁣⁤',
   'reactions.dialog.left.navigate': '⁣⁢Left Navigate؜‍‌؜⁠؜⁡‍⁠⁠⁡⁣⁤',

package/dist/es2019/store/MemoryReactionsStore.js

@@ -5,6 +5,7 @@ import { batch, batchByKey } from './batched';
 import { addOne, byEmojiId, flattenAris, getReactionsSortFunction, isRealErrorFromService, readyState, removeOne, updateByEmojiId } from './utils';
 import { SAMPLING_RATE_REACTIONS_RENDERED_EXP } from '../shared/constants';
 import { ReactionsAdd, ReactionDetailsFetch, ReactionsRemove, sampledReactionsRendered } from '../ufo';
+import { ReactionUpdateType } from '../types/reaction';
 
 /**
  * Set of all available UFO experiences relating to reaction element
@@ -121,7 +122,7 @@ export class MemoryReactionsStore {
         return readyState(reactions);
       });
     });
-    _defineProperty(this, "doAddReaction", reaction => {
+    _defineProperty(this, "doAddReaction", (reaction, onSuccess) => {
       const {
         containerAri,
         ari,
@@ -146,6 +147,7 @@ export class MemoryReactionsStore {
         }
         // ufo add reaction success
         exp.success();
+        onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(ReactionUpdateType.added, ari, emojiId);
       }).catch(error => {
         if (isRealErrorFromService(error.code)) {
           this.createAnalyticsEvent && createAndFireSafe(this.createAnalyticsEvent, createRestFailedEvent, 'addReaction', error.code);
@@ -160,7 +162,7 @@ export class MemoryReactionsStore {
         return Promise.reject(error);
       });
     });
-    _defineProperty(this, "doRemoveReaction", reaction => {
+    _defineProperty(this, "doRemoveReaction", (reaction, onSuccess) => {
       const {
         containerAri,
         ari,
@@ -183,6 +185,7 @@ export class MemoryReactionsStore {
       this.client.deleteReaction(containerAri, ari, emojiId, this.metadata).then(_ => {
         // ufo add reaction success
         exp.success();
+        onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(ReactionUpdateType.removed, ari, emojiId);
       }).catch(error => {
         // ufo add reaction failure
         exp.failure({
@@ -351,7 +354,7 @@ export class MemoryReactionsStore {
    *  emojiId. If some state is returned, the new state will be applied.
    */
   withReaction(reactedCallback, notReactedCallback) {
-    return (containerAri, ari, emojiId) => {
+    return (containerAri, ari, emojiId, onSuccess) => {
       this.withReadyReaction(containerAri, ari)(reactionsState => {
         const reaction = reactionsState.reactions.find(byEmojiId(emojiId)) || {
           containerAri,
@@ -361,7 +364,7 @@ export class MemoryReactionsStore {
           reacted: false
         };
         const callback = reaction.reacted || !notReactedCallback ? reactedCallback : notReactedCallback;
-        const updatedReaction = callback(reaction);
+        const updatedReaction = callback(reaction, onSuccess);
         if (updatedReaction && !(updatedReaction instanceof Function)) {
           return readyState(reactionsState.reactions.map(updateByEmojiId(emojiId, updatedReaction)));
         }

package/dist/es2019/types/Actions.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/types/Updater.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/types/reaction.js

@@ -34,6 +34,19 @@
  * @param event (Optional) custom DOM event handler callback
  */
 
+export let ReactionUpdateType = /*#__PURE__*/function (ReactionUpdateType) {
+  ReactionUpdateType["added"] = "added";
+  ReactionUpdateType["removed"] = "removed";
+  return ReactionUpdateType;
+}({});
+/**
+ * Event handler that is invoked when a reaction update is successful.
+ *
+ * @param {ReactionUpdateType} action - The action performed on the reaction.
+ * @param ari - The ARI (Atlassian Resource Identifier) of the entity.
+ * @param emojiId - The ID of the emoji used in the reaction.
+ */
+
 /**
  * Condition of the reaction when gets loaded from the store
  */

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

package/dist/esm/containers/ConnectedReactionsView/ConnectedReactionsView.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["ari", "containerAri", "store", "particleEffectByEmojiEnabled"];
+var _excluded = ["ari", "containerAri", "store", "particleEffectByEmojiEnabled", "onReactionSuccess"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { FabricElementsAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
@@ -10,6 +10,7 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { Reactions, UfoErrorBoundary } from '../../components';
 import { ufoExperiences } from '../../store';
 import { ReactionStatus } from '../../types';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 /**
  * State Props required for <Reactions />
@@ -54,18 +55,28 @@ export var mapStateToPropsHelper = function mapStateToPropsHelper(containerAri,
 /**
  * Export the mapper function outside the component so easier to do unit tests
  */
-export var mapDispatchToPropsHelper = function mapDispatchToPropsHelper(actions, containerAri, ari) {
+export var mapDispatchToPropsHelper = function mapDispatchToPropsHelper(actions, containerAri, ari, successCallBack) {
   return {
     loadReaction: function loadReaction() {
       actions.getReactions(containerAri, ari);
     },
     onReactionClick: function onReactionClick(emojiId) {
+      // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+      if (fg('platform_reaction_success_callback') && successCallBack) {
+        actions.toggleReaction(containerAri, ari, emojiId, successCallBack);
+        return;
+      }
       actions.toggleReaction(containerAri, ari, emojiId);
     },
     getReactionDetails: function getReactionDetails(emojiId) {
       actions.getDetailedReaction(containerAri, ari, emojiId);
     },
     onSelection: function onSelection(emojiId) {
+      // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+      if (fg('platform_reaction_success_callback') && successCallBack) {
+        actions.addReaction(containerAri, ari, emojiId, successCallBack);
+        return;
+      }
       actions.addReaction(containerAri, ari, emojiId);
     }
   };
@@ -75,6 +86,7 @@ export var ConnectedReactionsView = function ConnectedReactionsView(props) {
     containerAri = props.containerAri,
     store = props.store,
     particleEffectByEmojiEnabled = props.particleEffectByEmojiEnabled,
+    onReactionSuccess = props.onReactionSuccess,
     rest = _objectWithoutProperties(props, _excluded);
   /**
    * Reference to the <Reactions /> component instance mandatory props
@@ -123,8 +135,8 @@ export var ConnectedReactionsView = function ConnectedReactionsView(props) {
    * @param actions list of actions in the store instance
    */
   var mapDispatchToProps = useCallback(function (actions) {
-    return mapDispatchToPropsHelper(actions, containerAri, ari);
-  }, [ari, containerAri]);
+    return mapDispatchToPropsHelper(actions, containerAri, ari, onReactionSuccess);
+  }, [ari, containerAri, onReactionSuccess]);
   useEffect(function () {
     _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
       var _store, state, dispatch;

package/dist/esm/i18n/en.js

@@ -15,6 +15,7 @@ export default {
   'fabric.reactions.other.reacted.users': '{count, plural, one {and one other} other {and {count} others}}',
   'fabric.reactions.reactwithemoji': 'React with {emoji} emoji',
   'fabric.reactions.summary': 'View all user reactions',
+  'reaction-picker-trigger.add.reaction.message': 'Add a reaction',
   'reactions.dialog.close': 'Close',
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Left Navigate',

package/dist/esm/i18n/en_GB.js

@@ -15,6 +15,7 @@ export default {
   'fabric.reactions.other.reacted.users': '{count, plural, one {and one other} other {and {count} others}}',
   'fabric.reactions.reactwithemoji': 'React with {emoji} emoji',
   'fabric.reactions.summary': 'View all user reactions',
+  'reaction-picker-trigger.add.reaction.message': 'Add a reaction',
   'reactions.dialog.close': 'Close',
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Left Navigate',

package/dist/esm/i18n/en_ZZ.js

@@ -15,6 +15,7 @@ export default {
   'fabric.reactions.other.reacted.users': '{count, plural, one {⁣⁢and one other‍⁠؜⁠⁡‌⁠⁠⁠⁣⁤} other {⁣⁢and {count} others‍⁠؜⁠⁡‌⁠⁠⁠⁣⁤}}',
   'fabric.reactions.reactwithemoji': '⁣⁢React with {emoji} emoji‌‍؜‍⁡⁠⁡⁣⁤',
   'fabric.reactions.summary': '⁣⁢View all user reactions‌⁡‍⁡‌‌⁡‌⁠‍⁡⁠⁣⁤',
+  'reaction-picker-trigger.add.reaction.message': '⁣⁢Add a reaction‌⁡‍؜؜⁠؜؜⁠⁠⁣⁤',
   'reactions.dialog.close': '⁣⁢Close‍⁡‌؜‍⁡‌‌⁣⁤',
   'reactions.dialog.emoji.name': '⁣⁢{emojiName}⁡‌‌‍؜⁠⁡‍⁡؜⁠‌‌‍‍⁡⁣⁤',
   'reactions.dialog.left.navigate': '⁣⁢Left Navigate؜‍‌؜⁠؜⁡‍⁠⁠⁡⁣⁤',

package/dist/esm/store/MemoryReactionsStore.js

@@ -9,6 +9,7 @@ import { batch, batchByKey } from './batched';
 import { addOne, byEmojiId, flattenAris, getReactionsSortFunction, isRealErrorFromService, readyState, removeOne, updateByEmojiId } from './utils';
 import { SAMPLING_RATE_REACTIONS_RENDERED_EXP } from '../shared/constants';
 import { ReactionsAdd, ReactionDetailsFetch, ReactionsRemove, sampledReactionsRendered } from '../ufo';
+import { ReactionUpdateType } from '../types/reaction';
 
 /**
  * Set of all available UFO experiences relating to reaction element
@@ -128,7 +129,7 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
         });
       };
     });
-    _defineProperty(this, "doAddReaction", function (reaction) {
+    _defineProperty(this, "doAddReaction", function (reaction, onSuccess) {
       var containerAri = reaction.containerAri,
         ari = reaction.ari,
         emojiId = reaction.emojiId;
@@ -151,6 +152,7 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
         }
         // ufo add reaction success
         exp.success();
+        onSuccess === null || onSuccess === void 0 || onSuccess(ReactionUpdateType.added, ari, emojiId);
       }).catch(function (error) {
         if (isRealErrorFromService(error.code)) {
           _this.createAnalyticsEvent && createAndFireSafe(_this.createAnalyticsEvent, createRestFailedEvent, 'addReaction', error.code);
@@ -165,7 +167,7 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
         return Promise.reject(error);
       });
     });
-    _defineProperty(this, "doRemoveReaction", function (reaction) {
+    _defineProperty(this, "doRemoveReaction", function (reaction, onSuccess) {
       var containerAri = reaction.containerAri,
         ari = reaction.ari,
         emojiId = reaction.emojiId;
@@ -186,6 +188,7 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
       _this.client.deleteReaction(containerAri, ari, emojiId, _this.metadata).then(function (_) {
         // ufo add reaction success
         exp.success();
+        onSuccess === null || onSuccess === void 0 || onSuccess(ReactionUpdateType.removed, ari, emojiId);
       }).catch(function (error) {
         // ufo add reaction failure
         exp.failure({
@@ -354,7 +357,7 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
     key: "withReaction",
     value: function withReaction(reactedCallback, notReactedCallback) {
       var _this3 = this;
-      return function (containerAri, ari, emojiId) {
+      return function (containerAri, ari, emojiId, onSuccess) {
         _this3.withReadyReaction(containerAri, ari)(function (reactionsState) {
           var reaction = reactionsState.reactions.find(byEmojiId(emojiId)) || {
             containerAri: containerAri,
@@ -364,7 +367,7 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
             reacted: false
           };
           var callback = reaction.reacted || !notReactedCallback ? reactedCallback : notReactedCallback;
-          var updatedReaction = callback(reaction);
+          var updatedReaction = callback(reaction, onSuccess);
           if (updatedReaction && !(updatedReaction instanceof Function)) {
             return readyState(reactionsState.reactions.map(updateByEmojiId(emojiId, updatedReaction)));
           }

package/dist/esm/types/Actions.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/Updater.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/reaction.js

@@ -34,6 +34,19 @@
  * @param event (Optional) custom DOM event handler callback
  */
 
+export var ReactionUpdateType = /*#__PURE__*/function (ReactionUpdateType) {
+  ReactionUpdateType["added"] = "added";
+  ReactionUpdateType["removed"] = "removed";
+  return ReactionUpdateType;
+}({});
+/**
+ * Event handler that is invoked when a reaction update is successful.
+ *
+ * @param {ReactionUpdateType} action - The action performed on the reaction.
+ * @param ari - The ARI (Atlassian Resource Identifier) of the entity.
+ * @param emojiId - The ID of the emoji used in the reaction.
+ */
+
 /**
  * Condition of the reaction when gets loaded from the store
  */

package/dist/types/containers/ConnectedReactionsView/ConnectedReactionsView.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { type ReactionsProps, type ReactionPickerProps } from '../../components';
 import { ReactionStatus, type Actions, type State, type StorePropInput } from '../../types';
+import { type ReactionUpdateSuccess } from '../../types/reaction';
 export interface ConnectedReactionsViewProps extends Pick<ReactionsProps, 'quickReactionEmojis' | 'onDialogOpenCallback' | 'onDialogCloseCallback' | 'onDialogSelectReactionCallback' | 'allowUserDialog' | 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode' | 'summaryViewEnabled' | 'subtleReactionsSummaryAndPicker'>, Pick<ReactionPickerProps, 'pickerQuickReactionEmojiIds'> {
     /**
      * Wrapper id for reactions list
@@ -20,6 +21,10 @@ export interface ConnectedReactionsViewProps extends Pick<ReactionsProps, 'quick
      * Optional boolean to control if particle animation on reactions appear
      */
     particleEffectByEmojiEnabled?: boolean;
+    /**
+     * Callback function when a reaction is successfully added
+     */
+    onReactionSuccess?: ReactionUpdateSuccess;
 }
 /**
  * Export the mapper function outside the component so easier to do unit tests
@@ -42,7 +47,7 @@ export declare const mapStateToPropsHelper: (containerAri: string, ari: string,
 /**
  * Export the mapper function outside the component so easier to do unit tests
  */
-export declare const mapDispatchToPropsHelper: (actions: Actions, containerAri: string, ari: string) => {
+export declare const mapDispatchToPropsHelper: (actions: Actions, containerAri: string, ari: string, successCallBack?: ReactionUpdateSuccess) => {
     loadReaction: () => void;
     onReactionClick: (emojiId: string) => void;
     getReactionDetails: (emojiId: string) => void;

package/dist/types/i18n/en.d.ts

@@ -13,6 +13,7 @@ declare const _default: {
     'fabric.reactions.other.reacted.users': string;
     'fabric.reactions.reactwithemoji': string;
     'fabric.reactions.summary': string;
+    'reaction-picker-trigger.add.reaction.message': string;
     'reactions.dialog.close': string;
     'reactions.dialog.emoji.name': string;
     'reactions.dialog.left.navigate': string;

package/dist/types/i18n/en_GB.d.ts

@@ -13,6 +13,7 @@ declare const _default: {
     'fabric.reactions.other.reacted.users': string;
     'fabric.reactions.reactwithemoji': string;
     'fabric.reactions.summary': string;
+    'reaction-picker-trigger.add.reaction.message': string;
     'reactions.dialog.close': string;
     'reactions.dialog.emoji.name': string;
     'reactions.dialog.left.navigate': string;

package/dist/types/i18n/en_ZZ.d.ts

@@ -13,6 +13,7 @@ declare const _default: {
     'fabric.reactions.other.reacted.users': string;
     'fabric.reactions.reactwithemoji': string;
     'fabric.reactions.summary': string;
+    'reaction-picker-trigger.add.reaction.message': string;
     'reactions.dialog.close': string;
     'reactions.dialog.emoji.name': string;
     'reactions.dialog.left.navigate': string;

package/dist/types/store/MemoryReactionsStore.d.ts

@@ -1,5 +1,6 @@
 import { type CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { type Client, type OnChangeCallback, type State, type Store } from '../types';
+import { type ReactionUpdateSuccess } from '../types/reaction';
 /**
  * Set of all available UFO experiences relating to reaction element
  */
@@ -86,8 +87,8 @@ export declare class MemoryReactionsStore implements Store {
     private doRemoveReaction;
     setCreateAnalyticsEvent: (createAnalyticsEvent?: CreateUIAnalyticsEvent) => void;
     getReactions: (key: string, ...args: string[]) => void;
-    toggleReaction: (containerAri: string, ari: string, emojiId: string) => void;
-    addReaction: (containerAri: string, ari: string, emojiId: string) => void;
+    toggleReaction: (containerAri: string, ari: string, emojiId: string, onSuccess?: ReactionUpdateSuccess) => void;
+    addReaction: (containerAri: string, ari: string, emojiId: string, onSuccess?: ReactionUpdateSuccess) => void;
     getDetailedReaction: (containerAri: string, ari: string, emojiId: string) => void;
     getState: () => State;
     onChange: (callback: OnChangeCallback) => void;

package/dist/types/types/Actions.d.ts

@@ -1,10 +1,11 @@
+import { type ReactionUpdateSuccess } from './reaction';
 /**
  * Event callback by the client to the API
  * @param containerAri the container for reactions/ari in the page (attached to the "quickReactionEmojis" prop)
  * @param ariunique Atlassian identifier for an emoji (attached to the "quickReactionEmojis" prop)
  * @param emojiId unique identifier guid for the emoji
  */
-export type ReactionAction = (containerAri: string, ari: string, emojiId: string) => void;
+export type ReactionAction = (containerAri: string, ari: string, emojiId: string, onSuccess?: ReactionUpdateSuccess) => void;
 export type Actions = {
     /**
      * Retrieve reaction collection api

package/dist/types/types/Updater.d.ts

@@ -1 +1,2 @@
-export type Updater<T> = (original: T) => T | void;
+import { type ReactionUpdateSuccess } from './reaction';
+export type Updater<T> = (original: T, onSuccess?: ReactionUpdateSuccess) => T | void;

package/dist/types/types/reaction.d.ts

@@ -79,6 +79,18 @@ export type ReactionMouseEnter = (emojiId: string, event?: React.MouseEvent<any>
  * @param event (Optional) custom DOM event handler callback
  */
 export type ReactionFocused = (emojiId: string, event?: React.FocusEvent<any>) => void;
+export declare enum ReactionUpdateType {
+    added = "added",
+    removed = "removed"
+}
+/**
+ * Event handler that is invoked when a reaction update is successful.
+ *
+ * @param {ReactionUpdateType} action - The action performed on the reaction.
+ * @param ari - The ARI (Atlassian Resource Identifier) of the entity.
+ * @param emojiId - The ID of the emoji used in the reaction.
+ */
+export type ReactionUpdateSuccess = (action: ReactionUpdateType, ari: string, emojiId: string) => void;
 /**
  * Condition of the reaction when gets loaded from the store
  */

package/dist/types-ts4.5/containers/ConnectedReactionsView/ConnectedReactionsView.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { type ReactionsProps, type ReactionPickerProps } from '../../components';
 import { ReactionStatus, type Actions, type State, type StorePropInput } from '../../types';
+import { type ReactionUpdateSuccess } from '../../types/reaction';
 export interface ConnectedReactionsViewProps extends Pick<ReactionsProps, 'quickReactionEmojis' | 'onDialogOpenCallback' | 'onDialogCloseCallback' | 'onDialogSelectReactionCallback' | 'allowUserDialog' | 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode' | 'summaryViewEnabled' | 'subtleReactionsSummaryAndPicker'>, Pick<ReactionPickerProps, 'pickerQuickReactionEmojiIds'> {
     /**
      * Wrapper id for reactions list
@@ -20,6 +21,10 @@ export interface ConnectedReactionsViewProps extends Pick<ReactionsProps, 'quick
      * Optional boolean to control if particle animation on reactions appear
      */
     particleEffectByEmojiEnabled?: boolean;
+    /**
+     * Callback function when a reaction is successfully added
+     */
+    onReactionSuccess?: ReactionUpdateSuccess;
 }
 /**
  * Export the mapper function outside the component so easier to do unit tests
@@ -42,7 +47,7 @@ export declare const mapStateToPropsHelper: (containerAri: string, ari: string,
 /**
  * Export the mapper function outside the component so easier to do unit tests
  */
-export declare const mapDispatchToPropsHelper: (actions: Actions, containerAri: string, ari: string) => {
+export declare const mapDispatchToPropsHelper: (actions: Actions, containerAri: string, ari: string, successCallBack?: ReactionUpdateSuccess) => {
     loadReaction: () => void;
     onReactionClick: (emojiId: string) => void;
     getReactionDetails: (emojiId: string) => void;

package/dist/types-ts4.5/i18n/en.d.ts

@@ -13,6 +13,7 @@ declare const _default: {
     'fabric.reactions.other.reacted.users': string;
     'fabric.reactions.reactwithemoji': string;
     'fabric.reactions.summary': string;
+    'reaction-picker-trigger.add.reaction.message': string;
     'reactions.dialog.close': string;
     'reactions.dialog.emoji.name': string;
     'reactions.dialog.left.navigate': string;

package/dist/types-ts4.5/i18n/en_GB.d.ts

@@ -13,6 +13,7 @@ declare const _default: {
     'fabric.reactions.other.reacted.users': string;
     'fabric.reactions.reactwithemoji': string;
     'fabric.reactions.summary': string;
+    'reaction-picker-trigger.add.reaction.message': string;
     'reactions.dialog.close': string;
     'reactions.dialog.emoji.name': string;
     'reactions.dialog.left.navigate': string;

package/dist/types-ts4.5/i18n/en_ZZ.d.ts

@@ -13,6 +13,7 @@ declare const _default: {
     'fabric.reactions.other.reacted.users': string;
     'fabric.reactions.reactwithemoji': string;
     'fabric.reactions.summary': string;
+    'reaction-picker-trigger.add.reaction.message': string;
     'reactions.dialog.close': string;
     'reactions.dialog.emoji.name': string;
     'reactions.dialog.left.navigate': string;

package/dist/types-ts4.5/store/MemoryReactionsStore.d.ts

@@ -1,5 +1,6 @@
 import { type CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { type Client, type OnChangeCallback, type State, type Store } from '../types';
+import { type ReactionUpdateSuccess } from '../types/reaction';
 /**
  * Set of all available UFO experiences relating to reaction element
  */
@@ -86,8 +87,8 @@ export declare class MemoryReactionsStore implements Store {
     private doRemoveReaction;
     setCreateAnalyticsEvent: (createAnalyticsEvent?: CreateUIAnalyticsEvent) => void;
     getReactions: (key: string, ...args: string[]) => void;
-    toggleReaction: (containerAri: string, ari: string, emojiId: string) => void;
-    addReaction: (containerAri: string, ari: string, emojiId: string) => void;
+    toggleReaction: (containerAri: string, ari: string, emojiId: string, onSuccess?: ReactionUpdateSuccess) => void;
+    addReaction: (containerAri: string, ari: string, emojiId: string, onSuccess?: ReactionUpdateSuccess) => void;
     getDetailedReaction: (containerAri: string, ari: string, emojiId: string) => void;
     getState: () => State;
     onChange: (callback: OnChangeCallback) => void;

package/dist/types-ts4.5/types/Actions.d.ts

@@ -1,10 +1,11 @@
+import { type ReactionUpdateSuccess } from './reaction';
 /**
  * Event callback by the client to the API
  * @param containerAri the container for reactions/ari in the page (attached to the "quickReactionEmojis" prop)
  * @param ariunique Atlassian identifier for an emoji (attached to the "quickReactionEmojis" prop)
  * @param emojiId unique identifier guid for the emoji
  */
-export type ReactionAction = (containerAri: string, ari: string, emojiId: string) => void;
+export type ReactionAction = (containerAri: string, ari: string, emojiId: string, onSuccess?: ReactionUpdateSuccess) => void;
 export type Actions = {
     /**
      * Retrieve reaction collection api

package/dist/types-ts4.5/types/Updater.d.ts

@@ -1 +1,2 @@
-export type Updater<T> = (original: T) => T | void;
+import { type ReactionUpdateSuccess } from './reaction';
+export type Updater<T> = (original: T, onSuccess?: ReactionUpdateSuccess) => T | void;

package/dist/types-ts4.5/types/reaction.d.ts

@@ -79,6 +79,18 @@ export type ReactionMouseEnter = (emojiId: string, event?: React.MouseEvent<any>
  * @param event (Optional) custom DOM event handler callback
  */
 export type ReactionFocused = (emojiId: string, event?: React.FocusEvent<any>) => void;
+export declare enum ReactionUpdateType {
+    added = "added",
+    removed = "removed"
+}
+/**
+ * Event handler that is invoked when a reaction update is successful.
+ *
+ * @param {ReactionUpdateType} action - The action performed on the reaction.
+ * @param ari - The ARI (Atlassian Resource Identifier) of the entity.
+ * @param emojiId - The ID of the emoji used in the reaction.
+ */
+export type ReactionUpdateSuccess = (action: ReactionUpdateType, ari: string, emojiId: string) => void;
 /**
  * Condition of the reaction when gets loaded from the store
  */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "22.12.0",
+	"version": "22.13.0",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -42,8 +42,8 @@
 		"@atlaskit/modal-dialog": "^12.15.0",
 		"@atlaskit/motion": "^1.9.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/popper": "^6.2.0",
-		"@atlaskit/popup": "1.24.2",
+		"@atlaskit/popper": "^6.3.0",
+		"@atlaskit/popup": "1.25.0",
 		"@atlaskit/primitives": "^12.1.0",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/tabs": "^16.4.0",
@@ -64,6 +64,7 @@
 	"devDependencies": {
 		"@atlaskit/elements-test-helpers": "^0.7.0",
 		"@atlaskit/util-data-test": "^17.9.0",
+		"@atlassian/feature-flags-test-utils": "^0.2.0",
 		"@emotion/jest": "^11.8.0",
 		"@testing-library/dom": "^10.1.0",
 		"@testing-library/jest-dom": "^6.4.5",
@@ -111,6 +112,9 @@
 	"platform-feature-flags": {
 		"platform-component-visual-refresh": {
 			"type": "boolean"
+		},
+		"platform_reaction_success_callback": {
+			"type": "boolean"
 		}
 	}
 }