emoji-picker-react 5.0.0 → 5.0.1

package/src/hooks/preloadEmoji.ts

@@ -1,52 +1,7 @@
 import { GetEmojiUrl } from '../components/emoji/BaseEmojiProps';
 import { DataEmoji } from '../dataUtils/DataTypes';
 import { emojiUnified, emojiVariations } from '../dataUtils/emojiUtils';
-import { EmojiStyle, EmojiStyleValue } from '../types/exposedTypes';
-import { Dimensions } from '../virtualization/virtualizationHelpers';
-
-// eslint-disable-next-line max-params
-export function preloadEmojiIfNeeded(
-  emoji: undefined | DataEmoji,
-  emojiStyles: EmojiStyleValue,
-  scrollTop: number,
-  clientHeight: number,
-  topOffset: number,
-  style: { top: number } | undefined,
-  dimensions: Dimensions,
-  getEmojiUrl: GetEmojiUrl,
-): void {
-  if (!emoji) {
-    return;
-  }
-
-  if (emojiStyles === EmojiStyle.NATIVE) {
-    return;
-  }
-
-  const unified = emojiUnified(emoji);
-
-  if (preloadedEmojs.has(unified)) {
-    return;
-  }
-
-  // preload only if the emoji is a few rows below the viewport
-  if (!style || !dimensions) {
-    return;
-  }
-
-  setTimeout(() => {
-    const emojiTop = topOffset + style.top;
-    const viewportBottom = scrollTop + clientHeight;
-
-    const isJustBelowViewport =
-      emojiTop >= viewportBottom &&
-      emojiTop < viewportBottom + dimensions.emojiSize * 2;
-
-    if (isJustBelowViewport) {
-      preloadEmoji(getEmojiUrl, emoji, emojiStyles);
-    }
-  });
-}
+import { EmojiStyleValue } from '../types/exposedTypes';
 
 export function preloadEmoji(
   getEmojiUrl: GetEmojiUrl,

package/src/hooks/useActiveCategoryScrollDetection.ts

@@ -1,9 +1,12 @@
 import { useEffect } from 'react';
 
 import { categoryNameFromDom } from '../DomUtils/categoryNameFromDom';
-import { asSelectors, ClassNames } from '../DomUtils/classNames';
+import { ClassNames } from '../DomUtils/classNames';
 import { useBodyRef } from '../components/context/ElementRefContext';
-import { CategoriesConfig } from '../config/categoryConfig';
+import {
+  CategoriesConfig,
+  categoryIdFromCategoryConfig,
+} from '../config/categoryConfig';
 
 export function useActiveCategoryScrollDetection({
   setActiveCategory,
@@ -22,9 +25,11 @@ export function useActiveCategoryScrollDetection({
   const BodyRef = useBodyRef();
 
   useEffect(() => {
-    const visibleCategories = new Map<string, number>();
-    const intersectingCategories = new Map<string, boolean>();
-    const targets = new Map<string, Element>();
+    if (typeof IntersectionObserver === 'undefined') {
+      setVisibleCategories(categories.map(categoryIdFromCategoryConfig));
+      return;
+    }
+    const observed = new Map<string, IntersectionObserverEntry>();
     const bodyRef = BodyRef.current;
     const observer = new IntersectionObserver(
       (entries) => {
@@ -39,31 +44,31 @@ export function useActiveCategoryScrollDetection({
             continue;
           }
 
-          visibleCategories.set(id, entry.intersectionRatio);
-          intersectingCategories.set(id, entry.isIntersecting);
-          targets.set(id, entry.target);
+          observed.set(id, entry);
         }
 
-        const ratios = Array.from(visibleCategories);
+        const ratios = Array.from(observed);
         const visibleCats = ratios
-          .filter(([id, ratio]) => ratio > 0 || intersectingCategories.get(id))
+          .filter(
+            ([, entry]) => entry.intersectionRatio > 0 || entry.isIntersecting,
+          )
           .map(([id]) => id);
 
         setVisibleCategories(visibleCats);
         const lastCategory = ratios[ratios.length - 1];
 
-        if (lastCategory?.[1] == 1) {
+        if (lastCategory?.[1].intersectionRatio === 1) {
           return setActiveCategory(lastCategory[0]);
         }
 
         const viewportTop = bodyRef.getBoundingClientRect().top;
-        for (const [id, ratio] of ratios) {
+        for (const [id, entry] of ratios) {
           // Fractional offsets can leave less than a pixel of the preceding
           // section intersecting after a jump. It must not steal the tab
           // highlight from the section aligned with the viewport top.
           if (
-            ratio &&
-            targets.get(id)!.getBoundingClientRect().bottom > viewportTop + 1
+            entry.intersectionRatio &&
+            entry.target.getBoundingClientRect().bottom > viewportTop + 1
           ) {
             setActiveCategory(id);
             break;
@@ -75,11 +80,9 @@ export function useActiveCategoryScrollDetection({
         threshold: [0, 1],
       },
     );
-    bodyRef
-      ?.querySelectorAll(asSelectors(ClassNames.category))
-      .forEach((el) => {
-        observer.observe(el);
-      });
+    bodyRef?.querySelectorAll(`.${ClassNames.category}`).forEach((el) => {
+      observer.observe(el);
+    });
 
     return () => {
       observer.disconnect();

package/src/hooks/useCategoryHeight.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
 
-import { asSelectors, ClassNames } from '../DomUtils/classNames';
+import { ClassNames } from '../DomUtils/classNames';
 import {
   elementBorderBoxHeight,
   EmojiButtonSelector,
 } from '../DomUtils/selectors';
 import {
+  useBodyRef,
   useEmojiListRef,
   usePickerMainRef,
 } from '../components/context/ElementRefContext';
@@ -33,7 +34,7 @@ function firstVisibleContentWidth(
   fallbackWidth: number,
 ): number {
   const contentBoxes = listEl.querySelectorAll(
-    asSelectors(ClassNames.categoryContent),
+    `.${ClassNames.categoryContent}`,
   );
   for (const box of Array.from(contentBoxes)) {
     const width = (box as HTMLElement).clientWidth;
@@ -60,15 +61,20 @@ function trackColumnCount(
   previousRef.current = emojisPerRow;
 }
 
-export function useCategoryHeight(emojiCount: number):
+export function useCategoryHeight(
+  emojiCount: number,
+  ready = true,
+):
   | {
       categoryHeight: number;
       emojisPerRow: number;
       emojiSize: number;
       rowWidth: number;
+      viewportHeight?: number;
     }
   | undefined {
   const EmojiListRef = useEmojiListRef();
+  const BodyRef = useBodyRef();
   const [isReactionsMode] = useReactionsModeState();
   const PickerMainRef = usePickerMainRef();
   const emojiSizeRef = React.useRef<number | undefined>(undefined);
@@ -82,6 +88,7 @@ export function useCategoryHeight(emojiCount: number):
     emojisPerRow: number;
     emojiSize: number;
     rowWidth: number;
+    viewportHeight?: number;
   }>();
 
   // Helper to compute and store dimensions based on current DOM
@@ -99,8 +106,8 @@ export function useCategoryHeight(emojiCount: number):
       emojiSizeRef.current = measured;
     }
     const emojiSize =
-      emojiSizeFromContext ||
       measured ||
+      emojiSizeFromContext ||
       emojiSizeRef.current ||
       EMOJI_SIZE_DEFAULT;
     const pickerWidth = listEl.clientWidth;
@@ -113,13 +120,36 @@ export function useCategoryHeight(emojiCount: number):
     const rowCount = Math.ceil(emojiCount / emojisPerRow);
     const categoryHeight = rowCount * emojiSize;
 
+    const next = {
+      categoryHeight,
+      emojisPerRow,
+      emojiSize,
+      rowWidth,
+      // Virtualization reads the viewport height during render, so a picker
+      // that mounts collapsed (reactions first) must re-render once it opens.
+      viewportHeight: BodyRef.current?.clientHeight,
+    };
+
     trackColumnCount(emojisPerRowRef, emojisPerRow, registry);
-    setDimensions({ categoryHeight, emojisPerRow, emojiSize, rowWidth });
-  }, [EmojiListRef, emojiCount, emojiSizeFromContext, registry, columns]);
+    // Returning `previous` when nothing changed is what stops the layout
+    // effect below, which depends on `dimensions`, from looping forever.
+    // Both objects come from the literal above, so their keys share an order.
+    setDimensions((previous) =>
+      JSON.stringify(previous) === JSON.stringify(next) ? previous : next,
+    );
+  }, [
+    EmojiListRef,
+    BodyRef,
+    emojiCount,
+    emojiSizeFromContext,
+    registry,
+    columns,
+  ]);
 
   // Restore measured row heights in the same commit as the filtered
   // contents. A passive effect leaves one frame of stale offsets that
   // category navigation can observe immediately after clearing search.
+  // Recheck an estimated size when positioned/visible cells first mount.
   useIsomorphicLayoutEffect(() => {
     computeAndSetDimensions();
   }, [
@@ -127,6 +157,8 @@ export function useCategoryHeight(emojiCount: number):
     isReactionsMode,
     computeAndSetDimensions,
     visibleCategories.length,
+    dimensions,
+    ready,
   ]);
 
   // Fluid layouts (width: 100%, sheets, docks) resize without a CSS

package/src/hooks/useDisallowedEmojis.ts

@@ -1,3 +1,5 @@
+import { useCallback } from 'react';
+
 import {
   useActiveSkinToneState,
   useNativeEmojiSupport,
@@ -20,17 +22,20 @@ export function useIsEmojiDisallowed() {
   const unicodeToHide = useUnicodeToHide();
   const [activeSkinTone] = useActiveSkinToneState();
 
-  return 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)
-    );
-  };
+  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/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,73 @@ 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);
 
-    // 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[]);
+  // 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,

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 = {