@atlaskit/emoji 71.17.0 → 72.0.0

package/dist/esm/components/common/EmojiActions.compiled.css

@@ -5,8 +5,6 @@
 ._16jlkb7n{flex-grow:1}
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._16qsjgpa{box-shadow:0 1px 1px 0 var(--ds-border,#0b120e24)}
-._18u019bv{margin-left:10px}
-._18u0r5cr{margin-left:var(--ds-space-negative-050,-4px)}
 ._19bv12x7{padding-left:var(--ds-space-075,6px)}
 ._19bvidpf{padding-left:0}
 ._1bahesu3{justify-content:flex-end}
@@ -15,9 +13,7 @@
 ._1o9zidpf{flex-shrink:0}
 ._1o9zkb7n{flex-shrink:1}
 ._1pbydx66{z-index:9999}
-._1wpz1h6o{align-self:center}
 ._1xi2idpf{right:0}
-._2hwx1i6y{margin-right:var(--ds-space-negative-025,-2px)}
 ._4cvr1h6o{align-items:center}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._ca0q12x7{padding-top:var(--ds-space-075,6px)}
@@ -28,7 +24,5 @@
 ._kqswstnw{position:absolute}
 ._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
 ._n3td1crf{padding-bottom:9pt}
-._otyr19bv{margin-bottom:10px}
-._p12f3sup{max-width:285px}
 ._u5f312x7{padding-right:var(--ds-space-075,6px)}
 ._u5f319bv{padding-right:10px}

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

@@ -4,37 +4,20 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./EmojiActions.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { Fragment, useState, useRef, memo, useLayoutEffect, useCallback, useEffect } from 'react';
+import { useState, useRef, memo, useLayoutEffect, useCallback, useEffect } from 'react';
+import { injectIntl } from 'react-intl';
 import { fg } from '@atlaskit/platform-feature-flags';
-import FeatureGates from '@atlaskit/feature-gate-js-client';
-import { FormattedMessage, injectIntl } from 'react-intl';
+import { DEFAULT_TONE } from '../../util/constants';
+import { messages } from '../i18n';
+import { EmojiPickerListSearch } from '../picker/EmojiPickerListSearch';
+import { AddOwnEmoji } from './AddOwnEmoji';
 import EmojiDeletePreview from './EmojiDeletePreview';
 import EmojiUploadPicker from './EmojiUploadPicker';
-import TonePreviewButton from './TonePreviewButton';
-import ToneSelector from './ToneSelector';
+import { isRefreshEmojiPickerEnabled } from './isRefreshEmojiPickerEnabled';
 import ProductivityColorSelector, { productivityColorSelectorId } from './ProductivityColorSelector';
-import { EmojiPickerListSearch } from '../picker/EmojiPickerListSearch';
-import { messages } from '../i18n';
-import AkButton from '@atlaskit/button/standard-button';
-import AddIcon from '@atlaskit/icon/core/add';
 import { setSkinToneAriaLabelText } from './setSkinToneAriaLabelText';
-import { emojiPickerAddEmoji } from './styles';
-import { DEFAULT_TONE } from '../../util/constants';
-import { Box } from '@atlaskit/primitives/compiled';
-var isRefreshEmojiPickerEnabled = function isRefreshEmojiPickerEnabled() {
-  if (!FeatureGates.initializeCompleted()) {
-    return false;
-  }
-
-  // eslint-disable-next-line @atlaskit/platform/use-recommended-utils
-  var isEnabled = FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false);
-  return isEnabled;
-};
-var styles = {
-  icon: "_18u0r5cr _2hwx1i6y"
-};
-var addCustomEmoji = null;
-var addCustomEmojiButton = null;
+import TonePreviewButton from './TonePreviewButton';
+import ToneSelector from './ToneSelector';
 var emojiActionsWrapper = null;
 var emojiToneSelectorContainer = null;
 var productivityColorPopup = null;
@@ -99,43 +82,6 @@ var ProductivityColorPopupContent = function ProductivityColorPopupContent(_ref)
 };
 export var emojiActionsTestId = 'emoji-actions';
 export var uploadEmojiTestId = 'upload-emoji';
-
-// Generic Type for the wrapped functional component
-
-export var AddOwnEmoji = function AddOwnEmoji(props) {
-  var onOpenUpload = props.onOpenUpload,
-    uploadEnabled = props.uploadEnabled;
-  var handleOpenUpload = useCallback(function (event) {
-    if (fg('platform_emoji_keep_picker_open_on_upload') || isRefreshEmojiPickerEnabled()) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-    onOpenUpload();
-  }, [onOpenUpload]);
-  return /*#__PURE__*/React.createElement(Fragment, null, uploadEnabled && /*#__PURE__*/React.createElement("div", {
-    "data-testid": uploadEmojiTestId,
-    className: ax(["_1wpz1h6o _18u019bv _otyr19bv"])
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.addCustomEmojiLabel, function (label) {
-    return /*#__PURE__*/React.createElement(AkButton, {
-      onClick: handleOpenUpload,
-      iconBefore: /*#__PURE__*/React.createElement(Box, {
-        xcss: styles.icon
-      }, /*#__PURE__*/React.createElement(AddIcon, {
-        color: "currentColor",
-        label: ""
-      })),
-      appearance: "subtle"
-      // TODO: (from codemod) Buttons with "component", "css" or "style" prop can't be automatically migrated with codemods. Please migrate it manually.
-      // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
-      ,
-
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
-      className: ax(["_p12f3sup", emojiPickerAddEmoji]),
-      tabIndex: 0,
-      id: "add-custom-emoji"
-    }, label);
-  })));
-};
 var TonesWrapper = function TonesWrapper(props) {
   var activeCategoryId = props.activeCategoryId,
     activeAtlassianSubcategory = props.activeAtlassianSubcategory,

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

@@ -1,14 +1,13 @@
 /* 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. */
 import "./EmojiPlaceholder.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { defaultEmojiHeight, defaultDenseEmojiHeight } from '../../util/constants';
+import { emojiPlaceholderTestId } from './emojiPlaceholderTestId';
 import { placeholder } from './styles';
 var placeholderContainer = null;
-export var emojiPlaceholderTestId = function emojiPlaceholderTestId(shortName) {
-  return "emoji-placeholder-".concat(shortName);
-};
 var EmojiPlaceholder = function EmojiPlaceholder(props) {
   var shortName = props.shortName,
     _props$size = props.size,
@@ -53,4 +52,9 @@ var EmojiPlaceholder = function EmojiPlaceholder(props) {
     title: showTooltip ? shortName : ''
   });
 };
-export default EmojiPlaceholder;
+export default EmojiPlaceholder;
+
+/**
+ * @deprecated Use `import { emojiPlaceholderTestId } from '@atlaskit/emoji/emoji-placeholder'` instead.
+ */
+export { emojiPlaceholderTestId } from './emojiPlaceholderTestId';

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

@@ -0,0 +1,189 @@
+/* ImageEmoji.tsx generated by @compiled/babel-plugin v2.0.0 */
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useEffect, useCallback, useMemo } from 'react';
+import { getDocument } from '@atlaskit/browser-apis';
+import Tooltip from '@atlaskit/tooltip';
+import { shouldUseAltRepresentation } from '../../api/shouldUseAltRepresentation';
+import { useInView } from '../../hooks/useInView';
+import { UfoEmojiTimings } from '../../types';
+import { hasUfoMarked } from '../../util/analytics/hasUfoMarked';
+import { sampledUfoRenderedEmoji } from '../../util/analytics/sampledUfoRenderedEmoji';
+import browserSupport from '../../util/browser-support';
+import { isImageRepresentation } from '../../util/is-image-representation';
+import { isMediaRepresentation } from '../../util/is-media-representation';
+import { toEmojiId } from '../../util/to-emoji-id';
+import { DeletableEmojiTooltipContent } from './DeletableEmojiTooltipContent';
+import { DeletableEmojiTooltipContentForScreenReader } from './DeletableEmojiTooltipContentForScreenReader';
+import DeleteButton from './DeleteButton';
+import { EmojiNodeWrapper } from './Emoji';
+import { handleDelete } from './handleDelete';
+import { emojiNodeStyles, commonSelectedStyles, selectOnHoverStyles, emojiMainStyle, emojiImage, deletableEmoji } from './styles';
+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);
+  }
+};
+
+// 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)
+  );
+};

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

@@ -1,5 +1,7 @@
-import { recordFailedEmoji, recordSucceededEmoji, ufoExperiences } from '../../util/analytics';
-import { extractErrorInfo } from '../../util/analytics/analytics';
+import { extractErrorInfo } from '../../util/analytics/extractErrorInfo';
+import { recordFailedEmoji } from '../../util/analytics/recordFailedEmoji';
+import { recordSucceededEmoji } from '../../util/analytics/recordSucceededEmoji';
+import { ufoExperiences } from '../../util/analytics/ufoExperiences';
 
 /**
  * A function that will wrap any configured Emoji 'onSelection' function to ensure recordSelection is always

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

@@ -1,8 +1,9 @@
 import React, { useEffect } from 'react';
 import { ResourcedEmojiComponent } from './ResourcedEmojiComponent';
-import { UfoErrorBoundary } from './UfoErrorBoundary';
-import { sampledUfoRenderedEmoji, ufoExperiences } from '../../util/analytics';
+import { sampledUfoRenderedEmoji } from '../../util/analytics/sampledUfoRenderedEmoji';
+import { ufoExperiences } from '../../util/analytics/ufoExperiences';
 import { SAMPLING_RATE_EMOJI_RENDERED_EXP } from '../../util/constants';
+import { UfoErrorBoundary } from './UfoErrorBoundary';
 var ResourcedEmoji = function ResourcedEmoji(props) {
   var emojiId = props.emojiId,
     optimisticImageURL = props.optimisticImageURL;

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

@@ -8,17 +8,19 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 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, { useCallback, useEffect, useMemo, useState } from 'react';
-import { defaultEmojiHeight } from '../../util/constants';
-import { isImageRepresentation, isMediaRepresentation, isPromise } from '../../util/type-helpers';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
+import { EmojiCommonProvider } from '../../context/EmojiCommonProvider';
 import { UfoEmojiTimings } from '../../types';
+import { hasUfoMarked } from '../../util/analytics/hasUfoMarked';
+import { sampledUfoRenderedEmoji } from '../../util/analytics/sampledUfoRenderedEmoji';
+import { defaultEmojiHeight } from '../../util/constants';
+import { emojiIdToEmoji } from '../../util/emojiIdToEmoji';
+import { isImageRepresentation } from '../../util/is-image-representation';
+import { isMediaRepresentation } from '../../util/is-media-representation';
+import { isPromise } from '../../util/is-promise';
 import Emoji from './Emoji';
 import EmojiPlaceholder from './EmojiPlaceholder';
-import { sampledUfoRenderedEmoji } from '../../util/analytics';
-import { EmojiCommonProvider } from '../../context/EmojiCommonProvider';
-import { hasUfoMarked } from '../../util/analytics/ufoExperiences';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { emojiIdToEmoji } from '../../util/emojiIdToEmoji';
-import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 var ignoreWrapperStyles = null;
 var ResourcedEmojiComponentRenderStatesEnum = /*#__PURE__*/function (ResourcedEmojiComponentRenderStatesEnum) {
   ResourcedEmojiComponentRenderStatesEnum["INITIAL"] = "INITIAL";

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

@@ -0,0 +1,58 @@
+/* SpriteEmoji.tsx generated by @compiled/babel-plugin v2.0.0 */
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import * as React from 'react';
+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 { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { EmojiNodeWrapper } from './Emoji';
+import { emojiNodeStyles, commonSelectedStyles, selectOnHoverStyles, emojiSprite } from './styles';
+
+// 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
+    }))
+  );
+};

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

@@ -1,135 +1,12 @@
-/* ToneSelector.tsx generated by @compiled/babel-plugin v2.0.0 */
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import "./ToneSelector.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 FeatureGates from '@atlaskit/feature-gate-js-client';
-import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react';
-import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { createAndFireEventInElementsChannel, toneSelectedEvent, toneSelectorOpenedEvent } from '../../util/analytics';
-import { setSkinToneAriaLabelText } from './setSkinToneAriaLabelText';
-import EmojiRadioButton from './EmojiRadioButton';
-import { useIntl } from 'react-intl';
-import { messages } from '../i18n';
-var isRefreshEmojiPickerEnabled = function isRefreshEmojiPickerEnabled() {
-  if (!FeatureGates.initializeCompleted()) {
-    return false;
-  }
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
-  // eslint-disable-next-line @atlaskit/platform/use-recommended-utils
-  var isEnabled = FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false);
-  return isEnabled;
-};
-var hidden = null;
+import { memo } from 'react';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { ToneSelectorInternal } from './ToneSelectorInternal';
 export var toneSelectorTestId = 'tone-selector';
-var extractAllTones = function extractAllTones(emoji) {
-  if (emoji.skinVariations) {
-    return [emoji].concat(_toConsumableArray(emoji.skinVariations));
-  }
-  return [emoji];
-};
-export var ToneSelectorInternal = function ToneSelectorInternal(props) {
-  var createAnalyticsEvent = props.createAnalyticsEvent,
-    emoji = props.emoji,
-    onToneSelected = props.onToneSelected,
-    onToneClose = props.onToneClose,
-    selectedTone = props.selectedTone,
-    isVisible = props.isVisible;
-  var isMounted = useRef(false);
-  var selectedToneRadioRef = useRef(null);
-  // Refs for all radio inputs — used for FG-gated arrow-key focus management
-  var radioRefs = useRef([]);
-  var _useIntl = useIntl(),
-    formatMessage = _useIntl.formatMessage;
-  var emojiToneCollection = useMemo(function () {
-    var selectedToneIndex = -1;
-    var toneColletion = extractAllTones(emoji).map(function (tone, index) {
-      var isSelected = index === selectedTone;
-      if (isSelected) {
-        selectedToneIndex = index;
-      }
-      return _objectSpread(_objectSpread({}, tone), {}, {
-        isSelected: isSelected,
-        label: setSkinToneAriaLabelText(tone.name),
-        toneIndex: index
-      });
-    });
-
-    // push description of selected tone to the end of the array
-    // so that it gets rendered last/rightmost
-    toneColletion.push(toneColletion.splice(selectedToneIndex, 1)[0]);
-    return toneColletion;
-  }, [emoji, selectedTone]);
-  useEffect(function () {
-    if (isVisible) {
-      var _selectedToneRadioRef;
-      (_selectedToneRadioRef = selectedToneRadioRef.current) === null || _selectedToneRadioRef === void 0 || _selectedToneRadioRef.focus();
-    }
-  }, [isVisible, selectedToneRadioRef]);
-  var fireAnalyticsEvent = function fireAnalyticsEvent(event) {
-    if (createAnalyticsEvent) {
-      createAndFireEventInElementsChannel(event)(createAnalyticsEvent);
-    }
-  };
-  var _onArrowKey = useCallback(function (currentIndex, direction) {
-    var _radioRefs$current$ne;
-    var len = radioRefs.current.length;
-    var nextIndex = (currentIndex + direction + len) % len;
-    (_radioRefs$current$ne = radioRefs.current[nextIndex]) === null || _radioRefs$current$ne === void 0 || _radioRefs$current$ne.focus();
-  }, []);
-  var onToneSelectedHandler = function onToneSelectedHandler(toneValue) {
-    return function () {
-      if (selectedTone === toneValue && onToneClose) {
-        onToneClose();
-        return;
-      }
-      onToneSelected(toneValue);
-      var toneList = ['default', 'light', 'mediumLight', 'medium', 'mediumDark', 'dark'];
-      fireAnalyticsEvent(toneSelectedEvent({
-        skinToneModifier: toneList[toneValue]
-      }));
-    };
-  };
-  if (!isMounted.current) {
-    fireAnalyticsEvent(toneSelectorOpenedEvent({}));
-  }
-  isMounted.current = true;
-  return /*#__PURE__*/React.createElement("div", {
-    role: "radiogroup",
-    "data-testid": toneSelectorTestId,
-    id: "emoji-picker-tone-selector",
-    "aria-label": formatMessage(messages.emojiSelectSkinToneListAriaLabelText),
-    className: ax([!isVisible && "_tzy4idpf _3um015vq _1e0cglyw"])
-  }, emojiToneCollection.map(function (tone, renderIndex) {
-    return isRefreshEmojiPickerEnabled() ? /*#__PURE__*/React.createElement(EmojiRadioButton, {
-      ref: function ref(el) {
-        radioRefs.current[renderIndex] = el;
-        if (tone.isSelected && selectedToneRadioRef) {
-          selectedToneRadioRef.current = el;
-        }
-      },
-      defaultChecked: tone.isSelected,
-      ariaLabelText: tone.label,
-      key: "".concat(tone.id),
-      emoji: tone,
-      onArrowKey: function onArrowKey(direction) {
-        return _onArrowKey(renderIndex, direction);
-      },
-      onSelected: onToneSelectedHandler(tone.toneIndex),
-      selectOnHover: true
-    }) : /*#__PURE__*/React.createElement(EmojiRadioButton, {
-      ref: tone.isSelected ? selectedToneRadioRef : null,
-      defaultChecked: tone.isSelected,
-      ariaLabelText: tone.label,
-      key: "".concat(tone.id),
-      emoji: tone,
-      onSelected: onToneSelectedHandler(tone.toneIndex),
-      selectOnHover: true
-    });
-  }));
-};
-var ToneSelector = withAnalyticsEvents()(ToneSelectorInternal);
+export var ToneSelector = withAnalyticsEvents()(ToneSelectorInternal);
 var _default_1 = /*#__PURE__*/memo(ToneSelector);
 export default _default_1;