@atlaskit/emoji 64.2.0 → 64.4.0

package/dist/cjs/util/analytics/samplingUfo.js

@@ -0,0 +1,278 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withSampling = exports.ufoExperiencesSampled = exports.isExperienceSampled = exports.clearSampled = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+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; }
+
+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) { (0, _defineProperty2.default)(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; }
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+var ufoExperiencesSampled = {};
+exports.ufoExperiencesSampled = ufoExperiencesSampled;
+
+var sampleChance = function sampleChance(min, max) {
+  // min and max included
+  return Math.floor(Math.random() * (max - min + 1) + min);
+};
+
+var clearSampled = function clearSampled() {
+  var _iterator = _createForOfIteratorHelper(Object.getOwnPropertyNames(ufoExperiencesSampled)),
+      _step;
+
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var prop = _step.value;
+      delete ufoExperiencesSampled[prop];
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+}; // default sampling function to determine which one to be sampled
+
+
+exports.clearSampled = clearSampled;
+
+var isExperienceSampled = function isExperienceSampled(rate) {
+  // if invalid sampling rate provided, we sample it
+  if (rate > 1 || rate < 0) {
+    return true;
+  }
+
+  if (rate === 1) {
+    return true;
+  }
+
+  if (rate === 0) {
+    return false;
+  }
+
+  var maxCount = Math.ceil(1 / rate);
+  var chance = sampleChance(1, maxCount);
+  return chance === maxCount;
+};
+
+exports.isExperienceSampled = isExperienceSampled;
+
+var hasSampledFromStart = function hasSampledFromStart(experience) {
+  if (!ufoExperiencesSampled[experience.id]) {
+    return false;
+  }
+
+  if (experience.instanceId) {
+    // if the instance of concurrent exp has been sampled from start, allow it.
+    return ufoExperiencesSampled[experience.id].sampledInstance[experience.instanceId];
+  }
+
+  return ufoExperiencesSampled[experience.id].sampled;
+};
+
+/**
+ * This function is a temp solution to reduce the event traffic, as UFO package does not support it.
+ *
+ * e.g. Emoji Picker contains thousands of emojis, which means will trigger a large number of renderred events without sampling
+ * @param ufoExperience
+ * @returns
+ */
+var withSampling = function withSampling(ufoExperience) {
+  var init = function init() {
+    if (!ufoExperiencesSampled[ufoExperience.id]) {
+      ufoExperiencesSampled[ufoExperience.id] = {
+        sampled: false,
+        sampledInstance: {}
+      };
+    }
+  };
+
+  var start = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(options) {
+      var isSampled;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!hasSampledFromStart(ufoExperience)) {
+                _context.next = 2;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 2:
+              isSampled = options.samplingFunc || isExperienceSampled;
+
+              if (isSampled(options.samplingRate)) {
+                _context.next = 7;
+                break;
+              }
+
+              if (ufoExperience.instanceId) {
+                ufoExperiencesSampled[ufoExperience.id].sampledInstance[ufoExperience.instanceId] = false;
+              }
+
+              ufoExperiencesSampled[ufoExperience.id].sampled = false;
+              return _context.abrupt("return");
+
+            case 7:
+              // update sampled records
+              if (ufoExperience.instanceId) {
+                ufoExperiencesSampled[ufoExperience.id].sampledInstance[ufoExperience.instanceId] = true;
+                ufoExperiencesSampled[ufoExperience.id].sampled = true;
+              }
+
+              return _context.abrupt("return", ufoExperience.start(options.startTime));
+
+            case 9:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function start(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  var success = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(config) {
+      return _regenerator.default.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              if (hasSampledFromStart(ufoExperience)) {
+                _context2.next = 2;
+                break;
+              }
+
+              return _context2.abrupt("return", null);
+
+            case 2:
+              return _context2.abrupt("return", ufoExperience.success(config));
+
+            case 3:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+
+    return function success(_x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var failure = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(config) {
+      return _regenerator.default.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              if (hasSampledFromStart(ufoExperience)) {
+                _context3.next = 2;
+                break;
+              }
+
+              return _context3.abrupt("return", null);
+
+            case 2:
+              return _context3.abrupt("return", ufoExperience.failure(config));
+
+            case 3:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    }));
+
+    return function failure(_x3) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  var abort = /*#__PURE__*/function () {
+    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(config) {
+      return _regenerator.default.wrap(function _callee4$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              if (hasSampledFromStart(ufoExperience)) {
+                _context4.next = 2;
+                break;
+              }
+
+              return _context4.abrupt("return", null);
+
+            case 2:
+              return _context4.abrupt("return", ufoExperience.abort(config));
+
+            case 3:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee4);
+    }));
+
+    return function abort(_x4) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+
+  var mark = function mark(name, timestamp) {
+    if (!hasSampledFromStart(ufoExperience)) {
+      return;
+    }
+
+    return ufoExperience.mark(name, timestamp);
+  };
+
+  var markFMP = function markFMP(timestamp) {
+    if (!hasSampledFromStart(ufoExperience)) {
+      return;
+    }
+
+    return ufoExperience.markFMP(timestamp);
+  };
+
+  var markInlineResponse = function markInlineResponse(timestamp) {
+    if (!hasSampledFromStart(ufoExperience)) {
+      return;
+    }
+
+    return ufoExperience.markInlineResponse(timestamp);
+  };
+
+  init();
+  return _objectSpread(_objectSpread({}, ufoExperience), {}, {
+    start: start,
+    success: success,
+    failure: failure,
+    abort: abort,
+    mark: mark,
+    markFMP: markFMP,
+    markInlineResponse: markInlineResponse
+  });
+};
+
+exports.withSampling = withSampling;

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

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ufoExperiences = exports.sampledUfoRenderedEmoji = void 0;
+
+var _ufo = require("@atlaskit/ufo");
+
+var _samplingUfo = require("./samplingUfo");
+
+var createRenderExperience = function createRenderExperience(componentName) {
+  return {
+    platform: {
+      component: componentName
+    },
+    type: _ufo.ExperienceTypes.Load,
+    performanceType: _ufo.ExperiencePerformanceTypes.PageSegmentLoad
+  };
+};
+
+var createInlineExperience = function createInlineExperience(componentName) {
+  return {
+    platform: {
+      component: componentName
+    },
+    type: _ufo.ExperienceTypes.Experience,
+    performanceType: _ufo.ExperiencePerformanceTypes.InlineResult
+  };
+};
+
+var ufoExperiences = {
+  'emoji-rendered': new _ufo.ConcurrentExperience('emoji-rendered', createRenderExperience('emoji')),
+  'emoji-resource-fetched': new _ufo.ConcurrentExperience('emoji-resource-fetched', createRenderExperience('emoji-provider')),
+  'emoji-picker-opened': new _ufo.UFOExperience('emoji-picker-opened', createRenderExperience('emoji-picker')),
+  'emoji-selection-recorded': new _ufo.UFOExperience('emoji-selection-recorded', createInlineExperience('emoji-picker')),
+  'emoji-uploaded': new _ufo.UFOExperience('emoji-uploaded', createInlineExperience('emoji-picker')),
+  'emoji-searched': new _ufo.UFOExperience('emoji-searched', createInlineExperience('emoji-picker'))
+};
+exports.ufoExperiences = ufoExperiences;
+
+var sampledUfoRenderedEmoji = function sampledUfoRenderedEmoji(emojiId) {
+  return (0, _samplingUfo.withSampling)(ufoExperiences['emoji-rendered'].getInstance(emojiId.id || emojiId.shortName));
+};
+
+exports.sampledUfoRenderedEmoji = sampledUfoRenderedEmoji;

package/dist/cjs/util/analytics/useSampledUFOComponentExperience.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSampledUFOComponentExperience = void 0;
+
+var _react = require("react");
+
+var _samplingUfo = require("./samplingUfo");
+
+var useConstructor = function useConstructor(callback) {
+  var hasBeenFired = (0, _react.useRef)(false);
+
+  if (!hasBeenFired.current) {
+    callback();
+    hasBeenFired.current = true;
+  }
+
+  return null;
+};
+/**
+ * A hook to start an experience and to auto abort the experience when the parent component is unmounted.
+ * Use this instead of a direct call to `experience.start`. If you need to restart the experience
+ * simply trigger an unmount and remount of the parent component.
+ * @param experience the experience to start and abort
+ */
+
+
+var useSampledUFOComponentExperience = function useSampledUFOComponentExperience(experience, samplingRate, metadata) {
+  (0, _react.useEffect)(function () {
+    return function () {
+      (0, _samplingUfo.withSampling)(experience).abort();
+    }; // we want this cleanup to only happen on unmount so this is a legit use of empty array
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useConstructor(function () {
+    (0, _samplingUfo.withSampling)(experience).start({
+      samplingRate: samplingRate
+    });
+
+    if (metadata) {
+      experience.addMetadata(metadata);
+    }
+  });
+  return null;
+};
+
+exports.useSampledUFOComponentExperience = useSampledUFOComponentExperience;

package/dist/cjs/util/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.userCustomTitle = exports.selectedToneStorageKey = exports.migrationUserId = exports.localStoragePrefix = exports.frequentCategory = exports.emojiPickerWidth = exports.emojiPickerHeight = exports.deleteEmojiLabel = exports.defaultListLimit = exports.defaultEmojiHeight = exports.defaultCategories = exports.dataURLPrefix = exports.customType = exports.customTitle = exports.customCategory = exports.analyticsEmojiPrefix = exports.MAX_ORDINAL = void 0;
+exports.userCustomTitle = exports.selectedToneStorageKey = exports.migrationUserId = exports.localStoragePrefix = exports.frequentCategory = exports.emojiPickerWidth = exports.emojiPickerHeight = exports.deleteEmojiLabel = exports.defaultListLimit = exports.defaultEmojiHeight = exports.defaultCategories = exports.dataURLPrefix = exports.customType = exports.customTitle = exports.customCategory = exports.analyticsEmojiPrefix = exports.SAMPLING_RATE_EMOJI_RENDERED_EXP_RESOURCEEMOJI = exports.SAMPLING_RATE_EMOJI_RENDERED_EXP = exports.MAX_ORDINAL = void 0;
 var customCategory = 'CUSTOM';
 exports.customCategory = customCategory;
 var frequentCategory = 'FREQUENT';
@@ -41,5 +41,12 @@ var defaultListLimit = 50;
 exports.defaultListLimit = defaultListLimit;
 var migrationUserId = 'hipchat_migration_emoticons';
 exports.migrationUserId = migrationUserId;
-var analyticsEmojiPrefix = 'atlassian.fabric.emoji.picker';
-exports.analyticsEmojiPrefix = analyticsEmojiPrefix;
+var analyticsEmojiPrefix = 'atlassian.fabric.emoji.picker'; // This is the base sampling rate in Emoji
+
+exports.analyticsEmojiPrefix = analyticsEmojiPrefix;
+var SAMPLING_RATE_EMOJI_RENDERED_EXP = 0.05; // This rate is used in ResourceEmoji which will be used in stead of base sampling rate above
+
+exports.SAMPLING_RATE_EMOJI_RENDERED_EXP = SAMPLING_RATE_EMOJI_RENDERED_EXP;
+var SAMPLING_RATE_EMOJI_RENDERED_EXP_RESOURCEEMOJI = 0.1; // add more sampling rate in parent components like EmojiTypeAheadItem.
+
+exports.SAMPLING_RATE_EMOJI_RENDERED_EXP_RESOURCEEMOJI = SAMPLING_RATE_EMOJI_RENDERED_EXP_RESOURCEEMOJI;

package/dist/cjs/version.json

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

package/dist/es2019/api/EmojiResource.js

@@ -3,10 +3,12 @@ import { AbstractResource, utils as serviceUtils } from '@atlaskit/util-service-
 import { selectedToneStorageKey } from '../util/constants';
 import { isMediaEmoji, isPromise, toEmojiId } from '../util/type-helpers';
 import storageAvailable from '../util/storage-available';
+import { ProviderTypes } from '../types';
 import debug from '../util/logger';
 import EmojiLoader from './EmojiLoader';
 import EmojiRepository from './EmojiRepository';
 import SiteEmojiResource from './media/SiteEmojiResource';
+import { ufoExperiences } from '../util/analytics';
 
 /**
  * Checks if the emojiProvider can support uploading at a feature level.
@@ -38,6 +40,11 @@ export class EmojiResource extends AbstractResource {
     const emojiResponses = [];
     this.activeLoaders = config.providers.length;
     config.providers.forEach((provider, index) => {
+      const providerType = this.getProviderType(provider);
+      ufoExperiences['emoji-resource-fetched'].getInstance(providerType).start();
+      ufoExperiences['emoji-resource-fetched'].getInstance(providerType).addMetadata({
+        type: providerType
+      });
       const loader = new EmojiLoader(provider);
       const emojis = loader.loadEmoji();
       emojis.then(emojiResponse => {
@@ -46,11 +53,19 @@ export class EmojiResource extends AbstractResource {
         this.initSiteEmojiResource(emojiResponse, provider).then(() => {
           this.activeLoaders--;
           this.performRetries();
-          this.refreshLastFilter();
+          this.refreshLastFilter(); // if not site emoji it would still resolve
+          // TODO: improve the logic in future
+
+          ufoExperiences['emoji-resource-fetched'].getInstance(providerType).success();
         });
       }).catch(reason => {
         this.activeLoaders--;
         this.notifyError(reason);
+        ufoExperiences['emoji-resource-fetched'].getInstance(providerType).failure({
+          metadata: {
+            reason
+          }
+        });
       });
     });
 
@@ -63,6 +78,18 @@ export class EmojiResource extends AbstractResource {
     }
   }
 
+  getProviderType(provider) {
+    if (provider.url.includes('/site')) {
+      return ProviderTypes.SITE;
+    } else if (provider.url.includes('/standard')) {
+      return ProviderTypes.STANDARD;
+    } else if (provider.url.includes('/atlassian')) {
+      return ProviderTypes.ATLASSIAN;
+    }
+
+    return ProviderTypes.UNKNOWN;
+  }
+
   initEmojiRepository(emojiResponses) {
     let emojis = [];
     emojiResponses.forEach(emojiResponse => {

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

@@ -163,7 +163,11 @@ export default class SiteEmojiResource {
   }
 
   findEmoji(emojiId) {
-    const path = `../${emojiId.id}`;
+    if (!emojiId.id) {
+      return Promise.reject(false);
+    }
+
+    const path = `../${encodeURIComponent(emojiId.id)}`;
     return emojiRequest(this.siteServiceConfig, {
       path
     }).then(serviceResponse => {
@@ -186,7 +190,11 @@ export default class SiteEmojiResource {
       return Promise.reject(false);
     }
 
-    const path = `${emoji.id}`;
+    if (!emoji.id) {
+      return Promise.reject(false);
+    }
+
+    const path = `${encodeURIComponent(emoji.id)}`;
     const requestInit = {
       method: 'DELETE'
     };

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import PropTypes from 'prop-types';
 import React from 'react';
 import { PureComponent } from 'react';
 import { shouldUseAltRepresentation } from '../../api/EmojiUtils';
@@ -7,7 +8,9 @@ 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';
 
 /**
  * Renders an emoji from a cached image, if required.
@@ -18,13 +21,23 @@ export const CachingEmoji = props => {
   const {
     placeholderSize,
     ...emojiProps
-  } = props;
+  } = props; // start emoji rendered experience, it may have already started earlier in ResourcedEmoji
 
-  if (isMediaEmoji(props.emoji)) {
-    return /*#__PURE__*/React.createElement(CachingMediaEmoji, props);
-  }
+  useSampledUFOComponentExperience(ufoExperiences['emoji-rendered'].getInstance(emojiProps.emoji.id || emojiProps.emoji.shortName), SAMPLING_RATE_EMOJI_RENDERED_EXP, {
+    source: 'caching-emoji'
+  });
+
+  const emojiNode = () => {
+    if (isMediaEmoji(props.emoji)) {
+      return /*#__PURE__*/React.createElement(CachingMediaEmoji, props);
+    }
 
-  return /*#__PURE__*/React.createElement(Emoji, emojiProps);
+    return /*#__PURE__*/React.createElement(Emoji, emojiProps);
+  };
+
+  return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
+    experiences: [ufoExperiences['emoji-rendered'].getInstance(props.emoji.id || props.emoji.shortName)]
+  }, emojiNode());
 };
 /**
  * Rendering a media emoji image from a cache for media emoji, with different
@@ -33,7 +46,7 @@ export const CachingEmoji = props => {
 
 export class CachingMediaEmoji extends PureComponent {
   constructor(props, context) {
-    super(props);
+    super(props, context);
 
     _defineProperty(this, "mounted", false);
 
@@ -41,6 +54,11 @@ export class CachingMediaEmoji extends PureComponent {
       const {
         invalidImage
       } = this.state;
+      sampledUfoRenderedEmoji(_emojiId).failure({
+        metadata: {
+          reason: 'load error'
+        }
+      });
 
       if (invalidImage || !emoji) {
         // do nothing, bad image
@@ -59,6 +77,7 @@ export class CachingMediaEmoji extends PureComponent {
 
   componentDidMount() {
     this.mounted = true;
+    sampledUfoRenderedEmoji(this.props.emoji).markFMP();
   }
 
   componentWillUnmount() {
@@ -76,10 +95,6 @@ export class CachingMediaEmoji extends PureComponent {
   }
 
   loadEmoji(emoji, context, forceLoad) {
-    if (!context) {
-      return;
-    }
-
     if (!context.emoji) {
       return undefined;
     }
@@ -120,6 +135,11 @@ export class CachingMediaEmoji extends PureComponent {
             cachedEmoji: undefined,
             invalidImage: true
           });
+          sampledUfoRenderedEmoji(emoji).failure({
+            metadata: {
+              reason: 'failed to load media emoji'
+            }
+          });
         }
       });
       return undefined;
@@ -172,6 +192,8 @@ export class CachingMediaEmoji extends PureComponent {
 
 }
 
-_defineProperty(CachingMediaEmoji, "contextType", EmojiContext);
+_defineProperty(CachingMediaEmoji, "contextTypes", {
+  emoji: PropTypes.object
+});
 
 export default CachingEmoji;

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

@@ -1,15 +1,17 @@
+/** @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';
 
-const DeleteButton = props => /*#__PURE__*/React.createElement("span", {
-  className: styles.deleteButton
-}, /*#__PURE__*/React.createElement(Button, {
-  iconBefore: /*#__PURE__*/React.createElement(CrossCircleIcon, {
+const DeleteButton = props => jsx("span", {
+  css: deleteButton,
+  className: emojiDeleteButton
+}, jsx(Button, {
+  iconBefore: jsx(CrossCircleIcon, {
     label: deleteEmojiLabel,
     primaryColor: token('color.text.subtle', N500),
     size: "small"