Dropdown Menu

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