@atlaskit/emoji 71.17.1 → 72.0.0

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

@@ -2,22 +2,18 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["emoji", "placeholderSize"],
-  _excluded2 = ["emoji"],
-  _excluded3 = ["emoji", "placeholderSize", "showTooltip", "fitToHeight", "children"];
+  _excluded2 = ["emoji"];
 import React, { memo, useEffect, useState } from 'react';
-import { isMediaEmoji } from '../../util/type-helpers';
-import { UfoEmojiTimings } from '../../types';
-import debug from '../../util/logger';
+import { hasUfoMarked } from '../../util/analytics/hasUfoMarked';
+import { sampledUfoRenderedEmoji } from '../../util/analytics/sampledUfoRenderedEmoji';
+import { ufoExperiences } from '../../util/analytics/ufoExperiences';
+import { useSampledUFOComponentExperience } from '../../util/analytics/useSampledUFOComponentExperience';
+import { SAMPLING_RATE_EMOJI_RENDERED_EXP } from '../../util/constants';
+import { isMediaEmoji } from '../../util/is-media-emoji';
+import { CachingMediaEmoji } from './CachingMediaEmoji';
 import Emoji from './Emoji';
-import EmojiPlaceholder from './EmojiPlaceholder';
 import EmojiFallback from './EmojiFallback';
 import { UfoErrorBoundary } from './UfoErrorBoundary';
-import { sampledUfoRenderedEmoji, ufoExperiences, useSampledUFOComponentExperience } from '../../util/analytics';
-import { SAMPLING_RATE_EMOJI_RENDERED_EXP } from '../../util/constants';
-import { hasUfoMarked } from '../../util/analytics/ufoExperiences';
-import { useEmoji } from '../../hooks/useEmoji';
-import { useCallback } from 'react';
-import { extractErrorInfo } from '../../util/analytics/analytics';
 /**
  * Renders an emoji from a cached image, if required.
  */
@@ -73,80 +69,5 @@ var StandardEmoji = function StandardEmoji(props) {
     onLoadError: handleLoadError
   }, restProps));
 };
-
-/**
- * Rendering a media emoji image from a cache for media emoji, with different
- * rendering paths depending on caching strategy.
- */
-export var CachingMediaEmoji = function CachingMediaEmoji(props) {
-  var emoji = props.emoji,
-    placeholderSize = props.placeholderSize,
-    showTooltip = props.showTooltip,
-    fitToHeight = props.fitToHeight,
-    children = props.children,
-    restProps = _objectWithoutProperties(props, _excluded3);
-  var shortName = emoji.shortName,
-    representation = emoji.representation;
-  var _useState3 = useState(),
-    _useState4 = _slicedToArray(_useState3, 2),
-    cachedEmoji = _useState4[0],
-    setCachedEmoji = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    inValidImage = _useState6[0],
-    setInvalidImage = _useState6[1];
-  var _useEmoji = useEmoji(),
-    emojiProvider = _useEmoji.emojiProvider;
-  var loadEmoji = useCallback(function (emojiProvider) {
-    debug('Loading image via media cache', emoji.shortName);
-    sampledUfoRenderedEmoji(emoji).mark(UfoEmojiTimings.MEDIA_START);
-    emojiProvider.getMediaEmojiDescriptionURLWithInlineToken(emoji).then(function (cachedEmoji) {
-      setCachedEmoji(cachedEmoji);
-      setInvalidImage(false);
-      sampledUfoRenderedEmoji(emoji).mark(UfoEmojiTimings.MEDIA_END);
-    }).catch(function (error) {
-      setCachedEmoji(undefined);
-      setInvalidImage(true);
-      sampledUfoRenderedEmoji(emoji).failure({
-        metadata: {
-          error: extractErrorInfo(error),
-          reason: 'failed to load media emoji',
-          source: 'CachingMediaEmoji',
-          emojiId: emoji.id
-        }
-      });
-    });
-  }, [emoji]);
-  useEffect(function () {
-    if (emojiProvider) {
-      loadEmoji(emojiProvider);
-    }
-  }, [emojiProvider, loadEmoji]);
-  var handleLoadError = function handleLoadError(_emojiId) {
-    sampledUfoRenderedEmoji(_emojiId).failure({
-      metadata: {
-        reason: 'load error',
-        source: 'CachingMediaEmoji',
-        emojiId: _emojiId.id
-      }
-    });
-    setInvalidImage(true);
-  };
-  if (cachedEmoji && !inValidImage) {
-    return /*#__PURE__*/React.createElement(Emoji, _extends({}, restProps, {
-      showTooltip: showTooltip,
-      fitToHeight: fitToHeight,
-      emoji: cachedEmoji,
-      onLoadError: handleLoadError
-    }));
-  }
-  var imageRepresentation = representation && 'height' in representation ? representation : undefined;
-  return /*#__PURE__*/React.createElement(EmojiPlaceholder, {
-    size: fitToHeight || placeholderSize,
-    shortName: shortName,
-    showTooltip: showTooltip,
-    representation: imageRepresentation
-  });
-};
 var _default_1 = /*#__PURE__*/memo(CachingEmoji);
 export default _default_1;

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

@@ -0,0 +1,88 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["emoji", "placeholderSize", "showTooltip", "fitToHeight", "children"];
+import React, { useEffect, useState } from 'react';
+import { useCallback } from 'react';
+import { useEmoji } from '../../hooks/useEmoji';
+import { UfoEmojiTimings } from '../../types';
+import { extractErrorInfo } from '../../util/analytics/extractErrorInfo';
+import { sampledUfoRenderedEmoji } from '../../util/analytics/sampledUfoRenderedEmoji';
+import debug from '../../util/logger';
+import Emoji from './Emoji';
+import EmojiPlaceholder from './EmojiPlaceholder';
+
+/**
+ * Rendering a media emoji image from a cache for media emoji, with different
+ * rendering paths depending on caching strategy.
+ */
+export var CachingMediaEmoji = function CachingMediaEmoji(props) {
+  var emoji = props.emoji,
+    placeholderSize = props.placeholderSize,
+    showTooltip = props.showTooltip,
+    fitToHeight = props.fitToHeight,
+    children = props.children,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var shortName = emoji.shortName,
+    representation = emoji.representation;
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    cachedEmoji = _useState2[0],
+    setCachedEmoji = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    inValidImage = _useState4[0],
+    setInvalidImage = _useState4[1];
+  var _useEmoji = useEmoji(),
+    emojiProvider = _useEmoji.emojiProvider;
+  var loadEmoji = useCallback(function (emojiProvider) {
+    debug('Loading image via media cache', emoji.shortName);
+    sampledUfoRenderedEmoji(emoji).mark(UfoEmojiTimings.MEDIA_START);
+    emojiProvider.getMediaEmojiDescriptionURLWithInlineToken(emoji).then(function (cachedEmoji) {
+      setCachedEmoji(cachedEmoji);
+      setInvalidImage(false);
+      sampledUfoRenderedEmoji(emoji).mark(UfoEmojiTimings.MEDIA_END);
+    }).catch(function (error) {
+      setCachedEmoji(undefined);
+      setInvalidImage(true);
+      sampledUfoRenderedEmoji(emoji).failure({
+        metadata: {
+          error: extractErrorInfo(error),
+          reason: 'failed to load media emoji',
+          source: 'CachingMediaEmoji',
+          emojiId: emoji.id
+        }
+      });
+    });
+  }, [emoji]);
+  useEffect(function () {
+    if (emojiProvider) {
+      loadEmoji(emojiProvider);
+    }
+  }, [emojiProvider, loadEmoji]);
+  var handleLoadError = function handleLoadError(_emojiId) {
+    sampledUfoRenderedEmoji(_emojiId).failure({
+      metadata: {
+        reason: 'load error',
+        source: 'CachingMediaEmoji',
+        emojiId: _emojiId.id
+      }
+    });
+    setInvalidImage(true);
+  };
+  if (cachedEmoji && !inValidImage) {
+    return /*#__PURE__*/React.createElement(Emoji, _extends({}, restProps, {
+      showTooltip: showTooltip,
+      fitToHeight: fitToHeight,
+      emoji: cachedEmoji,
+      onLoadError: handleLoadError
+    }));
+  }
+  var imageRepresentation = representation && 'height' in representation ? representation : undefined;
+  return /*#__PURE__*/React.createElement(EmojiPlaceholder, {
+    size: fitToHeight || placeholderSize,
+    shortName: shortName,
+    showTooltip: showTooltip,
+    representation: imageRepresentation
+  });
+};

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

@@ -14,7 +14,9 @@ import { RovoIcon } from '@atlaskit/logo';
 import { Text } from '@atlaskit/primitives/compiled';
 import { generateEmojiImage } from '../../api/ai/generateEmojiImage';
 import { slugifyPrompt } from '../../util/ai-emoji';
-import { aiGenerationStartedEvent, aiGenerationCompletedEvent, aiGenerationFailedEvent } from '../../util/analytics';
+import { aiGenerationCompletedEvent } from '../../util/analytics/aiGenerationCompletedEvent';
+import { aiGenerationFailedEvent } from '../../util/analytics/aiGenerationFailedEvent';
+import { aiGenerationStartedEvent } from '../../util/analytics/aiGenerationStartedEvent';
 import { messages } from '../i18n';
 import EmojiErrorMessage from './EmojiErrorMessage';
 export var createEmojiWithRovoTestId = 'create-emoji-with-rovo';

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

@@ -1,10 +1,8 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
+import { backspace } from '../../util/keymaps';
 import { messages } from '../i18n';
 import { ToolTipContentWithKeymap } from './ToolTipContentWithKeymap';
-import { backspace } from '../../util/keymaps';
-import VisuallyHidden from '@atlaskit/visually-hidden/visually-hidden';
 export var DeletableEmojiTooltipContent = function DeletableEmojiTooltipContent() {
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
@@ -12,14 +10,4 @@ export var DeletableEmojiTooltipContent = function DeletableEmojiTooltipContent(
     description: formatMessage(messages.deleteEmojiTooltip),
     keymap: backspace
   });
-};
-export var DeletableEmojiTooltipContentForScreenReader = function DeletableEmojiTooltipContentForScreenReader(_ref) {
-  var emoji = _ref.emoji;
-  return /*#__PURE__*/React.createElement(VisuallyHidden, {
-    id: "screenreader-emoji-".concat(emoji.id)
-  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.deleteEmojiTooltipForScreenreader, {
-    values: {
-      shortName: emoji.shortName
-    }
-  })));
 };

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

@@ -0,0 +1,15 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import VisuallyHidden from '@atlaskit/visually-hidden/visually-hidden';
+import { messages } from '../i18n';
+export var DeletableEmojiTooltipContentForScreenReader = function DeletableEmojiTooltipContentForScreenReader(_ref) {
+  var emoji = _ref.emoji;
+  return /*#__PURE__*/React.createElement(VisuallyHidden, {
+    id: "screenreader-emoji-".concat(emoji.id)
+  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.deleteEmojiTooltipForScreenreader, {
+    values: {
+      shortName: emoji.shortName
+    }
+  })));
+};

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

@@ -1,41 +1,35 @@
 /* Emoji.tsx generated by @compiled/babel-plugin v2.0.0 */
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["emoji", "fitToHeight", "selected", "selectOnHover", "className", "showTooltip", "showDelete", "shouldBeInteractive", "tabIndex", "onSelected", "onMouseMove", "onFocus", "onDelete", "onLoadError", "onLoadSuccess", "disableLazyLoad", "autoWidth", "children", "type", "editorEmoji", "renderUnicodeEmojiAsImage"];
 import "./Emoji.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React, { useEffect, useCallback, useContext, useMemo, useState, forwardRef } from 'react';
+import React, { useEffect, useContext, forwardRef } from 'react';
 import { IntlContext } from 'react-intl';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import Tooltip from '@atlaskit/tooltip';
-import { shouldUseAltRepresentation } from '../../api/EmojiUtils';
-import { defaultEmojiHeight, deleteEmojiLabel, EMOJI_KEYBOARD_KEYS_SUPPORTED, KeyboardKeys, SAMPLING_RATE_EMOJI_RENDERED_EXP } from '../../util/constants';
-import { isImageRepresentation, isMediaRepresentation, isSpriteRepresentation, isUnicodeRepresentation, toEmojiId } from '../../util/type-helpers';
 import { ProviderTypes, UfoEmojiTimings } from '../../types';
-import { leftClick } from '../../util/mouse';
-import DeleteButton from './DeleteButton';
-import { emojiNodeStyles, commonSelectedStyles, selectOnHoverStyles, emojiSprite, emojiMainStyle, emojiImage, deletableEmoji } from './styles';
-import { sampledUfoRenderedEmoji, ufoExperiences, useSampledUFOComponentExperience } from '../../util/analytics';
-import browserSupport from '../../util/browser-support';
-import { useInView } from '../../hooks/useInView';
-import { hasUfoMarked } from '../../util/analytics/ufoExperiences';
-import { DeletableEmojiTooltipContent, DeletableEmojiTooltipContentForScreenReader } from './DeletableEmojiTooltipContent';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { getDocument } from '@atlaskit/browser-apis';
+import { hasUfoMarked } from '../../util/analytics/hasUfoMarked';
+import { sampledUfoRenderedEmoji } from '../../util/analytics/sampledUfoRenderedEmoji';
+import { ufoExperiences } from '../../util/analytics/ufoExperiences';
+import { useSampledUFOComponentExperience } from '../../util/analytics/useSampledUFOComponentExperience';
+import { deleteEmojiLabel, EMOJI_KEYBOARD_KEYS_SUPPORTED, KeyboardKeys, SAMPLING_RATE_EMOJI_RENDERED_EXP } from '../../util/constants';
+import { isSpriteRepresentation } from '../../util/is-sprite-representation';
+import { isUnicodeRepresentation } from '../../util/is-unicode-representation';
+import { leftClick } from '../../util/left-click';
+import { toEmojiId } from '../../util/to-emoji-id';
 import { messages } from '../i18n';
-import { isSSR } from '../../util/is-ssr';
-import { renderUnicodeEmojiToImagePath } from '../../util/renderUnicodeEmojiToImagePath';
-import EmojiPlaceholder from './EmojiPlaceholder';
+import { handleDelete } from './handleDelete';
+import { ImageEmoji } from './ImageEmoji';
+import { SpriteEmoji } from './SpriteEmoji';
+import { UnicodeEmoji } from './UnicodeEmoji';
 var emojiSpriteContainer = null;
 var emojiImageContainer = null;
 
 // Unicode emojis render as text inside a <span>, not an <img>, so they do not need
 // borderRadius (which would clip a background on hover) or the img { display: block } rule.
 var emojiUnicodeContainer = null;
-var unicodeEmojiCanvasSize = 128;
+export var unicodeEmojiCanvasSize = 128;
 var handleMouseDown = function handleMouseDown(props, event) {
   // Clicked emoji delete button
   if (event.target instanceof Element && event.target.getAttribute('aria-label') === deleteEmojiLabel) {
@@ -80,341 +74,6 @@ var handleFocus = function handleFocus(props, event) {
     onFocus(toEmojiId(emoji), emoji, event);
   }
 };
-var handleDelete = function handleDelete(props, event) {
-  var emoji = props.emoji,
-    onDelete = props.onDelete;
-  if (onDelete) {
-    onDelete(toEmojiId(emoji), emoji, event);
-  }
-};
-var handleImageError = function handleImageError(props, event) {
-  var emoji = props.emoji,
-    onLoadError = props.onLoadError;
-
-  // Hide error state (but keep space for it)
-  if (event.target) {
-    var target = event.target;
-    target.style.visibility = 'hidden';
-  }
-  if (onLoadError) {
-    onLoadError(toEmojiId(emoji), emoji, 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) {
-  var emoji = props.emoji,
-    fitToHeight = props.fitToHeight,
-    selected = props.selected,
-    selectOnHover = props.selectOnHover,
-    className = props.className;
-  var representation = emoji.representation;
-  var sprite = representation.sprite;
-  var classes = "".concat(emojiNodeStyles, " ").concat(selected ? commonSelectedStyles : '', " ").concat(selectOnHover ? selectOnHoverStyles : '', " ").concat(className ? className : '');
-  var sizing = {};
-  if (fitToHeight) {
-    if (expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true)) {
-      sizing = {
-        minHeight: "".concat(fitToHeight, "px"),
-        minWidth: "".concat(fitToHeight, "px")
-      };
-    } else {
-      sizing = {
-        width: "".concat(fitToHeight, "px"),
-        height: "".concat(fitToHeight, "px"),
-        minHeight: "".concat(fitToHeight, "px"),
-        minWidth: "".concat(fitToHeight, "px")
-      };
-    }
-  }
-  var xPositionInPercent = 100 / (sprite.column - 1) * (representation.xIndex - 0);
-  var yPositionInPercent = 100 / (sprite.row - 1) * (representation.yIndex - 0);
-  var style = _objectSpread({
-    backgroundImage: "url(".concat(sprite.url, ")"),
-    backgroundPosition: "".concat(xPositionInPercent, "% ").concat(yPositionInPercent, "%"),
-    backgroundSize: "".concat(sprite.column * 100, "% ").concat(sprite.row * 100, "%")
-  }, sizing);
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    React.createElement(EmojiNodeWrapper, _extends({}, props, {
-      type: "sprite",
-      className: classes
-    }), /*#__PURE__*/React.createElement("span", {
-      className: emojiSprite,
-      style: style
-    }))
-  );
-};
-var useUnicodeEmojiImage = function useUnicodeEmojiImage(unicodeEmoji) {
-  var _useState = useState({
-      status: 'loading'
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    state = _useState2[0],
-    setState = _useState2[1];
-  useEffect(function () {
-    var cancelled = false;
-    var imagePathToRevoke;
-    setState({
-      status: 'loading',
-      unicodeEmoji: unicodeEmoji
-    });
-    void renderUnicodeEmojiToImagePath(unicodeEmoji).then(function (imagePath) {
-      if (cancelled) {
-        if (imagePath) {
-          URL.revokeObjectURL(imagePath);
-        }
-        return;
-      }
-      imagePathToRevoke = imagePath;
-      setState(imagePath ? {
-        status: 'ready',
-        unicodeEmoji: unicodeEmoji,
-        imagePath: imagePath
-      } : {
-        status: 'failed',
-        unicodeEmoji: unicodeEmoji
-      });
-    }).catch(function () {
-      if (!cancelled) {
-        setState({
-          status: 'failed',
-          unicodeEmoji: unicodeEmoji
-        });
-      }
-    });
-    return function () {
-      cancelled = true;
-      if (imagePathToRevoke) {
-        URL.revokeObjectURL(imagePathToRevoke);
-      }
-    };
-  }, [unicodeEmoji]);
-  return state;
-};
-var UnicodeEmojiImage = function UnicodeEmojiImage(props) {
-  var emoji = props.emoji,
-    fitToHeight = props.fitToHeight,
-    showTooltip = props.showTooltip;
-  var emojiText = emoji.representation.unicodeEmoji;
-  var unicodeEmojiImage = useUnicodeEmojiImage(emojiText);
-  var hasCurrentEmojiImage = unicodeEmojiImage.unicodeEmoji === emojiText;
-  if (isSSR() || !hasCurrentEmojiImage || unicodeEmojiImage.status === 'loading') {
-    return /*#__PURE__*/React.createElement(EmojiPlaceholder, {
-      shortName: emoji.shortName,
-      showTooltip: showTooltip,
-      size: fitToHeight,
-      loading: true
-    });
-  }
-  if (unicodeEmojiImage.status === 'ready') {
-    return /*#__PURE__*/React.createElement(ImageEmoji, _extends({}, props, {
-      emoji: _objectSpread(_objectSpread({}, emoji), {}, {
-        altRepresentation: undefined,
-        representation: {
-          imagePath: unicodeEmojiImage.imagePath,
-          width: unicodeEmojiCanvasSize,
-          height: unicodeEmojiCanvasSize
-        }
-      })
-    }));
-  }
-  return /*#__PURE__*/React.createElement(EmojiPlaceholder, {
-    shortName: emoji.shortName,
-    showTooltip: showTooltip,
-    size: fitToHeight
-  });
-};
-export var UnicodeEmoji = function UnicodeEmoji(props) {
-  var emoji = props.emoji,
-    selected = props.selected,
-    selectOnHover = props.selectOnHover,
-    className = props.className,
-    fitToHeight = props.fitToHeight,
-    _props$renderUnicodeE = props.renderUnicodeEmojiAsImage,
-    renderUnicodeEmojiAsImage = _props$renderUnicodeE === void 0 ? true : _props$renderUnicodeE;
-  if (renderUnicodeEmojiAsImage) {
-    return /*#__PURE__*/React.createElement(UnicodeEmojiImage, props);
-  }
-  var classes = "".concat(emojiNodeStyles, " ").concat(selected ? commonSelectedStyles : '', " ").concat(selectOnHover ? selectOnHoverStyles : '', " ").concat(className ? className : '');
-  var emojiText = emoji.representation.unicodeEmoji;
-  var defaultSize = "".concat(fitToHeight !== null && fitToHeight !== void 0 ? fitToHeight : defaultEmojiHeight, "px");
-  var emojiSize = "var(--emoji-common-unicode-size, ".concat(defaultSize, ")");
-  var style = {
-    display: 'inline-flex',
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    fontSize: emojiSize,
-    alignItems: 'center',
-    aspectRatio: '1/1'
-  };
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    React.createElement(EmojiNodeWrapper, _extends({}, props, {
-      type: "unicode",
-      className: classes
-    }), /*#__PURE__*/React.createElement("span", {
-      style: style
-    }, emojiText))
-  );
-};
-
-// Keep as pure functional component, see renderAsSprite.
-export var ImageEmoji = function ImageEmoji(props) {
-  var emoji = props.emoji,
-    fitToHeight = props.fitToHeight,
-    selected = props.selected,
-    selectOnHover = props.selectOnHover,
-    className = props.className,
-    showDelete = props.showDelete,
-    onLoadSuccess = props.onLoadSuccess,
-    disableLazyLoad = props.disableLazyLoad,
-    autoWidth = props.autoWidth;
-  var _useInView = useInView({
-      triggerOnce: true
-    }),
-    _useInView2 = _slicedToArray(_useInView, 2),
-    ref = _useInView2[0],
-    inView = _useInView2[1];
-  var ufoExp = useMemo(function () {
-    return sampledUfoRenderedEmoji(emoji);
-  }, [emoji]);
-  var classes = "".concat(emojiMainStyle, " ").concat(emojiNodeStyles, " ").concat(selected ? commonSelectedStyles : '', " ").concat(selectOnHover ? selectOnHoverStyles : '', " ").concat(emojiImage, " ").concat(className ? className : '', " ").concat(showDelete ? deletableEmoji : '');
-  var width;
-  var height;
-  var src;
-  var representation = shouldUseAltRepresentation(emoji, fitToHeight) ? emoji.altRepresentation : emoji.representation;
-  if (isImageRepresentation(representation)) {
-    src = representation.imagePath;
-    width = representation.width;
-    height = representation.height;
-  } else if (isMediaRepresentation(representation)) {
-    src = representation.mediaPath;
-    width = representation.width;
-    height = representation.height;
-  }
-  var sizing = {};
-  if (fitToHeight && width && height) {
-    var sizingWidth = autoWidth ? 'auto' : fitToHeight / height * width;
-    // Presize image, to prevent reflow due to size changes after loading
-    sizing = {
-      width: sizingWidth,
-      height: fitToHeight
-    };
-  }
-  var onError = useCallback(function (event) {
-    handleImageError({
-      emoji: props.emoji,
-      onLoadError: props.onLoadError
-    }, event);
-  }, [props.emoji, props.onLoadError]);
-  var onLoad = useCallback(function () {
-    var mountedMark = ufoExp.metrics.marks.find(function (mark) {
-      return mark.name === UfoEmojiTimings.MOUNTED_END;
-    });
-    // 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)) {
-      ufoExp.mark(UfoEmojiTimings.ONLOAD_START, mountedMark === null || mountedMark === void 0 ? void 0 : mountedMark.time);
-    }
-    var loadedStartMark = ufoExp.metrics.marks.find(function (mark) {
-      return mark.name === UfoEmojiTimings.ONLOAD_START;
-    });
-    if (mountedMark && loadedStartMark) {
-      ufoExp.addMetadata({
-        lazyLoad: loadedStartMark.time > mountedMark.time
-      });
-    }
-    // onload_start
-    if (!hasUfoMarked(ufoExp, UfoEmojiTimings.ONLOAD_END)) {
-      ufoExp.mark(UfoEmojiTimings.ONLOAD_END);
-    }
-    ufoExp.success({
-      metadata: {
-        IBSupported: browserSupport.supportsIntersectionObserver
-      }
-    });
-    if (onLoadSuccess) {
-      onLoadSuccess(emoji);
-    }
-  }, [emoji, onLoadSuccess, ufoExp]);
-  var onBeforeLoad = useCallback(function () {
-    if (!hasUfoMarked(ufoExp, UfoEmojiTimings.ONLOAD_START)) {
-      ufoExp.mark(UfoEmojiTimings.ONLOAD_START);
-    }
-  }, [ufoExp]);
-  var onMouseOver = useCallback(function (e) {
-    var _getDocument;
-    // only disable tooltip when not on focus
-    if (!((_getDocument = getDocument()) !== null && _getDocument !== void 0 && (_getDocument = _getDocument.activeElement) !== null && _getDocument !== void 0 && _getDocument.contains(e.target))) {
-      e.stopPropagation();
-    }
-  }, []);
-
-  // 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) {
-      onBeforeLoad();
-    }
-  }, [inView, onBeforeLoad]);
-  var emojiNode = /*#__PURE__*/React.createElement("img", _extends({
-    loading: disableLazyLoad ? 'eager' : 'lazy',
-    src: src,
-    key: src,
-    alt: emoji.name || emoji.shortName || '',
-    "data-emoji-short-name": emoji.shortName,
-    "data-emoji-id": emoji.id,
-    "data-emoji-text": emoji.fallback || emoji.shortName
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: "emoji"
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: {
-      visibility: 'visible'
-    },
-    onError: onError,
-    onLoad: onLoad
-  }, sizing, {
-    "data-vc": "emoji"
-  }));
-
-  // show a tooltip for deletable emoji only on focus
-  if (showDelete) {
-    return /*#__PURE__*/React.createElement(Tooltip, {
-      content: /*#__PURE__*/React.createElement(DeletableEmojiTooltipContent, null),
-      position: "right-start",
-      tag: "span"
-    }, /*#__PURE__*/React.createElement(EmojiNodeWrapper, _extends({}, props, {
-      "aria-labelledby": "screenreader-emoji-".concat(emoji.id),
-      type: "image"
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      ,
-      className: classes,
-      ref: ref,
-      showTooltip: false // avoid showing both tooltip and title
-      ,
-      onMouseOver: onMouseOver
-    }), emojiNode, /*#__PURE__*/React.createElement(DeleteButton, {
-      onClick: function onClick(event) {
-        return handleDelete(props, event);
-      }
-    }), /*#__PURE__*/React.createElement(DeletableEmojiTooltipContentForScreenReader, {
-      emoji: emoji
-    })));
-  }
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    React.createElement(EmojiNodeWrapper, _extends({}, props, {
-      type: "image",
-      className: classes,
-      ref: ref
-    }), emojiNode)
-  );
-};
 export var EmojiNodeWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
   var _emoji$name;
   var emoji = props.emoji,