Context Menu

1"use client";
2 
3import * as React from "react";
4import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu";
5 
6import { cn } from "@/lib/utils";
7import { ChevronRightIcon, CheckIcon, CircleIcon } from "lucide-react";
8 
9function ContextMenu({ ...props } = {}) {
10	return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
11}
12 
13function ContextMenuPortal({ ...props } = {}) {
14	return (
15		<ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
16	);
17}
18 
19function ContextMenuTrigger({ className = "", ...props }) {
20	return (
21		<ContextMenuPrimitive.Trigger
22			data-slot="context-menu-trigger"
23			className={cn("select-none", className)}
24			{...props}
25		/>
26	);
27}
28 
29function ContextMenuContent({
30	className = "",
31	align = "start",
32	alignOffset = 4,
33	side = "right",
34	sideOffset = 0,
35	...props
36}) {
37	return (
38		<ContextMenuPrimitive.Portal>
39			<ContextMenuPrimitive.Positioner
40				className="isolate z-50 outline-none"
41				align={align}
42				alignOffset={alignOffset}
43				side={side}
44				sideOffset={sideOffset}
45			>
46				<ContextMenuPrimitive.Popup
47					data-slot="context-menu-content"
48					className={cn(
49						"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 z-50 max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none",
50						className,
51					)}
52					{...props}
53				/>
54			</ContextMenuPrimitive.Positioner>
55		</ContextMenuPrimitive.Portal>
56	);
57}
58 
59function ContextMenuGroup({ ...props } = {}) {
60	return (
61		<ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
62	);
63}
64 
65function ContextMenuLabel({ className = "", inset = false, ...props }) {
66	return (
67		<ContextMenuPrimitive.Group>
68			<ContextMenuPrimitive.GroupLabel
69				data-slot="context-menu-label"
70				data-inset={inset}
71				className={cn(
72					"text-muted-foreground px-2 py-1.5 text-xs data-[inset]:pl-8",
73					className,
74				)}
75				{...props}
76			/>
77		</ContextMenuPrimitive.Group>
78	);
79}
80 
81function ContextMenuItem({
82	className = "",
83	inset = false,
84	variant = "default",
85	...props
86}) {
87	return (
88		<ContextMenuPrimitive.Item
89			data-slot="context-menu-item"
90			data-inset={inset}
91// … truncated