Popover

1"use client";
2 
3import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
4import { RemoveScroll } from "react-remove-scroll";
5import { createContext, useContext } from "react";
6import type * as React from "react";
7import { cn } from "@/lib/utils";
8import {
9  mobilePopupBackdrop,
10  mobilePopupSurface,
11  overlayLayer,
12  popupSurface,
13} from "@/lib/recipes";
14import {
15  MOBILE_MEDIA_QUERY,
16  useMediaQuery,
17} from "../hooks/use-media-query";
18 
19export type PopoverSide = "top" | "bottom" | "left" | "right";
20export type PopoverAlign = "start" | "center" | "end";
21 
22const PopoverMobileContext = createContext(false);
23 
24export interface PopoverProps
25  extends Omit<
26    React.ComponentProps<typeof PopoverPrimitive.Root>,
27    "children"
28  > {
29  children: React.ReactNode;
30}
31 
32/** Floating panel anchored to a trigger. Use for notification lists,
33 *  filter panels, mini-forms, and any arbitrary content that Menu /
34 *  Tooltip / Modal don't fit. */
35export function Popover({
36  children,
37  modal,
38  ...props
39}: PopoverProps): React.ReactElement {
40  const isMobile = useMediaQuery(MOBILE_MEDIA_QUERY);
41 
42  return (
43    <PopoverPrimitive.Root
44      data-slot="popover"
45      modal={isMobile ? true : modal}
46      {...props}
47    >
48      <PopoverMobileContext.Provider value={isMobile}>
49        {children}
50      </PopoverMobileContext.Provider>
51    </PopoverPrimitive.Root>
52  );
53}
54 
55export type PopoverTriggerProps = React.ComponentProps<
56  typeof PopoverPrimitive.Trigger
57>;
58 
59export function PopoverTrigger(
60  props: PopoverTriggerProps,
61): React.ReactElement {
62  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
63}
64 
65export interface PopoverContentProps
66  extends Omit<
67    React.ComponentProps<typeof PopoverPrimitive.Popup>,
68    "children"
69  > {
70  /** Desktop placement. Mobile uses a centered modal surface. */
71  side?: PopoverSide;
72  /** Desktop alignment. Mobile uses a centered modal surface. */
73  align?: PopoverAlign;
74  /** Desktop trigger offset. Mobile uses viewport gutters. */
75  sideOffset?: number;
76  /** Desktop positioning anchor. Defaults to the Popover trigger. */
77  anchor?: React.ComponentProps<typeof PopoverPrimitive.Positioner>["anchor"];
78  /** Optional desktop arrow pointing at the trigger. */
79  arrow?: boolean;
80  children?: React.ReactNode;
81}
82 
83export function PopoverContent({
84  side = "bottom",
85  align = "center",
86  sideOffset = 6,
87  anchor,
88  arrow,
89  className,
90  children,
91  ...props
92}: PopoverContentProps): React.ReactElement {
93// … truncated