Hover Card

1"use client";
2 
3import * as React from "react";
4import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
5 
6import { cn } from "@/lib/utils";
7 
8// Context local para cada instancia de HoverCard para manejar estados de interacción
9const HoverCardInstanceContext = React.createContext({
10	shouldKeepOpenRef: { current: false },
11	setShouldKeepOpen: () => {},
12	isPointerOverTriggerRef: { current: false },
13	isPointerOverContentRef: { current: false },
14	openHoverCard: () => {},
15	delay: 600,
16});
17 
18function HoverCard({
19	open: controlledOpen,
20	onOpenChange,
21	delay = 600,
22	...props
23} = {}) {
24	const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
25 
26	const isControlled = controlledOpen !== undefined;
27	const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
28 
29	// Refs locales para cada instancia de HoverCard
30	const shouldKeepOpenRef = React.useRef(false);
31	const isPointerOverTriggerRef = React.useRef(false);
32	const isPointerOverContentRef = React.useRef(false);
33 
34	const setShouldKeepOpen = React.useCallback((value) => {
35		shouldKeepOpenRef.current = value;
36	}, []);
37 
38	const openHoverCard = React.useCallback(() => {
39		if (isControlled) {
40			onOpenChange?.(true);
41		} else {
42			setUncontrolledOpen(true);
43		}
44	}, [isControlled, onOpenChange]);
45 
46	function handleOpenChange(nextOpen, eventDetails) {
47		// Lógica para mantener abierto si el mouse está sobre el trigger o el contenido
48		if (!nextOpen) {
49			if (
50				isPointerOverTriggerRef.current ||
51				isPointerOverContentRef.current ||
52				shouldKeepOpenRef.current
53			) {
54				if (isControlled) {
55					onOpenChange?.(true);
56				} else {
57					setUncontrolledOpen(true);
58				}
59				return;
60			}
61		}
62 
63		if (!isControlled) {
64			setUncontrolledOpen(nextOpen);
65		}
66 
67		if (nextOpen) {
68			setShouldKeepOpen(true);
69		} else {
70			setShouldKeepOpen(false);
71		}
72 
73		onOpenChange?.(nextOpen, eventDetails);
74	}
75 
76	return (
77		<HoverCardInstanceContext.Provider
78			value={{
79				shouldKeepOpenRef,
80				setShouldKeepOpen,
81				isPointerOverTriggerRef,
82				isPointerOverContentRef,
83				openHoverCard,
84				delay,
85			}}
86		>
87			<PreviewCardPrimitive.Root
88				data-slot="hover-card"
89				open={isOpen}
90				onOpenChange={handleOpenChange}
91				delay={delay}
92				{...props}
93			/>
94		</HoverCardInstanceContext.Provider>
95	);
96}
97 
98function HoverCardTrigger({
99	onClick,
100	onPointerDown,
101	onPointerLeave,
102	onPointerEnter,
103	onTouchStart,
104	onTouchEnd,
105	onTouchCancel,
106	...props
107} = {}) {
108	const {
109		setShouldKeepOpen,
110		isPointerOverTriggerRef,
111// … truncated