@atlaskit/emoji 67.0.7 → 67.2.0

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

@@ -25,8 +25,9 @@ var _EmojiPickerFooter = _interopRequireDefault(require("./EmojiPickerFooter"));
 var _EmojiPickerList = _interopRequireDefault(require("./EmojiPickerList"));
 var _analytics = require("../../util/analytics");
 var _styles = require("./styles");
-var _hooks = require("../hooks");
 var _useEmoji2 = require("../../hooks/useEmoji");
+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;
@@ -101,12 +104,11 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
   }, []);
   var openTime = (0, _react.useRef)(0);
   var isMounting = (0, _react.useRef)(true);
-  var didMount = (0, _hooks.useDidMount)();
-  var updateAfterDidMount = (0, _react.useRef)(true);
   var previousEmojiProvider = (0, _react.useRef)(emojiProvider);
   var currentUser = (0, _react.useMemo)(function () {
     return emojiProvider.getCurrentUser();
   }, [emojiProvider]);
+  var isMounted = (0, _useIsMounted.useIsMounted)();
   var fireAnalytics = (0, _react.useCallback)(function (analyticsEvent) {
     if (createAnalyticsEvent) {
       (0, _analytics.createAndFireEventInElementsChannel)(analyticsEvent)(createAnalyticsEvent);
@@ -210,7 +212,11 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       emojiToRender: emojiToRender,
       searchEmoji: searchResults.emojis
     });
-  }, [frequentlyUsedEmojis, query, setStateAfterEmojiChange]);
+    fireAnalytics((0, _analytics.pickerSearchedEvent)({
+      queryLength: searchQuery.length,
+      numMatches: searchResults.emojis.length
+    }));
+  }, [frequentlyUsedEmojis, query, setStateAfterEmojiChange, fireAnalytics]);
   var onProviderChange = (0, _react.useMemo)(function () {
     return {
       result: onSearchResult
@@ -300,22 +306,22 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
   var onFileChooserClicked = (0, _react.useCallback)(function () {
     fireAnalytics((0, _analytics.selectedFileEvent)());
   }, [fireAnalytics]);
+  var scrollToTopOfList = (0, _react.useCallback)(function () {
+    var _emojiPickerList$curr;
+    (_emojiPickerList$curr = emojiPickerList.current) === null || _emojiPickerList$curr === void 0 ? void 0 : _emojiPickerList$curr.scrollToTop();
+  }, [emojiPickerList]);
   var onSearch = (0, _react.useCallback)(function (searchQuery) {
     var options = {
-      skinTone: selectedTone
+      skinTone: selectedTone,
+      source: _types.SearchSourceTypes.PICKER
     };
-    if (query) {
-      _analytics.ufoExperiences['emoji-searched'].start();
-      _analytics.ufoExperiences['emoji-searched'].addMetadata({
-        queryLength: query.length,
-        source: 'EmojiPickerComponent'
-      });
-    }
     if (searchQuery !== query) {
       setQuery(searchQuery);
+      // scroll to top when search, which is search results section
+      scrollToTopOfList();
     }
-    updateEmojis(query, options);
-  }, [query, selectedTone, updateEmojis]);
+    updateEmojis(searchQuery, options);
+  }, [query, selectedTone, updateEmojis, scrollToTopOfList]);
   var onOpenUpload = (0, _react.useCallback)(function () {
     // Prime upload token so it's ready when the user adds
     if ((0, _EmojiResource.supportsUploadFeature)(emojiProvider)) {
@@ -327,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$curr;
-        (_emojiPickerList$curr = emojiPickerList.current) === null || _emojiPickerList$curr === void 0 ? void 0 : _emojiPickerList$curr.scrollToBottom();
+        var _emojiPickerList$curr2;
+        (_emojiPickerList$curr2 = emojiPickerList.current) === null || _emojiPickerList$curr2 === void 0 ? void 0 : _emojiPickerList$curr2.scrollToRecentlyUploaded();
       }, 0);
     }
   }, [emojiPickerList]);
@@ -349,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)({
@@ -403,11 +409,10 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
   }
   (0, _react.useEffect)(function () {
     // componentDidMount logic
-    if (didMount && updateAfterDidMount.current) {
+    if (!isMounted) {
       onComponentDidMount();
-      updateAfterDidMount.current = false;
     }
-  }, [didMount, onComponentDidMount]);
+  }, [onComponentDidMount, isMounted]);
   (0, _react.useEffect)(function () {
     previousEmojiProvider.current.unsubscribe(onProviderChange);
     previousEmojiProvider.current = emojiProvider;
@@ -416,26 +421,6 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       emojiProvider.unsubscribe(onProviderChange);
     };
   }, [emojiProvider, onProviderChange]);
-  (0, _react.useEffect)(function () {
-    // We changed provider which means we subscribed to filter results for a new subscriber.
-    // So we refresh the emoji display with onSearch and we do it here, after the new props have
-    // been set since onSearch leads to filter being called on the current emojiProvider.
-    // (Calling onSearch in a '...Will...' lifecycle method would lead to filter being called on
-    // an emojiProvider we have already unsubscribed from)
-    onSearch(query);
-  }, [emojiProvider, onSearch, query]);
-  (0, _react.useEffect)(function () {
-    // Fire analytics event whenever query changes
-    fireAnalytics((0, _analytics.pickerSearchedEvent)({
-      queryLength: query.length,
-      numMatches: filteredEmojis.length
-    }));
-    _analytics.ufoExperiences['emoji-searched'].success({
-      metadata: {
-        emojisLength: filteredEmojis.length
-      }
-    });
-  }, [filteredEmojis.length, fireAnalytics, query]);
   (0, _react.useEffect)(function () {
     if (!frequentlyUsedEmojis.length || query) {
       setFilteredEmojis(searchEmojis);
@@ -473,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,
@@ -505,7 +493,8 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     onCloseDelete: onCloseDelete,
     onFileChooserClicked: onFileChooserClicked,
     onOpenUpload: onOpenUpload,
-    size: size
+    size: size,
+    activeCategoryId: activeCategory
   }), showPreview && (0, _react2.jsx)(_EmojiPickerFooter.default, {
     selectedEmoji: selectedEmoji
   }));

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

@@ -1,21 +1,21 @@
 "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.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 = _interopRequireWildcard(require("react"));
+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"));
@@ -25,8 +25,9 @@ var _EmojiActions = _interopRequireDefault(require("../common/EmojiActions"));
 var _styles = require("./styles");
 var _utils = require("./utils");
 var _VirtualList = require("./VirtualList");
-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 _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; } }
 /**
@@ -38,29 +39,66 @@ 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), "onEmojiMouseEnter", function (emojiId, emoji) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "listRef", /*#__PURE__*/(0, _react.createRef)());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onEmojiActive", function (emojiId, emoji) {
       if (_this.props.onEmojiActive) {
         _this.props.onEmojiActive(emojiId, emoji);
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSearch", function (e) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSearch", function (value) {
       if (_this.props.onSearch) {
-        _this.props.onSearch(e.target.value);
+        _this.props.onSearch(value);
       }
     });
     (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,
@@ -72,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;
@@ -95,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
@@ -109,22 +149,16 @@ 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
           });
         }
       }
-      var rowCountChanged = _this.virtualItems.length !== items.length;
       _this.virtualItems = items;
-      var list = _this.refs.list;
-      if (!rowCountChanged && list) {
-        // Row count has not changed, so need to tell list to rerender.
-        list.forceUpdateGrid();
-      }
-      if (!query && list) {
-        // VirtualList can apply stale heights since it performs a shallow
-        // compare to check if the list has changed. Should manually recompute
-        // row heights for the case when frequent category come in later
-        list.recomputeRowHeights();
-      }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "addToCategoryMap", function (categoryToGroupMap, emoji, category) {
       if (!categoryToGroupMap[category]) {
@@ -144,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;
       };
@@ -154,37 +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), "repaintList", function () {
-      if (_this.refs.root) {
-        var root = _this.refs.root;
-        var display = root.style.display;
-        root.style.display = 'none';
-
-        // we need to access offset to force repaint
-        // eslint-disable-next-line no-unused-expressions
-        root.offsetHeight;
-        root.style.display = display;
+    (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), "checkCategoryIdChange", function (indexes) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onRowsRendered", function (indexes) {
       var startIndex = indexes.startIndex;
+      var rowItem = _this.virtualItems[startIndex];
+      var list = _this.listRef.current;
 
-      // FS-1844 Fix a rendering problem when scrolling to the top
-      if (startIndex === 0) {
-        _this.repaintList();
+      // 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.refs.list;
-        var currentCategory = _this.categoryTracker.findNearestCategoryAbove(startIndex, list);
-        if (currentCategory && _this.activeCategoryId !== currentCategory) {
-          _this.activeCategoryId = currentCategory;
+        var currentCategory = _this.findCategoryToActivate(rowItem);
+        if (currentCategory !== null && _this.props.activeCategoryId !== currentCategory) {
           if (_this.props.onCategoryActivated) {
             _this.props.onCategoryActivated(currentCategory);
           }
@@ -198,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) {
@@ -221,42 +264,59 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
      */
     function reveal(category) {
       var row = this.categoryTracker.getRow(category);
-      var list = this.refs.list;
-      list.scrollToRow(row);
+      this.scrollToRow(row);
     }
   }, {
     key: "scrollToBottom",
     value: function scrollToBottom() {
-      var list = this.refs.list;
-      list.scrollToRow(this.virtualItems.length);
+      this.scrollToRow(this.virtualItems.length);
+    }
+  }, {
+    key: "scrollToTop",
+    value: function scrollToTop() {
+      this.scrollToRow(0);
+    }
+  }, {
+    key: "scrollToRow",
+    value: function scrollToRow(index) {
+      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,
@@ -274,9 +334,15 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
         onFileChooserClicked: onFileChooserClicked,
         onOpenUpload: onOpenUpload,
         query: query,
-        onChange: this.onSearch
-      }), (0, _react2.jsx)(_VirtualList.VirtualList, {
-        ref: "list",
+        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,
         rowCount: this.virtualItems.length,
@@ -284,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() {},