emoji-picker-react 4.22.3 → 5.0.1

package/src/hooks/useDataIdentityStabilityWarning.ts

@@ -0,0 +1,86 @@
+/* global process: readonly */
+import * as React from 'react';
+
+import type { CustomEmoji } from '../config/customEmojiConfig';
+import { defaultEmojiDataOrEmpty } from '../data/defaultEmojiData';
+import type { EmojiData } from '../types/exposedTypes';
+
+interface IdentityTracker {
+  prev: unknown;
+  consecutiveChanges: number;
+  warned: boolean;
+}
+
+function trackIdentity(
+  tracker: IdentityTracker,
+  value: unknown,
+  isDefault: boolean,
+  message: string,
+): void {
+  if (isDefault) {
+    tracker.prev = value;
+    tracker.consecutiveChanges = 0;
+    return;
+  }
+  if (tracker.prev !== undefined && tracker.prev !== value) {
+    tracker.consecutiveChanges += 1;
+  } else if (tracker.prev === value) {
+    tracker.consecutiveChanges = 0;
+  }
+  tracker.prev = value;
+  if (tracker.consecutiveChanges >= 3 && !tracker.warned) {
+    tracker.warned = true;
+    // eslint-disable-next-line no-console
+    console.warn(message);
+  }
+}
+
+function freshTracker(): IdentityTracker {
+  return { prev: undefined, consecutiveChanges: 0, warned: false };
+}
+
+/**
+ * Dev-only diagnostic.
+ *
+ * Identity caching only helps when callers keep data props referentially
+ * stable. If a non-default `emojiData` (or `customEmojis`) changes identity
+ * on three consecutive committed renders, warn once that repeated identity
+ * churn defeats prepared-data caching. Behavior stays correct; this is
+ * diagnostic only. A single/occasional replacement (e.g. locale change)
+ * must not warn. No deep-compare or clone is performed.
+ */
+export const useDataIdentityStabilityWarning: (
+  emojiData: EmojiData | undefined,
+  customEmojis: CustomEmoji[] | undefined,
+) => void =
+  // Development only: production bundles drop the trackers entirely.
+  process.env.NODE_ENV === 'production'
+    ? () => undefined
+    : useIdentityChurnWarning;
+
+function useIdentityChurnWarning(
+  emojiData: EmojiData | undefined,
+  customEmojis: CustomEmoji[] | undefined,
+): void {
+  const emojiState = React.useRef<IdentityTracker>(freshTracker());
+  const customState = React.useRef<IdentityTracker>(freshTracker());
+
+  React.useEffect(() => {
+    trackIdentity(
+      emojiState.current,
+      emojiData,
+      !emojiData || emojiData === defaultEmojiDataOrEmpty(),
+      '[emoji-picker-react] `emojiData` changed identity on three consecutive renders. ' +
+        'Memoize/reuse the dataset object so the prepared-data cache can be shared. ' +
+        'Behavior remains correct; caching is only defeated by identity churn.',
+    );
+    trackIdentity(
+      customState.current,
+      customEmojis,
+      !customEmojis || customEmojis.length === 0,
+      '[emoji-picker-react] `customEmojis` changed identity on three consecutive renders. ' +
+        'Memoize/reuse the array so custom-emoji derivation can be cached. ' +
+        'Behavior remains correct; caching is only defeated by identity churn.',
+    );
+  });
+}

package/src/hooks/useDebouncedState.ts

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 export function useDebouncedState<T>(
   initialValue: T,
@@ -7,6 +7,18 @@ export function useDebouncedState<T>(
   const [state, setState] = useState<T>(initialValue);
   const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
+  // A pending trailing edge must never fire after unmount (React warns
+  // about the post-unmount setState and the work is wasted).
+  useEffect(
+    () => () => {
+      if (timer.current) {
+        clearTimeout(timer.current);
+        timer.current = null;
+      }
+    },
+    [],
+  );
+
   function debouncedSetState(value: T) {
     return new Promise<T>((resolve) => {
       if (timer.current) {

package/src/hooks/useDisallowedEmojis.ts

@@ -1,52 +1,41 @@
-import { useRef, useMemo } from 'react';
+import { useCallback } from 'react';
 
-import { usePickerDataContext } from '../components/context/PickerDataContext';
-import { useEmojiVersionConfig } from '../config/useConfig';
+import {
+  useActiveSkinToneState,
+  useNativeEmojiSupport,
+} from '../components/context/PickerContext';
+import { useEmojiVersionConfig, useUnicodeToHide } from '../config/useConfig';
 import { DataEmoji } from '../dataUtils/DataTypes';
 import {
   addedIn,
   emojiUnified,
   unifiedWithoutSkinTone,
 } from '../dataUtils/emojiUtils';
-
-import { useIsUnicodeHidden } from './useHideEmojisByUniocode';
-
-export function useDisallowedEmojis() {
-  const DisallowedEmojisRef = useRef<Record<string, boolean>>({});
-  const emojiVersionConfig = useEmojiVersionConfig();
-  const { allEmojis } = usePickerDataContext();
-
-  return useMemo(() => {
-    const emojiVersion = parseFloat(`${emojiVersionConfig}`);
-
-    if (!emojiVersionConfig || Number.isNaN(emojiVersion)) {
-      return DisallowedEmojisRef.current;
-    }
-
-    return allEmojis.reduce((disallowedEmojis, emoji) => {
-      if (addedInNewerVersion(emoji, emojiVersion)) {
-        disallowedEmojis[emojiUnified(emoji)] = true;
-      }
-
-      return disallowedEmojis;
-    }, DisallowedEmojisRef.current);
-  }, [emojiVersionConfig, allEmojis]);
-}
+import { isNativeEmojiSupported } from '../dataUtils/nativeEmojiSupport';
+import { isCustomEmoji } from '../typeRefinements/typeRefinements';
 
 export function useIsEmojiDisallowed() {
-  const disallowedEmojis = useDisallowedEmojis();
-  const isUnicodeHidden = useIsUnicodeHidden();
-
-  return function isEmojiDisallowed(emoji: DataEmoji) {
-    const unified = unifiedWithoutSkinTone(emojiUnified(emoji));
-
-    return Boolean(disallowedEmojis[unified] || isUnicodeHidden(unified));
-  };
-}
-
-function addedInNewerVersion(
-  emoji: DataEmoji,
-  supportedLevel: number,
-): boolean {
-  return addedIn(emoji) > supportedLevel;
+  const configured = parseFloat(useEmojiVersionConfig() || '');
+  const nativeSupport = useNativeEmojiSupport();
+  // A configured cap restricts native support; it never overrides it.
+  const cap = Number.isNaN(configured) ? Infinity : configured;
+  const unicodeToHide = useUnicodeToHide();
+  const [activeSkinTone] = useActiveSkinToneState();
+
+  return useCallback(
+    function isEmojiDisallowed(
+      emoji: DataEmoji,
+      renderedUnified = emojiUnified(emoji, activeSkinTone),
+    ) {
+      if (unicodeToHide.has(unifiedWithoutSkinTone(emojiUnified(emoji))))
+        return true;
+      if (isCustomEmoji(emoji)) return false;
+      const version = addedIn(emoji);
+      return (
+        version > cap ||
+        !isNativeEmojiSupported(nativeSupport, renderedUnified, version)
+      );
+    },
+    [activeSkinTone, unicodeToHide, cap, nativeSupport],
+  );
 }

package/src/hooks/useEmojiPreviewEvents.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useEffect } from 'react';
 
 import { detectEmojyPartiallyBelowFold } from '../DomUtils/detectEmojyPartiallyBelowFold';
+import { eventBelongsToPicker } from '../DomUtils/eventBelongsToPicker';
 import { focusElement } from '../DomUtils/focusElement';
 import {
   allUnifiedFromEmojiElement,
@@ -11,16 +12,19 @@ import {
   useBodyRef,
   usePickerMainRef,
 } from '../components/context/ElementRefContext';
-import { PreviewEmoji } from '../components/footer/Preview';
+import { ActiveEmojiState } from '../components/context/PickerContext';
 
 import {
   useAllowMouseMove,
   useIsMouseDisallowed,
 } from './useDisallowMouseMove';
 
+// Tracks the hovered/focused emoji. `focusOnHover` additionally moves
+// focus to the hovered emoji so arrow keys continue from it (enabled
+// together with the preview, as in v4).
 export function useEmojiPreviewEvents(
-  allow: boolean,
-  setPreviewEmoji: React.Dispatch<React.SetStateAction<PreviewEmoji>>,
+  focusOnHover: boolean,
+  setPreviewEmoji: React.Dispatch<React.SetStateAction<ActiveEmojiState>>,
 ) {
   const BodyRef = useBodyRef();
   const PickerMainRef = usePickerMainRef();
@@ -28,9 +32,6 @@ export function useEmojiPreviewEvents(
   const allowMouseMove = useAllowMouseMove();
 
   useEffect(() => {
-    if (!allow) {
-      return;
-    }
     const bodyRef = BodyRef.current;
 
     bodyRef?.addEventListener('keydown', onEscape, {
@@ -39,6 +40,14 @@ export function useEmojiPreviewEvents(
 
     bodyRef?.addEventListener('mouseover', onMouseOver, true);
 
+    // Mouseover precedes mousemove on a newly hovered cell. Resume hover
+    // during capture, before the body's movement listener clears the
+    // keyboard guard, so the first real pointer movement is not lost.
+    bodyRef?.addEventListener('mousemove', onMouseMove, {
+      capture: true,
+      passive: true,
+    });
+
     bodyRef?.addEventListener('focus', onEnter, true);
 
     bodyRef?.addEventListener('mouseout', onLeave, {
@@ -47,6 +56,7 @@ export function useEmojiPreviewEvents(
     bodyRef?.addEventListener('blur', onLeave, true);
 
     function onEnter(e: FocusEvent) {
+      if (!eventBelongsToPicker(e, bodyRef)) return;
       const button = buttonFromTarget(e.target as HTMLElement);
 
       if (!button) {
@@ -65,6 +75,7 @@ export function useEmojiPreviewEvents(
       });
     }
     function onLeave(e?: FocusEvent | MouseEvent) {
+      if (e && !eventBelongsToPicker(e, bodyRef)) return;
       if (e) {
         const relatedTarget = e.relatedTarget as HTMLElement;
 
@@ -76,13 +87,22 @@ export function useEmojiPreviewEvents(
       setPreviewEmoji(null);
     }
     function onEscape(e: KeyboardEvent) {
+      if (!eventBelongsToPicker(e, bodyRef)) return;
       if (e.key === 'Escape') {
         setPreviewEmoji(null);
       }
     }
 
+    function onMouseMove(e: MouseEvent) {
+      if (!eventBelongsToPicker(e, bodyRef) || !isMouseDisallowed()) {
+        return;
+      }
+      allowMouseMove();
+      onMouseOver(e);
+    }
+
     function onMouseOver(e: MouseEvent) {
-      if (isMouseDisallowed()) {
+      if (!eventBelongsToPicker(e, bodyRef) || isMouseDisallowed()) {
         return;
       }
 
@@ -112,6 +132,7 @@ export function useEmojiPreviewEvents(
       // the browser scroll them into view, yanking the scroll position
       // while the user is browsing (see also PR #509).
       if (
+        focusOnHover &&
         !isExternalElementFocused() &&
         !isPartiallyBelowFold(button, bodyRef)
       ) {
@@ -130,7 +151,11 @@ export function useEmojiPreviewEvents(
     function isExternalElementFocused(): boolean {
       const active = document.activeElement as HTMLElement | null;
 
-      if (!active || active === document.body || active === document.documentElement) {
+      if (
+        !active ||
+        active === document.body ||
+        active === document.documentElement
+      ) {
         return false;
       }
 
@@ -138,11 +163,19 @@ export function useEmojiPreviewEvents(
     }
 
     return () => {
-      bodyRef?.removeEventListener('mouseover', onMouseOver);
+      bodyRef?.removeEventListener('mouseover', onMouseOver, true);
+      bodyRef?.removeEventListener('mousemove', onMouseMove, true);
       bodyRef?.removeEventListener('mouseout', onLeave);
       bodyRef?.removeEventListener('focus', onEnter, true);
       bodyRef?.removeEventListener('blur', onLeave, true);
       bodyRef?.removeEventListener('keydown', onEscape);
     };
-  }, [BodyRef, PickerMainRef, allow, setPreviewEmoji, isMouseDisallowed, allowMouseMove]);
+  }, [
+    BodyRef,
+    PickerMainRef,
+    focusOnHover,
+    setPreviewEmoji,
+    isMouseDisallowed,
+    allowMouseMove,
+  ]);
 }

package/src/hooks/useEmojiVirtualization.tsx

@@ -2,7 +2,10 @@ import { ReactNode, useEffect } from 'react';
 import * as React from 'react';
 
 import { useBodyRef } from '../components/context/ElementRefContext';
-import { useActiveSkinToneState } from '../components/context/PickerContext';
+import {
+  useActiveSkinToneState,
+  useRequestNativeProbe,
+} from '../components/context/PickerContext';
 import { ClickableEmoji } from '../components/emoji/Emoji';
 import {
   useEmojiStyleConfig,
@@ -10,17 +13,20 @@ import {
   useLazyLoadEmojisConfig,
   useSkinTonesDisabledConfig,
 } from '../config/useConfig';
-import { DataEmojis } from '../dataUtils/DataTypes';
+import { DataEmoji, DataEmojis } from '../dataUtils/DataTypes';
 import { emojiUnified } from '../dataUtils/emojiUtils';
+import { EmojiStyle } from '../types/exposedTypes';
 import {
   getEmojiPositionStyle,
   shouldVirtualize,
+  isJustBelowViewport,
 } from '../virtualization/virtualizationHelpers';
 
-import { preloadEmojiIfNeeded } from './preloadEmoji';
+import { preloadEmoji } from './preloadEmoji';
 import { useCategoryHeight } from './useCategoryHeight';
 import { useIsEmojiDisallowed } from './useDisallowedEmojis';
 import { useIsEmojiHidden } from './useIsEmojiHidden';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
 
 export function useEmojiVirtualization({
   categoryEmojis,
@@ -28,12 +34,15 @@ export function useEmojiVirtualization({
   onHeightReady,
   scrollTop,
   isCategoryVisible,
+  positioned,
 }: {
   categoryEmojis: DataEmojis;
   topOffset: number;
   onHeightReady: (height: number) => void;
   scrollTop: number;
   isCategoryVisible: boolean;
+  /** Whether topOffset is final; unmeasured sections above shift it. */
+  positioned: boolean;
 }) {
   const isEmojiHidden = useIsEmojiHidden();
   const lazyLoadEmojis = useLazyLoadEmojisConfig();
@@ -43,25 +52,52 @@ export function useEmojiVirtualization({
   const getEmojiUrl = useGetEmojiUrlConfig();
   const showVariations = !useSkinTonesDisabledConfig();
   const BodyRef = useBodyRef();
+  const requestNativeProbe = useRequestNativeProbe();
+  // Native glyphs checked exactly: the cells this pass renders (visible
+  // rows plus virtualization's margin rows), nothing else.
+  const probe: string[] = [];
+  const preloads: DataEmoji[] = [];
+  const [committed, setCommitted] = React.useState(false);
 
-  let virtualizedCounter = 0;
-
-  const emojisToPush = categoryEmojis.filter((emoji) => {
-    const isDisallowed = isEmojiDisallowed(emoji);
-    const { failedToLoad, filteredOut, hidden } = isEmojiHidden(emoji);
+  // A section shows each rendered emoji once. Recents can hold the same
+  // emoji under two tones (e.g. neutral and medium); the active tone
+  // renders both as one identity, which must not be listed or keyed twice.
+  const emojisToPush = React.useMemo(() => {
+    const rendered = new Set<string>();
+    return categoryEmojis.filter((emoji) => {
+      const isDisallowed = isEmojiDisallowed(emoji);
+      const { hidden } = isEmojiHidden(emoji);
 
-    return !failedToLoad && !filteredOut && !hidden && !isDisallowed;
-  });
+      if (hidden || isDisallowed) {
+        return false;
+      }
+      const unified = emojiUnified(emoji, activeSkinTone);
+      if (rendered.has(unified)) {
+        return false;
+      }
+      rendered.add(unified);
+      return true;
+    });
+  }, [categoryEmojis, activeSkinTone, isEmojiHidden, isEmojiDisallowed]);
 
-  const dimensions = useCategoryHeight(emojisToPush.length);
+  const dimensions = useCategoryHeight(
+    emojisToPush.length,
+    isCategoryVisible && positioned,
+  );
 
+  // Guarantee a render even when a hidden picker has no measurement cell.
+  // A passive update avoids flushing all observer effects before first paint.
   useEffect(() => {
+    if (!dimensions) setCommitted(true);
+  }, [dimensions]);
+
+  useIsomorphicLayoutEffect(() => {
     if (dimensions) {
       onHeightReady(dimensions.categoryHeight);
     }
   }, [dimensions, onHeightReady, emojisToPush.length]);
 
-  const isVirtualized = (style: { top: number; left: number } | undefined) =>
+  const isVirtualized = (style: { top: number } | undefined) =>
     dimensions &&
     BodyRef.current &&
     shouldVirtualize({
@@ -72,51 +108,75 @@ export function useEmojiVirtualization({
       dimensions,
     });
 
-  const emojis = emojisToPush.reduce((accumulator, emoji, index) => {
-    const unified = emojiUnified(emoji, activeSkinTone);
-    const style = getEmojiPositionStyle(dimensions, index);
-
-    if (isVirtualized(style)) {
-      virtualizedCounter++;
-      preloadEmojiIfNeeded(
-        emoji,
-        emojiStyle,
-        scrollTop,
-        BodyRef.current?.clientHeight ?? 0,
-        topOffset,
-        style,
-        dimensions,
-        getEmojiUrl,
-      );
-      return accumulator;
-    }
+  const needsPreload = (style: { top: number } | undefined) =>
+    emojiStyle !== EmojiStyle.NATIVE &&
+    dimensions &&
+    style &&
+    isJustBelowViewport(
+      topOffset + style.top,
+      scrollTop + (BodyRef.current?.clientHeight ?? 0),
+      dimensions.emojiSize,
+    );
 
-    if (!isCategoryVisible) {
-      virtualizedCounter++;
-      return accumulator;
-    }
+  const waitingForLayout =
+    (!committed && !dimensions) ||
+    ((!dimensions || !positioned) && BodyRef.current?.clientWidth);
 
-    accumulator.push(
-      <ClickableEmoji
-        showVariations={showVariations}
-        key={unified}
-        emoji={emoji}
-        unified={unified}
-        emojiStyle={emojiStyle}
-        lazyLoad={lazyLoadEmojis}
-        getEmojiUrl={getEmojiUrl}
-        style={{
-          ...style,
-          position: 'absolute',
-        }}
-      />,
-    );
-    return accumulator;
-  }, [] as ReactNode[]);
+  // MeasureEmoji supplies geometry before cells are built. Layout-free
+  // environments can render after the first commit without measurements.
+  const emojis = waitingForLayout
+    ? []
+    : emojisToPush.reduce((accumulator, emoji, index) => {
+        const style = getEmojiPositionStyle(dimensions, index);
+
+        if (isVirtualized(style)) {
+          if (needsPreload(style)) preloads.push(emoji);
+          return accumulator;
+        }
+
+        if (!isCategoryVisible) {
+          return accumulator;
+        }
+
+        const unified = emojiUnified(emoji, activeSkinTone);
+        // Wait for layout: an unmeasured pass renders a whole category, and
+        // while sections above are unmeasured this one renders off-screen
+        // cells as if it were at the top.
+        if (dimensions && positioned) probe.push(unified);
+        accumulator.push(
+          <ClickableEmoji
+            showVariations={showVariations}
+            key={unified}
+            emoji={emoji}
+            unified={unified}
+            emojiStyle={emojiStyle}
+            lazyLoad={lazyLoadEmojis}
+            getEmojiUrl={getEmojiUrl}
+            style={{
+              ...style,
+              position: 'absolute',
+            }}
+            index={index}
+            // Grid semantics (issue #508): each emoji is a cell of its
+            // category row; native button activation is kept.
+            role="gridcell"
+          />,
+        );
+        return accumulator;
+      }, [] as ReactNode[]);
+
+  // Every commit: requests for already-checked glyphs are free.
+  useEffect(() => requestNativeProbe(probe));
+  // Image requests belong to committed work, never an abandoned render.
+  // The proximity and cache checks run synchronously, without per-cell timers.
+  useEffect(() => {
+    preloads.forEach((emoji) => preloadEmoji(getEmojiUrl, emoji, emojiStyle));
+  });
 
   return {
-    virtualizedCounter,
+    virtualizedCounter: emojisToPush.length - emojis.length,
     emojis,
     dimensions,
+    emojiCount: emojisToPush.length,
   };
 }