@atlaskit/emoji 67.2.0 → 67.3.0

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

@@ -19,7 +19,7 @@ var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
 var ImageUtil = _interopRequireWildcard(require("../../util/image"));
 var _logger = _interopRequireDefault(require("../../util/logger"));
 var _i18n = require("../i18n");
-var _EmojiErrorMessage = _interopRequireDefault(require("./EmojiErrorMessage"));
+var _EmojiErrorMessage = _interopRequireWildcard(require("./EmojiErrorMessage"));
 var _EmojiUploadPreview = _interopRequireDefault(require("./EmojiUploadPreview"));
 var _FileChooser = _interopRequireDefault(require("./FileChooser"));
 var _internalTypes = require("./internal-types");
@@ -34,6 +34,7 @@ var uploadEmojiComponentTestId = 'upload-emoji-component';
 exports.uploadEmojiComponentTestId = uploadEmojiComponentTestId;
 var cancelEmojiUploadPickerTestId = 'cancel-emoji-upload-picker';
 exports.cancelEmojiUploadPickerTestId = cancelEmojiUploadPickerTestId;
+var addCustomEmojiChooseFileScreenreaderId = 'fabric.emoji.choose.file.label.id';
 var disallowedReplacementsMap = new Map([[':', ''], ['!', ''], ['@', ''], ['#', ''], ['%', ''], ['^', ''], ['&', ''], ['*', ''], ['(', ''], [')', ''], [' ', '_']]);
 var sanitizeName = function sanitizeName(name) {
   // prevent / replace certain characters, allow others
@@ -65,18 +66,12 @@ var ChooseEmojiFile = /*#__PURE__*/(0, _react.memo)(function (props) {
       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();
-    }
+  (0, _react.useLayoutEffect)(function () {
+    requestAnimationFrame(function () {
+      var _inputRef$current;
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+    });
   }, []);
-
-  // 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);
@@ -86,11 +81,12 @@ var ChooseEmojiFile = /*#__PURE__*/(0, _react.memo)(function (props) {
     "data-testid": uploadEmojiComponentTestId
   }, (0, _react2.jsx)("div", {
     css: _styles.emojiUploadTop
-  }, (0, _react2.jsx)("span", {
-    css: _styles.uploadChooseFileMessage
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.addCustomEmojiLabel, function (message) {
-    return (0, _react2.jsx)("h5", null, message);
-  })), (0, _react2.jsx)("div", {
+  }, (0, _react2.jsx)("h2", {
+    css: [_styles.uploadChooseFileMessage, _styles.headingH5]
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.addCustomEmojiLabel), (0, _react2.jsx)("span", {
+    "aria-hidden": "true",
+    css: _styles.requiredSymbol
+  }, "*")), (0, _react2.jsx)("div", {
     css: _styles.closeEmojiUploadButton
   }, (0, _react2.jsx)(_standardButton.default, {
     onClick: onUploadCancelled,
@@ -117,19 +113,24 @@ var ChooseEmojiFile = /*#__PURE__*/(0, _react.memo)(function (props) {
     autoFocus: true,
     testId: uploadEmojiNameInputTestId,
     ref: inputRef,
-    id: "new-emoji-name-input"
+    id: "new-emoji-name-input",
+    "aria-required": true
   })), (0, _react2.jsx)("span", {
     css: _styles.uploadChooseFileBrowse
   }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.emojiChooseFileScreenReaderDescription, function (screenReaderDescription) {
     return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("span", {
       hidden: true,
       id: fileChooserButtonDescriptionId
-    }, screenReaderDescription), (0, _react2.jsx)(_FileChooser.default, {
+    }, screenReaderDescription), (0, _react2.jsx)("span", {
+      hidden: true,
+      id: addCustomEmojiChooseFileScreenreaderId
+    }, emojiChooseFileTitle), (0, _react2.jsx)(_FileChooser.default, {
       label: emojiChooseFileTitle,
       onChange: onChooseFile,
       onClick: onClick,
       accept: "image/png,image/jpeg,image/gif",
       ariaDescribedBy: fileChooserButtonDescriptionId,
+      ariaLabelledBy: "".concat(_EmojiErrorMessage.emojiErrorScreenreaderTestId, " ").concat(addCustomEmojiChooseFileScreenreaderId),
       isDisabled: disableChooser
     }));
   }))), (0, _react2.jsx)("div", {
@@ -140,7 +141,7 @@ var ChooseEmojiFile = /*#__PURE__*/(0, _react.memo)(function (props) {
   })));
 });
 var EmojiUploadPicker = function EmojiUploadPicker(props) {
-  var _document$activeEleme2;
+  var _document$activeEleme;
   var errorMessage = props.errorMessage,
     initialUploadName = props.initialUploadName,
     onUploadEmoji = props.onUploadEmoji,
@@ -168,7 +169,7 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
     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 : '');
+  var lastFocusedElementId = (0, _react.useRef)(typeof document !== 'undefined' ? (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.id : '');
   (0, _react.useEffect)(function () {
     if (errorMessage) {
       setUploadStatus(_internalTypes.UploadStatus.Error);
@@ -231,7 +232,7 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
   }, []);
   var errorOnUpload = (0, _react.useCallback)(function (event) {
     (0, _logger.default)('File load error: ', event);
-    setChooseEmojiErrorMessage(_i18n.messages.emojiUploadFailed);
+    setChooseEmojiErrorMessage((0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.emojiUploadFailed));
     cancelChooseFile();
   }, [cancelChooseFile]);
   var onFileLoad = (0, _react.useCallback)(function (file) {
@@ -252,7 +253,7 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
               case 7:
                 _context.prev = 7;
                 _context.t0 = _context["catch"](0);
-                setChooseEmojiErrorMessage(_i18n.messages.emojiInvalidImage);
+                setChooseEmojiErrorMessage((0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.emojiInvalidImage));
                 cancelChooseFile();
               case 11:
               case "end":
@@ -272,7 +273,7 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
       var reader = new FileReader();
       var file = files[0];
       if (ImageUtil.hasFileExceededSize(file)) {
-        setChooseEmojiErrorMessage(_i18n.messages.emojiImageTooBig);
+        setChooseEmojiErrorMessage((0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.emojiImageTooBig));
         cancelChooseFile();
         return;
       }
@@ -296,9 +297,9 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
       }
     }, 0, lastFocusedElementId.current);
   }, [clearUploadPicker, onUploadCancelled]);
-  var chooseErrorMessage = (0, _react.useMemo)(function () {
-    return chooseEmojiErrorMessage ? (0, _react2.jsx)(_reactIntlNext.FormattedMessage, chooseEmojiErrorMessage) : undefined;
-  }, [chooseEmojiErrorMessage]);
+  var onChooseFileClicked = function onChooseFileClicked() {
+    onFileChooserClicked && onFileChooserClicked();
+  };
   return (0, _react2.jsx)(_reactFocusLock.default, {
     noFocusGuards: true
   }, name && previewImage ? (0, _react2.jsx)(_EmojiUploadPreview.default, {
@@ -311,10 +312,10 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
   }) : (0, _react2.jsx)(ChooseEmojiFile, {
     name: name,
     onChooseFile: onChooseFile,
-    onClick: onFileChooserClicked,
+    onClick: onChooseFileClicked,
     onNameChange: onNameChange,
     onUploadCancelled: cancelUpload,
-    errorMessage: chooseErrorMessage,
+    errorMessage: chooseEmojiErrorMessage,
     intl: intl
   }));
 };

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

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -18,18 +19,21 @@ var _reactIntlNext = require("react-intl-next");
 var _constants = require("../../util/constants");
 var _i18n = require("../i18n");
 var _Emoji = _interopRequireDefault(require("./Emoji"));
-var _EmojiErrorMessage = _interopRequireDefault(require("./EmojiErrorMessage"));
+var _EmojiErrorMessage = _interopRequireWildcard(require("./EmojiErrorMessage"));
 var _internalTypes = require("./internal-types");
 var _RetryableButton = _interopRequireDefault(require("./RetryableButton"));
 var _styles = require("./styles");
 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; }
 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 addEmojiPreviewDescriptionId = 'fabric.emoji.preview.description.id';
+var addEmojiButtonLabelId = 'fabric.emoji.add.label.id';
 var EmojiUploadPreview = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(EmojiUploadPreview, _PureComponent);
   var _super = _createSuper(EmojiUploadPreview);
@@ -87,18 +91,21 @@ var EmojiUploadPreview = /*#__PURE__*/function (_PureComponent) {
         message: errorMessage,
         tooltip: true
       }) : null, !errorMessage && (0, _react2.jsx)(_visuallyHidden.default, {
-        id: addEmojiButtonDescriptionId
+        id: addEmojiPreviewDescriptionId
       }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.emojiPreview, {
         values: {
           emoji: name
         }
-      }))), (0, _react2.jsx)(_RetryableButton.default, {
+      }))), (0, _react2.jsx)(_visuallyHidden.default, {
+        id: addEmojiButtonLabelId
+      }, errorMessage ? formatMessage(_i18n.messages.retryLabel) : formatMessage(_i18n.messages.addEmojiLabel)), (0, _react2.jsx)(_RetryableButton.default, {
         label: formatMessage(_i18n.messages.addEmojiLabel),
         onSubmit: onAddEmoji,
         appearance: "primary",
         loading: uploading,
         error: !!errorMessage,
-        ariaDescribedby: addEmojiButtonDescriptionId
+        ariaDescribedBy: addEmojiPreviewDescriptionId,
+        ariaLabelledBy: "".concat(_EmojiErrorMessage.emojiErrorScreenreaderTestId, " ").concat(addEmojiButtonLabelId)
       }), (0, _react2.jsx)(_customThemeButton.default, {
         onClick: onUploadCancelled,
         appearance: "subtle",

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

@@ -17,12 +17,15 @@ exports.fileUploadInputTestId = fileUploadInputTestId;
 var FileChooser = function FileChooser(props) {
   var accept = props.accept,
     ariaDescribedBy = props.ariaDescribedBy,
+    ariaLabelledBy = props.ariaLabelledBy,
     isDisabled = props.isDisabled,
     label = props.label,
     onChange = props.onChange,
     onClick = props.onClick;
   var filePickerRef = (0, _react.useRef)(null);
+  var fileButtonRef = (0, _react.useRef)(null);
   var handleOnChooseFile = function handleOnChooseFile() {
+    var _fileButtonRef$curren;
     if (!filePickerRef.current) {
       return;
     }
@@ -30,12 +33,15 @@ var FileChooser = function FileChooser(props) {
       onClick();
     }
     filePickerRef.current.click();
+    (_fileButtonRef$curren = fileButtonRef.current) === null || _fileButtonRef$curren === void 0 ? void 0 : _fileButtonRef$curren.focus();
   };
   return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_standardButton.default, {
     onClick: handleOnChooseFile,
     isDisabled: isDisabled,
     "aria-describedby": ariaDescribedBy,
-    testId: chooseFileButtonTestId
+    "aria-labelledby": ariaLabelledBy,
+    testId: chooseFileButtonTestId,
+    ref: fileButtonRef
   }, label), /*#__PURE__*/_react.default.createElement("input", {
     className: "emojiUploadFileInput",
     ref: filePickerRef,

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

@@ -26,7 +26,8 @@ var ResourcedEmojiComponent = (0, _reactLoadable.default)({
   }
 });
 var ResourcedEmoji = function ResourcedEmoji(props) {
-  var emojiId = props.emojiId;
+  var emojiId = props.emojiId,
+    optimisticImageURL = props.optimisticImageURL;
   (0, _react.useEffect)(function () {
     if (!emojiId) {
       return;
@@ -36,7 +37,8 @@ var ResourcedEmoji = function ResourcedEmoji(props) {
     });
     _analytics.ufoExperiences['emoji-rendered'].getInstance(emojiId.id || emojiId.shortName).addMetadata({
       source: 'ResourcedEmoji',
-      emojiId: emojiId.id
+      emojiId: emojiId.id,
+      isOptimisticImageURL: !!optimisticImageURL
     });
     return function () {
       (0, _analytics.sampledUfoRenderedEmoji)(emojiId).abort({
@@ -46,7 +48,7 @@ var ResourcedEmoji = function ResourcedEmoji(props) {
         }
       });
     };
-  }, [emojiId]);
+  }, [emojiId, optimisticImageURL]);
   return /*#__PURE__*/_react.default.createElement(_UfoErrorBoundary.UfoErrorBoundary, {
     experiences: [_analytics.ufoExperiences['emoji-rendered'].getInstance(props.emojiId.id || props.emojiId.shortName)]
   }, /*#__PURE__*/_react.default.createElement(ResourcedEmojiComponent, props));

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

@@ -23,13 +23,17 @@ var LoadingSpinner = function LoadingSpinner() {
   }, (0, _react.jsx)(_spinner.default, null));
 };
 var RetryButton = function RetryButton(props) {
-  var onSubmit = props.onSubmit;
+  var onSubmit = props.onSubmit,
+    ariaLabelledBy = props.ariaLabelledBy,
+    ariaDescribedBy = props.ariaDescribedBy;
   return (0, _react.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.retryLabel, function (retryLabel) {
     return (0, _react.jsx)(_customThemeButton.default, {
       css: _styles.uploadRetryButton,
       appearance: "warning",
       onClick: onSubmit,
       testId: retryUploadButtonTestId,
+      "aria-describedby": ariaDescribedBy,
+      "aria-labelledby": ariaLabelledBy,
       autoFocus: true
     }, retryLabel);
   });
@@ -38,13 +42,15 @@ var UploadButton = function UploadButton(props) {
   var appearance = props.appearance,
     onSubmit = props.onSubmit,
     label = props.label,
-    ariaDescribedby = props.ariaDescribedby;
+    ariaLabelledBy = props.ariaLabelledBy,
+    ariaDescribedBy = props.ariaDescribedBy;
   return (0, _react.jsx)(_customThemeButton.default, {
     css: _styles.uploadEmojiButton,
     appearance: appearance,
     onClick: onSubmit,
     testId: uploadEmojiButtonTestId,
-    "aria-describedby": ariaDescribedby,
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": ariaLabelledBy,
     autoFocus: true
   }, label);
 };

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

@@ -0,0 +1,25 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolTipContentWithKeymap = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _keymaps = require("../../util/keymaps");
+var _styles = require("./styles");
+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 */
+
+var ToolTipContentWithKeymap = /*#__PURE__*/_react.default.memo(function (_ref) {
+  var description = _ref.description,
+    shortcutOverride = _ref.shortcutOverride,
+    keymap = _ref.keymap;
+  var shortcut = shortcutOverride || keymap && (0, _keymaps.formatShortcut)(keymap);
+  return shortcut || description ? (0, _react2.jsx)(_react.Fragment, null, description, shortcut && description && "\xA0", shortcut && (0, _react2.jsx)("span", {
+    css: _styles.tooltipShortcutStyle
+  }, shortcut)) : null;
+});
+exports.ToolTipContentWithKeymap = ToolTipContentWithKeymap;

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

@@ -4,13 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.uploadRetryButton = exports.uploadPreviewText = exports.uploadPreviewFooter = exports.uploadPreview = exports.uploadEmojiButton = exports.uploadChooseFileRow = exports.uploadChooseFileMessage = exports.uploadChooseFileEmojiName = exports.uploadChooseFileBrowse = exports.uploadAddRow = exports.submitDelete = exports.selectOnHoverStyles = exports.previewText = exports.previewImg = exports.previewButtonGroup = exports.preview = exports.placeholderContainerAnimated = exports.placeholderContainer = exports.placeholder = exports.hidden = exports.emojiUploadTop = exports.emojiUploadBottom = exports.emojiUpload = exports.emojiToneSelectorContainer = exports.emojiStyles = exports.emojiSprite = exports.emojiShortName = exports.emojiScrollable = exports.emojiRadio = exports.emojiPreviewErrorMessage = exports.emojiPickerAddEmoji = exports.emojiNodeStyles = exports.emojiName = exports.emojiMainStyle = exports.emojiImage = exports.emojiDeleteErrorMessage = exports.emojiDeleteButton = exports.emojiContainer = exports.emojiChooseFileErrorMessage = exports.emojiButton = exports.emojiActionsWrapper = exports.deleteText = exports.deletePreview = exports.deleteFooter = exports.deleteButton = exports.commonSelectedStyles = exports.closeEmojiUploadButton = exports.cancelButton = exports.buttonSpinner = exports.bigEmojiPreview = exports.addCustomEmojiButton = exports.addCustomEmoji = void 0;
+exports.uploadRetryButton = exports.uploadPreviewText = exports.uploadPreviewFooter = exports.uploadPreview = exports.uploadEmojiButton = exports.uploadChooseFileRow = exports.uploadChooseFileMessage = exports.uploadChooseFileEmojiName = exports.uploadChooseFileBrowse = exports.uploadAddRow = exports.tooltipShortcutStyle = exports.submitDelete = exports.selectOnHoverStyles = exports.requiredSymbol = exports.previewText = exports.previewImg = exports.previewButtonGroup = exports.preview = exports.placeholderContainerAnimated = exports.placeholderContainer = exports.placeholder = exports.hidden = exports.headingH5 = exports.emojiUploadTop = exports.emojiUploadBottom = exports.emojiUpload = exports.emojiToneSelectorContainer = exports.emojiSpriteContainer = exports.emojiSprite = exports.emojiShortName = exports.emojiScrollable = exports.emojiRadio = exports.emojiPreviewErrorMessage = exports.emojiPickerAddEmoji = exports.emojiNodeStyles = exports.emojiName = exports.emojiMainStyle = exports.emojiImageContainer = exports.emojiImage = exports.emojiDeleteErrorMessage = exports.emojiDeleteButton = exports.emojiChooseFileErrorMessage = exports.emojiButton = exports.emojiActionsWrapper = exports.deleteText = exports.deletePreview = exports.deleteFooter = exports.deleteButton = exports.deletableEmoji = exports.commonSelectedStyles = exports.closeEmojiUploadButton = exports.cancelButton = exports.buttonSpinner = exports.bigEmojiPreview = exports.addCustomEmojiButton = exports.addCustomEmoji = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _constants = require("../../util/constants");
 var _sharedStyles = require("../../util/shared-styles");
 var _colors = require("@atlaskit/theme/colors");
+var _constants2 = require("@atlaskit/theme/constants");
 var _css, _css2, _templateObject, _span, _css3, _css6, _input;
 var commonSelectedStyles = 'emoji-common-selected';
 exports.commonSelectedStyles = commonSelectedStyles;
@@ -26,18 +27,16 @@ var emojiDeleteButton = 'emoji-common-deleteButton';
 exports.emojiDeleteButton = emojiDeleteButton;
 var emojiMainStyle = 'emoji-common-main-styles';
 exports.emojiMainStyle = emojiMainStyle;
+var deletableEmoji = 'emoji-common-deletable';
+exports.deletableEmoji = deletableEmoji;
 var deleteButton = (0, _react.css)({
   // hide by default
   visibility: 'hidden',
   display: 'flex',
-  height: '0px',
-  // 40px emoji width with 2px left offset
-  width: '38px',
-  alignItems: 'flex-end',
-  justifyContent: 'flex-end',
-  // vertically align button and prevent emoji offset
-  paddingTop: '4px',
-  marginBottom: '-4px'
+  position: 'absolute',
+  top: '-8px',
+  right: '-8px',
+  zIndex: 1
 });
 exports.deleteButton = deleteButton;
 var emojiToneSelectorContainer = (0, _react.css)({
@@ -47,7 +46,7 @@ var emojiToneSelectorContainer = (0, _react.css)({
   padding: '10px 10px 11px 0'
 });
 exports.emojiToneSelectorContainer = emojiToneSelectorContainer;
-var emojiStyles = (0, _react.css)((_css = {
+var emojiImageContainer = (0, _react.css)((_css = {
   borderRadius: "var(--ds-radius-100, 3px)",
   backgroundColor: 'transparent',
   display: 'inline-block',
@@ -55,21 +54,26 @@ var emojiStyles = (0, _react.css)((_css = {
   // Ensure along with vertical align middle, we don't increase the line height for p and some
   // headings. Smaller headings get a slight increase in height, cannot add more negative margin
   // as a "selected" emoji (e.g. in the editor) will not look good.
-  margin: '-1px 0'
+  margin: '-1px 0',
+  img: {
+    display: 'block'
+  }
 }, (0, _defineProperty2.default)(_css, "&.".concat(commonSelectedStyles, ",&.").concat(selectOnHoverStyles, ":hover"), {
   backgroundColor: _sharedStyles.akEmojiSelectedBackgroundColor
 }), (0, _defineProperty2.default)(_css, "&.".concat(commonSelectedStyles, ",&.").concat(selectOnHoverStyles, ":hover .").concat(emojiDeleteButton), {
   // show delete button on hover
   visibility: 'visible'
-}), (0, _defineProperty2.default)(_css, "img", {
-  display: 'block'
+}), (0, _defineProperty2.default)(_css, "&.".concat(deletableEmoji), {
+  position: 'relative'
+}), (0, _defineProperty2.default)(_css, "&.".concat(deletableEmoji, ":focus-within .").concat(emojiDeleteButton), {
+  visibility: 'visible'
 }), (0, _defineProperty2.default)(_css, '&:focus', {
   boxShadow: "0 0 0 2px ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")")),
   transitionDuration: '0s, 0.2s',
   outline: 'none'
 }), _css));
-exports.emojiStyles = emojiStyles;
-var emojiContainer = (0, _react.css)((_css2 = {
+exports.emojiImageContainer = emojiImageContainer;
+var emojiSpriteContainer = (0, _react.css)((_css2 = {
   display: 'inline-block',
   // Ensure along with vertical align middle, we don't increase the line height for h1..h6, and p
   margin: '-1px 0'
@@ -86,7 +90,7 @@ var emojiContainer = (0, _react.css)((_css2 = {
   transitionDuration: '0s, 0.2s',
   outline: 'none'
 }), _css2));
-exports.emojiContainer = emojiContainer;
+exports.emojiSpriteContainer = emojiSpriteContainer;
 var placeholder = 'emoji-common-placeholder';
 exports.placeholder = placeholder;
 var placeholderContainer = (0, _react.css)({
@@ -214,12 +218,12 @@ var previewImg = (0, _react.css)((_css6 = {
   display: 'inline-block',
   flex: 'initial',
   width: '32px'
-}, (0, _defineProperty2.default)(_css6, "& .".concat(emojiSprite, ", > span"), {
+}, (0, _defineProperty2.default)(_css6, "& .".concat(emojiSprite, ", span[role=\"img\"]"), {
   width: '32px',
   height: '32px',
   padding: 0,
   maxHeight: 'inherit'
-}), (0, _defineProperty2.default)(_css6, "& > span > img", {
+}), (0, _defineProperty2.default)(_css6, "& span[role=\"img\"] > img", {
   position: 'relative',
   left: '50%',
   top: '50%',
@@ -366,6 +370,19 @@ var deleteText = (0, _react.css)({
   }
 });
 exports.deleteText = deleteText;
+var headingH5 = (0, _react.css)({
+  fontSize: "var(--ds-font-size-075, 12px)",
+  fontWeight: "var(--ds-font-weight-semibold, 600)",
+  letterSpacing: '-0.003em',
+  lineHeight: "var(--ds-font-lineHeight-100, 16px)"
+});
+exports.headingH5 = headingH5;
+var requiredSymbol = (0, _react.css)({
+  paddingLeft: "".concat((0, _constants2.gridSize)() / 4, "px"),
+  color: "var(--ds-text-danger, ".concat(_colors.R400, ")"),
+  fontFamily: (0, _constants2.fontFamily)()
+});
+exports.requiredSymbol = requiredSymbol;
 var previewButtonGroup = (0, _react.css)({
   display: 'flex'
 });
@@ -446,4 +463,13 @@ var emojiActionsWrapper = (0, _react.css)({
   justifyContent: 'flex-end',
   alignItems: 'center'
 });
-exports.emojiActionsWrapper = emojiActionsWrapper;
+exports.emojiActionsWrapper = emojiActionsWrapper;
+var tooltipShortcutStyle = (0, _react.css)({
+  borderRadius: '3px',
+  backgroundColor: "var(--ds-background-inverse-subtle, ".concat(_colors.N400, ")"),
+  padding: '0 2px',
+  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
+  /* stylelint-disable-next-line */
+  label: 'tooltip-shortcut'
+});
+exports.tooltipShortcutStyle = tooltipShortcutStyle;

package/dist/cjs/components/i18n.js

@@ -6,6 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.messages = void 0;
 var _reactIntlNext = require("react-intl-next");
 var messages = (0, _reactIntlNext.defineMessages)({
+  deleteEmojiTooltip: {
+    id: 'fabric.emoji.delete.tooltip',
+    defaultMessage: 'Delete',
+    description: 'Tooltip content for delete emoji when focus on deletable emoji'
+  },
+  deleteEmojiTooltipForScreenreader: {
+    id: 'fabric.emoji.delete.screenreader.tooltip',
+    defaultMessage: 'To delete {shortName} emoji, press Backspace',
+    description: 'Tooltip content for delete emoji when focus on deletable emoji'
+  },
   deleteEmojiTitle: {
     id: 'fabric.emoji.delete.title',
     defaultMessage: 'Remove emoji',
@@ -108,7 +118,7 @@ var messages = (0, _reactIntlNext.defineMessages)({
   },
   categoriesSelectorLabel: {
     id: 'fabric.emoji.categories.label',
-    defaultMessage: 'Choose a emoji category',
+    defaultMessage: 'Choose an emoji category',
     description: 'Aria label for Emoji categories selector at the top of emoji picker'
   },
   categoriesSearchResults: {
@@ -208,13 +218,18 @@ var messages = (0, _reactIntlNext.defineMessages)({
   },
   emojiPickerGrid: {
     id: 'fabric.emoji.pickerlist.grid',
-    defaultMessage: '{showSearchResults, select, true{Search results} other{Emojis}}',
+    defaultMessage: '{showSearchResults, select, true{Search results} other{Emojis}}.',
     description: "Aria label for emoji picker grid, showSearchResults is a boolean variable, message will be \"Entering Emojis table\", or \"Leaving Emojis\""
   },
   emojiButtonRoleDescription: {
     id: 'fabric.emoji.emojipicker.emoi.roledescription',
     defaultMessage: 'emoji button',
     description: "Aria roledescription for emoji button, used in emoji picker."
+  },
+  error: {
+    id: 'fabric.emoji.emojipicker.error',
+    defaultMessage: 'Error!',
+    description: "Aria label for error icon, apperaed in emoji uploader screens and delete emoji screens of emoji picker"
   }
 });
 exports.messages = messages;

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

@@ -76,6 +76,7 @@ var CategorySelector = function CategorySelector(props) {
       return;
     }
     e.preventDefault();
+    e.stopPropagation();
     var lastCategoryIndex = categories.length - 1;
     switch (e.key) {
       // navigate to the right category
@@ -137,7 +138,7 @@ var CategorySelector = function CategorySelector(props) {
         "data-focus-index": index,
         "aria-label": categoryName,
         "aria-controls": currentFocus === index ? _EmojiPickerList.RENDER_EMOJI_PICKER_LIST_TESTID : undefined,
-        "aria-selected": currentFocus === index ? true : false,
+        "aria-selected": categoryId === activeCategoryId,
         css: categoryClasses,
         disabled: disableCategories,
         onClick: handleClick(categoryId, index),

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

@@ -37,6 +37,11 @@ var CategoryTracker = /*#__PURE__*/function () {
     value: function getRow(category) {
       return this.categoryToRow.get(category);
     }
+  }, {
+    key: "getFirstCategory",
+    value: function getFirstCategory() {
+      return this.rowToCategory.get(0);
+    }
   }]);
   return CategoryTracker;
 }();

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

@@ -163,8 +163,6 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     if (emojiToRender && !(0, _typeHelpers.containsEmojiId)(emojiToRender, selectedEmoji)) {
       (0, _reactDom.unstable_batchedUpdates)(function () {
         setSelectedEmoji(undefined);
-        // Only enable categories for full emoji list (non-search)
-        setActiveCategory(null);
       });
     }
     (0, _reactDom.unstable_batchedUpdates)(function () {
@@ -333,12 +331,12 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     });
     fireAnalytics((0, _analytics.uploadBeginButton)());
   }, [emojiProvider, fireAnalytics]);
-  var scrollToUploadedEmoji = (0, _react.useCallback)(function () {
+  var scrollToUploadedEmoji = (0, _react.useCallback)(function (emojiDescription) {
     if (emojiPickerList.current) {
       // Wait a tick to ensure repaint and updated height for picker list
       window.setTimeout(function () {
         var _emojiPickerList$curr2;
-        (_emojiPickerList$curr2 = emojiPickerList.current) === null || _emojiPickerList$curr2 === void 0 ? void 0 : _emojiPickerList$curr2.scrollToRecentlyUploaded();
+        (_emojiPickerList$curr2 = emojiPickerList.current) === null || _emojiPickerList$curr2 === void 0 ? void 0 : _emojiPickerList$curr2.scrollToRecentlyUploaded(emojiDescription);
       }, 0);
     }
   }, [emojiPickerList]);
@@ -355,7 +353,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
         setSelectedEmoji(emojiDescription);
         setUploading(false);
       });
-      scrollToUploadedEmoji();
+      scrollToUploadedEmoji(emojiDescription);
     };
     (0, _UploadEmoji.uploadEmoji)(upload, emojiProvider, errorSetter, onSuccess, fireAnalytics, retry);
   }, [emojiProvider, fireAnalytics, scrollToUploadedEmoji]);
@@ -407,6 +405,11 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     fireAnalytics((0, _analytics.openedPickerEvent)());
     isMounting.current = false;
   }
+
+  // stop all key propagation to other event listeners
+  var suppressKeyPress = function suppressKeyPress(e) {
+    e.stopPropagation();
+  };
   (0, _react.useEffect)(function () {
     // componentDidMount logic
     if (!isMounted) {
@@ -461,7 +464,10 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     "data-emoji-picker-container": true,
     role: "dialog",
     "aria-label": formatMessage(_i18n.messages.emojiPickerTitle),
-    "aria-modal": true
+    "aria-modal": true,
+    onKeyPress: suppressKeyPress,
+    onKeyUp: suppressKeyPress,
+    onKeyDown: suppressKeyPress
   }, (0, _react2.jsx)(_CategorySelector.default, {
     activeCategoryId: activeCategory,
     dynamicCategories: dynamicCategories,