@atlaskit/emoji 64.2.1 → 64.4.1

package/dist/cjs/components/typeahead/EmojiTypeAheadList.js

@@ -23,9 +23,9 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var _core = require("@emotion/core");
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -41,7 +41,7 @@ var _Scrollable = _interopRequireDefault(require("../common/Scrollable"));
 
 var _EmojiTypeAheadItem = _interopRequireDefault(require("./EmojiTypeAheadItem"));
 
-var styles = _interopRequireWildcard(require("./styles"));
+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); }
 
@@ -230,10 +230,9 @@ var EmojiTypeAheadList = /*#__PURE__*/function (_PureComponent) {
 
       if (emojis && emojis.length) {
         this.items = {};
-        return /*#__PURE__*/_react.default.createElement("div", null, emojis.map(function (emoji, idx) {
+        return (0, _core.jsx)("div", null, emojis.map(function (emoji, idx) {
           var key = getKey(emoji);
-
-          var item = /*#__PURE__*/_react.default.createElement(_EmojiTypeAheadItem.default, {
+          var item = (0, _core.jsx)(_EmojiTypeAheadItem.default, {
             emoji: emoji,
             key: key,
             selected: _this2.isSelectedEmoji(emoji, idx),
@@ -247,7 +246,6 @@ var EmojiTypeAheadList = /*#__PURE__*/function (_PureComponent) {
               }
             }
           });
-
           return item;
         }));
       }
@@ -263,34 +261,31 @@ var EmojiTypeAheadList = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _classNames;
-
       var _this$props2 = this.props,
           emojis = _this$props2.emojis,
           loading = _this$props2.loading;
       var hasEmoji = emojis && emojis.length;
-      var classes = (0, _classnames.default)((_classNames = {
-        'ak-emoji-typeahead-list': true
-      }, (0, _defineProperty2.default)(_classNames, styles.typeAheadList, true), (0, _defineProperty2.default)(_classNames, styles.typeAheadEmpty, !hasEmoji && !loading), _classNames));
+      var classes = [_styles.typeAheadList, !hasEmoji && !loading && _styles.typeAheadEmpty];
       var listBody;
 
       if (loading) {
-        listBody = /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.emojiTypeAheadSpinnerContainer
-        }, /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.emojiTypeAheadSpinner
-        }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
+        listBody = (0, _core.jsx)("div", {
+          css: _styles.emojiTypeAheadSpinnerContainer
+        }, (0, _core.jsx)("div", {
+          css: _styles.emojiTypeAheadSpinner
+        }, (0, _core.jsx)(_spinner.default, {
           size: "medium"
         })));
       } else {
         listBody = this.renderItems(emojis);
       }
 
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.typeAheadListContainer
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: classes
-      }, /*#__PURE__*/_react.default.createElement(_Scrollable.default, {
+      return (0, _core.jsx)("div", {
+        css: _styles.typeAheadListContainer
+      }, (0, _core.jsx)("div", {
+        className: 'ak-emoji-typeahead-list',
+        css: classes
+      }, (0, _core.jsx)(_Scrollable.default, {
         ref: this.handleScrollableRef,
         maxHeight: "".concat(_sharedStyles.emojiTypeAheadMaxHeight, "px")
       }, listBody)));

package/dist/cjs/components/typeahead/styles.js

@@ -1,27 +1,24 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.typeAheadListContainer = exports.typeAheadList = exports.typeAheadItemRow = exports.typeAheadItem = exports.typeAheadEmpty = exports.selected = exports.emojiTypeAheadSpinnerContainer = exports.emojiTypeAheadSpinner = exports.emojiTypeAhead = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+exports.typeaheadSelected = exports.typeAheadListContainer = exports.typeAheadList = exports.typeAheadItemRow = exports.typeAheadItem = exports.typeAheadEmpty = exports.selected = exports.emojiTypeAheadSpinnerContainer = exports.emojiTypeAheadSpinner = exports.emojiTypeAhead = void 0;
 
-var _typestyle = require("typestyle");
+var _core = require("@emotion/core");
 
 var _tokens = require("@atlaskit/tokens");
 
 var _sharedStyles = require("../../util/shared-styles");
 
-var selected = 'emoji-typeahead-selected';
-exports.selected = selected;
 var emojiTypeAhead = 'emoji-typeahead-element';
 exports.emojiTypeAhead = emojiTypeAhead;
-var typeAheadListContainer = 'emoji-typeahead-list-container';
+var typeAheadListContainer = 'emoji-typeahead-list-container'; // editor-core is using this static class name for testing
+
 exports.typeAheadListContainer = typeAheadListContainer;
-var typeAheadList = (0, _typestyle.style)({
+var typeaheadSelected = 'emoji-typeahead-selected';
+exports.typeaheadSelected = typeaheadSelected;
+var typeAheadList = (0, _core.css)({
   background: (0, _tokens.token)('elevation.surface.overlay', 'white'),
   border: "1px solid ".concat(_sharedStyles.noDialogContainerBorderColor),
   borderRadius: _sharedStyles.noDialogContainerBorderRadius,
@@ -30,36 +27,37 @@ var typeAheadList = (0, _typestyle.style)({
   width: _sharedStyles.emojiTypeAheadWidth
 });
 exports.typeAheadList = typeAheadList;
-var typeAheadEmpty = (0, _typestyle.style)({
+var typeAheadEmpty = (0, _core.css)({
   display: 'none'
 });
 exports.typeAheadEmpty = typeAheadEmpty;
-var typeAheadItem = (0, _typestyle.style)({
+var selected = (0, _core.css)({
+  backgroundColor: _sharedStyles.emojiPreviewSelectedColor
+});
+exports.selected = selected;
+var typeAheadItem = (0, _core.css)({
   cursor: 'pointer',
   display: 'block',
   listStyleType: 'none',
   overflow: 'hidden',
-  width: _sharedStyles.emojiTypeAheadWidth,
-  $nest: (0, _defineProperty2.default)({}, "&.".concat(selected), {
-    backgroundColor: _sharedStyles.emojiPreviewSelectedColor
-  })
+  width: _sharedStyles.emojiTypeAheadWidth
 });
 exports.typeAheadItem = typeAheadItem;
-var typeAheadItemRow = (0, _typestyle.style)({
+var typeAheadItemRow = (0, _core.css)({
   display: 'flex',
   flexDirection: 'row',
   flexWrap: 'wrap',
   verticalAlign: 'middle'
 });
 exports.typeAheadItemRow = typeAheadItemRow;
-var emojiTypeAheadSpinnerContainer = (0, _typestyle.style)({
+var emojiTypeAheadSpinnerContainer = (0, _core.css)({
   position: 'relative',
   height: "".concat(_sharedStyles.emojiTypeAheadMaxHeight, "px"),
   paddingTop: "".concat(((_sharedStyles.emojiTypeAheadMaxHeight - 30) / 2).toFixed(), "px"),
   boxSizing: 'border-box'
 });
 exports.emojiTypeAheadSpinnerContainer = emojiTypeAheadSpinnerContainer;
-var emojiTypeAheadSpinner = (0, _typestyle.style)({
+var emojiTypeAheadSpinner = (0, _core.css)({
   textAlign: 'center'
 });
 exports.emojiTypeAheadSpinner = emojiTypeAheadSpinner;

package/dist/cjs/components/uploader/EmojiUploadComponent.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,13 +21,11 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _reactIntlNext = require("react-intl-next");
+var _core = require("@emotion/core");
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
 
-var styles = _interopRequireWildcard(require("./styles"));
+var _reactIntlNext = require("react-intl-next");
 
 var _EmojiResource = require("../../api/EmojiResource");
 
@@ -39,9 +35,9 @@ var _UploadEmoji = require("../common/UploadEmoji");
 
 var _analytics = require("../../util/analytics");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _styles = require("./styles");
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _ufoExperiences = require("../../util/analytics/ufoExperiences");
 
 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); }; }
 
@@ -60,6 +56,12 @@ var EmojiUploadComponent = /*#__PURE__*/function (_PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onUploadEmoji", function (upload, retry) {
       var emojiProvider = _this.props.emojiProvider;
 
+      _ufoExperiences.ufoExperiences['emoji-uploaded'].start();
+
+      _ufoExperiences.ufoExperiences['emoji-uploaded'].addMetadata({
+        retry: retry
+      });
+
       _this.fireAnalytics((0, _analytics.uploadConfirmButton)({
         retry: retry
       }));
@@ -115,16 +117,21 @@ var EmojiUploadComponent = /*#__PURE__*/function (_PureComponent) {
   }
 
   (0, _createClass2.default)(EmojiUploadComponent, [{
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      _ufoExperiences.ufoExperiences['emoji-uploaded'].abort();
+    }
+  }, {
     key: "render",
     value: function render() {
       var uploadErrorMessage = this.state.uploadErrorMessage;
-      var errorMessage = uploadErrorMessage ? /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, uploadErrorMessage) : null;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)([styles.emojiUploadWidget]),
+      var errorMessage = uploadErrorMessage ? (0, _core.jsx)(_reactIntlNext.FormattedMessage, uploadErrorMessage) : null;
+      return (0, _core.jsx)("div", {
+        css: _styles.emojiUploadWidget,
         ref: this.props.onUploaderRef
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)([styles.emojiUploadFooter])
-      }, /*#__PURE__*/_react.default.createElement(_EmojiUploadPicker.default, {
+      }, (0, _core.jsx)("div", {
+        css: _styles.emojiUploadFooter
+      }, (0, _core.jsx)(_EmojiUploadPicker.default, {
         ref: this.onUploaderRef,
         onFileChooserClicked: this.onFileChooserClicked,
         onUploadCancelled: this.onUploadCancelled,

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

@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.emojiUploadWidget = exports.emojiUploadFooter = void 0;
 
-var _typestyle = require("typestyle");
-
 var _tokens = require("@atlaskit/tokens");
 
 var _constants = require("../../util/constants");
 
+var _core = require("@emotion/core");
+
 // Uploader
-var emojiUploadWidget = (0, _typestyle.style)({
+var emojiUploadWidget = (0, _core.css)({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'center',
@@ -27,7 +27,7 @@ var emojiUploadWidget = (0, _typestyle.style)({
 }); /// Footer
 
 exports.emojiUploadWidget = emojiUploadWidget;
-var emojiUploadFooter = (0, _typestyle.style)({
+var emojiUploadFooter = (0, _core.css)({
   flex: '0 0 auto'
 });
 exports.emojiUploadFooter = emojiUploadFooter;

package/dist/cjs/index.js

@@ -77,6 +77,18 @@ Object.defineProperty(exports, "SearchSort", {
     return _types.SearchSort;
   }
 });
+Object.defineProperty(exports, "UfoComponentName", {
+  enumerable: true,
+  get: function get() {
+    return _types.UfoComponentName;
+  }
+});
+Object.defineProperty(exports, "UfoExperienceName", {
+  enumerable: true,
+  get: function get() {
+    return _types.UfoExperienceName;
+  }
+});
 Object.defineProperty(exports, "UsageFrequencyTracker", {
   enumerable: true,
   get: function get() {
@@ -111,7 +123,7 @@ Object.defineProperty(exports, "emojiImage", {
 Object.defineProperty(exports, "emojiNode", {
   enumerable: true,
   get: function get() {
-    return _styles.emojiNode;
+    return _styles.emojiNodeStyles;
   }
 });
 Object.defineProperty(exports, "emojiPickerHeight", {
@@ -147,13 +159,13 @@ Object.defineProperty(exports, "recordSelectionSucceededSli", {
 Object.defineProperty(exports, "selectOnHover", {
   enumerable: true,
   get: function get() {
-    return _styles.selectOnHover;
+    return _styles.selectOnHoverStyles;
   }
 });
 Object.defineProperty(exports, "selected", {
   enumerable: true,
   get: function get() {
-    return _styles.selected;
+    return _styles.commonSelectedStyles;
   }
 });
 Object.defineProperty(exports, "toEmojiId", {
@@ -168,6 +180,12 @@ Object.defineProperty(exports, "toOptionalEmojiId", {
     return _typeHelpers.toOptionalEmojiId;
   }
 });
+Object.defineProperty(exports, "ufoExperiences", {
+  enumerable: true,
+  get: function get() {
+    return _analytics.ufoExperiences;
+  }
+});
 
 var _utilServiceSupport = require("@atlaskit/util-service-support");
 

package/dist/cjs/types.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SearchSort = exports.ProviderTypes = void 0;
+exports.UfoExperienceName = exports.UfoComponentName = exports.SearchSort = exports.ProviderTypes = void 0;
 
 /**
  * Minimum information to defined an emoji is the shortName.
@@ -51,4 +51,25 @@ exports.ProviderTypes = ProviderTypes;
   ProviderTypes["STANDARD"] = "STANDARD";
   ProviderTypes["ATLASSIAN"] = "ATLASSIAN";
   ProviderTypes["UNKNOWN"] = "UNKNOWN";
-})(ProviderTypes || (exports.ProviderTypes = ProviderTypes = {}));
+})(ProviderTypes || (exports.ProviderTypes = ProviderTypes = {}));
+
+var UfoExperienceName;
+exports.UfoExperienceName = 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 || (exports.UfoExperienceName = UfoExperienceName = {}));
+
+var UfoComponentName;
+exports.UfoComponentName = UfoComponentName;
+
+(function (UfoComponentName) {
+  UfoComponentName["EMOJI"] = "emoji";
+  UfoComponentName["EMOJI_PICKER"] = "emoji-picker";
+  UfoComponentName["EMOJI_PROVIDER"] = "emoji-provider";
+})(UfoComponentName || (exports.UfoComponentName = UfoComponentName = {}));

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.uploadSucceededEvent = exports.uploadFailedEvent = exports.uploadConfirmButton = exports.uploadCancelButton = exports.uploadBeginButton = exports.ufoExperiences = exports.typeaheadSelectedEvent = exports.typeaheadRenderedEvent = exports.typeaheadCancelledEvent = exports.toneSelectorOpenedEvent = exports.toneSelectorClosedEvent = exports.toneSelectedEvent = exports.selectedFileEvent = exports.sampledUfoRenderedEmoji = exports.recordSelectionSucceededSli = exports.recordSelectionFailedSli = exports.pickerSearchedEvent = exports.pickerClickedEvent = exports.openedPickerEvent = exports.insertionSucceeded = exports.insertionFailed = exports.deleteConfirmEvent = exports.deleteCancelEvent = exports.deleteBeginEvent = exports.createAndFireEventInElementsChannel = exports.closedPickerEvent = exports.categoryClickedEvent = void 0;
+exports.uploadSucceededEvent = exports.uploadFailedEvent = exports.uploadConfirmButton = exports.uploadCancelButton = exports.uploadBeginButton = exports.typeaheadSelectedEvent = exports.typeaheadRenderedEvent = exports.typeaheadCancelledEvent = exports.toneSelectorOpenedEvent = exports.toneSelectorClosedEvent = exports.toneSelectedEvent = exports.selectedFileEvent = exports.recordSucceeded = exports.recordSelectionSucceededSli = exports.recordSelectionFailedSli = exports.recordFailed = exports.pickerSearchedEvent = exports.pickerClickedEvent = exports.openedPickerEvent = exports.deleteConfirmEvent = exports.deleteCancelEvent = exports.deleteBeginEvent = exports.createAndFireEventInElementsChannel = exports.closedPickerEvent = exports.categoryClickedEvent = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -13,10 +13,6 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _version = require("../../version.json");
 
-var _ufo = require("@atlaskit/ufo");
-
-var _samplingUfo = require("./samplingUfo");
-
 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); }
@@ -27,34 +23,6 @@ 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) { (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; }
 
-var createRenderExperience = function createRenderExperience(componentName) {
-  return {
-    platform: {
-      component: componentName
-    },
-    type: _ufo.ExperienceTypes.Load,
-    performanceType: _ufo.ExperiencePerformanceTypes.PageSegmentLoad
-  };
-}; // const createInlineExperience = (componentName: string) => {
-//   return {
-//     platform: { component: componentName },
-//     type: ExperienceTypes.Experience,
-//     performanceType: 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'))
-};
-exports.ufoExperiences = ufoExperiences;
-
-var sampledUfoRenderedEmoji = function sampledUfoRenderedEmoji(emojiId) {
-  return (0, _samplingUfo.withSampling)(ufoExperiences['emoji-rendered'].getInstance(emojiId.id || emojiId.shortName));
-};
-
-exports.sampledUfoRenderedEmoji = sampledUfoRenderedEmoji;
 var createAndFireEventInElementsChannel = (0, _analyticsNext.createAndFireEvent)('fabric-elements');
 exports.createAndFireEventInElementsChannel = createAndFireEventInElementsChannel;
 
@@ -72,21 +40,21 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
   };
 };
 
-var insertionSucceeded = function insertionSucceeded(source) {
+var recordSucceeded = function recordSucceeded(source) {
   return createEvent('operational', 'succeeded', 'recordEmojiSelection', undefined, {
     source: source
   });
 };
 
-exports.insertionSucceeded = insertionSucceeded;
+exports.recordSucceeded = recordSucceeded;
 
-var insertionFailed = function insertionFailed(source) {
+var recordFailed = function recordFailed(source) {
   return createEvent('operational', 'failed', 'recordEmojiSelection', undefined, {
     source: source
   });
 };
 
-exports.insertionFailed = insertionFailed;
+exports.recordFailed = recordFailed;
 
 var emojiPickerEvent = function emojiPickerEvent(action) {
   var attributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -296,24 +264,26 @@ var typeaheadRenderedEvent = function typeaheadRenderedEvent(duration, query, em
   return createEvent('operational', 'rendered', 'emojiTypeahead', undefined, _objectSpread({
     duration: duration
   }, extractCommonAttributes(query, emojiList)));
-};
+}; // it's used in editor typeahead to fire success record analytics
+
 
 exports.typeaheadRenderedEvent = typeaheadRenderedEvent;
 
 var recordSelectionSucceededSli = function recordSelectionSucceededSli(options) {
   return function () {
     if (options && options.createAnalyticsEvent) {
-      (0, _analyticsNext.createAndFireEvent)('editor')(insertionSucceeded('typeahead'))(options.createAnalyticsEvent);
+      (0, _analyticsNext.createAndFireEvent)('editor')(recordSucceeded('typeahead'))(options.createAnalyticsEvent);
     }
   };
-};
+}; // it's used in editor typeahead to fire failure record analytics
+
 
 exports.recordSelectionSucceededSli = recordSelectionSucceededSli;
 
 var recordSelectionFailedSli = function recordSelectionFailedSli(options) {
   return function (err) {
     if (options && options.createAnalyticsEvent) {
-      (0, _analyticsNext.createAndFireEvent)('editor')(insertionFailed('typeahead'))(options.createAnalyticsEvent);
+      (0, _analyticsNext.createAndFireEvent)('editor')(recordFailed('typeahead'))(options.createAnalyticsEvent);
     }
 
     return Promise.reject(err);

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

@@ -45,18 +45,6 @@ Object.defineProperty(exports, "deleteConfirmEvent", {
     return _analytics.deleteConfirmEvent;
   }
 });
-Object.defineProperty(exports, "insertionFailed", {
-  enumerable: true,
-  get: function get() {
-    return _analytics.insertionFailed;
-  }
-});
-Object.defineProperty(exports, "insertionSucceeded", {
-  enumerable: true,
-  get: function get() {
-    return _analytics.insertionSucceeded;
-  }
-});
 Object.defineProperty(exports, "isExperienceSampled", {
   enumerable: true,
   get: function get() {
@@ -81,6 +69,12 @@ Object.defineProperty(exports, "pickerSearchedEvent", {
     return _analytics.pickerSearchedEvent;
   }
 });
+Object.defineProperty(exports, "recordFailed", {
+  enumerable: true,
+  get: function get() {
+    return _analytics.recordFailed;
+  }
+});
 Object.defineProperty(exports, "recordSelectionFailedSli", {
   enumerable: true,
   get: function get() {
@@ -93,10 +87,16 @@ Object.defineProperty(exports, "recordSelectionSucceededSli", {
     return _analytics.recordSelectionSucceededSli;
   }
 });
+Object.defineProperty(exports, "recordSucceeded", {
+  enumerable: true,
+  get: function get() {
+    return _analytics.recordSucceeded;
+  }
+});
 Object.defineProperty(exports, "sampledUfoRenderedEmoji", {
   enumerable: true,
   get: function get() {
-    return _analytics.sampledUfoRenderedEmoji;
+    return _ufoExperiences.sampledUfoRenderedEmoji;
   }
 });
 Object.defineProperty(exports, "selectedFileEvent", {
@@ -144,7 +144,7 @@ Object.defineProperty(exports, "typeaheadSelectedEvent", {
 Object.defineProperty(exports, "ufoExperiences", {
   enumerable: true,
   get: function get() {
-    return _analytics.ufoExperiences;
+    return _ufoExperiences.ufoExperiences;
   }
 });
 Object.defineProperty(exports, "ufoExperiencesSampled", {
@@ -200,4 +200,6 @@ var _samplingUfo = require("./samplingUfo");
 
 var _analytics = require("./analytics");
 
+var _ufoExperiences = require("./ufoExperiences");
+
 var _useSampledUFOComponentExperience = require("./useSampledUFOComponentExperience");

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

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ufoExperiences = exports.sampledUfoRenderedEmoji = void 0;
+
+var _types = require("../../types");
+
+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(_types.UfoExperienceName.EMOJI_RENDERED, createRenderExperience(_types.UfoComponentName.EMOJI)),
+  'emoji-resource-fetched': new _ufo.ConcurrentExperience(_types.UfoExperienceName.EMOJI_RESOURCE_FETCHED, createRenderExperience(_types.UfoComponentName.EMOJI_PROVIDER)),
+  'emoji-picker-opened': new _ufo.UFOExperience(_types.UfoExperienceName.EMOJI_PICKER_OPENED, createRenderExperience(_types.UfoComponentName.EMOJI_PICKER)),
+  'emoji-selection-recorded': new _ufo.UFOExperience(_types.UfoExperienceName.EMOJI_SELECTION_RECORDED, createInlineExperience(_types.UfoComponentName.EMOJI_PROVIDER)),
+  'emoji-uploaded': new _ufo.UFOExperience(_types.UfoExperienceName.EMOJI_UPLOADED, createInlineExperience(_types.UfoComponentName.EMOJI_PICKER)),
+  'emoji-searched': new _ufo.UFOExperience(_types.UfoExperienceName.EMOJI_SEARCHED, createInlineExperience(_types.UfoComponentName.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/version.json

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

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