emoji-picker-react 4.22.2 → 5.0.0

package/src/dataUtils/nativeEmojiSupport.ts

@@ -0,0 +1,160 @@
+import { isJsdom } from '../DomUtils/isJsdom';
+
+import { createNativeEmojiSequenceSupport } from './nativeEmojiSequenceSupport';
+
+// Native emoji support detection.
+//
+// The native emoji style renders with the platform's emoji font, which lags
+// behind the dataset: an emoji newer than the OS font draws as a blank box
+// ("tofu") or decomposes into several glyphs, and Windows has no country
+// flag glyphs at all. The picker probes the platform on the client and
+// refreshes after emoji font changes or loading. SSR output is unaffected;
+// detected unsupported glyphs are hidden.
+//
+// Detection runs in two phases so it never stalls the first paint.
+// Drawing every sequence costs 0.2-0.8 s of main-thread time, depending
+// on the browser and font, so before paint the picker samples one glyph
+// per emoji version and a country flag, and predicts from that. Sequences
+// about to be shown (cells near the viewport, their skin tones and the
+// reactions) are then checked exactly in cached pixel batches between
+// tasks. Exact results replace predictions: one version sample cannot
+// prove font coverage.
+
+export const DEFAULT_NATIVE_EMOJI_FONT =
+  '"Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "EmojiOne Color", "Android Emoji"';
+
+const BASELINE_EMOJI = '\u{1F600}'; // grinning face (Emoji 1.0)
+
+const FLAG_SAMPLE = '1f1fa-1f1f8'; // regional indicators U + S
+
+export type NativeEmojiProbe = ReturnType<
+  typeof createNativeEmojiSequenceSupport
+>;
+
+/**
+ * Platform support as filtering reads it. `supports` returns a probed
+ * identity's exact result (null when inconclusive, undefined when not
+ * probed yet); the version and flag fields predict the rest.
+ */
+export type NativeEmojiSupport = {
+  supports: (unified: string) => boolean | null | undefined;
+  /** Emoji versions whose sample the font cannot draw. */
+  failedVersions: Set<number>;
+  countryFlags: boolean;
+};
+
+export const UNKNOWN_SUPPORT = {};
+
+let cache = new WeakMap<
+  Document,
+  Map<string, NativeEmojiProbe | typeof UNKNOWN_SUPPORT>
+>();
+
+/**
+ * Probes the font synchronously, sampling versions and flags only.
+ * Exact sequence results accumulate on the returned probe through
+ * `prime`, which pickers call in background batches.
+ */
+export function detectNativeEmojiSupport(
+  fontFamily: string = DEFAULT_NATIVE_EMOJI_FONT,
+  refresh = false,
+  ownerDocument: Document | undefined = typeof document === 'undefined'
+    ? undefined
+    : document,
+): NativeEmojiProbe | typeof UNKNOWN_SUPPORT {
+  if (!ownerDocument) return UNKNOWN_SUPPORT;
+  const fonts =
+    cache.get(ownerDocument) ||
+    new Map<string, NativeEmojiProbe | typeof UNKNOWN_SUPPORT>();
+  cache.set(ownerDocument, fonts);
+  if (refresh) fonts.delete(fontFamily);
+  const cached = fonts.get(fontFamily);
+  if (cached) {
+    return cached;
+  }
+  const result = probe(fontFamily, ownerDocument);
+  // Bound retained font caches even when an application switches themes
+  // through many dynamically named families. Mounted Roots retain theirs.
+  if (fonts.size >= 16) fonts.clear();
+  fonts.set(fontFamily, result);
+  return result;
+}
+
+/**
+ * Whether a rendered identity should show. An exact result wins; until
+ * one exists, flags and emojis of a version whose sample failed are
+ * predicted unsupported. `addedIn` is the emoji's version, when known.
+ */
+export function isNativeEmojiSupported(
+  support: NativeEmojiSupport | null,
+  unified: string,
+  addedIn = 0,
+): boolean {
+  const exact = support && support.supports(unified);
+  return typeof exact === 'boolean'
+    ? exact
+    : !support ||
+        !(
+          support.failedVersions.has(addedIn) ||
+          (!support.countryFlags && isCountryFlagUnified(unified))
+        );
+}
+
+/** The picker's view of a probe: frozen results, never drawing. */
+/**
+ * The picker's view of a probe: frozen results, never drawing, plus a
+ * prediction for identities not checked yet. `samples` maps each emoji
+ * version to one emoji introduced in it. Versions are judged one by one:
+ * fonts often draw a newer version's single glyphs but not an older
+ * version's sequences.
+ */
+export function nativeSupportSnapshot(
+  probe: NativeEmojiProbe,
+  samples: Map<number, string>,
+): NativeEmojiSupport {
+  probe.prime([FLAG_SAMPLE, ...samples.values()]);
+  const failedVersions = new Set<number>();
+  samples.forEach((unified, version) => {
+    if (probe.supports(unified) === false) failedVersions.add(version);
+  });
+  return {
+    supports: probe.snapshot(),
+    failedVersions,
+    // Only a definite failure predicts missing flags.
+    countryFlags: probe.supports(FLAG_SAMPLE) !== false,
+  };
+}
+
+/** Test-only: forget cached probe results. */
+export function __resetNativeEmojiSupportForTest(): void {
+  cache = new WeakMap();
+}
+
+function probe(
+  fontFamily: string,
+  ownerDocument: Document,
+): NativeEmojiProbe | typeof UNKNOWN_SUPPORT {
+  if (isJsdom()) return UNKNOWN_SUPPORT;
+  try {
+    const canvas = ownerDocument.createElement('canvas');
+    const ctx = canvas.getContext('2d', { willReadFrequently: true });
+    if (!ctx) return UNKNOWN_SUPPORT;
+    ctx.font = `24px ${fontFamily}`;
+    ctx.textBaseline = 'top';
+    const baselineWidth = ctx.measureText(BASELINE_EMOJI).width;
+    const sequences = createNativeEmojiSequenceSupport(ctx, baselineWidth);
+    // A stable baseline rejects text fallback, noise and blocked readbacks.
+    if (!baselineWidth || sequences.supports('1f600') !== true)
+      return UNKNOWN_SUPPORT;
+    return sequences;
+  } catch {
+    return UNKNOWN_SUPPORT;
+  }
+}
+
+/** Whether a unified code is a regional-indicator country flag. */
+export function isCountryFlagUnified(unified: string): boolean {
+  // Regional-indicator pairs, plus tag-sequence subdivision flags: fonts
+  // without the former lack the latter too.
+  return /^(1f1[ef][\da-f]-1f1[ef][\da-f]$|1f3f4-e00)/i.test(unified);
+}

package/src/dataUtils/suggested.ts

@@ -1,7 +1,11 @@
-import { SkinTones, SuggestionMode } from '../types/exposedTypes';
+import {
+  SkinTones,
+  SuggestionMode,
+  SuggestionModeValue,
+} from '../types/exposedTypes';
 
 import { DataEmoji } from './DataTypes';
-import { emojiUnified } from './emojiUtils';
+import { emojiUnified, emojiCanonicalUnified } from './emojiUtils';
 
 const SUGGESTED_LS_KEY = 'epr_suggested';
 
@@ -13,7 +17,7 @@ type SuggestedItem = {
 
 type Suggested = SuggestedItem[];
 
-export function getSuggested(mode?: SuggestionMode): Suggested {
+export function getSuggested(mode?: SuggestionModeValue): Suggested {
   try {
     if (typeof window === 'undefined' || !window.localStorage) {
       return [];
@@ -36,7 +40,7 @@ export function setSuggested(emoji: DataEmoji, skinTone: SkinTones) {
   const recent = getSuggested();
 
   const unified = emojiUnified(emoji, skinTone);
-  const originalUnified = emojiUnified(emoji);
+  const originalUnified = emojiCanonicalUnified(emoji);
 
   let existing = recent.find(({ unified: u }) => u === unified);
 

package/src/dataUtils/suggestedEmojis.ts

@@ -0,0 +1,92 @@
+import { DataEmoji, EmojiProperties } from './DataTypes';
+
+// Caller-defined Suggested contents.
+//
+// While `suggestedEmojis` is present it fully determines the Suggested
+// category contents/order and `suggestedEmojisMode` is ignored for
+// selection/order. One case-insensitive rule covers both Unicode and
+// custom IDs, matching how `customEmojis` are indexed (lowercased on
+// entry). A valid skin-tone variation keeps that exact variation for
+// rendering rather than collapsing to the neutral base. Unknown entries
+// are ignored; duplicates collapse by resolved render identity with first
+// occurrence winning; caller order is otherwise preserved. The input
+// array is never mutated. Native emoji characters ("🧠", "©️") are accepted
+// too and resolved to their unified ID, so apps that store recents as the
+// characters they insert can pass them through unchanged.
+
+export function resolveSuggestedRenderIds(
+  entries: readonly string[],
+  lookup: (normalizedId: string) => DataEmoji | undefined,
+): string[] {
+  const seen = new Set<string>();
+  const result: string[] = [];
+
+  for (const entry of entries) {
+    if (typeof entry !== 'string') {
+      continue;
+    }
+    const id = resolveEntryId(entry.trim().toLowerCase(), lookup);
+    if (!id || seen.has(id)) {
+      continue;
+    }
+    seen.add(id);
+    result.push(id);
+  }
+
+  return result;
+}
+
+/**
+ * A lowercased unified ID, custom ID or emoji character, resolved to a
+ * known render identity (see resolveSuggestedRenderIds).
+ */
+export function resolveEntryId(
+  id: string,
+  lookup: (normalizedId: string) => DataEmoji | undefined,
+): string | undefined {
+  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;
+  }
+  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 (
+    record[EmojiProperties.unified] === id ||
+    (record[EmojiProperties.variations] ?? []).includes(id)
+  );
+}

package/src/env.d.ts

@@ -0,0 +1,4 @@
+// Build-time environment flag, replaced or provided by the consumer's
+// bundler/runtime. Declared minimally so the library does not depend on
+// Node's type definitions.
+declare const process: { env: { NODE_ENV?: string } };

package/src/hooks/preloadEmoji.ts

@@ -1,13 +1,13 @@
 import { GetEmojiUrl } from '../components/emoji/BaseEmojiProps';
 import { DataEmoji } from '../dataUtils/DataTypes';
 import { emojiUnified, emojiVariations } from '../dataUtils/emojiUtils';
-import { EmojiStyle } from '../types/exposedTypes';
+import { EmojiStyle, EmojiStyleValue } from '../types/exposedTypes';
 import { Dimensions } from '../virtualization/virtualizationHelpers';
 
 // eslint-disable-next-line max-params
 export function preloadEmojiIfNeeded(
   emoji: undefined | DataEmoji,
-  emojiStyles: EmojiStyle,
+  emojiStyles: EmojiStyleValue,
   scrollTop: number,
   clientHeight: number,
   topOffset: number,
@@ -51,7 +51,7 @@ export function preloadEmojiIfNeeded(
 export function preloadEmoji(
   getEmojiUrl: GetEmojiUrl,
   emoji: undefined | DataEmoji,
-  emojiStyle: EmojiStyle,
+  emojiStyle: EmojiStyleValue,
 ): void {
   if (!emoji) {
     return;

package/src/hooks/useActiveCategoryScrollDetection.ts

@@ -24,6 +24,7 @@ export function useActiveCategoryScrollDetection({
   useEffect(() => {
     const visibleCategories = new Map<string, number>();
     const intersectingCategories = new Map<string, boolean>();
+    const targets = new Map<string, Element>();
     const bodyRef = BodyRef.current;
     const observer = new IntersectionObserver(
       (entries) => {
@@ -40,6 +41,7 @@ export function useActiveCategoryScrollDetection({
 
           visibleCategories.set(id, entry.intersectionRatio);
           intersectingCategories.set(id, entry.isIntersecting);
+          targets.set(id, entry.target);
         }
 
         const ratios = Array.from(visibleCategories);
@@ -54,8 +56,15 @@ export function useActiveCategoryScrollDetection({
           return setActiveCategory(lastCategory[0]);
         }
 
+        const viewportTop = bodyRef.getBoundingClientRect().top;
         for (const [id, ratio] of ratios) {
-          if (ratio) {
+          // 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
+          ) {
             setActiveCategory(id);
             break;
           }

package/src/hooks/useCategoryHeight.ts

@@ -1,35 +1,87 @@
 import * as React from 'react';
 
-import { EmojiButtonSelector } from '../DomUtils/selectors';
+import { asSelectors, ClassNames } from '../DomUtils/classNames';
+import {
+  elementBorderBoxHeight,
+  EmojiButtonSelector,
+} from '../DomUtils/selectors';
 import {
   useEmojiListRef,
   usePickerMainRef,
 } from '../components/context/ElementRefContext';
 import {
+  useNavigationRegistry,
   useReactionsModeState,
   useVisibleCategoriesState,
   useEmojiSizeState,
 } from '../components/context/PickerContext';
+import { useColumnsConfig } from '../config/useConfig';
+
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
 
 const EMOJI_SIZE_DEFAULT = 40;
 
+// Rows live inside the category content box, not the full list:
+// category margins/padding shrink the usable width, and dividing
+// the raw list width would overcount columns so the last emoji in
+// every row spills past the content edge (into the scrollbar).
+// Measure a rendered, visible content box when one exists; fall back
+// to the list width (identical when categories carry no horizontal
+// inset). Hidden categories report zero width and are skipped.
+function firstVisibleContentWidth(
+  listEl: HTMLElement,
+  fallbackWidth: number,
+): number {
+  const contentBoxes = listEl.querySelectorAll(
+    asSelectors(ClassNames.categoryContent),
+  );
+  for (const box of Array.from(contentBoxes)) {
+    const width = (box as HTMLElement).clientWidth;
+    if (width > 0) {
+      return width;
+    }
+  }
+  return fallbackWidth;
+}
+
+// A column-count change obsoletes rows computed by pending keyboard
+// navigation.
+function trackColumnCount(
+  previousRef: React.MutableRefObject<number | undefined>,
+  emojisPerRow: number,
+  registry: { invalidate(): void },
+): void {
+  if (
+    previousRef.current !== undefined &&
+    previousRef.current !== emojisPerRow
+  ) {
+    registry.invalidate();
+  }
+  previousRef.current = emojisPerRow;
+}
+
 export function useCategoryHeight(emojiCount: number):
   | {
       categoryHeight: number;
       emojisPerRow: number;
       emojiSize: number;
+      rowWidth: number;
     }
   | undefined {
   const EmojiListRef = useEmojiListRef();
   const [isReactionsMode] = useReactionsModeState();
   const PickerMainRef = usePickerMainRef();
-  const emojiSizeRef = React.useRef<number | undefined>();
+  const emojiSizeRef = React.useRef<number | undefined>(undefined);
+  const emojisPerRowRef = React.useRef<number | undefined>(undefined);
+  const registry = useNavigationRegistry();
   const [visibleCategories] = useVisibleCategoriesState();
   const [emojiSizeFromContext] = useEmojiSizeState();
+  const columns = useColumnsConfig();
   const [dimensions, setDimensions] = React.useState<{
     categoryHeight: number;
     emojisPerRow: number;
     emojiSize: number;
+    rowWidth: number;
   }>();
 
   // Helper to compute and store dimensions based on current DOM
@@ -41,7 +93,8 @@ export function useCategoryHeight(emojiCount: number):
       EmojiButtonSelector,
     ) as HTMLElement | null;
 
-    const measured = emojiElement?.clientHeight;
+    // Border-box geometry includes design-library button borders.
+    const measured = elementBorderBoxHeight(emojiElement);
     if (measured) {
       emojiSizeRef.current = measured;
     }
@@ -54,15 +107,20 @@ export function useCategoryHeight(emojiCount: number):
 
     if (pickerWidth === 0 || emojiSize === 0) return;
 
-    const emojisPerRow = Math.max(1, Math.floor(pickerWidth / emojiSize));
+    const rowWidth = firstVisibleContentWidth(listEl, pickerWidth);
+    const fit = Math.max(1, Math.floor(rowWidth / emojiSize));
+    const emojisPerRow = columns ? Math.min(columns, fit) : fit;
     const rowCount = Math.ceil(emojiCount / emojisPerRow);
     const categoryHeight = rowCount * emojiSize;
 
-    setDimensions({ categoryHeight, emojisPerRow, emojiSize });
-  }, [EmojiListRef, emojiCount, emojiSizeFromContext]);
+    trackColumnCount(emojisPerRowRef, emojisPerRow, registry);
+    setDimensions({ categoryHeight, emojisPerRow, emojiSize, rowWidth });
+  }, [EmojiListRef, emojiCount, emojiSizeFromContext, registry, columns]);
 
-  // Recompute on data-count changes and when reactions mode toggles
-  React.useEffect(() => {
+  // 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.
+  useIsomorphicLayoutEffect(() => {
     computeAndSetDimensions();
   }, [
     emojiCount,
@@ -71,6 +129,22 @@ export function useCategoryHeight(emojiCount: number):
     visibleCategories.length,
   ]);
 
+  // Fluid layouts (width: 100%, sheets, docks) resize without a CSS
+  // transition: recompute columns when the list's width changes.
+  React.useEffect(() => {
+    const listEl = EmojiListRef.current;
+    if (!listEl || typeof ResizeObserver === 'undefined') return;
+    let lastWidth = listEl.clientWidth;
+    const observer = new ResizeObserver(() => {
+      const width = listEl.clientWidth;
+      if (width === lastWidth) return;
+      lastWidth = width;
+      computeAndSetDimensions();
+    });
+    observer.observe(listEl);
+    return () => observer.disconnect();
+  }, [EmojiListRef, computeAndSetDimensions]);
+
   // Listen to transitionend on the picker root (where height transition occurs)
   React.useEffect(() => {
     const rootEl = PickerMainRef.current;

package/src/hooks/useDataIdentityStabilityWarning.ts

@@ -0,0 +1,86 @@
+/* global process: readonly */
+import * as React from 'react';
+
+import type { CustomEmoji } from '../config/customEmojiConfig';
+import { defaultEmojiDataOrEmpty } from '../data/defaultEmojiData';
+import type { EmojiData } from '../types/exposedTypes';
+
+interface IdentityTracker {
+  prev: unknown;
+  consecutiveChanges: number;
+  warned: boolean;
+}
+
+function trackIdentity(
+  tracker: IdentityTracker,
+  value: unknown,
+  isDefault: boolean,
+  message: string,
+): void {
+  if (isDefault) {
+    tracker.prev = value;
+    tracker.consecutiveChanges = 0;
+    return;
+  }
+  if (tracker.prev !== undefined && tracker.prev !== value) {
+    tracker.consecutiveChanges += 1;
+  } else if (tracker.prev === value) {
+    tracker.consecutiveChanges = 0;
+  }
+  tracker.prev = value;
+  if (tracker.consecutiveChanges >= 3 && !tracker.warned) {
+    tracker.warned = true;
+    // eslint-disable-next-line no-console
+    console.warn(message);
+  }
+}
+
+function freshTracker(): IdentityTracker {
+  return { prev: undefined, consecutiveChanges: 0, warned: false };
+}
+
+/**
+ * Dev-only diagnostic.
+ *
+ * Identity caching only helps when callers keep data props referentially
+ * stable. If a non-default `emojiData` (or `customEmojis`) changes identity
+ * on three consecutive committed renders, warn once that repeated identity
+ * churn defeats prepared-data caching. Behavior stays correct; this is
+ * diagnostic only. A single/occasional replacement (e.g. locale change)
+ * must not warn. No deep-compare or clone is performed.
+ */
+export const useDataIdentityStabilityWarning: (
+  emojiData: EmojiData | undefined,
+  customEmojis: CustomEmoji[] | undefined,
+) => void =
+  // Development only: production bundles drop the trackers entirely.
+  process.env.NODE_ENV === 'production'
+    ? () => undefined
+    : useIdentityChurnWarning;
+
+function useIdentityChurnWarning(
+  emojiData: EmojiData | undefined,
+  customEmojis: CustomEmoji[] | undefined,
+): void {
+  const emojiState = React.useRef<IdentityTracker>(freshTracker());
+  const customState = React.useRef<IdentityTracker>(freshTracker());
+
+  React.useEffect(() => {
+    trackIdentity(
+      emojiState.current,
+      emojiData,
+      !emojiData || emojiData === defaultEmojiDataOrEmpty(),
+      '[emoji-picker-react] `emojiData` changed identity on three consecutive renders. ' +
+        'Memoize/reuse the dataset object so the prepared-data cache can be shared. ' +
+        'Behavior remains correct; caching is only defeated by identity churn.',
+    );
+    trackIdentity(
+      customState.current,
+      customEmojis,
+      !customEmojis || customEmojis.length === 0,
+      '[emoji-picker-react] `customEmojis` changed identity on three consecutive renders. ' +
+        'Memoize/reuse the array so custom-emoji derivation can be cached. ' +
+        'Behavior remains correct; caching is only defeated by identity churn.',
+    );
+  });
+}

package/src/hooks/useDebouncedState.ts

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 export function useDebouncedState<T>(
   initialValue: T,
@@ -7,6 +7,18 @@ export function useDebouncedState<T>(
   const [state, setState] = useState<T>(initialValue);
   const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
+  // A pending trailing edge must never fire after unmount (React warns
+  // about the post-unmount setState and the work is wasted).
+  useEffect(
+    () => () => {
+      if (timer.current) {
+        clearTimeout(timer.current);
+        timer.current = null;
+      }
+    },
+    [],
+  );
+
   function debouncedSetState(value: T) {
     return new Promise<T>((resolve) => {
       if (timer.current) {

package/src/hooks/useDisallowedEmojis.ts

@@ -1,52 +1,36 @@
-import { useRef, useMemo } from 'react';
-
-import { usePickerDataContext } from '../components/context/PickerDataContext';
-import { useEmojiVersionConfig } from '../config/useConfig';
+import {
+  useActiveSkinToneState,
+  useNativeEmojiSupport,
+} from '../components/context/PickerContext';
+import { useEmojiVersionConfig, useUnicodeToHide } from '../config/useConfig';
 import { DataEmoji } from '../dataUtils/DataTypes';
 import {
   addedIn,
   emojiUnified,
   unifiedWithoutSkinTone,
 } from '../dataUtils/emojiUtils';
-
-import { useIsUnicodeHidden } from './useHideEmojisByUniocode';
-
-export function useDisallowedEmojis() {
-  const DisallowedEmojisRef = useRef<Record<string, boolean>>({});
-  const emojiVersionConfig = useEmojiVersionConfig();
-  const { allEmojis } = usePickerDataContext();
-
-  return useMemo(() => {
-    const emojiVersion = parseFloat(`${emojiVersionConfig}`);
-
-    if (!emojiVersionConfig || Number.isNaN(emojiVersion)) {
-      return DisallowedEmojisRef.current;
-    }
-
-    return allEmojis.reduce((disallowedEmojis, emoji) => {
-      if (addedInNewerVersion(emoji, emojiVersion)) {
-        disallowedEmojis[emojiUnified(emoji)] = true;
-      }
-
-      return disallowedEmojis;
-    }, DisallowedEmojisRef.current);
-  }, [emojiVersionConfig, allEmojis]);
-}
+import { isNativeEmojiSupported } from '../dataUtils/nativeEmojiSupport';
+import { isCustomEmoji } from '../typeRefinements/typeRefinements';
 
 export function useIsEmojiDisallowed() {
-  const disallowedEmojis = useDisallowedEmojis();
-  const isUnicodeHidden = useIsUnicodeHidden();
-
-  return function isEmojiDisallowed(emoji: DataEmoji) {
-    const unified = unifiedWithoutSkinTone(emojiUnified(emoji));
-
-    return Boolean(disallowedEmojis[unified] || isUnicodeHidden(unified));
+  const configured = parseFloat(useEmojiVersionConfig() || '');
+  const nativeSupport = useNativeEmojiSupport();
+  // A configured cap restricts native support; it never overrides it.
+  const cap = Number.isNaN(configured) ? Infinity : configured;
+  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)
+    );
   };
 }
-
-function addedInNewerVersion(
-  emoji: DataEmoji,
-  supportedLevel: number,
-): boolean {
-  return addedIn(emoji) > supportedLevel;
-}