@atlaskit/emoji 64.6.1 → 64.7.0

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

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 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; }
@@ -7,14 +8,18 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 /** @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 { 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';
 
 var handleMouseDown = function handleMouseDown(props, event) {
   // Clicked emoji delete button
@@ -80,7 +85,7 @@ var handleImageError = function handleImageError(props, event) {
 // When rendering 1500+ emoji using class based components had a significant impact.
 
 
-var renderAsSprite = function renderAsSprite(props) {
+export var SpriteEmoji = function SpriteEmoji(props) {
   var emoji = props.emoji,
       fitToHeight = props.fitToHeight,
       selected = props.selected,
@@ -111,11 +116,9 @@ var renderAsSprite = function renderAsSprite(props) {
     backgroundSize: "".concat(sprite.column * 100, "% ").concat(sprite.row * 100, "%")
   }, sizing);
 
-  var emojiNode = jsx("span", {
-    className: emojiSprite,
-    style: style
-  }, "\xA0");
   return jsx("span", {
+    "data-testid": "sprite-emoji-".concat(emoji.shortName),
+    "data-emoji-type": "sprite",
     tabIndex: shouldBeInteractive ? 0 : undefined,
     role: shouldBeInteractive ? 'button' : undefined,
     css: emojiContainer,
@@ -131,11 +134,13 @@ var renderAsSprite = function 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.
 
-
-var renderAsImage = function renderAsImage(props) {
+export var ImageEmoji = function ImageEmoji(props) {
   var emoji = props.emoji,
       fitToHeight = props.fitToHeight,
       selected = props.selected,
@@ -185,16 +190,28 @@ var renderAsImage = function renderAsImage(props) {
   };
 
   var onLoad = function onLoad() {
+    sampledUfoRenderedEmoji(emoji).mark(UfoEmojiTimings.ONLOAD_END);
     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.
-
+  };
 
+  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];
+
+  useEffect(function () {
+    if (inView) {
+      onBeforeLoad();
+    }
+  }, [inView, onBeforeLoad]);
   var emojiNode = jsx("img", _extends({
-    // @ts-ignore
+    //@ts-ignore
     loading: "lazy",
     src: src,
     key: src,
@@ -209,7 +226,29 @@ var renderAsImage = function renderAsImage(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",
     css: emojiStyles,
     tabIndex: shouldBeInteractive ? 0 : undefined,
     role: shouldBeInteractive ? 'button' : undefined,
@@ -224,17 +263,17 @@ var renderAsImage = function renderAsImage(props) {
       handleMouseMove(props, event);
     },
     "aria-label": emoji.shortName,
-    title: showTooltip ? emoji.shortName : ''
-  }, deleteButton, emojiNode);
+    title: showTooltip ? emoji.shortName : '',
+    ref: ref
+  }, deleteButton, renderLazyLoadedEmoji());
 };
-
 export var Emoji = function Emoji(props) {
   var emoji = props.emoji; // 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/esm/components/common/EmojiPlaceholder.js

@@ -31,6 +31,7 @@ var EmojiPlaceholder = function EmojiPlaceholder(props) {
     height: "".concat(height, "px")
   };
   return jsx("span", {
+    "data-testid": "emoji-placeholder-".concat(shortName),
     "aria-label": shortName,
     className: placeholder,
     css: placeholderContainer,

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

@@ -48,6 +48,10 @@ var Popup = /*#__PURE__*/function (_PureComponent) {
       if (_this.debounced) {
         clearTimeout(_this.debounced);
         _this.debounced = null;
+      }
+
+      if (typeof window === 'undefined') {
+        return;
       } // Timeout set to 30ms as to not throttle IE11
 
 
@@ -67,7 +71,11 @@ var Popup = /*#__PURE__*/function (_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();
     }
@@ -80,6 +88,10 @@ var Popup = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
+      if (typeof window === 'undefined') {
+        return;
+      }
+
       window.removeEventListener('resize', this.handleResize);
 
       if (this.popup) {
@@ -105,6 +117,10 @@ var Popup = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "applyAbovePosition",
     value: function applyAbovePosition() {
+      if (typeof window === 'undefined') {
+        return;
+      }
+
       var targetNode = getTargetNode(this.props.target);
 
       if (targetNode && this.popup) {
@@ -119,6 +135,10 @@ var Popup = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "applyAbsolutePosition",
     value: function applyAbsolutePosition() {
+      if (typeof window === 'undefined') {
+        return;
+      }
+
       if (this.props.relativePosition === 'above') {
         this.applyAbovePosition();
       } else if (this.props.relativePosition === 'below') {

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

@@ -14,6 +14,7 @@ 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';
@@ -46,6 +47,7 @@ var ResourcedEmojiComponent = /*#__PURE__*/function (_Component) {
       var _this2 = this;
 
       var foundEmoji = emojiProvider.findByEmojiId(emojiId);
+      sampledUfoRenderedEmoji(emojiId).mark(UfoEmojiTimings.METADATA_START);
 
       if (isPromise(foundEmoji)) {
         this.setState({
@@ -59,6 +61,8 @@ var ResourcedEmojiComponent = /*#__PURE__*/function (_Component) {
               loaded: true
             });
 
+            sampledUfoRenderedEmoji(emojiId).mark(UfoEmojiTimings.METADATA_END);
+
             if (!emoji) {
               // emoji is undefined
               sampledUfoRenderedEmoji(emojiId).failure({
@@ -76,7 +80,8 @@ var ResourcedEmojiComponent = /*#__PURE__*/function (_Component) {
           });
         });
       } else {
-        // loaded
+        sampledUfoRenderedEmoji(emojiId).mark(UfoEmojiTimings.METADATA_END); // loaded
+
         this.setState({
           emoji: foundEmoji,
           loaded: true
@@ -99,6 +104,11 @@ var ResourcedEmojiComponent = /*#__PURE__*/function (_Component) {
     value: function componentWillUnmount() {
       this.ready = false;
     }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      sampledUfoRenderedEmoji(this.props.emojiId).mark(UfoEmojiTimings.MOUNTED_END);
+    }
   }, {
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(nextProps) {

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

@@ -320,6 +320,10 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "scrollToEndOfList", function () {
       var 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(function () {
@@ -425,7 +429,6 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
       }));
       ufoExperiences['emoji-picker-opened'].abort();
       ufoExperiences['emoji-searched'].abort();
-      ufoExperiences['emoji-selection-recorded'].abort();
     }
   }, {
     key: "UNSAFE_componentWillReceiveProps",

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

@@ -62,6 +62,11 @@ var EmojiPickerListSearch = /*#__PURE__*/function (_PureComponent) {
         // setting the focus to search input.
         // see FS-2056
         _this.inputRef = input;
+
+        if (typeof window === 'undefined') {
+          return;
+        }
+
         window.setTimeout(_this.focusInput);
       }
     });

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

@@ -151,6 +151,8 @@ export var emojiItem = css((_css6 = {
   margin: '7px',
   minWidth: '24px',
   maxWidth: '24px'
+}), _defineProperty(_css6, "& .".concat(emojiNodeStyles, " .").concat(placeholder), {
+  margin: '0'
 }), _defineProperty(_css6, "& .".concat(emojiNodeStyles, " > img"), {
   position: 'relative',
   left: '50%',

package/dist/esm/types.js

@@ -61,4 +61,25 @@ export var UfoComponentName;
   UfoComponentName["EMOJI"] = "emoji";
   UfoComponentName["EMOJI_PICKER"] = "emoji-picker";
   UfoComponentName["EMOJI_PROVIDER"] = "emoji-provider";
-})(UfoComponentName || (UfoComponentName = {}));
+})(UfoComponentName || (UfoComponentName = {}));
+
+export var UfoEmojiTimingsKeys;
+
+(function (UfoEmojiTimingsKeys) {
+  UfoEmojiTimingsKeys["MOUNTED"] = "emoji-mount";
+  UfoEmojiTimingsKeys["METADATA"] = "emoji-metadata";
+  UfoEmojiTimingsKeys["MEDIADATA"] = "emoji-media";
+  UfoEmojiTimingsKeys["ONLOAD"] = "emoji-onload";
+})(UfoEmojiTimingsKeys || (UfoEmojiTimingsKeys = {}));
+
+export var UfoEmojiTimings;
+
+(function (UfoEmojiTimings) {
+  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/esm/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,33 @@ var createInlineExperience = function createInlineExperience(componentName) {
   };
 };
 
+var customEmojiTimings = [{
+  key: UfoEmojiTimingsKeys.MOUNTED,
+  endMark: UfoEmojiTimings.MOUNTED_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.ONLOAD,
+  startMark: UfoEmojiTimings.ONLOAD_START,
+  endMark: UfoEmojiTimings.ONLOAD_END
+}];
 export var 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)),

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

@@ -0,0 +1 @@
+export var isIntersectionObserverSupported = typeof window === 'undefined' ? false : !!window.IntersectionObserver;

package/dist/esm/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/esm/version.json

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

package/dist/types/components/common/CachingEmoji.d.ts

@@ -22,7 +22,6 @@ export declare class CachingMediaEmoji extends PureComponent<CachingEmojiProps,
     static contextType: React.Context<EmojiContextType>;
     context: ContextType<typeof EmojiContext>;
     constructor(props: EmojiProps, context: ContextType<typeof EmojiContext>);
-    componentDidMount(): void;
     componentDidUpdate(): void;
     private loadEmoji;
     private handleLoadError;

package/dist/types/components/common/Emoji.d.ts

@@ -51,5 +51,7 @@ export interface Props {
     fitToHeight?: number;
     shouldBeInteractive?: boolean;
 }
+export declare const SpriteEmoji: (props: Props) => JSX.Element;
+export declare const ImageEmoji: (props: Props) => JSX.Element;
 export declare const Emoji: (props: Props) => JSX.Element;
 export default Emoji;

package/dist/types/components/common/ResourcedEmojiComponent.d.ts

@@ -20,6 +20,7 @@ export default class ResourcedEmojiComponent extends Component<Props, State> {
     private refreshEmoji;
     UNSAFE_componentWillMount(): void;
     componentWillUnmount(): void;
+    componentDidMount(): void;
     UNSAFE_componentWillReceiveProps(nextProps: Props): void;
     render(): JSX.Element;
     private emojiWrapper;

package/dist/types/types.d.ts

@@ -321,3 +321,18 @@ export declare enum UfoComponentName {
     EMOJI_PICKER = "emoji-picker",
     EMOJI_PROVIDER = "emoji-provider"
 }
+export declare enum UfoEmojiTimingsKeys {
+    MOUNTED = "emoji-mount",
+    METADATA = "emoji-metadata",
+    MEDIADATA = "emoji-media",
+    ONLOAD = "emoji-onload"
+}
+export declare enum UfoEmojiTimings {
+    MOUNTED_END = "emoji-mount_end",
+    METADATA_START = "emoji-metadata_start",
+    METADATA_END = "emoji-metadata_end",
+    MEDIA_START = "emoji-media_start",
+    MEDIA_END = "emoji-media_end",
+    ONLOAD_START = "emoji-onload_start",
+    ONLOAD_END = "emoji-onload_end"
+}

package/dist/types/util/browser-support.d.ts

@@ -0,0 +1 @@
+export declare const isIntersectionObserverSupported: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/emoji",
-  "version": "64.6.1",
+  "version": "64.7.0",
   "description": "Fabric emoji React components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -42,6 +42,7 @@
     "js-search": "^2.0.0",
     "lru-fast": "^0.2.2",
     "prop-types": "^15.5.10",
+    "react-intersection-observer": "^8.26.2",
     "react-virtualized": "^9.8.0",
     "uuid": "^3.1.0"
   },
@@ -56,15 +57,16 @@
     "@atlaskit/elements-test-helpers": "^0.7.0",
     "@atlaskit/media-core": "^33.0.0",
     "@atlaskit/section-message": "^6.0.0",
+    "@atlaskit/ssr": "*",
     "@atlaskit/util-data-test": "^17.2.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/ufo": "^0.1.10",
+    "@testing-library/jest-dom": "^4.1.0",
     "@testing-library/react": "^8.0.1",
     "@testing-library/user-event": "10.4.0",
     "@types/js-search": "^1.4.0",
     "@types/react-virtualized": "^9.18.12",
-    "@types/serialize-javascript": "^5.0.0",
     "@types/webpack-dev-server": "^3.11.2",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",
@@ -75,7 +77,6 @@
     "react-addons-perf": "^15.3.2",
     "react-intl-next": "npm:react-intl@^5.18.1",
     "rxjs": "^5.5.0",
-    "serialize-javascript": "^5.0.1",
     "sinon": "^2.2.0",
     "typescript": "4.2.4",
     "wait-for-expect": "^1.2.0",