emoji-picker-react 5.0.0 → 5.0.1

package/src/hooks/useKeyboardNavigation.ts

@@ -9,12 +9,12 @@ import {
 import { getActiveElement } from '../DomUtils/getActiveElement';
 import { isRtl } from '../DomUtils/isRtl';
 import {
-  focusAndClickFirstVisibleEmoji,
+  focusFirstEmoji,
   focusFirstVisibleEmoji,
   focusAdjacentEmoji,
 } from '../DomUtils/keyboardNavigation';
 import { useScrollTo } from '../DomUtils/scrollTo';
-import { buttonFromTarget } from '../DomUtils/selectors';
+import { buttonFromTarget, firstVisibleEmoji } from '../DomUtils/selectors';
 import {
   ElementRef,
   useBodyRef,
@@ -27,9 +27,16 @@ import {
 import {
   useNavigationRegistry,
   useSearchComposingState,
+  useSearchDisplayState,
+  useSearchTermState,
   useSkinToneFanOpenState,
 } from '../components/context/PickerContext';
-import { useSearchDisabledConfig } from '../config/useConfig';
+import { usePickerDataContext } from '../components/context/PickerDataContext';
+import {
+  useSearchDisabledConfig,
+  useSuggestedEmojisConfig,
+} from '../config/useConfig';
+import { normalizeQuery } from '../data-core/prepare';
 import {
   NavigationRegionKind,
   RegisteredRegion,
@@ -47,7 +54,11 @@ import {
   useFocusSkinTonePicker,
 } from './useFocus';
 import useIsSearchMode from './useIsSearchMode';
-import { useClearSearchValue, useTypeToSearchKey } from './useSearchController';
+import {
+  useAcceptedSearchValue,
+  useClearSearchValue,
+  useTypeToSearchKey,
+} from './useSearchController';
 import useSetVariationPicker from './useSetVariationPicker';
 
 export function useKeyboardNavigation() {
@@ -76,6 +87,65 @@ export function useKeyboardNavigation() {
   const focusPrevRegionFromGrid = useFocusPrevRegionFrom('grid');
   const setVariationPicker = useSetVariationPicker();
   const registry = useNavigationRegistry();
+  const [searchTerm] = useSearchTermState();
+  const suggestions = JSON.stringify(useSuggestedEmojisConfig());
+  const { emojiData } = usePickerDataContext();
+  const searchValue = useAcceptedSearchValue();
+  // A controlled parent may not have accepted what the input shows yet.
+  const [displayed] = useSearchDisplayState();
+  // Enter pressed while the input is ahead of the debounced results: the
+  // query it was pressed for, selected once those results commit.
+  const pendingPick = useRef<string | null>(null);
+  const pickEmoji = (emoji: HTMLElement | null) => {
+    pendingPick.current = null;
+    focusElement(emoji);
+    emoji?.click();
+  };
+  const selectFirstResult = () => {
+    const query = pendingPick.current;
+    const generation = registry.currentGeneration();
+    if (
+      !focusFirstEmoji(BodyRef.current, {
+        shouldFocus: () =>
+          pendingPick.current === query &&
+          SearchInputRef.current?.value === query &&
+          registry.isCurrent(generation),
+        moveTo: pickEmoji,
+      })
+    )
+      pendingPick.current = null;
+  };
+  // Each committed result set settles a queued Enter for its query.
+  useEffect(() => {
+    const pending = pendingPick.current;
+    pendingPick.current = null;
+    if (
+      pending !== null &&
+      pending === displayed &&
+      normalizeQuery(pending) === searchTerm
+    ) {
+      pendingPick.current = pending;
+      selectFirstResult();
+    }
+    // Per committed result set; selection reads live refs.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchTerm, suggestions, emojiData]);
+  // Enter in search selects the first result, even one scrolled out of view.
+  const selectFromSearch = () => {
+    // Remember fast Enter while the input is ahead of the debounced grid.
+    if (
+      ![searchValue, displayed].every(
+        (value) => normalizeQuery(value) === searchTerm,
+      )
+    ) {
+      pendingPick.current = displayed;
+      return;
+    }
+    if (isSearchMode) {
+      pendingPick.current = displayed;
+      selectFirstResult();
+    } else pickEmoji(firstVisibleEmoji(BodyRef.current));
+  };
   const goDownFromSearchInput = () => {
     if (isSearchMode) return focusFirstVisibleEmoji(BodyRef.current);
     focusCategoryNavigation();
@@ -90,14 +160,21 @@ export function useKeyboardNavigation() {
     disallowMouseMove();
     switch (key) {
       case 'Escape':
-        event.preventDefault();
         if (hasOpenToggles()) {
+          event.preventDefault();
           closeAllOpenToggles();
           // A nested variation/tone menu consumes Escape before the
           // host popover or autocomplete dismisses the whole picker.
           event.stopPropagation();
           return;
         }
+        // Clearing a search consumes the key. With nothing to clear, the
+        // event stays untouched (this runs in window capture, before host
+        // listeners that skip default-prevented keys, such as Radix).
+        if (searchValue || displayed) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
         clearSearch();
         scrollTo(0);
         focusSearchInput();
@@ -129,7 +206,7 @@ export function useKeyboardNavigation() {
         break;
       case 'Enter':
         event.preventDefault();
-        focusAndClickFirstVisibleEmoji(BodyRef.current);
+        selectFromSearch();
         break;
     }
   };
@@ -245,20 +322,15 @@ export function useKeyboardNavigation() {
     }
   };
   const [composing] = useSearchComposingState();
-  const handler = useRef<(event: KeyboardEvent, menusOnly?: boolean) => void>(
+  const handler = useRef<(event: KeyboardEvent, escapeOnly?: boolean) => void>(
     () => {},
   );
   // One listener owns the native lifecycle; current callbacks supply state
   // and live region refs without reattaching on every picker render.
-  handler.current = (event, menusOnly) => {
-    if (
-      composing ||
-      event.isComposing ||
-      event.keyCode === 229 ||
-      (menusOnly && !hasOpenToggles())
-    )
-      return;
-    if (!menusOnly) {
+  handler.current = (event, escapeOnly) => {
+    if (composing || event.isComposing || event.keyCode === 229) return;
+    if (event.key !== 'Enter') pendingPick.current = null;
+    if (!escapeOnly) {
       search(event);
       tone(event);
       categories(event);
@@ -272,16 +344,31 @@ export function useKeyboardNavigation() {
     // Descendant parts are read through live refs by the delegated handler.
     const current = ref.current;
     if (!current) return;
+    // Escape runs once, in the window capture phase, so a consumed key is
+    // stopped before host dismissal listeners (Radix captures on document).
+    let captured: KeyboardEvent | undefined;
     const scoped = (event: KeyboardEvent) => {
+      if (event === captured) return;
       if (eventBelongsToPicker(event, current)) handler.current(event);
     };
     const capture = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' && eventBelongsToPicker(event, current))
+      if (event.key === 'Escape' && eventBelongsToPicker(event, current)) {
+        captured = event;
         handler.current(event, true);
+      }
+    };
+    // Editing the query (paste, autocorrect) or leaving the picker cancels
+    // a queued Enter.
+    const cancelPendingPick = () => {
+      pendingPick.current = null;
     };
+    current.addEventListener('input', cancelPendingPick);
+    current.addEventListener('focusout', cancelPendingPick);
     current.addEventListener('keydown', scoped);
     window.addEventListener('keydown', capture, true);
     return () => {
+      current.removeEventListener('input', cancelPendingPick);
+      current.removeEventListener('focusout', cancelPendingPick);
       current.removeEventListener('keydown', scoped);
       window.removeEventListener('keydown', capture, true);
     };

package/src/primitives/structuralStyles.tsx

@@ -46,6 +46,9 @@ const boxSizingReset =
   // vertical tab rail still adds its own width beside the grid.
   ':where([data-epr-columns] :is([data-epr-part=preview],[data-epr-part=search],[aria-orientation=horizontal])){contain:inline-size}' +
   ':where([data-epr-columns] [data-epr-part=viewport]){scrollbar-gutter:stable}' +
+  // A permanent sizing row keeps intrinsic width when all categories are
+  // hidden (no matches) or the dataset is still loading/has failed.
+  ':where([data-epr-columns] [data-epr-part=list])::before{content:"";display:block;height:0;width:calc(var(--epr-columns)*var(--epr-emoji-fullsize) + 2*var(--epr-horizontal-padding));max-width:100%}' +
   ':where([data-epr-columns] [data-epr-part=category-content]){width:calc(var(--epr-columns)*var(--epr-emoji-fullsize));min-width:calc(100% - 2*var(--epr-horizontal-padding));max-width:calc(100% - 2*var(--epr-horizontal-padding))}';
 
 export const structuralStyles = /* @__PURE__ */ (() =>

package/src/primitives/tokens.ts

@@ -140,6 +140,7 @@ export const darkPickerTokens: Record<string, string> = {
 
 /** Full light preset: geometry plus light colors (v4 defaults). */
 export const defaultPickerTokens: Record<string, string> = {
+  '--epr-font-family': 'sans-serif',
   ...lightPickerTokens,
   ...structuralPickerTokens,
 };

package/src/virtualization/virtualizationHelpers.ts

@@ -1,3 +1,9 @@
+export const OVERSCAN_ROWS = 2;
+
+export function isJustBelowViewport(top: number, bottom: number, size: number) {
+  return top >= bottom && top < bottom + size * OVERSCAN_ROWS;
+}
+
 export function shouldVirtualize({
   scrollTop,
   clientHeight,
@@ -19,8 +25,9 @@ export function shouldVirtualize({
   const emojiBottom = emojiTop + dimensions.emojiSize;
 
   const isVisible =
-    emojiBottom + dimensions.emojiSize * 2 >= scrollTop &&
-    emojiTop <= scrollTop + clientHeight + dimensions.emojiSize;
+    emojiBottom + dimensions.emojiSize * OVERSCAN_ROWS >= scrollTop &&
+    emojiTop <=
+      scrollTop + clientHeight + dimensions.emojiSize * (OVERSCAN_ROWS - 1);
 
   return !isVisible;
 }

package/dist/esm/chunks/chunk-46BUDQLE.mjs

@@ -1,228 +0,0 @@
-import {
-  __esm
-} from "./chunk-LO4TPPLH.mjs";
-
-// src/data/defaultEmojiData.ts
-function registerDefaultEmojiData(data) {
-  registered = data;
-}
-function getRegisteredDefaultEmojiData() {
-  return registered;
-}
-function defaultEmojiDataOrEmpty() {
-  return registered ?? EMPTY_EMOJI_DATA;
-}
-function loadDefaultEmojiData() {
-  if (registered) {
-    return Promise.resolve(registered);
-  }
-  if (!pending) {
-    pending = import("./emojis-6L3GRBAP.mjs").then((module) => {
-      const data = module.default ?? module;
-      registered = registered ?? data;
-      return registered;
-    }).catch((error) => {
-      pending = null;
-      throw error;
-    });
-  }
-  return pending;
-}
-var registered, EMPTY_EMOJI_DATA, pending;
-var init_defaultEmojiData = __esm({
-  "src/data/defaultEmojiData.ts"() {
-    "use strict";
-    registered = null;
-    EMPTY_EMOJI_DATA = Object.freeze({
-      categories: {},
-      emojis: {}
-    });
-    pending = null;
-  }
-});
-
-// src/data-core/prepare.ts
-init_defaultEmojiData();
-
-// src/dataUtils/parseNativeEmoji.ts
-function parseNativeEmoji(unified) {
-  return unified.split("-").map((hex) => String.fromCodePoint(parseInt(hex, 16))).join("");
-}
-
-// src/data-core/prepare.ts
-var coreCache = /* @__PURE__ */ new WeakMap();
-var prepareCount = 0;
-function normalizeUnified(input) {
-  return input.trim().toLowerCase();
-}
-function normalizeQuery(input) {
-  if (!input || typeof input !== "string") {
-    return "";
-  }
-  return input.trim().toLowerCase();
-}
-function toEmojiInfo(unified, names, variations, addedIn) {
-  return Object.freeze({
-    unified,
-    emoji: parseNativeEmoji(unified),
-    name: names[names.length - 1] || "",
-    names: Object.freeze([...names]),
-    variations: Object.freeze([...variations ?? []]),
-    addedIn
-  });
-}
-function readStringArray(raw) {
-  if (!Array.isArray(raw)) {
-    return [];
-  }
-  return raw.filter((n) => typeof n === "string").map(
-    (n) => n.toLowerCase()
-  );
-}
-function appendEntry(byUnified, byCharMutable, records, entry) {
-  const rawUnified = entry.u;
-  if (typeof rawUnified !== "string" || rawUnified.length === 0) {
-    return;
-  }
-  const unified = rawUnified.toLowerCase();
-  if (byUnified.has(unified)) {
-    return;
-  }
-  const names = readStringArray(entry.n);
-  const variations = readStringArray(entry.v);
-  const rawAddedIn = entry.a;
-  const addedIn = typeof rawAddedIn === "string" ? rawAddedIn : String(rawAddedIn ?? "");
-  const info = toEmojiInfo(unified, names, variations, addedIn);
-  records.push(info);
-  byUnified.set(unified, info);
-  for (const variation of info.variations) {
-    if (!byUnified.has(variation)) {
-      byUnified.set(variation, info);
-    }
-  }
-  indexCharBucket(byCharMutable, names, info);
-}
-function indexCharBucket(byCharMutable, names, info) {
-  const distinctChars = Array.from(new Set(names.join("")));
-  for (const char of distinctChars) {
-    const bucket = byCharMutable.get(char);
-    if (bucket) {
-      bucket.push(info);
-    } else {
-      byCharMutable.set(char, [info]);
-    }
-  }
-}
-function getPreparedCore(emojiData) {
-  const source = emojiData ?? defaultEmojiDataOrEmpty();
-  const cached = coreCache.get(source);
-  if (cached) {
-    return cached;
-  }
-  prepareCount += 1;
-  const byUnified = /* @__PURE__ */ new Map();
-  const byCharMutable = /* @__PURE__ */ new Map();
-  const records = [];
-  const groups = source.emojis ?? {};
-  for (const key of Object.keys(groups)) {
-    const list = groups[key] ?? [];
-    for (const entry of list) {
-      appendEntry(byUnified, byCharMutable, records, entry);
-    }
-  }
-  const byChar = /* @__PURE__ */ new Map();
-  byCharMutable.forEach((bucket, char) => {
-    byChar.set(char, Object.freeze(bucket));
-  });
-  const core = {
-    records,
-    byUnified,
-    byChar,
-    queryMemo: /* @__PURE__ */ new Map()
-  };
-  coreCache.set(source, core);
-  return core;
-}
-
-// src/data-core/search.ts
-var EMPTY_RESULTS = Object.freeze([]);
-var MAX_QUERY_MEMO_SIZE = 500;
-function memoizeQuery(core, normalized, results) {
-  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);
-}
-function smallestCandidateBucket(core, normalized) {
-  let smallest = core.records;
-  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;
-}
-function getEmojiByUnified(unified, options) {
-  if (!unified || typeof unified !== "string") {
-    return void 0;
-  }
-  const normalized = normalizeUnified(unified);
-  if (!normalized) {
-    return void 0;
-  }
-  const core = getPreparedCore(options?.emojiData);
-  return core.byUnified.get(normalized);
-}
-function searchEmojis(query, options) {
-  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]);
-  }
-  if (normalized.length === 1) {
-    const bucket = core.byChar.get(normalized) ?? EMPTY_RESULTS;
-    memoizeQuery(core, normalized, bucket);
-    return Object.freeze([...bucket]);
-  }
-  const matches = [];
-  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]);
-}
-
-export {
-  registerDefaultEmojiData,
-  getRegisteredDefaultEmojiData,
-  EMPTY_EMOJI_DATA,
-  defaultEmojiDataOrEmpty,
-  loadDefaultEmojiData,
-  init_defaultEmojiData,
-  parseNativeEmoji,
-  normalizeQuery,
-  getPreparedCore,
-  getEmojiByUnified,
-  searchEmojis
-};

package/dist/esm/chunks/chunk-FQIJ4HBW.mjs

@@ -1,25 +0,0 @@
-import {
-  init_defaultEmojiData,
-  registerDefaultEmojiData
-} from "./chunk-46BUDQLE.mjs";
-import {
-  emojis_default,
-  init_emojis
-} from "./chunk-7ZGTUZFB.mjs";
-import {
-  __commonJS
-} from "./chunk-LO4TPPLH.mjs";
-
-// src/data/registerDefaultEmojiData.ts
-var require_registerDefaultEmojiData = __commonJS({
-  "src/data/registerDefaultEmojiData.ts"() {
-    "use strict";
-    init_defaultEmojiData();
-    init_emojis();
-    registerDefaultEmojiData(emojis_default);
-  }
-});
-
-export {
-  require_registerDefaultEmojiData
-};