@atlaskit/emoji 63.2.0 → 64.0.0

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @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

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"));
 
@@ -25,7 +25,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 
@@ -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,42 +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(_reactIntl.FormattedMessage, _i18n.messages.emojiPlaceholder, function (message) {
-        return /*#__PURE__*/_react.default.createElement(_textfield.default, {
-          placeholder: message,
-          "aria-label": message,
-          maxLength: maxNameLength,
-          onChange: onNameChange,
-          onKeyDown: _this2.onKeyDown,
-          value: name,
-          isCompact: true,
-          autoFocus: true
-        });
+      }, /*#__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,
+        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
       })));
@@ -162,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;
@@ -196,7 +192,7 @@ var EmojiUploadPicker = /*#__PURE__*/function (_PureComponent2) {
           var width = size.width,
               height = size.height;
 
-          _this3.setState({
+          _this2.setState({
             uploadStatus: _internalTypes.UploadStatus.Uploading
           });
 
@@ -223,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 = {
@@ -240,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) {
@@ -263,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
@@ -289,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, [{
@@ -323,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,
@@ -335,7 +332,7 @@ var EmojiUploadPicker = /*#__PURE__*/function (_PureComponent2) {
           chooseEmojiErrorMessage = _this$state.chooseEmojiErrorMessage;
 
       var cancelUpload = function cancelUpload() {
-        _this4.clearUploadPicker();
+        _this3.clearUploadPicker();
 
         onUploadCancelled();
       };
@@ -357,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;

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

@@ -25,7 +25,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 _constants = require("../../util/constants");
 
@@ -68,7 +68,9 @@ var EmojiUploadPreview = /*#__PURE__*/function (_PureComponent) {
           uploadStatus = _this$props.uploadStatus,
           errorMessage = _this$props.errorMessage,
           onAddEmoji = _this$props.onAddEmoji,
-          onUploadCancelled = _this$props.onUploadCancelled;
+          onUploadCancelled = _this$props.onUploadCancelled,
+          intl = _this$props.intl;
+      var formatMessage = intl.formatMessage;
       var emojiComponent;
 
       if (previewImage) {
@@ -95,7 +97,7 @@ var EmojiUploadPreview = /*#__PURE__*/function (_PureComponent) {
         className: styles.uploadPreview
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: styles.uploadPreviewText
-      }, /*#__PURE__*/_react.default.createElement("h5", null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.emojiPreviewTitle)), /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.emojiPreview, {
+      }, /*#__PURE__*/_react.default.createElement("h5", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.emojiPreviewTitle)), /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.emojiPreview, {
         values: {
           emoji: emojiComponent
         }
@@ -107,25 +109,25 @@ var EmojiUploadPreview = /*#__PURE__*/function (_PureComponent) {
         className: styles.emojiPreviewErrorMessage,
         message: errorMessage,
         tooltip: true
-      }) : null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.addEmojiLabel, function (label) {
-        return /*#__PURE__*/_react.default.createElement(_RetryableButton.default, {
-          className: styles.uploadEmojiButton,
-          retryClassName: styles.uploadRetryButton,
-          label: label,
-          onSubmit: onAddEmoji,
-          appearance: "primary",
-          loading: uploading,
-          error: !!errorMessage
-        });
+      }) : null, /*#__PURE__*/_react.default.createElement(_RetryableButton.default, {
+        className: styles.uploadEmojiButton,
+        retryClassName: styles.uploadRetryButton,
+        label: formatMessage(_i18n.messages.addEmojiLabel),
+        onSubmit: onAddEmoji,
+        appearance: "primary",
+        loading: uploading,
+        error: !!errorMessage
       }), /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
         onClick: onUploadCancelled,
         appearance: "subtle",
         isDisabled: uploading,
         className: styles.cancelButton
-      }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.cancelLabel))));
+      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.cancelLabel))));
     }
   }]);
   return EmojiUploadPreview;
 }(_react.PureComponent);
 
-exports.default = EmojiUploadPreview;
+var _default = (0, _reactIntlNext.injectIntl)(EmojiUploadPreview);
+
+exports.default = _default;

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

@@ -25,7 +25,7 @@ var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _i18n = require("../i18n");
 
@@ -63,7 +63,7 @@ var RetryableButton = /*#__PURE__*/function (_Component) {
           loading = _this$props.loading,
           retryClassName = _this$props.retryClassName,
           onSubmit = _this$props.onSubmit;
-      return loading ? this.renderLoading() : /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.retryLabel, function (retryLabel) {
+      return loading ? this.renderLoading() : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.retryLabel, function (retryLabel) {
         return /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
           className: retryClassName,
           appearance: "warning",

package/dist/cjs/components/i18n.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.messages = void 0;
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
-var messages = (0, _reactIntl.defineMessages)({
+var messages = (0, _reactIntlNext.defineMessages)({
   deleteEmojiTitle: {
     id: 'fabric.emoji.delete.title',
     defaultMessage: 'Remove emoji',