emoji-picker-react 4.22.3 → 5.0.1

package/src/state/navigationRegistry.ts

@@ -0,0 +1,209 @@
+// Imperative Root-scoped navigation registry.
+//
+// Cross-region keyboard navigation traverses registered semantic regions
+// rather than hard-coded DOM siblings. This module owns registration
+// bookkeeping plus the navigation generation token: every pending
+// materialize/scroll/focus operation captures the generation and aborts when
+// it changes. One instance lives in the Root services slice, so multiple
+// Roots are isolated by construction.
+//
+// Framework-free on purpose: no React import, fully unit-testable, and the
+// `/data` entry never touches it. Runtime code here stays within the
+// React 16.8 API floor (see npm run check:react-floor).
+
+/** Semantic focus regions. The managed panel and Viewport are structural containers, not regions. */
+export type NavigationRegionKind =
+  | 'search'
+  | 'categories'
+  | 'grid'
+  | 'preview-skin-tone'
+  | 'reactions';
+
+export interface RegisteredRegion {
+  readonly id: number;
+  readonly kind: NavigationRegionKind;
+  readonly element: Element;
+}
+
+export class NavigationRegistry {
+  private nextId = 1;
+  private regions: RegisteredRegion[] = [];
+  private singletons = new Set<string>();
+  private generation = 0;
+  private disposed = false;
+
+  /**
+   * Register a region root. Returns an unregister function for unmount.
+   * Duplicate singleton validation lives in the primitive layer;
+   * the registry keeps every registration so that layer can adjudicate.
+   */
+  register(kind: NavigationRegionKind, element: Element): () => void {
+    const entry: RegisteredRegion = {
+      id: this.nextId,
+      kind,
+      element,
+    };
+    this.nextId += 1;
+    this.regions.push(entry);
+    let removed = false;
+    return () => {
+      if (removed) {
+        return;
+      }
+      removed = true;
+      this.regions = this.regions.filter((region) => region !== entry);
+    };
+  }
+
+  /** Registrations in mount order; traversal follows DOM document order instead. */
+  getRegions(): readonly RegisteredRegion[] {
+    return [...this.regions];
+  }
+
+  getRegionsByKind(kind: NavigationRegionKind): readonly RegisteredRegion[] {
+    return this.regions.filter((region) => region.kind === kind);
+  }
+
+  /**
+   * First registration wins. Later
+   * duplicates are ignored by picker behavior.
+   */
+  getAuthoritativeRegion(
+    kind: NavigationRegionKind,
+  ): RegisteredRegion | undefined {
+    return this.regions.find((region) => region.kind === kind);
+  }
+
+  /** Current navigation generation. Pending async focus work captures this value. */
+  currentGeneration(): number {
+    return this.generation;
+  }
+
+  /**
+   * Invalidate pending materialize/scroll/focus work. Called on accepted
+   * search change, data/category change, geometry change, reactions
+   * transition and Root unmount. Completions holding a stale token MUST NOT
+   * move focus or scroll.
+   */
+  invalidate(): void {
+    this.generation += 1;
+  }
+
+  isCurrent(token: number): boolean {
+    return !this.disposed && token === this.generation;
+  }
+
+  /**
+   * Revive a disposed registry when its Root remounts. The registry object
+   * persists across remounts (held in a ref), but the unmount cleanup
+   * disposes it — without a revive, every generation-guarded focus stays
+   * dead after any remount (StrictMode double-mount included). Bumps the
+   * generation so pre-unmount completions cannot fire post-remount.
+   */
+  revive(): void {
+    this.disposed = false;
+    this.generation += 1;
+  }
+
+  dispose(): void {
+    this.disposed = true;
+    this.regions = [];
+    this.singletons.clear();
+    this.generation += 1;
+  }
+
+  /**
+   * Claim a singleton primitive slot.
+   * Returns true for the first claimant; later claimants are ignored by
+   * picker behavior (dev throws, production warns once via
+   * reportDuplicateRegion).
+   */
+  claimSingleton(kind: string): boolean {
+    if (this.singletons.has(kind)) {
+      return false;
+    }
+    this.singletons.add(kind);
+    return true;
+  }
+
+  releaseSingleton(kind: string): void {
+    this.singletons.delete(kind);
+  }
+}
+
+// Duplicate singleton policy.
+//
+// Duplicate compositions are unsupported in every environment; production
+// merely avoids turning a configuration mistake into a hard crash. Pure
+// function of the environment so tests can cover both branches.
+
+/* global process: readonly */
+
+export type DuplicateRegionPolicy = 'throw' | 'warn-once';
+
+export function duplicateRegionPolicy(): DuplicateRegionPolicy {
+  return process.env.NODE_ENV === 'production' ? 'warn-once' : 'throw';
+}
+
+const warnedDuplicates = new Set<string>();
+
+export function reportDuplicateRegion(kind: string): void {
+  // Test NODE_ENV inline (not through duplicateRegionPolicy) so production
+  // bundles drop this branch and its component-name table.
+  if (process.env.NODE_ENV !== 'production') {
+    throw new Error(
+      `[emoji-picker-react] Duplicate <${regionComponentName(kind)}> region: ` +
+        `only one ${kind} region is supported per Root. ` +
+        `See docs/v5/PRIMITIVES.md composition grammar.`,
+    );
+  }
+  if (!warnedDuplicates.has(kind)) {
+    warnedDuplicates.add(kind);
+    // eslint-disable-next-line no-console
+    console.warn(`[emoji-picker-react] Duplicate ${kind} region ignored.`);
+  }
+}
+
+const warnedPortals = new Set<string>();
+
+export function reportPortalRegion(kind: NavigationRegionKind): void {
+  if (process.env.NODE_ENV === 'production') {
+    return;
+  }
+  if (!warnedPortals.has(kind)) {
+    warnedPortals.add(kind);
+    // eslint-disable-next-line no-console
+    console.warn(
+      `[emoji-picker-react] ${kind} region is mounted outside the Root DOM ` +
+        `element (portal). Portal regions are unsupported and excluded ` +
+        `from arrow-key traversal.`,
+    );
+  }
+}
+
+function regionComponentName(kind: string): string {
+  switch (kind) {
+    case 'search':
+      return 'Search';
+    case 'categories':
+      return 'CategoryNav';
+    case 'grid':
+      return 'List';
+    case 'preview-skin-tone':
+      return 'SkinTone';
+    case 'reactions':
+      return 'Reactions';
+    case 'viewport':
+      return 'Viewport';
+    case 'preview':
+      return 'Preview';
+    default:
+      return kind;
+  }
+}
+
+/** Test-only: reset warn-once sets between cases. */
+export function __resetNavigationWarningsForTest(): void {
+  warnedDuplicates.clear();
+  warnedPortals.clear();
+}

package/src/state/regionTraversal.ts

@@ -0,0 +1,116 @@
+// DOM-document-order region traversal.
+//
+// Generic previous/next-region movement uses DOM document order of the
+// currently active/focusable registered region roots — never registration
+// order, render timing, or insertion order. Consumer nodes that are not
+// registered regions are skipped by the arrow graph but stay in Tab order.
+// Framework-free: no React import.
+
+import {
+  NavigationRegionKind,
+  NavigationRegistry,
+  RegisteredRegion,
+} from './navigationRegistry';
+
+/**
+ * Whether a registered root is currently a valid focus destination.
+ * Hidden, inert, disabled, aria-hidden, or disconnected regions are
+ * filtered out before traversal. In compact reactions mode the managed
+ * panel carries hidden/inert state, so its regions drop out of the active
+ * list while staying registered.
+ */
+export function isRegionFocusable(element: Element): boolean {
+  if (!element.isConnected) {
+    return false;
+  }
+  const htmlElement = element as HTMLElement;
+  if (htmlElement.hidden) {
+    return false;
+  }
+  if (
+    element.hasAttribute('hidden') ||
+    element.hasAttribute('inert') ||
+    (htmlElement as HTMLButtonElement).disabled
+  ) {
+    return false;
+  }
+  if (element.getAttribute('aria-hidden') === 'true') {
+    return false;
+  }
+  if (element.closest('[hidden],[inert]')) {
+    return false;
+  }
+  return true;
+}
+
+/**
+ * Active regions in DOM document order. Portal roots (outside the Root
+ * element) are unsupported and excluded. Only the authoritative (first)
+ * registration per singleton kind participates.
+ */
+export function getActiveRegionsInDomOrder(
+  registry: NavigationRegistry,
+  rootElement: Element | null,
+): RegisteredRegion[] {
+  const seenKinds = new Set<NavigationRegionKind>();
+  const active = registry.getRegions().filter((region) => {
+    if (seenKinds.has(region.kind)) {
+      return false;
+    }
+    seenKinds.add(region.kind);
+    if (rootElement && !rootElement.contains(region.element)) {
+      return false;
+    }
+    return isRegionFocusable(region.element);
+  });
+
+  active.sort((a, b) => {
+    const position = a.element.compareDocumentPosition(b.element);
+
+    if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+      return -1;
+    }
+
+    if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+      return 1;
+    }
+    return 0;
+  });
+
+  return active;
+}
+
+export function findRegion(
+  regions: readonly RegisteredRegion[],
+  kind: NavigationRegionKind,
+): RegisteredRegion | undefined {
+  return regions.find((region) => region.kind === kind);
+}
+
+/** Next focusable region after `from` in DOM order, if any. */
+export function getNextRegion(
+  registry: NavigationRegistry,
+  rootElement: Element | null,
+  from: NavigationRegionKind,
+): RegisteredRegion | undefined {
+  const active = getActiveRegionsInDomOrder(registry, rootElement);
+  const index = active.findIndex((region) => region.kind === from);
+  if (index === -1) {
+    return undefined;
+  }
+  return active[index + 1];
+}
+
+/** Previous focusable region before `from` in DOM order, if any. */
+export function getPrevRegion(
+  registry: NavigationRegistry,
+  rootElement: Element | null,
+  from: NavigationRegionKind,
+): RegisteredRegion | undefined {
+  const active = getActiveRegionsInDomOrder(registry, rootElement);
+  const index = active.findIndex((region) => region.kind === from);
+  if (index <= 0) {
+    return undefined;
+  }
+  return active[index - 1];
+}

package/src/svg.d.ts

@@ -1,4 +1,4 @@
 declare module '*.svg' {
-  const content: any;
-  export default content;
+  const source: string;
+  export default source;
 }

package/src/types/exposedTypes.ts

@@ -7,7 +7,7 @@ export type EmojiClickData = {
   emoji: string;
   names: string[];
   imageUrl: string;
-  getImageUrl: (emojiStyle?: EmojiStyle) => string;
+  getImageUrl: (emojiStyle?: EmojiStyleValue) => string;
   isCustom: boolean;
 };
 
@@ -42,6 +42,8 @@ export enum SuggestionMode {
   FREQUENT = 'frequent',
 }
 
+export type SuggestionModeValue = SuggestionMode | 'recent' | 'frequent';
+
 export enum EmojiStyle {
   NATIVE = 'native',
   APPLE = 'apple',
@@ -50,12 +52,22 @@ export enum EmojiStyle {
   FACEBOOK = 'facebook',
 }
 
+export type EmojiStyleValue =
+  | EmojiStyle
+  | 'native'
+  | 'apple'
+  | 'twitter'
+  | 'google'
+  | 'facebook';
+
 export enum Theme {
   DARK = 'dark',
   LIGHT = 'light',
   AUTO = 'auto',
 }
 
+export type ThemeValue = Theme | 'dark' | 'light' | 'auto';
+
 export enum SkinTones {
   NEUTRAL = 'neutral',
   LIGHT = '1f3fb',
@@ -65,6 +77,16 @@ export enum SkinTones {
   DARK = '1f3ff',
 }
 
+/** A skin tone as the enum or its literal value (`'neutral'`, `'1f3fb'`, …). */
+export type SkinTonesValue =
+  | SkinTones
+  | 'neutral'
+  | '1f3fb'
+  | '1f3fc'
+  | '1f3fd'
+  | '1f3fe'
+  | '1f3ff';
+
 export enum Categories {
   SUGGESTED = 'suggested',
   CUSTOM = 'custom',
@@ -81,4 +103,9 @@ export enum Categories {
 export enum SkinTonePickerLocation {
   SEARCH = 'SEARCH',
   PREVIEW = 'PREVIEW',
+  /**
+   * No built-in placement: render the `SkinTone` primitive wherever you
+   * want it, or drive the tone through `skinTone` / `useSkinTone()`.
+   */
+  NONE = 'NONE',
 }

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,19 +25,32 @@ 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;
 }
 
+// Columns spread across the row like the category grid's own
+// `justify-content: space-between`: first column flush with the inline
+// start, last flush with the inline end, leftover width shared evenly
+// between columns. Packing from the start instead pushed the whole
+// remainder (up to one emoji wide) into a gap at the end. Whole pixels
+// keep image emojis crisp. The logical inset mirrors the grid under
+// `dir="rtl"`, as v4's CSS grid did.
 export function getEmojiPositionStyle(dimensions: Dimensions, index: number) {
-  return dimensions
-    ? {
-        top: Math.floor(index / dimensions.emojisPerRow) * dimensions.emojiSize,
-        left: (index % dimensions.emojisPerRow) * dimensions.emojiSize,
-      }
-    : undefined;
+  if (!dimensions) {
+    return undefined;
+  }
+  const { emojiSize, emojisPerRow, rowWidth } = dimensions;
+  const column = index % emojisPerRow;
+  const remainder = Math.max(0, (rowWidth ?? 0) - emojisPerRow * emojiSize);
+  const gap = emojisPerRow > 1 ? remainder / (emojisPerRow - 1) : 0;
+  return {
+    top: Math.floor(index / emojisPerRow) * emojiSize,
+    insetInlineStart: Math.round(column * (emojiSize + gap)),
+  };
 }
 
 // preload emoji if it is one row below viewport
@@ -41,5 +60,7 @@ export type Dimensions =
       emojiSize: number;
       emojisPerRow: number;
       categoryHeight: number;
+      /** Usable row width the columns are distributed across. */
+      rowWidth?: number;
     }
   | undefined;

package/dist/components/body/Body.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function Body(): JSX.Element;

package/dist/components/main/PickerMain.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-declare type Props = Readonly<{
-    children: React.ReactNode;
-}>;
-export declare const DEFAULT_LABEL_HEIGHT = 40;
-export default function PickerMain({ children }: Props): JSX.Element;
-export {};

package/dist/dataUtils/alphaNumericEmojiIndex.d.ts

@@ -1,5 +0,0 @@
-import { DataEmoji } from './DataTypes';
-export declare const alphaNumericEmojiIndex: BaseIndex;
-declare type BaseIndex = Record<string, Record<string, DataEmoji>>;
-export declare function indexEmoji(emoji: DataEmoji): void;
-export {};