emoji-picker-react 4.22.3 → 5.0.0

package/src/primitives/structuralStyles.tsx

@@ -0,0 +1,133 @@
+import * as React from 'react';
+import { createSheet } from 'shipstyles';
+
+import { DedupedStyle } from '../Stylesheet/DedupedStyle';
+import { finalizeCss } from '../Stylesheet/stylesheet';
+
+import {
+  darkPickerTokens,
+  lightPickerTokens,
+  structuralPickerTokens,
+} from './tokens';
+
+// Library-owned structural CSS on its own stylesheet (docs/v5/STYLING.md
+// §1–§2): the Root containing block, the managed panel layout, and the
+// geometry tokens that measurement, virtualization and keyboard row math
+// depend on. Opt-in color themes (variables only) live here too; the
+// branded chrome (border, background, radius, motion, typography) stays in
+// the default tree on the main sheet, so a primitives-only consumer never
+// pulls it in. Values match the documented defaults so the default tree —
+// which re-declares them — renders identically.
+const structuralSheet = /* @__PURE__ */ createSheet('epr-structural', null);
+
+// A fallback reset must yield to design-library classes. MUI inputs use
+// content-box heights plus padding; a Root-class universal reset otherwise
+// overrides that rule and clips their text. Managed cells own their sizing
+// separately. Keep this inside the same nonce/layer boundary as the sheet.
+const boxSizingReset =
+  ':where(.epr-structural-root *){box-sizing:border-box;}' +
+  // Honor the OS "reduce motion" setting for the library's own motion
+  // (expanding reactions, the tone fan, hover fades). Class-level and
+  // emitted after the main sheet, so it beats library transitions while
+  // a consumer's more specific rule still wins.
+  '@media (prefers-reduced-motion:reduce){.epr-structural-root,.epr-structural-root *{transition-duration:0s}}' +
+  // appearance="default" paints the token surface behind the built-in
+  // leaves, so colorScheme="dark" is not dark controls on a transparent
+  // root. Zero specificity: any consumer background wins.
+  ':where(.epr-appearance-default){background-color:var(--epr-bg-color)}' +
+  // `columns`: the picker hugs that many emoji columns (plus the stable
+  // scrollbar gutter) unless the consumer sizes it; any width rule wins.
+  // In layout the content box spans the row (columns spread evenly); a
+  // narrower container caps it, so fewer columns render.
+  ':where([data-epr-columns]){width:fit-content;max-width:100%}' +
+  // Only the column geometry sizes the picker. Hover/focus titles, the
+  // search row (whose input grows as the skin tone fan opens) and a
+  // horizontal tab bar fill the resulting row instead of widening it; a
+  // 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}' +
+  ':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__ */ (() =>
+  structuralSheet.create({
+    root: {
+      '.': 'epr-structural-root',
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'column',
+      // The root is never a scroll container (the Viewport owns scrolling):
+      // clip forbids focus-reveal and programmatic scrolling, which `hidden`
+      // still permits. Both axes must clip: per spec, clip on one axis
+      // computes to hidden when the other axis is hidden, which is how a
+      // transient overflow plus autofocus used to leave the whole panel
+      // shifted sideways. `hidden` is the fallback for browsers without clip.
+      overflow: 'hidden',
+      overflowX: 'clip',
+      overflowY: 'clip',
+      // Every geometry token, so a bare Root lays out and measures
+      // correctly with no appearance tokens at all.
+      '--': structuralPickerTokens,
+    },
+    // Opt-in color themes for primitives (`<Root theme>`). Variables only:
+    // no borders, backgrounds or typography on the Root itself.
+    themeLight: {
+      '.': 'epr-theme-light',
+      '--': lightPickerTokens,
+    },
+    themeDark: {
+      '.': 'epr-theme-dark',
+      '--': { ...lightPickerTokens, ...darkPickerTokens },
+      colorScheme: 'dark',
+    },
+    themeAuto: {
+      '.': 'epr-theme-auto',
+      '--': lightPickerTokens,
+      '@media (prefers-color-scheme: dark)': {
+        '--': darkPickerTokens,
+        colorScheme: 'dark',
+      },
+    },
+    panel: {
+      '.': 'epr-structural-panel',
+      display: 'flex',
+      flexDirection: 'column',
+      flex: '1 1 auto',
+      minHeight: '0',
+      minWidth: '0',
+    },
+    // Convenience composition owns compact geometry. Explicit composition
+    // retains the host's dimensions. Pill decoration is separately opt-in.
+    collapsed: {
+      '.': 'epr-structural-collapsed',
+      height: '50px',
+      width: 'fit-content',
+    },
+    collapsedAppearance: {
+      backgroundColor: 'var(--epr-reactions-bg-color, transparent)',
+      // @ts-ignore - backdropFilter is not recognized.
+      backdropFilter: 'blur(8px)',
+      '--': {
+        '--epr-picker-border-radius': '50px',
+      },
+    },
+  }))();
+
+export const StructuralStyleTag = /* @__PURE__ */ React.memo(
+  function StructuralStyleTag({
+    nonce,
+    cssLayer,
+  }: {
+    nonce?: string;
+    cssLayer?: string;
+  }) {
+    return (
+      <DedupedStyle
+        nonce={nonce}
+        css={finalizeCss(
+          structuralSheet.getStyle() + '\n' + boxSizingReset,
+          cssLayer,
+        )}
+      />
+    );
+  },
+);

package/src/primitives/tokens.ts

@@ -0,0 +1,149 @@
+import { DEFAULT_LABEL_HEIGHT } from '../components/main/labelHeight';
+
+// Design tokens. The
+// documented `--epr-*` variable defaults as plain data: no styles, no side
+// effects.
+//
+// - structuralPickerTokens: geometry, always applied by every Root.
+// - lightPickerTokens / darkPickerTokens: colors, applied by
+//   `<Root theme="light" | "dark" | "auto">`, or by hand.
+// - defaultPickerTokens: geometry + light colors (the v4 defaults), shared
+//   with the default picker so the two cannot drift apart.
+/**
+ * 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 const structuralPickerTokens: Record<string, string> = {
+  '--epr-horizontal-padding': '10px',
+
+  /* Header */
+  '--epr-header-padding': '15px var(--epr-horizontal-padding)',
+
+  /* Search */
+  '--epr-search-input-padding': '0 30px',
+  '--epr-search-input-height': '40px',
+  '--epr-search-bar-inner-padding': 'var(--epr-horizontal-padding)',
+
+  /*  Category Navigation */
+  '--epr-category-navigation-button-size': '30px',
+
+  '--epr-skin-tone-size': '15px',
+
+  /* Variation Picker */
+  '--epr-emoji-variation-picker-height': '45px',
+
+  /*  Preview */
+  '--epr-preview-height': '70px',
+  '--epr-preview-emoji-size': '45px',
+  '--epr-preview-text-size': '14px',
+  '--epr-preview-text-padding': '0 var(--epr-horizontal-padding)',
+
+  /* Category */
+  '--epr-category-padding': '0 var(--epr-horizontal-padding)',
+
+  /*  Category Label */
+  '--epr-category-label-padding': '0 var(--epr-horizontal-padding)',
+  '--epr-category-label-height': `${DEFAULT_LABEL_HEIGHT}px`,
+
+  /*  Emoji */
+  '--epr-emoji-size': '30px',
+  '--epr-emoji-padding': '5px',
+  '--epr-emoji-fullsize':
+    'calc(var(--epr-emoji-size) + var(--epr-emoji-padding) * 2)',
+
+  /* Z-Index */
+  '--epr-header-overlay-z-index': '3',
+  '--epr-emoji-variations-indictator-z-index': '1',
+  '--epr-category-label-z-index': '2',
+  '--epr-skin-variation-picker-z-index': '5',
+  '--epr-preview-z-index': '6',
+};
+
+/** Light color tokens (the v4 default palette). */
+export const lightPickerTokens: Record<string, string> = {
+  '--epr-highlight-color': '#007aeb',
+  '--epr-hover-bg-color': '#e5f0fa',
+  '--epr-hover-bg-color-reduced-opacity': '#e5f0fa80',
+  '--epr-focus-bg-color': '#e0f0ff',
+  // WCAG AA: #858585 measured 3.4–3.7:1 on the light surfaces; #6b6b6b
+  // is ~5:1 on both the background and the search field.
+  '--epr-text-color': '#6b6b6b',
+  '--epr-search-input-bg-color': '#f6f6f6',
+  '--epr-picker-border-color': '#e7e7e7',
+  '--epr-bg-color': '#fff',
+  '--epr-reactions-bg-color': '#ffffff90',
+  '--epr-category-icon-active-color': '#3371B7',
+  '--epr-category-icon-inactive-color': '#868686',
+  '--epr-skin-tone-picker-menu-color': '#ffffff95',
+  '--epr-skin-tone-outer-border-color': '#555555',
+  '--epr-skin-tone-inner-border-color': 'var(--epr-bg-color)',
+
+  '--epr-picker-border-radius': '8px',
+
+  /* Skin Tone Picker */
+  '--epr-active-skin-tone-indicator-border-color': 'var(--epr-highlight-color)',
+  '--epr-active-skin-hover-color': 'var(--epr-hover-bg-color)',
+
+  /* Search */
+  '--epr-search-input-bg-color-active': 'var(--epr-search-input-bg-color)',
+  '--epr-search-input-border-radius': '8px',
+  '--epr-search-input-text-color': 'var(--epr-text-color)',
+  '--epr-search-input-placeholder-color': 'var(--epr-text-color)',
+  '--epr-search-border-color': 'var(--epr-search-input-bg-color)',
+  '--epr-search-border-color-active': 'var(--epr-highlight-color)',
+
+  /* Variation Picker */
+  '--epr-emoji-variation-picker-bg-color': 'var(--epr-bg-color)',
+
+  /*  Preview */
+  '--epr-preview-border-color': 'var(--epr-picker-border-color)',
+  '--epr-preview-text-color': 'var(--epr-text-color)',
+
+  /*  Category Label */
+  '--epr-category-label-bg-color': '#ffffffe6',
+  '--epr-category-label-text-color': 'var(--epr-text-color)',
+
+  /*  Emoji */
+  '--epr-emoji-hover-color': 'var(--epr-hover-bg-color)',
+  '--epr-emoji-variation-indicator-color': 'var(--epr-picker-border-color)',
+  '--epr-emoji-variation-indicator-color-hover': 'var(--epr-text-color)',
+};
+
+/**
+ * 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 const darkPickerTokens: Record<string, string> = {
+  '--epr-emoji-variation-picker-bg-color': '#000',
+  '--epr-hover-bg-color-reduced-opacity': '#36363680',
+  '--epr-highlight-color': '#c0c0c0',
+  '--epr-text-color': 'var(--epr-highlight-color)',
+  '--epr-hover-bg-color': '#363636f6',
+  '--epr-focus-bg-color': '#474747',
+  '--epr-search-input-bg-color': '#333333',
+  '--epr-category-label-bg-color': '#222222e6',
+  '--epr-picker-border-color': '#151617',
+  '--epr-bg-color': '#222222',
+  '--epr-reactions-bg-color': '#22222290',
+  '--epr-search-input-bg-color-active': '#000',
+  '--epr-emoji-variation-indicator-color': '#444',
+  '--epr-category-icon-active-color': '#6AA9DD',
+  '--epr-category-icon-inactive-color': '#C0C0BF',
+  '--epr-skin-tone-picker-menu-color': '#22222295',
+  '--epr-skin-tone-outer-border-color': '#151617',
+  '--epr-skin-tone-inner-border-color': '#00000000',
+};
+
+/** Full light preset: geometry plus light colors (v4 defaults). */
+export const defaultPickerTokens: Record<string, string> = {
+  ...lightPickerTokens,
+  ...structuralPickerTokens,
+};
+
+// NOTE: the `--epr-dark-*` indirection variables are deliberately NOT part
+// of this module. They exist only in the default tree's DarkTheme overrides
+// (v4 compatibility); primitives theme through `darkPickerTokens` instead.

package/src/primitives/types.ts

@@ -0,0 +1,192 @@
+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';
+
+// Public primitive prop contracts (docs/v5/PRIMITIVES.md).
+// React-16.8-compatible types only (no React-18-only type helpers).
+
+/**
+ * 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);
+};

package/src/state/activeEmojiStore.ts

@@ -0,0 +1,39 @@
+import type { ActiveEmojiState } from '../components/context/PickerContext';
+
+/** Instance-local subscriptions: changing hover updates only affected cells. */
+export function createActiveEmojiStore() {
+  let value: ActiveEmojiState = null;
+  const readers = new Set<() => void>();
+  const cells = new Map<string, Set<() => void>>();
+  return {
+    get: () => value,
+    set(
+      next:
+        ActiveEmojiState | ((previous: ActiveEmojiState) => ActiveEmojiState),
+    ) {
+      const previous = value;
+      const resolved = typeof next === 'function' ? next(previous) : next;
+      if (
+        previous?.unified === resolved?.unified &&
+        previous?.originalUnified === resolved?.originalUnified
+      )
+        return;
+      value = resolved;
+      readers.forEach((read) => read());
+      new Set([previous?.unified, resolved?.unified]).forEach((key) => {
+        if (key) cells.get(key)?.forEach((read) => read());
+      });
+    },
+    subscribe(read: () => void, unified?: string) {
+      const group = unified
+        ? (cells.get(unified) ?? new Set<() => void>())
+        : readers;
+      if (unified) cells.set(unified, group);
+      group.add(read);
+      return () => {
+        group.delete(read);
+        if (unified && group.size === 0) cells.delete(unified);
+      };
+    },
+  };
+}