Animated Context Menu

1"use client";
2// beui.dev/components/motion/context-menu
3 
4import { Check } from "lucide-react";
5import {
6  AnimatePresence,
7  motion,
8  useReducedMotion,
9} from "motion/react";
10import {
11  cloneElement,
12  createContext,
13  isValidElement,
14  type ReactElement,
15  type KeyboardEvent as ReactKeyboardEvent,
16  type MouseEvent as ReactMouseEvent,
17  type ReactNode,
18  type PointerEvent as ReactPointerEvent,
19  type Ref,
20  useCallback,
21  useContext,
22  useEffect,
23  useId,
24  useLayoutEffect,
25  useMemo,
26  useRef,
27  useState,
28} from "react";
29import { createPortal } from "react-dom";
30import { EASE_OUT, SPRING_LAYOUT, SPRING_PANEL } from "@/lib/ease";
31import { cn } from "@/lib/utils";
32 
33type OpenModality = "pointer" | "keyboard" | "touch";
34type MenuPoint = { x: number; y: number };
35 
36const VIEWPORT_PADDING = 8;
37const LONG_PRESS_DELAY = 520;
38const LONG_PRESS_TOLERANCE = 10;
39const MORPH_DURATION = 0.3;
40 
41type TriggerElementProps = React.HTMLAttributes<HTMLElement> & {
42  ref?: Ref<HTMLElement>;
43};
44 
45interface ContextMenuContextValue {
46  open: boolean;
47  setOpen: (open: boolean) => void;
48  openAt: (point: MenuPoint, modality: OpenModality) => void;
49  point: MenuPoint;
50  modality: OpenModality;
51  invocation: number;
52  menuId: string;
53  triggerRef: React.MutableRefObject<HTMLElement | null>;
54  contentRef: React.MutableRefObject<HTMLDivElement | null>;
55  activeId: string | null;
56  setActiveId: (id: string | null) => void;
57  reduce: boolean;
58}
59 
60const ContextMenuContext = createContext<ContextMenuContextValue | null>(null);
61 
62function useContextMenuContext(component: string) {
63  const context = useContext(ContextMenuContext);
64  if (!context) {
65    throw new Error(`${component} must be used within <ContextMenu>`);
66  }
67  return context;
68}
69 
70function assignRef<T>(ref: Ref<T> | undefined, value: T | null) {
71  if (typeof ref === "function") {
72    ref(value);
73  } else if (ref) {
74    ref.current = value;
75  }
76}
77 
78function getEnabledItems(container: HTMLElement | null) {
79  if (!container) return [];
80  return Array.from(
81    container.querySelectorAll<HTMLElement>(
82      '[data-context-menu-item="true"]:not([data-disabled="true"])',
83    ),
84  );
85}
86 
87function clamp(value: number, min: number, max: number) {
88  return Math.min(Math.max(value, min), max);
89}
90 
91function collapsedClip(
92  origin: MenuPoint,
93  size: { width: number; height: number },
94) {
95  const half = 8;
96  const top = clamp(origin.y - half, 0, size.height);
97  const right = clamp(size.width - origin.x - half, 0, size.width);
98// … truncated