@atlaskit/emoji 71.17.1 → 72.0.0

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

@@ -1,22 +1,27 @@
 /* EmojiPlaceholder.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* eslint-disable @repo/internal/deprecations/deprecation-ticket-required -- VOLTC-139 tracks removal of these deprecated re-export shims. */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.emojiPlaceholderTestId = exports.default = void 0;
+exports.default = void 0;
+Object.defineProperty(exports, "emojiPlaceholderTestId", {
+  enumerable: true,
+  get: function get() {
+    return _emojiPlaceholderTestId.emojiPlaceholderTestId;
+  }
+});
 require("./EmojiPlaceholder.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _constants = require("../../util/constants");
+var _emojiPlaceholderTestId = require("./emojiPlaceholderTestId");
 var _styles = require("./styles");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var placeholderContainer = null;
-var emojiPlaceholderTestId = exports.emojiPlaceholderTestId = function emojiPlaceholderTestId(shortName) {
-  return "emoji-placeholder-".concat(shortName);
-};
 var EmojiPlaceholder = function EmojiPlaceholder(props) {
   var shortName = props.shortName,
     _props$size = props.size,
@@ -49,7 +54,7 @@ var EmojiPlaceholder = function EmojiPlaceholder(props) {
     height: "".concat(height, "px")
   };
   return /*#__PURE__*/React.createElement("span", {
-    "data-testid": emojiPlaceholderTestId(shortName),
+    "data-testid": (0, _emojiPlaceholderTestId.emojiPlaceholderTestId)(shortName),
     "aria-busy": loading,
     role: "status",
     "aria-label": shortName
@@ -61,4 +66,7 @@ var EmojiPlaceholder = function EmojiPlaceholder(props) {
     title: showTooltip ? shortName : ''
   });
 };
-var _default = exports.default = EmojiPlaceholder;
+var _default = exports.default = EmojiPlaceholder;
+/**
+ * @deprecated Use `import { emojiPlaceholderTestId } from '@atlaskit/emoji/emoji-placeholder'` instead.
+ */

package/dist/cjs/components/common/ImageEmoji.js

@@ -0,0 +1,198 @@
+/* ImageEmoji.tsx generated by @compiled/babel-plugin v2.0.0 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageEmoji = void 0;
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _browserApis = require("@atlaskit/browser-apis");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _shouldUseAltRepresentation = require("../../api/shouldUseAltRepresentation");
+var _useInView3 = require("../../hooks/useInView");
+var _types = require("../../types");
+var _hasUfoMarked = require("../../util/analytics/hasUfoMarked");
+var _sampledUfoRenderedEmoji = require("../../util/analytics/sampledUfoRenderedEmoji");
+var _browserSupport = _interopRequireDefault(require("../../util/browser-support"));
+var _isImageRepresentation = require("../../util/is-image-representation");
+var _isMediaRepresentation = require("../../util/is-media-representation");
+var _toEmojiId = require("../../util/to-emoji-id");
+var _DeletableEmojiTooltipContent = require("./DeletableEmojiTooltipContent");
+var _DeletableEmojiTooltipContentForScreenReader = require("./DeletableEmojiTooltipContentForScreenReader");
+var _DeleteButton = _interopRequireDefault(require("./DeleteButton"));
+var _Emoji = require("./Emoji");
+var _handleDelete = require("./handleDelete");
+var _styles = require("./styles");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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((0, _toEmojiId.toEmojiId)(emoji), emoji, event);
+  }
+};
+
+// Keep as pure functional component, see renderAsSprite.
+var ImageEmoji = exports.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 = (0, _useInView3.useInView)({
+      triggerOnce: true
+    }),
+    _useInView2 = (0, _slicedToArray2.default)(_useInView, 2),
+    ref = _useInView2[0],
+    inView = _useInView2[1];
+  var ufoExp = (0, _react.useMemo)(function () {
+    return (0, _sampledUfoRenderedEmoji.sampledUfoRenderedEmoji)(emoji);
+  }, [emoji]);
+  var classes = "".concat(_styles.emojiMainStyle, " ").concat(_styles.emojiNodeStyles, " ").concat(selected ? _styles.commonSelectedStyles : '', " ").concat(selectOnHover ? _styles.selectOnHoverStyles : '', " ").concat(_styles.emojiImage, " ").concat(className ? className : '', " ").concat(showDelete ? _styles.deletableEmoji : '');
+  var width;
+  var height;
+  var src;
+  var representation = (0, _shouldUseAltRepresentation.shouldUseAltRepresentation)(emoji, fitToHeight) ? emoji.altRepresentation : emoji.representation;
+  if ((0, _isImageRepresentation.isImageRepresentation)(representation)) {
+    src = representation.imagePath;
+    width = representation.width;
+    height = representation.height;
+  } else if ((0, _isMediaRepresentation.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 = (0, _react.useCallback)(function (event) {
+    handleImageError({
+      emoji: props.emoji,
+      onLoadError: props.onLoadError
+    }, event);
+  }, [props.emoji, props.onLoadError]);
+  var onLoad = (0, _react.useCallback)(function () {
+    var mountedMark = ufoExp.metrics.marks.find(function (mark) {
+      return mark.name === _types.UfoEmojiTimings.MOUNTED_END;
+    });
+    // onload could trigger before onBeforeLoad when emojis in viewport at start, so we need to mark onload start manually.
+    if (!(0, _hasUfoMarked.hasUfoMarked)(ufoExp, _types.UfoEmojiTimings.ONLOAD_START)) {
+      ufoExp.mark(_types.UfoEmojiTimings.ONLOAD_START, mountedMark === null || mountedMark === void 0 ? void 0 : mountedMark.time);
+    }
+    var loadedStartMark = ufoExp.metrics.marks.find(function (mark) {
+      return mark.name === _types.UfoEmojiTimings.ONLOAD_START;
+    });
+    if (mountedMark && loadedStartMark) {
+      ufoExp.addMetadata({
+        lazyLoad: loadedStartMark.time > mountedMark.time
+      });
+    }
+    // onload_start
+    if (!(0, _hasUfoMarked.hasUfoMarked)(ufoExp, _types.UfoEmojiTimings.ONLOAD_END)) {
+      ufoExp.mark(_types.UfoEmojiTimings.ONLOAD_END);
+    }
+    ufoExp.success({
+      metadata: {
+        IBSupported: _browserSupport.default.supportsIntersectionObserver
+      }
+    });
+    if (onLoadSuccess) {
+      onLoadSuccess(emoji);
+    }
+  }, [emoji, onLoadSuccess, ufoExp]);
+  var onBeforeLoad = (0, _react.useCallback)(function () {
+    if (!(0, _hasUfoMarked.hasUfoMarked)(ufoExp, _types.UfoEmojiTimings.ONLOAD_START)) {
+      ufoExp.mark(_types.UfoEmojiTimings.ONLOAD_START);
+    }
+  }, [ufoExp]);
+  var onMouseOver = (0, _react.useCallback)(function (e) {
+    var _getDocument;
+    // only disable tooltip when not on focus
+    if (!((_getDocument = (0, _browserApis.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.
+  (0, _react.useEffect)(function () {
+    if (inView) {
+      onBeforeLoad();
+    }
+  }, [inView, onBeforeLoad]);
+  var emojiNode = /*#__PURE__*/_react.default.createElement("img", (0, _extends2.default)({
+    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.default.createElement(_tooltip.default, {
+      content: /*#__PURE__*/_react.default.createElement(_DeletableEmojiTooltipContent.DeletableEmojiTooltipContent, null),
+      position: "right-start",
+      tag: "span"
+    }, /*#__PURE__*/_react.default.createElement(_Emoji.EmojiNodeWrapper, (0, _extends2.default)({}, 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.default.createElement(_DeleteButton.default, {
+      onClick: function onClick(event) {
+        return (0, _handleDelete.handleDelete)(props, event);
+      }
+    }), /*#__PURE__*/_react.default.createElement(_DeletableEmojiTooltipContentForScreenReader.DeletableEmojiTooltipContentForScreenReader, {
+      emoji: emoji
+    })));
+  }
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    _react.default.createElement(_Emoji.EmojiNodeWrapper, (0, _extends2.default)({}, props, {
+      type: "image",
+      className: classes,
+      ref: ref
+    }), emojiNode)
+  );
+};

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

@@ -4,8 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createRecordSelectionDefault = void 0;
-var _analytics = require("../../util/analytics");
-var _analytics2 = require("../../util/analytics/analytics");
+var _extractErrorInfo = require("../../util/analytics/extractErrorInfo");
+var _recordFailedEmoji = require("../../util/analytics/recordFailedEmoji");
+var _recordSucceededEmoji = require("../../util/analytics/recordSucceededEmoji");
+var _ufoExperiences = require("../../util/analytics/ufoExperiences");
 /**
  * A function that will wrap any configured Emoji 'onSelection' function to ensure recordSelection is always
  * called.
@@ -18,15 +20,15 @@ var createRecordSelectionDefault = exports.createRecordSelectionDefault = functi
   return function (emojiId, emoji, event) {
     try {
       if (provider.recordSelection && emoji) {
-        _analytics.ufoExperiences['emoji-selection-recorded'].start();
+        _ufoExperiences.ufoExperiences['emoji-selection-recorded'].start();
         provider.recordSelection(emoji).then(function () {
-          fireAnalytics && fireAnalytics((0, _analytics.recordSucceededEmoji)(emoji));
-          _analytics.ufoExperiences['emoji-selection-recorded'].success();
+          fireAnalytics && fireAnalytics((0, _recordSucceededEmoji.recordSucceededEmoji)(emoji));
+          _ufoExperiences.ufoExperiences['emoji-selection-recorded'].success();
         }).catch(function (error) {
-          fireAnalytics && fireAnalytics((0, _analytics.recordFailedEmoji)(emoji));
-          _analytics.ufoExperiences['emoji-selection-recorded'].failure({
+          fireAnalytics && fireAnalytics((0, _recordFailedEmoji.recordFailedEmoji)(emoji));
+          _ufoExperiences.ufoExperiences['emoji-selection-recorded'].failure({
             metadata: {
-              error: (0, _analytics2.extractErrorInfo)(error),
+              error: (0, _extractErrorInfo.extractErrorInfo)(error),
               reason: 'recordSelection error',
               source: 'RecordSelectionDefault',
               emojiId: emoji.id

package/dist/cjs/components/common/ResourcedEmoji.js

@@ -7,9 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _ResourcedEmojiComponent = require("./ResourcedEmojiComponent");
-var _UfoErrorBoundary = require("./UfoErrorBoundary");
-var _analytics = require("../../util/analytics");
+var _sampledUfoRenderedEmoji = require("../../util/analytics/sampledUfoRenderedEmoji");
+var _ufoExperiences = require("../../util/analytics/ufoExperiences");
 var _constants = require("../../util/constants");
+var _UfoErrorBoundary = require("./UfoErrorBoundary");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var ResourcedEmoji = function ResourcedEmoji(props) {
   var emojiId = props.emojiId,
@@ -18,16 +19,16 @@ var ResourcedEmoji = function ResourcedEmoji(props) {
     if (!emojiId) {
       return;
     }
-    (0, _analytics.sampledUfoRenderedEmoji)(emojiId).start({
+    (0, _sampledUfoRenderedEmoji.sampledUfoRenderedEmoji)(emojiId).start({
       samplingRate: _constants.SAMPLING_RATE_EMOJI_RENDERED_EXP
     });
-    _analytics.ufoExperiences['emoji-rendered'].getInstance(emojiId.id || emojiId.shortName).addMetadata({
+    _ufoExperiences.ufoExperiences['emoji-rendered'].getInstance(emojiId.id || emojiId.shortName).addMetadata({
       source: 'ResourcedEmoji',
       emojiId: emojiId.id,
       isOptimisticImageURL: !!optimisticImageURL
     });
     return function () {
-      (0, _analytics.sampledUfoRenderedEmoji)(emojiId).abort({
+      (0, _sampledUfoRenderedEmoji.sampledUfoRenderedEmoji)(emojiId).abort({
         metadata: {
           source: 'ResourcedEmoji',
           reason: 'unmount'
@@ -36,7 +37,7 @@ var ResourcedEmoji = function ResourcedEmoji(props) {
     };
   }, [emojiId, optimisticImageURL]);
   return /*#__PURE__*/_react.default.createElement(_UfoErrorBoundary.UfoErrorBoundary, {
-    experiences: [_analytics.ufoExperiences['emoji-rendered'].getInstance(props.emojiId.id || props.emojiId.shortName)]
+    experiences: [_ufoExperiences.ufoExperiences['emoji-rendered'].getInstance(props.emojiId.id || props.emojiId.shortName)]
   }, /*#__PURE__*/_react.default.createElement(_ResourcedEmojiComponent.ResourcedEmojiComponent, props));
 };
 var _default = exports.default = ResourcedEmoji;

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

@@ -14,17 +14,19 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _constants = require("../../util/constants");
-var _typeHelpers = require("../../util/type-helpers");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
+var _EmojiCommonProvider = require("../../context/EmojiCommonProvider");
 var _types = require("../../types");
+var _hasUfoMarked = require("../../util/analytics/hasUfoMarked");
+var _sampledUfoRenderedEmoji = require("../../util/analytics/sampledUfoRenderedEmoji");
+var _constants = require("../../util/constants");
+var _emojiIdToEmoji = require("../../util/emojiIdToEmoji");
+var _isImageRepresentation = require("../../util/is-image-representation");
+var _isMediaRepresentation = require("../../util/is-media-representation");
+var _isPromise = require("../../util/is-promise");
 var _Emoji = _interopRequireDefault(require("./Emoji"));
 var _EmojiPlaceholder = _interopRequireDefault(require("./EmojiPlaceholder"));
-var _analytics = require("../../util/analytics");
-var _EmojiCommonProvider = require("../../context/EmojiCommonProvider");
-var _ufoExperiences = require("../../util/analytics/ufoExperiences");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _emojiIdToEmoji = require("../../util/emojiIdToEmoji");
-var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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) { (0, _defineProperty2.default)(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; }
@@ -94,7 +96,7 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
               setEmoji(undefined);
               reason = 'missing fetchByEmojiId interface';
               onEmojiLoadFail && onEmojiLoadFail(emojiId.id, reason);
-              (0, _analytics.sampledUfoRenderedEmoji)(emojiId).failure({
+              (0, _sampledUfoRenderedEmoji.sampledUfoRenderedEmoji)(emojiId).failure({
                 metadata: {
                   reason: reason,
                   source: 'ResourcedEmojiComponent'
@@ -108,8 +110,8 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
             // Use the non-optimistic path so it waits for the catalogue and tokenizes custom emoji media.
             shouldFetchOptimistically = useUnicodeEmojis ? optimisticFetch && Boolean(emojiId.id) : optimisticFetch;
             foundEmoji = _emojiProvider.fetchByEmojiId(normalizedEmojiId, shouldFetchOptimistically);
-            (0, _analytics.sampledUfoRenderedEmoji)(emojiId).mark(_types.UfoEmojiTimings.METADATA_START);
-            if ((0, _typeHelpers.isPromise)(foundEmoji)) {
+            (0, _sampledUfoRenderedEmoji.sampledUfoRenderedEmoji)(emojiId).mark(_types.UfoEmojiTimings.METADATA_START);
+            if ((0, _isPromise.isPromise)(foundEmoji)) {
               setLoaded(false);
               foundEmoji.then(function (emoji) {
                 setEmoji(emoji);
@@ -117,7 +119,7 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
                   var _reason = 'failed to find';
                   onEmojiLoadFail && onEmojiLoadFail(emojiId.id, _reason);
                   // emoji is undefined
-                  (0, _analytics.sampledUfoRenderedEmoji)(emojiId).failure({
+                  (0, _sampledUfoRenderedEmoji.sampledUfoRenderedEmoji)(emojiId).failure({
                     metadata: {
                       reason: _reason,
                       source: 'ResourcedEmojiComponent',
@@ -134,7 +136,7 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
                 setEmoji(undefined);
                 var reason = 'failed to load';
                 onEmojiLoadFail && onEmojiLoadFail(emojiId.id, reason);
-                (0, _analytics.sampledUfoRenderedEmoji)(emojiId).failure({
+                (0, _sampledUfoRenderedEmoji.sampledUfoRenderedEmoji)(emojiId).failure({
                   metadata: {
                     reason: reason,
                     source: 'ResourcedEmojiComponent',
@@ -148,12 +150,12 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
                 });
               }).finally(function () {
                 setLoaded(true);
-                (0, _analytics.sampledUfoRenderedEmoji)(emojiId).mark(_types.UfoEmojiTimings.METADATA_END);
+                (0, _sampledUfoRenderedEmoji.sampledUfoRenderedEmoji)(emojiId).mark(_types.UfoEmojiTimings.METADATA_END);
               });
             } else {
               setEmoji(foundEmoji);
               setLoaded(true);
-              (0, _analytics.sampledUfoRenderedEmoji)(emojiId).mark(_types.UfoEmojiTimings.METADATA_END);
+              (0, _sampledUfoRenderedEmoji.sampledUfoRenderedEmoji)(emojiId).mark(_types.UfoEmojiTimings.METADATA_END);
             }
           case 1:
           case "end":
@@ -169,8 +171,8 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
     if (!emojiId) {
       return;
     }
-    if (!(0, _ufoExperiences.hasUfoMarked)((0, _analytics.sampledUfoRenderedEmoji)(emojiId), _types.UfoEmojiTimings.FMP_END)) {
-      (0, _analytics.sampledUfoRenderedEmoji)(emojiId).markFMP();
+    if (!(0, _hasUfoMarked.hasUfoMarked)((0, _sampledUfoRenderedEmoji.sampledUfoRenderedEmoji)(emojiId), _types.UfoEmojiTimings.FMP_END)) {
+      (0, _sampledUfoRenderedEmoji.sampledUfoRenderedEmoji)(emojiId).markFMP();
     }
   }, [emojiId]);
   (0, _react.useMemo)(function () {
@@ -251,7 +253,7 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
       };
     }
     if (optimisticImageURL) {
-      if (emoji && ((0, _typeHelpers.isImageRepresentation)(emoji.representation) || (0, _typeHelpers.isMediaRepresentation)(emoji === null || emoji === void 0 ? void 0 : emoji.representation))) {
+      if (emoji && ((0, _isImageRepresentation.isImageRepresentation)(emoji.representation) || (0, _isMediaRepresentation.isMediaRepresentation)(emoji === null || emoji === void 0 ? void 0 : emoji.representation))) {
         var _emoji$representation = emoji.representation,
           width = _emoji$representation.width,
           height = _emoji$representation.height;
@@ -284,7 +286,7 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
     setImageLoadError(true);
     var reason = 'load error';
     onEmojiLoadFail && onEmojiLoadFail(emojiId.id, reason);
-    (0, _analytics.sampledUfoRenderedEmoji)(emojiId).failure({
+    (0, _sampledUfoRenderedEmoji.sampledUfoRenderedEmoji)(emojiId).failure({
       metadata: {
         reason: reason,
         source: 'ResourcedEmojiComponent',

package/dist/cjs/components/common/SpriteEmoji.js

@@ -0,0 +1,66 @@
+/* SpriteEmoji.tsx generated by @compiled/babel-plugin v2.0.0 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SpriteEmoji = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _Emoji = require("./Emoji");
+var _styles = require("./styles");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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) { (0, _defineProperty2.default)(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; }
+// 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
+var SpriteEmoji = exports.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(_styles.emojiNodeStyles, " ").concat(selected ? _styles.commonSelectedStyles : '', " ").concat(selectOnHover ? _styles.selectOnHoverStyles : '', " ").concat(className ? className : '');
+  var sizing = {};
+  if (fitToHeight) {
+    if ((0, _expValEquals.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(_Emoji.EmojiNodeWrapper, (0, _extends2.default)({}, props, {
+      type: "sprite",
+      className: classes
+    }), /*#__PURE__*/React.createElement("span", {
+      className: _styles.emojiSprite,
+      style: style
+    }))
+  );
+};