context-menu

1import * as ContextMenuPrimitive from "@kobalte/core/context-menu";
2import type { PolymorphicProps } from "@kobalte/core/polymorphic";
3 
4import { cn } from "~/lib/utils.ts";
5import IconCheck from "~icons/lucide/check";
6import IconChevronRight from "~icons/lucide/chevron-right";
7 
8import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js";
9import { splitProps } from "solid-js";
10 
11// Kobalte's ContextMenuRoot and Portal render no DOM node, so unlike
12// upstream there is no element to stamp a data-slot attribute on.
13const ContextMenu: Component<ContextMenuPrimitive.ContextMenuRootProps> = (
14  props,
15) => {
16  return <ContextMenuPrimitive.Root {...props} />;
17};
18 
19const ContextMenuPortal = ContextMenuPrimitive.Portal;
20const ContextMenuSub = ContextMenuPrimitive.Sub;
21 
22type ContextMenuTriggerProps<T extends ValidComponent = "div"> =
23  & ContextMenuPrimitive.ContextMenuTriggerProps<T>
24  & {
25    class?: string | undefined;
26  };
27 
28const ContextMenuTrigger = <T extends ValidComponent = "div">(
29  props: PolymorphicProps<T, ContextMenuTriggerProps<T>>,
30) => {
31  const [local, others] = splitProps(props as ContextMenuTriggerProps, [
32    "class",
33  ]);
34  return (
35    <ContextMenuPrimitive.Trigger
36      data-slot="context-menu-trigger"
37      class={cn("select-none", local.class)}
38      {...others}
39    />
40  );
41};
42 
43type ContextMenuGroupProps<T extends ValidComponent = "div"> =
44  ContextMenuPrimitive.ContextMenuGroupProps<T>;
45 
46const ContextMenuGroup = <T extends ValidComponent = "div">(
47  props: PolymorphicProps<T, ContextMenuGroupProps<T>>,
48) => {
49  return (
50    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
51  );
52};
53 
54type ContextMenuRadioGroupProps<T extends ValidComponent = "div"> =
55  ContextMenuPrimitive.ContextMenuRadioGroupProps<T>;
56 
57const ContextMenuRadioGroup = <T extends ValidComponent = "div">(
58  props: PolymorphicProps<T, ContextMenuRadioGroupProps<T>>,
59) => {
60  return (
61    <ContextMenuPrimitive.RadioGroup
62      data-slot="context-menu-radio-group"
63      {...(props as ContextMenuRadioGroupProps)}
64    />
65  );
66};
67 
68type ContextMenuContentProps<T extends ValidComponent = "div"> =
69  & ContextMenuPrimitive.ContextMenuContentProps<T>
70  & {
71    class?: string | undefined;
72  };
73 
74const ContextMenuContent = <T extends ValidComponent = "div">(
75  props: PolymorphicProps<T, ContextMenuContentProps<T>>,
76) => {
77  const [local, others] = splitProps(props as ContextMenuContentProps, [
78    "class",
79  ]);
80  return (
81// … truncated