@atlaskit/reactions 21.6.2 → 21.8.0

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

@@ -9,17 +9,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ReactionPicker = exports.RENDER_REACTIONPICKER_TESTID = void 0;
 
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
+
+var _reactIntlNext = require("react-intl-next");
 
 var _picker = require("@atlaskit/emoji/picker");
 
@@ -33,6 +31,8 @@ var _Trigger = require("../Trigger");
 
 var _analytics = require("../../analytics");
 
+var _shared = require("../../shared");
+
 var _hooks = require("../../hooks");
 
 var styles = _interopRequireWildcard(require("./styles"));
@@ -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:
@@ -91,7 +96,9 @@ var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
       pickerQuickReactionEmojiIds = props.pickerQuickReactionEmojiIds,
       onShowMore = props.onShowMore,
       onOpen = props.onOpen,
-      onCancel = props.onCancel;
+      onCancel = props.onCancel,
+      _props$tooltipContent = 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)
    */
@@ -101,9 +108,7 @@ var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
    * a function you can ask Popper to recompute your tooltip's position. It will directly call the Popper#update method
    */
 
-  var updatePopper = (0, _react.useRef)(function () {
-    return Promise.resolve();
-  });
+  var updatePopper = (0, _react.useRef)();
 
   var _useState = (0, _react.useState)({
     /**
@@ -130,7 +135,7 @@ var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
     }
 
     close();
-  });
+  }, 'click', true);
   /**
    * Event callback when the picker is closed
    * @param _id Optional id if an emoji button was selected or undefineed if was clicked outside the picker
@@ -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'
       }
     });
@@ -155,39 +160,17 @@ var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
    * @param e event param
    */
 
-  var onSelectMoreClick = (0, _react.useCallback)( /*#__PURE__*/function () {
-    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
-      return _regenerator.default.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              e.preventDefault();
-              _context.next = 3;
-              return updatePopper.current();
-
-            case 3:
-              // Update popper position
-              setSettings({
-                isOpen: true,
-                showFullPicker: true
-              });
-
-              if (onShowMore) {
-                onShowMore();
-              }
-
-            case 5:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-
-    return function (_x) {
-      return _ref.apply(this, arguments);
-    };
-  }(), [onShowMore]);
+  var onSelectMoreClick = (0, _react.useCallback)(function (e) {
+    e.preventDefault();
+    setSettings({
+      isOpen: true,
+      showFullPicker: true
+    });
+
+    if (onShowMore) {
+      onShowMore();
+    }
+  }, [onShowMore]);
   /**
    * Event callback when an emoji icon is selected
    * @param item selected item
@@ -222,44 +205,61 @@ var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
 
     _analytics.UFO.PickerRender.success();
   };
+  /**
+   * When picker is opened, re-calculate the picker position
+   */
+
 
+  (0, _react.useEffect)(function () {
+    if (settings.isOpen) {
+      if (updatePopper.current) {
+        updatePopper.current();
+      }
+    }
+  }, [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 (_ref2) {
-    var popperRef = _ref2.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,
-        disabled: disabled
+        disabled: disabled,
+        tooltipContent: tooltipContent
       })
     );
-  }), (0, _core.jsx)(_popper.Popper, {
+  }), (0, _react2.jsx)(_popper.Popper, {
     placement: "bottom-start",
     modifiers: popperModifiers
-  }, function (_ref3) {
-    var ref = _ref3.ref,
-        style = _ref3.style,
-        update = _ref3.update;
+  }, function (_ref2) {
+    var ref = _ref2.ref,
+        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,16 +22,18 @@ 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)),
   '&> div': {
-    boxShadow: undefined
+    boxShadow: undefined,
+    marginTop: '4px',
+    marginBottom: '4px'
   }
 });
 exports.popupStyle = popupStyle;

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
 });

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

@@ -1,22 +1,19 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Reactions = exports.RENDER_TOOLTIP_TESTID = exports.RENDER_REACTIONS_TESTID = void 0;
+exports.Reactions = exports.RENDER_REACTIONS_TESTID = void 0;
+exports.getTooltip = getTooltip;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-
 var _reactIntlNext = require("react-intl-next");
 
 var _analytics = require("../../analytics");
@@ -41,26 +38,40 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * Test id for wrapper Reactions div
  */
 var RENDER_REACTIONS_TESTID = 'render-reactions';
+exports.RENDER_REACTIONS_TESTID = RENDER_REACTIONS_TESTID;
+
 /**
- * Test id for the tooltip
+ * Get content of the tooltip
  */
+function getTooltip(status, errorMessage) {
+  switch (status) {
+    case _types.ReactionStatus.error:
+      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)
 
-exports.RENDER_REACTIONS_TESTID = RENDER_REACTIONS_TESTID;
-var RENDER_TOOLTIP_TESTID = 'render-tooltip';
-exports.RENDER_TOOLTIP_TESTID = RENDER_TOOLTIP_TESTID;
+    case _types.ReactionStatus.disabled:
+      return null;
+
+    case _types.ReactionStatus.notLoaded:
+    case _types.ReactionStatus.loading:
+      return (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _shared.i18n.messages.loadingReactions);
 
+    case _types.ReactionStatus.ready:
+      return (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _shared.i18n.messages.addReaction);
+  }
+}
 /**
  * Renders list of reactions
  */
+
+
 var Reactions = /*#__PURE__*/_react.default.memo(function (_ref) {
   var _ref$flash = _ref.flash,
       flash = _ref$flash === void 0 ? {} : _ref$flash,
       status = _ref.status,
       errorMessage = _ref.errorMessage,
       loadReaction = _ref.loadReaction,
-      quickReactionEmojiIds = _ref.quickReactionEmojiIds,
-      containerAri = _ref.containerAri,
-      ari = _ref.ari,
+      quickReactionEmojis = _ref.quickReactionEmojis,
       pickerQuickReactionEmojiIds = _ref.pickerQuickReactionEmojiIds,
       onReactionHover = _ref.onReactionHover,
       onSelection = _ref.onSelection,
@@ -92,23 +103,6 @@ var Reactions = /*#__PURE__*/_react.default.memo(function (_ref) {
       renderTime.current = undefined;
     }
   }, [createAnalyticsEvent, status]);
-  /**
-   * Get content of the tooltip
-   */
-
-  var getTooltip = function getTooltip() {
-    switch (status) {
-      case _types.ReactionStatus.error:
-        return errorMessage || (0, _core.jsx)(_reactIntlNext.FormattedMessage, _shared.i18n.messages.unexpectedError);
-
-      case _types.ReactionStatus.loading:
-      case _types.ReactionStatus.notLoaded:
-        return (0, _core.jsx)(_reactIntlNext.FormattedMessage, _shared.i18n.messages.loadingReactions);
-
-      default:
-        return undefined;
-    }
-  };
 
   var handleReactionMouseEnter = function handleReactionMouseEnter(summary) {
     if (onReactionHover) {
@@ -147,12 +141,15 @@ var Reactions = /*#__PURE__*/_react.default.memo(function (_ref) {
     /**
      * If reactions not empty, don't show quick reactions Pre defined emoji or if its empty => return the current list of reactions
      */
-    if (reactions.length > 0 || !quickReactionEmojiIds) {
+    if (reactions.length > 0 || !quickReactionEmojis) {
       return reactions;
     } // add any missing default reactions
 
 
-    var items = quickReactionEmojiIds.filter(function (emojiId) {
+    var ari = quickReactionEmojis.ari,
+        containerAri = quickReactionEmojis.containerAri,
+        emojiIds = quickReactionEmojis.emojiIds;
+    var items = emojiIds.filter(function (emojiId) {
       return !reactions.some(function (reaction) {
         return reaction.emojiId === emojiId;
       });
@@ -166,12 +163,12 @@ var Reactions = /*#__PURE__*/_react.default.memo(function (_ref) {
       };
     });
     return reactions.concat(items);
-  }, [ari, containerAri, quickReactionEmojiIds, reactions]);
-  return (0, _core.jsx)("div", {
+  }, [quickReactionEmojis, reactions]);
+  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,
@@ -180,10 +177,7 @@ var Reactions = /*#__PURE__*/_react.default.memo(function (_ref) {
       onMouseEnter: handleReactionMouseEnter,
       flash: flash[reaction.emojiId]
     });
-  }), (0, _core.jsx)(_tooltip.default, {
-    testId: RENDER_TOOLTIP_TESTID,
-    content: getTooltip()
-  }, (0, _core.jsx)(_ReactionPicker.ReactionPicker, {
+  }), (0, _react2.jsx)(_ReactionPicker.ReactionPicker, {
     css: styles.reactionStyle,
     emojiProvider: emojiProvider,
     miniMode: true,
@@ -193,8 +187,9 @@ var Reactions = /*#__PURE__*/_react.default.memo(function (_ref) {
     onSelection: handleOnSelection,
     onOpen: handlePickerOpen,
     onCancel: handleOnCancel,
-    onShowMore: handleOnMore
-  })));
+    onShowMore: handleOnMore,
+    tooltipContent: getTooltip(status, errorMessage)
+  }));
 });
 
 exports.Reactions = Reactions;

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

@@ -9,12 +9,6 @@ Object.defineProperty(exports, "RENDER_REACTIONS_TESTID", {
     return _Reactions.RENDER_REACTIONS_TESTID;
   }
 });
-Object.defineProperty(exports, "RENDER_TOOLTIP_TESTID", {
-  enumerable: true,
-  get: function get() {
-    return _Reactions.RENDER_TOOLTIP_TESTID;
-  }
-});
 Object.defineProperty(exports, "Reactions", {
   enumerable: true,
   get: function get() {

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,24 +47,25 @@ 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],
-      title: _shared.i18n.messages.moreEmoji.defaultMessage,
+      "aria-label": _shared.i18n.messages.moreEmoji.defaultMessage,
       type: "button",
       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() {