Context Menu

1'use client';
2 
3import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
4import * as React from 'react';
5 
6import { Icon } from '@/components/ui/icon';
7import { IconShell } from '@/components/ui/icon-shell';
8import { cn } from '@/lib/utils';
9 
10type ContextMenuSize = 'default' | 'lg';
11 
12const ContextMenuSizeContext = React.createContext<ContextMenuSize>('default');
13 
14function useContextMenuSize() {
15  return React.useContext(ContextMenuSizeContext);
16}
17 
18function CheckboxItemMark() {
19  return (
20    <svg
21      xmlns="http://www.w3.org/2000/svg"
22      className="h-[7px] w-2"
23      viewBox="0 0 8 7"
24      fill="none">
25      <path
26        fillRule="evenodd"
27        clipRule="evenodd"
28        d="M7.5 1.25L6.25 0L2.5 3.75L1.25 2.5L0 3.75L2.5 6.25L7.5 1.25Z"
29        fill="currentColor"
30      />
31    </svg>
32  );
33}
34 
35function ContextMenu({
36  ...props
37}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
38  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
39}
40 
41function ContextMenuPortal({
42  ...props
43}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
44  return (
45    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
46  );
47}
48 
49function ContextMenuTrigger({
50  ...props
51}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
52  return (
53    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
54  );
55}
56 
57interface ContextMenuContentProps extends React.ComponentProps<
58  typeof ContextMenuPrimitive.Content
59> {
60  children?: React.ReactNode;
61  onOpenAutoFocus?: (event: Event) => void;
62  size?: ContextMenuSize;
63}
64 
65function ContextMenuContent({
66  className,
67  size = 'default',
68  ...props
69}: ContextMenuContentProps) {
70  return (
71    <ContextMenuPrimitive.Portal>
72      <ContextMenuSizeContext.Provider value={size}>
73        <ContextMenuPrimitive.Content
74          data-slot="context-menu-content"
75          data-size={size}
76          className={cn(
77// … truncated