@atlaskit/emoji 63.1.9 → 64.0.1

package/CHANGELOG.md

@@ -1,5 +1,67 @@
 # @atlaskit/emoji
 
+## 64.0.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 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

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"));
 
@@ -17,20 +17,25 @@ var _typeHelpers = require("../util/type-helpers");
 
 var _logger = _interopRequireDefault(require("../util/logger"));
 
-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; }
+var _excluded = ["getRatio"],
+    _excluded2 = ["queryParams"],
+    _excluded3 = ["representation", "altRepresentations"],
+    _excluded4 = ["representation", "skinVariations", "altRepresentations"];
 
-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) { (0, _defineProperty2.default)(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 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(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; }
 
 var emojiRequest = function emojiRequest(provider, options) {
   var _provider$getRatio = provider.getRatio,
       getRatio = _provider$getRatio === void 0 ? getPixelRatio : _provider$getRatio,
-      serviceConfig = (0, _objectWithoutProperties2.default)(provider, ["getRatio"]);
+      serviceConfig = (0, _objectWithoutProperties2.default)(provider, _excluded);
   var scaleQueryParams = calculateScale(getRatio);
 
   var _ref = options || {},
       _ref$queryParams = _ref.queryParams,
       queryParams = _ref$queryParams === void 0 ? {} : _ref$queryParams,
-      otherOptions = (0, _objectWithoutProperties2.default)(_ref, ["queryParams"]);
+      otherOptions = (0, _objectWithoutProperties2.default)(_ref, _excluded2);
 
   var requestOptions = _objectSpread(_objectSpread({}, otherOptions), {}, {
     queryParams: _objectSpread(_objectSpread(_objectSpread({}, scaleQueryParams), queryParams), {}, {
@@ -138,7 +143,7 @@ var denormaliseSkinEmoji = function denormaliseSkinEmoji(emoji, meta) {
   return skinEmoji.map(function (skin) {
     var representation = skin.representation,
         altRepresentations = skin.altRepresentations,
-        other = (0, _objectWithoutProperties2.default)(skin, ["representation", "altRepresentations"]);
+        other = (0, _objectWithoutProperties2.default)(skin, _excluded3);
     return _objectSpread({
       baseId: baseId,
       representation: denormaliseServiceRepresentation(representation, meta),
@@ -163,7 +168,7 @@ var denormaliseEmojiServiceResponse = function denormaliseEmojiServiceResponse(e
     var representation = emoji.representation,
         skinVariations = emoji.skinVariations,
         altRepresentations = emoji.altRepresentations,
-        trimmedServiceDesc = (0, _objectWithoutProperties2.default)(emoji, ["representation", "skinVariations", "altRepresentations"]);
+        trimmedServiceDesc = (0, _objectWithoutProperties2.default)(emoji, _excluded4);
 
     var response = _objectSpread(_objectSpread({}, trimmedServiceDesc), {}, {
       representation: newRepresentation,

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"));
 
@@ -23,9 +23,9 @@ var _StoredDuplicateLimitedQueue = _interopRequireDefault(require("../../util/St
 
 var _storageAvailable = _interopRequireDefault(require("../../util/storage-available"));
 
-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) { (0, _defineProperty2.default)(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) { (0, _defineProperty2.default)(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; }
 
 /**
  * Keeps track of the last 150 emoji usages, although limiting the maximum count for a single emoji to 25 to

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"));
 
@@ -29,9 +29,11 @@ var _TokenManager = _interopRequireDefault(require("./TokenManager"));
 
 var _logger = _interopRequireDefault(require("../../util/logger"));
 
-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; }
+var _excluded = ["altRepresentations"];
 
-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) { (0, _defineProperty2.default)(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 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(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; }
 
 // Assume media is 95% of total upload time.
 var mediaProportionOfProgress = 95 / 100;
@@ -69,7 +71,7 @@ var SiteEmojiResource = /*#__PURE__*/function () {
         if (emojis.length) {
           var _emojis$ = emojis[0],
               altRepresentations = _emojis$.altRepresentations,
-              emoji = (0, _objectWithoutProperties2.default)(_emojis$, ["altRepresentations"]);
+              emoji = (0, _objectWithoutProperties2.default)(_emojis$, _excluded);
 
           var _response = _objectSpread(_objectSpread({}, emoji), {}, {
             representation: (0, _typeHelpers.convertImageToMediaRepresentation)(emoji.representation)

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/CachingEmoji.js

@@ -41,6 +41,9 @@ var _Emoji = _interopRequireDefault(require("./Emoji"));
 
 var _EmojiPlaceholder = _interopRequireDefault(require("./EmojiPlaceholder"));
 
+var _excluded = ["placeholderSize"],
+    _excluded2 = ["children", "placeholderSize"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -56,7 +59,7 @@ 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 = (0, _objectWithoutProperties2.default)(props, ["placeholderSize"]);
+      emojiProps = (0, _objectWithoutProperties2.default)(props, _excluded);
 
   if ((0, _typeHelpers.isMediaEmoji)(props.emoji)) {
     return /*#__PURE__*/_react.default.createElement(CachingMediaEmoji, props);
@@ -181,7 +184,7 @@ var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
       var _this$props = this.props,
           children = _this$props.children,
           placeholderSize = _this$props.placeholderSize,
-          otherProps = (0, _objectWithoutProperties2.default)(_this$props, ["children", "placeholderSize"]);
+          otherProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded2);
       var emojiComponent;
 
       if (cachedEmoji) {

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/Emoji.js

@@ -35,9 +35,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-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) { (0, _defineProperty2.default)(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) { (0, _defineProperty2.default)(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; }
 
 var handleMouseDown = function handleMouseDown(props, event) {
   // Clicked emoji delete button

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;