@atlaskit/emoji 64.2.1 → 64.3.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/emoji
 
+## 64.3.0
+
+### Minor Changes
+
+- [`753e9b6b610`](https://bitbucket.org/atlassian/atlassian-frontend/commits/753e9b6b610) - Migrated styles from typestyle to emotion
+- [`f862d5ae7aa`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f862d5ae7aa) - remove RxJs peer dependency
+
+### Patch Changes
+
+- [`e68c59796b5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e68c59796b5) - Fix EmojiId encoding
+- [`963a1369eac`](https://bitbucket.org/atlassian/atlassian-frontend/commits/963a1369eac) - This is a revert commit to a refactor that has not been released for legacy context provider
+- [`876cae9c606`](https://bitbucket.org/atlassian/atlassian-frontend/commits/876cae9c606) - Changed selector first-child to first-of-type to better support SSR
+- [`62edf20ab1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/62edf20ab1e) - Migrates all usage of brand tokens to either selected or information tokens. This change is purely for semantic reasons, there are no visual or behavioural changes.
+- Updated dependencies
+
 ## 64.2.1
 
 ### Patch Changes

package/dist/cjs/api/media/SiteEmojiResource.js

@@ -197,7 +197,11 @@ var SiteEmojiResource = /*#__PURE__*/function () {
   }, {
     key: "findEmoji",
     value: function findEmoji(emojiId) {
-      var path = "../".concat(emojiId.id);
+      if (!emojiId.id) {
+        return Promise.reject(false);
+      }
+
+      var path = "../".concat(encodeURIComponent(emojiId.id));
       return (0, _EmojiUtils.emojiRequest)(this.siteServiceConfig, {
         path: path
       }).then(function (serviceResponse) {
@@ -221,7 +225,11 @@ var SiteEmojiResource = /*#__PURE__*/function () {
         return Promise.reject(false);
       }
 
-      var path = "".concat(emoji.id);
+      if (!emoji.id) {
+        return Promise.reject(false);
+      }
+
+      var path = "".concat(encodeURIComponent(emoji.id));
       var requestInit = {
         method: 'DELETE'
       };

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

@@ -27,6 +27,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _EmojiUtils = require("../../api/EmojiUtils");
@@ -39,8 +41,6 @@ var _Emoji = _interopRequireDefault(require("./Emoji"));
 
 var _EmojiPlaceholder = _interopRequireDefault(require("./EmojiPlaceholder"));
 
-var _EmojiContext = require("../../context/EmojiContext");
-
 var _UfoErrorBoundary = require("./UfoErrorBoundary");
 
 var _analytics = require("../../util/analytics");
@@ -100,7 +100,7 @@ var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
     var _this;
 
     (0, _classCallCheck2.default)(this, CachingMediaEmoji);
-    _this = _super.call(this, props);
+    _this = _super.call(this, props, context);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "mounted", false);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleLoadError", function (_emojiId, emoji) {
       var invalidImage = _this.state.invalidImage;
@@ -152,10 +152,6 @@ var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
     value: function loadEmoji(emoji, context, forceLoad) {
       var _this2 = this;
 
-      if (!context) {
-        return;
-      }
-
       if (!context.emoji) {
         return undefined;
       }
@@ -247,6 +243,8 @@ var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
 }(_react.PureComponent);
 
 exports.CachingMediaEmoji = CachingMediaEmoji;
-(0, _defineProperty2.default)(CachingMediaEmoji, "contextType", _EmojiContext.EmojiContext);
+(0, _defineProperty2.default)(CachingMediaEmoji, "contextTypes", {
+  emoji: _propTypes.default.object
+});
 var _default = CachingEmoji;
 exports.default = _default;

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

@@ -2,36 +2,32 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
+var _core = require("@emotion/core");
+
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 
 var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-circle"));
 
-var _react = _interopRequireDefault(require("react"));
-
 var _tokens = require("@atlaskit/tokens");
 
 var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("../../util/constants");
 
-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; }
+var _styles = require("./styles");
 
+/** @jsx jsx */
 var DeleteButton = function DeleteButton(props) {
-  return /*#__PURE__*/_react.default.createElement("span", {
-    className: styles.deleteButton
-  }, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
-    iconBefore: /*#__PURE__*/_react.default.createElement(_crossCircle.default, {
+  return (0, _core.jsx)("span", {
+    css: _styles.deleteButton,
+    className: _styles.emojiDeleteButton
+  }, (0, _core.jsx)(_customThemeButton.default, {
+    iconBefore: (0, _core.jsx)(_crossCircle.default, {
       label: _constants.deleteEmojiLabel,
       primaryColor: (0, _tokens.token)('color.text.subtle', _colors.N500),
       size: "small"

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

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _core = require("@emotion/core");
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -25,15 +23,11 @@ var _typeHelpers = require("../../util/type-helpers");
 
 var _mouse = require("../../util/mouse");
 
-var styles = _interopRequireWildcard(require("./styles"));
-
 var _DeleteButton = _interopRequireDefault(require("./DeleteButton"));
 
-var _analytics = require("../../util/analytics");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _styles = require("./styles");
 
-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; }
+var _analytics = require("../../util/analytics");
 
 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; }
 
@@ -104,8 +98,6 @@ var handleImageError = function handleImageError(props, event) {
 
 
 var renderAsSprite = function renderAsSprite(props) {
-  var _classes;
-
   var emoji = props.emoji,
       fitToHeight = props.fitToHeight,
       selected = props.selected,
@@ -115,18 +107,15 @@ var renderAsSprite = function renderAsSprite(props) {
       shouldBeInteractive = props.shouldBeInteractive;
   var representation = emoji.representation;
   var sprite = representation.sprite;
-  var classes = (_classes = {}, (0, _defineProperty2.default)(_classes, styles.emojiContainer, true), (0, _defineProperty2.default)(_classes, styles.emojiNode, true), (0, _defineProperty2.default)(_classes, styles.selected, selected), (0, _defineProperty2.default)(_classes, styles.selectOnHover, selectOnHover), _classes);
-
-  if (className) {
-    classes[className] = true;
-  }
-
+  var classes = "".concat(_styles.emojiNodeStyles, " ").concat(selected ? _styles.commonSelectedStyles : '', " ").concat(selectOnHover ? _styles.selectOnHoverStyles : '', " ").concat(className ? className : '');
   var sizing = {};
 
   if (fitToHeight) {
     sizing = {
       width: "".concat(fitToHeight, "px"),
-      height: "".concat(fitToHeight, "px")
+      height: "".concat(fitToHeight, "px"),
+      minHeight: "".concat(fitToHeight, "px"),
+      minWidth: "".concat(fitToHeight, "px")
     };
   }
 
@@ -139,15 +128,15 @@ var renderAsSprite = function renderAsSprite(props) {
     backgroundSize: "".concat(sprite.column * 100, "% ").concat(sprite.row * 100, "%")
   }, sizing);
 
-  var emojiNode = /*#__PURE__*/_react.default.createElement("span", {
-    className: styles.emojiSprite,
+  var emojiNode = (0, _core.jsx)("span", {
+    className: _styles.emojiSprite,
     style: style
   }, "\xA0");
-
-  return /*#__PURE__*/_react.default.createElement("span", {
+  return (0, _core.jsx)("span", {
     tabIndex: shouldBeInteractive ? 0 : undefined,
     role: shouldBeInteractive ? 'button' : undefined,
-    className: (0, _classnames.default)(classes),
+    css: _styles.emojiContainer,
+    className: classes,
     onKeyPress: function onKeyPress(event) {
       return handleKeyPress(props, event);
     },
@@ -164,8 +153,6 @@ var renderAsSprite = function renderAsSprite(props) {
 
 
 var renderAsImage = function renderAsImage(props) {
-  var _classes2;
-
   var emoji = props.emoji,
       fitToHeight = props.fitToHeight,
       selected = props.selected,
@@ -174,12 +161,7 @@ var renderAsImage = function renderAsImage(props) {
       showTooltip = props.showTooltip,
       showDelete = props.showDelete,
       shouldBeInteractive = props.shouldBeInteractive;
-  var classes = (_classes2 = {}, (0, _defineProperty2.default)(_classes2, styles.emoji, true), (0, _defineProperty2.default)(_classes2, styles.emojiNode, true), (0, _defineProperty2.default)(_classes2, styles.selected, selected), (0, _defineProperty2.default)(_classes2, styles.selectOnHover, selectOnHover), (0, _defineProperty2.default)(_classes2, styles.emojiImage, true), _classes2);
-
-  if (className) {
-    classes[className] = true;
-  }
-
+  var classes = "".concat(_styles.emojiMainStyle, " ").concat(_styles.emojiNodeStyles, " ").concat(selected ? _styles.commonSelectedStyles : '', " ").concat(selectOnHover ? _styles.selectOnHoverStyles : '', " ").concat(_styles.emojiImage, " ").concat(className ? className : '');
   var width;
   var height;
   var src;
@@ -198,7 +180,7 @@ var renderAsImage = function renderAsImage(props) {
   var deleteButton;
 
   if (showDelete) {
-    deleteButton = /*#__PURE__*/_react.default.createElement(_DeleteButton.default, {
+    deleteButton = (0, _core.jsx)(_DeleteButton.default, {
       onClick: function onClick(event) {
         return handleDelete(props, event);
       }
@@ -228,7 +210,7 @@ var renderAsImage = function renderAsImage(props) {
   // TODO: remove @ts-ignore for the <img> below when the @types/react will be bumped from v16.8.0 to v16.9.20 or higher.
 
 
-  var emojiNode = /*#__PURE__*/_react.default.createElement("img", (0, _extends2.default)({
+  var emojiNode = (0, _core.jsx)("img", (0, _extends2.default)({
     // @ts-ignore
     loading: "lazy",
     src: src,
@@ -244,11 +226,11 @@ var renderAsImage = function renderAsImage(props) {
     onError: onError,
     onLoad: onLoad
   }, sizing));
-
-  return /*#__PURE__*/_react.default.createElement("span", {
+  return (0, _core.jsx)("span", {
+    css: _styles.emojiStyles,
     tabIndex: shouldBeInteractive ? 0 : undefined,
     role: shouldBeInteractive ? 'button' : undefined,
-    className: (0, _classnames.default)(classes),
+    className: classes,
     onKeyPress: function onKeyPress(event) {
       return handleKeyPress(props, event);
     },

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

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -23,9 +21,9 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _core = require("@emotion/core");
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _reactIntlNext = require("react-intl-next");
 
@@ -33,10 +31,6 @@ var _EmojiDeletePreview = _interopRequireDefault(require("../common/EmojiDeleteP
 
 var _EmojiUploadPicker = _interopRequireDefault(require("../common/EmojiUploadPicker"));
 
-var styles = _interopRequireWildcard(require("./styles"));
-
-var footerStyles = _interopRequireWildcard(require("../picker/styles"));
-
 var _EmojiPickerListSearch = _interopRequireDefault(require("../picker/EmojiPickerListSearch"));
 
 var _ToneSelector = _interopRequireDefault(require("./ToneSelector"));
@@ -51,9 +45,9 @@ var _add = _interopRequireDefault(require("@atlaskit/icon/glyph/add"));
 
 var _setSkinToneAriaLabelText = require("./setSkinToneAriaLabelText");
 
-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); }
+var _styles = require("./styles");
 
-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; }
+var _styles2 = require("../picker/styles");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -125,13 +119,13 @@ var EmojiActions = /*#__PURE__*/function (_PureComponent) {
         previewEmoji = previewEmoji.skinVariations[(selectedTone || 1) - 1];
       }
 
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.emojiToneSelectorContainer
-      }, this.state.selectingTone && /*#__PURE__*/_react.default.createElement(_ToneSelector.default, {
+      return (0, _core.jsx)("div", {
+        css: _styles.emojiToneSelectorContainer
+      }, this.state.selectingTone && (0, _core.jsx)(_ToneSelector.default, {
         emoji: toneEmoji,
         onToneSelected: this.onToneSelected,
         previewEmojiId: previewEmoji.id
-      }), /*#__PURE__*/_react.default.createElement(_EmojiButton.default, {
+      }), (0, _core.jsx)(_EmojiButton.default, {
         ariaExpanded: this.state.selectingTone,
         emoji: previewEmoji,
         selectOnHover: true,
@@ -155,17 +149,18 @@ var EmojiActions = /*#__PURE__*/function (_PureComponent) {
         return null;
       }
 
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.AddCustomEmoji
-      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.addCustomEmojiLabel, function (label) {
-        return /*#__PURE__*/_react.default.createElement(_standardButton.default, {
+      return (0, _core.jsx)("div", {
+        css: _styles.addCustomEmoji
+      }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.addCustomEmojiLabel, function (label) {
+        return (0, _core.jsx)(_standardButton.default, {
           onClick: onOpenUpload,
-          iconBefore: /*#__PURE__*/_react.default.createElement(_add.default, {
+          iconBefore: (0, _core.jsx)(_add.default, {
             label: formatMessage(_i18n.messages.addCustomEmojiLabel),
             size: "small"
           }),
           appearance: "subtle",
-          className: styles.addCustomEmojiButton + ' emoji-picker-add-emoji'
+          css: _styles.addCustomEmojiButton,
+          className: _styles.emojiPickerAddEmoji
         }, label);
       }));
     }
@@ -184,12 +179,12 @@ var EmojiActions = /*#__PURE__*/function (_PureComponent) {
           emojiToDelete = _this$props3.emojiToDelete,
           onChange = _this$props3.onChange,
           query = _this$props3.query;
-      var previewFooterClassnames = (0, _classnames.default)([footerStyles.emojiPickerFooter, footerStyles.emojiActionsContainerWithBottomShadow]);
+      var previewFooterClassnames = [_styles2.emojiPickerFooter, _styles2.emojiActionsContainerWithBottomShadow];
 
       if (uploading) {
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: previewFooterClassnames
-        }, /*#__PURE__*/_react.default.createElement(_EmojiUploadPicker.default, {
+        return (0, _core.jsx)("div", {
+          css: previewFooterClassnames
+        }, (0, _core.jsx)(_EmojiUploadPicker.default, {
           onUploadCancelled: onUploadCancelled,
           onUploadEmoji: onUploadEmoji,
           onFileChooserClicked: onFileChooserClicked,
@@ -199,25 +194,25 @@ var EmojiActions = /*#__PURE__*/function (_PureComponent) {
       }
 
       if (emojiToDelete) {
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: previewFooterClassnames
-        }, /*#__PURE__*/_react.default.createElement(_EmojiDeletePreview.default, {
+        return (0, _core.jsx)("div", {
+          css: previewFooterClassnames
+        }, (0, _core.jsx)(_EmojiDeletePreview.default, {
           emoji: emojiToDelete,
           onDeleteEmoji: onDeleteEmoji,
           onCloseDelete: onCloseDelete
         }));
       }
 
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: previewFooterClassnames,
+      return (0, _core.jsx)("div", {
+        css: previewFooterClassnames,
         onMouseLeave: this.onMouseLeave
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, (0, _core.jsx)("div", {
         style: {
           display: 'flex',
           justifyContent: 'flex-end',
           alignItems: 'center'
         }
-      }, !this.state.selectingTone && /*#__PURE__*/_react.default.createElement(_EmojiPickerListSearch.default, {
+      }, !this.state.selectingTone && (0, _core.jsx)(_EmojiPickerListSearch.default, {
         onChange: onChange,
         query: query
       }), this.renderTones()), this.renderAddOwnEmoji());

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

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

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

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -25,9 +23,11 @@ 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 = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _reactIntlNext = require("react-intl-next");
 
@@ -39,11 +39,7 @@ var _EmojiErrorMessage = _interopRequireDefault(require("./EmojiErrorMessage"));
 
 var _RetryableButton = _interopRequireDefault(require("./RetryableButton"));
 
-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; }
+var _styles = require("./styles");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -112,37 +108,35 @@ var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
           loading = _this$state.loading,
           error = _this$state.error;
       var formatMessage = intl.formatMessage;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.deletePreview
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.deleteText
-      }, /*#__PURE__*/_react.default.createElement("h5", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.deleteEmojiTitle)), /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.deleteEmojiDescription, {
+      return (0, _core.jsx)("div", {
+        css: _styles.deletePreview
+      }, (0, _core.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, {
         values: {
           emojiShortName: emoji.shortName
         }
-      }))), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.deleteFooter
-      }, /*#__PURE__*/_react.default.createElement(_CachingEmoji.default, {
+      }))), (0, _core.jsx)("div", {
+        css: _styles.deleteFooter
+      }, (0, _core.jsx)(_CachingEmoji.default, {
         emoji: emoji
-      }), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.previewButtonGroup
-      }, error ? !loading ? /*#__PURE__*/_react.default.createElement(_EmojiErrorMessage.default, {
+      }), (0, _core.jsx)("div", {
+        css: _styles.previewButtonGroup
+      }, error ? !loading ? (0, _core.jsx)(_EmojiErrorMessage.default, {
         message: formatMessage(_i18n.messages.deleteEmojiFailed),
-        className: styles.emojiDeleteErrorMessage,
+        messageStyles: _styles.emojiDeleteErrorMessage,
         tooltip: true
-      }) : null : null, /*#__PURE__*/_react.default.createElement(_RetryableButton.default, {
-        className: styles.uploadEmojiButton,
-        retryClassName: styles.uploadRetryButton,
+      }) : null : null, (0, _core.jsx)(_RetryableButton.default, {
         label: formatMessage(_i18n.messages.deleteEmojiLabel),
         onSubmit: this.onSubmit,
         appearance: "danger",
         loading: loading,
         error: error
-      }), /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+      }), (0, _core.jsx)(_customThemeButton.default, {
         appearance: "subtle",
         onClick: this.onCancel,
-        className: styles.cancelButton
-      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.cancelLabel)))));
+        css: _styles.cancelButton
+      }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.cancelLabel)))));
     }
   }]);
   return EmojiDeletePreview;

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

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -19,16 +17,14 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
+var _core = require("@emotion/core");
+
 var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
-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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -46,12 +42,12 @@ var EmojiErrorMessage = /*#__PURE__*/function (_PureComponent) {
   (0, _createClass2.default)(EmojiErrorMessage, [{
     key: "renderWithTooltip",
     value: function renderWithTooltip() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: this.props.className
-      }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      return (0, _core.jsx)("div", {
+        css: this.props.messageStyles
+      }, (0, _core.jsx)(_tooltip.default, {
         content: this.props.message,
         position: "top"
-      }, /*#__PURE__*/_react.default.createElement(_error.default, {
+      }, (0, _core.jsx)(_error.default, {
         label: "Error",
         size: "medium"
       })));
@@ -59,9 +55,9 @@ var EmojiErrorMessage = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "renderInline",
     value: function renderInline() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: this.props.className
-      }, /*#__PURE__*/_react.default.createElement(_error.default, {
+      return (0, _core.jsx)("div", {
+        css: this.props.messageStyles
+      }, (0, _core.jsx)(_error.default, {
         label: "Error",
         size: "small"
       }), " ", this.props.message);