Dropdown Menu

"use client";

// A menu that opens from a button: items with icons and shortcuts, checkbox
// and radio items, labels, separators and submenus. Click or Enter opens it;
// arrows, Home/End and typing move through it; Escape or a click outside
// closes it and hands focus back to the button.

import { AnimatePresence } from "motion/react";
import { useEffect, useRef, useState, type KeyboardEvent, type ReactNode } from "react";
import { MenuPanel, type MenuItem } from "../_overlay/menu";
import { Portal, triggerBox, useDismiss, useLayer, type Align, type Side } from "../_overlay/overlay";

export type { MenuItem };

export type DropdownMenuProps = {
  /** The button that opens the menu. */
  children: ReactNode;
  items: readonly MenuItem[];
  side?: Side;
  align?: Align;
  /** Gap between button and menu in px. */
  offset?: number;
  /** Controlled open state. Pair with `onOpenChange`. */
  open?: boolean;