fn_registry/frontend/functions/ui/sticker_picker.md

name, kind, lang, domain, version, framework, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, tested, tests, test_file_path, file_path, props, emits, has_state, output, params

name	kind	lang	domain	version	framework	purity	signature	description	tags	uses_functions	uses_types	returns	returns_optional	error_type	imports	tested	tests	test_file_path	file_path	props	emits	has_state	output	params
sticker_picker	component	ts	ui	1.0.0	react	impure	StickerPicker(props: StickerPickerProps): JSX.Element	Selector de emoji/sticker encapsulado en un Popover de Mantine. Monta emoji-mart Picker una sola vez para evitar re-creaciones en cada render.	emoji sticker picker popover mantine emoji-mart react				false		@mantine/core @emoji-mart/data emoji-mart	false			frontend/functions/ui/sticker_picker.tsx	name type required description opened boolean true Controla si el Popover está abierto. name type required description onClose () => void true Callback invocado al cerrar (click fuera, Escape, o tras selección). name type required description onSelect (emoji: string) => void true Callback invocado con el emoji seleccionado. Prefiere unicode nativo; si no está disponible usa shortcode. name type required description target React.ReactNode true Elemento ancla que dispara el Popover. name type required description theme "dark" | "light" | "auto" false Tema visual del Picker de emoji-mart. Por defecto "dark". name type required description position PopoverProps["position"] false Posición del Popover respecto al ancla. Por defecto "bottom-start".	onClose onSelect	false	Popover de Mantine con emoji-mart Picker embebido. Tras selección emite onSelect(emoji) y onClose().	name desc opened Estado de visibilidad del picker. Gestionado por el componente padre. name desc onClose Se llama cuando el picker debe cerrarse. name desc onSelect Se llama con el string unicode o shortcode del emoji elegido. name desc target Nodo React que actúa como ancla del Popover (generalmente un botón o icono). name desc theme Tema de color del picker. Valores: "dark" | "light" | "auto". Por defecto "dark". name desc position Posición del Popover. Cualquier valor de PopoverProps["position"] de Mantine. Por defecto "bottom-start".

Ejemplo

import { useState } from "react";
import { ActionIcon } from "@mantine/core";
import { StickerPicker } from "@fn_library/sticker_picker";

function MyCard() {
  const [pickerOpen, setPickerOpen] = useState(false);
  const [sticker, setSticker] = useState<string | null>(null);

  return (
    <StickerPicker
      opened={pickerOpen}
      onClose={() => setPickerOpen(false)}
      onSelect={(emoji) => setSticker(emoji)}
      target={
        <ActionIcon onClick={() => setPickerOpen((o) => !o)}>
          {sticker ?? "😀"}
        </ActionIcon>
      }
      theme="dark"
      position="bottom-start"
    />
  );
}

Notas

Dependencias externas requeridas (no incluidas en el registry):

pnpm add @emoji-mart/data emoji-mart

El componente interno PickerInner instancia emoji-mart Picker con useEffect y lo monta en un <div ref>. El cleanup borra el innerHTML del div al desmontar. onSelectRef mantiene el callback actualizado sin recrear la instancia en cada render del padre. El prop theme se pasa al montar — cambios posteriores de theme no provocan remontaje (la instancia mantiene el tema inicial), comportamiento aceptable para la mayoría de casos de uso. Si se necesita cambio dinámico de tema, destructurar el key del componente padre fuerza remontaje.

El Popover usa withinPortal para evitar clipping por overflow de contenedores padre, closeOnClickOutside y closeOnEscape para comportamiento estándar, y trapFocus={false} para que emoji-mart gestione el foco internamente.