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

package/dist/DomUtils/keyboardNavigation.d.ts

@@ -1,5 +1,6 @@
 import { NullableElement } from './selectors';
 export declare function focusFirstVisibleEmoji(parent: NullableElement): void;
+export declare function focusAndClickFirstVisibleEmoji(parent: NullableElement): void;
 export declare function focusLastVisibleEmoji(parent: NullableElement): void;
 export declare function focusNextVisibleEmoji(element: NullableElement): void;
 export declare function focusPrevVisibleEmoji(element: NullableElement): void;

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

@@ -1,5 +1,5 @@
 .EmojiPickerReact button.epr-emoji{border-radius:8px;padding:var(--epr-emoji-padding);position:relative}.EmojiPickerReact button.epr-emoji.epr-emoji-has-variations:after{border-bottom:4px solid var(--epr-emoji-variation-indicator-color);border-left:4px solid transparent;border-right:4px solid transparent;bottom:0;content:"";display:block;height:0;position:absolute;right:-2px;transform:rotate(135deg);width:0;z-index:var(--epr-emoji-variations-indictator-z-index)}.EmojiPickerReact button.epr-emoji>*{display:block;height:var(--epr-emoji-size);width:var(--epr-emoji-size)}.EmojiPickerReact button.epr-emoji.epr-emoji-has-variations:hover:after{border-bottom:4px solid var(--epr-emoji-variation-indicator-color-hover)}.EmojiPickerReact button.epr-emoji>.epr-emoji-img{font-size:0}.EmojiPickerReact button.epr-emoji>.epr-emoji-native{font-family:Noto Color Emoji,Apple Color Emoji,Segoe UI Emoji,Times,Symbola,Aegyptus,Code2000,Code2001,Code2002,Musica,serif,LastResort;font-size:var(--epr-emoji-size);line-height:100%}.EmojiPickerReact button.epr-emoji:hover{background-color:var(--epr-emoji-hover-color)}.EmojiPickerReact button.epr-emoji:focus-visible{background-color:var(--epr-focus-bg-color)}
-.EmojiPickerReact li.epr-emoji-category>.epr-emoji-category-label{align-items:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:var(--epr-category-label-bg-color);color:var(--epr-category-label-text-color);display:flex;font-weight:700;height:var(--epr-category-label-height);padding:var(--epr-category-label-padding);position:-webkit-sticky;position:sticky;text-transform:capitalize;top:0;width:100%;z-index:var(--epr-category-label-z-index)}.EmojiPickerReact.epr-search-active li.epr-emoji-category>.epr-emoji-category-label{opacity:.4;position:relative}.EmojiPickerReact li.epr-emoji-category{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-around;padding:var(--epr-category-padding);position:relative}.EmojiPickerReact li.epr-emoji-category:after{content:"";display:inline-block;flex:1}.EmojiPickerReact li.epr-emoji-category:not(:has(.epr-visible)){display:none}
+.EmojiPickerReact li.epr-emoji-category>.epr-emoji-category-content{grid-gap:0;display:grid;grid-template-columns:repeat(auto-fill,var(--epr-emoji-fullsize));justify-content:space-between;padding:var(--epr-category-padding);position:relative}.EmojiPickerReact li.epr-emoji-category:not(:has(.epr-visible)){display:none}.EmojiPickerReact li.epr-emoji-category>.epr-emoji-category-label{align-items:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:var(--epr-category-label-bg-color);color:var(--epr-category-label-text-color);display:flex;font-weight:700;height:var(--epr-category-label-height);padding:var(--epr-category-label-padding);position:-webkit-sticky;position:sticky;text-transform:capitalize;top:0;width:100%;z-index:var(--epr-category-label-z-index)}.EmojiPickerReact.epr-search-active li.epr-emoji-category>.epr-emoji-category-label{opacity:.4;position:relative}
 .EmojiPickerReact ul.epr-emoji-list{list-style:none;margin:0;padding:0}
 .EmojiPickerReact .epr-emoji-variation-picker{align-items:center;background:var(--epr-emoji-variation-picker-bg-color);border:1px solid var(--epr-picker-border-color);border-radius:3px;box-shadow:0 2px 5px rgba(0,0,0,.2);display:flex;height:0;height:var(--epr-emoji-variation-picker-height);justify-content:space-around;left:5px;opacity:0;padding:5px;pointer-events:none;position:absolute;right:5px;top:0;top:-100%;visibility:hidden;z-index:var(--epr-skin-variation-picker-z-index)}.EmojiPickerReact .epr-emoji-variation-picker.visible{opacity:1;pointer-events:all;visibility:visible}.EmojiPickerReact .epr-emoji-variation-picker .EmojiPickerReact .epr-emoji-variation-picker button.epr-emoji:hover{background:none}.EmojiPickerReact .epr-emoji-variation-picker .epr-emoji-pointer{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='15' xml:space='preserve'%3E%3Cg stroke-miterlimit='10'%3E%3Cpath fill='%23FFF' stroke='%23E8E7E7' d='m1.86-.43 9.83 11.53c.59.69 1.56.69 2.14 0L23.66-.43'/%3E%3Cpath fill='%23010202' stroke='%23151617' d='m26.86-.43 9.83 11.53c.59.69 1.56.69 2.14 0L48.66-.43'/%3E%3C/g%3E%3C/svg%3E");background-position:0 0;background-repeat:no-repeat;background-size:50px 15px;content:"";height:15px;position:absolute;top:-10px;width:25px}.EmojiPickerReact.epr-dark-theme .epr-emoji-variation-picker .epr-emoji-pointer{background-position:-25px 0}.EmojiPickerReact .epr-emoji-variation-picker .epr-emoji-pointer{top:100%;transform:translateX(-7px)}.EmojiPickerReact .epr-emoji-variation-picker .epr-emoji-pointer.pointing-up{top:0;transform:rotate(180deg) translateY(100%) translateX(7px)}
 .EmojiPickerReact .epr-body{flex:1;overflow-x:hidden;overflow-y:scroll;position:relative}
@@ -10,4 +10,4 @@
 .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-visible{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}
 .EmojiPickerReact .epr-header .epr-header-overlay{padding:var(--epr-header-padding);z-index:var(--epr-header-overlay-z-index)}
 aside.EmojiPickerReact.epr-main{border-color:var(--epr-picker-border-color);border-radius:var(--epr-picker-border-radius);border-style:solid;border-width:1px;display:flex;flex-direction:column;height:var(--epr-picker-height);position:relative;width:var(--epr-picker-width)}
-.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-width:350px;--epr-picker-height:450px;--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:55px;--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-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{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}
+.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-width:350px;--epr-picker-height:450px;--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:55px;--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{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}

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

@@ -15289,9 +15289,99 @@ function useActiveCategoryScrollDetection(bodyRef) {
   }, [bodyRef, setActiveCategory]);
 }
 
-function lastElementChild(element) {
-  if (!element) return null;
-  return element.lastElementChild;
+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
+
+  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);
@@ -15393,7 +15483,10 @@ function allVisibleEmojis(parent) {
 }
 function lastVisibleEmoji(element) {
   if (!element) return null;
-  var last = lastElementChild(element);
+  var allEmojis = allVisibleEmojis(element);
+
+  var _allEmojis$slice = allEmojis.slice(-1),
+      last = _allEmojis$slice[0];
 
   if (!last) {
     return null;
@@ -15436,8 +15529,8 @@ function firstVisibleEmoji(parent) {
     return null;
   }
 
-  var emoji = parent.querySelector(VisibleEmojiSelector);
-  return emoji;
+  var allEmojis = allVisibleEmojis(parent);
+  return firstVisibleElementInContainer(parent, allEmojis);
 }
 function prevCategory(element) {
   var category = closestCategory(element);
@@ -15801,14 +15894,29 @@ function useClearSearch() {
     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 = useSearchInputRef();
   var filterRef = useFilterRef();
   var setFilterRef = useSetFilterRef();
 
-  var _useSearchTermState2 = useSearchTermState(),
-      searchTerm = _useSearchTermState2[0],
-      setSearchTerm = _useSearchTermState2[1];
+  var _useSearchTermState3 = useSearchTermState(),
+      searchTerm = _useSearchTermState3[0],
+      setSearchTerm = _useSearchTermState3[1];
 
   var PickerMainRef = usePickerMainRef();
   return {
@@ -15891,8 +15999,8 @@ function useIsEmojiFiltered() {
   var _useFilterRef = useFilterRef(),
       filter = _useFilterRef.current;
 
-  var _useSearchTermState3 = useSearchTermState(),
-      searchTerm = _useSearchTermState3[0];
+  var _useSearchTermState4 = useSearchTermState(),
+      searchTerm = _useSearchTermState4[0];
 
   return function (unified) {
     return isEmojiFilteredBySearchTerm(unified, filter, searchTerm);
@@ -16028,7 +16136,9 @@ function EmojiCategory(_ref) {
     "data-name": category
   }, React.createElement("div", {
     className: "epr-emoji-category-label"
-  }, categoryName), children);
+  }, categoryName), React.createElement("div", {
+    className: "epr-emoji-category-content"
+  }, children));
 }
 
 function Suggested(_ref) {
@@ -16308,6 +16418,9 @@ function useEmojiPreviewEvents(allow, setPreviewEmoji) {
     }
 
     var bodyRef = BodyRef.current;
+    bodyRef == null ? void 0 : bodyRef.addEventListener('keydown', onEscape, {
+      passive: true
+    });
     bodyRef == null ? void 0 : bodyRef.addEventListener('mouseover', onMouseOver, {
       passive: true
     });
@@ -16337,15 +16450,30 @@ function useEmojiPreviewEvents(allow, setPreviewEmoji) {
       });
     }
 
-    function onLeave() {
+    function onLeave(e) {
+      if (e) {
+        var button = buttonFromTarget(e.target);
+
+        if (button) {
+          return;
+        }
+      }
+
       setPreviewEmoji(null);
     }
 
+    function onEscape(e) {
+      if (e.key === 'Escape') {
+        setPreviewEmoji(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]);
 
@@ -16558,108 +16686,17 @@ function useIsSearchMode() {
   return !!searchTerm;
 }
 
-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
-
-  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;
-}
-
 function getActiveElement() {
   return document.activeElement;
 }
 
 function focusFirstVisibleEmoji(parent) {
-  var allEmojis = allVisibleEmojis(parent);
-  focusElement(firstVisibleElementInContainer(parent, allEmojis));
+  focusElement(firstVisibleEmoji(parent));
+}
+function focusAndClickFirstVisibleEmoji(parent) {
+  var firstEmoji = firstVisibleEmoji(parent);
+  focusElement(firstEmoji);
+  firstEmoji == null ? void 0 : firstEmoji.click();
 }
 function focusLastVisibleEmoji(parent) {
   focusElement(lastVisibleEmoji(parent));
@@ -16795,6 +16832,7 @@ var KeyboardEvents;
   KeyboardEvents["ArrowLeft"] = "ArrowLeft";
   KeyboardEvents["ArrowRight"] = "ArrowRight";
   KeyboardEvents["Escape"] = "Escape";
+  KeyboardEvents["Enter"] = "Enter";
 })(KeyboardEvents || (KeyboardEvents = {}));
 
 function useKeyboardNavigation() {
@@ -16816,7 +16854,7 @@ function usePickerMainKeyboardEvents() {
     return function onKeyDown(event) {
       var key = event.key;
 
-      if (key === 'Escape') {
+      if (key === KeyboardEvents.Escape) {
         event.preventDefault();
         clearSearch();
         closeAllOpenToggles();
@@ -16842,6 +16880,7 @@ function usePickerMainKeyboardEvents() {
 function useSearchInputKeyboardEvents() {
   var focusSkinTonePicker = useFocusSkinTonePicker();
   var PickerMainRef = usePickerMainRef();
+  var BodyRef = useBodyRef();
   var SearchInputRef = useSearchInputRef();
 
   var _useSkinToneFanOpenSt = useSkinToneFanOpenState(),
@@ -16863,9 +16902,14 @@ function useSearchInputKeyboardEvents() {
           event.preventDefault();
           goDownFromSearchInput();
           break;
+
+        case KeyboardEvents.Enter:
+          event.preventDefault();
+          focusAndClickFirstVisibleEmoji(BodyRef.current);
+          break;
       }
     };
-  }, [focusSkinTonePicker, goDownFromSearchInput, setSkinToneFanOpenState]);
+  }, [focusSkinTonePicker, goDownFromSearchInput, setSkinToneFanOpenState, BodyRef]);
   React.useEffect(function () {
     var current = SearchInputRef.current;
 
@@ -16890,6 +16934,7 @@ function useSkinTonePickerKeyboardEvents() {
       isOpen = _useSkinToneFanOpenSt2[0],
       setIsOpen = _useSkinToneFanOpenSt2[1];
 
+  var onType = useOnType();
   var onKeyDown = React.useMemo(function () {
     return function onKeyDown(event) {
       var key = event.key;
@@ -16924,9 +16969,13 @@ function useSkinTonePickerKeyboardEvents() {
 
           goDownFromSearchInput();
           break;
+
+        default:
+          onType(event);
+          break;
       }
     };
-  }, [isOpen, focusSearchInput, setIsOpen, goDownFromSearchInput]);
+  }, [isOpen, focusSearchInput, setIsOpen, goDownFromSearchInput, onType]);
   React.useEffect(function () {
     var current = SkinTonePickerRef.current;
 
@@ -16945,6 +16994,7 @@ 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;
@@ -16969,9 +17019,13 @@ function useCategoryNavigationKeyboardEvents() {
           event.preventDefault();
           focusFirstVisibleEmoji(BodyRef.current);
           break;
+
+        default:
+          onType(event);
+          break;
       }
     };
-  }, [BodyRef, focusSearchInput]);
+  }, [BodyRef, focusSearchInput, onType]);
   React.useEffect(function () {
     var current = CategoryNavigationRef.current;
 
@@ -16989,6 +17043,7 @@ function useCategoryNavigationKeyboardEvents() {
 function useBodyKeyboardEvents() {
   var BodyRef = useBodyRef();
   var goUpFromBody = useGoUpFromBody();
+  var onType = useOnType();
   var onKeyDown = React.useMemo(function () {
     return function onKeyDown(event) {
       var key = event.key;
@@ -17014,9 +17069,13 @@ function useBodyKeyboardEvents() {
           event.preventDefault();
           focusVisibleEmojiOneRowUp(activeElement, goUpFromBody);
           break;
+
+        default:
+          onType(event);
+          break;
       }
     };
-  }, [goUpFromBody]);
+  }, [goUpFromBody, onType]);
   React.useEffect(function () {
     var current = BodyRef.current;
 
@@ -17081,6 +17140,33 @@ function focusPrevSkinTone() {
   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));