emoji-picker-react 5.0.0 → 5.0.2

package/src/hooks/useEmojiVirtualization.tsx

@@ -13,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,
@@ -53,31 +56,42 @@ export function useEmojiVirtualization({
   // Native glyphs checked exactly: the cells this pass renders (visible
   // rows plus virtualization's margin rows), nothing else.
   const probe: string[] = [];
-
-  let virtualizedCounter = 0;
+  const preloads: DataEmoji[] = [];
+  const [committed, setCommitted] = React.useState(false);
 
   // 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 rendered = new Set<string>();
-  const emojisToPush = categoryEmojis.filter((emoji) => {
-    const isDisallowed = isEmojiDisallowed(emoji);
-    const { hidden } = isEmojiHidden(emoji);
+  const emojisToPush = React.useMemo(() => {
+    const rendered = new Set<string>();
+    return categoryEmojis.filter((emoji) => {
+      const isDisallowed = isEmojiDisallowed(emoji);
+      const { hidden } = isEmojiHidden(emoji);
 
-    if (hidden || isDisallowed) {
-      return false;
-    }
-    const unified = emojiUnified(emoji, activeSkinTone);
-    if (rendered.has(unified)) {
-      return false;
-    }
-    rendered.add(unified);
-    return true;
-  });
+      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);
     }
@@ -94,61 +108,83 @@ export function useEmojiVirtualization({
       dimensions,
     });
 
-  const emojis = emojisToPush.reduce((accumulator, emoji, index) => {
-    const unified = emojiUnified(emoji, activeSkinTone);
-    const style = getEmojiPositionStyle(dimensions, index);
+  const needsPreload = (style: { top: number } | undefined) =>
+    emojiStyle !== EmojiStyle.NATIVE &&
+    dimensions &&
+    style &&
+    isJustBelowViewport(
+      topOffset + style.top,
+      scrollTop + (BodyRef.current?.clientHeight ?? 0),
+      dimensions.emojiSize,
+    );
 
-    if (isVirtualized(style)) {
-      virtualizedCounter++;
-      preloadEmojiIfNeeded(
-        emoji,
-        emojiStyle,
-        scrollTop,
-        BodyRef.current?.clientHeight ?? 0,
-        topOffset,
-        style,
-        dimensions,
-        getEmojiUrl,
-      );
-      return accumulator;
-    }
+  const waitingForLayout =
+    (!committed && !dimensions) ||
+    ((!dimensions || !positioned) && BodyRef.current?.clientWidth);
 
-    if (!isCategoryVisible) {
-      virtualizedCounter++;
-      return accumulator;
-    }
+  // 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);
 
-    // 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[]);
+        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.
+  // Only the image a nearby cell will render is fetched: every skin tone of
+  // every nearby cell is hundreds of requests per scroll and long frames on
+  // slow devices. Focusing a cell (useOnFocus) fetches its variations.
+  useEffect(() => {
+    preloads.forEach((emoji) =>
+      preloadEmoji(
+        getEmojiUrl,
+        emoji,
+        emojiStyle,
+        emojiUnified(emoji, activeSkinTone),
+      ),
+    );
+  });
 
   return {
-    virtualizedCounter,
+    virtualizedCounter: emojisToPush.length - emojis.length,
     emojis,
     dimensions,
     emojiCount: emojisToPush.length,

package/src/hooks/useFilter.ts

@@ -100,13 +100,11 @@ function useApplySearch() {
       if (!mountedRef.current) {
         return;
       }
-      setSearchTerm(searchTerm ? searchTerm?.toLowerCase() : searchTerm).then(
-        () => {
-          if (registry.isCurrent(token)) {
-            scrollTo(PickerMainRef.current, 0, () => registry.isCurrent(token));
-          }
-        },
-      );
+      setSearchTerm(searchTerm).then(() => {
+        if (registry.isCurrent(token)) {
+          scrollTo(PickerMainRef.current, 0, () => registry.isCurrent(token));
+        }
+      });
     });
   };
 }
@@ -115,7 +113,11 @@ export function useIsEmojiFiltered(): (unified: string) => boolean {
   const { current: filter } = useFilterRef();
   const [searchTerm] = useSearchTermState();
 
-  return (unified) => isEmojiFilteredBySearchTerm(unified, filter, searchTerm);
+  return React.useCallback(
+    (unified: string) =>
+      isEmojiFilteredBySearchTerm(unified, filter, searchTerm),
+    [filter, searchTerm],
+  );
 }
 
 export function isEmojiFilteredBySearchTerm(

package/src/hooks/useIsEmojiHidden.ts

@@ -1,3 +1,5 @@
+import { useCallback } from 'react';
+
 import {
   useActiveSkinToneState,
   useEmojisThatFailedToLoadState,
@@ -9,21 +11,23 @@ import { useIsEmojiFiltered } from './useFilter';
 
 export function useIsEmojiHidden(): (emoji: DataEmoji) => IsHiddenReturn {
   const [activeSkinTone] = useActiveSkinToneState();
-  const [emojisThatFailedToLoad] = useEmojisThatFailedToLoadState();
+  // The tuple changes when its Root-local Set is mutated by an image error.
+  const failures = useEmojisThatFailedToLoadState();
   const isEmojiFiltered = useIsEmojiFiltered();
 
-  return (emoji: DataEmoji): IsHiddenReturn => {
-    const failedToLoad = emojisThatFailedToLoad.has(
-      emojiUnified(emoji, activeSkinTone),
-    );
-    const filteredOut = isEmojiFiltered(emojiCanonicalUnified(emoji));
+  return useCallback(
+    (emoji: DataEmoji): IsHiddenReturn => {
+      const failedToLoad = failures[0].has(emojiUnified(emoji, activeSkinTone));
+      const filteredOut = isEmojiFiltered(emojiCanonicalUnified(emoji));
 
-    return {
-      failedToLoad,
-      filteredOut,
-      hidden: failedToLoad || filteredOut,
-    };
-  };
+      return {
+        failedToLoad,
+        filteredOut,
+        hidden: failedToLoad || filteredOut,
+      };
+    },
+    [activeSkinTone, failures, isEmojiFiltered],
+  );
 }
 
 type IsHiddenReturn = {

package/src/hooks/useKeyboardNavigation.ts

@@ -9,12 +9,12 @@ import {
 import { getActiveElement } from '../DomUtils/getActiveElement';
 import { isRtl } from '../DomUtils/isRtl';
 import {
-  focusAndClickFirstVisibleEmoji,
+  focusFirstEmoji,
   focusFirstVisibleEmoji,
   focusAdjacentEmoji,
 } from '../DomUtils/keyboardNavigation';
 import { useScrollTo } from '../DomUtils/scrollTo';
-import { buttonFromTarget } from '../DomUtils/selectors';
+import { buttonFromTarget, firstVisibleEmoji } from '../DomUtils/selectors';
 import {
   ElementRef,
   useBodyRef,
@@ -27,9 +27,16 @@ import {
 import {
   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,
@@ -47,7 +54,11 @@ import {
   useFocusSkinTonePicker,
 } from './useFocus';
 import useIsSearchMode from './useIsSearchMode';
-import { useClearSearchValue, useTypeToSearchKey } from './useSearchController';
+import {
+  useAcceptedSearchValue,
+  useClearSearchValue,
+  useTypeToSearchKey,
+} from './useSearchController';
 import useSetVariationPicker from './useSetVariationPicker';
 
 export function useKeyboardNavigation() {
@@ -76,6 +87,65 @@ export function useKeyboardNavigation() {
   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 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();
@@ -90,14 +160,21 @@ export function useKeyboardNavigation() {
     disallowMouseMove();
     switch (key) {
       case 'Escape':
-        event.preventDefault();
         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;
         }
+        // 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();
+        }
         clearSearch();
         scrollTo(0);
         focusSearchInput();
@@ -129,7 +206,7 @@ export function useKeyboardNavigation() {
         break;
       case 'Enter':
         event.preventDefault();
-        focusAndClickFirstVisibleEmoji(BodyRef.current);
+        selectFromSearch();
         break;
     }
   };
@@ -245,20 +322,15 @@ export function useKeyboardNavigation() {
     }
   };
   const [composing] = useSearchComposingState();
-  const handler = useRef<(event: KeyboardEvent, menusOnly?: boolean) => void>(
+  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, menusOnly) => {
-    if (
-      composing ||
-      event.isComposing ||
-      event.keyCode === 229 ||
-      (menusOnly && !hasOpenToggles())
-    )
-      return;
-    if (!menusOnly) {
+  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);
@@ -272,16 +344,31 @@ export function useKeyboardNavigation() {
     // 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))
+      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('input', cancelPendingPick);
+      current.removeEventListener('focusout', cancelPendingPick);
       current.removeEventListener('keydown', scoped);
       window.removeEventListener('keydown', capture, true);
     };

package/src/primitives/structuralStyles.tsx

@@ -46,6 +46,9 @@ const boxSizingReset =
   // vertical tab rail still adds its own width beside the grid.
   ':where([data-epr-columns] :is([data-epr-part=preview],[data-epr-part=search],[aria-orientation=horizontal])){contain:inline-size}' +
   ':where([data-epr-columns] [data-epr-part=viewport]){scrollbar-gutter:stable}' +
+  // A permanent sizing row keeps intrinsic width when all categories are
+  // hidden (no matches) or the dataset is still loading/has failed.
+  ':where([data-epr-columns] [data-epr-part=list])::before{content:"";display:block;height:0;width:calc(var(--epr-columns)*var(--epr-emoji-fullsize) + 2*var(--epr-horizontal-padding));max-width:100%}' +
   ':where([data-epr-columns] [data-epr-part=category-content]){width:calc(var(--epr-columns)*var(--epr-emoji-fullsize));min-width:calc(100% - 2*var(--epr-horizontal-padding));max-width:calc(100% - 2*var(--epr-horizontal-padding))}';
 
 export const structuralStyles = /* @__PURE__ */ (() =>

package/src/primitives/tokens.ts

@@ -140,6 +140,7 @@ export const darkPickerTokens: Record<string, string> = {
 
 /** Full light preset: geometry plus light colors (v4 defaults). */
 export const defaultPickerTokens: Record<string, string> = {
+  '--epr-font-family': 'sans-serif',
   ...lightPickerTokens,
   ...structuralPickerTokens,
 };

package/src/virtualization/virtualizationHelpers.ts

@@ -1,3 +1,9 @@
+export const OVERSCAN_ROWS = 2;
+
+export function isJustBelowViewport(top: number, bottom: number, size: number) {
+  return top >= bottom && top < bottom + size * OVERSCAN_ROWS;
+}
+
 export function shouldVirtualize({
   scrollTop,
   clientHeight,
@@ -19,8 +25,9 @@ export function shouldVirtualize({
   const emojiBottom = emojiTop + dimensions.emojiSize;
 
   const isVisible =
-    emojiBottom + dimensions.emojiSize * 2 >= scrollTop &&
-    emojiTop <= scrollTop + clientHeight + dimensions.emojiSize;
+    emojiBottom + dimensions.emojiSize * OVERSCAN_ROWS >= scrollTop &&
+    emojiTop <=
+      scrollTop + clientHeight + dimensions.emojiSize * (OVERSCAN_ROWS - 1);
 
   return !isVisible;
 }