@atlaskit/reactions 21.3.3 → 21.5.0

package/dist/es2019/shared/index.js

@@ -0,0 +1,2 @@
+import * as _Constants from './constants';
+export { _Constants as Constants };

package/dist/es2019/store/ReactionsStore.js

@@ -4,6 +4,11 @@ import * as Types from '../types';
 import { batch, batchByKey } from './batched';
 import * as utils from './utils';
 import { isRealErrorFromService } from './utils';
+import { SAMPLING_RATE_REACTIONS_RENDERED_EXP } from '../analytics/constants';
+import { sampledReactionsRendered } from '../analytics/ufo';
+/**
+ * store main structure
+ */
 
 /**
  * Set of all available UFO experiences relating to reaction element
@@ -20,15 +25,19 @@ export const ufoExperiences = {
   remove: Analytics.UFO.ReactionsRemove,
 
   /**
-   * Experience when the list of reactions gets rendered
+   * Experience when the list of reactions gets rendered with sampling
    */
-  render: Analytics.UFO.ReactionsRendered,
+  render: instanceId => sampledReactionsRendered(instanceId),
 
   /**
    * Experience when a reaction details gets fetched
    */
   fetchDetails: Analytics.UFO.ReactionDetailsFetch
 };
+/**
+ * Collection of methods to manage internal state across the different Reaction container components ConnectedReactionPicker and ConnectedReactionsView
+ */
+
 export class MemoryReactionsStore {
   constructor(client, state = {
     reactions: {},
@@ -131,7 +140,15 @@ export class MemoryReactionsStore {
 
           exp.failure({
             metadata: {
-              error
+              error,
+              source: 'Reaction-Store',
+              data: {
+                containerAri,
+                ari,
+                emojiId,
+                metadata: this.metadata
+              },
+              reason: 'addReaction fetch failed'
             }
           });
         }
@@ -157,7 +174,15 @@ export class MemoryReactionsStore {
         // ufo add reaction failure
         exp.failure({
           metadata: {
-            error
+            error,
+            source: 'Reaction-Store',
+            data: {
+              containerAri,
+              ari,
+              emojiId,
+              metadata: this.metadata
+            },
+            reason: 'deleteReaction fetch failed'
           }
         });
       });
@@ -172,10 +197,13 @@ export class MemoryReactionsStore {
        * TODO:
        * All reactions are usually fetched in a single call to reactions-service. Need to check why "getReactions" gets called randomly 1-2 times everytime on each fetch request despite using same containerAri.
        */
-      const exp = ufoExperiences.render.getInstance(containerAri); // ufo start reaction experience
+      const sampledExp = ufoExperiences.render(containerAri);
+      const arisArr = aris.reduce(utils.flattenAris); // ufo start reaction experience
 
-      exp.start();
-      this.client.getReactions(containerAri, aris.reduce(utils.flattenAris)).then(value => {
+      sampledExp.start({
+        samplingRate: SAMPLING_RATE_REACTIONS_RENDERED_EXP
+      });
+      this.client.getReactions(containerAri, arisArr).then(value => {
         Object.keys(value).map(ari => {
           const reactionsState = this.getReactionsState(containerAri, ari);
           const reactions = reactionsState && reactionsState.status === Types.ReactionStatus.ready ? reactionsState.reactions : undefined;
@@ -186,14 +214,24 @@ export class MemoryReactionsStore {
           Analytics.createAndFireSafe(this.createAnalyticsEvent, Analytics.createRestSucceededEvent, 'getReactions');
         }
 
-        exp.success();
+        sampledExp.success();
       }).catch(error => {
         if (isRealErrorFromService(error.code)) {
           if (this.createAnalyticsEvent) {
             Analytics.createAndFireSafe(this.createAnalyticsEvent, Analytics.createRestFailedEvent, 'getReactions', error.code);
           }
 
-          exp.failure();
+          sampledExp.failure({
+            metadata: {
+              error,
+              source: 'Reaction-Store',
+              data: {
+                containerAri,
+                aris: arisArr.join(',')
+              },
+              reason: 'getReactions fetch failed'
+            }
+          });
           return Promise.reject(error);
         }
       });
@@ -214,7 +252,14 @@ export class MemoryReactionsStore {
         // ufo get reaction details failure
         exp.failure({
           metadata: {
-            error
+            error,
+            source: 'Reaction-Store',
+            data: {
+              containerAri,
+              ari,
+              emojiId
+            },
+            reason: 'getDetailedReaction fetch failed'
           }
         });
       });
@@ -264,7 +309,7 @@ export class MemoryReactionsStore {
     return updater => {
       const reactionsState = this.getReactionsState(containerAri, ari);
 
-      if (reactionsState.status === Types.ReactionStatus.ready) {
+      if (reactionsState && reactionsState.status === Types.ReactionStatus.ready) {
         const updated = updater(reactionsState);
 
         if (updated) {

package/dist/es2019/types/ReactionStatus.js

@@ -1,3 +1,6 @@
+/**
+ * Conditions of the reaction when loaded from the store
+ */
 export let ReactionStatus;
 
 (function (ReactionStatus) {

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "21.3.3"
+	"version": "21.5.0"
 }

package/dist/esm/analytics/constants.js

@@ -0,0 +1,2 @@
+// This rate is used in fetching emoji resource
+export var SAMPLING_RATE_REACTIONS_RENDERED_EXP = 0.02;

package/dist/esm/analytics/ufo.js

@@ -1,4 +1,5 @@
 import { ConcurrentExperience, UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
+import { withSampling } from '@atlaskit/emoji';
 /**
  * Initial experience config object (deferred from @atlaskit/ufo inner types)
  * TODO: Check if possible to add this to exported types from @atlaskit/ufo
@@ -66,4 +67,7 @@ export var ReactionDetailsFetch = new ConcurrentExperience(ExperienceName.REACTI
  * Experience when a reaction emoji gets removed/decrement
  */
 
-export var ReactionsRemove = new ConcurrentExperience(ExperienceName.REACTION_REMOVED, createExperienceConfig(ComponentName.REACTIONS, ExperienceTypes.Experience, ExperiencePerformanceTypes.InlineResult));
+export var ReactionsRemove = new ConcurrentExperience(ExperienceName.REACTION_REMOVED, createExperienceConfig(ComponentName.REACTIONS, ExperienceTypes.Experience, ExperiencePerformanceTypes.InlineResult));
+export var sampledReactionsRendered = function sampledReactionsRendered(instanceId) {
+  return withSampling(ReactionsRendered.getInstance(instanceId));
+};

package/dist/esm/client/MockReactionsClient.js

@@ -1,4 +1,5 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
@@ -7,10 +8,12 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { defaultReactionsByShortName } from '../components/Selector';
-export var containerAri = 'ari:cloud:owner:demo-cloud-id:container/1';
-export var ari = 'ari:cloud:owner:demo-cloud-id:item/1';
-export var reaction = function reaction(shortName, count, reacted) {
+import { Constants } from '../shared';
+export var containerAri = "".concat(Constants.ContainerAriPrefix, "1");
+export var ari = "".concat(Constants.AriPrefix, "1");
+export var getReactionSummary = function getReactionSummary(shortName, count, reacted) {
   return {
     ari: ari,
     containerAri: containerAri,
@@ -19,18 +22,25 @@ export var reaction = function reaction(shortName, count, reacted) {
     reacted: reacted
   };
 };
-export var user = function user(id, displayName) {
+export var getUser = function getUser(id, displayName) {
   return {
     id: id,
     displayName: displayName
   };
 };
 
-var objectReactionKey = function objectReactionKey(containerAri, ari) {
+var getReactionKey = function getReactionKey(containerAri, ari) {
   return "".concat(containerAri, "|").concat(ari);
 };
 
-var defaultUsers = [user('oscar', 'Oscar Wallhult'), user('julien', 'Julien Michel Hoarau'), user('craig', 'Craig Petchell'), user('jerome', 'Jerome Touffe-Blin'), user('esoares', 'Eduardo Soares'), user('lpereira', 'Luiz Pereira'), user('pcurren', 'Paul Curren'), user('ttjandra', 'Tara Tjandra'), user('severington', 'Ste Everington'), user('sguillope', 'Sylvain Guillope'), user('alunnon', 'Alex Lunnon')];
+var defaultUsers = [getUser('oscar', 'Oscar Wallhult'), getUser('julien', 'Julien Michel Hoarau'), getUser('craig', 'Craig Petchell'), getUser('jerome', 'Jerome Touffe-Blin'), getUser('esoares', 'Eduardo Soares'), getUser('lpereira', 'Luiz Pereira'), getUser('pcurren', 'Paul Curren'), getUser('ttjandra', 'Tara Tjandra'), getUser('severington', 'Ste Everington'), getUser('sguillope', 'Sylvain Guillope'), getUser('alunnon', 'Alex Lunnon')];
+
+var mockData = _defineProperty({}, getReactionKey(containerAri, ari), [getReactionSummary(':fire:', 1, true), getReactionSummary(':thumbsup:', 999, false), getReactionSummary(':astonished:', 9, false), getReactionSummary(':heart:', 99, false)]);
+/**
+ * Mocked version of the client to fetch user information
+ */
+
+
 export var MockReactionsClient = /*#__PURE__*/function () {
   function MockReactionsClient() {
     var _this = this;
@@ -39,8 +49,6 @@ export var MockReactionsClient = /*#__PURE__*/function () {
 
     _classCallCheck(this, MockReactionsClient);
 
-    _defineProperty(this, "mockData", _defineProperty({}, objectReactionKey(containerAri, ari), [reaction(':fire:', 1, true), reaction(':thumbsup:', 9, false), reaction(':astonished:', 5, false), reaction(':heart:', 100, false)]));
-
     _defineProperty(this, "delayPromise", function () {
       return new Promise(function (resolve) {
         return window.setTimeout(resolve, _this.delay);
@@ -52,112 +60,198 @@ export var MockReactionsClient = /*#__PURE__*/function () {
 
   _createClass(MockReactionsClient, [{
     key: "getReactions",
-    value: function getReactions(containerAri, aris) {
-      var _this2 = this;
-
-      return this.delayPromise().then(function () {
-        return aris.reduce(function (results, ari) {
-          var reactionKey = objectReactionKey(containerAri, ari);
-          results[ari] = _this2.mockData[reactionKey] || [];
-          return results;
-        }, {});
-      });
-    }
+    value: function () {
+      var _getReactions = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(containerAri, aris) {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return this.delayPromise();
+
+              case 2:
+                return _context.abrupt("return", aris.reduce(function (results, ari) {
+                  var reactionKey = getReactionKey(containerAri, ari);
+                  results[ari] = mockData[reactionKey] || [];
+                  return results;
+                }, {}));
+
+              case 3:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this);
+      }));
+
+      function getReactions(_x, _x2) {
+        return _getReactions.apply(this, arguments);
+      }
+
+      return getReactions;
+    }()
   }, {
     key: "getDetailedReaction",
-    value: function getDetailedReaction(containerAri, ari, emojiId) {
-      var _this3 = this;
-
-      return this.delayPromise().then(function () {
-        var reactionKey = "".concat(containerAri, "|").concat(ari);
-        var reactionsMockData = _this3.mockData[reactionKey];
-
-        if (reactionsMockData) {
-          var _reaction = reactionsMockData.find(function (reaction) {
-            return reaction.emojiId === emojiId;
-          });
-
-          if (_reaction) {
-            var users = [].concat(defaultUsers).slice(Math.floor(Math.random() * 4), Math.floor(Math.random() * 9) + 4).slice(0, _reaction.count);
-            return _objectSpread(_objectSpread({}, _reaction), {}, {
-              users: users
-            });
+    value: function () {
+      var _getDetailedReaction = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(containerAri, ari, emojiId) {
+        var reactionKey, reactionsMockData, reaction, users;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.next = 2;
+                return this.delayPromise();
+
+              case 2:
+                reactionKey = "".concat(containerAri, "|").concat(ari);
+                reactionsMockData = mockData[reactionKey];
+
+                if (!reactionsMockData) {
+                  _context2.next = 9;
+                  break;
+                }
+
+                reaction = reactionsMockData.find(function (reaction_1) {
+                  return reaction_1.emojiId === emojiId;
+                });
+
+                if (!reaction) {
+                  _context2.next = 9;
+                  break;
+                }
+
+                users = [].concat(defaultUsers).slice(Math.floor(Math.random() * 4), Math.floor(Math.random() * 9) + 4).slice(0, reaction.count);
+                return _context2.abrupt("return", _objectSpread(_objectSpread({}, reaction), {}, {
+                  users: users
+                }));
+
+              case 9:
+                return _context2.abrupt("return", {
+                  containerAri: containerAri,
+                  ari: ari,
+                  emojiId: emojiId,
+                  count: 1,
+                  reacted: true,
+                  users: []
+                });
+
+              case 10:
+              case "end":
+                return _context2.stop();
+            }
           }
-        }
-
-        return {
-          containerAri: containerAri,
-          ari: ari,
-          emojiId: emojiId,
-          count: 1,
-          reacted: true,
-          users: []
-        };
-      });
-    }
+        }, _callee2, this);
+      }));
+
+      function getDetailedReaction(_x3, _x4, _x5) {
+        return _getDetailedReaction.apply(this, arguments);
+      }
+
+      return getDetailedReaction;
+    }()
   }, {
     key: "addReaction",
-    value: function addReaction(containerAri, ari, emojiId) {
-      var _this4 = this;
-
-      return this.delayPromise().then(function () {
-        var reactionKey = objectReactionKey(containerAri, ari);
-        var found = false;
-        var reactionsMockData = _this4.mockData[reactionKey];
-
-        if (reactionsMockData) {
-          _this4.mockData[reactionKey] = reactionsMockData.map(function (reaction) {
-            if (reaction.emojiId === emojiId) {
-              found = true;
-              return _objectSpread(_objectSpread({}, reaction), {}, {
-                count: reaction.count + 1,
-                reacted: true
-              });
+    value: function () {
+      var _addReaction = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(containerAri, ari, emojiId) {
+        var reactionKey, found, reactionsMockData;
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                _context3.next = 2;
+                return this.delayPromise();
+
+              case 2:
+                reactionKey = getReactionKey(containerAri, ari);
+                found = false;
+                reactionsMockData = mockData[reactionKey];
+
+                if (reactionsMockData) {
+                  mockData[reactionKey] = reactionsMockData.map(function (reaction) {
+                    if (reaction.emojiId === emojiId) {
+                      found = true;
+                      return _objectSpread(_objectSpread({}, reaction), {}, {
+                        count: reaction.count + 1,
+                        reacted: true
+                      });
+                    }
+
+                    return reaction;
+                  });
+                }
+
+                if (!found) {
+                  mockData[reactionKey] = [].concat(_toConsumableArray(reactionsMockData ? reactionsMockData : []), [{
+                    containerAri: containerAri,
+                    ari: ari,
+                    emojiId: emojiId,
+                    count: 1,
+                    reacted: true
+                  }]);
+                }
+
+                return _context3.abrupt("return", mockData[reactionKey]);
+
+              case 8:
+              case "end":
+                return _context3.stop();
             }
+          }
+        }, _callee3, this);
+      }));
 
-            return reaction;
-          });
-        }
-
-        if (!found) {
-          _this4.mockData[reactionKey] = [].concat(_toConsumableArray(reactionsMockData ? reactionsMockData : []), [{
-            containerAri: containerAri,
-            ari: ari,
-            emojiId: emojiId,
-            count: 1,
-            reacted: true
-          }]);
-        }
-
-        return _this4.mockData[reactionKey];
-      });
-    }
+      function addReaction(_x6, _x7, _x8) {
+        return _addReaction.apply(this, arguments);
+      }
+
+      return addReaction;
+    }()
   }, {
     key: "deleteReaction",
-    value: function deleteReaction(containerAri, ari, emojiId) {
-      var _this5 = this;
-
-      return this.delayPromise().then(function () {
-        var reactionKey = objectReactionKey(containerAri, ari);
-        _this5.mockData[reactionKey] = _this5.mockData[reactionKey].map(function (reaction) {
-          if (reaction.emojiId === emojiId) {
-            if (reaction.count === 1) {
-              return undefined;
-            }
+    value: function () {
+      var _deleteReaction = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(containerAri, ari, emojiId) {
+        var reactionKey;
+        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+          while (1) {
+            switch (_context4.prev = _context4.next) {
+              case 0:
+                _context4.next = 2;
+                return this.delayPromise();
+
+              case 2:
+                reactionKey = getReactionKey(containerAri, ari);
+                mockData[reactionKey] = mockData[reactionKey].map(function (reaction) {
+                  if (reaction.emojiId === emojiId) {
+                    if (reaction.count === 1) {
+                      return undefined;
+                    }
+
+                    return _objectSpread(_objectSpread({}, reaction), {}, {
+                      count: reaction.count - 1,
+                      reacted: false
+                    });
+                  }
 
-            return _objectSpread(_objectSpread({}, reaction), {}, {
-              count: reaction.count - 1,
-              reacted: false
-            });
+                  return reaction;
+                }).filter(function (reaction_1) {
+                  return !!reaction_1;
+                });
+                return _context4.abrupt("return", mockData[reactionKey]);
+
+              case 5:
+              case "end":
+                return _context4.stop();
+            }
           }
+        }, _callee4, this);
+      }));
 
-          return reaction;
-        }).filter(function (reaction) {
-          return !!reaction;
-        });
-        return _this5.mockData[reactionKey];
-      });
-    }
+      function deleteReaction(_x9, _x10, _x11) {
+        return _deleteReaction.apply(this, arguments);
+      }
+
+      return deleteReaction;
+    }()
   }]);
 
   return MockReactionsClient;

package/dist/esm/client/index.js

@@ -1 +1,2 @@
-export { ReactionServiceClient } from './ReactionServiceClient';
+export { ReactionServiceClient } from './ReactionServiceClient';
+export { MockReactionsClient, ari, containerAri, getReactionSummary, getUser } from './MockReactionsClient';

package/dist/esm/components/Counter.js

@@ -3,7 +3,8 @@ import { jsx, css } from '@emotion/core';
 import { N500, B400 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import React, { memo } from 'react';
-import { SlideIn, ExitingPersistence, mediumDurationMs } from '@atlaskit/motion';
+import { SlideIn, ExitingPersistence, mediumDurationMs } from '@atlaskit/motion'; // eslint-disable-next-line @atlaskit/design-system/no-banned-imports
+
 import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
 export var counterTestId = 'counter-container';
 export var countStyle = css({

package/dist/esm/components/Reaction.js

@@ -69,6 +69,10 @@ var flashStyle = css({
   borderRadius: '10px',
   height: "".concat(flashHeight, "px")
 });
+/**
+ * @param id give id for the emoji
+ * @param event selected mouse event proerties
+ */
 
 var ReactionWithoutAnalytics = /*#__PURE__*/function (_PureComponent) {
   _inherits(ReactionWithoutAnalytics, _PureComponent);
@@ -93,8 +97,8 @@ var ReactionWithoutAnalytics = /*#__PURE__*/function (_PureComponent) {
             _reaction = _this$props.reaction,
             createAnalyticsEvent = _this$props.createAnalyticsEvent;
         var reacted = _reaction.reacted,
-            _emojiId = _reaction.emojiId;
-        createAndFireSafe(createAnalyticsEvent, createReactionClickedEvent, !reacted, _emojiId);
+            emojiId = _reaction.emojiId;
+        createAndFireSafe(createAnalyticsEvent, createReactionClickedEvent, !reacted, emojiId);
 
         _this.props.onClick(_this.props.reaction.emojiId, event);
       }
@@ -195,8 +199,7 @@ var ReactionWithoutAnalytics = /*#__PURE__*/function (_PureComponent) {
 _defineProperty(ReactionWithoutAnalytics, "defaultProps", {
   flash: false,
   className: undefined,
-  onMouseEnter: undefined,
-  flashOnMount: false
+  onMouseEnter: undefined
 });
 
 _defineProperty(ReactionWithoutAnalytics, "displayName", 'Reaction');

package/dist/esm/components/ReactionPicker.js

@@ -47,6 +47,10 @@ var popupStyle = css({
 });
 
 function noop() {}
+/**
+ * This renders the picker component (wrapped by the ConnectedReactionPicker)
+ */
+
 
 export var ReactionPicker = /*#__PURE__*/function (_PureComponent) {
   _inherits(ReactionPicker, _PureComponent);
@@ -82,10 +86,10 @@ export var ReactionPicker = /*#__PURE__*/function (_PureComponent) {
 
     _defineProperty(_assertThisInitialized(_this), "showFullPicker", function (e) {
       e.preventDefault();
-      var onMore = _this.props.onMore;
+      var onShowMore = _this.props.onShowMore;
 
-      if (onMore) {
-        onMore();
+      if (onShowMore) {
+        onShowMore();
       } // Update popper position
 
 
@@ -160,13 +164,22 @@ export var ReactionPicker = /*#__PURE__*/function (_PureComponent) {
   _createClass(ReactionPicker, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      document.addEventListener('click', this.handleClickOutside);
+      document.addEventListener('click', this.handleClickOutside, {
+        capture: true
+      });
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      document.removeEventListener('click', this.handleClickOutside);
-      UFO.PickerRender.abort();
+      document.removeEventListener('click', this.handleClickOutside, {
+        capture: true
+      });
+      UFO.PickerRender.abort({
+        metadata: {
+          source: 'Reaction-Picker',
+          reason: 'unmount'
+        }
+      });
     }
   }, {
     key: "close",
@@ -176,7 +189,13 @@ export var ReactionPicker = /*#__PURE__*/function (_PureComponent) {
         showFullPicker: false
       }, function () {
         // ufo abort reaction experience
-        UFO.PickerRender.abort();
+        UFO.PickerRender.abort({
+          metadata: {
+            emojiId: _emojiId,
+            source: 'Reaction-Picker',
+            reason: 'close dialog'
+          }
+        });
       });
     }
   }, {

package/dist/esm/components/Reactions.js

@@ -155,7 +155,7 @@ export var ReactionsWithoutAnalytics = /*#__PURE__*/function (_React$PureCompone
         onSelection: this.handleOnSelection,
         onOpen: this.handlePickerOpen,
         onCancel: this.handleOnCancel,
-        onMore: this.handleOnMore
+        onShowMore: this.handleOnMore
       }));
     }
   }, {