Dropdown Menu

<!-- Dropdown Menu Trigger -->
<div class="dropdown-menu-root">
  <button
    type="button"
    class="btn btn-secondary"
    aria-haspopup="menu"
    aria-expanded="false"
    aria-controls="actions-menu"
    id="actions-trigger"
  >
    Actions
    <svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
      <path d="M4.47 5.97a.75.75 0 0 1 1.06 0L8 8.44l2.47-2.47a.75.75 0 1 1 1.06 1.06l-3 3a.75.75 0 0 1-1.06 0l-3-3a.75.75 0 0 1 0-1.06Z"/>
    </svg>
  </button>

  <!-- Menu Panel -->
  <div
    role="menu"
    id="actions-menu"
    aria-labelledby="actions-trigger"
    class="dropdown-panel"
    hidden
  >
    <button role="menuitem" class="menu-item" tabindex="-1">
      <svg aria-hidden="true" width="16" height="16" fill="currentColor"><use href="#icon-edit"/></svg>
      Edit
      <kbd class="shortcut">⌘E</kbd>
    </button>
    <button role="menuitem" class="menu-item" tabindex="-1">
      <svg aria-hidden="true" width="16" height="16" fill="currentColor"><use href="#icon-copy"/></svg>
      Duplicate
      <kbd class="shortcut">⌘D</kbd>
    </button>

    <div role="separator" class="menu-divider"></div>

    <button role="menuitem" class="menu-item menu-item-destructive" tabindex="-1">
      <svg aria-hidden="true" width="16" height="16" fill="currentColor"><use href="#icon-trash"/></svg>
      Delete
      <kbd class="shortcut">⌫</kbd>
    </button>
  </div>
</div>

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

interface MenuItem {
  label: string;
  icon?: ReactNode;
  shortcut?: string;
  destructive?: boolean;
  disabled?: boolean;
  onSelect: () => void;
}

interface MenuGroup {
  items: MenuItem[];
}

interface DropdownMenuProps {
  trigger: ReactNode;
  groups: MenuGroup[];
  side?: "top" | "bottom";
  align?: "start" | "end";
}

export default function DropdownMenu({
  trigger,
  groups,
  side = "bottom",
  align = "start",
}: DropdownMenuProps) {
  const [open, setOpen] = useState(false);
  const [focusIndex, setFocusIndex] = useState(-1);
  const menuRef = useRef<HTMLDivElement>(null);
  const triggerRef = useRef<HTMLButtonElement>(null);

  const allItems = groups.flatMap((g) => g.items);
  const enabledIndices = allItems
    .map((item, i) => (!item.disabled ? i : -1))
    .filter((i) => i !== -1);

  useEffect(() => {
    if (!open) return;
    const handleKeyDown = (e: KeyboardEvent) => {
      switch (e.key) {
        case "ArrowDown": {
          e.preventDefault();
          const currentPos = enabledIndices.indexOf(focusIndex);
          const next = enabledIndices[(currentPos + 1) % enabledIndices.length];
          setFocusIndex(next);
          break;
        }
        case "ArrowUp": {
          e.preventDefault();
          const currentPos = enabledIndices.indexOf(focusIndex);
          const prev = enabledIndices[(currentPos - 1 + enabledIndices.length) % enabledIndices.length];
          setFocusIndex(prev);
          break;
        }
        case "Escape":
          setOpen(false);
          triggerRef.current?.focus();
          break;
        case "Enter":
        case " ":
          e.preventDefault();
          if (focusIndex >= 0 && !allItems[focusIndex].disabled) {
            allItems[focusIndex].onSelect();
            setOpen(false);
            triggerRef.current?.focus();
          }
          break;
      }
    };
    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [open, focusIndex]);

  let itemIndex = 0;
  return (
    <div className="dropdown-root" style={{ position: "relative" }}>
      <button
        ref={triggerRef}
        type="button"
        aria-haspopup="menu"
        aria-expanded={open}
        onClick={() => { setOpen(!open); setFocusIndex(enabledIndices[0] ?? -1); }}
      >
        {trigger}
      </button>

      {open && (
        <div ref={menuRef} role="menu" className="dropdown-panel">
          {groups.map((group, gi) => (
            <div key={gi} role="group">
              {gi > 0 && <div role="separator" className="menu-divider" />}
              {group.items.map((item) => {
                const idx = itemIndex++;
                return (
                  <button
                    key={idx}
                    role="menuitem"
                    className={`menu-item ${item.destructive ? "destructive" : ""}`}
                    tabIndex={focusIndex === idx ? 0 : -1}
                    aria-disabled={item.disabled || undefined}
                    ref={(el) => { if (focusIndex === idx) el?.focus(); }}
                    onClick={() => {
                      if (!item.disabled) { item.onSelect(); setOpen(false); }
                    }}
                  >
                    {item.icon}
                    <span>{item.label}</span>
                    {item.shortcut && <kbd className="shortcut">{item.shortcut}</kbd>}
                  </button>
                );
              })}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}