@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
105 lines (104 loc) • 3.5 kB
JavaScript
"use client";
const require_HoverCardGroup = require("./HoverCardGroup/HoverCardGroup.cjs");
let react = require("react");
let _mantine_hooks = require("@mantine/hooks");
let _floating_ui_react = require("@floating-ui/react");
//#region packages/@mantine/core/src/components/HoverCard/use-hover-card.ts
function useHoverCard(settings) {
const [uncontrolledOpened, setUncontrolledOpened] = (0, react.useState)(settings.defaultOpened);
const opened = typeof settings.opened === "boolean" ? settings.opened : uncontrolledOpened;
const withinGroup = (0, react.use)(require_HoverCardGroup.HoverCardGroupContext).withinGroup;
const uid = (0, _mantine_hooks.useId)();
const openTimeout = (0, react.useRef)(-1);
const closeTimeout = (0, react.useRef)(-1);
const targetRef = (0, react.useRef)(null);
const assignTarget = (0, react.useCallback)((node) => {
targetRef.current = node;
}, []);
const clearTimeouts = (0, react.useCallback)(() => {
window.clearTimeout(openTimeout.current);
window.clearTimeout(closeTimeout.current);
}, []);
const onChange = (0, react.useCallback)((_opened) => {
setUncontrolledOpened(_opened);
if (_opened) {
setCurrentId(uid);
settings.onOpen?.();
} else settings.onClose?.();
}, [
uid,
settings.onOpen,
settings.onClose
]);
const { context, refs } = (0, _floating_ui_react.useFloating)({
open: opened,
onOpenChange: onChange
});
const { delay: groupDelay, setCurrentId } = (0, _floating_ui_react.useDelayGroup)(context, { id: uid });
const { getReferenceProps, getFloatingProps } = (0, _floating_ui_react.useInteractions)([
(0, _floating_ui_react.useHover)(context, {
enabled: true,
delay: withinGroup ? groupDelay : {
open: settings.openDelay,
close: settings.closeDelay
}
}),
(0, _floating_ui_react.useRole)(context, { role: "dialog" }),
(0, _floating_ui_react.useDismiss)(context, { enabled: withinGroup })
]);
const openDropdown = (0, react.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 = (0, react.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
]);
const onChangeRef = (0, react.useRef)(onChange);
onChangeRef.current = onChange;
(0, react.useEffect)(() => () => clearTimeouts(), [clearTimeouts]);
(0, react.useEffect)(() => {
if (!opened || withinGroup || typeof IntersectionObserver === "undefined") return;
const node = targetRef.current;
if (!node) return;
const observer = new IntersectionObserver(() => {
if (!node.isConnected || node.getClientRects().length === 0) {
clearTimeouts();
onChangeRef.current(false);
}
});
observer.observe(node);
return () => observer.disconnect();
}, [
opened,
withinGroup,
clearTimeouts
]);
return {
opened,
reference: refs.setReference,
floating: refs.setFloating,
assignTarget,
getReferenceProps,
getFloatingProps,
openDropdown,
closeDropdown
};
}
//#endregion
exports.useHoverCard = useHoverCard;
//# sourceMappingURL=use-hover-card.cjs.map