useClickOutside - Detecta cliques fora de um elemento referenciado para dispensar UI

import { useEffect, useRef, useCallback } from "react";
 
/**
 * useClickOutside
 * Chama `handler` quando um clique (ou toque) ocorre fora do elemento referenciado.
 * Suporta um único ref ou um array de refs (ex: gatilho + 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ém o handler atualizado sem re-inscrição
  useEffect(() => {
    handlerRef.current = handler;
  }, [handler]);
 
  useEffect(() => {
    const allRefs = refs ? refs : [singleRef];
 
    const listener = (event: MouseEvent | TouchEvent) => {
      // Verifica se o clique está dentro de algum dos elementos referenciados
      const isInside = allRefs.some((ref) => {
        return ref.current?.contains(event.target as Node);
      });
 
      if (!isInside) {
        handlerRef.current(event);
      }
    };
 
    // Usa mousedown/touchstart para resposta imediata
    // (antes do evento click, que dispara no mouse up)
    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)}>
        Menu {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>Profile</li>
          <li>Settings</li>
          <li>Logout</li>
        </ul>
      )}
    </div>
  );
}
 
// Exemplo multi-ref: o botão de gatilho + o popover estão 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>Conteúdo do Popover</p>
          <button onClick={() => setIsOpen(false)}>Fechar</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
};