@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
67 lines (66 loc) • 1.95 kB
JavaScript
"use client";
import { useCallback, useEffect, useRef, useState } from "react";
import { getOverflowAncestors, shift, useFloating } from "@floating-ui/react";
//#region packages/@mantine/core/src/components/Tooltip/TooltipFloating/use-floating-tooltip.ts
function useFloatingTooltip({ offset, position, defaultOpened }) {
const [opened, setOpened] = useState(defaultOpened);
const boundaryRef = useRef(null);
const { x, y, elements, refs, update, placement } = useFloating({
placement: position,
middleware: [shift({
crossAxis: true,
padding: 5,
rootBoundary: "document"
})]
});
const horizontalOffset = placement.includes("right") ? offset : position.includes("left") ? offset * -1 : 0;
const verticalOffset = placement.includes("bottom") ? offset : position.includes("top") ? offset * -1 : 0;
const handleMouseMove = useCallback(({ clientX, clientY }) => {
refs.setPositionReference({ getBoundingClientRect() {
return {
width: 0,
height: 0,
x: clientX,
y: clientY,
left: clientX + horizontalOffset,
top: clientY + verticalOffset,
right: clientX,
bottom: clientY
};
} });
}, [elements.reference]);
useEffect(() => {
if (refs.floating.current) {
const boundary = boundaryRef.current;
boundary.addEventListener("mousemove", handleMouseMove);
const parents = getOverflowAncestors(refs.floating.current);
parents.forEach((parent) => {
parent.addEventListener("scroll", update);
});
return () => {
boundary.removeEventListener("mousemove", handleMouseMove);
parents.forEach((parent) => {
parent.removeEventListener("scroll", update);
});
};
}
}, [
elements.reference,
refs.floating.current,
update,
handleMouseMove,
opened
]);
return {
handleMouseMove,
x,
y,
opened,
setOpened,
boundaryRef,
floating: refs.setFloating
};
}
//#endregion
export { useFloatingTooltip };
//# sourceMappingURL=use-floating-tooltip.mjs.map