Context Menu

1"use client";
2 
3import {
4  ContextMenuContent,
5  ContextMenuGroup,
6  ContextMenuItem,
7  ContextMenuLabel,
8  ContextMenu as ContextMenuRoot,
9  ContextMenuSeparator,
10  ContextMenuShortcut,
11  ContextMenuSub,
12  ContextMenuSubContent,
13  ContextMenuSubTrigger,
14  ContextMenuTrigger,
15} from "@/components/ui/context-menu";
16import { cn } from "@/lib/utils";
17import { motion, useReducedMotion } from "motion/react";
18import type React from "react";
19import { SPRING_DEFAULT } from "@/components/smoothui/lib/animation";
20 
21export interface ContextMenuProps {
22  /** The trigger element that opens the context menu on right-click */
23  children: React.ReactNode;
24  /** Optional CSS class for the content container */
25  className?: string;
26  /** Menu items to render */
27  items: ContextMenuItemConfig[];
28}
29 
30export interface ContextMenuItemConfig {
31  /** Nested submenu items */
32  children?: ContextMenuItemConfig[];
33  /** Whether the item is disabled */
34  disabled?: boolean;
35  /** Renders a group label instead of an item */
36  groupLabel?: string;
37  /** Optional icon to display before the label */
38  icon?: React.ReactNode;
39  /** Unique key for the item */
40  key: string;
41  /** Display label */
42  label: string;
43  /** Callback when item is selected */
44  onSelect?: () => void;
45  /** Renders a separator instead of an item */
46  separator?: boolean;
47  /** Optional keyboard shortcut text to display */
48  shortcut?: string;
49  /** Destructive variant styling */
50  variant?: "default" | "destructive";
51}
52 
53export default function ContextMenu({
54  children,
55  items,
56  className,
57}: ContextMenuProps) {
58  const shouldReduceMotion = useReducedMotion();
59 
60  const renderItem = (item: ContextMenuItemConfig, index: number) => {
61    if (item.separator) {
62      return <ContextMenuSeparator key={item.key} />;
63    }
64 
65    if (item.groupLabel) {
66      return (
67        <ContextMenuLabel key={item.key}>{item.groupLabel}</ContextMenuLabel>
68      );
69    }
70 
71    if (item.children && item.children.length > 0) {
72      return (
73        <ContextMenuSub key={item.key}>
74          <ContextMenuSubTrigger disabled={item.disabled}>
75            {item.icon ? <span className="mr-2">{item.icon}</span> : null}
76            {item.label}
77          </ContextMenuSubTrigger>
78          <ContextMenuSubContent>
79            {item.children.map((child, childIndex) =>
80              renderItem(child, childIndex)
81            )}
82          </ContextMenuSubContent>
83        </ContextMenuSub>
84      );
85    }
86 
87    return (
88      <motion.div
89// … truncated