Context Menu

1import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js"
2import { splitProps } from "solid-js"
3 
4import * as ContextMenuPrimitive from "@kobalte/core/context-menu"
5import type { PolymorphicProps } from "@kobalte/core/polymorphic"
6 
7import { cn } from "~/lib/utils"
8 
9const ContextMenuTrigger = ContextMenuPrimitive.Trigger
10const ContextMenuPortal = ContextMenuPrimitive.Portal
11const ContextMenuSub = ContextMenuPrimitive.Sub
12const ContextMenuGroup = ContextMenuPrimitive.Group
13const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
14 
15const ContextMenu: Component<ContextMenuPrimitive.ContextMenuRootProps> = (props) => {
16  return <ContextMenuPrimitive.Root gutter={4} {...props} />
17}
18 
19type ContextMenuContentProps<T extends ValidComponent = "div"> =
20  ContextMenuPrimitive.ContextMenuContentProps<T> & {
21    class?: string | undefined
22  }
23 
24const ContextMenuContent = <T extends ValidComponent = "div">(
25  props: PolymorphicProps<T, ContextMenuContentProps<T>>
26) => {
27  const [local, others] = splitProps(props as ContextMenuContentProps, ["class"])
28  return (
29    <ContextMenuPrimitive.Portal>
30      <ContextMenuPrimitive.Content
31        class={cn(
32          "z-50 min-w-32 origin-[var(--kb-menu-content-transform-origin)] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in",
33          local.class
34        )}
35        {...others}
36      />
37    </ContextMenuPrimitive.Portal>
38  )
39}
40 
41type ContextMenuItemProps<T extends ValidComponent = "div"> =
42  ContextMenuPrimitive.ContextMenuItemProps<T> & {
43    class?: string | undefined
44  }
45 
46const ContextMenuItem = <T extends ValidComponent = "div">(
47  props: PolymorphicProps<T, ContextMenuItemProps<T>>
48) => {
49  const [local, others] = splitProps(props as ContextMenuItemProps, ["class"])
50  return (
51    <ContextMenuPrimitive.Item
52      class={cn(
53        "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
54        local.class
55      )}
56      {...others}
57    />
58  )
59}
60 
61const ContextMenuShortcut: Component<ComponentProps<"span">> = (props) => {
62  const [local, others] = splitProps(props, ["class"])
63  return <span class={cn("ml-auto text-xs tracking-widest opacity-60", local.class)} {...others} />
64}
65 
66type ContextMenuSeparatorProps<T extends ValidComponent = "hr"> =
67// … truncated