@atlaskit/emoji 69.0.7 → 69.0.8

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

@@ -18,7 +18,6 @@ var _typeHelpers = require("../../util/type-helpers");
 var _logger = _interopRequireDefault(require("../../util/logger"));
 var _mouse = require("../../util/mouse");
 var _Scrollable = _interopRequireDefault(require("../common/Scrollable"));
-var _Scrollable2 = _interopRequireDefault(require("../compiled/common/Scrollable"));
 var _EmojiTypeAheadItem = _interopRequireDefault(require("./EmojiTypeAheadItem"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _EmojiTypeAheadListContainer = require("./EmojiTypeAheadListContainer");
@@ -86,11 +85,8 @@ var EmojiTypeAheadList = exports.default = /*#__PURE__*/function (_PureComponent
         _this.chooseCurrentSelection();
       });
     });
-    (0, _defineProperty2.default)(_this, "handleCompiledScrollableRef", function (ref) {
-      _this.compiledScrollable = ref;
-    });
-    (0, _defineProperty2.default)(_this, "handleEmotionScrollableRef", function (ref) {
-      _this.emotionScrollable = ref;
+    (0, _defineProperty2.default)(_this, "handleScrollableRef", function (ref) {
+      _this.scrollable = ref;
     });
     _this.state = {
       selectedKey: getKeyByIndex(props.emojis, 0),
@@ -159,14 +155,8 @@ var EmojiTypeAheadList = exports.default = /*#__PURE__*/function (_PureComponent
     // Internal
     function revealItem(key) {
       var item = this.items[key];
-      if ((0, _platformFeatureFlags.fg)('platform_editor_css_migrate_emoji')) {
-        if (item && this.compiledScrollable) {
-          this.compiledScrollable.reveal(item);
-        }
-      } else {
-        if (item && this.emotionScrollable) {
-          this.emotionScrollable.reveal(item);
-        }
+      if (item && this.scrollable) {
+        this.scrollable.reveal(item);
       }
     }
   }, {
@@ -249,17 +239,13 @@ var EmojiTypeAheadList = exports.default = /*#__PURE__*/function (_PureComponent
       return /*#__PURE__*/_react.default.createElement(_EmojiTypeAheadListContainer.EmojiTypeAheadListContainer, {
         hasEmoji: hasEmoji,
         loading: loading
-      }, (0, _platformFeatureFlags.fg)('platform_editor_css_migrate_emoji') ? /*#__PURE__*/_react.default.createElement(_Scrollable2.default, {
-        ref: this.handleCompiledScrollableRef,
-        maxHeight: "".concat(_sharedStyles.emojiTypeAheadMaxHeight, "px")
-      }, listBody) : /*#__PURE__*/_react.default.createElement(_Scrollable.default, {
-        ref: this.handleEmotionScrollableRef,
+      }, /*#__PURE__*/_react.default.createElement(_Scrollable.default, {
+        ref: this.handleScrollableRef,
         maxHeight: "".concat(_sharedStyles.emojiTypeAheadMaxHeight, "px")
       }, listBody));
     }
   }]);
 }(_react.PureComponent);
-// cleanup `platform_editor_css_migrate_emoji` - rename compiledScrollable back to scrollable and delete emotionScrollable
 (0, _defineProperty2.default)(EmojiTypeAheadList, "defaultProps", {
   onEmojiSelected: function onEmojiSelected() {}
 });

package/dist/cjs/components/uploader/EmojiUploadComponentCompiled.js

@@ -16,7 +16,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _reactIntlNext = require("react-intl-next");
 var _EmojiResource = require("../../api/EmojiResource");
-var _EmojiUploadPicker = _interopRequireDefault(require("../compiled/common/EmojiUploadPicker"));
+var _EmojiUploadPicker = _interopRequireDefault(require("../common/EmojiUploadPicker"));
 var _UploadEmoji = require("../common/UploadEmoji");
 var _analytics = require("../../util/analytics");
 var _ufoExperiences = require("../../util/analytics/ufoExperiences");

package/dist/cjs/element.js

@@ -4,18 +4,24 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EmojiPlaceholder = exports.Emoji = void 0;
+Object.defineProperty(exports, "Emoji", {
+  enumerable: true,
+  get: function get() {
+    return _Emoji.default;
+  }
+});
+Object.defineProperty(exports, "EmojiPlaceholder", {
+  enumerable: true,
+  get: function get() {
+    return _EmojiPlaceholder.default;
+  }
+});
 Object.defineProperty(exports, "ResourcedEmoji", {
   enumerable: true,
   get: function get() {
     return _ResourcedEmoji.default;
   }
 });
-var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
-var _EmojiPlaceholder = _interopRequireDefault(require("./components/compiled/common/EmojiPlaceholder"));
-var _EmojiPlaceholder2 = _interopRequireDefault(require("./components/common/EmojiPlaceholder"));
-var _Emoji = _interopRequireDefault(require("./components/compiled/common/Emoji"));
-var _Emoji2 = _interopRequireDefault(require("./components/common/Emoji"));
-var _ResourcedEmoji = _interopRequireDefault(require("./components/common/ResourcedEmoji"));
-var EmojiPlaceholder = exports.EmojiPlaceholder = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_css_migrate_emoji', _EmojiPlaceholder.default, _EmojiPlaceholder2.default);
-var Emoji = exports.Emoji = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_css_migrate_emoji', _Emoji.default, _Emoji2.default);
+var _EmojiPlaceholder = _interopRequireDefault(require("./components/common/EmojiPlaceholder"));
+var _Emoji = _interopRequireDefault(require("./components/common/Emoji"));
+var _ResourcedEmoji = _interopRequireDefault(require("./components/common/ResourcedEmoji"));

package/dist/cjs/index.js

@@ -13,7 +13,7 @@ Object.defineProperty(exports, "AbstractResource", {
 Object.defineProperty(exports, "Emoji", {
   enumerable: true,
   get: function get() {
-    return _element.Emoji;
+    return _Emoji.default;
   }
 });
 Object.defineProperty(exports, "EmojiCommonProvider", {
@@ -43,7 +43,7 @@ Object.defineProperty(exports, "EmojiPicker", {
 Object.defineProperty(exports, "EmojiPlaceholder", {
   enumerable: true,
   get: function get() {
-    return _element.EmojiPlaceholder;
+    return _EmojiPlaceholder.default;
   }
 });
 Object.defineProperty(exports, "EmojiRepository", {
@@ -228,7 +228,8 @@ Object.defineProperty(exports, "withSampling", {
   }
 });
 var _utilServiceSupport = require("@atlaskit/util-service-support");
-var _element = require("./element");
+var _Emoji = _interopRequireDefault(require("./components/common/Emoji"));
+var _EmojiPlaceholder = _interopRequireDefault(require("./components/common/EmojiPlaceholder"));
 var _ResourcedEmoji = _interopRequireDefault(require("./components/common/ResourcedEmoji"));
 var _picker = require("./picker");
 var _EmojiPicker = require("./components/picker/EmojiPicker");

package/dist/cjs/util/analytics/analytics.js

@@ -20,7 +20,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "69.0.7"
+      packageVersion: "69.0.8"
     }, attributes)
   };
 };

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

@@ -3,12 +3,9 @@ import React, { memo, useEffect, useState } from 'react';
 import { isMediaEmoji } from '../../util/type-helpers';
 import { UfoEmojiTimings } from '../../types';
 import debug from '../../util/logger';
-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 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';
@@ -51,15 +48,9 @@ export const CachingEmoji = props => {
         emoji: emoji
       }, restProps));
     } else {
-      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(Emoji, _extends({
+        emoji: emoji
+      }, restProps));
     }
   };
   return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
@@ -76,27 +67,14 @@ const StandardEmoji = props => {
     setImageLoadError(true);
   };
   if (imageLoadError) {
-    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
+    return /*#__PURE__*/React.createElement(EmojiFallback, _extends({
+      emoji: emoji
     }, restProps));
   }
+  return /*#__PURE__*/React.createElement(Emoji, _extends({
+    emoji: emoji,
+    onLoadError: handleLoadError
+  }, restProps));
 };
 
 /**
@@ -157,36 +135,18 @@ export const CachingMediaEmoji = props => {
     setInvalidImage(true);
   };
   if (cachedEmoji && !inValidImage) {
-    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,
+    return /*#__PURE__*/React.createElement(Emoji, _extends({}, restProps, {
       showTooltip: showTooltip,
-      representation: representation
-    });
-  } else {
-    return /*#__PURE__*/React.createElement(EmotionEmojiPlaceholder, {
-      size: fitToHeight || placeholderSize,
-      shortName: shortName,
-      showTooltip: showTooltip,
-      representation: representation
-    });
+      fitToHeight: fitToHeight,
+      emoji: cachedEmoji,
+      onLoadError: handleLoadError
+    }));
   }
+  return /*#__PURE__*/React.createElement(EmojiPlaceholder, {
+    size: fitToHeight || placeholderSize,
+    shortName: shortName,
+    showTooltip: showTooltip,
+    representation: representation
+  });
 };
 export default /*#__PURE__*/memo(CachingEmoji);

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

@@ -2,26 +2,17 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import { messages } from '../i18n';
-import { ToolTipContentWithKeymap as EmotionToolTipContentWithKeymap } from './ToolTipContentWithKeymap';
-import { ToolTipContentWithKeymap as CompiledToolTipContentWithKeymap } from '../compiled/common/ToolTipContentWithKeymap';
+import { ToolTipContentWithKeymap } from './ToolTipContentWithKeymap';
 import { backspace } from '../../util/keymaps';
 import VisuallyHidden from '@atlaskit/visually-hidden';
-import { fg } from '@atlaskit/platform-feature-flags';
 export const DeletableEmojiTooltipContent = () => {
   const {
     formatMessage
   } = useIntl();
-  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
-    });
-  }
+  return /*#__PURE__*/React.createElement(ToolTipContentWithKeymap, {
+    description: formatMessage(messages.deleteEmojiTooltip),
+    keymap: backspace
+  });
 };
 export const DeletableEmojiTooltipContentForScreenReader = ({
   emoji

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

@@ -1,35 +1,30 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+/* 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, deleteButton } from './styles';
-import { Box, xcss } from '@atlaskit/primitives';
+import { emojiDeleteButton } from './styles';
+import { Box } from '@atlaskit/primitives/compiled';
+const styles = {
+  boxWrapperStyle: "_1bsbf6fq _4t3if6fq"
+};
+const deleteButton = null;
 
 /**
  * Test id for wrapper Emoji delete button
  */
 export const RENDER_EMOJI_DELETE_BUTTON_TESTID = 'render-emoji-delete-button';
-const boxWrapperStyle = xcss({
-  width: '18px',
-  height: '18px'
-});
-const DeleteButton = props => jsx("span", {
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  css: deleteButton
+const DeleteButton = props => /*#__PURE__*/React.createElement("span", {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-  ,
-  className: emojiDeleteButton,
+  className: ax(["_3um015vq _1e0c1txw _kqswstnw _154ix0bf _1xi2x0bf _1pbykb7n _13t3idpf", emojiDeleteButton]),
   "data-testid": RENDER_EMOJI_DELETE_BUTTON_TESTID
-}, jsx(Button, {
-  iconBefore: jsx(Box, {
-    xcss: boxWrapperStyle
-  }, jsx(CrossCircleIcon, {
+}, /*#__PURE__*/React.createElement(Button, {
+  iconBefore: /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.boxWrapperStyle
+  }, /*#__PURE__*/React.createElement(CrossCircleIcon, {
     label: deleteEmojiLabel,
     color: `var(--ds-text-subtle, ${N500})`,
     LEGACY_size: "small"

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

@@ -1,11 +1,9 @@
+/* Emoji.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./Emoji.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { useEffect, useCallback, forwardRef } from 'react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import { B100, N30 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { shouldUseAltRepresentation } from '../../api/EmojiUtils';
 import { deleteEmojiLabel, EMOJI_KEYBOARD_KEYS_SUPPORTED, KeyboardKeys, SAMPLING_RATE_EMOJI_RENDERED_EXP } from '../../util/constants';
@@ -13,13 +11,15 @@ import { isImageRepresentation, isMediaRepresentation, isSpriteRepresentation, t
 import { UfoEmojiTimings } from '../../types';
 import { leftClick } from '../../util/mouse';
 import DeleteButton from './DeleteButton';
-import { emojiSpriteContainer, emojiNodeStyles, commonSelectedStyles, selectOnHoverStyles, emojiSprite, emojiMainStyle, emojiImageContainer, emojiImage, deletableEmoji } from './styles';
+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 { isSSR } from '../../util/is-ssr';
+const emojiSpriteContainer = null;
+const emojiImageContainer = null;
 const handleMouseDown = (props, event) => {
   // Clicked emoji delete button
   if (event.target instanceof Element && event.target.getAttribute('aria-label') === deleteEmojiLabel) {
@@ -126,11 +126,12 @@ export const SpriteEmoji = props => {
     ...sizing
   };
   return (
+    /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    jsx(EmojiNodeWrapper, _extends({}, props, {
+    React.createElement(EmojiNodeWrapper, _extends({}, props, {
       type: "sprite",
       className: classes
-    }), jsx("span", {
+    }), /*#__PURE__*/React.createElement("span", {
       className: emojiSprite,
       style: style
     }))
@@ -177,10 +178,10 @@ export const ImageEmoji = props => {
       height: fitToHeight
     };
   }
-  const onError = event => {
+  const onError = useCallback(event => {
     handleImageError(props, event);
-  };
-  const onLoad = () => {
+  }, [props]);
+  const onLoad = useCallback(() => {
     const mountedMark = ufoExp.metrics.marks.find(mark => 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)) {
@@ -204,12 +205,19 @@ export const ImageEmoji = props => {
     if (onLoadSuccess) {
       onLoadSuccess(emoji);
     }
-  };
+  }, [emoji, onLoadSuccess, ufoExp]);
   const onBeforeLoad = useCallback(() => {
     if (!hasUfoMarked(ufoExp, UfoEmojiTimings.ONLOAD_START)) {
       ufoExp.mark(UfoEmojiTimings.ONLOAD_START);
     }
   }, [ufoExp]);
+  const onMouseOver = useCallback(e => {
+    var _document$activeEleme;
+    // only disable tooltip when not on focus
+    if (!((_document$activeEleme = document.activeElement) !== null && _document$activeEleme !== void 0 && _document$activeEleme.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(() => {
@@ -217,7 +225,7 @@ export const ImageEmoji = props => {
       onBeforeLoad();
     }
   }, [inView, onBeforeLoad]);
-  const emojiNode = jsx("img", _extends({
+  const emojiNode = /*#__PURE__*/React.createElement("img", _extends({
     //@ts-ignore
     loading: disableLazyLoad ? 'eager' : 'lazy',
     src: src,
@@ -242,11 +250,11 @@ export const ImageEmoji = props => {
 
   // show a tooltip for deletable emoji only on focus
   if (showDelete) {
-    return jsx(Tooltip, {
-      content: jsx(DeletableEmojiTooltipContent, null),
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      content: /*#__PURE__*/React.createElement(DeletableEmojiTooltipContent, null),
       position: "right-start",
       tag: "span"
-    }, jsx(EmojiNodeWrapper, _extends({}, props, {
+    }, /*#__PURE__*/React.createElement(EmojiNodeWrapper, _extends({}, props, {
       "aria-labelledby": `screenreader-emoji-${emoji.id}`,
       type: "image"
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -255,22 +263,17 @@ export const ImageEmoji = props => {
       ref: ref,
       showTooltip: false // avoid showing both tooltip and title
       ,
-      onMouseOver: e => {
-        var _document$activeEleme;
-        // only disable tooltip when not on focus
-        if (!((_document$activeEleme = document.activeElement) !== null && _document$activeEleme !== void 0 && _document$activeEleme.contains(e.target))) {
-          e.stopPropagation();
-        }
-      }
-    }), emojiNode, jsx(DeleteButton, {
+      onMouseOver: onMouseOver
+    }), emojiNode, /*#__PURE__*/React.createElement(DeleteButton, {
       onClick: event => handleDelete(props, event)
-    }), jsx(DeletableEmojiTooltipContentForScreenReader, {
+    }), /*#__PURE__*/React.createElement(DeletableEmojiTooltipContentForScreenReader, {
       emoji: emoji
     })));
   }
   return (
+    /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    jsx(EmojiNodeWrapper, _extends({}, props, {
+    React.createElement(EmojiNodeWrapper, _extends({}, props, {
       type: "image",
       className: classes,
       ref: ref
@@ -317,32 +320,25 @@ export const EmojiNodeWrapper = /*#__PURE__*/forwardRef((props, ref) => {
       'aria-label': emoji.shortName
     };
   }
-  return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    jsx("span", _extends({}, accessibilityProps, {
-      ref: ref,
-      "data-testid": `${type}-emoji-${emoji.shortName}`,
-      "data-emoji-type": type,
-      tabIndex: shouldBeInteractive ? tabIndex || 0 : undefined
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      ,
-      css: type === 'sprite' ? emojiSpriteContainer : emojiImageContainer
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      ,
-      className: className,
-      onKeyDown: event => handleKeyDown(props, event),
-      onMouseDown: event => {
-        handleMouseDown(props, event);
-      },
-      onMouseEnter: event => {
-        handleMouseMove(props, event);
-      },
-      onFocus: event => {
-        handleFocus(props, event);
-      },
-      title: showTooltip ? emoji.shortName : undefined // TODO: COLLAB-2351 - use @atlaskit/Tooltip in future for non-deletable emoji if enabled showTooltip
-    }, other), children)
-  );
+  return /*#__PURE__*/React.createElement("span", _extends({}, accessibilityProps, {
+    ref: ref,
+    "data-testid": `${type}-emoji-${emoji.shortName}`,
+    "data-emoji-type": type,
+    tabIndex: shouldBeInteractive ? tabIndex || 0 : undefined,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: ax([type === 'sprite' ? "_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _1e0c1o8l _jr50g2xd _ylp71o8l _pkaxgktf _1hdcgktf _109tnkob _tn8j14ae _3naf14ae _nt751r31 _49pcglyw _1hvw1o36 _7ehi1n2i _491113zc" : "_2rkosqtm _19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _bfhk1j28 _1e0c1o8l _s7n4nkob _v4pn1ule _tn8j14ae _3naf14ae _160jewfl _1theewfl _1kogh2mm _qyp0ewfl _nt751r31 _49pcglyw _1hvw1o36 _7ehi1n2i _491113zc", className]),
+    onKeyDown: event => handleKeyDown(props, event),
+    onMouseDown: event => {
+      handleMouseDown(props, event);
+    },
+    onMouseEnter: event => {
+      handleMouseMove(props, event);
+    },
+    onFocus: event => {
+      handleFocus(props, event);
+    },
+    title: showTooltip ? emoji.shortName : undefined // TODO: COLLAB-2351 - use @atlaskit/Tooltip in future for non-deletable emoji if enabled showTooltip
+  }, other), children);
 });
 export const Emoji = props => {
   const {
@@ -365,8 +361,8 @@ export const Emoji = props => {
   }, []);
   // TODO: We always prefer render as image as having accessibility issues with sprite representation
   if (isSpriteRepresentation(emoji.representation)) {
-    return jsx(SpriteEmoji, props);
+    return /*#__PURE__*/React.createElement(SpriteEmoji, props);
   }
-  return jsx(ImageEmoji, props);
+  return /*#__PURE__*/React.createElement(ImageEmoji, props);
 };
 export default Emoji;