emoji-picker-react 4.22.2 → 5.0.0

package/src/hooks/useMouseDownHandlers.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useEffect, useRef } from 'react';
 
+import { eventBelongsToPicker } from '../DomUtils/eventBelongsToPicker';
 import {
   allUnifiedFromEmojiElement,
   isEmojiElement,
@@ -22,15 +23,21 @@ import {
 } from '../config/useConfig';
 import { DataEmoji } from '../dataUtils/DataTypes';
 import {
-  activeVariationFromUnified,
+  skinToneFromEmoji,
   emojiHasVariations,
   emojiNames,
   emojiUnified,
+  emojiCanonicalUnified,
 } from '../dataUtils/emojiUtils';
 import { parseNativeEmoji } from '../dataUtils/parseNativeEmoji';
 import { setSuggested } from '../dataUtils/suggested';
 import { isCustomEmoji } from '../typeRefinements/typeRefinements';
-import { EmojiClickData, SkinTones, EmojiStyle } from '../types/exposedTypes';
+import {
+  EmojiClickData,
+  EmojiStyle,
+  EmojiStyleValue,
+  SkinTones,
+} from '../types/exposedTypes';
 
 import { useCloseAllOpenToggles } from './useCloseAllOpenToggles';
 import useSetVariationPicker from './useSetVariationPicker';
@@ -39,7 +46,9 @@ export function useMouseDownHandlers(
   ContainerRef: React.MutableRefObject<NullableElement>,
   mouseEventSource: MOUSE_EVENT_SOURCE,
 ) {
-  const mouseDownTimerRef = useRef<ReturnType<typeof setTimeout>>();
+  const mouseDownTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(
+    undefined,
+  );
   const setVariationPicker = useSetVariationPicker();
   const disallowClickRef = useDisallowClickRef();
   const [, setEmojiVariationPicker] = useEmojiVariationPickerState();
@@ -53,20 +62,23 @@ export function useMouseDownHandlers(
 
   const onClick = React.useCallback(
     function onClick(event: MouseEvent) {
-      if (disallowClickRef.current) {
+      if (
+        !eventBelongsToPicker(event, ContainerRef.current) ||
+        disallowClickRef.current
+      ) {
         return;
       }
 
       closeAllOpenToggles();
 
-      const [emoji, unified] = emojiFromEvent(event, emojiByUnified);
+      const [record, unified] = emojiFromEvent(event, emojiByUnified);
 
-      if (!emoji || !unified) {
+      if (!record || !unified) {
         return;
       }
 
-      const skinToneToUse =
-        activeVariationFromUnified(unified) || activeSkinTone;
+      const emoji = { ...record, renderUnified: unified };
+      const skinToneToUse = skinToneFromEmoji(emoji, unified, activeSkinTone);
 
       updateSuggested();
       setSuggested(emoji, skinToneToUse);
@@ -76,6 +88,7 @@ export function useMouseDownHandlers(
       );
     },
     [
+      ContainerRef,
       activeSkinTone,
       closeAllOpenToggles,
       disallowClickRef,
@@ -89,6 +102,7 @@ export function useMouseDownHandlers(
 
   const onMouseDown = React.useCallback(
     function onMouseDown(event: MouseEvent) {
+      if (!eventBelongsToPicker(event, ContainerRef.current)) return;
       if (mouseDownTimerRef.current) {
         clearTimeout(mouseDownTimerRef.current);
       }
@@ -99,15 +113,19 @@ export function useMouseDownHandlers(
         return;
       }
 
+      // Preserve the native target before dispatch ends. Shadow DOM events
+      // are retargeted to the host afterward, before the long-press timer.
+      const target = event.target as HTMLElement;
       mouseDownTimerRef.current = setTimeout(() => {
         disallowClickRef.current = true;
         mouseDownTimerRef.current = undefined;
         closeAllOpenToggles();
-        setVariationPicker(event.target as HTMLElement);
+        setVariationPicker(target);
         setEmojiVariationPicker(emoji);
       }, 500);
     },
     [
+      ContainerRef,
       disallowClickRef,
       emojiByUnified,
       closeAllOpenToggles,
@@ -140,6 +158,40 @@ export function useMouseDownHandlers(
       return;
     }
     const confainerRef = ContainerRef.current;
+    let pointerStart: { x: number; y: number } | null = null;
+    const cancelPress = () => {
+      if (mouseDownTimerRef.current) clearTimeout(mouseDownTimerRef.current);
+      mouseDownTimerRef.current = undefined;
+      pointerStart = null;
+    };
+    const onPointerDown = (event: PointerEvent) => {
+      if (event.pointerType === 'mouse' || !event.isPrimary) return;
+      pointerStart = { x: event.clientX, y: event.clientY };
+      onMouseDown(event);
+    };
+    const onPointerMove = (event: PointerEvent) => {
+      if (
+        pointerStart &&
+        Math.hypot(
+          event.clientX - pointerStart.x,
+          event.clientY - pointerStart.y,
+        ) > 8
+      ) {
+        cancelPress();
+      }
+    };
+    const onPointerUp = (event: PointerEvent) => {
+      if (event.pointerType === 'mouse') return;
+      onMouseUp();
+      pointerStart = null;
+    };
+    const onPointerCancel = () => {
+      onMouseUp();
+      cancelPress();
+    };
+    const onContextMenu = (event: Event) => {
+      if (disallowClickRef.current) event.preventDefault();
+    };
     confainerRef.addEventListener('click', onClick, {
       passive: true,
     });
@@ -150,13 +202,32 @@ export function useMouseDownHandlers(
     confainerRef.addEventListener('mouseup', onMouseUp, {
       passive: true,
     });
+    confainerRef.addEventListener('pointerdown', onPointerDown, {
+      passive: true,
+    });
+    confainerRef.addEventListener('pointermove', onPointerMove, {
+      passive: true,
+    });
+    window.addEventListener('pointerup', onPointerUp, { passive: true });
+    window.addEventListener('pointercancel', onPointerCancel, {
+      passive: true,
+    });
+    confainerRef.addEventListener('scroll', cancelPress, { passive: true });
+    confainerRef.addEventListener('contextmenu', onContextMenu);
 
     return () => {
+      cancelPress();
       confainerRef?.removeEventListener('click', onClick);
       confainerRef?.removeEventListener('mousedown', onMouseDown);
       confainerRef?.removeEventListener('mouseup', onMouseUp);
+      confainerRef.removeEventListener('pointerdown', onPointerDown);
+      confainerRef.removeEventListener('pointermove', onPointerMove);
+      window.removeEventListener('pointerup', onPointerUp);
+      window.removeEventListener('pointercancel', onPointerCancel);
+      confainerRef.removeEventListener('scroll', cancelPress);
+      confainerRef.removeEventListener('contextmenu', onContextMenu);
     };
-  }, [ContainerRef, onClick, onMouseDown, onMouseUp]);
+  }, [ContainerRef, onClick, onMouseDown, onMouseUp, disallowClickRef]);
 }
 
 function emojiFromEvent(
@@ -179,13 +250,13 @@ function emojiFromEvent(
     return [];
   }
 
-  return [emoji, unified ?? resolvedUnified];
+  return [emoji, resolvedUnified];
 }
 
-function emojiClickOutput(
+export function emojiClickOutput(
   emoji: DataEmoji,
   activeSkinTone: SkinTones,
-  activeEmojiStyle: EmojiStyle,
+  activeEmojiStyle: EmojiStyleValue,
   getEmojiUrl: GetEmojiUrl,
 ): EmojiClickData {
   const names = emojiNames(emoji);
@@ -206,17 +277,21 @@ function emojiClickOutput(
     };
   }
   const unified = emojiUnified(emoji, activeSkinTone);
+  const imageStyle =
+    activeEmojiStyle === EmojiStyle.NATIVE
+      ? EmojiStyle.APPLE
+      : activeEmojiStyle;
 
   return {
     activeSkinTone,
     emoji: parseNativeEmoji(unified),
-    getImageUrl(emojiStyle: EmojiStyle = activeEmojiStyle ?? EmojiStyle.APPLE) {
+    getImageUrl(emojiStyle: EmojiStyleValue = imageStyle) {
       return getEmojiUrl(unified, emojiStyle);
     },
-    imageUrl: getEmojiUrl(unified, activeEmojiStyle ?? EmojiStyle.APPLE),
+    imageUrl: getEmojiUrl(unified, imageStyle),
     isCustom: false,
     names,
     unified,
-    unifiedWithoutSkinTone: emojiUnified(emoji),
+    unifiedWithoutSkinTone: emojiCanonicalUnified(emoji),
   };
 }

package/src/hooks/useOnFocus.ts

@@ -1,7 +1,12 @@
 import { useEffect } from 'react';
 
-import { buttonFromTarget, emojiFromElement } from '../DomUtils/selectors';
+import { eventBelongsToPicker } from '../DomUtils/eventBelongsToPicker';
+import {
+  allUnifiedFromEmojiElement,
+  buttonFromTarget,
+} from '../DomUtils/selectors';
 import { useBodyRef } from '../components/context/ElementRefContext';
+import { usePickerDataContext } from '../components/context/PickerDataContext';
 import { useEmojiStyleConfig, useGetEmojiUrlConfig } from '../config/useConfig';
 import { emojiHasVariations } from '../dataUtils/emojiUtils';
 import { EmojiStyle } from '../types/exposedTypes';
@@ -12,6 +17,8 @@ export function useOnFocus() {
   const BodyRef = useBodyRef();
   const emojiStyle = useEmojiStyleConfig();
   const getEmojiUrl = useGetEmojiUrlConfig();
+  // Root-scoped lookup: honors localized emojiData and custom emojis.
+  const { emojiByUnified } = usePickerDataContext();
 
   useEffect(() => {
     if (emojiStyle === EmojiStyle.NATIVE) {
@@ -27,13 +34,15 @@ export function useOnFocus() {
     };
 
     function onFocus(event: FocusEvent) {
+      if (!eventBelongsToPicker(event, bodyRef)) return;
       const button = buttonFromTarget(event.target as HTMLElement);
 
       if (!button) {
         return;
       }
 
-      const [emoji] = emojiFromElement(button);
+      const { unified, originalUnified } = allUnifiedFromEmojiElement(button);
+      const emoji = emojiByUnified(unified ?? originalUnified ?? undefined);
 
       if (!emoji) {
         return;
@@ -43,5 +52,5 @@ export function useOnFocus() {
         preloadEmoji(getEmojiUrl, emoji, emojiStyle);
       }
     }
-  }, [BodyRef, emojiStyle, getEmojiUrl]);
+  }, [BodyRef, emojiStyle, getEmojiUrl, emojiByUnified]);
 }

package/src/hooks/useOnScroll.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { ElementRef } from '../components/context/ElementRefContext';
 
@@ -7,6 +7,9 @@ import { useCloseAllOpenToggles } from './useCloseAllOpenToggles';
 export function useOnScroll(BodyRef: ElementRef) {
   const closeAllOpenToggles = useCloseAllOpenToggles();
   const [scrollTop, setScrollTop] = useState(0);
+  const latestRef = useRef(0);
+  const scheduledRef = useRef(false);
+  const frameRef = useRef(0);
 
   useEffect(() => {
     const bodyRef = BodyRef.current;
@@ -18,13 +21,26 @@ export function useOnScroll(BodyRef: ElementRef) {
       passive: true,
     });
 
+    // High-frequency geometry work coalesces to at most one scheduled
+    // virtualization update per animation frame.
+    // Toggle dismissal stays immediate: those setters bail out when
+    // nothing is open, so unrelated regions never rerender for it.
     function onScroll() {
-      setScrollTop(bodyRef?.scrollTop ?? 0);
+      latestRef.current = bodyRef?.scrollTop ?? 0;
+      if (!scheduledRef.current) {
+        scheduledRef.current = true;
+        frameRef.current = requestAnimationFrame(() => {
+          scheduledRef.current = false;
+          setScrollTop(latestRef.current);
+        });
+      }
       closeAllOpenToggles();
     }
 
     return () => {
       bodyRef?.removeEventListener('scroll', onScroll);
+      cancelAnimationFrame(frameRef.current);
+      scheduledRef.current = false;
     };
   }, [BodyRef, closeAllOpenToggles]);
 

package/src/hooks/useReactionsFocus.ts

@@ -0,0 +1,118 @@
+import * as React from 'react';
+
+import { focusElement } from '../DomUtils/focusElement';
+import {
+  usePickerMainRef,
+  useReactionsRef,
+  useSearchInputRef,
+} from '../components/context/ElementRefContext';
+import {
+  useNavigationRegistry,
+  useReactionsModeState,
+} from '../components/context/PickerContext';
+import { useAutoFocusSearchConfig } from '../config/useConfig';
+import { getActiveRegionsInDomOrder } from '../state/regionTraversal';
+
+import { useFocusSearchInput } from './useFocus';
+import { useFocusRegion } from './useKeyboardNavigation';
+
+// Reactions ↔ full-picker focus management.
+//
+// - On expansion (compact → full): the managed panel activates; after its
+//   destination exists, Search is preferred when present and autofocus is
+//   enabled, otherwise the next valid focusable region takes focus. No
+//   focus transfer waits on an arbitrary animation timeout — effects run
+//   after commit, when destinations exist.
+// - On collapse (full → compact): the panel deactivates and focus restores
+//   to the initiating control when it is still connected and outside the
+//   now-inert panel; otherwise the first valid Reactions control.
+// - Initial mount never steals focus in either mode (autofocus, when
+//   enabled, remains the browser/input's own behavior).
+export function useReactionsFocusManager() {
+  const PickerMainRef = usePickerMainRef();
+  const ReactionsRef = useReactionsRef();
+  const SearchInputRef = useSearchInputRef();
+  const [reactionsOpen] = useReactionsModeState();
+  const autoFocusSearch = useAutoFocusSearchConfig();
+  const focusSearchInput = useFocusSearchInput();
+  const focusRegion = useFocusRegion();
+  const registry = useNavigationRegistry();
+  const lastControlRef = React.useRef<HTMLElement | null>(null);
+  // Previous-value ref (not a first-run flag): StrictMode double-invokes
+  // this effect on mount, and a flag would treat the second run as a
+  // transition and steal focus. Comparing values keeps both runs silent.
+  const prevReactionsOpen = React.useRef(reactionsOpen);
+
+  // Remember the initiating control: the last focused element inside Root.
+  React.useEffect(() => {
+    const root = PickerMainRef.current;
+    if (!root) {
+      return;
+    }
+    function onFocusIn(event: FocusEvent) {
+      if (event.target instanceof HTMLElement) {
+        lastControlRef.current = event.target;
+      }
+    }
+    root.addEventListener('focusin', onFocusIn);
+    return () => {
+      root.removeEventListener('focusin', onFocusIn);
+    };
+  }, [PickerMainRef]);
+
+  React.useEffect(() => {
+    if (prevReactionsOpen.current === reactionsOpen) {
+      return;
+    }
+    prevReactionsOpen.current = reactionsOpen;
+    if (!reactionsOpen) {
+      focusAfterExpansion();
+    } else {
+      focusAfterCollapse();
+    }
+    // Runs on reactions-mode transitions only.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [reactionsOpen]);
+
+  function focusAfterExpansion() {
+    if (autoFocusSearch && SearchInputRef.current) {
+      focusSearchInput();
+      return;
+    }
+    // Next valid focusable region in DOM order (Search deliberately
+    // skipped here: without autofocus it is not the preferred entry).
+    const root = PickerMainRef.current;
+    const active = getActiveRegionsInDomOrder(registry, root).filter(
+      (region) => region.kind !== 'search' && region.kind !== 'reactions',
+    );
+    focusRegion(active[0]);
+  }
+
+  function focusAfterCollapse() {
+    const last = lastControlRef.current;
+    const panel = PickerMainRef.current?.querySelector(
+      '[data-epr-part="panel"]',
+    );
+    if (
+      last &&
+      last.isConnected &&
+      !(panel && panel.contains(last)) &&
+      isFocusable(last)
+    ) {
+      focusElement(last);
+      return;
+    }
+    const firstReaction = ReactionsRef.current?.querySelector('button');
+    focusElement(firstReaction ?? null);
+  }
+
+  function isFocusable(element: HTMLElement): boolean {
+    if (element.hidden || element.getAttribute('aria-hidden') === 'true') {
+      return false;
+    }
+    if (element instanceof HTMLButtonElement && element.disabled) {
+      return false;
+    }
+    return true;
+  }
+}

package/src/hooks/useRegisterRegion.ts

@@ -0,0 +1,92 @@
+import * as React from 'react';
+
+import { usePickerMainRef } from '../components/context/ElementRefContext';
+import { useNavigationRegistry } from '../components/context/PickerContext';
+import {
+  NavigationRegionKind,
+  reportDuplicateRegion,
+  reportPortalRegion,
+} from '../state/navigationRegistry';
+
+/**
+ * Register a semantic focus region root with the Root-scoped navigation
+ * registry.
+ *
+ * - Registers after mount and unregisters on unmount; omitted regions
+ *   (null element) stay absent from the graph — there are no placeholder
+ *   or dead graph nodes.
+ * - `presenceDeps` reruns registration when presence-affecting state
+ *   changes (e.g. a tab bar that unmounts below two categories).
+ * - Portal roots (outside the Root DOM element) are unsupported: dev
+ *   warns and the region is excluded from traversal.
+ * - A second singleton registration throws in development and is ignored
+ *   (first wins) in production.
+ */
+export function useRegisterRegion(
+  kind: NavigationRegionKind,
+  ref: React.RefObject<Element | null> & {
+    subscribe?: (listener: () => void) => () => void;
+  },
+  presenceDeps: readonly unknown[] = [],
+): void {
+  const registry = useNavigationRegistry();
+  const PickerMainRef = usePickerMainRef();
+
+  React.useEffect(() => {
+    if (!registry.claimSingleton(kind)) {
+      // Development throws inside; production warns once and falls
+      // through to the return below, keeping the first registration
+      // authoritative.
+      reportDuplicateRegion(kind);
+      return;
+    }
+
+    let unregister: (() => void) | undefined;
+    const attach = () => {
+      unregister?.();
+      unregister = undefined;
+      const element = ref.current;
+      if (!element) return;
+      const rootElement = PickerMainRef.current;
+      if (rootElement && !rootElement.contains(element)) {
+        reportPortalRegion(kind);
+        return;
+      }
+      // A tone control composed inside Search belongs to that region's
+      // local keyboard flow, rather than an extra region on ArrowDown.
+      if (
+        kind === 'preview-skin-tone' &&
+        element.closest('[data-epr-part="search"]')
+      )
+        return;
+      unregister = registry.register(kind, element);
+    };
+    attach();
+    const unsubscribe = ref.subscribe?.(attach);
+    return () => {
+      unsubscribe?.();
+      unregister?.();
+      registry.releaseSingleton(kind);
+    };
+    // presenceDeps reruns the effect when region presence may have changed.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [registry, kind, ref, PickerMainRef, ...presenceDeps]);
+}
+
+/**
+ * Claim a structural singleton slot (Viewport/Preview)
+ * without registering a focus region. Same duplicate policy as regions.
+ */
+export function useSingletonClaim(kind: string): void {
+  const registry = useNavigationRegistry();
+
+  React.useEffect(() => {
+    if (!registry.claimSingleton(kind)) {
+      reportDuplicateRegion(kind);
+      return;
+    }
+    return () => {
+      registry.releaseSingleton(kind);
+    };
+  }, [registry, kind]);
+}