Context Menu

1"use client";
2 
3import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu";
4import { CheckIcon, ChevronRightIcon } from "blode-icons-react";
5import type { ComponentProps } from "react";
6 
7import { cn } from "@/lib/utils";
8 
9const ContextMenu = ({ ...props }: ContextMenuPrimitive.Root.Props) => (
10  <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
11);
12 
13const ContextMenuPortal = ({ ...props }: ContextMenuPrimitive.Portal.Props) => (
14  <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
15);
16 
17const ContextMenuTrigger = ({ className, ...props }: ContextMenuPrimitive.Trigger.Props) => (
18  <ContextMenuPrimitive.Trigger
19    className={cn("select-none", className)}
20    data-slot="context-menu-trigger"
21    {...props}
22  />
23);
24 
25const ContextMenuContent = ({
26  className,
27  align = "start",
28  alignOffset = 4,
29  side = "right",
30  sideOffset = 0,
31  children,
32  ...props
33}: ContextMenuPrimitive.Popup.Props &
34  Pick<ContextMenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) => (
35  <ContextMenuPrimitive.Portal>
36    <ContextMenuPrimitive.Positioner
37      align={align}
38      alignOffset={alignOffset}
39      className="isolate z-50 outline-none"
40      side={side}
41      sideOffset={sideOffset}
42    >
43      <ContextMenuPrimitive.Popup
44        className={cn(
45          "cn-menu-target 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 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 min-w-36 origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-popover outline-none ring-1 ring-foreground/10 duration-100 data-closed:animate-out data-open:animate-in",
46          className,
47        )}
48        data-slot="context-menu-content"
49        {...props}
50      >
51        <div className="scroll-fade max-h-(--available-height) overflow-x-hidden overflow-y-auto p-1">
52          {children}
53        </div>
54      </ContextMenuPrimitive.Popup>
55    </ContextMenuPrimitive.Positioner>
56  </ContextMenuPrimitive.Portal>
57);
58 
59const ContextMenuGroup = ({ ...props }: ContextMenuPrimitive.Group.Props) => (
60  <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
61);
62 
63const ContextMenuLabel = ({
64  className,
65  inset,
66  ...props
67// … truncated