@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
68 lines (67 loc) • 2.08 kB
JavaScript
"use client";
require("../../../_virtual/_rolldown/runtime.cjs");
let react = require("react");
let _floating_ui_react = require("@floating-ui/react");
//#region packages/@mantine/core/src/components/Tooltip/TooltipFloating/use-floating-tooltip.ts
function useFloatingTooltip({ offset, position, defaultOpened }) {
const [opened, setOpened] = (0, react.useState)(defaultOpened);
const boundaryRef = (0, react.useRef)(null);
const { x, y, elements, refs, update, placement } = (0, _floating_ui_react.useFloating)({
placement: position,
middleware: [(0, _floating_ui_react.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 = (0, react.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]);
(0, react.useEffect)(() => {
if (refs.floating.current) {
const boundary = boundaryRef.current;
boundary.addEventListener("mousemove", handleMouseMove);
const parents = (0, _floating_ui_react.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
exports.useFloatingTooltip = useFloatingTooltip;
//# sourceMappingURL=use-floating-tooltip.cjs.map