@octopusdeploy/design-system-components/dist/src/hooks/useIsHovered.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useIsHovered = useIsHovered;
exports.useOnIsHoveredChanged = useOnIsHoveredChanged;
const react_1 = require("react");
function useIsHovered(element) {
    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
    useOnIsHoveredChanged(element, setIsHovered);
    return isHovered;
}
function useOnIsHoveredChanged(element, onIsHoveredChanged) {
    (0, react_1.useEffect)(() => {
        const container = element && "current" in element ? element.current : element;
        if (container && onIsHoveredChanged) {
            const onMouseMove = (e) => {
                if (!e.composedPath().includes(container)) {
                    onIsHoveredChanged(false);
                    document.removeEventListener("mousemove", onMouseMove);
                }
            };
            const onMouseEnter = () => {
                document.addEventListener("mousemove", onMouseMove);
                onIsHoveredChanged(true);
            };
            const onMouseLeave = () => onIsHoveredChanged(false);
            container.addEventListener("mouseenter", onMouseEnter);
            container.addEventListener("mouseleave", onMouseLeave);
            return () => {
                container.removeEventListener("mouseenter", onMouseEnter);
                container.removeEventListener("mouseleave", onMouseLeave);
                document.removeEventListener("mousemove", onMouseMove);
            };
        }
    }, [onIsHoveredChanged, element]);
}