@atlaskit/reactions 21.7.0 → 21.8.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/reactions
 
+## 21.8.0
+
+### Minor Changes
+
+- [`cb37ece1f9e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb37ece1f9e) - Add aria expanded and aria cotrols to reaction picker toggle
+
+### Patch Changes
+
+- [`d74d5065a25`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d74d5065a25) - minor analytics update
+- [`2d0d8c066d4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2d0d8c066d4) - Upgrade emotion library inside Reactions to use version 11
+- [`ee2a087d647`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ee2a087d647) - Reducing Enzyme dependencies across reactions unit tests and move the testint-library
+- Updated dependencies
+
 ## 21.7.0
 
 ### Minor Changes

package/dist/cjs/analytics/analytics.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 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;
+exports.extractErrorInfo = 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"));
 
@@ -137,5 +137,24 @@ var createReactionClickedEvent = function createReactionClickedEvent(added, emoj
     emojiId: 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
+ */
 
-exports.createReactionClickedEvent = createReactionClickedEvent;
+
+exports.createReactionClickedEvent = createReactionClickedEvent;
+
+var extractErrorInfo = function extractErrorInfo(error) {
+  if (error instanceof Error) {
+    return {
+      name: error.name,
+      message: error.message
+    };
+  }
+
+  return error;
+};
+
+exports.extractErrorInfo = extractErrorInfo;

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

@@ -7,16 +7,18 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RENDER_COUNTER_WRAPPER_TESTID = exports.RENDER_COUNTER_TESTID = exports.Counter = void 0;
+exports.getLabel = exports.RENDER_LABEL_TESTID = exports.RENDER_COUNTER_TESTID = exports.RENDER_COMPONENT_WRAPPER = exports.Counter = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _motion = require("@atlaskit/motion");
 
 var _usePreviousValue = _interopRequireDefault(require("@atlaskit/ds-lib/use-previous-value"));
 
+var _shared = require("../../shared");
+
 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); }
@@ -27,68 +29,74 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 // eslint-disable-next-line @atlaskit/design-system/no-banned-imports
 
 /**
- * Test id for wrapper div
+ * Test id for component top level div
+ */
+var RENDER_COMPONENT_WRAPPER = 'counter-wrapper';
+/**
+ * Test id for wrapper div of the counter inside the slider
  */
+
+exports.RENDER_COMPONENT_WRAPPER = RENDER_COMPONENT_WRAPPER;
 var RENDER_COUNTER_TESTID = 'counter-container';
 /**
- * Test id for container div
+ * Counter label value wrapper div
  */
 
 exports.RENDER_COUNTER_TESTID = RENDER_COUNTER_TESTID;
-var RENDER_COUNTER_WRAPPER_TESTID = 'counter-wrapper';
-exports.RENDER_COUNTER_WRAPPER_TESTID = RENDER_COUNTER_WRAPPER_TESTID;
-
+var RENDER_LABEL_TESTID = 'counter_label_wrapper';
+exports.RENDER_LABEL_TESTID = RENDER_LABEL_TESTID;
+
+var getLabel = function 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
  */
+
+
+exports.getLabel = getLabel;
+
 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 ? 1000 : _ref$limit,
+      limit = _ref$limit === void 0 ? _shared.constants.DEFAULT_REACTION_TOP_LIMIT : _ref$limit,
       _ref$overLimitLabel = _ref.overLimitLabel,
-      overLimitLabel = _ref$overLimitLabel === void 0 ? '1k+' : _ref$overLimitLabel,
+      overLimitLabel = _ref$overLimitLabel === void 0 ? _shared.constants.DEFAULT_OVER_THE_LIMIT_REACTION_LABEL : _ref$overLimitLabel,
       className = _ref.className,
       value = _ref.value,
       _ref$animationDuratio = _ref.animationDuration,
       animationDuration = _ref$animationDuratio === void 0 ? _motion.mediumDurationMs : _ref$animationDuratio;
-
-  var hasReachedLimit = function hasReachedLimit(value) {
-    return limit && value >= limit;
-  };
-
-  var getLabel = function getLabel(value) {
-    if (hasReachedLimit(value)) {
-      return overLimitLabel || '';
-    } else if (value === 0) {
-      return '';
-    } else {
-      return value.toString();
-    }
-  };
-
   var previousValue = (0, _usePreviousValue.default)(value);
-  var label = getLabel(value);
+  var label = getLabel(value, overLimitLabel, limit);
   var increase = previousValue ? previousValue < value : false;
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     className: className,
-    "data-testid": RENDER_COUNTER_WRAPPER_TESTID,
+    "data-testid": RENDER_COMPONENT_WRAPPER,
     css: [styles.countStyle, {
       width: label.length * 7
     }]
-  }, (0, _core.jsx)(_motion.ExitingPersistence, null, (0, _core.jsx)(_motion.SlideIn, {
+  }, (0, _react2.jsx)(_motion.ExitingPersistence, null, (0, _react2.jsx)(_motion.SlideIn, {
     enterFrom: increase ? 'bottom' : 'top',
     key: value,
     duration: animationDuration
   }, function (motion, direction) {
-    return (0, _core.jsx)("div", {
+    return (0, _react2.jsx)("div", {
       ref: motion.ref,
-      css: [styles.containerStyle, (0, _core.css)({
+      css: [styles.containerStyle, (0, _react2.css)({
         position: direction === 'exiting' ? 'absolute' : undefined
       })],
       className: motion.className,
       "data-testid": RENDER_COUNTER_TESTID
-    }, (0, _core.jsx)("div", {
+    }, (0, _react2.jsx)("div", {
+      "data-testid": RENDER_LABEL_TESTID,
       css: highlight && styles.highlightStyle,
       key: value
     }, label));

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

@@ -11,16 +11,22 @@ Object.defineProperty(exports, "Counter", {
     return _Counter.Counter;
   }
 });
+Object.defineProperty(exports, "RENDER_COMPONENT_WRAPPER", {
+  enumerable: true,
+  get: function get() {
+    return _Counter.RENDER_COMPONENT_WRAPPER;
+  }
+});
 Object.defineProperty(exports, "RENDER_COUNTER_TESTID", {
   enumerable: true,
   get: function get() {
     return _Counter.RENDER_COUNTER_TESTID;
   }
 });
-Object.defineProperty(exports, "RENDER_COUNTER_WRAPPER_TESTID", {
+Object.defineProperty(exports, "RENDER_LABEL_TESTID", {
   enumerable: true,
   get: function get() {
-    return _Counter.RENDER_COUNTER_WRAPPER_TESTID;
+    return _Counter.RENDER_LABEL_TESTID;
   }
 });
 exports.styles = void 0;

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

@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.highlightStyle = exports.countStyle = exports.containerStyle = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
 var _tokens = require("@atlaskit/tokens");
 
 /** @jsx jsx */
-var countStyle = (0, _core.css)({
+var countStyle = (0, _react.css)({
   fontSize: 11,
   color: (0, _tokens.token)('color.text.subtlest', _colors.N90),
   overflow: 'hidden',
@@ -21,12 +21,12 @@ var countStyle = (0, _core.css)({
   lineHeight: '14px'
 });
 exports.countStyle = countStyle;
-var highlightStyle = (0, _core.css)({
+var highlightStyle = (0, _react.css)({
   color: (0, _tokens.token)('color.text.selected', _colors.B400),
   fontWeight: 600
 });
 exports.highlightStyle = highlightStyle;
-var containerStyle = (0, _core.css)({
+var containerStyle = (0, _react.css)({
   display: 'flex',
   flexDirection: 'column'
 });

package/dist/cjs/components/EmojiButton/EmojiButton.js

@@ -13,7 +13,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _emoji = require("@atlaskit/emoji");
 
@@ -46,7 +46,7 @@ var EmojiButton = function EmojiButton(_ref) {
   };
 
   var intl = (0, _reactIntlNext.useIntl)();
-  return (0, _core.jsx)("button", {
+  return (0, _react2.jsx)("button", {
     "data-testid": RENDER_BUTTON_TESTID,
     onClick: onButtonClick,
     "aria-label": intl.formatMessage(_shared.i18n.messages.reactWithEmoji, {
@@ -54,7 +54,7 @@ var EmojiButton = function EmojiButton(_ref) {
     }),
     type: "button",
     css: styles.emojiButtonStyle
-  }, (0, _core.jsx)(_emoji.ResourcedEmoji, {
+  }, (0, _react2.jsx)(_emoji.ResourcedEmoji, {
     emojiProvider: emojiProvider,
     emojiId: emojiId
   }));

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

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.emojiButtonStyle = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 /** @jsx jsx */
-var emojiButtonStyle = (0, _core.css)({
+var emojiButtonStyle = (0, _react.css)({
   outline: 'none',
   display: 'flex',
   backgroundColor: 'transparent',

package/dist/cjs/components/FlashAnimation/FlashAnimation.js

@@ -11,7 +11,7 @@ exports.RENDER_FLASHANIMATION_TESTID = exports.FlashAnimation = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var styles = _interopRequireWildcard(require("./styles"));
 
@@ -32,7 +32,7 @@ var RENDER_FLASHANIMATION_TESTID = 'flash-animation';
 exports.RENDER_FLASHANIMATION_TESTID = RENDER_FLASHANIMATION_TESTID;
 
 var FlashAnimation = function FlashAnimation(props) {
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     className: props.className,
     css: [styles.containerStyle, props.flash && styles.flashStyle],
     "data-testid": RENDER_FLASHANIMATION_TESTID

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.flashStyle = exports.flashAnimation = exports.containerStyle = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -13,7 +13,7 @@ var _tokens = require("@atlaskit/tokens");
 
 /** @jsx jsx */
 var flashTime = 700;
-var flashAnimation = (0, _core.keyframes)({
+var flashAnimation = (0, _react.keyframes)({
   '0%': {
     backgroundColor: 'transparent'
   },
@@ -31,12 +31,12 @@ var flashAnimation = (0, _core.keyframes)({
   }
 });
 exports.flashAnimation = flashAnimation;
-var containerStyle = (0, _core.css)({
+var containerStyle = (0, _react.css)({
   width: '100%',
   height: '100%'
 });
 exports.containerStyle = containerStyle;
-var flashStyle = (0, _core.css)({
+var flashStyle = (0, _react.css)({
   animation: "".concat(flashAnimation, " ").concat(flashTime, "ms ease-in-out")
 });
 exports.flashStyle = flashStyle;

package/dist/cjs/components/Reaction/Reaction.js

@@ -19,7 +19,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
@@ -132,10 +132,10 @@ var Reaction = function Reaction(_ref) {
     }
   }, [createAnalyticsEvent, reaction, onMouseEnter]);
   var intl = (0, _reactIntlNext.useIntl)();
-  return (0, _core.jsx)(_ReactionTooltip.ReactionTooltip, {
+  return (0, _react2.jsx)(_ReactionTooltip.ReactionTooltip, {
     emojiName: emojiName,
     reaction: reaction
-  }, (0, _core.jsx)("button", {
+  }, (0, _react2.jsx)("button", {
     className: className,
     css: [styles.reactionStyle, reaction.reacted && styles.reactedStyle],
     "aria-label": intl.formatMessage(_shared.i18n.messages.reactWithEmoji, {
@@ -146,18 +146,18 @@ var Reaction = function Reaction(_ref) {
     "data-testid": RENDER_REACTION_TESTID,
     onMouseUp: handleMouseUp,
     onMouseEnter: handleMouseEnter
-  }, (0, _core.jsx)(_FlashAnimation.FlashAnimation, {
+  }, (0, _react2.jsx)(_FlashAnimation.FlashAnimation, {
     flash: flash,
     css: styles.flashStyle
-  }, (0, _core.jsx)("div", {
+  }, (0, _react2.jsx)("div", {
     css: [styles.emojiStyle, reaction.count === 0 && {
       padding: '4px 2px 4px 10px'
     }]
-  }, (0, _core.jsx)(_emoji.ResourcedEmoji, {
+  }, (0, _react2.jsx)(_emoji.ResourcedEmoji, {
     emojiProvider: emojiProvider,
     emojiId: emojiId,
     fitToHeight: 16
-  })), (0, _core.jsx)(_Counter.Counter, {
+  })), (0, _react2.jsx)(_Counter.Counter, {
     value: reaction.count,
     highlight: reaction.reacted
   }))));

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.reactionStyle = exports.reactedStyle = exports.flashStyle = exports.flashHeight = exports.emojiStyle = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -23,13 +23,13 @@ var akHeight = 24;
  * of FlashAnimation b/c it otherwise throws off the flash styling
  */
 
-var emojiStyle = (0, _core.css)({
+var emojiStyle = (0, _react.css)({
   transformOrigin: 'center center 0',
   lineHeight: '12px',
   padding: '4px 4px 4px 8px'
 });
 exports.emojiStyle = emojiStyle;
-var reactionStyle = (0, _core.css)({
+var reactionStyle = (0, _react.css)({
   outline: 'none',
   display: 'flex',
   flexDirection: 'row',
@@ -50,7 +50,7 @@ var reactionStyle = (0, _core.css)({
   }
 });
 exports.reactionStyle = reactionStyle;
-var reactedStyle = (0, _core.css)({
+var reactedStyle = (0, _react.css)({
   backgroundColor: (0, _tokens.token)('color.background.selected', _colors.B50),
   borderColor: (0, _tokens.token)('color.border.selected', _colors.B300),
   '&:hover': {
@@ -61,7 +61,7 @@ exports.reactedStyle = reactedStyle;
 var flashHeight = akHeight - 2; // height without the 1px border
 
 exports.flashHeight = flashHeight;
-var flashStyle = (0, _core.css)({
+var flashStyle = (0, _react.css)({
   display: 'flex',
   flexDirection: 'row',
   borderRadius: '10px',

package/dist/cjs/components/ReactionPicker/ReactionPicker.js

@@ -15,7 +15,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 _reactIntlNext = require("react-intl-next");
 
@@ -49,7 +49,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * Test id for wrapper ReactionPicker div
  */
 var RENDER_REACTIONPICKER_TESTID = 'reactionPicker-testid';
+/**
+ * Emoji Picker Controller Id for Accessibility Labels
+ */
+
 exports.RENDER_REACTIONPICKER_TESTID = RENDER_REACTIONPICKER_TESTID;
+var PICKER_CONTROL_ID = 'emoji-picker';
 var popperModifiers = [
 /**
  Removing this applyStyle modifier as it throws client errors ref:
@@ -93,7 +98,7 @@ var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
       onOpen = props.onOpen,
       onCancel = props.onCancel,
       _props$tooltipContent = props.tooltipContent,
-      tooltipContent = _props$tooltipContent === void 0 ? (0, _core.jsx)(_reactIntlNext.FormattedMessage, _shared.i18n.messages.addReaction) : _props$tooltipContent;
+      tooltipContent = _props$tooltipContent === void 0 ? (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _shared.i18n.messages.addReaction) : _props$tooltipContent;
   /**
    * Container <div /> reference (used by custom hook to detect click outside)
    */
@@ -145,7 +150,7 @@ var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
     _analytics.UFO.PickerRender.abort({
       metadata: {
         emojiId: _id,
-        source: 'Reaction-Picker',
+        source: 'ReactionPicker',
         reason: 'close dialog'
       }
     });
@@ -213,15 +218,19 @@ var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
     }
   }, [settings]);
   var wrapperClassName = " ".concat(settings.isOpen ? 'isOpen' : '', " ").concat(miniMode ? 'miniMode' : '', " ").concat(className);
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     className: wrapperClassName,
     css: styles.pickerStyle,
     ref: wrapperRef,
     "data-testid": RENDER_REACTIONPICKER_TESTID
-  }, (0, _core.jsx)(_popper.Manager, null, (0, _core.jsx)(_popper.Reference, null, function (_ref) {
+  }, (0, _react2.jsx)(_popper.Manager, null, (0, _react2.jsx)(_popper.Reference, null, function (_ref) {
     var popperRef = _ref.ref;
     return (// Render a button to open the <Selector /> panel
-      (0, _core.jsx)(_Trigger.Trigger, {
+      (0, _react2.jsx)(_Trigger.Trigger, {
+        ariaAttributes: {
+          'aria-expanded': settings.isOpen,
+          'aria-controls': PICKER_CONTROL_ID
+        },
         ref: popperRef,
         onClick: onTriggerClick,
         miniMode: miniMode,
@@ -229,7 +238,7 @@ var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
         tooltipContent: tooltipContent
       })
     );
-  }), (0, _core.jsx)(_popper.Popper, {
+  }), (0, _react2.jsx)(_popper.Popper, {
     placement: "bottom-start",
     modifiers: popperModifiers
   }, function (_ref2) {
@@ -237,19 +246,20 @@ var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
         style = _ref2.style,
         update = _ref2.update;
     updatePopper.current = update;
-    return (0, _core.jsx)(_react.Fragment, null, settings.isOpen && (0, _core.jsx)("div", {
+    return (0, _react2.jsx)(_react.Fragment, null, settings.isOpen && (0, _react2.jsx)("div", {
+      id: PICKER_CONTROL_ID,
       style: _objectSpread({
         zIndex: _constants.layers.layer()
       }, style),
       ref: ref
-    }, (0, _core.jsx)("div", {
+    }, (0, _react2.jsx)("div", {
       css: styles.popupStyle
-    }, settings.showFullPicker ? (0, _core.jsx)(_picker.EmojiPicker, {
+    }, settings.showFullPicker ? (0, _react2.jsx)(_picker.EmojiPicker, {
       emojiProvider: emojiProvider,
       onSelection: onEmojiSelected
-    }) : (0, _core.jsx)("div", {
+    }) : (0, _react2.jsx)("div", {
       css: styles.contentStyle
-    }, (0, _core.jsx)(_Selector.Selector, {
+    }, (0, _react2.jsx)(_Selector.Selector, {
       emojiProvider: emojiProvider,
       onSelection: onEmojiSelected,
       showMore: allowAllEmojis,

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.popupStyle = exports.pickerStyle = exports.contentStyle = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
@@ -14,7 +14,7 @@ var _colors = require("@atlaskit/theme/colors");
 var _tokens = require("@atlaskit/tokens");
 
 /** @jsx jsx */
-var pickerStyle = (0, _core.css)({
+var pickerStyle = (0, _react.css)({
   verticalAlign: 'middle',
   '&.miniMode': {
     display: 'inline-block',
@@ -22,11 +22,11 @@ var pickerStyle = (0, _core.css)({
   }
 });
 exports.pickerStyle = pickerStyle;
-var contentStyle = (0, _core.css)({
+var contentStyle = (0, _react.css)({
   display: 'flex'
 });
 exports.contentStyle = contentStyle;
-var popupStyle = (0, _core.css)({
+var popupStyle = (0, _react.css)({
   background: (0, _tokens.token)('elevation.surface.overlay', _colors.N0),
   borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
   boxShadow: (0, _tokens.token)('elevation.shadow.overlay', "0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A)),

package/dist/cjs/components/ReactionTooltip/ReactionTooltip.js

@@ -13,7 +13,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
@@ -46,25 +46,25 @@ var ReactionTooltip = function ReactionTooltip(_ref) {
   /**
    * Render list of users in the tooltip box
    */
-  var content = !users || users.length === 0 ? null : (0, _core.jsx)("div", {
+  var content = !users || users.length === 0 ? null : (0, _react2.jsx)("div", {
     css: styles.tooltipStyle
-  }, (0, _core.jsx)("ul", null, emojiName ? (0, _core.jsx)("li", {
+  }, (0, _react2.jsx)("ul", null, emojiName ? (0, _react2.jsx)("li", {
     css: styles.emojiNameStyle
   }, emojiName) : null, users.slice(0, maxReactions).map(function (user, index) {
-    return (0, _core.jsx)("li", {
+    return (0, _react2.jsx)("li", {
       key: index
     }, user.displayName);
-  }), users.length > maxReactions ? (0, _core.jsx)("li", {
+  }), users.length > maxReactions ? (0, _react2.jsx)("li", {
     css: styles.footerStyle
-  }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _shared.i18n.messages.otherUsers, {
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _shared.i18n.messages.otherUsers, {
     values: {
       count: users.length - maxReactions
     }
   }))) : null));
-  return (0, _core.jsx)(_tooltip.default, {
+  return (0, _react2.jsx)(_tooltip.default, {
     content: content,
     position: "bottom",
-    "data-testid": RENDER_REACTIONTOOLTIP_TESTID
+    testId: RENDER_REACTIONTOOLTIP_TESTID
   }, _react.default.Children.only(children));
 };
 

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.verticalMargin = exports.tooltipStyle = exports.footerStyle = exports.emojiNameStyle = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _tokens = require("@atlaskit/tokens");
 
@@ -14,7 +14,7 @@ var _colors = require("@atlaskit/theme/colors");
 /** @jsx jsx */
 var verticalMargin = 5;
 exports.verticalMargin = verticalMargin;
-var tooltipStyle = (0, _core.css)({
+var tooltipStyle = (0, _react.css)({
   maxWidth: '150px',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
@@ -33,13 +33,13 @@ var tooltipStyle = (0, _core.css)({
   }
 });
 exports.tooltipStyle = tooltipStyle;
-var emojiNameStyle = (0, _core.css)({
+var emojiNameStyle = (0, _react.css)({
   textTransform: 'capitalize',
   color: (0, _tokens.token)('color.text.inverse', _colors.N90),
   fontWeight: 600
 });
 exports.emojiNameStyle = emojiNameStyle;
-var footerStyle = (0, _core.css)({
+var footerStyle = (0, _react.css)({
   color: (0, _tokens.token)('color.text.inverse', _colors.N90),
   fontWeight: 300
 });