@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
81 lines (80 loc) • 2.6 kB
JavaScript
"use client";
import { HoverCardGroupContext } from "./HoverCardGroup/HoverCardGroup.mjs";
import { use, useCallback, useEffect, useRef, useState } from "react";
import { useId as useId$1 } from "@mantine/hooks";
import { useDelayGroup, useDismiss, useFloating, useHover, useInteractions, useRole } from "@floating-ui/react";
//#region packages/@mantine/core/src/components/HoverCard/use-hover-card.ts
function useHoverCard(settings) {
const [uncontrolledOpened, setUncontrolledOpened] = useState(settings.defaultOpened);
const opened = typeof settings.opened === "boolean" ? settings.opened : uncontrolledOpened;
const withinGroup = use(HoverCardGroupContext).withinGroup;
const uid = useId$1();
const openTimeout = useRef(-1);
const closeTimeout = useRef(-1);
const clearTimeouts = useCallback(() => {
window.clearTimeout(openTimeout.current);
window.clearTimeout(closeTimeout.current);
}, []);
const onChange = useCallback((_opened) => {
setUncontrolledOpened(_opened);
if (_opened) {
setCurrentId(uid);
settings.onOpen?.();
} else settings.onClose?.();
}, [
uid,
settings.onOpen,
settings.onClose
]);
const { context, refs } = useFloating({
open: opened,
onOpenChange: onChange
});
const { delay: groupDelay, setCurrentId } = useDelayGroup(context, { id: uid });
const { getReferenceProps, getFloatingProps } = useInteractions([
useHover(context, {
enabled: true,
delay: withinGroup ? groupDelay : {
open: settings.openDelay,
close: settings.closeDelay
}
}),
useRole(context, { role: "dialog" }),
useDismiss(context, { enabled: withinGroup })
]);
const openDropdown = useCallback(() => {
if (withinGroup) return;
clearTimeouts();
if (settings.openDelay === 0 || settings.openDelay === void 0) onChange(true);
else openTimeout.current = window.setTimeout(() => onChange(true), settings.openDelay);
}, [
withinGroup,
clearTimeouts,
settings.openDelay,
onChange
]);
const closeDropdown = useCallback(() => {
if (withinGroup) return;
clearTimeouts();
if (settings.closeDelay === 0 || settings.closeDelay === void 0) onChange(false);
else closeTimeout.current = window.setTimeout(() => onChange(false), settings.closeDelay);
}, [
withinGroup,
clearTimeouts,
settings.closeDelay,
onChange
]);
useEffect(() => () => clearTimeouts(), [clearTimeouts]);
return {
opened,
reference: refs.setReference,
floating: refs.setFloating,
getReferenceProps,
getFloatingProps,
openDropdown,
closeDropdown
};
}
//#endregion
export { useHoverCard };
//# sourceMappingURL=use-hover-card.mjs.map