@atlaskit/reactions 21.5.1 → 21.6.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/reactions
 
+## 21.6.0
+
+### Minor Changes
+
+- [`41d75524c76`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41d75524c76) - Upgrade @atlaskit/reactions to use functional components, add comments and cleanup outdated legacy code
+- [`d840e9e5c90`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d840e9e5c90) - show proper error message in tooltip if failed to get reactions
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 21.5.1
 
 ### Patch Changes

package/MockReactionsClient/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@atlaskit/reactions/MockReactionsClient",
+  "main": "../dist/cjs/MockReactionsClient.js",
+  "module": "../dist/esm/MockReactionsClient.js",
+  "module:es2019": "../dist/es2019/MockReactionsClient.js",
+  "types": "../dist/types/MockReactionsClient.d.ts"
+}

package/dist/cjs/{client/MockReactionsClient.js → MockReactionsClient.js}

@@ -19,24 +19,22 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _Selector = require("../components/Selector");
-
-var _shared = require("../shared");
+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, _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 = "".concat(_shared.Constants.ContainerAriPrefix, "1");
+var containerAri = 'ari:cloud:owner:demo-cloud-id:container/1';
 exports.containerAri = containerAri;
-var ari = "".concat(_shared.Constants.AriPrefix, "1");
+var ari = 'ari:cloud:owner:demo-cloud-id:item/1';
 exports.ari = ari;
 
 var getReactionSummary = function getReactionSummary(shortName, count, reacted) {
   return {
     ari: ari,
     containerAri: containerAri,
-    emojiId: _Selector.defaultReactionsByShortName.get(shortName).id,
+    emojiId: _shared.constants.DefaultReactionsByShortName.get(shortName).id,
     count: count,
     reacted: reacted
   };

package/dist/cjs/analytics/analytics.js

@@ -0,0 +1,141 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createRestSucceededEvent = exports.createRestFailedEvent = exports.createReactionsRenderedEvent = exports.createReactionSelectionEvent = exports.createReactionHoveredEvent = exports.createReactionClickedEvent = exports.createPickerMoreClickedEvent = exports.createPickerCancelledEvent = exports.createPickerButtonClickedEvent = exports.createAndFireSafe = exports.createAndFireEventInElementsChannel = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _analyticsNext = require("@atlaskit/analytics-next");
+
+var _analyticsGasTypes = require("@atlaskit/analytics-gas-types");
+
+var _version = require("../version.json");
+
+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, _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 createAndFireEventInElementsChannel = (0, _analyticsNext.createAndFireEvent)('fabric-elements');
+exports.createAndFireEventInElementsChannel = createAndFireEventInElementsChannel;
+
+var createAndFireSafe = function createAndFireSafe(createAnalyticsEvent, creator) {
+  if (createAnalyticsEvent) {
+    for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+      args[_key - 2] = arguments[_key];
+    }
+
+    createAndFireEventInElementsChannel(creator.apply(void 0, args))(createAnalyticsEvent);
+  }
+};
+
+exports.createAndFireSafe = createAndFireSafe;
+
+var createPayload = function createPayload(action, actionSubject, eventType, actionSubjectId) {
+  return function () {
+    var attributes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return {
+      action: action,
+      actionSubject: actionSubject,
+      eventType: eventType,
+      actionSubjectId: actionSubjectId,
+      attributes: _objectSpread(_objectSpread({}, attributes), {}, {
+        packageName: _version.name,
+        packageVersion: _version.version
+      })
+    };
+  };
+};
+
+var calculateDuration = function calculateDuration(startTime) {
+  return startTime ? Date.now() - startTime : undefined;
+};
+
+var getPreviousState = function getPreviousState(reaction) {
+  if (reaction) {
+    if (reaction.reacted) {
+      return 'existingReacted';
+    }
+
+    return 'existingNotReacted';
+  }
+
+  return 'new';
+};
+
+var createRestSucceededEvent = function createRestSucceededEvent(actionSubject) {
+  return createPayload('succeeded', actionSubject, _analyticsGasTypes.OPERATIONAL_EVENT_TYPE)();
+};
+
+exports.createRestSucceededEvent = createRestSucceededEvent;
+
+var createRestFailedEvent = function createRestFailedEvent(actionSubject, errorCode) {
+  return createPayload('failed', actionSubject, _analyticsGasTypes.OPERATIONAL_EVENT_TYPE)({
+    errorCode: errorCode
+  });
+};
+
+exports.createRestFailedEvent = createRestFailedEvent;
+
+var createReactionsRenderedEvent = function createReactionsRenderedEvent(startTime) {
+  return createPayload('rendered', 'reactionView', _analyticsGasTypes.OPERATIONAL_EVENT_TYPE)({
+    duration: calculateDuration(startTime)
+  });
+};
+
+exports.createReactionsRenderedEvent = createReactionsRenderedEvent;
+
+var createPickerButtonClickedEvent = function createPickerButtonClickedEvent(reactionEmojiCount) {
+  return createPayload('clicked', 'reactionPickerButton', _analyticsGasTypes.UI_EVENT_TYPE)({
+    reactionEmojiCount: reactionEmojiCount
+  });
+};
+
+exports.createPickerButtonClickedEvent = createPickerButtonClickedEvent;
+
+var createPickerCancelledEvent = function createPickerCancelledEvent(startTime) {
+  return createPayload('cancelled', 'reactionPicker', _analyticsGasTypes.UI_EVENT_TYPE)({
+    duration: calculateDuration(startTime)
+  });
+};
+
+exports.createPickerCancelledEvent = createPickerCancelledEvent;
+
+var createPickerMoreClickedEvent = function createPickerMoreClickedEvent(startTime) {
+  return createPayload('clicked', 'reactionPicker', _analyticsGasTypes.UI_EVENT_TYPE, 'more')({
+    duration: calculateDuration(startTime)
+  });
+};
+
+exports.createPickerMoreClickedEvent = createPickerMoreClickedEvent;
+
+var createReactionSelectionEvent = function createReactionSelectionEvent(source, emojiId, reaction, startTime) {
+  return createPayload('clicked', 'reactionPicker', _analyticsGasTypes.UI_EVENT_TYPE, 'emoji')({
+    duration: calculateDuration(startTime),
+    source: source,
+    previousState: getPreviousState(reaction),
+    emojiId: emojiId
+  });
+};
+
+exports.createReactionSelectionEvent = createReactionSelectionEvent;
+
+var createReactionHoveredEvent = function createReactionHoveredEvent(startTime) {
+  return createPayload('hovered', 'existingReaction', _analyticsGasTypes.UI_EVENT_TYPE)({
+    duration: calculateDuration(startTime)
+  });
+};
+
+exports.createReactionHoveredEvent = createReactionHoveredEvent;
+
+var createReactionClickedEvent = function createReactionClickedEvent(added, emojiId) {
+  return createPayload('clicked', 'existingReaction', _analyticsGasTypes.UI_EVENT_TYPE)({
+    added: added,
+    emojiId: emojiId
+  });
+};
+
+exports.createReactionClickedEvent = createReactionClickedEvent;

package/dist/cjs/analytics/index.js

@@ -1,21 +1,15 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createRestSucceededEvent = exports.createRestFailedEvent = exports.createReactionsRenderedEvent = exports.createReactionSelectionEvent = exports.createReactionHoveredEvent = exports.createReactionClickedEvent = exports.createPickerMoreClickedEvent = exports.createPickerCancelledEvent = exports.createPickerButtonClickedEvent = exports.createAndFireSafe = exports.createAndFireEventInElementsChannel = exports.UFO = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+exports.UFO = exports.Analytics = void 0;
 
-var _analyticsNext = require("@atlaskit/analytics-next");
+var _Analytics = _interopRequireWildcard(require("./analytics"));
 
-var _analyticsGasTypes = require("@atlaskit/analytics-gas-types");
-
-var _version = require("../version.json");
+exports.Analytics = _Analytics;
 
 var _UFO = _interopRequireWildcard(require("./ufo"));
 
@@ -23,128 +17,4 @@ exports.UFO = _UFO;
 
 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; }
-
-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, _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 createAndFireEventInElementsChannel = (0, _analyticsNext.createAndFireEvent)('fabric-elements');
-exports.createAndFireEventInElementsChannel = createAndFireEventInElementsChannel;
-
-var createAndFireSafe = function createAndFireSafe(createAnalyticsEvent, creator) {
-  if (createAnalyticsEvent) {
-    for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
-      args[_key - 2] = arguments[_key];
-    }
-
-    createAndFireEventInElementsChannel(creator.apply(void 0, args))(createAnalyticsEvent);
-  }
-};
-
-exports.createAndFireSafe = createAndFireSafe;
-
-var createPayload = function createPayload(action, actionSubject, eventType, actionSubjectId) {
-  return function (attributes) {
-    return {
-      action: action,
-      actionSubject: actionSubject,
-      eventType: eventType,
-      actionSubjectId: actionSubjectId,
-      attributes: _objectSpread(_objectSpread({}, attributes), {}, {
-        packageName: _version.name,
-        packageVersion: _version.version
-      })
-    };
-  };
-};
-
-var calculateDuration = function calculateDuration(startTime) {
-  return startTime ? Date.now() - startTime : undefined;
-};
-
-var getPreviousState = function getPreviousState(reaction) {
-  if (reaction) {
-    if (reaction.reacted) {
-      return 'existingReacted';
-    }
-
-    return 'existingNotReacted';
-  }
-
-  return 'new';
-};
-
-var createRestSucceededEvent = function createRestSucceededEvent(actionSubject) {
-  return createPayload('succeeded', actionSubject, _analyticsGasTypes.OPERATIONAL_EVENT_TYPE)({});
-};
-
-exports.createRestSucceededEvent = createRestSucceededEvent;
-
-var createRestFailedEvent = function createRestFailedEvent(actionSubject, errorCode) {
-  return createPayload('failed', actionSubject, _analyticsGasTypes.OPERATIONAL_EVENT_TYPE)({
-    errorCode: errorCode
-  });
-};
-
-exports.createRestFailedEvent = createRestFailedEvent;
-
-var createReactionsRenderedEvent = function createReactionsRenderedEvent(startTime) {
-  return createPayload('rendered', 'reactionView', _analyticsGasTypes.OPERATIONAL_EVENT_TYPE)({
-    duration: calculateDuration(startTime)
-  });
-};
-
-exports.createReactionsRenderedEvent = createReactionsRenderedEvent;
-
-var createPickerButtonClickedEvent = function createPickerButtonClickedEvent(reactionEmojiCount) {
-  return createPayload('clicked', 'reactionPickerButton', _analyticsGasTypes.UI_EVENT_TYPE)({
-    reactionEmojiCount: reactionEmojiCount
-  });
-};
-
-exports.createPickerButtonClickedEvent = createPickerButtonClickedEvent;
-
-var createPickerCancelledEvent = function createPickerCancelledEvent(startTime) {
-  return createPayload('cancelled', 'reactionPicker', _analyticsGasTypes.UI_EVENT_TYPE)({
-    duration: calculateDuration(startTime)
-  });
-};
-
-exports.createPickerCancelledEvent = createPickerCancelledEvent;
-
-var createPickerMoreClickedEvent = function createPickerMoreClickedEvent(startTime) {
-  return createPayload('clicked', 'reactionPicker', _analyticsGasTypes.UI_EVENT_TYPE, 'more')({
-    duration: calculateDuration(startTime)
-  });
-};
-
-exports.createPickerMoreClickedEvent = createPickerMoreClickedEvent;
-
-var createReactionSelectionEvent = function createReactionSelectionEvent(source, emojiId, reaction, startTime) {
-  return createPayload('clicked', 'reactionPicker', _analyticsGasTypes.UI_EVENT_TYPE, 'emoji')({
-    duration: calculateDuration(startTime),
-    source: source,
-    previousState: getPreviousState(reaction),
-    emojiId: emojiId
-  });
-};
-
-exports.createReactionSelectionEvent = createReactionSelectionEvent;
-
-var createReactionHoveredEvent = function createReactionHoveredEvent(startTime) {
-  return createPayload('hovered', 'existingReaction', _analyticsGasTypes.UI_EVENT_TYPE)({
-    duration: calculateDuration(startTime)
-  });
-};
-
-exports.createReactionHoveredEvent = createReactionHoveredEvent;
-
-var createReactionClickedEvent = function createReactionClickedEvent(added, emojiId) {
-  return createPayload('clicked', 'existingReaction', _analyticsGasTypes.UI_EVENT_TYPE)({
-    added: added,
-    emojiId: emojiId
-  });
-};
-
-exports.createReactionClickedEvent = createReactionClickedEvent;
+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; }

package/dist/cjs/client/ReactionServiceClient.js

@@ -19,7 +19,23 @@ 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) { (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; }
 
+/**
+ * Utility class to retrieve/modify all actions on reactions collection
+ */
 var ReactionServiceClient = /*#__PURE__*/function () {
+  /**
+   * oAuth token
+   */
+
+  /**
+   * API config
+   */
+
+  /**
+   *
+   * @param baseUrl base domain url
+   * @param sessionToken oAuth token for reactions emoji services
+   */
   function ReactionServiceClient(baseUrl, sessionToken) {
     var _this = this;
 
@@ -34,17 +50,18 @@ var ReactionServiceClient = /*#__PURE__*/function () {
     };
     this.sessionToken = sessionToken;
   }
+  /**
+   * Get http headers for the "fetch" request
+   * @param hasBody
+   */
+
 
   (0, _createClass2.default)(ReactionServiceClient, [{
     key: "getHeaders",
     value: function getHeaders() {
-      var hasBody = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
       var headers = {};
       headers['Accept'] = 'application/json';
-
-      if (hasBody) {
-        headers['Content-Type'] = 'application/json';
-      }
+      headers['Content-Type'] = 'application/json';
 
       if (this.sessionToken) {
         headers['Authorization'] = this.sessionToken;
@@ -52,6 +69,12 @@ var ReactionServiceClient = /*#__PURE__*/function () {
 
       return headers;
     }
+    /**
+     * Send a request to remote service
+     * @param path endpoint api url
+     * @param options Optional custom params
+     */
+
   }, {
     key: "getReactions",
     value: function getReactions(containerAri, aris) {
@@ -74,7 +97,7 @@ var ReactionServiceClient = /*#__PURE__*/function () {
     key: "getDetailedReaction",
     value: function getDetailedReaction(containerAri, ari, emojiId) {
       var reactionId = "".concat(containerAri, "|").concat(ari, "|").concat(emojiId);
-      var headers = this.getHeaders(false);
+      var headers = this.getHeaders();
       return this.requestService('reactions', {
         queryParams: {
           reactionId: reactionId

package/dist/cjs/client/index.js

@@ -3,43 +3,11 @@
 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 _MockReactionsClient = require("./MockReactionsClient");
+var _ReactionServiceClient = require("./ReactionServiceClient");

package/dist/cjs/components/{Counter.js → Counter/Counter.js}

@@ -7,55 +7,47 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.highlightStyle = exports.counterTestId = exports.countStyle = exports.containerStyle = exports.Counter = void 0;
+exports.RENDER_COUNTER_WRAPPER_TESTID = exports.RENDER_COUNTER_TESTID = exports.Counter = void 0;
 
-var _core = require("@emotion/core");
-
-var _colors = require("@atlaskit/theme/colors");
+var _react = _interopRequireDefault(require("react"));
 
-var _tokens = require("@atlaskit/tokens");
-
-var _react = _interopRequireWildcard(require("react"));
+var _core = require("@emotion/core");
 
 var _motion = require("@atlaskit/motion");
 
 var _usePreviousValue = _interopRequireDefault(require("@atlaskit/ds-lib/use-previous-value"));
 
+var styles = _interopRequireWildcard(require("./styles"));
+
 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; }
 
 /** @jsx jsx */
 // eslint-disable-next-line @atlaskit/design-system/no-banned-imports
-var counterTestId = 'counter-container';
-exports.counterTestId = counterTestId;
-var countStyle = (0, _core.css)({
-  fontSize: 11,
-  // TODO: nice to have a theme level token for fontSize
-  color: (0, _tokens.token)('color.text.subtlest', _colors.N500),
-  overflow: 'hidden',
-  position: 'relative',
-  padding: '4px 8px 4px 0',
-  lineHeight: '14px'
-});
-exports.countStyle = countStyle;
-var highlightStyle = (0, _core.css)({
-  color: (0, _tokens.token)('color.text.selected', _colors.B400),
-  fontWeight: 600
-});
-exports.highlightStyle = highlightStyle;
-var containerStyle = (0, _core.css)({
-  display: 'flex',
-  flexDirection: 'column'
-});
-exports.containerStyle = containerStyle;
-var Counter = /*#__PURE__*/(0, _react.memo)(function (_ref) {
+
+/**
+ * Test id for wrapper div
+ */
+var RENDER_COUNTER_TESTID = 'counter-container';
+/**
+ * Test id for container div
+ */
+
+exports.RENDER_COUNTER_TESTID = RENDER_COUNTER_TESTID;
+var RENDER_COUNTER_WRAPPER_TESTID = 'counter-wrapper';
+exports.RENDER_COUNTER_WRAPPER_TESTID = RENDER_COUNTER_WRAPPER_TESTID;
+
+/**
+ * Display reaction count next to the emoji button
+ */
+var Counter = function Counter(_ref) {
   var _ref$highlight = _ref.highlight,
       highlight = _ref$highlight === void 0 ? false : _ref$highlight,
       _ref$limit = _ref.limit,
-      limit = _ref$limit === void 0 ? 100 : _ref$limit,
+      limit = _ref$limit === void 0 ? 1000 : _ref$limit,
       _ref$overLimitLabel = _ref.overLimitLabel,
-      overLimitLabel = _ref$overLimitLabel === void 0 ? '99+' : _ref$overLimitLabel,
+      overLimitLabel = _ref$overLimitLabel === void 0 ? '1k+' : _ref$overLimitLabel,
       className = _ref.className,
       value = _ref.value,
       _ref$animationDuratio = _ref.animationDuration,
@@ -80,10 +72,10 @@ var Counter = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var increase = previousValue ? previousValue < value : false;
   return (0, _core.jsx)("div", {
     className: className,
-    css: countStyle,
-    style: {
+    "data-testid": RENDER_COUNTER_WRAPPER_TESTID,
+    css: [styles.countStyle, {
       width: label.length * 7
-    }
+    }]
   }, (0, _core.jsx)(_motion.ExitingPersistence, null, (0, _core.jsx)(_motion.SlideIn, {
     enterFrom: increase ? 'bottom' : 'top',
     key: value,
@@ -91,15 +83,16 @@ var Counter = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   }, function (motion, direction) {
     return (0, _core.jsx)("div", {
       ref: motion.ref,
-      css: [containerStyle, (0, _core.css)({
+      css: [styles.containerStyle, (0, _core.css)({
         position: direction === 'exiting' ? 'absolute' : undefined
       })],
       className: motion.className,
-      "data-testid": counterTestId
+      "data-testid": RENDER_COUNTER_TESTID
     }, (0, _core.jsx)("div", {
-      css: highlight && highlightStyle,
+      css: highlight && styles.highlightStyle,
       key: value
     }, label));
   })));
-});
+};
+
 exports.Counter = Counter;

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

@@ -0,0 +1,36 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Counter", {
+  enumerable: true,
+  get: function get() {
+    return _Counter.Counter;
+  }
+});
+Object.defineProperty(exports, "RENDER_COUNTER_TESTID", {
+  enumerable: true,
+  get: function get() {
+    return _Counter.RENDER_COUNTER_TESTID;
+  }
+});
+Object.defineProperty(exports, "RENDER_COUNTER_WRAPPER_TESTID", {
+  enumerable: true,
+  get: function get() {
+    return _Counter.RENDER_COUNTER_WRAPPER_TESTID;
+  }
+});
+exports.styles = void 0;
+
+var _Counter = require("./Counter");
+
+var _styles = _interopRequireWildcard(require("./styles"));
+
+exports.styles = _styles;
+
+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; }

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

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.highlightStyle = exports.countStyle = exports.containerStyle = void 0;
+
+var _core = require("@emotion/core");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _tokens = require("@atlaskit/tokens");
+
+/** @jsx jsx */
+var countStyle = (0, _core.css)({
+  fontSize: 11,
+  color: (0, _tokens.token)('color.text.subtlest', _colors.N90),
+  overflow: 'hidden',
+  position: 'relative',
+  padding: '4px 8px 4px 0',
+  lineHeight: '14px'
+});
+exports.countStyle = countStyle;
+var highlightStyle = (0, _core.css)({
+  color: (0, _tokens.token)('color.text.selected', _colors.B400),
+  fontWeight: 600
+});
+exports.highlightStyle = highlightStyle;
+var containerStyle = (0, _core.css)({
+  display: 'flex',
+  flexDirection: 'column'
+});
+exports.containerStyle = containerStyle;