@atlaskit/emoji 68.0.4 → 69.0.0

package/dist/es2019/components/compiled/common/ToneSelector.js

@@ -0,0 +1,99 @@
+/* ToneSelector.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./ToneSelector.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { memo, useEffect, useMemo, useRef } from 'react';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { createAndFireEventInElementsChannel, toneSelectedEvent, toneSelectorOpenedEvent } from '../../../util/analytics';
+import { setSkinToneAriaLabelText } from '../../common/setSkinToneAriaLabelText';
+import EmojiRadioButton from './EmojiRadioButton';
+import { useIntl } from 'react-intl-next';
+import { messages } from '../../i18n';
+const hidden = null;
+export const toneSelectorTestId = 'tone-selector';
+const extractAllTones = emoji => {
+  if (emoji.skinVariations) {
+    return [emoji, ...emoji.skinVariations];
+  }
+  return [emoji];
+};
+export const ToneSelectorInternal = props => {
+  const {
+    createAnalyticsEvent,
+    emoji,
+    onToneSelected,
+    onToneClose,
+    selectedTone,
+    isVisible
+  } = props;
+  const isMounted = useRef(false);
+  const selectedToneRadioRef = useRef(null);
+  const {
+    formatMessage
+  } = useIntl();
+  const emojiToneCollection = useMemo(() => {
+    var selectedToneIndex = -1;
+    const toneColletion = extractAllTones(emoji).map((tone, index) => {
+      const isSelected = index === selectedTone;
+      if (isSelected) {
+        selectedToneIndex = index;
+      }
+      return {
+        ...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(() => {
+    if (isVisible) {
+      var _selectedToneRadioRef;
+      (_selectedToneRadioRef = selectedToneRadioRef.current) === null || _selectedToneRadioRef === void 0 ? void 0 : _selectedToneRadioRef.focus();
+    }
+  }, [isVisible, selectedToneRadioRef]);
+  const fireAnalyticsEvent = event => {
+    if (createAnalyticsEvent) {
+      createAndFireEventInElementsChannel(event)(createAnalyticsEvent);
+    }
+  };
+  const onToneSelectedHandler = toneValue => () => {
+    if (selectedTone === toneValue && onToneClose) {
+      onToneClose();
+      return;
+    }
+    onToneSelected(toneValue);
+    const 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(tone => {
+    return /*#__PURE__*/React.createElement(EmojiRadioButton, {
+      ref: tone.isSelected ? selectedToneRadioRef : null,
+      defaultChecked: tone.isSelected,
+      ariaLabelText: tone.label,
+      key: `${tone.id}`,
+      emoji: tone,
+      onSelected: onToneSelectedHandler(tone.toneIndex),
+      selectOnHover: true
+    });
+  }));
+};
+const ToneSelector = withAnalyticsEvents()(ToneSelectorInternal);
+export default /*#__PURE__*/memo(ToneSelector);

package/dist/es2019/components/compiled/common/ToolTipContentWithKeymap.compiled.css

@@ -0,0 +1,7 @@
+
+._2rko1l7b{border-radius:3px}._19bvv77o{padding-left:var(--ds-space-025,2px)}
+._bfhk17rn{background-color:var(--ds-background-inverse-subtle,#505f79)}
+._ca0qidpf{padding-top:0}
+._jqf61teg{label:tooltip-shortcut}
+._n3tdidpf{padding-bottom:0}
+._u5f3v77o{padding-right:var(--ds-space-025,2px)}

package/dist/es2019/components/compiled/common/ToolTipContentWithKeymap.js

@@ -0,0 +1,17 @@
+/* ToolTipContentWithKeymap.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./ToolTipContentWithKeymap.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { Fragment } from 'react';
+import { N400 } from '@atlaskit/theme/colors';
+import { formatShortcut } from '../../../util/keymaps';
+const tooltipShortcutStyle = null;
+export const ToolTipContentWithKeymap = /*#__PURE__*/React.memo(({
+  description,
+  shortcutOverride,
+  keymap
+}) => {
+  const shortcut = shortcutOverride || keymap && formatShortcut(keymap);
+  return shortcut || description ? /*#__PURE__*/React.createElement(Fragment, null, description, shortcut && description && '\u00A0', shortcut && /*#__PURE__*/React.createElement("span", {
+    className: ax(["_2rko1l7b _bfhk17rn _ca0qidpf _n3tdidpf _19bvv77o _u5f3v77o _jqf61teg"])
+  }, shortcut)) : null;
+});

package/dist/es2019/components/picker/EmojiPickerFooter.js

@@ -5,7 +5,7 @@
 import { memo } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import { EmojiPreviewComponent } from '../common/EmojiPreviewComponent';
+import { EmojiPreviewComponent } from '../common/EmojiPreviewComponent'; // ED-26865: use compiled EmojiPreviewComponent when migrating picker to compiled css
 import { emojiPickerFooter, emojiPickerFooterWithTopShadow } from './styles';
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 const previewFooterClassnames = [emojiPickerFooter, emojiPickerFooterWithTopShadow];

package/dist/es2019/components/picker/EmojiPickerList.js

@@ -12,7 +12,8 @@ import { CategoryDescriptionMap } from './categories';
 import CategoryTracker from './CategoryTracker';
 import { sizes } from './EmojiPickerSizes';
 import { CategoryHeadingItem, EmojisRowItem, LoadingItem, virtualItemRenderer } from './EmojiPickerVirtualItems';
-import EmojiActions from '../common/EmojiActions';
+import EmojiActions from '../common/EmojiActions'; // ED-26865: use compiled EmojiActions when migrating picker to compiled css
+
 import { emojiPickerList } from './styles';
 import { emojiPickerHeightOffset, scrollToRow } from './utils';
 import { VirtualList } from './VirtualList';

package/dist/es2019/components/picker/EmojiPickerVirtualItems.js

@@ -34,7 +34,8 @@ export class LoadingItem extends AbstractItem {
     jsx("div", {
       css: emojiPickerSpinner
     }, jsx("div", null, jsx(Spinner, {
-      size: "medium"
+      size: "medium",
+      interactionName: "emoji-picker-loading-item-spinner"
     }))));
   }
 }

package/dist/es2019/components/typeahead/EmojiTypeAheadItem.js

@@ -10,7 +10,7 @@ import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
 import { toEmojiId } from '../../util/type-helpers';
 import { leftClick } from '../../util/mouse';
-import { EmojiPreviewComponent } from '../common/EmojiPreviewComponent';
+import { EmojiPreviewComponent } from '../common/EmojiPreviewComponent'; // ED-26864: use compiled EmojiPreviewComponent when migrating typeahead to compiled css
 import { EmojiCommonProvider } from '../../context/EmojiCommonProvider';
 import { typeAheadItem, selected as selectedStyles, typeAheadItemRow, typeaheadSelected } from './styles';
 class EmojiTypeAheadItemInternal extends PureComponent {

package/dist/es2019/components/typeahead/EmojiTypeAheadList.js

@@ -11,7 +11,7 @@ import { emojiTypeAheadMaxHeight } from '../../util/shared-styles';
 import { toEmojiId } from '../../util/type-helpers';
 import debug from '../../util/logger';
 import { actualMouseMove, mouseLocation } from '../../util/mouse';
-import Scrollable from '../common/Scrollable';
+import Scrollable from '../common/Scrollable'; // ED-26864: use compiled Scrollable when migrating typeahead to compiled css
 import EmojiItem from './EmojiTypeAheadItem';
 import { emojiTypeAheadSpinner, emojiTypeAheadSpinnerContainer, typeAheadEmpty, typeAheadList, typeAheadListContainer } from './styles';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -227,7 +227,8 @@ export default class EmojiTypeAheadList extends PureComponent {
       }, jsx("div", {
         css: emojiTypeAheadSpinner
       }, jsx(Spinner, {
-        size: "medium"
+        size: "medium",
+        interactionName: "empji-type-ahead-list-spinner"
       })));
     } else {
       listBody = this.renderItems(emojis);

package/dist/es2019/components/uploader/EmojiUploadComponent.js

@@ -7,7 +7,7 @@ import { useState, memo, useEffect } from 'react';
 import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { supportsUploadFeature } from '../../api/EmojiResource';
-import EmojiUploadPickerWithIntl from '../common/EmojiUploadPicker';
+import EmojiUploadPickerWithIntl from '../common/EmojiUploadPicker'; // ED-26866: use compiled EmojiUploadPicker when migrating uploader to compiled css
 import { uploadEmoji } from '../common/UploadEmoji';
 import { createAndFireEventInElementsChannel, selectedFileEvent, uploadCancelButton, uploadConfirmButton } from '../../util/analytics';
 import { emojiUploadFooter, emojiUploadWidget } from './styles';

package/dist/es2019/element.js

@@ -1,3 +1,10 @@
-export { default as EmojiPlaceholder } from './components/common/EmojiPlaceholder';
-export { default as Emoji } from './components/common/Emoji';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
+import { default as CompiledEmojiPlaceholder } from './components/compiled/common/EmojiPlaceholder';
+import { default as EmotionEmojiPlaceholder } from './components/common/EmojiPlaceholder';
+const EmojiPlaceholder = componentWithFG('platform_editor_css_migrate_emoji', CompiledEmojiPlaceholder, EmotionEmojiPlaceholder);
+export { EmojiPlaceholder };
+import { default as CompiledEmoji } from './components/compiled/common/Emoji';
+import { default as EmotionEmoji } from './components/common/Emoji';
+const Emoji = componentWithFG('platform_editor_css_migrate_emoji', CompiledEmoji, EmotionEmoji);
+export { Emoji };
 export { default as ResourcedEmoji } from './components/common/ResourcedEmoji';

package/dist/es2019/index.js

@@ -1,6 +1,5 @@
 import { AbstractResource } from '@atlaskit/util-service-support';
-import Emoji from './components/common/Emoji';
-import EmojiPlaceholder from './components/common/EmojiPlaceholder';
+import { Emoji, EmojiPlaceholder } from './element';
 import ResourcedEmoji from './components/common/ResourcedEmoji';
 import EmojiPicker, { preloadEmojiPicker } from './components/picker/EmojiPicker';
 import EmojiUploader from './components/uploader/EmojiUploader';

package/dist/es2019/util/analytics/analytics.js

@@ -8,7 +8,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/emoji",
-    packageVersion: "68.0.4",
+    packageVersion: "69.0.0",
     ...attributes
   }
 });

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

@@ -8,9 +8,12 @@ import React, { memo, useEffect, useState } from 'react';
 import { isMediaEmoji } from '../../util/type-helpers';
 import { UfoEmojiTimings } from '../../types';
 import debug from '../../util/logger';
-import Emoji from './Emoji';
-import EmojiFallback from './EmojiFallback';
-import EmojiPlaceholder from './EmojiPlaceholder';
+import { default as EmotionEmoji } from './Emoji';
+import { default as CompiledEmoji } from '../compiled/common/Emoji';
+import { default as EmotionEmojiPlaceholder } from './EmojiPlaceholder';
+import { default as CompiledEmojiPlaceholder } from '../compiled/common/EmojiPlaceholder';
+import { default as EmotionEmojiFallback } from './EmojiFallback';
+import { default as CompiledEmojiFallback } from '../compiled/common/EmojiFallback';
 import { UfoErrorBoundary } from './UfoErrorBoundary';
 import { sampledUfoRenderedEmoji, ufoExperiences, useSampledUFOComponentExperience } from '../../util/analytics';
 import { SAMPLING_RATE_EMOJI_RENDERED_EXP } from '../../util/constants';
@@ -51,9 +54,15 @@ export var CachingEmoji = function CachingEmoji(props) {
         emoji: emoji
       }, restProps));
     } else {
-      return /*#__PURE__*/React.createElement(Emoji, _extends({
-        emoji: emoji
-      }, restProps));
+      if (fg('platform_editor_css_migrate_emoji')) {
+        return /*#__PURE__*/React.createElement(CompiledEmoji, _extends({
+          emoji: emoji
+        }, restProps));
+      } else {
+        return /*#__PURE__*/React.createElement(EmotionEmoji, _extends({
+          emoji: emoji
+        }, restProps));
+      }
     }
   };
   return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
@@ -71,14 +80,27 @@ var StandardEmoji = function StandardEmoji(props) {
     setImageLoadError(true);
   };
   if (imageLoadError) {
-    return /*#__PURE__*/React.createElement(EmojiFallback, _extends({
-      emoji: emoji
+    if (fg('platform_editor_css_migrate_emoji')) {
+      return /*#__PURE__*/React.createElement(CompiledEmojiFallback, _extends({
+        emoji: emoji
+      }, restProps));
+    } else {
+      return /*#__PURE__*/React.createElement(EmotionEmojiFallback, _extends({
+        emoji: emoji
+      }, restProps));
+    }
+  }
+  if (fg('platform_editor_css_migrate_emoji')) {
+    return /*#__PURE__*/React.createElement(CompiledEmoji, _extends({
+      emoji: emoji,
+      onLoadError: handleLoadError
+    }, restProps));
+  } else {
+    return /*#__PURE__*/React.createElement(EmotionEmoji, _extends({
+      emoji: emoji,
+      onLoadError: handleLoadError
     }, restProps));
   }
-  return /*#__PURE__*/React.createElement(Emoji, _extends({
-    emoji: emoji,
-    onLoadError: handleLoadError
-  }, restProps));
 };
 
 /**
@@ -140,18 +162,36 @@ export var CachingMediaEmoji = function CachingMediaEmoji(props) {
     setInvalidImage(true);
   };
   if (cachedEmoji && !inValidImage) {
-    return /*#__PURE__*/React.createElement(Emoji, _extends({}, restProps, {
+    if (fg('platform_editor_css_migrate_emoji')) {
+      return /*#__PURE__*/React.createElement(CompiledEmoji, _extends({}, restProps, {
+        showTooltip: showTooltip,
+        fitToHeight: fitToHeight,
+        emoji: cachedEmoji,
+        onLoadError: handleLoadError
+      }));
+    } else {
+      return /*#__PURE__*/React.createElement(EmotionEmoji, _extends({}, restProps, {
+        showTooltip: showTooltip,
+        fitToHeight: fitToHeight,
+        emoji: cachedEmoji,
+        onLoadError: handleLoadError
+      }));
+    }
+  }
+  if (fg('platform_editor_css_migrate_emoji')) {
+    return /*#__PURE__*/React.createElement(CompiledEmojiPlaceholder, {
+      size: fitToHeight || placeholderSize,
+      shortName: shortName,
       showTooltip: showTooltip,
-      fitToHeight: fitToHeight,
-      emoji: cachedEmoji,
-      onLoadError: handleLoadError
-    }));
+      representation: representation
+    });
+  } else {
+    return /*#__PURE__*/React.createElement(EmotionEmojiPlaceholder, {
+      size: fitToHeight || placeholderSize,
+      shortName: shortName,
+      showTooltip: showTooltip,
+      representation: representation
+    });
   }
-  return /*#__PURE__*/React.createElement(EmojiPlaceholder, {
-    size: fitToHeight || placeholderSize,
-    shortName: shortName,
-    showTooltip: showTooltip,
-    representation: representation
-  });
 };
 export default /*#__PURE__*/memo(CachingEmoji);

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

@@ -2,16 +2,25 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import { messages } from '../i18n';
-import { ToolTipContentWithKeymap } from './ToolTipContentWithKeymap';
+import { ToolTipContentWithKeymap as EmotionToolTipContentWithKeymap } from './ToolTipContentWithKeymap';
+import { ToolTipContentWithKeymap as CompiledToolTipContentWithKeymap } from '../compiled/common/ToolTipContentWithKeymap';
 import { backspace } from '../../util/keymaps';
 import VisuallyHidden from '@atlaskit/visually-hidden';
+import { fg } from '@atlaskit/platform-feature-flags';
 export var DeletableEmojiTooltipContent = function DeletableEmojiTooltipContent() {
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  return /*#__PURE__*/React.createElement(ToolTipContentWithKeymap, {
-    description: formatMessage(messages.deleteEmojiTooltip),
-    keymap: backspace
-  });
+  if (fg('platform_editor_css_migrate_emoji')) {
+    return /*#__PURE__*/React.createElement(CompiledToolTipContentWithKeymap, {
+      description: formatMessage(messages.deleteEmojiTooltip),
+      keymap: backspace
+    });
+  } else {
+    return /*#__PURE__*/React.createElement(EmotionToolTipContentWithKeymap, {
+      description: formatMessage(messages.deleteEmojiTooltip),
+      keymap: backspace
+    });
+  }
 };
 export var DeletableEmojiTooltipContentForScreenReader = function DeletableEmojiTooltipContentForScreenReader(_ref) {
   var emoji = _ref.emoji;

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

@@ -8,11 +8,11 @@ import { Fragment, useState, useRef, memo, useLayoutEffect } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
-import EmojiDeletePreview from '../common/EmojiDeletePreview';
-import EmojiUploadPicker from '../common/EmojiUploadPicker';
-import { EmojiPickerListSearch } from '../picker/EmojiPickerListSearch';
-import ToneSelector from './ToneSelector';
+import EmojiDeletePreview from './EmojiDeletePreview';
+import EmojiUploadPicker from './EmojiUploadPicker';
 import TonePreviewButton from './TonePreviewButton';
+import ToneSelector from './ToneSelector';
+import { EmojiPickerListSearch } from '../picker/EmojiPickerListSearch';
 import { messages } from '../i18n';
 import AkButton from '@atlaskit/button/standard-button';
 import AddIcon from '@atlaskit/icon/core/migration/add';

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

@@ -19,9 +19,9 @@ import { FormattedMessage, injectIntl } from 'react-intl-next';
 import { customCategory } from '../../util/constants';
 import { messages } from '../i18n';
 import Emoji from './Emoji';
+import RetryableButton from './RetryableButton';
 import EmojiErrorMessage from './EmojiErrorMessage';
 import { UploadStatus } from './internal-types';
-import RetryableButton from './RetryableButton';
 import { bigEmojiPreview, emojiPreviewErrorMessage, uploadAddRow, uploadPreview, uploadPreviewFooter, uploadPreviewText } from './styles';
 export var uploadPreviewTestId = 'upload-preview';
 export var cancelUploadButtonTestId = 'cancel-upload-button';

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

@@ -8,11 +8,14 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { defaultEmojiHeight } from '../../util/constants';
 import { isImageRepresentation, isMediaRepresentation, isPromise } from '../../util/type-helpers';
 import { UfoEmojiTimings } from '../../types';
-import Emoji from './Emoji';
-import EmojiPlaceholder from './EmojiPlaceholder';
+import { default as EmotionEmoji } from './Emoji';
+import { default as CompiledEmoji } from '../compiled/common/Emoji';
+import { default as EmotionEmojiPlaceholder } from './EmojiPlaceholder';
+import { default as CompiledEmojiPlaceholder } from '../compiled/common/EmojiPlaceholder';
 import { sampledUfoRenderedEmoji } from '../../util/analytics';
 import { EmojiCommonProvider } from '../../context/EmojiCommonProvider';
 import { hasUfoMarked } from '../../util/analytics/ufoExperiences';
+import { fg } from '@atlaskit/platform-feature-flags';
 var ResourcedEmojiComponentRenderStatesEnum = /*#__PURE__*/function (ResourcedEmojiComponentRenderStatesEnum) {
   ResourcedEmojiComponentRenderStatesEnum["INITIAL"] = "INITIAL";
   ResourcedEmojiComponentRenderStatesEnum["FALLBACK"] = "FALLBACK";
@@ -202,18 +205,30 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(props) {
     "data-emoji-id": id,
     "data-emoji-short-name": shortName,
     "data-emoji-text": fallback || shortName
-  }, emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.INITIAL && /*#__PURE__*/React.createElement(EmojiPlaceholder, {
+  }, emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.INITIAL && (fg('platform_editor_css_migrate_emoji') ? /*#__PURE__*/React.createElement(CompiledEmojiPlaceholder, {
     shortName: shortName,
     showTooltip: showTooltip,
     size: fitToHeight || defaultEmojiHeight,
     loading: true
-  }), emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.FALLBACK && /*#__PURE__*/React.createElement(React.Fragment, null, customFallback || fallback || shortName), emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.EMOJI && optimisticEmojiDescription && /*#__PURE__*/React.createElement(Emoji, {
+  }) : /*#__PURE__*/React.createElement(EmotionEmojiPlaceholder, {
+    shortName: shortName,
+    showTooltip: showTooltip,
+    size: fitToHeight || defaultEmojiHeight,
+    loading: true
+  })), emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.FALLBACK && /*#__PURE__*/React.createElement(React.Fragment, null, customFallback || fallback || shortName), emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.EMOJI && optimisticEmojiDescription && (fg('platform_editor_css_migrate_emoji') ? /*#__PURE__*/React.createElement(CompiledEmoji, {
+    emoji: optimisticEmojiDescription,
+    onLoadError: handleOnLoadError,
+    showTooltip: showTooltip,
+    fitToHeight: fitToHeight,
+    autoWidth: !!emoji ? false : true,
+    editorEmoji: editorEmoji
+  }) : /*#__PURE__*/React.createElement(EmotionEmoji, {
     emoji: optimisticEmojiDescription,
     onLoadError: handleOnLoadError,
     showTooltip: showTooltip,
     fitToHeight: fitToHeight,
     autoWidth: !!emoji ? false : true,
     editorEmoji: editorEmoji
-  })));
+  }))));
 };
 export default ResourcedEmojiComponent;

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

@@ -17,7 +17,9 @@ var LoadingSpinner = function LoadingSpinner() {
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     jsx("span", {
       css: buttonSpinner
-    }, jsx(Spinner, null))
+    }, jsx(Spinner, {
+      interactionName: "emoji-retry-button-spinner"
+    }))
   );
 };
 var RetryButton = function RetryButton(props) {

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

@@ -0,0 +1,9 @@
+._13t3idpf span{line-height:0}
+._154ix0bf{top:var(--ds-space-negative-100,-8px)}
+._1bsbf6fq{width:18px}
+._1e0c1txw{display:flex}
+._1pbykb7n{z-index:1}
+._1xi2x0bf{right:var(--ds-space-negative-100,-8px)}
+._3um015vq{visibility:hidden}
+._4t3if6fq{height:18px}
+._kqswstnw{position:absolute}

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

@@ -0,0 +1,42 @@
+/* DeleteButton.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./DeleteButton.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import Button from '@atlaskit/button/standard-button';
+import CrossCircleIcon from '@atlaskit/icon/utility/migration/cross-circle';
+import { N500 } from '@atlaskit/theme/colors';
+import { deleteEmojiLabel } from '../../../util/constants';
+import { emojiDeleteButton } from '../../common/styles';
+import { Box } from '@atlaskit/primitives/compiled';
+var styles = {
+  boxWrapperStyle: "_1bsbf6fq _4t3if6fq"
+};
+var deleteButton = null;
+
+/**
+ * Test id for wrapper Emoji delete button
+ */
+export var RENDER_EMOJI_DELETE_BUTTON_TESTID = 'render-emoji-delete-button';
+var DeleteButton = function DeleteButton(props) {
+  return /*#__PURE__*/React.createElement("span", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: ax(["_3um015vq _1e0c1txw _kqswstnw _154ix0bf _1xi2x0bf _1pbykb7n _13t3idpf", emojiDeleteButton]),
+    "data-testid": RENDER_EMOJI_DELETE_BUTTON_TESTID
+  }, /*#__PURE__*/React.createElement(Button, {
+    iconBefore: /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.boxWrapperStyle
+    }, /*#__PURE__*/React.createElement(CrossCircleIcon, {
+      label: deleteEmojiLabel,
+      color: "var(--ds-text-subtle, ".concat(N500, ")"),
+      LEGACY_size: "small"
+    })),
+    onClick: props.onClick
+    // TODO: (from codemod) "link" and "subtle-link" appearances are only available in LinkButton, please either provide a href prop then migrate to LinkButton, or remove the appearance from the default button.
+    ,
+    appearance: "subtle-link",
+    spacing: "none",
+    testId: "emoji-delete-button",
+    tabIndex: -1
+  }));
+};
+export default DeleteButton;

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

@@ -0,0 +1,23 @@
+
+._2rkosqtm{border-radius:var(--ds-border-radius-100,3px)}
+._jr50g2xd .emoji-common-emoji-sprite{background:transparent no-repeat}._109tnkob .emoji-common-emoji-sprite{vertical-align:middle}
+._160jewfl.emoji-common-select-on-hover:hover .emoji-common-deleteButton, ._1theewfl.emoji-common-selected{visibility:visible}
+._18u0idpf{margin-left:0}
+._19pk1n1a{margin-top:-1px}
+._1e0c1o8l{display:inline-block}
+._1hdcgktf .emoji-common-emoji-sprite{min-width:20px}
+._1kogh2mm.emoji-common-deletable{position:relative}
+._2hwxidpf{margin-right:0}
+._bfhk1j28{background-color:transparent}
+._otyr1n1a{margin-bottom:-1px}
+._pkaxgktf .emoji-common-emoji-sprite{min-height:20px}
+._qyp0ewfl.emoji-common-deletable:focus-within .emoji-common-deleteButton{visibility:visible}
+._s7n4nkob{vertical-align:middle}
+._v4pn1ule img{display:block}
+._ylp71o8l .emoji-common-emoji-sprite{display:inline-block}
+._1hvw1o36:focus{outline-width:medium}
+._491113zc:focus{transition-duration:0s,.2s}
+._49pcglyw:focus{outline-style:none}
+._7ehi1r2v:focus{box-shadow:var(--_1rebzxw)}
+._nt751r31:focus{outline-color:currentColor}
+._tn8j2tgk.emoji-common-select-on-hover:hover, ._3naf2tgk.emoji-common-selected{background-color:var(--_1y60f1n)}