emoji-picker-react 4.22.3 → 5.0.1

package/src/hooks/useKeyboardNavigation.ts

@@ -1,23 +1,22 @@
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 
-import { hasNextElementSibling } from '../DomUtils/elementPositionInRow';
+import { eventBelongsToPicker } from '../DomUtils/eventBelongsToPicker';
 import {
   focusElement,
   focusNextElementSibling,
   focusPrevElementSibling,
 } from '../DomUtils/focusElement';
 import { getActiveElement } from '../DomUtils/getActiveElement';
+import { isRtl } from '../DomUtils/isRtl';
 import {
-  focusAndClickFirstVisibleEmoji,
+  focusFirstEmoji,
   focusFirstVisibleEmoji,
-  focusNextVisibleEmoji,
-  focusPrevVisibleEmoji,
-  focusVisibleEmojiOneRowDown,
-  focusVisibleEmojiOneRowUp,
+  focusAdjacentEmoji,
 } from '../DomUtils/keyboardNavigation';
 import { useScrollTo } from '../DomUtils/scrollTo';
-import { buttonFromTarget } from '../DomUtils/selectors';
+import { buttonFromTarget, firstVisibleEmoji } from '../DomUtils/selectors';
 import {
+  ElementRef,
   useBodyRef,
   useCategoryNavigationRef,
   usePickerMainRef,
@@ -26,358 +25,372 @@ import {
   useSkinTonePickerRef,
 } from '../components/context/ElementRefContext';
 import {
-  useReactionsModeState,
+  useNavigationRegistry,
+  useSearchComposingState,
+  useSearchDisplayState,
+  useSearchTermState,
   useSkinToneFanOpenState,
 } from '../components/context/PickerContext';
-import { useSearchDisabledConfig } from '../config/useConfig';
+import { usePickerDataContext } from '../components/context/PickerDataContext';
+import {
+  useSearchDisabledConfig,
+  useSuggestedEmojisConfig,
+} from '../config/useConfig';
+import { normalizeQuery } from '../data-core/prepare';
+import {
+  NavigationRegionKind,
+  RegisteredRegion,
+} from '../state/navigationRegistry';
+import { getNextRegion, getPrevRegion } from '../state/regionTraversal';
 
 import {
   useCloseAllOpenToggles,
   useHasOpenToggles,
 } from './useCloseAllOpenToggles';
 import { useDisallowMouseMove } from './useDisallowMouseMove';
-import { useAppendSearch, useClearSearch } from './useFilter';
 import {
   useFocusCategoryNavigation,
   useFocusSearchInput,
   useFocusSkinTonePicker,
 } from './useFocus';
 import useIsSearchMode from './useIsSearchMode';
-import useSetVariationPicker from './useSetVariationPicker';
 import {
-  useIsSkinToneInPreview,
-  useIsSkinToneInSearch,
-} from './useShouldShowSkinTonePicker';
-
-enum KeyboardEvents {
-  ArrowDown = 'ArrowDown',
-  ArrowUp = 'ArrowUp',
-  ArrowLeft = 'ArrowLeft',
-  ArrowRight = 'ArrowRight',
-  Escape = 'Escape',
-  Enter = 'Enter',
-  Space = ' ',
-}
+  useAcceptedSearchValue,
+  useClearSearchValue,
+  useTypeToSearchKey,
+} from './useSearchController';
+import useSetVariationPicker from './useSetVariationPicker';
 
 export function useKeyboardNavigation() {
-  usePickerMainKeyboardEvents();
-  useSearchInputKeyboardEvents();
-  useSkinTonePickerKeyboardEvents();
-  useCategoryNavigationKeyboardEvents();
-  useReactionsKeyboardEvents();
-  useBodyKeyboardEvents();
-}
-
-function usePickerMainKeyboardEvents() {
-  const PickerMainRef = usePickerMainRef();
-  const clearSearch = useClearSearch();
+  const ref = usePickerMainRef();
+  const hasOpenToggles = useHasOpenToggles();
+  const clearSearch = useClearSearchValue();
   const scrollTo = useScrollTo();
-  const SearchInputRef = useSearchInputRef();
   const focusSearchInput = useFocusSearchInput();
-  const hasOpenToggles = useHasOpenToggles();
   const disallowMouseMove = useDisallowMouseMove();
-
   const closeAllOpenToggles = useCloseAllOpenToggles();
-
-  const onKeyDown = useMemo(
-    () =>
-      function onKeyDown(event: KeyboardEvent) {
-        const { key } = event;
-
-        disallowMouseMove();
-        switch (key) {
-          // eslint-disable-next-line no-fallthrough
-          case KeyboardEvents.Escape:
-            event.preventDefault();
-            if (hasOpenToggles()) {
-              closeAllOpenToggles();
-              return;
-            }
-            clearSearch();
-            scrollTo(0);
-            focusSearchInput();
-            break;
-        }
-      },
-    [
-      scrollTo,
-      clearSearch,
-      closeAllOpenToggles,
-      focusSearchInput,
-      hasOpenToggles,
-      disallowMouseMove,
-    ],
-  );
-
-  useEffect(() => {
-    const current = PickerMainRef.current;
-
-    if (!current) {
-      return;
-    }
-
-    current.addEventListener('keydown', onKeyDown);
-
-    return () => {
-      current.removeEventListener('keydown', onKeyDown);
-    };
-  }, [PickerMainRef, SearchInputRef, scrollTo, onKeyDown]);
-}
-
-function useSearchInputKeyboardEvents() {
   const focusSkinTonePicker = useFocusSkinTonePicker();
-  const PickerMainRef = usePickerMainRef();
   const BodyRef = useBodyRef();
   const SearchInputRef = useSearchInputRef();
-  const [, setSkinToneFanOpenState] = useSkinToneFanOpenState();
-  const goDownFromSearchInput = useGoDownFromSearchInput();
-  const isSkinToneInSearch = useIsSkinToneInSearch();
-
-  const onKeyDown = useMemo(
-    () =>
-      function onKeyDown(event: KeyboardEvent) {
-        const { key } = event;
-
-        switch (key) {
-          case KeyboardEvents.ArrowRight:
-            if (!isSkinToneInSearch) {
-              return;
-            }
-            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,
-      isSkinToneInSearch,
-    ],
-  );
-
+  const [isOpen, setIsOpen] = useSkinToneFanOpenState();
+  const focusCategoryNavigation = useFocusCategoryNavigation();
+  const focusNextRegionFromSearch = useFocusNextRegionFrom('search');
+  const isSearchMode = useIsSearchMode();
+  const SkinTonePickerRef = useSkinTonePickerRef();
+  const isSkinToneInSearch = () =>
+    !!SkinTonePickerRef.current?.closest('[data-epr-part="search"]');
+  const onType = useOnType();
+  const CategoryNavigationRef = useCategoryNavigationRef();
+  const focusPrevRegionFromCategories = useFocusPrevRegionFrom('categories');
+  const focusNextRegionFromCategories = useFocusNextRegionFrom('categories');
+  const ReactionsRef = useReactionsRef();
+  const focusPrevRegionFromGrid = useFocusPrevRegionFrom('grid');
+  const setVariationPicker = useSetVariationPicker();
+  const registry = useNavigationRegistry();
+  const [searchTerm] = useSearchTermState();
+  const suggestions = JSON.stringify(useSuggestedEmojisConfig());
+  const { emojiData } = usePickerDataContext();
+  const searchValue = useAcceptedSearchValue();
+  // A controlled parent may not have accepted what the input shows yet.
+  const [displayed] = useSearchDisplayState();
+  // Enter pressed while the input is ahead of the debounced results: the
+  // query it was pressed for, selected once those results commit.
+  const pendingPick = useRef<string | null>(null);
+  const pickEmoji = (emoji: HTMLElement | null) => {
+    pendingPick.current = null;
+    focusElement(emoji);
+    emoji?.click();
+  };
+  const selectFirstResult = () => {
+    const query = pendingPick.current;
+    const generation = registry.currentGeneration();
+    if (
+      !focusFirstEmoji(BodyRef.current, {
+        shouldFocus: () =>
+          pendingPick.current === query &&
+          SearchInputRef.current?.value === query &&
+          registry.isCurrent(generation),
+        moveTo: pickEmoji,
+      })
+    )
+      pendingPick.current = null;
+  };
+  // Each committed result set settles a queued Enter for its query.
   useEffect(() => {
-    const current = SearchInputRef.current;
-
-    if (!current) {
+    const pending = pendingPick.current;
+    pendingPick.current = null;
+    if (
+      pending !== null &&
+      pending === displayed &&
+      normalizeQuery(pending) === searchTerm
+    ) {
+      pendingPick.current = pending;
+      selectFirstResult();
+    }
+    // Per committed result set; selection reads live refs.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchTerm, suggestions, emojiData]);
+  // Enter in search selects the first result, even one scrolled out of view.
+  const selectFromSearch = () => {
+    // Remember fast Enter while the input is ahead of the debounced grid.
+    if (
+      ![searchValue, displayed].every(
+        (value) => normalizeQuery(value) === searchTerm,
+      )
+    ) {
+      pendingPick.current = displayed;
       return;
     }
+    if (isSearchMode) {
+      pendingPick.current = displayed;
+      selectFirstResult();
+    } else pickEmoji(firstVisibleEmoji(BodyRef.current));
+  };
+  const goDownFromSearchInput = () => {
+    if (isSearchMode) return focusFirstVisibleEmoji(BodyRef.current);
+    focusCategoryNavigation();
+  };
+  const goUpFromBody = () => {
+    if (isSearchMode) return focusSearchInput();
+    focusPrevRegionFromGrid(focusCategoryNavigation);
+  };
+  const main = function onKeyDown(event: KeyboardEvent) {
+    const { key } = event;
 
-    current.addEventListener('keydown', onKeyDown);
-
-    return () => {
-      current.removeEventListener('keydown', onKeyDown);
-    };
-  }, [PickerMainRef, SearchInputRef, onKeyDown]);
-}
-
-function useSkinTonePickerKeyboardEvents() {
-  const SkinTonePickerRef = useSkinTonePickerRef();
-  const focusSearchInput = useFocusSearchInput();
-  const SearchInputRef = useSearchInputRef();
-  const goDownFromSearchInput = useGoDownFromSearchInput();
-  const [isOpen, setIsOpen] = useSkinToneFanOpenState();
-  const isSkinToneInPreview = useIsSkinToneInPreview();
-  const isSkinToneInSearch = useIsSkinToneInSearch();
-  const onType = useOnType();
-
-  const onKeyDown = useMemo(
-    () =>
-      // eslint-disable-next-line complexity
-      function onKeyDown(event: KeyboardEvent) {
-        const { key } = event;
-
-        if (isSkinToneInSearch) {
-          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;
-          }
+    disallowMouseMove();
+    switch (key) {
+      case 'Escape':
+        if (hasOpenToggles()) {
+          event.preventDefault();
+          closeAllOpenToggles();
+          // A nested variation/tone menu consumes Escape before the
+          // host popover or autocomplete dismisses the whole picker.
+          event.stopPropagation();
+          return;
         }
-
-        if (isSkinToneInPreview) {
-          switch (key) {
-            case KeyboardEvents.ArrowUp:
-              event.preventDefault();
-              if (!isOpen) {
-                return focusSearchInput();
-              }
-              focusNextSkinTone(focusSearchInput);
-              break;
-            case KeyboardEvents.ArrowDown:
-              event.preventDefault();
-              if (!isOpen) {
-                return focusSearchInput();
-              }
-              focusPrevSkinTone();
-              break;
-            default:
-              onType(event);
-              break;
-          }
+        // Clearing a search consumes the key. With nothing to clear, the
+        // event stays untouched (this runs in window capture, before host
+        // listeners that skip default-prevented keys, such as Radix).
+        if (searchValue || displayed) {
+          event.preventDefault();
+          event.stopPropagation();
         }
-      },
-    [
-      isOpen,
-      focusSearchInput,
-      setIsOpen,
-      goDownFromSearchInput,
-      onType,
-      isSkinToneInPreview,
-      isSkinToneInSearch,
-    ],
-  );
-
-  useEffect(() => {
-    const current = SkinTonePickerRef.current;
-
-    if (!current) {
-      return;
+        clearSearch();
+        scrollTo(0);
+        focusSearchInput();
+        break;
     }
+  };
+  const search = function onKeyDown(event: KeyboardEvent) {
+    if (!eventInRegion(event, SearchInputRef)) return;
+    const key = logicalArrowKey(event, SearchInputRef.current);
 
-    current.addEventListener('keydown', onKeyDown);
-
-    return () => {
-      current.removeEventListener('keydown', onKeyDown);
-    };
-  }, [SkinTonePickerRef, SearchInputRef, isOpen, onKeyDown]);
-}
-
-function useCategoryNavigationKeyboardEvents() {
-  const focusSearchInput = useFocusSearchInput();
-  const CategoryNavigationRef = useCategoryNavigationRef();
-  const BodyRef = useBodyRef();
-  const onType = useOnType();
-
-  const onKeyDown = useMemo(
-    () =>
-      function onKeyDown(event: KeyboardEvent) {
-        const { key } = event;
-
-        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;
+    switch (key) {
+      case 'ArrowRight':
+        if (!isSkinToneInSearch()) {
+          return;
         }
-      },
-    [BodyRef, focusSearchInput, onType],
-  );
-
-  useEffect(() => {
-    const current = CategoryNavigationRef.current;
+        event.preventDefault();
+        setIsOpen(true);
+        focusSkinTonePicker();
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        // The active-search Search↔Grid exception
+        // wins over generic DOM-order traversal.
+        if (isSearchMode) {
+          goDownFromSearchInput();
+        } else {
+          focusNextRegionFromSearch(goDownFromSearchInput);
+        }
+        break;
+      case 'Enter':
+        event.preventDefault();
+        selectFromSearch();
+        break;
+    }
+  };
+  const tone = function onKeyDown(event: KeyboardEvent) {
+    if (!eventInRegion(event, SkinTonePickerRef)) return;
+    const key = logicalArrowKey(event, SkinTonePickerRef.current);
+    // The fan axis decides the arrow keys: the search placement and a
+    // horizontal SkinTone primitive move left/right, the preview
+    // placement and a vertical primitive move up/down.
+    const vertical =
+      SkinTonePickerRef.current?.getAttribute('data-epr-direction') ===
+      'vertical';
+
+    switch (key) {
+      case vertical ? 'ArrowUp' : 'ArrowLeft':
+        event.preventDefault();
+        if (!isOpen) return focusSearchInput();
+        focusNextSkinTone(focusSearchInput);
+        break;
+      case vertical ? 'ArrowDown' : 'ArrowRight':
+        event.preventDefault();
+        if (!isOpen) return focusSearchInput();
+        focusPrevElementSibling(getActiveElement());
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        setIsOpen(false);
+        goDownFromSearchInput();
+        break;
+      default:
+        onType(event);
+    }
+  };
+  const categories = function onKeyDown(event: KeyboardEvent) {
+    if (!eventInRegion(event, CategoryNavigationRef)) return;
+    // Arrows along the tab axis move between tabs; arrows across it
+    // leave for the previous/next region. A vertical tablist (e.g. a
+    // side rail) therefore uses Up/Down for tabs, per the ARIA tabs
+    // pattern, and Left/Right to leave.
+    const vertical =
+      CategoryNavigationRef.current?.getAttribute('aria-orientation') ===
+      'vertical';
+    const key = logicalArrowKey(event, CategoryNavigationRef.current);
+    const direction = reactionFocusDelta(key);
+
+    if (!direction) {
+      onType(event);
+      return;
+    }
+    event.preventDefault();
+    if (vertical === (key === 'ArrowUp' || key === 'ArrowDown')) {
+      const focusSibling =
+        direction > 0 ? focusNextElementSibling : focusPrevElementSibling;
+      focusSibling(getActiveElement());
+    } else if (direction < 0) {
+      focusPrevRegionFromCategories(focusSearchInput);
+    } else {
+      focusNextRegionFromCategories(() =>
+        focusFirstVisibleEmoji(BodyRef.current),
+      );
+    }
+  };
+  const reactions = function onKeyDown(event: KeyboardEvent) {
+    if (!eventInRegion(event, ReactionsRef)) return;
+    const key = logicalArrowKey(event, ReactionsRef.current);
+    const current = ReactionsRef.current;
 
     if (!current) {
       return;
     }
 
-    current.addEventListener('keydown', onKeyDown);
+    const delta = reactionFocusDelta(key);
 
+    if (delta !== 0 && focusReactionSibling(current, delta)) {
+      event.preventDefault();
+    }
+  };
+  const body = function onKeyDown(event: KeyboardEvent) {
+    if (!eventInRegion(event, BodyRef)) return;
+    const key = logicalArrowKey(event, BodyRef.current);
+
+    const activeElement = buttonFromTarget(event.target as HTMLElement);
+    // Consumer controls own editing and activation; only managed emoji
+    // buttons issue grid commands.
+    if (!activeElement) return;
+
+    // Navigation-generation guard: a pending
+    // materialize/scroll/focus completion aborts when search, data,
+    // geometry, or reactions state changed underneath it.
+    const generation = registry.currentGeneration();
+    const focusGuard = () => registry.isCurrent(generation);
+
+    const direction = reactionFocusDelta(key);
+    if (direction) {
+      event.preventDefault();
+      const row = key === 'ArrowDown' || key === 'ArrowUp';
+      if (row && hasOpenToggles()) closeAllOpenToggles();
+      else
+        focusAdjacentEmoji(activeElement, direction, row, {
+          shouldFocus: focusGuard,
+          exitUp: row ? goUpFromBody : undefined,
+        });
+      return;
+    }
+    switch (key) {
+      case ' ':
+        event.preventDefault();
+        setVariationPicker(event.target as HTMLElement);
+        break;
+      default:
+        onType(event);
+        break;
+    }
+  };
+  const [composing] = useSearchComposingState();
+  const handler = useRef<(event: KeyboardEvent, escapeOnly?: boolean) => void>(
+    () => {},
+  );
+  // One listener owns the native lifecycle; current callbacks supply state
+  // and live region refs without reattaching on every picker render.
+  handler.current = (event, escapeOnly) => {
+    if (composing || event.isComposing || event.keyCode === 229) return;
+    if (event.key !== 'Enter') pendingPick.current = null;
+    if (!escapeOnly) {
+      search(event);
+      tone(event);
+      categories(event);
+      reactions(event);
+      body(event);
+    }
+    main(event);
+  };
+  useEffect(() => {
+    // RootAside owns this native aside for its entire mounted lifetime.
+    // Descendant parts are read through live refs by the delegated handler.
+    const current = ref.current;
+    if (!current) return;
+    // Escape runs once, in the window capture phase, so a consumed key is
+    // stopped before host dismissal listeners (Radix captures on document).
+    let captured: KeyboardEvent | undefined;
+    const scoped = (event: KeyboardEvent) => {
+      if (event === captured) return;
+      if (eventBelongsToPicker(event, current)) handler.current(event);
+    };
+    const capture = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && eventBelongsToPicker(event, current)) {
+        captured = event;
+        handler.current(event, true);
+      }
+    };
+    // Editing the query (paste, autocorrect) or leaving the picker cancels
+    // a queued Enter.
+    const cancelPendingPick = () => {
+      pendingPick.current = null;
+    };
+    current.addEventListener('input', cancelPendingPick);
+    current.addEventListener('focusout', cancelPendingPick);
+    current.addEventListener('keydown', scoped);
+    window.addEventListener('keydown', capture, true);
     return () => {
-      current.removeEventListener('keydown', onKeyDown);
+      current.removeEventListener('input', cancelPendingPick);
+      current.removeEventListener('focusout', cancelPendingPick);
+      current.removeEventListener('keydown', scoped);
+      window.removeEventListener('keydown', capture, true);
     };
-  }, [CategoryNavigationRef, BodyRef, onKeyDown]);
+  }, [ref]);
+}
+
+function eventInRegion(event: KeyboardEvent, ref: ElementRef): boolean {
+  return !!ref.current?.contains(event.target as Node);
 }
 
 // Arrow keys move between reaction buttons (and the expand button)
 // while the reactions bar has focus. The bar lives outside the scroll
 // body, so the body handler never sees these events.
 // https://github.com/ealush/emoji-picker-react/issues/411
-function useReactionsKeyboardEvents() {
-  const ReactionsRef = useReactionsRef();
-  // The reactions bar mounts late when the user collapses the full
-  // picker, so the listener effect must rerun when it opens.
-  const [reactionsOpen] = useReactionsModeState();
-
-  const onKeyDown = useMemo(
-    () =>
-      function onKeyDown(event: KeyboardEvent) {
-        const { key } = event;
-        const current = ReactionsRef.current;
-
-        if (!current) {
-          return;
-        }
-
-        const delta = reactionFocusDelta(key);
-
-        if (delta !== 0 && focusReactionSibling(current, delta)) {
-          event.preventDefault();
-        }
-      },
-    // reactionsOpen: the bar mounts late on collapse, and the new
-    // callback identity reinstalls the listener effect below.
-    [ReactionsRef, reactionsOpen],
-  );
-
-  useEffect(() => {
-    const current = ReactionsRef.current;
-
-    if (!current) {
-      return;
-    }
-
-    current.addEventListener('keydown', onKeyDown);
-
-    return () => {
-      current.removeEventListener('keydown', onKeyDown);
-    };
-  }, [ReactionsRef, onKeyDown]);
-}
 
 function reactionFocusDelta(key: string): number {
   switch (key) {
-    case KeyboardEvents.ArrowRight:
-    case KeyboardEvents.ArrowDown:
+    case 'ArrowRight':
+    case 'ArrowDown':
       return 1;
-    case KeyboardEvents.ArrowLeft:
-    case KeyboardEvents.ArrowUp:
+    case 'ArrowLeft':
+    case 'ArrowUp':
       return -1;
     default:
       return 0;
@@ -386,9 +399,7 @@ function reactionFocusDelta(key: string): number {
 
 function focusReactionSibling(root: HTMLElement, delta: number): boolean {
   const buttons = Array.from(root.querySelectorAll('button'));
-  const activeIndex = buttons.indexOf(
-    getActiveElement() as HTMLButtonElement,
-  );
+  const activeIndex = buttons.indexOf(getActiveElement() as HTMLButtonElement);
   const sibling = activeIndex === -1 ? null : buttons[activeIndex + delta];
 
   if (!sibling) {
@@ -399,141 +410,87 @@ function focusReactionSibling(root: HTMLElement, delta: number): boolean {
   return true;
 }
 
-function useBodyKeyboardEvents() {
-  const BodyRef = useBodyRef();
-  const goUpFromBody = useGoUpFromBody();
-  const setVariationPicker = useSetVariationPicker();
-  const hasOpenToggles = useHasOpenToggles();
-  const closeAllOpenToggles = useCloseAllOpenToggles();
-
-  const onType = useOnType();
-
-  const onKeyDown = useMemo(
-    () =>
-      // eslint-disable-next-line complexity
-      function onKeyDown(event: KeyboardEvent) {
-        const { key } = event;
-
-        const 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();
-            if (hasOpenToggles()) {
-              closeAllOpenToggles();
-              break;
-            }
-            focusVisibleEmojiOneRowDown(activeElement);
-            break;
-          case KeyboardEvents.ArrowUp:
-            event.preventDefault();
-            if (hasOpenToggles()) {
-              closeAllOpenToggles();
-              break;
-            }
-            focusVisibleEmojiOneRowUp(activeElement, goUpFromBody);
-            break;
-          case KeyboardEvents.Space:
-            event.preventDefault();
-            setVariationPicker(event.target as HTMLElement);
-            break;
-          default:
-            onType(event);
-            break;
-        }
-      },
-    [
-      goUpFromBody,
-      onType,
-      setVariationPicker,
-      hasOpenToggles,
-      closeAllOpenToggles,
-    ],
-  );
-
-  useEffect(() => {
-    const current = BodyRef.current;
-
-    if (!current) {
-      return;
-    }
-
-    current.addEventListener('keydown', onKeyDown);
-
-    return () => {
-      current.removeEventListener('keydown', onKeyDown);
-    };
-  }, [BodyRef, onKeyDown]);
-}
-
-function useGoDownFromSearchInput() {
+// Cross-region focus through the registered semantic graph. Returns true
+// when a region handled the move; callers keep their legacy direct target
+// as fallback so unregistered trees behave exactly as before. Exported for
+// focus-restoration flows (reactions transitions) that target regions.
+export function useFocusRegion() {
+  const focusSearchInput = useFocusSearchInput();
   const focusCategoryNavigation = useFocusCategoryNavigation();
-  const isSearchMode = useIsSearchMode();
+  const focusSkinTonePicker = useFocusSkinTonePicker();
   const BodyRef = useBodyRef();
+  const ReactionsRef = useReactionsRef();
+  const registry = useNavigationRegistry();
 
   return useCallback(
-    function goDownFromSearchInput() {
-      if (isSearchMode) {
-        return focusFirstVisibleEmoji(BodyRef.current);
+    function focusRegion(region: RegisteredRegion | undefined): boolean {
+      if (!region) {
+        return false;
       }
-      return focusCategoryNavigation();
-    },
-    [BodyRef, focusCategoryNavigation, isSearchMode],
-  );
-}
-
-function useGoUpFromBody() {
-  const focusSearchInput = useFocusSearchInput();
-  const focusCategoryNavigation = useFocusCategoryNavigation();
-  const isSearchMode = useIsSearchMode();
-
-  return useCallback(
-    function goUpFromEmoji() {
-      if (isSearchMode) {
-        return focusSearchInput();
+      // Grid entry is a materialize/scroll/focus operation: capture the
+      // navigation generation so a stale completion cannot steal focus.
+      const generation = registry.currentGeneration();
+      const focusGuard = () => registry.isCurrent(generation);
+      switch (region.kind as NavigationRegionKind) {
+        case 'search':
+          focusSearchInput();
+          return true;
+        case 'categories':
+          focusCategoryNavigation();
+          return true;
+        case 'grid':
+          focusFirstVisibleEmoji(BodyRef.current, focusGuard);
+          return true;
+        case 'reactions': {
+          const firstButton = ReactionsRef.current?.querySelector('button');
+          focusElement(firstButton ?? null, focusGuard);
+          return true;
+        }
+        case 'preview-skin-tone':
+          focusSkinTonePicker();
+          return true;
       }
-      return focusCategoryNavigation();
     },
-    [focusSearchInput, isSearchMode, focusCategoryNavigation],
+    [
+      focusSearchInput,
+      focusCategoryNavigation,
+      focusSkinTonePicker,
+      BodyRef,
+      ReactionsRef,
+      registry,
+    ],
   );
 }
 
-function focusNextSkinTone(exitLeft: () => void) {
-  const currentSkinTone = getActiveElement();
-
-  if (!currentSkinTone) {
-    return;
-  }
-
-  if (!hasNextElementSibling(currentSkinTone)) {
-    exitLeft();
-  }
-
-  focusNextElementSibling(currentSkinTone);
+function useFocusNextRegionFrom(from: NavigationRegionKind) {
+  return useFocusAdjacentRegion(from, 1);
 }
 
-function focusPrevSkinTone() {
-  const currentSkinTone = getActiveElement();
+function useFocusPrevRegionFrom(from: NavigationRegionKind) {
+  return useFocusAdjacentRegion(from, -1);
+}
 
-  if (!currentSkinTone) {
-    return;
-  }
+function useFocusAdjacentRegion(from: NavigationRegionKind, direction: number) {
+  const registry = useNavigationRegistry();
+  const PickerMainRef = usePickerMainRef();
+  const focusRegion = useFocusRegion();
+  return (fallback?: () => void) => {
+    const getRegion = direction > 0 ? getNextRegion : getPrevRegion;
+    if (!focusRegion(getRegion(registry, PickerMainRef.current, from)))
+      fallback?.();
+  };
+}
 
-  focusPrevElementSibling(currentSkinTone);
+function focusNextSkinTone(exitLeft: () => void) {
+  const current = getActiveElement();
+  if (current && !current.nextElementSibling) exitLeft();
+  focusNextElementSibling(current);
 }
 
 function useOnType() {
-  const appendSearch = useAppendSearch();
-  const focusSearchInput = useFocusSearchInput();
+  const typeToSearch = useTypeToSearchKey();
   const searchDisabled = useSearchDisabledConfig();
+  const SearchInputRef = useSearchInputRef();
   const closeAllOpenToggles = useCloseAllOpenToggles();
 
   return function onType(event: KeyboardEvent) {
@@ -543,15 +500,38 @@ function useOnType() {
       return;
     }
 
-    if (key.match(/(^[a-zA-Z0-9]$){1}/)) {
+    // No search input mounted (a bare Root without Search): the
+    // transition would no-op, so the key is left unclaimed — no
+    // preventDefault, no toggle closing — exactly like searchDisabled.
+    if (!SearchInputRef.current) {
+      return;
+    }
+
+    // One printable letter or digit in any script (not only ASCII): the
+    // localized datasets are searched in their own languages, so a Hebrew,
+    // Cyrillic or Japanese keystroke on the grid starts a search like a
+    // Latin one. Named keys ("Enter", "Tab") are longer than one code
+    // point; space and punctuation stay unclaimed for the grid's own keys.
+    if (/^[\p{L}\p{N}]$/u.test(key)) {
       event.preventDefault();
       closeAllOpenToggles();
-      focusSearchInput();
-      appendSearch(key);
+      typeToSearch(key);
     }
   };
 }
 
+// Left/right arrows follow the visual direction: under `dir="rtl"` the
+// grid, tabs, reactions and tone fan are mirrored, so ArrowLeft moves
+// forward. The live region element supplies the computed direction.
+function logicalArrowKey(event: KeyboardEvent, region: Element | null): string {
+  const { key } = event;
+  return (key === 'ArrowLeft' || key === 'ArrowRight') && isRtl(region)
+    ? key === 'ArrowLeft'
+      ? 'ArrowRight'
+      : 'ArrowLeft'
+    : key;
+}
+
 function hasModifier(event: KeyboardEvent): boolean {
   const { metaKey, ctrlKey, altKey } = event;