dropdown-menu

1import * as DropdownMenuPrimitive from "@kobalte/core/dropdown-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 DropdownMenuRoot, Portal and Sub render no DOM node, so unlike
12// upstream there is no element to stamp a data-slot attribute on. The
13// gutter matches upstream's sideOffset={4} (Kobalte's popper defaults to 0).
14const DropdownMenu: Component<DropdownMenuPrimitive.DropdownMenuRootProps> = (
15  props,
16) => {
17  return <DropdownMenuPrimitive.Root gutter={4} {...props} />;
18};
19 
20const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
21const DropdownMenuSub = DropdownMenuPrimitive.Sub;
22 
23type DropdownMenuTriggerProps<T extends ValidComponent = "button"> =
24  & DropdownMenuPrimitive.DropdownMenuTriggerProps<T>
25  & {
26    class?: string | undefined;
27  };
28 
29const DropdownMenuTrigger = <T extends ValidComponent = "button">(
30  props: PolymorphicProps<T, DropdownMenuTriggerProps<T>>,
31) => {
32  return (
33    <DropdownMenuPrimitive.Trigger
34      data-slot="dropdown-menu-trigger"
35      {...(props as DropdownMenuTriggerProps)}
36    />
37  );
38};
39 
40type DropdownMenuContentProps<T extends ValidComponent = "div"> =
41  & DropdownMenuPrimitive.DropdownMenuContentProps<T>
42  & {
43    class?: string | undefined;
44  };
45 
46const DropdownMenuContent = <T extends ValidComponent = "div">(
47  props: PolymorphicProps<T, DropdownMenuContentProps<T>>,
48) => {
49  const [local, others] = splitProps(props as DropdownMenuContentProps, [
50    "class",
51  ]);
52  return (
53    <DropdownMenuPrimitive.Portal>
54      <DropdownMenuPrimitive.Content
55        data-slot="dropdown-menu-content"
56        class={cn(
57          "data-expanded:animate-in data-closed:animate-out data-closed:fade-out-0 data-expanded:fade-in-0 data-closed:zoom-out-95 data-expanded:zoom-in-95 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 z-50 max-h-(--kb-popper-content-available-height) w-(--kb-popper-anchor-width) origin-(--kb-menu-content-transform-origin) overflow-y-auto overflow-x-hidden data-closed:overflow-hidden",
58          local.class,
59        )}
60        {...others}
61      />
62    </DropdownMenuPrimitive.Portal>
63  );
64};
65 
66type DropdownMenuGroupProps<T extends ValidComponent = "div"> =
67// … truncated