@atlaskit/emoji 67.1.0 → 67.2.1

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

@@ -26,7 +26,8 @@ var _EmojiPickerList = _interopRequireDefault(require("./EmojiPickerList"));
 var _analytics = require("../../util/analytics");
 var _styles = require("./styles");
 var _useEmoji2 = require("../../hooks/useEmoji");
-var _hooks = require("../hooks");
+var _useIsMounted = require("../../hooks/useIsMounted");
+var _i18n = require("../i18n");
 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 FREQUENTLY_USED_MAX = 16;
@@ -37,6 +38,8 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     createAnalyticsEvent = _ref.createAnalyticsEvent,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? _constants.defaultEmojiPickerSize : _ref$size;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
   var _useEmoji = (0, _useEmoji2.useEmoji)(),
     emojiProvider = _useEmoji.emojiProvider,
     isUploadSupported = _useEmoji.isUploadSupported;
@@ -105,7 +108,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
   var currentUser = (0, _react.useMemo)(function () {
     return emojiProvider.getCurrentUser();
   }, [emojiProvider]);
-  var isMounted = (0, _hooks.useIsMounted)();
+  var isMounted = (0, _useIsMounted.useIsMounted)();
   var fireAnalytics = (0, _react.useCallback)(function (analyticsEvent) {
     if (createAnalyticsEvent) {
       (0, _analytics.createAndFireEventInElementsChannel)(analyticsEvent)(createAnalyticsEvent);
@@ -330,12 +333,12 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     });
     fireAnalytics((0, _analytics.uploadBeginButton)());
   }, [emojiProvider, fireAnalytics]);
-  var scrollToEndOfList = (0, _react.useCallback)(function () {
+  var scrollToUploadedEmoji = (0, _react.useCallback)(function () {
     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.scrollToBottom();
+        (_emojiPickerList$curr2 = emojiPickerList.current) === null || _emojiPickerList$curr2 === void 0 ? void 0 : _emojiPickerList$curr2.scrollToRecentlyUploaded();
       }, 0);
     }
   }, [emojiPickerList]);
@@ -352,10 +355,10 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
         setSelectedEmoji(emojiDescription);
         setUploading(false);
       });
-      scrollToEndOfList();
+      scrollToUploadedEmoji();
     };
     (0, _UploadEmoji.uploadEmoji)(upload, emojiProvider, errorSetter, onSuccess, fireAnalytics, retry);
-  }, [emojiProvider, fireAnalytics, scrollToEndOfList]);
+  }, [emojiProvider, fireAnalytics, scrollToUploadedEmoji]);
   var onTriggerDelete = (0, _react.useCallback)(function (_emojiId, emoji) {
     if (_emojiId) {
       fireAnalytics((0, _analytics.deleteBeginEvent)({
@@ -455,7 +458,10 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
   return (0, _react2.jsx)("div", {
     css: (0, _styles.emojiPicker)(showPreview, size),
     ref: onPickerRef,
-    "data-emoji-picker-container": true
+    "data-emoji-picker-container": true,
+    role: "dialog",
+    "aria-label": formatMessage(_i18n.messages.emojiPickerTitle),
+    "aria-modal": true
   }, (0, _react2.jsx)(_CategorySelector.default, {
     activeCategoryId: activeCategory,
     dynamicCategories: dynamicCategories,

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

@@ -7,34 +7,62 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
 var _CachingEmoji = _interopRequireDefault(require("../common/CachingEmoji"));
 var _styles = require("./styles");
+var _useEmojiPickerListContext = require("../../hooks/useEmojiPickerListContext");
+var _i18n = require("../i18n");
 /** @jsx jsx */
 
 var EmojiPickerEmojiRow = function EmojiPickerEmojiRow(_ref) {
   var emojis = _ref.emojis,
     onSelected = _ref.onSelected,
     onMouseMove = _ref.onMouseMove,
+    onFocus = _ref.onFocus,
     title = _ref.title,
     showDelete = _ref.showDelete,
-    onDelete = _ref.onDelete;
+    onDelete = _ref.onDelete,
+    virtualItemContext = _ref.virtualItemContext;
+  var _useEmojiPickerListCo = (0, _useEmojiPickerListContext.useEmojiPickerListContext)(),
+    currentEmojisFocus = _useEmojiPickerListCo.currentEmojisFocus,
+    setEmojisFocus = _useEmojiPickerListCo.setEmojisFocus;
+  var rowIndex = (virtualItemContext === null || virtualItemContext === void 0 ? void 0 : virtualItemContext.index) || 0;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var handleFocus = function handleFocus(index) {
+    return function (emojiId, emoji, event) {
+      setEmojisFocus({
+        rowIndex: rowIndex,
+        columnIndex: index
+      });
+      onFocus && onFocus(emojiId, emoji, event);
+    };
+  };
   return (0, _react2.jsx)("div", {
-    css: _styles.emojiPickerRow
-  }, emojis.map(function (emoji) {
+    css: _styles.emojiPickerRow,
+    role: "presentation"
+  }, emojis.map(function (emoji, index) {
     var shortName = emoji.shortName,
       id = emoji.id;
     var key = id ? "".concat(id, "-").concat(title) : "".concat(shortName, "-").concat(title);
+    var focus = currentEmojisFocus.rowIndex === rowIndex && currentEmojisFocus.columnIndex === index;
     return (0, _react2.jsx)("span", {
       css: _styles.emojiItem,
-      key: key
+      key: key,
+      role: "gridcell",
+      "aria-colindex": index + 1 // aria-colindex is 1 based
     }, (0, _react2.jsx)(_CachingEmoji.default, {
       emoji: emoji,
       selectOnHover: true,
       onSelected: onSelected,
       onMouseMove: onMouseMove,
+      onFocus: handleFocus(index),
       showDelete: showDelete,
       onDelete: onDelete,
       placeholderSize: 24,
+      "data-focus-index": "".concat(rowIndex, "-").concat(index),
+      tabIndex: focus ? 0 : -1,
+      "aria-roledescription": formatMessage(_i18n.messages.emojiButtonRoleDescription),
       shouldBeInteractive: true
     }));
   }));

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

@@ -6,15 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.RENDER_EMOJI_PICKER_LIST_TESTID = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _constants = require("../../util/constants");
 var _categories = require("./categories");
 var _CategoryTracker = _interopRequireDefault(require("./CategoryTracker"));
@@ -24,6 +25,9 @@ var _EmojiActions = _interopRequireDefault(require("../common/EmojiActions"));
 var _styles = require("./styles");
 var _utils = require("./utils");
 var _VirtualList = require("./VirtualList");
+var _reactIntlNext = require("react-intl-next");
+var _i18n = require("../i18n");
+var _EmojiPickerListContext = require("../../context/EmojiPickerListContext");
 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; } }
 /**
@@ -35,17 +39,53 @@ var categoryClassname = 'emoji-category';
 var byOrder = function byOrder(orderableA, orderableB) {
   return (orderableA.order || 0) - (orderableB.order || 0);
 };
-var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(EmojiPickerVirtualList, _PureComponent);
-  var _super = _createSuper(EmojiPickerVirtualList);
-  function EmojiPickerVirtualList(_props) {
+
+/**
+ * TODO: have to use class component here as unit test is relying on ref.root. Will refactor this whole file to functional component in future
+ * ticket: COLLAB-2317
+ */
+var EmojiPickerTabPanelInternal = /*#__PURE__*/function (_PureComponent) {
+  (0, _inherits2.default)(EmojiPickerTabPanelInternal, _PureComponent);
+  var _super = _createSuper(EmojiPickerTabPanelInternal);
+  function EmojiPickerTabPanelInternal() {
+    (0, _classCallCheck2.default)(this, EmojiPickerTabPanelInternal);
+    return _super.apply(this, arguments);
+  }
+  (0, _createClass2.default)(EmojiPickerTabPanelInternal, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        formatMessage = _this$props.intl.formatMessage,
+        children = _this$props.children,
+        showSearchResults = _this$props.showSearchResults;
+      return (0, _react2.jsx)("div", {
+        ref: "root",
+        css: _styles.emojiPickerList,
+        "data-testid": RENDER_EMOJI_PICKER_LIST_TESTID,
+        id: RENDER_EMOJI_PICKER_LIST_TESTID,
+        role: "tabpanel",
+        "aria-label": formatMessage(_i18n.messages.emojiPickerListPanel)
+      }, (0, _react2.jsx)(_visuallyHidden.default, {
+        id: "emoji-picker-table-description"
+      }, formatMessage(_i18n.messages.emojiPickerGrid, {
+        showSearchResults: showSearchResults
+      })), children);
+    }
+  }]);
+  return EmojiPickerTabPanelInternal;
+}(_react.PureComponent);
+var EmojiPickerTabPanel = (0, _reactIntlNext.injectIntl)(EmojiPickerTabPanelInternal);
+var EmojiPickerVirtualListInternal = /*#__PURE__*/function (_PureComponent2) {
+  (0, _inherits2.default)(EmojiPickerVirtualListInternal, _PureComponent2);
+  var _super2 = _createSuper(EmojiPickerVirtualListInternal);
+  function EmojiPickerVirtualListInternal(_props) {
     var _this;
-    (0, _classCallCheck2.default)(this, EmojiPickerVirtualList);
-    _this = _super.call(this, _props);
+    (0, _classCallCheck2.default)(this, EmojiPickerVirtualListInternal);
+    _this = _super2.call(this, _props);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "virtualItems", []);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "categoryTracker", new _CategoryTracker.default());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "listRef", /*#__PURE__*/(0, _react.createRef)());
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onEmojiMouseEnter", function (emojiId, emoji) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onEmojiActive", function (emojiId, emoji) {
       if (_this.props.onEmojiActive) {
         _this.props.onEmojiActive(emojiId, emoji);
       }
@@ -56,9 +96,9 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "buildVirtualItemFromGroup", function (group) {
-      var _this$props = _this.props,
-        onEmojiSelected = _this$props.onEmojiSelected,
-        onEmojiDelete = _this$props.onEmojiDelete;
+      var _this$props2 = _this.props,
+        onEmojiSelected = _this$props2.onEmojiSelected,
+        onEmojiDelete = _this$props2.onEmojiDelete;
       var items = [];
       items.push(new _EmojiPickerVirtualItems.CategoryHeadingItem({
         id: group.category,
@@ -70,12 +110,14 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
         var rowEmojis = remainingEmojis.slice(0, _EmojiPickerSizes.sizes.emojiPerRow);
         remainingEmojis = remainingEmojis.slice(_EmojiPickerSizes.sizes.emojiPerRow);
         items.push(new _EmojiPickerVirtualItems.EmojisRowItem({
+          category: group.category,
           emojis: rowEmojis,
           title: group.title,
           showDelete: group.title === _constants.userCustomTitle,
           onSelected: onEmojiSelected,
           onDelete: onEmojiDelete,
-          onMouseMove: _this.onEmojiMouseEnter
+          onMouseMove: _this.onEmojiActive,
+          onFocus: _this.onEmojiActive
         }));
       }
       return items;
@@ -93,7 +135,7 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
           var search = _categories.CategoryDescriptionMap.SEARCH;
           // Only a single "result" category
           items = [].concat((0, _toConsumableArray2.default)(items), (0, _toConsumableArray2.default)(_this.buildVirtualItemFromGroup({
-            category: 'SEARCH',
+            category: _constants.searchCategory,
             title: search.name,
             emojis: emojis,
             order: search.order
@@ -107,6 +149,12 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
             // by not passing it to irrelevant groups
             _this.categoryTracker.add(group.emojis[0].category, items.length);
             items = [].concat((0, _toConsumableArray2.default)(items), (0, _toConsumableArray2.default)(_this.buildVirtualItemFromGroup(group)));
+            if (group.category === _constants.yourUploadsCategory) {
+              _this.lastYourUploadsRow = items.length - 1;
+            }
+          });
+          _this.onRowsRendered({
+            startIndex: 0
           });
         }
       }
@@ -130,7 +178,7 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
         _this.addToCategoryMap(categoryToGroupMap, emoji, emoji.category);
         // separate user emojis
         if (emoji.category === _constants.customCategory && currentUser && emoji.creatorUserId === currentUser.id) {
-          _this.addToCategoryMap(categoryToGroupMap, emoji, 'USER_CUSTOM');
+          _this.addToCategoryMap(categoryToGroupMap, emoji, _constants.yourUploadsCategory);
         }
         return categoryToGroupMap;
       };
@@ -140,19 +188,45 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
       _this.allEmojiGroups = Object.keys(categoryToGroupMap).map(function (key) {
         return categoryToGroupMap[key];
       }).map(function (group) {
-        if (group.category !== 'FREQUENT') {
+        if (group.category !== _constants.frequentCategory) {
           group.emojis.sort(byOrder);
         }
         return group;
       }).sort(byOrder);
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "checkCategoryIdChange", function (indexes) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "findCategoryToActivate", function (row) {
+      var category = null;
+      if (row instanceof _EmojiPickerVirtualItems.CategoryHeadingItem) {
+        category = row.props.id;
+      } else if (row instanceof _EmojiPickerVirtualItems.EmojisRowItem) {
+        category = row.props.category;
+      }
+      // your uploads is rendered, take it as upload category, so could be highlighted in category selector
+      if (category === _constants.yourUploadsCategory) {
+        return _constants.customCategory;
+        // search results is rendered, return null so won't be highlighted for category selector
+      } else if (category === _constants.searchCategory) {
+        return null;
+      }
+      return category;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onRowsRendered", function (indexes) {
       var startIndex = indexes.startIndex;
+      var rowItem = _this.virtualItems[startIndex];
+      var list = _this.listRef.current;
+
+      // update tabIndex manually, startIndex is not 0 based here
+      if (rowItem instanceof _EmojiPickerVirtualItems.CategoryHeadingItem) {
+        // if top of row rendered is category heading, update tabIndex for the next emoji row
+        list === null || list === void 0 ? void 0 : list.updateFocusIndex(startIndex + 1);
+      } else if (rowItem instanceof _EmojiPickerVirtualItems.EmojisRowItem) {
+        // if top of row rendered is emoji row, update it's tabIndex.
+        list === null || list === void 0 ? void 0 : list.updateFocusIndex(startIndex);
+      }
       if (!_this.props.query) {
         // Calculate category in view - only relevant if categories shown, i.e. no query
-        var list = _this.listRef.current;
-        var currentCategory = _this.categoryTracker.findNearestCategoryAbove(startIndex, list);
-        if (currentCategory && _this.props.activeCategoryId !== currentCategory) {
+        var currentCategory = _this.findCategoryToActivate(rowItem);
+        if (currentCategory !== null && _this.props.activeCategoryId !== currentCategory) {
           if (_this.props.onCategoryActivated) {
             _this.props.onCategoryActivated(currentCategory);
           }
@@ -166,11 +240,12 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderRow", function (context) {
       return (0, _EmojiPickerVirtualItems.virtualItemRenderer)(_this.virtualItems, context);
     });
+    _this.lastYourUploadsRow = 0;
     _this.buildEmojiGroupedByCategory(_props.emojis, _props.currentUser);
     _this.buildVirtualItems(_props, _this.state);
     return _this;
   }
-  (0, _createClass2.default)(EmojiPickerVirtualList, [{
+  (0, _createClass2.default)(EmojiPickerVirtualListInternal, [{
     key: "UNSAFE_componentWillUpdate",
     value: function UNSAFE_componentWillUpdate(nextProps, nextState) {
       if (this.props.emojis !== nextProps.emojis || this.props.selectedTone !== nextProps.selectedTone || this.props.loading !== nextProps.loading || this.props.query !== nextProps.query) {
@@ -207,33 +282,41 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
       var _this$listRef$current;
       (_this$listRef$current = this.listRef.current) === null || _this$listRef$current === void 0 ? void 0 : _this$listRef$current.scrollToRow(index);
     }
+  }, {
+    key: "scrollToRecentlyUploaded",
+    value: function scrollToRecentlyUploaded() {
+      var row = this.lastYourUploadsRow;
+      if (row > 0) {
+        var _this$listRef$current2;
+        (_this$listRef$current2 = this.listRef.current) === null || _this$listRef$current2 === void 0 ? void 0 : _this$listRef$current2.scrollToRowAndFocusLastEmoji(this.lastYourUploadsRow);
+      }
+    }
   }, {
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-        query = _this$props2.query,
-        selectedTone = _this$props2.selectedTone,
-        onToneSelected = _this$props2.onToneSelected,
-        onToneSelectorCancelled = _this$props2.onToneSelectorCancelled,
-        toneEmoji = _this$props2.toneEmoji,
-        uploading = _this$props2.uploading,
-        uploadEnabled = _this$props2.uploadEnabled,
-        emojiToDelete = _this$props2.emojiToDelete,
-        initialUploadName = _this$props2.initialUploadName,
-        uploadErrorMessage = _this$props2.uploadErrorMessage,
-        onUploadCancelled = _this$props2.onUploadCancelled,
-        onUploadEmoji = _this$props2.onUploadEmoji,
-        onCloseDelete = _this$props2.onCloseDelete,
-        onDeleteEmoji = _this$props2.onDeleteEmoji,
-        onFileChooserClicked = _this$props2.onFileChooserClicked,
-        onOpenUpload = _this$props2.onOpenUpload,
-        _this$props2$size = _this$props2.size,
-        size = _this$props2$size === void 0 ? _constants.defaultEmojiPickerSize : _this$props2$size;
+      var _this$props3 = this.props,
+        query = _this$props3.query,
+        selectedTone = _this$props3.selectedTone,
+        onToneSelected = _this$props3.onToneSelected,
+        onToneSelectorCancelled = _this$props3.onToneSelectorCancelled,
+        toneEmoji = _this$props3.toneEmoji,
+        uploading = _this$props3.uploading,
+        uploadEnabled = _this$props3.uploadEnabled,
+        emojiToDelete = _this$props3.emojiToDelete,
+        initialUploadName = _this$props3.initialUploadName,
+        uploadErrorMessage = _this$props3.uploadErrorMessage,
+        onUploadCancelled = _this$props3.onUploadCancelled,
+        onUploadEmoji = _this$props3.onUploadEmoji,
+        onCloseDelete = _this$props3.onCloseDelete,
+        onDeleteEmoji = _this$props3.onDeleteEmoji,
+        onFileChooserClicked = _this$props3.onFileChooserClicked,
+        onOpenUpload = _this$props3.onOpenUpload,
+        _this$props3$size = _this$props3.size,
+        size = _this$props3$size === void 0 ? _constants.defaultEmojiPickerSize : _this$props3$size,
+        emojis = _this$props3.emojis;
       var virtualListHeight = _EmojiPickerSizes.sizes.listHeight + (0, _utils.emojiPickerHeightOffset)(size);
-      return (0, _react2.jsx)("div", {
-        ref: "root",
-        css: _styles.emojiPickerList,
-        "data-testid": RENDER_EMOJI_PICKER_LIST_TESTID
+      return (0, _react2.jsx)(EmojiPickerTabPanel, {
+        showSearchResults: !!query
       }, (0, _react2.jsx)(_EmojiActions.default, {
         selectedTone: selectedTone,
         onToneSelected: onToneSelected,
@@ -251,8 +334,14 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
         onFileChooserClicked: onFileChooserClicked,
         onOpenUpload: onOpenUpload,
         query: query,
-        onChange: this.onSearch
-      }), (0, _react2.jsx)(_VirtualList.VirtualList, {
+        onChange: this.onSearch,
+        resultsCount: emojis.length
+      }), (0, _react2.jsx)(_EmojiPickerListContext.EmojiPickerListContextProvider, {
+        initialEmojisFocus: {
+          rowIndex: 1,
+          columnIndex: 0
+        }
+      }, (0, _react2.jsx)(_VirtualList.VirtualList, {
         ref: this.listRef,
         height: virtualListHeight,
         overscanRowCount: 10,
@@ -261,14 +350,14 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
         rowRenderer: this.renderRow,
         scrollToAlignment: "start",
         width: _EmojiPickerSizes.sizes.listWidth,
-        onRowsRendered: this.checkCategoryIdChange
-      }));
+        onRowsRendered: this.onRowsRendered
+      })));
     }
   }]);
-  return EmojiPickerVirtualList;
+  return EmojiPickerVirtualListInternal;
 }(_react.PureComponent);
-exports.default = EmojiPickerVirtualList;
-(0, _defineProperty2.default)(EmojiPickerVirtualList, "defaultProps", {
+exports.default = EmojiPickerVirtualListInternal;
+(0, _defineProperty2.default)(EmojiPickerVirtualListInternal, "defaultProps", {
   onEmojiSelected: function onEmojiSelected() {},
   onEmojiActive: function onEmojiActive() {},
   onEmojiDelete: function onEmojiDelete() {},

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

@@ -11,6 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/search"));
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _reactIntlNext = require("react-intl-next");
 var _i18n = require("../i18n");
 var _styles = require("./styles");
@@ -25,14 +26,20 @@ exports.emojiPickerSearchTestId = emojiPickerSearchTestId;
 var EmojiPickerListSearch = function EmojiPickerListSearch(props) {
   var style = props.style,
     query = props.query,
+    resultsCount = props.resultsCount,
     onChange = props.onChange;
   var textRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    dirty = _useState2[0],
+    setDirty = _useState2[1];
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
 
   // Debounce callback
   var _useDebouncedCallback = (0, _useDebounce.useDebouncedCallback)(function (value) {
       onChange(value);
+      setDirty(true);
     },
     // delay in ms
     _constants.EMOJI_SEARCH_DEBOUNCE),
@@ -52,7 +59,13 @@ var EmojiPickerListSearch = function EmojiPickerListSearch(props) {
   return (0, _react2.jsx)("div", {
     css: _styles.pickerSearch,
     style: style
-  }, (0, _react2.jsx)(_textfield.default, {
+  }, (0, _react2.jsx)(_visuallyHidden.default, {
+    id: "emoji-search-results-status",
+    role: "status"
+  }, dirty && query === '' && formatMessage(_i18n.messages.searchResultsStatusSeeAll), query !== '' && formatMessage(_i18n.messages.searchResultsStatus, {
+    count: resultsCount
+  })), (0, _react2.jsx)(_textfield.default, {
+    role: "searchbox",
     "aria-label": formatMessage(_i18n.messages.searchLabel),
     css: _styles.input,
     autoComplete: "off",
@@ -60,14 +73,14 @@ var EmojiPickerListSearch = function EmojiPickerListSearch(props) {
     placeholder: "".concat(formatMessage(_i18n.messages.searchPlaceholder), "..."),
     defaultValue: query || '',
     onChange: handleOnChange,
-    isCompact: true,
     elemBeforeInput: (0, _react2.jsx)("span", {
       css: _styles.searchIcon
     }, (0, _react2.jsx)(_search.default, {
       label: ""
     })),
     testId: emojiPickerSearchTestId,
-    ref: textRef
+    ref: textRef,
+    isCompact: true
   }));
 };
 exports.EmojiPickerListSearch = EmojiPickerListSearch;

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.virtualItemRenderer = exports.LoadingItem = exports.EmojisRowItem = exports.CategoryHeadingItem = exports.AbstractItem = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -33,8 +34,10 @@ var EmojisRowItem = /*#__PURE__*/function (_AbstractItem) {
     var _this;
     (0, _classCallCheck2.default)(this, EmojisRowItem);
     _this = _super.call(this, props, _EmojiPickerSizes.sizes.emojiRowHeight);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderItem", function () {
-      return (0, _react.jsx)(_EmojiPickerEmojiRow.default, _this.props);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderItem", function (context) {
+      return (0, _react.jsx)(_EmojiPickerEmojiRow.default, (0, _extends2.default)({}, _this.props, {
+        virtualItemContext: context
+      }));
     });
     return _this;
   }