@atlaskit/emoji 63.2.0 → 64.1.1

package/dist/esm/api/internal/UsageFrequencyTracker.js

@@ -2,9 +2,9 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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 { isEmojiVariationDescription } from '../../util/type-helpers';
 import { localStoragePrefix } from '../../util/constants';

package/dist/esm/api/media/SiteEmojiResource.js

@@ -2,10 +2,11 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["altRepresentations"];
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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 { utils as serviceUtils } from '@atlaskit/util-service-support';
 import { getMediaClient } from '@atlaskit/media-client';
@@ -50,7 +51,7 @@ var SiteEmojiResource = /*#__PURE__*/function () {
         if (emojis.length) {
           var _emojis$ = emojis[0],
               altRepresentations = _emojis$.altRepresentations,
-              emoji = _objectWithoutProperties(_emojis$, ["altRepresentations"]);
+              emoji = _objectWithoutProperties(_emojis$, _excluded);
 
           var _response = _objectSpread(_objectSpread({}, emoji), {}, {
             representation: convertImageToMediaRepresentation(emoji.representation)

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

@@ -7,6 +7,8 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["placeholderSize"],
+    _excluded2 = ["children", "placeholderSize"];
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -28,7 +30,7 @@ export var CachingEmoji = function CachingEmoji(props) {
   // Optimisation to only render the class based CachingMediaEmoji if necessary
   // slight performance hit, which accumulates for a large number of emoji.
   var placeholderSize = props.placeholderSize,
-      emojiProps = _objectWithoutProperties(props, ["placeholderSize"]);
+      emojiProps = _objectWithoutProperties(props, _excluded);
 
   if (isMediaEmoji(props.emoji)) {
     return /*#__PURE__*/React.createElement(CachingMediaEmoji, props);
@@ -155,7 +157,7 @@ export var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
       var _this$props = this.props,
           children = _this$props.children,
           placeholderSize = _this$props.placeholderSize,
-          otherProps = _objectWithoutProperties(_this$props, ["children", "placeholderSize"]);
+          otherProps = _objectWithoutProperties(_this$props, _excluded2);
 
       var emojiComponent;
 

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

@@ -1,11 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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) {

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

@@ -0,0 +1,200 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+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 classNames from 'classnames';
+import React from 'react';
+import { PureComponent } from 'react';
+import { FormattedMessage, injectIntl } from 'react-intl-next';
+import EmojiDeletePreview from '../common/EmojiDeletePreview';
+import EmojiUploadPicker from '../common/EmojiUploadPicker';
+import * as styles from './styles';
+import * as footerStyles from '../picker/styles';
+import EmojiPickerListSearch from '../picker/EmojiPickerListSearch';
+import ToneSelector from './ToneSelector';
+import EmojiButton from './EmojiButton';
+import { messages } from '../i18n';
+import AkButton from '@atlaskit/button/standard-button';
+import AddIcon from '@atlaskit/icon/glyph/add';
+import { setSkinToneAriaLabelText } from './setSkinToneAriaLabelText';
+export var EmojiActions = /*#__PURE__*/function (_PureComponent) {
+  _inherits(EmojiActions, _PureComponent);
+
+  var _super = _createSuper(EmojiActions);
+
+  function EmojiActions() {
+    var _this;
+
+    _classCallCheck(this, EmojiActions);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      selectingTone: false
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onToneButtonClick", function () {
+      _this.setState({
+        selectingTone: !_this.state.selectingTone
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onToneSelected", function (toneValue) {
+      _this.setState({
+        selectingTone: false
+      });
+
+      if (_this.props.onToneSelected) {
+        _this.props.onToneSelected(toneValue);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onMouseLeave", function () {
+      var selectingTone = _this.state.selectingTone;
+      var onToneSelectorCancelled = _this.props.onToneSelectorCancelled;
+
+      if (selectingTone && onToneSelectorCancelled) {
+        onToneSelectorCancelled();
+      }
+
+      _this.setState({
+        selectingTone: false
+      });
+    });
+
+    return _this;
+  }
+
+  _createClass(EmojiActions, [{
+    key: "renderTones",
+    value: function renderTones() {
+      var _this$props = this.props,
+          toneEmoji = _this$props.toneEmoji,
+          selectedTone = _this$props.selectedTone,
+          intl = _this$props.intl;
+      var formatMessage = intl.formatMessage;
+
+      if (!toneEmoji) {
+        return null;
+      }
+
+      var previewEmoji = toneEmoji;
+
+      if (selectedTone && previewEmoji.skinVariations) {
+        previewEmoji = previewEmoji.skinVariations[(selectedTone || 1) - 1];
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.emojiToneSelectorContainer
+      }, this.state.selectingTone && /*#__PURE__*/React.createElement(ToneSelector, {
+        emoji: toneEmoji,
+        onToneSelected: this.onToneSelected,
+        previewEmojiId: previewEmoji.id
+      }), /*#__PURE__*/React.createElement(EmojiButton, {
+        ariaExpanded: this.state.selectingTone,
+        emoji: previewEmoji,
+        selectOnHover: true,
+        onSelected: this.onToneButtonClick,
+        ariaLabelText: formatMessage(messages.emojiSelectSkinToneButtonAriaLabelText, {
+          selectedTone: "".concat(setSkinToneAriaLabelText(previewEmoji.name), " selected")
+        })
+      }));
+    } // note: emoji-picker-add-emoji className is used by pollinator synthetic checks
+
+  }, {
+    key: "renderAddOwnEmoji",
+    value: function renderAddOwnEmoji() {
+      var _this$props2 = this.props,
+          onOpenUpload = _this$props2.onOpenUpload,
+          uploadEnabled = _this$props2.uploadEnabled,
+          intl = _this$props2.intl;
+      var formatMessage = intl.formatMessage;
+
+      if (!uploadEnabled) {
+        return null;
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.AddCustomEmoji
+      }, /*#__PURE__*/React.createElement(FormattedMessage, messages.addCustomEmojiLabel, function (label) {
+        return /*#__PURE__*/React.createElement(AkButton, {
+          onClick: onOpenUpload,
+          iconBefore: /*#__PURE__*/React.createElement(AddIcon, {
+            label: formatMessage(messages.addCustomEmojiLabel),
+            size: "small"
+          }),
+          appearance: "subtle",
+          className: styles.addCustomEmojiButton + ' emoji-picker-add-emoji'
+        }, label);
+      }));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props3 = this.props,
+          initialUploadName = _this$props3.initialUploadName,
+          onUploadCancelled = _this$props3.onUploadCancelled,
+          onUploadEmoji = _this$props3.onUploadEmoji,
+          onCloseDelete = _this$props3.onCloseDelete,
+          onDeleteEmoji = _this$props3.onDeleteEmoji,
+          uploadErrorMessage = _this$props3.uploadErrorMessage,
+          uploading = _this$props3.uploading,
+          onFileChooserClicked = _this$props3.onFileChooserClicked,
+          emojiToDelete = _this$props3.emojiToDelete,
+          onChange = _this$props3.onChange,
+          query = _this$props3.query;
+      var previewFooterClassnames = classNames([footerStyles.emojiPickerFooter, footerStyles.emojiActionsContainerWithBottomShadow]);
+
+      if (uploading) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: previewFooterClassnames
+        }, /*#__PURE__*/React.createElement(EmojiUploadPicker, {
+          onUploadCancelled: onUploadCancelled,
+          onUploadEmoji: onUploadEmoji,
+          onFileChooserClicked: onFileChooserClicked,
+          errorMessage: uploadErrorMessage,
+          initialUploadName: initialUploadName
+        }));
+      }
+
+      if (emojiToDelete) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: previewFooterClassnames
+        }, /*#__PURE__*/React.createElement(EmojiDeletePreview, {
+          emoji: emojiToDelete,
+          onDeleteEmoji: onDeleteEmoji,
+          onCloseDelete: onCloseDelete
+        }));
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: previewFooterClassnames,
+        onMouseLeave: this.onMouseLeave
+      }, /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: 'flex',
+          justifyContent: 'flex-end',
+          alignItems: 'center'
+        }
+      }, !this.state.selectingTone && /*#__PURE__*/React.createElement(EmojiPickerListSearch, {
+        onChange: onChange,
+        query: query
+      }), this.renderTones()), this.renderAddOwnEmoji());
+    }
+  }]);
+
+  return EmojiActions;
+}(PureComponent);
+export default injectIntl(EmojiActions);

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

@@ -14,7 +14,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import AkButton from '@atlaskit/button/custom-theme-button';
 import React from 'react';
 import { Component } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, injectIntl } from 'react-intl-next';
 import { messages } from '../i18n';
 import CachingEmoji from './CachingEmoji';
 import EmojiErrorMessage from './EmojiErrorMessage';
@@ -81,12 +81,13 @@ var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
-
-      var emoji = this.props.emoji;
+      var _this$props2 = this.props,
+          emoji = _this$props2.emoji,
+          intl = _this$props2.intl;
       var _this$state = this.state,
           loading = _this$state.loading,
           error = _this$state.error;
+      var formatMessage = intl.formatMessage;
       return /*#__PURE__*/React.createElement("div", {
         className: styles.deletePreview
       }, /*#__PURE__*/React.createElement("div", {
@@ -101,22 +102,18 @@ var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
         emoji: emoji
       }), /*#__PURE__*/React.createElement("div", {
         className: styles.previewButtonGroup
-      }, error ? /*#__PURE__*/React.createElement(FormattedMessage, messages.deleteEmojiFailed, function (message) {
-        return !loading ? /*#__PURE__*/React.createElement(EmojiErrorMessage, {
-          message: message,
-          className: styles.emojiDeleteErrorMessage,
-          tooltip: true
-        }) : null;
-      }) : null, /*#__PURE__*/React.createElement(FormattedMessage, messages.deleteEmojiLabel, function (message) {
-        return /*#__PURE__*/React.createElement(RetryableButton, {
-          className: styles.uploadEmojiButton,
-          retryClassName: styles.uploadRetryButton,
-          label: message,
-          onSubmit: _this2.onSubmit,
-          appearance: "danger",
-          loading: loading,
-          error: error
-        });
+      }, error ? !loading ? /*#__PURE__*/React.createElement(EmojiErrorMessage, {
+        message: formatMessage(messages.deleteEmojiFailed),
+        className: styles.emojiDeleteErrorMessage,
+        tooltip: true
+      }) : null : null, /*#__PURE__*/React.createElement(RetryableButton, {
+        className: styles.uploadEmojiButton,
+        retryClassName: styles.uploadRetryButton,
+        label: formatMessage(messages.deleteEmojiLabel),
+        onSubmit: this.onSubmit,
+        appearance: "danger",
+        loading: loading,
+        error: error
       }), /*#__PURE__*/React.createElement(AkButton, {
         appearance: "subtle",
         onClick: this.onCancel,
@@ -128,4 +125,4 @@ var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
   return EmojiDeletePreview;
 }(Component);
 
-export { EmojiDeletePreview as default };
+export default injectIntl(EmojiDeletePreview);

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

@@ -1,7 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import classNames from 'classnames';
-import Tooltip from '@atlaskit/tooltip';
 import { placeholder, placeholderContainer } from './styles';
 import { defaultEmojiHeight } from '../../util/constants';
 import { isImageRepresentation, isMediaRepresentation } from '../../util/type-helpers';
@@ -35,15 +34,12 @@ var EmojiPlaceholder = function EmojiPlaceholder(props) {
     height: "".concat(height, "px")
   };
   var classes = (_classes = {}, _defineProperty(_classes, placeholder, true), _defineProperty(_classes, placeholderContainer, true), _classes);
-  var placeholderNode = /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React.createElement("span", {
     "aria-label": shortName,
     className: classNames(classes),
-    style: style
+    style: style,
+    title: showTooltip ? shortName : ''
   });
-  return showTooltip ? /*#__PURE__*/React.createElement(Tooltip, {
-    tag: "span",
-    content: shortName
-  }, placeholderNode) : placeholderNode;
 };
 
 export default EmojiPlaceholder;

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -16,15 +15,14 @@ import AddIcon from '@atlaskit/icon/glyph/add';
 import classNames from 'classnames';
 import React from 'react';
 import { PureComponent } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, injectIntl } from 'react-intl-next';
 import CachingEmoji from '../../components/common/CachingEmoji';
 import EmojiButton from '../../components/common/EmojiButton';
 import { messages } from '../i18n';
 import * as styles from './styles';
 import ToneSelector from './ToneSelector';
 import { setSkinToneAriaLabelText } from './setSkinToneAriaLabelText';
-
-var EmojiPreview = /*#__PURE__*/function (_PureComponent) {
+export var EmojiPreview = /*#__PURE__*/function (_PureComponent) {
   _inherits(EmojiPreview, _PureComponent);
 
   var _super = _createSuper(EmojiPreview);
@@ -79,11 +77,11 @@ var EmojiPreview = /*#__PURE__*/function (_PureComponent) {
   _createClass(EmojiPreview, [{
     key: "renderTones",
     value: function renderTones() {
-      var _this2 = this;
-
       var _this$props = this.props,
           toneEmoji = _this$props.toneEmoji,
-          selectedTone = _this$props.selectedTone;
+          selectedTone = _this$props.selectedTone,
+          intl = _this$props.intl;
+      var formatMessage = intl.formatMessage;
 
       if (!toneEmoji) {
         return null;
@@ -101,24 +99,20 @@ var EmojiPreview = /*#__PURE__*/function (_PureComponent) {
         emoji: toneEmoji,
         onToneSelected: this.onToneSelected,
         previewEmojiId: previewEmoji.id
-      }), /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.emojiSelectSkinToneButtonAriaLabelText, {
-        values: {
+      }), /*#__PURE__*/React.createElement(EmojiButton, {
+        ariaExpanded: this.state.selectingTone,
+        emoji: previewEmoji,
+        selectOnHover: true,
+        onSelected: this.onToneButtonClick,
+        ariaLabelText: formatMessage(messages.emojiSelectSkinToneButtonAriaLabelText, {
           selectedTone: "".concat(setSkinToneAriaLabelText(previewEmoji.name), " selected")
-        }
-      }), function (ariaLabel) {
-        return /*#__PURE__*/React.createElement(EmojiButton, {
-          ariaExpanded: _this2.state.selectingTone,
-          emoji: previewEmoji,
-          selectOnHover: true,
-          onSelected: _this2.onToneButtonClick,
-          ariaLabelText: ariaLabel
-        });
+        })
       }));
     }
   }, {
     key: "renderEmojiPreview",
     value: function renderEmojiPreview() {
-      var _classNames, _classNames2;
+      var _classNames2;
 
       var selectingTone = this.state.selectingTone;
       var _this$props2 = this.props,
@@ -129,7 +123,7 @@ var EmojiPreview = /*#__PURE__*/function (_PureComponent) {
         return null;
       }
 
-      var previewClasses = classNames((_classNames = {}, _defineProperty(_classNames, styles.preview, true), _defineProperty(_classNames, styles.withToneSelector, !!this.props.toneEmoji), _classNames));
+      var previewClasses = classNames(_defineProperty({}, styles.preview, true));
       var previewTextClasses = classNames((_classNames2 = {}, _defineProperty(_classNames2, styles.previewText, true), _defineProperty(_classNames2, styles.previewSingleLine, !emoji.name), _classNames2));
       return /*#__PURE__*/React.createElement("div", {
         className: previewClasses
@@ -151,8 +145,10 @@ var EmojiPreview = /*#__PURE__*/function (_PureComponent) {
     value: function renderAddOwnEmoji() {
       var _this$props3 = this.props,
           onOpenUpload = _this$props3.onOpenUpload,
-          uploadEnabled = _this$props3.uploadEnabled;
+          uploadEnabled = _this$props3.uploadEnabled,
+          intl = _this$props3.intl;
       var selectingTone = this.state.selectingTone;
+      var formatMessage = intl.formatMessage;
 
       if (!uploadEnabled || selectingTone) {
         return null;
@@ -164,7 +160,7 @@ var EmojiPreview = /*#__PURE__*/function (_PureComponent) {
         return /*#__PURE__*/React.createElement(AkButton, {
           onClick: onOpenUpload,
           iconBefore: /*#__PURE__*/React.createElement(AddIcon, {
-            label: label,
+            label: formatMessage(messages.addCustomEmojiLabel),
             size: "small"
           }),
           appearance: "subtle",
@@ -185,5 +181,4 @@ var EmojiPreview = /*#__PURE__*/function (_PureComponent) {
 
   return EmojiPreview;
 }(PureComponent);
-
-export { EmojiPreview as default };
+export default injectIntl(EmojiPreview);