Popover

1import * as React from "react";
2import { Popover as BasePopover } from "@base-ui/react/popover";
3
4import { cn } from "@/lib/utils";
5import {
6  solidSurface,
7  type SurfaceLevel,
8} from "@/registry/default/lib/elevated";
9
10function Popover<Payload = unknown>({
11  ...props
12}: BasePopover.Root.Props<Payload>) {
13  return <BasePopover.Root data-slot="popover" {...props} />;
14}
15
16function PopoverPortal({ ...props }: BasePopover.Portal.Props) {
17  return <BasePopover.Portal data-slot="popover-portal" {...props} />;
18}
19
20function PopoverTrigger({ ...props }: BasePopover.Trigger.Props) {
21  return <BasePopover.Trigger data-slot="popover-trigger" {...props} />;
22}
23
24function PopoverClose({ ...props }: BasePopover.Close.Props) {
25  return <BasePopover.Close data-slot="popover-close" {...props} />;
26}
27
28function PopoverArrow({ ...props }: BasePopover.Arrow.Props) {
29  return <BasePopover.Arrow data-slot="popover-arrow" {...props} />;
30}
31
32function PopoverPositioner({ ...props }: BasePopover.Positioner.Props) {
33  return <BasePopover.Positioner data-slot="popover-positioner" {...props} />;
34}
35
36function PopoverViewport({ className, ...props }: BasePopover.Viewport.Props) {
37  return (
38    <BasePopover.Viewport
39      data-slot="popover-viewport"
40      // Same height and overflow policy as the viewport inside PopoverContent,
41      // which see for why both the percentage and the cap are needed. Padding
42      // is left to the caller; hand-composed popups own their own spacing.
43      className={cn(
44        "relative h-full max-h-(--available-height) w-full overflow-clip",
45        "not-data-transitioning:overflow-y-auto",
46        className,
47      )}
48      {...props}
49    />
50  );
51}
52
53function PopoverPopup({
54  className,
55  level = 3,
56  shadowLevel = 3,
57  ...props
58}: BasePopover.Popup.Props & {
59  level?: SurfaceLevel;
60  shadowLevel?: SurfaceLevel;
61}) {
62  return (
63    <BasePopover.Popup
64      data-slot="popover-popup"
65      data-level={level}
66      className={cn(
67        "text-popover-foreground relative max-h-(--available-height) max-w-(--available-width) origin-(--transform-origin) rounded-xl outline-none",
68        solidSurface(level, shadowLevel),
69        className,
70      )}
71      {...props}
72    />
73  );
74}
75
76function PopoverBackdrop({ className, ...props }: BasePopover.Backdrop.Props) {
77  return (
78    <BasePopover.Backdrop
79      data-slot="popover-backdrop"
80      className={cn(
81// … truncated