@atlaskit/emoji 64.3.0 → 64.5.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/emoji
 
+## 64.5.0
+
+### Minor Changes
+
+- [`fcb3b3f77e2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fcb3b3f77e2) - Context Provider to convert legacy providers to non legacy providers
+
+### Patch Changes
+
+- Updated dependencies
+
+## 64.4.1
+
+### Patch Changes
+
+- [`15f783a5684`](https://bitbucket.org/atlassian/atlassian-frontend/commits/15f783a5684) - export ufo experience name and ufo component name, update component name for emoji recorded experience
+
+## 64.4.0
+
+### Minor Changes
+
+- [`39031597fa1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/39031597fa1) - added more UFO experiences support
+
 ## 64.3.0
 
 ### Minor Changes

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

@@ -27,8 +27,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _EmojiUtils = require("../../api/EmojiUtils");
@@ -47,6 +45,8 @@ var _analytics = require("../../util/analytics");
 
 var _constants = require("../../util/constants");
 
+var _EmojiContext = require("../../context/EmojiContext");
+
 var _excluded = ["placeholderSize"],
     _excluded2 = ["children", "placeholderSize"];
 
@@ -100,7 +100,7 @@ var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
     var _this;
 
     (0, _classCallCheck2.default)(this, CachingMediaEmoji);
-    _this = _super.call(this, props, context);
+    _this = _super.call(this, props);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "mounted", false);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleLoadError", function (_emojiId, emoji) {
       var invalidImage = _this.state.invalidImage;
@@ -152,6 +152,10 @@ var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
     value: function loadEmoji(emoji, context, forceLoad) {
       var _this2 = this;
 
+      if (!context) {
+        return;
+      }
+
       if (!context.emoji) {
         return undefined;
       }
@@ -243,8 +247,6 @@ var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
 }(_react.PureComponent);
 
 exports.CachingMediaEmoji = CachingMediaEmoji;
-(0, _defineProperty2.default)(CachingMediaEmoji, "contextTypes", {
-  emoji: _propTypes.default.object
-});
+(0, _defineProperty2.default)(CachingMediaEmoji, "contextType", _EmojiContext.EmojiContext);
 var _default = CachingEmoji;
 exports.default = _default;

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

@@ -19,10 +19,16 @@ var createRecordSelectionDefault = function createRecordSelectionDefault(provide
   return function (emojiId, emoji, event) {
     try {
       if (provider.recordSelection && emoji) {
+        _analytics.ufoExperiences['emoji-selection-recorded'].start();
+
         provider.recordSelection(emoji).then(function () {
-          return fireAnalytics && fireAnalytics(_analytics.insertionSucceeded);
+          fireAnalytics && fireAnalytics(_analytics.recordSucceeded);
+
+          _analytics.ufoExperiences['emoji-selection-recorded'].success();
         }).catch(function () {
-          return fireAnalytics && fireAnalytics(_analytics.insertionFailed);
+          fireAnalytics && fireAnalytics(_analytics.recordFailed);
+
+          _analytics.ufoExperiences['emoji-selection-recorded'].failure();
         });
       }
     } finally {

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

@@ -23,8 +23,6 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _constants = require("../../util/constants");
@@ -37,6 +35,8 @@ var _EmojiPlaceholder = _interopRequireDefault(require("./EmojiPlaceholder"));
 
 var _analytics = require("../../util/analytics");
 
+var _LegacyEmojiContextProvider = _interopRequireDefault(require("../../context/LegacyEmojiContextProvider"));
+
 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; }
@@ -64,15 +64,6 @@ var ResourcedEmojiComponent = /*#__PURE__*/function (_Component) {
   }
 
   (0, _createClass2.default)(ResourcedEmojiComponent, [{
-    key: "getChildContext",
-    value: function getChildContext() {
-      return {
-        emoji: {
-          emojiProvider: this.props.emojiProvider
-        }
-      };
-    }
-  }, {
     key: "refreshEmoji",
     value: function refreshEmoji(emojiProvider, emojiId) {
       var _this2 = this;
@@ -176,17 +167,21 @@ var ResourcedEmojiComponent = /*#__PURE__*/function (_Component) {
           shortName = _this$props$emojiId.shortName,
           id = _this$props$emojiId.id,
           fallback = _this$props$emojiId.fallback;
-      return /*#__PURE__*/_react.default.createElement("span", {
+      var emojiContextValue = {
+        emoji: {
+          emojiProvider: this.props.emojiProvider
+        }
+      };
+      return /*#__PURE__*/_react.default.createElement(_LegacyEmojiContextProvider.default, {
+        emojiContextValue: emojiContextValue
+      }, /*#__PURE__*/_react.default.createElement("span", {
         "data-emoji-id": id,
         "data-emoji-short-name": shortName,
         "data-emoji-text": fallback || shortName
-      }, element);
+      }, element));
     }
   }]);
   return ResourcedEmojiComponent;
 }(_react.Component);
 
-exports.default = ResourcedEmojiComponent;
-(0, _defineProperty2.default)(ResourcedEmojiComponent, "childContextTypes", {
-  emoji: _propTypes.default.object
-});
+exports.default = ResourcedEmojiComponent;

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

@@ -11,16 +11,22 @@ var _analytics = require("../../util/analytics");
 
 var _i18n = require("../i18n");
 
+var _ufoExperiences = require("../../util/analytics/ufoExperiences");
+
 var uploadEmoji = function uploadEmoji(upload, emojiProvider, errorSetter, onSuccess, fireAnalytics) {
   var startTime = Date.now();
   errorSetter(undefined);
 
   if ((0, _EmojiResource.supportsUploadFeature)(emojiProvider)) {
+    _ufoExperiences.ufoExperiences['emoji-uploaded'].start();
+
     emojiProvider.uploadCustomEmoji(upload).then(function (emojiDescription) {
       fireAnalytics((0, _analytics.uploadSucceededEvent)({
         duration: Date.now() - startTime
       }));
       onSuccess(emojiDescription);
+
+      _ufoExperiences.ufoExperiences['emoji-uploaded'].success();
     }).catch(function (err) {
       errorSetter(_i18n.messages.emojiUploadFailed); // eslint-disable-next-line no-console
 
@@ -29,6 +35,8 @@ var uploadEmoji = function uploadEmoji(upload, emojiProvider, errorSetter, onSuc
         duration: Date.now() - startTime,
         reason: _i18n.messages.emojiUploadFailed.defaultMessage
       }));
+
+      _ufoExperiences.ufoExperiences['emoji-uploaded'].failure();
     });
   }
 };

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

@@ -31,12 +31,16 @@ var _core = require("@emotion/core");
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
+var _analytics = require("../../util/analytics");
+
 var _LoadingEmojiComponent = _interopRequireDefault(require("../common/LoadingEmojiComponent"));
 
 var _EmojiPickerVirtualItems = require("./EmojiPickerVirtualItems");
 
 var _styles = require("./styles");
 
+var _UfoErrorBoundary = require("../common/UfoErrorBoundary");
+
 var _excluded = ["emojiProvider"];
 
 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); }; }
@@ -74,6 +78,9 @@ var EmojiPickerInternal = /*#__PURE__*/function (_LoadingEmojiComponen) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       asyncLoadedComponent: EmojiPickerInternal.AsyncLoadedComponent
     });
+
+    _analytics.ufoExperiences['emoji-picker-opened'].start();
+
     return _this;
   }
 
@@ -101,6 +108,8 @@ var EmojiPickerInternal = /*#__PURE__*/function (_LoadingEmojiComponen) {
         }
       };
 
+      _analytics.ufoExperiences['emoji-picker-opened'].markFMP();
+
       return (0, _core.jsx)("div", {
         css: _styles.emojiPicker,
         ref: handlePickerRef
@@ -112,9 +121,11 @@ var EmojiPickerInternal = /*#__PURE__*/function (_LoadingEmojiComponen) {
       var _this$props = this.props,
           emojiProvider = _this$props.emojiProvider,
           otherProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
-      return (0, _core.jsx)(EmojiPickerComponent, (0, _extends2.default)({
+      return (0, _core.jsx)(_UfoErrorBoundary.UfoErrorBoundary, {
+        experiences: [_analytics.ufoExperiences['emoji-picker-opened']]
+      }, (0, _core.jsx)(EmojiPickerComponent, (0, _extends2.default)({
         emojiProvider: loadedEmojiProvider
-      }, otherProps));
+      }, otherProps)));
     }
   }]);
   return EmojiPickerInternal;

package/dist/cjs/components/picker/EmojiPickerComponent.js

@@ -25,8 +25,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _core = require("@emotion/core");
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = require("react");
 
 var _reactIntlNext = require("react-intl-next");
@@ -57,6 +55,8 @@ var _analytics = require("../../util/analytics");
 
 var _styles = require("./styles");
 
+var _LegacyEmojiContextProvider = _interopRequireDefault(require("../../context/LegacyEmojiContextProvider"));
+
 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; }
@@ -146,9 +146,20 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSearch", function (query) {
-      _this.updateEmojis(query, {
+      var options = {
         skinTone: _this.state.selectedTone
-      });
+      };
+
+      if (query !== _this.state.query) {
+        _analytics.ufoExperiences['emoji-searched'].start();
+
+        _analytics.ufoExperiences['emoji-searched'].addMetadata({
+          queryLength: query.length,
+          source: 'picker'
+        });
+      }
+
+      _this.updateEmojis(query, options);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSearchResult", function (searchResults) {
       var frequentlyUsedEmoji = _this.state.frequentlyUsedEmojis || [];
@@ -161,6 +172,12 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
           queryLength: searchQuery.length,
           numMatches: emojiToRender.length
         }));
+
+        _analytics.ufoExperiences['emoji-searched'].success({
+          metadata: {
+            emojisLength: emojiToRender.length
+          }
+        });
       }
 
       _this.setStateAfterEmojiChange(searchQuery, emojiToRender, searchResults.emojis, frequentlyUsedEmoji);
@@ -366,15 +383,6 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
   }
 
   (0, _createClass2.default)(EmojiPickerComponent, [{
-    key: "getChildContext",
-    value: function getChildContext() {
-      return {
-        emoji: {
-          emojiProvider: this.props.emojiProvider
-        }
-      };
-    }
-  }, {
     key: "UNSAFE_componentWillMount",
     value: function UNSAFE_componentWillMount() {
       this.openTime = Date.now();
@@ -385,6 +393,8 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
     value: function componentDidMount() {
       var _this2 = this;
 
+      _analytics.ufoExperiences['emoji-picker-opened'].success();
+
       var _this$props = this.props,
           emojiProvider = _this$props.emojiProvider,
           hideToneSelector = _this$props.hideToneSelector;
@@ -419,6 +429,12 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
       this.fireAnalytics((0, _analytics.closedPickerEvent)({
         duration: this.calculateElapsedTime()
       }));
+
+      _analytics.ufoExperiences['emoji-picker-opened'].abort();
+
+      _analytics.ufoExperiences['emoji-searched'].abort();
+
+      _analytics.ufoExperiences['emoji-selection-recorded'].abort();
     }
   }, {
     key: "UNSAFE_componentWillReceiveProps",
@@ -545,7 +561,14 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
         return _this4.fireAnalytics(analytic('picker'));
       });
       var formattedErrorMessage = uploadErrorMessage ? (0, _core.jsx)(_reactIntlNext.FormattedMessage, uploadErrorMessage) : null;
-      var picker = (0, _core.jsx)("div", {
+      var emojiContextValue = {
+        emoji: {
+          emojiProvider: this.props.emojiProvider
+        }
+      };
+      var picker = (0, _core.jsx)(_LegacyEmojiContextProvider.default, {
+        emojiContextValue: emojiContextValue
+      }, (0, _core.jsx)("div", {
         css: _styles.emojiPicker,
         ref: this.handlePickerRef,
         "data-emoji-picker-container": true
@@ -583,7 +606,7 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
       }), (0, _core.jsx)(_EmojiPickerFooter.default, {
         selectedEmoji: selectedEmoji,
         isUploading: uploading
-      }));
+      })));
       return picker;
     }
   }]);
@@ -591,9 +614,6 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
 }(_react.PureComponent);
 
 exports.default = EmojiPickerComponent;
-(0, _defineProperty2.default)(EmojiPickerComponent, "childContextTypes", {
-  emoji: _propTypes.default.object
-});
 (0, _defineProperty2.default)(EmojiPickerComponent, "defaultProps", {
   onSelection: function onSelection() {}
 });

package/dist/cjs/components/picker/EmojiPickerList.js

@@ -27,8 +27,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _core = require("@emotion/core");
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _List = require("react-virtualized/dist/commonjs/List");
@@ -51,10 +49,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 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 _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; } }
@@ -250,14 +244,6 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
   }
 
   (0, _createClass2.default)(EmojiPickerVirtualList, [{
-    key: "getChildContext",
-    value: function getChildContext() {
-      var emoji = this.context.emoji;
-      return {
-        emoji: _objectSpread({}, emoji)
-      };
-    }
-  }, {
     key: "UNSAFE_componentWillUpdate",
     value: function UNSAFE_componentWillUpdate(nextProps, nextState) {
       if (this.props.emojis !== nextProps.emojis || this.props.selectedTone !== nextProps.selectedTone || this.props.loading !== nextProps.loading || this.props.query !== nextProps.query) {
@@ -345,12 +331,6 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
 }(_react.PureComponent);
 
 exports.default = EmojiPickerVirtualList;
-(0, _defineProperty2.default)(EmojiPickerVirtualList, "contextTypes", {
-  emoji: _propTypes.default.object
-});
-(0, _defineProperty2.default)(EmojiPickerVirtualList, "childContextTypes", {
-  emoji: _propTypes.default.object
-});
 (0, _defineProperty2.default)(EmojiPickerVirtualList, "defaultProps", {
   onEmojiSelected: function onEmojiSelected() {},
   onEmojiActive: function onEmojiActive() {},

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

@@ -25,8 +25,6 @@ var _core = require("@emotion/core");
 
 var _uuid = _interopRequireDefault(require("uuid"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = require("react");
 
 var _constants = require("../../util/constants");
@@ -45,6 +43,8 @@ var _EmojiTypeAheadList = _interopRequireDefault(require("./EmojiTypeAheadList")
 
 var _styles = require("./styles");
 
+var _LegacyEmojiContextProvider = _interopRequireDefault(require("../../context/LegacyEmojiContextProvider"));
+
 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; } }
@@ -139,6 +139,12 @@ var EmojiTypeAheadComponent = /*#__PURE__*/function (_PureComponent) {
 
       _this.fireAnalyticsEvent((0, _analytics.typeaheadRenderedEvent)(Date.now() - _this.renderStartTime, query, emojis));
 
+      _analytics.ufoExperiences['emoji-searched'].success({
+        metadata: {
+          emojisLength: emojis.length
+        }
+      });
+
       (0, _logger.default)('emoji-typeahead.applyPropChanges', emojis.length, wasVisible, visible);
 
       _this.setState({
@@ -199,15 +205,6 @@ var EmojiTypeAheadComponent = /*#__PURE__*/function (_PureComponent) {
   }
 
   (0, _createClass2.default)(EmojiTypeAheadComponent, [{
-    key: "getChildContext",
-    value: function getChildContext() {
-      return {
-        emoji: {
-          emojiProvider: this.props.emojiProvider
-        }
-      };
-    }
-  }, {
     key: "componentDidMount",
     value: function componentDidMount() {
       var emojiProvider = this.props.emojiProvider;
@@ -227,6 +224,10 @@ var EmojiTypeAheadComponent = /*#__PURE__*/function (_PureComponent) {
         this.fireAnalyticsEvent((0, _analytics.typeaheadCancelledEvent)(Date.now() - this.openTime, query, emojis));
       }
 
+      _analytics.ufoExperiences['emoji-searched'].abort();
+
+      _analytics.ufoExperiences['emoji-selection-recorded'].abort();
+
       this.sessionId = (0, _uuid.default)();
       this.selected = false;
     }
@@ -272,6 +273,13 @@ var EmojiTypeAheadComponent = /*#__PURE__*/function (_PureComponent) {
         options.sort = _types.SearchSort.UsageFrequency;
       }
 
+      _analytics.ufoExperiences['emoji-searched'].start();
+
+      _analytics.ufoExperiences['emoji-searched'].addMetadata({
+        queryLength: (query === null || query === void 0 ? void 0 : query.length) || 0,
+        source: 'typeahead'
+      });
+
       this.renderStartTime = Date.now();
       emojiProvider.filter(query, options);
     }
@@ -307,7 +315,14 @@ var EmojiTypeAheadComponent = /*#__PURE__*/function (_PureComponent) {
       var style = {
         display: visible ? 'block' : 'none'
       };
-      return (0, _core.jsx)("div", {
+      var emojiContextValue = {
+        emoji: {
+          emojiProvider: this.props.emojiProvider
+        }
+      };
+      return (0, _core.jsx)(_LegacyEmojiContextProvider.default, {
+        emojiContextValue: emojiContextValue
+      }, (0, _core.jsx)("div", {
         style: style,
         className: 'ak-emoji-typeahead',
         css: _styles.emojiTypeAhead
@@ -316,16 +331,13 @@ var EmojiTypeAheadComponent = /*#__PURE__*/function (_PureComponent) {
         onEmojiSelected: recordUsageOnSelection,
         ref: this.onEmojiListRef,
         loading: loading
-      }));
+      })));
     }
   }]);
   return EmojiTypeAheadComponent;
 }(_react.PureComponent);
 
 exports.default = EmojiTypeAheadComponent;
-(0, _defineProperty2.default)(EmojiTypeAheadComponent, "childContextTypes", {
-  emoji: _propTypes.default.object
-});
 (0, _defineProperty2.default)(EmojiTypeAheadComponent, "defaultProps", {
   onSelection: function onSelection() {},
   onOpen: function onOpen() {},

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

@@ -35,6 +35,8 @@ var _EmojiPreviewComponent = require("../common/EmojiPreviewComponent");
 
 var _styles = require("./styles");
 
+var _LegacyEmojiContextProvider = _interopRequireDefault(require("../../context/LegacyEmojiContextProvider"));
+
 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; }
@@ -87,7 +89,7 @@ var EmojiTypeAheadItem = /*#__PURE__*/function (_PureComponent) {
           selected = _this$props3.selected,
           emoji = _this$props3.emoji;
       var classes = [_styles.typeAheadItem, selected && _styles.selected];
-      return (0, _core.jsx)("div", {
+      return (0, _core.jsx)(_LegacyEmojiContextProvider.default, null, (0, _core.jsx)("div", {
         className: "ak-emoji-typeahead-item ".concat(selected ? _styles.typeaheadSelected : ''),
         css: classes,
         onMouseDown: this.onEmojiSelected,
@@ -97,7 +99,7 @@ var EmojiTypeAheadItem = /*#__PURE__*/function (_PureComponent) {
         css: _styles.typeAheadItemRow
       }, emoji && (0, _core.jsx)(_EmojiPreviewComponent.EmojiPreviewComponent, {
         emoji: emoji
-      })));
+      }))));
     }
   }]);
   return EmojiTypeAheadItem;

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

@@ -37,6 +37,8 @@ var _analytics = require("../../util/analytics");
 
 var _styles = require("./styles");
 
+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); }; }
 
 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; } }
@@ -54,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
       }));
@@ -109,6 +117,11 @@ 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;

package/dist/cjs/context/EmojiContext.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmojiContext = void 0;
+
+var _react = require("react");
+
+var EmojiContext = /*#__PURE__*/(0, _react.createContext)(null);
+exports.EmojiContext = EmojiContext;

package/dist/cjs/context/EmojiContextProvider.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmojiContextProvider = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _EmojiContext = require("./EmojiContext");
+
+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; }
+
+var EmojiContextProvider = function EmojiContextProvider(_ref) {
+  var children = _ref.children,
+      emojiContextValue = _ref.emojiContextValue;
+  var memoizedEmojiContextValue = (0, _react.useMemo)(function () {
+    return emojiContextValue;
+  }, [emojiContextValue]);
+  return /*#__PURE__*/_react.default.createElement(_EmojiContext.EmojiContext.Provider, {
+    value: memoizedEmojiContextValue
+  }, children);
+};
+
+exports.EmojiContextProvider = EmojiContextProvider;