emoji-picker-react 4.22.2 → 5.0.0

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,
@@ -28,12 +31,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,14 +49,30 @@ 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[] = [];
 
   let virtualizedCounter = 0;
 
+  // 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 { failedToLoad, filteredOut, hidden } = isEmojiHidden(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;
   });
 
   const dimensions = useCategoryHeight(emojisToPush.length);
@@ -61,7 +83,7 @@ export function useEmojiVirtualization({
     }
   }, [dimensions, onHeightReady, emojisToPush.length]);
 
-  const isVirtualized = (style: { top: number; left: number } | undefined) =>
+  const isVirtualized = (style: { top: number } | undefined) =>
     dimensions &&
     BodyRef.current &&
     shouldVirtualize({
@@ -96,6 +118,10 @@ export function useEmojiVirtualization({
       return accumulator;
     }
 
+    // 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}
@@ -109,14 +135,22 @@ export function useEmojiVirtualization({
           ...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));
+
   return {
     virtualizedCounter,
     emojis,
     dimensions,
+    emojiCount: emojisToPush.length,
   };
 }

package/src/hooks/useFilter.ts

@@ -1,143 +1,116 @@
+import * as React from 'react';
+
 import { scrollTo } from '../DomUtils/scrollTo';
-import {
-  usePickerMainRef,
-  useSearchInputRef,
-} from '../components/context/ElementRefContext';
+import { usePickerMainRef } from '../components/context/ElementRefContext';
 import {
   FilterState,
+  useFilterQueryOrderRef,
   useFilterRef,
+  useNavigationRegistry,
   useSearchTermState,
 } from '../components/context/PickerContext';
-import { useSearchResultsConfig } from '../config/useConfig';
+import { usePickerDataContext } from '../components/context/PickerDataContext';
+import { normalizeQuery } from '../data-core/prepare';
 import { DataEmoji } from '../dataUtils/DataTypes';
 import { emojiNames } from '../dataUtils/emojiUtils';
 
-import { useFocusSearchInput } from './useFocus';
+/**
+ * Bound on cached per-query filter dicts per Root. Dicts are cheaply
+ * rebuilt from the shared memoized core, so a long typing session keeps
+ * only a recent window instead of growing without bound.
+ */
+const MAX_FILTER_QUERIES = 50;
 
 function useSetFilterRef() {
   const filterRef = useFilterRef();
-
-  return function setFilter(
-    setter: FilterState | ((current: FilterState) => FilterState),
-  ): void {
-    if (typeof setter === 'function') {
-      return setFilter(setter(filterRef.current));
+  const orderRef = useFilterQueryOrderRef();
+
+  return function setFilter(nextValue: string, dict: FilterDict): void {
+    // Copy-on-write into a fresh object: the ref never aliases shared
+    // snapshot state, and spread defines own properties (no prototype
+    // mutation for adversarial queries such as "__proto__").
+    const next: FilterState = { ...filterRef.current, [nextValue]: dict };
+    const order = orderRef.current;
+    if (!order.includes(nextValue)) {
+      order.push(nextValue);
     }
-
-    filterRef.current = setter;
-  };
-}
-
-export function useClearSearch() {
-  const applySearch = useApplySearch();
-  const SearchInputRef = useSearchInputRef();
-  const focusSearchInput = useFocusSearchInput();
-
-  return function clearSearch() {
-    if (SearchInputRef.current) {
-      SearchInputRef.current.value = '';
-    }
-
-    applySearch('');
-    focusSearchInput();
-  };
-}
-
-export function useAppendSearch() {
-  const SearchInputRef = useSearchInputRef();
-  const applySearch = useApplySearch();
-
-  return function appendSearch(str: string) {
-    if (SearchInputRef.current) {
-      SearchInputRef.current.value = `${SearchInputRef.current.value}${str}`;
-      applySearch(getNormalizedSearchTerm(SearchInputRef.current.value));
-    } else {
-      applySearch(getNormalizedSearchTerm(str));
+    while (order.length > MAX_FILTER_QUERIES) {
+      const oldest = order.shift() as string;
+      delete next[oldest];
     }
+    filterRef.current = next;
   };
 }
 
 export function useFilter() {
-  const SearchInputRef = useSearchInputRef();
   const filterRef = useFilterRef();
   const setFilterRef = useSetFilterRef();
   const applySearch = useApplySearch();
-
-  const [searchTerm] = useSearchTermState();
-  const statusSearchResults = getStatusSearchResults(
-    filterRef.current,
-    searchTerm,
-  );
-
-  return {
-    onChange,
-    searchTerm,
-    SearchInputRef,
-    statusSearchResults,
-  };
+  const { queryFilterDict } = usePickerDataContext();
+  // Managed SearchInput owns announcements; this hook only applies filters.
+  return { onChange };
 
   function onChange(inputValue: string) {
     const filter = filterRef.current;
 
-    const nextValue = inputValue.toLowerCase();
+    // Normalized derived query: the visible/callback value
+    // stays raw, filtering folds case and trims surrounding whitespace.
+    // Matching itself runs in the single shared prepared core.
+    const nextValue = normalizeQuery(inputValue);
 
-    if (filter?.[nextValue] || nextValue.length <= 1) {
+    if (!nextValue) {
       return applySearch(nextValue);
     }
-
-    const longestMatch = findLongestMatch(nextValue, filter);
-
-    if (!longestMatch) {
-      // Can we even get here?
-      // If so, we need to search among all emojis
+    if (hasOwnQuery(filter, nextValue)) {
       return applySearch(nextValue);
     }
 
-    setFilterRef((current) =>
-      Object.assign(current, {
-        [nextValue]: filterEmojiObjectByKeyword(longestMatch, nextValue),
-      }),
-    );
+    setFilterRef(nextValue, queryFilterDict(nextValue));
     applySearch(nextValue);
   }
 }
 
+function hasOwnQuery(filter: FilterState, query: string): boolean {
+  return Object.prototype.hasOwnProperty.call(filter, query);
+}
+
 function useApplySearch() {
   const [, setSearchTerm] = useSearchTermState();
   const PickerMainRef = usePickerMainRef();
+  const registry = useNavigationRegistry();
+  // A search frame pending at unmount must not schedule post-unmount
+  // debounce work (the debounced state also clears its own timer, so
+  // both stages of the pipeline die with the Root).
+  const mountedRef = React.useRef(true);
+  React.useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
 
   return function applySearch(searchTerm: string) {
+    // A new accepted filter obsoletes pending grid materialize/focus work.
+    registry.invalidate();
+    // The scroll back to the top lands after the debounce; navigation in
+    // the meantime (e.g. a category tab clicked right after clearing the
+    // search) supersedes it instead of being yanked back to the top.
+    const token = registry.currentGeneration();
     requestAnimationFrame(() => {
+      if (!mountedRef.current) {
+        return;
+      }
       setSearchTerm(searchTerm ? searchTerm?.toLowerCase() : searchTerm).then(
         () => {
-          scrollTo(PickerMainRef.current, 0);
+          if (registry.isCurrent(token)) {
+            scrollTo(PickerMainRef.current, 0, () => registry.isCurrent(token));
+          }
         },
       );
     });
   };
 }
 
-export function filterEmojiObjectByKeyword(
-  emojis: FilterDict,
-  keyword: string,
-): FilterDict {
-  const filtered: FilterDict = {};
-
-  for (const unified in emojis) {
-    const emoji = emojis[unified];
-
-    if (hasMatch(emoji, keyword)) {
-      filtered[unified] = emoji;
-    }
-  }
-
-  return filtered;
-}
-
-function hasMatch(emoji: DataEmoji, keyword: string): boolean {
-  return emojiNames(emoji).some((name) => name.includes(keyword));
-}
-
 export function useIsEmojiFiltered(): (unified: string) => boolean {
   const { current: filter } = useFilterRef();
   const [searchTerm] = useSearchTermState();
@@ -159,45 +132,30 @@ export function isEmojiFilteredBySearchTerm(
 
 export type FilterDict = Record<string, DataEmoji>;
 
+export function filterEmojiObjectByKeyword(
+  emojis: FilterDict,
+  keyword: string,
+): FilterDict {
+  const filtered: FilterDict = {};
+  Object.keys(emojis).forEach((unified) => {
+    const emoji = emojis[unified];
+    if (
+      emojiNames(emoji).some((name) => name.toLowerCase().includes(keyword))
+    ) {
+      filtered[unified] = emoji;
+    }
+  });
+  return filtered;
+}
+
 export function findLongestMatch(
   keyword: string,
   dict: Record<string, FilterDict> | null,
 ): FilterDict | null {
-  if (!dict) {
-    return null;
-  }
-
-  if (dict[keyword]) {
-    return dict[keyword];
-  }
-
-  const longestMatchingKey = Object.keys(dict)
-    .sort((a, b) => b.length - a.length)
+  if (!dict) return null;
+  if (dict[keyword]) return dict[keyword];
+  const longest = Object.keys(dict)
+    .sort((left, right) => right.length - left.length)
     .find((key) => keyword.includes(key));
-
-  if (longestMatchingKey) {
-    return dict[longestMatchingKey];
-  }
-
-  return null;
-}
-
-export function getNormalizedSearchTerm(str: string): string {
-  if (!str || typeof str !== 'string') {
-    return '';
-  }
-
-  return str.trim().toLowerCase();
-}
-
-function getStatusSearchResults(
-  filterState: FilterState,
-  searchTerm: string,
-): string {
-  if (!filterState?.[searchTerm]) return '';
-
-  const searchResultsCount =
-    Object.entries(filterState?.[searchTerm])?.length || 0;
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  return useSearchResultsConfig(searchResultsCount);
+  return longest ? dict[longest] : null;
 }

package/src/hooks/useFocus.ts

@@ -1,40 +1,30 @@
 import { useCallback } from 'react';
 
-import { focusElement, focusFirstElementChild } from '../DomUtils/focusElement';
+import { focusElement } from '../DomUtils/focusElement';
+import { NullableElement } from '../DomUtils/selectors';
 import {
+  ElementRef,
   useCategoryNavigationRef,
   useSearchInputRef,
   useSkinTonePickerRef,
 } from '../components/context/ElementRefContext';
 
-export function useFocusSearchInput() {
-  const SearchInputRef = useSearchInputRef();
-
+function useFocusRef(ref: ElementRef, child = false) {
   return useCallback(() => {
-    focusElement(SearchInputRef.current);
-  }, [SearchInputRef]);
+    focusElement(
+      (child ? ref.current?.firstElementChild : ref.current) as NullableElement,
+    );
+  }, [ref, child]);
 }
 
-export function useFocusSkinTonePicker() {
-  const SkinTonePickerRef = useSkinTonePickerRef();
-
-  return useCallback(() => {
-    if (!SkinTonePickerRef.current) {
-      return;
-    }
+export function useFocusSearchInput() {
+  return useFocusRef(useSearchInputRef());
+}
 
-    focusFirstElementChild(SkinTonePickerRef.current);
-  }, [SkinTonePickerRef]);
+export function useFocusSkinTonePicker() {
+  return useFocusRef(useSkinTonePickerRef(), true);
 }
 
 export function useFocusCategoryNavigation() {
-  const CategoryNavigationRef = useCategoryNavigationRef();
-
-  return useCallback(() => {
-    if (!CategoryNavigationRef.current) {
-      return;
-    }
-
-    focusFirstElementChild(CategoryNavigationRef.current);
-  }, [CategoryNavigationRef]);
+  return useFocusRef(useCategoryNavigationRef(), true);
 }

package/src/hooks/useIsEmojiHidden.ts

@@ -1,18 +1,22 @@
-import { useEmojisThatFailedToLoadState } from '../components/context/PickerContext';
+import {
+  useActiveSkinToneState,
+  useEmojisThatFailedToLoadState,
+} from '../components/context/PickerContext';
 import { DataEmoji } from '../dataUtils/DataTypes';
-import { emojiUnified } from '../dataUtils/emojiUtils';
+import { emojiUnified, emojiCanonicalUnified } from '../dataUtils/emojiUtils';
 
 import { useIsEmojiFiltered } from './useFilter';
 
 export function useIsEmojiHidden(): (emoji: DataEmoji) => IsHiddenReturn {
+  const [activeSkinTone] = useActiveSkinToneState();
   const [emojisThatFailedToLoad] = useEmojisThatFailedToLoadState();
   const isEmojiFiltered = useIsEmojiFiltered();
 
   return (emoji: DataEmoji): IsHiddenReturn => {
-    const unified = emojiUnified(emoji);
-
-    const failedToLoad = emojisThatFailedToLoad.has(unified);
-    const filteredOut = isEmojiFiltered(unified);
+    const failedToLoad = emojisThatFailedToLoad.has(
+      emojiUnified(emoji, activeSkinTone),
+    );
+    const filteredOut = isEmojiFiltered(emojiCanonicalUnified(emoji));
 
     return {
       failedToLoad,