useClickOutside — Detecta clics fuera de un elemento referenciado para descartar la interfaz

import { useEffect, useRef, useCallback } from "react";
 
/**
 * useClickOutside
 * Llama a `handler` cuando ocurre un clic (o toque) fuera del elemento referenciado.
 * Admite una única ref o un array de refs (p. ej., activador + popover).
 */
function useClickOutside<T extends HTMLElement = HTMLElement>(
  handler: (event: MouseEvent | TouchEvent) => void,
  refs?: React.RefObject<T | null>[]
): React.RefObject<T | null> {
  const singleRef = useRef<T | null>(null);
  const handlerRef = useRef(handler);
 
  // Mantén el manejador fresco sin volver a suscribirse
  useEffect(() => {
    handlerRef.current = handler;
  }, [handler]);
 
  useEffect(() => {
    const allRefs = refs ? refs : [singleRef];
 
    const listener = (event: MouseEvent | TouchEvent) => {
      // Verifica si el clic está dentro de cualquiera de los elementos referenciados
      const isInside = allRefs.some((ref) => {
        return ref.current?.contains(event.target as Node);
      });
 
      if (!isInside) {
        handlerRef.current(event);
      }
    };
 
    // Usa mousedown/touchstart para una respuesta inmediata
    // (antes del evento click, que se dispara al liberar el ratón)
    document.addEventListener("mousedown", listener);
    document.addEventListener("touchstart", listener);
 
    return () => {
      document.removeEventListener("mousedown", listener);
      document.removeEventListener("touchstart", listener);
    };
  }, [refs]);
 
  return singleRef;
}

"use client";
 
import { useState, useRef } from "react";
 
function Dropdown() {
  const [isOpen, setIsOpen] = useState(false);
  const ref = useClickOutside<HTMLDivElement>(() => setIsOpen(false));
 
  return (
    <div ref={ref} style={{ position: "relative", display: "inline-block" }}>
      <button onClick={() => setIsOpen((o) => !o)}>
        Menú {isOpen ? "▲" : "▼"}
      </button>
      {isOpen && (
        <ul
          style={{
            position: "absolute",
            top: "100%",
            left: 0,
            background: "#fff",
            border: "1px solid #ccc",
            listStyle: "none",
            padding: 8,
            margin: 0,
            minWidth: 150,
            boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
          }}
        >
          <li>Perfil</li>
          <li>Configuración</li>
          <li>Cerrar sesión</li>
        </ul>
      )}
    </div>
  );
}
 
// Ejemplo de múltiples refs: el botón activador + popover están ambos "dentro"
function PopoverWithTrigger() {
  const [isOpen, setIsOpen] = useState(false);
  const triggerRef = useRef<HTMLButtonElement>(null);
  const popoverRef = useRef<HTMLDivElement>(null);
 
  useClickOutside(() => setIsOpen(false), [triggerRef, popoverRef]);
 
  return (
    <>
      <button ref={triggerRef} onClick={() => setIsOpen((o) => !o)}>
        Abrir Popover
      </button>
      {isOpen && (
        <div
          ref={popoverRef}
          style={{
            position: "absolute",
            padding: 16,
            background: "#fff",
            border: "1px solid #e0e0e0",
            borderRadius: 8,
            boxShadow: "0 8px 24px rgba(0,0,0,0.12)",
          }}
        >
          <p>Contenido del popover</p>
          <button onClick={() => setIsOpen(false)}>Cerrar</button>
        </div>
      )}
    </>
  );
}

useEffect(() => {
  const handleEscape = (e: KeyboardEvent) => {
    if (e.key === "Escape") handlerRef.current(e as any);
  };
  document.addEventListener("keydown", handleEscape);
  return () => document.removeEventListener("keydown", handleEscape);
}, []);

const listener = (event: MouseEvent) => {
  if (shouldIgnore?.(event.target as HTMLElement)) return;
  // ...lógica existente
};