emoji-picker-react 4.0.6 → 4.0.7

package/dist/emoji-picker-react.esm.js

@@ -1,6 +1,33 @@
 import { useRef, createElement, createContext, createRef, useContext, useState, useEffect, useCallback, Fragment, useMemo, Component } from 'react';
 import clsx from 'clsx';
 
+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["categoryContent"] = "epr-emoji-category-content";
+  ClassNames["emojiHasVariatios"] = "epr-emoji-has-variations";
+  ClassNames["scrollBody"] = "epr-body";
+  ClassNames["external"] = "__EmojiPicker__";
+})(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 = useRef(null);
@@ -316,19 +343,19 @@ function basePickerConfig() {
     categories: baseCategoriesConfig(),
     defaultSkinTone: SkinTones.NEUTRAL,
     emojiStyle: EmojiStyle.APPLE,
+    height: 450,
     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) {},
-    height: 450,
-    width: 350,
     previewConfig: _extends({}, basePreviewConfig),
     searchPlaceHolder: 'Search',
     skinTonesDisabled: false,
     suggestedEmojisMode: SuggestionMode.FREQUENT,
-    theme: Theme.LIGHT
+    theme: Theme.LIGHT,
+    width: 350
   };
 }
 var basePreviewConfig = {
@@ -15238,32 +15265,6 @@ function useOnMouseMove() {
   }, [BodyRef, allowMouseMove, isMouseDisallowed]);
 }
 
-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["categoryContent"] = "epr-emoji-category-content";
-  ClassNames["emojiHasVariatios"] = "epr-emoji-has-variations";
-  ClassNames["external"] = "__EmojiPicker__";
-})(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 elementCountInRow(parent, element) {
   if (!parent || !element) {
     return 0;
@@ -15393,19 +15394,54 @@ function elementHeight(element) {
   return (_element$clientHeight = element == null ? void 0 : element.clientHeight) != null ? _element$clientHeight : 0;
 }
 function emojiTrueOffsetTop(element) {
-  var _category$clientHeigh, _categoryWithoutLabel;
-
   if (!element) {
     return 0;
   }
 
   var button = buttonFromTarget(element);
-  var categoryWithoutLabel = closestCategoryContent(button);
-  var category = closestCategory(categoryWithoutLabel); // compensate for the label height
+  var category = closestCategory(button); // compensate for the label height
 
-  var labelHeight = ((_category$clientHeigh = category == null ? void 0 : category.clientHeight) != null ? _category$clientHeigh : 0) - ((_categoryWithoutLabel = categoryWithoutLabel == null ? void 0 : categoryWithoutLabel.clientHeight) != null ? _categoryWithoutLabel : 0);
+  var labelHeight = categoryLabelHeight(category);
   return elementOffsetTop(button) + elementOffsetTop(category) + labelHeight;
 }
+function categoryLabelHeight(category) {
+  var _category$clientHeigh, _categoryWithoutLabel;
+
+  if (!category) {
+    return 0;
+  }
+
+  var categoryWithoutLabel = category.querySelector(asSelectors(ClassNames.categoryContent));
+  return ((_category$clientHeigh = category == null ? void 0 : category.clientHeight) != null ? _category$clientHeigh : 0) - ((_categoryWithoutLabel = categoryWithoutLabel == null ? void 0 : categoryWithoutLabel.clientHeight) != null ? _categoryWithoutLabel : 0);
+}
+function isEmojiBehindLabel(emoji) {
+  if (!emoji) {
+    return false;
+  }
+
+  return emojiDistanceFromScrollTop(emoji) < categoryLabelHeight(closestCategory(emoji));
+}
+function queryScrollBody(root) {
+  return root ? root.matches(asSelectors(ClassNames.scrollBody)) ? root : root.querySelector(ClassNames.scrollBody) : null;
+}
+function emojiDistanceFromScrollTop(emoji) {
+  var _closestScrollBody$sc, _closestScrollBody;
+
+  if (!emoji) {
+    return 0;
+  }
+
+  return emojiTrueOffsetTop(emoji) - ((_closestScrollBody$sc = (_closestScrollBody = closestScrollBody(emoji)) == null ? void 0 : _closestScrollBody.scrollTop) != null ? _closestScrollBody$sc : 0);
+}
+function closestScrollBody(element) {
+  var _element$closest;
+
+  if (!element) {
+    return null;
+  }
+
+  return (_element$closest = element.closest(asSelectors(ClassNames.scrollBody))) != null ? _element$closest : null;
+}
 function emojiTruOffsetLeft(element) {
   var button = buttonFromTarget(element);
   var category = closestCategory(button);
@@ -15688,8 +15724,56 @@ function focusFirstElementChild(element) {
   focusElement(first);
 }
 
+function scrollTo(root, top) {
+  if (top === void 0) {
+    top = 0;
+  }
+
+  var $eprBody = queryScrollBody(root);
+
+  if (!$eprBody) {
+    return;
+  }
+
+  requestAnimationFrame(function () {
+    $eprBody.scrollTop = top + 1;
+  });
+}
+function scrollBy(root, by) {
+  var $eprBody = queryScrollBody(root);
+
+  if (!$eprBody) {
+    return;
+  }
+
+  requestAnimationFrame(function () {
+    $eprBody.scrollTop = $eprBody.scrollTop + by;
+  });
+}
+function useScrollTo() {
+  var BodyRef = useBodyRef();
+  return useCallback(function (top) {
+    requestAnimationFrame(function () {
+      if (BodyRef.current) {
+        BodyRef.current.scrollTop = top;
+      }
+    });
+  }, [BodyRef]);
+}
+function scrollEmojiAboveLabel(emoji) {
+  if (!isEmojiBehindLabel(emoji)) {
+    return;
+  }
+
+  var scrollBody = closestScrollBody(emoji);
+  var by = emojiDistanceFromScrollTop(emoji);
+  scrollBy(scrollBody, -(categoryLabelHeight(closestCategory(emoji)) - by));
+}
+
 function focusFirstVisibleEmoji(parent) {
-  focusElement(firstVisibleEmoji(parent));
+  var emoji = firstVisibleEmoji(parent);
+  focusElement(emoji);
+  scrollEmojiAboveLabel(emoji);
 }
 function focusAndClickFirstVisibleEmoji(parent) {
   var firstEmoji = firstVisibleEmoji(parent);
@@ -15711,6 +15795,7 @@ function focusNextVisibleEmoji(element) {
   }
 
   focusElement(next);
+  scrollEmojiAboveLabel(next);
 }
 function focusPrevVisibleEmoji(element) {
   if (!element) {
@@ -15724,6 +15809,7 @@ function focusPrevVisibleEmoji(element) {
   }
 
   focusElement(prev);
+  scrollEmojiAboveLabel(prev);
 }
 function focusVisibleEmojiOneRowUp(element, exitUp) {
   if (!element) {
@@ -15737,6 +15823,7 @@ function focusVisibleEmojiOneRowUp(element, exitUp) {
   }
 
   focusElement(prev);
+  scrollEmojiAboveLabel(prev);
 }
 function focusVisibleEmojiOneRowDown(element) {
   if (!element) {
@@ -15965,30 +16052,31 @@ function useOnScroll(BodyRef) {
   }, [BodyRef, closeAllOpenToggles]);
 }
 
-function scrollTo(root, top) {
-  if (top === void 0) {
-    top = 0;
-  }
-
-  var $eprBody = root ? root.querySelector('.epr-body') : null;
-
-  if (!root || !$eprBody) {
-    return;
-  }
+function useFocusSearchInput() {
+  var SearchInputRef = useSearchInputRef();
+  return useCallback(function () {
+    focusElement(SearchInputRef.current);
+  }, [SearchInputRef]);
+}
+function useFocusSkinTonePicker() {
+  var SkinTonePickerRef = useSkinTonePickerRef();
+  return useCallback(function () {
+    if (!SkinTonePickerRef.current) {
+      return;
+    }
 
-  requestAnimationFrame(function () {
-    $eprBody.scrollTop = top + 1;
-  });
+    focusFirstElementChild(SkinTonePickerRef.current);
+  }, [SkinTonePickerRef]);
 }
-function useScrollTo() {
-  var BodyRef = useBodyRef();
-  return useCallback(function (top) {
-    requestAnimationFrame(function () {
-      if (BodyRef.current) {
-        BodyRef.current.scrollTop = top;
-      }
-    });
-  }, [BodyRef]);
+function useFocusCategoryNavigation() {
+  var CategoryNavigationRef = useCategoryNavigationRef();
+  return useCallback(function () {
+    if (!CategoryNavigationRef.current) {
+      return;
+    }
+
+    focusFirstElementChild(CategoryNavigationRef.current);
+  }, [CategoryNavigationRef]);
 }
 
 function useSetFilterRef() {
@@ -16005,12 +16093,14 @@ function useSetFilterRef() {
 function useClearSearch() {
   var applySearch = useApplySearch();
   var SearchInputRef = useSearchInputRef();
+  var focusSearchInput = useFocusSearchInput();
   return function clearSearch() {
     if (SearchInputRef.current) {
       SearchInputRef.current.value = '';
     }
 
     applySearch('');
+    focusSearchInput();
   };
 }
 function useAppendSearch() {
@@ -16018,10 +16108,10 @@ function useAppendSearch() {
   var applySearch = useApplySearch();
   return function appendSearch(str) {
     if (SearchInputRef.current) {
-      SearchInputRef.current.value = SearchInputRef.current.value + str;
-      applySearch(SearchInputRef.current.value);
+      SearchInputRef.current.value = "" + SearchInputRef.current.value + str;
+      applySearch(getNormalizedSearchTerm(SearchInputRef.current.value));
     } else {
-      applySearch(str);
+      applySearch(getNormalizedSearchTerm(str));
     }
   };
 }
@@ -16040,8 +16130,9 @@ function useFilter() {
     SearchInputRef: SearchInputRef
   };
 
-  function onChange(nextValue) {
+  function onChange(inputValue) {
     var filter = filterRef.current;
+    var nextValue = inputValue.toLowerCase();
 
     if (filter != null && filter[nextValue] || nextValue.length <= 1) {
       return applySearch(nextValue);
@@ -16071,7 +16162,7 @@ function useApplySearch() {
   var PickerMainRef = usePickerMainRef();
   return function applySearch(searchTerm) {
     requestAnimationFrame(function () {
-      setSearchTerm(searchTerm.toLowerCase()).then(function () {
+      setSearchTerm(searchTerm ? searchTerm == null ? void 0 : searchTerm.toLowerCase() : searchTerm).then(function () {
         scrollTo(PickerMainRef.current, 0);
       });
     });
@@ -16106,7 +16197,7 @@ function useIsEmojiFiltered() {
       searchTerm = _useSearchTermState3[0];
 
   return function (unified) {
-    return isEmojiFilteredBySearchTerm(unified, filter, searchTerm.toLowerCase());
+    return isEmojiFilteredBySearchTerm(unified, filter, searchTerm);
   };
 }
 
@@ -16142,6 +16233,14 @@ function findLongestMatch(keyword, dict) {
   return null;
 }
 
+function getNormalizedSearchTerm(str) {
+  if (!str || typeof str !== 'string') {
+    return '';
+  }
+
+  return str.trim().toLowerCase();
+}
+
 function useIsEmojiHidden() {
   var _useEmojisThatFailedT = useEmojisThatFailedToLoadState(),
       emojisThatFailedToLoad = _useEmojisThatFailedT[0];
@@ -16163,6 +16262,14 @@ function asEmoji(emoji) {
   return emoji;
 }
 
+function Button(props) {
+  return createElement("button", Object.assign({
+    type: "button"
+  }, props, {
+    className: clsx('epr-btn', props.className)
+  }), props.children);
+}
+
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
@@ -16206,12 +16313,11 @@ function ClickableEmoji(_ref) {
       size = _ref.size,
       lazyLoad = _ref.lazyLoad;
   var hasVariations = emojiHasVariations(emoji);
-  return createElement("button", {
+  return createElement(Button, {
     className: clsx(ClassNames.emoji, (_clsx = {}, _clsx[ClassNames.hidden] = hidden, _clsx[ClassNames.hiddenOnSearch] = hiddenOnSearch, _clsx[ClassNames.visible] = !hidden && !hiddenOnSearch, _clsx[ClassNames.emojiHasVariatios] = hasVariations && showVariations, _clsx)),
     "data-unified": unified,
     "aria-label": emojiName(emoji),
-    "data-full-name": emojiNames(emoji),
-    type: "button"
+    "data-full-name": emojiNames(emoji)
   }, createElement(ViewOnlyEmoji, {
     unified: unified,
     emoji: emoji,
@@ -16549,7 +16655,7 @@ function Body() {
   useMouseDownHandlers(BodyRef);
   useOnMouseMove();
   return createElement("div", {
-    className: "epr-body",
+    className: ClassNames.scrollBody,
     ref: BodyRef
   }, createElement(EmojiVariationPicker, null), createElement(EmojiList, null));
 }
@@ -16769,6 +16875,13 @@ function useActiveCategoryScrollDetection(setActiveCategory) {
   }, [BodyRef, setActiveCategory]);
 }
 
+function useIsSearchMode() {
+  var _useSearchTermState = useSearchTermState(),
+      searchTerm = _useSearchTermState[0];
+
+  return !!searchTerm;
+}
+
 function useScrollCategoryIntoView() {
   var BodyRef = useBodyRef();
   var PickerMainRef = usePickerMainRef();
@@ -16797,6 +16910,7 @@ function CategoryNavigation() {
 
   var scrollCategoryIntoView = useScrollCategoryIntoView();
   useActiveCategoryScrollDetection(setActiveCategory);
+  var isSearchMode = useIsSearchMode();
   var categoriesConfig = useCategoriesConfig();
   var CategoryNavigationRef = useCategoryNavigationRef();
   return createElement("div", {
@@ -16806,8 +16920,8 @@ function CategoryNavigation() {
     var _clsx;
 
     var category = categoryFromCategoryConfig(categoryConfig);
-    return createElement("button", {
-      type: "button",
+    return createElement(Button, {
+      tabIndex: isSearchMode ? -1 : 0,
       className: clsx('epr-cat-btn', "epr-icn-" + category, (_clsx = {}, _clsx[ClassNames.active] = category === activeCategory, _clsx)),
       key: category,
       onClick: function onClick() {
@@ -16819,7 +16933,7 @@ function CategoryNavigation() {
   }));
 }
 
-var css_248z$8 = ".EmojiPickerReact .epr-search-container{display:block;flex:1;min-width:0}.EmojiPickerReact .epr-search-container input.epr-search{background-color:var(--epr-search-input-bg-color);border:1px solid var(--epr-search-input-bg-color);border-radius:var(--epr-search-input-border-radius);color:var(--epr-search-input-text-color);height:var(--epr-search-input-height);outline:none;padding:var(--epr-search-input-padding);transition:all .2s ease-in-out;width:100%}.EmojiPickerReact .epr-search-container button.epr-btn-clear-search{background-color:transparent;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='80' xml:space='preserve'%3E%3Cpath fill='%23868686' d='M6.98 13.59a.53.53 0 0 0 .74 0l2.42-2.42 2.43 2.43a.53.53 0 0 0 .74 0c.21-.21.21-.54 0-.75l-2.43-2.43L13.32 8c.21-.21.21-.54 0-.75a.525.525 0 0 0-.75 0l-2.42 2.42-2.41-2.4a.525.525 0 0 0-.75 0c-.21.21-.21.54 0 .75l2.41 2.41-2.42 2.42c-.21.2-.21.54 0 .74z'/%3E%3Cpath fill='%23868686' d='M10.15 18.43c4.41 0 8-3.59 8-8s-3.59-8-8-8-8 3.59-8 8 3.59 8 8 8zm0-14.94c3.83 0 6.94 3.11 6.94 6.94 0 3.83-3.11 6.94-6.94 6.94-3.83 0-6.94-3.11-6.94-6.94 0-3.83 3.12-6.94 6.94-6.94z'/%3E%3Cpath fill='%233371B7' d='M6.98 33.59a.53.53 0 0 0 .74 0l2.42-2.42 2.43 2.43a.53.53 0 0 0 .74 0c.21-.21.21-.54 0-.75l-2.43-2.43L13.32 28c.21-.21.21-.54 0-.75a.525.525 0 0 0-.75 0l-2.42 2.42-2.41-2.41a.525.525 0 0 0-.75 0c-.21.21-.21.54 0 .75l2.41 2.41-2.42 2.42c-.21.21-.21.55 0 .75z'/%3E%3Cpath fill='%233371B7' d='M10.15 38.43c4.41 0 8-3.59 8-8s-3.59-8-8-8-8 3.59-8 8 3.59 8 8 8zm0-14.94c3.83 0 6.94 3.11 6.94 6.94 0 3.83-3.11 6.94-6.94 6.94-3.83 0-6.94-3.11-6.94-6.94 0-3.83 3.12-6.94 6.94-6.94z'/%3E%3Cpath fill='%23C0C0BF' d='M6.98 53.59a.53.53 0 0 0 .74 0l2.42-2.42 2.43 2.43a.53.53 0 0 0 .74 0c.21-.21.21-.54 0-.75l-2.43-2.43L13.32 48c.21-.21.21-.54 0-.75a.525.525 0 0 0-.75 0l-2.42 2.42-2.41-2.41a.525.525 0 0 0-.75 0c-.21.21-.21.54 0 .75l2.41 2.41-2.42 2.42c-.21.21-.21.55 0 .75z'/%3E%3Cpath fill='%23C0C0BF' d='M10.15 58.43c4.41 0 8-3.59 8-8s-3.59-8-8-8-8 3.59-8 8 3.59 8 8 8zm0-14.94c3.83 0 6.94 3.11 6.94 6.94 0 3.83-3.11 6.94-6.94 6.94-3.83 0-6.94-3.11-6.94-6.94 0-3.83 3.12-6.94 6.94-6.94z'/%3E%3Cpath fill='%236AA9DD' d='M6.98 73.59a.53.53 0 0 0 .74 0l2.42-2.42 2.43 2.43a.53.53 0 0 0 .74 0c.21-.21.21-.54 0-.75l-2.43-2.43L13.32 68c.21-.21.21-.54 0-.75a.525.525 0 0 0-.75 0l-2.42 2.42-2.41-2.41a.525.525 0 0 0-.75 0c-.21.21-.21.54 0 .75l2.41 2.41-2.42 2.42c-.21.21-.21.55 0 .75z'/%3E%3Cpath fill='%236AA9DD' d='M10.15 78.43c4.41 0 8-3.59 8-8s-3.59-8-8-8-8 3.59-8 8 3.59 8 8 8zm0-14.94c3.83 0 6.94 3.11 6.94 6.94 0 3.83-3.11 6.94-6.94 6.94-3.83 0-6.94-3.11-6.94-6.94 0-3.83 3.12-6.94 6.94-6.94z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-size:20px;height:20px;position:absolute;right:var(--epr-search-bar-inner-padding);top:50%;transform:translateY(-50%);width:20px}.EmojiPickerReact .epr-search-container button.epr-btn-clear-search:hover{background-position-y:-20px}.EmojiPickerReact..epr-dark-theme .epr-search-container button.epr-btn-clear-search{background-position-y:-40px}.EmojiPickerReact..epr-dark-theme .epr-search-container button.epr-btn-clear-search:hover{background-position-y:-60px}.EmojiPickerReact .epr-search-container .epr-icn-search{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='40' xml:space='preserve'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23868686' d='M12 8.81c0 2.08-1.68 3.76-3.76 3.76s-3.76-1.68-3.76-3.76 1.68-3.76 3.76-3.76S12 6.73 12 8.81zm-.77 3.91c-.83.64-1.87 1.01-2.99 1.01-2.72 0-4.92-2.2-4.92-4.92 0-2.72 2.2-4.92 4.92-4.92 2.72 0 4.92 2.2 4.92 4.92 0 1.13-.38 2.16-1.01 2.99l3.94 3.93c.25.25.25.66 0 .92-.25.25-.66.25-.92 0l-3.94-3.93z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23C0C0BF' d='M12 28.81c0 2.08-1.68 3.76-3.76 3.76s-3.76-1.68-3.76-3.76 1.68-3.76 3.76-3.76S12 26.73 12 28.81zm-.77 3.91c-.83.64-1.87 1.01-2.99 1.01-2.72 0-4.92-2.2-4.92-4.92 0-2.72 2.2-4.92 4.92-4.92 2.72 0 4.92 2.2 4.92 4.92 0 1.13-.38 2.16-1.01 2.99l3.94 3.93c.25.25.25.66 0 .92-.25.25-.66.25-.92 0l-3.94-3.93z'/%3E%3C/svg%3E\");background-position:0 0;background-repeat:no-repeat;background-size:20px;content:\"\";height:20px;left:var(--epr-search-bar-inner-padding);position:absolute;top:50%;transform:translateY(-50%);width:20px}.EmojiPickerReact.epr-dark-theme .epr-search-container .epr-icn-search{background-position-y:-20px}.EmojiPickerReact .epr-search-container input.epr-search::-moz-placeholder{color:var(--epr-search-input-placeholder-color)}.EmojiPickerReact .epr-search-container input.epr-search::placeholder{color:var(--epr-search-input-placeholder-color)}.EmojiPickerReact .epr-search-container input.epr-search:focus{background-color:var(--epr-search-input-bg-color-active);border:1px solid var(--epr-search-border-color)}";
+var css_248z$8 = ".EmojiPickerReact .epr-search-container{display:block;flex:1;min-width:0}.EmojiPickerReact .epr-search-container input.epr-search{background-color:var(--epr-search-input-bg-color);border:1px solid var(--epr-search-input-bg-color);border-radius:var(--epr-search-input-border-radius);color:var(--epr-search-input-text-color);height:var(--epr-search-input-height);outline:none;padding:var(--epr-search-input-padding);transition:all .2s ease-in-out;width:100%}.EmojiPickerReact .epr-search-container button.epr-btn-clear-search .epr-icn-clear-search{background-color:transparent;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='80' xml:space='preserve'%3E%3Cpath fill='%23868686' d='M6.98 13.59a.53.53 0 0 0 .74 0l2.42-2.42 2.43 2.43a.53.53 0 0 0 .74 0c.21-.21.21-.54 0-.75l-2.43-2.43L13.32 8c.21-.21.21-.54 0-.75a.525.525 0 0 0-.75 0l-2.42 2.42-2.41-2.4a.525.525 0 0 0-.75 0c-.21.21-.21.54 0 .75l2.41 2.41-2.42 2.42c-.21.2-.21.54 0 .74z'/%3E%3Cpath fill='%23868686' d='M10.15 18.43c4.41 0 8-3.59 8-8s-3.59-8-8-8-8 3.59-8 8 3.59 8 8 8zm0-14.94c3.83 0 6.94 3.11 6.94 6.94 0 3.83-3.11 6.94-6.94 6.94-3.83 0-6.94-3.11-6.94-6.94 0-3.83 3.12-6.94 6.94-6.94z'/%3E%3Cpath fill='%233371B7' d='M6.98 33.59a.53.53 0 0 0 .74 0l2.42-2.42 2.43 2.43a.53.53 0 0 0 .74 0c.21-.21.21-.54 0-.75l-2.43-2.43L13.32 28c.21-.21.21-.54 0-.75a.525.525 0 0 0-.75 0l-2.42 2.42-2.41-2.41a.525.525 0 0 0-.75 0c-.21.21-.21.54 0 .75l2.41 2.41-2.42 2.42c-.21.21-.21.55 0 .75z'/%3E%3Cpath fill='%233371B7' d='M10.15 38.43c4.41 0 8-3.59 8-8s-3.59-8-8-8-8 3.59-8 8 3.59 8 8 8zm0-14.94c3.83 0 6.94 3.11 6.94 6.94 0 3.83-3.11 6.94-6.94 6.94-3.83 0-6.94-3.11-6.94-6.94 0-3.83 3.12-6.94 6.94-6.94z'/%3E%3Cpath fill='%23C0C0BF' d='M6.98 53.59a.53.53 0 0 0 .74 0l2.42-2.42 2.43 2.43a.53.53 0 0 0 .74 0c.21-.21.21-.54 0-.75l-2.43-2.43L13.32 48c.21-.21.21-.54 0-.75a.525.525 0 0 0-.75 0l-2.42 2.42-2.41-2.41a.525.525 0 0 0-.75 0c-.21.21-.21.54 0 .75l2.41 2.41-2.42 2.42c-.21.21-.21.55 0 .75z'/%3E%3Cpath fill='%23C0C0BF' d='M10.15 58.43c4.41 0 8-3.59 8-8s-3.59-8-8-8-8 3.59-8 8 3.59 8 8 8zm0-14.94c3.83 0 6.94 3.11 6.94 6.94 0 3.83-3.11 6.94-6.94 6.94-3.83 0-6.94-3.11-6.94-6.94 0-3.83 3.12-6.94 6.94-6.94z'/%3E%3Cpath fill='%236AA9DD' d='M6.98 73.59a.53.53 0 0 0 .74 0l2.42-2.42 2.43 2.43a.53.53 0 0 0 .74 0c.21-.21.21-.54 0-.75l-2.43-2.43L13.32 68c.21-.21.21-.54 0-.75a.525.525 0 0 0-.75 0l-2.42 2.42-2.41-2.41a.525.525 0 0 0-.75 0c-.21.21-.21.54 0 .75l2.41 2.41-2.42 2.42c-.21.21-.21.55 0 .75z'/%3E%3Cpath fill='%236AA9DD' d='M10.15 78.43c4.41 0 8-3.59 8-8s-3.59-8-8-8-8 3.59-8 8 3.59 8 8 8zm0-14.94c3.83 0 6.94 3.11 6.94 6.94 0 3.83-3.11 6.94-6.94 6.94-3.83 0-6.94-3.11-6.94-6.94 0-3.83 3.12-6.94 6.94-6.94z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-size:20px;height:20px;width:20px}.EmojiPickerReact .epr-search-container button.epr-btn-clear-search{align-items:center;border-radius:50%;display:flex;height:30px;justify-content:center;padding:0;position:absolute;right:var(--epr-search-bar-inner-padding);top:50%;transform:translateY(-50%);width:30px}.EmojiPickerReact .epr-search-container button.epr-btn-clear-search:focus .epr-icn-clear-search,.EmojiPickerReact .epr-search-container button.epr-btn-clear-search:hover .epr-icn-clear-search{background-position-y:-20px}.EmojiPickerReact .epr-search-container button.epr-btn-clear-search:focus,.EmojiPickerReact .epr-search-container button.epr-btn-clear-search:hover{background:var(--epr-hover-bg-color)}.EmojiPickerReact..epr-dark-theme .epr-search-container button.epr-btn-clear-search .epr-icn-clear-search{background-position-y:-40px}.EmojiPickerReact..epr-dark-theme .epr-search-container button.epr-btn-clear-search:hover .epr-icn-clear-search{background-position-y:-60px}.EmojiPickerReact .epr-search-container .epr-icn-search{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='40' xml:space='preserve'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23868686' d='M12 8.81c0 2.08-1.68 3.76-3.76 3.76s-3.76-1.68-3.76-3.76 1.68-3.76 3.76-3.76S12 6.73 12 8.81zm-.77 3.91c-.83.64-1.87 1.01-2.99 1.01-2.72 0-4.92-2.2-4.92-4.92 0-2.72 2.2-4.92 4.92-4.92 2.72 0 4.92 2.2 4.92 4.92 0 1.13-.38 2.16-1.01 2.99l3.94 3.93c.25.25.25.66 0 .92-.25.25-.66.25-.92 0l-3.94-3.93z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23C0C0BF' d='M12 28.81c0 2.08-1.68 3.76-3.76 3.76s-3.76-1.68-3.76-3.76 1.68-3.76 3.76-3.76S12 26.73 12 28.81zm-.77 3.91c-.83.64-1.87 1.01-2.99 1.01-2.72 0-4.92-2.2-4.92-4.92 0-2.72 2.2-4.92 4.92-4.92 2.72 0 4.92 2.2 4.92 4.92 0 1.13-.38 2.16-1.01 2.99l3.94 3.93c.25.25.25.66 0 .92-.25.25-.66.25-.92 0l-3.94-3.93z'/%3E%3C/svg%3E\");background-position:0 0;background-repeat:no-repeat;background-size:20px;content:\"\";height:20px;left:var(--epr-search-bar-inner-padding);position:absolute;top:50%;transform:translateY(-50%);width:20px}.EmojiPickerReact.epr-dark-theme .epr-search-container .epr-icn-search{background-position-y:-20px}.EmojiPickerReact .epr-search-container input.epr-search::-moz-placeholder{color:var(--epr-search-input-placeholder-color)}.EmojiPickerReact .epr-search-container input.epr-search::placeholder{color:var(--epr-search-input-placeholder-color)}.EmojiPickerReact .epr-search-container input.epr-search:focus{background-color:var(--epr-search-input-bg-color-active);border:1px solid var(--epr-search-border-color)}";
 styleInject(css_248z$8);
 
 function Search() {
@@ -16861,43 +16975,17 @@ function Search() {
     ref: SearchInputRef
   }), createElement("div", {
     className: "epr-icn-search"
-  }), createElement("button", {
+  }), createElement(Button, {
     className: clsx('epr-btn-clear-search', 'epr-visible-on-search-only'),
-    onClick: clearSearch,
-    type: "button"
-  }));
+    onClick: clearSearch
+  }, createElement("div", {
+    className: "epr-icn-clear-search"
+  })));
 }
 
 function CssSearch(_ref) {
   var value = _ref.value;
-  return value ? createElement("style", null, "\n        .EmojiPickerReact button.epr-emoji:not([data-full-name*=\"" + value.toLowerCase() + "\"]) {\n          display: none;\n        }\n  ") : null;
-}
-
-function useFocusSearchInput() {
-  var SearchInputRef = useSearchInputRef();
-  return useCallback(function () {
-    focusElement(SearchInputRef.current);
-  }, [SearchInputRef]);
-}
-function useFocusSkinTonePicker() {
-  var SkinTonePickerRef = useSkinTonePickerRef();
-  return useCallback(function () {
-    if (!SkinTonePickerRef.current) {
-      return;
-    }
-
-    focusFirstElementChild(SkinTonePickerRef.current);
-  }, [SkinTonePickerRef]);
-}
-function useFocusCategoryNavigation() {
-  var CategoryNavigationRef = useCategoryNavigationRef();
-  return useCallback(function () {
-    if (!CategoryNavigationRef.current) {
-      return;
-    }
-
-    focusFirstElementChild(CategoryNavigationRef.current);
-  }, [CategoryNavigationRef]);
+  return value ? createElement("style", null, "\n        .EmojiPickerReact button.epr-emoji:not([data-full-name*=\"" + getNormalizedSearchTerm(value) + "\"]) {\n          display: none;\n        }\n  ") : null;
 }
 
 var css_248z$9 = ".EmojiPickerReact .epr-skin-tones{--epr-skin-tone-size:16px;align-items:center;display:flex;flex-basis:30px;justify-content:flex-end;transition:all .3s ease-in-out}.EmojiPickerReact .epr-skin-tones.open{flex-basis:170px}.EmojiPickerReact .epr-skin-tone-select{height:var(--epr-skin-tone-size);position:relative;width:var(--epr-skin-tone-size)}.EmojiPickerReact .epr-skin-tones.open .epr-tone{transition:transform .3s ease-in-out,opacity .3s ease-in-out}.EmojiPickerReact .epr-skin-tones:not(.open) .epr-tone{opacity:0;z-index:0}.EmojiPickerReact .epr-skin-tones .epr-tone{border-radius:4px;box-shadow:0 0 0 0 var(--epr-active-skin-hover-color);cursor:pointer;display:block;height:var(--epr-skin-tone-size);position:absolute;right:0;transition:transform .3s ease-in-out,opacity .5s ease-in-out;width:var(--epr-skin-tone-size);z-index:1}.EmojiPickerReact .epr-skin-tones .epr-tone:hover{box-shadow:0 0 0 5px var(--epr-active-skin-hover-color)}.EmojiPickerReact .epr-skin-tones .epr-tone:focus{box-shadow:0 0 0 5px var(--epr-focus-bg-color)}.EmojiPickerReact .epr-skin-tones.open .epr-skin-tone-select .epr-tone.epr-active:after{border:1px solid var(--epr-active-skin-tone-indicator-border-color);border-radius:5px;bottom:-2px;content:\"\";left:-2px;position:absolute;right:-2px;top:-2px}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-active{opacity:1;z-index:1}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-neutral{background-color:#ffd225}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fb{background-color:#ffdfbd}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fc{background-color:#e9c197}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fd{background-color:#c88e62}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fe{background-color:#a86637}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3ff{background-color:#60463a}";
@@ -16933,8 +17021,7 @@ function SkinTonePicker() {
     var _clsx;
 
     var active = skinToneVariation === activeSkinTone;
-    return createElement("button", {
-      type: "button",
+    return createElement(Button, {
       style: {
         transform: clsx("translateX(-" + i * (isOpen ? 28 : 0) + "px)", isOpen && active && 'scale(1.3)')
       },
@@ -16968,13 +17055,6 @@ function Header() {
   }, createElement(Search, null), createElement(SkinTonePicker, null)), createElement(CategoryNavigation, null));
 }
 
-function useIsSearchMode() {
-  var _useSearchTermState = useSearchTermState(),
-      searchTerm = _useSearchTermState[0];
-
-  return !!searchTerm;
-}
-
 function getActiveElement() {
   return document.activeElement;
 }
@@ -17011,16 +17091,10 @@ function usePickerMainKeyboardEvents() {
   var onKeyDown = useMemo(function () {
     return function onKeyDown(event) {
       var key = event.key;
+      disallowMouseMove();
 
       switch (key) {
-        case KeyboardEvents.ArrowDown:
-        case KeyboardEvents.ArrowUp:
-        case KeyboardEvents.ArrowLeft:
-        case KeyboardEvents.ArrowRight:
-          disallowMouseMove();
-          break;
         // eslint-disable-next-line no-fallthrough
-
         case KeyboardEvents.Escape:
           event.preventDefault();
 
@@ -17458,7 +17532,7 @@ function PickerRootElement(_ref2) {
   }, children);
 }
 
-var css_248z$c = ".EmojiPickerReact{--epr-highlight-color:#007aeb;--epr-hover-bg-color:#f1f8ff;--epr-focus-bg-color:#e0f0ff;--epr-text-color:#858585;--epr-search-input-bg-color:#f6f6f6;--epr-picker-border-color:#e7e7e7;--epr-bg-color:#fff;--epr-category-icon-active-color:#6aa8de;--epr-horizontal-padding:10px;--epr-picker-border-radius:8px;--epr-search-border-color:var(--epr-highlight-color);--epr-header-padding:15px var(--epr-horizontal-padding);--epr-active-skin-tone-indicator-border-color:var(--epr-highlight-color);--epr-active-skin-hover-color:var(--epr-hover-bg-color);--epr-search-input-bg-color-active:var(--epr-search-input-bg-color);--epr-search-input-padding:0 30px;--epr-search-input-border-radius:8px;--epr-search-input-height:40px;--epr-search-input-text-color:var(--epr-text-color);--epr-search-input-placeholder-color:var(--epr-text-color);--epr-search-bar-inner-padding:var(--epr-horizontal-padding);--epr-category-navigation-button-size:30px;--epr-emoji-variation-picker-height:45px;--epr-emoji-variation-picker-bg-color:var(--epr-bg-color);--epr-preview-height:70px;--epr-preview-text-size:14px;--epr-preview-text-padding:0 var(--epr-horizontal-padding);--epr-preview-border-color:var(--epr-picker-border-color);--epr-preview-text-color:var(--epr-text-color);--epr-category-padding:0 var(--epr-horizontal-padding);--epr-category-label-bg-color:#ffffffe6;--epr-category-label-text-color:var(--epr-text-color);--epr-category-label-padding:0 var(--epr-horizontal-padding);--epr-category-label-height:40px;--epr-emoji-size:30px;--epr-emoji-padding:5px;--epr-emoji-fullsize:calc(var(--epr-emoji-size) + var(--epr-emoji-padding)*2);--epr-emoji-hover-color:var(--epr-hover-bg-color);--epr-emoji-variation-indicator-color:var(--epr-picker-border-color);--epr-emoji-variation-indicator-color-hover:var(--epr-text-color);--epr-header-overlay-z-index:3;--epr-emoji-variations-indictator-z-index:1;--epr-category-label-z-index:2;--epr-skin-variation-picker-z-index:5}.EmojiPickerReact.epr-dark-theme{--epr-dark:#000;--epr-emoji-variation-picker-bg-color:var(--epr-dark);--epr-highlight-color:silver;--epr-text-color:var(--epr-highlight-color);--epr-hover-bg-color:#363636f6;--epr-focus-bg-color:#474747;--epr-search-input-bg-color:#333;--epr-category-label-bg-color:#222222e6;--epr-picker-border-color:#151617;--epr-bg-color:#222;--epr-search-input-bg-color-active:var(--epr-dark);--epr-emoji-variation-indicator-color:#444;--epr-category-icon-active-color:#3271b7}.EmojiPickerReact{background-color:var(--epr-bg-color);overflow:hidden}.EmojiPickerReact .epr-hidden,.EmojiPickerReact.epr-search-active .epr-hidden-on-search,.EmojiPickerReact:not(.epr-search-active) .epr-visible-on-search-only{display:none!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}aside.EmojiPickerReact.epr-main:has(input:not(:-moz-placeholder-shown)) .epr-hidden-on-search{display:none!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}aside.EmojiPickerReact.epr-main:has(input:not(:placeholder-shown)) .epr-hidden-on-search{display:none!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}aside.EmojiPickerReact.epr-main:has(input:-moz-placeholder-shown) .epr-visible-on-search-only{display:none!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}aside.EmojiPickerReact.epr-main:has(input:placeholder-shown) .epr-visible-on-search-only{display:none!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}.EmojiPickerReact *{box-sizing:border-box;font-family:sans-serif}.EmojiPickerReact button{background:none;border:0;cursor:pointer;outline:none}";
+var css_248z$c = ".EmojiPickerReact{--epr-highlight-color:#007aeb;--epr-hover-bg-color:#f1f8ff;--epr-focus-bg-color:#e0f0ff;--epr-text-color:#858585;--epr-search-input-bg-color:#f6f6f6;--epr-picker-border-color:#e7e7e7;--epr-bg-color:#fff;--epr-category-icon-active-color:#6aa8de;--epr-horizontal-padding:10px;--epr-picker-border-radius:8px;--epr-search-border-color:var(--epr-highlight-color);--epr-header-padding:15px var(--epr-horizontal-padding);--epr-active-skin-tone-indicator-border-color:var(--epr-highlight-color);--epr-active-skin-hover-color:var(--epr-hover-bg-color);--epr-search-input-bg-color-active:var(--epr-search-input-bg-color);--epr-search-input-padding:0 30px;--epr-search-input-border-radius:8px;--epr-search-input-height:40px;--epr-search-input-text-color:var(--epr-text-color);--epr-search-input-placeholder-color:var(--epr-text-color);--epr-search-bar-inner-padding:var(--epr-horizontal-padding);--epr-category-navigation-button-size:30px;--epr-emoji-variation-picker-height:45px;--epr-emoji-variation-picker-bg-color:var(--epr-bg-color);--epr-preview-height:70px;--epr-preview-text-size:14px;--epr-preview-text-padding:0 var(--epr-horizontal-padding);--epr-preview-border-color:var(--epr-picker-border-color);--epr-preview-text-color:var(--epr-text-color);--epr-category-padding:0 var(--epr-horizontal-padding);--epr-category-label-bg-color:#ffffffe6;--epr-category-label-text-color:var(--epr-text-color);--epr-category-label-padding:0 var(--epr-horizontal-padding);--epr-category-label-height:40px;--epr-emoji-size:30px;--epr-emoji-padding:5px;--epr-emoji-fullsize:calc(var(--epr-emoji-size) + var(--epr-emoji-padding)*2);--epr-emoji-hover-color:var(--epr-hover-bg-color);--epr-emoji-variation-indicator-color:var(--epr-picker-border-color);--epr-emoji-variation-indicator-color-hover:var(--epr-text-color);--epr-header-overlay-z-index:3;--epr-emoji-variations-indictator-z-index:1;--epr-category-label-z-index:2;--epr-skin-variation-picker-z-index:5}.EmojiPickerReact.epr-dark-theme{--epr-dark:#000;--epr-emoji-variation-picker-bg-color:var(--epr-dark);--epr-highlight-color:silver;--epr-text-color:var(--epr-highlight-color);--epr-hover-bg-color:#363636f6;--epr-focus-bg-color:#474747;--epr-search-input-bg-color:#333;--epr-category-label-bg-color:#222222e6;--epr-picker-border-color:#151617;--epr-bg-color:#222;--epr-search-input-bg-color-active:var(--epr-dark);--epr-emoji-variation-indicator-color:#444;--epr-category-icon-active-color:#3271b7}.EmojiPickerReact{background-color:var(--epr-bg-color);overflow:hidden}.EmojiPickerReact .epr-hidden,.EmojiPickerReact.epr-search-active .epr-hidden-on-search,.EmojiPickerReact:not(.epr-search-active) .epr-visible-on-search-only{display:none!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}aside.EmojiPickerReact.epr-main:has(input:not(:-moz-placeholder-shown)) .epr-hidden-on-search{display:none!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}aside.EmojiPickerReact.epr-main:has(input:not(:placeholder-shown)) .epr-hidden-on-search{display:none!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}aside.EmojiPickerReact.epr-main:has(input:-moz-placeholder-shown) .epr-visible-on-search-only{display:none!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}aside.EmojiPickerReact.epr-main:has(input:placeholder-shown) .epr-visible-on-search-only{display:none!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}.EmojiPickerReact *{box-sizing:border-box;font-family:sans-serif}.EmojiPickerReact button.epr-btn{background:none;border:0;cursor:pointer;outline:none}";
 styleInject(css_248z$c);
 
 function EmojiPicker(props) {