@atlaskit/emoji 67.0.7 → 67.2.0

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

@@ -1,17 +1,18 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
 /** @jsx jsx */
-import React, { PureComponent } from 'react';
+import { createRef, PureComponent } from 'react';
 import { jsx } from '@emotion/react';
-import { customCategory, defaultEmojiPickerSize, userCustomTitle } from '../../util/constants';
+import VisuallyHidden from '@atlaskit/visually-hidden';
+import { customCategory, defaultEmojiPickerSize, frequentCategory, searchCategory, userCustomTitle, yourUploadsCategory } from '../../util/constants';
 import { CategoryDescriptionMap } from './categories';
 import CategoryTracker from './CategoryTracker';
 import { sizes } from './EmojiPickerSizes';
@@ -20,6 +21,10 @@ import EmojiActions from '../common/EmojiActions';
 import { emojiPickerList } from './styles';
 import { emojiPickerHeightOffset } from './utils';
 import { VirtualList } from './VirtualList';
+import { injectIntl } from 'react-intl-next';
+import { messages } from '../i18n';
+import { EmojiPickerListContextProvider } from '../../context/EmojiPickerListContext';
+
 /**
  * Test id for wrapper Emoji Picker List div
  */
@@ -28,29 +33,66 @@ var categoryClassname = 'emoji-category';
 var byOrder = function byOrder(orderableA, orderableB) {
   return (orderableA.order || 0) - (orderableB.order || 0);
 };
-var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
-  _inherits(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) {
+  _inherits(EmojiPickerTabPanelInternal, _PureComponent);
+  var _super = _createSuper(EmojiPickerTabPanelInternal);
+  function EmojiPickerTabPanelInternal() {
+    _classCallCheck(this, EmojiPickerTabPanelInternal);
+    return _super.apply(this, arguments);
+  }
+  _createClass(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 jsx("div", {
+        ref: "root",
+        css: emojiPickerList,
+        "data-testid": RENDER_EMOJI_PICKER_LIST_TESTID,
+        id: RENDER_EMOJI_PICKER_LIST_TESTID,
+        role: "tabpanel",
+        "aria-label": formatMessage(messages.emojiPickerListPanel)
+      }, jsx(VisuallyHidden, {
+        id: "emoji-picker-table-description"
+      }, formatMessage(messages.emojiPickerGrid, {
+        showSearchResults: showSearchResults
+      })), children);
+    }
+  }]);
+  return EmojiPickerTabPanelInternal;
+}(PureComponent);
+var EmojiPickerTabPanel = injectIntl(EmojiPickerTabPanelInternal);
+var EmojiPickerVirtualListInternal = /*#__PURE__*/function (_PureComponent2) {
+  _inherits(EmojiPickerVirtualListInternal, _PureComponent2);
+  var _super2 = _createSuper(EmojiPickerVirtualListInternal);
+  function EmojiPickerVirtualListInternal(_props) {
     var _this;
-    _classCallCheck(this, EmojiPickerVirtualList);
-    _this = _super.call(this, _props);
+    _classCallCheck(this, EmojiPickerVirtualListInternal);
+    _this = _super2.call(this, _props);
     _defineProperty(_assertThisInitialized(_this), "virtualItems", []);
     _defineProperty(_assertThisInitialized(_this), "categoryTracker", new CategoryTracker());
-    _defineProperty(_assertThisInitialized(_this), "onEmojiMouseEnter", function (emojiId, emoji) {
+    _defineProperty(_assertThisInitialized(_this), "listRef", /*#__PURE__*/createRef());
+    _defineProperty(_assertThisInitialized(_this), "onEmojiActive", function (emojiId, emoji) {
       if (_this.props.onEmojiActive) {
         _this.props.onEmojiActive(emojiId, emoji);
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "onSearch", function (e) {
+    _defineProperty(_assertThisInitialized(_this), "onSearch", function (value) {
       if (_this.props.onSearch) {
-        _this.props.onSearch(e.target.value);
+        _this.props.onSearch(value);
       }
     });
     _defineProperty(_assertThisInitialized(_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 CategoryHeadingItem({
         id: group.category,
@@ -62,12 +104,14 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
         var rowEmojis = remainingEmojis.slice(0, sizes.emojiPerRow);
         remainingEmojis = remainingEmojis.slice(sizes.emojiPerRow);
         items.push(new EmojisRowItem({
+          category: group.category,
           emojis: rowEmojis,
           title: group.title,
           showDelete: group.title === userCustomTitle,
           onSelected: onEmojiSelected,
           onDelete: onEmojiDelete,
-          onMouseMove: _this.onEmojiMouseEnter
+          onMouseMove: _this.onEmojiActive,
+          onFocus: _this.onEmojiActive
         }));
       }
       return items;
@@ -85,7 +129,7 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
           var search = CategoryDescriptionMap.SEARCH;
           // Only a single "result" category
           items = [].concat(_toConsumableArray(items), _toConsumableArray(_this.buildVirtualItemFromGroup({
-            category: 'SEARCH',
+            category: searchCategory,
             title: search.name,
             emojis: emojis,
             order: search.order
@@ -99,22 +143,16 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
             // by not passing it to irrelevant groups
             _this.categoryTracker.add(group.emojis[0].category, items.length);
             items = [].concat(_toConsumableArray(items), _toConsumableArray(_this.buildVirtualItemFromGroup(group)));
+            if (group.category === 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();
-      }
     });
     _defineProperty(_assertThisInitialized(_this), "addToCategoryMap", function (categoryToGroupMap, emoji, category) {
       if (!categoryToGroupMap[category]) {
@@ -134,7 +172,7 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
         _this.addToCategoryMap(categoryToGroupMap, emoji, emoji.category);
         // separate user emojis
         if (emoji.category === customCategory && currentUser && emoji.creatorUserId === currentUser.id) {
-          _this.addToCategoryMap(categoryToGroupMap, emoji, 'USER_CUSTOM');
+          _this.addToCategoryMap(categoryToGroupMap, emoji, yourUploadsCategory);
         }
         return categoryToGroupMap;
       };
@@ -144,37 +182,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 !== frequentCategory) {
           group.emojis.sort(byOrder);
         }
         return group;
       }).sort(byOrder);
     });
-    _defineProperty(_assertThisInitialized(_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;
+    _defineProperty(_assertThisInitialized(_this), "findCategoryToActivate", function (row) {
+      var category = null;
+      if (row instanceof CategoryHeadingItem) {
+        category = row.props.id;
+      } else if (row instanceof EmojisRowItem) {
+        category = row.props.category;
+      }
+      // your uploads is rendered, take it as upload category, so could be highlighted in category selector
+      if (category === yourUploadsCategory) {
+        return customCategory;
+        // search results is rendered, return null so won't be highlighted for category selector
+      } else if (category === searchCategory) {
+        return null;
       }
+      return category;
     });
-    _defineProperty(_assertThisInitialized(_this), "checkCategoryIdChange", function (indexes) {
+    _defineProperty(_assertThisInitialized(_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 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 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);
           }
@@ -188,11 +234,12 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "renderRow", function (context) {
       return virtualItemRenderer(_this.virtualItems, context);
     });
+    _this.lastYourUploadsRow = 0;
     _this.buildEmojiGroupedByCategory(_props.emojis, _props.currentUser);
     _this.buildVirtualItems(_props, _this.state);
     return _this;
   }
-  _createClass(EmojiPickerVirtualList, [{
+  _createClass(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) {
@@ -211,42 +258,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 ? 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 ? defaultEmojiPickerSize : _this$props3$size,
+        emojis = _this$props3.emojis;
       var virtualListHeight = sizes.listHeight + emojiPickerHeightOffset(size);
-      return jsx("div", {
-        ref: "root",
-        css: emojiPickerList,
-        "data-testid": RENDER_EMOJI_PICKER_LIST_TESTID
+      return jsx(EmojiPickerTabPanel, {
+        showSearchResults: !!query
       }, jsx(EmojiActions, {
         selectedTone: selectedTone,
         onToneSelected: onToneSelected,
@@ -264,9 +328,15 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
         onFileChooserClicked: onFileChooserClicked,
         onOpenUpload: onOpenUpload,
         query: query,
-        onChange: this.onSearch
-      }), jsx(VirtualList, {
-        ref: "list",
+        onChange: this.onSearch,
+        resultsCount: emojis.length
+      }), jsx(EmojiPickerListContextProvider, {
+        initialEmojisFocus: {
+          rowIndex: 1,
+          columnIndex: 0
+        }
+      }, jsx(VirtualList, {
+        ref: this.listRef,
         height: virtualListHeight,
         overscanRowCount: 10,
         rowCount: this.virtualItems.length,
@@ -274,13 +344,13 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
         rowRenderer: this.renderRow,
         scrollToAlignment: "start",
         width: sizes.listWidth,
-        onRowsRendered: this.checkCategoryIdChange
-      }));
+        onRowsRendered: this.onRowsRendered
+      })));
     }
   }]);
-  return EmojiPickerVirtualList;
+  return EmojiPickerVirtualListInternal;
 }(PureComponent);
-_defineProperty(EmojiPickerVirtualList, "defaultProps", {
+_defineProperty(EmojiPickerVirtualListInternal, "defaultProps", {
   onEmojiSelected: function onEmojiSelected() {},
   onEmojiActive: function onEmojiActive() {},
   onEmojiDelete: function onEmojiDelete() {},
@@ -288,4 +358,4 @@ _defineProperty(EmojiPickerVirtualList, "defaultProps", {
   onSearch: function onSearch() {},
   size: defaultEmojiPickerSize
 });
-export { EmojiPickerVirtualList as default };
+export { EmojiPickerVirtualListInternal as default };

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

@@ -1,126 +1,73 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
-import React, { PureComponent } from 'react';
+import React, { useLayoutEffect, useRef, useState } from 'react';
 import { jsx } from '@emotion/react';
 import TextField from '@atlaskit/textfield';
 import SearchIcon from '@atlaskit/icon/glyph/search';
-import { injectIntl } from 'react-intl-next';
+import VisuallyHidden from '@atlaskit/visually-hidden';
+import { useIntl } from 'react-intl-next';
 import { messages } from '../i18n';
 import { input, pickerSearch, searchIcon } from './styles';
+import { EMOJI_SEARCH_DEBOUNCE } from '../../util/constants';
+import { useDebouncedCallback } from 'use-debounce';
 export var emojiPickerSearchTestId = 'emoji-picker-serach';
-var EmojiPickerListSearch = /*#__PURE__*/function (_PureComponent) {
-  _inherits(EmojiPickerListSearch, _PureComponent);
-  var _super = _createSuper(EmojiPickerListSearch);
-  function EmojiPickerListSearch() {
-    var _this;
-    _classCallCheck(this, EmojiPickerListSearch);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "onBlur", function () {
-      var activeElement = document.activeElement;
-      // Input lost focus to emoji picker container (happens in IE11 when updating search results)
-      // See FS-2111
-      if (activeElement instanceof HTMLElement && activeElement.getAttribute('data-emoji-picker-container')) {
-        _this.restoreInputFocus();
+export var EmojiPickerListSearch = function EmojiPickerListSearch(props) {
+  var style = props.style,
+    query = props.query,
+    resultsCount = props.resultsCount,
+    onChange = props.onChange;
+  var textRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    dirty = _useState2[0],
+    setDirty = _useState2[1];
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+
+  // Debounce callback
+  var _useDebouncedCallback = useDebouncedCallback(function (value) {
+      onChange(value);
+      setDirty(true);
+    },
+    // delay in ms
+    EMOJI_SEARCH_DEBOUNCE),
+    _useDebouncedCallback2 = _slicedToArray(_useDebouncedCallback, 1),
+    debouncedSearch = _useDebouncedCallback2[0];
+  var handleOnChange = function handleOnChange(e) {
+    debouncedSearch(e.target.value);
+  };
+  useLayoutEffect(function () {
+    requestAnimationFrame(function () {
+      if (textRef) {
+        var _textRef$current;
+        (_textRef$current = textRef.current) === null || _textRef$current === void 0 ? void 0 : _textRef$current.focus();
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "onChange", function (e) {
-      _this.saveInputSelection();
-      _this.props.onChange(e);
-    });
-    _defineProperty(_assertThisInitialized(_this), "focusInput", function () {
-      if (_this.inputRef) {
-        _this.inputRef.focus();
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleInputRef", function (input) {
-      if (input) {
-        // Defer focus so it give some time to position the popup before
-        // setting the focus to search input.
-        // see FS-2056
-        _this.inputRef = input;
-        if (typeof window === 'undefined') {
-          return;
-        }
-        window.requestAnimationFrame(_this.focusInput);
-      }
-    });
-    return _this;
-  }
-  _createClass(EmojiPickerListSearch, [{
-    key: "saveInputSelection",
-    value: function saveInputSelection() {
-      this.inputSelection = undefined;
-      if (this.inputRef) {
-        var _this$inputRef = this.inputRef,
-          selectionStart = _this$inputRef.selectionStart,
-          selectionEnd = _this$inputRef.selectionEnd,
-          selectionDirection = _this$inputRef.selectionDirection;
-        if (selectionStart && selectionEnd && selectionDirection) {
-          this.inputSelection = {
-            selectionStart: selectionStart,
-            selectionEnd: selectionEnd,
-            selectionDirection: selectionDirection
-          };
-        }
-      }
-    }
-  }, {
-    key: "restoreInputFocus",
-    value: function restoreInputFocus() {
-      this.focusInput();
-      if (this.inputSelection && this.inputRef && this.inputRef.setSelectionRange) {
-        var _this$inputSelection = this.inputSelection,
-          selectionStart = _this$inputSelection.selectionStart,
-          selectionEnd = _this$inputSelection.selectionEnd,
-          selectionDirection = _this$inputSelection.selectionDirection;
-        this.inputRef.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        style = _this$props.style,
-        query = _this$props.query,
-        intl = _this$props.intl;
-      var formatMessage = intl.formatMessage;
-      return jsx("div", {
-        css: pickerSearch,
-        style: style
-      }, jsx(TextField, {
-        "aria-label": formatMessage(messages.searchLabel),
-        css: input,
-        autoComplete: "off",
-        name: "search",
-        placeholder: "".concat(formatMessage(messages.searchPlaceholder), "..."),
-        onChange: this.onChange,
-        value: query || '',
-        ref: this.handleInputRef,
-        isCompact: true,
-        onBlur: this.onBlur,
-        elemBeforeInput: jsx("span", {
-          css: searchIcon
-        }, jsx(SearchIcon, {
-          label: ""
-        })),
-        testId: emojiPickerSearchTestId
-      }));
-    }
-  }]);
-  return EmojiPickerListSearch;
-}(PureComponent);
-_defineProperty(EmojiPickerListSearch, "defaultProps", {
-  style: {}
-});
-export default injectIntl(EmojiPickerListSearch);
+  }, []);
+  return jsx("div", {
+    css: pickerSearch,
+    style: style
+  }, jsx(VisuallyHidden, {
+    id: "emoji-search-results-status",
+    role: "status"
+  }, dirty && query === '' && formatMessage(messages.searchResultsStatusSeeAll), query !== '' && formatMessage(messages.searchResultsStatus, {
+    count: resultsCount
+  })), jsx(TextField, {
+    role: "searchbox",
+    "aria-label": formatMessage(messages.searchLabel),
+    css: input,
+    autoComplete: "off",
+    name: "search",
+    placeholder: "".concat(formatMessage(messages.searchPlaceholder), "..."),
+    defaultValue: query || '',
+    onChange: handleOnChange,
+    elemBeforeInput: jsx("span", {
+      css: searchIcon
+    }, jsx(SearchIcon, {
+      label: ""
+    })),
+    testId: emojiPickerSearchTestId,
+    ref: textRef,
+    isCompact: true
+  }));
+};

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

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
@@ -27,8 +28,10 @@ export var EmojisRowItem = /*#__PURE__*/function (_AbstractItem) {
     var _this;
     _classCallCheck(this, EmojisRowItem);
     _this = _super.call(this, props, sizes.emojiRowHeight);
-    _defineProperty(_assertThisInitialized(_this), "renderItem", function () {
-      return jsx(EmojiPickerEmojiRow, _this.props);
+    _defineProperty(_assertThisInitialized(_this), "renderItem", function (context) {
+      return jsx(EmojiPickerEmojiRow, _extends({}, _this.props, {
+        virtualItemContext: context
+      }));
     });
     return _this;
   }