emoji-picker-react 4.0.0-rc.19 → 4.0.0-rc.21

package/dist/emoji-picker-react.cjs.development.js

@@ -98,6 +98,131 @@ function categoryNameFromDom($category) {
   return (_$category$getAttribu = $category == null ? void 0 : $category.getAttribute('data-name')) != null ? _$category$getAttribu : null;
 }
 
+var ClassNames;
+
+(function (ClassNames) {
+  ClassNames["hiddenOnSearch"] = "epr-hidden-on-search";
+  ClassNames["searchActive"] = "epr-search-active";
+  ClassNames["hidden"] = "epr-hidden";
+  ClassNames["visible"] = "epr-visible";
+  ClassNames["active"] = "epr-active";
+  ClassNames["emoji"] = "epr-emoji";
+  ClassNames["category"] = "epr-emoji-category";
+  ClassNames["label"] = "epr-emoji-category-label";
+})(ClassNames || (ClassNames = {}));
+
+function asSelectors() {
+  for (var _len = arguments.length, classNames = new Array(_len), _key = 0; _key < _len; _key++) {
+    classNames[_key] = arguments[_key];
+  }
+
+  return classNames.map(function (c) {
+    return "." + c;
+  }).join('');
+}
+
+function ElementRefContextProvider(_ref) {
+  var children = _ref.children;
+  var PickerMainRef = React.useRef(null);
+  var AnchoredEmojiRef = React.useRef(null);
+  var BodyRef = React.useRef(null);
+  var SearchInputRef = React.useRef(null);
+  var SkinTonePickerRef = React.useRef(null);
+  var CategoryNavigationRef = React.useRef(null);
+  return React.createElement(ElementRefContext.Provider, {
+    value: {
+      AnchoredEmojiRef: AnchoredEmojiRef,
+      BodyRef: BodyRef,
+      CategoryNavigationRef: CategoryNavigationRef,
+      PickerMainRef: PickerMainRef,
+      SearchInputRef: SearchInputRef,
+      SkinTonePickerRef: SkinTonePickerRef
+    }
+  }, children);
+}
+var ElementRefContext = /*#__PURE__*/React.createContext({
+  AnchoredEmojiRef: /*#__PURE__*/React.createRef(),
+  BodyRef: /*#__PURE__*/React.createRef(),
+  CategoryNavigationRef: /*#__PURE__*/React.createRef(),
+  PickerMainRef: /*#__PURE__*/React.createRef(),
+  SearchInputRef: /*#__PURE__*/React.createRef(),
+  SkinTonePickerRef: /*#__PURE__*/React.createRef()
+});
+
+function useElementRef() {
+  return React.useContext(ElementRefContext);
+}
+
+function usePickerMainRef() {
+  return useElementRef()['PickerMainRef'];
+}
+function useAnchoredEmojiRef() {
+  return useElementRef()['AnchoredEmojiRef'];
+}
+function useSetAnchoredEmojiRef() {
+  var AnchoredEmojiRef = useAnchoredEmojiRef();
+  return function (target) {
+    AnchoredEmojiRef.current = target;
+  };
+}
+function useBodyRef() {
+  return useElementRef()['BodyRef'];
+}
+function useSearchInputRef() {
+  return useElementRef()['SearchInputRef'];
+}
+function useSkinTonePickerRef() {
+  return useElementRef()['SkinTonePickerRef'];
+}
+function useCategoryNavigationRef() {
+  return useElementRef()['CategoryNavigationRef'];
+}
+
+function scrollTo(root, top) {
+  if (top === void 0) {
+    top = 0;
+  }
+
+  var $eprBody = root ? root.querySelector('.epr-body') : null;
+
+  if (!root || !$eprBody) {
+    return;
+  }
+
+  requestAnimationFrame(function () {
+    $eprBody.scrollTop = top + 1;
+  });
+}
+function useScrollTo() {
+  var BodyRef = useBodyRef();
+  return React.useCallback(function (top) {
+    requestAnimationFrame(function () {
+      if (BodyRef.current) {
+        BodyRef.current.scrollTop = top;
+      }
+    });
+  }, [BodyRef]);
+}
+
+function scrollCategoryIntoView(root, category) {
+  var $category = root == null ? void 0 : root.querySelector("[data-name=\"" + category + "\"]");
+
+  if (!$category) {
+    return;
+  }
+
+  var offsetTop = $category.offsetTop || 0;
+  scrollTo(root, offsetTop);
+}
+
+function isSystemDarkTheme() {
+  if (typeof window === 'undefined') {
+    return false;
+  }
+
+  return !!window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
+
 var SuggestionMode;
 
 (function (SuggestionMode) {
@@ -226,17 +351,21 @@ function getBaseConfigByCategory(category, modifier) {
 }
 
 function mergeConfig(userConfig) {
+  var _userConfig$previewCo;
+
   if (userConfig === void 0) {
     userConfig = {};
   }
 
-  var config = _extends({}, basePickerConfig(), userConfig);
-
+  var base = basePickerConfig();
+  var previewConfig = Object.assign(base.previewConfig, (_userConfig$previewCo = userConfig.previewConfig) != null ? _userConfig$previewCo : {});
+  var config = Object.assign(base, userConfig);
   var categories = mergeCategoriesConfig(userConfig.categories, {
     suggestionMode: config.suggestedEmojisMode
   });
   return _extends({}, config, {
-    categories: categories
+    categories: categories,
+    previewConfig: previewConfig
   });
 }
 function basePickerConfig() {
@@ -245,17 +374,24 @@ function basePickerConfig() {
     categories: baseCategoriesConfig(),
     defaultSkinTone: exports.SkinTones.NEUTRAL,
     emojiStyle: exports.EmojiStyle.APPLE,
+    lazyLoadEmojis: false,
     onEmojiClick: function defaultOnClickHandler( // @ts-ignore
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     emoji, // @ts-ignore
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     event) {},
+    previewConfig: _extends({}, basePreviewConfig),
     searchPlaceHolder: 'Search',
-    showPreview: true,
     skinTonesDisabled: false,
-    theme: exports.Theme.LIGHT,
     suggestedEmojisMode: SuggestionMode.FREQUENT,
-    lazyLoadEmojis: false
+    theme: exports.Theme.LIGHT
   };
 }
+var basePreviewConfig = {
+  defaultEmoji: '1f60a',
+  defaultCaption: "What's your mood?",
+  showPreview: true
+};
 
 var _excluded = ["children"];
 var ConfigContext = /*#__PURE__*/React.createContext( /*#__PURE__*/basePickerConfig());
@@ -271,14 +407,6 @@ function usePickerConfig() {
   return React.useContext(ConfigContext);
 }
 
-function isSystemDarkTheme() {
-  if (typeof window === 'undefined') {
-    return false;
-  }
-
-  return !!window.matchMedia('(prefers-color-scheme: dark)').matches;
-}
-
 function useSearchPlaceHolderConfig() {
   var _usePickerConfig = usePickerConfig(),
       searchPlaceHolder = _usePickerConfig.searchPlaceHolder;
@@ -321,11 +449,11 @@ function useOnEmojiClickConfig() {
 
   return onEmojiClick;
 }
-function useShowPreviewConfig() {
+function usePreviewConfig() {
   var _usePickerConfig8 = usePickerConfig(),
-      showPreview = _usePickerConfig8.showPreview;
+      previewConfig = _usePickerConfig8.previewConfig;
 
-  return showPreview;
+  return previewConfig;
 }
 function useThemeConfig() {
   var _usePickerConfig9 = usePickerConfig(),
@@ -14946,33 +15074,6 @@ setTimeout(function () {
   }, alphaNumericEmojiIndex);
 });
 
-function scrollTo(root, top) {
-  if (top === void 0) {
-    top = 0;
-  }
-
-  var $eprBody = root ? root.querySelector('.epr-body') : null;
-
-  if (!root || !$eprBody) {
-    return;
-  }
-
-  requestAnimationFrame(function () {
-    $eprBody.scrollTop = top + 1;
-  });
-}
-
-function scrollCategoryIntoView(root, category) {
-  var $category = root == null ? void 0 : root.querySelector("[data-name=\"" + category + "\"]");
-
-  if (!$category) {
-    return;
-  }
-
-  var offsetTop = $category.offsetTop || 0;
-  scrollTo(root, offsetTop);
-}
-
 function useDebouncedState(initialValue, delay) {
   if (delay === void 0) {
     delay = 0;
@@ -14985,15 +15086,18 @@ function useDebouncedState(initialValue, delay) {
   var timer = React.useRef(null);
 
   function debouncedSetState(value) {
-    var _window;
+    return new Promise(function (resolve) {
+      var _window;
 
-    if (timer.current) {
-      clearTimeout(timer.current);
-    }
+      if (timer.current) {
+        clearTimeout(timer.current);
+      }
 
-    timer.current = (_window = window) == null ? void 0 : _window.setTimeout(function () {
-      setState(value);
-    }, delay);
+      timer.current = (_window = window) == null ? void 0 : _window.setTimeout(function () {
+        setState(value);
+        resolve(value);
+      }, delay);
+    });
   }
 
   return [state, debouncedSetState];
@@ -15005,53 +15109,13 @@ function useMarkInitialLoad(dispatch) {
   }, [dispatch]);
 }
 
-function ElementRefContextProvider(_ref) {
-  var children = _ref.children;
-  var PickerMainRef = React.useRef(null);
-  var AnchoredEmojiRef = React.useRef(null);
-  var BodyRef = React.useRef(null);
-  return React.createElement(ElementRefContext.Provider, {
-    value: {
-      PickerMainRef: PickerMainRef,
-      AnchoredEmojiRef: AnchoredEmojiRef,
-      BodyRef: BodyRef
-    }
-  }, children);
-}
-var ElementRefContext = /*#__PURE__*/React.createContext({
-  PickerMainRef: /*#__PURE__*/React.createRef(),
-  AnchoredEmojiRef: /*#__PURE__*/React.createRef(),
-  BodyRef: /*#__PURE__*/React.createRef()
-});
-function useElementRef(key) {
-  var _React$useContext = React.useContext(ElementRefContext),
-      elementRef = _React$useContext[key];
-
-  return elementRef;
-}
-function usePickerMainRef() {
-  return useElementRef('PickerMainRef');
-}
-function useAnchoredEmojiRef() {
-  return useElementRef('AnchoredEmojiRef');
-}
-function useSetAnchoredEmojiRef() {
-  var AnchoredEmojiRef = useAnchoredEmojiRef();
-  return function (target) {
-    AnchoredEmojiRef.current = target;
-  };
-}
-function useBodyRef() {
-  return useElementRef('BodyRef');
-}
-
 function PickerContextProvider(_ref) {
   var children = _ref.children;
   var defaultSkinTone = useDefaultSkinToneConfig(); // Initialize the filter with the inititial dictionary
 
   var filterRef = React.useRef(alphaNumericEmojiIndex);
   var disallowClickRef = React.useRef(false);
-  var suggestedUpdateState = useDebouncedState(Date.now(), 250);
+  var suggestedUpdateState = useDebouncedState(Date.now(), 200);
   var searchTerm = useDebouncedState('', 100);
   var skinToneFanOpenState = React.useState(false);
   var activeSkinTone = React.useState(defaultSkinTone);
@@ -15066,34 +15130,38 @@ function PickerContextProvider(_ref) {
   useMarkInitialLoad(setIsPastInitialLoad);
   return React.createElement(PickerContext.Provider, {
     value: {
-      suggestedUpdateState: suggestedUpdateState,
-      filterRef: filterRef,
-      searchTerm: searchTerm,
       activeCategoryState: activeCategoryState,
       activeSkinTone: activeSkinTone,
+      disallowClickRef: disallowClickRef,
+      emojiVariationPickerState: emojiVariationPickerState,
       emojisThatFailedToLoadState: emojisThatFailedToLoadState,
+      filterRef: filterRef,
       isPastInitialLoad: isPastInitialLoad,
-      emojiVariationPickerState: emojiVariationPickerState,
+      searchTerm: searchTerm,
       skinToneFanOpenState: skinToneFanOpenState,
-      disallowClickRef: disallowClickRef
+      suggestedUpdateState: suggestedUpdateState
     }
   }, children);
 }
 var PickerContext = /*#__PURE__*/React.createContext({
-  suggestedUpdateState: [/*#__PURE__*/Date.now(), function () {}],
-  searchTerm: ['', function () {}],
   activeCategoryState: [null, function () {}],
   activeSkinTone: [exports.SkinTones.NEUTRAL, function () {}],
-  emojisThatFailedToLoadState: [/*#__PURE__*/new Set(), function () {}],
-  isPastInitialLoad: true,
+  disallowClickRef: {
+    current: false
+  },
   emojiVariationPickerState: [null, function () {}],
-  skinToneFanOpenState: [false, function () {}],
+  emojisThatFailedToLoadState: [/*#__PURE__*/new Set(), function () {}],
   filterRef: {
     current: {}
   },
-  disallowClickRef: {
-    current: false
-  }
+  isPastInitialLoad: true,
+  searchTerm: ['', function () {
+    return new Promise(function () {
+      return undefined;
+    });
+  }],
+  skinToneFanOpenState: [false, function () {}],
+  suggestedUpdateState: [/*#__PURE__*/Date.now(), function () {}]
 });
 function useFilterRef() {
   var _React$useContext = React.useContext(PickerContext),
@@ -15215,16 +15283,113 @@ function useActiveCategoryScrollDetection(bodyRef) {
     }, {
       threshold: [0, 1]
     });
-    (_bodyRef$current = bodyRef.current) == null ? void 0 : _bodyRef$current.querySelectorAll('.epr-emoji-category').forEach(function (el) {
+    (_bodyRef$current = bodyRef.current) == null ? void 0 : _bodyRef$current.querySelectorAll(asSelectors(ClassNames.category)).forEach(function (el) {
       observer.observe(el);
     });
-  }, [bodyRef]);
+  }, [bodyRef, setActiveCategory]);
+}
+
+function elementCountInRow(parent, element) {
+  if (!parent || !element) {
+    return 0;
+  }
+
+  var parentWidth = parent.getBoundingClientRect().width;
+  var elementWidth = element.getBoundingClientRect().width;
+  return Math.floor(parentWidth / elementWidth);
+}
+function elementIndexInRow(parent, element) {
+  if (!parent || !element) {
+    return 0;
+  }
+
+  var elementWidth = element.getBoundingClientRect().width;
+  var elementLeft = element.getBoundingClientRect().left;
+  var parentLeft = parent.getBoundingClientRect().left;
+  return Math.floor((elementLeft - parentLeft) / elementWidth);
+}
+function rowNumber(parent, element) {
+  if (!parent || !element) {
+    return 0;
+  }
+
+  var elementHeight = element.getBoundingClientRect().height;
+  var elementTop = element.getBoundingClientRect().top;
+  var parentTop = parent.getBoundingClientRect().top;
+  return Math.floor((elementTop - parentTop) / elementHeight) - 1;
+}
+function hasNextRow(parent, element) {
+  if (!parent || !element) {
+    return false;
+  }
+
+  var elementHeight = element.getBoundingClientRect().height;
+  var elementTop = element.getBoundingClientRect().top;
+  var parentTop = parent.getBoundingClientRect().top;
+  var parentHeight = parent.getBoundingClientRect().height;
+  return elementTop - parentTop + elementHeight < parentHeight;
+}
+
+function getRowElements(elements, row, elementsInRow) {
+  if (row === -1) {
+    var lastRow = Math.floor(elements.length / elementsInRow);
+    var firstElementIndex = lastRow * elementsInRow;
+    var lastElementIndex = elements.length - 1;
+    return elements.slice(firstElementIndex, lastElementIndex + 1);
+  }
+
+  return elements.slice(row * elementsInRow, (row + 1) * elementsInRow);
+}
+
+function getNextRowElements(allElements, currentRow, elementsInRow) {
+  var nextRow = currentRow + 1;
+
+  if (nextRow * elementsInRow > allElements.length) {
+    return [];
+  }
+
+  return getRowElements(allElements, nextRow, elementsInRow);
+}
+
+function getElementInRow(elements, row, elementsInRow, indexInRow) {
+  var rowElements = getRowElements(elements, row, elementsInRow); // get element, default to last
+
+  return rowElements[indexInRow] || rowElements[rowElements.length - 1] || null;
 }
+function getElementInNextRow(allElements, currentRow, elementsInRow, index) {
+  var nextRowElements = getNextRowElements(allElements, currentRow, elementsInRow); // return item in index, or last item in row
 
-function buttonFromEmoji(emojiElement) {
+  return nextRowElements[index] || nextRowElements[nextRowElements.length - 1] || null;
+}
+function getElementInPrevRow(allElements, currentRow, elementsInRow, index) {
+  var prevRowElements = getRowElements(allElements, currentRow - 1, elementsInRow); // default to last
+
+  return prevRowElements[index] || prevRowElements[prevRowElements.length - 1] || null;
+}
+function firstVisibleElementInContainer(parent, elements) {
+  if (!parent || !elements.length) {
+    return null;
+  }
+
+  var parentTop = parent.getBoundingClientRect().top;
+  var parentBottom = parent.getBoundingClientRect().bottom;
+  var visibleElements = elements.find(function (element) {
+    var elementTop = element.getBoundingClientRect().top;
+    var elementBottom = element.getBoundingClientRect().bottom;
+    return elementTop >= parentTop && elementTop <= parentBottom || elementBottom >= parentTop && elementBottom <= parentBottom;
+  });
+  return visibleElements || null;
+}
+function hasNextElementSibling(element) {
+  return !!element.nextElementSibling;
+}
+
+var EmojiButtonSelector = "button" + /*#__PURE__*/asSelectors(ClassNames.emoji);
+var VisibleEmojiSelector = /*#__PURE__*/[EmojiButtonSelector, asSelectors(ClassNames.visible), ":not(" + asSelectors(ClassNames.hidden) + ")"].join('');
+function buttonFromTarget(emojiElement) {
   var _emojiElement$closest;
 
-  return (_emojiElement$closest = emojiElement == null ? void 0 : emojiElement.closest('button.epr-emoji')) != null ? _emojiElement$closest : null;
+  return (_emojiElement$closest = emojiElement == null ? void 0 : emojiElement.closest(EmojiButtonSelector)) != null ? _emojiElement$closest : null;
 }
 function emojiFromElement(element) {
   var originalUnified = originalUnifiedFromEmojiElement(element);
@@ -15245,12 +15410,7 @@ function emojiFromElement(element) {
 function isEmojiElement(element) {
   var _element$parentElemen;
 
-  return Boolean((element == null ? void 0 : element.matches('button.epr-emoji')) || (element == null ? void 0 : (_element$parentElemen = element.parentElement) == null ? void 0 : _element$parentElemen.matches('button.epr-emoji')));
-}
-function closestCategory(element) {
-  var _element$closest;
-
-  return (_element$closest = element == null ? void 0 : element.closest('.epr-emoji-category')) != null ? _element$closest : null;
+  return Boolean((element == null ? void 0 : element.matches(EmojiButtonSelector)) || (element == null ? void 0 : (_element$parentElemen = element.parentElement) == null ? void 0 : _element$parentElemen.matches(EmojiButtonSelector)));
 }
 function elementHeight(element) {
   var _element$clientHeight;
@@ -15258,12 +15418,12 @@ function elementHeight(element) {
   return (_element$clientHeight = element == null ? void 0 : element.clientHeight) != null ? _element$clientHeight : 0;
 }
 function emojiTrueOffsetTop(element) {
-  var button = buttonFromEmoji(element);
+  var button = buttonFromTarget(element);
   var category = closestCategory(button);
   return elementOffsetTop(button) + elementOffsetTop(category);
 }
 function emojiTruOffsetLeft(element) {
-  var button = buttonFromEmoji(element);
+  var button = buttonFromTarget(element);
   var category = closestCategory(button);
   return elementOffsetLeft(button) + elementOffsetLeft(category);
 }
@@ -15283,7 +15443,7 @@ function elementOffsetLeft(element) {
 function unifiedFromEmojiElement(emoji) {
   var _elementDataSetKey;
 
-  return (_elementDataSetKey = elementDataSetKey(buttonFromEmoji(emoji), 'unified')) != null ? _elementDataSetKey : null;
+  return (_elementDataSetKey = elementDataSetKey(buttonFromTarget(emoji), 'unified')) != null ? _elementDataSetKey : null;
 }
 function originalUnifiedFromEmojiElement(emoji) {
   var unified = unifiedFromEmojiElement(emoji);
@@ -15307,45 +15467,156 @@ function elementDataSet(element) {
   return (_element$dataset = element == null ? void 0 : element.dataset) != null ? _element$dataset : {};
 }
 
-function parseNativeEmoji(unified) {
-  return unified.split('-').map(function (hex) {
-    return String.fromCodePoint(parseInt(hex, 16));
-  }).join('');
+function isVisibleEmoji(element) {
+  return element.classList.contains(ClassNames.visible);
 }
-
-var SUGGESTED_LS_KEY = 'epr_suggested';
-function getsuggested(mode) {
-  var _window;
-
-  if (!((_window = window) != null && _window.localStorage)) {
+function isHidden(element) {
+  if (!element) return true;
+  return element.classList.contains(ClassNames.hidden);
+}
+function allVisibleEmojis(parent) {
+  if (!parent) {
     return [];
   }
 
-  try {
-    var _window$localStorage$, _window2;
+  return Array.from(parent.querySelectorAll(VisibleEmojiSelector));
+}
+function lastVisibleEmoji(element) {
+  if (!element) return null;
+  var allEmojis = allVisibleEmojis(element);
 
-    var recent = JSON.parse((_window$localStorage$ = (_window2 = window) == null ? void 0 : _window2.localStorage.getItem(SUGGESTED_LS_KEY)) != null ? _window$localStorage$ : '[]');
+  var _allEmojis$slice = allEmojis.slice(-1),
+      last = _allEmojis$slice[0];
 
-    if (mode === SuggestionMode.FREQUENT) {
-      return recent.sort(function (a, b) {
-        return b.count - a.count;
-      });
-    }
+  if (!last) {
+    return null;
+  }
 
-    return recent;
-  } catch (_unused) {
-    return [];
+  if (!isVisibleEmoji(last)) {
+    return prevVisibleEmoji(last);
   }
+
+  return last;
 }
-function setsuggested(emoji, skinTone) {
-  var recent = getsuggested();
-  var unified = emojiUnified(emoji, skinTone);
-  var originalUnified = emojiUnified(emoji);
-  var existing = recent.find(function (_ref) {
-    var u = _ref.unified;
-    return u === unified;
-  });
-  var nextList;
+function nextVisibleEmoji(element) {
+  var next = element.nextElementSibling;
+
+  if (!next) {
+    return firstVisibleEmoji(nextCategory(element));
+  }
+
+  if (!isVisibleEmoji(next)) {
+    return nextVisibleEmoji(next);
+  }
+
+  return next;
+}
+function prevVisibleEmoji(element) {
+  var prev = element.previousElementSibling;
+
+  if (!prev) {
+    return lastVisibleEmoji(prevCategory(element));
+  }
+
+  if (!isVisibleEmoji(prev)) {
+    return prevVisibleEmoji(prev);
+  }
+
+  return prev;
+}
+function firstVisibleEmoji(parent) {
+  if (!parent) {
+    return null;
+  }
+
+  var allEmojis = allVisibleEmojis(parent);
+  return firstVisibleElementInContainer(parent, allEmojis);
+}
+function prevCategory(element) {
+  var category = closestCategory(element);
+
+  if (!category) {
+    return null;
+  }
+
+  var prev = category.previousElementSibling;
+
+  if (!prev) {
+    return null;
+  }
+
+  if (isHidden(prev)) {
+    return prevCategory(prev);
+  }
+
+  return prev;
+}
+function nextCategory(element) {
+  var category = closestCategory(element);
+
+  if (!category) {
+    return null;
+  }
+
+  var next = category.nextElementSibling;
+
+  if (!next) {
+    return null;
+  }
+
+  if (isHidden(next)) {
+    return nextCategory(next);
+  }
+
+  return next;
+}
+function closestCategory(element) {
+  if (!element) {
+    return null;
+  }
+
+  return element.closest(asSelectors(ClassNames.category));
+}
+
+function parseNativeEmoji(unified) {
+  return unified.split('-').map(function (hex) {
+    return String.fromCodePoint(parseInt(hex, 16));
+  }).join('');
+}
+
+var SUGGESTED_LS_KEY = 'epr_suggested';
+function getsuggested(mode) {
+  var _window;
+
+  if (!((_window = window) != null && _window.localStorage)) {
+    return [];
+  }
+
+  try {
+    var _window$localStorage$, _window2;
+
+    var recent = JSON.parse((_window$localStorage$ = (_window2 = window) == null ? void 0 : _window2.localStorage.getItem(SUGGESTED_LS_KEY)) != null ? _window$localStorage$ : '[]');
+
+    if (mode === SuggestionMode.FREQUENT) {
+      return recent.sort(function (a, b) {
+        return b.count - a.count;
+      });
+    }
+
+    return recent;
+  } catch (_unused) {
+    return [];
+  }
+}
+function setsuggested(emoji, skinTone) {
+  var recent = getsuggested();
+  var unified = emojiUnified(emoji, skinTone);
+  var originalUnified = emojiUnified(emoji);
+  var existing = recent.find(function (_ref) {
+    var u = _ref.unified;
+    return u === unified;
+  });
+  var nextList;
 
   if (existing) {
     nextList = [existing].concat(recent.filter(function (i) {
@@ -15371,30 +15642,6 @@ function setsuggested(emoji, skinTone) {
   }
 }
 
-function useCloseAllOpenToggles() {
-  var _useEmojiVariationPic = useEmojiVariationPickerState(),
-      variationPicker = _useEmojiVariationPic[0],
-      setVariationPicker = _useEmojiVariationPic[1];
-
-  var _useSkinToneFanOpenSt = useSkinToneFanOpenState(),
-      skinToneFanOpen = _useSkinToneFanOpenSt[0],
-      setSkinToneFanOpen = _useSkinToneFanOpenSt[1];
-
-  var closeAllOpenToggles = React.useCallback(function () {
-    if (variationPicker) {
-      setVariationPicker(null);
-    }
-
-    if (skinToneFanOpen) {
-      setSkinToneFanOpen(false);
-    }
-  }, [[variationPicker, skinToneFanOpen]]);
-  return {
-    closeAllOpenToggles: closeAllOpenToggles,
-    dependencyArray: [variationPicker, skinToneFanOpen]
-  };
-}
-
 function preloadEmoji(emoji, emojiStyle) {
   var unified = emojiUnified(emoji);
 
@@ -15415,6 +15662,27 @@ function preloadImage(url) {
   image.src = url;
 }
 
+function useCloseAllOpenToggles() {
+  var _useEmojiVariationPic = useEmojiVariationPickerState(),
+      variationPicker = _useEmojiVariationPic[0],
+      setVariationPicker = _useEmojiVariationPic[1];
+
+  var _useSkinToneFanOpenSt = useSkinToneFanOpenState(),
+      skinToneFanOpen = _useSkinToneFanOpenSt[0],
+      setSkinToneFanOpen = _useSkinToneFanOpenSt[1];
+
+  var closeAllOpenToggles = React.useCallback(function () {
+    if (variationPicker) {
+      setVariationPicker(null);
+    }
+
+    if (skinToneFanOpen) {
+      setSkinToneFanOpen(false);
+    }
+  }, [variationPicker, skinToneFanOpen, setVariationPicker, setSkinToneFanOpen]);
+  return closeAllOpenToggles;
+}
+
 var mouseDownTimer;
 function useMouseDownHandlers(BodyRef) {
   var preloading = React.useRef(false);
@@ -15424,9 +15692,7 @@ function useMouseDownHandlers(BodyRef) {
   var _useEmojiVariationPic = useEmojiVariationPickerState(),
       setEmojiVariationPicker = _useEmojiVariationPic[1];
 
-  var _useCloseAllOpenToggl = useCloseAllOpenToggles(),
-      closeAllOpenToggles = _useCloseAllOpenToggl.closeAllOpenToggles,
-      dependencyArray = _useCloseAllOpenToggl.dependencyArray;
+  var closeAllOpenToggles = useCloseAllOpenToggles();
 
   var _useActiveSkinToneSta = useActiveSkinToneState(),
       activeSkinTone = _useActiveSkinToneSta[0];
@@ -15437,29 +15703,7 @@ function useMouseDownHandlers(BodyRef) {
   var _useUpdateSuggested = useUpdateSuggested(),
       updateSuggested = _useUpdateSuggested[1];
 
-  React.useEffect(function () {
-    if (!BodyRef.current) {
-      return;
-    }
-
-    var bodyRef = BodyRef.current;
-    bodyRef.addEventListener('click', onClick, {
-      passive: true
-    });
-    bodyRef.addEventListener('mousedown', onMouseDown, {
-      passive: true
-    });
-    bodyRef.addEventListener('mouseup', onMouseUp, {
-      passive: true
-    });
-    return function () {
-      bodyRef == null ? void 0 : bodyRef.removeEventListener('click', onClick);
-      bodyRef == null ? void 0 : bodyRef.removeEventListener('mousedown', onMouseDown);
-      bodyRef == null ? void 0 : bodyRef.removeEventListener('mouseup', onMouseUp);
-    };
-  }, [BodyRef].concat(dependencyArray));
-
-  function onClick(event) {
+  var onClick = React.useCallback(function onClick(event) {
     if (disallowClickRef.current) {
       return;
     }
@@ -15478,9 +15722,8 @@ function useMouseDownHandlers(BodyRef) {
     updateSuggested();
     setsuggested(emoji, skinToneToUse);
     onEmojiClick(emojiClickOutput(emoji, skinToneToUse), event);
-  }
-
-  function onMouseDown(event) {
+  }, [activeSkinTone, closeAllOpenToggles, disallowClickRef, onEmojiClick, updateSuggested]);
+  var onMouseDown = React.useCallback(function onMouseDown(event) {
     var _window, _window2;
 
     if (mouseDownTimer) {
@@ -15508,9 +15751,8 @@ function useMouseDownHandlers(BodyRef) {
       setAnchoredEmojiRef(event.target);
       setEmojiVariationPicker(emoji);
     }, 500);
-  }
-
-  function onMouseUp() {
+  }, [disallowClickRef, closeAllOpenToggles, setAnchoredEmojiRef, emojiStyle, setEmojiVariationPicker]);
+  var onMouseUp = React.useCallback(function onMouseUp() {
     preloading.current = false;
 
     if (mouseDownTimer) {
@@ -15526,7 +15768,28 @@ function useMouseDownHandlers(BodyRef) {
         disallowClickRef.current = false;
       });
     }
-  }
+  }, [disallowClickRef]);
+  React.useEffect(function () {
+    if (!BodyRef.current) {
+      return;
+    }
+
+    var bodyRef = BodyRef.current;
+    bodyRef.addEventListener('click', onClick, {
+      passive: true
+    });
+    bodyRef.addEventListener('mousedown', onMouseDown, {
+      passive: true
+    });
+    bodyRef.addEventListener('mouseup', onMouseUp, {
+      passive: true
+    });
+    return function () {
+      bodyRef == null ? void 0 : bodyRef.removeEventListener('click', onClick);
+      bodyRef == null ? void 0 : bodyRef.removeEventListener('mousedown', onMouseDown);
+      bodyRef == null ? void 0 : bodyRef.removeEventListener('mouseup', onMouseUp);
+    };
+  }, [BodyRef, onClick, onMouseDown, onMouseUp]);
 }
 
 function emojiFromEvent(event) {
@@ -15554,10 +15817,7 @@ function emojiClickOutput(emoji, activeSkinTone) {
 }
 
 function useOnScroll(BodyRef) {
-  var _useCloseAllOpenToggl = useCloseAllOpenToggles(),
-      closeAllOpenToggles = _useCloseAllOpenToggl.closeAllOpenToggles,
-      dependencyArray = _useCloseAllOpenToggl.dependencyArray;
-
+  var closeAllOpenToggles = useCloseAllOpenToggles();
   React.useEffect(function () {
     var bodyRef = BodyRef.current;
 
@@ -15576,18 +15836,9 @@ function useOnScroll(BodyRef) {
     return function () {
       bodyRef == null ? void 0 : bodyRef.removeEventListener('scroll', onScroll);
     };
-  }, [].concat(dependencyArray, [BodyRef, closeAllOpenToggles]));
+  }, [BodyRef, closeAllOpenToggles]);
 }
 
-var ClassNames;
-
-(function (ClassNames) {
-  ClassNames["hiddenOnSearch"] = "epr-hidden-on-search";
-  ClassNames["searchActive"] = "epr-search-active";
-  ClassNames["hidden"] = "epr-hidden";
-  ClassNames["visible"] = "epr-visible";
-})(ClassNames || (ClassNames = {}));
-
 var emojiRef = {};
 function getEmojiRef(unified) {
   emojiRef[unified] = emojiRef[unified] || {
@@ -15629,33 +15880,52 @@ function useSetFilterRef() {
   };
 }
 
+function useClearSearch() {
+  var SearchInputRef = useSearchInputRef();
+
+  var _useSearchTermState = useSearchTermState(),
+      setSearchTerm = _useSearchTermState[1];
+
+  return function clearSearch() {
+    if (SearchInputRef.current) {
+      SearchInputRef.current.value = '';
+    }
+
+    setSearchTerm('');
+  };
+}
+function useAppendSearch() {
+  var SearchInputRef = useSearchInputRef();
+
+  var _useSearchTermState2 = useSearchTermState(),
+      setSearchTerm = _useSearchTermState2[1];
+
+  return function appendSearch(str) {
+    if (SearchInputRef.current) {
+      SearchInputRef.current.value = SearchInputRef.current.value + str;
+      setSearchTerm(SearchInputRef.current.value);
+    }
+
+    setSearchTerm(str);
+  };
+}
 function useFilter() {
-  var SearchInputRef = React.useRef(null);
+  var SearchInputRef = useSearchInputRef();
   var filterRef = useFilterRef();
   var setFilterRef = useSetFilterRef();
 
-  var _useSearchTermState = useSearchTermState(),
-      searchTerm = _useSearchTermState[0],
-      setSearchTerm = _useSearchTermState[1];
+  var _useSearchTermState3 = useSearchTermState(),
+      searchTerm = _useSearchTermState3[0],
+      setSearchTerm = _useSearchTermState3[1];
 
   var PickerMainRef = usePickerMainRef();
   return {
     onChange: onChange,
     searchTerm: searchTerm,
-    clearSearch: clearSearch,
     SearchInputRef: SearchInputRef
   };
 
-  function clearSearch() {
-    if (SearchInputRef.current) {
-      SearchInputRef.current.value = '';
-    }
-
-    onChange('');
-  }
-
   function onChange(nextValue) {
-    scrollTo(PickerMainRef.current, 0);
     var filter = filterRef.current;
 
     if (filter != null && filter[nextValue] || nextValue.length <= 1) {
@@ -15696,7 +15966,9 @@ function useFilter() {
       showElement(element);
     });
     requestAnimationFrame(function () {
-      setSearchTerm(searchTerm);
+      setSearchTerm(searchTerm).then(function () {
+        scrollTo(PickerMainRef.current, 0);
+      });
     });
   }
 }
@@ -15727,8 +15999,8 @@ function useIsEmojiFiltered() {
   var _useFilterRef = useFilterRef(),
       filter = _useFilterRef.current;
 
-  var _useSearchTermState2 = useSearchTermState(),
-      searchTerm = _useSearchTermState2[0];
+  var _useSearchTermState4 = useSearchTermState(),
+      searchTerm = _useSearchTermState4[0];
 
   return function (unified) {
     return isEmojiFilteredBySearchTerm(unified, filter, searchTerm);
@@ -15778,23 +16050,6 @@ function useIsEmojiHidden() {
   };
 }
 
-function EmojiCategory(_ref) {
-  var _clsx;
-
-  var categoryConfig = _ref.categoryConfig,
-      children = _ref.children,
-      hidden = _ref.hidden,
-      hiddenOnSearch = _ref.hiddenOnSearch;
-  var category = categoryFromCategoryConfig(categoryConfig);
-  var categoryName = categoryNameFromCategoryConfig(categoryConfig);
-  return React.createElement("li", {
-    className: clsx('epr-emoji-category', (_clsx = {}, _clsx[ClassNames.hidden] = hidden, _clsx[ClassNames.hiddenOnSearch] = hiddenOnSearch, _clsx)),
-    "data-name": category
-  }, React.createElement("div", {
-    className: "epr-emoji-category-label"
-  }, categoryName), children);
-}
-
 function Emoji(_ref) {
   var _clsx;
 
@@ -15819,7 +16074,7 @@ function Emoji(_ref) {
     unified: unified
   };
   return React.createElement("button", {
-    className: clsx('epr-emoji', (_clsx = {}, _clsx[ClassNames.hidden] = hidden, _clsx[ClassNames.visible] = !hidden, _clsx['epr-emoji-has-variations'] = hasVariations && showVariations, _clsx)),
+    className: clsx(ClassNames.emoji, (_clsx = {}, _clsx[ClassNames.hidden] = hidden, _clsx[ClassNames.visible] = !hidden, _clsx['epr-emoji-has-variations'] = hasVariations && showVariations, _clsx)),
     "data-unified": unified,
     // @ts-ignore - let's ignore the fact this is not a real react ref, ok?
     ref: emojiRef
@@ -15867,6 +16122,25 @@ function EmojiImg(_ref3) {
   }
 }
 
+function EmojiCategory(_ref) {
+  var _clsx;
+
+  var categoryConfig = _ref.categoryConfig,
+      children = _ref.children,
+      hidden = _ref.hidden,
+      hiddenOnSearch = _ref.hiddenOnSearch;
+  var category = categoryFromCategoryConfig(categoryConfig);
+  var categoryName = categoryNameFromCategoryConfig(categoryConfig);
+  return React.createElement("li", {
+    className: clsx(ClassNames.category, (_clsx = {}, _clsx[ClassNames.hidden] = hidden, _clsx[ClassNames.hiddenOnSearch] = hiddenOnSearch, _clsx)),
+    "data-name": category
+  }, React.createElement("div", {
+    className: "epr-emoji-category-label"
+  }, categoryName), React.createElement("div", {
+    className: "epr-emoji-category-content"
+  }, children));
+}
+
 function Suggested(_ref) {
   var categoryConfig = _ref.categoryConfig;
 
@@ -15881,7 +16155,8 @@ function Suggested(_ref) {
     var _getsuggested;
 
     return (_getsuggested = getsuggested(suggestedEmojisModeConfig)) != null ? _getsuggested : [];
-  }, [suggestedUpdated]);
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [suggestedUpdated, suggestedEmojisModeConfig]);
   var emojiStyle = useEmojiStyleConfig();
   var hidden = !!(searchTerm || suggested.length === 0);
   return React.createElement(EmojiCategory, {
@@ -15900,7 +16175,8 @@ function Suggested(_ref) {
       unified: suggestedItem.unified,
       emojiStyle: emojiStyle,
       emoji: emoji,
-      key: suggestedItem.unified
+      key: suggestedItem.unified,
+      hidden: hidden
     });
   }));
 }
@@ -16041,7 +16317,7 @@ function usePointerStyle(VariationPickerRef) {
     }
 
     if (AnchoredEmojiRef.current) {
-      var button = buttonFromEmoji(AnchoredEmojiRef.current);
+      var button = buttonFromTarget(AnchoredEmojiRef.current);
       var offsetLeft = emojiTruOffsetLeft(button);
 
       if (!button) {
@@ -16083,7 +16359,7 @@ function useVariationPickerTop(VariationPickerRef) {
       var _bodyRef$scrollTop;
 
       var bodyRef = BodyRef.current;
-      var button = buttonFromEmoji(AnchoredEmojiRef.current);
+      var button = buttonFromTarget(AnchoredEmojiRef.current);
       var buttonHeight = elementHeight(button);
       emojiOffsetTop = emojiTrueOffsetTop(button);
       var scrollTop = (_bodyRef$scrollTop = bodyRef == null ? void 0 : bodyRef.scrollTop) != null ? _bodyRef$scrollTop : 0;
@@ -16109,7 +16385,32 @@ function Body() {
   }, React.createElement(EmojiVariationPicker, null), React.createElement(EmojiList, null));
 }
 
-function useEmojiMouseEnter(allow, setHoveredEmoji) {
+function focusElement(element) {
+  if (!element) {
+    return;
+  }
+
+  requestAnimationFrame(function () {
+    element.focus();
+  });
+}
+function focusPrevElementSibling(element) {
+  if (!element) return;
+  var prev = element.previousElementSibling;
+  focusElement(prev);
+}
+function focusNextElementSibling(element) {
+  if (!element) return;
+  var next = element.nextElementSibling;
+  focusElement(next);
+}
+function focusFirstElementChild(element) {
+  if (!element) return;
+  var first = element.firstElementChild;
+  focusElement(first);
+}
+
+function useEmojiPreviewEvents(allow, setPreviewEmoji) {
   var BodyRef = useBodyRef();
   React.useEffect(function () {
     if (!allow) {
@@ -16117,40 +16418,71 @@ function useEmojiMouseEnter(allow, setHoveredEmoji) {
     }
 
     var bodyRef = BodyRef.current;
+    bodyRef == null ? void 0 : bodyRef.addEventListener('keydown', onEscape, {
+      passive: true
+    });
     bodyRef == null ? void 0 : bodyRef.addEventListener('mouseover', onMouseOver, {
       passive: true
     });
-    bodyRef == null ? void 0 : bodyRef.addEventListener('mouseout', onMouseOut, {
+    bodyRef == null ? void 0 : bodyRef.addEventListener('focus', onEnter, true);
+    bodyRef == null ? void 0 : bodyRef.addEventListener('mouseout', onLeave, {
       passive: true
     });
-    return function () {
-      bodyRef == null ? void 0 : bodyRef.removeEventListener('mouseover', onMouseOver);
-      bodyRef == null ? void 0 : bodyRef.removeEventListener('mouseout', onMouseOut);
-    };
-  }, [BodyRef.current]);
+    bodyRef == null ? void 0 : bodyRef.addEventListener('blur', onLeave, true);
 
-  function onMouseOver(e) {
-    var button = buttonFromEmoji(e.target);
+    function onEnter(e) {
+      var button = buttonFromTarget(e.target);
 
-    if (!button) {
-      return onMouseOut();
+      if (!button) {
+        return onLeave();
+      }
+
+      var unified = unifiedFromEmojiElement(button);
+      var originalUnified = originalUnifiedFromEmojiElement(button);
+
+      if (!unified || !originalUnified) {
+        return onLeave();
+      }
+
+      setPreviewEmoji({
+        unified: unified,
+        originalUnified: originalUnified
+      });
     }
 
-    var unified = unifiedFromEmojiElement(button);
-    var originalUnified = originalUnifiedFromEmojiElement(button);
+    function onLeave(e) {
+      if (e) {
+        var button = buttonFromTarget(e.target);
+
+        if (button) {
+          return;
+        }
+      }
 
-    if (!unified || !originalUnified) {
-      return onMouseOut();
+      setPreviewEmoji(null);
     }
 
-    setHoveredEmoji({
-      unified: unified,
-      originalUnified: originalUnified
-    });
-  }
+    function onEscape(e) {
+      if (e.key === 'Escape') {
+        setPreviewEmoji(null);
+      }
+    }
 
-  function onMouseOut() {
-    setHoveredEmoji(null);
+    return function () {
+      bodyRef == null ? void 0 : bodyRef.removeEventListener('mouseover', onMouseOver);
+      bodyRef == null ? void 0 : bodyRef.removeEventListener('mouseout', onLeave);
+      bodyRef == null ? void 0 : bodyRef.removeEventListener('focus', onEnter, true);
+      bodyRef == null ? void 0 : bodyRef.removeEventListener('blur', onLeave, true);
+      bodyRef == null ? void 0 : bodyRef.removeEventListener('keydown', onEscape);
+    };
+  }, [BodyRef, allow, setPreviewEmoji]);
+
+  function onMouseOver(e) {
+    var button = buttonFromTarget(e.target);
+
+    if (button) {
+      focusElement(button);
+    }
   }
 }
 
@@ -16175,34 +16507,34 @@ function Flex(_ref) {
 }
 
 function Preview() {
-  var showPreview = useShowPreviewConfig();
+  var previewConfig = usePreviewConfig();
 
   var _useState = React.useState(null),
-      hoveredEmoji = _useState[0],
-      setHoveredEmoji = _useState[1];
+      previewEmoji = _useState[0],
+      setPreviewEmoji = _useState[1];
 
   var emojiStyle = useEmojiStyleConfig();
 
   var _useEmojiVariationPic = useEmojiVariationPickerState(),
       variationPickerEmoji = _useEmojiVariationPic[0];
 
-  useEmojiMouseEnter(showPreview, setHoveredEmoji);
+  useEmojiPreviewEvents(previewConfig.showPreview, setPreviewEmoji);
 
-  if (!showPreview) {
+  if (!previewConfig.showPreview) {
     return null;
   }
 
-  var emoji = emojiByUnified(hoveredEmoji == null ? void 0 : hoveredEmoji.originalUnified);
-  var show = emoji != null && hoveredEmoji != null;
+  var emoji = emojiByUnified(previewEmoji == null ? void 0 : previewEmoji.originalUnified);
+  var show = emoji != null && previewEmoji != null;
   return React.createElement(Flex, {
     className: "epr-preview"
   }, React.createElement(PreviewContent, null));
 
   function PreviewContent() {
-    var defaultEmoji = asEmoji(variationPickerEmoji != null ? variationPickerEmoji : emojiByUnified('1f60a'));
-    var defaultText = variationPickerEmoji ? emojiName(variationPickerEmoji) : "What's your mood?";
+    var defaultEmoji = asEmoji(variationPickerEmoji != null ? variationPickerEmoji : emojiByUnified(previewConfig.defaultEmoji));
+    var defaultText = variationPickerEmoji ? emojiName(variationPickerEmoji) : previewConfig.defaultCaption;
     return React.createElement(React.Fragment, null, React.createElement("div", null, show ? React.createElement(Emoji, {
-      unified: hoveredEmoji == null ? void 0 : hoveredEmoji.unified,
+      unified: previewEmoji == null ? void 0 : previewEmoji.unified,
       emoji: asEmoji(emoji),
       showVariations: false,
       emojiStyle: emojiStyle,
@@ -16236,19 +16568,21 @@ function Relative(_ref) {
 
 function CategoryNavigation() {
   var categoriesConfig = useCategoriesConfig();
+  var CategoryNavigationRef = useCategoryNavigationRef();
 
   var _useActiveCategorySta = useActiveCategoryState(),
       activeCategory = _useActiveCategorySta[0],
       setActiveCategoryAndScroll = _useActiveCategorySta[2];
 
   return React.createElement("div", {
-    className: "epr-category-nav"
+    className: "epr-category-nav",
+    ref: CategoryNavigationRef
   }, categoriesConfig.map(function (categoryConfig) {
     var _clsx;
 
     var category = categoryFromCategoryConfig(categoryConfig);
     return React.createElement("button", {
-      className: clsx('epr-cat-btn', "epr-icn-" + category, (_clsx = {}, _clsx['epr-active'] = category === activeCategory, _clsx)),
+      className: clsx('epr-cat-btn', "epr-icn-" + category, (_clsx = {}, _clsx[ClassNames.active] = category === activeCategory, _clsx)),
       key: category,
       onClick: function onClick() {
         return setActiveCategoryAndScroll(category);
@@ -16258,17 +16592,15 @@ function CategoryNavigation() {
 }
 
 function Search() {
-  var _useCloseAllOpenToggl = useCloseAllOpenToggles(),
-      closeAllOpenToggles = _useCloseAllOpenToggl.closeAllOpenToggles;
-
+  var closeAllOpenToggles = useCloseAllOpenToggles();
+  var SearchInputRef = useSearchInputRef();
+  var clearSearch = useClearSearch();
   var placeholder = useSearchPlaceHolderConfig();
   var autoFocus = useAutoFocusSearchConfig();
 
   var _useFilter = useFilter(),
       _onChange = _useFilter.onChange,
-      searchTerm = _useFilter.searchTerm,
-      clearSearch = _useFilter.clearSearch,
-      SearchInputRef = _useFilter.SearchInputRef;
+      searchTerm = _useFilter.searchTerm;
 
   return React.createElement(Relative, {
     className: "epr-search-container"
@@ -16293,6 +16625,7 @@ function Search() {
 }
 
 function SkinTonePicker() {
+  var SkinTonePickerRef = useSkinTonePickerRef();
   var isDisabled = useSkinTonesDisabledConfig();
 
   var _useSkinToneFanOpenSt = useSkinToneFanOpenState(),
@@ -16303,8 +16636,7 @@ function SkinTonePicker() {
       activeSkinTone = _useActiveSkinToneSta[0],
       setActiveSkinTone = _useActiveSkinToneSta[1];
 
-  var _useCloseAllOpenToggl = useCloseAllOpenToggles(),
-      closeAllOpenToggles = _useCloseAllOpenToggl.closeAllOpenToggles;
+  var closeAllOpenToggles = useCloseAllOpenToggles();
 
   if (isDisabled) {
     return null;
@@ -16318,7 +16650,8 @@ function SkinTonePicker() {
     className: "epr-skin-tone-select",
     onClick: function onClick() {
       return setIsOpen(!isOpen);
-    }
+    },
+    ref: SkinTonePickerRef
   }, skinToneVariations.map(function (skinToneVariation, i) {
     var _clsx;
 
@@ -16332,7 +16665,8 @@ function SkinTonePicker() {
         closeAllOpenToggles();
       },
       key: skinToneVariation,
-      className: clsx("epr-tone-" + skinToneVariation, 'epr-tone', (_clsx = {}, _clsx['epr-active'] = active, _clsx))
+      className: clsx("epr-tone-" + skinToneVariation, 'epr-tone', (_clsx = {}, _clsx[ClassNames.active] = active, _clsx)),
+      tabIndex: isOpen ? 0 : -1
     });
   })));
 }
@@ -16352,6 +16686,487 @@ function useIsSearchMode() {
   return !!searchTerm;
 }
 
+function getActiveElement() {
+  return document.activeElement;
+}
+
+function focusFirstVisibleEmoji(parent) {
+  focusElement(firstVisibleEmoji(parent));
+}
+function focusAndClickFirstVisibleEmoji(parent) {
+  var firstEmoji = firstVisibleEmoji(parent);
+  focusElement(firstEmoji);
+  firstEmoji == null ? void 0 : firstEmoji.click();
+}
+function focusLastVisibleEmoji(parent) {
+  focusElement(lastVisibleEmoji(parent));
+}
+function focusNextVisibleEmoji(element) {
+  if (!element) {
+    return;
+  }
+
+  var next = nextVisibleEmoji(element);
+
+  if (!next) {
+    return focusFirstVisibleEmoji(nextCategory(element));
+  }
+
+  focusElement(next);
+}
+function focusPrevVisibleEmoji(element) {
+  if (!element) {
+    return;
+  }
+
+  var prev = prevVisibleEmoji(element);
+
+  if (!prev) {
+    return focusLastVisibleEmoji(prevCategory(element));
+  }
+
+  focusElement(prev);
+}
+function focusVisibleEmojiOneRowUp(element, exitUp) {
+  if (!element) {
+    return;
+  }
+
+  var prev = visibleEmojiOneRowUp(element);
+
+  if (!prev) {
+    return exitUp();
+  }
+
+  focusElement(prev);
+}
+function focusVisibleEmojiOneRowDown(element) {
+  if (!element) {
+    return;
+  }
+
+  var next = visibleEmojiOneRowDown(element);
+  return focusElement(next);
+}
+
+function visibleEmojiOneRowUp(element) {
+  if (!element) {
+    return null;
+  }
+
+  var category = closestCategory(element);
+  var indexInRow = elementIndexInRow(category, element);
+  var row = rowNumber(category, element);
+  var countInRow = elementCountInRow(category, element);
+
+  if (row === 0) {
+    var prevVisibleCategory = prevCategory(category);
+
+    if (!prevVisibleCategory) {
+      return null;
+    }
+
+    return getElementInRow(allVisibleEmojis(prevVisibleCategory), -1, // last row
+    countInRow, indexInRow);
+  }
+
+  return getElementInPrevRow(allVisibleEmojis(category), row, countInRow, indexInRow);
+}
+
+function visibleEmojiOneRowDown(element) {
+  if (!element) {
+    return null;
+  }
+
+  var category = closestCategory(element);
+  var indexInRow = elementIndexInRow(category, element);
+  var row = rowNumber(category, element);
+  var countInRow = elementCountInRow(category, element);
+
+  if (!hasNextRow(category, element)) {
+    var nextVisibleCategory = nextCategory(category);
+
+    if (!nextVisibleCategory) {
+      return null;
+    }
+
+    return getElementInRow(allVisibleEmojis(nextVisibleCategory), 0, countInRow, indexInRow);
+  }
+
+  var itemInNextRow = getElementInNextRow(allVisibleEmojis(category), row, countInRow, indexInRow);
+  return itemInNextRow;
+}
+
+function useFocusSearchInput() {
+  var SearchInputRef = useSearchInputRef();
+  return React.useCallback(function () {
+    focusElement(SearchInputRef.current);
+  }, [SearchInputRef]);
+}
+function useFocusSkinTonePicker() {
+  var SkinTonePickerRef = useSkinTonePickerRef();
+  return React.useCallback(function () {
+    if (!SkinTonePickerRef.current) {
+      return;
+    }
+
+    focusFirstElementChild(SkinTonePickerRef.current);
+  }, [SkinTonePickerRef]);
+}
+function useFocusCategoryNavigation() {
+  var CategoryNavigationRef = useCategoryNavigationRef();
+  return React.useCallback(function () {
+    if (!CategoryNavigationRef.current) {
+      return;
+    }
+
+    focusFirstElementChild(CategoryNavigationRef.current);
+  }, [CategoryNavigationRef]);
+}
+
+var KeyboardEvents;
+
+(function (KeyboardEvents) {
+  KeyboardEvents["ArrowDown"] = "ArrowDown";
+  KeyboardEvents["ArrowUp"] = "ArrowUp";
+  KeyboardEvents["ArrowLeft"] = "ArrowLeft";
+  KeyboardEvents["ArrowRight"] = "ArrowRight";
+  KeyboardEvents["Escape"] = "Escape";
+  KeyboardEvents["Enter"] = "Enter";
+})(KeyboardEvents || (KeyboardEvents = {}));
+
+function useKeyboardNavigation() {
+  usePickerMainKeyboardEvents();
+  useSearchInputKeyboardEvents();
+  useSkinTonePickerKeyboardEvents();
+  useCategoryNavigationKeyboardEvents();
+  useBodyKeyboardEvents();
+}
+
+function usePickerMainKeyboardEvents() {
+  var PickerMainRef = usePickerMainRef();
+  var clearSearch = useClearSearch();
+  var scrollTo = useScrollTo();
+  var SearchInputRef = useSearchInputRef();
+  var focusSearchInput = useFocusSearchInput();
+  var closeAllOpenToggles = useCloseAllOpenToggles();
+  var onKeyDown = React.useMemo(function () {
+    return function onKeyDown(event) {
+      var key = event.key;
+
+      if (key === KeyboardEvents.Escape) {
+        event.preventDefault();
+        clearSearch();
+        closeAllOpenToggles();
+        scrollTo(0);
+        focusSearchInput();
+      }
+    };
+  }, [scrollTo, clearSearch, closeAllOpenToggles, focusSearchInput]);
+  React.useEffect(function () {
+    var current = PickerMainRef.current;
+
+    if (!current) {
+      return;
+    }
+
+    current.addEventListener('keydown', onKeyDown);
+    return function () {
+      current.removeEventListener('keydown', onKeyDown);
+    };
+  }, [PickerMainRef, SearchInputRef, scrollTo, onKeyDown]);
+}
+
+function useSearchInputKeyboardEvents() {
+  var focusSkinTonePicker = useFocusSkinTonePicker();
+  var PickerMainRef = usePickerMainRef();
+  var BodyRef = useBodyRef();
+  var SearchInputRef = useSearchInputRef();
+
+  var _useSkinToneFanOpenSt = useSkinToneFanOpenState(),
+      setSkinToneFanOpenState = _useSkinToneFanOpenSt[1];
+
+  var goDownFromSearchInput = useGoDownFromSearchInput();
+  var onKeyDown = React.useMemo(function () {
+    return function onKeyDown(event) {
+      var key = event.key;
+
+      switch (key) {
+        case KeyboardEvents.ArrowRight:
+          event.preventDefault();
+          setSkinToneFanOpenState(true);
+          focusSkinTonePicker();
+          break;
+
+        case KeyboardEvents.ArrowDown:
+          event.preventDefault();
+          goDownFromSearchInput();
+          break;
+
+        case KeyboardEvents.Enter:
+          event.preventDefault();
+          focusAndClickFirstVisibleEmoji(BodyRef.current);
+          break;
+      }
+    };
+  }, [focusSkinTonePicker, goDownFromSearchInput, setSkinToneFanOpenState, BodyRef]);
+  React.useEffect(function () {
+    var current = SearchInputRef.current;
+
+    if (!current) {
+      return;
+    }
+
+    current.addEventListener('keydown', onKeyDown);
+    return function () {
+      current.removeEventListener('keydown', onKeyDown);
+    };
+  }, [PickerMainRef, SearchInputRef, onKeyDown]);
+}
+
+function useSkinTonePickerKeyboardEvents() {
+  var SkinTonePickerRef = useSkinTonePickerRef();
+  var focusSearchInput = useFocusSearchInput();
+  var SearchInputRef = useSearchInputRef();
+  var goDownFromSearchInput = useGoDownFromSearchInput();
+
+  var _useSkinToneFanOpenSt2 = useSkinToneFanOpenState(),
+      isOpen = _useSkinToneFanOpenSt2[0],
+      setIsOpen = _useSkinToneFanOpenSt2[1];
+
+  var onType = useOnType();
+  var onKeyDown = React.useMemo(function () {
+    return function onKeyDown(event) {
+      var key = event.key;
+
+      switch (key) {
+        case KeyboardEvents.ArrowLeft:
+          event.preventDefault();
+
+          if (!isOpen) {
+            return focusSearchInput();
+          }
+
+          focusNextSkinTone(focusSearchInput);
+          break;
+
+        case KeyboardEvents.ArrowRight:
+          event.preventDefault();
+
+          if (!isOpen) {
+            return focusSearchInput();
+          }
+
+          focusPrevSkinTone();
+          break;
+
+        case KeyboardEvents.ArrowDown:
+          event.preventDefault();
+
+          if (isOpen) {
+            setIsOpen(false);
+          }
+
+          goDownFromSearchInput();
+          break;
+
+        default:
+          onType(event);
+          break;
+      }
+    };
+  }, [isOpen, focusSearchInput, setIsOpen, goDownFromSearchInput, onType]);
+  React.useEffect(function () {
+    var current = SkinTonePickerRef.current;
+
+    if (!current) {
+      return;
+    }
+
+    current.addEventListener('keydown', onKeyDown);
+    return function () {
+      current.removeEventListener('keydown', onKeyDown);
+    };
+  }, [SkinTonePickerRef, SearchInputRef, isOpen, onKeyDown]);
+}
+
+function useCategoryNavigationKeyboardEvents() {
+  var focusSearchInput = useFocusSearchInput();
+  var CategoryNavigationRef = useCategoryNavigationRef();
+  var BodyRef = useBodyRef();
+  var onType = useOnType();
+  var onKeyDown = React.useMemo(function () {
+    return function onKeyDown(event) {
+      var key = event.key;
+
+      switch (key) {
+        case KeyboardEvents.ArrowUp:
+          event.preventDefault();
+          focusSearchInput();
+          break;
+
+        case KeyboardEvents.ArrowRight:
+          event.preventDefault();
+          focusNextElementSibling(getActiveElement());
+          break;
+
+        case KeyboardEvents.ArrowLeft:
+          event.preventDefault();
+          focusPrevElementSibling(getActiveElement());
+          break;
+
+        case KeyboardEvents.ArrowDown:
+          event.preventDefault();
+          focusFirstVisibleEmoji(BodyRef.current);
+          break;
+
+        default:
+          onType(event);
+          break;
+      }
+    };
+  }, [BodyRef, focusSearchInput, onType]);
+  React.useEffect(function () {
+    var current = CategoryNavigationRef.current;
+
+    if (!current) {
+      return;
+    }
+
+    current.addEventListener('keydown', onKeyDown);
+    return function () {
+      current.removeEventListener('keydown', onKeyDown);
+    };
+  }, [CategoryNavigationRef, BodyRef, onKeyDown]);
+}
+
+function useBodyKeyboardEvents() {
+  var BodyRef = useBodyRef();
+  var goUpFromBody = useGoUpFromBody();
+  var onType = useOnType();
+  var onKeyDown = React.useMemo(function () {
+    return function onKeyDown(event) {
+      var key = event.key;
+      var activeElement = buttonFromTarget(getActiveElement());
+
+      switch (key) {
+        case KeyboardEvents.ArrowRight:
+          event.preventDefault();
+          focusNextVisibleEmoji(activeElement);
+          break;
+
+        case KeyboardEvents.ArrowLeft:
+          event.preventDefault();
+          focusPrevVisibleEmoji(activeElement);
+          break;
+
+        case KeyboardEvents.ArrowDown:
+          event.preventDefault();
+          focusVisibleEmojiOneRowDown(activeElement);
+          break;
+
+        case KeyboardEvents.ArrowUp:
+          event.preventDefault();
+          focusVisibleEmojiOneRowUp(activeElement, goUpFromBody);
+          break;
+
+        default:
+          onType(event);
+          break;
+      }
+    };
+  }, [goUpFromBody, onType]);
+  React.useEffect(function () {
+    var current = BodyRef.current;
+
+    if (!current) {
+      return;
+    }
+
+    current.addEventListener('keydown', onKeyDown);
+    return function () {
+      current.removeEventListener('keydown', onKeyDown);
+    };
+  }, [BodyRef, onKeyDown]);
+}
+
+function useGoDownFromSearchInput() {
+  var focusCategoryNavigation = useFocusCategoryNavigation();
+  var isSearchMode = useIsSearchMode();
+  var BodyRef = useBodyRef();
+  return React.useCallback(function goDownFromSearchInput() {
+    if (isSearchMode) {
+      return focusFirstVisibleEmoji(BodyRef.current);
+    }
+
+    return focusCategoryNavigation();
+  }, [BodyRef, focusCategoryNavigation, isSearchMode]);
+}
+
+function useGoUpFromBody() {
+  var focusSearchInput = useFocusSearchInput();
+  var focusCategoryNavigation = useFocusCategoryNavigation();
+  var isSearchMode = useIsSearchMode();
+  return React.useCallback(function goUpFromEmoji() {
+    if (isSearchMode) {
+      return focusSearchInput();
+    }
+
+    return focusCategoryNavigation();
+  }, [focusSearchInput, isSearchMode, focusCategoryNavigation]);
+}
+
+function focusNextSkinTone(exitLeft) {
+  var currentSkinTone = getActiveElement();
+
+  if (!currentSkinTone) {
+    return;
+  }
+
+  if (!hasNextElementSibling(currentSkinTone)) {
+    exitLeft();
+  }
+
+  focusNextElementSibling(currentSkinTone);
+}
+
+function focusPrevSkinTone() {
+  var currentSkinTone = getActiveElement();
+
+  if (!currentSkinTone) {
+    return;
+  }
+
+  focusPrevElementSibling(currentSkinTone);
+}
+
+function useOnType() {
+  var appendSearch = useAppendSearch();
+  var focusSearchInput = useFocusSearchInput();
+  var closeAllOpenToggles = useCloseAllOpenToggles();
+  return function onType(event) {
+    var key = event.key;
+
+    if (hasModifier(event)) {
+      return;
+    }
+
+    if (key.match(/(^[a-zA-Z0-9]$){1}/)) {
+      event.preventDefault();
+      closeAllOpenToggles();
+      focusSearchInput();
+      appendSearch(key);
+    }
+  };
+}
+
+function hasModifier(event) {
+  var metaKey = event.metaKey,
+      ctrlKey = event.ctrlKey,
+      altKey = event.altKey;
+  return metaKey || ctrlKey || altKey;
+}
+
 function PickerMain(_ref) {
   var children = _ref.children;
   return React.createElement(PickerContextProvider, null, React.createElement(PickerRootElement, null, children));
@@ -16364,6 +17179,7 @@ function PickerRootElement(_ref2) {
   var theme = useThemeConfig();
   var searchModeActive = useIsSearchMode();
   var PickerMainRef = usePickerMainRef();
+  useKeyboardNavigation();
   return React.createElement("aside", {
     className: clsx('EmojiPickerReact', 'epr-main', (_clsx = {}, _clsx[ClassNames.searchActive] = searchModeActive, _clsx['epr-dark-theme'] = theme === exports.Theme.DARK, _clsx)),
     ref: PickerMainRef
@@ -16396,6 +17212,7 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
   var _proto = ErrorBoundary.prototype;
 
   _proto.componentDidCatch = function componentDidCatch(error, errorInfo) {
+    // eslint-disable-next-line no-console
     console.error('Emoji Picker React failed to render:', error, errorInfo);
   };