Hover card

1"use client";
2 
3import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
4import * as React from "react";
5 
6import { cn } from "@/lib/utils";
7 
8type HoverCardDelayContract = {
9  closeDelay: number;
10  openDelay: number;
11};
12 
13const HoverCardDelayContext = React.createContext<HoverCardDelayContract>({
14  closeDelay: 300,
15  openDelay: 700,
16});
17const HoverCardOpenContext = React.createContext(false);
18type HoverCardPortalContextValue = {
19  container: HTMLElement | null;
20  setContainer: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
21};
22const HoverCardPortalContext = React.createContext<HoverCardPortalContextValue | null>(null);
23 
24type HoverCardPointerDownOutsideEvent = CustomEvent<{ originalEvent: PointerEvent }>;
25type HoverCardFocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }>;
26type HoverCardInteractOutsideEvent = HoverCardPointerDownOutsideEvent | HoverCardFocusOutsideEvent;
27 
28type HoverCardDismissHandlers = {
29  onEscapeKeyDown?: (event: KeyboardEvent) => void;
30  onFocusOutside?: (event: HoverCardFocusOutsideEvent) => void;
31  onInteractOutside?: (event: HoverCardInteractOutsideEvent) => void;
32  onPointerDownOutside?: (event: HoverCardPointerDownOutsideEvent) => void;
33};
34 
35const HoverCardDismissContext =
36  React.createContext<React.RefObject<HoverCardDismissHandlers> | null>(null);
37 
38type CollisionBoundary =
39  | PreviewCardPrimitive.Positioner.Props["collisionBoundary"]
40  | null
41  | Array<Element | null>;
42type CSSPropertiesWithVariables = React.CSSProperties & {
43  [name: `--${string}`]: string | number | undefined;
44};
45type HoverCardPositioningProps = Pick<
46  PreviewCardPrimitive.Positioner.Props,
47  | "align"
48  | "alignOffset"
49  | "arrowPadding"
50  | "collisionAvoidance"
51  | "collisionPadding"
52  | "disableAnchorTracking"
53  | "positionMethod"
54  | "side"
55  | "sideOffset"
56> & {
57  avoidCollisions?: boolean;
58  collisionBoundary?: CollisionBoundary;
59  hideWhenDetached?: boolean;
60  sticky?: "partial" | "always";
61  updatePositionStrategy?: "optimized" | "always";
62};
63 
64const hoverCardCssVariables: CSSPropertiesWithVariables = {
65  "--radix-hover-card-content-available-height": "var(--available-height)",
66  "--radix-hover-card-content-available-width": "var(--available-width)",
67  "--radix-hover-card-content-transform-origin": "var(--transform-origin)",
68  "--radix-hover-card-trigger-height": "var(--anchor-height)",
69  "--radix-hover-card-trigger-width": "var(--anchor-width)",
70};
71 
72function mergePopupStyle(
73// … truncated