Context Menu

1import { ContextMenu as KobalteContextMenu } from "@kobalte/core/context-menu";
2import { Check, ChevronRight, Circle } from "lucide-solid";
3import type { Component, ComponentProps, JSX } from "solid-js";
4import { splitProps } from "solid-js";
5import { cn } from "~/lib/utils";
6 
7const ContextMenu = KobalteContextMenu;
8const ContextMenuTrigger = KobalteContextMenu.Trigger;
9const ContextMenuSub = KobalteContextMenu.Sub;
10const ContextMenuRadioGroup = KobalteContextMenu.RadioGroup;
11 
12const ContextMenuContent: Component<ComponentProps<typeof KobalteContextMenu.Content>> = (
13  props,
14) => {
15  const [local, rest] = splitProps(props, ["class"]);
16  return (
17    <KobalteContextMenu.Portal>
18      <KobalteContextMenu.Content
19        class={cn(
20          "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
21          "animate-in fade-in-0 zoom-in-95",
22          local.class,
23        )}
24        {...rest}
25      />
26    </KobalteContextMenu.Portal>
27  );
28};
29 
30const ContextMenuItem: Component<
31  ComponentProps<typeof KobalteContextMenu.Item> & { inset?: boolean }
32> = (props) => {
33  const [local, rest] = splitProps(props, ["class", "inset"]);
34  return (
35    <KobalteContextMenu.Item
36      class={cn(
37        "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
38        "focus:bg-accent focus:text-accent-foreground",
39        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
40        local.inset && "pl-8",
41        local.class,
42      )}
43      {...rest}
44    />
45  );
46};
47 
48const ContextMenuCheckboxItem: Component<ComponentProps<typeof KobalteContextMenu.CheckboxItem>> = (
49  props,
50) => {
51  const [local, rest] = splitProps(props, ["class", "children"]);
52  return (
53    <KobalteContextMenu.CheckboxItem
54      class={cn(
55        "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
56        "focus:bg-accent focus:text-accent-foreground",
57        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
58        local.class,
59      )}
60      {...rest}
61    >
62      <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
63        <KobalteContextMenu.ItemIndicator>
64          <Check class="h-4 w-4" />
65        </KobalteContextMenu.ItemIndicator>
66      </span>
67      {local.children}
68    </KobalteContextMenu.CheckboxItem>
69  );
70};
71 
72// … truncated