Emoji Picker Component

/**
 * Main emoji picker React component
 * @param props - Configuration options for the picker
 * @returns JSX element containing the emoji picker interface
 */
declare const EmojiPicker: (props: PickerProps) => JSX.Element;

type OnEmojiClickApi = {
  collapseToReactions: () => void;
};

interface PickerProps {
  /** Callback fired when an emoji is clicked */
  onEmojiClick?: MouseDownEvent;
  /** Controls the theme of the picker */
  theme?: Theme;
  /** Controls the emoji style/set to display */
  emojiStyle?: EmojiStyle;
  /** Width of the picker (number treated as pixels) */
  width?: PickerDimensions;
  /** Height of the picker (number treated as pixels) */
  height?: PickerDimensions;
  /** Default skin tone for emojis that support variations */
  defaultSkinTone?: SkinTones;
  /** Placeholder text for the search input */
  searchPlaceholder?: string;
  /** Alternative placeholder text for the search input (legacy prop) */
  searchPlaceHolder?: string;
  /** Whether to auto-focus the search input on mount */
  autoFocusSearch?: boolean;
  /** Whether to load emojis lazily for performance */
  lazyLoadEmojis?: boolean;
  /** Whether to disable skin tone selection */
  skinTonesDisabled?: boolean;
  /** Whether to disable the search functionality */
  searchDisabled?: boolean;
  /** Configuration for the emoji preview section */
  previewConfig?: PreviewConfig;
  /** Array of custom emojis to include */
  customEmojis?: CustomEmoji[];
  /** Custom category configuration */
  categories?: CategoriesConfig;
  /** Array of emoji unified codes to hide */
  hiddenEmojis?: string[];
  /** Whether to open in reactions mode initially */
  reactionsDefaultOpen?: boolean;
  /** Array of reaction emoji unified codes */
  reactions?: string[];
  /** Callback fired when a reaction emoji is clicked */
  onReactionClick?: MouseDownEvent;
  /** Whether users can expand from reactions to full picker */
  allowExpandReactions?: boolean;
  /** Callback fired when skin tone is changed */
  onSkinToneChange?: OnSkinToneChange;
  /** CSS class name to apply to the root element */
  className?: string;
  /** Inline styles to apply to the root element */
  style?: React.CSSProperties;
  /** Whether the picker is open/visible */
  open?: boolean;
  /** Custom function to generate emoji image URLs */
  getEmojiUrl?: GetEmojiUrl;
  /** Mode for suggested emojis display */
  suggestedEmojisMode?: SuggestionMode;
  /** Location of the skin tone picker */
  skinTonePickerLocation?: SkinTonePickerLocation;
  /** Emoji version limit for compatibility */
  emojiVersion?: string | null;
}

import EmojiPicker, { EmojiClickData, Theme, EmojiStyle } from "emoji-picker-react";

// Basic usage
function BasicExample() {
  return (
    <EmojiPicker
      onEmojiClick={(emojiData: EmojiClickData) => {
        console.log("Selected emoji:", emojiData.emoji);
      }}
    />
  );
}

// Advanced configuration
function AdvancedExample() {
  return (
    <EmojiPicker
      theme={Theme.DARK}
      emojiStyle={EmojiStyle.APPLE}
      width={400}
      height={500}
      searchPlaceholder="Find an emoji..."
      autoFocusSearch={false}
      lazyLoadEmojis={true}
      skinTonesDisabled={false}
      defaultSkinTone={SkinTones.MEDIUM}
      previewConfig={{
        showPreview: true,
        defaultEmoji: "1f60a",
        defaultCaption: "Pick an emoji!"
      }}
      onEmojiClick={(emojiData) => {
        console.log("Emoji selected:", emojiData);
      }}
      onSkinToneChange={(skinTone) => {
        console.log("Skin tone changed:", skinTone);
      }}
    />
  );
}

// Custom styling
function StyledExample() {
  return (
    <EmojiPicker
      className="my-emoji-picker"
      style={{
        borderRadius: "12px",
        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)"
      }}
      width="100%"
      height="400px"
    />
  );
}

/**
 * Data structure containing information about a clicked emoji
 */
interface EmojiClickData {
  /** Currently active skin tone for the emoji */
  activeSkinTone: SkinTones;
  /** Unicode representation with skin tone applied */
  unified: string;
  /** Unicode representation without skin tone */
  unifiedWithoutSkinTone: string;
  /** The actual emoji character */
  emoji: string;
  /** Array of names/aliases for the emoji */
  names: string[];
  /** URL to the emoji image */
  imageUrl: string;
  /** Function to get image URL for different styles */
  getImageUrl: (emojiStyle?: EmojiStyle) => string;
  /** Whether this is a custom emoji */
  isCustom: boolean;
}

enum Theme {
  /** Light theme with bright background */
  LIGHT = 'light',
  /** Dark theme with dark background */
  DARK = 'dark',
  /** Automatically match system theme preference */
  AUTO = 'auto'
}

enum EmojiStyle {
  /** Use native system emojis */
  NATIVE = 'native',
  /** Apple emoji style */
  APPLE = 'apple',
  /** Twitter emoji style (Twemoji) */
  TWITTER = 'twitter',
  /** Google emoji style (Noto) */
  GOOGLE = 'google',
  /** Facebook emoji style */
  FACEBOOK = 'facebook'
}

enum SkinTones {
  /** Default/neutral skin tone */
  NEUTRAL = 'neutral',
  /** Light skin tone */
  LIGHT = '1f3fb',
  /** Medium-light skin tone */
  MEDIUM_LIGHT = '1f3fc',
  /** Medium skin tone */
  MEDIUM = '1f3fd',
  /** Medium-dark skin tone */
  MEDIUM_DARK = '1f3fe',
  /** Dark skin tone */
  DARK = '1f3ff'
}

/** 
 * Function called when an emoji is clicked
 * @param emoji - Data about the clicked emoji
 * @param event - The mouse event
 * @param api - Optional API object with utility functions
 */
type MouseDownEvent = (
  emoji: EmojiClickData,
  event: MouseEvent,
  api?: OnEmojiClickApi
) => void;

/**
 * Function called when skin tone is changed
 * @param skinTone - The newly selected skin tone
 */
type OnSkinToneChange = (skinTone: SkinTones) => void;

/** 
 * Picker dimension value - number treated as pixels, string passed as CSS value
 */
type PickerDimensions = string | number;