@atlaskit/emoji 64.3.0 → 64.5.0

package/dist/cjs/context/LegacyEmojiContextProvider.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _EmojiContextProvider = require("./EmojiContextProvider");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+/**
+ * Legacy Context Priority Passthrough ...
+ * If component finds legacy context, then use it, otherwise use the passed through context
+ */
+var LegacyEmojiContextProvider = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(LegacyEmojiContextProvider, _Component);
+
+  var _super = _createSuper(LegacyEmojiContextProvider);
+
+  function LegacyEmojiContextProvider(props, context) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, LegacyEmojiContextProvider);
+    _this = _super.call(this, props, context);
+    _this.state = {
+      prioritisedContextValue: context.emoji ? context : _this.props.emojiContextValue
+    };
+    return _this;
+  }
+
+  (0, _createClass2.default)(LegacyEmojiContextProvider, [{
+    key: "render",
+    value: function render() {
+      if (this.state.prioritisedContextValue) {
+        return /*#__PURE__*/_react.default.createElement(_EmojiContextProvider.EmojiContextProvider, {
+          emojiContextValue: this.state.prioritisedContextValue
+        }, this.props.children);
+      }
+
+      return this.props.children;
+    }
+  }]);
+  return LegacyEmojiContextProvider;
+}(_react.Component);
+
+exports.default = LegacyEmojiContextProvider;
+(0, _defineProperty2.default)(LegacyEmojiContextProvider, "contextTypes", {
+  emoji: _propTypes.default.object
+});

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() {
@@ -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.3.0",
+	"version": "64.5.0",
 	"sideEffects": false
 }

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

@@ -1,6 +1,5 @@
 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';
@@ -11,6 +10,7 @@ import EmojiPlaceholder from './EmojiPlaceholder';
 import { UfoErrorBoundary } from './UfoErrorBoundary';
 import { sampledUfoRenderedEmoji, ufoExperiences, useSampledUFOComponentExperience } from '../../util/analytics';
 import { SAMPLING_RATE_EMOJI_RENDERED_EXP } from '../../util/constants';
+import { EmojiContext } from '../../context/EmojiContext';
 
 /**
  * Renders an emoji from a cached image, if required.
@@ -46,7 +46,7 @@ export const CachingEmoji = props => {
 
 export class CachingMediaEmoji extends PureComponent {
   constructor(props, context) {
-    super(props, context);
+    super(props);
 
     _defineProperty(this, "mounted", false);
 
@@ -95,6 +95,10 @@ export class CachingMediaEmoji extends PureComponent {
   }
 
   loadEmoji(emoji, context, forceLoad) {
+    if (!context) {
+      return;
+    }
+
     if (!context.emoji) {
       return undefined;
     }
@@ -192,8 +196,6 @@ export class CachingMediaEmoji extends PureComponent {
 
 }
 
-_defineProperty(CachingMediaEmoji, "contextTypes", {
-  emoji: PropTypes.object
-});
+_defineProperty(CachingMediaEmoji, "contextType", EmojiContext);
 
 export default CachingEmoji;

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

@@ -1,4 +1,4 @@
-import { insertionFailed, insertionSucceeded } from '../../util/analytics';
+import { recordFailed, recordSucceeded, ufoExperiences } from '../../util/analytics';
 
 /**
  * A function that will wrap any configured Emoji 'onSelection' function to ensure recordSelection is always
@@ -12,7 +12,14 @@ export const createRecordSelectionDefault = (provider, onSelect, fireAnalytics)
   return (emojiId, emoji, event) => {
     try {
       if (provider.recordSelection && emoji) {
-        provider.recordSelection(emoji).then(() => fireAnalytics && fireAnalytics(insertionSucceeded)).catch(() => fireAnalytics && fireAnalytics(insertionFailed));
+        ufoExperiences['emoji-selection-recorded'].start();
+        provider.recordSelection(emoji).then(() => {
+          fireAnalytics && fireAnalytics(recordSucceeded);
+          ufoExperiences['emoji-selection-recorded'].success();
+        }).catch(() => {
+          fireAnalytics && fireAnalytics(recordFailed);
+          ufoExperiences['emoji-selection-recorded'].failure();
+        });
       }
     } finally {
       if (onSelect) {

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

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Component } from 'react';
 import { defaultEmojiHeight } from '../../util/constants';
@@ -7,6 +6,7 @@ import { isPromise } from '../../util/type-helpers';
 import CachingEmoji from './CachingEmoji';
 import EmojiPlaceholder from './EmojiPlaceholder';
 import { sampledUfoRenderedEmoji } from '../../util/analytics';
+import LegacyEmojiContextProvider from '../../context/LegacyEmojiContextProvider';
 export default class ResourcedEmojiComponent extends Component {
   constructor(props) {
     super(props);
@@ -19,14 +19,6 @@ export default class ResourcedEmojiComponent extends Component {
     };
   }
 
-  getChildContext() {
-    return {
-      emoji: {
-        emojiProvider: this.props.emojiProvider
-      }
-    };
-  }
-
   refreshEmoji(emojiProvider, emojiId) {
     const foundEmoji = emojiProvider.findByEmojiId(emojiId);
 
@@ -126,15 +118,18 @@ export default class ResourcedEmojiComponent extends Component {
       id,
       fallback
     } = this.props.emojiId;
-    return /*#__PURE__*/React.createElement("span", {
+    const emojiContextValue = {
+      emoji: {
+        emojiProvider: this.props.emojiProvider
+      }
+    };
+    return /*#__PURE__*/React.createElement(LegacyEmojiContextProvider, {
+      emojiContextValue: emojiContextValue
+    }, /*#__PURE__*/React.createElement("span", {
       "data-emoji-id": id,
       "data-emoji-short-name": shortName,
       "data-emoji-text": fallback || shortName
-    }, element);
+    }, element));
   }
 
-}
-
-_defineProperty(ResourcedEmojiComponent, "childContextTypes", {
-  emoji: PropTypes.object
-});
+}

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

@@ -1,16 +1,19 @@
 import { supportsUploadFeature } from '../../api/EmojiResource';
 import { uploadFailedEvent, uploadSucceededEvent } from '../../util/analytics';
 import { messages } from '../i18n';
+import { ufoExperiences } from '../../util/analytics/ufoExperiences';
 export const uploadEmoji = (upload, emojiProvider, errorSetter, onSuccess, fireAnalytics) => {
   const startTime = Date.now();
   errorSetter(undefined);
 
   if (supportsUploadFeature(emojiProvider)) {
+    ufoExperiences['emoji-uploaded'].start();
     emojiProvider.uploadCustomEmoji(upload).then(emojiDescription => {
       fireAnalytics(uploadSucceededEvent({
         duration: Date.now() - startTime
       }));
       onSuccess(emojiDescription);
+      ufoExperiences['emoji-uploaded'].success();
     }).catch(err => {
       errorSetter(messages.emojiUploadFailed); // eslint-disable-next-line no-console
 
@@ -19,6 +22,7 @@ export const uploadEmoji = (upload, emojiProvider, errorSetter, onSuccess, fireA
         duration: Date.now() - startTime,
         reason: messages.emojiUploadFailed.defaultMessage
       }));
+      ufoExperiences['emoji-uploaded'].failure();
     });
   }
 };

package/dist/es2019/components/picker/EmojiPicker.js

@@ -4,9 +4,11 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { ufoExperiences } from '../../util/analytics';
 import LoadingEmojiComponent from '../common/LoadingEmojiComponent';
 import { LoadingItem } from './EmojiPickerVirtualItems';
 import { emojiPicker } from './styles';
+import { UfoErrorBoundary } from '../common/UfoErrorBoundary';
 
 const emojiPickerModuleLoader = () => import(
 /* webpackChunkName:"@atlaskit-internal_emojiPickerComponent" */
@@ -23,6 +25,8 @@ export class EmojiPickerInternal extends LoadingEmojiComponent {
     _defineProperty(this, "state", {
       asyncLoadedComponent: EmojiPickerInternal.AsyncLoadedComponent
     });
+
+    ufoExperiences['emoji-picker-opened'].start();
   }
 
   asyncLoadComponent() {
@@ -41,6 +45,7 @@ export class EmojiPickerInternal extends LoadingEmojiComponent {
       }
     };
 
+    ufoExperiences['emoji-picker-opened'].markFMP();
     return jsx("div", {
       css: emojiPicker,
       ref: handlePickerRef
@@ -52,9 +57,11 @@ export class EmojiPickerInternal extends LoadingEmojiComponent {
       emojiProvider,
       ...otherProps
     } = this.props;
-    return jsx(EmojiPickerComponent, _extends({
+    return jsx(UfoErrorBoundary, {
+      experiences: [ufoExperiences['emoji-picker-opened']]
+    }, jsx(EmojiPickerComponent, _extends({
       emojiProvider: loadedEmojiProvider
-    }, otherProps));
+    }, otherProps)));
   }
 
 }