@atlaskit/emoji 64.7.0 → 64.7.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/emoji
 
+## 64.7.1
+
+### Patch Changes
+
+- [`6e01776f0b7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6e01776f0b7) - remove placeholder when lazy load emoji
+- [`6e01776f0b7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6e01776f0b7) - fix placeholder issue in lazy loaded emoji by removing it and re-write the anlytics tracking around it
+- [`c3f9e9bce1c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c3f9e9bce1c) - Add custom information to failure and abort events for UFO experiences
+- Updated dependencies
+
 ## 64.7.0
 
 ### Minor Changes

package/dist/cjs/api/EmojiResource.js

@@ -123,7 +123,11 @@ var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
 
         _analytics.ufoExperiences['emoji-resource-fetched'].getInstance(providerType).failure({
           metadata: {
-            reason: reason
+            reason: reason,
+            source: 'EmojiProvider',
+            data: {
+              providerUrl: provider.url
+            }
           }
         });
       });

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

@@ -47,6 +47,8 @@ var _constants = require("../../util/constants");
 
 var _EmojiContext = require("../../context/EmojiContext");
 
+var _ufoExperiences = require("../../util/analytics/ufoExperiences");
+
 var _excluded = ["placeholderSize"],
     _excluded2 = ["children"];
 
@@ -72,7 +74,10 @@ var CachingEmoji = function CachingEmoji(props) {
     emoji: emojiProps.emoji.shortName
   });
   (0, _react.useEffect)(function () {
-    (0, _analytics.sampledUfoRenderedEmoji)(emojiProps.emoji).mark(_types.UfoEmojiTimings.MOUNTED_END); // eslint-disable-next-line react-hooks/exhaustive-deps
+    if (!(0, _ufoExperiences.hasUfoMarked)((0, _analytics.sampledUfoRenderedEmoji)(emojiProps.emoji), 'fmp')) {
+      (0, _analytics.sampledUfoRenderedEmoji)(emojiProps.emoji).markFMP();
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, []);
 
   var emojiNode = function emojiNode() {
@@ -108,7 +113,12 @@ var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleLoadError", function (_emojiId) {
       (0, _analytics.sampledUfoRenderedEmoji)(_emojiId).failure({
         metadata: {
-          reason: 'load error'
+          reason: 'load error',
+          source: 'CachingMediaEmoji',
+          emoji: {
+            id: _emojiId.id,
+            shortName: _emojiId.shortName
+          }
         }
       });
 
@@ -170,7 +180,15 @@ var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
 
         (0, _analytics.sampledUfoRenderedEmoji)(emoji).failure({
           metadata: {
-            reason: 'failed to load media emoji'
+            reason: 'failed to load media emoji',
+            source: 'CachingMediaEmoji',
+            data: {
+              emoji: {
+                id: emoji.id,
+                shortName: emoji.shortName,
+                name: emoji.name
+              }
+            }
           }
         });
       });

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

@@ -35,11 +35,11 @@ var _styles = require("./styles");
 
 var _analytics = require("../../util/analytics");
 
-var _ = require("../..");
+var _browserSupport = require("../../util/browser-support");
 
-var _reactIntersectionObserver = require("react-intersection-observer");
+var _useInView3 = require("../../util/useInView");
 
-var _browserSupport = require("../../util/browser-support");
+var _ufoExperiences = require("../../util/analytics/ufoExperiences");
 
 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); }
 
@@ -111,6 +111,7 @@ var handleImageError = function handleImageError(props, event) {
   }
 }; // Pure functional components are used in favour of class based components, due to the performance!
 // When rendering 1500+ emoji using class based components had a significant impact.
+// TODO: add UFO tracking for sprite emoji
 
 
 var SpriteEmoji = function SpriteEmoji(props) {
@@ -180,6 +181,15 @@ var ImageEmoji = function ImageEmoji(props) {
       showTooltip = props.showTooltip,
       showDelete = props.showDelete,
       shouldBeInteractive = props.shouldBeInteractive;
+
+  var _useInView = (0, _useInView3.useInView)({
+    triggerOnce: true
+  }),
+      _useInView2 = (0, _slicedToArray2.default)(_useInView, 2),
+      ref = _useInView2[0],
+      inView = _useInView2[1];
+
+  var ufoExp = (0, _analytics.sampledUfoRenderedEmoji)(emoji);
   var classes = "".concat(_styles.emojiMainStyle, " ").concat(_styles.emojiNodeStyles, " ").concat(selected ? _styles.commonSelectedStyles : '', " ").concat(selectOnHover ? _styles.selectOnHoverStyles : '', " ").concat(_styles.emojiImage, " ").concat(className ? className : '');
   var width;
   var height;
@@ -220,21 +230,35 @@ var ImageEmoji = function ImageEmoji(props) {
     handleImageError(props, event);
   };
 
+  var markStartLoadFromMountedTime = (0, _react.useCallback)(function () {
+    var mountedMark = ufoExp.metrics.marks.find(function (mark) {
+      return mark.name === _types.UfoEmojiTimings.MOUNTED_END;
+    });
+    ufoExp.mark(_types.UfoEmojiTimings.ONLOAD_START, mountedMark === null || mountedMark === void 0 ? void 0 : mountedMark.time);
+  }, [ufoExp]);
+
   var onLoad = function onLoad() {
-    (0, _analytics.sampledUfoRenderedEmoji)(emoji).mark(_types.UfoEmojiTimings.ONLOAD_END);
-    (0, _analytics.sampledUfoRenderedEmoji)(emoji).success();
+    // onload could trigger before onBeforeLoad when emojis in viewport at start, so we need to mark onload start manually.
+    if (!(0, _ufoExperiences.hasUfoMarked)(ufoExp, _types.UfoEmojiTimings.ONLOAD_START)) {
+      markStartLoadFromMountedTime();
+    }
+
+    if (!(0, _ufoExperiences.hasUfoMarked)(ufoExp, _types.UfoEmojiTimings.ONLOAD_END)) {
+      ufoExp.mark(_types.UfoEmojiTimings.ONLOAD_END);
+    }
+
+    ufoExp.success({
+      metadata: {
+        IBSupported: _browserSupport.isIntersectionObserverSupported
+      }
+    });
   };
 
   var onBeforeLoad = (0, _react.useCallback)(function () {
-    (0, _analytics.sampledUfoRenderedEmoji)(emoji).mark(_types.UfoEmojiTimings.ONLOAD_START);
-  }, [emoji]);
-
-  var _useInView = (0, _reactIntersectionObserver.useInView)({
-    triggerOnce: true
-  }),
-      _useInView2 = (0, _slicedToArray2.default)(_useInView, 2),
-      ref = _useInView2[0],
-      inView = _useInView2[1];
+    if (!(0, _ufoExperiences.hasUfoMarked)(ufoExp, _types.UfoEmojiTimings.ONLOAD_START)) {
+      ufoExp.mark(_types.UfoEmojiTimings.ONLOAD_START);
+    }
+  }, [ufoExp]); // because of the lack of browser support of on before load natively, used IntersectionObserver helper hook to mimic the before load time mark for UFO.
 
   (0, _react.useEffect)(function () {
     if (inView) {
@@ -257,26 +281,6 @@ var ImageEmoji = function ImageEmoji(props) {
     onError: onError,
     onLoad: onLoad
   }, sizing));
-  var placeholder = (0, _core.jsx)(_.EmojiPlaceholder, {
-    shortName: emoji.shortName,
-    size: fitToHeight,
-    showTooltip: showTooltip,
-    representation: emoji.representation
-  });
-
-  var renderLazyLoadedEmoji = function renderLazyLoadedEmoji() {
-    // if browser not supported, render emoji node directly
-    if (!_browserSupport.isIntersectionObserverSupported) {
-      return emojiNode;
-    }
-
-    if (inView) {
-      return emojiNode;
-    }
-
-    return placeholder;
-  };
-
   return (0, _core.jsx)("span", {
     "data-testid": "image-emoji-".concat(emoji.shortName),
     "data-emoji-type": "image",
@@ -296,13 +300,30 @@ var ImageEmoji = function ImageEmoji(props) {
     "aria-label": emoji.shortName,
     title: showTooltip ? emoji.shortName : '',
     ref: ref
-  }, deleteButton, renderLazyLoadedEmoji());
+  }, deleteButton, emojiNode);
 };
 
 exports.ImageEmoji = ImageEmoji;
 
 var Emoji = function Emoji(props) {
-  var emoji = props.emoji; // TODO: We always prefer render as image as having accessibility issues with sprite representation
+  var emoji = props.emoji; // start emoji rendered experience, it may have already started earlier in ResourcedEmoji or CachingEmoji
+
+  (0, _analytics.useSampledUFOComponentExperience)(_analytics.ufoExperiences['emoji-rendered'].getInstance(emoji.id || emoji.shortName), _constants.SAMPLING_RATE_EMOJI_RENDERED_EXP, {
+    source: 'emoji',
+    emoji: emoji.shortName
+  });
+  (0, _react.useEffect)(function () {
+    var ufoExp = (0, _analytics.sampledUfoRenderedEmoji)(emoji);
+
+    if (!(0, _ufoExperiences.hasUfoMarked)(ufoExp, 'fmp')) {
+      ufoExp.markFMP();
+    }
+
+    if (!(0, _ufoExperiences.hasUfoMarked)(ufoExp, _types.UfoEmojiTimings.MOUNTED_END)) {
+      ufoExp.mark(_types.UfoEmojiTimings.MOUNTED_END);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, []); // TODO: We always prefer render as image as having accessibility issues with sprite representation
 
   if ((0, _typeHelpers.isSpriteRepresentation)(emoji.representation)) {
     return (0, _core.jsx)(SpriteEmoji, props);

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

@@ -28,7 +28,19 @@ var createRecordSelectionDefault = function createRecordSelectionDefault(provide
         }).catch(function () {
           fireAnalytics && fireAnalytics(_analytics.recordFailed);
 
-          _analytics.ufoExperiences['emoji-selection-recorded'].failure();
+          _analytics.ufoExperiences['emoji-selection-recorded'].failure({
+            metadata: {
+              reason: 'recordSelection error',
+              source: 'RecordSelectionDefault',
+              data: {
+                emoji: {
+                  id: emoji.id,
+                  name: emoji.name,
+                  shortName: emoji.shortName
+                }
+              }
+            }
+          });
         });
       }
     } finally {

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

@@ -77,11 +77,12 @@ var ResourcedEmoji = /*#__PURE__*/function (_LoadingEmojiComponen) {
       asyncLoadedComponent: ResourcedEmoji.AsyncLoadedComponent
     });
     (0, _analytics.sampledUfoRenderedEmoji)(props.emojiId).start({
-      samplingRate: _constants.SAMPLING_RATE_EMOJI_RENDERED_EXP_RESOURCEEMOJI
+      samplingRate: _constants.SAMPLING_RATE_EMOJI_RENDERED_EXP
     });
 
     _analytics.ufoExperiences['emoji-rendered'].getInstance(props.emojiId.id || props.emojiId.shortName).addMetadata({
-      source: 'resourced-emoji'
+      source: 'resourced-emoji',
+      emoji: props.emojiId.shortName
     });
 
     return _this;
@@ -90,7 +91,16 @@ var ResourcedEmoji = /*#__PURE__*/function (_LoadingEmojiComponen) {
   (0, _createClass2.default)(ResourcedEmoji, [{
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      (0, _analytics.sampledUfoRenderedEmoji)(this.props.emojiId).abort();
+      (0, _analytics.sampledUfoRenderedEmoji)(this.props.emojiId).abort({
+        metadata: {
+          source: 'ResourcedEmoji',
+          reason: 'unmount',
+          data: {
+            emojiId: this.props.emojiId.id,
+            shortName: this.props.emojiId.shortName
+          }
+        }
+      });
     }
   }, {
     key: "asyncLoadComponent",

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

@@ -39,6 +39,8 @@ var _analytics = require("../../util/analytics");
 
 var _LegacyEmojiContextProvider = _interopRequireDefault(require("../../context/LegacyEmojiContextProvider"));
 
+var _ufoExperiences = require("../../util/analytics/ufoExperiences");
+
 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; }
@@ -91,7 +93,14 @@ var ResourcedEmojiComponent = /*#__PURE__*/function (_Component) {
               // emoji is undefined
               (0, _analytics.sampledUfoRenderedEmoji)(emojiId).failure({
                 metadata: {
-                  reason: 'failed to find'
+                  reason: 'failed to find',
+                  source: 'ResourcedEmojiComponent',
+                  data: {
+                    emoji: {
+                      id: emojiId.id,
+                      shortName: emojiId.shortName
+                    }
+                  }
                 }
               });
             }
@@ -99,7 +108,14 @@ var ResourcedEmojiComponent = /*#__PURE__*/function (_Component) {
         }).catch(function () {
           (0, _analytics.sampledUfoRenderedEmoji)(emojiId).failure({
             metadata: {
-              reason: 'failed to load'
+              reason: 'failed to load',
+              source: 'ResourcedEmojiComponent',
+              data: {
+                emoji: {
+                  id: emojiId.id,
+                  shortName: emojiId.shortName
+                }
+              }
             }
           });
         });
@@ -131,7 +147,9 @@ var ResourcedEmojiComponent = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      (0, _analytics.sampledUfoRenderedEmoji)(this.props.emojiId).mark(_types.UfoEmojiTimings.MOUNTED_END);
+      if (!(0, _ufoExperiences.hasUfoMarked)((0, _analytics.sampledUfoRenderedEmoji)(this.props.emojiId), _types.UfoEmojiTimings.FMP_END)) {
+        (0, _analytics.sampledUfoRenderedEmoji)(this.props.emojiId).markFMP();
+      }
     }
   }, {
     key: "UNSAFE_componentWillReceiveProps",

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

@@ -19,6 +19,12 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _react = _interopRequireDefault(require("react"));
 
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 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; } }
@@ -35,10 +41,30 @@ var UfoErrorBoundary = /*#__PURE__*/function (_React$Component) {
 
   (0, _createClass2.default)(UfoErrorBoundary, [{
     key: "componentDidCatch",
-    value: function componentDidCatch() {
-      this.props.experiences.forEach(function (e) {
-        return e.failure();
-      });
+    value: function componentDidCatch(error, errorInfo) {
+      var _iterator = _createForOfIteratorHelper(this.props.experiences),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var exp = _step.value;
+          exp.failure({
+            metadata: {
+              source: 'UfoErrorBoundary',
+              reason: 'error',
+              error: {
+                name: error.name,
+                message: error.message,
+                infoStack: errorInfo.componentStack
+              }
+            }
+          });
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
     }
   }, {
     key: "render",

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

@@ -1,10 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.uploadEmoji = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _EmojiResource = require("../../api/EmojiResource");
 
 var _analytics = require("../../util/analytics");
@@ -13,6 +17,10 @@ var _i18n = require("../i18n");
 
 var _ufoExperiences = require("../../util/analytics/ufoExperiences");
 
+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; }
+
 var uploadEmoji = function uploadEmoji(upload, emojiProvider, errorSetter, onSuccess, fireAnalytics) {
   var startTime = Date.now();
   errorSetter(undefined);
@@ -36,7 +44,15 @@ var uploadEmoji = function uploadEmoji(upload, emojiProvider, errorSetter, onSuc
         reason: _i18n.messages.emojiUploadFailed.defaultMessage
       }));
 
-      _ufoExperiences.ufoExperiences['emoji-uploaded'].failure();
+      _ufoExperiences.ufoExperiences['emoji-uploaded'].failure({
+        metadata: {
+          source: 'UploadEmoji',
+          error: err,
+          data: {
+            upload: _objectSpread({}, upload)
+          }
+        }
+      });
     });
   }
 };

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

@@ -434,9 +434,19 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
         duration: this.calculateElapsedTime()
       }));
 
-      _analytics.ufoExperiences['emoji-picker-opened'].abort();
+      _analytics.ufoExperiences['emoji-picker-opened'].abort({
+        metadata: {
+          source: 'EmojiPickerComponent',
+          reason: 'unmount'
+        }
+      });
 
-      _analytics.ufoExperiences['emoji-searched'].abort();
+      _analytics.ufoExperiences['emoji-searched'].abort({
+        metadata: {
+          source: 'EmojiPickerComponent',
+          reason: 'unmount'
+        }
+      });
     }
   }, {
     key: "UNSAFE_componentWillReceiveProps",

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

@@ -224,9 +224,25 @@ var EmojiTypeAheadComponent = /*#__PURE__*/function (_PureComponent) {
         this.fireAnalyticsEvent((0, _analytics.typeaheadCancelledEvent)(Date.now() - this.openTime, query, emojis));
       }
 
-      _analytics.ufoExperiences['emoji-searched'].abort();
+      _analytics.ufoExperiences['emoji-searched'].abort({
+        metadata: {
+          source: 'EmojiTypeAheadComponent',
+          reason: 'unmount',
+          data: {
+            query: query
+          }
+        }
+      });
 
-      _analytics.ufoExperiences['emoji-selection-recorded'].abort();
+      _analytics.ufoExperiences['emoji-selection-recorded'].abort({
+        metadata: {
+          source: 'EmojiTypeAheadComponent',
+          reason: 'unmount',
+          data: {
+            query: query
+          }
+        }
+      });
 
       this.sessionId = (0, _uuid.default)();
       this.selected = false;

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

@@ -119,7 +119,12 @@ var EmojiUploadComponent = /*#__PURE__*/function (_PureComponent) {
   (0, _createClass2.default)(EmojiUploadComponent, [{
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      _ufoExperiences.ufoExperiences['emoji-uploaded'].abort();
+      _ufoExperiences.ufoExperiences['emoji-uploaded'].abort({
+        metadata: {
+          source: 'EmojiUploadComponent',
+          reason: 'unmount'
+        }
+      });
     }
   }, {
     key: "render",

package/dist/cjs/types.js

@@ -78,6 +78,7 @@ var UfoEmojiTimingsKeys;
 exports.UfoEmojiTimingsKeys = UfoEmojiTimingsKeys;
 
 (function (UfoEmojiTimingsKeys) {
+  UfoEmojiTimingsKeys["FMP"] = "fmp";
   UfoEmojiTimingsKeys["MOUNTED"] = "emoji-mount";
   UfoEmojiTimingsKeys["METADATA"] = "emoji-metadata";
   UfoEmojiTimingsKeys["MEDIADATA"] = "emoji-media";
@@ -88,6 +89,7 @@ var UfoEmojiTimings;
 exports.UfoEmojiTimings = UfoEmojiTimings;
 
 (function (UfoEmojiTimings) {
+  UfoEmojiTimings["FMP_END"] = "fmp";
   UfoEmojiTimings["MOUNTED_END"] = "emoji-mount_end";
   UfoEmojiTimings["METADATA_START"] = "emoji-metadata_start";
   UfoEmojiTimings["METADATA_END"] = "emoji-metadata_end";

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ufoExperiences = exports.sampledUfoRenderedEmoji = void 0;
+exports.ufoExperiences = exports.sampledUfoRenderedEmoji = exports.sampledUfoEmojiResourceFetched = exports.hasUfoMarked = void 0;
 
 var _types = require("../../types");
 
@@ -32,8 +32,8 @@ var createInlineExperience = function createInlineExperience(componentName) {
 };
 
 var customEmojiTimings = [{
-  key: _types.UfoEmojiTimingsKeys.MOUNTED,
-  endMark: _types.UfoEmojiTimings.MOUNTED_END
+  key: _types.UfoEmojiTimingsKeys.FMP,
+  endMark: _types.UfoEmojiTimings.FMP_END
 }, {
   key: _types.UfoEmojiTimingsKeys.METADATA,
   component: 'resourced-emoji',
@@ -44,6 +44,10 @@ var customEmojiTimings = [{
   component: 'caching-emoji',
   startMark: _types.UfoEmojiTimings.MEDIA_START,
   endMark: _types.UfoEmojiTimings.MEDIA_END
+}, {
+  key: _types.UfoEmojiTimingsKeys.MOUNTED,
+  component: 'emoji',
+  endMark: _types.UfoEmojiTimings.MOUNTED_END
 }, {
   key: _types.UfoEmojiTimingsKeys.ONLOAD,
   startMark: _types.UfoEmojiTimings.ONLOAD_START,
@@ -70,4 +74,18 @@ var sampledUfoRenderedEmoji = function sampledUfoRenderedEmoji(emojiId) {
   return (0, _samplingUfo.withSampling)(ufoExperiences['emoji-rendered'].getInstance(emojiId.id || emojiId.shortName));
 };
 
-exports.sampledUfoRenderedEmoji = sampledUfoRenderedEmoji;
+exports.sampledUfoRenderedEmoji = sampledUfoRenderedEmoji;
+
+var hasUfoMarked = function hasUfoMarked(ufoExperience, name) {
+  return ufoExperience.metrics.marks.some(function (mask) {
+    return mask.name === name;
+  });
+};
+
+exports.hasUfoMarked = hasUfoMarked;
+
+var sampledUfoEmojiResourceFetched = function sampledUfoEmojiResourceFetched(providerType) {
+  return (0, _samplingUfo.withSampling)(ufoExperiences['emoji-resource-fetched'].getInstance(providerType));
+};
+
+exports.sampledUfoEmojiResourceFetched = sampledUfoEmojiResourceFetched;

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

@@ -38,8 +38,9 @@ var useSampledUFOComponentExperience = function useSampledUFOComponentExperience
     (0, _samplingUfo.withSampling)(experience).start({
       samplingRate: samplingRate
     });
+    var isMetadataEmpty = Object.keys(experience.metadata).length === 0;
 
-    if (metadata) {
+    if (metadata && isMetadataEmpty) {
       experience.addMetadata(metadata);
     }
   });

package/dist/cjs/util/browser-support.js

@@ -4,5 +4,5 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.isIntersectionObserverSupported = void 0;
-var isIntersectionObserverSupported = typeof window === 'undefined' ? false : !!window.IntersectionObserver;
+var isIntersectionObserverSupported = typeof window !== 'undefined' && 'IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in window.IntersectionObserverEntry.prototype;
 exports.isIntersectionObserverSupported = isIntersectionObserverSupported;

package/dist/cjs/util/constants.js

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

package/dist/cjs/util/useInView.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useInView = void 0;
+
+var _reactIntersectionObserver = require("react-intersection-observer");
+
+var _browserSupport = require("./browser-support");
+
+var useInView = function useInView(options) {
+  var hookResult = (0, _reactIntersectionObserver.useInView)(options);
+
+  if (!_browserSupport.isIntersectionObserverSupported) {
+    // Unsupported, return no `ref` and default `inView` true value
+    return [undefined, true];
+  }
+
+  return hookResult;
+};
+
+exports.useInView = useInView;

package/dist/cjs/version.json

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

package/dist/es2019/api/EmojiResource.js

@@ -60,7 +60,11 @@ export class EmojiResource extends AbstractResource {
         this.notifyError(reason);
         ufoExperiences['emoji-resource-fetched'].getInstance(providerType).failure({
           metadata: {
-            reason
+            reason,
+            source: 'EmojiProvider',
+            data: {
+              providerUrl: provider.url
+            }
           }
         });
       });