@atlaskit/emoji 66.0.0 → 66.0.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/emoji
 
+## 66.0.2
+
+### Patch Changes
+
+- [`cdf42c26e75`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cdf42c26e75) - Upgrade emotion library to use latest version 11
+- [`cb5bbf2cd8c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb5bbf2cd8c) - Add testId to cancel upload button. No behaviour change.
+- [`d74d5065a25`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d74d5065a25) - minor analytics update
+- Updated dependencies
+
+## 66.0.1
+
+### Patch Changes
+
+- [`98b7ff82dae`](https://bitbucket.org/atlassian/atlassian-frontend/commits/98b7ff82dae) - [UX] To remove the unwanted styles (which is taken care in typeahead list component ED-15655)
+- [`f86e84d3cd8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f86e84d3cd8) - ED-13980 Changes to make typeahead menu accessible by adding assistive text and improving keyboard navigation
+- Updated dependencies
+
 ## 66.0.0
 
 ### Major Changes

package/dist/cjs/api/EmojiResource.js

@@ -163,9 +163,7 @@ var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
                         metadata: {
                           reason: reason,
                           source: 'EmojiProvider',
-                          data: {
-                            providerUrl: provider.url
-                          }
+                          providerUrl: provider.url
                         }
                       });
                     });
@@ -197,7 +195,7 @@ var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
             switch (_context2.prev = _context2.next) {
               case 0:
                 if (!(this.emojiRepository && this.isLoaded())) {
-                  _context2.next = 6;
+                  _context2.next = 8;
                   break;
                 }
 
@@ -208,15 +206,19 @@ var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
                 _emoji = _context2.sent;
 
                 if (!_emoji) {
-                  _context2.next = 6;
+                  _context2.next = 8;
                   break;
                 }
 
-                return _context2.abrupt("return", Promise.resolve(this.getMediaEmojiDescriptionURLWithInlineToken(_emoji)));
+                _context2.next = 7;
+                return this.getMediaEmojiDescriptionURLWithInlineToken(_emoji);
 
-              case 6:
+              case 7:
+                return _context2.abrupt("return", _context2.sent);
+
+              case 8:
                 if (!(this.emojiProviderConfig.singleEmojiApi && optimistic)) {
-                  _context2.next = 29;
+                  _context2.next = 31;
                   break;
                 }
 
@@ -226,74 +228,74 @@ var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
                   securityProvider: this.emojiProviderConfig.singleEmojiApi.securityProvider
                 };
                 loader = new _EmojiLoader.default(provider);
-                _context2.prev = 9;
-                _context2.next = 12;
+                _context2.prev = 11;
+                _context2.next = 14;
                 return loader.loadEmoji();
 
-              case 12:
+              case 14:
                 loadEmoji = _context2.sent;
 
                 if (loadEmoji.emojis[0]) {
-                  _context2.next = 15;
+                  _context2.next = 17;
                   break;
                 }
 
                 return _context2.abrupt("return");
 
-              case 15:
+              case 17:
                 if (this.siteEmojiResource) {
-                  _context2.next = 18;
+                  _context2.next = 20;
                   break;
                 }
 
-                _context2.next = 18;
+                _context2.next = 20;
                 return this.initSiteEmojiResource(loadEmoji, provider);
 
-              case 18:
+              case 20:
                 return _context2.abrupt("return", this.getMediaEmojiDescriptionURLWithInlineToken(loadEmoji.emojis[0]));
 
-              case 21:
-                _context2.prev = 21;
-                _context2.t0 = _context2["catch"](9);
-                _context2.next = 25;
+              case 23:
+                _context2.prev = 23;
+                _context2.t0 = _context2["catch"](11);
+                _context2.next = 27;
                 return this.findByEmojiId(emojiId);
 
-              case 25:
+              case 27:
                 _emoji2 = _context2.sent;
 
                 if (_emoji2) {
-                  _context2.next = 28;
+                  _context2.next = 30;
                   break;
                 }
 
                 return _context2.abrupt("return");
 
-              case 28:
+              case 30:
                 return _context2.abrupt("return", this.getMediaEmojiDescriptionURLWithInlineToken(_emoji2));
 
-              case 29:
-                _context2.next = 31;
+              case 31:
+                _context2.next = 33;
                 return this.findByEmojiId(emojiId);
 
-              case 31:
+              case 33:
                 emoji = _context2.sent;
 
                 if (emoji) {
-                  _context2.next = 34;
+                  _context2.next = 36;
                   break;
                 }
 
                 return _context2.abrupt("return");
 
-              case 34:
+              case 36:
                 return _context2.abrupt("return", this.getMediaEmojiDescriptionURLWithInlineToken(emoji));
 
-              case 35:
+              case 37:
               case "end":
                 return _context2.stop();
             }
           }
-        }, _callee2, this, [[9, 21]]);
+        }, _callee2, this, [[11, 23]]);
       }));
 
       function fetchByEmojiId(_x3, _x4) {

package/dist/cjs/components/common/CachingEmoji.js

@@ -37,6 +37,8 @@ var _ufoExperiences = require("../../util/analytics/ufoExperiences");
 
 var _useEmojiContext = require("../../hooks/useEmojiContext");
 
+var _analytics2 = require("../../util/analytics/analytics");
+
 var _excluded = ["emoji", "placeholderSize", "showTooltip", "fitToHeight", "children"];
 
 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); }
@@ -52,8 +54,8 @@ var CachingEmoji = function CachingEmoji(props) {
   var emoji = props.emoji; // start emoji rendered experience, it may have already started earlier in ResourcedEmoji
 
   (0, _analytics.useSampledUFOComponentExperience)(_analytics.ufoExperiences['emoji-rendered'].getInstance(emoji.id || emoji.shortName), _constants.SAMPLING_RATE_EMOJI_RENDERED_EXP, {
-    source: 'caching-emoji',
-    emoji: emoji.shortName
+    source: 'CachingEmoji',
+    emojiId: emoji.id
   });
   (0, _react.useEffect)(function () {
     if (!(0, _ufoExperiences.hasUfoMarked)((0, _analytics.sampledUfoRenderedEmoji)(emoji), 'fmp')) {
@@ -110,20 +112,15 @@ var CachingMediaEmoji = function CachingMediaEmoji(props) {
       setCachedEmoji(cachedEmoji);
       setInvalidImage(false);
       (0, _analytics.sampledUfoRenderedEmoji)(emoji).mark(_types.UfoEmojiTimings.MEDIA_END);
-    }).catch(function () {
+    }).catch(function (error) {
       setCachedEmoji(undefined);
       setInvalidImage(true);
       (0, _analytics.sampledUfoRenderedEmoji)(emoji).failure({
         metadata: {
+          error: (0, _analytics2.extractErrorInfo)(error),
           reason: 'failed to load media emoji',
           source: 'CachingMediaEmoji',
-          data: {
-            emoji: {
-              id: emoji.id,
-              shortName: emoji.shortName,
-              name: emoji.name
-            }
-          }
+          emojiId: emoji.id
         }
       });
     });
@@ -139,10 +136,7 @@ var CachingMediaEmoji = function CachingMediaEmoji(props) {
       metadata: {
         reason: 'load error',
         source: 'CachingMediaEmoji',
-        emoji: {
-          id: _emojiId.id,
-          shortName: _emojiId.shortName
-        }
+        emojiId: _emojiId.id
       }
     });
     setInvalidImage(true);

package/dist/cjs/components/common/DeleteButton.js

@@ -5,9 +5,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.RENDER_EMOJI_DELETE_BUTTON_TESTID = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 
@@ -22,13 +22,20 @@ var _constants = require("../../util/constants");
 var _styles = require("./styles");
 
 /** @jsx jsx */
+
+/**
+ * Test id for wrapper Emoji delete button
+ */
+var RENDER_EMOJI_DELETE_BUTTON_TESTID = 'render-emoji-delete-button';
+exports.RENDER_EMOJI_DELETE_BUTTON_TESTID = RENDER_EMOJI_DELETE_BUTTON_TESTID;
+
 var DeleteButton = function DeleteButton(props) {
-  return (0, _core.jsx)("span", {
+  return (0, _react.jsx)("span", {
     css: _styles.deleteButton,
     className: _styles.emojiDeleteButton,
-    "data-testid": "emoji-delete-button"
-  }, (0, _core.jsx)(_customThemeButton.default, {
-    iconBefore: (0, _core.jsx)(_crossCircle.default, {
+    "data-testid": RENDER_EMOJI_DELETE_BUTTON_TESTID
+  }, (0, _react.jsx)(_customThemeButton.default, {
+    iconBefore: (0, _react.jsx)(_crossCircle.default, {
       label: _constants.deleteEmojiLabel,
       primaryColor: (0, _tokens.token)('color.text.subtle', _colors.N500),
       size: "small"

package/dist/cjs/components/common/Emoji.js

@@ -15,10 +15,10 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _core = require("@emotion/core");
-
 var _react = _interopRequireWildcard(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _EmojiUtils = require("../../api/EmojiUtils");
 
 var _constants = require("../../util/constants");
@@ -145,7 +145,7 @@ var SpriteEmoji = function SpriteEmoji(props) {
     backgroundSize: "".concat(sprite.column * 100, "% ").concat(sprite.row * 100, "%")
   }, sizing);
 
-  return (0, _core.jsx)("span", {
+  return (0, _react2.jsx)("span", {
     "data-testid": "sprite-emoji-".concat(emoji.shortName),
     "data-emoji-type": "sprite",
     tabIndex: shouldBeInteractive ? 0 : undefined,
@@ -163,7 +163,7 @@ var SpriteEmoji = function SpriteEmoji(props) {
     },
     "aria-label": emoji.shortName,
     title: showTooltip ? emoji.shortName : ''
-  }, (0, _core.jsx)("span", {
+  }, (0, _react2.jsx)("span", {
     className: _styles.emojiSprite,
     style: style
   }, "\xA0"));
@@ -209,7 +209,7 @@ var ImageEmoji = function ImageEmoji(props) {
   var deleteButton;
 
   if (showDelete) {
-    deleteButton = (0, _core.jsx)(_DeleteButton.default, {
+    deleteButton = (0, _react2.jsx)(_DeleteButton.default, {
       onClick: function onClick(event) {
         return handleDelete(props, event);
       }
@@ -265,7 +265,7 @@ var ImageEmoji = function ImageEmoji(props) {
       onBeforeLoad();
     }
   }, [inView, onBeforeLoad]);
-  var emojiNode = (0, _core.jsx)("img", (0, _extends2.default)({
+  var emojiNode = (0, _react2.jsx)("img", (0, _extends2.default)({
     //@ts-ignore
     loading: "lazy",
     src: src,
@@ -281,7 +281,7 @@ var ImageEmoji = function ImageEmoji(props) {
     onError: onError,
     onLoad: onLoad
   }, sizing));
-  return (0, _core.jsx)("span", {
+  return (0, _react2.jsx)("span", {
     "data-testid": "image-emoji-".concat(emoji.shortName),
     "data-emoji-type": "image",
     css: _styles.emojiStyles,
@@ -309,8 +309,8 @@ var Emoji = function Emoji(props) {
   var emoji = props.emoji; // start emoji rendered experience, it may have already started earlier in ResourcedEmoji or CachingEmoji
 
   (0, _analytics.useSampledUFOComponentExperience)(_analytics.ufoExperiences['emoji-rendered'].getInstance(emoji.id || emoji.shortName), _constants.SAMPLING_RATE_EMOJI_RENDERED_EXP, {
-    source: 'emoji',
-    emoji: emoji.shortName
+    source: 'Emoji',
+    emojiId: emoji.id
   });
   (0, _react.useEffect)(function () {
     var ufoExp = (0, _analytics.sampledUfoRenderedEmoji)(emoji);
@@ -326,10 +326,10 @@ var Emoji = function Emoji(props) {
   }, []); // TODO: We always prefer render as image as having accessibility issues with sprite representation
 
   if ((0, _typeHelpers.isSpriteRepresentation)(emoji.representation)) {
-    return (0, _core.jsx)(SpriteEmoji, props);
+    return (0, _react2.jsx)(SpriteEmoji, props);
   }
 
-  return (0, _core.jsx)(ImageEmoji, props);
+  return (0, _react2.jsx)(ImageEmoji, props);
 };
 
 exports.Emoji = Emoji;

package/dist/cjs/components/common/EmojiActions.js

@@ -11,10 +11,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _core = require("@emotion/core");
-
 var _react = require("react");
 
+var _react2 = require("@emotion/react");
+
 var _reactIntlNext = require("react-intl-next");
 
 var _EmojiDeletePreview = _interopRequireDefault(require("../common/EmojiDeletePreview"));
@@ -44,12 +44,12 @@ var AddOwnEmoji = function AddOwnEmoji(props) {
   var onOpenUpload = props.onOpenUpload,
       uploadEnabled = props.uploadEnabled,
       formatMessage = props.intl.formatMessage;
-  return (0, _core.jsx)(_react.Fragment, null, uploadEnabled && (0, _core.jsx)("div", {
+  return (0, _react2.jsx)(_react.Fragment, null, uploadEnabled && (0, _react2.jsx)("div", {
     css: _styles.addCustomEmoji
-  }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.addCustomEmojiLabel, function (label) {
-    return (0, _core.jsx)(_standardButton.default, {
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.addCustomEmojiLabel, function (label) {
+    return (0, _react2.jsx)(_standardButton.default, {
       onClick: onOpenUpload,
-      iconBefore: (0, _core.jsx)(_add.default, {
+      iconBefore: (0, _react2.jsx)(_add.default, {
         label: formatMessage(_i18n.messages.addCustomEmojiLabel),
         size: "small"
       }),
@@ -79,13 +79,13 @@ var TonesWrapper = function TonesWrapper(props) {
     previewEmoji = previewEmoji.skinVariations[(selectedTone || 1) - 1];
   }
 
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     css: _styles.emojiToneSelectorContainer
-  }, showToneSelector && (0, _core.jsx)(_ToneSelector.default, {
+  }, showToneSelector && (0, _react2.jsx)(_ToneSelector.default, {
     emoji: toneEmoji,
     onToneSelected: onToneSelected,
     previewEmojiId: previewEmoji.id
-  }), (0, _core.jsx)(_EmojiButton.default, {
+  }), (0, _react2.jsx)(_EmojiButton.default, {
     ariaExpanded: showToneSelector,
     emoji: previewEmoji,
     selectOnHover: true,
@@ -139,9 +139,9 @@ var EmojiActions = function EmojiActions(props) {
   };
 
   if (uploading) {
-    return (0, _core.jsx)("div", {
+    return (0, _react2.jsx)("div", {
       css: previewFooterClassnames
-    }, (0, _core.jsx)(_EmojiUploadPicker.default, {
+    }, (0, _react2.jsx)(_EmojiUploadPicker.default, {
       onUploadCancelled: onUploadCancelled,
       onUploadEmoji: onUploadEmoji,
       onFileChooserClicked: onFileChooserClicked,
@@ -151,28 +151,29 @@ var EmojiActions = function EmojiActions(props) {
   }
 
   if (emojiToDelete) {
-    return (0, _core.jsx)("div", {
+    return (0, _react2.jsx)("div", {
       css: previewFooterClassnames
-    }, (0, _core.jsx)(_EmojiDeletePreview.default, {
+    }, (0, _react2.jsx)(_EmojiDeletePreview.default, {
       emoji: emojiToDelete,
       onDeleteEmoji: onDeleteEmoji,
       onCloseDelete: onCloseDelete
     }));
   }
 
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
+    "data-testid": "emoji-actions",
     css: previewFooterClassnames,
     onMouseLeave: onMouseLeaveHandler
-  }, (0, _core.jsx)("div", {
+  }, (0, _react2.jsx)("div", {
     css: _styles.emojiActionsWrapper
-  }, !showToneSelector && (0, _core.jsx)(_EmojiPickerListSearch.default, {
+  }, !showToneSelector && (0, _react2.jsx)(_EmojiPickerListSearch.default, {
     onChange: onChange,
     query: query
-  }), (0, _core.jsx)(TonesWrapper, (0, _extends2.default)({}, props, {
+  }), (0, _react2.jsx)(TonesWrapper, (0, _extends2.default)({}, props, {
     onToneOpen: onToneOpenHandler,
     onToneSelected: onToneSelectedHandler,
     showToneSelector: showToneSelector
-  }))), (0, _core.jsx)(AddOwnEmoji, props));
+  }))), (0, _react2.jsx)(AddOwnEmoji, props));
 };
 
 exports.EmojiActions = EmojiActions;

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

@@ -9,16 +9,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.EmojiButton = void 0;
 
-var _core = require("@emotion/core");
-
 var _react = _interopRequireWildcard(require("react"));
 
-var _Emoji = _interopRequireDefault(require("./Emoji"));
+var _react2 = require("@emotion/react");
 
 var _mouse = require("../../util/mouse");
 
 var _styles = require("./styles");
 
+var _Emoji = _interopRequireDefault(require("./Emoji"));
+
 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; }
@@ -48,7 +48,7 @@ var EmojiButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       ariaLabelText = props.ariaLabelText,
       ariaExpanded = props.ariaExpanded,
       shouldHideButton = props.shouldHideButton;
-  return (0, _core.jsx)("button", {
+  return (0, _react2.jsx)("button", {
     ref: ref,
     "aria-expanded": ariaExpanded,
     css: shouldHideButton ? _styles.hiddenToneButton : _styles.emojiButton,
@@ -59,7 +59,7 @@ var EmojiButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       handleKeyPress(props, event);
     },
     "aria-label": ariaLabelText
-  }, (0, _core.jsx)(_Emoji.default, {
+  }, (0, _react2.jsx)(_Emoji.default, {
     emoji: emoji,
     selectOnHover: selectOnHover
   }));

package/dist/cjs/components/common/EmojiDeletePreview.js

@@ -23,14 +23,14 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _core = require("@emotion/core");
-
-var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
-
 var _react = require("react");
 
+var _react2 = require("@emotion/react");
+
 var _reactIntlNext = require("react-intl-next");
 
+var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+
 var _i18n = require("../i18n");
 
 var _CachingEmoji = _interopRequireDefault(require("./CachingEmoji"));
@@ -108,35 +108,35 @@ var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
           loading = _this$state.loading,
           error = _this$state.error;
       var formatMessage = intl.formatMessage;
-      return (0, _core.jsx)("div", {
+      return (0, _react2.jsx)("div", {
         css: _styles.deletePreview
-      }, (0, _core.jsx)("div", {
+      }, (0, _react2.jsx)("div", {
         css: _styles.deleteText
-      }, (0, _core.jsx)("h5", null, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.deleteEmojiTitle)), (0, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.deleteEmojiDescription, {
+      }, (0, _react2.jsx)("h5", null, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.deleteEmojiTitle)), (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.deleteEmojiDescription, {
         values: {
           emojiShortName: emoji.shortName
         }
-      }))), (0, _core.jsx)("div", {
+      }))), (0, _react2.jsx)("div", {
         css: _styles.deleteFooter
-      }, (0, _core.jsx)(_CachingEmoji.default, {
+      }, (0, _react2.jsx)(_CachingEmoji.default, {
         emoji: emoji
-      }), (0, _core.jsx)("div", {
+      }), (0, _react2.jsx)("div", {
         css: _styles.previewButtonGroup
-      }, error ? !loading ? (0, _core.jsx)(_EmojiErrorMessage.default, {
+      }, error ? !loading ? (0, _react2.jsx)(_EmojiErrorMessage.default, {
         message: formatMessage(_i18n.messages.deleteEmojiFailed),
         messageStyles: _styles.emojiDeleteErrorMessage,
         tooltip: true
-      }) : null : null, (0, _core.jsx)(_RetryableButton.default, {
+      }) : null : null, (0, _react2.jsx)(_RetryableButton.default, {
         label: formatMessage(_i18n.messages.deleteEmojiLabel),
         onSubmit: this.onSubmit,
         appearance: "danger",
         loading: loading,
         error: error
-      }), (0, _core.jsx)(_customThemeButton.default, {
+      }), (0, _react2.jsx)(_customThemeButton.default, {
         appearance: "subtle",
         onClick: this.onCancel,
         css: _styles.cancelButton
-      }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.cancelLabel)))));
+      }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.cancelLabel)))));
     }
   }]);
   return EmojiDeletePreview;

package/dist/cjs/components/common/EmojiErrorMessage.js

@@ -7,28 +7,28 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
-
-var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
+var _react = require("@emotion/react");
 
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
+var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
+
 /** @jsx jsx */
 var EmojiErrorMessage = function EmojiErrorMessage(props) {
   var messageStyles = props.messageStyles,
       message = props.message,
       tooltip = props.tooltip;
-  return tooltip ? (0, _core.jsx)("div", {
+  return tooltip ? (0, _react.jsx)("div", {
     css: messageStyles
-  }, (0, _core.jsx)(_tooltip.default, {
+  }, (0, _react.jsx)(_tooltip.default, {
     content: message,
     position: "top"
-  }, (0, _core.jsx)(_error.default, {
+  }, (0, _react.jsx)(_error.default, {
     label: "Error",
     size: "medium"
-  }))) : (0, _core.jsx)("div", {
+  }))) : (0, _react.jsx)("div", {
     css: messageStyles
-  }, (0, _core.jsx)(_error.default, {
+  }, (0, _react.jsx)(_error.default, {
     label: "Error",
     size: "small"
   }), " ", message);

package/dist/cjs/components/common/EmojiImage.js

@@ -9,14 +9,14 @@ exports.EmojiImage = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _core = require("@emotion/core");
-
 var _react = require("react");
 
-var _styles = require("./styles");
+var _react2 = require("@emotion/react");
 
 var _constants = require("../../util/constants");
 
+var _styles = require("./styles");
+
 /** @jsx jsx */
 var EmojiImage = function EmojiImage(props) {
   var _props$maxSize = props.maxSize,
@@ -68,14 +68,14 @@ var EmojiImage = function EmojiImage(props) {
   var visibility = (0, _react.useMemo)(function () {
     return showImageBeforeLoad || validImage ? 'initial' : 'hidden';
   }, [validImage, showImageBeforeLoad]);
-  return (0, _core.jsx)("span", {
+  return (0, _react2.jsx)("span", {
     "data-testid": "emoji-image-".concat(shortName),
     "aria-label": shortName,
     className: "".concat(_styles.emojiMainStyle, " ").concat(_styles.emojiNodeStyles, " ").concat(_styles.emojiImage),
     style: style,
     css: [_styles.emojiContainer, _styles.emojiStyles],
     title: showTooltip ? shortName : ''
-  }, (0, _core.jsx)("img", {
+  }, (0, _react2.jsx)("img", {
     className: "emoji",
     alt: shortName,
     onLoad: function onLoad() {

package/dist/cjs/components/common/EmojiPlaceholder.js

@@ -5,12 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
-
-var _styles = require("./styles");
+var _react = require("@emotion/react");
 
 var _constants = require("../../util/constants");
 
+var _styles = require("./styles");
+
 /** @jsx jsx */
 var EmojiPlaceholder = function EmojiPlaceholder(props) {
   var shortName = props.shortName,
@@ -41,7 +41,7 @@ var EmojiPlaceholder = function EmojiPlaceholder(props) {
     width: "".concat(width, "px"),
     height: "".concat(height, "px")
   };
-  return (0, _core.jsx)("span", {
+  return (0, _react.jsx)("span", {
     "data-testid": "emoji-placeholder-".concat(shortName),
     "aria-busy": loading,
     "aria-label": shortName,