@atlaskit/emoji 63.1.8 → 64.0.0

package/CHANGELOG.md

@@ -1,5 +1,67 @@
 # @atlaskit/emoji
 
+## 64.0.0
+
+### Major Changes
+
+- [`47f58da5946`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47f58da5946) - ED-13322, ED-13324, ED-13326, ED-13323, ED-13204: Upgrade and support react-intl@^5.18.1 including breaking API changes, types and tests in atlassian-frontend packages
+
+  What changed: Upgraded our react-intl support from ^2.6.0 to ^5.18.1. This means editor packages now rely on consumers installing ^5.18.1, otherwise editor usage of react-intl will mismatch with actual installed react-intl APIs.
+  Why change was made: As part of a coordinated upgrade effort across AF packages, as react-intl v2 is quite dated.
+  How consumer should update their code: Ensure react-intl ^5.18.1 is installed in consuming applications.
+
+  Upgrade guide: To consume atlassian-frontend packages that use react-intl5 setup a second provider for the new version, using an npm alias
+
+  ```js
+  "react-intl": "^2.6.0",
+  "react-intl-next": "npm:react-intl@^5.18.1",
+  ```
+
+  ```js
+  import { IntlProvider } from 'react-intl';
+  import { IntlProvider as IntlNextProvider } from 'react-intl-next';
+
+  return (
+    <IntlProvider
+      key={locale}
+      data-test-language={locale}
+      locale={locale}
+      defaultLocale={DEFAULT_LOCALE}
+      messages={messages}
+    >
+      <IntlNextProvider
+        key={locale}
+        data-test-language={locale}
+        locale={locale}
+        defaultLocale={DEFAULT_LOCALE}
+        messages={messages}
+      >
+        {children}
+      </IntlNextProvider>
+    </IntlProvider>
+  );
+  ```
+
+## 63.2.0
+
+### Minor Changes
+
+- [`4f221a2664a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4f221a2664a) - Instrumented `@atlaskit/emoji` with the new theming package, `@atlaskit/tokens`. New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+## 63.1.10
+
+### Patch Changes
+
+- [`5ee9d374461`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5ee9d374461) - [ux] AK-218: Emoji CategorySelector add outline to the category buttons on focus, add aria-label
+- [`022437d88d0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/022437d88d0) - [ux] AK-812 Emoji toolbar button hover state meet minimum contrast requirements
+- [`1f5f0470fdd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1f5f0470fdd) - New emoji link label with input
+
+## 63.1.9
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 63.1.8
 
 ### Patch Changes

package/dist/cjs/api/EmojiRepository.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.getEmojiVariation = void 0;
+exports.getEmojiVariation = exports.default = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 

package/dist/cjs/api/EmojiResource.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.EmojiResource = exports.supportsUploadFeature = void 0;
+exports.supportsUploadFeature = exports.default = exports.EmojiResource = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 

package/dist/cjs/api/EmojiUtils.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.shouldUseAltRepresentation = exports.denormaliseEmojiServiceResponse = exports.denormaliseSkinEmoji = exports.denormaliseServiceAltRepresentation = exports.denormaliseServiceRepresentation = exports.isMediaApiUrl = exports.getAltRepresentation = exports.getPixelRatio = exports.emojiRequest = void 0;
+exports.shouldUseAltRepresentation = exports.isMediaApiUrl = exports.getPixelRatio = exports.getAltRepresentation = exports.emojiRequest = exports.denormaliseSkinEmoji = exports.denormaliseServiceRepresentation = exports.denormaliseServiceAltRepresentation = exports.denormaliseEmojiServiceResponse = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 

package/dist/cjs/api/internal/Comparators.js

@@ -5,9 +5,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.UsageFrequencyComparator = exports.QueryStringPositionMatchComparator = exports.OrderComparator = exports.ExactShortNameMatchComparator = exports.EmojiTypeComparator = exports.ChainedEmojiComparator = exports.AsciiMatchComparator = exports.AlphabeticalShortnameComparator = void 0;
 exports.createSearchEmojiComparator = createSearchEmojiComparator;
 exports.createUsageOnlyEmojiComparator = createUsageOnlyEmojiComparator;
-exports.AlphabeticalShortnameComparator = exports.OrderComparator = exports.QueryStringPositionMatchComparator = exports.UsageFrequencyComparator = exports.EmojiTypeComparator = exports.ExactShortNameMatchComparator = exports.AsciiMatchComparator = exports.ChainedEmojiComparator = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Gateway = exports.UsageFrequencyTracker = void 0;
+exports.UsageFrequencyTracker = exports.Gateway = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.mediaProportionOfProgress = void 0;
+exports.mediaProportionOfProgress = exports.default = void 0;
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 

package/dist/cjs/api/media/TokenManager.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.expireAdjustment = void 0;
+exports.expireAdjustment = exports.default = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 

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

@@ -15,6 +15,8 @@ var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-ci
 
 var _react = _interopRequireDefault(require("react"));
 
+var _tokens = require("@atlaskit/tokens");
+
 var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("../../util/constants");
@@ -31,7 +33,7 @@ var DeleteButton = function DeleteButton(props) {
   }, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
     iconBefore: /*#__PURE__*/_react.default.createElement(_crossCircle.default, {
       label: _constants.deleteEmojiLabel,
-      primaryColor: _colors.N500,
+      primaryColor: (0, _tokens.token)('color.text.mediumEmphasis', _colors.N500),
       size: "small"
     }),
     onClick: props.onClick,

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

@@ -29,7 +29,7 @@ var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _i18n = require("../i18n");
 
@@ -105,17 +105,18 @@ 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.default.createElement("div", {
         className: styles.deletePreview
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: styles.deleteText
-      }, /*#__PURE__*/_react.default.createElement("h5", null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.deleteEmojiTitle)), /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.deleteEmojiDescription, {
+      }, /*#__PURE__*/_react.default.createElement("h5", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.deleteEmojiTitle)), /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.deleteEmojiDescription, {
         values: {
           emojiShortName: emoji.shortName
         }
@@ -125,30 +126,28 @@ var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
         emoji: emoji
       }), /*#__PURE__*/_react.default.createElement("div", {
         className: styles.previewButtonGroup
-      }, error ? /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.deleteEmojiFailed, function (message) {
-        return !loading ? /*#__PURE__*/_react.default.createElement(_EmojiErrorMessage.default, {
-          message: message,
-          className: styles.emojiDeleteErrorMessage,
-          tooltip: true
-        }) : null;
-      }) : null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.deleteEmojiLabel, function (message) {
-        return /*#__PURE__*/_react.default.createElement(_RetryableButton.default, {
-          className: styles.uploadEmojiButton,
-          retryClassName: styles.uploadRetryButton,
-          label: message,
-          onSubmit: _this2.onSubmit,
-          appearance: "danger",
-          loading: loading,
-          error: error
-        });
+      }, error ? !loading ? /*#__PURE__*/_react.default.createElement(_EmojiErrorMessage.default, {
+        message: formatMessage(_i18n.messages.deleteEmojiFailed),
+        className: styles.emojiDeleteErrorMessage,
+        tooltip: true
+      }) : null : null, /*#__PURE__*/_react.default.createElement(_RetryableButton.default, {
+        className: styles.uploadEmojiButton,
+        retryClassName: styles.uploadRetryButton,
+        label: formatMessage(_i18n.messages.deleteEmojiLabel),
+        onSubmit: this.onSubmit,
+        appearance: "danger",
+        loading: loading,
+        error: error
       }), /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
         appearance: "subtle",
         onClick: this.onCancel,
         className: styles.cancelButton
-      }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.cancelLabel)))));
+      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.cancelLabel)))));
     }
   }]);
   return EmojiDeletePreview;
 }(_react.Component);
 
-exports.default = EmojiDeletePreview;
+var _default = (0, _reactIntlNext.injectIntl)(EmojiDeletePreview);
+
+exports.default = _default;

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

@@ -7,9 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+exports.default = exports.EmojiPreview = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -33,7 +31,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _CachingEmoji = _interopRequireDefault(require("../../components/common/CachingEmoji"));
 
@@ -105,11 +103,11 @@ var EmojiPreview = /*#__PURE__*/function (_PureComponent) {
   (0, _createClass2.default)(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;
@@ -127,18 +125,14 @@ var EmojiPreview = /*#__PURE__*/function (_PureComponent) {
         emoji: toneEmoji,
         onToneSelected: this.onToneSelected,
         previewEmojiId: previewEmoji.id
-      }), /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.emojiSelectSkinToneButtonAriaLabelText, {
-        values: {
+      }), /*#__PURE__*/_react.default.createElement(_EmojiButton.default, {
+        ariaExpanded: this.state.selectingTone,
+        emoji: previewEmoji,
+        selectOnHover: true,
+        onSelected: this.onToneButtonClick,
+        ariaLabelText: formatMessage(_i18n.messages.emojiSelectSkinToneButtonAriaLabelText, {
           selectedTone: "".concat((0, _setSkinToneAriaLabelText.setSkinToneAriaLabelText)(previewEmoji.name), " selected")
-        }
-      }), function (ariaLabel) {
-        return /*#__PURE__*/_react.default.createElement(_EmojiButton.default, {
-          ariaExpanded: _this2.state.selectingTone,
-          emoji: previewEmoji,
-          selectOnHover: true,
-          onSelected: _this2.onToneButtonClick,
-          ariaLabelText: ariaLabel
-        });
+        })
       }));
     }
   }, {
@@ -177,8 +171,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;
@@ -186,11 +182,11 @@ var EmojiPreview = /*#__PURE__*/function (_PureComponent) {
 
       return /*#__PURE__*/_react.default.createElement("div", {
         className: styles.AddCustomEmoji
-      }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.addCustomEmojiLabel, function (label) {
+      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.addCustomEmojiLabel, function (label) {
         return /*#__PURE__*/_react.default.createElement(_standardButton.default, {
           onClick: onOpenUpload,
           iconBefore: /*#__PURE__*/_react.default.createElement(_add.default, {
-            label: label,
+            label: formatMessage(_i18n.messages.addCustomEmojiLabel),
             size: "small"
           }),
           appearance: "subtle",
@@ -211,4 +207,8 @@ var EmojiPreview = /*#__PURE__*/function (_PureComponent) {
   return EmojiPreview;
 }(_react.PureComponent);
 
-exports.default = EmojiPreview;
+exports.EmojiPreview = EmojiPreview;
+
+var _default = (0, _reactIntlNext.injectIntl)(EmojiPreview);
+
+exports.default = _default;

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

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.EmojiUploadPicker = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -23,11 +23,11 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _fieldBase = _interopRequireDefault(require("@atlaskit/field-base"));
-
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
+
+var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 
 var ImageUtil = _interopRequireWildcard(require("../../util/image"));
 
@@ -96,15 +96,15 @@ var ChooseEmojiFile = /*#__PURE__*/function (_PureComponent) {
   (0, _createClass2.default)(ChooseEmojiFile, [{
     key: "render",
     value: function render() {
-      var _this2 = this;
-
       var _this$props = this.props,
           _this$props$name = _this$props.name,
           name = _this$props$name === void 0 ? '' : _this$props$name,
           onChooseFile = _this$props.onChooseFile,
           onClick = _this$props.onClick,
           onNameChange = _this$props.onNameChange,
-          errorMessage = _this$props.errorMessage;
+          errorMessage = _this$props.errorMessage,
+          intl = _this$props.intl;
+      var formatMessage = intl.formatMessage;
       var disableChooser = !name;
       var fileChooserButtonDescriptionId = 'choose.emoji.file.button.screen.reader.description.id'; // Note: FileChooser.accept does not work in Electron due to a bug: https://product-fabric.atlassian.net/browse/FS-1626
 
@@ -112,49 +112,38 @@ var ChooseEmojiFile = /*#__PURE__*/function (_PureComponent) {
         className: styles.emojiUpload
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: styles.uploadChooseFileMessage
-      }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.addCustomEmojiLabel, function (message) {
+      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.addCustomEmojiLabel, function (message) {
         return /*#__PURE__*/_react.default.createElement("h5", null, message);
       })), /*#__PURE__*/_react.default.createElement("div", {
         className: styles.uploadChooseFileRow
       }, /*#__PURE__*/_react.default.createElement("span", {
         className: styles.uploadChooseFileEmojiName
-      }, /*#__PURE__*/_react.default.createElement(_fieldBase.default, {
-        appearance: "standard",
+      }, /*#__PURE__*/_react.default.createElement(_textfield.default, {
+        placeholder: formatMessage(_i18n.messages.emojiPlaceholder),
+        "aria-label": formatMessage(_i18n.messages.emojiNameAriaLabel),
+        maxLength: maxNameLength,
+        onChange: onNameChange,
+        onKeyDown: this.onKeyDown,
+        value: name,
         isCompact: true,
-        defaultIsFocused: true,
-        isFitContainerWidthEnabled: true
-      }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.emojiPlaceholder, function (message) {
-        return /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.emojiNameAriaLabel, function (ariaLabel) {
-          return /*#__PURE__*/_react.default.createElement("input", {
-            placeholder: message,
-            "aria-label": ariaLabel,
-            maxLength: maxNameLength,
-            onChange: onNameChange,
-            onKeyDown: _this2.onKeyDown,
-            value: name,
-            ref: "name",
-            autoFocus: true
-          });
-        });
-      }))), /*#__PURE__*/_react.default.createElement("span", {
+        autoFocus: true
+      })), /*#__PURE__*/_react.default.createElement("span", {
         className: styles.uploadChooseFileBrowse
-      }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.emojiChooseFileTitle, function (message) {
-        return /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.emojiChooseFileScreenReaderDescription, function (screenReaderDescription) {
-          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-            hidden: true,
-            id: fileChooserButtonDescriptionId
-          }, screenReaderDescription), /*#__PURE__*/_react.default.createElement(_FileChooser.default, {
-            label: message,
-            onChange: onChooseFile,
-            onClick: onClick,
-            accept: "image/png,image/jpeg,image/gif",
-            ariaDescribedBy: fileChooserButtonDescriptionId,
-            isDisabled: disableChooser
-          }));
-        });
+      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.emojiChooseFileScreenReaderDescription, function (screenReaderDescription) {
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+          hidden: true,
+          id: fileChooserButtonDescriptionId
+        }, screenReaderDescription), /*#__PURE__*/_react.default.createElement(_FileChooser.default, {
+          label: formatMessage(_i18n.messages.emojiChooseFileTitle),
+          onChange: onChooseFile,
+          onClick: onClick,
+          accept: "image/png,image/jpeg,image/gif",
+          ariaDescribedBy: fileChooserButtonDescriptionId,
+          isDisabled: disableChooser
+        }));
       }))), /*#__PURE__*/_react.default.createElement("div", {
         className: styles.emojiUploadBottom
-      }, !errorMessage ? /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.emojiImageRequirements)) : /*#__PURE__*/_react.default.createElement(_EmojiErrorMessage.default, {
+      }, !errorMessage ? /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.emojiImageRequirements)) : /*#__PURE__*/_react.default.createElement(_EmojiErrorMessage.default, {
         className: styles.emojiChooseFileErrorMessage,
         message: errorMessage
       })));
@@ -169,30 +158,30 @@ var EmojiUploadPicker = /*#__PURE__*/function (_PureComponent2) {
   var _super2 = _createSuper(EmojiUploadPicker);
 
   function EmojiUploadPicker(props) {
-    var _this3;
+    var _this2;
 
     (0, _classCallCheck2.default)(this, EmojiUploadPicker);
-    _this3 = _super2.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this3), "state", {
+    _this2 = _super2.call(this, props);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "state", {
       uploadStatus: _internalTypes.UploadStatus.Waiting,
       chooseEmojiErrorMessage: undefined
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this3), "onNameChange", function (event) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "onNameChange", function (event) {
       var newName = sanitizeName(event.target.value);
 
-      if (_this3.state.name !== newName) {
-        _this3.setState({
+      if (_this2.state.name !== newName) {
+        _this2.setState({
           name: newName
         });
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this3), "onAddEmoji", function () {
-      var onUploadEmoji = _this3.props.onUploadEmoji;
-      var _this3$state = _this3.state,
-          filename = _this3$state.filename,
-          name = _this3$state.name,
-          previewImage = _this3$state.previewImage,
-          uploadStatus = _this3$state.uploadStatus;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "onAddEmoji", function () {
+      var onUploadEmoji = _this2.props.onUploadEmoji;
+      var _this2$state = _this2.state,
+          filename = _this2$state.filename,
+          name = _this2$state.name,
+          previewImage = _this2$state.previewImage,
+          uploadStatus = _this2$state.uploadStatus;
 
       if (uploadStatus === _internalTypes.UploadStatus.Uploading) {
         return;
@@ -203,7 +192,7 @@ var EmojiUploadPicker = /*#__PURE__*/function (_PureComponent2) {
           var width = size.width,
               height = size.height;
 
-          _this3.setState({
+          _this2.setState({
             uploadStatus: _internalTypes.UploadStatus.Uploading
           });
 
@@ -230,16 +219,16 @@ var EmojiUploadPicker = /*#__PURE__*/function (_PureComponent2) {
         });
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this3), "errorOnUpload", function (event) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "errorOnUpload", function (event) {
       (0, _logger.default)('File load error: ', event);
 
-      _this3.setState({
+      _this2.setState({
         chooseEmojiErrorMessage: _i18n.messages.emojiUploadFailed
       });
 
-      _this3.cancelChooseFile();
+      _this2.cancelChooseFile();
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this3), "onFileLoad", function (file) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "onFileLoad", function (file) {
       return function (f) {
         return ImageUtil.parseImage(f.target.result).then(function () {
           var state = {
@@ -247,22 +236,22 @@ var EmojiUploadPicker = /*#__PURE__*/function (_PureComponent2) {
             filename: file.name
           };
 
-          _this3.setState(state);
+          _this2.setState(state);
         }).catch(function () {
-          _this3.setState({
+          _this2.setState({
             chooseEmojiErrorMessage: _i18n.messages.emojiInvalidImage
           });
 
-          _this3.cancelChooseFile();
+          _this2.cancelChooseFile();
         });
       };
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this3), "cancelChooseFile", function () {
-      _this3.setState({
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "cancelChooseFile", function () {
+      _this2.setState({
         previewImage: undefined
       });
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this3), "onChooseFile", function (event) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "onChooseFile", function (event) {
       var files = event.target.files;
 
       if (files.length) {
@@ -270,25 +259,25 @@ var EmojiUploadPicker = /*#__PURE__*/function (_PureComponent2) {
         var file = files[0];
 
         if (ImageUtil.hasFileExceededSize(file)) {
-          _this3.setState({
+          _this2.setState({
             chooseEmojiErrorMessage: _i18n.messages.emojiImageTooBig
           });
 
-          _this3.cancelChooseFile();
+          _this2.cancelChooseFile();
 
           return;
         }
 
-        reader.addEventListener('load', _this3.onFileLoad(file));
-        reader.addEventListener('abort', _this3.errorOnUpload);
-        reader.addEventListener('error', _this3.errorOnUpload);
+        reader.addEventListener('load', _this2.onFileLoad(file));
+        reader.addEventListener('abort', _this2.errorOnUpload);
+        reader.addEventListener('error', _this2.errorOnUpload);
         reader.readAsDataURL(file);
       } else {
-        _this3.cancelChooseFile();
+        _this2.cancelChooseFile();
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this3), "clearUploadPicker", function () {
-      _this3.setState({
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "clearUploadPicker", function () {
+      _this2.setState({
         name: undefined,
         previewImage: undefined,
         uploadStatus: _internalTypes.UploadStatus.Waiting
@@ -296,14 +285,14 @@ var EmojiUploadPicker = /*#__PURE__*/function (_PureComponent2) {
     });
 
     if (props.errorMessage) {
-      _this3.state.uploadStatus = _internalTypes.UploadStatus.Error;
+      _this2.state.uploadStatus = _internalTypes.UploadStatus.Error;
     }
 
     if (props.initialUploadName) {
-      _this3.state.name = sanitizeName(props.initialUploadName);
+      _this2.state.name = sanitizeName(props.initialUploadName);
     }
 
-    return _this3;
+    return _this2;
   }
 
   (0, _createClass2.default)(EmojiUploadPicker, [{
@@ -330,11 +319,12 @@ var EmojiUploadPicker = /*#__PURE__*/function (_PureComponent2) {
   }, {
     key: "render",
     value: function render() {
-      var _this4 = this;
+      var _this3 = this;
 
       var _this$props2 = this.props,
           errorMessage = _this$props2.errorMessage,
-          onUploadCancelled = _this$props2.onUploadCancelled;
+          onUploadCancelled = _this$props2.onUploadCancelled,
+          intl = _this$props2.intl;
       var _this$state = this.state,
           name = _this$state.name,
           previewImage = _this$state.previewImage,
@@ -342,7 +332,7 @@ var EmojiUploadPicker = /*#__PURE__*/function (_PureComponent2) {
           chooseEmojiErrorMessage = _this$state.chooseEmojiErrorMessage;
 
       var cancelUpload = function cancelUpload() {
-        _this4.clearUploadPicker();
+        _this3.clearUploadPicker();
 
         onUploadCancelled();
       };
@@ -364,11 +354,18 @@ var EmojiUploadPicker = /*#__PURE__*/function (_PureComponent2) {
         onClick: this.props.onFileChooserClicked,
         onNameChange: this.onNameChange,
         onUploadCancelled: cancelUpload,
-        errorMessage: chooseEmojiErrorMessage ? /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, chooseEmojiErrorMessage) : undefined
+        errorMessage: chooseEmojiErrorMessage ? /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, chooseEmojiErrorMessage) : undefined,
+        intl: intl
       });
     }
   }]);
   return EmojiUploadPicker;
 }(_react.PureComponent);
 
-exports.default = EmojiUploadPicker;
+exports.EmojiUploadPicker = EmojiUploadPicker;
+
+var _default = (0, _reactIntlNext.injectIntl)(EmojiUploadPicker, {
+  forwardRef: true
+});
+
+exports.default = _default;