@mantine/hooks/esm/use-click-outside/use-click-outside.mjs

A collection of 50+ hooks for state and UI management

"use client";
import { useEffect, useEffectEvent, useRef } from "react";
//#region packages/@mantine/hooks/src/use-click-outside/use-click-outside.ts
const DEFAULT_EVENTS = ["mousedown", "touchstart"];
function useClickOutside(callback, events, nodes) {
	const ref = useRef(null);
	const eventsList = events || DEFAULT_EVENTS;
	const listener = useEffectEvent((event) => {
		const { target } = event ?? {};
		if (Array.isArray(nodes)) {
			const shouldIgnore = !document.body.contains(target) && target?.tagName !== "HTML";
			nodes.every((node) => !!node && !event.composedPath().includes(node)) && !shouldIgnore && callback(event);
		} else if (ref.current && !ref.current.contains(target)) callback(event);
	});
	useEffect(() => {
		eventsList.forEach((fn) => document.addEventListener(fn, listener));
		return () => {
			eventsList.forEach((fn) => document.removeEventListener(fn, listener));
		};
	}, []);
	return ref;
}
//#endregion
export { useClickOutside };

//# sourceMappingURL=use-click-outside.mjs.map