@atlaskit/emoji 64.2.0 → 64.4.0

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

@@ -5,14 +5,16 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import classNames from 'classnames';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import React from 'react';
 import { shouldUseAltRepresentation } from '../../api/EmojiUtils';
 import { deleteEmojiLabel } from '../../util/constants';
 import { isImageRepresentation, isMediaRepresentation, isSpriteRepresentation, toEmojiId } from '../../util/type-helpers';
 import { leftClick } from '../../util/mouse';
-import * as styles from './styles';
 import DeleteButton from './DeleteButton';
+import { emojiContainer, emojiNodeStyles, commonSelectedStyles, selectOnHoverStyles, emojiSprite, emojiMainStyle, emojiStyles, emojiImage } from './styles';
+import { sampledUfoRenderedEmoji } from '../../util/analytics';
 
 var handleMouseDown = function handleMouseDown(props, event) {
   // Clicked emoji delete button
@@ -79,8 +81,6 @@ var handleImageError = function handleImageError(props, event) {
 
 
 var renderAsSprite = function renderAsSprite(props) {
-  var _classes;
-
   var emoji = props.emoji,
       fitToHeight = props.fitToHeight,
       selected = props.selected,
@@ -90,18 +90,15 @@ var renderAsSprite = function renderAsSprite(props) {
       shouldBeInteractive = props.shouldBeInteractive;
   var representation = emoji.representation;
   var sprite = representation.sprite;
-  var classes = (_classes = {}, _defineProperty(_classes, styles.emojiContainer, true), _defineProperty(_classes, styles.emojiNode, true), _defineProperty(_classes, styles.selected, selected), _defineProperty(_classes, styles.selectOnHover, selectOnHover), _classes);
-
-  if (className) {
-    classes[className] = true;
-  }
-
+  var classes = "".concat(emojiNodeStyles, " ").concat(selected ? commonSelectedStyles : '', " ").concat(selectOnHover ? 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")
     };
   }
 
@@ -114,14 +111,15 @@ var renderAsSprite = function renderAsSprite(props) {
     backgroundSize: "".concat(sprite.column * 100, "% ").concat(sprite.row * 100, "%")
   }, sizing);
 
-  var emojiNode = /*#__PURE__*/React.createElement("span", {
-    className: styles.emojiSprite,
+  var emojiNode = jsx("span", {
+    className: emojiSprite,
     style: style
   }, "\xA0");
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
     tabIndex: shouldBeInteractive ? 0 : undefined,
     role: shouldBeInteractive ? 'button' : undefined,
-    className: classNames(classes),
+    css: emojiContainer,
+    className: classes,
     onKeyPress: function onKeyPress(event) {
       return handleKeyPress(props, event);
     },
@@ -138,8 +136,6 @@ var renderAsSprite = function renderAsSprite(props) {
 
 
 var renderAsImage = function renderAsImage(props) {
-  var _classes2;
-
   var emoji = props.emoji,
       fitToHeight = props.fitToHeight,
       selected = props.selected,
@@ -148,12 +144,7 @@ var renderAsImage = function renderAsImage(props) {
       showTooltip = props.showTooltip,
       showDelete = props.showDelete,
       shouldBeInteractive = props.shouldBeInteractive;
-  var classes = (_classes2 = {}, _defineProperty(_classes2, styles.emoji, true), _defineProperty(_classes2, styles.emojiNode, true), _defineProperty(_classes2, styles.selected, selected), _defineProperty(_classes2, styles.selectOnHover, selectOnHover), _defineProperty(_classes2, styles.emojiImage, true), _classes2);
-
-  if (className) {
-    classes[className] = true;
-  }
-
+  var classes = "".concat(emojiMainStyle, " ").concat(emojiNodeStyles, " ").concat(selected ? commonSelectedStyles : '', " ").concat(selectOnHover ? selectOnHoverStyles : '', " ").concat(emojiImage, " ").concat(className ? className : '');
   var width;
   var height;
   var src;
@@ -172,7 +163,7 @@ var renderAsImage = function renderAsImage(props) {
   var deleteButton;
 
   if (showDelete) {
-    deleteButton = /*#__PURE__*/React.createElement(DeleteButton, {
+    deleteButton = jsx(DeleteButton, {
       onClick: function onClick(event) {
         return handleDelete(props, event);
       }
@@ -191,6 +182,10 @@ var renderAsImage = function renderAsImage(props) {
 
   var onError = function onError(event) {
     handleImageError(props, event);
+  };
+
+  var onLoad = function onLoad() {
+    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>'
@@ -198,7 +193,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.createElement("img", _extends({
+  var emojiNode = jsx("img", _extends({
     // @ts-ignore
     loading: "lazy",
     src: src,
@@ -211,12 +206,14 @@ var renderAsImage = function renderAsImage(props) {
     style: {
       visibility: 'visible'
     },
-    onError: onError
+    onError: onError,
+    onLoad: onLoad
   }, sizing));
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
+    css: emojiStyles,
     tabIndex: shouldBeInteractive ? 0 : undefined,
     role: shouldBeInteractive ? 'button' : undefined,
-    className: classNames(classes),
+    className: classes,
     onKeyPress: function onKeyPress(event) {
       return handleKeyPress(props, event);
     },
@@ -232,7 +229,7 @@ var renderAsImage = function renderAsImage(props) {
 };
 
 export 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 (isSpriteRepresentation(emoji.representation)) {
     return renderAsSprite(props);

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

@@ -10,14 +10,12 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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; } }
 
-import classNames from 'classnames';
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import { PureComponent } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import EmojiDeletePreview from '../common/EmojiDeletePreview';
 import EmojiUploadPicker from '../common/EmojiUploadPicker';
-import * as styles from './styles';
-import * as footerStyles from '../picker/styles';
 import EmojiPickerListSearch from '../picker/EmojiPickerListSearch';
 import ToneSelector from './ToneSelector';
 import EmojiButton from './EmojiButton';
@@ -25,6 +23,8 @@ import { messages } from '../i18n';
 import AkButton from '@atlaskit/button/standard-button';
 import AddIcon from '@atlaskit/icon/glyph/add';
 import { setSkinToneAriaLabelText } from './setSkinToneAriaLabelText';
+import { addCustomEmoji, addCustomEmojiButton, emojiPickerAddEmoji, emojiToneSelectorContainer } from './styles';
+import { emojiActionsContainerWithBottomShadow, emojiPickerFooter } from '../picker/styles';
 export var EmojiActions = /*#__PURE__*/function (_PureComponent) {
   _inherits(EmojiActions, _PureComponent);
 
@@ -96,13 +96,13 @@ export var EmojiActions = /*#__PURE__*/function (_PureComponent) {
         previewEmoji = previewEmoji.skinVariations[(selectedTone || 1) - 1];
       }
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.emojiToneSelectorContainer
-      }, this.state.selectingTone && /*#__PURE__*/React.createElement(ToneSelector, {
+      return jsx("div", {
+        css: emojiToneSelectorContainer
+      }, this.state.selectingTone && jsx(ToneSelector, {
         emoji: toneEmoji,
         onToneSelected: this.onToneSelected,
         previewEmojiId: previewEmoji.id
-      }), /*#__PURE__*/React.createElement(EmojiButton, {
+      }), jsx(EmojiButton, {
         ariaExpanded: this.state.selectingTone,
         emoji: previewEmoji,
         selectOnHover: true,
@@ -126,17 +126,18 @@ export var EmojiActions = /*#__PURE__*/function (_PureComponent) {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.AddCustomEmoji
-      }, /*#__PURE__*/React.createElement(FormattedMessage, messages.addCustomEmojiLabel, function (label) {
-        return /*#__PURE__*/React.createElement(AkButton, {
+      return jsx("div", {
+        css: addCustomEmoji
+      }, jsx(FormattedMessage, messages.addCustomEmojiLabel, function (label) {
+        return jsx(AkButton, {
           onClick: onOpenUpload,
-          iconBefore: /*#__PURE__*/React.createElement(AddIcon, {
+          iconBefore: jsx(AddIcon, {
             label: formatMessage(messages.addCustomEmojiLabel),
             size: "small"
           }),
           appearance: "subtle",
-          className: styles.addCustomEmojiButton + ' emoji-picker-add-emoji'
+          css: addCustomEmojiButton,
+          className: emojiPickerAddEmoji
         }, label);
       }));
     }
@@ -155,12 +156,12 @@ export var EmojiActions = /*#__PURE__*/function (_PureComponent) {
           emojiToDelete = _this$props3.emojiToDelete,
           onChange = _this$props3.onChange,
           query = _this$props3.query;
-      var previewFooterClassnames = classNames([footerStyles.emojiPickerFooter, footerStyles.emojiActionsContainerWithBottomShadow]);
+      var previewFooterClassnames = [emojiPickerFooter, emojiActionsContainerWithBottomShadow];
 
       if (uploading) {
-        return /*#__PURE__*/React.createElement("div", {
-          className: previewFooterClassnames
-        }, /*#__PURE__*/React.createElement(EmojiUploadPicker, {
+        return jsx("div", {
+          css: previewFooterClassnames
+        }, jsx(EmojiUploadPicker, {
           onUploadCancelled: onUploadCancelled,
           onUploadEmoji: onUploadEmoji,
           onFileChooserClicked: onFileChooserClicked,
@@ -170,25 +171,25 @@ export var EmojiActions = /*#__PURE__*/function (_PureComponent) {
       }
 
       if (emojiToDelete) {
-        return /*#__PURE__*/React.createElement("div", {
-          className: previewFooterClassnames
-        }, /*#__PURE__*/React.createElement(EmojiDeletePreview, {
+        return jsx("div", {
+          css: previewFooterClassnames
+        }, jsx(EmojiDeletePreview, {
           emoji: emojiToDelete,
           onDeleteEmoji: onDeleteEmoji,
           onCloseDelete: onCloseDelete
         }));
       }
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: previewFooterClassnames,
+      return jsx("div", {
+        css: previewFooterClassnames,
         onMouseLeave: this.onMouseLeave
-      }, /*#__PURE__*/React.createElement("div", {
+      }, jsx("div", {
         style: {
           display: 'flex',
           justifyContent: 'flex-end',
           alignItems: 'center'
         }
-      }, !this.state.selectingTone && /*#__PURE__*/React.createElement(EmojiPickerListSearch, {
+      }, !this.state.selectingTone && jsx(EmojiPickerListSearch, {
         onChange: onChange,
         query: query
       }), this.renderTones()), this.renderAddOwnEmoji());

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

@@ -1,8 +1,9 @@
-import classNames from 'classnames';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import React, { forwardRef } from 'react';
-import * as styles from './styles';
 import Emoji from './Emoji';
 import { leftClick } from '../../util/mouse';
+import { emojiButton, hiddenToneButton } from './styles';
 
 var handleMouseDown = function handleMouseDown(props, event) {
   var onSelected = props.onSelected;
@@ -28,11 +29,10 @@ export var EmojiButton = /*#__PURE__*/forwardRef(function (props, ref) {
       ariaLabelText = props.ariaLabelText,
       ariaExpanded = props.ariaExpanded,
       shouldHideButton = props.shouldHideButton;
-  var classes = [shouldHideButton ? styles.hiddenToneButton : styles.emojiButton];
-  return /*#__PURE__*/React.createElement("button", {
+  return jsx("button", {
     ref: ref,
     "aria-expanded": ariaExpanded,
-    className: classNames(classes),
+    css: shouldHideButton ? hiddenToneButton : emojiButton,
     onMouseDown: function onMouseDown(event) {
       handleMouseDown(props, event);
     },
@@ -40,7 +40,7 @@ export var EmojiButton = /*#__PURE__*/forwardRef(function (props, ref) {
       handleKeyPress(props, event);
     },
     "aria-label": ariaLabelText
-  }, /*#__PURE__*/React.createElement(Emoji, {
+  }, jsx(Emoji, {
     emoji: emoji,
     selectOnHover: selectOnHover
   }));

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

@@ -11,15 +11,16 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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; } }
 
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import AkButton from '@atlaskit/button/custom-theme-button';
-import React from 'react';
 import { Component } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import { messages } from '../i18n';
 import CachingEmoji from './CachingEmoji';
 import EmojiErrorMessage from './EmojiErrorMessage';
 import RetryableButton from './RetryableButton';
-import * as styles from './styles';
+import { cancelButton, deleteFooter, deletePreview, deleteText, emojiDeleteErrorMessage, previewButtonGroup } from './styles';
 
 var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
   _inherits(EmojiDeletePreview, _Component);
@@ -88,37 +89,35 @@ var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
           loading = _this$state.loading,
           error = _this$state.error;
       var formatMessage = intl.formatMessage;
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.deletePreview
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.deleteText
-      }, /*#__PURE__*/React.createElement("h5", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.deleteEmojiTitle)), /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.deleteEmojiDescription, {
+      return jsx("div", {
+        css: deletePreview
+      }, jsx("div", {
+        css: deleteText
+      }, jsx("h5", null, jsx(FormattedMessage, messages.deleteEmojiTitle)), jsx(FormattedMessage, _extends({}, messages.deleteEmojiDescription, {
         values: {
           emojiShortName: emoji.shortName
         }
-      }))), /*#__PURE__*/React.createElement("div", {
-        className: styles.deleteFooter
-      }, /*#__PURE__*/React.createElement(CachingEmoji, {
+      }))), jsx("div", {
+        css: deleteFooter
+      }, jsx(CachingEmoji, {
         emoji: emoji
-      }), /*#__PURE__*/React.createElement("div", {
-        className: styles.previewButtonGroup
-      }, error ? !loading ? /*#__PURE__*/React.createElement(EmojiErrorMessage, {
+      }), jsx("div", {
+        css: previewButtonGroup
+      }, error ? !loading ? jsx(EmojiErrorMessage, {
         message: formatMessage(messages.deleteEmojiFailed),
-        className: styles.emojiDeleteErrorMessage,
+        messageStyles: emojiDeleteErrorMessage,
         tooltip: true
-      }) : null : null, /*#__PURE__*/React.createElement(RetryableButton, {
-        className: styles.uploadEmojiButton,
-        retryClassName: styles.uploadRetryButton,
+      }) : null : null, jsx(RetryableButton, {
         label: formatMessage(messages.deleteEmojiLabel),
         onSubmit: this.onSubmit,
         appearance: "danger",
         loading: loading,
         error: error
-      }), /*#__PURE__*/React.createElement(AkButton, {
+      }), jsx(AkButton, {
         appearance: "subtle",
         onClick: this.onCancel,
-        className: styles.cancelButton
-      }, /*#__PURE__*/React.createElement(FormattedMessage, messages.cancelLabel)))));
+        css: cancelButton
+      }, jsx(FormattedMessage, messages.cancelLabel)))));
     }
   }]);
 

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

@@ -8,8 +8,9 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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; } }
 
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
-import React from 'react';
 import { PureComponent } from 'react';
 import Tooltip from '@atlaskit/tooltip';
 
@@ -27,12 +28,12 @@ var EmojiErrorMessage = /*#__PURE__*/function (_PureComponent) {
   _createClass(EmojiErrorMessage, [{
     key: "renderWithTooltip",
     value: function renderWithTooltip() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: this.props.className
-      }, /*#__PURE__*/React.createElement(Tooltip, {
+      return jsx("div", {
+        css: this.props.messageStyles
+      }, jsx(Tooltip, {
         content: this.props.message,
         position: "top"
-      }, /*#__PURE__*/React.createElement(ErrorIcon, {
+      }, jsx(ErrorIcon, {
         label: "Error",
         size: "medium"
       })));
@@ -40,9 +41,9 @@ var EmojiErrorMessage = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "renderInline",
     value: function renderInline() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: this.props.className
-      }, /*#__PURE__*/React.createElement(ErrorIcon, {
+      return jsx("div", {
+        css: this.props.messageStyles
+      }, jsx(ErrorIcon, {
         label: "Error",
         size: "small"
       }), " ", this.props.message);

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

@@ -1,13 +1,10 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
-import classNames from 'classnames';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import { placeholder, placeholderContainer } from './styles';
 import { defaultEmojiHeight } from '../../util/constants';
 import { isImageRepresentation, isMediaRepresentation } from '../../util/type-helpers';
 
 var EmojiPlaceholder = function EmojiPlaceholder(props) {
-  var _classes;
-
   var shortName = props.shortName,
       _props$size = props.size,
       size = _props$size === void 0 ? defaultEmojiHeight : _props$size,
@@ -33,10 +30,10 @@ var EmojiPlaceholder = function EmojiPlaceholder(props) {
     width: "".concat(width, "px"),
     height: "".concat(height, "px")
   };
-  var classes = (_classes = {}, _defineProperty(_classes, placeholder, true), _defineProperty(_classes, placeholderContainer, true), _classes);
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
     "aria-label": shortName,
-    className: classNames(classes),
+    className: placeholder,
+    css: placeholderContainer,
     style: style,
     title: showTooltip ? shortName : ''
   });

package/dist/esm/components/common/EmojiPreview.js

@@ -10,18 +10,18 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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; } }
 
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import AkButton from '@atlaskit/button/standard-button';
 import AddIcon from '@atlaskit/icon/glyph/add';
-import classNames from 'classnames';
-import React from 'react';
 import { PureComponent } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
-import CachingEmoji from '../../components/common/CachingEmoji';
 import EmojiButton from '../../components/common/EmojiButton';
 import { messages } from '../i18n';
-import * as styles from './styles';
 import ToneSelector from './ToneSelector';
 import { setSkinToneAriaLabelText } from './setSkinToneAriaLabelText';
+import { addCustomEmoji, addCustomEmojiButton, emojiPickerAddEmoji, emojiPreview, toneSelectorContainer } from './styles';
+import { EmojiPreviewComponent } from './EmojiPreviewComponent';
 export var EmojiPreview = /*#__PURE__*/function (_PureComponent) {
   _inherits(EmojiPreview, _PureComponent);
 
@@ -93,13 +93,13 @@ export var EmojiPreview = /*#__PURE__*/function (_PureComponent) {
         previewEmoji = previewEmoji.skinVariations[(selectedTone || 1) - 1];
       }
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.toneSelectorContainer
-      }, this.state.selectingTone && /*#__PURE__*/React.createElement(ToneSelector, {
+      return jsx("div", {
+        className: toneSelectorContainer
+      }, this.state.selectingTone && jsx(ToneSelector, {
         emoji: toneEmoji,
         onToneSelected: this.onToneSelected,
         previewEmojiId: previewEmoji.id
-      }), /*#__PURE__*/React.createElement(EmojiButton, {
+      }), jsx(EmojiButton, {
         ariaExpanded: this.state.selectingTone,
         emoji: previewEmoji,
         selectOnHover: true,
@@ -112,8 +112,6 @@ export var EmojiPreview = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "renderEmojiPreview",
     value: function renderEmojiPreview() {
-      var _classNames2;
-
       var selectingTone = this.state.selectingTone;
       var _this$props2 = this.props,
           emoji = _this$props2.emoji,
@@ -123,21 +121,9 @@ export var EmojiPreview = /*#__PURE__*/function (_PureComponent) {
         return null;
       }
 
-      var previewClasses = classNames(_defineProperty({}, styles.preview, true));
-      var previewTextClasses = classNames((_classNames2 = {}, _defineProperty(_classNames2, styles.previewText, true), _defineProperty(_classNames2, styles.previewSingleLine, !emoji.name), _classNames2));
-      return /*#__PURE__*/React.createElement("div", {
-        className: previewClasses
-      }, /*#__PURE__*/React.createElement("span", {
-        className: styles.previewImg
-      }, /*#__PURE__*/React.createElement(CachingEmoji, {
+      return jsx(EmojiPreviewComponent, {
         emoji: emoji
-      })), /*#__PURE__*/React.createElement("div", {
-        className: previewTextClasses
-      }, /*#__PURE__*/React.createElement("span", {
-        className: styles.name
-      }, emoji.name), /*#__PURE__*/React.createElement("span", {
-        className: styles.shortName
-      }, emoji.shortName)));
+      });
     } // note: emoji-picker-add-emoji className is used by pollinator synthetic checks
 
   }, {
@@ -154,26 +140,26 @@ export var EmojiPreview = /*#__PURE__*/function (_PureComponent) {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.AddCustomEmoji
-      }, /*#__PURE__*/React.createElement(FormattedMessage, messages.addCustomEmojiLabel, function (label) {
-        return /*#__PURE__*/React.createElement(AkButton, {
+      return jsx("div", {
+        css: addCustomEmoji
+      }, jsx(FormattedMessage, messages.addCustomEmojiLabel, function (label) {
+        return jsx(AkButton, {
           onClick: onOpenUpload,
-          iconBefore: /*#__PURE__*/React.createElement(AddIcon, {
+          iconBefore: jsx(AddIcon, {
             label: formatMessage(messages.addCustomEmojiLabel),
             size: "small"
           }),
           appearance: "subtle",
-          className: styles.addCustomEmojiButton + ' emoji-picker-add-emoji'
+          css: addCustomEmojiButton,
+          className: emojiPickerAddEmoji
         }, label);
       }));
     }
   }, {
     key: "render",
     value: function render() {
-      var sectionClasses = classNames([styles.emojiPreview, styles.emojiPreviewSection]);
-      return /*#__PURE__*/React.createElement("div", {
-        className: sectionClasses,
+      return jsx("div", {
+        css: emojiPreview,
         onMouseLeave: this.onMouseLeave
       }, this.renderAddOwnEmoji(), this.renderEmojiPreview(), this.renderTones());
     }

package/dist/esm/components/common/EmojiPreviewComponent.js

@@ -0,0 +1,20 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import CachingEmoji from './CachingEmoji';
+import { emojiName, emojiShortName, preview, previewImg, previewText } from './styles';
+export var EmojiPreviewComponent = function EmojiPreviewComponent(_ref) {
+  var emoji = _ref.emoji;
+  return jsx("div", {
+    css: preview
+  }, jsx("span", {
+    css: previewImg
+  }, jsx(CachingEmoji, {
+    emoji: emoji
+  })), jsx("div", {
+    css: previewText
+  }, emoji.name && jsx("div", {
+    css: emojiName
+  }, emoji.name), jsx("div", {
+    css: emojiShortName
+  }, emoji.shortName)));
+};