emoji-picker-react 5.0.0 → 5.0.2

package/dist/virtualization/virtualizationHelpers.d.ts

@@ -1,3 +1,5 @@
+export declare const OVERSCAN_ROWS = 2;
+export declare function isJustBelowViewport(top: number, bottom: number, size: number): boolean;
 export declare function shouldVirtualize({ scrollTop, clientHeight, topOffset, style, dimensions, }: {
     scrollTop: number;
     clientHeight: number;

package/llms-full.txt

@@ -227,7 +227,7 @@ Per-library snippets (plain CSS, CSS Modules, Tailwind, shadcn/ui, Emotion, styl
 
 Locale datasets translate emoji names and category names. `labels` translates controls and announcements; `previewConfig.defaultCaption` sets the preview caption. Complete localization covers every visible and announced string in your composition: see [INTERNATIONALIZATION.md](../../INTERNATIONALIZATION.md).
 
-Keep the managed ARIA props. Test keyboard selection, search and IME input, focus restoration and nested Escape inside the real host popover or dialog: Escape closes an open variation or tone menu before reaching the host. Custom emojis with duplicate names share an accessible name; scope test queries to a category.
+Keep the managed ARIA props. Test keyboard selection, search and IME input, focus restoration and nested Escape inside the real host popover or dialog: Escape closes an open variation or tone menu, or clears a non-empty search, before reaching the host. Custom emojis with duplicate names share an accessible name; scope test queries to a category.
 
 <!-- source: docs/v5/PROMPTS.md -->
 
@@ -1406,7 +1406,7 @@ The registry item depends on `emoji-picker-react@^5.0.0`. The registry component
 </Popover>
 ```
 
-The host owns insertion and dismissal. The Popover restores trigger focus. Escape first closes an open variation/tone menu, then a subsequent Escape reaches the host. The light/dark Storybook examples import the registry component itself; browser checks exercise search, keyboard insertion, dismissal, focus restoration and WCAG-tagged axe rules.
+The host owns insertion and dismissal. The Popover restores trigger focus. Escape first closes an open variation/tone menu or clears a non-empty search, then a subsequent Escape reaches the host. The light/dark Storybook examples import the registry component itself; browser checks exercise search, keyboard insertion, dismissal, focus restoration and WCAG-tagged axe rules.
 
 ## Working starter sources
 
@@ -1633,10 +1633,11 @@ 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.
 
-Custom emoji IDs use the same case-insensitive rule — `customEmojis` are already lowercased when indexed, so there is no separate exact-match pass.
+Custom emoji IDs use the same case-insensitive rule: IDs are lowercased when indexed. Custom display names retain the supplied capitalization; search still matches them case-insensitively.
 
 Entries may be unified IDs, custom emoji IDs, or the emoji characters themselves (`'🧠'`, `'❤️'`), so recents stored as inserted text can be passed through unchanged; unknown entries are ignored.
 
@@ -1891,6 +1892,8 @@ Styling is opt-in in both directions:
 
 `columns` sets the emojis per row on EmojiPicker and Root. The picker's width then fits those columns plus a stable scrollbar gutter, unless the consumer sets a width (`width`, `style` or any class). A container narrower than the columns renders fewer columns instead of clipping. Without `columns`, the width decides the column count, as in v4.
 
+The intrinsic grid width remains present during an empty search, data loading or a load error.
+
 ## 12. Data API
 
 The data entry point is defined in [DATA_API.md](./DATA_API.md):
@@ -2362,11 +2365,13 @@ The following variables are already documented public customization surface and
 - `--epr-preview-text-color`
 
 ### Native emoji font
+- `--epr-font-family` — font for picker text (`sans-serif` by default). Set it to `inherit` on the picker to use the surrounding application's font. Native emoji glyphs keep their separate font stack.
 - `--epr-emoji-font-family` (v5) — font stack for native emojis, e.g. a country-flag polyfill font; native support detection measures this same font.
 
 ### 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`
@@ -3025,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.0",
+  "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/DomUtils/classNames.ts

@@ -21,7 +21,3 @@ export enum ClassNames {
   darkTheme = 'epr-dark-theme',
   autoTheme = 'epr-auto-theme',
 }
-
-export function asSelectors(...classNames: ClassNames[]): string {
-  return classNames.map((c) => `.${c}`).join('');
-}

package/src/DomUtils/elementPositionInRow.ts

@@ -1,6 +1,6 @@
 import { DEFAULT_LABEL_HEIGHT } from '../components/main/labelHeight';
 
-import { ClassNames, asSelectors } from './classNames';
+import { ClassNames } from './classNames';
 import { NullableElement } from './selectors';
 
 export function elementCountInRow(
@@ -74,7 +74,7 @@ export function getLabelHeight(parentNode: NullableElement) {
     return DEFAULT_LABEL_HEIGHT;
   }
 
-  const label = parentNode.querySelector(asSelectors(ClassNames.label));
+  const label = parentNode.querySelector(`.${ClassNames.label}`);
 
   if (label) {
     const height = label.getBoundingClientRect().height;

package/src/DomUtils/keyboardNavigation.ts

@@ -38,12 +38,45 @@ function categoryGeometry(category: HTMLElement) {
   return { content, count, columns };
 }
 
+export type MoveOptions = {
+  shouldFocus?: () => boolean;
+  /** Called when an upward move leaves the grid. */
+  exitUp?: () => void;
+  /** Receives the destination cell; focuses it by default. */
+  moveTo?: (emoji: HTMLElement) => void;
+  /** Source cell while a virtualized destination is being materialized. */
+  origin?: HTMLElement;
+};
+
+/** Move to the first filtered result, including a cell outside the viewport. */
+export function focusFirstEmoji(
+  body: NullableElement,
+  options: MoveOptions,
+): boolean {
+  const category = body?.querySelector<HTMLElement>(
+    '[data-epr-part="category-content"]:not([data-epr-emoji-count="0"])',
+  )?.parentElement;
+  if (category) focusLogicalEmoji(category, 0, options);
+  return !!category;
+}
+
+const pendingMoves = new WeakMap<
+  HTMLElement,
+  {
+    category: HTMLElement;
+    index: number;
+    origin?: HTMLElement;
+    valid: () => boolean;
+  }
+>();
+
 export function focusAdjacentEmoji(
   element: NullableElement,
   direction: number,
   row: boolean,
-  { shouldFocus, exitUp }: { shouldFocus?: () => boolean; exitUp?: () => void },
+  options: MoveOptions,
 ) {
+  const { shouldFocus, exitUp } = options;
   if (!element || (shouldFocus && !shouldFocus())) return;
   const category = closestCategory(element);
   if (!category || element.dataset.eprIndex === undefined) {
@@ -55,15 +88,34 @@ export function focusAdjacentEmoji(
     );
     return;
   }
-  const destination = logicalDestination(category, element, direction, row);
+  const cursor = gridCursor(category, element);
+  const destination = logicalDestination(
+    cursor.category,
+    cursor.index,
+    direction,
+    row,
+  );
   if (destination)
-    focusLogicalEmoji(destination.category, destination.index, shouldFocus);
+    focusLogicalEmoji(destination.category, destination.index, {
+      ...options,
+      origin: element,
+    });
   else if (direction < 0) exitUp?.();
 }
 
+// A key pressed before the previous move mounted its destination continues
+// from that destination, not from the still-focused source cell.
+function gridCursor(category: HTMLElement, element: HTMLElement) {
+  const body = closestScrollBody(category);
+  const pending = body && pendingMoves.get(body);
+  return pending?.origin === element && pending.valid()
+    ? pending
+    : { category, index: Number(element.dataset.eprIndex) };
+}
+
 function logicalDestination(
   category: HTMLElement,
-  element: HTMLElement,
+  currentIndex: number,
   direction: number,
   row: boolean,
 ) {
@@ -71,7 +123,6 @@ function logicalDestination(
   const columns = geometry.columns;
   let count = geometry.count;
   if (count <= 0) return null;
-  const currentIndex = Number(element.dataset.eprIndex);
   const column = row ? currentIndex % columns : 0;
   let index = row
     ? (Math.floor(currentIndex / columns) + direction) * columns
@@ -105,23 +156,30 @@ function adjacentDestination(
 function focusLogicalEmoji(
   category: HTMLElement,
   index: number,
-  shouldFocus?: () => boolean,
+  { shouldFocus, moveTo = (emoji) => emoji.focus(), origin }: MoveOptions,
 ) {
   const { content, columns, count } = categoryGeometry(category);
   const body = closestScrollBody(category);
   if (!body || !content || !columns) return;
   const size = content.clientHeight / Math.ceil(count / columns);
   let frames = 60;
-  const valid = () =>
-    (!shouldFocus || shouldFocus()) && body.contains(category);
+  const pending = { category, index, origin, valid: () => valid() };
+  pendingMoves.set(body, pending);
+  const valid = (): boolean =>
+    pendingMoves.get(body) === pending &&
+    (!shouldFocus || shouldFocus()) &&
+    body.contains(category);
   const attempt = () => {
     if (!valid()) return;
     const emoji = category.querySelector<HTMLElement>(
       `${VisibleEmojiSelector}[data-epr-index="${index}"]`,
     );
     if (emoji) {
-      emoji.focus();
+      moveTo(emoji);
       scrollEmojiAboveLabel(emoji, valid);
+      // Keep the scroll guard valid until a later navigation replaces it,
+      // but only unfinished moves supply a logical cursor to another key.
+      pending.origin = undefined;
       return;
     }
     if (!size || --frames <= 0) return;
@@ -133,5 +191,11 @@ function focusLogicalEmoji(
         categoryLabelHeight(category);
     requestAnimationFrame(attempt);
   };
-  requestAnimationFrame(attempt);
+  // Mounted cells can move immediately, so a second key in this frame
+  // reads the new position. Only unmounted destinations need a frame.
+  if (
+    category.querySelector(`${VisibleEmojiSelector}[data-epr-index="${index}"]`)
+  )
+    attempt();
+  else requestAnimationFrame(attempt);
 }

package/src/DomUtils/scrollTo.ts

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 
 import { useBodyRef } from '../components/context/ElementRefContext';
 
-import { asSelectors, ClassNames } from './classNames';
+import { ClassNames } from './classNames';
 import {
   categoryLabelHeight,
   closestCategory,
@@ -53,7 +53,7 @@ export function scrollEmojiAboveLabel(
     return;
   }
 
-  if (emoji.closest(asSelectors(ClassNames.variationPicker))) {
+  if (emoji.closest(`.${ClassNames.variationPicker}`)) {
     return;
   }
 

package/src/DomUtils/selectors.ts

@@ -1,16 +1,12 @@
 import { unifiedWithoutSkinTone } from '../dataUtils/emojiSelectors';
 
-import { asSelectors, ClassNames } from './classNames';
+import { ClassNames } from './classNames';
 import { firstVisibleElementInContainer } from './elementPositionInRow';
 
 export type NullableElement = HTMLElement | null;
 
-export const EmojiButtonSelector = `button${asSelectors(ClassNames.emoji)}`;
-export const VisibleEmojiSelector = [
-  EmojiButtonSelector,
-  asSelectors(ClassNames.visible),
-  `:not(${asSelectors(ClassNames.hidden)})`,
-].join('');
+export const EmojiButtonSelector = `button.${ClassNames.emoji}`;
+export const VisibleEmojiSelector = `${EmojiButtonSelector}.${ClassNames.visible}:not(.${ClassNames.hidden})`;
 
 export function buttonFromTarget(
   emojiElement: NullableElement,
@@ -35,7 +31,7 @@ export function isEmojiElement(element: NullableElement): boolean {
 export function categoryLabelFromCategory(
   category: NullableElement,
 ): NullableElement {
-  return category?.querySelector(asSelectors(ClassNames.label)) ?? null;
+  return category?.querySelector(`.${ClassNames.label}`) ?? null;
 }
 
 export function closestCategoryLabel(
@@ -74,7 +70,7 @@ export function categoryLabelHeight(category: NullableElement): number {
   }
 
   const categoryWithoutLabel = category.querySelector(
-    asSelectors(ClassNames.categoryContent),
+    `.${ClassNames.categoryContent}`,
   );
 
   return (
@@ -96,9 +92,9 @@ export function isEmojiBehindLabel(emoji: NullableElement): boolean {
 export function queryScrollBody(root: NullableElement): NullableElement {
   if (!root) return null;
 
-  return root.matches(asSelectors(ClassNames.scrollBody))
+  return root.matches(`.${ClassNames.scrollBody}`)
     ? root
-    : root.querySelector(asSelectors(ClassNames.scrollBody));
+    : root.querySelector(`.${ClassNames.scrollBody}`);
 }
 
 export function emojiDistanceFromScrollTop(emoji: NullableElement): number {
@@ -114,7 +110,7 @@ export function closestScrollBody(element: NullableElement): NullableElement {
     return null;
   }
 
-  return element.closest(asSelectors(ClassNames.scrollBody)) ?? null;
+  return element.closest(`.${ClassNames.scrollBody}`) ?? null;
 }
 
 export function emojiTruOffsetLeft(element: NullableElement): number {
@@ -221,14 +217,12 @@ export function closestCategory(element: NullableElement) {
   if (!element) {
     return null;
   }
-  return element.closest(asSelectors(ClassNames.category)) as HTMLElement;
+  return element.closest(`.${ClassNames.category}`) as HTMLElement;
 }
 
 export function closestCategoryContent(element: NullableElement) {
   if (!element) {
     return null;
   }
-  return element.closest(
-    asSelectors(ClassNames.categoryContent),
-  ) as HTMLElement;
+  return element.closest(`.${ClassNames.categoryContent}`) as HTMLElement;
 }

package/src/components/body/EmojiCategory.tsx

@@ -55,7 +55,7 @@ export function EmojiCategory({
     >
       {CategoryHeader ? (
         <CategoryHeader
-          className={cx(styles.label)}
+          className={cx(styles.label, appearance && styles.labelAppearance)}
           aria-hidden
           data-epr-part="category-label"
           category={{ id: categoryId, name: categoryName }}

package/src/components/body/EmojiList.tsx

@@ -15,8 +15,12 @@ import { useEmojiVirtualization } from '../../hooks/useEmojiVirtualization';
 import { useRegisterRegion } from '../../hooks/useRegisterRegion';
 import { useMergedRefs } from '../../primitives/nativeProps';
 import { CategoryConfig } from '../../types/exposedTypes';
-import { useEmojiListRef } from '../context/ElementRefContext';
-import { useVisibleCategoriesState } from '../context/PickerContext';
+import { OVERSCAN_ROWS } from '../../virtualization/virtualizationHelpers';
+import { useBodyRef, useEmojiListRef } from '../context/ElementRefContext';
+import {
+  useEmojiSizeState,
+  useVisibleCategoriesState,
+} from '../context/PickerContext';
 import { useGetEmojisByCategory } from '../context/PickerDataContext';
 
 import { EmojiCategory } from './EmojiCategory';
@@ -41,6 +45,22 @@ export function EmojiList({
     [key: string]: number;
   }>({});
   const EmojiListRef = useEmojiListRef();
+  const BodyRef = useBodyRef();
+  const [emojiSize] = useEmojiSizeState();
+  const [visibleCategories] = useVisibleCategoriesState();
+  const onHeightReady = React.useCallback(
+    (categoryId: string, height: number) => {
+      setCategoryHeights((previous) =>
+        previous[categoryId] === height
+          ? previous
+          : {
+              ...previous,
+              [categoryId]: height,
+            },
+      );
+    },
+    [],
+  );
   const mergedRef = useMergedRefs(EmojiListRef, outerRef);
   const getEmojisByCategory = useGetEmojisByCategory();
   useRegisterRegion('grid', EmojiListRef);
@@ -87,17 +107,28 @@ export function EmojiList({
             categoryEmojis={getEmojisByCategory(category, group)}
             categoryConfig={categoryConfig}
             topOffset={currentOffset}
-            isFirstCategory={index === 0}
+            isCategoryVisible={
+              index === 0 || visibleCategories.includes(categoryId)
+            }
             positioned={isPositioned}
-            onHeightReady={(height) => {
-              if (categoryHeights[categoryId] !== height) {
-                setCategoryHeights((prev) => ({
-                  ...prev,
-                  [categoryId]: height,
-                }));
-              }
-            }}
-            scrollTop={scrollTop}
+            onHeightReady={onHeightReady}
+            // Outside a section's rendering/preload margin, scrolling
+            // cannot change its cells. Keep its prop stable so it can bail.
+            scrollTop={
+              categoryHeight === undefined
+                ? scrollTop
+                : Math.max(
+                    currentOffset -
+                      (BodyRef.current?.clientHeight ?? 0) -
+                      (emojiSize || 40) * (OVERSCAN_ROWS + 1),
+                    Math.min(
+                      scrollTop,
+                      currentOffset +
+                        categoryHeight +
+                        (emojiSize || 40) * (OVERSCAN_ROWS + 1),
+                    ),
+                  )
+            }
           />
         );
       })}
@@ -105,24 +136,28 @@ export function EmojiList({
   );
 }
 
-function RenderCategory({
+const RenderCategory = /* @__PURE__ */ React.memo(function RenderCategory({
   categoryEmojis,
   categoryConfig,
   topOffset,
   onHeightReady,
   scrollTop,
-  isFirstCategory,
+  isCategoryVisible,
   positioned,
 }: {
   categoryEmojis: DataEmojis;
   categoryConfig: CategoryConfig;
   topOffset: number;
-  onHeightReady: (height: number) => void;
+  onHeightReady: (categoryId: string, height: number) => void;
   scrollTop: number;
-  isFirstCategory: boolean;
+  isCategoryVisible: boolean;
   positioned: boolean;
 }) {
-  const [visibleCategories] = useVisibleCategoriesState();
+  const categoryId = categoryIdFromCategoryConfig(categoryConfig);
+  const reportHeight = React.useCallback(
+    (height: number) => onHeightReady(categoryId, height),
+    [categoryId, onHeightReady],
+  );
 
   // The observer is the only writer of visibleCategories. When it never
   // fires (zero-height container at mount, hidden modal), no category
@@ -130,15 +165,11 @@ function RenderCategory({
   // the deadlock; the observer takes over from there.
   // https://github.com/ealush/emoji-picker-react/issues/469
   // https://github.com/ealush/emoji-picker-react/issues/475
-  const isCategoryVisible =
-    isFirstCategory ||
-    visibleCategories.includes(categoryIdFromCategoryConfig(categoryConfig));
-
   const { virtualizedCounter, emojis, dimensions, emojiCount } =
     useEmojiVirtualization({
       categoryEmojis,
       topOffset,
-      onHeightReady,
+      onHeightReady: reportHeight,
       scrollTop,
       isCategoryVisible,
       positioned,
@@ -157,7 +188,7 @@ function RenderCategory({
       {emojis}
     </EmojiCategory>
   );
-}
+});
 
 const styles = /* @__PURE__ */ (() =>
   stylesheet.create({

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;
     },
@@ -109,7 +110,11 @@ export function PickerDataProvider({
         }
       }
       for (const custom of allCustomEmojis) {
-        if (emojiNames(custom).some((name) => name.includes(normalized))) {
+        if (
+          emojiNames(custom).some((name) =>
+            name.toLowerCase().includes(normalized),
+          )
+        ) {
           dict[custom[Keys.unified]] = custom;
         }
       }

package/src/components/header/Search/Search.tsx

@@ -96,10 +96,12 @@ const styles = /* @__PURE__ */ (() =>
       border: '1px solid var(--epr-search-border-color)',
       ':focus': {
         backgroundColor: 'var(--epr-search-input-bg-color-active)',
-        border: '1px solid var(--epr-search-border-color-active)',
+        border:
+          '1px solid var(--epr-search-border-color-active, var(--epr-highlight-color, Highlight))',
       },
       '::placeholder': {
-        color: 'var(--epr-search-input-placeholder-color)',
+        color:
+          'var(--epr-search-input-placeholder-color, var(--epr-text-color, GrayText))',
       },
     },
   }))();

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/components/main/defaultAppearance.tsx

@@ -157,10 +157,11 @@ const styles = /* @__PURE__ */ (() =>
       backgroundColor: 'var(--epr-bg-color)',
       overflow: 'hidden',
       transition: 'height 0.3s ease-in-out, background-color 0.1s ease-in-out',
+      fontFamily: 'var(--epr-font-family, inherit)',
       '*': {
         boxSizing: 'border-box',
         // Overridable without a specificity fight (v4 hard-coded sans-serif).
-        fontFamily: 'var(--epr-font-family, sans-serif)',
+        fontFamily: 'inherit',
       },
     },
     baseVariables: {

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/skinToneVariations.ts

@@ -9,13 +9,14 @@ const skinToneVariations = [
   SkinTones.DARK,
 ];
 
-export const skinTonesNamed = Object.entries(SkinTones).reduce(
-  (acc, [key, value]) => {
-    acc[value] = key;
-    return acc;
-  },
-  {} as Record<string, string>,
-);
+export const skinTonesNamed = /* @__PURE__ */ (() =>
+  Object.entries(SkinTones).reduce(
+    (acc, [key, value]) => {
+      acc[value] = key;
+      return acc;
+    },
+    {} as Record<string, string>,
+  ))();
 
 export const skinTonesMapped: Record<string, string> =
   skinToneVariations.reduce(