lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
125 lines • 6.31 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.HoverCardContent = exports.HoverCardTrigger = exports.HoverCard = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const React = __importStar(require("react"));
const utils_1 = require("@/components/lib/utils"); // Ensure this utility is present or replace with className logic
const framer_motion_1 = require("framer-motion"); // Import HTMLMotionProps
const HoverCardContext = React.createContext(undefined);
const HoverCard = ({ children, defaultOpen = false, open: controlledOpen, onOpenChange, openDelay = 700, closeDelay = 300, }) => {
const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
const isControlled = controlledOpen !== undefined;
const open = isControlled ? controlledOpen : uncontrolledOpen;
const setOpen = React.useCallback((value) => {
if (!isControlled) {
setUncontrolledOpen(value);
}
if (onOpenChange) {
const newValue = typeof value === "function" ? value(open) : value;
onOpenChange(newValue);
}
}, [isControlled, onOpenChange, open]);
const openTimerRef = React.useRef(null);
const closeTimerRef = React.useRef(null);
const handleOpen = React.useCallback(() => {
if (closeTimerRef.current) {
clearTimeout(closeTimerRef.current);
closeTimerRef.current = null;
}
if (!open) {
openTimerRef.current = setTimeout(() => {
setOpen(true);
}, openDelay);
}
}, [open, openDelay, setOpen]);
const handleClose = React.useCallback(() => {
if (openTimerRef.current) {
clearTimeout(openTimerRef.current);
openTimerRef.current = null;
}
if (open) {
closeTimerRef.current = setTimeout(() => {
setOpen(false);
}, closeDelay);
}
}, [open, closeDelay, setOpen]);
// Clear timers on unmount
React.useEffect(() => {
return () => {
if (openTimerRef.current)
clearTimeout(openTimerRef.current);
if (closeTimerRef.current)
clearTimeout(closeTimerRef.current);
};
}, []);
return ((0, jsx_runtime_1.jsx)(HoverCardContext.Provider, { value: { open, setOpen }, children: (0, jsx_runtime_1.jsx)("div", { className: "relative inline-block", onMouseEnter: handleOpen, onMouseLeave: handleClose, onFocusCapture: handleOpen, onBlurCapture: handleClose, children: children }) }));
};
exports.HoverCard = HoverCard;
const HoverCardTrigger = ({ children, asChild = false }) => {
// If asChild is true, we just render the child directly.
// The onMouseEnter/Leave/Focus/Blur listeners are on the parent HoverCard div.
if (asChild) {
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
}
// If not asChild, we wrap the children in a div to ensure the HoverCard has a DOM element to attach listeners to.
// This div also needs to be part of the hover/focus interaction, so it's placed inside the HoverCard's event listeners.
// The outer div in HoverCard handles the events, so this div simply renders the content.
return (0, jsx_runtime_1.jsx)("div", { tabIndex: 0, children: children }); // Add tabIndex for keyboard accessibility
};
exports.HoverCardTrigger = HoverCardTrigger;
const HoverCardContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => {
const context = React.useContext(HoverCardContext);
if (!context) {
throw new Error("HoverCardContent must be used within a HoverCard");
}
const { open } = context;
return ((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: open && ( // Conditionally render the motion.div based on `open` state
(0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { ref: ref, initial: { opacity: 0, scale: 0.9, y: -4 }, animate: { opacity: 1, scale: 1, y: 0 }, exit: { opacity: 0, scale: 0.9, y: -4 }, transition: {
type: "spring",
damping: 20,
stiffness: 300
}, className: (0, utils_1.cn)(`absolute z-50 w-64 rounded-md border bg-white
p-4 text-black shadow-md`, className), style: {
top: `calc(100% + ${sideOffset}px)`, // Position below the trigger
left: align === "center" ? "50%" : align === "start" ? "0" : "auto",
right: align === "end" ? "0" : "auto",
transform: align === "center" ? "translateX(-50%)" : "none", // Center horizontally if align="center"
// No need for transform here directly, framer-motion handles it
}, ...props })) }));
});
exports.HoverCardContent = HoverCardContent;
HoverCardContent.displayName = "HoverCardContent";
//# sourceMappingURL=hover-card.js.map