@atlaskit/emoji 63.2.0 → 64.1.1

package/CHANGELOG.md

@@ -1,5 +1,72 @@
 # @atlaskit/emoji
 
+## 64.1.1
+
+### Patch Changes
+
+- [`21e15939c73`](https://bitbucket.org/atlassian/atlassian-frontend/commits/21e15939c73) - add SSR examples for emoji
+- [`95015909035`](https://bitbucket.org/atlassian/atlassian-frontend/commits/95015909035) - Fixed issue where some of the examples where crashing.
+
+## 64.1.0
+
+### Minor Changes
+
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - [ux] Task: https://a11y-internal.atlassian.net/browse/AK-97, Emoji picker: made emojis list keyboard accessible, moved tone selector and place it right after search input, placed upload/remove emoji menus above the emoji list.
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Remove @atlaskit/tooltip from critical path of rendering emoji
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Upgrade js-search to v2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 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

package/dist/cjs/api/EmojiUtils.js

@@ -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/UsageFrequencyTracker.js

@@ -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

@@ -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/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

@@ -33,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: (0, _tokens.token)('color.text.mediumEmphasis', _colors.N500),
+      primaryColor: (0, _tokens.token)('color.text.subtle', _colors.N500),
       size: "small"
     }),
     onClick: props.onClick,

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

@@ -13,8 +13,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -35,9 +33,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
@@ -54,6 +52,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') === _constants.deleteEmojiLabel) {
+    return;
+  }
+
+  var emoji = props.emoji,
+      onSelected = props.onSelected;
+  event.preventDefault();
+
+  if (onSelected && (event.key === 'Enter' || event.key === ' ')) {
+    onSelected((0, _typeHelpers.toEmojiId)(emoji), emoji, event);
+  }
+};
+
 var handleMouseMove = function handleMouseMove(props, event) {
   var emoji = props.emoji,
       onMouseMove = props.onMouseMove;
@@ -96,7 +109,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 = {}, (0, _defineProperty2.default)(_classes, styles.emojiContainer, true), (0, _defineProperty2.default)(_classes, styles.emojiNode, true), (0, _defineProperty2.default)(_classes, styles.selected, selected), (0, _defineProperty2.default)(_classes, styles.selectOnHover, selectOnHover), _classes);
@@ -129,18 +143,21 @@ var renderAsSprite = function renderAsSprite(props) {
   }, "\xA0");
 
   return /*#__PURE__*/_react.default.createElement("span", {
+    tabIndex: shouldBeInteractive ? 0 : undefined,
+    role: shouldBeInteractive ? 'button' : undefined,
     className: (0, _classnames.default)(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.default.createElement(_tooltip.default, {
-    tag: "span",
-    content: emoji.shortName
-  }, emojiNode) : emojiNode);
+    "aria-label": emoji.shortName,
+    title: showTooltip ? emoji.shortName : ''
+  }, emojiNode);
 }; // Keep as pure functional component, see renderAsSprite.
 
 
@@ -153,7 +170,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 = {}, (0, _defineProperty2.default)(_classes2, styles.emoji, true), (0, _defineProperty2.default)(_classes2, styles.emojiNode, true), (0, _defineProperty2.default)(_classes2, styles.selected, selected), (0, _defineProperty2.default)(_classes2, styles.selectOnHover, selectOnHover), (0, _defineProperty2.default)(_classes2, styles.emojiImage, true), _classes2);
 
   if (className) {
@@ -221,18 +239,21 @@ var renderAsImage = function renderAsImage(props) {
   }, sizing));
 
   return /*#__PURE__*/_react.default.createElement("span", {
+    tabIndex: shouldBeInteractive ? 0 : undefined,
+    role: shouldBeInteractive ? 'button' : undefined,
     className: (0, _classnames.default)(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.default.createElement(_tooltip.default, {
-    tag: "span",
-    content: emoji.shortName
-  }, emojiNode) : emojiNode);
+    "aria-label": emoji.shortName,
+    title: showTooltip ? emoji.shortName : ''
+  }, deleteButton, emojiNode);
 };
 
 var Emoji = function Emoji(props) {

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

@@ -0,0 +1,233 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.EmojiActions = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactIntlNext = require("react-intl-next");
+
+var _EmojiDeletePreview = _interopRequireDefault(require("../common/EmojiDeletePreview"));
+
+var _EmojiUploadPicker = _interopRequireDefault(require("../common/EmojiUploadPicker"));
+
+var styles = _interopRequireWildcard(require("./styles"));
+
+var footerStyles = _interopRequireWildcard(require("../picker/styles"));
+
+var _EmojiPickerListSearch = _interopRequireDefault(require("../picker/EmojiPickerListSearch"));
+
+var _ToneSelector = _interopRequireDefault(require("./ToneSelector"));
+
+var _EmojiButton = _interopRequireDefault(require("./EmojiButton"));
+
+var _i18n = require("../i18n");
+
+var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+
+var _add = _interopRequireDefault(require("@atlaskit/icon/glyph/add"));
+
+var _setSkinToneAriaLabelText = require("./setSkinToneAriaLabelText");
+
+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; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
+
+var EmojiActions = /*#__PURE__*/function (_PureComponent) {
+  (0, _inherits2.default)(EmojiActions, _PureComponent);
+
+  var _super = _createSuper(EmojiActions);
+
+  function EmojiActions() {
+    var _this;
+
+    (0, _classCallCheck2.default)(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));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+      selectingTone: false
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onToneButtonClick", function () {
+      _this.setState({
+        selectingTone: !_this.state.selectingTone
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onToneSelected", function (toneValue) {
+      _this.setState({
+        selectingTone: false
+      });
+
+      if (_this.props.onToneSelected) {
+        _this.props.onToneSelected(toneValue);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseLeave", function () {
+      var selectingTone = _this.state.selectingTone;
+      var onToneSelectorCancelled = _this.props.onToneSelectorCancelled;
+
+      if (selectingTone && onToneSelectorCancelled) {
+        onToneSelectorCancelled();
+      }
+
+      _this.setState({
+        selectingTone: false
+      });
+    });
+    return _this;
+  }
+
+  (0, _createClass2.default)(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.default.createElement("div", {
+        className: styles.emojiToneSelectorContainer
+      }, this.state.selectingTone && /*#__PURE__*/_react.default.createElement(_ToneSelector.default, {
+        emoji: toneEmoji,
+        onToneSelected: this.onToneSelected,
+        previewEmojiId: previewEmoji.id
+      }), /*#__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")
+        })
+      }));
+    } // 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.default.createElement("div", {
+        className: styles.AddCustomEmoji
+      }, /*#__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: formatMessage(_i18n.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 = (0, _classnames.default)([footerStyles.emojiPickerFooter, footerStyles.emojiActionsContainerWithBottomShadow]);
+
+      if (uploading) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: previewFooterClassnames
+        }, /*#__PURE__*/_react.default.createElement(_EmojiUploadPicker.default, {
+          onUploadCancelled: onUploadCancelled,
+          onUploadEmoji: onUploadEmoji,
+          onFileChooserClicked: onFileChooserClicked,
+          errorMessage: uploadErrorMessage,
+          initialUploadName: initialUploadName
+        }));
+      }
+
+      if (emojiToDelete) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: previewFooterClassnames
+        }, /*#__PURE__*/_react.default.createElement(_EmojiDeletePreview.default, {
+          emoji: emojiToDelete,
+          onDeleteEmoji: onDeleteEmoji,
+          onCloseDelete: onCloseDelete
+        }));
+      }
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: previewFooterClassnames,
+        onMouseLeave: this.onMouseLeave
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          display: 'flex',
+          justifyContent: 'flex-end',
+          alignItems: 'center'
+        }
+      }, !this.state.selectingTone && /*#__PURE__*/_react.default.createElement(_EmojiPickerListSearch.default, {
+        onChange: onChange,
+        query: query
+      }), this.renderTones()), this.renderAddOwnEmoji());
+    }
+  }]);
+  return EmojiActions;
+}(_react.PureComponent);
+
+exports.EmojiActions = EmojiActions;
+
+var _default = (0, _reactIntlNext.injectIntl)(EmojiActions);
+
+exports.default = _default;

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;