@atlaskit/emoji 64.7.0 → 65.1.0

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

@@ -0,0 +1,99 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmojiImage = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _core = require("@emotion/core");
+
+var _react = require("react");
+
+var _styles = require("./styles");
+
+var _constants = require("../../util/constants");
+
+/** @jsx jsx */
+var EmojiImage = function EmojiImage(props) {
+  var _props$maxSize = props.maxSize,
+      maxSize = _props$maxSize === void 0 ? _constants.defaultEmojiHeight : _props$maxSize,
+      representation = props.representation,
+      showTooltip = props.showTooltip,
+      imageUrl = props.imageUrl,
+      showImageBeforeLoad = props.showImageBeforeLoad,
+      emojiId = props.emojiId,
+      onImageLoadError = props.onImageLoadError;
+  var shortName = emojiId.shortName;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      validImage = _useState2[0],
+      setValidImage = _useState2[1];
+
+  var imageSize = (0, _react.useMemo)(function () {
+    if (representation) {
+      return {
+        width: maxSize / (representation.height * representation.width),
+        height: maxSize
+      };
+    }
+
+    return {
+      width: maxSize,
+      height: maxSize
+    };
+  }, [maxSize, representation]);
+  var style = {
+    minWidth: "".concat(imageSize.width, "px"),
+    width: "".concat(imageSize.width, "px"),
+    height: "".concat(imageSize.height, "px")
+  };
+
+  var handleImageLoad = function handleImageLoad() {
+    return setValidImage(true);
+  };
+
+  var handleImageLoadError = function handleImageLoadError() {
+    setValidImage(false);
+
+    if (onImageLoadError) {
+      onImageLoadError();
+    }
+  };
+
+  var visibility = (0, _react.useMemo)(function () {
+    return showImageBeforeLoad || validImage ? 'initial' : 'hidden';
+  }, [validImage, showImageBeforeLoad]);
+  return (0, _core.jsx)("span", {
+    "data-testid": "emoji-image-".concat(shortName),
+    "aria-label": shortName,
+    className: "".concat(_styles.emojiMainStyle, " ").concat(_styles.emojiNodeStyles, " ").concat(_styles.emojiImage),
+    style: style,
+    css: [_styles.emojiContainer, _styles.emojiStyles],
+    title: showTooltip ? shortName : ''
+  }, (0, _core.jsx)("img", {
+    className: "emoji",
+    alt: shortName,
+    onLoad: function onLoad() {
+      return handleImageLoad();
+    },
+    onError: function onError() {
+      return handleImageLoadError();
+    },
+    src: imageUrl,
+    style: {
+      objectFit: 'contain',
+      visibility: visibility
+    },
+    width: imageSize.width,
+    height: imageSize.height //@ts-ignore
+    ,
+    loading: "lazy"
+  }));
+};
+
+exports.EmojiImage = EmojiImage;

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

@@ -11,19 +11,19 @@ var _styles = require("./styles");
 
 var _constants = require("../../util/constants");
 
-var _typeHelpers = require("../../util/type-helpers");
-
 /** @jsx jsx */
 var EmojiPlaceholder = function EmojiPlaceholder(props) {
   var shortName = props.shortName,
       _props$size = props.size,
       size = _props$size === void 0 ? _constants.defaultEmojiHeight : _props$size,
       showTooltip = props.showTooltip,
-      representation = props.representation;
+      representation = props.representation,
+      _props$loading = props.loading,
+      loading = _props$loading === void 0 ? false : _props$loading;
   var scaledWidth;
   var scaledHeight;
 
-  if (representation && size && ((0, _typeHelpers.isImageRepresentation)(representation) || (0, _typeHelpers.isMediaRepresentation)(representation))) {
+  if (representation && size) {
     var _width = representation.width;
     var _height = representation.height;
 
@@ -37,14 +37,16 @@ var EmojiPlaceholder = function EmojiPlaceholder(props) {
   var height = scaledHeight || size;
   var style = {
     fill: 'f7f7f7',
+    minWidth: "".concat(width, "px"),
     width: "".concat(width, "px"),
     height: "".concat(height, "px")
   };
   return (0, _core.jsx)("span", {
     "data-testid": "emoji-placeholder-".concat(shortName),
+    "aria-busy": loading,
     "aria-label": shortName,
     className: _styles.placeholder,
-    css: _styles.placeholderContainer,
+    css: loading ? [_styles.placeholderContainer, _styles.placeholderContainerAnimated] : _styles.placeholderContainer,
     style: style,
     title: showTooltip ? shortName : ''
   });

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

@@ -57,7 +57,7 @@ var resourcedEmojiModuleLoader = function resourcedEmojiModuleLoader() {
 
 var resourcedEmojiComponentLoader = function resourcedEmojiComponentLoader() {
   return resourcedEmojiModuleLoader().then(function (module) {
-    return module.default;
+    return module.ResourcedEmojiComponent;
   });
 };
 
@@ -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",