emoji-picker-react 5.0.1 → 5.0.2

package/llms-full.txt

@@ -1633,6 +1633,7 @@ Existing `reactionsDefaultOpen`, `allowExpandReactions`, `reactions`, `onReactio
 
 For standard emoji IDs:
 - matching is case-insensitive;
+- matching ignores where U+FE0F appears: `'2764'` and `'2764-fe0f'` both resolve to the dataset's own spelling, the same rule `reactions` and `hiddenEmojis` use;
 - a valid variation remains that exact variation for rendering rather than collapsing to the neutral base emoji;
 - duplicates are removed by canonical normalized ID, first occurrence wins.
 
@@ -2370,6 +2371,7 @@ The following variables are already documented public customization surface and
 ### Skin tone
 - `--epr-skin-tone-picker-menu-color`
 - `--epr-skin-tone-size`
+- `--epr-skin-tone-neutral-color`, `--epr-skin-tone-light-color`, `--epr-skin-tone-medium-light-color`, `--epr-skin-tone-medium-color`, `--epr-skin-tone-medium-dark-color`, `--epr-skin-tone-dark-color` — the tone swatch colors (defaults `#ffd225`, `#ffdfbd`, `#e9c197`, `#c88e62`, `#a86637`, `#60463a`).
 
 ### Dark mode
 - `--epr-dark-bg-color`
@@ -3028,6 +3030,7 @@ No other data helpers are part of v5.
 - trims surrounding whitespace;
 - normalizes hexadecimal unified code to lowercase;
 - accepts base or variation unified code;
+- accepts either U+FE0F spelling (`2764` or `2764-fe0f`); an exact match wins;
 - variation lookup returns the canonical/base EmojiInfo whose `variations` includes the requested variation;
 - returns `undefined` for unknown/empty input;
 - does not mutate the dataset;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.0.1",
+  "version": "5.0.2",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -183,7 +183,7 @@
     },
     {
       "path": "dist/esm/index.mjs",
-      "limit": "75 KB"
+      "limit": "76 KB"
     },
     {
       "path": "dist/esm/primitives/index.mjs",

package/src/components/context/PickerDataContext.tsx

@@ -5,7 +5,7 @@ import {
   useSuggestedEmojisModeConfig,
 } from '../../config/useConfig';
 import { getPickerDataSnapshot } from '../../data-core/pickerData';
-import { normalizeQuery } from '../../data-core/prepare';
+import { normalizeQuery, withoutFe0f } from '../../data-core/prepare';
 import { searchEmojis } from '../../data-core/search';
 import {
   DataEmoji,
@@ -79,6 +79,7 @@ export function PickerDataProvider({
 
       const result =
         data.allEmojisByUnified[unified] ??
+        data.allEmojisByUnified[withoutFe0f(unified)] ??
         data.allEmojisByUnified[unifiedWithoutSkinTone(unified)];
       return result;
     },

package/src/components/header/SkinTonePicker/BtnSkinToneVariation.tsx

@@ -108,23 +108,24 @@ const styles = /* @__PURE__ */ (() =>
       ':focus': {
         boxShadow: '0 0 0 3px var(--epr-focus-bg-color)',
       },
+      // Swatch colors are themeable; the fallbacks are the defaults.
       '&.epr-tone-neutral': {
-        backgroundColor: '#ffd225',
+        backgroundColor: 'var(--epr-skin-tone-neutral-color, #ffd225)',
       },
       '&.epr-tone-1f3fb': {
-        backgroundColor: '#ffdfbd',
+        backgroundColor: 'var(--epr-skin-tone-light-color, #ffdfbd)',
       },
       '&.epr-tone-1f3fc': {
-        backgroundColor: '#e9c197',
+        backgroundColor: 'var(--epr-skin-tone-medium-light-color, #e9c197)',
       },
       '&.epr-tone-1f3fd': {
-        backgroundColor: '#c88e62',
+        backgroundColor: 'var(--epr-skin-tone-medium-color, #c88e62)',
       },
       '&.epr-tone-1f3fe': {
-        backgroundColor: '#a86637',
+        backgroundColor: 'var(--epr-skin-tone-medium-dark-color, #a86637)',
       },
       '&.epr-tone-1f3ff': {
-        backgroundColor: '#60463a',
+        backgroundColor: 'var(--epr-skin-tone-dark-color, #60463a)',
       },
     },
   }))();

package/src/config/config.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { DEFAULT_REACTIONS } from '../components/Reactions/DEFAULT_REACTIONS';
 import { GetEmojiUrl } from '../components/emoji/BaseEmojiProps';
+import { withoutFe0f } from '../data-core/prepare';
 import { emojiUrlByUnified } from '../dataUtils/emojiUtils';
 import type { EmojiDataInput } from '../hooks/useResolvedEmojiData';
 import {
@@ -27,7 +28,8 @@ import {
 } from './categoryConfig';
 import { CustomEmoji } from './customEmojiConfig';
 
-const KNOWN_FAILING_EMOJIS = ['2640-fe0f', '2642-fe0f', '2695-fe0f'];
+// Stored without U+FE0F, like every hiddenEmojis entry.
+const KNOWN_FAILING_EMOJIS = ['2640', '2642', '2695'];
 
 export const DEFAULT_SEARCH_PLACEHOLDER = 'Search';
 export const DEFAULT_PICKER_WIDTH = 350;
@@ -171,9 +173,10 @@ export function mergeConfig(
 
   // Dataset ids are lowercase; accept the uppercase spelling consumers
   // copy from docs and tools (and stray whitespace), like `reactions` and
-  // `suggestedEmojis` already do.
+  // `suggestedEmojis` already do. Kept without U+FE0F, so either spelling
+  // of an ID hides the emoji (see useIsEmojiDisallowed).
   config.hiddenEmojis.forEach((emoji) => {
-    const id = String(emoji).trim().toLowerCase();
+    const id = withoutFe0f(String(emoji).trim().toLowerCase());
     if (id) config.unicodeToHide.add(id);
   });
 

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;
@@ -134,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 '';
@@ -102,10 +111,9 @@ function appendEntry(
   });
   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);
 }

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/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

@@ -7,24 +7,30 @@ 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/useDisallowedEmojis.ts

@@ -5,6 +5,7 @@ import {
   useNativeEmojiSupport,
 } from '../components/context/PickerContext';
 import { useEmojiVersionConfig, useUnicodeToHide } from '../config/useConfig';
+import { withoutFe0f } from '../data-core/prepare';
 import { DataEmoji } from '../dataUtils/DataTypes';
 import {
   addedIn,
@@ -27,7 +28,11 @@ export function useIsEmojiDisallowed() {
       emoji: DataEmoji,
       renderedUnified = emojiUnified(emoji, activeSkinTone),
     ) {
-      if (unicodeToHide.has(unifiedWithoutSkinTone(emojiUnified(emoji))))
+      if (
+        unicodeToHide.has(
+          withoutFe0f(unifiedWithoutSkinTone(emojiUnified(emoji))),
+        )
+      )
         return true;
       if (isCustomEmoji(emoji)) return false;
       const version = addedIn(emoji);

package/src/hooks/useEmojiVirtualization.tsx

@@ -169,8 +169,18 @@ export function useEmojiVirtualization({
   useEffect(() => requestNativeProbe(probe));
   // Image requests belong to committed work, never an abandoned render.
   // The proximity and cache checks run synchronously, without per-cell timers.
+  // Only the image a nearby cell will render is fetched: every skin tone of
+  // every nearby cell is hundreds of requests per scroll and long frames on
+  // slow devices. Focusing a cell (useOnFocus) fetches its variations.
   useEffect(() => {
-    preloads.forEach((emoji) => preloadEmoji(getEmojiUrl, emoji, emojiStyle));
+    preloads.forEach((emoji) =>
+      preloadEmoji(
+        getEmojiUrl,
+        emoji,
+        emojiStyle,
+        emojiUnified(emoji, activeSkinTone),
+      ),
+    );
   });
 
   return {