emoji-picker-react 4.22.3 → 5.0.1

package/src/hooks/useFilter.ts

@@ -1,148 +1,123 @@
+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));
-    }
-
-    filterRef.current = setter;
-  };
-}
-
-export function useClearSearch() {
-  const applySearch = useApplySearch();
-  const SearchInputRef = useSearchInputRef();
-  const focusSearchInput = useFocusSearchInput();
-
-  return function clearSearch() {
-    if (SearchInputRef.current) {
-      SearchInputRef.current.value = '';
+  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);
     }
-
-    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(() => {
-      setSearchTerm(searchTerm ? searchTerm?.toLowerCase() : searchTerm).then(
-        () => {
-          scrollTo(PickerMainRef.current, 0);
-        },
-      );
+      if (!mountedRef.current) {
+        return;
+      }
+      setSearchTerm(searchTerm).then(() => {
+        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();
 
-  return (unified) => isEmojiFilteredBySearchTerm(unified, filter, searchTerm);
+  return React.useCallback(
+    (unified: string) =>
+      isEmojiFilteredBySearchTerm(unified, filter, searchTerm),
+    [filter, searchTerm],
+  );
 }
 
 export function isEmojiFilteredBySearchTerm(
@@ -159,45 +134,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,25 +1,33 @@
-import { useEmojisThatFailedToLoadState } from '../components/context/PickerContext';
+import { useCallback } from 'react';
+
+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 [emojisThatFailedToLoad] = useEmojisThatFailedToLoadState();
+  const [activeSkinTone] = useActiveSkinToneState();
+  // 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 unified = emojiUnified(emoji);
-
-    const failedToLoad = emojisThatFailedToLoad.has(unified);
-    const filteredOut = isEmojiFiltered(unified);
+  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 = {