"use client"; /** * EmojiPicker — a tiny, dependency-free emoji popover for text inputs. * * Renders just a trigger button; the panel is portaled to with fixed * positioning and a transparent full-screen backdrop that swallows the * dismiss click. That keeps it OUTSIDE any surrounding drawer/sheet DOM, so * opening it can't resize or reposition the host (e.g. the vaul comments * drawer), and the dismiss click can't leak through and close that drawer. * * It stays open after a pick so several emojis can be added in a row; the * caller decides what to do with each via `onSelect`. */ import { useEffect, useRef, useState } from "react"; import { createPortal } from "react-dom"; import { Smile } from "lucide-react"; import { cn } from "@/lib/utils"; // A curated, broadly-useful set — enough to feel like a picker without // shipping a full emoji database. Grouped for easy scanning. const EMOJI_GROUPS: { label: string; emojis: string[] }[] = [ { label: "Smileys", emojis: [ "😀", "😃", "😄", "😁", "😅", "😂", "🙂", "😊", "😇", "😍", "🥰", "😘", "😉", "😌", "😎", "🤗", "🤔", "😴", "😢", "😭", "😮", "😲", "🥲", "😬", ], }, { label: "Gestures & people", emojis: [ "🙏", "👍", "👎", "👏", "🙌", "🤝", "✌️", "🤞", "💪", "🫶", "👋", "🙇", "🧘", "🕉️", "☮️", "🤲", ], }, { label: "Hearts", emojis: [ "❤️", "🧡", "💛", "💚", "💙", "💜", "🤍", "🤎", "🖤", "💖", "💕", "💗", "💓", "💞", "💔", "❣️", ], }, { label: "Nature & spirit", emojis: [ "🌸", "🌺", "🌹", "🪷", "🌻", "🌼", "🍃", "🌿", "🪔", "🕯️", "🔥", "✨", "🌟", "⭐", "☀️", "🌈", ], }, { label: "Symbols", emojis: [ "🎉", "🎊", "🥳", "💯", "✅", "❗", "❓", "💬", "📿", "🛕", "🐮", "🦚", "🪈", "🎶", "📖", "🙏🏽", ], }, ]; const PANEL_WIDTH = 300; export function EmojiPicker({ onSelect, className, }: { onSelect: (emoji: string) => void; className?: string; }) { const [open, setOpen] = useState(false); const [pos, setPos] = useState<{ bottom: number; left: number } | null>(null); const btnRef = useRef(null); const panelRef = useRef(null); // Dismiss on any outside pointer-down or Escape. Deferred a tick so the // opening click doesn't immediately re-close it; capture phase so it fires // wherever the target lives. No close-on-scroll here — the panel scrolls // internally, so a scroll inside it must NOT dismiss. useEffect(() => { if (!open) return; function onDown(e: PointerEvent) { const t = e.target as Node; if (panelRef.current?.contains(t) || btnRef.current?.contains(t)) return; setOpen(false); } function onKey(e: KeyboardEvent) { if (e.key === "Escape") setOpen(false); } const id = window.setTimeout(() => { document.addEventListener("pointerdown", onDown, true); document.addEventListener("keydown", onKey); }, 0); return () => { window.clearTimeout(id); document.removeEventListener("pointerdown", onDown, true); document.removeEventListener("keydown", onKey); }; }, [open]); function toggle() { if (open) { setOpen(false); return; } const r = btnRef.current?.getBoundingClientRect(); if (r) { // Open ABOVE the trigger (the composer sits at the bottom of the sheet), // clamped so the 300px panel stays on-screen horizontally. const left = Math.max( 8, Math.min(r.left, window.innerWidth - PANEL_WIDTH - 8), ); setPos({ bottom: window.innerHeight - r.top + 6, left }); } setOpen(true); } return ( <> {open && pos && typeof document !== "undefined" ? createPortal( , document.body, ) : null} ); }