@atlaskit/emoji 70.10.10 → 70.10.12

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/emoji
 
+## 70.10.12
+
+### Patch Changes
+
+- [`93fae868945b0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/93fae868945b0) -
+  Fix accessibility - inaccessible skin tones from keyboard navigation
+- Updated dependencies
+
+## 70.10.11
+
+### Patch Changes
+
+- [`2a75c1be2244e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2a75c1be2244e) -
+  Removed usage of @atlaskit/elements-test-helpers from tests
+- Updated dependencies
+
 ## 70.10.10
 
 ### Patch Changes

package/dist/cjs/api/EmojiResource.js

@@ -45,7 +45,7 @@ var supportsUploadFeature = exports.supportsUploadFeature = function supportsUpl
   var emojiUploadProvider = emojiProvider;
   return !!emojiUploadProvider.isUploadSupported && !!emojiUploadProvider.uploadCustomEmoji && !!emojiUploadProvider.prepareForUpload;
 };
-var EmojiResource = exports.EmojiResource = /*#__PURE__*/function (_ref) {
+var EmojiResource = exports.EmojiResource = /*#__PURE__*/function (_AbstractResource) {
   function EmojiResource(config) {
     var _this;
     (0, _classCallCheck2.default)(this, EmojiResource);
@@ -109,41 +109,42 @@ var EmojiResource = exports.EmojiResource = /*#__PURE__*/function (_ref) {
    * Get the emoji provider from Emoji Resource
    * @returns Promise<EmojiProvider>
    */
-  (0, _inherits2.default)(EmojiResource, _ref);
+  (0, _inherits2.default)(EmojiResource, _AbstractResource);
   return (0, _createClass2.default)(EmojiResource, [{
     key: "getEmojiProvider",
     value: (function () {
       var _getEmojiProvider = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
         var options,
-          _args = arguments;
-        return _regenerator.default.wrap(function _callee$(_context) {
+          _args = arguments,
+          _t;
+        return _regenerator.default.wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
               options = _args.length > 0 && _args[0] !== undefined ? _args[0] : {
                 fetchAtStart: !this.fetchOnDemand
               };
               if (!options.fetchAtStart) {
-                _context.next = 11;
+                _context.next = 4;
                 break;
               }
-              _context.prev = 2;
-              _context.next = 5;
+              _context.prev = 1;
+              _context.next = 2;
               return this.fetchEmojiProvider();
-            case 5:
-              _context.next = 11;
+            case 2:
+              _context.next = 4;
               break;
-            case 7:
-              _context.prev = 7;
-              _context.t0 = _context["catch"](2);
-              (0, _logger.default)(_context.t0);
+            case 3:
+              _context.prev = 3;
+              _t = _context["catch"](1);
+              (0, _logger.default)(_t);
               return _context.abrupt("return", Promise.resolve(this));
-            case 11:
+            case 4:
               return _context.abrupt("return", Promise.resolve(this));
-            case 12:
+            case 5:
             case "end":
               return _context.stop();
           }
-        }, _callee, this, [[2, 7]]);
+        }, _callee, this, [[1, 3]]);
       }));
       function getEmojiProvider() {
         return _getEmojiProvider.apply(this, arguments);
@@ -154,8 +155,8 @@ var EmojiResource = exports.EmojiResource = /*#__PURE__*/function (_ref) {
     key: "fetchIndividualProvider",
     value: function () {
       var _fetchIndividualProvider = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(provider, index) {
-        var providerType, loader, emojiResponse;
-        return _regenerator.default.wrap(function _callee2$(_context2) {
+        var providerType, loader, emojiResponse, _t2;
+        return _regenerator.default.wrap(function (_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
               providerType = this.getProviderType(provider);
@@ -167,41 +168,41 @@ var EmojiResource = exports.EmojiResource = /*#__PURE__*/function (_ref) {
                 type: providerType
               });
               loader = new _EmojiLoader.default(provider); // fetch emoji from provider url and denormalise
-              _context2.next = 7;
+              _context2.next = 2;
               return loader.loadEmoji();
-            case 7:
+            case 2:
               emojiResponse = _context2.sent;
               (0, _ufoExperiences.sampledUfoEmojiResourceFetched)(providerType).success();
               // setup emoji repository
               this.emojiResponses[index] = emojiResponse;
               this.initEmojiRepository(this.emojiResponses);
-              _context2.next = 13;
+              _context2.next = 3;
               return this.initSiteEmojiResource(emojiResponse, provider);
-            case 13:
+            case 3:
               this.activeLoaders--;
               this.performRetries();
               this.refreshLastFilter();
-              _context2.next = 25;
+              _context2.next = 5;
               break;
-            case 18:
-              _context2.prev = 18;
-              _context2.t0 = _context2["catch"](1);
+            case 4:
+              _context2.prev = 4;
+              _t2 = _context2["catch"](1);
               this.activeLoaders--;
-              this.notifyError(_context2.t0);
+              this.notifyError(_t2);
               (0, _ufoExperiences.sampledUfoEmojiResourceFetched)(providerType).failure({
                 metadata: {
-                  reason: _context2.t0,
+                  reason: _t2,
                   source: 'EmojiProvider',
                   providerUrl: provider.url
                 }
               });
-              (0, _logger.default)("failed to fetch emoji provider for ".concat(provider.url), _context2.t0);
+              (0, _logger.default)("failed to fetch emoji provider for ".concat(provider.url), _t2);
               throw new Error("failed to fetch emoji from ".concat(provider.url));
-            case 25:
+            case 5:
             case "end":
               return _context2.stop();
           }
-        }, _callee2, this, [[1, 18]]);
+        }, _callee2, this, [[1, 4]]);
       }));
       function fetchIndividualProvider(_x, _x2) {
         return _fetchIndividualProvider.apply(this, arguments);
@@ -215,24 +216,24 @@ var EmojiResource = exports.EmojiResource = /*#__PURE__*/function (_ref) {
         var _this2 = this;
         var force,
           _args3 = arguments;
-        return _regenerator.default.wrap(function _callee3$(_context3) {
+        return _regenerator.default.wrap(function (_context3) {
           while (1) switch (_context3.prev = _context3.next) {
             case 0:
               force = _args3.length > 0 && _args3[0] !== undefined ? _args3[0] : false;
               if (!(force || !this.isRepositoryAvailable(this.emojiRepository) && !this.isInitialised)) {
-                _context3.next = 6;
+                _context3.next = 1;
                 break;
               }
               this.isInitialised = true;
               this.emojiResponses = [];
               // fetch emoji providers
-              _context3.next = 6;
+              _context3.next = 1;
               return Promise.all(this.emojiProviderConfig.providers.map(function (provider, index) {
                 return _this2.fetchIndividualProvider(provider, index);
               }));
-            case 6:
+            case 1:
               return _context3.abrupt("return", Promise.resolve(this.emojiRepository));
-            case 7:
+            case 2:
             case "end":
               return _context3.stop();
           }
@@ -252,29 +253,29 @@ var EmojiResource = exports.EmojiResource = /*#__PURE__*/function (_ref) {
     key: "fetchByEmojiId",
     value: function () {
       var _fetchByEmojiId = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(emojiId, optimistic) {
-        var _emoji, provider, loader, loadEmoji, _emoji2, emoji;
-        return _regenerator.default.wrap(function _callee4$(_context4) {
+        var _emoji, provider, loader, loadEmoji, _emoji2, emoji, _t3;
+        return _regenerator.default.wrap(function (_context4) {
           while (1) switch (_context4.prev = _context4.next) {
             case 0:
               if (!(this.isLoaded() && this.isRepositoryAvailable(this.emojiRepository))) {
-                _context4.next = 8;
+                _context4.next = 3;
                 break;
               }
-              _context4.next = 3;
+              _context4.next = 1;
               return this.findByEmojiId(emojiId);
-            case 3:
+            case 1:
               _emoji = _context4.sent;
               if (!_emoji) {
-                _context4.next = 8;
+                _context4.next = 3;
                 break;
               }
-              _context4.next = 7;
+              _context4.next = 2;
               return this.getMediaEmojiDescriptionURLWithInlineToken(_emoji);
-            case 7:
+            case 2:
               return _context4.abrupt("return", _context4.sent);
-            case 8:
+            case 3:
               if (!(this.emojiProviderConfig.singleEmojiApi && optimistic)) {
-                _context4.next = 31;
+                _context4.next = 11;
                 break;
               }
               // if config has singleEmojiApi then fetch single emoji
@@ -283,56 +284,56 @@ var EmojiResource = exports.EmojiResource = /*#__PURE__*/function (_ref) {
                 securityProvider: this.emojiProviderConfig.singleEmojiApi.securityProvider
               };
               loader = new _EmojiLoader.default(provider);
-              _context4.prev = 11;
-              _context4.next = 14;
+              _context4.prev = 4;
+              _context4.next = 5;
               return loader.loadEmoji();
-            case 14:
+            case 5:
               loadEmoji = _context4.sent;
               if (loadEmoji.emojis[0]) {
-                _context4.next = 17;
+                _context4.next = 6;
                 break;
               }
               return _context4.abrupt("return");
-            case 17:
+            case 6:
               if (this.isRepositoryAvailable(this.siteEmojiResource)) {
-                _context4.next = 20;
+                _context4.next = 7;
                 break;
               }
-              _context4.next = 20;
+              _context4.next = 7;
               return this.initSiteEmojiResource(loadEmoji, provider);
-            case 20:
+            case 7:
               return _context4.abrupt("return", this.getMediaEmojiDescriptionURLWithInlineToken(loadEmoji.emojis[0]));
-            case 23:
-              _context4.prev = 23;
-              _context4.t0 = _context4["catch"](11);
-              _context4.next = 27;
+            case 8:
+              _context4.prev = 8;
+              _t3 = _context4["catch"](4);
+              _context4.next = 9;
               return this.findByEmojiId(emojiId);
-            case 27:
+            case 9:
               _emoji2 = _context4.sent;
               if (_emoji2) {
-                _context4.next = 30;
+                _context4.next = 10;
                 break;
               }
               return _context4.abrupt("return");
-            case 30:
+            case 10:
               return _context4.abrupt("return", this.getMediaEmojiDescriptionURLWithInlineToken(_emoji2));
-            case 31:
-              _context4.next = 33;
+            case 11:
+              _context4.next = 12;
               return this.findByEmojiId(emojiId);
-            case 33:
+            case 12:
               emoji = _context4.sent;
               if (emoji) {
-                _context4.next = 36;
+                _context4.next = 13;
                 break;
               }
               return _context4.abrupt("return");
-            case 36:
+            case 13:
               return _context4.abrupt("return", this.getMediaEmojiDescriptionURLWithInlineToken(emoji));
-            case 37:
+            case 14:
             case "end":
               return _context4.stop();
           }
-        }, _callee4, this, [[11, 23]]);
+        }, _callee4, this, [[4, 8]]);
       }));
       function fetchByEmojiId(_x3, _x4) {
         return _fetchByEmojiId.apply(this, arguments);
@@ -457,16 +458,16 @@ var EmojiResource = exports.EmojiResource = /*#__PURE__*/function (_ref) {
     value: (function () {
       var _getMediaEmojiDescriptionURLWithInlineToken = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5(emoji) {
         var _yield$this$siteEmoji, representation, altRepresentation;
-        return _regenerator.default.wrap(function _callee5$(_context5) {
+        return _regenerator.default.wrap(function (_context5) {
           while (1) switch (_context5.prev = _context5.next) {
             case 0:
               if (!this.isRepositoryAvailable(this.siteEmojiResource)) {
-                _context5.next = 7;
+                _context5.next = 2;
                 break;
               }
-              _context5.next = 3;
+              _context5.next = 1;
               return this.siteEmojiResource.generateTokenisedMediaURLS(emoji.representation, emoji.altRepresentation);
-            case 3:
+            case 1:
               _yield$this$siteEmoji = _context5.sent;
               representation = _yield$this$siteEmoji.representation;
               altRepresentation = _yield$this$siteEmoji.altRepresentation;
@@ -474,9 +475,9 @@ var EmojiResource = exports.EmojiResource = /*#__PURE__*/function (_ref) {
                 representation: representation,
                 altRepresentation: altRepresentation
               }));
-            case 7:
+            case 2:
               return _context5.abrupt("return", emoji);
-            case 8:
+            case 3:
             case "end":
               return _context5.stop();
           }

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

@@ -80,23 +80,23 @@ var SiteEmojiResource = exports.default = /*#__PURE__*/function () {
     key: "generateTokenisedMediaURLS",
     value: (function () {
       var _generateTokenisedMediaURLS = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(representation, altRepresentation) {
-        var readToken;
-        return _regenerator.default.wrap(function _callee$(_context) {
+        var readToken, _t;
+        return _regenerator.default.wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
               if ((0, _typeHelpers.isMediaRepresentation)(representation)) {
-                _context.next = 2;
+                _context.next = 1;
                 break;
               }
               return _context.abrupt("return", {
                 representation: representation,
                 altRepresentation: altRepresentation
               });
-            case 2:
-              _context.prev = 2;
-              _context.next = 5;
+            case 1:
+              _context.prev = 1;
+              _context.next = 2;
               return this.tokenManager.getToken('read');
-            case 5:
+            case 2:
               readToken = _context.sent;
               return _context.abrupt("return", Object.entries({
                 representation: representation,
@@ -123,18 +123,18 @@ var SiteEmojiResource = exports.default = /*#__PURE__*/function () {
                 representation: representation,
                 altRepresentation: altRepresentation
               }));
-            case 9:
-              _context.prev = 9;
-              _context.t0 = _context["catch"](2);
+            case 3:
+              _context.prev = 3;
+              _t = _context["catch"](1);
               return _context.abrupt("return", {
                 representation: representation,
                 altRepresentation: altRepresentation
               });
-            case 12:
+            case 4:
             case "end":
               return _context.stop();
           }
-        }, _callee, this, [[2, 9]]);
+        }, _callee, this, [[1, 3]]);
       }));
       function generateTokenisedMediaURLS(_x, _x2) {
         return _generateTokenisedMediaURLS.apply(this, arguments);

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

@@ -10,6 +10,7 @@ exports.default = exports.EmojiRadioButton = void 0;
 require("./EmojiRadioButton.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _Emoji = _interopRequireDefault(require("./Emoji"));
 var _constants = require("../../util/constants");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
@@ -19,6 +20,13 @@ var emojiRadio = {
   default: "_tzy4idpf _kqswstnw _154i14id _1ltv14id _3y8mfajl _157z1r31 _1dzmglyw _1sqm1o36 _fh6w1y54 _1i1213zc"
 };
 var handleKeyDown = function handleKeyDown(props, event) {
+  if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight') && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) {
+    var _props$onArrowKey;
+    event.preventDefault();
+    event.stopPropagation();
+    (_props$onArrowKey = props.onArrowKey) === null || _props$onArrowKey === void 0 || _props$onArrowKey.call(props, event.key === 'ArrowRight' ? 1 : -1);
+    return;
+  }
   if (_constants.TONESELECTOR_KEYBOARD_KEYS_SUPPORTED.includes(event.key)) {
     var onSelected = props.onSelected;
     event.preventDefault();
@@ -48,6 +56,9 @@ var EmojiRadioButton = exports.EmojiRadioButton = /*#__PURE__*/(0, _react.forwar
     onKeyDown: function onKeyDown(event) {
       return handleKeyDown(props, event);
     },
+    onChange: (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? function (e) {
+      return e.preventDefault();
+    } : undefined,
     className: (0, _runtime.ax)([emojiRadio.default])
   }), /*#__PURE__*/_react.default.createElement(_Emoji.default, {
     emoji: emoji,

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

@@ -30,7 +30,7 @@ var _internalTypes = require("./internal-types");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _browserApis = require("@atlaskit/browser-apis");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
 var closeEmojiUploadButton = null;
 var uploadAddRowNew = null;
 var emojiUpload = null;
@@ -308,28 +308,29 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
   var onFileLoad = (0, _react.useCallback)(function (file) {
     return /*#__PURE__*/function () {
       var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(f) {
-        return _regenerator.default.wrap(function _callee$(_context) {
+        var _t;
+        return _regenerator.default.wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
               _context.prev = 0;
               setFilename(file.name);
-              _context.next = 4;
+              _context.next = 1;
               return ImageUtil.parseImage(f.target.result);
-            case 4:
+            case 1:
               setPreviewImage(f.target.result);
               setChooseEmojiErrorMessage(undefined);
-              _context.next = 12;
+              _context.next = 3;
               break;
-            case 8:
-              _context.prev = 8;
-              _context.t0 = _context["catch"](0);
+            case 2:
+              _context.prev = 2;
+              _t = _context["catch"](0);
               setChooseEmojiErrorMessage( /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages.emojiInvalidImage));
               cancelChooseFile();
-            case 12:
+            case 3:
             case "end":
               return _context.stop();
           }
-        }, _callee, null, [[0, 8]]);
+        }, _callee, null, [[0, 2]]);
       }));
       return function (_x) {
         return _ref.apply(this, arguments);

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

@@ -74,7 +74,7 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
         reason,
         foundEmoji,
         _args = arguments;
-      return _regenerator.default.wrap(function _callee$(_context) {
+      return _regenerator.default.wrap(function (_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             optimisticFetch = _args.length > 2 && _args[2] !== undefined ? _args[2] : false;
@@ -140,7 +140,7 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
               setLoaded(true);
               (0, _analytics.sampledUfoRenderedEmoji)(emojiId).mark(_types.UfoEmojiTimings.METADATA_END);
             }
-          case 5:
+          case 1:
           case "end":
             return _context.stop();
         }

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

@@ -8,11 +8,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.toneSelectorTestId = exports.default = exports.ToneSelectorInternal = void 0;
 require("./ToneSelector.compiled.css");
-var _react = _interopRequireWildcard(require("react"));
-var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _analytics = require("../../util/analytics");
 var _setSkinToneAriaLabelText = require("./setSkinToneAriaLabelText");
@@ -39,6 +39,8 @@ var ToneSelectorInternal = exports.ToneSelectorInternal = function ToneSelectorI
     isVisible = props.isVisible;
   var isMounted = (0, _react.useRef)(false);
   var selectedToneRadioRef = (0, _react.useRef)(null);
+  // Refs for all radio inputs — used for FG-gated arrow-key focus management
+  var radioRefs = (0, _react.useRef)([]);
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var emojiToneCollection = (0, _react.useMemo)(function () {
@@ -71,6 +73,12 @@ var ToneSelectorInternal = exports.ToneSelectorInternal = function ToneSelectorI
       (0, _analytics.createAndFireEventInElementsChannel)(event)(createAnalyticsEvent);
     }
   };
+  var _onArrowKey = (0, _react.useCallback)(function (currentIndex, direction) {
+    var _radioRefs$current$ne;
+    var len = radioRefs.current.length;
+    var nextIndex = (currentIndex + direction + len) % len;
+    (_radioRefs$current$ne = radioRefs.current[nextIndex]) === null || _radioRefs$current$ne === void 0 || _radioRefs$current$ne.focus();
+  }, []);
   var onToneSelectedHandler = function onToneSelectedHandler(toneValue) {
     return function () {
       if (selectedTone === toneValue && onToneClose) {
@@ -88,14 +96,30 @@ var ToneSelectorInternal = exports.ToneSelectorInternal = function ToneSelectorI
     fireAnalyticsEvent((0, _analytics.toneSelectorOpenedEvent)({}));
   }
   isMounted.current = true;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     role: "radiogroup",
     "data-testid": toneSelectorTestId,
     id: "emoji-picker-tone-selector",
     "aria-label": formatMessage(_i18n.messages.emojiSelectSkinToneListAriaLabelText),
     className: (0, _runtime.ax)([!isVisible && "_tzy4idpf _3um015vq _1e0cglyw"])
-  }, emojiToneCollection.map(function (tone) {
-    return /*#__PURE__*/React.createElement(_EmojiRadioButton.default, {
+  }, emojiToneCollection.map(function (tone, renderIndex) {
+    return (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? /*#__PURE__*/_react.default.createElement(_EmojiRadioButton.default, {
+      ref: function ref(el) {
+        radioRefs.current[renderIndex] = el;
+        if (tone.isSelected && selectedToneRadioRef) {
+          selectedToneRadioRef.current = el;
+        }
+      },
+      defaultChecked: tone.isSelected,
+      ariaLabelText: tone.label,
+      key: "".concat(tone.id),
+      emoji: tone,
+      onArrowKey: function onArrowKey(direction) {
+        return _onArrowKey(renderIndex, direction);
+      },
+      onSelected: onToneSelectedHandler(tone.toneIndex),
+      selectOnHover: true
+    }) : /*#__PURE__*/_react.default.createElement(_EmojiRadioButton.default, {
       ref: tone.isSelected ? selectedToneRadioRef : null,
       defaultChecked: tone.isSelected,
       ariaLabelText: tone.label,

package/dist/cjs/components/picker/EmojiPickerComponent.js

@@ -474,7 +474,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
   var onUploadEmoji = (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(upload, retry) {
       var errorSetter, onSuccess, uploadShortName, existing;
-      return _regenerator.default.wrap(function _callee$(_context) {
+      return _regenerator.default.wrap(function (_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             fireAnalytics((0, _analytics.uploadConfirmButton)({
@@ -492,23 +492,23 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
               scrollToUploadedEmoji(emojiDescription);
             };
             if (!(0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) {
-              _context.next = 11;
+              _context.next = 2;
               break;
             }
             uploadShortName = ":".concat(upload.name.toLowerCase(), ":");
-            _context.next = 7;
+            _context.next = 1;
             return emojiProvider.findByShortName(uploadShortName);
-          case 7:
+          case 1:
             existing = _context.sent;
             if (!existing) {
-              _context.next = 11;
+              _context.next = 2;
               break;
             }
             errorSetter(_i18n.messages.emojiDuplicateName);
             return _context.abrupt("return");
-          case 11:
+          case 2:
             (0, _UploadEmoji.uploadEmoji)(upload, emojiProvider, errorSetter, onSuccess, fireAnalytics, retry);
-          case 12:
+          case 3:
           case "end":
             return _context.stop();
         }