@atlaskit/emoji 67.1.0 → 67.2.0

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

@@ -5,9 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.emojiErrorMessageTooltipTestId = exports.emojiErrorMessageTestId = exports.emojiErrorIconTestId = exports.default = void 0;
-var _react = require("@emotion/react");
+var _react = require("react");
+var _react2 = require("@emotion/react");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 /** @jsx jsx */
 
 var emojiErrorMessageTestId = 'emoji-error-message';
@@ -20,24 +22,27 @@ var EmojiErrorMessage = function EmojiErrorMessage(props) {
   var messageStyles = props.messageStyles,
     message = props.message,
     tooltip = props.tooltip;
-  return tooltip ? (0, _react.jsx)("div", {
+  var visualContent = tooltip ? (0, _react2.jsx)("div", {
     css: messageStyles,
     "data-testid": emojiErrorMessageTestId
-  }, (0, _react.jsx)(_tooltip.default, {
+  }, (0, _react2.jsx)(_tooltip.default, {
     content: message,
     position: "top",
     testId: emojiErrorMessageTooltipTestId
-  }, (0, _react.jsx)(_error.default, {
+  }, (0, _react2.jsx)(_error.default, {
     label: "Error",
     size: "medium",
     testId: emojiErrorIconTestId
-  }))) : (0, _react.jsx)("div", {
+  }))) : (0, _react2.jsx)("div", {
     css: messageStyles,
     "data-testid": emojiErrorMessageTestId
-  }, (0, _react.jsx)(_error.default, {
+  }, (0, _react2.jsx)(_error.default, {
     label: "Error",
     size: "small"
-  }), " ", message);
+  }), message);
+  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_visuallyHidden.default, {
+    role: "alert"
+  }, message), visualContent);
 };
 var _default = EmojiErrorMessage;
 exports.default = _default;

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

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

package/dist/cjs/components/common/{EmojiButton.js → EmojiRadioButton.js}

@@ -5,12 +5,14 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.EmojiButton = void 0;
+exports.default = exports.EmojiRadioButton = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _mouse = require("../../util/mouse");
 var _styles = require("./styles");
 var _Emoji = _interopRequireDefault(require("./Emoji"));
+var _constants = require("../../util/constants");
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 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; }
 /** @jsx jsx */
@@ -23,34 +25,41 @@ var handleMouseDown = function handleMouseDown(props, event) {
   }
 };
 var handleKeyPress = function handleKeyPress(props, event) {
-  var onSelected = props.onSelected;
-  if (onSelected && (event.key === 'Enter' || event.key === ' ')) {
+  if (_constants.TONESELECTOR_KEYBOARD_KEYS_SUPPORTED.includes(event.key)) {
+    var onSelected = props.onSelected;
     event.preventDefault();
-    onSelected();
+    if (onSelected) {
+      onSelected();
+    }
   }
 };
-var EmojiButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+var EmojiRadioButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var emoji = props.emoji,
     selectOnHover = props.selectOnHover,
     ariaLabelText = props.ariaLabelText,
-    ariaExpanded = props.ariaExpanded,
-    shouldHideButton = props.shouldHideButton;
-  return (0, _react2.jsx)("button", {
-    ref: ref,
-    "aria-expanded": ariaExpanded,
-    css: shouldHideButton ? _styles.hiddenToneButton : _styles.emojiButton,
+    defaultChecked = props.defaultChecked;
+  return (0, _react2.jsx)("label", {
+    css: _styles.emojiButton,
     onMouseDown: function onMouseDown(event) {
-      handleMouseDown(props, event);
+      return handleMouseDown(props, event);
     },
     onKeyDown: function onKeyDown(event) {
-      handleKeyPress(props, event);
-    },
-    "aria-label": ariaLabelText
-  }, (0, _react2.jsx)(_Emoji.default, {
+      return handleKeyPress(props, event);
+    }
+  }, (0, _react2.jsx)(_visuallyHidden.default, null, ariaLabelText), (0, _react2.jsx)("input", {
+    ref: ref,
+    "data-testid": ariaLabelText,
+    type: "radio",
+    name: "skin-tone",
+    css: _styles.emojiRadio,
+    defaultChecked: defaultChecked
+  }), (0, _react2.jsx)(_Emoji.default, {
     emoji: emoji,
-    selectOnHover: selectOnHover
+    selectOnHover: selectOnHover,
+    shouldBeInteractive: false,
+    "aria-hidden": true
   }));
 });
-exports.EmojiButton = EmojiButton;
-var _default = /*#__PURE__*/(0, _react.memo)(EmojiButton);
+exports.EmojiRadioButton = EmojiRadioButton;
+var _default = /*#__PURE__*/(0, _react.memo)(EmojiRadioButton);
 exports.default = _default;

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

@@ -5,16 +5,17 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.uploadEmojiNameInputTestId = exports.default = void 0;
+exports.uploadEmojiNameInputTestId = exports.uploadEmojiComponentTestId = exports.default = exports.cancelEmojiUploadPickerTestId = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
 var ImageUtil = _interopRequireWildcard(require("../../util/image"));
 var _logger = _interopRequireDefault(require("../../util/logger"));
 var _i18n = require("../i18n");
@@ -29,6 +30,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var uploadEmojiNameInputTestId = 'upload-emoji-name-input';
 exports.uploadEmojiNameInputTestId = uploadEmojiNameInputTestId;
+var uploadEmojiComponentTestId = 'upload-emoji-component';
+exports.uploadEmojiComponentTestId = uploadEmojiComponentTestId;
+var cancelEmojiUploadPickerTestId = 'cancel-emoji-upload-picker';
+exports.cancelEmojiUploadPickerTestId = cancelEmojiUploadPickerTestId;
 var disallowedReplacementsMap = new Map([[':', ''], ['!', ''], ['@', ''], ['#', ''], ['%', ''], ['^', ''], ['&', ''], ['*', ''], ['(', ''], [')', ''], [' ', '_']]);
 var sanitizeName = function sanitizeName(name) {
   // prevent / replace certain characters, allow others
@@ -42,7 +47,7 @@ var toEmojiName = function toEmojiName(uploadName) {
   var name = uploadName.split('_').join(' ');
   return "".concat(name.substr(0, 1).toLocaleUpperCase()).concat(name.substr(1));
 };
-var ChooseEmojiFile = function ChooseEmojiFile(props) {
+var ChooseEmojiFile = /*#__PURE__*/(0, _react.memo)(function (props) {
   var _props$name = props.name,
     name = _props$name === void 0 ? '' : _props$name,
     onChooseFile = props.onChooseFile,
@@ -54,13 +59,31 @@ var ChooseEmojiFile = function ChooseEmojiFile(props) {
   var formatMessage = intl.formatMessage;
   var disableChooser = !name;
   var fileChooserButtonDescriptionId = 'choose.emoji.file.button.screen.reader.description.id';
-  var onKeyDownHandler = function onKeyDownHandler(event) {
+  var inputRef = (0, _react.useRef)(null);
+  var onKeyDownHandler = (0, _react.useCallback)(function (event) {
     if (event.key === 'Escape') {
       onUploadCancelled();
     }
-  };
+  }, [onUploadCancelled]);
+  var setInputFocus = (0, _react.useCallback)(function () {
+    var _inputRef$current, _document$activeEleme, _inputRef$current2;
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+    if (((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.id) !== ((_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.id)) {
+      setInputFocus();
+    }
+  }, []);
+
+  // make sure input has focus after update
+  (0, _react.useEffect)(function () {
+    window.requestAnimationFrame(setInputFocus);
+  }, [setInputFocus]);
+  var cancelLabel = formatMessage(_i18n.messages.cancelLabel);
+  var emojiPlaceholder = formatMessage(_i18n.messages.emojiPlaceholder);
+  var emojiNameAriaLabel = formatMessage(_i18n.messages.emojiNameAriaLabel);
+  var emojiChooseFileTitle = formatMessage(_i18n.messages.emojiChooseFileTitle);
   return (0, _react2.jsx)("div", {
-    css: _styles.emojiUpload
+    css: _styles.emojiUpload,
+    "data-testid": uploadEmojiComponentTestId
   }, (0, _react2.jsx)("div", {
     css: _styles.emojiUploadTop
   }, (0, _react2.jsx)("span", {
@@ -71,27 +94,30 @@ var ChooseEmojiFile = function ChooseEmojiFile(props) {
     css: _styles.closeEmojiUploadButton
   }, (0, _react2.jsx)(_standardButton.default, {
     onClick: onUploadCancelled,
-    "aria-describedby": formatMessage(_i18n.messages.cancelLabel),
+    "aria-label": cancelLabel,
     appearance: "subtle",
     spacing: "none",
-    shouldFitContainer: true
+    shouldFitContainer: true,
+    testId: cancelEmojiUploadPickerTestId
   }, (0, _react2.jsx)(_cross.default, {
     size: "small",
-    label: formatMessage(_i18n.messages.cancelLabel)
+    label: cancelLabel
   })))), (0, _react2.jsx)("div", {
     css: _styles.uploadChooseFileRow
   }, (0, _react2.jsx)("span", {
     css: _styles.uploadChooseFileEmojiName
   }, (0, _react2.jsx)(_textfield.default, {
-    placeholder: formatMessage(_i18n.messages.emojiPlaceholder),
-    "aria-label": formatMessage(_i18n.messages.emojiNameAriaLabel),
+    placeholder: emojiPlaceholder,
+    "aria-label": emojiNameAriaLabel,
     maxLength: maxNameLength,
     onChange: onNameChange,
     onKeyDown: onKeyDownHandler,
     value: name,
     isCompact: true,
     autoFocus: true,
-    testId: uploadEmojiNameInputTestId
+    testId: uploadEmojiNameInputTestId,
+    ref: inputRef,
+    id: "new-emoji-name-input"
   })), (0, _react2.jsx)("span", {
     css: _styles.uploadChooseFileBrowse
   }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.emojiChooseFileScreenReaderDescription, function (screenReaderDescription) {
@@ -99,7 +125,7 @@ var ChooseEmojiFile = function ChooseEmojiFile(props) {
       hidden: true,
       id: fileChooserButtonDescriptionId
     }, screenReaderDescription), (0, _react2.jsx)(_FileChooser.default, {
-      label: formatMessage(_i18n.messages.emojiChooseFileTitle),
+      label: emojiChooseFileTitle,
       onChange: onChooseFile,
       onClick: onClick,
       accept: "image/png,image/jpeg,image/gif",
@@ -112,8 +138,9 @@ var ChooseEmojiFile = function ChooseEmojiFile(props) {
     messageStyles: _styles.emojiChooseFileErrorMessage,
     message: errorMessage
   })));
-};
+});
 var EmojiUploadPicker = function EmojiUploadPicker(props) {
+  var _document$activeEleme2;
   var errorMessage = props.errorMessage,
     initialUploadName = props.initialUploadName,
     onUploadEmoji = props.onUploadEmoji,
@@ -140,6 +167,8 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
     _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
     previewImage = _useState10[0],
     setPreviewImage = _useState10[1];
+  // document is undefined during ssr rendering and throws an error
+  var lastFocusedElementId = (0, _react.useRef)(typeof document !== 'undefined' ? (_document$activeEleme2 = document.activeElement) === null || _document$activeEleme2 === void 0 ? void 0 : _document$activeEleme2.id : '');
   (0, _react.useEffect)(function () {
     if (errorMessage) {
       setUploadStatus(_internalTypes.UploadStatus.Error);
@@ -155,13 +184,18 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
       setName(sanitizeName(initialUploadName));
     }
   }, [initialUploadName]);
-  var onNameChange = function onNameChange(event) {
+  var clearUploadPicker = (0, _react.useCallback)(function () {
+    setName(undefined);
+    setPreviewImage(undefined);
+    setUploadStatus(_internalTypes.UploadStatus.Waiting);
+  }, []);
+  var onNameChange = (0, _react.useCallback)(function (event) {
     var newName = sanitizeName(event.target.value);
     if (name !== newName) {
       setName(newName);
     }
-  };
-  var onAddEmoji = function onAddEmoji() {
+  }, [name]);
+  var onAddEmoji = (0, _react.useCallback)(function () {
     if (uploadStatus === _internalTypes.UploadStatus.Uploading) {
       return;
     }
@@ -191,13 +225,16 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
         });
       });
     }
-  };
-  var errorOnUpload = function errorOnUpload(event) {
+  }, [clearUploadPicker, filename, name, onUploadEmoji, previewImage, uploadStatus]);
+  var cancelChooseFile = (0, _react.useCallback)(function () {
+    setPreviewImage(undefined);
+  }, []);
+  var errorOnUpload = (0, _react.useCallback)(function (event) {
     (0, _logger.default)('File load error: ', event);
     setChooseEmojiErrorMessage(_i18n.messages.emojiUploadFailed);
     cancelChooseFile();
-  };
-  var onFileLoad = function onFileLoad(file) {
+  }, [cancelChooseFile]);
+  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) {
@@ -228,11 +265,8 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
         return _ref.apply(this, arguments);
       };
     }();
-  };
-  var cancelChooseFile = function cancelChooseFile() {
-    setPreviewImage(undefined);
-  };
-  var onChooseFile = function onChooseFile(event) {
+  }, [cancelChooseFile]);
+  var onChooseFile = (0, _react.useCallback)(function (event) {
     var files = event.target.files;
     if (files.length) {
       var reader = new FileReader();
@@ -249,17 +283,25 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
     } else {
       cancelChooseFile();
     }
-  };
-  var clearUploadPicker = function clearUploadPicker() {
-    setName(undefined);
-    setPreviewImage(undefined);
-    setUploadStatus(_internalTypes.UploadStatus.Waiting);
-  };
-  var cancelUpload = function cancelUpload() {
+  }, [cancelChooseFile, errorOnUpload, onFileLoad]);
+  var cancelUpload = (0, _react.useCallback)(function () {
     clearUploadPicker();
     onUploadCancelled();
-  };
-  return (0, _react2.jsx)(_react.default.Fragment, null, name && previewImage ? (0, _react2.jsx)(_EmojiUploadPreview.default, {
+
+    // using setTimeout here to allow the UI to update before setting focus
+    setTimeout(function (lastFocus) {
+      if (lastFocus) {
+        var _document$getElementB;
+        (_document$getElementB = document.getElementById(lastFocus)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.focus();
+      }
+    }, 0, lastFocusedElementId.current);
+  }, [clearUploadPicker, onUploadCancelled]);
+  var chooseErrorMessage = (0, _react.useMemo)(function () {
+    return chooseEmojiErrorMessage ? (0, _react2.jsx)(_reactIntlNext.FormattedMessage, chooseEmojiErrorMessage) : undefined;
+  }, [chooseEmojiErrorMessage]);
+  return (0, _react2.jsx)(_reactFocusLock.default, {
+    noFocusGuards: true
+  }, name && previewImage ? (0, _react2.jsx)(_EmojiUploadPreview.default, {
     errorMessage: errorMessage,
     name: name,
     onAddEmoji: onAddEmoji,
@@ -272,9 +314,10 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
     onClick: onFileChooserClicked,
     onNameChange: onNameChange,
     onUploadCancelled: cancelUpload,
-    errorMessage: chooseEmojiErrorMessage ? (0, _react2.jsx)(_reactIntlNext.FormattedMessage, chooseEmojiErrorMessage) : undefined,
+    errorMessage: chooseErrorMessage,
     intl: intl
   }));
 };
-var _default = (0, _reactIntlNext.injectIntl)(EmojiUploadPicker);
+var EmojiUploadPickerComponent = (0, _reactIntlNext.injectIntl)( /*#__PURE__*/(0, _react.memo)(EmojiUploadPicker));
+var _default = EmojiUploadPickerComponent;
 exports.default = _default;

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

@@ -22,12 +22,14 @@ var _EmojiErrorMessage = _interopRequireDefault(require("./EmojiErrorMessage"));
 var _internalTypes = require("./internal-types");
 var _RetryableButton = _interopRequireDefault(require("./RetryableButton"));
 var _styles = require("./styles");
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 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 uploadPreviewTestId = 'upload-preview';
 exports.uploadPreviewTestId = uploadPreviewTestId;
 var cancelUploadButtonTestId = 'cancel-upload-button';
 exports.cancelUploadButtonTestId = cancelUploadButtonTestId;
+var addEmojiButtonDescriptionId = 'add.emoji.button.screen.reader.description.id';
 var EmojiUploadPreview = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(EmojiUploadPreview, _PureComponent);
   var _super = _createSuper(EmojiUploadPreview);
@@ -84,12 +86,19 @@ var EmojiUploadPreview = /*#__PURE__*/function (_PureComponent) {
         messageStyles: _styles.emojiPreviewErrorMessage,
         message: errorMessage,
         tooltip: true
-      }) : null, (0, _react2.jsx)(_RetryableButton.default, {
+      }) : null, !errorMessage && (0, _react2.jsx)(_visuallyHidden.default, {
+        id: addEmojiButtonDescriptionId
+      }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.emojiPreview, {
+        values: {
+          emoji: name
+        }
+      }))), (0, _react2.jsx)(_RetryableButton.default, {
         label: formatMessage(_i18n.messages.addEmojiLabel),
         onSubmit: onAddEmoji,
         appearance: "primary",
         loading: uploading,
-        error: !!errorMessage
+        error: !!errorMessage,
+        ariaDescribedby: addEmojiButtonDescriptionId
       }), (0, _react2.jsx)(_customThemeButton.default, {
         onClick: onUploadCancelled,
         appearance: "subtle",

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.fileUploadInputTestId = exports.default = exports.chooseFileButtonTestId = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 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; }
 var chooseFileButtonTestId = 'choose-file-button';
@@ -31,7 +31,7 @@ var FileChooser = function FileChooser(props) {
     }
     filePickerRef.current.click();
   };
-  return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+  return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_standardButton.default, {
     onClick: handleOnChooseFile,
     isDisabled: isDisabled,
     "aria-describedby": ariaDescribedBy,

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

@@ -149,6 +149,10 @@ var ResourcedEmojiComponent = function ResourcedEmojiComponent(props) {
     }
     fetchOrGetEmoji(resolvedEmojiProvider, emojiId, optimistic);
   }, [resolvedEmojiProvider, emojiId, optimistic, fetchOrGetEmoji]);
+
+  /**
+   * Setting resolved emoji provider for optimistic rendering
+   */
   (0, _react.useEffect)(function () {
     Promise.resolve(emojiProvider).then(function (emojiProvider) {
       setResolvedEmojiProvider(emojiProvider);

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

@@ -29,19 +29,23 @@ var RetryButton = function RetryButton(props) {
       css: _styles.uploadRetryButton,
       appearance: "warning",
       onClick: onSubmit,
-      testId: retryUploadButtonTestId
+      testId: retryUploadButtonTestId,
+      autoFocus: true
     }, retryLabel);
   });
 };
 var UploadButton = function UploadButton(props) {
   var appearance = props.appearance,
     onSubmit = props.onSubmit,
-    label = props.label;
+    label = props.label,
+    ariaDescribedby = props.ariaDescribedby;
   return (0, _react.jsx)(_customThemeButton.default, {
     css: _styles.uploadEmojiButton,
     appearance: appearance,
     onClick: onSubmit,
-    testId: uploadEmojiButtonTestId
+    testId: uploadEmojiButtonTestId,
+    "aria-describedby": ariaDescribedby,
+    autoFocus: true
   }, label);
 };
 var RetryableButton = function RetryableButton(props) {

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

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tonePreviewTestId = exports.default = exports.TonePreviewButton = void 0;
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _styles = require("./styles");
+var _Emoji = _interopRequireDefault(require("./Emoji"));
+/** @jsx jsx */
+
+var tonePreviewTestId = 'tone-preview';
+exports.tonePreviewTestId = tonePreviewTestId;
+var TonePreviewButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var emoji = props.emoji,
+    selectOnHover = props.selectOnHover,
+    ariaLabelText = props.ariaLabelText,
+    ariaExpanded = props.ariaExpanded,
+    onSelected = props.onSelected,
+    _props$isVisible = props.isVisible,
+    isVisible = _props$isVisible === void 0 ? true : _props$isVisible;
+  return (0, _react2.jsx)("button", {
+    ref: ref,
+    css: [_styles.emojiButton, !isVisible && _styles.hidden],
+    onClick: onSelected,
+    "aria-label": ariaLabelText,
+    "aria-expanded": ariaExpanded,
+    "aria-controls": "emoji-picker-tone-selector",
+    style: {
+      overflow: 'hidden'
+    },
+    "data-testid": tonePreviewTestId
+  }, (0, _react2.jsx)(_Emoji.default, {
+    emoji: emoji,
+    selectOnHover: selectOnHover,
+    shouldBeInteractive: false,
+    "aria-hidden": true
+  }));
+});
+exports.TonePreviewButton = TonePreviewButton;
+var _default = /*#__PURE__*/(0, _react.memo)(TonePreviewButton);
+exports.default = _default;

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

@@ -1,22 +1,25 @@
 "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.ToneSelectorInternal = void 0;
+exports.toneSelectorTestId = exports.default = exports.ToneSelectorInternal = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _EmojiButton = _interopRequireDefault(require("./EmojiButton"));
+var _react = require("@emotion/react");
+var _react2 = require("react");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _analytics = require("../../util/analytics");
 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; }
+var _EmojiRadioButton = _interopRequireDefault(require("./EmojiRadioButton"));
+var _reactIntlNext = require("react-intl-next");
+var _i18n = require("../i18n");
+var _styles = require("./styles");
 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 toneSelectorTestId = 'tone-selector';
+exports.toneSelectorTestId = toneSelectorTestId;
 var extractAllTones = function extractAllTones(emoji) {
   if (emoji.skinVariations) {
     return [emoji].concat((0, _toConsumableArray2.default)(emoji.skinVariations));
@@ -26,24 +29,39 @@ var extractAllTones = function extractAllTones(emoji) {
 var ToneSelectorInternal = function ToneSelectorInternal(props) {
   var createAnalyticsEvent = props.createAnalyticsEvent,
     emoji = props.emoji,
-    previewEmojiId = props.previewEmojiId,
-    onToneSelected = props.onToneSelected;
-  var isMounted = (0, _react.useRef)(false);
-  var firstToneButtonRef = (0, _react.useRef)(null);
-  var emojiToneCollection = (0, _react.useMemo)(function () {
-    return extractAllTones(emoji).map(function (tone, index) {
+    onToneSelected = props.onToneSelected,
+    onToneClose = props.onToneClose,
+    selectedTone = props.selectedTone,
+    isVisible = props.isVisible;
+  var isMounted = (0, _react2.useRef)(false);
+  var selectedToneRadioRef = (0, _react2.useRef)(null);
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var emojiToneCollection = (0, _react2.useMemo)(function () {
+    var selectedToneIndex = -1;
+    var toneColletion = extractAllTones(emoji).map(function (tone, index) {
+      var isSelected = index === selectedTone;
+      if (isSelected) {
+        selectedToneIndex = index;
+      }
       return _objectSpread(_objectSpread({}, tone), {}, {
-        focused: tone.id !== previewEmojiId,
+        isSelected: isSelected,
         label: (0, _setSkinToneAriaLabelText.setSkinToneAriaLabelText)(tone.name),
-        toneId: index
+        toneIndex: index
       });
     });
-  }, [emoji, previewEmojiId]);
-  (0, _react.useEffect)(function () {
-    if (firstToneButtonRef.current) {
-      firstToneButtonRef.current.focus();
+
+    // push description of selected tone to the end of the array
+    // so that it gets rendered last/rightmost
+    toneColletion.push(toneColletion.splice(selectedToneIndex, 1)[0]);
+    return toneColletion;
+  }, [emoji, selectedTone]);
+  (0, _react2.useEffect)(function () {
+    if (isVisible) {
+      var _selectedToneRadioRef;
+      (_selectedToneRadioRef = selectedToneRadioRef.current) === null || _selectedToneRadioRef === void 0 ? void 0 : _selectedToneRadioRef.focus();
     }
-  }, [firstToneButtonRef]);
+  }, [isVisible, selectedToneRadioRef]);
   var fireAnalyticsEvent = function fireAnalyticsEvent(event) {
     if (createAnalyticsEvent) {
       (0, _analytics.createAndFireEventInElementsChannel)(event)(createAnalyticsEvent);
@@ -51,6 +69,10 @@ var ToneSelectorInternal = function ToneSelectorInternal(props) {
   };
   var onToneSelectedHandler = function onToneSelectedHandler(toneValue) {
     return function () {
+      if (selectedTone === toneValue && onToneClose) {
+        onToneClose();
+        return;
+      }
       onToneSelected(toneValue);
       var toneList = ['default', 'light', 'mediumLight', 'medium', 'mediumDark', 'dark'];
       fireAnalyticsEvent((0, _analytics.toneSelectedEvent)({
@@ -62,19 +84,25 @@ var ToneSelectorInternal = function ToneSelectorInternal(props) {
     fireAnalyticsEvent((0, _analytics.toneSelectorOpenedEvent)({}));
   }
   isMounted.current = true;
-  return /*#__PURE__*/_react.default.createElement("div", null, emojiToneCollection.map(function (tone) {
-    return /*#__PURE__*/_react.default.createElement(_EmojiButton.default, {
-      ref: tone.focused ? firstToneButtonRef : null,
-      shouldHideButton: tone.id === previewEmojiId,
+  return (0, _react.jsx)("div", {
+    role: "radiogroup",
+    "data-testid": toneSelectorTestId,
+    id: "emoji-picker-tone-selector",
+    "aria-label": formatMessage(_i18n.messages.emojiSelectSkinToneListAriaLabelText),
+    css: !isVisible && _styles.hidden
+  }, emojiToneCollection.map(function (tone) {
+    return (0, _react.jsx)(_EmojiRadioButton.default, {
+      ref: tone.isSelected ? selectedToneRadioRef : null,
+      defaultChecked: tone.isSelected,
       ariaLabelText: tone.label,
       key: "".concat(tone.id),
-      onSelected: onToneSelectedHandler(tone.toneId),
       emoji: tone,
+      onSelected: onToneSelectedHandler(tone.toneIndex),
       selectOnHover: true
     });
   }));
 };
 exports.ToneSelectorInternal = ToneSelectorInternal;
 var ToneSelector = (0, _analyticsNext.withAnalyticsEvents)()(ToneSelectorInternal);
-var _default = ToneSelector;
+var _default = /*#__PURE__*/(0, _react2.memo)(ToneSelector);
 exports.default = _default;