Dropdown Menu

1import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js"
2import { splitProps } from "solid-js"
3 
4import * as DropdownMenuPrimitive from "@kobalte/core/dropdown-menu"
5import type { PolymorphicProps } from "@kobalte/core/polymorphic"
6 
7import { cn } from "~/lib/utils"
8 
9const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
10const DropdownMenuPortal = DropdownMenuPrimitive.Portal
11const DropdownMenuSub = DropdownMenuPrimitive.Sub
12const DropdownMenuGroup = DropdownMenuPrimitive.Group
13const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
14 
15const DropdownMenu: Component<DropdownMenuPrimitive.DropdownMenuRootProps> = (props) => {
16  return <DropdownMenuPrimitive.Root gutter={4} {...props} />
17}
18 
19type DropdownMenuContentProps<T extends ValidComponent = "div"> =
20  DropdownMenuPrimitive.DropdownMenuContentProps<T> & {
21    class?: string | undefined
22  }
23 
24const DropdownMenuContent = <T extends ValidComponent = "div">(
25  props: PolymorphicProps<T, DropdownMenuContentProps<T>>
26) => {
27  const [, rest] = splitProps(props as DropdownMenuContentProps, ["class"])
28  return (
29    <DropdownMenuPrimitive.Portal>
30      <DropdownMenuPrimitive.Content
31        class={cn(
32          "z-50 min-w-32 origin-[var(--kb-menu-content-transform-origin)] animate-content-hide overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[expanded]:animate-content-show",
33          props.class
34        )}
35        {...rest}
36      />
37    </DropdownMenuPrimitive.Portal>
38  )
39}
40 
41type DropdownMenuItemProps<T extends ValidComponent = "div"> =
42  DropdownMenuPrimitive.DropdownMenuItemProps<T> & {
43    class?: string | undefined
44  }
45 
46const DropdownMenuItem = <T extends ValidComponent = "div">(
47  props: PolymorphicProps<T, DropdownMenuItemProps<T>>
48) => {
49  const [, rest] = splitProps(props as DropdownMenuItemProps, ["class"])
50  return (
51    <DropdownMenuPrimitive.Item
52      class={cn(
53        "relative flex cursor-default select-none items-center gap-2 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        props.class
55      )}
56      {...rest}
57    />
58  )
59}
60 
61const DropdownMenuShortcut: Component<ComponentProps<"span">> = (props) => {
62  const [, rest] = splitProps(props, ["class"])
63  return <span class={cn("ml-auto text-xs tracking-widest opacity-60", props.class)} {...rest} />
64}
65 
66// … truncated