emoji-picker-react 4.22.3 → 5.0.0

package/src/data-core/search.ts

@@ -0,0 +1,122 @@
+// 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 type { EmojiDataOptions, EmojiInfo } from './types';
+
+export type { EmojiDataOptions, EmojiInfo };
+
+const EMPTY_RESULTS: readonly EmojiInfo[] = Object.freeze([]);
+
+/**
+ * Bound on distinct memoized queries per prepared core. The memo is shared
+ * process-wide per dataset identity (including server use), so unbounded
+ * growth is a leak: evict the least recently used entry past this size.
+ * 500 distinct recent queries is generous for interactive sessions while
+ * keeping worst-case memory proportional to one result window.
+ */
+const MAX_QUERY_MEMO_SIZE = 500;
+
+function memoizeQuery(
+  core: ReturnType<typeof getPreparedCore>,
+  normalized: string,
+  results: readonly EmojiInfo[],
+): void {
+  const memo = core.queryMemo;
+  if (memo.has(normalized)) {
+    memo.delete(normalized);
+  } else if (memo.size >= MAX_QUERY_MEMO_SIZE) {
+    const oldest = memo.keys().next();
+    if (!oldest.done) {
+      memo.delete(oldest.value);
+    }
+  }
+  memo.set(normalized, results);
+}
+
+/**
+ * A record whose names contain the query contains every query character,
+ * so it sits in each of those characters' buckets. Scanning the smallest
+ * one (buckets keep record order) yields exactly the full-scan matches in
+ * the same order, for a fraction of the records.
+ */
+function smallestCandidateBucket(
+  core: ReturnType<typeof getPreparedCore>,
+  normalized: string,
+): readonly EmojiInfo[] {
+  let smallest: readonly EmojiInfo[] = core.records;
+  // Code points, matching how buckets are keyed (astral chars stay whole).
+  for (const char of Array.from(normalized)) {
+    const bucket = core.byChar.get(char);
+    if (!bucket) {
+      return EMPTY_RESULTS;
+    }
+    if (bucket.length < smallest.length) {
+      smallest = bucket;
+    }
+  }
+  return smallest;
+}
+
+/**
+ * Lookup by base or variation unified code.
+ * Trims/lowercases input, returns the canonical base record or undefined.
+ */
+export function getEmojiByUnified(
+  unified: string,
+  options?: EmojiDataOptions,
+): EmojiInfo | undefined {
+  if (!unified || typeof unified !== 'string') {
+    return undefined;
+  }
+  const normalized = normalizeUnified(unified);
+  if (!normalized) {
+    return undefined;
+  }
+  const core = getPreparedCore(options?.emojiData);
+  return core.byUnified.get(normalized);
+}
+
+/**
+ * Dataset search (not a snapshot of one picker instance's visible results).
+ * Picker-only layers such as emojiVersion/hiddenEmojis/customEmojis are
+ * intentionally not applied here; they remain Root-local filters.
+ */
+export function searchEmojis(
+  query: string,
+  options?: EmojiDataOptions,
+): readonly EmojiInfo[] {
+  const normalized = normalizeQuery(query);
+  if (!normalized) {
+    return EMPTY_RESULTS;
+  }
+
+  const core = getPreparedCore(options?.emojiData);
+  const memoized = core.queryMemo.get(normalized);
+  if (memoized) {
+    memoizeQuery(core, normalized, memoized);
+    return Object.freeze([...memoized]) as readonly EmojiInfo[];
+  }
+
+  // Single-character queries hit the prepared bucket (same membership as
+  // a full scan: joined names contain the char iff some name includes it).
+  if (normalized.length === 1) {
+    const bucket = core.byChar.get(normalized) ?? EMPTY_RESULTS;
+    memoizeQuery(core, normalized, bucket);
+    return Object.freeze([...bucket]) as readonly EmojiInfo[];
+  }
+
+  const matches: EmojiInfo[] = [];
+  for (const record of smallestCandidateBucket(core, normalized)) {
+    const names = record.names;
+    for (let i = 0; i < names.length; i += 1) {
+      if (names[i].includes(normalized)) {
+        matches.push(record);
+        break;
+      }
+    }
+  }
+
+  memoizeQuery(core, normalized, matches);
+  return Object.freeze([...matches]) as readonly EmojiInfo[];
+}

package/src/data-core/types.ts

@@ -0,0 +1,36 @@
+// v5 pure shared data core types.
+//
+// This module is intentionally free of React and ShipStyles imports so the
+// `emoji-picker-react/data` entry can share it without pulling UI runtime.
+
+import type { EmojiData } from '../types/exposedTypes';
+
+export type { EmojiData };
+
+export type EmojiInfo = Readonly<{
+  /** Canonical/base lowercase unified code. */
+  unified: string;
+
+  /** The native emoji text for `unified`, ready to insert or render. */
+  emoji: string;
+
+  /** Display name: the dataset's full name (the last of `names`). */
+  name: string;
+
+  /** Search/display names in dataset order. */
+  names: readonly string[];
+
+  /** Lowercase unified codes for supported variations. */
+  variations: readonly string[];
+
+  /** Unicode/emoji version from the dataset. */
+  addedIn: string;
+}>;
+
+export type EmojiDataOptions = Readonly<{
+  /**
+   * Optional dataset in the same shape accepted by the picker's emojiData prop.
+   * Omit for the packaged default English dataset.
+   */
+  emojiData?: EmojiData;
+}>;

package/src/data.ts

@@ -0,0 +1,10 @@
+// Public v5 data entry point: `emoji-picker-react/data`.
+//
+// Additive to the existing top-level `emojiByUnified` export. Presents a
+// normalized, documented shape and shares the pure data core with the picker.
+// Must not import React or ShipStyles (enforced by npm run check:package).
+
+import './data/registerDefaultEmojiData';
+
+export { getEmojiByUnified, searchEmojis } from './data-core/search';
+export type { EmojiData, EmojiDataOptions, EmojiInfo } from './data-core/types';

package/src/dataUtils/DataTypes.ts

@@ -9,6 +9,10 @@ export enum EmojiProperties {
 }
 
 export interface DataEmoji extends WithName {
+  /** Exact rendered identity; canonical unified remains the search identity. */
+  renderUnified?: string;
+  /** Stored recent identity when the active tone has no matching variation. */
+  fallbackUnified?: string;
   [EmojiProperties.unified]: string;
   [EmojiProperties.variations]?: string[];
   [EmojiProperties.added_in]: string;

package/src/dataUtils/emojiSelectors.ts

@@ -2,24 +2,21 @@
 // imports no React components, hooks, or context providers so it can never
 // form an import cycle with them. Context-aware lookups live in
 // components/context/PickerDataContext instead.
-import { Categories } from '../config/categoryConfig';
 import { cdnUrl } from '../config/cdnUrls';
-import { CustomEmoji } from '../config/customEmojiConfig';
-import emojis from '../data/emojis';
+import { getRegisteredDefaultEmojiData } from '../data/defaultEmojiData';
 import skinToneVariations, {
   skinTonesMapped,
 } from '../data/skinToneVariations';
-import { EmojiStyle, SkinTones } from '../types/exposedTypes';
+import { EmojiData, EmojiStyleValue, SkinTones } from '../types/exposedTypes';
 
-import { DataEmoji, DataEmojis, EmojiProperties, WithName } from './DataTypes';
-import { indexEmoji } from './alphaNumericEmojiIndex';
+import { DataEmoji, EmojiProperties, WithName } from './DataTypes';
 
 export function emojiNames(emoji: WithName): string[] {
   return emoji[EmojiProperties.name] ?? [];
 }
 
 export function addedIn(emoji: DataEmoji): number {
-  return parseFloat(emoji[EmojiProperties.added_in]);
+  return parseFloat(emoji[EmojiProperties.added_in] || '0');
 }
 
 export function emojiName(emoji?: WithName): string {
@@ -42,20 +39,23 @@ export function unifiedWithoutSkinTone(unified: string): string {
   return unified;
 }
 
-export function emojiUnified(emoji: DataEmoji, skinTone?: string): string {
-  const unified = emoji[EmojiProperties.unified];
-
-  if (!skinTone || !emojiHasVariations(emoji)) {
-    return unified;
-  }
+export function emojiCanonicalUnified(emoji: DataEmoji): string {
+  return emoji[EmojiProperties.unified];
+}
 
-  return emojiVariationUnified(emoji, skinTone) ?? unified;
+export function emojiUnified(emoji: DataEmoji, skinTone?: string): string {
+  return (
+    emoji.renderUnified ??
+    (skinTone ? emojiVariationUnified(emoji, skinTone) : undefined) ??
+    emoji.fallbackUnified ??
+    emojiCanonicalUnified(emoji)
+  );
 }
 
 // WARNING: DO NOT USE DIRECTLY
 export function emojiUrlByUnified(
   unified: string,
-  emojiStyle: EmojiStyle,
+  emojiStyle: EmojiStyleValue,
 ): string {
   return `${cdnUrl(emojiStyle)}${unified}.png`;
 }
@@ -77,67 +77,62 @@ export function emojiVariationUnified(
     : emojiUnified(emoji);
 }
 
+// Legacy global lookup (the public top-level `emojiByUnified` export) over
+// the registered default dataset. Indexed lazily on first use and again
+// 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);
+
+function registryIndex(): Record<string, DataEmoji> {
+  const source = getRegisteredDefaultEmojiData();
+  if (source === indexedSource) {
+    return allEmojisByUnified;
+  }
+  indexedSource = source;
+  allEmojisByUnified = Object.create(null);
+  const groups = source?.emojis ?? {};
+  for (const group of Object.keys(groups)) {
+    for (const emoji of groups[group]) {
+      allEmojisByUnified[emojiUnified(emoji)] = emoji;
+      emojiVariations(emoji).forEach((variation) => {
+        allEmojisByUnified[variation] = emoji;
+      });
+    }
+  }
+  return allEmojisByUnified;
+}
+
 export function emojiByUnified(unified?: string): DataEmoji | undefined {
   if (!unified) {
     return;
   }
 
-  if (allEmojisByUnified[unified]) {
-    return allEmojisByUnified[unified];
+  const index = registryIndex();
+  if (index[unified]) {
+    return index[unified];
   }
 
   const withoutSkinTone = unifiedWithoutSkinTone(unified);
-  return allEmojisByUnified[withoutSkinTone];
+  return index[withoutSkinTone];
 }
 
-export const allEmojis: DataEmojis = Object.values(emojis.emojis).flat();
-
-export function setCustomEmojis(customEmojis: CustomEmoji[]): void {
-  emojis.emojis[Categories.CUSTOM].length = 0;
-
-  customEmojis.forEach((emoji) => {
-    const emojiData = customToRegularEmoji(emoji);
-
-    emojis.emojis[Categories.CUSTOM].push(emojiData as never);
-
-    if (allEmojisByUnified[emojiData[EmojiProperties.unified]]) {
-      return;
-    }
-
-    allEmojis.push(emojiData);
-    allEmojisByUnified[emojiData[EmojiProperties.unified]] = emojiData;
-    indexEmoji(emojiData);
-  });
-}
-
-function customToRegularEmoji(emoji: CustomEmoji): DataEmoji {
-  return {
-    [EmojiProperties.name]: emoji.names.map((name) => name.toLowerCase()),
-    [EmojiProperties.unified]: emoji.id.toLowerCase(),
-    [EmojiProperties.added_in]: '0',
-    [EmojiProperties.imgUrl]: emoji.imgUrl,
-  };
-}
-
-const allEmojisByUnified: {
-  [unified: string]: DataEmoji;
-} = {};
-
-allEmojis.reduce((allEmojis, Emoji) => {
-  allEmojis[emojiUnified(Emoji)] = Emoji;
-
-  if (emojiHasVariations(Emoji)) {
-    emojiVariations(Emoji).forEach((variation) => {
-      allEmojis[variation] = Emoji;
-    });
-  }
-
-  return allEmojis;
-}, allEmojisByUnified);
-
 export function activeVariationFromUnified(unified: string): SkinTones | null {
   const [, suspectedSkinTone] = unified.split('-') as [string, SkinTones];
   return skinToneVariations.includes(suspectedSkinTone)
     ? suspectedSkinTone
     : null;
 }
+
+// A button's exact identity is authoritative, including an explicit neutral
+// variation. Preview metadata and selection share this resolution.
+export function skinToneFromEmoji(
+  emoji: DataEmoji,
+  unified: string,
+  activeTone: SkinTones,
+): SkinTones {
+  return (
+    activeVariationFromUnified(unified) ??
+    (emojiHasVariations(emoji) ? SkinTones.NEUTRAL : activeTone)
+  );
+}

package/src/dataUtils/emojiUtils.ts

@@ -1,74 +1,17 @@
-import { cdnUrl } from '../config/cdnUrls';
-import { skinTonesMapped } from '../data/skinToneVariations';
-import { EmojiStyle, SkinTones } from '../types/exposedTypes';
-
-import { DataEmoji, EmojiProperties, WithName } from './DataTypes';
-
-export function emojiNames(emoji: WithName): string[] {
-  return emoji[EmojiProperties.name] ?? [];
-}
-
-export function addedIn(emoji: DataEmoji): number {
-  return parseFloat(emoji[EmojiProperties.added_in] || '0');
-}
-
-export function emojiName(emoji?: WithName): string {
-  if (!emoji) {
-    return '';
-  }
-
-  const names = emojiNames(emoji);
-  return names[names.length - 1];
-}
-
-export function unifiedWithoutSkinTone(unified: string): string {
-  const splat = unified.split('-');
-  const [skinTone] = splat.splice(1, 1);
-
-  if (skinTonesMapped[skinTone]) {
-    return splat.join('-');
-  }
-
-  return unified;
-}
-
-export function emojiUnified(emoji: DataEmoji, skinTone?: string): string {
-  const unified = emoji[EmojiProperties.unified];
-
-  if (!skinTone || !emojiHasVariations(emoji)) {
-    return unified;
-  }
-
-  return emojiVariationUnified(emoji, skinTone) ?? unified;
-}
-
-export function emojiUrlByUnified(
-  unified: string,
-  emojiStyle: EmojiStyle,
-): string {
-  return `${cdnUrl(emojiStyle)}${unified}.png`;
-}
-
-export function emojiVariations(emoji: DataEmoji): string[] {
-  return emoji[EmojiProperties.variations] ?? [];
-}
-
-export function emojiHasVariations(emoji: DataEmoji): boolean {
-  return emojiVariations(emoji).length > 0;
-}
-
-export function emojiVariationUnified(
-  emoji: DataEmoji,
-  skinTone?: string,
-): string | undefined {
-  return skinTone
-    ? emojiVariations(emoji).find((variation) => variation.includes(skinTone))
-    : emojiUnified(emoji);
-}
-
-export function activeVariationFromUnified(unified: string): SkinTones | null {
-  const [, suspectedSkinTone] = unified.split('-') as [string, SkinTones];
-  return Object.keys(skinTonesMapped).includes(suspectedSkinTone)
-    ? suspectedSkinTone
-    : null;
-}
+// Compatibility surface for the pure emoji helpers. The implementation lives
+// in ./emojiSelectors (one copy in the bundle); this module only re-exports
+// it so the many existing import sites keep working.
+export {
+  activeVariationFromUnified,
+  skinToneFromEmoji,
+  addedIn,
+  emojiHasVariations,
+  emojiName,
+  emojiNames,
+  emojiUnified,
+  emojiCanonicalUnified,
+  emojiUrlByUnified,
+  emojiVariations,
+  emojiVariationUnified,
+  unifiedWithoutSkinTone,
+} from './emojiSelectors';

package/src/dataUtils/nativeEmojiSequenceSupport.ts

@@ -0,0 +1,116 @@
+import { parseNativeEmoji } from './parseNativeEmoji';
+
+const CELL = 32;
+export const NATIVE_PROBE_BATCH = 64;
+type Candidate = [unified: string, text: string, comparison: string];
+
+/** One reusable canvas and result cache per detected document/font. */
+export function createNativeEmojiSequenceSupport(
+  ctx: CanvasRenderingContext2D,
+  baselineWidth: number,
+) {
+  const results = new Map<string, boolean | null>();
+  const font = ctx.font;
+
+  function prime(ids: Iterable<string>): void {
+    const candidates: Candidate[] = [];
+    for (const unified of ids) {
+      if (results.has(unified)) continue;
+      // Also deduplicates identities queued in this synchronous batch.
+      results.set(unified, null);
+      try {
+        const text = parseNativeEmoji(unified);
+        const width = ctx.measureText(text).width;
+        // Uncombined joins, modifiers and flags occupy multiple advances.
+        if (width <= 0 || width >= baselineWidth * 1.5) {
+          results.set(unified, false);
+        } else {
+          candidates.push([
+            unified,
+            text,
+            text.replace(/[\u{e0020}-\u{e007f}]/gu, ''),
+          ]);
+        }
+      } catch {
+        // Invalid identities/restricted rendering stay inconclusive.
+      }
+    }
+    for (
+      let offset = 0;
+      offset < candidates.length;
+      offset += NATIVE_PROBE_BATCH
+    ) {
+      probe(candidates.slice(offset, offset + NATIVE_PROBE_BATCH));
+    }
+  }
+
+  function draw(text: string, y: number, ink: string): void {
+    // Glyph overhang must not contaminate a neighboring cell's pixels.
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(0, y, CELL, CELL);
+    ctx.clip();
+    ctx.fillStyle = ink;
+    ctx.fillText(text, 0, y);
+    ctx.restore();
+  }
+
+  function probe(candidates: Candidate[]): void {
+    try {
+      const height = candidates.length * CELL;
+      ctx.canvas.width = CELL;
+      ctx.canvas.height = height * 2;
+      ctx.font = font;
+      ctx.textBaseline = 'top';
+      candidates.forEach(([, text, comparison], index) => {
+        const y = index * CELL;
+        draw(text, y, '#000');
+        draw(comparison, y + height, text === comparison ? '#f00' : '#000');
+      });
+      // One readback per bounded atlas instead of one per sequence.
+      const pixels = ctx.getImageData(0, 0, CELL, height * 2).data;
+      const artwork = new Uint32Array(
+        pixels.buffer,
+        pixels.byteOffset,
+        pixels.length / 4,
+      );
+      candidates.forEach(([unified, text, comparison], index) => {
+        const start = index * CELL * CELL;
+        let alpha = 0;
+        let difference = 0;
+        for (let pixel = start; pixel < start + CELL * CELL; pixel++) {
+          alpha |= pixels[pixel * 4 + 3];
+          difference |= artwork[pixel] ^ artwork[pixel + CELL * height];
+        }
+        // Ordinary emoji artwork must ignore text ink (including grayscale
+        // artwork). A subdivision flag must differ from its tagless black
+        // flag fallback; unsupported tag sequences silently draw that flag.
+        results.set(
+          unified,
+          alpha !== 0 &&
+            (text === comparison ? difference === 0 : difference !== 0),
+        );
+      });
+    } catch {
+      // A blocked/unavailable readback must not empty the picker.
+      for (const [unified] of candidates) results.set(unified, null);
+    }
+  }
+
+  return {
+    prime,
+    supports(unified: string): boolean | null {
+      // Direct callers get an answer for any identity. Pickers read
+      // snapshots instead, so rendering never draws on the canvas.
+      if (!results.has(unified)) prime([unified]);
+      return results.get(unified) as boolean | null;
+    },
+    /** Whether an identity was probed (results may still be null). */
+    has: (unified: string): boolean => results.has(unified),
+    /** Frozen results so far. Unprobed identities read as undefined. */
+    snapshot(): (unified: string) => boolean | null | undefined {
+      const frozen = new Map(results);
+      return (unified) => frozen.get(unified);
+    },
+  };
+}