emoji-picker-react 5.0.0 → 5.0.2

package/src/data-core/pickerData.ts

@@ -21,7 +21,7 @@ import {
 } from '../dataUtils/DataTypes';
 import { Categories, type EmojiData } from '../types/exposedTypes';
 
-import { getPreparedCore } from './prepare';
+import { getPreparedCore, withoutFe0f } from './prepare';
 
 export interface PickerDataSnapshot {
   emojiData: EmojiData;
@@ -49,9 +49,7 @@ const NO_CUSTOM: object = {};
 
 function customToRegularEmoji(emoji: CustomEmoji): DataEmoji {
   return {
-    [EmojiProperties.name]: emoji.names.map((name: string) =>
-      name.toLowerCase(),
-    ),
+    [EmojiProperties.name]: [...emoji.names],
     [EmojiProperties.unified]: emoji.id.toLowerCase(),
     [EmojiProperties.added_in]: '0',
     [EmojiProperties.imgUrl]: emoji.imgUrl,
@@ -136,15 +134,13 @@ export function getPickerDataSnapshot(
 
   const allEmojisByUnified: Record<string, DataEmoji> = Object.create(null);
 
+  // The base unified and each variation, and either U+FE0F spelling of
+  // them; an exact ID always wins over another record's spelling.
   allEmojis.forEach((emoji) => {
-    const unified = emoji[Keys.unified];
-    allEmojisByUnified[unified] = emoji;
-
-    if (emoji[Keys.variations]) {
-      emoji[Keys.variations]?.forEach((variation) => {
-        allEmojisByUnified[variation] = emoji;
-      });
-    }
+    [emoji[Keys.unified], ...(emoji[Keys.variations] || [])].forEach((id) => {
+      allEmojisByUnified[id] = emoji;
+      allEmojisByUnified[withoutFe0f(id)] ||= emoji;
+    });
   });
 
   const snapshot: PickerDataSnapshot = {

package/src/data-core/prepare.ts

@@ -55,6 +55,15 @@ export function normalizeUnified(input: string): string {
   return input.trim().toLowerCase();
 }
 
+/**
+ * Datasets disagree on where U+FE0F (emoji presentation) appears in an ID:
+ * `2764` and `2764-fe0f` are the same heart. IDs are also indexed under
+ * this form, so either spelling finds the dataset's own record.
+ */
+export function withoutFe0f(unified: string): string {
+  return unified.replace(/-fe0f/g, '');
+}
+
 export function normalizeQuery(input: string): string {
   if (!input || typeof input !== 'string') {
     return '';
@@ -62,28 +71,10 @@ export function normalizeQuery(input: string): string {
   return input.trim().toLowerCase();
 }
 
-function toEmojiInfo(
-  unified: string,
-  names: readonly string[],
-  variations: readonly string[] | undefined,
-  addedIn: string,
-): EmojiInfo {
-  return Object.freeze({
-    unified,
-    emoji: parseNativeEmoji(unified),
-    name: names[names.length - 1] || '',
-    names: Object.freeze([...names]),
-    variations: Object.freeze([...(variations ?? [])]),
-    addedIn,
-  });
-}
-
 function readStringArray(raw: unknown): string[] {
-  if (!Array.isArray(raw)) {
-    return [];
-  }
-  return (raw.filter((n) => typeof n === 'string') as string[]).map((n) =>
-    n.toLowerCase(),
+  if (!Array.isArray(raw)) return [];
+  return (raw.filter((value) => typeof value === 'string') as string[]).map(
+    (value) => value.toLowerCase(),
   );
 }
 
@@ -106,33 +97,38 @@ function appendEntry(
   const names = readStringArray((entry as { n?: unknown }).n);
   const variations = readStringArray((entry as { v?: unknown }).v);
 
-  const rawAddedIn = (entry as { a?: unknown }).a;
-  const addedIn =
-    typeof rawAddedIn === 'string' ? rawAddedIn : String(rawAddedIn ?? '');
+  const addedIn = String((entry as { a?: unknown }).a ?? '');
 
-  const info = toEmojiInfo(unified, names, variations, addedIn);
+  // Freeze the arrays readStringArray owns directly, without copying them
+  // a second time. Caller arrays are never mutated or frozen.
+  const info: EmojiInfo = Object.freeze({
+    unified,
+    emoji: parseNativeEmoji(unified),
+    name: names[names.length - 1] || '',
+    names: Object.freeze(names),
+    variations: Object.freeze(variations),
+    addedIn,
+  });
   records.push(info);
   byUnified.set(unified, info);
-  for (const variation of info.variations) {
-    if (!byUnified.has(variation)) {
-      byUnified.set(variation, info);
-    }
+  for (const id of [unified, ...info.variations]) {
+    if (!byUnified.has(id)) byUnified.set(id, info);
+    if (!byUnified.has(withoutFe0f(id))) byUnified.set(withoutFe0f(id), info);
   }
   indexCharBucket(byCharMutable, names, info);
 }
 
-// One bucket entry per distinct character keeps the per-record cost
-// proportional to name length, not name length squared.
+// Records are indexed in order. A bucket already ending in this record
+// has seen the character, avoiding a temporary Set for every emoji.
 function indexCharBucket(
   byCharMutable: Map<string, EmojiInfo[]>,
   names: readonly string[],
   info: EmojiInfo,
 ): void {
-  const distinctChars = Array.from(new Set(names.join('')));
-  for (const char of distinctChars) {
+  for (const char of names.join('')) {
     const bucket = byCharMutable.get(char);
     if (bucket) {
-      bucket.push(info);
+      if (bucket[bucket.length - 1] !== info) bucket.push(info);
     } else {
       byCharMutable.set(char, [info]);
     }
@@ -161,15 +157,12 @@ export function getPreparedCore(emojiData?: EmojiData): PreparedCore {
     }
   }
 
-  const byChar = new Map<string, readonly EmojiInfo[]>();
-  byCharMutable.forEach((bucket, char) => {
-    byChar.set(char, Object.freeze(bucket));
-  });
+  byCharMutable.forEach(Object.freeze);
 
   const core: PreparedCore = {
     records,
     byUnified,
-    byChar,
+    byChar: byCharMutable,
     queryMemo: new Map<string, readonly EmojiInfo[]>(),
   };
 

package/src/data-core/search.ts

@@ -1,7 +1,12 @@
 // Pure v5 data operations shared by the picker and `emoji-picker-react/data`.
 // No React / ShipStyles imports allowed in this module graph.
 
-import { getPreparedCore, normalizeQuery, normalizeUnified } from './prepare';
+import {
+  getPreparedCore,
+  normalizeQuery,
+  normalizeUnified,
+  withoutFe0f,
+} from './prepare';
 import type { EmojiDataOptions, EmojiInfo } from './types';
 
 export type { EmojiDataOptions, EmojiInfo };
@@ -74,7 +79,10 @@ export function getEmojiByUnified(
     return undefined;
   }
   const core = getPreparedCore(options?.emojiData);
-  return core.byUnified.get(normalized);
+  return (
+    core.byUnified.get(normalized) ??
+    core.byUnified.get(withoutFe0f(normalized))
+  );
 }
 
 /**

package/src/dataUtils/emojiSelectors.ts

@@ -82,7 +82,8 @@ export function emojiVariationUnified(
 // only if the registered dataset changes, so importing this module costs
 // nothing and does not pull the dataset into a bundle.
 let indexedSource: EmojiData | null = null;
-let allEmojisByUnified: Record<string, DataEmoji> = Object.create(null);
+let allEmojisByUnified: Record<string, DataEmoji> =
+  /* @__PURE__ */ Object.create(null);
 
 function registryIndex(): Record<string, DataEmoji> {
   const source = getRegisteredDefaultEmojiData();

package/src/dataUtils/parseNativeEmoji.ts

@@ -1,6 +1,5 @@
 export function parseNativeEmoji(unified: string): string {
-  return unified
-    .split('-')
-    .map((hex) => String.fromCodePoint(parseInt(hex, 16)))
-    .join('');
+  return String.fromCodePoint(
+    ...unified.split('-').map((hex) => parseInt(hex, 16)),
+  );
 }

package/src/dataUtils/suggestedEmojis.ts

@@ -1,3 +1,5 @@
+import { withoutFe0f } from '../data-core/prepare';
+
 import { DataEmoji, EmojiProperties } from './DataTypes';
 
 // Caller-defined Suggested contents.
@@ -47,46 +49,30 @@ export function resolveEntryId(
   if (!id) {
     return undefined;
   }
-  if (isKnownRenderId(id, lookup)) {
-    return id;
-  }
-  // Unified IDs and custom IDs are ASCII; anything else may be the
-  // emoji character itself.
-  if (Array.from(id).every((char) => (char.codePointAt(0) as number) < 0x80)) {
-    return undefined;
+  let unified = id;
+  let record = lookup(id);
+  // Unified IDs and custom IDs are ASCII; anything else may be the emoji
+  // character itself, read as its code points.
+  if (!record && /[^\0-\x7f]/.test(id)) {
+    unified = Array.from(id)
+      .map((char) =>
+        (char.codePointAt(0) as number).toString(16).padStart(4, '0'),
+      )
+      .join('-');
+    record = lookup(unified);
   }
-  return nativeToUnifiedCandidates(id).find((candidate) =>
-    isKnownRenderId(candidate, lookup),
-  );
-}
-
-// Dataset IDs are zero-padded code points joined by "-", and carry U+FE0F
-// where the emoji presentation needs it; typed or stored characters often
-// omit or add it. Try the exact sequence, then without FE0F, then with
-// FE0F after the first code point (e.g. "©" -> "00a9-fe0f").
-function nativeToUnifiedCandidates(native: string): string[] {
-  const codePoints = Array.from(native).map((char) =>
-    (char.codePointAt(0) as number).toString(16).padStart(4, '0'),
-  );
-  const exact = codePoints.join('-');
-  const bare = codePoints.filter((codePoint) => codePoint !== 'fe0f');
-  const withPresentation = [bare[0], 'fe0f', ...bare.slice(1)];
-  return [exact, bare.join('-'), withPresentation.join('-')];
-}
-
-// A render identity is valid only as the base unified or a listed
-// variation. Anything else — e.g. a nonexistent variation that fell back
-// to the base record — is unknown and ignored.
-function isKnownRenderId(
-  id: string,
-  lookup: (normalizedId: string) => DataEmoji | undefined,
-): boolean {
-  const record = lookup(id);
   if (!record) {
-    return false;
+    return undefined;
   }
-  return (
-    record[EmojiProperties.unified] === id ||
-    (record[EmojiProperties.variations] ?? []).includes(id)
-  );
+  // A render identity is the base unified or a listed variation; a
+  // nonexistent variation that fell back to the base record is unknown.
+  // Typed, stored or other datasets' IDs often omit or add U+FE0F: resolve
+  // to the record's own spelling of that identity.
+  const known = [
+    record[EmojiProperties.unified],
+    ...(record[EmojiProperties.variations] ?? []),
+  ];
+  return known.includes(unified)
+    ? unified
+    : known.find((each) => withoutFe0f(each) === withoutFe0f(unified));
 }

package/src/hooks/preloadEmoji.ts

@@ -1,75 +1,36 @@
 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,
   emoji: undefined | DataEmoji,
   emojiStyle: EmojiStyleValue,
+  rendered?: string,
 ): void {
   if (!emoji) {
     return;
   }
 
   const unified = emojiUnified(emoji);
+  // With `rendered`, only the image the cell renders (the active tone's, or
+  // the base) is fetched. It is marked apart from a full preload, so a
+  // later full preload (on focus) still fetches every tone; a full one
+  // covers it.
+  const key = rendered ? rendered + '/only' : unified;
 
-  if (preloadedEmojs.has(unified)) {
+  if (preloadedEmojs.has(unified) || preloadedEmojs.has(key)) {
     return;
   }
-  preloadedEmojs.add(unified);
+  preloadedEmojs.add(key);
 
-  emojiVariations(emoji)
-    .concat(unified)
-    .forEach((variation) => {
+  (rendered ? [rendered] : emojiVariations(emoji).concat(unified)).forEach(
+    (variation) => {
       const emojiUrl = getEmojiUrl(variation, emojiStyle);
       preloadImage(emojiUrl);
-    });
+    },
+  );
 }
 
 export const preloadedEmojs: Set<string> = new Set();

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,8 +1,11 @@
+import { useCallback } from 'react';
+
 import {
   useActiveSkinToneState,
   useNativeEmojiSupport,
 } from '../components/context/PickerContext';
 import { useEmojiVersionConfig, useUnicodeToHide } from '../config/useConfig';
+import { withoutFe0f } from '../data-core/prepare';
 import { DataEmoji } from '../dataUtils/DataTypes';
 import {
   addedIn,
@@ -20,17 +23,24 @@ 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(
+          withoutFe0f(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],
+  );
 }