@atlaskit/emoji 64.2.1 → 64.4.1

package/dist/es2019/components/uploader/EmojiUploadComponent.js

@@ -1,13 +1,15 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import { PureComponent } from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import classNames from 'classnames';
-import * as styles from './styles';
 import { supportsUploadFeature } from '../../api/EmojiResource';
 import EmojiUploadPickerWithIntl from '../common/EmojiUploadPicker';
 import { uploadEmoji } from '../common/UploadEmoji';
 import { createAndFireEventInElementsChannel, selectedFileEvent, uploadCancelButton, uploadConfirmButton } from '../../util/analytics';
+import { emojiUploadFooter, emojiUploadWidget } from './styles';
+import { ufoExperiences } from '../../util/analytics/ufoExperiences';
 export default class EmojiUploadComponent extends PureComponent {
   constructor(props) {
     super(props);
@@ -16,6 +18,10 @@ export default class EmojiUploadComponent extends PureComponent {
       const {
         emojiProvider
       } = this.props;
+      ufoExperiences['emoji-uploaded'].start();
+      ufoExperiences['emoji-uploaded'].addMetadata({
+        retry
+      });
       this.fireAnalytics(uploadConfirmButton({
         retry
       }));
@@ -77,17 +83,21 @@ export default class EmojiUploadComponent extends PureComponent {
     this.state = {};
   }
 
+  componentWillUnmount() {
+    ufoExperiences['emoji-uploaded'].abort();
+  }
+
   render() {
     const {
       uploadErrorMessage
     } = this.state;
-    const errorMessage = uploadErrorMessage ? /*#__PURE__*/React.createElement(FormattedMessage, uploadErrorMessage) : null;
-    return /*#__PURE__*/React.createElement("div", {
-      className: classNames([styles.emojiUploadWidget]),
+    const errorMessage = uploadErrorMessage ? jsx(FormattedMessage, uploadErrorMessage) : null;
+    return jsx("div", {
+      css: emojiUploadWidget,
       ref: this.props.onUploaderRef
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classNames([styles.emojiUploadFooter])
-    }, /*#__PURE__*/React.createElement(EmojiUploadPickerWithIntl, {
+    }, jsx("div", {
+      css: emojiUploadFooter
+    }, jsx(EmojiUploadPickerWithIntl, {
       ref: this.onUploaderRef,
       onFileChooserClicked: this.onFileChooserClicked,
       onUploadCancelled: this.onUploadCancelled,

package/dist/es2019/components/uploader/styles.js

@@ -1,8 +1,8 @@
-import { style } from 'typestyle';
 import { token } from '@atlaskit/tokens';
-import { emojiPickerWidth } from '../../util/constants'; // Uploader
+import { emojiPickerWidth } from '../../util/constants';
+import { css } from '@emotion/core'; // Uploader
 
-export const emojiUploadWidget = style({
+export const emojiUploadWidget = css({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'center',
@@ -16,6 +16,6 @@ export const emojiUploadWidget = style({
   marginTop: '-16px'
 }); /// Footer
 
-export const emojiUploadFooter = style({
+export const emojiUploadFooter = css({
   flex: '0 0 auto'
 });

package/dist/es2019/index.js

@@ -6,19 +6,20 @@ import EmojiPicker from './components/picker/EmojiPicker';
 import EmojiUploader from './components/uploader/EmojiUploader';
 import EmojiTypeAhead from './components/typeahead/EmojiTypeAhead';
 import EmojiTypeAheadItem from './components/typeahead/EmojiTypeAheadItem';
-export { selected, selectOnHover, emojiSprite, emojiNode, emojiImage } from './components/common/styles';
+export { // renaming exports to prevent breaking changes due to renaming
+commonSelectedStyles as selected, selectOnHoverStyles as selectOnHover, emojiSprite, emojiNodeStyles as emojiNode, emojiImage } from './components/common/styles';
 import EmojiResource from './api/EmojiResource';
 import EmojiRepository from './api/EmojiRepository';
 import EmojiLoader from './api/EmojiLoader';
 import { denormaliseEmojiServiceResponse } from './api/EmojiUtils';
 import { toEmojiId, toOptionalEmojiId } from './util/type-helpers';
-import { recordSelectionFailedSli, recordSelectionSucceededSli } from './util/analytics';
+import { recordSelectionFailedSli, recordSelectionSucceededSli, ufoExperiences } from './util/analytics';
 import { customCategory, defaultEmojiHeight, emojiPickerWidth, emojiPickerHeight } from './util/constants';
 import { UsageFrequencyTracker } from './api/internal/UsageFrequencyTracker';
 export { // Classes
 AbstractResource, Emoji, EmojiPlaceholder, EmojiLoader, EmojiPicker, EmojiUploader, EmojiResource, EmojiRepository, EmojiTypeAhead, ResourcedEmoji, // functions
-denormaliseEmojiServiceResponse, toEmojiId, toOptionalEmojiId, recordSelectionFailedSli, recordSelectionSucceededSli, // Constants
+denormaliseEmojiServiceResponse, toEmojiId, toOptionalEmojiId, recordSelectionFailedSli, recordSelectionSucceededSli, ufoExperiences, // Constants
 emojiPickerWidth, emojiPickerHeight, defaultEmojiHeight, customCategory, UsageFrequencyTracker, EmojiTypeAheadItem };
 export { // Enums
-SearchSort } from './types';
+SearchSort, UfoExperienceName, UfoComponentName } from './types';
 export default EmojiPicker;

package/dist/es2019/types.js

@@ -42,4 +42,23 @@ export let ProviderTypes;
   ProviderTypes["STANDARD"] = "STANDARD";
   ProviderTypes["ATLASSIAN"] = "ATLASSIAN";
   ProviderTypes["UNKNOWN"] = "UNKNOWN";
-})(ProviderTypes || (ProviderTypes = {}));
+})(ProviderTypes || (ProviderTypes = {}));
+
+export let UfoExperienceName;
+
+(function (UfoExperienceName) {
+  UfoExperienceName["EMOJI_RENDERED"] = "emoji-rendered";
+  UfoExperienceName["EMOJI_RESOURCE_FETCHED"] = "emoji-resource-fetched";
+  UfoExperienceName["EMOJI_PICKER_OPENED"] = "emoji-picker-opened";
+  UfoExperienceName["EMOJI_SELECTION_RECORDED"] = "emoji-selection-recorded";
+  UfoExperienceName["EMOJI_UPLOADED"] = "emoji-uploaded";
+  UfoExperienceName["EMOJI_SEARCHED"] = "emoji-searched";
+})(UfoExperienceName || (UfoExperienceName = {}));
+
+export let UfoComponentName;
+
+(function (UfoComponentName) {
+  UfoComponentName["EMOJI"] = "emoji";
+  UfoComponentName["EMOJI_PICKER"] = "emoji-picker";
+  UfoComponentName["EMOJI_PROVIDER"] = "emoji-provider";
+})(UfoComponentName || (UfoComponentName = {}));

package/dist/es2019/util/analytics/analytics.js

@@ -1,32 +1,5 @@
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { name as packageName, version as packageVersion } from '../../version.json';
-import { ExperiencePerformanceTypes, ExperienceTypes, ConcurrentExperience } from '@atlaskit/ufo';
-import { withSampling } from './samplingUfo';
-
-const createRenderExperience = componentName => {
-  return {
-    platform: {
-      component: componentName
-    },
-    type: ExperienceTypes.Load,
-    performanceType: ExperiencePerformanceTypes.PageSegmentLoad
-  };
-}; // const createInlineExperience = (componentName: string) => {
-//   return {
-//     platform: { component: componentName },
-//     type: ExperienceTypes.Experience,
-//     performanceType: ExperiencePerformanceTypes.InlineResult,
-//   };
-// };
-
-
-export const ufoExperiences = {
-  'emoji-rendered': new ConcurrentExperience('emoji-rendered', createRenderExperience('emoji')),
-  'emoji-resource-fetched': new ConcurrentExperience('emoji-resource-fetched', createRenderExperience('emoji-provider'))
-};
-export const sampledUfoRenderedEmoji = emojiId => {
-  return withSampling(ufoExperiences['emoji-rendered'].getInstance(emojiId.id || emojiId.shortName));
-};
 export const createAndFireEventInElementsChannel = createAndFireEvent('fabric-elements');
 
 const createEvent = (eventType, action, actionSubject, actionSubjectId, attributes = {}) => ({
@@ -41,12 +14,16 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   }
 });
 
-export const insertionSucceeded = source => createEvent('operational', 'succeeded', 'recordEmojiSelection', undefined, {
-  source
-});
-export const insertionFailed = source => createEvent('operational', 'failed', 'recordEmojiSelection', undefined, {
-  source
-});
+export const recordSucceeded = source => {
+  return createEvent('operational', 'succeeded', 'recordEmojiSelection', undefined, {
+    source
+  });
+};
+export const recordFailed = source => {
+  return createEvent('operational', 'failed', 'recordEmojiSelection', undefined, {
+    source
+  });
+};
 
 const emojiPickerEvent = (action, attributes = {}, actionSubjectId) => createEvent('ui', action, 'emojiPicker', actionSubjectId, attributes);
 
@@ -146,15 +123,17 @@ export const typeaheadSelectedEvent = (pressed, duration, emoji, emojiList, quer
 export const typeaheadRenderedEvent = (duration, query, emojiList) => createEvent('operational', 'rendered', 'emojiTypeahead', undefined, {
   duration,
   ...extractCommonAttributes(query, emojiList)
-});
+}); // it's used in editor typeahead to fire success record analytics
+
 export const recordSelectionSucceededSli = options => () => {
   if (options && options.createAnalyticsEvent) {
-    createAndFireEvent('editor')(insertionSucceeded('typeahead'))(options.createAnalyticsEvent);
+    createAndFireEvent('editor')(recordSucceeded('typeahead'))(options.createAnalyticsEvent);
   }
-};
+}; // it's used in editor typeahead to fire failure record analytics
+
 export const recordSelectionFailedSli = options => err => {
   if (options && options.createAnalyticsEvent) {
-    createAndFireEvent('editor')(insertionFailed('typeahead'))(options.createAnalyticsEvent);
+    createAndFireEvent('editor')(recordFailed('typeahead'))(options.createAnalyticsEvent);
   }
 
   return Promise.reject(err);

package/dist/es2019/util/analytics/index.js

@@ -1,3 +1,4 @@
 export { ufoExperiencesSampled, clearSampled, isExperienceSampled, withSampling } from './samplingUfo';
-export { categoryClickedEvent, createAndFireEventInElementsChannel, closedPickerEvent, deleteBeginEvent, deleteCancelEvent, deleteConfirmEvent, insertionFailed, insertionSucceeded, openedPickerEvent, pickerClickedEvent, pickerSearchedEvent, recordSelectionFailedSli, recordSelectionSucceededSli, sampledUfoRenderedEmoji, selectedFileEvent, toneSelectedEvent, toneSelectorClosedEvent, toneSelectorOpenedEvent, typeaheadCancelledEvent, typeaheadRenderedEvent, typeaheadSelectedEvent, ufoExperiences, uploadBeginButton, uploadCancelButton, uploadConfirmButton, uploadFailedEvent, uploadSucceededEvent } from './analytics';
+export { categoryClickedEvent, createAndFireEventInElementsChannel, closedPickerEvent, deleteBeginEvent, deleteCancelEvent, deleteConfirmEvent, recordFailed, recordSucceeded, openedPickerEvent, pickerClickedEvent, pickerSearchedEvent, recordSelectionFailedSli, recordSelectionSucceededSli, selectedFileEvent, toneSelectedEvent, toneSelectorClosedEvent, toneSelectorOpenedEvent, typeaheadCancelledEvent, typeaheadRenderedEvent, typeaheadSelectedEvent, uploadBeginButton, uploadCancelButton, uploadConfirmButton, uploadFailedEvent, uploadSucceededEvent } from './analytics';
+export { sampledUfoRenderedEmoji, ufoExperiences } from './ufoExperiences';
 export { useSampledUFOComponentExperience } from './useSampledUFOComponentExperience';

package/dist/es2019/util/analytics/ufoExperiences.js

@@ -0,0 +1,35 @@
+import { UfoComponentName, UfoExperienceName } from '../../types';
+import { ExperiencePerformanceTypes, ExperienceTypes, ConcurrentExperience, UFOExperience } from '@atlaskit/ufo';
+import { withSampling } from './samplingUfo';
+
+const createRenderExperience = componentName => {
+  return {
+    platform: {
+      component: componentName
+    },
+    type: ExperienceTypes.Load,
+    performanceType: ExperiencePerformanceTypes.PageSegmentLoad
+  };
+};
+
+const createInlineExperience = componentName => {
+  return {
+    platform: {
+      component: componentName
+    },
+    type: ExperienceTypes.Experience,
+    performanceType: ExperiencePerformanceTypes.InlineResult
+  };
+};
+
+export const ufoExperiences = {
+  'emoji-rendered': new ConcurrentExperience(UfoExperienceName.EMOJI_RENDERED, createRenderExperience(UfoComponentName.EMOJI)),
+  'emoji-resource-fetched': new ConcurrentExperience(UfoExperienceName.EMOJI_RESOURCE_FETCHED, createRenderExperience(UfoComponentName.EMOJI_PROVIDER)),
+  'emoji-picker-opened': new UFOExperience(UfoExperienceName.EMOJI_PICKER_OPENED, createRenderExperience(UfoComponentName.EMOJI_PICKER)),
+  'emoji-selection-recorded': new UFOExperience(UfoExperienceName.EMOJI_SELECTION_RECORDED, createInlineExperience(UfoComponentName.EMOJI_PROVIDER)),
+  'emoji-uploaded': new UFOExperience(UfoExperienceName.EMOJI_UPLOADED, createInlineExperience(UfoComponentName.EMOJI_PICKER)),
+  'emoji-searched': new UFOExperience(UfoExperienceName.EMOJI_SEARCHED, createInlineExperience(UfoComponentName.EMOJI_PICKER))
+};
+export const sampledUfoRenderedEmoji = emojiId => {
+  return withSampling(ufoExperiences['emoji-rendered'].getInstance(emojiId.id || emojiId.shortName));
+};

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "64.2.1",
+	"version": "64.4.1",
 	"sideEffects": false
 }

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

@@ -178,7 +178,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 emojiRequest(this.siteServiceConfig, {
         path: path
       }).then(function (serviceResponse) {
@@ -202,7 +206,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/esm/components/common/CachingEmoji.js

@@ -14,6 +14,7 @@ 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 PropTypes from 'prop-types';
 import React from 'react';
 import { PureComponent } from 'react';
 import { shouldUseAltRepresentation } from '../../api/EmojiUtils';
@@ -21,7 +22,6 @@ import { isEmojiDescription, isMediaEmoji, isPromise } from '../../util/type-hel
 import debug from '../../util/logger';
 import Emoji from './Emoji';
 import EmojiPlaceholder from './EmojiPlaceholder';
-import { EmojiContext } from '../../context/EmojiContext';
 import { UfoErrorBoundary } from './UfoErrorBoundary';
 import { sampledUfoRenderedEmoji, ufoExperiences, useSampledUFOComponentExperience } from '../../util/analytics';
 import { SAMPLING_RATE_EMOJI_RENDERED_EXP } from '../../util/constants';
@@ -67,7 +67,7 @@ export var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
 
     _classCallCheck(this, CachingMediaEmoji);
 
-    _this = _super.call(this, props);
+    _this = _super.call(this, props, context);
 
     _defineProperty(_assertThisInitialized(_this), "mounted", false);
 
@@ -122,10 +122,6 @@ export var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
     value: function loadEmoji(emoji, context, forceLoad) {
       var _this2 = this;
 
-      if (!context) {
-        return;
-      }
-
       if (!context.emoji) {
         return undefined;
       }
@@ -219,6 +215,8 @@ export var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
   return CachingMediaEmoji;
 }(PureComponent);
 
-_defineProperty(CachingMediaEmoji, "contextType", EmojiContext);
+_defineProperty(CachingMediaEmoji, "contextTypes", {
+  emoji: PropTypes.object
+});
 
 export default CachingEmoji;

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

@@ -1,16 +1,18 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import Button from '@atlaskit/button/custom-theme-button';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
-import React from 'react';
 import { token } from '@atlaskit/tokens';
 import { N500 } from '@atlaskit/theme/colors';
 import { deleteEmojiLabel } from '../../util/constants';
-import * as styles from './styles';
+import { emojiDeleteButton, deleteButton } from './styles';
 
 var DeleteButton = function DeleteButton(props) {
-  return /*#__PURE__*/React.createElement("span", {
-    className: styles.deleteButton
-  }, /*#__PURE__*/React.createElement(Button, {
-    iconBefore: /*#__PURE__*/React.createElement(CrossCircleIcon, {
+  return jsx("span", {
+    css: deleteButton,
+    className: emojiDeleteButton
+  }, jsx(Button, {
+    iconBefore: jsx(CrossCircleIcon, {
       label: deleteEmojiLabel,
       primaryColor: token('color.text.subtle', N500),
       size: "small"

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

@@ -5,14 +5,15 @@ 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) {
@@ -80,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,
@@ -91,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")
     };
   }
 
@@ -115,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);
     },
@@ -139,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,
@@ -149,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;
@@ -173,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);
       }
@@ -203,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,
@@ -219,10 +209,11 @@ var renderAsImage = function renderAsImage(props) {
     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);
     },

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