@atlaskit/reactions 21.3.4 → 21.5.1

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/reactions
 
+## 21.5.1
+
+### Patch Changes
+
+- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+
+## 21.5.0
+
+### Minor Changes
+
+- [`e3192fc9dc2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e3192fc9dc2) - Fix add own emoji in reaction picker
+
+### Patch Changes
+
+- [`ac51581fc14`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ac51581fc14) - Update the examples, docs descriptions and added tsdoc comments to relevant components and objects
+- Updated dependencies
+
+## 21.4.0
+
+### Minor Changes
+
+- [`34155ee7563`](https://bitbucket.org/atlassian/atlassian-frontend/commits/34155ee7563) - add sampling for 2 ufo experiences to reduce volume of analytics
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 21.3.4
 
 ### Patch Changes

package/dist/cjs/analytics/constants.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SAMPLING_RATE_REACTIONS_RENDERED_EXP = void 0;
+// This rate is used in fetching emoji resource
+var SAMPLING_RATE_REACTIONS_RENDERED_EXP = 0.02;
+exports.SAMPLING_RATE_REACTIONS_RENDERED_EXP = SAMPLING_RATE_REACTIONS_RENDERED_EXP;

package/dist/cjs/analytics/ufo.js

@@ -3,10 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ReactionsRendered = exports.ReactionsRemove = exports.ReactionsAdd = exports.ReactionDetailsFetch = exports.PickerRender = exports.ExperienceName = exports.ComponentName = void 0;
+exports.sampledReactionsRendered = exports.ReactionsRendered = exports.ReactionsRemove = exports.ReactionsAdd = exports.ReactionDetailsFetch = exports.PickerRender = exports.ExperienceName = exports.ComponentName = void 0;
 
 var _ufo = require("@atlaskit/ufo");
 
+var _emoji = require("@atlaskit/emoji");
+
 /**
  * Helper method for create the config type for an individual/Concurrent experience
  * @param componentName
@@ -78,4 +80,10 @@ var ReactionDetailsFetch = new _ufo.ConcurrentExperience(ExperienceName.REACTION
 
 exports.ReactionDetailsFetch = ReactionDetailsFetch;
 var ReactionsRemove = new _ufo.ConcurrentExperience(ExperienceName.REACTION_REMOVED, createExperienceConfig(ComponentName.REACTIONS, _ufo.ExperienceTypes.Experience, _ufo.ExperiencePerformanceTypes.InlineResult));
-exports.ReactionsRemove = ReactionsRemove;
+exports.ReactionsRemove = ReactionsRemove;
+
+var sampledReactionsRendered = function sampledReactionsRendered(instanceId) {
+  return (0, _emoji.withSampling)(ReactionsRendered.getInstance(instanceId));
+};
+
+exports.sampledReactionsRendered = sampledReactionsRendered;

package/dist/cjs/client/MockReactionsClient.js

@@ -5,28 +5,34 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.user = exports.reaction = exports.containerAri = exports.ari = exports.MockReactionsClient = void 0;
+exports.getUser = exports.getReactionSummary = exports.containerAri = exports.ari = exports.MockReactionsClient = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
-var _defineProperty3 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _Selector = require("../components/Selector");
 
+var _shared = require("../shared");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-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) { (0, _defineProperty3.default)(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; }
+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) { (0, _defineProperty2.default)(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; }
 
-var containerAri = 'ari:cloud:owner:demo-cloud-id:container/1';
+var containerAri = "".concat(_shared.Constants.ContainerAriPrefix, "1");
 exports.containerAri = containerAri;
-var ari = 'ari:cloud:owner:demo-cloud-id:item/1';
+var ari = "".concat(_shared.Constants.AriPrefix, "1");
 exports.ari = ari;
 
-var reaction = function reaction(shortName, count, reacted) {
+var getReactionSummary = function getReactionSummary(shortName, count, reacted) {
   return {
     ari: ari,
     containerAri: containerAri,
@@ -36,22 +42,26 @@ var reaction = function reaction(shortName, count, reacted) {
   };
 };
 
-exports.reaction = reaction;
+exports.getReactionSummary = getReactionSummary;
 
-var user = function user(id, displayName) {
+var getUser = function getUser(id, displayName) {
   return {
     id: id,
     displayName: displayName
   };
 };
 
-exports.user = user;
+exports.getUser = getUser;
 
-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 = (0, _defineProperty2.default)({}, 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
+ */
 
 var MockReactionsClient = /*#__PURE__*/function () {
   function MockReactionsClient() {
@@ -59,8 +69,7 @@ var MockReactionsClient = /*#__PURE__*/function () {
 
     var delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
     (0, _classCallCheck2.default)(this, MockReactionsClient);
-    (0, _defineProperty3.default)(this, "mockData", (0, _defineProperty3.default)({}, objectReactionKey(containerAri, ari), [reaction(':fire:', 1, true), reaction(':thumbsup:', 9, false), reaction(':astonished:', 5, false), reaction(':heart:', 100, false)]));
-    (0, _defineProperty3.default)(this, "delayPromise", function () {
+    (0, _defineProperty2.default)(this, "delayPromise", function () {
       return new Promise(function (resolve) {
         return window.setTimeout(resolve, _this.delay);
       });
@@ -70,112 +79,198 @@ var MockReactionsClient = /*#__PURE__*/function () {
 
   (0, _createClass2.default)(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 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(containerAri, aris) {
+        return _regenerator.default.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 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(containerAri, ari, emojiId) {
+        var reactionKey, reactionsMockData, reaction, users;
+        return _regenerator.default.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 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(containerAri, ari, emojiId) {
+        var reactionKey, found, reactionsMockData;
+        return _regenerator.default.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((0, _toConsumableArray2.default)(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((0, _toConsumableArray2.default)(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 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(containerAri, ari, emojiId) {
+        var reactionKey;
+        return _regenerator.default.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 reaction;
+                }).filter(function (reaction_1) {
+                  return !!reaction_1;
+                });
+                return _context4.abrupt("return", mockData[reactionKey]);
+
+              case 5:
+              case "end":
+                return _context4.stop();
             }
-
-            return _objectSpread(_objectSpread({}, reaction), {}, {
-              count: reaction.count - 1,
-              reacted: false
-            });
           }
+        }, _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/cjs/client/index.js

@@ -3,11 +3,43 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "MockReactionsClient", {
+  enumerable: true,
+  get: function get() {
+    return _MockReactionsClient.MockReactionsClient;
+  }
+});
 Object.defineProperty(exports, "ReactionServiceClient", {
   enumerable: true,
   get: function get() {
     return _ReactionServiceClient.ReactionServiceClient;
   }
 });
+Object.defineProperty(exports, "ari", {
+  enumerable: true,
+  get: function get() {
+    return _MockReactionsClient.ari;
+  }
+});
+Object.defineProperty(exports, "containerAri", {
+  enumerable: true,
+  get: function get() {
+    return _MockReactionsClient.containerAri;
+  }
+});
+Object.defineProperty(exports, "getReactionSummary", {
+  enumerable: true,
+  get: function get() {
+    return _MockReactionsClient.getReactionSummary;
+  }
+});
+Object.defineProperty(exports, "getUser", {
+  enumerable: true,
+  get: function get() {
+    return _MockReactionsClient.getUser;
+  }
+});
+
+var _ReactionServiceClient = require("./ReactionServiceClient");
 
-var _ReactionServiceClient = require("./ReactionServiceClient");
+var _MockReactionsClient = require("./MockReactionsClient");

package/dist/cjs/components/Counter.js

@@ -26,6 +26,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/design-system/no-banned-imports
 var counterTestId = 'counter-container';
 exports.counterTestId = counterTestId;
 var countStyle = (0, _core.css)({

package/dist/cjs/components/Reaction.js

@@ -98,6 +98,10 @@ var flashStyle = (0, _core.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) {
   (0, _inherits2.default)(ReactionWithoutAnalytics, _PureComponent);
@@ -119,8 +123,8 @@ var ReactionWithoutAnalytics = /*#__PURE__*/function (_PureComponent) {
             _reaction = _this$props.reaction,
             createAnalyticsEvent = _this$props.createAnalyticsEvent;
         var reacted = _reaction.reacted,
-            _emojiId = _reaction.emojiId;
-        (0, _analytics.createAndFireSafe)(createAnalyticsEvent, _analytics.createReactionClickedEvent, !reacted, _emojiId);
+            emojiId = _reaction.emojiId;
+        (0, _analytics.createAndFireSafe)(createAnalyticsEvent, _analytics.createReactionClickedEvent, !reacted, emojiId);
 
         _this.props.onClick(_this.props.reaction.emojiId, event);
       }
@@ -218,8 +222,7 @@ var ReactionWithoutAnalytics = /*#__PURE__*/function (_PureComponent) {
 (0, _defineProperty2.default)(ReactionWithoutAnalytics, "defaultProps", {
   flash: false,
   className: undefined,
-  onMouseEnter: undefined,
-  flashOnMount: false
+  onMouseEnter: undefined
 });
 (0, _defineProperty2.default)(ReactionWithoutAnalytics, "displayName", 'Reaction');
 var Reaction = (0, _analyticsNext.withAnalyticsEvents)()(ReactionWithoutAnalytics);

package/dist/cjs/components/ReactionPicker.js

@@ -77,6 +77,10 @@ var popupStyle = (0, _core.css)({
 });
 
 function noop() {}
+/**
+ * This renders the picker component (wrapped by the ConnectedReactionPicker)
+ */
+
 
 var ReactionPicker = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(ReactionPicker, _PureComponent);
@@ -108,10 +112,10 @@ var ReactionPicker = /*#__PURE__*/function (_PureComponent) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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
 
 
@@ -182,12 +186,16 @@ var ReactionPicker = /*#__PURE__*/function (_PureComponent) {
   (0, _createClass2.default)(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);
+      document.removeEventListener('click', this.handleClickOutside, {
+        capture: true
+      });
 
       _analytics.UFO.PickerRender.abort({
         metadata: {

package/dist/cjs/components/Reactions.js

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

package/dist/cjs/containers/ConnectedReactionPicker.js

@@ -24,9 +24,18 @@ var ConnectedReactionPicker = function ConnectedReactionPicker(props) {
   var renderChild = function renderChild(innerProps) {
     return /*#__PURE__*/_react.default.createElement(_components.ReactionPicker, (0, _extends2.default)({}, props, innerProps));
   };
+  /**
+   * Mapping actions for the picker selection
+   * @param actions
+   * @returns void
+   */
+
 
   var actionsMapper = function actionsMapper(actions) {
     return {
+      /**
+       * Event handler when an emoji gets selected
+       */
       onSelection: function onSelection(emojiId) {
         actions.addReaction(props.containerAri, props.ari, emojiId);
       }

package/dist/cjs/containers/ConnectedReactionsView.js

@@ -37,7 +37,7 @@ var ReactionsView = function ReactionsView(props) {
       store = props.store,
       containerAri = props.containerAri;
   (0, _react.useEffect)(function () {
-    experienceInstance.current = _ReactionsStore.ufoExperiences.render.getInstance(ari);
+    experienceInstance.current = _ReactionsStore.ufoExperiences.render(ari);
   }, [ari]);
   (0, _react.useEffect)(function () {
     Promise.resolve(store).then(function (_store) {

package/dist/cjs/shared/constants.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.demoCloudId = exports.ContainerAriPrefix = exports.AriPrefix = void 0;
+// site id for jdog.jira-dev.com
+var demoCloudId = "49d8b9d6-ee7d-4931-a0ca-7fcae7d1c3b5";
+exports.demoCloudId = demoCloudId;
+var AriPrefix = "ari:cloud:test:".concat(demoCloudId, ":item/");
+exports.AriPrefix = AriPrefix;
+var ContainerAriPrefix = "ari:cloud:test:".concat(demoCloudId, ":container/");
+exports.ContainerAriPrefix = ContainerAriPrefix;

package/dist/cjs/shared/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Constants = void 0;
+
+var _Constants = _interopRequireWildcard(require("./constants"));
+
+exports.Constants = _Constants;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }