Menu

1"use client";
2 
3import { Menu as MenuPrimitive } from "@base-ui/react/menu";
4import { CaretRight, Check } from "@phosphor-icons/react/dist/ssr";
5import { RemoveScroll } from "react-remove-scroll";
6import { createContext, useContext } from "react";
7import type * as React from "react";
8import { cn } from "@/lib/utils";
9import {
10  itemGroupLabel,
11  itemRow,
12  mobilePopupBackdrop,
13  mobilePopupSurface,
14  overlayLayer,
15  popupDivider,
16  popupSurface,
17} from "@/lib/recipes";
18import { Checkbox } from "@/components/ui/checkbox";
19import {
20  MOBILE_MEDIA_QUERY,
21  useMediaQuery,
22} from "../hooks/use-media-query";
23 
24type Density = "compact" | "comfortable";
25 
26const MenuDensityContext = createContext<Density>("comfortable");
27const MenuMobileContext = createContext(false);
28 
29/* --------------------------------- Root -------------------------------- */
30 
31export interface MenuProps {
32  open?: boolean;
33  onOpenChange?: (open: boolean) => void;
34  defaultOpen?: boolean;
35  modal?: boolean;
36  children: React.ReactNode;
37}
38 
39export function Menu({
40  open,
41  onOpenChange,
42  defaultOpen,
43  modal,
44  children,
45}: MenuProps): React.ReactElement {
46  const isMobile = useMediaQuery(MOBILE_MEDIA_QUERY);
47 
48  return (
49    <MenuPrimitive.Root
50      open={open}
51      onOpenChange={onOpenChange}
52      defaultOpen={defaultOpen}
53      modal={isMobile ? true : (modal ?? false)}
54    >
55      <MenuMobileContext.Provider value={isMobile}>
56        {children}
57      </MenuMobileContext.Provider>
58    </MenuPrimitive.Root>
59  );
60}
61 
62/* ------------------------------- Trigger ------------------------------- */
63 
64export type MenuTriggerProps = React.ComponentProps<
65  typeof MenuPrimitive.Trigger
66>;
67 
68export function MenuTrigger(props: MenuTriggerProps): React.ReactElement {
69  return <MenuPrimitive.Trigger data-slot="menu-trigger" {...props} />;
70}
71 
72/* -------------------------------- Popup -------------------------------- */
73 
74export interface MenuPopupProps
75  extends Omit<
76    React.ComponentProps<typeof MenuPrimitive.Popup>,
77    "children"
78  > {
79  density?: Density;
80  /** Desktop placement. Mobile uses a centered modal surface. */
81  side?: "top" | "bottom" | "left" | "right" | "inline-start" | "inline-end";
82  /** Desktop alignment. Mobile uses a centered modal surface. */
83  align?: "start" | "center" | "end";
84  /** Desktop trigger offset. Mobile uses viewport gutters. */
85  sideOffset?: number;
86  /** Internal: sub-menus opt out of the centered mobile treatment. */
87  sub?: boolean;
88  children?: React.ReactNode;
89}
90 
91// … truncated