emoji-picker-react 4.22.3 → 5.0.1

package/dist/primitives/nativeProps.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+/** Keys never forwarded to the DOM (in addition to `data-epr-*`). */
+export declare function filterPrimitiveProps(props: object, reserved: readonly string[]): Record<string, unknown>;
+/**
+ * Handler composition: the library behavioral handler
+ * runs first, the consumer handler second with the same event. Consumer
+ * `preventDefault()` is not a supported way to disable required behavior.
+ * Event-handler exceptions propagate per normal React/browser behavior;
+ * primitives never catch them and no ErrorBoundary is installed.
+ */
+export declare function composeHandlers<E>(libraryHandler: ((event: E) => void) | undefined, consumerHandler: ((event: E) => void) | undefined): ((event: E) => void) | undefined;
+/** Merge any number of refs (context ref + forwarded ref) onto one node. */
+export declare function mergeRefs<T>(...refs: Array<React.Ref<T> | undefined>): React.RefCallback<T>;
+/** Keep callback refs attached while the refs themselves are unchanged. */
+export declare function useMergedRefs<T>(first: React.Ref<T> | undefined, second: React.Ref<T> | undefined): React.RefCallback<T>;

package/dist/primitives/scope.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export declare function RootScopeProvider({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare function useRootScope(primitive: string): boolean;
+export declare const ViewportScrollContext: React.Context<number>;
+export declare function useViewportScrollTop(): number;
+export declare function ViewportScopeProvider({ children, }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare function useViewportScope(primitive: string): boolean;
+/** Test-only: reset warn-once sets between cases. */
+export declare function __resetPrimitiveWarningsForTest(): void;

package/dist/primitives/structuralStyles.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export declare const structuralStyles: {
+    root: Set<string>;
+    themeLight: Set<string>;
+    themeDark: Set<string>;
+    themeAuto: Set<string>;
+    panel: Set<string>;
+    collapsed: Set<string>;
+    collapsedAppearance: Set<string>;
+} & {
+    [x: string]: Set<string>;
+};
+export declare const StructuralStyleTag: React.NamedExoticComponent<{
+    nonce?: string;
+    cssLayer?: string;
+}>;

package/dist/primitives/tokens.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Geometry tokens: sizes, spacing and stacking that measurement,
+ * virtualization and layout depend on. Every Root applies these
+ * (structural stylesheet), so a bare composition is functional without
+ * any appearance tokens. Consumers may override them; measurement reads
+ * the resulting DOM.
+ */
+export declare const structuralPickerTokens: Record<string, string>;
+/** Light color tokens (the v4 default palette). */
+export declare const lightPickerTokens: Record<string, string>;
+/**
+ * Dark color overrides layered on top of the light tokens. Direct values:
+ * the default picker keeps its private `--epr-dark-*` indirection for v4
+ * compatibility, primitives do not need it.
+ */
+export declare const darkPickerTokens: Record<string, string>;
+/** Full light preset: geometry plus light colors (v4 defaults). */
+export declare const defaultPickerTokens: Record<string, string>;

package/dist/primitives/types.d.ts

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import type { ListComponents } from '../components/body/listComponents';
+import type { PickerConfig } from '../config/config';
+import type { ThemeValue } from '../types/exposedTypes';
+import type { PickerComponents } from './components';
+/**
+ * Appearance props owned by the default <EmojiPicker /> wrapper, plus the
+ * two that Root already accepts as native `aside` attributes. This list is
+ * short and stable; the behavior set is long and grows.
+ */
+export type PickerAppearanceProps = 'theme' | 'colorScheme' | 'width' | 'height' | 'className' | 'style' | 'unstyled';
+/** Presence and placement belong to the caller's JSX, not Root switches. */
+export type PickerCompositionProps = 'open' | 'searchDisabled' | 'skinTonesDisabled' | 'skinTonePickerLocation';
+export type RootBehaviorProps = Omit<PickerConfig, PickerAppearanceProps | PickerCompositionProps | 'previewConfig'> & {
+    previewConfig?: Omit<NonNullable<PickerConfig['previewConfig']>, 'showPreview'>;
+};
+export type RootProps = Omit<React.HTMLAttributes<HTMLElement>, keyof RootBehaviorProps | 'children' | 'role' | 'dangerouslySetInnerHTML'> & RootBehaviorProps & {
+    children: React.ReactNode;
+    /** Built-in leaf appearance. Bare compositions default to 'none'. */
+    appearance?: 'none' | 'default';
+    /** Shared replacements for grid, variation, reaction and navigation controls. */
+    components?: PickerComponents;
+    /**
+     * Opt-in color scheme: applies the default light/dark color tokens as
+     * CSS variables on Root (no border, background or typography).
+     * Omit it to style a fully unbranded picker yourself. (Not `theme`:
+     * CSS-in-JS libraries reserve that prop on components they wrap.)
+     */
+    colorScheme?: ThemeValue;
+};
+/**
+ * Children are trailing controls, e.g. <SkinTone />; nothing is inserted
+ * automatically.
+ */
+export type SearchProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'role' | 'dangerouslySetInnerHTML'> & {
+    /** Native attributes for the managed input; Root owns its value. */
+    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue' | 'onChange' | 'autoFocus' | 'placeholder' | 'aria-controls' | 'role' | 'children' | 'dangerouslySetInnerHTML'>;
+    inputRef?: React.Ref<HTMLInputElement>;
+};
+export type SearchInputElement = 'input' | React.ComponentType<any>;
+type ManagedInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue' | 'role' | 'aria-controls' | 'children' | 'dangerouslySetInnerHTML'>;
+type ReservedInputProps = 'type' | 'value' | 'defaultValue' | 'role' | 'aria-controls' | 'children' | 'dangerouslySetInnerHTML' | 'as';
+type InputBehaviorHandlers = 'onChange' | 'onFocus' | 'onCompositionStart' | 'onCompositionEnd';
+/** Native input props plus the selected design-system input's own props. */
+export type SearchInputProps<T extends SearchInputElement = 'input'> = Omit<ManagedInputProps, keyof React.ComponentPropsWithoutRef<T>> & Pick<ManagedInputProps, InputBehaviorHandlers> & Omit<React.ComponentPropsWithoutRef<T>, ReservedInputProps | InputBehaviorHandlers> & {
+    /** Must forward its ref and supplied props to an actual input element. */
+    as?: T;
+};
+export type SearchInputComponent = <T extends SearchInputElement = 'input'>(props: SearchInputProps<T> & React.RefAttributes<HTMLInputElement>) => React.ReactElement | null;
+export type CategoryNavProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'role' | 'children' | 'dangerouslySetInnerHTML'> & {
+    /**
+     * Tab axis. `vertical` stacks the tabs (e.g. a side rail) and switches
+     * keyboard navigation to Up/Down between tabs and Left/Right to leave,
+     * announced through aria-orientation. Default: 'horizontal'.
+     */
+    orientation?: 'horizontal' | 'vertical';
+};
+export type PreviewProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'role' | 'dangerouslySetInnerHTML'>;
+export type ListProps = Omit<React.HTMLAttributes<HTMLUListElement>, 'role' | 'children' | 'dangerouslySetInnerHTML'> & {
+    /**
+     * Custom markup for emoji cells and category headers. Each receives the
+     * library-owned props to spread onto its element (see EmojiRenderProps /
+     * CategoryHeaderRenderProps).
+     */
+    components?: ListComponents;
+};
+export type EmptyProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'role' | 'children' | 'dangerouslySetInnerHTML'> & {
+    children?: React.ReactNode | ((state: {
+        search: string;
+    }) => React.ReactNode);
+};
+export type SkinToneProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'role' | 'children' | 'dangerouslySetInnerHTML'> & {
+    /** Axis the tones fan out along. Default: 'horizontal'. */
+    orientation?: 'horizontal' | 'vertical';
+};
+export type LoadingProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'role' | 'children' | 'dangerouslySetInnerHTML'> & {
+    children?: React.ReactNode;
+};
+export type LoadErrorProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'role' | 'children' | 'dangerouslySetInnerHTML'> & {
+    children?: React.ReactNode | ((state: {
+        error: Error;
+        retry: () => void;
+    }) => React.ReactNode);
+};
+export {};

package/dist/state/activeEmojiStore.d.ts

@@ -0,0 +1,7 @@
+import type { ActiveEmojiState } from '../components/context/PickerContext';
+/** Instance-local subscriptions: changing hover updates only affected cells. */
+export declare function createActiveEmojiStore(): {
+    get: () => ActiveEmojiState;
+    set(next: ActiveEmojiState | ((previous: ActiveEmojiState) => ActiveEmojiState)): void;
+    subscribe(read: () => void, unified?: string): () => void;
+};

package/dist/state/navigationRegistry.d.ts

@@ -0,0 +1,61 @@
+/** 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 declare class NavigationRegistry {
+    private nextId;
+    private regions;
+    private singletons;
+    private generation;
+    private disposed;
+    /**
+     * 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;
+    /** Registrations in mount order; traversal follows DOM document order instead. */
+    getRegions(): readonly RegisteredRegion[];
+    getRegionsByKind(kind: NavigationRegionKind): readonly RegisteredRegion[];
+    /**
+     * First registration wins. Later
+     * duplicates are ignored by picker behavior.
+     */
+    getAuthoritativeRegion(kind: NavigationRegionKind): RegisteredRegion | undefined;
+    /** Current navigation generation. Pending async focus work captures this value. */
+    currentGeneration(): number;
+    /**
+     * 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;
+    isCurrent(token: number): boolean;
+    /**
+     * 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;
+    dispose(): void;
+    /**
+     * 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;
+    releaseSingleton(kind: string): void;
+}
+export type DuplicateRegionPolicy = 'throw' | 'warn-once';
+export declare function duplicateRegionPolicy(): DuplicateRegionPolicy;
+export declare function reportDuplicateRegion(kind: string): void;
+export declare function reportPortalRegion(kind: NavigationRegionKind): void;
+/** Test-only: reset warn-once sets between cases. */
+export declare function __resetNavigationWarningsForTest(): void;

package/dist/state/regionTraversal.d.ts

@@ -0,0 +1,20 @@
+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 declare function isRegionFocusable(element: Element): boolean;
+/**
+ * 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 declare function getActiveRegionsInDomOrder(registry: NavigationRegistry, rootElement: Element | null): RegisteredRegion[];
+export declare function findRegion(regions: readonly RegisteredRegion[], kind: NavigationRegionKind): RegisteredRegion | undefined;
+/** Next focusable region after `from` in DOM order, if any. */
+export declare function getNextRegion(registry: NavigationRegistry, rootElement: Element | null, from: NavigationRegionKind): RegisteredRegion | undefined;
+/** Previous focusable region before `from` in DOM order, if any. */
+export declare function getPrevRegion(registry: NavigationRegistry, rootElement: Element | null, from: NavigationRegionKind): RegisteredRegion | undefined;

package/dist/typeRefinements/typeRefinements.d.ts

@@ -1,6 +1,6 @@
-import { CustomCategoryConfig } from '../config/categoryConfig';
-import { CustomEmoji } from '../config/customEmojiConfig';
-import { DataEmoji } from '../dataUtils/DataTypes';
-import { CategoryConfig } from '../types/exposedTypes';
-export declare function isCustomCategory(category: CategoryConfig | CustomCategoryConfig): category is CustomCategoryConfig;
-export declare function isCustomEmoji(emoji: Partial<DataEmoji>): emoji is CustomEmoji;
+import { CustomCategoryConfig } from '../config/categoryConfig';
+import { CustomEmoji } from '../config/customEmojiConfig';
+import { DataEmoji } from '../dataUtils/DataTypes';
+import { CategoryConfig } from '../types/exposedTypes';
+export declare function isCustomCategory(category: CategoryConfig | CustomCategoryConfig): category is CustomCategoryConfig;
+export declare function isCustomEmoji(emoji: Partial<DataEmoji>): emoji is CustomEmoji;

package/dist/types/exposedTypes.d.ts

@@ -1,15 +1,15 @@
 import * as React from 'react';
-export declare type EmojiClickData = {
+export type EmojiClickData = {
     activeSkinTone: SkinTones;
     unified: string;
     unifiedWithoutSkinTone: string;
     emoji: string;
     names: string[];
     imageUrl: string;
-    getImageUrl: (emojiStyle?: EmojiStyle) => string;
+    getImageUrl: (emojiStyle?: EmojiStyleValue) => string;
     isCustom: boolean;
 };
-export declare type CategoryConfig = {
+export type CategoryConfig = {
     category: Categories;
     name: string;
     icon?: React.ReactNode;
@@ -20,8 +20,8 @@ export declare type CategoryConfig = {
      */
     group?: string;
 };
-export declare type CategoryIcons = Partial<Record<Categories, React.ReactNode>>;
-export declare type EmojiData = {
+export type CategoryIcons = Partial<Record<Categories, React.ReactNode>>;
+export type EmojiData = {
     categories: Partial<Record<Categories, CategoryConfig>>;
     emojis: Record<string, DataEmoji[]>;
 };
@@ -35,6 +35,7 @@ export declare enum SuggestionMode {
     RECENT = "recent",
     FREQUENT = "frequent"
 }
+export type SuggestionModeValue = SuggestionMode | 'recent' | 'frequent';
 export declare enum EmojiStyle {
     NATIVE = "native",
     APPLE = "apple",
@@ -42,11 +43,13 @@ export declare enum EmojiStyle {
     GOOGLE = "google",
     FACEBOOK = "facebook"
 }
+export type EmojiStyleValue = EmojiStyle | 'native' | 'apple' | 'twitter' | 'google' | 'facebook';
 export declare enum Theme {
     DARK = "dark",
     LIGHT = "light",
     AUTO = "auto"
 }
+export type ThemeValue = Theme | 'dark' | 'light' | 'auto';
 export declare enum SkinTones {
     NEUTRAL = "neutral",
     LIGHT = "1f3fb",
@@ -55,6 +58,8 @@ export declare enum SkinTones {
     MEDIUM_DARK = "1f3fe",
     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 declare enum Categories {
     SUGGESTED = "suggested",
     CUSTOM = "custom",
@@ -69,5 +74,10 @@ export declare enum Categories {
 }
 export declare enum SkinTonePickerLocation {
     SEARCH = "SEARCH",
-    PREVIEW = "PREVIEW"
+    PREVIEW = "PREVIEW",
+    /**
+     * No built-in placement: render the `SkinTone` primitive wherever you
+     * want it, or drive the tone through `skinTone` / `useSkinTone()`.
+     */
+    NONE = "NONE"
 }

package/dist/types/exposedTypes.js

@@ -43,4 +43,9 @@ export var SkinTonePickerLocation;
 (function (SkinTonePickerLocation) {
     SkinTonePickerLocation["SEARCH"] = "SEARCH";
     SkinTonePickerLocation["PREVIEW"] = "PREVIEW";
+    /**
+     * No built-in placement: render the `SkinTone` primitive wherever you
+     * want it, or drive the tone through `skinTone` / `useSkinTone()`.
+     */
+    SkinTonePickerLocation["NONE"] = "NONE";
 })(SkinTonePickerLocation || (SkinTonePickerLocation = {}));

package/dist/virtualization/virtualizationHelpers.d.ts

@@ -1,18 +1,22 @@
-export declare function shouldVirtualize({ scrollTop, clientHeight, topOffset, style, dimensions, }: {
-    scrollTop: number;
-    clientHeight: number;
-    topOffset: number;
-    style: {
-        top: number;
-    } | undefined;
-    dimensions: Dimensions;
-}): boolean;
-export declare function getEmojiPositionStyle(dimensions: Dimensions, index: number): {
-    top: number;
-    left: number;
-} | undefined;
-export declare type Dimensions = {
-    emojiSize: number;
-    emojisPerRow: number;
-    categoryHeight: number;
-} | undefined;
+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;
+    topOffset: number;
+    style: {
+        top: number;
+    } | undefined;
+    dimensions: Dimensions;
+}): boolean;
+export declare function getEmojiPositionStyle(dimensions: Dimensions, index: number): {
+    top: number;
+    insetInlineStart: number;
+} | undefined;
+export type Dimensions = {
+    emojiSize: number;
+    emojisPerRow: number;
+    categoryHeight: number;
+    /** Usable row width the columns are distributed across. */
+    rowWidth?: number;
+} | undefined;