Context Menu

1"use client";
2 
3import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
4import * as React from "react";
5 
6export type ContextMenuItem =
7  | { type: "separator" }
8  | { type: "label"; label: React.ReactNode }
9  | {
10      type?: "item";
11      label: React.ReactNode;
12      icon?: React.ReactNode;
13      shortcut?: string;
14      disabled?: boolean;
15      destructive?: boolean;
16      onSelect?: () => void;
17    };
18 
19export type ContextMenuProps = React.HTMLAttributes<HTMLDivElement> & {
20  items: ContextMenuItem[];
21  children: React.ReactNode;
22};
23 
24type Coords = { x: number; y: number; flipX: boolean; flipY: boolean };
25 
26const ContextMenu = React.forwardRef<HTMLDivElement, ContextMenuProps>(
27  ({ items, children, className, ...props }, ref) => {
28    const reduceMotion = useReducedMotion();
29    const [coords, setCoords] = React.useState<Coords | null>(null);
30    const menuRef = React.useRef<HTMLDivElement>(null);
31 
32    React.useEffect(() => {
33      if (!coords) return;
34      const onDown = (e: MouseEvent) => {
35        if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
36          setCoords(null);
37        }
38      };
39      const onScroll = () => setCoords(null);
40      const onKey = (e: KeyboardEvent) => {
41        if (e.key === "Escape") setCoords(null);
42      };
43      document.addEventListener("mousedown", onDown);
44      window.addEventListener("scroll", onScroll, true);
45      document.addEventListener("keydown", onKey);
46      return () => {
47        document.removeEventListener("mousedown", onDown);
48        window.removeEventListener("scroll", onScroll, true);
49        document.removeEventListener("keydown", onKey);
50      };
51    }, [coords]);
52 
53    React.useEffect(() => {
54      if (coords) {
55        menuRef.current
56          ?.querySelector<HTMLElement>("[data-menu-item]")
57          ?.focus();
58      }
59    }, [coords]);
60 
61    const openAt = (clientX: number, clientY: number) => {
62      const menuW = 220;
63      const menuH = Math.min(items.length * 40 + 12, 360);
64      const flipX = clientX + menuW > window.innerWidth;
65      const flipY = clientY + menuH > window.innerHeight;
66      setCoords({ x: clientX, y: clientY, flipX, flipY });
67    };
68 
69    const moveFocus = (dir: 1 | -1) => {
70      const nodes = Array.from(
71        menuRef.current?.querySelectorAll<HTMLElement>("[data-menu-item]") ??
72          [],
73      );
74      if (!nodes.length) return;
75      const idx = nodes.indexOf(document.activeElement as HTMLElement);
76// … truncated