Dropdown menu

1"use client";
2 
3import * as React from "react";
4import { DirectionProvider } from "@base-ui/react/direction-provider";
5import { Menu as MenuPrimitive } from "@base-ui/react/menu";
6 
7import { cn } from "@/lib/utils";
8import { ChevronRightIcon, CheckIcon, CircleIcon } from "lucide-react";
9 
10type MenuLifecycleHandler<EventType extends Event = Event> = {
11  bivarianceHack(event: EventType): void;
12}["bivarianceHack"];
13 
14type MenuOutsideEvent = CustomEvent<{ originalEvent: Event }>;
15 
16function setMenuOutsideEventTarget(event: Event, originalEvent: Event) {
17  for (const property of ["target", "currentTarget"] as const) {
18    Object.defineProperty(event, property, {
19      configurable: true,
20      value: originalEvent.target,
21    });
22  }
23}
24 
25type MenuContentLifecycleProps = {
26  onCloseAutoFocus?: MenuLifecycleHandler;
27  onEscapeKeyDown?: MenuLifecycleHandler<KeyboardEvent>;
28  onFocusOutside?: MenuLifecycleHandler<MenuOutsideEvent>;
29  onInteractOutside?: MenuLifecycleHandler<MenuOutsideEvent>;
30  onOpenAutoFocus?: MenuLifecycleHandler;
31  onPointerDownOutside?: MenuLifecycleHandler<MenuOutsideEvent>;
32};
33 
34type CheckedState = boolean | "indeterminate";
35type CollisionBoundary =
36  | MenuPrimitive.Positioner.Props["collisionBoundary"]
37  | null
38  | Array<Element | null>;
39type CSSPropertiesWithVariables = React.CSSProperties & {
40  [name: `--${string}`]: string | number | undefined;
41};
42type MenuPositioningProps = Pick<
43  MenuPrimitive.Positioner.Props,
44  | "align"
45  | "alignOffset"
46  | "arrowPadding"
47  | "collisionAvoidance"
48  | "collisionPadding"
49  | "disableAnchorTracking"
50  | "positionMethod"
51  | "side"
52  | "sideOffset"
53> & {
54  avoidCollisions?: boolean;
55  collisionBoundary?: CollisionBoundary;
56  hideWhenDetached?: boolean;
57  sticky?: "partial" | "always";
58  updatePositionStrategy?: "optimized" | "always";
59};
60 
61const dropdownMenuCssVariables: CSSPropertiesWithVariables = {
62  "--radix-dropdown-menu-content-available-height": "var(--available-height)",
63  "--radix-dropdown-menu-content-available-width": "var(--available-width)",
64  "--radix-dropdown-menu-content-transform-origin": "var(--transform-origin)",
65  "--radix-dropdown-menu-trigger-height": "var(--anchor-height)",
66  "--radix-dropdown-menu-trigger-width": "var(--anchor-width)",
67};
68 
69function mergePopupStyle(
70  style: MenuPrimitive.Popup.Props["style"],
71): MenuPrimitive.Popup.Props["style"] {
72  if (typeof style === "function") {
73    return (state) => ({ ...dropdownMenuCssVariables, ...style(state) });
74  }
75 
76// … truncated