@atlaskit/emoji 64.6.0 → 64.7.1

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

@@ -2,14 +2,18 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import React from 'react';
+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 { sampledUfoRenderedEmoji, ufoExperiences, useSampledUFOComponentExperience } from '../../util/analytics';
+import { isIntersectionObserverSupported } from '../../util/browser-support';
+import { useInView } from '../../util/useInView';
+import { hasUfoMarked } from '../../util/analytics/ufoExperiences';
 
 const handleMouseDown = (props, event) => {
   // Clicked emoji delete button
@@ -83,9 +87,10 @@ const 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
 
 
-const renderAsSprite = props => {
+export const SpriteEmoji = props => {
   const {
     emoji,
     fitToHeight,
@@ -117,11 +122,9 @@ const renderAsSprite = props => {
     backgroundSize: `${sprite.column * 100}% ${sprite.row * 100}%`,
     ...sizing
   };
-  const emojiNode = jsx("span", {
-    className: emojiSprite,
-    style: style
-  }, "\xA0");
   return jsx("span", {
+    "data-testid": `sprite-emoji-${emoji.shortName}`,
+    "data-emoji-type": "sprite",
     tabIndex: shouldBeInteractive ? 0 : undefined,
     role: shouldBeInteractive ? 'button' : undefined,
     css: emojiContainer,
@@ -135,11 +138,13 @@ const renderAsSprite = props => {
     },
     "aria-label": emoji.shortName,
     title: showTooltip ? emoji.shortName : ''
-  }, emojiNode);
+  }, jsx("span", {
+    className: emojiSprite,
+    style: style
+  }, "\xA0"));
 }; // Keep as pure functional component, see renderAsSprite.
 
-
-const renderAsImage = props => {
+export const ImageEmoji = props => {
   const {
     emoji,
     fitToHeight,
@@ -150,6 +155,10 @@ const renderAsImage = props => {
     showDelete,
     shouldBeInteractive
   } = props;
+  const [ref, inView] = useInView({
+    triggerOnce: true
+  });
+  const ufoExp = sampledUfoRenderedEmoji(emoji);
   const classes = `${emojiMainStyle} ${emojiNodeStyles} ${selected ? commonSelectedStyles : ''} ${selectOnHover ? selectOnHoverStyles : ''} ${emojiImage} ${className ? className : ''}`;
   let width;
   let height;
@@ -188,17 +197,41 @@ const renderAsImage = props => {
     handleImageError(props, event);
   };
 
-  const onLoad = () => {
-    sampledUfoRenderedEmoji(emoji).success();
-  }; // Pass src attribute as key to force React to rerender img node since browser does not
-  // change preview image until loaded
-  // We currently have the following error: property 'loading' does not exist on type 'DetailedHTMLProps<ImgHTMLAttributes, HTMLImageElement>'
-  // The fix for this was added as a part of @types/react@16.9.20 - https://github.com/facebook/react/issues/16942
-  // TODO: remove @ts-ignore for the <img> below when the @types/react will be bumped from v16.8.0 to v16.9.20 or higher.
+  const markStartLoadFromMountedTime = useCallback(() => {
+    const mountedMark = ufoExp.metrics.marks.find(mark => mark.name === UfoEmojiTimings.MOUNTED_END);
+    ufoExp.mark(UfoEmojiTimings.ONLOAD_START, mountedMark === null || mountedMark === void 0 ? void 0 : mountedMark.time);
+  }, [ufoExp]);
 
+  const onLoad = () => {
+    // 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
+      }
+    });
+  };
 
+  const onBeforeLoad = useCallback(() => {
+    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(() => {
+    if (inView) {
+      onBeforeLoad();
+    }
+  }, [inView, onBeforeLoad]);
   const emojiNode = jsx("img", _extends({
-    // @ts-ignore
+    //@ts-ignore
     loading: "lazy",
     src: src,
     key: src,
@@ -214,6 +247,8 @@ const renderAsImage = props => {
     onLoad: onLoad
   }, sizing));
   return jsx("span", {
+    "data-testid": `image-emoji-${emoji.shortName}`,
+    "data-emoji-type": "image",
     css: emojiStyles,
     tabIndex: shouldBeInteractive ? 0 : undefined,
     role: shouldBeInteractive ? 'button' : undefined,
@@ -226,19 +261,36 @@ const renderAsImage = props => {
       handleMouseMove(props, event);
     },
     "aria-label": emoji.shortName,
-    title: showTooltip ? emoji.shortName : ''
+    title: showTooltip ? emoji.shortName : '',
+    ref: ref
   }, deleteButton, emojiNode);
 };
-
 export const Emoji = props => {
   const {
     emoji
-  } = props; // TODO: We always prefer render as image as having accessibility issues with sprite representation
+  } = props; // 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(() => {
+    const 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 renderAsSprite(props);
+    return jsx(SpriteEmoji, props);
   }
 
-  return renderAsImage(props);
+  return jsx(ImageEmoji, props);
 };
 export default Emoji;

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

@@ -32,6 +32,7 @@ const EmojiPlaceholder = props => {
     height: `${height}px`
   };
   return jsx("span", {
+    "data-testid": `emoji-placeholder-${shortName}`,
     "aria-label": shortName,
     className: placeholder,
     css: placeholderContainer,

package/dist/es2019/components/common/Popup.js

@@ -25,6 +25,10 @@ export default class Popup extends PureComponent {
       if (this.debounced) {
         clearTimeout(this.debounced);
         this.debounced = null;
+      }
+
+      if (typeof window === 'undefined') {
+        return;
       } // Timeout set to 30ms as to not throttle IE11
 
 
@@ -39,7 +43,11 @@ export default class Popup extends PureComponent {
     this.popup = document.createElement('div');
     document.body.appendChild(this.popup);
     this.popup.style.position = 'absolute';
-    window.addEventListener('resize', this.handleResize);
+
+    if (typeof window !== 'undefined') {
+      window.addEventListener('resize', this.handleResize);
+    }
+
     this.applyAbsolutePosition();
     this.renderContent();
   }
@@ -50,6 +58,10 @@ export default class Popup extends PureComponent {
   }
 
   componentWillUnmount() {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
     window.removeEventListener('resize', this.handleResize);
 
     if (this.popup) {
@@ -73,6 +85,10 @@ export default class Popup extends PureComponent {
   }
 
   applyAbovePosition() {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
     const targetNode = getTargetNode(this.props.target);
 
     if (targetNode && this.popup) {
@@ -86,6 +102,10 @@ export default class Popup extends PureComponent {
   }
 
   applyAbsolutePosition() {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
     if (this.props.relativePosition === 'above') {
       this.applyAbovePosition();
     } else if (this.props.relativePosition === 'below') {

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

@@ -18,7 +18,19 @@ export const createRecordSelectionDefault = (provider, onSelect, fireAnalytics)
           ufoExperiences['emoji-selection-recorded'].success();
         }).catch(() => {
           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/es2019/components/common/ResourcedEmoji.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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';
@@ -24,15 +24,25 @@ export default class ResourcedEmoji extends LoadingEmojiComponent {
     });
 
     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
     });
   }
 
   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
+        }
+      }
+    });
   }
 
   asyncLoadComponent() {

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

@@ -3,10 +3,12 @@ import React from 'react';
 import { Component } from 'react';
 import { defaultEmojiHeight } from '../../util/constants';
 import { isPromise } from '../../util/type-helpers';
+import { UfoEmojiTimings } from '../../types';
 import CachingEmoji from './CachingEmoji';
 import EmojiPlaceholder from './EmojiPlaceholder';
 import { sampledUfoRenderedEmoji } from '../../util/analytics';
 import LegacyEmojiContextProvider from '../../context/LegacyEmojiContextProvider';
+import { hasUfoMarked } from '../../util/analytics/ufoExperiences';
 export default class ResourcedEmojiComponent extends Component {
   constructor(props) {
     super(props);
@@ -21,6 +23,7 @@ export default class ResourcedEmojiComponent extends Component {
 
   refreshEmoji(emojiProvider, emojiId) {
     const foundEmoji = emojiProvider.findByEmojiId(emojiId);
+    sampledUfoRenderedEmoji(emojiId).mark(UfoEmojiTimings.METADATA_START);
 
     if (isPromise(foundEmoji)) {
       this.setState({
@@ -33,12 +36,20 @@ export default class ResourcedEmojiComponent extends Component {
             emoji,
             loaded: true
           });
+          sampledUfoRenderedEmoji(emojiId).mark(UfoEmojiTimings.METADATA_END);
 
           if (!emoji) {
             // emoji is undefined
             sampledUfoRenderedEmoji(emojiId).failure({
               metadata: {
-                reason: 'failed to find'
+                reason: 'failed to find',
+                source: 'ResourcedEmojiComponent',
+                data: {
+                  emoji: {
+                    id: emojiId.id,
+                    shortName: emojiId.shortName
+                  }
+                }
               }
             });
           }
@@ -46,12 +57,20 @@ export default class ResourcedEmojiComponent extends Component {
       }).catch(() => {
         sampledUfoRenderedEmoji(emojiId).failure({
           metadata: {
-            reason: 'failed to load'
+            reason: 'failed to load',
+            source: 'ResourcedEmojiComponent',
+            data: {
+              emoji: {
+                id: emojiId.id,
+                shortName: emojiId.shortName
+              }
+            }
           }
         });
       });
     } else {
-      // loaded
+      sampledUfoRenderedEmoji(emojiId).mark(UfoEmojiTimings.METADATA_END); // loaded
+
       this.setState({
         emoji: foundEmoji,
         loaded: true
@@ -73,6 +92,12 @@ export default class ResourcedEmojiComponent extends Component {
     this.ready = false;
   }
 
+  componentDidMount() {
+    if (!hasUfoMarked(sampledUfoRenderedEmoji(this.props.emojiId), UfoEmojiTimings.FMP_END)) {
+      sampledUfoRenderedEmoji(this.props.emojiId).markFMP();
+    }
+  }
+
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.emojiProvider !== this.props.emojiProvider || nextProps.emojiId !== this.props.emojiId) {
       this.refreshEmoji(nextProps.emojiProvider, nextProps.emojiId);

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

@@ -1,7 +1,19 @@
 import React from 'react';
 export class UfoErrorBoundary extends React.Component {
-  componentDidCatch() {
-    this.props.experiences.forEach(e => e.failure());
+  componentDidCatch(error, errorInfo) {
+    for (const exp of this.props.experiences) {
+      exp.failure({
+        metadata: {
+          source: 'UfoErrorBoundary',
+          reason: 'error',
+          error: {
+            name: error.name,
+            message: error.message,
+            infoStack: errorInfo.componentStack
+          }
+        }
+      });
+    }
   }
 
   render() {

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

@@ -22,7 +22,16 @@ export const uploadEmoji = (upload, emojiProvider, errorSetter, onSuccess, fireA
         duration: Date.now() - startTime,
         reason: messages.emojiUploadFailed.defaultMessage
       }));
-      ufoExperiences['emoji-uploaded'].failure();
+      ufoExperiences['emoji-uploaded'].failure({
+        metadata: {
+          source: 'UploadEmoji',
+          error: err,
+          data: {
+            upload: { ...upload
+            }
+          }
+        }
+      });
     });
   }
 };

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

@@ -294,6 +294,10 @@ export default class EmojiPickerComponent extends PureComponent {
     _defineProperty(this, "scrollToEndOfList", () => {
       const emojiPickerList = this.refs.emojiPickerList;
 
+      if (typeof window === 'undefined') {
+        return;
+      }
+
       if (emojiPickerList) {
         // Wait a tick to ensure repaint and updated height for picker list
         window.setTimeout(() => {
@@ -395,9 +399,18 @@ 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();
+    ufoExperiences['emoji-picker-opened'].abort({
+      metadata: {
+        source: 'EmojiPickerComponent',
+        reason: 'unmount'
+      }
+    });
+    ufoExperiences['emoji-searched'].abort({
+      metadata: {
+        source: 'EmojiPickerComponent',
+        reason: 'unmount'
+      }
+    });
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {

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

@@ -39,6 +39,11 @@ class EmojiPickerListSearch extends PureComponent {
         // setting the focus to search input.
         // see FS-2056
         this.inputRef = input;
+
+        if (typeof window === 'undefined') {
+          return;
+        }
+
         window.setTimeout(this.focusInput);
       }
     });

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

@@ -158,6 +158,9 @@ export const emojiItem = css({
     minWidth: '24px',
     maxWidth: '24px'
   },
+  [`& .${emojiNodeStyles} .${placeholder}`]: {
+    margin: '0'
+  },
   // Fit non-square emoji to square
   [`& .${emojiNodeStyles} > img`]: {
     position: 'relative',

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

@@ -172,8 +172,24 @@ export default class EmojiTypeAheadComponent extends PureComponent {
       this.fireAnalyticsEvent(typeaheadCancelledEvent(Date.now() - this.openTime, query, emojis));
     }
 
-    ufoExperiences['emoji-searched'].abort();
-    ufoExperiences['emoji-selection-recorded'].abort();
+    ufoExperiences['emoji-searched'].abort({
+      metadata: {
+        source: 'EmojiTypeAheadComponent',
+        reason: 'unmount',
+        data: {
+          query
+        }
+      }
+    });
+    ufoExperiences['emoji-selection-recorded'].abort({
+      metadata: {
+        source: 'EmojiTypeAheadComponent',
+        reason: 'unmount',
+        data: {
+          query
+        }
+      }
+    });
     this.sessionId = uuid();
     this.selected = false;
   }

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

@@ -84,7 +84,12 @@ export default class EmojiUploadComponent extends PureComponent {
   }
 
   componentWillUnmount() {
-    ufoExperiences['emoji-uploaded'].abort();
+    ufoExperiences['emoji-uploaded'].abort({
+      metadata: {
+        source: 'EmojiUploadComponent',
+        reason: 'unmount'
+      }
+    });
   }
 
   render() {

package/dist/es2019/types.js

@@ -61,4 +61,27 @@ export let UfoComponentName;
   UfoComponentName["EMOJI"] = "emoji";
   UfoComponentName["EMOJI_PICKER"] = "emoji-picker";
   UfoComponentName["EMOJI_PROVIDER"] = "emoji-provider";
-})(UfoComponentName || (UfoComponentName = {}));
+})(UfoComponentName || (UfoComponentName = {}));
+
+export let UfoEmojiTimingsKeys;
+
+(function (UfoEmojiTimingsKeys) {
+  UfoEmojiTimingsKeys["FMP"] = "fmp";
+  UfoEmojiTimingsKeys["MOUNTED"] = "emoji-mount";
+  UfoEmojiTimingsKeys["METADATA"] = "emoji-metadata";
+  UfoEmojiTimingsKeys["MEDIADATA"] = "emoji-media";
+  UfoEmojiTimingsKeys["ONLOAD"] = "emoji-onload";
+})(UfoEmojiTimingsKeys || (UfoEmojiTimingsKeys = {}));
+
+export let 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";
+  UfoEmojiTimings["MEDIA_START"] = "emoji-media_start";
+  UfoEmojiTimings["MEDIA_END"] = "emoji-media_end";
+  UfoEmojiTimings["ONLOAD_START"] = "emoji-onload_start";
+  UfoEmojiTimings["ONLOAD_END"] = "emoji-onload_end";
+})(UfoEmojiTimings || (UfoEmojiTimings = {}));

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

@@ -1,4 +1,4 @@
-import { UfoComponentName, UfoExperienceName } from '../../types';
+import { UfoComponentName, UfoEmojiTimings, UfoEmojiTimingsKeys, UfoExperienceName } from '../../types';
 import { ExperiencePerformanceTypes, ExperienceTypes, ConcurrentExperience, UFOExperience } from '@atlaskit/ufo';
 import { withSampling } from './samplingUfo';
 
@@ -22,8 +22,37 @@ const createInlineExperience = componentName => {
   };
 };
 
+const customEmojiTimings = [{
+  key: UfoEmojiTimingsKeys.FMP,
+  endMark: UfoEmojiTimings.FMP_END
+}, {
+  key: UfoEmojiTimingsKeys.METADATA,
+  component: 'resourced-emoji',
+  startMark: UfoEmojiTimings.METADATA_START,
+  endMark: UfoEmojiTimings.METADATA_END
+}, {
+  key: UfoEmojiTimingsKeys.MEDIADATA,
+  component: 'caching-emoji',
+  startMark: UfoEmojiTimings.MEDIA_START,
+  endMark: UfoEmojiTimings.MEDIA_END
+}, {
+  key: UfoEmojiTimingsKeys.MOUNTED,
+  component: 'emoji',
+  endMark: UfoEmojiTimings.MOUNTED_END
+}, {
+  key: UfoEmojiTimingsKeys.ONLOAD,
+  startMark: UfoEmojiTimings.ONLOAD_START,
+  endMark: UfoEmojiTimings.ONLOAD_END
+}];
 export const ufoExperiences = {
-  'emoji-rendered': new ConcurrentExperience(UfoExperienceName.EMOJI_RENDERED, createRenderExperience(UfoComponentName.EMOJI)),
+  'emoji-rendered': new ConcurrentExperience(UfoExperienceName.EMOJI_RENDERED, {
+    platform: {
+      component: UfoComponentName.EMOJI
+    },
+    type: ExperienceTypes.Operation,
+    performanceType: ExperiencePerformanceTypes.Custom,
+    timings: customEmojiTimings
+  }),
   'emoji-resource-fetched': new ConcurrentExperience(UfoExperienceName.EMOJI_RESOURCE_FETCHED, createRenderExperience(UfoComponentName.EMOJI_PROVIDER)),
   'emoji-picker-opened': new UFOExperience(UfoExperienceName.EMOJI_PICKER_OPENED, createRenderExperience(UfoComponentName.EMOJI_PICKER)),
   'emoji-selection-recorded': new UFOExperience(UfoExperienceName.EMOJI_SELECTION_RECORDED, createInlineExperience(UfoComponentName.EMOJI_PROVIDER)),
@@ -32,4 +61,10 @@ export const ufoExperiences = {
 };
 export const sampledUfoRenderedEmoji = emojiId => {
   return withSampling(ufoExperiences['emoji-rendered'].getInstance(emojiId.id || emojiId.shortName));
+};
+export const hasUfoMarked = (ufoExperience, name) => {
+  return ufoExperience.metrics.marks.some(mask => mask.name === name);
+};
+export const sampledUfoEmojiResourceFetched = providerType => {
+  return withSampling(ufoExperiences['emoji-resource-fetched'].getInstance(providerType));
 };

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

@@ -30,8 +30,9 @@ export const useSampledUFOComponentExperience = (experience, samplingRate, metad
     withSampling(experience).start({
       samplingRate
     });
+    const isMetadataEmpty = Object.keys(experience.metadata).length === 0;
 
-    if (metadata) {
+    if (metadata && isMetadataEmpty) {
       experience.addMetadata(metadata);
     }
   });

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

@@ -0,0 +1 @@
+export const isIntersectionObserverSupported = typeof window !== 'undefined' && 'IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in window.IntersectionObserverEntry.prototype;

package/dist/es2019/util/constants.js

@@ -21,6 +21,6 @@ export const defaultListLimit = 50;
 export const migrationUserId = 'hipchat_migration_emoticons';
 export const analyticsEmojiPrefix = 'atlassian.fabric.emoji.picker'; // This is the base sampling rate in Emoji
 
-export const SAMPLING_RATE_EMOJI_RENDERED_EXP = 0.05; // This rate is used in ResourceEmoji which will be used in stead of base sampling rate above
+export const SAMPLING_RATE_EMOJI_RENDERED_EXP = 0.05; // This rate is used in fetching emoji resource
 
-export const SAMPLING_RATE_EMOJI_RENDERED_EXP_RESOURCEEMOJI = 0.1; // add more sampling rate in parent components like EmojiTypeAheadItem.
+export const SAMPLING_RATE_EMOJI_RESOURCE_FETCHED_EXP = 0.01;

package/dist/es2019/util/storage-available.js

@@ -1,6 +1,10 @@
 // Copied from https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API#feature-detecting_localstorage
 // a brief history of local storage - https://gist.github.com/paulirish/5558557
 export default function storageAvailable(type) {
+  if (typeof window === 'undefined') {
+    return false;
+  }
+
   var storage;
 
   try {

package/dist/es2019/util/useInView.js

@@ -0,0 +1,12 @@
+import { useInView as useInViewLib } from 'react-intersection-observer';
+import { isIntersectionObserverSupported } from './browser-support';
+export const useInView = options => {
+  const hookResult = useInViewLib(options);
+
+  if (!isIntersectionObserverSupported) {
+    // Unsupported, return no `ref` and default `inView` true value
+    return [undefined, true];
+  }
+
+  return hookResult;
+};

package/dist/es2019/version.json

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