@atlaskit/emoji 64.7.0 → 65.1.0

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

@@ -25,6 +25,7 @@ import { UfoErrorBoundary } from './UfoErrorBoundary';
 import { sampledUfoRenderedEmoji, ufoExperiences, useSampledUFOComponentExperience } from '../../util/analytics';
 import { SAMPLING_RATE_EMOJI_RENDERED_EXP } from '../../util/constants';
 import { EmojiContext } from '../../context/EmojiContext';
+import { hasUfoMarked } from '../../util/analytics/ufoExperiences';
 
 /**
  * Renders an emoji from a cached image, if required.
@@ -41,7 +42,10 @@ export var CachingEmoji = function CachingEmoji(props) {
     emoji: emojiProps.emoji.shortName
   });
   useEffect(function () {
-    sampledUfoRenderedEmoji(emojiProps.emoji).mark(UfoEmojiTimings.MOUNTED_END); // eslint-disable-next-line react-hooks/exhaustive-deps
+    if (!hasUfoMarked(sampledUfoRenderedEmoji(emojiProps.emoji), 'fmp')) {
+      sampledUfoRenderedEmoji(emojiProps.emoji).markFMP();
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, []);
 
   var emojiNode = function emojiNode() {
@@ -76,7 +80,12 @@ export var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "handleLoadError", function (_emojiId) {
       sampledUfoRenderedEmoji(_emojiId).failure({
         metadata: {
-          reason: 'load error'
+          reason: 'load error',
+          source: 'CachingMediaEmoji',
+          emoji: {
+            id: _emojiId.id,
+            shortName: _emojiId.shortName
+          }
         }
       });
 
@@ -139,7 +148,15 @@ export var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
 
         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/esm/components/common/Emoji.js

@@ -10,16 +10,16 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { jsx } from '@emotion/core';
 import React, { useEffect, useCallback } from 'react';
 import { shouldUseAltRepresentation } from '../../api/EmojiUtils';
-import { deleteEmojiLabel } from '../../util/constants';
+import { deleteEmojiLabel, SAMPLING_RATE_EMOJI_RENDERED_EXP } from '../../util/constants';
 import { isImageRepresentation, isMediaRepresentation, isSpriteRepresentation, toEmojiId } from '../../util/type-helpers';
 import { UfoEmojiTimings } from '../../types';
 import { leftClick } from '../../util/mouse';
 import DeleteButton from './DeleteButton';
 import { emojiContainer, emojiNodeStyles, commonSelectedStyles, selectOnHoverStyles, emojiSprite, emojiMainStyle, emojiStyles, emojiImage } from './styles';
-import { sampledUfoRenderedEmoji } from '../../util/analytics';
-import { EmojiPlaceholder } from '../..';
-import { useInView } from 'react-intersection-observer';
-import { isIntersectionObserverSupported } from '../../util/browser-support'; // import { isIntersectionObserverSupported } from '../../util/browser-support';
+import { sampledUfoRenderedEmoji, ufoExperiences, useSampledUFOComponentExperience } from '../../util/analytics';
+import { isIntersectionObserverSupported } from '../../util/browser-support';
+import { useInView } from '../../util/useInView';
+import { hasUfoMarked } from '../../util/analytics/ufoExperiences';
 
 var handleMouseDown = function handleMouseDown(props, event) {
   // Clicked emoji delete button
@@ -83,6 +83,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
 
 
 export var SpriteEmoji = function SpriteEmoji(props) {
@@ -149,6 +150,15 @@ export var ImageEmoji = function ImageEmoji(props) {
       showTooltip = props.showTooltip,
       showDelete = props.showDelete,
       shouldBeInteractive = props.shouldBeInteractive;
+
+  var _useInView = useInView({
+    triggerOnce: true
+  }),
+      _useInView2 = _slicedToArray(_useInView, 2),
+      ref = _useInView2[0],
+      inView = _useInView2[1];
+
+  var ufoExp = sampledUfoRenderedEmoji(emoji);
   var classes = "".concat(emojiMainStyle, " ").concat(emojiNodeStyles, " ").concat(selected ? commonSelectedStyles : '', " ").concat(selectOnHover ? selectOnHoverStyles : '', " ").concat(emojiImage, " ").concat(className ? className : '');
   var width;
   var height;
@@ -189,21 +199,35 @@ export var ImageEmoji = function ImageEmoji(props) {
     handleImageError(props, event);
   };
 
+  var markStartLoadFromMountedTime = useCallback(function () {
+    var mountedMark = ufoExp.metrics.marks.find(function (mark) {
+      return mark.name === UfoEmojiTimings.MOUNTED_END;
+    });
+    ufoExp.mark(UfoEmojiTimings.ONLOAD_START, mountedMark === null || mountedMark === void 0 ? void 0 : mountedMark.time);
+  }, [ufoExp]);
+
   var onLoad = function onLoad() {
-    sampledUfoRenderedEmoji(emoji).mark(UfoEmojiTimings.ONLOAD_END);
-    sampledUfoRenderedEmoji(emoji).success();
+    // onload could trigger before onBeforeLoad when emojis in viewport at start, so we need to mark onload start manually.
+    if (!hasUfoMarked(ufoExp, UfoEmojiTimings.ONLOAD_START)) {
+      markStartLoadFromMountedTime();
+    }
+
+    if (!hasUfoMarked(ufoExp, UfoEmojiTimings.ONLOAD_END)) {
+      ufoExp.mark(UfoEmojiTimings.ONLOAD_END);
+    }
+
+    ufoExp.success({
+      metadata: {
+        IBSupported: isIntersectionObserverSupported
+      }
+    });
   };
 
   var onBeforeLoad = useCallback(function () {
-    sampledUfoRenderedEmoji(emoji).mark(UfoEmojiTimings.ONLOAD_START);
-  }, [emoji]);
-
-  var _useInView = useInView({
-    triggerOnce: true
-  }),
-      _useInView2 = _slicedToArray(_useInView, 2),
-      ref = _useInView2[0],
-      inView = _useInView2[1];
+    if (!hasUfoMarked(ufoExp, UfoEmojiTimings.ONLOAD_START)) {
+      ufoExp.mark(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.
 
   useEffect(function () {
     if (inView) {
@@ -226,26 +250,6 @@ export var ImageEmoji = function ImageEmoji(props) {
     onError: onError,
     onLoad: onLoad
   }, sizing));
-  var placeholder = 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 (!isIntersectionObserverSupported) {
-      return emojiNode;
-    }
-
-    if (inView) {
-      return emojiNode;
-    }
-
-    return placeholder;
-  };
-
   return jsx("span", {
     "data-testid": "image-emoji-".concat(emoji.shortName),
     "data-emoji-type": "image",
@@ -265,10 +269,27 @@ export var ImageEmoji = function ImageEmoji(props) {
     "aria-label": emoji.shortName,
     title: showTooltip ? emoji.shortName : '',
     ref: ref
-  }, deleteButton, renderLazyLoadedEmoji());
+  }, deleteButton, emojiNode);
 };
 export 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
+
+  useSampledUFOComponentExperience(ufoExperiences['emoji-rendered'].getInstance(emoji.id || emoji.shortName), SAMPLING_RATE_EMOJI_RENDERED_EXP, {
+    source: 'emoji',
+    emoji: emoji.shortName
+  });
+  useEffect(function () {
+    var ufoExp = sampledUfoRenderedEmoji(emoji);
+
+    if (!hasUfoMarked(ufoExp, 'fmp')) {
+      ufoExp.markFMP();
+    }
+
+    if (!hasUfoMarked(ufoExp, UfoEmojiTimings.MOUNTED_END)) {
+      ufoExp.mark(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 (isSpriteRepresentation(emoji.representation)) {
     return jsx(SpriteEmoji, props);

package/dist/esm/components/common/EmojiImage.js

@@ -0,0 +1,84 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { useMemo, useState } from 'react';
+import { emojiContainer, emojiImage, emojiMainStyle, emojiNodeStyles, emojiStyles } from './styles';
+import { defaultEmojiHeight } from '../../util/constants';
+export var EmojiImage = function EmojiImage(props) {
+  var _props$maxSize = props.maxSize,
+      maxSize = _props$maxSize === void 0 ? 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 = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      validImage = _useState2[0],
+      setValidImage = _useState2[1];
+
+  var imageSize = 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 = useMemo(function () {
+    return showImageBeforeLoad || validImage ? 'initial' : 'hidden';
+  }, [validImage, showImageBeforeLoad]);
+  return jsx("span", {
+    "data-testid": "emoji-image-".concat(shortName),
+    "aria-label": shortName,
+    className: "".concat(emojiMainStyle, " ").concat(emojiNodeStyles, " ").concat(emojiImage),
+    style: style,
+    css: [emojiContainer, emojiStyles],
+    title: showTooltip ? shortName : ''
+  }, 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"
+  }));
+};

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

@@ -1,19 +1,20 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import { placeholder, placeholderContainer } from './styles';
+import { placeholder, placeholderContainer, placeholderContainerAnimated } from './styles';
 import { defaultEmojiHeight } from '../../util/constants';
-import { isImageRepresentation, isMediaRepresentation } from '../../util/type-helpers';
 
 var EmojiPlaceholder = function EmojiPlaceholder(props) {
   var shortName = props.shortName,
       _props$size = props.size,
       size = _props$size === void 0 ? 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 && (isImageRepresentation(representation) || isMediaRepresentation(representation))) {
+  if (representation && size) {
     var _width = representation.width;
     var _height = representation.height;
 
@@ -27,14 +28,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 jsx("span", {
     "data-testid": "emoji-placeholder-".concat(shortName),
+    "aria-busy": loading,
     "aria-label": shortName,
     className: placeholder,
-    css: placeholderContainer,
+    css: loading ? [placeholderContainer, placeholderContainerAnimated] : placeholderContainer,
     style: style,
     title: showTooltip ? shortName : ''
   });

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

@@ -18,7 +18,19 @@ export var createRecordSelectionDefault = function createRecordSelectionDefault(
           ufoExperiences['emoji-selection-recorded'].success();
         }).catch(function () {
           fireAnalytics && fireAnalytics(recordFailed);
-          ufoExperiences['emoji-selection-recorded'].failure();
+          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/esm/components/common/ResourcedEmoji.js

@@ -14,7 +14,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 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; } }
 
 import React from 'react';
-import { defaultEmojiHeight, SAMPLING_RATE_EMOJI_RENDERED_EXP_RESOURCEEMOJI } from '../../util/constants';
+import { defaultEmojiHeight, SAMPLING_RATE_EMOJI_RENDERED_EXP } from '../../util/constants';
 import EmojiPlaceholder from './EmojiPlaceholder';
 import LoadingEmojiComponent from './LoadingEmojiComponent';
 import { sampledUfoRenderedEmoji, ufoExperiences } from '../../util/analytics';
@@ -28,7 +28,7 @@ var resourcedEmojiModuleLoader = function resourcedEmojiModuleLoader() {
 
 var resourcedEmojiComponentLoader = function resourcedEmojiComponentLoader() {
   return resourcedEmojiModuleLoader().then(function (module) {
-    return module.default;
+    return module.ResourcedEmojiComponent;
   });
 };
 
@@ -51,10 +51,11 @@ var ResourcedEmoji = /*#__PURE__*/function (_LoadingEmojiComponen) {
     });
 
     sampledUfoRenderedEmoji(props.emojiId).start({
-      samplingRate: SAMPLING_RATE_EMOJI_RENDERED_EXP_RESOURCEEMOJI
+      samplingRate: SAMPLING_RATE_EMOJI_RENDERED_EXP
     });
     ufoExperiences['emoji-rendered'].getInstance(props.emojiId.id || props.emojiId.shortName).addMetadata({
-      source: 'resourced-emoji'
+      source: 'resourced-emoji',
+      emoji: props.emojiId.shortName
     });
     return _this;
   }
@@ -62,7 +63,16 @@ var ResourcedEmoji = /*#__PURE__*/function (_LoadingEmojiComponen) {
   _createClass(ResourcedEmoji, [{
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      sampledUfoRenderedEmoji(this.props.emojiId).abort();
+      sampledUfoRenderedEmoji(this.props.emojiId).abort({
+        metadata: {
+          source: 'ResourcedEmoji',
+          reason: 'unmount',
+          data: {
+            emojiId: this.props.emojiId.id,
+            shortName: this.props.emojiId.shortName
+          }
+        }
+      });
     }
   }, {
     key: "asyncLoadComponent",