Dropdown Menu

1"use client";
2 
3import * as React from "react";
4import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
5import { Check, ChevronRight, Circle } from "lucide-react";
6 
7import { cn } from "@/lib/utils";
8import {
9  floatingItemVariants,
10  floatingMotion,
11  floatingSurfaceVariants,
12  type FloatingItemProps,
13  type FloatingSurfaceProps,
14} from "@/components/ui/recipes";
15 
16type DropdownInteraction = "click" | "hover";
17 
18interface DropdownMenuContextValue {
19  interaction: DropdownInteraction;
20  openFromPointer: (event: React.PointerEvent) => void;
21  scheduleClose: (event: React.PointerEvent) => void;
22  cancelClose: () => void;
23}
24 
25const DropdownMenuContext = React.createContext<DropdownMenuContextValue>({
26  interaction: "click",
27  openFromPointer: () => {},
28  scheduleClose: () => {},
29  cancelClose: () => {},
30});
31 
32export interface DropdownMenuProps extends React.ComponentPropsWithoutRef<
33  typeof DropdownMenuPrimitive.Root
34> {
35  /** `hover` remains click-accessible on touch and keyboard. */
36  interaction?: DropdownInteraction;
37  /** Grace period while the pointer travels from trigger to content. */
38  closeDelay?: number;
39}
40 
41function DropdownMenu({
42  interaction = "click",
43  closeDelay = 120,
44  open: controlledOpen,
45  defaultOpen,
46  onOpenChange,
47  modal,
48  children,
49  ...props
50}: DropdownMenuProps) {
51  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);
52  const timer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
53  const open = controlledOpen ?? uncontrolledOpen;
54 
55  const setOpen = React.useCallback(
56    (next: boolean) => {
57      if (controlledOpen === undefined) setUncontrolledOpen(next);
58      onOpenChange?.(next);
59    },
60    [controlledOpen, onOpenChange],
61  );
62 
63  const cancelClose = React.useCallback(() => {
64    if (timer.current) clearTimeout(timer.current);
65    timer.current = null;
66  }, []);
67 
68  React.useEffect(() => cancelClose, [cancelClose]);
69 
70  const context = React.useMemo<DropdownMenuContextValue>(
71    () => ({
72      interaction,
73      cancelClose,
74      openFromPointer: (event) => {
75        if (interaction === "hover" && event.pointerType === "mouse") {
76          cancelClose();
77          setOpen(true);
78        }
79      },
80      scheduleClose: (event) => {
81        if (interaction === "hover" && event.pointerType === "mouse") {
82          cancelClose();
83          timer.current = setTimeout(() => setOpen(false), closeDelay);
84        }
85      },
86    }),
87// … truncated