@atlaskit/emoji 64.0.1 → 64.2.0

package/dist/es2019/i18n/en_ZZ.js

@@ -0,0 +1,43 @@
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//
+export default {
+  'fabric.emoji.add.custom.emoji.label': '⁣⁢Add your own emoji؜؜⁠‌⁡⁡⁣⁤',
+  'fabric.emoji.add.label': '⁣⁢Add emoji⁠⁡⁠⁡⁠⁡‍‌⁣⁤',
+  'fabric.emoji.cancel.label': '⁣⁢Cancel⁡‌‍‍⁠؜‍⁠⁠⁠⁡؜⁣⁤',
+  'fabric.emoji.categories.search.results': '⁣⁢Search results⁡؜⁡‌‌؜‍⁣⁤',
+  'fabric.emoji.category.activity': '⁣⁢Activity⁡⁠⁡‍⁠؜‍⁡‍⁡⁡‌‍⁣⁤',
+  'fabric.emoji.category.all.uploads': '⁣⁢All uploads؜⁠⁠؜‍⁡⁡⁡‍⁣⁤',
+  'fabric.emoji.category.flags': '⁣⁢Flags‍⁡⁡⁡⁠؜⁣⁤',
+  'fabric.emoji.category.foods': '⁣⁢Food & Drink‌‌⁡⁡‌؜‌‌‌⁣⁤',
+  'fabric.emoji.category.frequent': '⁣⁢Frequent⁠‍‌‍؜⁠‌⁠⁡‌⁠⁣⁤',
+  'fabric.emoji.category.nature': '⁣⁢Nature؜‍‌⁠‌‌⁣⁤',
+  'fabric.emoji.category.objects': '⁣⁢Objects⁠‍⁡‌⁠⁠؜⁠‌⁡؜⁣⁤',
+  'fabric.emoji.category.people': '⁣⁢People⁡‍⁠⁠‍⁠⁣⁤',
+  'fabric.emoji.category.places': '⁣⁢Travel & Places⁡؜‌⁠‌⁡‍⁣⁤',
+  'fabric.emoji.category.productivity': '⁣⁢Productivity⁡‌‌⁠‌‌⁠⁡‌؜⁠⁣⁤',
+  'fabric.emoji.category.symbols': '⁣⁢Symbols‍‍⁡‌⁠⁡⁣⁤',
+  'fabric.emoji.category.user.uploads': '⁣⁢Your uploads؜؜‌⁡⁠؜‌⁡⁠⁣⁤',
+  'fabric.emoji.choose.file.screenReaderDescription': '⁣⁢Choose a file for the emoji. JPG, PNG or GIF. Max size 1 MB.‌‍؜‍⁠؜؜⁡⁠⁠‌؜⁣⁤',
+  'fabric.emoji.choose.file.title': '⁣⁢Choose file‍⁠؜؜‍⁠‍⁡⁠‍⁣⁤',
+  'fabric.emoji.delete.description': '⁣⁢All existing instances of this emoji will be replaced with {emojiShortName}؜‌⁡⁠؜‌⁡⁠‍‍‌⁡⁠⁣⁤',
+  'fabric.emoji.delete.label': '⁣⁢Remove؜⁠‌⁡⁡؜‌⁠‌‌‍؜⁣⁤',
+  'fabric.emoji.delete.title': '⁣⁢Remove emoji؜؜⁡⁡‍⁣⁤',
+  'fabric.emoji.error.delete.failed': '⁣⁢Remove failed⁠؜‍؜⁡‌‌‌‍؜⁡⁣⁤',
+  'fabric.emoji.error.image.too.big': '⁣⁢Selected image is more than 1 MB⁠‌‍؜⁡‍⁠⁡‍‌‍‍⁣⁤',
+  'fabric.emoji.error.invalid.image': '⁣⁢Selected image is invalid⁠‍‍؜‌‌‌‌⁡‌؜⁠⁣⁤',
+  'fabric.emoji.error.upload.failed': '⁣⁢Upload failed؜⁡‍؜⁠⁠⁡⁠⁠؜‌⁣⁤',
+  'fabric.emoji.image.requirements': '⁣⁢JPG, PNG or GIF. Max size 1 MB.؜؜‌‍‌⁡‍⁡‌⁣⁤',
+  'fabric.emoji.name.ariaLabel': '⁣⁢Enter a name for the new emoji‌؜؜‌⁡⁡⁠⁡‍⁡⁣⁤',
+  'fabric.emoji.placeholder': '⁣⁢Emoji name‍‍‍‌⁠؜⁡⁠‌⁣⁤',
+  'fabric.emoji.preview': '⁣⁢Your new emoji {emoji} looks great⁠؜‌‌؜‍‌⁡⁡⁠⁠⁣⁤',
+  'fabric.emoji.preview.title': '⁣⁢Preview؜؜⁠⁡‍⁡⁡⁡؜⁣⁤',
+  'fabric.emoji.retry.label': '⁣⁢Retry‌؜⁠⁠‌⁠؜⁠؜‍⁠⁠⁠‍‍⁣⁤',
+  'fabric.emoji.search.label': '⁣⁢Search emoji‌⁠؜‍⁡⁡⁠؜؜⁡⁣⁤',
+  'fabric.emoji.search.placeholder': '⁣⁢Search‌‍؜؜؜‌؜⁡‌⁣⁤',
+  'fabric.emoji.select.skin.tone.ariaLabel': '⁣⁢Select skin tone, {selectedTone}؜‍⁠‌⁠⁡؜‌⁣⁤'
+};

package/dist/es2019/i18n/es.js

@@ -1,10 +1,10 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Spanish
+//Spanish (International)
 export default {
   'fabric.emoji.add.custom.emoji.label': 'Añade tu propio emoji',
   'fabric.emoji.add.label': 'Añadir emoji',

package/dist/es2019/i18n/et.js

@@ -1,10 +1,10 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Estonian
+//Estonian
 export default {
   'fabric.emoji.add.custom.emoji.label': 'Lisa enda emotikon',
   'fabric.emoji.add.label': 'Lisa emotikon',

package/dist/es2019/i18n/fi.js

@@ -1,10 +1,10 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Finnish
+//Finnish
 export default {
   'fabric.emoji.add.custom.emoji.label': 'Lisää oma emojisi',
   'fabric.emoji.add.label': 'Lisää emoji',

package/dist/es2019/i18n/fr.js

@@ -1,10 +1,10 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// French
+//French (France)
 export default {
   'fabric.emoji.add.custom.emoji.label': 'Ajouter votre propre émoticône',
   'fabric.emoji.add.label': 'Ajouter une émoticône',

package/dist/es2019/i18n/hu.js

@@ -1,10 +1,10 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Hungarian
+//Hungarian
 export default {
   'fabric.emoji.add.custom.emoji.label': 'Adjon hozzá saját emojit',
   'fabric.emoji.add.label': 'Emoji hozzáadása',

package/dist/es2019/i18n/it.js

@@ -1,10 +1,10 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Italian
+//Italian (Italy)
 export default {
   'fabric.emoji.add.custom.emoji.label': 'Aggiungi la tua emoji',
   'fabric.emoji.add.label': 'Aggiungi emoji',

package/dist/es2019/i18n/ja.js

@@ -1,10 +1,10 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Japanese
+//Japanese
 export default {
   'fabric.emoji.add.custom.emoji.label': 'オリジナルの絵文字を追加',
   'fabric.emoji.add.label': '絵文字を追加',

package/dist/es2019/i18n/ko.js

@@ -1,10 +1,10 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Korean
+//Korean
 export default {
   'fabric.emoji.add.custom.emoji.label': '나만의 이모지 추가',
   'fabric.emoji.add.label': '이모지 추가',

package/dist/es2019/i18n/nb.js

@@ -1,10 +1,10 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Norwegian Bokmål
+//Norwegian (Bokmål)
 export default {
   'fabric.emoji.add.custom.emoji.label': 'Legg til din egen emoji',
   'fabric.emoji.add.label': 'Legg til emoji',

package/dist/es2019/i18n/nl.js

@@ -1,10 +1,10 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Dutch
+//Dutch (Netherlands)
 export default {
   'fabric.emoji.add.custom.emoji.label': 'Voeg je eigen emoji toe',
   'fabric.emoji.add.label': 'Emoji toevoegen',

package/dist/es2019/i18n/pl.js

@@ -1,10 +1,10 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Polish
+//Polish (Poland)
 export default {
   'fabric.emoji.add.custom.emoji.label': 'Dodaj swoją własną emoji',
   'fabric.emoji.add.label': 'Dodaj emoji',

package/dist/es2019/i18n/pt_BR.js

@@ -1,10 +1,10 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Portuguese (Brazil)
+//Portuguese (Brazil)
 export default {
   'fabric.emoji.add.custom.emoji.label': 'Adicionar seu próprio emoji',
   'fabric.emoji.add.label': 'Adicionar emoji',

package/dist/es2019/i18n/pt_PT.js

@@ -1,10 +1,10 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Portuguese (Portugal)
+//Portuguese (Portugal)
 export default {
   'fabric.emoji.add.custom.emoji.label': 'Adicionar emoji personalizado',
   'fabric.emoji.add.label': 'Adicionar emoji',

package/dist/es2019/i18n/ru.js

@@ -1,10 +1,10 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Russian
+//Russian
 export default {
   'fabric.emoji.add.custom.emoji.label': 'Добавить собственный эмодзи',
   'fabric.emoji.add.label': 'Добавить эмодзи',

package/dist/es2019/i18n/sk.js

@@ -1,10 +1,10 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Slovak
+//Slovak
 export default {
   'fabric.emoji.add.custom.emoji.label': 'Pridať vlastný zábavný obrázok',
   'fabric.emoji.add.label': 'Pridať zábavný obrázok',

package/dist/es2019/i18n/sv.js

@@ -1,10 +1,10 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Swedish
+//Swedish
 export default {
   'fabric.emoji.add.custom.emoji.label': 'Lägg till din egen emoji',
   'fabric.emoji.add.label': 'Lägg till emoji',

package/dist/es2019/i18n/th.js

@@ -1,10 +1,10 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Thai
+//Thai (Thailand)
 export default {
   'fabric.emoji.add.custom.emoji.label': 'เพิ่มเอโมจิของคุณเอง',
   'fabric.emoji.add.label': 'เพิ่มเอโมจิ',

package/dist/es2019/i18n/tr.js

@@ -1,10 +1,10 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Turkish
+//Turkish (Turkey)
 export default {
   'fabric.emoji.add.custom.emoji.label': "Kendi emoji'nizi ekleyin",
   'fabric.emoji.add.label': 'Emoji ekle',

package/dist/es2019/i18n/uk.js

@@ -1,10 +1,10 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Ukrainian
+//Ukrainian (Ukraine)
 export default {
   'fabric.emoji.add.custom.emoji.label': 'Додати власний емодзі',
   'fabric.emoji.add.label': 'Додати емодзі',

package/dist/es2019/i18n/vi.js

@@ -1,10 +1,10 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Vietnamese
+//Vietnamese (Vietnam)
 export default {
   'fabric.emoji.add.custom.emoji.label': 'Thêm biểu tượng cảm xúc của riêng bạn',
   'fabric.emoji.add.label': 'Thêm biểu tượng cảm xúc',

package/dist/es2019/i18n/zh.js

@@ -1,10 +1,10 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Chinese
+//Chinese (Simplified)
 export default {
   'fabric.emoji.add.custom.emoji.label': '添加您自己的表情符号',
   'fabric.emoji.add.label': '添加表情符号',

package/dist/es2019/i18n/zh_TW.js

@@ -1,10 +1,10 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// undefined
+//Chinese (Traditional)
 export default {
   'fabric.emoji.add.custom.emoji.label': '新增專屬的表情符號',
   'fabric.emoji.add.label': '新增表情符號',

package/dist/es2019/util/shared-styles.js

@@ -4,12 +4,12 @@ import { N40, N30 } from '@atlaskit/theme/colors';
 import { emojiPickerWidth } from './constants';
 export const emojiPickerListWidth = emojiPickerWidth;
 export const emojiPickerListHeight = 205;
-export const emojiPickerBorderColor = token('color.border.neutral', N40);
-export const emojiPickerBoxShadow = token('shadow.overlay', '0 3px 6px rgba(0, 0, 0, 0.2)');
-export const noDialogContainerBorderColor = token('color.border.neutral', N40);
+export const emojiPickerBorderColor = token('color.border', N40);
+export const emojiPickerBoxShadow = token('elevation.shadow.overlay', '0 3px 6px rgba(0, 0, 0, 0.2)');
+export const noDialogContainerBorderColor = token('color.border', N40);
 export const noDialogContainerBorderRadius = `${borderRadius()}px`;
-export const noDialogContainerBoxShadow = token('shadow.overlay', '0 3px 6px rgba(0, 0, 0, 0.2)');
-export const akEmojiSelectedBackgroundColor = token('color.background.transparentNeutral.hover', N30);
-export const emojiPreviewSelectedColor = token('color.background.subtleNeutral.resting', N30);
+export const noDialogContainerBoxShadow = token('elevation.shadow.overlay', '0 3px 6px rgba(0, 0, 0, 0.2)');
+export const akEmojiSelectedBackgroundColor = token('color.background.neutral.subtle.hovered', N30);
+export const emojiPreviewSelectedColor = token('color.background.neutral', N30);
 export const emojiTypeAheadMaxHeight = 350;
 export const emojiTypeAheadWidth = 350;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "64.0.1",
+	"version": "64.2.0",
 	"sideEffects": false
 }

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

@@ -14,7 +14,6 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-import PropTypes from 'prop-types';
 import React from 'react';
 import { PureComponent } from 'react';
 import { shouldUseAltRepresentation } from '../../api/EmojiUtils';
@@ -22,6 +21,7 @@ import { isEmojiDescription, isMediaEmoji, isPromise } from '../../util/type-hel
 import debug from '../../util/logger';
 import Emoji from './Emoji';
 import EmojiPlaceholder from './EmojiPlaceholder';
+import { EmojiContext } from '../../context/EmojiContext';
 
 /**
  * Renders an emoji from a cached image, if required.
@@ -53,7 +53,7 @@ export var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
 
     _classCallCheck(this, CachingMediaEmoji);
 
-    _this = _super.call(this, props, context);
+    _this = _super.call(this, props);
 
     _defineProperty(_assertThisInitialized(_this), "mounted", false);
 
@@ -102,6 +102,10 @@ export var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
     value: function loadEmoji(emoji, context, forceLoad) {
       var _this2 = this;
 
+      if (!context) {
+        return;
+      }
+
       if (!context.emoji) {
         return undefined;
       }
@@ -189,8 +193,6 @@ export var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
   return CachingMediaEmoji;
 }(PureComponent);
 
-_defineProperty(CachingMediaEmoji, "contextTypes", {
-  emoji: PropTypes.object
-});
+_defineProperty(CachingMediaEmoji, "contextType", EmojiContext);
 
 export default CachingEmoji;

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

@@ -12,7 +12,7 @@ var DeleteButton = function DeleteButton(props) {
   }, /*#__PURE__*/React.createElement(Button, {
     iconBefore: /*#__PURE__*/React.createElement(CrossCircleIcon, {
       label: deleteEmojiLabel,
-      primaryColor: token('color.text.mediumEmphasis', N500),
+      primaryColor: token('color.text.subtle', N500),
       size: "small"
     }),
     onClick: props.onClick,

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

@@ -5,7 +5,6 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import Tooltip from '@atlaskit/tooltip';
 import classNames from 'classnames';
 import React from 'react';
 import { shouldUseAltRepresentation } from '../../api/EmojiUtils';
@@ -30,6 +29,21 @@ var handleMouseDown = function handleMouseDown(props, event) {
   }
 };
 
+var handleKeyPress = function handleKeyPress(props, event) {
+  // Clicked emoji delete button
+  if (event.target instanceof Element && event.target.getAttribute('aria-label') === deleteEmojiLabel) {
+    return;
+  }
+
+  var emoji = props.emoji,
+      onSelected = props.onSelected;
+  event.preventDefault();
+
+  if (onSelected && (event.key === 'Enter' || event.key === ' ')) {
+    onSelected(toEmojiId(emoji), emoji, event);
+  }
+};
+
 var handleMouseMove = function handleMouseMove(props, event) {
   var emoji = props.emoji,
       onMouseMove = props.onMouseMove;
@@ -72,7 +86,8 @@ var renderAsSprite = function renderAsSprite(props) {
       selected = props.selected,
       selectOnHover = props.selectOnHover,
       className = props.className,
-      showTooltip = props.showTooltip;
+      showTooltip = props.showTooltip,
+      shouldBeInteractive = props.shouldBeInteractive;
   var representation = emoji.representation;
   var sprite = representation.sprite;
   var classes = (_classes = {}, _defineProperty(_classes, styles.emojiContainer, true), _defineProperty(_classes, styles.emojiNode, true), _defineProperty(_classes, styles.selected, selected), _defineProperty(_classes, styles.selectOnHover, selectOnHover), _classes);
@@ -104,18 +119,21 @@ var renderAsSprite = function renderAsSprite(props) {
     style: style
   }, "\xA0");
   return /*#__PURE__*/React.createElement("span", {
+    tabIndex: shouldBeInteractive ? 0 : undefined,
+    role: shouldBeInteractive ? 'button' : undefined,
     className: classNames(classes),
+    onKeyPress: function onKeyPress(event) {
+      return handleKeyPress(props, event);
+    },
     onMouseDown: function onMouseDown(event) {
       handleMouseDown(props, event);
     },
     onMouseMove: function onMouseMove(event) {
       handleMouseMove(props, event);
     },
-    "aria-label": emoji.shortName
-  }, showTooltip ? /*#__PURE__*/React.createElement(Tooltip, {
-    tag: "span",
-    content: emoji.shortName
-  }, emojiNode) : emojiNode);
+    "aria-label": emoji.shortName,
+    title: showTooltip ? emoji.shortName : ''
+  }, emojiNode);
 }; // Keep as pure functional component, see renderAsSprite.
 
 
@@ -128,7 +146,8 @@ var renderAsImage = function renderAsImage(props) {
       selectOnHover = props.selectOnHover,
       className = props.className,
       showTooltip = props.showTooltip,
-      showDelete = props.showDelete;
+      showDelete = props.showDelete,
+      shouldBeInteractive = props.shouldBeInteractive;
   var classes = (_classes2 = {}, _defineProperty(_classes2, styles.emoji, true), _defineProperty(_classes2, styles.emojiNode, true), _defineProperty(_classes2, styles.selected, selected), _defineProperty(_classes2, styles.selectOnHover, selectOnHover), _defineProperty(_classes2, styles.emojiImage, true), _classes2);
 
   if (className) {
@@ -195,18 +214,21 @@ var renderAsImage = function renderAsImage(props) {
     onError: onError
   }, sizing));
   return /*#__PURE__*/React.createElement("span", {
+    tabIndex: shouldBeInteractive ? 0 : undefined,
+    role: shouldBeInteractive ? 'button' : undefined,
     className: classNames(classes),
+    onKeyPress: function onKeyPress(event) {
+      return handleKeyPress(props, event);
+    },
     onMouseDown: function onMouseDown(event) {
       handleMouseDown(props, event);
     },
     onMouseMove: function onMouseMove(event) {
       handleMouseMove(props, event);
     },
-    "aria-label": emoji.shortName
-  }, deleteButton, showTooltip ? /*#__PURE__*/React.createElement(Tooltip, {
-    tag: "span",
-    content: emoji.shortName
-  }, emojiNode) : emojiNode);
+    "aria-label": emoji.shortName,
+    title: showTooltip ? emoji.shortName : ''
+  }, deleteButton, emojiNode);
 };
 
 export var Emoji = function Emoji(props) {