emoji-picker-react 4.0.0-rc.26 → 4.0.0-rc.28

package/dist/components/context/ElementRefContext.d.ts

@@ -11,3 +11,4 @@ export declare function useBodyRef(): ElementRef<HTMLDivElement>;
 export declare function useSearchInputRef(): ElementRef<HTMLInputElement>;
 export declare function useSkinTonePickerRef(): ElementRef<HTMLDivElement>;
 export declare function useCategoryNavigationRef(): ElementRef<HTMLDivElement>;
+export declare function useVariationPickerRef(): ElementRef<HTMLDivElement>;

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

@@ -1,7 +1,7 @@
-.EmojiPickerReact button.epr-emoji{border-radius:8px;height:var(--epr-emoji-fullsize);padding:var(--epr-emoji-padding);position:relative;width:var(--epr-emoji-fullsize)}.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{background-color:var(--epr-focus-bg-color)}
+.EmojiPickerReact button.epr-emoji{border-radius:8px;height:var(--epr-emoji-fullsize);padding:var(--epr-emoji-padding);position:relative;width:var(--epr-emoji-fullsize)}.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 .epr-emoji-img{font-size:0}.EmojiPickerReact .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{background-color:var(--epr-focus-bg-color)}
 .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 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-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%;transform:scale(.9);transition:transform .1s ease-out,opacity .2s ease-out;visibility:hidden;z-index:var(--epr-skin-variation-picker-z-index)}.EmojiPickerReact .epr-emoji-variation-picker.pointing-up{transform:scale(.9);transform-origin:center 0}.EmojiPickerReact .epr-emoji-variation-picker.visible{opacity:1;pointer-events:all;transform:scale(1);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.pointing-up .epr-emoji-pointer{top:0;transform:rotate(180deg) translateY(100%) translateX(7px)}
 .EmojiPickerReact .epr-body{flex:1;overflow-x:hidden;overflow-y:scroll;position:relative}
 .EmojiPickerReact .Flex{display:flex}.EmojiPickerReact .Flex.FlexRow{flex-direction:row}.EmojiPickerReact .Flex.FlexColumn{flex-direction:column}
 .EmojiPickerReact .epr-preview{align-items:center;border-top:1px solid var(--epr-preview-border-color);height:var(--epr-preview-height);padding:0 var(--epr-horizontal-padding);z-index:1}.EmojiPickerReact .epr-preview .epr-preview-emoji-label{color:var(--epr-preview-text-color);font-size:var(--epr-preview-text-size);padding:var(--epr-preview-text-padding);text-transform:capitalize}

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

@@ -130,6 +130,7 @@ function ElementRefContextProvider(_ref) {
   var SearchInputRef = React.useRef(null);
   var SkinTonePickerRef = React.useRef(null);
   var CategoryNavigationRef = React.useRef(null);
+  var VariationPickerRef = React.useRef(null);
   return React.createElement(ElementRefContext.Provider, {
     value: {
       AnchoredEmojiRef: AnchoredEmojiRef,
@@ -137,7 +138,8 @@ function ElementRefContextProvider(_ref) {
       CategoryNavigationRef: CategoryNavigationRef,
       PickerMainRef: PickerMainRef,
       SearchInputRef: SearchInputRef,
-      SkinTonePickerRef: SkinTonePickerRef
+      SkinTonePickerRef: SkinTonePickerRef,
+      VariationPickerRef: VariationPickerRef
     }
   }, children);
 }
@@ -147,7 +149,8 @@ var ElementRefContext = /*#__PURE__*/React.createContext({
   CategoryNavigationRef: /*#__PURE__*/React.createRef(),
   PickerMainRef: /*#__PURE__*/React.createRef(),
   SearchInputRef: /*#__PURE__*/React.createRef(),
-  SkinTonePickerRef: /*#__PURE__*/React.createRef()
+  SkinTonePickerRef: /*#__PURE__*/React.createRef(),
+  VariationPickerRef: /*#__PURE__*/React.createRef()
 });
 
 function useElementRef() {
@@ -178,6 +181,9 @@ function useSkinTonePickerRef() {
 function useCategoryNavigationRef() {
   return useElementRef()['CategoryNavigationRef'];
 }
+function useVariationPickerRef() {
+  return useElementRef()['VariationPickerRef'];
+}
 
 function scrollTo(root, top) {
   if (top === void 0) {
@@ -15323,7 +15329,7 @@ function rowNumber(parent, element) {
   var elementHeight = element.getBoundingClientRect().height;
   var elementTop = element.getBoundingClientRect().top;
   var parentTop = parent.getBoundingClientRect().top;
-  return Math.floor((elementTop - parentTop) / elementHeight) - 1;
+  return Math.round((elementTop - parentTop) / elementHeight) - 1;
 }
 function hasNextRow(parent, element) {
   if (!parent || !element) {
@@ -15706,11 +15712,177 @@ function useCloseAllOpenToggles() {
   }, [variationPicker, skinToneFanOpen, setVariationPicker, setSkinToneFanOpen]);
   return closeAllOpenToggles;
 }
+function useHasOpenToggles() {
+  var _useEmojiVariationPic2 = useEmojiVariationPickerState(),
+      variationPicker = _useEmojiVariationPic2[0];
+
+  var _useSkinToneFanOpenSt2 = useSkinToneFanOpenState(),
+      skinToneFanOpen = _useSkinToneFanOpenSt2[0];
+
+  return function hasOpenToggles() {
+    return !!variationPicker || skinToneFanOpen;
+  };
+}
+
+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 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 useSetVariationPicker() {
+  var setAnchoredEmojiRef = useSetAnchoredEmojiRef();
+
+  var _useEmojiVariationPic = useEmojiVariationPickerState(),
+      setEmojiVariationPicker = _useEmojiVariationPic[1];
+
+  var VariationPickerRef = useVariationPickerRef();
+  return function setVariationPicker(element) {
+    var _emojiFromElement = emojiFromElement(element),
+        emoji = _emojiFromElement[0];
+
+    if (!emoji) {
+      return;
+    }
+
+    setAnchoredEmojiRef(element);
+    setEmojiVariationPicker(emoji);
+    requestAnimationFrame(function () {
+      focusFirstVisibleEmoji(VariationPickerRef.current);
+    });
+  };
+}
 
 function useMouseDownHandlers(BodyRef) {
   var mouseDownTimerRef = React.useRef();
   var preloading = React.useRef(false);
-  var setAnchoredEmojiRef = useSetAnchoredEmojiRef();
+  var setVariationPicker = useSetVariationPicker();
   var disallowClickRef = useDisallowClickRef();
 
   var _useEmojiVariationPic = useEmojiVariationPickerState(),
@@ -15772,10 +15944,10 @@ function useMouseDownHandlers(BodyRef) {
       disallowClickRef.current = true;
       mouseDownTimerRef.current = undefined;
       closeAllOpenToggles();
-      setAnchoredEmojiRef(event.target);
+      setVariationPicker(event.target);
       setEmojiVariationPicker(emoji);
     }, 500);
-  }, [disallowClickRef, closeAllOpenToggles, setAnchoredEmojiRef, emojiStyle, setEmojiVariationPicker]);
+  }, [disallowClickRef, closeAllOpenToggles, setVariationPicker, emojiStyle, setEmojiVariationPicker]);
   var onMouseUp = React.useCallback(function onMouseUp() {
     preloading.current = false;
 
@@ -15991,16 +16163,18 @@ function useApplyFilterToDom() {
   var PickerMainRef = usePickerMainRef();
   var filterRef = useFilterRef();
   return function applyFilterToDom(searchTerm) {
-    var _PickerMainRef$curren;
+    requestAnimationFrame(function () {
+      var _PickerMainRef$curren;
 
-    (_PickerMainRef$curren = PickerMainRef.current) == null ? void 0 : _PickerMainRef$curren.classList.toggle(ClassNames.searchActive, !!searchTerm);
-    iterateEmojiRef(function (element, unified) {
-      if (isEmojiFilteredBySearchTerm(unified, filterRef.current, searchTerm)) {
-        hideElementOnSearch(element);
-        return;
-      }
+      (_PickerMainRef$curren = PickerMainRef.current) == null ? void 0 : _PickerMainRef$curren.classList.toggle(ClassNames.searchActive, !!searchTerm);
+      iterateEmojiRef(function (element, unified) {
+        if (isEmojiFilteredBySearchTerm(unified, filterRef.current, searchTerm)) {
+          hideElementOnSearch(element);
+          return;
+        }
 
-      showElementOnSearch(element);
+        showElementOnSearch(element);
+      });
     });
   };
 }
@@ -16316,7 +16490,7 @@ var Direction;
 })(Direction || (Direction = {}));
 
 function EmojiVariationPicker() {
-  var VariationPickerRef = React.useRef(null);
+  var VariationPickerRef = useVariationPickerRef();
 
   var _useEmojiVariationPic = useEmojiVariationPickerState(),
       emoji = _useEmojiVariationPic[0];
@@ -16343,7 +16517,8 @@ function EmojiVariationPicker() {
   return React.createElement("div", {
     ref: VariationPickerRef,
     className: clsx('epr-emoji-variation-picker', {
-      visible: visible
+      visible: visible,
+      'pointing-up': getMenuDirection() === Direction.Down
     }),
     style: {
       top: top
@@ -16357,9 +16532,7 @@ function EmojiVariationPicker() {
       showVariations: false
     });
   }) : null, React.createElement("div", {
-    className: clsx('epr-emoji-pointer', {
-      'pointing-up': getMenuDirection() === Direction.Down
-    }),
+    className: "epr-emoji-pointer",
     style: pointerStyle
   }));
 }
@@ -16442,31 +16615,6 @@ function Body() {
   }, React.createElement(EmojiVariationPicker, null), React.createElement(EmojiList, null));
 }
 
-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 () {
@@ -16507,10 +16655,10 @@ function useEmojiPreviewEvents(allow, setPreviewEmoji) {
 
     function onLeave(e) {
       if (e) {
-        var button = buttonFromTarget(e.target);
+        var relatedTarget = e.relatedTarget;
 
-        if (button) {
-          return;
+        if (!buttonFromTarget(relatedTarget)) {
+          return setPreviewEmoji(null);
         }
       }
 
@@ -16790,113 +16938,6 @@ 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;
-}
-
 var KeyboardEvents;
 
 (function (KeyboardEvents) {
@@ -16906,6 +16947,7 @@ var KeyboardEvents;
   KeyboardEvents["ArrowRight"] = "ArrowRight";
   KeyboardEvents["Escape"] = "Escape";
   KeyboardEvents["Enter"] = "Enter";
+  KeyboardEvents["Space"] = " ";
 })(KeyboardEvents || (KeyboardEvents = {}));
 
 function useKeyboardNavigation() {
@@ -16922,6 +16964,7 @@ function usePickerMainKeyboardEvents() {
   var scrollTo = useScrollTo();
   var SearchInputRef = useSearchInputRef();
   var focusSearchInput = useFocusSearchInput();
+  var hasOpenToggles = useHasOpenToggles();
   var closeAllOpenToggles = useCloseAllOpenToggles();
   var onKeyDown = React.useMemo(function () {
     return function onKeyDown(event) {
@@ -16929,13 +16972,18 @@ function usePickerMainKeyboardEvents() {
 
       if (key === KeyboardEvents.Escape) {
         event.preventDefault();
+
+        if (hasOpenToggles()) {
+          closeAllOpenToggles();
+          return;
+        }
+
         clearSearch();
-        closeAllOpenToggles();
         scrollTo(0);
         focusSearchInput();
       }
     };
-  }, [scrollTo, clearSearch, closeAllOpenToggles, focusSearchInput]);
+  }, [scrollTo, clearSearch, closeAllOpenToggles, focusSearchInput, hasOpenToggles]);
   React.useEffect(function () {
     var current = PickerMainRef.current;
 
@@ -17116,6 +17164,7 @@ function useCategoryNavigationKeyboardEvents() {
 function useBodyKeyboardEvents() {
   var BodyRef = useBodyRef();
   var goUpFromBody = useGoUpFromBody();
+  var setVariationPicker = useSetVariationPicker();
   var onType = useOnType();
   var onKeyDown = React.useMemo(function () {
     return function onKeyDown(event) {
@@ -17143,12 +17192,17 @@ function useBodyKeyboardEvents() {
           focusVisibleEmojiOneRowUp(activeElement, goUpFromBody);
           break;
 
+        case KeyboardEvents.Space:
+          event.preventDefault();
+          setVariationPicker(event.target);
+          break;
+
         default:
           onType(event);
           break;
       }
     };
-  }, [goUpFromBody, onType]);
+  }, [goUpFromBody, onType, setVariationPicker]);
   React.useEffect(function () {
     var current = BodyRef.current;