Menu Suspenso

"use client";

import { useEffect, useId, useRef, useState, type ReactNode } from "react";

/**
 * Botão em pílula (rótulo + resumo da escolha) que abre um painel suspenso. É a base dos seletores da barra
 * e dos gráficos: fecha ao clicar fora ou com Esc (devolvendo o foco ao botão). O painel recebe `fechar`.
 */
export function MenuSuspenso({
  rotulo,
  resumo,
  larguraDoPainel = "w-72",
  alinhamento = "fim",
  bloco = false,
  children,
}: {
  rotulo: string;
  resumo: string;
  /** Classe de largura do painel. */
  larguraDoPainel?: string;
  /** Lado do botão em que o painel se alinha: "fim" (direita) ou "inicio" (esquerda, bom em barras laterais). */
  alinhamento?: "inicio" | "fim";
  /** Botão com a largura toda do contêiner, em qualquer tela. */
  bloco?: boolean;
  children: (fechar: () => void) => ReactNode;
}) {
  const [aberto, setAberto] = useState(false);
  const raiz = useRef<HTMLDivElement>(null);
  const botao = useRef<HTMLButtonElement>(null);
  const idDoPainel = useId();

  const jaAbriu = useRef(false);

  // Ao fechar, se o foco ficou sem lugar (o item clicado sumiu) ou ainda está no menu, volta para o botão.
  useEffect(() => {
    if (aberto) {
      jaAbriu.current = true;
      return;
    }
    if (!jaAbriu.current) return;
    const foco = document.activeElement;
    if (!foco || foco === document.body || raiz.current?.contains(foco)) botao.current?.focus();
  }, [aberto]);

  useEffect(() => {
    if (!aberto) return;
    const fora = (e: PointerEvent) => {
      if (!raiz.current?.contains(e.target as Node)) setAberto(false);
    };
    const esc = (e: KeyboardEvent) => {
      if (e.key === "Escape") setAberto(false);
    };
    document.addEventListener("pointerdown", fora);
    document.addEventListener("keydown", esc);
    return () => {
      document.removeEventListener("pointerdown", fora);
      document.removeEventListener("keydown", esc);
    };
  }, [aberto]);

  return (
    <div ref={raiz} className="relative">
      <button
        ref={botao}
        type="button"
        aria-expanded={aberto}
        aria-controls={idDoPainel}
        onClick={() => setAberto((a) => !a)}
        className={`flex min-h-11 w-full max-w-full cursor-pointer items-center gap-2 rounded-full border bg-page px-4 text-sm text-ink outline-accent focus-visible:outline-2 focus-visible:outline-offset-2 ${
          bloco ? "" : "md:w-auto"
        } ${aberto ? "border-ink" : "border-axis/50 hover:border-ink"}`}
      >
        <span className="text-muted">{rotulo}</span>
        <span className="min-w-0 truncate font-semibold">{resumo}</span>
        <svg
          aria-hidden="true"
          viewBox="0 0 12 12"
          className={`ml-auto size-3 shrink-0 text-muted transition-transform ${aberto ? "rotate-180" : ""}`}
        >
          <path d="M2.5 4.5 6 8l3.5-3.5" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </button>

      {aberto && (
        <div
          id={idDoPainel}
          role="group"
          aria-label={rotulo}
          className={`absolute top-full z-50 mt-2 max-w-[calc(100vw-3rem)] rounded-xl border border-rule bg-page shadow-flutuante ${
            alinhamento === "inicio" ? "left-0" : "right-0"
          } ${larguraDoPainel}`}
        >
          {children(() => setAberto(false))}
        </div>
      )}
    </div>
  );
}

import { useState } from "react";
import { defineStories } from "@/registry/stories";
import { MenuSuspenso } from "./MenuSuspenso";

const ORDENS = ["Mais recentes", "Mais vendidos", "Menor preço", "Maior preço"];

function Exemplo({ rotulo, largura }: { rotulo: string; largura: string }) {
  const [ordem, setOrdem] = useState(ORDENS[0]);
  return (
    <div className="flex min-h-64 items-start justify-center in-data-miniatura:min-h-0">
      <MenuSuspenso rotulo={rotulo} resumo={ordem} larguraDoPainel={largura}>
        {(fechar) => (
          <ul className="py-1">
            {ORDENS.map((o) => (
              <li key={o}>
                <button
                  type="button"
                  onClick={() => {
                    setOrdem(o);
                    fechar();
                  }}
                  className="flex min-h-11 w-full items-center px-3 text-left text-sm hover:bg-surface"
                >
                  {o}
                </button>
              </li>
            ))}
          </ul>
        )}
      </MenuSuspenso>
    </div>
  );
}

export default defineStories({
  args: { rotulo: "Ordenar por", largura: "w-56" },
  controls: {
    rotulo: { type: "text" },
    largura: { type: "select", label: "larguraDoPainel", options: ["w-48", "w-56", "w-72", "w-96"] },
  },
  render: (a) => <Exemplo rotulo={a.rotulo} largura={a.largura} />,
  stories: [{ name: "Lista de opções" }, { name: "Painel largo", args: { largura: "w-96" } }],
});