Dropdown Menu

1
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
2
import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js";
3

4
import { splitProps } from "solid-js";
5
import * as DropdownMenuPrimitive from "@kobalte/core/dropdown-menu";
6
import CheckIcon from "lucide-solid/icons/check";
7
import ChevronRightIcon from "lucide-solid/icons/chevron-right";
8
import DotIcon from "lucide-solid/icons/dot";
9

10
import { cn } from "~/lib/utils";
11

12
const DropdownMenuTrigger = <T extends ValidComponent = "button">(
13
  props: PolymorphicProps<T, DropdownMenuPrimitive.DropdownMenuTriggerProps<T>>,
14
) => {
15
  return (
16
    <DropdownMenuPrimitive.Trigger
17
      data-slot="dropdown-menu-trigger"
18
      {...props}
19
    />
20
  );
21
};
22

23
const DropdownMenuPortal = (
24
  props: DropdownMenuPrimitive.DropdownMenuPortalProps,
25
) => {
26
  return (
27
    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
28
  );
29
};
30

31
const DropdownMenuSub = (props: DropdownMenuPrimitive.DropdownMenuSubProps) => {
32
  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
33
};
34

35
const DropdownMenuGroup = <T extends ValidComponent = "div">(
36
  props: PolymorphicProps<T, DropdownMenuPrimitive.DropdownMenuGroupProps<T>>,
37
) => {
38
  return (
39
    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
40
  );
41
};
42

43
const DropdownMenuRadioGroup = <
44
  TValue = string,
45
  T extends ValidComponent = "div",
46
>(
47
  props: PolymorphicProps<
48
    T,
49
    DropdownMenuPrimitive.DropdownMenuRadioGroupProps<T, TValue>
50
  >,
51
) => {
52
  return (
53
    <DropdownMenuPrimitive.RadioGroup
54
      data-slot="dropdown-menu-radio-group"
55
      {...props}
56
    />
57
  );
58
};
59

60
const DropdownMenu: Component<DropdownMenuPrimitive.DropdownMenuRootProps> = (
61
  props,
62
) => {
63
  return (
64
    <DropdownMenuPrimitive.Root
65
      data-slot="dropdown-menu"
66
      gutter={4}
67
      {...props}
68
    />
69
  );
70
};
71

72
type DropdownMenuContentProps<T extends ValidComponent = "div"> =
73
  DropdownMenuPrimitive.DropdownMenuContentProps<T> & {
74
    class?: string | undefined;
75
  };
76

77
const DropdownMenuContent = <T extends ValidComponent = "div">(
78
  props: PolymorphicProps<T, DropdownMenuContentProps<T>>,
79
) => {
80
  const [, rest] = splitProps(props as DropdownMenuContentProps, ["class"]);
81
  return (
82
    <DropdownMenuPrimitive.Portal>
83
      <DropdownMenuPrimitive.Content
84
        data-slot="dropdown-menu-content"
85
        class={cn(
86
          "z-50 min-w-32 origin-[var(--kb-menu-content-transform-origin)] animate-out overflow-hidden rounded-base border-2 border-border bg-background p-1 text-foreground shadow-md ui-expanded:animate-in",
87
          props.class,
88
        )}
89
        {...rest}
90
      />
91
    </DropdownMenuPrimitive.Portal>
92
  );
93
};
94

95
type DropdownMenuItemProps<T extends ValidComponent = "div"> =
96
  DropdownMenuPrimitive.DropdownMenuItemProps<T> & {
97
    class?: string | undefined;
98
  };
99

100
const DropdownMenuItem = <T extends ValidComponent = "div">(
101
  props: PolymorphicProps<T, DropdownMenuItemProps<T>>,
102
) => {
103
  const [, rest] = splitProps(props as DropdownMenuItemProps, ["class"]);
104
  return (
105
    <DropdownMenuPrimitive.Item
106
      data-slot="dropdown-menu-item"
107
      class={cn(
108
        "relative flex cursor-default items-center gap-2 rounded-base px-2 py-1.5 text-sm transition-colors outline-none select-none hover:bg-primary hover:text-primary-foreground focus:border-border ui-disabled:pointer-events-none ui-disabled:opacity-50",
109
        props.class,
110
      )}
111
      {...rest}
112
    />
113
  );
114
};
115

116
const DropdownMenuShortcut: Component<ComponentProps<"span">> = (props) => {
117
  const [, rest] = splitProps(props, ["class"]);
118
  return (
119
    <span
120
      data-slot="dropdown-menu-shortcut"
121
      class={cn("ml-auto text-xs tracking-widest opacity-60", props.class)}
122
      {...rest}
123
    />
124
  );
125
};
126

127
const DropdownMenuLabel: Component<
128
  ComponentProps<"div"> & { inset?: boolean }
129
> = (props) => {
130
  const [, rest] = splitProps(props, ["class", "inset"]);
131
  return (
132
    <div
133
      data-slot="dropdown-menu-label"
134
      class={cn(
135
        "px-2 py-1.5 text-sm font-semibold",
136
        props.inset && "pl-8",
137
        props.class,
138
      )}
139
      {...rest}
140
    />
141
  );
142
};
143

144
type DropdownMenuSeparatorProps<T extends ValidComponent = "hr"> =
145
  DropdownMenuPrimitive.DropdownMenuSeparatorProps<T> & {
146
    class?: string | undefined;
147
  };
148

149
const DropdownMenuSeparator = <T extends ValidComponent = "hr">(
150
  props: PolymorphicProps<T, DropdownMenuSeparatorProps<T>>,
151
) => {
152
  const [, rest] = splitProps(props as DropdownMenuSeparatorProps, ["class"]);
153
  return (
154
    <DropdownMenuPrimitive.Separator
155
      data-slot="dropdown-menu-separator"
156
      class={cn("-mx-1 my-1 h-0.5 bg-border", props.class)}
157
      {...rest}
158
    />
159
  );
160
};
161

162
type DropdownMenuSubTriggerProps<T extends ValidComponent = "div"> =
163
  DropdownMenuPrimitive.DropdownMenuSubTriggerProps<T> & {
164
    class?: string | undefined;
165
    children?: JSX.Element;
166
  };
167

168
const DropdownMenuSubTrigger = <T extends ValidComponent = "div">(
169
  props: PolymorphicProps<T, DropdownMenuSubTriggerProps<T>>,
170
) => {
171
  const [, rest] = splitProps(props as DropdownMenuSubTriggerProps, [
172
    "class",
173
    "children",
174
  ]);
175
  return (
176
    <DropdownMenuPrimitive.SubTrigger
177
      data-slot="dropdown-menu-sub-trigger"
178
      class={cn(
179
        "flex cursor-default items-center rounded-base px-2 py-1.5 text-sm outline-none select-none focus:bg-primary ui-expanded:bg-primary",
180
        props.class,
181
      )}
182
      {...rest}
183
    >
184
      {props.children}
185
      <ChevronRightIcon class="ml-auto size-4" />
186
    </DropdownMenuPrimitive.SubTrigger>
187
  );
188
};
189

190
type DropdownMenuSubContentProps<T extends ValidComponent = "div"> =
191
  DropdownMenuPrimitive.DropdownMenuSubContentProps<T> & {
192
    class?: string | undefined;
193
  };
194

195
const DropdownMenuSubContent = <T extends ValidComponent = "div">(
196
  props: PolymorphicProps<T, DropdownMenuSubContentProps<T>>,
197
) => {
198
  const [, rest] = splitProps(props as DropdownMenuSubContentProps, ["class"]);
199
  return (
200
    <DropdownMenuPrimitive.SubContent
201
      data-slot="dropdown-menu-sub-content"
202
      class={cn(
203
        "shadow-base z-50 min-w-32 origin-[var(--kb-menu-content-transform-origin)] animate-in overflow-hidden rounded-md border-2 bg-background p-1 text-foreground",
204
        props.class,
205
      )}
206
      {...rest}
207
    />
208
  );
209
};
210

211
type DropdownMenuCheckboxItemProps<T extends ValidComponent = "div"> =
212
  DropdownMenuPrimitive.DropdownMenuCheckboxItemProps<T> & {
213
    class?: string | undefined;
214
    children?: JSX.Element;
215
  };
216

217
const DropdownMenuCheckboxItem = <T extends ValidComponent = "div">(
218
  props: PolymorphicProps<T, DropdownMenuCheckboxItemProps<T>>,
219
) => {
220
  const [, rest] = splitProps(props as DropdownMenuCheckboxItemProps, [
221
    "class",
222
    "children",
223
  ]);
224
  return (
225
    <DropdownMenuPrimitive.CheckboxItem
226
      data-slot="dropdown-menu-checkbox-item"
227
      class={cn(
228
        "relative flex cursor-default items-center rounded-base py-1.5 pr-2 pl-8 text-sm transition-colors outline-none select-none focus:bg-primary focus:text-primary-foreground ui-disabled:pointer-events-none ui-disabled:opacity-50",
229
        props.class,
230
      )}
231
      {...rest}
232
    >
233
      <span class="absolute left-2 flex size-3.5 items-center justify-center">
234
        <DropdownMenuPrimitive.ItemIndicator>
235
          <CheckIcon class="size-4" />
236
        </DropdownMenuPrimitive.ItemIndicator>
237
      </span>
238
      {props.children}
239
    </DropdownMenuPrimitive.CheckboxItem>
240
  );
241
};
242

243
type DropdownMenuGroupLabelProps<T extends ValidComponent = "span"> =
244
  DropdownMenuPrimitive.DropdownMenuGroupLabelProps<T> & {
245
    class?: string | undefined;
246
  };
247

248
const DropdownMenuGroupLabel = <T extends ValidComponent = "span">(
249
  props: PolymorphicProps<T, DropdownMenuGroupLabelProps<T>>,
250
) => {
251
  const [, rest] = splitProps(props as DropdownMenuGroupLabelProps, ["class"]);
252
  return (
253
    <DropdownMenuPrimitive.GroupLabel
254
      data-slot="dropdown-menu-group-label"
255
      class={cn("px-2 py-1.5 text-sm font-semibold", props.class)}
256
      {...rest}
257
    />
258
  );
259
};
260

261
type DropdownMenuRadioItemProps<T extends ValidComponent = "div"> =
262
  DropdownMenuPrimitive.DropdownMenuRadioItemProps<T> & {
263
    class?: string | undefined;
264
    children?: JSX.Element;
265
  };
266

267
const DropdownMenuRadioItem = <T extends ValidComponent = "div">(
268
  props: PolymorphicProps<T, DropdownMenuRadioItemProps<T>>,
269
) => {
270
  const [, rest] = splitProps(props as DropdownMenuRadioItemProps, [
271
    "class",
272
    "children",
273
  ]);
274
  return (
275
    <DropdownMenuPrimitive.RadioItem
276
      data-slot="dropdown-menu-radio-item"
277
      class={cn(
278
        "relative flex cursor-default items-center rounded-base py-1.5 pr-2 pl-8 text-sm transition-colors outline-none select-none focus:bg-primary focus:text-primary-foreground ui-disabled:pointer-events-none ui-disabled:opacity-50",
279
        props.class,
280
      )}
281
      {...rest}
282
    >
283
      <span class="absolute left-2 flex size-3.5 items-center justify-center">
284
        <DropdownMenuPrimitive.ItemIndicator>
285
          <DotIcon class="size-10" />
286
        </DropdownMenuPrimitive.ItemIndicator>
287
      </span>
288
      {props.children}
289
    </DropdownMenuPrimitive.RadioItem>
290
  );
291
};
292

293
export {
294
  DropdownMenu,
295
  DropdownMenuTrigger,
296
  DropdownMenuPortal,
297
  DropdownMenuContent,
298
  DropdownMenuItem,
299
  DropdownMenuShortcut,
300
  DropdownMenuLabel,
301
  DropdownMenuSeparator,
302
  DropdownMenuSub,
303
  DropdownMenuSubTrigger,
304
  DropdownMenuSubContent,
305
  DropdownMenuCheckboxItem,
306
  DropdownMenuGroup,
307
  DropdownMenuGroupLabel,
308
  DropdownMenuRadioGroup,
309
  DropdownMenuRadioItem,
310
};