@mantine/hooks/cjs/use-click-outside/use-click-outside.cjs

A collection of 50+ hooks for state and UI management

"use client";
let react = require("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 = (0, react.useRef)(null);
	const eventsList = events || DEFAULT_EVENTS;
	const listener = (0, react.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(",");
	(0, react.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
exports.useClickOutside = useClickOutside;

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