@atlaskit/emoji 64.2.0 → 64.4.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/emoji
 
+## 64.4.0
+
+### Minor Changes
+
+- [`39031597fa1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/39031597fa1) - added more UFO experiences support
+
+## 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
+
+- [`85397ad6786`](https://bitbucket.org/atlassian/atlassian-frontend/commits/85397ad6786) - add emoji-rendered and emoji-resource-fetched UFO experiences
+
 ## 64.2.0
 
 ### Minor Changes

package/dist/cjs/api/EmojiResource.js

@@ -31,6 +31,8 @@ var _typeHelpers = require("../util/type-helpers");
 
 var _storageAvailable = _interopRequireDefault(require("../util/storage-available"));
 
+var _types = require("../types");
+
 var _logger = _interopRequireDefault(require("../util/logger"));
 
 var _EmojiLoader = _interopRequireDefault(require("./EmojiLoader"));
@@ -39,6 +41,8 @@ var _EmojiRepository = _interopRequireDefault(require("./EmojiRepository"));
 
 var _SiteEmojiResource = _interopRequireDefault(require("./media/SiteEmojiResource"));
 
+var _analytics = require("../util/analytics");
+
 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; } }
@@ -80,6 +84,14 @@ var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
     var emojiResponses = [];
     _this.activeLoaders = config.providers.length;
     config.providers.forEach(function (provider, index) {
+      var providerType = _this.getProviderType(provider);
+
+      _analytics.ufoExperiences['emoji-resource-fetched'].getInstance(providerType).start();
+
+      _analytics.ufoExperiences['emoji-resource-fetched'].getInstance(providerType).addMetadata({
+        type: providerType
+      });
+
       var loader = new _EmojiLoader.default(provider);
       var emojis = loader.loadEmoji();
       emojis.then(function (emojiResponse) {
@@ -92,12 +104,22 @@ var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
 
           _this.performRetries();
 
-          _this.refreshLastFilter();
+          _this.refreshLastFilter(); // if not site emoji it would still resolve
+          // TODO: improve the logic in future
+
+
+          _analytics.ufoExperiences['emoji-resource-fetched'].getInstance(providerType).success();
         });
       }).catch(function (reason) {
         _this.activeLoaders--;
 
         _this.notifyError(reason);
+
+        _analytics.ufoExperiences['emoji-resource-fetched'].getInstance(providerType).failure({
+          metadata: {
+            reason: reason
+          }
+        });
       });
     });
 
@@ -113,6 +135,19 @@ var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
   }
 
   (0, _createClass2.default)(EmojiResource, [{
+    key: "getProviderType",
+    value: function getProviderType(provider) {
+      if (provider.url.includes('/site')) {
+        return _types.ProviderTypes.SITE;
+      } else if (provider.url.includes('/standard')) {
+        return _types.ProviderTypes.STANDARD;
+      } else if (provider.url.includes('/atlassian')) {
+        return _types.ProviderTypes.ATLASSIAN;
+      }
+
+      return _types.ProviderTypes.UNKNOWN;
+    }
+  }, {
     key: "initEmojiRepository",
     value: function initEmojiRepository(emojiResponses) {
       var emojis = [];

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,7 +41,11 @@ var _Emoji = _interopRequireDefault(require("./Emoji"));
 
 var _EmojiPlaceholder = _interopRequireDefault(require("./EmojiPlaceholder"));
 
-var _EmojiContext = require("../../context/EmojiContext");
+var _UfoErrorBoundary = require("./UfoErrorBoundary");
+
+var _analytics = require("../../util/analytics");
+
+var _constants = require("../../util/constants");
 
 var _excluded = ["placeholderSize"],
     _excluded2 = ["children", "placeholderSize"];
@@ -59,13 +65,23 @@ var CachingEmoji = function CachingEmoji(props) {
   // Optimisation to only render the class based CachingMediaEmoji if necessary
   // slight performance hit, which accumulates for a large number of emoji.
   var placeholderSize = props.placeholderSize,
-      emojiProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+      emojiProps = (0, _objectWithoutProperties2.default)(props, _excluded); // start emoji rendered experience, it may have already started earlier in ResourcedEmoji
 
-  if ((0, _typeHelpers.isMediaEmoji)(props.emoji)) {
-    return /*#__PURE__*/_react.default.createElement(CachingMediaEmoji, props);
-  }
+  (0, _analytics.useSampledUFOComponentExperience)(_analytics.ufoExperiences['emoji-rendered'].getInstance(emojiProps.emoji.id || emojiProps.emoji.shortName), _constants.SAMPLING_RATE_EMOJI_RENDERED_EXP, {
+    source: 'caching-emoji'
+  });
 
-  return /*#__PURE__*/_react.default.createElement(_Emoji.default, emojiProps);
+  var emojiNode = function emojiNode() {
+    if ((0, _typeHelpers.isMediaEmoji)(props.emoji)) {
+      return /*#__PURE__*/_react.default.createElement(CachingMediaEmoji, props);
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_Emoji.default, emojiProps);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_UfoErrorBoundary.UfoErrorBoundary, {
+    experiences: [_analytics.ufoExperiences['emoji-rendered'].getInstance(props.emoji.id || props.emoji.shortName)]
+  }, emojiNode());
 };
 /**
  * Rendering a media emoji image from a cache for media emoji, with different
@@ -84,10 +100,15 @@ 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;
+      (0, _analytics.sampledUfoRenderedEmoji)(_emojiId).failure({
+        metadata: {
+          reason: 'load error'
+        }
+      });
 
       if (invalidImage || !emoji) {
         // do nothing, bad image
@@ -108,6 +129,7 @@ var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
     key: "componentDidMount",
     value: function componentDidMount() {
       this.mounted = true;
+      (0, _analytics.sampledUfoRenderedEmoji)(this.props.emoji).markFMP();
     }
   }, {
     key: "componentWillUnmount",
@@ -130,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;
       }
@@ -170,6 +188,12 @@ var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
               cachedEmoji: undefined,
               invalidImage: true
             });
+
+            (0, _analytics.sampledUfoRenderedEmoji)(emoji).failure({
+              metadata: {
+                reason: 'failed to load media emoji'
+              }
+            });
           }
         });
         return undefined;
@@ -219,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,13 +23,11 @@ var _typeHelpers = require("../../util/type-helpers");
 
 var _mouse = require("../../util/mouse");
 
-var styles = _interopRequireWildcard(require("./styles"));
-
 var _DeleteButton = _interopRequireDefault(require("./DeleteButton"));
 
-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; }
 
@@ -102,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,
@@ -113,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")
     };
   }
 
@@ -137,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);
     },
@@ -162,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,
@@ -172,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;
@@ -196,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);
       }
@@ -215,6 +199,10 @@ var renderAsImage = function renderAsImage(props) {
 
   var onError = function onError(event) {
     handleImageError(props, event);
+  };
+
+  var onLoad = function onLoad() {
+    (0, _analytics.sampledUfoRenderedEmoji)(emoji).success();
   }; // Pass src attribute as key to force React to rerender img node since browser does not
   // change preview image until loaded
   // We currently have the following error: property 'loading' does not exist on type 'DetailedHTMLProps<ImgHTMLAttributes, HTMLImageElement>'
@@ -222,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,
@@ -235,13 +223,14 @@ var renderAsImage = function renderAsImage(props) {
     style: {
       visibility: 'visible'
     },
-    onError: onError
+    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);
     },
@@ -257,7 +246,7 @@ var renderAsImage = function renderAsImage(props) {
 };
 
 var Emoji = function Emoji(props) {
-  var emoji = props.emoji;
+  var emoji = props.emoji; // TODO: We always prefer render as image as having accessibility issues with sprite representation
 
   if ((0, _typeHelpers.isSpriteRepresentation)(emoji.representation)) {
     return renderAsSprite(props);

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