Dropdown Menu

1/** @jsxImportSource hono/jsx */
2import type { PropsWithChildren } from "hono/jsx"
3import { cn, type ClassValue } from "@/registry/lib/cn"
4 
5// Dropdown Menu — shadcn-htmx, htmx v4 + Tailwind v4.
6//
7// Built on top of the native HTML Popover API (popover + popovertarget),
8// so the platform gives us:
9//   - Light dismiss when the user clicks outside.
10//   - ESC closes the menu.
11//   - Top-layer rendering.
12//   - Focus restoration to the trigger after close.
13//
14// On top, public/site.js implements the APG menu keyboard contract:
15//   - ArrowDown / ArrowUp move focus between menuitems.
16//   - Home / End jump to first / last.
17//   - Type-to-find: pressing a letter focuses the next menuitem whose
18//     label starts with that letter.
19//   - Enter / Space activate the focused item.
20//
21// Refs:
22//   repos/aria-practices/content/patterns/menu-button/
23//   repos/mdn/files/en-us/web/accessibility/aria/reference/roles/menu_role/
24 
25export type DropdownMenuSide = "top" | "right" | "bottom" | "left"
26 
27type DropdownMenuProps = PropsWithChildren<{
28  // Required — matches popovertarget on the trigger.
29  id: string
30  // Which side of the trigger the menu opens on. site.js reads data-side
31  // and positions the popover via JS (CSS Anchor Positioning isn't yet
32  // shipped in every browser).
33  side?: DropdownMenuSide
34  // role="menu" REQUIRES an accessible name. Point aria-labelledby at the
35  // trigger's id (canonical menu-button wiring) or pass aria-label for
36  // icon-only triggers.
37  // menu_role: aria-labelledby="menubutton".
38  ariaLabelledBy?: string
39  ariaLabel?: string
40  class?: ClassValue
41}>
42 
43export function DropdownMenu(props: DropdownMenuProps) {
44  const { id, side = "bottom", ariaLabelledBy, ariaLabel, class: className, children } = props
45  return (
46    <div
47      id={id}
48      popover="auto"
49      role="menu"
50      aria-labelledby={ariaLabelledBy}
51      aria-label={ariaLabel}
52      data-slot="dropdown-menu"
53      data-side={side}
54      class={cn(
55        "z-50 m-0 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-none",
56        "[&:not(:popover-open)]:hidden",
57        "[&:popover-open]:animate-[scn-popover-in_120ms_ease-out]",
58        className,
59      )}
60    >
61      {children}
62    </div>
63  )
64}
65 
66type DropdownMenuTriggerProps = PropsWithChildren<{
67  menuFor: string
68  class?: ClassValue
69  id?: string
70}>
71 
72export function DropdownMenuTrigger(props: DropdownMenuTriggerProps) {
73  return (
74    <button
75      id={props.id}
76// … truncated