@atlaskit/emoji 69.0.7 → 69.0.8

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/emoji
 
+## 69.0.8
+
+### Patch Changes
+
+- [#135879](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/135879)
+  [`2c8c823573d71`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2c8c823573d71) -
+  Cleans up compiled css FG in emoji common components
+
 ## 69.0.7
 
 ### Patch Changes

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

@@ -14,11 +14,8 @@ var _typeHelpers = require("../../util/type-helpers");
 var _types = require("../../types");
 var _logger = _interopRequireDefault(require("../../util/logger"));
 var _Emoji = _interopRequireDefault(require("./Emoji"));
-var _Emoji2 = _interopRequireDefault(require("../compiled/common/Emoji"));
 var _EmojiPlaceholder = _interopRequireDefault(require("./EmojiPlaceholder"));
-var _EmojiPlaceholder2 = _interopRequireDefault(require("../compiled/common/EmojiPlaceholder"));
 var _EmojiFallback = _interopRequireDefault(require("./EmojiFallback"));
-var _EmojiFallback2 = _interopRequireDefault(require("../compiled/common/EmojiFallback"));
 var _UfoErrorBoundary = require("./UfoErrorBoundary");
 var _analytics = require("../../util/analytics");
 var _constants = require("../../util/constants");
@@ -63,15 +60,9 @@ var CachingEmoji = exports.CachingEmoji = function CachingEmoji(props) {
         emoji: emoji
       }, restProps));
     } else {
-      if ((0, _platformFeatureFlags.fg)('platform_editor_css_migrate_emoji')) {
-        return /*#__PURE__*/_react.default.createElement(_Emoji2.default, (0, _extends2.default)({
-          emoji: emoji
-        }, restProps));
-      } else {
-        return /*#__PURE__*/_react.default.createElement(_Emoji.default, (0, _extends2.default)({
-          emoji: emoji
-        }, restProps));
-      }
+      return /*#__PURE__*/_react.default.createElement(_Emoji.default, (0, _extends2.default)({
+        emoji: emoji
+      }, restProps));
     }
   };
   return /*#__PURE__*/_react.default.createElement(_UfoErrorBoundary.UfoErrorBoundary, {
@@ -89,27 +80,14 @@ var StandardEmoji = function StandardEmoji(props) {
     setImageLoadError(true);
   };
   if (imageLoadError) {
-    if ((0, _platformFeatureFlags.fg)('platform_editor_css_migrate_emoji')) {
-      return /*#__PURE__*/_react.default.createElement(_EmojiFallback2.default, (0, _extends2.default)({
-        emoji: emoji
-      }, restProps));
-    } else {
-      return /*#__PURE__*/_react.default.createElement(_EmojiFallback.default, (0, _extends2.default)({
-        emoji: emoji
-      }, restProps));
-    }
-  }
-  if ((0, _platformFeatureFlags.fg)('platform_editor_css_migrate_emoji')) {
-    return /*#__PURE__*/_react.default.createElement(_Emoji2.default, (0, _extends2.default)({
-      emoji: emoji,
-      onLoadError: handleLoadError
-    }, restProps));
-  } else {
-    return /*#__PURE__*/_react.default.createElement(_Emoji.default, (0, _extends2.default)({
-      emoji: emoji,
-      onLoadError: handleLoadError
+    return /*#__PURE__*/_react.default.createElement(_EmojiFallback.default, (0, _extends2.default)({
+      emoji: emoji
     }, restProps));
   }
+  return /*#__PURE__*/_react.default.createElement(_Emoji.default, (0, _extends2.default)({
+    emoji: emoji,
+    onLoadError: handleLoadError
+  }, restProps));
 };
 
 /**
@@ -171,36 +149,18 @@ var CachingMediaEmoji = exports.CachingMediaEmoji = function CachingMediaEmoji(p
     setInvalidImage(true);
   };
   if (cachedEmoji && !inValidImage) {
-    if ((0, _platformFeatureFlags.fg)('platform_editor_css_migrate_emoji')) {
-      return /*#__PURE__*/_react.default.createElement(_Emoji2.default, (0, _extends2.default)({}, restProps, {
-        showTooltip: showTooltip,
-        fitToHeight: fitToHeight,
-        emoji: cachedEmoji,
-        onLoadError: handleLoadError
-      }));
-    } else {
-      return /*#__PURE__*/_react.default.createElement(_Emoji.default, (0, _extends2.default)({}, restProps, {
-        showTooltip: showTooltip,
-        fitToHeight: fitToHeight,
-        emoji: cachedEmoji,
-        onLoadError: handleLoadError
-      }));
-    }
-  }
-  if ((0, _platformFeatureFlags.fg)('platform_editor_css_migrate_emoji')) {
-    return /*#__PURE__*/_react.default.createElement(_EmojiPlaceholder2.default, {
-      size: fitToHeight || placeholderSize,
-      shortName: shortName,
+    return /*#__PURE__*/_react.default.createElement(_Emoji.default, (0, _extends2.default)({}, restProps, {
       showTooltip: showTooltip,
-      representation: representation
-    });
-  } else {
-    return /*#__PURE__*/_react.default.createElement(_EmojiPlaceholder.default, {
-      size: fitToHeight || placeholderSize,
-      shortName: shortName,
-      showTooltip: showTooltip,
-      representation: representation
-    });
+      fitToHeight: fitToHeight,
+      emoji: cachedEmoji,
+      onLoadError: handleLoadError
+    }));
   }
+  return /*#__PURE__*/_react.default.createElement(_EmojiPlaceholder.default, {
+    size: fitToHeight || placeholderSize,
+    shortName: shortName,
+    showTooltip: showTooltip,
+    representation: representation
+  });
 };
 var _default = exports.default = /*#__PURE__*/(0, _react.memo)(CachingEmoji);

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

@@ -10,24 +10,15 @@ var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _i18n = require("../i18n");
 var _ToolTipContentWithKeymap = require("./ToolTipContentWithKeymap");
-var _ToolTipContentWithKeymap2 = require("../compiled/common/ToolTipContentWithKeymap");
 var _keymaps = require("../../util/keymaps");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var DeletableEmojiTooltipContent = exports.DeletableEmojiTooltipContent = function DeletableEmojiTooltipContent() {
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  if ((0, _platformFeatureFlags.fg)('platform_editor_css_migrate_emoji')) {
-    return /*#__PURE__*/_react.default.createElement(_ToolTipContentWithKeymap2.ToolTipContentWithKeymap, {
-      description: formatMessage(_i18n.messages.deleteEmojiTooltip),
-      keymap: _keymaps.backspace
-    });
-  } else {
-    return /*#__PURE__*/_react.default.createElement(_ToolTipContentWithKeymap.ToolTipContentWithKeymap, {
-      description: formatMessage(_i18n.messages.deleteEmojiTooltip),
-      keymap: _keymaps.backspace
-    });
-  }
+  return /*#__PURE__*/_react.default.createElement(_ToolTipContentWithKeymap.ToolTipContentWithKeymap, {
+    description: formatMessage(_i18n.messages.deleteEmojiTooltip),
+    keymap: _keymaps.backspace
+  });
 };
 var DeletableEmojiTooltipContentForScreenReader = exports.DeletableEmojiTooltipContentForScreenReader = function DeletableEmojiTooltipContentForScreenReader(_ref) {
   var emoji = _ref.emoji;

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

@@ -1,43 +1,41 @@
+/* DeleteButton.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.RENDER_EMOJI_DELETE_BUTTON_TESTID = void 0;
-var _react = require("@emotion/react");
+require("./DeleteButton.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/utility/migration/cross-circle"));
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../../util/constants");
 var _styles = require("./styles");
-var _primitives = require("@atlaskit/primitives");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var _compiled = require("@atlaskit/primitives/compiled");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var styles = {
+  boxWrapperStyle: "_1bsbf6fq _4t3if6fq"
+};
+var deleteButton = null;
 
 /**
  * Test id for wrapper Emoji delete button
  */
 var RENDER_EMOJI_DELETE_BUTTON_TESTID = exports.RENDER_EMOJI_DELETE_BUTTON_TESTID = 'render-emoji-delete-button';
-var boxWrapperStyle = (0, _primitives.xcss)({
-  width: '18px',
-  height: '18px'
-});
 var DeleteButton = function DeleteButton(props) {
-  return (0, _react.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: _styles.deleteButton
+  return /*#__PURE__*/React.createElement("span", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: _styles.emojiDeleteButton,
+    className: (0, _runtime.ax)(["_3um015vq _1e0c1txw _kqswstnw _154ix0bf _1xi2x0bf _1pbykb7n _13t3idpf", _styles.emojiDeleteButton]),
     "data-testid": RENDER_EMOJI_DELETE_BUTTON_TESTID
-  }, (0, _react.jsx)(_standardButton.default, {
-    iconBefore: (0, _react.jsx)(_primitives.Box, {
-      xcss: boxWrapperStyle
-    }, (0, _react.jsx)(_crossCircle.default, {
+  }, /*#__PURE__*/React.createElement(_standardButton.default, {
+    iconBefore: /*#__PURE__*/React.createElement(_compiled.Box, {
+      xcss: styles.boxWrapperStyle
+    }, /*#__PURE__*/React.createElement(_crossCircle.default, {
       label: _constants.deleteEmojiLabel,
       color: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
       LEGACY_size: "small"

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

@@ -1,3 +1,4 @@
+/* Emoji.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,12 +7,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.SpriteEmoji = exports.ImageEmoji = exports.EmojiNodeWrapper = exports.Emoji = void 0;
+require("./Emoji.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
+var _colors = require("@atlaskit/theme/colors");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _EmojiUtils = require("../../api/EmojiUtils");
 var _constants = require("../../util/constants");
@@ -30,10 +33,9 @@ var _excluded = ["emoji", "fitToHeight", "selected", "selectOnHover", "className
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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; } /**
- * @jsxRuntime classic
- * @jsx jsx
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+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; }
+var emojiSpriteContainer = null;
+var emojiImageContainer = null;
 var handleMouseDown = function handleMouseDown(props, event) {
   // Clicked emoji delete button
   if (event.target instanceof Element && event.target.getAttribute('aria-label') === _constants.deleteEmojiLabel) {
@@ -125,11 +127,12 @@ var SpriteEmoji = exports.SpriteEmoji = function SpriteEmoji(props) {
     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
-    (0, _react2.jsx)(EmojiNodeWrapper, (0, _extends2.default)({}, props, {
+    _react.default.createElement(EmojiNodeWrapper, (0, _extends2.default)({}, props, {
       type: "sprite",
       className: classes
-    }), (0, _react2.jsx)("span", {
+    }), /*#__PURE__*/_react.default.createElement("span", {
       className: _styles.emojiSprite,
       style: style
     }))
@@ -177,10 +180,10 @@ var ImageEmoji = exports.ImageEmoji = function ImageEmoji(props) {
       height: fitToHeight
     };
   }
-  var onError = function onError(event) {
+  var onError = (0, _react.useCallback)(function (event) {
     handleImageError(props, event);
-  };
-  var onLoad = function onLoad() {
+  }, [props]);
+  var onLoad = (0, _react.useCallback)(function () {
     var mountedMark = ufoExp.metrics.marks.find(function (mark) {
       return mark.name === _types.UfoEmojiTimings.MOUNTED_END;
     });
@@ -208,12 +211,19 @@ var ImageEmoji = exports.ImageEmoji = function ImageEmoji(props) {
     if (onLoadSuccess) {
       onLoadSuccess(emoji);
     }
-  };
+  }, [emoji, onLoadSuccess, ufoExp]);
   var onBeforeLoad = (0, _react.useCallback)(function () {
     if (!(0, _ufoExperiences.hasUfoMarked)(ufoExp, _types.UfoEmojiTimings.ONLOAD_START)) {
       ufoExp.mark(_types.UfoEmojiTimings.ONLOAD_START);
     }
   }, [ufoExp]);
+  var onMouseOver = (0, _react.useCallback)(function (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.
   (0, _react.useEffect)(function () {
@@ -221,7 +231,7 @@ var ImageEmoji = exports.ImageEmoji = function ImageEmoji(props) {
       onBeforeLoad();
     }
   }, [inView, onBeforeLoad]);
-  var emojiNode = (0, _react2.jsx)("img", (0, _extends2.default)({
+  var emojiNode = /*#__PURE__*/_react.default.createElement("img", (0, _extends2.default)({
     //@ts-ignore
     loading: disableLazyLoad ? 'eager' : 'lazy',
     src: src,
@@ -246,11 +256,11 @@ var ImageEmoji = exports.ImageEmoji = function ImageEmoji(props) {
 
   // show a tooltip for deletable emoji only on focus
   if (showDelete) {
-    return (0, _react2.jsx)(_tooltip.default, {
-      content: (0, _react2.jsx)(_DeletableEmojiTooltipContent.DeletableEmojiTooltipContent, null),
+    return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      content: /*#__PURE__*/_react.default.createElement(_DeletableEmojiTooltipContent.DeletableEmojiTooltipContent, null),
       position: "right-start",
       tag: "span"
-    }, (0, _react2.jsx)(EmojiNodeWrapper, (0, _extends2.default)({}, props, {
+    }, /*#__PURE__*/_react.default.createElement(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
@@ -259,24 +269,19 @@ var ImageEmoji = exports.ImageEmoji = function ImageEmoji(props) {
       ref: ref,
       showTooltip: false // avoid showing both tooltip and title
       ,
-      onMouseOver: function 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, (0, _react2.jsx)(_DeleteButton.default, {
+      onMouseOver: onMouseOver
+    }), emojiNode, /*#__PURE__*/_react.default.createElement(_DeleteButton.default, {
       onClick: function onClick(event) {
         return handleDelete(props, event);
       }
-    }), (0, _react2.jsx)(_DeletableEmojiTooltipContent.DeletableEmojiTooltipContentForScreenReader, {
+    }), /*#__PURE__*/_react.default.createElement(_DeletableEmojiTooltipContent.DeletableEmojiTooltipContentForScreenReader, {
       emoji: emoji
     })));
   }
   return (
+    /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    (0, _react2.jsx)(EmojiNodeWrapper, (0, _extends2.default)({}, props, {
+    _react.default.createElement(EmojiNodeWrapper, (0, _extends2.default)({}, props, {
       type: "image",
       className: classes,
       ref: ref
@@ -322,34 +327,32 @@ var EmojiNodeWrapper = exports.EmojiNodeWrapper = /*#__PURE__*/(0, _react.forwar
       'aria-label': emoji.shortName
     };
   }
-  return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    (0, _react2.jsx)("span", (0, _extends2.default)({}, accessibilityProps, {
-      ref: ref,
-      "data-testid": "".concat(type, "-emoji-").concat(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' ? _styles.emojiSpriteContainer : _styles.emojiImageContainer
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      ,
-      className: className,
-      onKeyDown: function onKeyDown(event) {
-        return handleKeyDown(props, event);
-      },
-      onMouseDown: function onMouseDown(event) {
-        handleMouseDown(props, event);
-      },
-      onMouseEnter: function onMouseEnter(event) {
-        handleMouseMove(props, event);
-      },
-      onFocus: function 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.default.createElement("span", (0, _extends2.default)({}, accessibilityProps, {
+    ref: ref,
+    "data-testid": "".concat(type, "-emoji-").concat(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: (0, _runtime.ax)([type === 'sprite' ? "_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _1e0c1o8l _jr50g2xd _ylp71o8l _pkaxgktf _1hdcgktf _109tnkob _tn8j2tgk _3naf2tgk _nt751r31 _49pcglyw _1hvw1o36 _7ehi1r2v _491113zc" : "_2rkosqtm _19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _bfhk1j28 _1e0c1o8l _s7n4nkob _v4pn1ule _tn8j2tgk _3naf2tgk _160jewfl _1theewfl _1kogh2mm _qyp0ewfl _nt751r31 _49pcglyw _1hvw1o36 _7ehi1r2v _491113zc", className]),
+    onKeyDown: function onKeyDown(event) {
+      return handleKeyDown(props, event);
+    },
+    onMouseDown: function onMouseDown(event) {
+      handleMouseDown(props, event);
+    },
+    onMouseEnter: function onMouseEnter(event) {
+      handleMouseMove(props, event);
+    },
+    onFocus: function 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, {
+    style: {
+      "--_1y60f1n": (0, _runtime.ix)("var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")")),
+      "--_1rebzxw": (0, _runtime.ix)("0 0 0 2px ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")")))
+    }
+  }), children);
 });
 var Emoji = exports.Emoji = function Emoji(props) {
   var emoji = props.emoji;
@@ -370,8 +373,8 @@ var Emoji = exports.Emoji = function Emoji(props) {
   }, []);
   // TODO: We always prefer render as image as having accessibility issues with sprite representation
   if ((0, _typeHelpers.isSpriteRepresentation)(emoji.representation)) {
-    return (0, _react2.jsx)(SpriteEmoji, props);
+    return /*#__PURE__*/_react.default.createElement(SpriteEmoji, props);
   }
-  return (0, _react2.jsx)(ImageEmoji, props);
+  return /*#__PURE__*/_react.default.createElement(ImageEmoji, props);
 };
 var _default = exports.default = Emoji;