@atlaskit/emoji 64.6.1 → 64.7.0

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

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+import React, { useEffect } from 'react';
 import { PureComponent } from 'react';
 import { isMediaEmoji } from '../../util/type-helpers';
+import { UfoEmojiTimings } from '../../types';
 import debug from '../../util/logger';
 import Emoji from './Emoji';
 import EmojiPlaceholder from './EmojiPlaceholder';
@@ -23,8 +24,12 @@ export const CachingEmoji = props => {
   } = props; // start emoji rendered experience, it may have already started earlier in ResourcedEmoji
 
   useSampledUFOComponentExperience(ufoExperiences['emoji-rendered'].getInstance(emojiProps.emoji.id || emojiProps.emoji.shortName), SAMPLING_RATE_EMOJI_RENDERED_EXP, {
-    source: 'caching-emoji'
+    source: 'caching-emoji',
+    emoji: emojiProps.emoji.shortName
   });
+  useEffect(() => {
+    sampledUfoRenderedEmoji(emojiProps.emoji).mark(UfoEmojiTimings.MOUNTED_END); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const emojiNode = () => {
     if (isMediaEmoji(props.emoji)) {
@@ -64,10 +69,6 @@ export class CachingMediaEmoji extends PureComponent {
     this.loadEmoji(props.emoji, context);
   }
 
-  componentDidMount() {
-    sampledUfoRenderedEmoji(this.props.emoji).markFMP();
-  }
-
   componentDidUpdate() {
     var _this$state$cachedEmo;
 
@@ -94,11 +95,13 @@ export class CachingMediaEmoji extends PureComponent {
     }
 
     debug('Loading image via media cache', emoji.shortName);
+    sampledUfoRenderedEmoji(emoji).mark(UfoEmojiTimings.MEDIA_START);
     emojiProvider.getMediaEmojiDescriptionURLWithInlineToken(emoji).then(cachedEmoji => {
       this.setState({
         cachedEmoji,
         invalidImage: false
       });
+      sampledUfoRenderedEmoji(emoji).mark(UfoEmojiTimings.MEDIA_END);
     }).catch(() => {
       this.setState({
         cachedEmoji: undefined,
@@ -119,7 +122,6 @@ export class CachingMediaEmoji extends PureComponent {
     } = this.state;
     const {
       children,
-      placeholderSize,
       ...otherProps
     } = this.props;
     let emojiComponent;

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

@@ -9,7 +9,8 @@ import { emojiDeleteButton, deleteButton } from './styles';
 
 const DeleteButton = props => jsx("span", {
   css: deleteButton,
-  className: emojiDeleteButton
+  className: emojiDeleteButton,
+  "data-testid": "emoji-delete-button"
 }, jsx(Button, {
   iconBefore: jsx(CrossCircleIcon, {
     label: deleteEmojiLabel,

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 { 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';
 
 const handleMouseDown = (props, event) => {
   // Clicked emoji delete button
@@ -85,7 +89,7 @@ const handleImageError = (props, event) => {
 // When rendering 1500+ emoji using class based components had a significant impact.
 
 
-const renderAsSprite = props => {
+export const SpriteEmoji = props => {
   const {
     emoji,
     fitToHeight,
@@ -117,11 +121,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 +137,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,
@@ -189,16 +193,23 @@ const renderAsImage = props => {
   };
 
   const 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.
-
+  };
 
+  const onBeforeLoad = useCallback(() => {
+    sampledUfoRenderedEmoji(emoji).mark(UfoEmojiTimings.ONLOAD_START);
+  }, [emoji]);
+  const [ref, inView] = useInView({
+    triggerOnce: true
+  });
+  useEffect(() => {
+    if (inView) {
+      onBeforeLoad();
+    }
+  }, [inView, onBeforeLoad]);
   const emojiNode = jsx("img", _extends({
-    // @ts-ignore
+    //@ts-ignore
     loading: "lazy",
     src: src,
     key: src,
@@ -213,7 +224,29 @@ const renderAsImage = props => {
     onError: onError,
     onLoad: onLoad
   }, sizing));
+  const placeholder = jsx(EmojiPlaceholder, {
+    shortName: emoji.shortName,
+    size: fitToHeight,
+    showTooltip: showTooltip,
+    representation: emoji.representation
+  });
+
+  const 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-${emoji.shortName}`,
+    "data-emoji-type": "image",
     css: emojiStyles,
     tabIndex: shouldBeInteractive ? 0 : undefined,
     role: shouldBeInteractive ? 'button' : undefined,
@@ -226,19 +259,19 @@ const renderAsImage = props => {
       handleMouseMove(props, event);
     },
     "aria-label": emoji.shortName,
-    title: showTooltip ? emoji.shortName : ''
-  }, deleteButton, emojiNode);
+    title: showTooltip ? emoji.shortName : '',
+    ref: ref
+  }, deleteButton, renderLazyLoadedEmoji());
 };
-
 export const Emoji = props => {
   const {
     emoji
   } = props; // 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/ResourcedEmojiComponent.js

@@ -3,6 +3,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';
@@ -21,6 +22,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,6 +35,7 @@ export default class ResourcedEmojiComponent extends Component {
             emoji,
             loaded: true
           });
+          sampledUfoRenderedEmoji(emojiId).mark(UfoEmojiTimings.METADATA_END);
 
           if (!emoji) {
             // emoji is undefined
@@ -51,7 +54,8 @@ export default class ResourcedEmojiComponent extends Component {
         });
       });
     } else {
-      // loaded
+      sampledUfoRenderedEmoji(emojiId).mark(UfoEmojiTimings.METADATA_END); // loaded
+
       this.setState({
         emoji: foundEmoji,
         loaded: true
@@ -73,6 +77,10 @@ export default class ResourcedEmojiComponent extends Component {
     this.ready = false;
   }
 
+  componentDidMount() {
+    sampledUfoRenderedEmoji(this.props.emojiId).mark(UfoEmojiTimings.MOUNTED_END);
+  }
+
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.emojiProvider !== this.props.emojiProvider || nextProps.emojiId !== this.props.emojiId) {
       this.refreshEmoji(nextProps.emojiProvider, nextProps.emojiId);

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(() => {
@@ -397,7 +401,6 @@ export default class EmojiPickerComponent extends PureComponent {
     }));
     ufoExperiences['emoji-picker-opened'].abort();
     ufoExperiences['emoji-searched'].abort();
-    ufoExperiences['emoji-selection-recorded'].abort();
   }
 
   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/types.js

@@ -61,4 +61,25 @@ 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["MOUNTED"] = "emoji-mount";
+  UfoEmojiTimingsKeys["METADATA"] = "emoji-metadata";
+  UfoEmojiTimingsKeys["MEDIADATA"] = "emoji-media";
+  UfoEmojiTimingsKeys["ONLOAD"] = "emoji-onload";
+})(UfoEmojiTimingsKeys || (UfoEmojiTimingsKeys = {}));
+
+export let 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/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,33 @@ const createInlineExperience = componentName => {
   };
 };
 
+const 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 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)),

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

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

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

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

package/dist/esm/api/EmojiRepository.js

@@ -288,6 +288,10 @@ var EmojiRepository = /*#__PURE__*/function () {
       // frequent category being shown in the picker).
 
       if (this.dynamicCategoryList.indexOf(frequentCategory) === -1) {
+        if (typeof window === 'undefined') {
+          return;
+        }
+
         window.setTimeout(function () {
           _this2.dynamicCategoryList.push(frequentCategory);
         });

package/dist/esm/api/EmojiResource.js

@@ -185,6 +185,10 @@ export var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
   }, {
     key: "loadStoredTone",
     value: function loadStoredTone() {
+      if (typeof window === 'undefined') {
+        return undefined;
+      }
+
       var storedToneString = window.localStorage.getItem(selectedToneStorageKey);
 
       if (storedToneString) {
@@ -498,6 +502,10 @@ export var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
     value: function setSelectedTone(tone) {
       this.selectedTone = tone;
 
+      if (typeof window === 'undefined') {
+        return;
+      }
+
       if (storageAvailable('localStorage')) {
         try {
           window.localStorage.setItem(selectedToneStorageKey, tone ? tone.toString() : '');

package/dist/esm/api/EmojiUtils.js

@@ -49,6 +49,10 @@ var calculateScale = function calculateScale(getRatio) {
 };
 
 export var getPixelRatio = function getPixelRatio() {
+  if (typeof window === 'undefined') {
+    return 0;
+  }
+
   return window.devicePixelRatio;
 };
 export var getAltRepresentation = function getAltRepresentation(reps) {

package/dist/esm/api/internal/UsageFrequencyTracker.js

@@ -137,7 +137,10 @@ export var Gateway = /*#__PURE__*/function () {
         }
       };
 
-      window.setTimeout(wrappedFunc);
+      if (typeof window !== 'undefined') {
+        window.setTimeout(wrappedFunc);
+      }
+
       return true;
     }
   }, {

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

@@ -8,15 +8,16 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["placeholderSize"],
-    _excluded2 = ["children", "placeholderSize"];
+    _excluded2 = ["children"];
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { PureComponent } from 'react';
 import { isMediaEmoji } from '../../util/type-helpers';
+import { UfoEmojiTimings } from '../../types';
 import debug from '../../util/logger';
 import Emoji from './Emoji';
 import EmojiPlaceholder from './EmojiPlaceholder';
@@ -36,8 +37,12 @@ export var CachingEmoji = function CachingEmoji(props) {
 
 
   useSampledUFOComponentExperience(ufoExperiences['emoji-rendered'].getInstance(emojiProps.emoji.id || emojiProps.emoji.shortName), SAMPLING_RATE_EMOJI_RENDERED_EXP, {
-    source: 'caching-emoji'
+    source: 'caching-emoji',
+    emoji: emojiProps.emoji.shortName
   });
+  useEffect(function () {
+    sampledUfoRenderedEmoji(emojiProps.emoji).mark(UfoEmojiTimings.MOUNTED_END); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   var emojiNode = function emojiNode() {
     if (isMediaEmoji(props.emoji)) {
@@ -90,11 +95,6 @@ export var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
   }
 
   _createClass(CachingMediaEmoji, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      sampledUfoRenderedEmoji(this.props.emoji).markFMP();
-    }
-  }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
       var _this$state$cachedEmo;
@@ -123,11 +123,14 @@ export var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
       }
 
       debug('Loading image via media cache', emoji.shortName);
+      sampledUfoRenderedEmoji(emoji).mark(UfoEmojiTimings.MEDIA_START);
       emojiProvider.getMediaEmojiDescriptionURLWithInlineToken(emoji).then(function (cachedEmoji) {
         _this2.setState({
           cachedEmoji: cachedEmoji,
           invalidImage: false
         });
+
+        sampledUfoRenderedEmoji(emoji).mark(UfoEmojiTimings.MEDIA_END);
       }).catch(function () {
         _this2.setState({
           cachedEmoji: undefined,
@@ -150,7 +153,6 @@ export var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
 
       var _this$props = this.props,
           children = _this$props.children,
-          placeholderSize = _this$props.placeholderSize,
           otherProps = _objectWithoutProperties(_this$props, _excluded2);
 
       var emojiComponent;
@@ -163,13 +165,13 @@ export var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
       } else {
         var _this$props2 = this.props,
             emoji = _this$props2.emoji,
-            _placeholderSize = _this$props2.placeholderSize,
+            placeholderSize = _this$props2.placeholderSize,
             showTooltip = _this$props2.showTooltip,
             fitToHeight = _this$props2.fitToHeight;
         var shortName = emoji.shortName,
             representation = emoji.representation;
         emojiComponent = /*#__PURE__*/React.createElement(EmojiPlaceholder, {
-          size: fitToHeight || _placeholderSize,
+          size: fitToHeight || placeholderSize,
           shortName: shortName,
           showTooltip: showTooltip,
           representation: representation

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

@@ -10,7 +10,8 @@ import { emojiDeleteButton, deleteButton } from './styles';
 var DeleteButton = function DeleteButton(props) {
   return jsx("span", {
     css: deleteButton,
-    className: emojiDeleteButton
+    className: emojiDeleteButton,
+    "data-testid": "emoji-delete-button"
   }, jsx(Button, {
     iconBefore: jsx(CrossCircleIcon, {
       label: deleteEmojiLabel,