@atlaskit/reactions 21.7.0 → 21.8.1

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

@@ -10,7 +10,7 @@ exports.getTooltip = getTooltip;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
@@ -46,7 +46,7 @@ exports.RENDER_REACTIONS_TESTID = RENDER_REACTIONS_TESTID;
 function getTooltip(status, errorMessage) {
   switch (status) {
     case _types.ReactionStatus.error:
-      return errorMessage || (0, _core.jsx)(_reactIntlNext.FormattedMessage, _shared.i18n.messages.unexpectedError);
+      return errorMessage || (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _shared.i18n.messages.unexpectedError);
     // When reaction is not available don't show any tooltip (e.g. Archive page in Confluence)
 
     case _types.ReactionStatus.disabled:
@@ -54,10 +54,10 @@ function getTooltip(status, errorMessage) {
 
     case _types.ReactionStatus.notLoaded:
     case _types.ReactionStatus.loading:
-      return (0, _core.jsx)(_reactIntlNext.FormattedMessage, _shared.i18n.messages.loadingReactions);
+      return (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _shared.i18n.messages.loadingReactions);
 
     case _types.ReactionStatus.ready:
-      return (0, _core.jsx)(_reactIntlNext.FormattedMessage, _shared.i18n.messages.addReaction);
+      return (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _shared.i18n.messages.addReaction);
   }
 }
 /**
@@ -164,11 +164,11 @@ var Reactions = /*#__PURE__*/_react.default.memo(function (_ref) {
     });
     return reactions.concat(items);
   }, [quickReactionEmojis, reactions]);
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     css: styles.wrapperStyle,
     "data-testid": RENDER_REACTIONS_TESTID
   }, memorizedReactions.map(function (reaction) {
-    return (0, _core.jsx)(_Reaction.Reaction, {
+    return (0, _react2.jsx)(_Reaction.Reaction, {
       key: reaction.emojiId,
       css: styles.reactionStyle,
       reaction: reaction,
@@ -177,7 +177,7 @@ var Reactions = /*#__PURE__*/_react.default.memo(function (_ref) {
       onMouseEnter: handleReactionMouseEnter,
       flash: flash[reaction.emojiId]
     });
-  }), (0, _core.jsx)(_ReactionPicker.ReactionPicker, {
+  }), (0, _react2.jsx)(_ReactionPicker.ReactionPicker, {
     css: styles.reactionStyle,
     emojiProvider: emojiProvider,
     miniMode: true,

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

@@ -5,16 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.wrapperStyle = exports.reactionStyle = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 /** @jsx jsx */
-var reactionStyle = (0, _core.css)({
+var reactionStyle = (0, _react.css)({
   display: 'inline-block',
   // top margin of 2px to allow spacing between rows when wrapped (paired with top margin in reactionsStyle)
   margin: '2px 4px 0 4px'
 });
 exports.reactionStyle = reactionStyle;
-var wrapperStyle = (0, _core.css)({
+var wrapperStyle = (0, _react.css)({
   display: 'flex',
   flexWrap: 'wrap',
   position: 'relative',

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

@@ -13,7 +13,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
@@ -102,24 +102,24 @@ var Selector = function Selector(_ref) {
   var renderEmoji = function renderEmoji(emoji, index) {
     var _emoji$id;
 
-    return (0, _core.jsx)("div", {
+    return (0, _react2.jsx)("div", {
       key: (_emoji$id = emoji.id) !== null && _emoji$id !== void 0 ? _emoji$id : emoji.shortName,
       className: emoji === selection ? 'selected' : undefined,
       css: [styles.emojiStyle, styles.revealStyle],
       style: emojiStyleAnimation(index),
       "data-testid": RENDER_SELECTOR_TESTID
-    }, (0, _core.jsx)(_tooltip.default, {
+    }, (0, _react2.jsx)(_tooltip.default, {
       content: emoji.shortName
-    }, (0, _core.jsx)(_EmojiButton.EmojiButton, {
+    }, (0, _react2.jsx)(_EmojiButton.EmojiButton, {
       emojiId: emoji,
       emojiProvider: emojiProvider,
       onClick: onSelected
     })));
   };
 
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     css: styles.selectorStyle
-  }, pickerQuickReactionEmojiIds ? pickerQuickReactionEmojiIds.map(renderEmoji) : null, showMore ? (0, _core.jsx)(_ShowMore.ShowMore, {
+  }, pickerQuickReactionEmojiIds ? pickerQuickReactionEmojiIds.map(renderEmoji) : null, showMore ? (0, _react2.jsx)(_ShowMore.ShowMore, {
     key: "more",
     buttonStyle: styles.revealStyle,
     style: {

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

@@ -5,16 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.selectorStyle = exports.revealStyle = exports.revealAnimation = exports.emojiStyleAnimation = exports.emojiStyle = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 /** @jsx jsx */
-var selectorStyle = (0, _core.css)({
+var selectorStyle = (0, _react.css)({
   boxSizing: 'border-box',
   display: 'flex',
   padding: 0
 });
 exports.selectorStyle = selectorStyle;
-var emojiStyle = (0, _core.css)({
+var emojiStyle = (0, _react.css)({
   display: 'inline-block',
   opacity: 0,
   '&.selected': {
@@ -23,7 +23,7 @@ var emojiStyle = (0, _core.css)({
   }
 });
 exports.emojiStyle = emojiStyle;
-var revealAnimation = (0, _core.keyframes)({
+var revealAnimation = (0, _react.keyframes)({
   '0%': {
     opacity: 1,
     transform: 'scale(0.5)'
@@ -37,7 +37,7 @@ var revealAnimation = (0, _core.keyframes)({
   }
 });
 exports.revealAnimation = revealAnimation;
-var revealStyle = (0, _core.css)({
+var revealStyle = (0, _react.css)({
   animation: "".concat(revealAnimation, " 150ms ease-in-out forwards")
 });
 /**

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

@@ -7,11 +7,11 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ShowMore = exports.RENDER_SHOWMORE_TESTID = void 0;
+exports.ShowMore = exports.RENDER_WRAPPER_TESTID = exports.RENDER_SHOWMORE_TESTID = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _reactIntlNext = require("react-intl-next");
 
@@ -34,6 +34,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  */
 var RENDER_SHOWMORE_TESTID = 'show-more-button';
 exports.RENDER_SHOWMORE_TESTID = RENDER_SHOWMORE_TESTID;
+var RENDER_WRAPPER_TESTID = 'show-more-wrapper';
+exports.RENDER_WRAPPER_TESTID = RENDER_WRAPPER_TESTID;
 
 /**
  * Show more custom emojis button
@@ -45,16 +47,17 @@ var ShowMore = function ShowMore(_ref) {
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? {} : _ref$className,
       buttonStyle = _ref.buttonStyle;
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     className: className.container,
     css: styles.moreEmojiContainerStyle,
-    style: style.container
-  }, (0, _core.jsx)("div", {
+    style: style.container,
+    "data-testid": RENDER_WRAPPER_TESTID
+  }, (0, _react2.jsx)("div", {
     css: styles.separatorStyle
-  }), (0, _core.jsx)(_reactIntlNext.FormattedMessage, _shared.i18n.messages.moreEmoji, function (message) {
-    return (0, _core.jsx)(_tooltip.default, {
+  }), (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _shared.i18n.messages.moreEmoji, function (message) {
+    return (0, _react2.jsx)(_tooltip.default, {
       content: message
-    }, (0, _core.jsx)("button", {
+    }, (0, _react2.jsx)("button", {
       className: className.button,
       css: [styles.moreButtonStyle, buttonStyle],
       "aria-label": _shared.i18n.messages.moreEmoji.defaultMessage,
@@ -62,7 +65,7 @@ var ShowMore = function ShowMore(_ref) {
       style: style.button,
       onMouseDown: onClick,
       "data-testid": RENDER_SHOWMORE_TESTID
-    }, (0, _core.jsx)(_more.default, {
+    }, (0, _react2.jsx)(_more.default, {
       label: "More"
     })));
   }));

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

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "RENDER_SHOWMORE_TESTID", {
     return _ShowMore.RENDER_SHOWMORE_TESTID;
   }
 });
+Object.defineProperty(exports, "RENDER_WRAPPER_TESTID", {
+  enumerable: true,
+  get: function get() {
+    return _ShowMore.RENDER_WRAPPER_TESTID;
+  }
+});
 Object.defineProperty(exports, "ShowMore", {
   enumerable: true,
   get: function get() {

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.separatorStyle = exports.moreEmojiContainerStyle = exports.moreButtonStyle = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
@@ -14,11 +14,11 @@ var _colors = require("@atlaskit/theme/colors");
 var _tokens = require("@atlaskit/tokens");
 
 /** @jsx jsx */
-var moreEmojiContainerStyle = (0, _core.css)({
+var moreEmojiContainerStyle = (0, _react.css)({
   display: 'flex'
 });
 exports.moreEmojiContainerStyle = moreEmojiContainerStyle;
-var moreButtonStyle = (0, _core.css)({
+var moreButtonStyle = (0, _react.css)({
   opacity: 0,
   outline: 'none',
   backgroundColor: 'transparent',
@@ -34,7 +34,7 @@ var moreButtonStyle = (0, _core.css)({
   }
 });
 exports.moreButtonStyle = moreButtonStyle;
-var separatorStyle = (0, _core.css)({
+var separatorStyle = (0, _react.css)({
   backgroundColor: (0, _tokens.token)('color.border', _colors.N30A),
   margin: '8px 8px 8px 4px',
   width: '1px',

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

@@ -9,9 +9,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Trigger = exports.RENDER_TOOLTIP_TRIGGER_TESTID = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 
@@ -41,7 +43,9 @@ var Trigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       miniMode = props.miniMode,
       tooltipContent = props.tooltipContent,
       _props$disabled = props.disabled,
-      disabled = _props$disabled === void 0 ? false : _props$disabled;
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      _props$ariaAttributes = props.ariaAttributes,
+      ariaAttributes = _props$ariaAttributes === void 0 ? {} : _props$ariaAttributes;
 
   var handleMouseDown = function handleMouseDown(e, analyticsEvent) {
     if (onClick && !disabled) {
@@ -49,11 +53,11 @@ var Trigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }
   };
 
-  return (0, _core.jsx)(_tooltip.default, {
+  return (0, _react2.jsx)(_tooltip.default, {
     testId: RENDER_TOOLTIP_TRIGGER_TESTID,
     content: tooltipContent,
     position: "top"
-  }, (0, _core.jsx)(_standardButton.default, {
+  }, (0, _react2.jsx)(_standardButton.default, (0, _extends2.default)({
     css: styles.triggerStyle({
       miniMode: miniMode,
       disabled: disabled
@@ -61,13 +65,13 @@ var Trigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     appearance: "subtle",
     onClick: handleMouseDown,
     "aria-disabled": disabled,
-    iconBefore: (0, _core.jsx)(_emojiAdd.default, {
+    iconBefore: (0, _react2.jsx)(_emojiAdd.default, {
       size: "small",
       label: "Add reaction"
     }),
     spacing: "none",
     ref: ref
-  }));
+  }, ariaAttributes)));
 });
 
 exports.Trigger = Trigger;

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

@@ -9,7 +9,7 @@ exports.triggerStyle = exports.DISABLED_BUTTON_COLOR = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _tokens = require("@atlaskit/tokens");
 
@@ -27,7 +27,7 @@ var triggerStyle = function triggerStyle(_ref) {
       miniMode = _ref$miniMode === void 0 ? false : _ref$miniMode,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled;
-  return (0, _core.css)(_objectSpread(_objectSpread(_objectSpread({
+  return (0, _react.css)(_objectSpread(_objectSpread(_objectSpread({
     minWidth: '32px',
     height: '32px',
     display: 'flex',

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

@@ -34,7 +34,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; }
 
 /**
- * Export the mapper function outside the component so easier to do unit tests migration from Enzyme to React Testing Library
+ * Export the mapper function outside the component so easier to do unit tests
  */
 var mapStateToPropsHelper = function mapStateToPropsHelper(containerAri, ari, state) {
   var reactionsState = state && state.reactions["".concat(containerAri, "|").concat(ari)];
@@ -68,7 +68,7 @@ var mapStateToPropsHelper = function mapStateToPropsHelper(containerAri, ari, st
   }
 };
 /**
- * Export the mapper function outside the component so easier to do unit tests migration from Enzyme to React Testing Library
+ * Export the mapper function outside the component so easier to do unit tests
  */
 
 
@@ -127,11 +127,9 @@ var ConnectedReactionsView = function ConnectedReactionsView(props) {
 
       (_experienceInstance$c = experienceInstance.current) === null || _experienceInstance$c === void 0 ? void 0 : _experienceInstance$c.abort({
         metadata: {
-          source: 'Connected-Reactions-View',
-          data: {
-            ari: ari,
-            containerAri: containerAri
-          },
+          source: 'ConnectedReactionsView',
+          ari: ari,
+          containerAri: containerAri,
           reason: 'unmount'
         }
       });

package/dist/cjs/shared/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TOOLTIP_USERS_LIMIT = exports.DefaultReactionsByShortName = exports.DefaultReactions = void 0;
+exports.TOOLTIP_USERS_LIMIT = exports.DefaultReactionsByShortName = exports.DefaultReactions = exports.DEFAULT_REACTION_TOP_LIMIT = exports.DEFAULT_OVER_THE_LIMIT_REACTION_LABEL = void 0;
 
 /**
  * Initial list of emoji to pick from
@@ -28,10 +28,22 @@ var DefaultReactions = [{
   shortName: ':thinking:'
 }];
 /**
- * ES6 Map object from default emoji reactions (with key => shortName, value => entire emoji item)
+ * Default label to show for the overLimitLabel prop
  */
 
 exports.DefaultReactions = DefaultReactions;
+var DEFAULT_OVER_THE_LIMIT_REACTION_LABEL = '1k+';
+/**
+ * Default maximum value to use when the emoji received higher than top limit reactions
+ */
+
+exports.DEFAULT_OVER_THE_LIMIT_REACTION_LABEL = DEFAULT_OVER_THE_LIMIT_REACTION_LABEL;
+var DEFAULT_REACTION_TOP_LIMIT = 1000;
+/**
+ * ES6 Map object from default emoji reactions (with key => shortName, value => entire emoji item)
+ */
+
+exports.DEFAULT_REACTION_TOP_LIMIT = DEFAULT_REACTION_TOP_LIMIT;
 var DefaultReactionsByShortName = new Map(DefaultReactions.map(function (reaction) {
   return [reaction.shortName, reaction];
 }));

package/dist/cjs/store/MemoryReactionsStore.js

@@ -27,6 +27,8 @@ var _constants = require("../analytics/constants");
 
 var _ufo = require("../analytics/ufo");
 
+var _analytics2 = require("../analytics/analytics");
+
 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; }
@@ -164,6 +166,13 @@ var MemoryReactionsStore = /*#__PURE__*/function () {
       var exp = ufoExperiences.add.getInstance("".concat(ari, "|").concat(emojiId)); // ufo start reaction experience
 
       exp.start();
+      exp.addMetadata({
+        source: 'MemoryReactionsStore',
+        storeMetadata: _this.metadata,
+        ari: ari,
+        containerAri: containerAri,
+        emojiId: emojiId
+      });
 
       _this.client.addReaction(containerAri, ari, emojiId, _this.metadata).then(function (_) {
         if (_this.createAnalyticsEvent) {
@@ -178,14 +187,7 @@ var MemoryReactionsStore = /*#__PURE__*/function () {
 
           exp.failure({
             metadata: {
-              error: error,
-              source: 'Reaction-Store',
-              data: {
-                containerAri: containerAri,
-                ari: ari,
-                emojiId: emojiId,
-                metadata: _this.metadata
-              },
+              error: (0, _analytics2.extractErrorInfo)(error),
               reason: 'addReaction fetch failed'
             }
           });
@@ -201,6 +203,13 @@ var MemoryReactionsStore = /*#__PURE__*/function () {
       var exp = ufoExperiences.remove.getInstance("".concat(ari, "|").concat(emojiId)); // ufo start reaction experience
 
       exp.start();
+      exp.addMetadata({
+        source: 'MemoryReactionsStore',
+        storeMetadata: _this.metadata,
+        ari: ari,
+        containerAri: containerAri,
+        emojiId: emojiId
+      });
 
       _this.optmisticUpdate(containerAri, ari, emojiId)(utils.removeOne);
 
@@ -211,14 +220,7 @@ var MemoryReactionsStore = /*#__PURE__*/function () {
         // ufo add reaction failure
         exp.failure({
           metadata: {
-            error: error,
-            source: 'Reaction-Store',
-            data: {
-              containerAri: containerAri,
-              ari: ari,
-              emojiId: emojiId,
-              metadata: _this.metadata
-            },
+            error: (0, _analytics2.extractErrorInfo)(error),
             reason: 'deleteReaction fetch failed'
           }
         });
@@ -238,6 +240,12 @@ var MemoryReactionsStore = /*#__PURE__*/function () {
       sampledExp.start({
         samplingRate: _constants.SAMPLING_RATE_REACTIONS_RENDERED_EXP
       });
+      sampledExp.addMetadata({
+        source: 'MemoryReactionsStore',
+        storeMetadata: _this.metadata,
+        containerAri: containerAri,
+        aris: arisArr.join(',')
+      });
 
       _this.client.getReactions(containerAri, arisArr).then(function (value) {
         Object.keys(value).map(function (ari) {
@@ -261,12 +269,7 @@ var MemoryReactionsStore = /*#__PURE__*/function () {
 
           sampledExp.failure({
             metadata: {
-              error: error,
-              source: 'Reaction-Store',
-              data: {
-                containerAri: containerAri,
-                aris: arisArr.join(',')
-              },
+              error: (0, _analytics2.extractErrorInfo)(error),
               reason: 'getReactions fetch failed'
             }
           });
@@ -291,6 +294,13 @@ var MemoryReactionsStore = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "getDetailedReaction", function (containerAri, ari, emojiId) {
       var exp = ufoExperiences.fetchDetails.getInstance("".concat(ari, "|").concat(emojiId));
       exp.start();
+      exp.addMetadata({
+        source: 'MemoryReactionsStore',
+        storeMetadata: _this.metadata,
+        ari: ari,
+        containerAri: containerAri,
+        emojiId: emojiId
+      });
 
       _this.client.getDetailedReaction(containerAri, ari, emojiId).then(function (summary) {
         // ufo get reaction details success
@@ -301,13 +311,7 @@ var MemoryReactionsStore = /*#__PURE__*/function () {
         // ufo get reaction details failure
         exp.failure({
           metadata: {
-            error: error,
-            source: 'Reaction-Store',
-            data: {
-              containerAri: containerAri,
-              ari: ari,
-              emojiId: emojiId
-            },
+            error: (0, _analytics2.extractErrorInfo)(error),
             reason: 'getDetailedReaction fetch failed'
           }
         });

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "21.7.0"
+	"version": "21.8.1"
 }

package/dist/es2019/analytics/analytics.js

@@ -61,4 +61,20 @@ export const createReactionHoveredEvent = startTime => createPayload('hovered',
 export const createReactionClickedEvent = (added, emojiId) => createPayload('clicked', 'existingReaction', UI_EVENT_TYPE)({
   added,
   emojiId
-});
+});
+/**
+ * Used for store failure metadata for analytics
+ * @param error The error could be a service error with {code, reason} or an Error
+ * @returns any
+ */
+
+export const extractErrorInfo = error => {
+  if (error instanceof Error) {
+    return {
+      name: error.name,
+      message: error.message
+    };
+  }
+
+  return error;
+};

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

@@ -1,50 +1,54 @@
 /** @jsx jsx */
 import React from 'react';
-import { jsx, css } from '@emotion/core';
+import { jsx, css } from '@emotion/react';
 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';
+import { constants } from '../../shared';
 import * as styles from './styles';
 /**
- * Test id for wrapper div
+ * Test id for component top level div
  */
 
-export const RENDER_COUNTER_TESTID = 'counter-container';
+export const RENDER_COMPONENT_WRAPPER = 'counter-wrapper';
 /**
- * Test id for container div
+ * Test id for wrapper div of the counter inside the slider
  */
 
-export const RENDER_COUNTER_WRAPPER_TESTID = 'counter-wrapper';
+export const RENDER_COUNTER_TESTID = 'counter-container';
+/**
+ * Counter label value wrapper div
+ */
 
+export const RENDER_LABEL_TESTID = 'counter_label_wrapper';
+export const getLabel = (value, overLimitLabel, limit) => {
+  // Check if reached limit
+  if (limit && value >= limit) {
+    return overLimitLabel || '';
+  } else if (value === 0) {
+    return '';
+  } else {
+    return value.toString();
+  }
+};
 /**
  * Display reaction count next to the emoji button
  */
+
 export const Counter = ({
   highlight = false,
-  limit = 1000,
-  overLimitLabel = '1k+',
+  limit = constants.DEFAULT_REACTION_TOP_LIMIT,
+  overLimitLabel = constants.DEFAULT_OVER_THE_LIMIT_REACTION_LABEL,
   className,
   value,
   animationDuration = mediumDurationMs
 }) => {
-  const hasReachedLimit = value => limit && value >= limit;
-
-  const getLabel = value => {
-    if (hasReachedLimit(value)) {
-      return overLimitLabel || '';
-    } else if (value === 0) {
-      return '';
-    } else {
-      return value.toString();
-    }
-  };
-
   const previousValue = usePreviousValue(value);
-  const label = getLabel(value);
+  const label = getLabel(value, overLimitLabel, limit);
   const increase = previousValue ? previousValue < value : false;
   return jsx("div", {
     className: className,
-    "data-testid": RENDER_COUNTER_WRAPPER_TESTID,
+    "data-testid": RENDER_COMPONENT_WRAPPER,
     css: [styles.countStyle, {
       width: label.length * 7
     }]
@@ -52,15 +56,18 @@ export const Counter = ({
     enterFrom: increase ? 'bottom' : 'top',
     key: value,
     duration: animationDuration
-  }, (motion, direction) => jsx("div", {
-    ref: motion.ref,
-    css: [styles.containerStyle, css({
-      position: direction === 'exiting' ? 'absolute' : undefined
-    })],
-    className: motion.className,
-    "data-testid": RENDER_COUNTER_TESTID
-  }, jsx("div", {
-    css: highlight && styles.highlightStyle,
-    key: value
-  }, label)))));
+  }, (motion, direction) => {
+    return jsx("div", {
+      ref: motion.ref,
+      css: [styles.containerStyle, css({
+        position: direction === 'exiting' ? 'absolute' : undefined
+      })],
+      className: motion.className,
+      "data-testid": RENDER_COUNTER_TESTID
+    }, jsx("div", {
+      "data-testid": RENDER_LABEL_TESTID,
+      css: highlight && styles.highlightStyle,
+      key: value
+    }, label));
+  })));
 };

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

@@ -1,3 +1,3 @@
-export { Counter, RENDER_COUNTER_TESTID, RENDER_COUNTER_WRAPPER_TESTID } from './Counter';
+export { Counter, RENDER_COUNTER_TESTID, RENDER_COMPONENT_WRAPPER, RENDER_LABEL_TESTID } from './Counter';
 import * as _styles from './styles';
 export { _styles as styles };

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { N90, B400 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 export const countStyle = css({