@atlaskit/emoji 64.3.0 → 64.4.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/emoji
 
+## 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/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/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

@@ -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);
@@ -385,6 +402,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 +438,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",

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

@@ -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({
@@ -227,6 +233,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 +282,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);
     }

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/index.js

@@ -168,6 +168,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/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,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/version.json

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

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

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

@@ -18,7 +18,7 @@ import { createRecordSelectionDefault } from '../common/RecordSelectionDefault';
 import CategorySelector from './CategorySelector';
 import EmojiPickerFooter from './EmojiPickerFooter';
 import EmojiPickerList from './EmojiPickerList';
-import { createAndFireEventInElementsChannel, categoryClickedEvent, closedPickerEvent, deleteBeginEvent, deleteCancelEvent, deleteConfirmEvent, openedPickerEvent, pickerClickedEvent, pickerSearchedEvent, selectedFileEvent, uploadBeginButton, uploadCancelButton, uploadConfirmButton, toneSelectorClosedEvent } from '../../util/analytics';
+import { createAndFireEventInElementsChannel, categoryClickedEvent, closedPickerEvent, deleteBeginEvent, deleteCancelEvent, deleteConfirmEvent, openedPickerEvent, pickerClickedEvent, pickerSearchedEvent, selectedFileEvent, uploadBeginButton, uploadCancelButton, uploadConfirmButton, toneSelectorClosedEvent, ufoExperiences } from '../../util/analytics';
 import { emojiPicker } from './styles';
 const FREQUENTLY_USED_MAX = 16;
 export default class EmojiPickerComponent extends PureComponent {
@@ -106,9 +106,19 @@ export default class EmojiPickerComponent extends PureComponent {
     });
 
     _defineProperty(this, "onSearch", query => {
-      this.updateEmojis(query, {
+      const options = {
         skinTone: this.state.selectedTone
-      });
+      };
+
+      if (query !== this.state.query) {
+        ufoExperiences['emoji-searched'].start();
+        ufoExperiences['emoji-searched'].addMetadata({
+          queryLength: query.length,
+          source: 'picker'
+        });
+      }
+
+      this.updateEmojis(query, options);
     });
 
     _defineProperty(this, "onSearchResult", searchResults => {
@@ -121,6 +131,11 @@ export default class EmojiPickerComponent extends PureComponent {
           queryLength: searchQuery.length,
           numMatches: emojiToRender.length
         }));
+        ufoExperiences['emoji-searched'].success({
+          metadata: {
+            emojisLength: emojiToRender.length
+          }
+        });
       }
 
       this.setStateAfterEmojiChange(searchQuery, emojiToRender, searchResults.emojis, frequentlyUsedEmoji);
@@ -353,6 +368,7 @@ export default class EmojiPickerComponent extends PureComponent {
   }
 
   componentDidMount() {
+    ufoExperiences['emoji-picker-opened'].success();
     const {
       emojiProvider,
       hideToneSelector
@@ -387,6 +403,9 @@ export default class EmojiPickerComponent extends PureComponent {
     this.fireAnalytics(closedPickerEvent({
       duration: this.calculateElapsedTime()
     }));
+    ufoExperiences['emoji-picker-opened'].abort();
+    ufoExperiences['emoji-searched'].abort();
+    ufoExperiences['emoji-selection-recorded'].abort();
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {