@atlaskit/emoji 67.1.0 → 67.2.0

package/dist/esm/api/EmojiResource.js

@@ -41,6 +41,7 @@ export var EmojiResource = /*#__PURE__*/function (_ref) {
     _classCallCheck(this, EmojiResource);
     _this = _super.call(this);
     _defineProperty(_assertThisInitialized(_this), "activeLoaders", 0);
+    _defineProperty(_assertThisInitialized(_this), "initialLoaders", 0);
     _defineProperty(_assertThisInitialized(_this), "retries", new Map());
     _defineProperty(_assertThisInitialized(_this), "isInitialised", false);
     _defineProperty(_assertThisInitialized(_this), "getOptimisticImageURL", function (emojiId) {
@@ -49,8 +50,11 @@ export var EmojiResource = /*#__PURE__*/function (_ref) {
       }
       return;
     });
+    _defineProperty(_assertThisInitialized(_this), "isRepositoryAvailable", function (repository) {
+      return !!repository;
+    });
     _defineProperty(_assertThisInitialized(_this), "isLoaded", function () {
-      return _this.activeLoaders === 0 && !!_this.emojiRepository;
+      return _this.initialLoaders !== 0 && _this.activeLoaders === 0;
     });
     _this.emojiProviderConfig = config;
     _this.recordConfig = config.recordConfig;
@@ -61,6 +65,7 @@ export var EmojiResource = /*#__PURE__*/function (_ref) {
     if (config.providers.length === 0) {
       throw new Error('No providers specified');
     }
+    _this.initialLoaders = _this.emojiProviderConfig.providers.length;
     _this.activeLoaders = _this.emojiProviderConfig.providers.length;
     _this.emojiResponses = [];
     return _this;
@@ -184,7 +189,7 @@ export var EmojiResource = /*#__PURE__*/function (_ref) {
             switch (_context3.prev = _context3.next) {
               case 0:
                 force = _args3.length > 0 && _args3[0] !== undefined ? _args3[0] : false;
-                if (!(force || !this.emojiRepository && !this.isInitialised)) {
+                if (!(force || !this.isRepositoryAvailable(this.emojiRepository) && !this.isInitialised)) {
                   _context3.next = 6;
                   break;
                 }
@@ -218,7 +223,7 @@ export var EmojiResource = /*#__PURE__*/function (_ref) {
           while (1) {
             switch (_context4.prev = _context4.next) {
               case 0:
-                if (!(this.emojiRepository && this.isLoaded())) {
+                if (!(this.isLoaded() && this.isRepositoryAvailable(this.emojiRepository))) {
                   _context4.next = 8;
                   break;
                 }
@@ -256,7 +261,7 @@ export var EmojiResource = /*#__PURE__*/function (_ref) {
                 }
                 return _context4.abrupt("return");
               case 17:
-                if (this.siteEmojiResource) {
+                if (this.isRepositoryAvailable(this.siteEmojiResource)) {
                   _context4.next = 20;
                   break;
                 }
@@ -326,7 +331,7 @@ export var EmojiResource = /*#__PURE__*/function (_ref) {
   }, {
     key: "initSiteEmojiResource",
     value: function initSiteEmojiResource(emojiResponse, provider) {
-      if (!this.siteEmojiResource && emojiResponse.mediaApiToken) {
+      if (!this.isRepositoryAvailable(this.siteEmojiResource) && emojiResponse.mediaApiToken) {
         this.siteEmojiResource = new SiteEmojiResource(provider, emojiResponse.mediaApiToken);
 
         // Prime cache type + optimistic rendering by checking first Emoji.
@@ -424,7 +429,7 @@ export var EmojiResource = /*#__PURE__*/function (_ref) {
           while (1) {
             switch (_context5.prev = _context5.next) {
               case 0:
-                if (!(this.siteEmojiResource && isMediaRepresentation(emoji.representation))) {
+                if (!(this.isRepositoryAvailable(this.siteEmojiResource) && isMediaRepresentation(emoji.representation))) {
                   _context5.next = 5;
                   break;
                 }
@@ -454,7 +459,7 @@ export var EmojiResource = /*#__PURE__*/function (_ref) {
   }, {
     key: "loadMediaEmoji",
     value: function loadMediaEmoji(emoji, useAlt) {
-      if (!this.siteEmojiResource || !isMediaEmoji(emoji)) {
+      if (!this.isRepositoryAvailable(this.siteEmojiResource) || !isMediaEmoji(emoji)) {
         return emoji;
       }
       return this.siteEmojiResource.loadMediaEmoji(emoji, useAlt);
@@ -465,7 +470,7 @@ export var EmojiResource = /*#__PURE__*/function (_ref) {
       if (!isMediaEmoji(emoji)) {
         return true;
       }
-      if (!this.siteEmojiResource) {
+      if (!this.isRepositoryAvailable(this.siteEmojiResource)) {
         // Shouldn't have a media emoji without a siteEmojiResouce, but anyway ;)
         return false;
       }
@@ -487,7 +492,7 @@ export var EmojiResource = /*#__PURE__*/function (_ref) {
         query: query,
         options: options
       };
-      if (this.emojiRepository) {
+      if (this.isRepositoryAvailable(this.emojiRepository)) {
         var searchResults = this.emojiRepository.search(query, options);
         this.notifyResult(searchResults);
         ufoExperiences['emoji-searched'].success({
@@ -505,7 +510,7 @@ export var EmojiResource = /*#__PURE__*/function (_ref) {
     key: "findByShortName",
     value: function findByShortName(shortName) {
       var _this4 = this;
-      if (this.isLoaded()) {
+      if (this.isLoaded() && this.isRepositoryAvailable(this.emojiRepository)) {
         // Wait for all emoji to load before looking by shortName (to ensure correct priority)
         return this.emojiRepository.findByShortName(shortName);
       }
@@ -519,7 +524,7 @@ export var EmojiResource = /*#__PURE__*/function (_ref) {
       var _this5 = this;
       var id = emojiId.id,
         shortName = emojiId.shortName;
-      if (this.emojiRepository) {
+      if (this.isRepositoryAvailable(this.emojiRepository)) {
         if (id) {
           var emoji = this.emojiRepository.findById(id);
           if (emoji) {
@@ -528,7 +533,7 @@ export var EmojiResource = /*#__PURE__*/function (_ref) {
           if (this.isLoaded()) {
             // all loaded but not found by id, try server to see if
             // this is a newly uploaded emoji
-            if (this.siteEmojiResource) {
+            if (this.isRepositoryAvailable(this.siteEmojiResource)) {
               return this.siteEmojiResource.findEmoji(emojiId).then(function (emoji) {
                 if (!emoji) {
                   // if not, fallback to searching by shortName to
@@ -557,7 +562,7 @@ export var EmojiResource = /*#__PURE__*/function (_ref) {
     key: "findById",
     value: function findById(id) {
       var _this6 = this;
-      if (this.isLoaded()) {
+      if (this.isLoaded() && this.isRepositoryAvailable(this.emojiRepository)) {
         return this.emojiRepository.findById(id);
       }
       return this.retryIfLoading(function () {
@@ -568,7 +573,7 @@ export var EmojiResource = /*#__PURE__*/function (_ref) {
     key: "findInCategory",
     value: function findInCategory(categoryId) {
       var _this7 = this;
-      if (this.isLoaded()) {
+      if (this.isLoaded() && this.isRepositoryAvailable(this.emojiRepository)) {
         return Promise.resolve(this.emojiRepository.findInCategory(categoryId));
       }
       return this.retryIfLoading(function () {
@@ -579,7 +584,7 @@ export var EmojiResource = /*#__PURE__*/function (_ref) {
     key: "getAsciiMap",
     value: function getAsciiMap() {
       var _this8 = this;
-      if (this.isLoaded()) {
+      if (this.isLoaded() && this.isRepositoryAvailable(this.emojiRepository)) {
         return Promise.resolve(this.emojiRepository.getAsciiMap());
       }
       return this.retryIfLoading(function () {
@@ -590,7 +595,7 @@ export var EmojiResource = /*#__PURE__*/function (_ref) {
     key: "getFrequentlyUsed",
     value: function getFrequentlyUsed(options) {
       var _this9 = this;
-      if (this.isLoaded()) {
+      if (this.isLoaded() && this.isRepositoryAvailable(this.emojiRepository)) {
         return Promise.resolve(this.emojiRepository.getFrequentlyUsed(options));
       }
       return this.retryIfLoading(function () {
@@ -609,7 +614,7 @@ export var EmojiResource = /*#__PURE__*/function (_ref) {
     key: "recordSelection",
     value: function recordSelection(emoji) {
       var recordConfig = this.recordConfig;
-      if (this.emojiRepository) {
+      if (this.isRepositoryAvailable(this.emojiRepository)) {
         this.emojiRepository.used(emoji);
       }
       if (recordConfig) {
@@ -630,9 +635,9 @@ export var EmojiResource = /*#__PURE__*/function (_ref) {
     key: "deleteSiteEmoji",
     value: function deleteSiteEmoji(emoji) {
       var _this10 = this;
-      if (this.siteEmojiResource && emoji.id) {
+      if (this.isRepositoryAvailable(this.siteEmojiResource) && emoji.id) {
         return this.siteEmojiResource.deleteEmoji(emoji).then(function (success) {
-          if (success && _this10.emojiRepository) {
+          if (success && _this10.isRepositoryAvailable(_this10.emojiRepository)) {
             _this10.emojiRepository.delete(emoji);
             return true;
           }
@@ -672,7 +677,7 @@ export var EmojiResource = /*#__PURE__*/function (_ref) {
     key: "calculateDynamicCategories",
     value: function calculateDynamicCategories() {
       var _this11 = this;
-      if (this.isLoaded()) {
+      if (this.isLoaded() && this.isRepositoryAvailable(this.emojiRepository)) {
         return Promise.resolve(this.emojiRepository.getDynamicCategoryList());
       }
       return this.retryIfLoading(function () {
@@ -687,7 +692,7 @@ export var EmojiResource = /*#__PURE__*/function (_ref) {
   }, {
     key: "addUnknownEmoji",
     value: function addUnknownEmoji(emoji) {
-      if (this.emojiRepository) {
+      if (this.isRepositoryAvailable(this.emojiRepository)) {
         this.emojiRepository.addUnknownEmoji(emoji);
       }
     }
@@ -711,7 +716,7 @@ var UploadingEmojiResource = /*#__PURE__*/function (_EmojiResource) {
       if (!this.allowUpload) {
         return Promise.resolve(false);
       }
-      if (this.siteEmojiResource) {
+      if (this.isRepositoryAvailable(this.siteEmojiResource)) {
         return this.siteEmojiResource.hasUploadToken();
       }
       return this.retryIfLoading(function () {
@@ -724,7 +729,7 @@ var UploadingEmojiResource = /*#__PURE__*/function (_EmojiResource) {
       var _this14 = this;
       var retry = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       return this.isUploadSupported().then(function (supported) {
-        if (!supported || !_this14.siteEmojiResource) {
+        if (!supported || !_this14.isRepositoryAvailable(_this14.siteEmojiResource)) {
           return Promise.reject('No media api support is configured');
         }
         return _this14.siteEmojiResource.uploadEmoji(upload, retry).then(function (emoji) {
@@ -738,7 +743,7 @@ var UploadingEmojiResource = /*#__PURE__*/function (_EmojiResource) {
     key: "prepareForUpload",
     value: function prepareForUpload() {
       var _this15 = this;
-      if (this.siteEmojiResource) {
+      if (this.isRepositoryAvailable(this.siteEmojiResource)) {
         this.siteEmojiResource.prepareForUpload();
       }
       return this.retryIfLoading(function () {

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

@@ -50,10 +50,10 @@ var TokenManager = /*#__PURE__*/function () {
           // still valid
           return Promise.resolve(mediaApiToken);
         }
-        if (activeTokenRefresh) {
-          // refresh token promise already active, return that
-          return activeTokenRefresh;
-        }
+      }
+      if (activeTokenRefresh) {
+        // refresh token promise already active, return that
+        return activeTokenRefresh;
       }
 
       // request a new token and track the promise for future requests until completed

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

@@ -1,7 +1,8 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["emoji", "placeholderSize", "showTooltip", "fitToHeight", "children"];
+var _excluded = ["emoji", "placeholderSize"],
+  _excluded2 = ["emoji", "placeholderSize", "showTooltip", "fitToHeight", "children"];
 import React, { memo, useEffect, useState } from 'react';
 import { isMediaEmoji } from '../../util/type-helpers';
 import { UfoEmojiTimings } from '../../types';
@@ -21,7 +22,9 @@ import { extractErrorInfo } from '../../util/analytics/analytics';
 export var CachingEmoji = function CachingEmoji(props) {
   // Optimisation to only render CachingMediaEmoji if necessary
   // slight performance hit, which accumulates for a large number of emoji.
-  var emoji = props.emoji;
+  var emoji = props.emoji,
+    placeholderSize = props.placeholderSize,
+    restProps = _objectWithoutProperties(props, _excluded);
   // start emoji rendered experience, it may have already started earlier in `ResourcedEmoji`.
   useSampledUFOComponentExperience(ufoExperiences['emoji-rendered'].getInstance(emoji.id || emoji.shortName), SAMPLING_RATE_EMOJI_RENDERED_EXP, {
     source: 'CachingEmoji',
@@ -35,9 +38,14 @@ export var CachingEmoji = function CachingEmoji(props) {
   }, []);
   var emojiNode = function emojiNode() {
     if (isMediaEmoji(emoji)) {
-      return /*#__PURE__*/React.createElement(CachingMediaEmoji, props);
+      return /*#__PURE__*/React.createElement(CachingMediaEmoji, _extends({
+        emoji: emoji,
+        placeholderSize: placeholderSize
+      }, restProps));
     }
-    return /*#__PURE__*/React.createElement(Emoji, props);
+    return /*#__PURE__*/React.createElement(Emoji, _extends({
+      emoji: emoji
+    }, restProps));
   };
   return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
     experiences: [ufoExperiences['emoji-rendered'].getInstance(props.emoji.id || props.emoji.shortName)]
@@ -54,7 +62,7 @@ export var CachingMediaEmoji = function CachingMediaEmoji(props) {
     showTooltip = props.showTooltip,
     fitToHeight = props.fitToHeight,
     children = props.children,
-    restProps = _objectWithoutProperties(props, _excluded);
+    restProps = _objectWithoutProperties(props, _excluded2);
   var shortName = emoji.shortName,
     representation = emoji.representation;
   var _useState = useState(),

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

@@ -1,6 +1,9 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["emoji", "fitToHeight", "selected", "selectOnHover", "className", "showTooltip", "shouldBeInteractive", "tabIndex", "onSelected", "onMouseMove", "onFocus", "onDelete", "onLoadError", "onLoadSuccess", "showDelete", "disableLazyLoad", "autoWidth"],
+  _excluded2 = ["emoji", "fitToHeight", "selected", "selectOnHover", "className", "showTooltip", "showDelete", "shouldBeInteractive", "tabIndex", "onSelected", "onMouseMove", "onFocus", "onDelete", "onLoadError", "onLoadSuccess", "disableLazyLoad", "autoWidth"];
 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) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /** @jsx jsx */
@@ -48,6 +51,13 @@ var handleMouseMove = function handleMouseMove(props, event) {
     onMouseMove(toEmojiId(emoji), emoji, event);
   }
 };
+var handleFocus = function handleFocus(props, event) {
+  var emoji = props.emoji,
+    onFocus = props.onFocus;
+  if (onFocus) {
+    onFocus(toEmojiId(emoji), emoji, event);
+  }
+};
 var handleDelete = function handleDelete(props, event) {
   var emoji = props.emoji,
     onDelete = props.onDelete;
@@ -79,7 +89,19 @@ export var SpriteEmoji = function SpriteEmoji(props) {
     selectOnHover = props.selectOnHover,
     className = props.className,
     showTooltip = props.showTooltip,
-    shouldBeInteractive = props.shouldBeInteractive;
+    _props$shouldBeIntera = props.shouldBeInteractive,
+    shouldBeInteractive = _props$shouldBeIntera === void 0 ? false : _props$shouldBeIntera,
+    tabIndex = props.tabIndex,
+    onSelected = props.onSelected,
+    onMouseMove = props.onMouseMove,
+    onFocus = props.onFocus,
+    onDelete = props.onDelete,
+    onLoadError = props.onLoadError,
+    onLoadSuccess = props.onLoadSuccess,
+    showDelete = props.showDelete,
+    disableLazyLoad = props.disableLazyLoad,
+    autoWidth = props.autoWidth,
+    other = _objectWithoutProperties(props, _excluded);
   var representation = emoji.representation;
   var sprite = representation.sprite;
   var classes = "".concat(emojiNodeStyles, " ").concat(selected ? commonSelectedStyles : '', " ").concat(selectOnHover ? selectOnHoverStyles : '', " ").concat(className ? className : '');
@@ -99,11 +121,11 @@ export var SpriteEmoji = function SpriteEmoji(props) {
     backgroundPosition: "".concat(xPositionInPercent, "% ").concat(yPositionInPercent, "%"),
     backgroundSize: "".concat(sprite.column * 100, "% ").concat(sprite.row * 100, "%")
   }, sizing);
-  return jsx("span", {
+  return jsx("span", _extends({
     "data-testid": "sprite-emoji-".concat(emoji.shortName),
     "data-emoji-type": "sprite",
-    tabIndex: shouldBeInteractive ? 0 : undefined,
-    role: shouldBeInteractive ? 'button' : undefined,
+    tabIndex: shouldBeInteractive ? tabIndex || 0 : undefined,
+    role: shouldBeInteractive ? 'button' : 'img',
     css: emojiContainer,
     className: classes,
     onKeyPress: function onKeyPress(event) {
@@ -115,9 +137,12 @@ export var SpriteEmoji = function SpriteEmoji(props) {
     onMouseEnter: function onMouseEnter(event) {
       handleMouseMove(props, event);
     },
+    onFocus: function onFocus(event) {
+      handleFocus(props, event);
+    },
     "aria-label": emoji.shortName,
     title: showTooltip ? emoji.shortName : ''
-  }, jsx("span", {
+  }, other), jsx("span", {
     className: emojiSprite,
     style: style
   }, "\xA0"));
@@ -132,10 +157,18 @@ export var ImageEmoji = function ImageEmoji(props) {
     className = props.className,
     showTooltip = props.showTooltip,
     showDelete = props.showDelete,
-    shouldBeInteractive = props.shouldBeInteractive,
+    _props$shouldBeIntera2 = props.shouldBeInteractive,
+    shouldBeInteractive = _props$shouldBeIntera2 === void 0 ? false : _props$shouldBeIntera2,
+    tabIndex = props.tabIndex,
+    onSelected = props.onSelected,
+    onMouseMove = props.onMouseMove,
+    onFocus = props.onFocus,
+    onDelete = props.onDelete,
+    onLoadError = props.onLoadError,
     onLoadSuccess = props.onLoadSuccess,
     disableLazyLoad = props.disableLazyLoad,
-    autoWidth = props.autoWidth;
+    autoWidth = props.autoWidth,
+    other = _objectWithoutProperties(props, _excluded2);
   var _useInView = useInView({
       triggerOnce: true
     }),
@@ -233,12 +266,12 @@ export var ImageEmoji = function ImageEmoji(props) {
     onError: onError,
     onLoad: onLoad
   }, sizing));
-  return jsx("span", {
+  return jsx("span", _extends({
     "data-testid": "image-emoji-".concat(emoji.shortName),
     "data-emoji-type": "image",
     css: emojiStyles,
-    tabIndex: shouldBeInteractive ? 0 : undefined,
-    role: shouldBeInteractive ? 'button' : undefined,
+    tabIndex: shouldBeInteractive ? tabIndex || 0 : undefined,
+    role: shouldBeInteractive ? 'button' : 'img',
     className: classes,
     onKeyPress: function onKeyPress(event) {
       return handleKeyPress(props, event);
@@ -249,10 +282,13 @@ export var ImageEmoji = function ImageEmoji(props) {
     onMouseEnter: function onMouseEnter(event) {
       handleMouseMove(props, event);
     },
+    onFocus: function onFocus(event) {
+      handleFocus(props, event);
+    },
     "aria-label": emoji.shortName,
     title: showTooltip ? emoji.shortName : '',
     ref: ref
-  }, deleteButton, emojiNode);
+  }, other), deleteButton, emojiNode);
 };
 export var Emoji = function Emoji(props) {
   var emoji = props.emoji;

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

@@ -1,20 +1,21 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
-import { Fragment, useState } from 'react';
+import { Fragment, useState, useRef, useEffect, memo } from 'react';
 import { jsx } from '@emotion/react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import EmojiDeletePreview from '../common/EmojiDeletePreview';
 import EmojiUploadPicker from '../common/EmojiUploadPicker';
 import { EmojiPickerListSearch } from '../picker/EmojiPickerListSearch';
 import ToneSelector from './ToneSelector';
-import EmojiButton from './EmojiButton';
+import TonePreviewButton from './TonePreviewButton';
 import { messages } from '../i18n';
 import AkButton from '@atlaskit/button/standard-button';
 import AddIcon from '@atlaskit/icon/glyph/add';
 import { setSkinToneAriaLabelText } from './setSkinToneAriaLabelText';
 import { addCustomEmoji, addCustomEmojiButton, emojiActionsWrapper, emojiPickerAddEmoji, emojiToneSelectorContainer } from './styles';
 import { emojiActionsContainerWithBottomShadow, emojiPickerFooter } from '../picker/styles';
+import { DEFAULT_TONE } from '../../util/constants';
 export var emojiActionsTestId = 'emoji-actions';
 export var uploadEmojiTestId = 'upload-emoji';
 
@@ -22,8 +23,7 @@ export var uploadEmojiTestId = 'upload-emoji';
 
 var AddOwnEmoji = function AddOwnEmoji(props) {
   var onOpenUpload = props.onOpenUpload,
-    uploadEnabled = props.uploadEnabled,
-    formatMessage = props.intl.formatMessage;
+    uploadEnabled = props.uploadEnabled;
   return jsx(Fragment, null, uploadEnabled && jsx("div", {
     css: addCustomEmoji,
     "data-testid": uploadEmojiTestId
@@ -31,44 +31,73 @@ var AddOwnEmoji = function AddOwnEmoji(props) {
     return jsx(AkButton, {
       onClick: onOpenUpload,
       iconBefore: jsx(AddIcon, {
-        label: formatMessage(messages.addCustomEmojiLabel),
+        label: "",
         size: "small"
       }),
       appearance: "subtle",
       css: addCustomEmojiButton,
-      className: emojiPickerAddEmoji
+      className: emojiPickerAddEmoji,
+      tabIndex: 0,
+      id: "add-custom-emoji"
     }, label);
   })));
 };
 var TonesWrapper = function TonesWrapper(props) {
   var toneEmoji = props.toneEmoji,
-    selectedTone = props.selectedTone,
+    _props$selectedTone = props.selectedTone,
+    selectedTone = _props$selectedTone === void 0 ? DEFAULT_TONE : _props$selectedTone,
     intl = props.intl,
-    onToneSelected = props.onToneSelected,
     onToneOpen = props.onToneOpen,
     showToneSelector = props.showToneSelector;
   var formatMessage = intl.formatMessage;
+  var tonePreviewButtonRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    focusTonePreviewButton = _useState2[0],
+    setFocusTonePreviewButton = _useState2[1];
+  useEffect(function () {
+    if (focusTonePreviewButton && tonePreviewButtonRef.current) {
+      tonePreviewButtonRef.current.focus();
+    }
+    return function () {
+      setFocusTonePreviewButton(false);
+    };
+  });
+  var onToneCloseHandler = function onToneCloseHandler() {
+    var onToneClose = props.onToneClose;
+    onToneClose();
+    setFocusTonePreviewButton(true);
+  };
+  var onToneSelectedHandler = function onToneSelectedHandler(toneValue) {
+    var onToneSelected = props.onToneSelected;
+    onToneSelected(toneValue);
+    setFocusTonePreviewButton(true);
+  };
   if (!toneEmoji) {
     return null;
   }
-  var previewEmoji = toneEmoji;
-  if (selectedTone && previewEmoji.skinVariations) {
-    previewEmoji = previewEmoji.skinVariations[(selectedTone || 1) - 1];
+  var previewToneEmoji = toneEmoji;
+  if (selectedTone !== DEFAULT_TONE && previewToneEmoji.skinVariations) {
+    previewToneEmoji = previewToneEmoji.skinVariations[selectedTone - 1];
   }
   return jsx("div", {
     css: emojiToneSelectorContainer
-  }, showToneSelector && jsx(ToneSelector, {
+  }, jsx(ToneSelector, {
     emoji: toneEmoji,
-    onToneSelected: onToneSelected,
-    previewEmojiId: previewEmoji.id
-  }), jsx(EmojiButton, {
+    onToneSelected: onToneSelectedHandler,
+    onToneClose: onToneCloseHandler,
+    selectedTone: selectedTone,
+    isVisible: showToneSelector
+  }), jsx(TonePreviewButton, {
+    ref: tonePreviewButtonRef,
     ariaExpanded: showToneSelector,
-    emoji: previewEmoji,
+    emoji: previewToneEmoji,
     selectOnHover: true,
     onSelected: onToneOpen,
     ariaLabelText: formatMessage(messages.emojiSelectSkinToneButtonAriaLabelText, {
-      selectedTone: "".concat(setSkinToneAriaLabelText(previewEmoji.name), " selected")
-    })
+      selectedTone: "".concat(setSkinToneAriaLabelText(previewToneEmoji.name))
+    }),
+    isVisible: !showToneSelector
   }));
 };
 export var EmojiActions = function EmojiActions(props) {
@@ -84,15 +113,20 @@ export var EmojiActions = function EmojiActions(props) {
     onFileChooserClicked = props.onFileChooserClicked,
     emojiToDelete = props.emojiToDelete,
     onChange = props.onChange,
-    query = props.query;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    showToneSelector = _useState2[0],
-    setShowToneSelector = _useState2[1];
+    query = props.query,
+    _props$resultsCount = props.resultsCount,
+    resultsCount = _props$resultsCount === void 0 ? 0 : _props$resultsCount;
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showToneSelector = _useState4[0],
+    setShowToneSelector = _useState4[1];
   var previewFooterClassnames = [emojiPickerFooter, emojiActionsContainerWithBottomShadow];
   var onToneOpenHandler = function onToneOpenHandler() {
     return setShowToneSelector(true);
   };
+  var onToneCloseHandler = function onToneCloseHandler() {
+    return setShowToneSelector(false);
+  };
   var onToneSelectedHandler = function onToneSelectedHandler(toneValue) {
     setShowToneSelector(false);
     if (onToneSelected) {
@@ -133,11 +167,13 @@ export var EmojiActions = function EmojiActions(props) {
     css: emojiActionsWrapper
   }, !showToneSelector && jsx(EmojiPickerListSearch, {
     onChange: onChange,
-    query: query
+    query: query,
+    resultsCount: resultsCount
   }), jsx(TonesWrapper, _extends({}, props, {
     onToneOpen: onToneOpenHandler,
+    onToneClose: onToneCloseHandler,
     onToneSelected: onToneSelectedHandler,
     showToneSelector: showToneSelector
   }))), jsx(AddOwnEmoji, props));
 };
-export default injectIntl(EmojiActions);
+export default injectIntl( /*#__PURE__*/memo(EmojiActions));

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

@@ -1,8 +1,9 @@
 /** @jsx jsx */
-
+import { Fragment } from 'react';
 import { jsx } from '@emotion/react';
 import Tooltip from '@atlaskit/tooltip';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 export var emojiErrorMessageTestId = 'emoji-error-message';
 export var emojiErrorMessageTooltipTestId = 'emoji-error-message-tooltip';
 export var emojiErrorIconTestId = 'emoji-error-icon';
@@ -10,7 +11,7 @@ var EmojiErrorMessage = function EmojiErrorMessage(props) {
   var messageStyles = props.messageStyles,
     message = props.message,
     tooltip = props.tooltip;
-  return tooltip ? jsx("div", {
+  var visualContent = tooltip ? jsx("div", {
     css: messageStyles,
     "data-testid": emojiErrorMessageTestId
   }, jsx(Tooltip, {
@@ -27,6 +28,9 @@ var EmojiErrorMessage = function EmojiErrorMessage(props) {
   }, jsx(ErrorIcon, {
     label: "Error",
     size: "small"
-  }), " ", message);
+  }), message);
+  return jsx(Fragment, null, jsx(VisuallyHidden, {
+    role: "alert"
+  }, message), visualContent);
 };
 export default EmojiErrorMessage;

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

@@ -34,6 +34,7 @@ var EmojiPlaceholder = function EmojiPlaceholder(props) {
   return jsx("span", {
     "data-testid": emojiPlaceholderTestId(shortName),
     "aria-busy": loading,
+    role: "status",
     "aria-label": shortName,
     className: placeholder,
     css: loading ? [placeholderContainer, placeholderContainerAnimated] : placeholderContainer,

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

@@ -0,0 +1,52 @@
+/** @jsx jsx */
+import React, { memo, forwardRef } from 'react';
+import { jsx } from '@emotion/react';
+import { leftClick } from '../../util/mouse';
+import { emojiButton, emojiRadio } from './styles';
+import Emoji from './Emoji';
+import { TONESELECTOR_KEYBOARD_KEYS_SUPPORTED } from '../../util/constants';
+import VisuallyHidden from '@atlaskit/visually-hidden';
+var handleMouseDown = function handleMouseDown(props, event) {
+  var onSelected = props.onSelected;
+  event.preventDefault();
+  if (onSelected && leftClick(event)) {
+    onSelected();
+  }
+};
+var handleKeyPress = function handleKeyPress(props, event) {
+  if (TONESELECTOR_KEYBOARD_KEYS_SUPPORTED.includes(event.key)) {
+    var onSelected = props.onSelected;
+    event.preventDefault();
+    if (onSelected) {
+      onSelected();
+    }
+  }
+};
+export var EmojiRadioButton = /*#__PURE__*/forwardRef(function (props, ref) {
+  var emoji = props.emoji,
+    selectOnHover = props.selectOnHover,
+    ariaLabelText = props.ariaLabelText,
+    defaultChecked = props.defaultChecked;
+  return jsx("label", {
+    css: emojiButton,
+    onMouseDown: function onMouseDown(event) {
+      return handleMouseDown(props, event);
+    },
+    onKeyDown: function onKeyDown(event) {
+      return handleKeyPress(props, event);
+    }
+  }, jsx(VisuallyHidden, null, ariaLabelText), jsx("input", {
+    ref: ref,
+    "data-testid": ariaLabelText,
+    type: "radio",
+    name: "skin-tone",
+    css: emojiRadio,
+    defaultChecked: defaultChecked
+  }), jsx(Emoji, {
+    emoji: emoji,
+    selectOnHover: selectOnHover,
+    shouldBeInteractive: false,
+    "aria-hidden": true
+  }));
+});
+export default /*#__PURE__*/memo(EmojiRadioButton);