@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, enabled = true) {
	const ref = useRef(null);
	const eventsList = events || DEFAULT_EVENTS;
	const listener = useEffectEvent((event) => {
		const { target } = event ?? {};
		if (!document.body.contains(target) && target?.tagName !== "HTML") return;
		const path = event.composedPath();
		if (Array.isArray(nodes)) nodes.every((node) => !!node && !path.includes(node)) && callback(event);
		else if (ref.current && !path.includes(ref.current)) callback(event);
	});
	const eventsKey = eventsList.join(",");
	useEffect(() => {
		if (!enabled) return;
		const events = eventsKey.split(",");
		events.forEach((fn) => document.addEventListener(fn, listener));
		return () => {
			events.forEach((fn) => document.removeEventListener(fn, listener));
		};
	}, [eventsKey, enabled]);
	return ref;
}
//#endregion
export { useClickOutside };

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