Dropdown Menu

1"use client";
2
3import { ComponentProps } from "react";
4
5import { Menu as MenuPrimitive } from "@base-ui/react/menu";
6
7import { cn } from "@/lib/utils";
8import { ChevronRightIcon, CheckIcon } from "lucide-react";
9
10function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
11  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
12}
13
14function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
15  return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
16}
17
18function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
19  return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
20}
21
22function DropdownMenuContent({
23  align = "start",
24  alignOffset = 0,
25  side = "bottom",
26  sideOffset = 4,
27  className,
28  ...props
29}: MenuPrimitive.Popup.Props &
30  Pick<
31    MenuPrimitive.Positioner.Props,
32    "align" | "alignOffset" | "side" | "sideOffset"
33  >) {
34  return (
35    <MenuPrimitive.Portal>
36      <MenuPrimitive.Positioner
37        className="isolate z-50 outline-none"
38        align={align}
39        alignOffset={alignOffset}
40        side={side}
41        sideOffset={sideOffset}
42      >
43        <MenuPrimitive.Popup
44          data-slot="dropdown-menu-content"
45          className={cn(
46            "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 max-h-(--available-height) w-(--anchor-width) min-w-40 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-4 shadow-[0_4px_24px_0_rgba(62,57,107,.18)] ring-0 duration-100 outline-none data-closed:overflow-hidden",
47            className
48          )}
49          {...props}
50        />
51      </MenuPrimitive.Positioner>
52    </MenuPrimitive.Portal>
53  );
54}
55
56function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
57  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
58}
59
60function DropdownMenuLabel({
61  className,
62  inset,
63  ...props
64}: MenuPrimitive.GroupLabel.Props & {
65  inset?: boolean;
66}) {
67  return (
68    <MenuPrimitive.GroupLabel
69// … truncated